@charset "UTF-8";
    /*============================
        google font
    ============================*/
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

    /*============================
        html5 base style
    ============================*/
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    pre,
    address,
    code,
    em,
    img,
    a,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    figcaption,
    figure,
    picture,
    footer,
    header,
    menu,
    nav,
    main,
    section,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        box-sizing: border-box;
    }

    article,
    aside,
    figcaption,
    figure,
    footer,
    header,
    menu,
    nav,
    main,
    section,
    picture {
        display: block;
    }

    ol,
    ul {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #43200e;
    }

    a:hover {
        color: #43200e;
    }

    img,
    svg,
    video {
        width: 100%;
        vertical-align: bottom;
    }

    img {
        -webkit-user-drag: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    input,
    select {
        vertical-align: middle;
    }

    /* input,
    select,
    button {
        border: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    } */

    input:focus,
    select:focus,
    button:focus {
        outline: 0;
    }

    /*============================
        module style
    ============================*/
    html {
        font-size: 62.5%;
    }


    html.active {
        overflow-y: hidden;
    }

    body {
        font-size: 1.4rem;
        font-weight: 500;
        background: #fff;
        color: #43200e;
        font-family: "Noto Sans JP", "Yu Gothic Medium", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
        margin: 0;
        position: relative;
        min-width: auto;
        font-feature-settings: "palt";
        overflow: auto;
    }


    #root {
        overflow: hidden;
    }

    p,
    li,
    dt,
    dd,
    h3,
    h4,
    h5,
    span {

        font-weight: 500;
        line-height: 1.6;
        letter-spacing: .05em;
    }


    /*----------------------------
    layout
    -----------------------------*/
    .flex {
        display: block;
    }

    .flexwrap {
        flex-wrap: wrap;
        width: 100%;
    }

    .jc-between {
        justify-content: space-between;
    }

    .jc-around {
        justify-content: space-around;
    }

    .jc-center {
        justify-content: center;
    }

    .jc-end {
        justify-content: flex-end;
    }

    .align-items {
        align-items: center;
    }

    .fd-reverse {
        flex-direction: row-reverse;
    }

    .block {
        display: block;
    }

    .inline {
        display: inline;
    }

    .mb-150 {
        margin-bottom: 75px;
    }

    .mb-100 {
        margin-bottom: 50px;
    }

    .mb-80 {
        margin-bottom: 40px;
    }

    .mb-60 {
        margin-bottom: 30px;
    }

    .mb-50 {
        margin-bottom: 30px;
    }

    .mb-40 {
        margin-bottom: 20px;
    }

    .mb-30 {
        margin-bottom: 15px;
    }

    .mb-20 {
        margin-bottom: 10px;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    @media screen and (min-width:768px) {
        .flex {
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
        }
    }

    @media screen and (min-width:768px) {
        .mb-150 {
            margin-bottom: 100px;
        }

        .mb-100 {
            margin-bottom: 70px;
        }

        .mb-80 {
            margin-bottom: 60px;
        }

        .mb-60 {
            margin-bottom: 40px;
        }

        .mb-50 {
            margin-bottom: 40px;
        }

        .mb-40 {
            margin-bottom: 30px;
        }

        .mb-30 {
            margin-bottom: 20px;
        }

        .mb-20 {
            margin-bottom: 15px;
        }

    }

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

        .w-20 {
            width: 20%;
        }

        .w-25 {
            width: 25%;
        }

        .w-45 {
            width: 45%;
        }

        .w-70 {
            width: 70%;
        }

        .w-auto {
            width: auto;
        }

        .w-full {
            width: 100%;
        }

        .block {
            display: block;
        }

        .block-center {
            display: block;
            margin: auto;
        }

        .icon:before {
            content: "";
            display: inline-block;
            background-repeat: no-repeat;
        }

        .of-hidden {
            overflow: hidden;
        }

        .wp-nowrap {
            white-space: nowrap;
        }

        .mb-150 {
            margin-bottom: 150px;
        }

        .mb-100 {
            margin-bottom: 100px;
        }

        .mb-80 {
            margin-bottom: 80px;
        }

        .mb-60 {
            margin-bottom: 60px;
        }

        .mb-50 {
            margin-bottom: 50px;
        }

        .mb-40 {
            margin-bottom: 40px;
        }

        .mb-30 {
            margin-bottom: 30px;
        }

        .mb-20 {
            margin-bottom: 20px;
        }

        .mb-10 {
            margin-bottom: 10px;
        }

        .mb-0 {
            margin-bottom: 0;
        }

        .mb-1e {
            margin-bottom: 1em;
        }

        .mr-1e {
            margin-right: 1em;
        }

        .mr-20 {
            margin-right: 20px;
        }

        .pl-1 {
            padding-left: 1em;
        }
    }


    /*----------------------------
    text
    -----------------------------*/
    /* @font-face {
        font-family: 'agencyfb';
        src: url('../font/AgencyFB-Bold.ttf')format('truetype');
    } */

    .font-en {
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
    }

    .font-min {
        font-family: "Noto Serif JP", 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', 'MS PMincho', serif;
    }

    .font-go {
        font-family: "Yu Gothic Medium", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
    }

    .font-ex {
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    .font-num {
        font-family: "Yu Gothic Medium", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
    }

    .wr-vt {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-feature-settings: initial;
    }

    .fuchidori {
        text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
            -1px 1px 0 #FFF, 1px -1px 0 #FFF,
            0px 1px 0 #FFF, 0 -1px 0 #FFF,
            -1px 0 0 #FFF, 1px 0 0 #FFF;
    }

    .bold {
        font-weight: bold;
    }

    .al-center {
        text-align: center;
    }

    .al-right {
        text-align: right;
    }

    .al-left {
        text-align: left;
    }

    .line-h-22 {
        line-height: 22px;
    }

    .indent {
        padding-left: 1em;
        text-indent: -1em;
    }

    /* font-size */
    .fs-60 {
        font-size: 3rem;
    }

    .fs-48 {
        font-size: 2.4rem;
    }

    .fs-40 {
        font-size: 2rem;
    }

    .fs-38 {
        font-size: 2rem;
    }

    .fs-36 {
        font-size: 1.8rem;
    }

    .fs-34 {
        font-size: 1.8rem;
    }

    .fs-32 {
        font-size: 1.8rem;
    }

    .fs-30 {
        font-size: 1.6rem;
    }

    .fs-28 {
        font-size: 1.6rem;
    }

    .fs-26 {
        font-size: 1.6rem;
    }

    .fs-24 {
        font-size: 1.6rem;
    }

    .fs-22 {

        font-size: 1.4rem;
    }

    .fs-20 {
        font-size: 1.4rem;
    }

    .fs-18 {
        font-size: 1.4rem;
    }

    .fs-15 {
        font-size: 1.3rem;
    }

    .fs-14 {
        font-size: 1.2rem;
    }


    .fs-12 {
        font-size: 1rem;
    }

    .lh-1 {
        line-height: 2;
    }

    .lh-2 {
        line-height: 2;
    }

    @media screen and (min-width:768px) {
        .fs-60 {
            font-size: 4rem;
        }

        .fs-48 {
            font-size: 3.6rem;
        }

        .fs-40 {
            font-size: 3rem;
        }

        .fs-38 {
            font-size: 2.8rem;
        }

        .fs-36 {
            font-size: 2.4rem;
        }

        .fs-34 {
            font-size: 2.2rem;
        }

        .fs-32 {
            font-size: 2rem;
        }

        .fs-30 {
            font-size: 2rem;
        }

        .fs-28 {
            font-size: 2rem;
        }

        .fs-26 {
            font-size: 1.8rem;
        }

        .fs-24 {
            font-size: 1.8rem;
        }

        .fs-22 {
            font-size: 1.6rem;
        }

        .fs-20 {
            font-size: 1.6rem;
        }

        .fs-18 {
            font-size: 1.4rem;
        }

        .fs-15 {
            font-size: 1.4rem;
        }

        .fs-14 {
            font-size: 1.2rem;
        }

        .fs-12 {
            font-size: 1.2rem;
        }

    }

    @media screen and (min-width:1025px) {
        .fs-60 {
            font-size: 6rem;
        }

        .fs-48 {
            font-size: 4.8rem;
        }

        .fs-40 {
            font-size: 4rem;
        }

        .fs-38 {
            font-size: 3.8rem;
        }

        .fs-36 {
            font-size: 3.6rem;
        }

        .fs-34 {
            font-size: 3.4rem;
        }

        .fs-32 {
            font-size: 3.2rem;
        }

        .fs-30 {
            font-size: 3rem;
        }

        .fs-28 {
            font-size: 2.8rem;
        }

        .fs-26 {
            font-size: 2.6rem;
        }

        .fs-24 {
            font-size: 2.4rem;
        }

        .fs-22 {
            font-size: 2.2rem;
        }

        .fs-20 {
            font-size: 2rem;
        }

        .fs-18 {
            font-size: 1.8rem;
        }

        .fs-15 {
            font-size: 1.5rem;
        }

        .fs-14 {
            font-size: 1.4rem;
        }

        .fw-500 {
            font-weight: 500;
        }

        .fw-600 {
            font-weight: 600;
        }

        .pl-2e {
            padding-left: 2em;
        }

        .lh-2 {
            line-height: 2;
        }
    }



    /*============================
        color
    ============================*/
    .bg__wh {
        background: #fff;
    }

    .color-ma {
        color: #ee626c;
    }

    .color-pu {
        color: #a56baa;
    }

    .color-gr {
        color: #73a955;
    }

    .color-or {
        color: #ec6d65;
    }

    .color-red {
        color: #bd0000;
    }

    .color-bl {
        color: #1f64c2;
    }

    .bg-ma {
        background: #ee626c;
    }

    .bg-lg {
        background: linear-gradient(#44cf10, #c1f56e);
    }

    .bg_lg02 {
        background: -moz-linear-gradient(90deg, #ede4e4, #f7f4f4);
        background: -webkit-linear-gradient(90deg, #ede4e4, #f7f4f4);
        background: linear-gradient(90deg, #ede4e4, #f7f4f4);
    }

    .b_shadow {
        box-shadow: 0px 3px 20px rgba(175, 213, 163, .38);
    }

    /*----------------------------
    movie
    -----------------------------*/
    .ytwrap {
        position: relative;
        word-wrap: 100%;
        padding-bottom: 56.25%;

    }

    .ytwrap iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*----------------------------
    space
    -----------------------------*/
    .m-auto {
        margin: auto;
    }


    /*----------------------------
    position
    -----------------------------*/
    .ps-r {
        position: relative;
    }

    .ps-a {
        position: absolute;
    }

    /*----------------------------
    list
    -----------------------------*/
    .list-style {
        list-style: disc;
    }

    .scale {
        transition: 0.5s;
    }

    .scale:hover {
        transform: scale(1.1);
        transition: 0.5s;
    }

    .spbr {
        display: none;
    }

    /*----------------------------
    responsive
    -----------------------------*/


    /* sp */
    .pc {
        display: none !important;
    }

    .pcbr {
        display: inline;
    }

    .spbr {
        display: block;
    }

    body {
        font-size: 1.4rem;
    }

    .inner {
        padding: 0 5%;
    }

    .inner__mid {
        padding: 0 5%;
    }

    .inner__large {
        padding: 0 5%;
    }

    .sponly {
        display: block;
    }

    .spnone {
        display: none;
    }

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

        body {
            font-size: 1.4rem;
            min-width: auto;
        }

        .inner {
            padding: 0 3%;
        }

        .inner__mid {
            padding: 0 3%;
        }

        .inner__large {
            padding: 0 3%;
        }

        .sponly {
            display: none;
        }

        .spnone {
            display: block;
        }

        .pcbr {
            display: block;
        }

        .spbr {
            display: inline;
        }

    }

    @media screen and (min-width:1025px) {
          .pc {
        display: flex !important;
    }
        body {
            font-size: 1.6rem;
            min-width: auto;
        }

        .sp {
            display: none;
        }

        .sponly {
            display: none;
        }

        .inner {
            max-width: calc(1400px + 2%);
            margin: 0 auto;
            padding: 0 1%;
        }

        .inner__mid {
            max-width: calc(1500px + 2%);
            margin: 0 auto;
            padding: 0 1%;
        }

        .inner__large {
            max-width: calc(1720px + 2%);
            margin: 0 auto;
            padding: 0 1%;
        }

    }



    /*----------------------------
    scroll animation
    -----------------------------*/
    /* のびる背景 */

    /*背景色が伸びて出現 */
    .active.bgextend {
        animation-name: bgextendAnimeBase;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        position: relative;
        overflow: hidden;
        opacity: 0;
        display: block;
    }

    @keyframes bgextendAnimeBase {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /*中の要素*/
    .bgappear {
        opacity: 0;
        display: block;
    }

    .active .bgappear {
        animation-name: bgextendAnimeSecond;
        animation-duration: .5s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
    }

    @keyframes bgextendAnimeSecond {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /*--------- 左から --------*/
    .bgLRextend::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: #1f7adb;
        /*伸びる背景色の設定*/
    }

    .active.bgLRextend::before {
        animation-name: bgLRextendAnime;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
        background-color: #1f7adb;
        z-index: 9;
        /*伸びる背景色の設定*/

    }

    @keyframes bgLRextendAnime {
        0% {
            transform-origin: left;
            transform: scaleX(0);
            opacity: 0;
        }

        1% {
            opacity: 1;
        }

        50% {
            transform-origin: left;
            transform: scaleX(1);
            opacity: 1;
        }

        50.001% {
            transform-origin: right;
            opacity: 1;
        }

        100% {
            transform-origin: right;
            transform: scaleX(0);
            opacity: 1;
        }
    }


    /*--------- 右から --------*/
    .bgRLextend::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: #223a70;
        /*伸びる背景色の設定*/
    }

    .active.bgRLextend::before {
        animation-name: bgRLextendAnime;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
        background-color: #223a70;
        /*伸びる背景色の設定*/

    }

    @keyframes bgRLextendAnime {
        0% {
            transform-origin: right;
            transform: scaleX(0);
            opacity: 0;
        }

        1% {
            opacity: 1;
        }

        50% {
            transform-origin: right;
            transform: scaleX(1);
            opacity: 1;
        }

        50.001% {
            transform-origin: left;
            opacity: 1;
        }

        100% {
            transform-origin: left;
            transform: scaleX(0);
            opacity: 1;
        }
    }

    /*============================
        text-animation
    ============================*/
    .smoothText {
        overflow: hidden;
        display: block;
    }

    /* アニメーションで傾斜がついている文字列を水平に戻す*/
    .smoothTextTrigger {
        transition: 1s ease-in-out;
        transform: translate3d(0, 100%, 0) skewX(12deg);
        transform-origin: left;
        display: block;
    }

    .smoothTextTrigger.smoothTextAppear {
        transform: translate3d(0, 0, 0) skewX(0);
    }

    /*========= 流れるテキスト ===============*/

    /*全共通*/

    .slide-in {
        overflow: hidden;
        display: inline-block;
        opacity: 0;
    }

    .slide-in_inner {
        display: inline-block;

    }

    /*左右のアニメーション*/
    .leftAnime {
        opacity: 0;
        /*事前に透過0にして消しておく*/
    }

    .slide-in-active {
        animation-name: slideTextX100;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes slideTextX100 {
        from {
            transform: translateX(-100%);
            /*要素を左の枠外に移動*/
            opacity: 0;
        }

        to {
            transform: translateX(0);
            /*要素を元の位置に移動*/
            opacity: 1;
        }
    }

    .slide-inner.active {
        animation-name: slideTextX-100;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }


    @keyframes slideTextX-100 {
        from {
            transform: translateX(100%);
            /*要素を右の枠外に移動*/
            opacity: 0;
        }

        to {
            transform: translateX(0);
            /*要素を元の位置に移動*/
            opacity: 1;
        }
    }

    /*============================
        parts
    ============================*/

    .marker {
        background: linear-gradient(transparent 60%, #8b0000 0%);
        display: inline;
        padding: .1em;
    }

    /* hover zoom */
    /*　画像の拡大　*/

    .zoomIn img {
        transform: scale(1);
        transition: .5s ease-in-out;
        /*移り変わる速さを変更したい場合はこの数値を変更*/
    }

    .zoomIn:hover img {
        /*hoverした時の変化*/
        transform: scale(1.05);
        /*拡大の値を変更したい場合はこの数値を変更*/
    }

    .mask {
        display: block;
        line-height: 0;
        /*行の高さを0にする*/
        overflow: hidden;
        /*拡大してはみ出る要素を隠す*/
    }

    .wow {
        animation-duration: 1s;
    }




    /*============================
        index 共通
    ============================*/
    /* sp */

    /* btn ▼*/
    .link__btn {
        display: block;
        position: relative;
        white-space: nowrap;
        max-width: 100%;
        width: 200px;
        height: 34px;
        border-radius: 17px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffeeef;
        border: solid 1px #ffeeef;
        color: #ee626c;
        padding: 0 1em;
        font-weight: 400;
        text-align: center;
        letter-spacing: .1em;
        transition: .3s ease-out;

    }


    .link__btn a,
    .link__btn .txt {
        line-height: 1;
        font-weight: 400;
        position: relative;
        letter-spacing: .05em;
    }

    .link__btn:hover {
        color: #ee626c;
        background: #fff;
    }

    .link__btn .arw {
        position: absolute;
        width: 5px;
        top: 50%;
        height: auto;
        right: 5%;
        transition: .3s ease-out;
        transform: translate(0, -50%);
    }

    .link__btn:hover .arw {
        right: 3%;
    }

    .link__btn.-wh {
        background: #fff;
        border-color: #ee626c;
        font-size: 1.4rem;
        width: 200px;
        height: 45px;
        border-radius: 22.5px;
        letter-spacing: .0 5em;

    }

    .link__btn.-wh .arw {
        width: 14px;
        height: auto;
    }

    .link__btn.-wh:hover {
        color: #ee626c;
        background: #ffeeef;
    }

    .link__btn03 {
        display: flex;
        line-height: 20px;
        align-items: center;
        color: #ee626c;
        transition: .3s;
    }

    .link__btn03:hover {
        color: #ee626c;
    }

    .link__btn03 .arw {
        width: 50px;
        margin-left: 1em;
        transition: .3s;
        height: auto;
    }

    .link__btn03:hover .arw {
        transform: translate(5px);
    }

    /* btn ▲*/
    .section__ttl,
    .section__ttl .txt {
        position: relative;
        line-height: 1;
        white-space: nowrap;
        display: block;
        letter-spacing: .075em;
    }

    .section__ttl .font-en {
        position: relative;
        line-height: 1;
        white-space: nowrap;
        display: flex;
        align-items: baseline;
        letter-spacing: .075em;
    }

    .section__ttl span,
    .section__ttl p {
        line-height: 1;
        letter-spacing: .075em;
    }

    .section__ttl img {
        width: auto;

    }

    .section__ttl .dot-txt,
    .dot-txt {
        position: relative;
        display: flex;
        align-items: center;
    }

    .dot-txt::before {
        content: "● ● ●";
        display: inline-block;
        color: #ee626c;
        margin-right: 0;
        font-size: 1rem;
        letter-spacing: .5em;
        transform: scale(.6);
        transform-origin: left center;
        margin-right: -1em;
    }

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

        .link__btn {
            width: 240px;
            height: 35px;
            border-radius: 17.5px;
        }



        .link__btn .arw {
            width: 6px;
        }

        .link__btn.-wh {
            font-size: 1.6rem;
            width: 240px;
            height: 50px;
            border-radius: 25px;
        }

        .link__btn.-wh .arw {
            width: 15px;
        }

        .link__btn03 {
            line-height: 24px;
        }

        .link__btn03 .arw {
            width: 60px;
        }

    }

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

        .link__btn {
            width: 300px;
            height: 40px;
            border-radius: 20px;
            border-width: 2px;
        }



        .link__btn .arw {
            width: 7px;
            top: 50%;
        }

        .link__btn.-wh {
            font-size: 1.8rem;
            width: 300px;
            height: 60px;
            border-radius: 30px;
        }

        .link__btn.-wh .arw {
            width: 17px;
        }

        .link__btn03 {
            line-height: 28px;
        }

        .link__btn03 .arw {
            width: 76px;
            margin-left: 1em;
        }

    }