@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;
}
/*-------------------------------------------
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; */
    color: #e533bb;
    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;
}

/*-------------------------------------------
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;
    }
}