@charset "UTF-8";

html,body{
    padding:0;
    margin:0;
    height:100%;
    color: #464646;
    letter-spacing: 0.1rem;
}
body {
    overflow-x: initial!important;
}

header.l-header .header_menu .right ul.sub-menu-parts li button.buy_text_btn {
    margin-left: 20px;
}
header.l-header .header_menu .right ul.sub-menu-parts li button.buy_text_btn svg {
    width: 13px !important;
    height: 13px !important;
}
/*header.l-header div.l-spHeader .l-spHeader__inner .l-spHeader__logo {*/
/*    width: 110px;*/
/*    height: 50px;*/
/*    margin-left: 4%;*/
/*}*/
header.l-header div.l-spHeader div#sp_modal {
    overflow-y: scroll;
    /*height: 100px;*/
}
header.l-header div.l-spHeader div#sp_modal ul li {
    padding: 0 2rem;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* splash object */
.loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    transition: opacity 2.5s, visibility 2.5s;
    background-color: #fff;
}

.loading-image {
    display: none;
    max-width: 100%;
    width: 100vw;
    height: auto;
    opacity: 0;
}

/*.loading img {*/
/*    width: 100vw;*/
/*    opacity: 0;*/
/*}*/

@media screen and (max-width: 750px) {
    .loading-image.pc {
        display: none;
    }
    .loading-image.sp {
        display: block;
    }
}

@media screen and (min-width: 751px) {
    .loading-image.pc {
        display: block;
    }
    .loading-image.sp {
        display: none;
    }
}


.visible {
    opacity: 1;
    visibility: visible;
    z-index: 1000 !important;

}

.loading.hidden {
    z-index: 0;
}

.fadein {
    /*opacity: 0;*/
    animation: fadein 2s ease forwards;
}

.fadeout {
    animation: fadeout 2s ease forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* photo slide */

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/*
左から右へ
----------------------------*/
@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

.slide-wrap {
    display: flex;
    overflow: hidden;
}

.slide__list--left {
    animation :infinity-scroll-left 80s infinite linear 0.5s both;
}
.slide__list--right{
    animation :infinity-scroll-right 80s infinite linear 0.5s both;
}

/*
マウスオーバーで一時停止
----------------------------*/
.slide-wrap:hover .slide__list--left,
.slide-wrap:hover .slide__list--right {
    animation-play-state: paused;
}


/* 簡易リセットCSS */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* 画像のサイズ調整 */

#app {
    position: relative;
}

#app div#main div.lineup_kv {
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    text-align: center;
}

#app div#main div.lineup_kv img {
    width: 100%;
}

#app div#main div.lineup_kv .pc > div {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* FV 動画音声オンオフ */
#volumeOnButton img,
#volumeOffButton img {
    filter: brightness(1.1);
}
#volumeOnButton.active img,
#volumeOffButton.active img {
    filter: brightness(0.9);
}


/* ここから */
@media print, screen and (min-width: 751px) {
    html,body {
        scroll-padding-top: 72px;
    }

    .sp {
        display: none !important;
    }

   /* toggle menu */
    .MenuBtn {
        display: none;
    }

    .MenuBtn.Style01 {
        position: fixed;
        top: 82px;
        right: 20px;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 4;
    }

    .MenuBtn.Style01 .MenuBtn-BarFrame {
        position: relative;
        /*display: block;*/
        width: 24px;
        height: 2px;
    }

    .MenuBtn.Style01 .MenuBtn-BarFrame-FirstBar {
        position: absolute;
        /*display: block;*/
        width: 100%;
        height: 100%;
        background-color: #918F8F !important;
        transition: all .15s linear;
    }

    .MenuBtn.Style01 .MenuBtn-BarFrame-SecondBar {
        position: absolute;
        /*display: block;*/
        width: 100%;
        height: 100%;
        background-color: #918F8F !important;
        transition: all .15s linear;
        transform: translateY(-8px) rotate(0deg);
    }

    .MenuBtn.Style01 .MenuBtn-BarFrame-ThirdBar {
        position: absolute;
        /*display: block;*/
        width: 100%;
        height: 100%;
        background-color: #918F8F !important;
        transition: all .15s linear;
        transform: translateY(8px) rotate(0deg);
    }

    .MenuBtn.Style01.isClosed .MenuBtn-BarFrame-FirstBar {
        opacity: 0;
    }

    .MenuBtn.Style01.isClosed .MenuBtn-BarFrame-SecondBar {
        transform: translateY(0) rotate(45deg);
    }

    .MenuBtn.Style01.isClosed .MenuBtn-BarFrame-ThirdBar {
        transform: translateY(0) rotate(-45deg);
    }

    /* メニュー本体 */
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        /*display: none;*/
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        z-index: 3;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        background-image: url(../image/bg_sidemenu.svg);
    }
    .menu__item{
        width: 100%;
        height: auto;
        padding: 2em 1em;
        text-align: left;
        color: #464646;
        box-sizing: border-box;
        font-size: calc(14px + ((16 - 14) * ((100vw - 1280px) / (1920 - 1280))));
    }

    .menu ul {
        margin-right: 10vw;
    }

    /* アニメーション部分 */
    /* アニメーション前のメニューの状態 */
    .menu{
        transform: translateY(-100vw);
        transition: all .3s ease;

    }
    /* アニメーション後のメニューの状態 */
    .menu.is-active{
        transform: translateY(0);
    }

    /* /toggle menu */

#main {
    /*height: calc(100vh + 72px);*/
    margin-top: 72px !important;
    width: 100%;
    height: 100vh;
    background-attachment: fixed;
    background-size:  cover;
    background-repeat: repeat-y;
    background-image: url("../image/bg_fv.jpg");
}

.main_imgTop {
    display: flex;
    align-content: space-between;
    position: relative;
}

#l_navi {
    position: relative;
    height: 100vh;
    width: 25%;
    background-color: #F3EFEB;
    z-index: 2;
}

#l_navi a:hover {
    color: #955A32;
}


#mv_area {
    width: 70%;
    overflow: hidden;
    z-index: 2;
}

#mv_area .mv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#mv_area video {
    margin-top: 15vh;
    margin-bottom: 2vh;
    width: 70%;
}

#mv_area .vol_control {
    margin: 0 auto;
    width: 70%;
    text-align: right;
}

#mv_area button {
    cursor: pointer;
    margin: 0 1vh;
}

.main_imgTop .wave_right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -47%;
}

.main_imgTop .wave_right img {
    width: 100%;
    height: 100%;
}

#l_navi .inner {
    position: absolute;
    top: 20%;
    left: 45%;
    transform: translateX(-45%);
}

#l_navi h1 {
    margin-bottom: 16vh;
    text-align: center;
}

#l_navi .bg {
    width: 100%;
}

#l_navi ul {
    margin: 0;
    font-size: 0.9vw;
}

#l_navi ul li {
    margin-bottom: 1rem;
}

#about {
    padding: 5vh 0;
    background-color: #D1CEC5;
    width: 100%;
}

#photo {
    /*background-color: #EEEDEA;*/
    width: 100%;
}

#photo > div {
    padding: 15vh 0;
    background-attachment: fixed;
    background-size:  cover;
    background-repeat: repeat-y;
    background-image: url("../image/bg_fv.jpg");
}

#guide {
    background-color: #EEE7E1;
    width: 100%;
}

#movie {
    /*background-color: #F4F3F1;*/
    width: 100%;
}
#movie .movie_wrap {
    margin: 0 auto;
    padding: 15vh 0;
    background-attachment: fixed;
    background-size:  cover;
    background-repeat: repeat-y;
    background-image: url("../image/bg_fv.jpg");
    position: relative;
}


#movie h2{
    position: relative;
    z-index: 1;
}

#movie div.inner {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 920px;
    position: relative;
    z-index: 1;
}

#info {
    padding-bottom: 30vh;
    width: 100%;
    position: relative;
    /*z-index: 1;*/
}

#info_modal .u-pt-xxl {
    padding-top: 40px;
}

#about > div {
    margin: 0 auto;
    /*max-width: 1200px;*/
    /*min-width: 950px;*/
}

#about h2 {
    margin-bottom: 6vh;
    padding: 3vw;
    background-image: url("../image/tit_about.svg");
    background-repeat: no-repeat;
    background-position: center;
    font-size: clamp(1rem, 2vw + .5rem, 1.625rem);
    text-align: center;
    margin-top: 50px;
}

#photo h2 {
    margin-bottom: 5vh;
    padding: 2vw;
    background-image: url("../image/tit_photo.svg");
    background-repeat: no-repeat;
    background-position: center;
    letter-spacing: 0.5rem;
    font-size: clamp(1rem, 2vw + .5rem, 1.625rem);
    text-align: center;
}

#guide h2 {
    padding: 15vh 2vw;
    background-image: url("../image/tit_guide.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #E5DBD1;
    letter-spacing: 0.5rem;
    font-size: clamp(1rem, 2vw + .5rem, 1.625rem);
    text-align: center;
}

#movie h2 {
    margin-bottom: 4vh;
    padding: 2vw;
    background-image: url("../image/tit_movie.svg");
    background-repeat: no-repeat;
    background-position: center;
    /*background-color: #F4F3F1;*/
    letter-spacing: 0.5rem;
    font-size: clamp(1rem, 2vw + .5rem, 1.625rem);
    text-align: center;
}



#about {
    position: relative;
}

.about1 {
    opacity: 0;
    /*position: absolute!important;*/
    /*top: 30% !important;*/
    /*left: 30% !important;*/
}
.about1.surround {
    opacity: 1;
}
.about2, .about3 {
    opacity: 0;
    position: absolute!important;
    top: 30% !important;
    left: 30% !important;
}
.about1.active, .about2.active, .about3.active {
    opacity: 1;

}


.about3.surround {
    opacity: 1;
}
.about3.surround .about_container .wrap {
    position: absolute;
    top: 9vw;
    left: 18.8vw;
    width: 1280px;
    margin: auto;
}

/*about 数字の動き*/
.about1.surround .page_num img {
    transition: 1s;
    transform:rotateY(360deg);
    opacity: 1;
}
.about1 .page_num img,
.about2 .page_num img,
.about3 .page_num img {
    transition: 1s;
    transform:rotateY(260deg);
    opacity: 0;
}
.about1.active .page_num img,
.about2.active .page_num img,
.about3.active .page_num img {
    transition: 1s;
    transform:rotateY(360deg);
    opacity: 1;
}
.about3.surround .page_num img {
    transition: 1s;
    transform:rotateY(360deg);
    opacity: 1;
}
/* ----------- */


/*about　画像の動き*/
.about1.surround .photo img {
    transition: 1s;
    opacity:1;
    transform: translateY(0);
}
.about1 .photo img,
.about2 .photo img,
.about3 .describe {
    transition: 1s;
    transform: translateY(50px);
    opacity: 0;
}
.about1.active .photo img,
.about2.active .photo img,
.about3.active .describe {
    transition: 1s;
    opacity: 1;
    transform: translateY(0);
}
.about3.surround .describe {
    transition: 1s;
    opacity:1;
    transform: translateY(0);
}


/* ------------ */

/*about　文字の動き*/

.about1.surround .describe {
    transition: 1s;
    opacity:1;
    transform: translateY(0);
}
.about1 .describe,
.about2 .describe,
.about3 .third_top_description {
    transition: 1s;
    transform: translateY(50px);
    opacity: 0;
}
.about1.active .describe,
.about2.active .describe,
.about3.active .third_top_description {
    transition: 1s;
    opacity: 1;
    transform: translateY(0);
}
.about3.surround .third_top_description {
    transition: 1s;
    opacity:1;
    transform: translateY(0);
}


/* ------------ */



.about1,.about2,.about3 {
    margin-bottom: 7vh;
}

.about1 .about_container,
.about2 .about_container,
.about3 .about_container {
    position: relative;
    padding-bottom: 10vh;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.about1 .about_container::before,
.about2 .about_container::before,
.about3 .about_container::before {
    content: "";
    display: block;
    padding-top: 50vh;
}

.about1 .about_container .wrap {
    display: flex;
    justify-content: space-between;
    position: absolute;
    /*position: fixed;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
.about2 .about_container .wrap {
    display: flex;
    justify-content: space-between;
    /*position: absolute;*/
    position: fixed;
    top: 57%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.about1 .about_container .wrap.surround {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*!*position: absolute;*!*/
    /*position: fixed;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%,-50%);*/
    /*max-width: 1280px;*/
    /*width: 100%;*/
    /*margin: 0 auto;*/


    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
}

.about3 .about_container .wrap {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/

    position: fixed;
    top: 53%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.about1 .page_num,
.about2 .page_num {
    padding-left: 5vw;
    display: flex;
    flex-direction: column;
    align-self: center;
    align-content: center;
    flex-basis: 30vw;
    /*display: none;*/
}
.about1 .page_num.active,
.about2 .page_num.active,
.about3 .page_num.active {
    /*display: flex;*/
}
.about3 .page_num {
    padding-left: 5vw;
    margin-bottom: 4vh;
    display: flex;
    flex-direction: column;
    align-self: center;
    align-content: center;
    /* flex-basis: 16vw; */
    flex-basis: 14vw;
    /*display: none;*/
}

.page_num img {
    margin-left: 10%;
    width: 4vw;
}


.about1 .photo,
.about2 .photo {
    flex-basis: 40vw;
    text-align: center;
    /*display: none;*/
}
.about1 .photo.active,
.about2 .photo.active {
    /*display: block;*/
}
.about1 .photo img,
.about2 .photo img {
    width: 100vw;
}

.about1 .describe {
    padding-left: 4vw;
    flex-basis: 30vw;
}

.about2 .describe {
    padding-left: 4vw;
    flex-basis: 30vw;
}
.about1 .describe.active,
.about2 .describe.active,
.about3 .describe.active {
    /*display: block;*/
}
.about3 .describe {
    /* flex-basis: 72%; */
    /*display: none;*/
}

.about1 .describe,
.about2 .describe {
    /*display: none;*/
    flex-direction: column;
    align-self: center;
    align-content: center;
    white-space: nowrap;
}
.about1 .describe.active,
.about2 .describe.active {
    /*display: flex;*/
}

.about1 .describe {
    line-height: 2.5;
    font-size: calc(14px + ((16 - 14) * ((100vw - 1280px) / (1920 - 1280))));
}

.about2 .describe dt img {
    margin-bottom: 1vh;
    width: 5vw;
}

.about2 .describe dd {
    font-size: calc(12px + ((13 - 12) * ((100vw - 1280px) / (1920 - 1280))));
    letter-spacing: 0.05rem;
}

.about2 .describe dd:not(:last-child) {
    margin-bottom: 3vh;
}

.about3 .about_container_inner,
.about3 .item_type,
.about3 .item_type ul {
    display: flex;
    justify-content: flex-start;
}

.about3 .item_type ul {
    /*flex-grow: 1;*/
}

.about3 .item_type li {
    margin: 0 0.5vw;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}

.about3 .item_type li img {
    /* width: 8vw; */
    width: 6.5vw;
}

.about3 .wrap > p,
.about3 .wrap > p + p {
    text-align: center;
}

.about3 .wrap > p {
    margin-bottom: 1vh;
    font-size: 0.9vw;
}

.about3 .wrap > p + p {
    margin-bottom: 5vh;
    font-size: 0.8vw;
}

.about3 .wrap > p span {
    font-size: 1.1vw;
}

.about3 .item_type:not(:last-child) {
    margin-bottom: 5vh;
}

.about3 ul {
    /* margin-left: 3vw; */
}

.about3 .item_type dl {
    flex-grow: 1;
    margin-right: 20px;
}

.about3 dt {
    margin-bottom: 1vh;
    padding-left: 2%;
    color: #955A32;
    border-left: 5px solid #955A32;
    font-size: 1vw;
    white-space: nowrap;
}

.about3 dt span {
    font-size: 0.8vw;
}

.about3 dd.models {
    margin-bottom: 1vh;
    margin-left: 1vw;
    font-size: 0.7vw;
    white-space: nowrap;
}

.about3 dd.fig img {
    margin-left: 1vw;
}

/* photo */
.slide__list {
    display: flex;
    list-style: none;
    margin-bottom: 1vh;
}

.slide__item {
    width: calc(100vw / 7);
    margin: 0 0.3vw;
}

    /* モーダル内側の指定 */
    .photo-slide .custom-modal-container{
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    /* モーダルを閉じるボタンの指定 */
    .photo-slide .custom-modal-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 10px 5px 20px;
        color: #955A32;
        cursor: pointer;
        z-index: 2;
    }

    #photo .btn-group button.photo-prev {
        position: absolute;
        left: 5%;
        top: 50%;
    }

    #photo .btn-group button.photo-next {
        position: absolute;
        right: 5%;
        top: 50%;
    }

    .photo-slide .custom-modal-close-btn::before {
        content: "×";
        font-size: 32px;
    }

    .photo-slide .custom-modal-close-btn_bottom button {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 0);
        border: 1px solid #955A32;
        border-radius: 20px;
        color: #955A32;
        width: 5vw;
        height: 3vh;
        font-size: 0.7vw;
    }

    /* モーダルのコンテンツ部分の指定 */
    #photo .custom-modal-content {
        position: relative;
        padding: 8vh 3vw;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: calc(880px - 20px) ;
        height: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        overflow: auto;
    }

    #photo .custom-modal-content-inner {
        display: flex;
        justify-content: flex-start;
    }

    #photo .custom-modal-content-inner dl div {
        display: flex;
    }

    #photo .custom-modal-content-inner h3 {
        color: #955A32;
        font-size: 1.2vw;
        position: relative;
        display: inline-block;
    }

    #photo .custom-modal-content-inner h3::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 10%;
        height: 1px;
        background-color: #955A32;
    }

    #photo .custom-modal-content-inner dl > dt {
        font-size: 0.8vw;
        font-weight: bold;
    }

    #photo .custom-modal-content-inner .photo_area {
        margin: 0 4vw 0 3vw;
    }

    #photo .custom-modal-content-inner .text_area {
        display: flex;
        flex-direction: column;
        margin-top: auto;
        flex-grow: 1;
    }

    #photo .custom-modal-content-inner .text_area > dl {
        margin-top: 11vh;
    }

    #photo .custom-modal-content-inner dl div dt {
        font-size: 0.7vw;
        width: 36%;
    }

    #photo .custom-modal-content-inner dl div dd {
        font-size: 0.7vw;
        width: 64%;
    }

    .photo-prev::before,
    .photo-next::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: solid #955A32;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
    }

    .photo-prev::before {
        transform: rotate(-135deg);
    }

    .photo-next::after {
        transform: rotate(45deg);
    }


    /* guide */
.guide1 .wrap,
.guide2 .wrap,
.guide3 .wrap {
    display: flex;
    justify-content: space-around;
}

.guide1 {
    width: 100%;
}

.guide_container {
    position: relative;
    padding-bottom: 10vh;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

    .guide1 .guide_container::before {
    content: "";
    display: block;
    padding-top: 100%;
}

    .guide2 .guide_container::before {
        content: "";
        display: block;
        padding-top: 9%;
    }

    .guide3 .guide_container::before {
        content: "";
        display: block;
        padding-top: 9%;
    }

.guide2 {
    padding-bottom: 10vh;
    background-color: #E5DBD1;
}

.guide3 {
    padding-bottom: 10vh;
}

.guide1 .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.guide-rightarea {
    margin-top: 110px;
    margin-bottom: 4vh;
    padding: 3vw;
    background-color: #F6F6F4;
    border-radius: 10px;
}

.guide-leftarea h3 {
    color: #955A32;
    font-size: 1.2vw;
}

.guide-leftarea h3 span {
    display: block;
    color: #D4C3B3;
    font-size: 5vw;
}

.guide1 .guide-leftarea,
.guide2 .guide-leftarea,
.guide3 .guide-leftarea {
    width: 240px;
}

.guide1 .guide-rightarea,
.guide2 .guide-rightarea {
    width: calc(100% - 240px);
}

.guide3 input:focus {
    outline: none;
    background-color: transparent;
}

.guide3 .guide-leftarea h3 {
    margin-bottom: 4vh;
}

.guide3 .guide-leftarea p {
    position: relative;
    padding: 3vh 0;
    color: #955A32;
    width: 8vw;
    font-size: 0.7vw;
}

.guide3 .guide-leftarea p::before,
.guide3 .guide-leftarea p::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px; /* 波線画像の高さに合わせて調整してください */
    background-repeat: repeat-x;
    background-position: center;
}

.guide3 .guide-leftarea p::before {
    top: 0;
    left: 0;
    background-image: url('../image/waveline_top.svg');
}

.guide3 .guide-leftarea p::after {
    bottom: 0;
    left: 0;
    background-image: url('../image/waveline_btm.svg');
}


.guide3 .guide-rightarea {
    background-color: #F6F6F4;
    width: calc(100% - 240px);
}

.sticky {
    padding: 72px 0;
    position: sticky;
    top: 0;
}

.guide1 .guide-rightarea div:first-of-type {
    display: flex;
    justify-content: center;
}

.guide1 .guide-rightarea div:last-of-type {
    display: flex;
    justify-content: flex-start;
}

.guide1 p {
    margin-bottom: 4vh;
    font-size: 0.9vw;
    text-align: center;
}

.guide1 dl {
    margin-bottom: 5vh;
    width: 33%;
}

.guide1 dl:not(:last-child) {
    margin-right: 4vw;
}

.guide1 dt {
    margin-bottom: 2vh;
    font-size: 0.9vw;
    white-space: nowrap;
}

.guide1 dt span {
    font-size: 1.2vw;
}

.guide1 dd {
    margin-bottom: 2vh;
    font-size: 0.7vw;
    white-space: nowrap;
}

.check {
    margin-right: 0.5vw;
    padding: 0.5vh 0.8vw;
    border: 1px solid #955A32;
    color: #955A32;
    font-size: 0.7vw;
}

dl .icon_maru {
    margin-right: 0.5vw;
    display: inline;
    width: 10% !important;
}

dl .icon_batsu {
    margin-right: 0.5vw;
    display: inline;
    width: 8% !important;
}

.wave_chart {
    margin-right: 2vw;
}

.wave_chart caption {
    margin-bottom: 2vh;
    text-align: left;
    border-collapse: collapse;
    font-size: 0.8vw;
    font-weight: bold;
}

.wave_chart thead th {
    padding: 0.5vw;
    background-color: #C4C4C4;
    color: #fff;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    font-size: 0.8vw;
}

.wave_chart thead th:not(:last-child) {
    border-right: 1px solid #fff;
}

.wave_chart tbody th {
    padding: 1vh 2vw;
    border-right: 1px solid #464646;
    border-bottom: 1px solid #464646;
    background-color: #E6E6E6;
    font-weight: normal;
    text-align: center;
    vertical-align:middle;
    white-space: nowrap;
    font-size: 0.8vw;
}

.wave_chart tbody td {
    padding: 1rem;
    border-bottom: 1px solid #464646;
    vertical-align:middle;
    white-space: nowrap;
    font-size: 0.8vw;
}

.wave_chart tbody td:first-of-type {
    padding: 1vh 1vw 1vh 4vw;
}

.wave_chart tbody td:last-of-type {
    padding: 1vh 3vw 1vh 2vw;
}

.wave_chart .icon_maru {
    margin-left: 0.8vw;
    display: inline;
    width: 20% !important;
}

.wave_chart .icon_batsu {
    margin-left: 0.8vw;
    display: inline;
    width: 18% !important;
}

.guide1 ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-self: flex-end;
    line-height: 2;
    font-size: 0.5vw;
}

    .guide1 ul li {
        padding-left:1.2em;
        text-indent:-1.2em;
        white-space: nowrap;
    }

.guide2 .guide-rightarea > dl {
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 8vh;
}

.guide2 .guide-rightarea > dl dt {
    margin-right: 3vw;
}

/*.guide2 .guide-rightarea > dl:nth-of-type(2) dt::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    transform: translateY(-50%);*/
/*    height: 100%;*/
/*    border-left: 2px dashed #955A32;*/
/*    bottom: 100%;*/
/*    left: 5%;*/
/*}*/

/*.guide2 .guide-rightarea > dl:not(:first-child) dt::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    transform: translateY(-50%);*/
/*    height: 100%;*/
/*    border-left: 2px dashed #955A32;*/
/*    bottom: 43%;*/
/*    left: 5%;*/
/*}*/

.guide2 .guide-rightarea > dl dt::after {
    content: '';
    position: absolute;
    transform: translateY(calc(100% + 7vh));
    height: 100%;
    border-left: 2px dashed #955A32;
    bottom: 96%;
    left: 5%;
}

.guide2 .guide-rightarea > dl dt.step5_img::after {
    content: '';
    position: absolute;
    transform: translateY(calc(100% + 6.5vh));
    height: 0;
    border-left: none;
    bottom: 100%;
    left: 5%;
}

.guide2 .guide-rightarea > dl p.tit {
    display: inline-block;
    margin-bottom: 1vh;
    font-size: 1.1vw;
    font-style: normal;
}

.guide2 .guide-rightarea > dl p.text {
    font-size: 0.8vw;
}

.guide2 .guide-rightarea .step5 img.icon-book {
    margin-left: 1%;
    width: 3%;
}

.guide2 .guide-rightarea .step5 a {
    display: block;
    margin-top: 0.5vh;
    color: #955A32;
}

.guide2 .guide-rightarea .step5 a:hover {
    opacity: 0.7;
}

.guide2 .guide-rightarea .step5 a:not(:last-child) {
    margin-bottom: 4vh;
}

.guide2 .guide-rightarea > dl dt {
    flex-basis: 11vw;
}

.guide2 .txt_step_col2 {
    flex-basis: 89vw;
}

.guide2 .txt_step_col3 {
    flex-basis: 50vw;
}

.guide2 .txt_step_col3_l {
    flex-basis: 65vw;
}

.guide2 .pic_step_col3_s {
    flex-basis: 24vw;
    text-align: right;
}

.guide2 .pic_step_col3_l {
    flex-basis: 39vw;
    text-align: right;
}

.guide2 .step1 ul.thmb_detail {
    display: flex;
    justify-content: flex-end;
}

.guide2 .step1 ul.thmb_detail li {
    font-size: 0.5vw;
    text-align: center;
}

.guide2 .step1 ul.thmb_detail li:not(:last-child) {
    margin-right: 2vw;
}

.guide2 .about_wave_style .inner {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}

.guide2 .about_wave_style > h4 {
    margin-bottom:1vh;
    font-size: 0.9vw;
}

.guide2 .about_wave_style p {
    font-size: 0.7vw;
}

    /* modal(汎用) */
    /* モーダルを開くボタン */
    button.modal-open {
        margin-left: 3vw;
        color: #955A32;
        border: 1px solid #955A32;
        border-radius: 20px;
        padding: 0 1.5vw;
        font-size: 0.9vw;
        font-family: "Raleway", sans-serif;
        cursor: pointer;
        letter-spacing: 0.1em;
        white-space: nowrap;
    }

    button.modal-open:hover {
        background-color: #955A32;
        color: #fff;
    }

    button.modal-open img {
        width: 5vw;
    }

    /* モーダルと背景の指定 */
    .modal{
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0,0,0,50%);
        padding: 40px 20px;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        box-sizing: border-box;
    }

    /* モーダルの擬似要素の指定 */
    .modal:before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-left: -0.2em;
    }

    /* クラスが追加された時の指定 */
    .modal.is-active{
        opacity: 1;
        visibility: visible;
    }

    /* モーダル内側の指定 */
    .modal-container{
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    /* モーダルを閉じるボタンの指定 */
    .modal-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 10px 5px 20px;
        color: #955A32;
        cursor: pointer;
        z-index: 2;
    }

    .modal-close-btn::before {
        content: "×";
        font-size: 32px;
    }

    .modal-close-btn_bottom button {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 0);
        border: 1px solid #955A32;
        border-radius: 20px;
        color: #955A32;
        width: 5.5vw;
        height: 3.4vh;
        font-size: 0.8vw;
        letter-spacing: 0.1em;
    }

    .modal-close-btn_bottom button:hover {
        background-color: #955A32;
        color: #fff;
    }

    /* モーダルのコンテンツ部分の指定 */
    .modal-content {
        position: relative;
        padding: 20px 40px;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: 800px;
    }

    /* モーダル内コンテンツ */
    .modal-content > section {
        padding: 5vh 4vw 15vh;
    }

    .modal-content h4 {
        margin-bottom: 1vh;
        font-size: 1vw;
    }

    .modal-content p {
        font-size: 0.5vw;
    }

    .modal-content h4 + p {
        margin-bottom: 3vh;
        padding-bottom: 3vh;
        border-bottom: 1px solid #955A32;
    }

    .modal-content .case_nexty {
        margin-bottom: 7vh;
    }

    .modal-content .case_nexty div {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding: 2vh 0;
        width: 90%;
    }

    .modal-content .case_nexty dl {
        position: relative;
    }

    .modal-content .case_nexty dt {
        padding: 2% 0;
        background-color: #8E8E8E;
        color: #fff;
        text-align: center;
        font-size: 0.5vw;
    }

    .modal-content .case_nexty dl:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -25%;
        transform: translate(-25%, -50%);
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #955A32;
    }

    .modal-content h5 {
        margin-bottom: 1vh;
        color: #955A32;
        font-weight: bold;
        font-size: 0.8vw;
    }

    .modal-content .case_nexty > div + p {
        margin-bottom: 1vh;
    }

    .modal-content .rail_size a {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        color: #955A32;
    }

    .modal-content .rail_size a:hover {
        opacity: 0.7;
    }

    .modal-content .rail_size img {
        margin-left: 1%;
        width: 3%;
    }


.guide3 .inner {
    display: flex;
    margin-bottom: 7vh;
    position: relative;
}

.guide3 .inner > p {
    flex-basis: 10vw;
}

.guide3 .inner > section {
    margin-left: 3vw;
    flex-basis: 90vw;
}

.guide3 .inner.step2 > section,
.guide3 .inner.step3 > section,
.guide3 .inner.step4 > section {
    opacity: 0.5;
}

.guide3 .inner.step2 > section.active,
.guide3 .inner.step3 > section.active,
.guide3 .inner.step4 > section.active {
    opacity: 1;
}

.guide3 h4 {
    margin-bottom: 1vh;
    font-size: 1.1vw;
}

.guide3 h4 + p {
    margin-bottom: 3vh;
    font-size: 0.7vw;
}

.guide3 .step_img::after {
    content: '';
    position: absolute;
    transform: translateY(calc(100% + 7vh));
    height: 95%;
    /* border-left: 2px dashed #955A32; */
    border-left: 2px dashed #C4C4C4;
    bottom: 100%;
    left: 5%;
}

.guide3 .step4_img::after {
    content: '';
    position: absolute;
    transform: translateY(calc(100% + 6.5vh));
    height: 0;
    border-left: none;
    bottom: 100%;
    left: 5%;
}
.guide3 .step1_img.colored::after {
    border-left: 2px dashed #955A32;
    transition: 1s;
}
.guide3 .step2_img img {
    transition: 1s;
}
.guide3 .step2_img.colored::after {
    border-left: 2px dashed #955A32;
    transition: 1s;
}
.guide3 .step3_img.colored::after {
    border-left: 2px dashed #955A32;
    transition: 1s;
}

.guide3 .step1 section div {
    display: flex;
}

.guide3 .step1 dl {
    flex-basis: 36%;
    margin-right: 3vw;
}

.guide3 .step1 dt {
    position: relative;
    padding: 0 0 10%;
    color: #955A32;
    /*border-bottom: 1px solid #955A32;*/
    font-size: 0.9vw;
    font-weight: bold;
    letter-spacing: 0;
    transition: opacity 0.5s, transform 0.5s;
    /*opacity: 0;*/
    /*transform: translateY(-20px);*/
}
.guide3 .step1 dt.clicked {
    /*border-bottom: 1px solid #955A32;*/
    transition: 0.5s;
    /*transform: translateY(-20px);*/
}

.guide3 .step1 dt:hover {
    cursor: pointer;
    opacity: 0.8;
}

.guide3 .step1 dt::after {
    position: absolute;
    top: 6%;
    left: clamp(108px, 10vw, 188px);
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-top: 3px solid #955A32;
    border-right: 3px solid #955A32;
    transform: rotate(135deg);
    margin-left: 5px;
    transition: 0.5s;
}
.guide3 .step1 dt.clicked::after {
    top: 15%;
    transform: rotate(315deg);
    transition: 0.5s;
}

.guide3 .step1 dt span {
    font-size: 0.8vw;
}

.guide3 .step1 dd {
    position: relative;
    width: 100%;
    padding: 10%;
    background-color: #fff;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 0.8vw;
    font-weight: bold;
    display: none;
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: translateY(-20px);
}

.guide3 .step1 dd.active {
    display: block;
    transition: 0.5s;
}

    .guide3 .step1 dd:last-of-type {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .guide3 .step1 dd:first-of-type {
        border-top: 1px solid #955A32;
    }

.guide3 .step1 dd:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.3s;
}

.guide3 .step1 dd:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: #C4C4C4;
}

.guide3 .step2 button {
    color: #C4C4C4;
    border: 1px solid #C4C4C4;
    width: 7vw;
    height: 5vh;
    font-size: 0.8vw;
    font-weight: bold;
}

.guide3 .step2 button.active {
    color: #955A32;
    border: 1px solid #955A32;
    transition: 0.5s;
}

.guide3 .step2 button.active:hover {
    opacity: 0.8;
    transition: 0.3s;
}

.guide3 .step2 button:not(:last-child) {
    margin-right: 2vw;
}

.guide3 .step3 .rail_width {
    margin-bottom: 4vh;
    color: gray;
    opacity: 0.4;
    transition: 0.5s;
}

.guide3 .step3 .rail_width.active {
    margin-bottom: 4vh;
    color: #955A32;
    opacity: 1;
    transition: 0.5s;
}

.guide3 .step3 .rail_width input {
    margin-right: 0.5vw;
    border: 1px solid #464646;
    width: 8vw;
    height: 4vh;
    vertical-align: middle;
}

.guide3 .step3 .rail_width span {
    font-size: 0.8vw;
}

/* ピッチ選択 */
.pitch_title {
    color: #464646;
    font-size: 1.1vw;
    margin: 15px 0 0;
}
.pitch_box {
    height: 5vh;
    display: flex;
    margin: 10px 0 15px;
}
.pitch-btn {
    color: #955A32;
    border: 1px solid #955A32;
    transition: 0.5s;
    width: 6vw;
    height: 6vh;
    font-size: 0.8vw;
    font-weight: bold;
    display: block;
    margin-right: 10px;
}
.pitch-btn.selected {
    background-color: #E5DBD1;
    transition: 0.3s;
}
.pitch12-notice {
  color: #464646;
  margin: 5px 0 0;
  font-size: 0.5vw;
}

.guide3 .step3 .curtain_detail {
    margin-bottom: 5vh;
    display: flex;
    align-items: flex-start;
}

.guide3 .step3 .curtain_detail dt {
    margin-bottom: 1.5vh;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: flex-start;*/
    color: #C4C4C4;
    height: 5vh;
    font-size: 0.9vw;
}
.guide3 .step3 .curtain_detail dt.active {
    color: #955A32;
}
    .guide3 .step3 .curtain_detail dt img {
        margin-right: 0.5vw;
        width: 1.5vw;
    }
    .guide3 .step3 .curtain_detail dt svg {
        fill: #C4C4C4;
    }
.guide3 .step3 .curtain_detail dt span {
    display: block;
    margin-left: 1.8vw;
    font-size: 0.6vw;
}
.guide3 .step3 .curtain_detail dt span.dummy {
    display: block;
    opacity: 0;
    margin-left: 1.8vw;
    font-size: 0.6vw;
}

.guide3 .step3 .curtain_detail dd {
    margin-right: 2vw;
    padding: 1.8vh 0.5vw;
    border: 1px solid gray;
    color: gray;
    opacity: 0.4;
    transition: 0.5s;
}
.guide3 .step3 .curtain_detail dd.active {
    border: 1px solid #955A32;
    color: #955A32;
    background-color: #fff;
    opacity: 1;
    transition: 0.5s;
}

.guide3 .step3 .curtain_detail div {
    border: none;
    width: 8vw;
    vertical-align: middle;
    display: inline-block;
    font-size: 1.5rem;
}

.guide3 .step3 h5 {
    margin-bottom: 1.5vh;
    font-size: 0.8vw;
}

.guide3 .step3 .section3.active section.calculation {
    opacity: 0.5;
}

.guide3 .step3 .section3.active section.calculation.active {
    opacity: 1;
}

.guide3 .calculation > div {
    display: flex;
    justify-content: space-between;
}

.guide3 .calculation ul {
    font-size: 0.5vw;
}

.guide3 .calculation > div > ul {
    margin-left: 1vw;
    list-style-type: disc;
    width: 45%;
}

.guide3 .calculation > div > ul li {
    margin-bottom: 0.5vh;
}

.guide3 .calculation .size {
    width: 55%;
}

.guide3 .calculation .fig {
    margin-bottom: 1vh;
    padding: 10px;
}

.guide3 .calculation .size ul {
    display: flex;
    flex-wrap: wrap;
}

.guide3 .calculation .size li:not(:last-child) {
    width: 7vw;
}

.guide3 .step4 dl {
    margin-bottom: 2vh;
    padding: 3%;
    border: 1px solid #464646;
    border-radius: 10px;
    width: 26vw;
}

.guide3 .step4 dt {
    margin-bottom: 1vh;
    color: #955A32;
    font-size: 0.7vw;
}

.guide3 .step4 dd {
    font-size: 0.5vw;
}

.guide3 .step4 ul {
    margin-left: 1vw;
    list-style-type: disc;
    font-size: 0.5vw;
}

.guide3 .step1 dd.selected {
    background-color: #E5DBD1;
    transition: 0.3s;
}
.guide3 .step2 button.selected {
    background-color: #E5DBD1;
    transition: 0.3s;
}


#movie .movie_block > div {
    position: relative;
    margin-bottom: 4vh;
}

#movie .movie_block dl {
    text-align: center;
}

#movie .movie_block dt {
    margin-bottom: 1vh;
    font-size: 0.9vw;
}

#movie .movie_block dd {
    font-size: 0.7vw;
}

.bg_rotate {
    position: absolute;
    left: -2.2vw;
    bottom: -5vh;
    z-index: 1;
}

.rotate {
    width: 7vw !important;
    }

/* 動画用モーダル */
    #movie .movie-modal,
    #movie .youtube-movie-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
    }

    #movie .movie-modal.is-active,
    #movie .youtube-movie-modal.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #movie .custom-modal-content,
    #movie .youtube-modal-content {
        width: 100%;
        aspect-ratio: 16 / 9;
        max-width: 50%;
        max-height: 80%;
        overflow: auto;
        background-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        overflow:visible
    }

    #movie .youtube-modal-content iframe,
    #movie .custom-modal-content iframe {
        width: 100%;
        height: 100%;
    }

    .movie_item,
    .youtube_movie_item {
        position: relative;
        cursor: pointer;
        z-index: 2;
    }

    #info p {
        font-size: 0.8vw;
    }


    .btn-catalog[data-v-e8d96cea] {
    position: relative;
    width: 480px;
    text-align: center;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    background: #fff;
}
a[data-v-e8d96cea] {
    display: block;
    padding: 1em 0;
    width: 100%;
    height: 100%;
}

.btn-catalog span[data-v-e8d96cea] {
    margin-left: 1.5em;
}

.icon--catalog[data-v-e8d96cea] {
    top: 0;
    left: 22%;
    width: 1.4em;
}

.icon[data-v-e8d96cea] {
    position: absolute;
    height: 100%;
}

.icon--link[data-v-e8d96cea] {
    top: 1%;
    right: 3%;
    width: 0.8em;
}

.icon[data-v-e8d96cea] {
    position: absolute;
    height: 100%;
}
}

/* ここまでPC */

/* ここからSP */
@media print, screen and (max-width: 750px) {

    .pc {
        display: none !important;
    }

    #app {
        position: relative;
        background-color: #F4F3F1;
    }


    .menu {
        margin-top: 20px;
        color: rgb(70, 70, 70);
        font-size: 10px;
        font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
    }

    .menu-btn:before {
        content: '';
        display: block;
        height: 1.3px;
        width: 14px;
        border-radius: 3px;
        background-color: #707070;
        position: absolute;
        left: 22px;
        top: 13px;
    }

    .menu-btn:after {
        content: '';
        display: block;
        height: 1.3px;
        width: 14px;
        border-radius: 3px;
        background-color: #707070;
        position: absolute;
        left: 22px;
        top: 19px;
    }

    #main {
        background-attachment: fixed;
        background-size:  100%;
        background-repeat: repeat-y;
        background-image: url(https://www.toso.co.jp/products/c_rail/wave/assets/image/bg_fv_sp.jpg);
    }

    .main_imgTop {
        display: flex;
        flex-direction: column-reverse;
    }

    .main_imgTop #l_navi .inner {
        padding: 10% 0 30%;
        background-color: #F0ECE8;
        margin-top: -1px;
    }

    .main_imgTop .mv {
        margin: 15% auto 2%;
        width: 90%;
    }

    .main_imgTop .vol_control {
        margin: 0 auto 15%;
        width: 90%;
        text-align: right;
    }

    .main_imgTop h1 {
        margin: -20% 5% 0 5%;
    }

    .main_imgTop h1 img {
        width: 50%;
    }

    .main_imgTop .vol_control button:not(:last-child) {
        margin-right: 3%;
    }

    /* FV fadeUp */
    #l_navi h1 {
        opacity: 0;
        transform: translateY(10%);
        animation: fade-in-title 1s ease-in-out forwards;
    }

    @keyframes fade-in-title {
        0% {
            opacity: 0;
            transform: translateY(10%);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #about {
        padding-bottom: 8%;
        background-color: #D1CEC5;
    }

    #photo {
        background-attachment: fixed;
        background-size:  100%;
        background-repeat: repeat-y;
        background-image: url(https://www.toso.co.jp/products/c_rail/wave/assets/image/bg_fv_sp.jpg);
    }

    #photo > div {
        padding-bottom: 25%;
    }

    #movie {
        background-attachment: fixed;
        background-size:  100%;
        background-repeat: repeat-y;
        background-image: url(https://www.toso.co.jp/products/c_rail/wave/assets/image/bg_fv_sp.jpg);
    }

    #movie > div {
        margin: 0 auto;
        padding: 15% 5% 0;
    }

    #about h2 {
        padding: 25% 2%;
        background-image: url("../image/tit_about.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 70% 100%;
        font-size: 2.2rem;
        text-align: center;
    }

    #photo h2 {
        padding: 25% 2%;
        background-image: url("../image/tit_photo.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 70% 100%;
        font-size: 2.2rem;
        text-align: center;
    }

    #guide h2 {
        padding: 25% 2% 20%;
        background-color: #E5DBD1;
        background-image: url("../image/tit_guide.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 70% 100%;
        font-size: 2.2rem;
        text-align: center;
    }

    #movie h2 {
        margin-bottom: 7%;
        padding: 10% 2%;
        background-image: url("../image/tit_movie.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 70% 100%;
        font-size: 2.2rem;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    #movie .inner{
        position: relative;
        z-index: 1;
    }

    #info {
        padding-bottom: 50%;
        position: relative;
        z-index: 1;
    }






    #about {
        position: relative;
        padding-bottom: 47%;
    }

    .about1 {
        opacity: 0;
        /*position: absolute!important;*/
        /*top: 30% !important;*/
        /*left: 30% !important;*/
    }
    .about1.surround {
        opacity: 1;
    }
    .about2, .about3 {
        opacity: 0;
        position: absolute!important;
        top: 21% !important;
        /*left: 30% !important;*/
    }

    .about1.active, .about2.active, .about3.active {
        opacity: 1;

    }


    .about3.surround {
        opacity: 1;
        top: 12% !important;
    }
    .about3.surround .about_container .wrap {
        /*position: absolute;*/
        /*top: 9vw;*/
        /*left: 18.8vw;*/
        /*width: 1280px;*/
        /*margin: auto;*/
    }
    #about.extension {
        height: 2000px;
        /*margin-top: 125px!important;*/
        /*transition: 0.5s;*/
    }

    /*about 数字の動き*/
    .about1.surround .page_num img {
        transition: 1s;
        transform:rotateY(360deg);
        opacity: 1;
    }
    .about1 .page_num img,
    .about2 .page_num img,
    .about3 .page_num img {
        transition: 1s;
        transform:rotateY(260deg);
        opacity: 0;
    }
    .about1.active .page_num img,
    .about2.active .page_num img,
    .about3.active .page_num img {
        transition: 1s;
        transform:rotateY(360deg);
        opacity: 1;
    }
    .about3.surround .page_num img {
        transition: 1s;
        transform:rotateY(360deg);
        opacity: 1;
    }
    /* ----------- */


    /*about　画像の動き*/
    .about1.surround .photo img {
        transition: 1s;
        opacity:1;
        transform: translateY(0);
    }
    .about1 .photo img,
    .about2 .photo img,
    .about3 .describe {
        transition: 1s;
        transform: translateY(50px);
        opacity: 0;
    }
    .about1.active .photo img,
    .about2.active .photo img,
    .about3.active .describe {
        transition: 1s;
        opacity: 1;
        transform: translateY(0);
    }
    .about3.surround .describe {
        transition: 1s;
        opacity:1;
        transform: translateY(0);
    }


    /* ------------ */

    /*about　文字の動き*/

    .about1.surround .describe {
        transition: 1s;
        opacity:1;
        transform: translateY(0);
    }
    .about1 .describe,
    .about2 .describe,
    .about3 .third_top_description,
    .about3 .text{
        transition: 1s;
        transform: translateY(50px);
        opacity: 0;
    }
    .about1.active .describe,
    .about2.active .describe,
    .about3.active .third_top_description,
    .about3.surround .text {
        transition: 1s;
        opacity: 1;
        transform: translateY(0);
    }
    .about3.surround .third_top_description,
    .about3.surround .text{
        transition: 1s;
        opacity:1;
        transform: translateY(0);
    }








    #about > div {
        margin: 0 auto;
        width: 90%;
    }

    #about section.slider-part {
        position: relative;
        height: 400px;
        overflow: hidden;
    }

    #about section.slider-part .mySwiper {
        height: 100%;
        background: #f1f1f1;
    }

    #about .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        -ms-touch-action: auto;
        touch-action: auto;
    }

    #about .swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
        background: #daf5ff;
    }

    .about1,
    .about2 {
        margin-bottom: 20%;
    }

    .about1 .wrap,
    .about2 .wrap {
        display: flex;
        margin: 0 auto;
    }

    .about1 .wrap {
        text-align: center;
    }

    .about1 .page_num {
        display: flex;
        align-items: center;
        width: 10%;
    }

    .about2 .page_num {
        margin-top: 23%;
        width: 10%;
    }

    .about3 .page_num {
        margin-top: 28%;
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        width: 10%;
    }

    .about1 .photo,
    .about3 .text {
        width: 80%;
        text-align: center;
    }

    .about2 .photo {
        margin: 0 auto;
        width: 80%;
        text-align: center;
    }

    .about1 .photo img {
        margin-bottom: 10%;
        width: 84%;
    }

    .about2 .photo img {
        margin-bottom: 3%;
        width: 84%;
    }

    .about3 .text {
        width: 84%;
        transition: 1s;
        margin-right: 40px;
    }

    .about3.surround .text {
        width: 84%;
        transition: 1s;
    }

    .about3 .about_container_inner {
        margin-top: 40%;
    }

    .about1 .describe {
        text-align: center;
        font-size: 1.4rem;
        line-height: 2;
    }

    .about2 .describe {
        text-align: center;
        font-size: 1.4rem;
        margin-left: 5px;
    }

    .about2 dt {
        margin: 0 auto 5%;
        width: 20%;
    }

    .about2 dd {
        line-height: 2;
        font-size: 1.2rem;
    }

    .about2 dd:not(:last-child) {
        margin-bottom: 8%;
    }

    .about3 .sp_content {
        display: flex;
    }

    .about3 .text p:first-of-type {
        margin-bottom: 10%;
        line-height: 2;
        font-size: 1.8rem;
        text-align: center;
    }

    .about3 .text p:first-of-type span {
        font-size: 2.2rem;
    }

    .about3 .text p:last-of-type {
        line-height: 2;
        font-size: 1.4rem;
        text-align: center;
    }

    .about3 .item_type {
        margin-bottom: 25%;
        text-align: center;
    }

    .about3 .item_type dt {
        margin-bottom: 5%;
        color: #955A32;
        font-weight: bold;
        font-size: 1.8rem;
    }

    .about3 .item_type dt span {
        font-size: 1.4rem;
    }

    .about3 .fig {
        margin: 0 auto 10%;
        width: 90%;
    }

    .about3 .models {
        margin-bottom: 7%;
        font-size: 1.8rem;
    }

    .about3 .item_type ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about3 .item_type li {
        width: 40%;
        text-align: center;
    }

    .about3 .item_type li:first-of-type,
    .about3 .item_type .tape li:nth-of-type(3) {
        margin-right: 4%;
    }

    .about3 .item_type li:nth-of-type(2),
    .about3 .item_type li:nth-of-type(4) {
        margin-left: 4%;
    }

    .about3 .item_type .tape li:nth-of-type(3),
    .about3 .item_type .tape li:nth-of-type(4) {
        margin-top: 10px;
    }


    /* photo */
    .slide__list {
        display: flex;
        list-style: none;
        margin-bottom: 1vh;
    }

    .slide__item {
        width: calc(100vw / 3);
        margin: 0 1vw;
    }

    /* モーダル内側の指定 */
    .photo-slide .custom-modal-container{
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    /* モーダルを閉じるボタンの指定 */
    .photo-slide .custom-modal-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 10px 5px 20px;
        color: #955A32;
        cursor: pointer;
        z-index: 2;
    }

    #photo .btn-group button.photo-prev {
        position: absolute;
        left: 5%;
        top: 50%;
    }

    #photo .btn-group button.photo-next {
        position: absolute;
        right: 5%;
        top: 50%;
    }

    .photo-slide .custom-modal-close-btn::before {
        content: "×";
        font-size: 32px;
    }

    .photo-slide .custom-modal-close-btn_bottom button {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 0);
        border: 1px solid #955A32;
        border-radius: 20px;
        color: #955A32;
        width: 5vw;
        height: 3vh;
        font-size: 0.7vw;
    }

    /* モーダルのコンテンツ部分の指定 */
    #photo .custom-modal-content {
        position: relative;
        margin: 0 auto;
        padding: 5vh 3vw;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: calc(100% - 10px);
        max-height: 100vh;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        overflow: auto;
    }


    #photo .custom-modal-content-inner h3 {
        margin: 0 0 15% 5%;
        color: #955A32;
        font-size: 2rem;
        position: relative;
        display: inline-block;
    }

    #photo .custom-modal-content-inner h3::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 50%;
        height: 1px;
        background-color: #955A32;
    }

    #photo .custom-modal-content-inner dl > dt {
        margin-bottom: 2%;
        font-size: 1.6rem;
        font-weight: bold;
    }

    #photo .custom-modal-content-inner dl > dd {
        font-size: 1.2rem;
    }

    #photo .custom-modal-content-inner dl > div {
        display: flex;
    }

    #photo .custom-modal-content-inner .photo_area {
        margin: 0 5% 10% 5%;
    }

    #photo .custom-modal-content-inner .photo_area div {
        text-align: center;
    }

    #photo .custom-modal-content-inner .photo_area img {
        width: 90%;
    }

    #photo .custom-modal-content-inner .text_area {
        display: flex;
        flex-direction: column;
        margin: 0 10% 10% 10%;
        flex-grow: 1;
    }

    #photo .custom-modal-content-inner dl div dt {
        width: 42%;
    }

    #photo .custom-modal-content-inner dl div dd {
        width: 58%;
    }

    .photo-prev::before,
    .photo-next::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border: solid #955A32;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
    }

    .photo-prev::before {
        transform: rotate(-135deg);
    }

    .photo-next::after {
        transform: rotate(45deg);
    }

    /* guide */
    .sticky_sp {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 2;
    }

    #guide ul.nav_sp {
        padding: 7% 0;
        display: flex;
        justify-content: center;
        background-color: #E5DBD1;
    }

    #guide ul.nav_sp li {
        width: calc( 100% / 3 - 20px);
    }

    #guide .wave_line {
        /*background-color: #EEE7E1;*/
    }

    #guide ul.nav_sp li {
        margin: 0 2%;
        padding: 0 4%;
    }

    #guide ul.nav_sp li:not(:last-child) {
        border-right: 1px solid #fff;
    }

    .sticky_area {
        scroll-padding-top: 100px;
    }

    .guide1 {
        margin-top: -10%;
        padding-bottom: 5%;
    }
	.guide1::before {
	    display: block;
	    height: 114px;
	    margin-top: -114px;
	    content: "";
	}

    .guide2 {
        padding-bottom: 40%;
    }
    .guide2::before {
       display: block;
       height:100px;
       margin-top: -100px;
       background-color: #EEE7E1;
       content: "";
    }

    .guide1,
    .guide3 {
        background-color: #EEE7E1;
    }

    .guide3 {
        padding-bottom: 15%;
    }
	.guide3::before {
    display: block;
    height: 112px;
    margin-top: -140px;
    content: "";
    background-color: #E5DBD1;
	}

    .guide2 {
        background-color: #E5DBD1;
    }

    .guide1 .wrap {
        margin: 0 auto;
        padding-bottom: 10%;
        width: 90%;
    }

    .guide2 .wrap,
    .guide3 .wrap {
        margin: 0 auto;
        width: 90%;
    }

    .guide3 .guide-rightarea {
        background-color: #F6F6F4 !important;
    }

    .guide1 h3 {
        margin-bottom: 10%;
        padding-top: 15%;
        display: flex;
        align-items:center;
        color: #955A32;
        font-size: 5.5vw;
    }

    .guide2 h3 {
        margin-bottom: 10%;
        padding-top: 10%;
        display: flex;
        align-items:center;
        color: #955A32;
        font-size: 5.5vw;
    }

    .guide3 h3 {
        margin-bottom: 0;
        padding-top: 15%;
        display: flex;
        align-items:center;
        color: #955A32;
        font-size: 5.5vw;
    }

    .guide1 h3 span,
    .guide2 h3 span,
    .guide3 h3 span {
        margin-right: 5%;
        color: #D4C3B3;
        font-size: 5rem;
    }

    .guide1 h3 img,
    .guide2 h3 img,
    .guide3 h3 img {
        display: inline-block;
        margin-left: 5%;
        width: 12%;
    }

    .check {
        display: inline-block;
        margin-bottom: 5%;
        padding: 2% 5%;
        border: 1px solid #955A32;
        color: #955A32;
        font-size: 1rem;
    }

    #guide .guide-rightarea {
        margin-bottom: 15%;
        padding: 8% 8% 20%;
        background-color: #fff;
        border-radius: 10px;
    }

    .guide2 .guide-rightarea {
        margin-bottom: 0 !important;
    }

    .guide1 .guide-rightarea > p {
        margin-bottom: 10%;
        font-size: 1.6rem;
    }

    .guide1 .icon_maru,
    .guide1 .icon_batsu {
        margin-right: 3%;
        width: 10%;
    }

    .guide1 dl {
        margin-bottom: 15%;
    }

    .guide1 dt {
        margin-bottom: 5%;
        font-size: 1.7rem;
    }

    .guide1 dt span {
        font-size: 2rem;
    }

    .guide1 dt + dd {
        margin-bottom: 5%;
    }

    .guide1 dl dd:last-of-type {
        line-height: 2;
        font-size: 1.4rem;
    }

    .guide1 .tit_wave_chart_sp {
        margin-bottom: 5%;
        font-size: 1.6rem;
        font-weight: bold;
    }

    .guide1 .wave_line_btm {
        background-color: #EEE7E1;
    }

    .guide2 + .wave_line_btm {
        background-color: #EEE7E1;
    }

    .guide1 button.wave_chart_btn,
    .guide2 .about_wave_style button.modal-open {
        padding: 3% 6%;
        color: #955A32;
        border: 1px solid #955A32;
        border-radius: 20px;
        font-family: "Raleway", sans-serif;
        letter-spacing: 0.1em;
    }

    .guide1 .modal-content {
        padding: 0 8% 5%;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        max-height: 100%;
    }

    .guide1 .modal-content > section {
        padding: 10% 0;
    }

    .guide3 .guide-leftarea p::before {
        top: 0;
        left: 0;
        background-image: url('../image/waveline_top.svg');
    }

    .guide3 .guide-leftarea p::after {
        bottom: 0;
        left: 0;
        background-image: url('../image/waveline_btm.svg');
    }

    .guide2 .guide-rightarea > dl {
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-bottom: 6vh;
    }


    .guide2 .guide-rightarea em {
        display: inline-block;
        margin: 2% 0 5% 0;
        font-size: 1.8rem;
        font-style: normal;
    }

    .guide2 .guide-rightarea > dl dt {
        width: 20%;
    }

    .guide2 .guide-rightarea > dl dt::after {
        content: '';
        position: absolute;
        transform: translateY(calc(100% + 7vh));
        height: 90%;
        border-left: 2px dashed #955A32;
        bottom: 100%;
        left: 10%;
    }

    .guide2 .guide-rightarea > dl dt.step5_img::after {
        content: '';
        position: absolute;
        transform: translateY(calc(100% + 6.5vh));
        height: 0;
        border-left: none;
        bottom: 100%;
        left: 5%;
    }

    .guide2 .guide-rightarea .step5 img.icon-book {
        margin: 0 0 1% 3%;
        width: 9%;
    }

    .guide2 .guide-rightarea .step5 a {
        display: block;
        margin-top: 8%;
        color: #955A32;
        font-size: 1.3rem;
    }

    .guide2 .guide-rightarea .step5 a:not(:last-child) {
        margin-bottom: 18%;
    }

    .guide2 .guide-rightarea > dl dd {
        margin-bottom: 15%;
        padding-left: 8%;
        width: 80%;
        font-size: 1.4rem;
     }

    .guide2 .guide-rightarea > dl .tit {
        margin-bottom: 10%;
        line-height: 1.6rem;
        font-size: 1.8rem;
    }

    .guide2 .guide-rightarea > dl .text {
        line-height: 2;
    }

    .guide2 .step1 ul.thmb_detail_sp {
        display: flex;
        justify-content: flex-start;
    }

    .guide2 .step1 .thmb_detail_sp li {
        margin-top: 10%;
        padding: 2% 6%;
        background-color: transparent;
        border: 1px solid #955A32;
        border-radius: 7px;
        width: 44%;
        font-size: 1.4rem;
        text-align: center;
    }

    .guide2 .step1 .thmb_detail_sp li:not(:last-child) {
        margin-right: 5%;
    }

    .guide2 .step2 div {
        margin-top: 10%;
    }

    .guide2 .about_wave_style > h4 {
        margin-bottom: 5%;
        font-size: 1.6rem;
    }

    .guide2 .about_wave_style .inner p {
        margin-bottom: 5%;
        font-size: 1.4rem;
    }

    .guide2 .modal-content {
        padding: 8% 8% 20%;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        max-height: 100%;
    }


    /* モーダルを開くボタンの指定 */
    .modal-open {
        cursor: pointer;
    }

    /* モーダルと背景の指定 */
    .modal {
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        padding: 20px;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        box-sizing: border-box;
    }

    /* モーダルの擬似要素の指定 */
    .modal::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-left: -0.2em;
    }

    /* クラスが追加された時の指定 */
    .modal.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* モーダル内側の指定 */
    .modal-container {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        border-radius: 4px;
    }

    /* モーダルを閉じるボタンの指定 */
    .modal-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 10px;
        color: #955A32;
        cursor: pointer;
        z-index: 2;
    }

    .modal-close-btn::before {
        content: "×";
        font-size: 32px;
    }

    .modal-close-btn_bottom {
        text-align: center;
    }

    .modal-close-btn_bottom button {
        border: 1px solid #955A32;
        border-radius: 20px;
        color: #955A32;
        width: 27vw;
        height: 5vh;
    }

    /* モーダルのコンテンツ部分の指定 */
    .modal-content {
        padding: 8% 8% 20%;
        background: #fff;
        line-height: 1.8;
        text-align: left;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    /* モーダル内コンテンツ */
    .modal-content > section {
        padding: 10% 0 20%;
    }

    .modal-content h4 {
        margin-bottom: 10%;
        font-size: 2rem;
        text-align: center;
    }

    .modal-content p {
        font-size: 1.2rem;
    }

    .modal-content h4 + p {
        margin-bottom: 15%;
        padding-bottom: 15%;
        border-bottom: 1px solid #955A32;
    }

    .modal-content .case_nexty {
        margin-bottom: 7vh;
    }

    .modal-content .case_nexty div {
        margin: 0 auto;
        padding: 10% 0;
        width: 80%;
    }

    .modal-content .case_nexty dl:not(:last-child) {
        position: relative;
        margin-bottom: 30%;
    }

    .modal-content .case_nexty dt {
        padding: 2% 0;
        background-color: #8E8E8E;
        color: #fff;
        text-align: center;
        font-size: 0.5vw;
    }

    .modal-content .case_nexty dl:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: -27%;
        right: 33%;
        transform: translate(-33%, -50%);
        width: 0;
        height: 0;
        border-top: 20px solid #955A32;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
    }

    .modal-content h5 {
        margin-bottom: 5%;
        color: #955A32;
        font-weight: bold;
        font-size: 1.6rem;
    }

    .modal-content .case_nexty > div + p {
        margin-bottom: 1vh;
    }

    .modal-content .rail_size {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        color: #955A32;
    }

    .modal-content .rail_size a {
        width: 100%;
    }

    .modal-content .rail_size img {
        margin-left: 2%;
        width: 5%;
    }


    .guide3 input:focus {
        outline: none;
        background-color: transparent;
    }

    .guide3 p.txt_lead {
        margin: 0 0 10% 13%;
        color: #955A32;
        letter-spacing: 0;
        font-size: 1.2rem;
        text-align: center;
    }

    .guide3 p.txt_lead::before {
        content: "";
        display: block;
        /*width: 96%;*/
        width: 97%;
        height: 10px;
        background-image: url("../image/waveline_top_sp.svg");
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
    }

    .guide3 p.txt_lead::after {
        content: "";
        display: block;
        /*width: 96%;*/
        width: 97%;
        height: 10px;
        background-image: url("../image/waveline_btm_sp.svg");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
    }

    @media print, screen and (max-width: 767px) and (min-width: 400px) {
        .guide3 p.txt_lead {
            margin: 0 0 10% 11%;
        }

        .guide3 p.txt_lead::before {
            width: 100%;
        }

        .guide3 p.txt_lead::after {
            width: 100%;
        }
    }

    .guide3 .guide-rightarea .inner {
        display: flex;
        position: relative;
    }

    .guide3 .guide-rightarea > div:nth-of-type(-n+3) {
        margin-bottom: 20%;
    }

    .guide3 .inner > p {
        width: 20%;
    }

    .guide3 .inner section {
        padding: 0 0 10% 10%;
        width: 80%;
    }

    .guide3 h4 {
        margin-bottom: 5%;
        font-size: 1.8rem;
    }

    .guide3 h4 + p {
        margin-bottom: 18%;
        font-size: 1.2rem;
    }

    .guide3 .step1 {
        margin-bottom: 15%;
    }

    .guide3 .step1 dl:not(:last-child) {
        margin-bottom: 5%;
    }

    .guide3 .step1 dd {
        position: relative;
        width: 100%;
        padding: 10%;
        background-color: #fff;
        position: relative;
        width: 100%;
        text-align: center;
        font-size: 1.6rem;
        font-weight: bold;
        display: none;
        transition: opacity 0.5s, transform 0.5s;
        opacity: 0;
        transform: translateY(-20px);
    }

    .guide3 .step1 dd.active {
        display: block;
        transition: 0.5s;
    }

    .guide3 .step1 dt {
        position: relative;
        padding: 0 0 10%;
        color: #955A32;
        /*border-bottom: 1px solid #955A32;*/
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: 0;
    }

    .guide3 .step1 dt::after {
        position: absolute;
        top: 6%;
        right: 1%;
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-top: 3px solid #955A32;
        border-right: 3px solid #955A32;
        transform: rotate(135deg);
        margin-left: 5px;
        transition: 0.5s;
    }

    .guide3 .step1 dt.clicked::after {
        top: 15%;
        transform: rotate(315deg);
        transition: 0.5s;
    }

    .guide3 .step1 dt span {
        font-size: 1.4rem;
    }

    .guide3 .step1 dd:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 10%;
        width: 80%;
        height: 3px;
        background-color: #C4C4C4;
    }

    .guide3 .step1 dd:last-of-type {
        background-color: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 30px;
    }
    .guide3 .step1 dd:first-of-type {
        border-top: 1px solid #955A32;
    }

    .guide3 .step1 dd.selected {
        background-color: #E5DBD1;
        transition: 0.3s;
    }

    .guide3 .step2 button {
        margin-bottom: 10%;
        padding: 8% 26%;
        color: #C4C4C4;
        border: 1px solid #C4C4C4;
        font-size: 1.6rem;
        font-weight: bold;
    }

    .guide3 .step2 button.active {
        color: #955A32;
        border: 1px solid #955A32;
        transition: 0.5s;
    }

    .guide3 .step2 button.selected {
        background-color: #E5DBD1;
        transition: 0.3s;
    }

    .guide3 .step3 .rail_width {
        margin-bottom: 15%;
        color: gray;
        opacity: 0.4;
        transition: 0.5s;
    }

    .guide3 .step3 .rail_width.active {
        color: #955A32;
        opacity: 1;
        transition: 0.5s;
    }

    .guide3 .step3 .rail_width input {
        margin-right: 5%;
        padding: 7%;
        border: 1px solid #464646;
        width: 70%;
        vertical-align: middle;
    }

    .guide3 .step3 .rail_width span {
        font-size: 1.6rem;
        font-weight: bold;
    }

    .guide3 .step3 .curtain_detail {
        margin-bottom: 5vh;
    }

    .guide3 .step3 .curtain_detail dl {
        margin-bottom: 15%;
    }

    .guide3 .step3 .curtain_detail dt {
        margin-bottom: 10%;
        margin-left: -14%;
        color: #C4C4C4;
        font-size: 1.6rem;
    }

    .guide3 .step3 .curtain_detail dt.active {
        color: #955A32;
    }

    .guide3 .step3 .curtain_detail dt img {
        margin-right: 3%;
        width: 11%;
    }

    .guide3 .step3 .curtain_detail dt span {
        display: block;
        margin-left: 10%;
        font-size: 1.4rem;
        width: 84%;
    }

    .guide3 .step3 .curtain_detail dd {
        margin-right: 5%;
        padding: 10% 5%;
        border: 1px solid gray;
        color: gray;
        opacity: 0.4;
        transition: 0.5s;
    }

    .guide3 .step3 .curtain_detail dd.active {
        border: 1px solid #955A32;
        color: #955A32;
        background-color: #fff;
        opacity: 1;
        transition: 0.5s;
    }

    .guide3 .step3 .curtain_detail dd span {
        font-size: 1.6rem;
    }

    .guide3 .step3 .curtain_detail div {
        border: none;
        width: 8vw;
        vertical-align: middle;
    }

    .guide3 .step3 .curtain_detail div {
        border: none;
        width: 85%;
        vertical-align: middle;
        display: inline-block;
        font-size: 1.8rem;
    }

    .guide3 .inner.step4 section,
    .guide3 .order.sp {
        opacity: 0.5;
    }

    .guide3 .inner.step2 > section,
    .guide3 .inner.step3 > section,
    .guide3 .inner.step4 > section {
        opacity: 0.5;
    }

    .guide3 .inner.step2 > section.active,
    .guide3 .inner.step3 > section.active,
    .guide3 .inner.step4 > section.active {
        opacity: 1;
    }

    .guide3 .inner.step4 section.active,
    .guide3 .order.sp.active {
        opacity: 1;
    }

    .guide3 .calculation {
        padding-left: 0 !important;
        width: 100% !important;
    }

    .guide3 .calculation h5 {
        margin-bottom: 10%;
        font-size: 1.6rem;
    }

    .guide3 .step3 .section3.active section.calculation {
        opacity: 0.5;
    }

    .guide3 .step3 .section3.active section.calculation.active {
        opacity: 1;
    }

    /* ピッチ選択 */
    .pitch_title {
        color: #464646;
        font-size: 1.6rem;
        margin: 20px 0 0;
    }
    .pitch_box {
        height: initial;
        display: block;
        margin: 10px 0 15px;
    }
    .pitch-btn {
        color: #955A32;
        border: 1px solid #955A32;
        transition: 0.5s;
        width: 76%;
        height: 58px;
        font-size: 1.6rem;
        font-weight: bold;
        display: block;
        margin: 0 0 15px;
    }
    .pitch-btn.selected {
        background-color: #E5DBD1;
        transition: 0.3s;
    }
    .pitch12-notice {
    color: #464646;
    margin: 5px 0 0;
    font-size: 0.5vw;
    }

    .guide3 .calculation button {
        /*padding: 3% 6%;*/
        /*color: #955A32;*/
        /*border: 1px solid #955A32;*/
        /*border-radius: 20px;*/
        /*font-family: "Raleway", sans-serif;*/
        /*letter-spacing: 0.1em;*/
        /*font-size: 1.6rem;*/

        padding: 4.5% 8.5%;
        color: #955A32;
        border: 1px solid #955A32;
        border-radius: 20px;
        font-family: "Raleway", sans-serif;
        letter-spacing: 0.1em;
    }

    .guide3 .calculation .modal-content {
        padding: 8%;
        max-height: 100%;
    }

    .guide3 .calculation .modal-content section {
        padding-left: 0;
        width: 100%;
    }

    .guide3 .calculation .modal-content h5 {
        color: #464646;
        text-align: center;
    }

    .guide3 .calculation .modal-content ul {
        font-size: 1.2rem;
    }
    .pitch12-notice {
        margin: 8px 0 0;
        font-size: 1.2rem;
    }

    .guide3 .calculation .modal-content h5 + ul {
        margin: 0 0 10% 5%;
        list-style-type: disc;
    }

    .guide3 .calculation .modal-content ul.size {
        margin-top: 10%;
    }

    .guide3 .order {
        margin-bottom: 15%;
    }

    .guide3 .order dl {
        margin-bottom: 10%;
        padding: 5% 8%;
        border: 1px solid #464646;
        border-radius: 15px;
    }

    .guide3 .order dl dt {
        margin-bottom: 10%;
        color: #955A32;
        font-size: 1.6rem;
    }

    .guide3 .order dl dd {
        font-size: 1.2rem;
    }

    .guide3 .order ul {
        margin-left: 5%;
        list-style-type: disc;
        font-size: 1.4rem;
    }

    .guide3 .order li:not(:last-child) {
        margin-bottom: 2%;
    }

    .guide3 .wave_chart caption {
        font-size: 1.6rem;
    }

    .wave_chart {
        margin-bottom: 6%;
        width: 100%;
    }

    .wave_chart th,
    .wave_chart td {
        text-align: center !important;
        vertical-align: middle;
    }

    .wave_chart caption {
        margin-bottom: 5%;
        text-align: center;
        border-collapse: collapse;
        font-size: 1.6rem;
        font-weight: bold;
    }

    .wave_chart thead th {
        padding: 3%;
        background-color: #C4C4C4;
        color: #fff;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        font-size: 1.4rem;
    }

    .wave_chart thead th:not(:last-child) {
        border-right: 1px solid #fff;
    }

    .wave_chart tbody th {
        padding: 3% 2%;
        border-right: 1px solid #464646;
        border-bottom: 1px solid #464646;
        background-color: #E6E6E6;
        font-weight: normal;
        text-align: center;
        vertical-align:middle;
        white-space: nowrap;
        font-size: 1.2rem;
        font-weight: bold;
        width: 25%;
    }

    .wave_chart tbody td {
        padding: 1rem;
        border-bottom: 1px solid #464646;
        vertical-align:middle;
        white-space: nowrap;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .wave_chart tbody td:first-of-type {
        padding: 3% 0 3% 5%;
        width: 35%;
    }

    .wave_chart tbody td:last-of-type {
        padding: 3% 5% 3% 0;
        width: 35%;
    }

    .wave_chart .icon_maru {
        width: 18%;
    }

    .wave_chart .icon_batsu {
        width: 18%;
    }

    .wave_text {
        padding-left:1em;
        text-indent:-1em;
        font-size: 1.1rem;
    }

    .guide3 .step_img::after {
        content: '';
        position: absolute;
        transform: translateY(calc(100% + 7vh));
        height: 100%;
        /* border-left: 2px dashed #955A32; */
        border-left: 2px dashed #C4C4C4;
        bottom: 100%;
        left: 10%;
    }

    .guide3 .step4_img::after {
        content: '';
        position: absolute;
        transform: translateY(calc(100% + 6.5vh));
        height: 0;
        border-left: none;
        bottom: 100%;
        left: 5%;
    }

    .guide3 .step1_img.colored::after {
        border-left: 2px dashed #955A32;
        transition: 1s;
    }

    .guide3 .step2_img img {
        transition: 1s;
    }

    .guide3 .step2_img.colored::after {
        border-left: 2px dashed #955A32;
        transition: 1s;
    }

    .guide3 .step3_img.colored::after {
        border-left: 2px dashed #955A32;
        transition: 1s;
    }

    #movie > div {
        margin: 0 auto;
    }

    #movie .movie_block > div {
        position: relative;
        margin-bottom: 10%;
    }

    #movie .movie_block dl {
        margin-bottom: 22%;
        text-align: center;
    }

    #movie .movie_block dt {
        margin-bottom: 4%;
        font-size: 1.6rem;
    }

    #movie .movie_block dd {
        font-size: 1.2rem;
    }

    .movie_item,
    .youtube_movie_item {
        position: relative;
        z-index: 4;
    }

    .bg_rotate {
        position: absolute;
        left: 2vw;
        bottom: -6vh;
        z-index: 1;
    }

    /* 動画用モーダル */
    .movie-modal,
    #movie .youtube-movie-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
    }

    .movie-modal.is-active,
    #movie .youtube-movie-modal.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    #movie .youtube-modal-content,
    #movie .custom-modal-content {
        aspect-ratio: 16 / 9;
        width: 90%;
        background-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        overflow:visible
    }

    #movie .youtube-modal-content iframe,
    .movie-modal iframe {
        width: 100%;
        height: 100%;
    }

    #info_modal.pc {
        display: none;
    }

    #info p {
        font-size: 1.4rem;
    }

    footer {
        font-size: 9px;
        margin-bottom: 50px;
    }

    .l-footer__g4 {
        padding: 4% 0 7% !important;
    }

    .listBox {
        display: none;
        width: 100%;
        position: fixed;
        bottom: 65px;
        z-index: 10;
    }

    .c-menuList {
        padding-bottom: 0;
    }

    .btn-catalog[data-v-e8d96cea] {
        width: 100%;
    }

    .btn-catalog[data-v-e8d96cea] {
        position: relative;
        border: 1px solid #d8d8d8;
        overflow: hidden;
        background: #fff;
        text-align: center;
    }

    .c-menuList:not(:first-child) {
        padding-top: 0;
    }

    a[data-v-e8d96cea] {
        display: block;
        padding: 1em 0;
        width: 100%;
        height: 100%;
    }

    .btn-catalog span[data-v-e8d96cea] {
        margin-left: 1.5em;
    }

    .icon--catalog[data-v-e8d96cea] {
        left: 15%;
        top: 0;
        width: 1.4em;
    }

    .icon[data-v-e8d96cea] {
        position: absolute;
        height: 100%;
    }

    .icon--link[data-v-e8d96cea] {
        top: 1%;
        right: 3%;
        width: 0.8em;
    }

    #nav-drawer {
        display: none;
    }
}

@media print, screen and (max-width: 400px) {
    #about.extension {
        height: 1900px;
    }
    .about3.surround {
        opacity: 1;
        top: 11% !important;
    }
}

@media print, screen and (max-width: 389px) {
    #about.extension {
        height: 1800px;
    }
    .about2 {
        top: 18% !important;
    }
}


/* ここまでSP */