@charset "UTF-8";

body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    background-color: rgba(242, 241, 234, 1);
    font-weight: 500;
    font-size: 20px;
    color: #24364f;
    line-height: 1.5;
    overflow-x: hidden;
}

img {
    width: 100%;
    height: auto;
    vertical-align: top;
    transition: all 0.3s;
}

a img:hover {
    opacity: 0.7;
}

iframe,
video {
    width: 100%;
    height: 100%;
}

section {
    position: relative;
    overflow: hidden;
}

.wrapper {
    position: relative;
    display: block;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
}

.show-sp {
    display: none;
}

.maker {
    background: linear-gradient(transparent 60%, #ECD4B4 60%);
}

.asta {
    font-size: 0.6em;
    vertical-align: top;
}

@media (max-width: 750px) {
    body {
        font-size: calc(20vw / 750 * 100);
    }

    .show-pc {
        display: none;
    }

    .show-sp {
        display: block;
    }
}

/* animation */
.fade-in-top,
.fade-in-bottom,
.fade-in-left,
.fade-in-right {
    opacity: 0;
}

.scroll-anime-start.fade-in-top {
    animation: fade-in-top 1s forwards;
}

.scroll-anime-start.fade-in-bottom {
    animation: fade-in-bottom 1s forwards;
}

.scroll-anime-start.fade-in-left {
    animation: fade-in-left 1s forwards;
}

.scroll-anime-start.fade-in-right {
    animation: fade-in-right 1s forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes fade-in-bottom {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


@keyframes fade-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-right-top {
    0% {
        transform: translate(100%, -100%);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fade-in-left-top {
    0% {
        transform: translate(-100%, -100%);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* fv */
.fv {
    position: relative;
    width: 100%;
    height: min(calc(1789vw / 750 * 100), 1789px);
}

.fv-head {
    width: min(calc(562vw / 750 * 100), 562px);
    margin: min(calc(120vw / 750 * 100), 120px) auto 0;
    opacity: 0;
}

.anime-start .fv-head {
    animation: fade-in-bottom 2s forwards;
}

.fv-bubble {
    width: min(calc(348vw / 750 * 100), 348px);
    margin: min(calc(70vw / 750 * 100), 70px) auto 0;
    opacity: 0;
}

.anime-start .fv-bubble {
    animation: fade-in-bottom 2s forwards;
}

.fv-txt {
    width: min(calc(604vw / 750 * 100), 604px);
    margin: min(calc(23vw / 750 * 100), 23px) auto 0;
    opacity: 0;
}

.anime-start .fv-txt {
    animation: fade-in-bottom 2s forwards;
}

.fv-main {
    width: 100%;
    margin: min(calc(42vw / 750 * 100), 42px) auto 0;
    opacity: 0;
}

.anime-start .fv-main {
    animation: fade-in-bottom 2s forwards;
}

.fv-offer {
    width: 100%;
    margin: min(calc(-13vw / 750 * 100), -13px) auto 0;
    opacity: 0;
}

.anime-start .fv-offer {
    animation: fade-in-bottom 2s forwards;
}

.fv-btn {
    width: min(calc(360vw / 750 * 100), 360px);
    margin: min(calc(24vw / 750 * 100), 24px) auto 0;
    cursor: pointer;
}

.fv-line {
    width: min(calc(8vw / 750 * 100), 8px);
    margin: min(calc(70vw / 750 * 100), 70px) auto 0;
}

.fv-bg-figure {
    position: absolute;
    opacity: 0;
}

.fv-bg-figure_01 {
    top: 0;
    right: 0;
    width: min(calc(135vw / 750 * 100), 135px);
}

.anime-start .fv-bg-figure_01 {
    animation: fade-in-right-top 2s forwards;
}

.fv-bg-figure_02 {
    top: min(calc(1140vw / 750 * 100), 1140px);
    left: 0;
    width: min(calc(180vw / 750 * 100), 180px);
}

.anime-start .fv-bg-figure_02 {
    animation: fade-in-left 2s forwards;
}

.fv-bg-figure_03 {
    top: min(calc(1194vw / 750 * 100), 1194px);
    right: 0;
    width: min(calc(153vw / 750 * 100), 153px);
}

.anime-start .fv-bg-figure_03 {
    animation: fade-in-right 2s forwards;
}

.fv-bg-figure_04 {
    top: min(calc(993vw / 750 * 100), 993px);
    left: 0;
    width: min(calc(152vw / 750 * 100), 152px);
}

.anime-start .fv-bg-figure_04 {
    animation: fade-in-left 2s forwards;
}

.fv-bg-figure_05 {
    top: min(calc(947vw / 750 * 100), 947px);
    left: min(calc(99vw / 750 * 100), 99px);
    width: min(calc(98vw / 750 * 100), 98px);
}

.anime-start .fv-bg-figure_05 {
    animation: fade-in-left 2s forwards;
}

.fv-bg-figure_06 {
    top: min(calc(683vw / 750 * 100), 683px);
    left: 0;
    width: min(calc(122vw / 750 * 100), 122px);
}

.anime-start .fv-bg-figure_06 {
    animation: fade-in-left 2s forwards;
}

.fv-bg-figure_07 {
    top: 0;
    left: 0;
    width: min(calc(99vw / 750 * 100), 99px);
}

.anime-start .fv-bg-figure_07 {
    animation: fade-in-left-top 2s forwards;
}

.fv-bg-figure_08 {
    top: min(calc(594vw / 750 * 100), 594px);
    right: min(calc(61vw / 750 * 100), 61px);
    width: min(calc(85vw / 750 * 100), 85px);
}

.anime-start .fv-bg-figure_08 {
    animation: fade-in-right 2s forwards;
}

.fv-bg-figure_09 {
    top: min(calc(282vw / 750 * 100), 282px);
    right: min(calc(30vw / 750 * 100), 30px);
    width: min(calc(91vw / 750 * 100), 91px);
}

.anime-start .fv-bg-figure_09 {
    animation: fade-in-right 2s forwards;
}

.fv-bg-figure_10 {
    top: min(calc(1022vw / 750 * 100), 1022px);
    right: 0;
    width: min(calc(123vw / 750 * 100), 123px);
}

.anime-start .fv-bg-figure_10 {
    animation: fade-in-right 2s forwards;
}

.fv-bg-figure_11 {
    top: min(calc(255vw / 750 * 100), 255px);
    left: min(calc(31vw / 750 * 100), 31px);
    width: min(calc(78vw / 750 * 100), 78px);
}

.anime-start .fv-bg-figure_11 {
    animation: fade-in-left 2s forwards;
}

.fv-bg-figure_12 {
    top: min(calc(734vw / 750 * 100), 734px);
    right: 0;
    width: min(calc(131vw / 750 * 100), 131px);
}

.anime-start .fv-bg-figure_12 {
    animation: fade-in-right 2s forwards;
}

/* sec-q */
.sec-q {
    color: #4C3500;
    height: 0;
    opacity: 0;
    transition: all 0.5s;
    transform: translateY(min(calc(200vw / 750 * 100), 200px));
}

.sec-q.show {
    padding-top: min(calc(142vw / 750 * 100), 142px);
    height: auto;
    opacity: 1;
    transform: translateY(0);
}

.sec-q-head {
    width: min(calc(354vw / 750 * 100), 354px);
    margin: 0 auto;
}

.sec-q-box-q {
    margin-top: min(calc(45vw / 750 * 100), 45px);
}

.sec-q-box-q-txt {
    font-size: min(calc(40vw / 750 * 100), 40px);
    font-weight: bold;
    text-align: center;
}

.sec-q-box-q-txt .small {
    font-size: min(calc(32vw / 750 * 100), 32px);
}

.sec-q-notes {
    width: min(calc(600vw / 750 * 100), 600px);
    margin: 0 auto;
    font-size: min(calc(16vw / 750 * 100), 16px);
}

.q1 .sec-q-point+.sec-q-notes {
    opacity: 0;
}

.q1 .sec-q-point.show+.sec-q-notes {
    opacity: 1;
}

.sec-q-box-q-img {
    margin-top: min(calc(65vw / 750 * 100), 65px);
}

.sec-q-box-a-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: min(calc(600vw / 750 * 100), 600px);
    margin: min(calc(70vw / 750 * 100), 70px) auto min(calc(10vw / 750 * 100), 10px);
}

.q3 .sec-q-box-a-list {
    margin: min(calc(30vw / 750 * 100), 30px) auto min(calc(5vw / 750 * 100), 5px);
}

.sec-q-box-a {
    width: min(calc(290vw / 750 * 100), 290px);
    height: min(calc(104vw / 750 * 100), 104px);
    cursor: pointer;
    opacity: 0;
}

.scroll-anime-start .sec-q-box-a:nth-child(1) {
    animation: fade-in-bottom 1s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(2) {
    animation: fade-in-bottom 1s 0.3s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(3) {
    animation: fade-in-bottom 1s 0.6s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(4) {
    animation: fade-in-bottom 1s 0.9s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(5) {
    animation: fade-in-bottom 1s 1.2s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(6) {
    animation: fade-in-bottom 1s 1.5s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(7) {
    animation: fade-in-bottom 1s 1.8s forwards;
}

.scroll-anime-start .sec-q-box-a:nth-child(8) {
    animation: fade-in-bottom 1s 2.1s forwards;
}

.square .sec-q-box-a {
    width: min(calc(290vw / 750 * 100), 290px);
    height: min(calc(260vw / 750 * 100), 260px);
    margin-bottom: min(calc(20vw / 750 * 100), 20px);
}

.long .sec-q-box-a {
    width: 100%;
    height: min(calc(144vw / 750 * 100), 144px);
    margin-bottom: min(calc(24vw / 750 * 100), 24px);
}

.sec-q-box-a-input {
    display: none;
}

.sec-q-box-a-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ECDCC7;
    width: 100%;
    height: 100%;
    font-size: min(calc(32vw / 750 * 100), 32px);
    font-weight: bold;
    color: #fff;
    border-radius: min(calc(25vw / 750 * 100), 25px);
    text-align: center;
    line-height: 1.5;
}

.square .sec-q-box-a-label {
    border-radius: min(calc(50vw / 750 * 100), 50px);
}

.sec-q-box-a-input:checked+.sec-q-box-a-label {
    background-color: #DBA65F;
}

.sec-q-point {
    background-color: #ECEBE0;
    width: min(calc(600vw / 750 * 100), 600px);
    border-radius: min(calc(50vw / 750 * 100), 50px);
    text-align: center;
    height: 0;
    opacity: 0;
    transform: translateY(min(calc(200vw / 750 * 100), 200px));
}

.sec-q-point.show {
    margin: min(calc(120vw / 750 * 100), 120px) auto min(calc(10vw / 750 * 100), 10px);
    padding: min(calc(45vw / 750 * 100), 45px) 0 min(calc(70vw / 750 * 100), 70px);
    height: auto;
    opacity: 1;
    transform: translateY(0);
}

.sec-q-cnt-point-top {
    background-color: #4C3500;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(calc(148vw / 750 * 100), 148px);
    height: min(calc(36vw / 750 * 100), 36px);
    margin: 0 auto;
    font-size: min(calc(28vw / 750 * 100), 28px);
    font-weight: bold;
    color: #fff;
    border-radius: min(calc(10vw / 750 * 100), 10px);
    line-height: 1;
}

.sec-q-cnt-point-head {
    margin-top: min(calc(40vw / 750 * 100), 40px);
    font-size: min(calc(36vw / 750 * 100), 36px);
    font-weight: bold;
    line-height: 1.7;
}

.sec-q-cnt-point-txt {
    margin-top: min(calc(50vw / 750 * 100), 50px);
    font-size: min(calc(24vw / 750 * 100), 24px);
    line-height: 2;
}

.sec-q-cnt-point-img {
    width: min(calc(472vw / 750 * 100), 472px);
    margin: min(calc(75vw / 750 * 100), 75px) auto min(calc(70vw / 750 * 100), 70px);
}

.q3 .sec-q-cnt-point-img {
    width: min(calc(530vw / 750 * 100), 530px);
    margin: min(calc(59vw / 750 * 100), 59px) auto min(calc(70vw / 750 * 100), 70px) min(calc(63vw / 750 * 100), 63px);
}

/* cv */
.cv {
    position: relative;
    width: 100%;
    margin-top: min(calc(25vw / 750 * 100), 25px);
    height: 0;
    opacity: 0;
    transition: all 0.5s;
}

.cv.show {
    height: min(calc(1706vw / 750 * 100), 1706px);
    opacity: 1;
}

.cv-line {
    width: min(calc(8vw / 750 * 100), 8px);
    margin: min(calc(70vw / 750 * 100), 70px) auto 0;
}

.cv-top {
    background-color: #4C3500;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(calc(223vw / 750 * 100), 223px);
    height: min(calc(36vw / 750 * 100), 36px);
    margin: min(calc(50vw / 750 * 100), 50px) auto 0;
    font-size: min(calc(28vw / 750 * 100), 28px);
    font-weight: bold;
    color: #fff;
}

.cv-head {
    margin-top: min(calc(55vw / 750 * 100), 55px);
    font-size: min(calc(40vw / 750 * 100), 40px);
    font-weight: bold;
    color: #4C3500;
    text-align: center;
}

.cv-main {
    width: 100%;
    margin: min(calc(72vw / 750 * 100), 72px) auto 0;
}

.cv-offer {
    width: min(calc(580vw / 750 * 100), 580px);
    margin: min(calc(-29vw / 750 * 100), -29px) auto 0 min(calc(76vw / 750 * 100), 76px);
}

.cv-btn {
    position: relative;
    width: min(calc(600vw / 750 * 100), 600px);
    margin: min(calc(35vw / 750 * 100), 35px) auto 0;
    z-index: 1;
}

.cv-bg-figure {
    position: absolute;
}

.cv-bg-figure_01 {
    top: 0;
    right: 0;
    width: min(calc(135vw / 750 * 100), 135px);
}

.cv-bg-figure_02 {
    top: min(calc(1360vw / 750 * 100), 1360px);
    left: 0;
    width: min(calc(180vw / 750 * 100), 180px);
}

.cv-bg-figure_03 {
    top: min(calc(1414vw / 750 * 100), 1414px);
    right: min(calc(-11vw / 750 * 100), -11px);
    width: min(calc(153vw / 750 * 100), 153px);
}

.cv-bg-figure_04 {
    top: min(calc(1232vw / 750 * 100), 1232px);
    left: 0;
    width: min(calc(152vw / 750 * 100), 152px);
}

.cv-bg-figure_05 {
    top: min(calc(500vw / 750 * 100), 500px);
    right: min(calc(-4vw / 750 * 100), -4px);
    width: min(calc(98vw / 750 * 100), 98px);
}

.cv-bg-figure_06 {
    top: min(calc(751vw / 750 * 100), 751px);
    left: min(calc(-29vw / 750 * 100), -29px);
    width: min(calc(138vw / 750 * 100), 138px);
}

.cv-bg-figure_07 {
    top: min(calc(1065vw / 750 * 100), 1065px);
    left: min(calc(-5vw / 750 * 100), -5px);
    width: min(calc(99vw / 750 * 100), 99px);
}

.cv-bg-figure_08 {
    top: min(calc(320vw / 750 * 100), 320px);
    right: min(calc(35vw / 750 * 100), 35px);
    width: min(calc(85vw / 750 * 100), 85px);
}

.cv-bg-figure_09 {
    top: min(calc(282vw / 750 * 100), 282px);
    right: min(calc(30vw / 750 * 100), 30px);
    width: min(calc(91vw / 750 * 100), 91px);
}

.cv-bg-figure_10 {
    top: min(calc(1223vw / 750 * 100), 1223px);
    right: min(calc(-9vw / 750 * 100), -9px);
    width: min(calc(123vw / 750 * 100), 123px);
}

.cv-bg-figure_12 {
    top: min(calc(971vw / 750 * 100), 971px);
    right: 0;
    width: min(calc(91vw / 750 * 100), 91px);
}

.cv-bg-figure_13 {
    top: min(calc(255vw / 750 * 100), 255px);
    left: min(calc(27vw / 750 * 100), 27px);
    width: min(calc(100vw / 750 * 100), 100px);
}

/* footer */
.footer {
    background-color: #C4D8C5;
    margin-top: min(calc(50vw / 750 * 100), 50px);
    padding: min(calc(30vw / 750 * 100), 30px) min(calc(30vw / 750 * 100), 30px);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-link-item {
    font-size: min(calc(16vw / 750 * 100), 16px);
    color: #fff;
}

.footer-link-item+.footer-link-item {
    margin-top: min(calc(10vw / 750 * 100), 10px);
}

.footer-logo {
    width: min(calc(196vw / 750 * 100), 196px);
}