@charset "UTF-8";



html {

    font-size: 100%;

    overflow-x: hidden;

    scroll-behavior: smooth;

}



body {

    color: #272726;

    font-family: "Zen Maru Gothic", sans-serif;

}



a {

    color: #272726;

    text-decoration: none;

    transition: all 0.3s ease;

}



a:hover {

    opacity: 0.7;

}



img {

    max-width: 100%;

    vertical-align: bottom;

}



li {

    list-style: none;

}



.conainer {

    max-width: 390px;

    background-color: #fff;

    margin: 0 auto;

}



.section-title {

    font-size: 24px;

    font-weight: bold;

    line-height: 1.6;

    padding: 40px 0;

    text-align: center;

}



.section-title.side-line {

    position: relative;

}



/* .section-title.side-line::before,

.section-title.side-line::after {

    content: "";

    width: 50px;

    height: 6px;

    background-color: #dcd6d8;

    position: absolute;

} */

.section-title.side-line::before,

.section-title.side-line::after {

    content: "";

    width: 50px;

    height: 6px;

    background-color: #dcd6d8;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 10px;

    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);

}

.section-title.side-line::before {

    border-radius: 30px 0 0 30px;

    top: 50%;

    left: calc(50% - 160px);

}



.section-title.side-line::after {

    border-radius: 0 30px 30px 0;

    top: 50%;

    left: calc(50% + 110px);

}



/*-------------------------------------------

Header

-------------------------------------------*/

#header {

    position: relative;

}



#header .tagline {

    font-size: 28px;

    font-weight: bold;

    position: relative;

    text-align: center;

    z-index: 10;

    margin-bottom: 20px;

}



#header .mv {

    /* margin: -20px -20px 20px 0; */

    margin: -20px -45px -20px 100px;

}



#header .description {

    border-left: solid 1px #272726;

    font-size: 18px;

    line-height: 1.6;

    padding-left: 10px;

    position: absolute;

    top: 260px;

}

/* #header .description {

    border-left: solid 4px #F5D2CE;

    background-color: #FFF4F2;

    padding: 10px;

    border-radius: 10px;

    font-size: 18px;

    line-height: 1.6;

    position: absolute;

    top: 260px;

} */



#header .dl {

    display: flex;

    justify-content: center;

}



.header-top {

    padding: 20px;

    background-color: #dcd6d8;

}



.header-top .head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

}



.header-top .head .logo a {

    display: block;

    line-height: 1px;

}



.header-top .head .job {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background-color: #fff;

    border: solid 1px #707070;

    border-radius: 30px;

    font-size: 12px;

    line-height: 1;

    padding: 15px 20px;

}



/*-------------------------------------------

suggestion

-------------------------------------------*/

#suggestion .section-title {

    position: relative;

}



#suggestion .section-title .img-left {

    position: absolute;

    top: 47px;

    left: calc(50% - 150px);

}



#suggestion .section-title .img-right {

    position: absolute;

    top: 54px;

    left: calc(50% + 100px);

}



#suggestion .img-area {

    background-color: #dcd6d8;

    padding-top: 150px;

    position: relative;

}



#suggestion .img-area .text {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background-color: #fff;

    border: solid 1px #707070;

    border-radius: 30px;

    line-height: 1;

    padding: 10px 20px;

    opacity: 0;

}



#suggestion .img-area .t1 {

    position: absolute;

    top: 30px;

    left: 40px;

}



#suggestion .img-area .t2 {

    position: absolute;

    top: 80px;

    left: 80px;

}


#suggestion .img-area .t3 {

    position: absolute;

    top: 130px;

    left: 200px;

}



#suggestion .img-area img {

    max-width: 50%;

}



/*-------------------------------------------

feature

-------------------------------------------*/

#feature .head-text {

    line-height: 1.6;

    margin-bottom: 40px;

    text-align: center;

}



#feature .item {

    padding: 0 20px 40px 20px;

}



#feature .item .title-area {

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 60px 60px 0 0;

    padding: 10px 0;

    margin-bottom: 20px;

}



#feature .item .title-area .no {

    margin-right: 30px;

}



#feature .item .title-area .title {

    font-size: 20px;

    font-weight: bold;

    line-height: 1.4;

}



#feature .item .text {

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 20px;

    text-align: justify;

}



#feature .item .img {

    text-align: center;

}



#feature .item1 {

    background: linear-gradient(-20deg, rgba(249, 183, 116, 0.5) 0%, rgba(249, 183, 116, 0.5) 32%, #fff 32%, #fff 100%);

    margin-bottom: 60px;

}



#feature .item2 {

    background: linear-gradient(20deg, rgba(198, 232, 186, 0.5) 0%, rgba(198, 232, 186, 0.5) 32%, #fff 32%, #fff 100%);

    margin-bottom: 60px;

}



#feature .item3 {

    background: linear-gradient(-20deg, rgba(243, 191, 214, 0.5) 0%, rgba(243, 191, 214, 0.5) 32%, #fff 32%, #fff 100%);

}



#feature .item1 .title-area {

    background-color: #F7DAB8;

}



#feature .item2 .title-area {

    background-color: #E3F3DD;

}



#feature .item3 .title-area {

    background-color: #F9DFEB;

}



/* #feature .item2 .img {

  max-width: 250px;

  margin: 0 auto;

}

#feature .item3 .img {

  max-width: 230px;

  margin: 0 auto;

} */



/*-------------------------------------------

case

-------------------------------------------*/

#case {

    /* background: linear-gradient(83deg, rgba(171, 221, 255, 0.5) 0%, rgba(171, 221, 255, 0.5) 52%, #fff 52%, #fff 100%); */

    background: linear-gradient(83deg, #BEE1D9 0%, #BEE1D9 52%, #fff 52%, #fff 100%);

    padding-bottom: 60px;

    text-align: center;

}



#case .item {

    padding: 0 20px;

    margin-bottom: 60px;

}



#case .item:last-of-type {

    margin-bottom: 0;

}



#case .item .no {

    background-color: #272726;

    color: #fff;

    display: inline-block;

    font-weight: bold;

    line-height: 1;

    padding: 3px 10px 6px 10px;

    margin-bottom: 15px;

}



#case .item .title {

    font-size: 20px;

    font-weight: bold;

    line-height: 1.6;

    margin-bottom: 20px;

}



#case .item .img {

    border: solid 4px #fff;

    border-radius: 20px;

    margin-bottom: 20px;

}



#case .item .img img {

    border-radius: 20px;

}



#case .item .text {

    height: 80px;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 20px;

    overflow-y: hidden;

    text-align: justify;

}



#case .item .readmore {

    text-align: right;

}



#case .item .readmore img {

    cursor: pointer;

}



/*-------------------------------------------

recommend

-------------------------------------------*/

#recommend {

    padding-top: 60px;

    position: relative;

}



#recommend .check {

    animation: flash 2s ease-in-out infinite;

    position: absolute;

    top: 60px;

    left: 30px;

}



@keyframes flash {

    0% {

        opacity: 0;

    }



    15% {

        opacity: 1;

    }



    30% {

        opacity: 0;

    }



    45% {

        opacity: 1;

    }

}



#recommend .table-area {

    font-size: 15px;

    margin-bottom: 10px;

    overflow: scroll;

    text-align: center;

}



#recommend .table-area table {

    width: 840px;

    border-collapse: collapse;

    border-spacing: 0;

}



#recommend .table-area th,

#recommend .table-area td {

    border-bottom: solid 1px #dee2e6;

    padding: 20px 10px;

}



#recommend .table-area thead th {

    width: 140px;

}



#recommend .table-area tbody tr:nth-child(1) th,

#recommend .table-area tbody tr:nth-child(1) td {

    color: #e533bb;

    font-weight: bold;

}



#recommend .table-area tbody th,

#recommend .table-area tbody td {

    border-right: solid 1px #dee2e6;

}



#recommend .table-area tbody td span {

    font-size: 14px;

}



#recommend .table-area tbody td:nth-child(even) {

    background-color: #f7f9f9;

}



#recommend .note {

    color: #888;

    font-size: 12px;

    margin-left: 20px;

}



/* ここから */

.recommend-section {

    padding: 60px 20px;

    background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);

}



.card-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: center;

}



.card {

    background: #fff;

    border: 2px solid #ddd;

    border-radius: 20px;

    padding: 20px;

    max-width: 360px;

    width: 100%;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.card-title {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 15px;

    text-align: center;

}



.card-points {

    font-size: 14px;

    line-height: 1.8;

    list-style: none;

    padding: 0;

}



.card-points li {

    display: flex;

    align-items: center;

}



.icon {

    margin-right: 8px;

}



.cafe-work {

    border-color: #f5d2ce;

    background: #fffaf8;

}



.competitor {

    border-color: #dcd6d8;

    background: #f9f9f9;

}



/* モバイル対応 */

/* @media (min-width: 600px) {

    .card-list {

        flex-direction: row;

        justify-content: center;

    }

} */



/* ここまで */

/*-------------------------------------------

interview

-------------------------------------------*/

#interview {

    /* background: linear-gradient(83deg, #fff 0%, #fff 52%, rgba(230, 131, 254, 0.5) 52%, rgba(230, 131, 254, 0.5) 100%); */

    background: linear-gradient(83deg, #fff 0%, #fff 52%, #F5D2CE 52%, #F5D2CE 100%);

    padding: 0 20px 60px 20px;

}



#interview .item {

    display: block;

    margin-bottom: 50px;

    opacity: 0;

}



#interview .item:last-child {

    margin-bottom: 0;

}



#interview .item .face {

    width: 100px;

    height: 100px;

    margin: 0 auto -50px auto;

    position: relative;

    z-index: 10;

}



#interview .item .face img {

    border: solid 4px #fff;

    border-radius: 50%;

}



#interview .item .text {

    background-image: url("../img/top/interview-bg.webp");

    background-color: #e7e8ea;

    background-size: cover;

    border: solid 4px #fff;

    border-radius: 20px;

    font-size: 18px;

    font-weight: bold;

    line-height: 1.6;

    padding: 60px 25px 20px 25px;

    text-align: center;

    position: relative;

}



#interview .item .text .arrow {

    position: absolute;

    top: 15px;

    right: 15px;

}



/*-------------------------------------------

appeal

-------------------------------------------*/

.appeal {

    background-color: #dcd6d8;

    padding-top: 40px;

}



.appeal .title {

    font-size: 24px;

    font-weight: bold;

    margin-bottom: 30px;

    text-align: center;

}



.appeal .img {

    max-width: 170px;

    margin-top: -40px;

    position: relative;

    left: 170px;

}



.appeal .balloon {

    position: relative;

    text-align: center;

    z-index: 10;

    opacity: 0;

}



.appeal .balloon .roll-text {

    color: #f5b2ab;

    font-size: 24px;

    font-weight: bold;

    position: absolute;

    top: 16px;

    left: 0;

    right: 0;

    z-index: 10;

    opacity: 0;

    animation: fade 15s infinite;

}



.appeal .balloon .roll-text.text1 {

    animation-delay: 0s;

}



.appeal .balloon .roll-text.text2 {

    animation-delay: 5s;

}



.appeal .balloon .roll-text.text3 {

    animation-delay: 10s;

}



@keyframes fade {

    0% {

        opacity: 0;

    }



    10% {

        opacity: 0;

    }



    30% {

        opacity: 1;

    }



    45% {

        opacity: 0;

    }



    100% {

        opacity: 0;

    }

}



/*-------------------------------------------

scroll

-------------------------------------------*/

.scroll {

    width: 10px;

    padding: 40px 0 30px 0;

    margin: 0 auto;

}



.scroll span {

    width: 10px;

    height: 10px;

    background-color: #fff;

    border: 1px solid #ccc;

    border-radius: 50%;

    margin: 15px 0;

    display: block;

    animation: scroll 2s infinite;

}



.scroll span:nth-of-type(1) {

    animation-delay: 0s;

}



.scroll span:nth-of-type(2) {

    animation-delay: 0.15s;

}



.scroll span:nth-of-type(3) {

    animation-delay: 0.3s;

}



.scroll span:nth-of-type(4) {

    animation-delay: 0.45s;

}



.scroll span:nth-of-type(5) {

    animation-delay: 0.6s;

}



@keyframes scroll {

    50% {

        background: #F5D2CE;

    }

}



/*-------------------------------------------

download（共通）

-------------------------------------------*/

.dl-area {

    padding: 50px 20px;

    text-align: center;

}



.dl-area .text-ja {

    font-size: 30px;

    font-weight: bold;

    margin-bottom: 30px;

}



.dl-area .text-en {

    font-size: 14px;

    margin-bottom: 30px;

}



.dl-area .dl {

    display: flex;

    justify-content: center;

}



.dl {

    display: flex;

    gap: 12px;

    /* バッジの間隔（お好みで調整） */

    align-items: center;

    /* 垂直中央揃え */

}



.dl a img {

    height: 50px;

    /* 高さを基準に統一 */

    width: auto;

    /* アスペクト比維持 */

    border-radius: 8px;

    /* AppStoreバッジだけ丸いので軽く合わせる */

}





/*-------------------------------------------

animation（共通）

-------------------------------------------*/

.bound {

    animation: fadeUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;

}



@keyframes fadeUp {

    0% {

        transform: translateY(50px);

        opacity: 0.2;

    }



    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



/*-------------------------------------------

Footer

-------------------------------------------*/

#footer {

    background-color: #fff;

    text-align: center;

}



#footer .inner {

    padding: 0 20px;

}



#footer .title-ja {

    font-size: 32px;

    font-weight: bold;

    margin-bottom: 30px;

}



#footer .title-en {

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 20px;

}



#footer .text {

    font-size: 14px;

    margin-bottom: 10px;

    text-align: center;

}



#footer .icon {

    max-width: 68px;

    margin: 0 auto 5px auto;

}



#footer .name {

    font-weight: bold;

    margin-bottom: 20px;

}



#footer .dl-text {

    font-size: 12px;

    margin: 20px 0;

}



#footer .dl {

    display: flex;

    justify-content: center;

    margin-bottom: 35px;

}



#footer .page-top {

    width: 50px;

    height: 50px;

    background-color: #fff;

    border: solid 1px #272726;

    border-radius: 50%;

    margin: 0 auto;

    position: relative;

    top: 25px;

    cursor: pointer;

}



#footer .page-top::after {

    content: "";

    width: 14px;

    height: 14px;

    border-right: solid 1px #333;

    border-top: solid 1px #333;

    margin: 0 auto;

    transform: rotate(-45deg);

    position: absolute;

    top: 22px;

    left: 0;

    right: 0;

}



#footer .copyright {

    background-color: #dcd6d8;

    color: #333;

    font-size: 12px;

    padding: 40px 0 20px 0;

}



/*-------------------------------------------

PC

-------------------------------------------*/

@media screen and (min-width: 391px) {

    body {

        background-image: url("../img/common/bg.webp");

        background-color: rgba(255, 255, 255, 0.7);

        background-blend-mode: lighten;

        background-size: cover;

        background-attachment: fixed;

    }



    .container {

        box-shadow: 0 0 30px #ccc;

    }

}