@charset "utf-8";

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*:focus {
    outline: none;
}

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

    /* スクロールフェードイン_共有（下からの基本） */
    .scroll {
        content: '';
        opacity: 0;
        transform: translate(0px, 50px);
        transition: all 500ms;
    }
    
    .scroll.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }
    /* スクロールフェードイン_共有（下からの基本）終了 */
    
    /* スクロールフェードイン_footer */
    .scroll_footer {
        content: '';
        opacity: 0;
        transform: translate(0px, 50px);
        transition: all 500ms;
    }
    
    .scroll_footer.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }
    /* スクロールフェードイン_footer 終了 */
    
    /* ナビゲーションfixドロップシャドウ */
    
    .scroll_nav {
        display: none;
        /* z-index: 10;
        position: fixed;
        height: min-content;
        padding: 5px 20px;
        border-bottom: 1px solid #87153300; */
    }
    
    .scroll_nav_responsive {
        z-index: 10;
        position: fixed;
        /* height: 40px; */
        width: 100vw;
        padding: 5px 10px;
        border-bottom: 1px solid #87153300;
    }
    
    .scroll_nav.scroll_ds {
        height: 70px;
        padding: 5px 15px;
        border-bottom: 1px solid rgb(135, 21, 52);
        background-color: #ffffffee;
        box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
    }
    
    /* ナビゲーションfixドロップシャドウ終了 */
    
    .index_main {
        font-size: 1.0rem;
        width: 100vw;
        font-family: 'M PLUS 1', sans-serif;
    
        /* z-index: -2; */
    }
    
    .index_main_top {
        position: relative;
        width: 100%;
    
        transition: 1s;
    }
    
    .main_title_area {
        position: absolute;
        width: 100%;
        display: flex;
        padding-top: 0.5rem;
        justify-content: center;
        /* background: #a998e8; */
        z-index: 1;
    }
    .main_title_area_logo {
        width: 48vw;
        padding-left: 1rem;
        padding-right: 0.5rem;
        /* background-color: #fffc62; */
    }
    .main_title_area_logo img {
        width: 100%;
    }
    .main_title_area_catch_area {
        position: relative;
        width: 52vw;
        margin-top: 0.5rem;
        /* background-color: #00ae00; */
    }
    .main_title_area_catch_1 {
        width: 100%;
        position: absolute;
        padding-left: 0rem;
        padding-right: 2.75rem;
        top:0;
        left: 0;
    }
    .main_title_area_catch_2 {
        width: 100%;
        position: absolute;
        padding-left: 0rem;
        padding-right: 2.75rem;
        top:7.2vw;
        left: 2rem;
    }
    .main_title_area_catch_3 {
        width: 100%;
        position: absolute;
        padding-left: 0rem;
        padding-right: 1rem;
        top:17vw;
        left: 0;
    }
    .main_title_area_catch_1 img {
        width: 100%;
    }
    .main_title_area_catch_2 img {
        width: 100%;
    }
    .main_title_area_catch_3 img {
        width: 100%;
    }
    
    .main_firstview_area {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        padding-top: 19vw;
        padding-right: 0vw;
    }
    .main_firstview_img {
        width: fit-content;
    }
    .main_firstview_img img {
        width: 100%;
    }
    .main_firstview_area_2px_whiteborder {
        width: 2px;
        background-color: white;
    }
    
    
    .head_nav {
        display: none;
        /* width: 100vw;
        align-items: top;
        font-weight: 300; */
        /* background-color: #ddd; */
    }
    
    .head_nav_responsive {
        display: block;
        /* width: 100%; */
        align-items: center;
        text-align: center;
        font-weight: 300;

        transition: 1s;
    }

    /* responsiveのみ */
    .logo_area {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-top: 0rem;
        opacity: 0;
        transition: all 200ms ease-in-out;
    }
    .logo_area.scroll_btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-top: 0rem;
        opacity: 1;
        transition: all 600ms ease-in-out;
        /* transition-delay: 300ms; */
    }
    /* responsiveのみ */
    
    /* ハンバーガーメニュー */
    .nav_toggle {
        position: absolute;
        right: 3px;
    }
    
    @keyframes fadeRight {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    
    .nav_links {
        /* flex: 1; */
        /* text-align: right; */
        height: min-content;
        font-size: 0.8rem;
        font-weight: 500;
        margin: 0 auto;
        margin-top: 10px;
        padding: 0.8rem;
        background-color: #fff;
        border: 2px solid #00ae00;
        border-radius: 0.5rem;
    
        background-image: url(bg_colordots_30.svg);
        background-size: 105% auto;
        background-position: 50% 53%;
    
        animation-name: fadeRight;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-delay: 0s;
        animation-iteration-count: 1;
    }
    
    .nav_links ul li {
        display: inline-block;
        list-style: none;
        padding: 0 0.6rem;
    }
    
    #logo_mark_top {
        width: auto;
        height: 80px;
        margin-top: 0rem;
    }
    
    
    /* nav_linksのhover設定 */
    .nav_links ul a {
        position: relative;
        text-decoration: none;
        color: #000;
        transition: all 0.2s;
    }
    
    .nav_links ul a::before,
    .nav_links ul a::after {
        content:'';
        position: absolute;
        bottom: -15px;
        display: block;
        width: 20%;
        height: 3px;
        background-color: #ff0000;
        opacity: 0;
        left: 40%;
        /* right: 40%; */
        transition: 0.2s;
    }
    
    .nav_links ul a:hover {
        color: #ff0000;
    }
    
    .nav_links ul a:hover::before,
    .nav_links ul a:hover::after {
        bottom: -13px;
        opacity: 1;
    }
    
    /* nav_linksのhover設定終了 */
    
    .nav_links_page {
        color: #871534;
    }
    
    .index_top_area {
        /* display: flex; */
        width: 100vw;
        padding: 0;
        margin: 0;
        /* background-color: #ddd; */
    }
    
    .index_photo_area_slider {
        display: none !important;
    }
    .index_photo_area_slider_responsive {
        display: block !important;
        width: 100%;
    }
    .ph_top_slick_img {
        display: inline-block;
        width: 100%;
    }
    .ph_top_slick_img img {
        width: 100%;
        height: 20vh;
        object-fit: cover;
        object-position: 100% 100%;
    }
    /* scrollアニメ */
    
    /*スクロールダウン全体の場所*/
    .scrolldown1{
        /*描画位置※位置は適宜調整してください*/
    	position:relative;
    	left:50%;
        top: 2.5rem;
    	/* bottom:10px; */
        /*全体の高さ*/
    	height:50px;
    }
    /*Scrollテキストの描写*/
    .scrolldown1 span{
        /*描画位置*/
    	position: absolute;
    	left:-15px;
    	top: -15px;
        /*テキストの形状*/
        color: #ffb7ca;
    	font-size: 0.7rem;
        font-weight: 600;
    	letter-spacing: 0.05em;
        animation: scrolldowntext 1.4s ease-in-out infinite;
    }
    @keyframes scrolldowntext{
        0% {
            opacity: 0.8;
        }
        50% {
            opacity: 1;
            color: #871534;
        }
        100% {
            opacity: 0.8;
        }
    }
    /* 線の描写 */
    .scrolldown1::after{
    	content: "";
        /*描画位置*/
    	position: absolute;
    	top: 0;
        /*線の形状*/
    	width: 1px;
    	height: 30px;
    	background: #ffb7ca;
        /*線の動き1.4秒かけて動く。永遠にループ*/
    	animation: pathmove 1.4s ease-in-out infinite;
    	opacity:0;
    }
    /*高さ・位置・透過が変化して線が上から下に動く*/
    @keyframes pathmove{
    	0%{
    		height:0;
    		top:0;
    		opacity: 0;
    	}
    	30%{
    		height:30px;
            background: #871534;
    		opacity: 1;
    	}
    	100%{
    		height:0;
    		top:50px;
    		opacity: 0;
    	}
    }
    /* scrollアニメ終了 */
    
    /* コールトゥアクション */
    .cta_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        height: auto;
        padding: 0 0rem;
        padding-bottom: 0.5rem;
        margin-top: 0.5rem;
        z-index: 5;
        /* background-color: #ddd; */
    
        background-image: url(bg_cta.svg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: 50% 0% ;
    }
    
    .cta_ecbtn_area {
        width: 100%;
        padding: 0rem 0.75rem;
        margin: 0;
    }
    
    .cta_ecbtn_ttl {
        width: 100%;
        position: relative;
        top: -1rem;
        margin: 0;
        padding: 0;
        /* background: #000; */
    }
    
    .cta_ecbtn_ttl img {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .cta_ecbtn {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: center;
        /* background-color: #ddd; */
    }
    
    .cta_ecbtn_logo_creema {
        display: block;
        justify-content: bottom;
        width: 26%;
        height: 15vw;
        padding: 0rem 0.25rem;
        margin: 0;
        /* background-color: #bd5ad6; */
    }
    .cta_ecbtn_logo_minne {
        display: block;
        flex-direction: column;
        justify-content: bottom;
        width: 26%;
        height: 15vw;
        padding: 0rem 0.25rem;
        margin: 0;
        /* background-color: #984dab; */
    }
    .cta_ecbtn_logo_base {
        display: block;
        flex-direction: column;
        justify-content: bottom;
        width: 26%;
        height: 15vw;
        padding: 0rem 0.25rem;
        margin: 0;
        /* background-color: #2e1a34; */
    }
    .cta_ecbtn_logo_iichi {
        display: block;
        flex-direction: none;
        justify-content: none;
        text-align: center;
        width: 24%;
        height: 15vw;
        padding: 0rem 0.25rem;
        margin: 0;
        /* background-color: #4d0c5e; */
    }
    
    #logo_creema_btn {
        /* width: 187px; */
        width: 100%;
        height: auto;
        margin-top: 0.5rem;
        margin-bottom: 0.1rem;
    }
    .cta_ecbtn_logo_creema::after {
        content: '';
        display: block;
        width: auto;
        height: 10vw;
        background-image: url('icon_ill_tyranno.svg');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
    }
    .cta_ecbtn_logo_creema:hover #logo_creema_btn {
        animation: scaleUp 0.5s ease-in-out forwards;
    }
    .cta_ecbtn_logo_creema:hover::after {
        animation: puyon 1s ease-in-out infinite;
        /* animation: purun 1s linear 0s infinite; */
    }
    
    #logo_minne_btn {
        /* width: 152px; */
        width: 100%;
        height: auto;
        margin-top: 0.25rem;
        margin-bottom: 0.1rem;
    }
    .cta_ecbtn_logo_minne::after {
        content: '';
        display: block;
        width: auto;
        height: 7vw;
        background-image: url('icon_ill_tricera.svg');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
    }
    .cta_ecbtn_logo_minne:hover #logo_minne_btn {
        animation: scaleUp 0.5s ease-in-out forwards;
    }
    .cta_ecbtn_logo_minne:hover::after {
        animation: puyon 1s ease-in-out infinite;
    }
    
    #logo_base_btn {
        /* width: 163px; */
        width: 100%;
        height: auto;
        margin-top: 0.25rem;
        margin-bottom: 0.1rem;
    }
    .cta_ecbtn_logo_base::after {
        content: '';
        display: block;
        width: auto;
        height: 7vw;
        background-image: url('icon_ill_stego.svg');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
    }
    .cta_ecbtn_logo_base:hover #logo_base_btn {
        animation: scaleUp 0.5s ease-in-out forwards;
    }
    .cta_ecbtn_logo_base:hover::after {
        animation: puyon 1s ease-in-out infinite;
    }
    
    #logo_iichi_btn {
        /* width: 116px; */
        width: 70%;
        height: auto;
        margin-bottom: 0rem;
    }
    .cta_ecbtn_logo_iichi::after {
        content: '';
        display: block;
        width: auto;
        height: 8vw;
        background-image: url('icon_ill_plesio.svg');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
    }
    .cta_ecbtn_logo_iichi:hover #logo_iichi_btn {
        animation: scaleUp 0.5s ease-in-out forwards;
    }
    .cta_ecbtn_logo_iichi:hover::after {
        animation: puyon 1s ease-in-out infinite;
    }
    
    .cta_contact_area {
        width: max-content;
        padding: 0;
        margin: 0;
        /* background-color: #ddd; */
    }
    
    .cta_contact {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: #FFF;
        white-space: nowrap;
        text-align: center;
        margin: 0 0;
        margin-top: 10vw;
        padding: 0.25rem 1rem;
        background-image: url(bg_whitedots.svg);
        background-size: 270% auto;
        background-position: 34% 61%;
        background-color: #4CC512;
        border-radius: 5rem;
    }
    .cta_contact::after {
        content: '';
        display: block;
        width: auto;
        height: 8vw;
        background-image: url('icon_ill_ptera.svg');
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
    }
    .cta_contact:hover {
        animation: scaleUp 0.5s ease-in-out forwards;
        background-color: #ff0000;
        transition : all 0.5s ease 0s;
    }
    .cta_contact:hover::after {
        animation: puyon 1s ease-in-out infinite;
    }
    
    .cta_contact_text {
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: 0.5rem;
        text-align: center;
    }
    
    @keyframes puyon {
        0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
        40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
        50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
        60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
        70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
        80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
        100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    
    @keyframes purun {
        0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
        15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
        30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
        50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
        70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
        100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
      }
  
    @keyframes scaleUp {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }
    
    /* charm エリア */
    .charm_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100vw;
        height: auto;
        padding: 0 0;
        margin-top: 2rem;
    }
    .charm_area::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-image: url('bg_charm.svg');
        background-position: top left;
        /* background-size: cover; */
        background-size: auto 150%;
        z-index: -1; /* コンテンツの背面に配置 */
        opacity: 0; /* 初期状態で非表示 */
        transform: translateX(100%); /* 右側に隠れている状態 */
        transition: opacity 0.5s ease-in-out, transform 0.75s ease-in-out;
    }
    .charm_area.visible::before {
        opacity: 1;
        transform: translateX(0.5rem); /* 左端から3remの位置で停止 */
    }
    
    .charm_ttl_area {
        display: flex;
        position: relative;
        width: 100%;
        height: max-content;
        padding: 0;
        margin: 0;
        align-items: flex-start;
        justify-content: center;
        /* background-color: #777; */
    }
    
    .charm_ttl_area img {
        width: 90%;
        height: auto;
    }
    .charm_ttl_area::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: none;
        background-image: url('ph_tyranno_up_right.png');
        background-position: 15vw 3vw;
        background-size: auto 22vw;
        background-repeat: no-repeat;
        /* background-color: #871534; */
        z-index: -1;
    }

    .charm_text_read_area {
        width: 90%;
        font-size: 1.1rem;
        font-weight: 500;
        margin: 2rem 0rem;
    }
    .charm_text_read_area span.red {
        font-size: 1.35rem;
        font-weight: 700;
        color: #ff0000;
    }
    .charm_text_read_area span.green {
        font-size: 1.35rem;
        font-weight: 700;
        color: #00ae00;
    }

    .charm_set_area {
        display: flex;
        flex-direction: column;
        width: 90%;
        justify-content: center;
        align-items: center;
        background-color: #ff00001d;
        border-radius: 1rem;
        padding: 1rem 0rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    .charm_set_ttl {
        width: 70%;
        padding: 0.25rem 0;
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        background-color: #ff0000;
        text-align: center;
        margin-bottom: 1rem;
        border-radius: 1rem;
    }
    .charm_set_ph_area {
        display: flex;
        flex-direction: column;
        padding: 0 0.25rem;
    }
    .charm_set_ph_area_sub_1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .charm_set_ph_area_sub_2 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .charm_set_ph {
        width: fit-content;
        margin: 0 1rem;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .charm_set_ph img {
        width: 100%;
        height: auto;
    }
    
    .charm_text_area {
        /* display: flex; */
        width: 100%;
        height: auto;
        padding: 0 1rem;
        margin: 0;
        margin-top: 1rem;
        white-space: normal;
        /* background-color: #777; */
    }
    
    .charm_text_area ul {
        list-style: decimal;
        list-style-position: inside;
        color: red; /* 赤文字 */
        font-weight: 700; /* 太字 */
        font-size: 1.2rem; /* フォントサイズを大きく */
    }
    .charm_text_area ul li span.sub_ttl {
        color: #00ae00;
        font-weight: 600;
        font-size: 1rem;
    }
    .charm_text_area ul li div.sub_ttl_read {
        color: #5f5f5f;
        font-weight: 500;
        font-size: 1rem;
        margin: 0.25rem 0rem;
    }
    .charm_text_area ul ul {
        font-size: 1.1rem;
        margin-left: 3rem; /* 箇条書き部分をインデント */
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    .charm_text_area ul ul li {
        list-style-type: disc;
        list-style-position: outside;
        color: black;
        font-weight: 400;
        font-size: 1rem;
    }
    
    /* lineup エリア */
    .lineup_area {
        width: 100vw;
        height: auto;
        padding: 0;
        margin: 0;
        margin-top: 1rem;
        padding-bottom: 2rem;
        background-image: url('bg_lineup.svg');
        background-position: top center;
        background-size: 150vw auto;
        background-repeat: no-repeat;
        /* background-color: #871534; */
        z-index: -1;
    }
    .lineup_ttl_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        vertical-align: top;
        width: 100%;
        height: 30vw;
        padding: 0;
        overflow: hidden; /* トリミングするために画像のはみ出し部分を非表示に */
        position: relative; /* 画像の位置を調整するために相対配置 */
    }
    /* .lineup_ttl_area img { */
        /* width: auto; 親要素に合わせて横幅を調整 */
        /* height: 50vw; */
        /* object-fit: cover; 画像のサイズ調整 */
        /* object-position: bottom; 画像の下部を表示 */
        /* clip-path: inset(10vw 0 0 0); 上半分をトリミング */
        /* position: relative; */
        /* top: -10vw; 画像が「lineup_ttl_area」の上部に配置される */
    /* } */
    /* @media screen and (max-width: 360px) { */
        /* .lineup_ttl_area img { */
            /* width: auto; 親要素に合わせて横幅を調整 */
            /* height: 50vw; */
            /* object-fit: cover; 画像のサイズ調整 */
            /* object-position: bottom; 画像の下部を表示 */
            /* clip-path: inset(10vw 0 0 0); 上半分をトリミング */
            /* position: relative; */
            /* top: -19vw; 画像が「lineup_ttl_area」の上部に配置される */
        /* } */
    /* } */
    .lineup_ttl_area img {
        width: 55vw;
        height: auto;
    }
    
    /* ++++++++ キャラクター左用 ++++++++ */
    .lineup_character_area {
        position: relative;
        width: 95%;
        height: 80vw;
        margin: 0 auto;
        /* background-color: #dddddd84; */
    }
    .lineup_character_img {
        width: 50vw;
        height: auto;
        opacity: 0; /* 初期状態で非表示 */
        transform: translateX(-15%) translateY(-7%); /* 初期位置：左上30度から外に */
        transition: opacity 1s, transform 1s; /* アニメーションのトランジション */
    }
    .lineup_character_txtimg {
        position: absolute;
        width: 90vw;
        height: auto;
        top: 0;
        right: 2vw;
        opacity: 0; /* 初期状態で非表示 */
        transform: translateX(15%) translateY(-7%); /* 初期位置：右上30度から外に */
        transition: opacity 1s, transform 1s; /* アニメーションのトランジション */
        z-index: 1;
    }
    /* アニメーションが発動した後の状態 */
    .lineup_character_area.visible .lineup_character_img {
        opacity: 1;
        transform: translateX(0) translateY(0); /* 元の位置に戻す */
    }
    .lineup_character_area.visible .lineup_character_txtimg {
        opacity: 1;
        transform: translateX(0) translateY(0); /* 元の位置に戻す */
    }
    /* スクロールで消えるときの効果 */
    .lineup_character_area.not-visible .lineup_character_img {
        opacity: 0;
        transform: translateX(-15%) translateY(-7%); /* 左上外に戻す */
    }
    .lineup_character_area.not-visible .lineup_character_txtimg {
        opacity: 0;
        transform: translateX(15%) translateY(-7%); /* 右上外に戻す */
    }
    
    /* ++++++++ キャラクター右用 ++++++++ */
    .lineup_character_area_right {
        position: relative;
        width: 95%;
        height: 90vw;
        margin: 0 auto;
        /* background-color: #55000084; */
    }
    .lineup_character_txtimg_right {
        width: 90vw;
        height: auto;
        /* padding-top: 19vw; */
        padding-left: 2vw;
        opacity: 0; /* 初期状態で非表示 */
        transform: translateX(-15%) translateY(-7%); /* 初期位置：右上30度から外に */
        transition: opacity 1s, transform 1s; /* アニメーションのトランジション */
        z-index: 1;
    }
    .lineup_character_img_right {
        position: absolute;
        width: 50vw;
        height: auto;
        top: 0;
        right: 0;
        opacity: 0; /* 初期状態で非表示 */
        transform: translateX(15%) translateY(-7%); /* 初期位置：左上30度から外に */
        transition: opacity 1s, transform 1s; /* アニメーションのトランジション */
    }
    /* アニメーションが発動した後の状態 */
    .lineup_character_area_right.visible .lineup_character_img_right {
        opacity: 1;
        transform: translateX(0) translateY(0); /* 元の位置に戻す */
    }
    .lineup_character_area_right.visible .lineup_character_txtimg_right {
        opacity: 1;
        transform: translateX(0) translateY(0); /* 元の位置に戻す */
    }
    /* スクロールで消えるときの効果 */
    .lineup_character_area_right.not-visible .lineup_character_img_right {
        opacity: 0;
        transform: translateX(15%) translateY(-7%); /* 左上外に戻す */
    }
    .lineup_character_area_right.not-visible .lineup_character_txtimg_right {
        opacity: 0;
        transform: translateX(-15%) translateY(-7%); /* 右上外に戻す */
    }
    
    #tyranno_text {
        margin-top: 17vw;
    }
    #tricera_text {
        margin-top: 17vw;
    }
    #plesio_text {
        margin-top: 5vw;
    }
    #ptera_text {
        margin-top: 12vw;
    }
    #stego_text {
        margin-top: 22vw;
    }
    
    .lineup_character_area_blank {
        height: 18vw;
    }
    
    /* material エリア */
    .material_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100vw;
        height: auto;
        padding: 0 0;
        margin-top: 2rem;
        /* background-color: #aaa; */
    }
    .material_ttl_area {
        display: flex;
        position: relative;
        width: min-content;
        height: auto;
        padding: 0;
        margin: 0;
        align-items: flex-start;
        /* background-color: #777; */
    }
    .material_ttl_area img {
        width: 90vw;
        height: auto;
    }
    .material_ttl_area::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 50vw;
        background-image: url('ph_ptera_up_right_2.png');
        background-position: top right;
        background-size: auto 17vw;
        background-repeat: no-repeat;
        /* background-color: #871534; */
        z-index: -1;
    }
    .ttl_material_sub {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 90%;
        height: auto;
        padding: 0;
        margin-top: 1.5rem;
        align-items: center;
        vertical-align: top;
        /* background-color: #777; */
    }
    .ttl_material_sub_catch {
        width: min-content;
        height: auto;
    }
    .ttl_material_sub_catch img {
        width: auto;
        height: 12vw;
        margin: 0 0rem;
    }
    .ttl_material_sub_catch_s {
        width: min-content;
        height: auto;
    }
    .ttl_material_sub_catch_s img {
        width: auto;
        height: 6vw;
        margin: 0.25rem 0rem;
    }
    
    .material_ttl_area_read {
        display: none;
        /* background-color: #777; */
    }
    .material_ttl_area_read_responsive {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 1.5rem;
        text-align: center;
        /* background-color: #777; */
    }
    .material_ttl_area_read img {
        width: 95%;
        height: auto;
    }
    .material_ttl_area_read_responsive img {
        width: 90%;
        height: auto;
    }
    
    .material_txt_index_area {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 1rem;
        align-items: center;
        /* background-color: #777; */
    }
    .material_txt_index {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        vertical-align: middle;
        align-items: center;
        padding: 0;
        margin: 0.5rem auto;
        /* background-color: #ffaaaa; */
    }
    .material_txt_ttl {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35vw;
        height: auto;
    }
    .material_txt_ttl img {
        width: auto;
        height: 100%;
    }
    .material_txt {
        display: none;
    }
    .material_txt_responsive {
        display: flex;
        align-items: center;
        margin-left: 0rem;
        margin-top: 0.5rem;
        width: 90%;
        height: none;
    }
    .material_txt img {
        width: auto;
        height: 80%;
    }
    .material_txt_responsive img {
        width: 100%;
        height: none;
    }
    
    /* --------------------------- */
    
    .material_article_area {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 2rem;
        align-items: center;
    }
    
    /* 素材紹介スライド写真_木の紙 */
    .material_article_area_slider_top_wood {
        display: none;
    }
    .material_article_area_slider_top_wood_responsive {
        display: block;
        position: relative;
        width: 100vw;
        padding: 0;
        margin: 0;
    }
    /* .material_article_area_slider_top_wood::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 60vw;
        background-image: url('material_txt_ttl_wood_b.svg');
        background-position: center top;
        background-size: auto 60vw;
        background-repeat: no-repeat;
        z-index: 1;
    } */
    .material_article_area_slider_top_wood_responsive::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 60vw;
        background-image: url('material_txt_ttl_wood_b.svg');
        background-position: center top;
        background-size: auto 60vw;
        background-repeat: no-repeat;
        z-index: 1;
        opacity: 0.9;
    }
    /* 素材紹介スライド写真_ライメックス */
    .material_article_area_slider_top_limex {
        display: none;
    }
    .material_article_area_slider_top_limex_responsive {
        position: relative;
        display: block;
        width: 100vw;
        padding: 0;
        margin: 0;
    }
    /* .material_article_area_slider_top_limex::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 20vw;
        background-image: url('material_txt_ttl_limex_b.svg');
        background-position: center top;
        background-size: auto 20vw;
        background-repeat: no-repeat;
        z-index: 1;
    } */
    .material_article_area_slider_top_limex_responsive::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 60vw;
        background-image: url('material_txt_ttl_limex_b.svg');
        background-position: center top;
        background-size: auto 60vw;
        background-repeat: no-repeat;
        z-index: 1;
        opacity: 0.9;
    }
    /* 素材紹介スライド写真_バナナペーパー */
    .material_article_area_slider_top_banana {
        display: none;
    }
    .material_article_area_slider_top_banana_responsive {
        position: relative;
        display: block;
        width: 100vw;
        padding: 0;
        margin: 0;
    }
    /* .material_article_area_slider_top_banana::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 20vw;
        background-image: url('material_txt_ttl_banana_b.svg');
        background-position: center top;
        background-size: auto 20vw;
        background-repeat: no-repeat;
        z-index: 1;
    } */
    .material_article_area_slider_top_banana_responsive::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 60vw;
        background-image: url('material_txt_ttl_banana_b.svg');
        background-position: center top;
        background-size: auto 60vw;
        background-repeat: no-repeat;
        z-index: 1;
        opacity: 0.75;
    }
    .material_article_area_slider {
        display: none;
    }
    .material_article_area_slider_responsive {
        display: none;
        width: 100%;
    }
    .material_article_slick_img {
        display: inline-block;
        width: auto;
    }
    .material_article_slick_img img {
        width: 100%;
        height: 60vw;
        object-fit: cover;
    }
    
    .material_article_title {
      font-size: 1.6rem;
      color: #871534;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.4;
      padding: 0 1rem;
      text-align: center;
    }
    .material_article_lead {
      font-size: 1.25rem;
      font-weight: 500;
      text-align: left;
      color: #444;
      padding: 0 1rem;
      margin-bottom: 1.5rem;
    }
    .material_article_section {
      width: 90%;
      font-size: 1.3rem;
      line-height: 1;
      margin-bottom: 2rem;
    }
    .material_article_subtitle {
      font-size: 1.4rem;
      color: #4CC512;
      margin-bottom: 1rem;
      border-left: 6px solid #4CC512;
      padding-left: 1rem;
    }
    .material_article_text {
      font-size: 1.1rem;
      line-height: 1.6rem;
      color: #333;
    }
    .material_article_list {
      list-style: disc;
      margin-left: 2rem;
      color: #333;
      font-size: 1.1rem;
      line-height: 1.6rem;
    }
    .material_article_list li strong {
      color: #871534;
    }
    .material_article_table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
      font-size: 0.8rem;
      line-height: 1rem;
    }
    .material_article_table th,
    .material_article_table td {
      border: 1px solid #ccc;
      padding: 0.5rem;
      text-align: center;
    }
    .material_article_table th {
      background-color: #f9e9e5;
      color: #871534;
    }
    /* .material_article_cta {
      text-align: center;
      margin-top: 3rem;
    }
    .material_article_cta_btn {
      display: inline-block;
      font-size: 1.2rem;
      padding: 0.75rem 2rem;
      background-color: #4CC512;
      color: #fff;
      border-radius: 2rem;
      transition: 0.3s;
      font-weight: bold;
    }
    .material_article_cta_btn:hover {
      background-color: #ff0000;
      color: #fff;
      transform: scale(1.05);
    } */
  
    /* ##################### */
  
    .build_guide_area {
        background-image: url('bg_colordots_30.svg');
        background-color: #f0f4f9;
        padding: 1rem 1rem;
        margin-top: 2rem;
      }
    .build_guide_area.full_width {
        width: 100vw;
        padding: 0;
        margin: 0;
    }
      .build_guide_title {
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        color: #4CC512;
        margin-bottom: 1rem;
      }
      .build_guide_lead {
        text-align: center;
        font-size: 1.1rem;
        margin-bottom: 2rem;
        color: #444;
      }
      .build_guide_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
      }
        .build_guide_video {
            display: none;
        }
        .build_guide_video_responsive {
            display: block;
            position: relative;
            padding-bottom: 56.25%; /* 16:9 アスペクト比 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
        }
        .build_guide_video_responsive iframe,
        .build_guide_video_responsive object,
        .build_guide_video_responsive embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
  
      .build_step_images {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: center;
        gap: 10px;
      }
  
      .step_item {
        overflow: hidden;
        margin-bottom: 1rem;
      }
      .step_item img {
        width:  100%;
        transition: transform 0.5s;
      }
      .step_item img:hover {
        transform: scale(1.07);
        transition: transform 0.5s;
      }
      .step_info {
        /* background: #bf8c8c; */
        padding: 0;
        display: flex;
        align-items: flex-start;  /* 番号とキャプションを上揃え */
        flex-wrap: wrap;          /* 長いキャプションは下に折り返す */
      }
      .step_caption {
        font-size: 0.95rem;
        color: #555;
        margin-top: 0.25rem; /* キャプションと画像の間にスペースを追加 */
      }
  
      /* ステップ番号の丸表示 */
  
    .step_number {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        background-color: #4CC512; /* 緑 */
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-weight: bold;
        margin-right: 0.5rem;
    }
    
    /* 注意書き */
    .build_step_note {
      font-size: 1.1rem;
      font-weight: 500;
      color: #ff0000;
      text-align: center;
      margin-top: 0rem;
    }
    
      .arrow {
        font-size: 1.5rem;
        color: #999;
      }
  
      /* --------- */
      .scene_area {
        background-image: url('bg_colordots.svg');
        background-color: #f9f1e6;
        padding: 2rem 1rem;
        margin-top: 2rem;
      }
      .scene_title {
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        color: #871534;
        margin-bottom: 1rem;
      }
      .scene_lead {
        text-align: center;
        font-size: 1.1rem;
        margin-bottom: 2rem;
        color: #555;
      }
      .scene_card {
        background-color: #fff;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.3s;
      }
      .scene_card:hover {
        transform: scale(1.03);
      }
      .scene_card img {
        width: 100%;
        height: auto;
        display: block;
      }
      .scene_caption {
        padding: 1rem;
        font-size: 0.95rem;
        color: #333;
        line-height: 1.6;
      }
  
    /* ---------- */
  
    .review_area {
        background-image: url('bg_whitedots.svg');
        background-color: #ceff7f;
        padding: 3rem 1rem;
        margin-top: 4rem;
    }
    .review_title {
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
      color: #004466;
      margin-bottom: 1rem;
    }
    .review_lead {
      text-align: center;
      font-size: 1.1rem;
      color: #444;
      margin-bottom: 2rem;
    }
    .review_grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
      gap: 2rem;
    }
    .review_card {
      background-color: #fff;
      border-radius: 0.75rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem;
      text-align: center;
      transition: transform 0.3s;
    }
    .review_card:hover {
      transform: scale(1.03);
    }
    .review_img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 1rem;
      box-shadow: 0 0 4px rgba(0,0,0,0.1);
    }
    .review_comment {
        width: 100%;
        border-top: solid 1px #333;
        text-align: justify;
        font-size: 0.95rem;
        color: #333;
        padding: 0.5rem 1.5rem 1rem 1.5rem;
        background: #fcffcb;
    }
    .review_meta {
      font-size: 0.85rem;
      color: #888;
    }
    
    .review_user {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    
    .review_user_icon {
        width: auto;
        height: 7rem;
    }
    
    .review_user_icon img {
        height: 100%;
    }
    
    .review_user_meta_textarea {
        margin-left: 1rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }
    
    .review_catch {
      font-size: 1.45rem;
      line-height: 1.75rem;
      font-weight: 600;
      color: #ff6f6f;
    
    }
    
    .review_meta {
      font-size: 1.15rem;
      line-height: 2rem;
      font-weight: 600;
      color: #777;
    }
    
    .review_saurus {
        font-size: 0.8rem;
        font-weight: 600;
        color: #a40000;
    }
    
    /* ーーーーーーーーーーー */
    
    /* ============================
       FAQエリア全体のデザイン
       ============================ */
    .faq_area {
        background-color: #fff7e6;
        padding: 1rem 1rem;
        margin-top: 2rem;
        border-radius: 1rem;
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* FAQタイトル */
    .faq_title {
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 1rem;
        color: #d97800;
    }
    
    /* FAQのリード文 */
    .faq_lead {
        text-align: center;
        font-size: 1.1rem;
        color: #444;
        margin-bottom: 2rem;
    }
    
    /* FAQリスト */
    .faq_list {
        display: flex;
        flex-direction: column;
        gap: 0rem;
    }
    
    /* 各FAQアイテムのデザイン */
    .faq_item {
        background: #fff;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease-in-out;
        margin-bottom: 0.5rem;       /* 余計な隙間は .faq_list の gap で制御 */
        padding: 0;             /* パディングは中身に持たせる */
    }
    
    /* 各FAQの質問ボタン */
    .faq_question {
        width: 100%;
        display: block;
        text-align: left;
        padding: 0.5rem;
        background-color: #ffd9a0;
        color: #333;
        font-weight: bold;
        cursor: pointer;
        border: none;
        font-size: 1rem;
        transition: background-color 0.3s ease-in-out;
        border-radius: 0.25rem 0.25rem 0 0; /* 上角だけ丸める */
    }
    
    /* 質問ボタンのホバー効果 */
    .faq_question:hover {
        background-color: #ffcb65;
    }
    
    /* ================================================= */
    /* FAQアコーディオン：閉じた状態                    */
    /* —————————————————————————————————————— */
    /* 最初は高さもパディングもゼロにして完全に隠す */
    .faq_answer {
        max-height: 0;
        padding: 0 1rem;                 /* 上下 0rem、左右 1rem */
        overflow: hidden;               /* はみ出しを隠す */
        border-top: none;               /* 境界線も消す */
        display: flex;                  /* flexを常に有効化 */
        align-items: center;            /* （念のため） */
        font-size: 0.85rem;
        font-weight: 500;
        transition:
          max-height 0.6s ease,
          padding    0.6s ease;
    }
    
    /* ================================================= */
    /* FAQアコーディオン：開いた状態                    */
    /* —————————————————————————————————————— */
    /* JS で answer.scrollHeight を max-height に書き込むので、 */
    /* CSS 側では max-height は指定せず、padding と border だけ設定 */
    .faq_item.active .faq_answer {
        padding: 2rem 1rem;                 /* 上下 2rem、左右 1rem */
        border-top: 1px solid #ffd9a0;      /* 質問との境界線 */
        /* display:flex; と align-items は .faq_answer に書いてあるので不要 */
    }
    
    /* 各FAQアイテムの背景色を交互に設定 */
    .faq_item_1 { background-color: #ffebeb; }
    .faq_item_2 { background-color: #e7f3fe; }
    .faq_item_3 { background-color: #fff8d8; }
    .faq_item_4 { background-color: #e7f8ff; }
    .faq_item_5 { background-color: #fffae6; }
    .faq_item_6 { background-color: #e9f9e9; }
    .faq_item_7 { background-color: #f1e3ff; }
    .faq_item_8 { background-color: #dff7fb; }
    .faq_item_9 { background-color: #ffe2d0; }
    .faq_item_10{ background-color: #ffddff; }
    
    
    /* ##################### */
    
    
    
    /* footerエリア */
    .footer {
        display: flex;
        flex-direction: column;
        background-color: #4CC512;
        width: 100%;
        padding: 10px 20px;
        margin-top: 3rem;
        align-items: center;
    }
    
    .footer_text {
        color: white;
        padding: 10px 20px;
        font-weight: 500;
    }
    .footer_text a {
        color: rgb(255, 245, 53);
        font-size: 1.1rem;
        /* font-weight: 700; */
        text-decoration: none;
        transition: 0.4s;
    }
    .footer_text a:hover {
        color: brown;
        text-decoration: none;
        transition: 0.4s;
    }

    /* flow SNS エリア */
    .flow_sns_area {
        position: fixed;
        display: flex;
        width: 100vw;
        background-color: #4bc512e7;
        height: auto;
        justify-content: center;
        bottom: 0;
        z-index: 100;
    }
    /* flow SNS エリア 終了*/
    
    .footer_sns_link_area {
        display: flex;
        flex-direction: row;
        /* width: min-content; */
        margin: 0.5rem 0;
    }
    .footer_sns_logo {
        width: auto;
        padding: 0 1rem;
    }
    .footer_sns_logo img {
        width: auto;
        height: 8vw;
    }
    
    .footer_copyright {
        display: flex;
        background-color: #4CC512;
        color: white;
        width: 100vw;
        padding-bottom: 4rem;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 300;
    }
    /* footerエリア終了 */
    
    
    
    /* オーバーレイ */
    #overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: linear-gradient(#871533db, #ffb7cadc);
        display: none;
        z-index: 100;
    }
    
    /* モーダルウィンドウ */
    #modalWindow {
        width: 80%;
        height: auto;
        position: fixed;
        /* border: 2px solid #D04255; */
        /* background-color: #FFF; */
        display: none;
        z-index: 101;
    }
    
    .modalWindow_price_table {
        display: none;
    }
    
    .modalWindow_price_table.active {
        display: none;
    }
    
    .address_modal {
        margin-top: 1rem;
        font-size: 0.8rem;
        text-align: center;
    }
    
    /* PAGETOP ボタン */
    
    .pageTop_btn_area {
        position: fixed;
        display: inline-block;
        right: 2rem;
        bottom: 3.5rem;
        z-index: 101;
    }
    
    .pageTop_btn_area a {
        display: block;
    }
    
    .pageTop {
        display: flex;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 700;
        color: #4bc512;
        letter-spacing: 0.1rem;
        align-items: center;
        cursor: pointer;
    
        transform: rotate(90deg) translate(0px, 0px);
        transform-origin: 100% 100%;
        transition: all 0.3s ease-in;
    }
    
    .triangle {
        display: inline-block;
        width: 0px;
        height: 0px;
        margin-right: 0.5rem;
        border-right: 0.5rem solid #4bc512;
        border-top: 0.35rem solid transparent;
        border-bottom: 0.35rem solid transparent;
        transition: all 0.3s ease-in;
    }
    
    .pageTop:hover {
        transform: rotate(90deg) translate(-5px, 0px);
        color: red;
    }
    
    .pageTop:hover .triangle {
        border-right: 0.5rem solid red;
        transition: all 0.3s ease-in;
    }
    
    /* PAGE TOPボタン　スクロール */
    
    .scroll_pageTop_btn_f {
        content: '';
        opacity: 0;
        transform: translate(100px, 0px);
        transition: all 1000ms ease-in-out;
    }
    .scroll_pageTop_btn_f.scroll_btn {
        opacity: 1;
        transform: translate(0,0);
        transition: all 1000ms ease-in-out;
        transition-delay: 300ms;
    }
    
    /* PAGE TOPボタン　スクロール終了 */
    
    /* GPT追加分 */
    
    .section {
        padding: 1rem 1rem;
        /* background-color: #fff; */
    }
    
    .section_inner {
      width: 100%;
      margin: 0 auto;
    }
    
    .section_title {
      font-size: 1.8rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 1rem;
      position: relative;
    }
    
    .section_title span {
      display: inline-block;
      border-bottom: 4px solid #4bc512;
      padding-bottom: 0.25em;
    }
    
    .section_lead {
      font-size: 1.15rem;
      text-align: center;
      margin-bottom: 2rem;
      font-weight: 500;
      color: #555;
    }
    
    .build_guide_video_wrapper,
    .build_step_images_wrapper {
      margin: 1.5rem 0;
    }
    .step_column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;  /* ここを変更：トップ位置で揃える */
        gap: 0;
    }
    .arrow {
      font-weight: bold;
      color: #aaa;
      font-size: 1.5rem;
    }
    
    .scene_grid,
    .review_grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 2列に変更 */
        gap: 1rem;
    }
    
    .scene_card,
    .review_card {
      background: #f9f9f9;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    
    .scene_card:hover,
    .review_card:hover {
      transform: translateY(-4px);
    }
    
    .scene_card img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      margin-bottom: 0.75rem;
    }
    
    .scene_caption {
      font-size: 0.95rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    
    
    
    /* アニメーション */
    .fade_up {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease-out;
    }
    
    .fade_up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ナビメニュー＋コンテンツ一覧 */
    /* ボタン */
    #toggle {
        opacity: 0;
        mix-blend-mode: luminosity;
    }
    #toggle.slideOpen{
        animation: slideOpenAnime 0.5s forwards;
    }
    @keyframes slideOpenAnime{
        from {
            opacity: 0;
            transform: translateX(100px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    #toggle.slideClose{
        animation: slideCloseAnime 0.5s forwards;
        }
    @keyframes slideCloseAnime{
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 1;
            transform: translateX(100px);
        }
    }
    .menuButtonContainer {
        position: fixed;
        top: 5%;
        right: 2%;
        height: 31px;
        width: 44px;
        cursor: pointer;
        z-index: 102;
        transition: all .25s ease;
    }
    .menuButtonContainer:hover {
        transition: all 0.25s;
        opacity: 0.5;
    }
    /* .menuButtonContainer.active {
        top:5%;
    } */
    .menuButtonContainer.active .top {
        transform: translateY(13px) translateX(0) rotate(45deg);
        background: #fff;
    }
    .menuButtonContainer.active .middle {
        opacity: 0;
        background: #fff;
    }
    .menuButtonContainer.active .bottom {
        transform: translateY(-13px) translateX(0) rotate(-45deg);
        background: #fff;
    }
    .menuButtonContainer.active:hover .top {
        background: #1313f9;
    }
    .menuButtonContainer.active:hover .bottom {
        background: #1313f9;
    }
    .menuButtonContainer span {
        background: #1199aa;
        border: none;
        height: 5px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition:  all .35s ease;
        cursor: pointer;
    }
    .menuButtonContainer span:nth-of-type(2) {
        top: 13px;
    }
    .menuButtonContainer span:nth-of-type(3) {
        top: 26px;
    }
    /* TOPへ */
    #pageTop {
        opacity: 0;
        mix-blend-mode: luminosity;
    }
    #pageTop.slideOpen{
        animation: slideOpenAnime 0.5s forwards;
    }
    @keyframes slideOpenAnime{
        from {
            opacity: 0;
            transform: translateX(100px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    #pageTop.slideClose{
        animation: slideCloseAnime 0.5s forwards;
        }
    @keyframes slideCloseAnime{
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 1;
            transform: translateX(100px);
        }
    }

    /* ボタン 終了 */
    /* コンテンツ一覧 */
    .contentsOverlay {
        position: fixed;
        background: #1199aa;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: hidden;
        z-index: 101;
    }
    .contentsOverlay.open {
        opacity: .95;
        visibility: visible;
        height: 100%;
    }
    .contentsOverlay.open li {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .35s;
    }
    .contentsOverlay.open li:nth-of-type(2) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .4s;
    }
    .contentsOverlay.open li:nth-of-type(3) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .45s;
    }
    .contentsOverlay.open li:nth-of-type(4) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .5s;
    }
    .contentsOverlay.open li:nth-of-type(5) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .55s;
    }
    .contentsOverlay.open li:nth-of-type(6) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .6s;
    }
    .contentsOverlay.open li:nth-of-type(7) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .65s;
    }
    .contentsOverlay.open li:nth-of-type(8) {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .7s;
    }
    .contentsOverlay nav {
        position: relative;
        height: 70%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5rem;
        font-weight: 600;
        color: #fff;
        text-align: center;
    }
    .contentsOverlay ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: inline-block;
        height: 100%; 
    }
    .contentsOverlay ul li {
        position: relative;
        /* display: block; */
        /* height: calc(100% / 8); */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 9vh;
        opacity: 0;
        padding: 1rem 0rem;
    }
    .contentsOverlay ul li::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 2px dotted #ffffff66;
    }
    .contentsOverlay ul li:last-child::after {
        display: none;
    }
    .contentsOverlay ul li a {
        display: inline-block;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
        transition:  all .2s ease;
    }
    .contentsOverlay ul li a:hover {
        color: #e6f913;
        font-size: 2.4rem;
        font-weight: 600;
        transition:  all .2s ease;
    }
    @keyframes fadeInRight {
        0% {
            opacity: 0;
            left: 20%;
        }
        100% {
            opacity: 1;
            left: 0;
        }
    }
    /* コンテンツ一覧 終了 */
    /* ナビメニュー＋コンテンツ一覧 終了 */

        /*==================================================
    　5-2-4 MENUがCLOSEに
    ===================================*/

    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .open_btn{
        z-index: 999;
        position: relative;/*ボタン内側の基点となるためrelativeを指定*/
        background:#17b21f;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;
    }

    /*ボタン内側*/
    .open_btn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 2px;
        border-radius: 5px;
        background: #fff;
        width: 45%;
    }
    
    .open_btn span:nth-of-type(1) {
        top:13px; 
    }

    .open_btn span:nth-of-type(2) {
        top:19px;
    }

    .open_btn span:nth-of-type(3) {
      top:25px;
    }
    .open_btn span:nth-of-type(3)::after {
      content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
      position: absolute;
      top:5px;
      left:-3px;
      color: #fff;
      font-size: 8px;
      font-weight: 600;
      text-transform: uppercase;
    }
    /*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
    .open_btn.active span:nth-of-type(1) {
        top: 14px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    .open_btn.active span:nth-of-type(2) {
      opacity: 0;
    }
    .open_btn.active span:nth-of-type(3){
        top: 26px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    .open_btn.active span:nth-of-type(3)::after {
      content:"Close";/*3つ目の要素のafterにClose表示を指定*/
        transform: translateY(0) rotate(-45deg);
      top:5px;
      left:3px;
    }

    /*========= ナビゲーションのためのCSS ===============*/

    /*アクティブになったエリア*/
    #g-nav.panelactive {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 888;
    	top: 0;
    	width:100%;
        height: 100vh;
    }

    /*丸の拡大*/
    .circle-bg{
        position: fixed;
    	z-index:-2;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #e1ffb7;
        opacity: 0.95;
        /*丸のスタート位置と形状*/
    	transform: scale(0);/*scaleをはじめは0に*/
    	top:-50px;
        left:calc(50% - 50px);/*50%から円の半径を引いた値*/
        transition: all .6s;/*0.6秒かけてアニメーション*/
    }

    .circle-bg.circleactive{
    	transform: scale(10);/*クラスが付与されたらscaleを拡大*/
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list {
        display: none;/*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #g-nav-list {
         display: block; /*クラスが付与されたら出現*/
    }

    /*ナビゲーション*/
    #g-nav ul {
    	opacity: 0;/*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute;
        z-index: 999;
        top:17rem;
        left:50%;
        transform: translate(-60%,-50%);
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
    }

    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li{
        animation-name:gnaviAnime;
        animation-duration:1s;
        animation-delay:.2s;
        animation-fill-mode:forwards;
        opacity:0;
    }
    @keyframes gnaviAnime{
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /*リストのレイアウト設定*/
    #g-nav li{
    	text-align: center; 
    	list-style: none;
        font-size: 1rem;
        line-height: 3.5rem;
        color: #ff0000;
        font-weight: 600;
    }

    #g-nav li a{
    	position: relative;
        text-decoration: none;
        color: #3f3535;
        transition: all 0.4s;
    }

    /* g-navのhover設定 */
    #g-nav li a::before,
    #g-nav li a::after {
        content:'';
        position: absolute;
        bottom: -15px;
        display: block;
        width: 20%;
        height: 3px;
        background-color: #ff0000;
        opacity: 0;
        left: 40%;
        transition: 0.4s;
    }

    #g-nav li a:hover {
        color: #ff0000;
    }

    #g-nav li a:hover::before,
    #g-nav li a:hover::after {
        bottom: -10px;
        opacity: 1;
    }

    /* g-navのhover設定 終了 */

    /* ハンバーガーメニュー 終了*/

    /* contact.php */
    .pageContainer {
        width: 100%;
        height: 100vh;
        margin: 0 0;
        padding: 0 0;
    }

    .formMainArea {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100%;
        margin: 0 0;
        padding-top: 5rem;
        padding-bottom: 3rem;
        font-size: 1.0rem;
        font-family: 'M PLUS 1', sans-serif;

        background-image: url(bg_lineup.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .formTitleArea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .formTitle {
        width: fit-content;
        width: -moz-fit-content;
        font-size: 1.5rem;
        line-height: 1.5rem;
        font-weight: 700;
        padding: 1rem 1.5rem;
        text-align: center;
        color: #fff;
        background-color: #4bc512;
        border-radius: 1rem;
        margin-bottom: 1rem;
    }
    .formReadText {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
        padding: 0 1rem;
    }

    .formInputArea {
        max-width: none;
        width: 90%;
        margin-top: 1rem;
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 3rem;
        padding: 0rem 1.5rem;
        border-radius: 1rem;
        background-color: #ffffffcc;
    }
    .formInput {
        width: 100%;
        font-size: 1rem;
    }

    .formInputItemSet{
        margin: 0;
        padding: 2rem 0;
        border-bottom: 1px solid #cccccc;
    }
    .formInputTtl {
        padding-left: 1rem;
        margin: 0 0 2rem 0;
        border-left: 3px solid #4bc512;
    }
    .formInputTtlName {
        vertical-align: baseline;
    }
    .iconMust {
        margin-left: 0.5rem;
        padding: 0.3rem 0.5rem;
        background-color: #ff0000;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 0.5rem;
        vertical-align: 0.25rem;
    }
    .iconAny {
        margin-left: 0.5rem;
        padding: 0.3rem 0.5rem;
        background-color: #666666;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 0.5rem;
        vertical-align: 0.25rem;
    }
    .formInputDetail {
        margin: 0 0;
        line-height: 1rem;
    }
    .formInputFormatSS {
        width: 15rem;
        margin: 0;
        padding: 1rem 1rem;
        border: 1px solid #fff;
        background-color: #fff;
        font-size: 1.25rem;
        color: #000000;
    }
    .formInputFormatSS::placeholder {
        color:#cccccc;
        font-size: 1.75rem;
    }
    .formInputFormatS {
        width: 30%;
        margin: 0;
        padding: 1rem 1rem;
        border: 1px solid #fff;
        background-color: #fff;
        font-size: 1.25rem;
        color: #000000;
    }
    .formInputFormatS::placeholder {
        color:#cccccc;
        font-size: 1.25rem;
    }
    .formInputFormatM {
        width: 100%;
        margin: 0;
        padding: 1rem 1rem;
        border: 1px solid #fff;
        background-color: #fff;
        font-size: 1.25rem;
        color: #000000;
    }
    .formInputFormatM::placeholder {
        color:#cccccc;
        font-size: 1.25rem;
    }
    .formInputFormatL {
        width: 100%;
        margin: 0;
        padding: 1rem 1rem;
        border: 1px solid #fff;
        background-color: #fff;
        font-size: 1.25rem;
        color: #000000;
    }
    .formInputFormatL::placeholder {
        color:#cccccc;
        font-size: 1.25rem;
    }
    .formInputNote {
        display: inline-block;
        color: #666666;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    .formInputNoteMargin {
        margin-top: 1rem;
    }
    .formButton {
        display: block;
        margin: 0 auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 1.5rem 2rem;
        border: 1px solid #4bc512;
        background-color: #4bc512;
        border-radius: 1rem;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 300;
        cursor: pointer;
        transition: all 0.3s;
    }
    .formButton:hover {
        border: 1px solid #FF87A0;
        background-color: #FF87A0;
        /* font-size: 1.8rem; */
        font-weight: 700;
        transition: all 0.3s;
    }

    .formFooterArea {
        width: 100%;
        height: 10vh;
        margin: 0 0;
        padding-bottom: 3rem;
        background-color: #00621f;

        background-image: url(main_top_bg.jpg);
        background-position: -20%;
        background-blend-mode: multiply;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .formFooterCopyright {
        width: 100%;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 900;
        text-align: center;
        margin-top: 2rem;
    }

    .formConfirmTextRead {
        font-weight: 500;
        font-size: 1.25rem;
        margin-bottom: 3rem;
        padding-bottom: 3rem;
        border-bottom: 1px solid #999999;
    }
    .formConfirmTextRead span {
       font-weight: 700;
       color: #ff385f;
    }
    .formConfirmText {
        font-size: 1rem;
    }
    .formButtonBlock {
        width: fit-content;
        width: -moz-fit-content;
        display: flex;
        gap: 0 2rem;
        margin: 0 auto;
    }

    /* ラインナップ各指定色 */
    .limexTextColor {
        color: #541B86;
    }
    .limexBorderBoxColor {
        border: solid 1px #541B86;
    }
    .limexBorderLineColor {
        border-top: solid 1px #541B86;
        border-bottom: solid 1px #541B86;
    }
    .limexBgColor {
        background-color: #541B86;
    }
    .limexBgColorTp {
        background-color: #541b8644;
    }

    .bananaTextColor {
        color: #F6AB00;
    }
    .bananaBorderBoxColor {
        border: solid 1px #F6AB00;
    }
    .bananaBorderLineColor {
        border-top: solid 1px #F6AB00;
        border-bottom: solid 1px #F6AB00;
    }
    .bananaBgColor {
        background-color: #F6AB00;
    }
    .bananaBgColorTp {
        background-color: #F6AB0044;
    }

    .woodTextColor {
        color: #8FC31F;
    }
    .woodBorderBoxColor {
        border: solid 1px #8FC31F;
    }
    .woodBorderLineColor {
        border-top: solid 1px #8FC31F;
        border-bottom: solid 1px #8FC31F;
    }
    .woodBgColor {
        background-color: #8FC31F;
    }
    .woodBgColorTp {
        background-color: #8FC31F44;
    }

    /* ラインナップ各指定色 終了 */
}