@charset "utf-8";

    :root {
        --size_s: 30px;
        --size_m: 60px;
        --size_l: 80px;
        --size_ll: 100px;
    }

    :root {
        --blue: #f8fafb;
        --gray: #4e4e4e;
    }

    :root {
        --font_s: 18px;
        --font_m: 24px;
        --font_l: 36px;
    }

    .cartjs_product_table {
        display: none;
    }

    .cartjs_cart_in input {
        width: 100%;
        height: auto;
        filter: drop-shadow(0px 5px 8px #aaa);
    }

    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }

    .serif {
        font-family: serif;
    }

    sup {
        font-size: 50%;
        vertical-align: super;
    }

    .center {
        text-align: center;
    }

    .normal {
        font-weight: normal;
    }

    .shadow {
        filter: drop-shadow(0px 5px 8px #aaa);
    }

    a:hover,
    .cartjs_cart_in input:hover {
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
        transition: all 0.3s;
    }

    body {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        font-family: "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        color: var(--gray);
    }

    header {
        margin-top: var(--size_s);
    }

    header a {
        transition: all 0.3s;
    }

    #all_container {
        margin-top: var(--size_s);
    }

    #sec01 {
        position: relative;
    }

    #sec01::before {
        position: absolute;
        content: "";
        right: 0;
        top: 113px;
        background-color: var(--blue);
        width: 975px;
        height: 820px;
        z-index: -1;
    }

    #sec01 p {
        margin-top: var(--size_s);
        font-size: 30px;
        line-height: 2.26;
        padding-bottom: 20px;
        font-weight: bold;
    }

    #sec01 p span:first-of-type {
        display: inline-block;
        background: #fff;
        padding: 0 22px;
    }

    #sec01 p span:last-of-type {
        font-size: 40px;
    }

    #sec02 {
        margin-top: 70px;
    }

    #sec02 .wrapper {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 0 53px;
    }

    #sec02 .wrapper p:first-of-type,
    #sec02 .wrapper p:nth-of-type(2) {
        font-size: 30px;
        line-height: 1;
    }

    #sec02 .wrapper p:nth-of-type(2) {
        margin-top: var(--size_s);
    }

    #sec02 .wrapper span.border {
        border: 1px solid var(--gray);
        ;
        padding: 2px 6px;
        margin-left: 5px;
    }

    #sec02 .wrapper span.note {
        font-size: 16px;
    }

    #sec02 .wrapper p.note {
        margin-top: var(--size_s);
        padding: 15px 20px 19px;
        background: var(--blue);
    }

    #sec02 .wrapper .price {
        margin-top: var(--size_s);
        display: flex;
        justify-content: space-between;
        gap: 0 35px;
    }

    #sec02 .wrapper .price p {
        font-size: var(--font_m);
        line-height: 2;
    }

    #sec03 {
        margin-top: var(--size_ll);
    }

    #sec03 h2 {
        color: #fa5da2;
        font-size: 48px;
    }

    #sec03 p {
        margin-top: 34px;
        font-size: var(--font_m);
        line-height: 2;
    }

    #sec03 p span {
        font-size: var(--font_l);
        font-weight: bold;
    }

    #sec04 {
        position: relative;
        margin-top: var(--size_ll);
        background: url(../images/sec03_img01.png) top center / auto no-repeat;
        padding-top: 60px;
    }

    #sec04::before {
        position: absolute;
        content: "";
        left: 0;
        top: 156px;
        background-color: var(--blue);
        width: 1080px;
        height: 500px;
        z-index: -1;
    }

    #sec04 h2 span {
        display: inline-block;
        background: #fff;
        padding: 3px 40px;
        margin-left: 50px;
    }

    #sec04 h2 span:first-of-type {
        color: #42a6cb;
        font-size: var(--font_l);
    }

    #sec04 h2 span:nth-of-type(2) {
        margin-top: 10px;
        font-size: var(--font_m);
        padding: 7px 40px;
    }

    #sec04 h2 span:nth-of-type(3) {
        margin-top: 10px;
        font-size: var(--font_l);
    }

    #sec04 .wrapper {
        margin-top: 130px;
        padding: 0 50px;
        display: flex;
        justify-content: space-between;
        gap: 0 116px;
        font-size: var(--font_s);
        line-height: 2;
        letter-spacing: .1em;
        text-align: justify;
    }

    #sec04 .wrapper p:last-of-type {
        margin-top: 24px;
        font-size: 12px;
        line-height: 1.5;
        padding-left: 1em;
        text-indent: -1em;
        letter-spacing: .05em;
    }

    #sec04 .wrapper figure {
        flex-shrink: 0;
    }

    #cv_area {
        margin-top: 110px;
        transition: all 0.3s;
    }

    #cv_area:hover {
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
        transition: all 0.3s;
    }

    #sec05 {
        margin-top: var(--size_l);
        letter-spacing: .1em;
    }

    #sec05 h2 {
        display: flex;
        align-items: center;
        font-size: var(--font_l);
    }

    #sec05 h2:before,
    #sec05 h2:after {
        content: "";
        height: 1px;
        flex-grow: 1;
        background-color: #666;
    }

    #sec05 h2:before {
        margin-right: 1rem;
    }

    #sec05 h2:after {
        margin-left: 1rem;
    }

    #sec05 .accordion_wrapper {
        padding: 0 50px;
    }

    #sec05 .accordion_wrapper:last-of-type {
        padding-bottom: 58px;
        border-bottom: 1px solid var(--gray);
        ;
    }

    #sec05 .toggleBtn {
        border: 1px solid var(--gray);
        ;
        padding: 12.5px 0 12.5px 30px;
        font-size: var(--font_m);
        margin: 50px 0 0;
    }

    #sec05 .toggleBtn:not(.toggleBtn_sp_only) {
        cursor: pointer;
    }

    #sec05 .toggleBtn {
        position: relative;
    }

    #sec05 .toggleBtn .icon_plus {
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        right: 30px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    #sec05 .toggleBtn_sp_only {
        cursor: auto;
        pointer-events: none;
    }

    #sec05 .toggleBtn_sp_only .icon_plus {
        display: none;
    }

    #sec05 .toggleBtn .icon_plus::before,
    #sec05 .toggleBtn .icon_plus::after {
        position: absolute;
        display: block;
        background: var(--gray);
        ;
        width: 20px;
        height: 3px;
        content: "";
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    #sec05 .toggleBtn .icon_plus::before {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        top: 0;
        bottom: 0;
    }

    #sec05 .toggleBtn.open .icon_plus::before {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        top: 0;
        bottom: 0;
    }

    #sec05 .toggleArea {
        display: none;
    }

    #sec05 .toggleArea_sp_only {
        display: block;
    }

    #sec05 .list_block {
        display: flex;
        justify-content: space-between;
        margin-top: var(--size_s);
        gap: 0 20px;
    }

    #sec05 .list_block h3 {
        background: var(--gray);
        padding: 19px 0;
        color: #fff;
        font-size: var(--font_m);
    }

    #sec05 .list_block h3 span {
        font-size: 16px;
    }

    #sec05 .list_block ol {
        font-size: var(--font_s);
        padding: 0 0 0 29px;
    }

    #sec05 .list_block ol li {
        list-style-type: decimal;
        margin-top: 25px;
    }

    #sec05 .desc_block {
        margin-top: 33px;
        background: var(--blue);
        display: flex;
        flex-direction: row-reverse;
        text-align: justify;
        padding: 30px;
        gap: 0 45px;
    }

    #sec05 div.desc_block:nth-of-type(1) {
        flex-direction: row;
        align-items: center;
        background: none;
    }

    #sec05 .desc_block figure {
        flex-shrink: 0;
    }

    #sec05 .desc_block h3 {
        margin-top: 28px;
        font-size: var(--font_m);
    }

    #sec05 .desc_block p {
        margin-top: 15px;
        font-size: var(--font_s);
        line-height: 1.3;
    }

    #sec05 .desc_block p.note {
        margin-top: 0;
        font-size: 12px;
        text-indent: -1em;
        padding-left: 1em;
    }

    #sec06 {
        margin-top: 113px;
        background: url(../images/sec06_img02.png) top center / cover no-repeat;
        padding-bottom: 70px;
    }

    #sec06 h2 {
        padding-top: var(--size_l);
    }

    #sec06 h2 p {
        margin-top: 18px;
        font-size: var(--font_s);
    }

    #sec06 .voicebox_wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 53px 50px 0;
        gap: 25px;
    }

    #sec06 .voicebox {
        background: #fff;
        padding: 32px 0;
        text-align: justify;
        width: 48%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    #sec06 .voicebox .text_area {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    #sec06 .voicebox:nth-child(-n+2) .text_area{
        height: 460px;
    }

    #sec06 .voicebox:nth-child(n+3) .text_area{
        height: 410px;
    }

    #sec06 .voicebox .text_area p:last-of-type {
        height: 169px;
    }

    #sec06 .voicebox h3 {
        padding: 15px 41px 15px 32px;
        background: #081981;
        color: #fff;
        width: fit-content;
        font-size: var(--font_s);
        text-align: center;
    }

    #sec06 .voicebox h3 span {
        color: #fff600;
    }

    #sec06 p {
        margin-top: var(--size_s);
        font-size: 15px;
        padding: 0 32px;
    }

    #sec06 p span {
        font-weight: bold;
    }

    #sec06 .voicebox p:last-of-type {
        background: var(--blue);
        padding: 32px;
        margin: 30px 32px 0;
    }

    #sec06 .lasty p {
        font-size: var(--font_l);
        font-weight: bold;
    }

    #sec06 .lasty a {
        display: block;
        margin: 30px auto 0;
        width: fit-content;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-size: var(--font_m);
        font-weight: bold;
        background: #fd8dbd;
        padding: 13px 115px;
        transition: all 0.3s;
    }

    #sec07 {
        margin: 60px auto 30px;
    }

    footer {
        padding: 100px 0 35px;
    }

    /*スマホ
------------------------------*/

    @media screen and (max-width: 750px) {
        :root {
            --size_s: 15px;
            --size_m: 30px;
            --size_l: 40px;
            --size_ll: 100px;
        }

        :root {
            --font_s: 18px;
            --font_m: 24px;
            --font_l: 36px;
        }

        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        .shadow {
            filter: drop-shadow(0px 2px 4px #aaa);
        }

        body {
            width: auto;
            max-width: none;
        }

        header,
        #sec02 .wrapper,
        #sec03,
        #sec05,
        #cv_area,
        #sec06 .lasty {
            padding: 0 10px;
        }

        #sec01::before {
            content: none;
        }

        #sec02 {
            margin-top: 35px;
        }

        #sec02 .wrapper {
            flex-flow: column;
            justify-content: center;
            padding: 15px 10px 12px;
        }

        #sec02 .desc {
            margin-top: var(--font_s);
        }

        #sec02 .wrapper p:first-of-type,
        #sec02 .wrapper p:nth-of-type(2) {
            font-size: 18px;
            line-height: 1.5;
        }

        #sec02 .wrapper span.note {
            font-size: 14px;
        }

        #sec02 .wrapper .price {
            justify-content: center;
            gap: 0 17px;
        }

        #sec02 .wrapper .price p {
            font-size: 16px;
            line-height: 1.8;
        }

        #sec02 .wrapper .price figure {
            width: 55%;
        }

        #sec03 {
            margin-top: var(--size_ll);
        }

        #sec03 h2 {
            font-size: 28px;
        }

        #sec03 p {
            margin-top: 15px;
            font-size: var(--font_s);
            line-height: 1.8;
        }

        #sec03 p span {
            font-size: var(--font_m);
        }

        #sec04 {
            margin-top: var(--size_ll);
            background: none;
            padding-top: 0;
        }

        #sec04::before {
            content: none;
        }

        #sec04 .wrapper {
            padding-top: 30px;
            margin-top: 0;
            background: var(--blue);
            padding: 30px 20px 15px;
            flex-flow: column;
            align-items: center;
            gap: 0 10px;
            font-size: var(--font_s);
            line-height: 1.5;
            text-align: justify;
        }

        #sec04 .wrapper p:last-of-type {
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.5;
        }

        #sec04 .wrapper figure {
            width: 50%;
            margin-top: var(--size_m);
        }

        #cv_area {
            margin-top: 55px;
        }

        #sec05 h2 {
            font-size: var(--font_m);
        }

        #sec05 h2:before,
        #sec05 h2:after {
            content: "";
            height: 1px;
            flex-grow: 1;
        }

        #sec05 h2:before {
            margin-right: 0.5rem;
        }

        #sec05 h2:after {
            margin-left: 0.5rem;
        }

        #sec05 .accordion_wrapper {
            padding: 0
        }

        #sec05 .accordion_wrapper:last-of-type {
            padding-bottom: 30px;
        }

        #sec05 .toggleBtn {
            padding: 12.5px 0 12.5px 15px;
            font-size: 18px;
            margin: 25px 0 0;
        }

        #sec05 .toggleBtn .icon_plus {
            width: 20px;
            height: 20px;
            right: 20px;
        }

        #sec05 .toggleBtn .icon_plus::before,
        #sec05 .toggleBtn .icon_plus::after {
            width: 15px;
            height: 2px;
        }

        #sec05 .list_block {
            flex-flow: column;
            ;
            gap: 20px 0;
        }

        #sec05 .list_block h3 {
            padding: 8px 0;
            font-size: var(--font_s);
        }

        #sec05 .list_block h3 span {
            font-size: 12px;
        }

        #sec05 .list_block ol {
            font-size: 16px;
            padding: 0 0 0 29px;
        }

        #sec05 .list_block ol li {
            margin-top: 10px;
            line-height: 1.5;
        }

        #sec05 .desc_block {
            margin-top: 20px;
            flex-direction: column-reverse;
            align-items: center;
            padding: 15px;
        }

        #sec05 div.desc_block:nth-of-type(1) {
            flex-direction: column-reverse;
            align-items: center;
            margin-top: 10px;
        }

        #sec05 .desc_block h3 {
            margin-top: 20px;
            font-size: 20px;
        }

        #sec05 .desc_block p {
            margin-top: 5px;
            font-size: 16px;
            line-height: 1.5;
        }

        #sec05 div.desc_block:nth-of-type(1) p {
            margin-top: 15px;
        }

        #sec06 {
            margin-top: 60px;
            background: url(../images/sec06_img02_sp.png) top center / contain no-repeat;
            padding-bottom: 0;
        }

        #sec06 h2 p {
            margin-top: 10px;
        }

        #sec06 .voicebox_wrapper {
            flex-flow: column;
            flex-wrap: nowrap;
            margin: 25px 10px 0;
            gap: 25px;
        }

        #sec06 .voicebox {
            padding: 30px 0 20px;
            width: auto;
        }

        #sec06 .voicebox h3 {
            padding: 10px 15px;
            width: 81%;
            text-align: left;
        }

        #sec06 p {
            margin-top: var(--size_s);
            font-size: 15px;
            padding: 0 20px;
        }

        #sec06 .voicebox .text_area {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
        }

        #sec06 .voicebox:nth-child(-n+2) .text_area,
        #sec06 .voicebox:nth-child(n+3) .text_area {
            height: auto;
        }

        #sec06 .voicebox .text_area p:last-of-type {
            height: auto;
            padding: 15px;
            margin: 15px 15px 0;
        }

        #sec06 .lasty {
            padding-bottom: 30px;
        }

        #sec06 .lasty p {
            font-size: var(--font_m);
            margin-top: 15px;
        }

        #sec06 .lasty a {
            display: block;
            margin: 15px auto 0;
            width: auto;
            font-size: 20px;
            padding: 8px 0;
            transition: all 0.3s;
        }

        /*アコーディオン*/
        .readmore {
            position: relative;
            box-sizing: border-box;
            padding: 10px 0;
            margin-bottom: 3em;
        }

        .readmore_inner {
            position: relative;
            overflow: hidden;
            max-height: 1260px;
        }

        .readmore-check:checked~.readmore_inner {
            max-height: 4000px;
        }

        .readmore_inner::before {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            content: "";
            height: 100px;
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
            background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
        }

        /* 続きを読むボタン */
        .readmore-label {
            display: table;
            bottom: 5px;
            bottom: -5%;
            left: 50%;
            cursor: pointer;
            margin: 0 auto;
        }
    

         .readmore-label:before {
            content: url(../images/sec06_rm_close.png);
            display: inline-block;
            filter: drop-shadow(0px 3px 3px #aaa);
        } 

        .readmore-check {
            display: none;
        }

        /*チェック時にボタンを非表示*/
        .readmore-check:checked~.readmore-label {
            position: static;
            transform: translateX(0);
            -webkit-transform: translateX(0);
            animation: none;
            /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
            /* display: none; */
        }

        .readmore-check:checked~.readmore-label:before {
            content: url(../images/sec06_rm_open.png);
            display: inline-block;
            transition: max-height 2s;
            filter: drop-shadow(0px 3px 3px #aaa);
        }

        /*チェック時に高さを自動に戻す*/
        .readmore-check:checked~.readmore_inner {
            height: auto;
        }

        /*チェック時グラデーション等を削除*/
        .readmore-check:checked~.readmore_inner::before {
            display: none;
        }

        /*アコーディオンここまで*/

        #sec07 {
            margin: 40px auto 15px;
        }

        footer {
            padding: 20px 0 15px;
        }

        footer p {
            font-size: 12px;
        }

        footer figure {
            width: 80%;
            margin: 0 auto;
        }
    }