@charset "UTF-8";

/* ベース */

#optional-parts {
    width: 100%;
    margin: 30px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #3C3C50;
    font-weight: 400;
    background-color: #FAFAFA;
}

@media screen and (max-width: 768px) {
    #optional-parts {
        margin: min(30px, 3.9%) 0 0 0;
    }
}

@media screen and (max-width: 480px) {
    #optional-parts {
        margin: min(40px, 12.5%) 0 0 0;
    }
}

#optional-parts p {
    margin: 0;
    padding: 0;
}

#optional-parts a {
    transition: ease-in-out .3s;
}

#optional-parts ul, #optional-parts li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#optional-parts h1, #optional-parts h2, #optional-parts h3 {
    margin: 0;
    padding: 0;
}

#optional-parts a:hover {
    opacity: 0.5;
}

#optional-parts * {
    box-sizing: border-box;
}

#optional-parts img {
    display: block;
    width: 100%;
    max-width: 100%;
    height:auto;
}

#optional-parts a img {
    opacity: 1;
    transition: 0.3s ease-in-out;
}

#optional-parts a:hover img {
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

/* #optional-parts section {
    padding:min(130px, 6.77%) 0 min(140px, 7.29%);
}

@media screen and (max-width: 768px) {
    #optional-parts section {
        padding:min(30px, 7.69%) 0 min(50px, 12.8%);
    }
} */

/* 変数 */
:root {
    --pink01: #FDE2EA;
    --pink02: #F34E6B;
    --yellow01: #FFF3C3;
    --yellow02: #FFF200;
    --white: #fff;
    --green: #00A63D;
    --blue: #003E81;
}

/* レイアウト */

#optional-parts .l_container-large {
    max-width: 1540px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 768px) {
    #optional-parts .l_container-large {
        padding:0 max(22px, 5.6%);
    }
}

#optional-parts .l_container01 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 max(22px, 1.5%);
}

@media screen and (max-width: 768px) {
    #optional-parts .l_container01 {
        padding: 0 max(22px, 5.6%);
    }
}

#optional-parts .l_container01_02 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 max(22px, 1.5%);
}

@media screen and (max-width: 768px) {
    #optional-parts .l_container01_02 {
        padding: 0;
    }
}

#optional-parts .l_container01_03 {
    max-width: 920px;
    margin: 0 auto;
}


#optional-parts .l_container02 {
    max-width: 910px;
    margin: 0 auto;
    padding: 0 max(22px, 2.4%);
}

@media screen and (max-width: 768px) {
    #optional-parts .l_container02 {
        padding: 0 max(22px, 5.6%);
    }
}

#optional-parts .l_wrap_round {
    border-radius: 20px;
    background-color: var(--white);
}

@media screen and (max-width: 768px) {
    #optional-parts .l_wrap_round {
        border-radius: 10px;
    }  
}

#optional-parts .l_wrap_round .title {
    border-radius: 20px 20px 0 0;
    background-color: var(--pink02);
    overflow:hidden;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .l_wrap_round .title {
        border-radius: 10px 10px 0 0;
    }  
}

#optional-parts .l_wrap_round .contents {
    padding:min(40px, 3.9%) max(60px, 5.8%) min(60px, 5.8%);
}

@media screen and (max-width: 768px) {
    #optional-parts .l_wrap_round .contents {
        padding:min(20px, 5.7%) max(20px, 5.7%) min(30px, 8.6%);
    } 
}

/* モジュール */

#optional-parts .pc {display: block;}
#optional-parts .pc02 {display: block;}
#optional-parts .sp {display: none;}
#optional-parts .sp02 {display: none;}

@media screen and (max-width: 910px) {
    #optional-parts .pc {display: none;}
    #optional-parts .pc02 {display: block;}
    #optional-parts .sp {display: block;}
    #optional-parts .sp02 {display: block;}
}

@media screen and (max-width: 768px) {
    #optional-parts .pc {display: none;}
    #optional-parts .pc02 {display: none;}
    #optional-parts .sp {display: block;}
    #optional-parts .sp02 {display: block;}
}

#optional-parts .sub_title {
    color: var(--pink02);
    font-size: 45px;
    font-weight: 700;
    text-align: center;
}

#optional-parts .lead {
    font-size: 20px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .sub_title {
        font-size: 24px;
        font-size: 6.2vw;
    }

    #optional-parts .lead {
        font-size: 16px;
        font-size: 4.1vw;
    }
}

/* マージン系 */

#optional-parts .mt01em {
    margin-top: 1em;
}

#optional-parts .mt01em-2 {
    margin-top: .5em;
}

/* キービジュアル */

#optional-parts .kv {
    /* max-width: 1540px; */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F0F0F0;
}

@media screen and (max-width: 768px) {
    #optional-parts .kv {
       flex-direction: column;
    }
}

#optional-parts .kv h1 {
    width: 50%;
}

#optional-parts .kv .slide {
    width: 50%;
}

@media screen and (max-width: 768px) {
    
    #optional-parts .kv h1 {
        width: 100%;
    }

    #optional-parts .kv .slide {
        width: 100%;
    }
}

/* セクション01 */

#optional-parts #sec01 {
    width: 100%;
    padding-bottom: min(90px, 5.8%);
}

#optional-parts .contents_flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: min(87px, 8.3%);
}

@media screen and (max-width: 768px) {
    #optional-parts .contents_flex{
        width: 100%;
        justify-content: normal;
    }
}

#optional-parts .left_wrap, #optional-parts .right_wrap, #optional-parts .left_wrap02, #optional-parts .right_wrap02 {
    width: 47.1%;
}

@media screen and (max-width: 768px) {
    #optional-parts .left_wrap, #optional-parts .right_wrap, #optional-parts .left_wrap02, #optional-parts .right_wrap02  {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .left_wrap02 {
        order: 2;
    }

    #optional-parts .right_wrap02 {
        order: 1;
    }
}

#optional-parts .shouhin_slide_wrap {
    width: 100%;
    position: relative;
}



@media screen and (max-width: 768px) {
    #optional-parts .shouhin_slide_wrap {
        width: 100%;
    }
}

#optional-parts .shouhin_slide {
    width: 100%;
    margin: 0 auto;
    padding-top: 1em;
}

@media screen and (max-width: 768px) {
    #optional-parts .shouhin_slide {
        margin: 0 auto;
    }
}

#optional-parts .shouhin_slide .slick-arrow{
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#optional-parts .shouhin_slide .slick-next, #optional-parts .shouhin_slide .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 6.5%;
    position: absolute;
}

#optional-parts .shouhin_slide .slick-next{
    background-image: url(../images/slider_r.png);
    right: 3%;
    margin: auto 0;
}

#optional-parts .shouhin_slide .slick-prev{
    background-image: url(../images/slider_l.png);
    left: 3%;
    margin: auto 0;
}

#optional-parts .shouhin_slide .slick-dots li button:before{
	font-size:10px!important;
}

.slick-dots li.slick-active button:before
{
    opacity: 1;
}

#optional-parts .shouhin_slide .slick-dots li{
	width:1.5em!important;
}

#optional-parts .shouhin_slide .slick-dots{
	bottom: 7%!important;
}

/* @media only screen and (max-width: 910px) {
    #optional-parts .shouhin_slide .slick-dots li button:before{
        font-size:2.4vw!important;
    }

    #optional-parts .shouhin_slide .slick-dots li{
        width:1.5em!important;
    }

    #optional-parts .shouhin_slide .slick-dots{
        bottom: 0%!important;
    }
} */

#optional-parts .price_wrap {
    margin-top: min(45px, 9.1%);
}

@media screen and (max-width: 768px) {
    #optional-parts .price_wrap {
        margin-top: min(35px, 8.9%);
        padding: 0 max(22px, 5.6%);
    }
}

#optional-parts .price_wrap_option {
    margin-top: calc(10/490*100%);
}

@media screen and (max-width: 768px) {
    #optional-parts .price_wrap_option {
        margin-top: calc(0/346*100%);
    }
}

.btn_price {
    margin-top: calc(10/490*100%);
    display: block;
}

#optional-parts .price_ttl {
    border: 1px solid #3C3C50;
    box-sizing: border-box;
    font-size: 20px;
    text-align: center;
    padding: .3em;
}

@media screen and (max-width: 768px) {
    #optional-parts .price_ttl {
        font-size: 18px;
        font-size: 4.8vw;
    }
    
}

#optional-parts .notes {
    font-size: 15px;
    margin-top: .5em;
}

@media screen and (max-width: 768px) {
    #optional-parts .notes {
        padding:0 max(22px, 5.6%);
        font-size: 12px;
        font-size: 3.2vw;
    }
}

#optional-parts .notes02 {
    font-size: 16px;
    margin-top: 3.8%;
}

@media screen and (max-width: 768px) {
    #optional-parts .notes02 {
        padding:0 9.7%;
        margin-top: 5.1%;
        font-size: 12px;
        font-size: 3.2vw;
    }

    #optional-parts .notes02 li {
        text-indent: -1em;
        padding-left: 1em;
        margin-bottom: .3em;
    }
}

#optional-parts .type_flex {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .type_flex {
        padding:10.2% max(22px, 5.6%) 0;
    }
}

#optional-parts .type_line {
   border-left: 1px solid #CBCBD0 ;
   margin-left: 1em;
   padding-right: 1em;
   margin-top: 12%;
}

.type_sliver, .type_black {
    width: 44%;
    display: flex;
    flex-direction: column;
}

.type_ttl01 {
    background-color: #E6EBF0;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.type_ttl02 {
    background-color: #0A0A0A;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .type_ttl01, .type_ttl02 {
        font-size: 20px;
        font-size: 4.8vw;
    }
}

.type_text {
    text-align: justify;
    flex-wrap: wrap;
    font-size: 14px;
    margin: 1em 0;
    flex: 1;
}

@media screen and (max-width: 768px) {
    .type_text {
        font-size: 14px;
        font-size: 3.8vw;
    }
}


.type_color {
    margin-top: 20%;
}

.image_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px 4.4%;
}

@media screen and (max-width: 768px) {
    .image_wrap {
        flex-direction: column;
        align-items: center;
        margin:0 max(22px, 5.6%);
        gap:20px 0%;
    }
}

.image_li01, .image_li02, .image_li03, .image_li04 {
    width: 47.7%;
    display: block;
}

@media screen and (max-width: 768px) {
    .image_li01, .image_li02, .image_li03, .image_li04 {
        width: 90%;
    }

    .image_li01 {
        order: 1;
    }

    .image_li02 {
        order: 0;
    }

    .image_li03 {
        order: 2;
    }

    .image_li04 {
        order: 3;
    }
}

.spec {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 1.4;
}


.spec dt {
    width: 34.6%;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 1em;
}

@media screen and (max-width: 768px) {
    .spec dt {
        width: 33%;
        font-size: 14px;
        font-size: 3.8vw;
    }
}

.spec dd {
    width: 65.3%;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 1em;
}

@media screen and (max-width: 768px) {
    .spec dd {
        width: 66%;
        font-size: 14px;
        font-size: 3.8vw;
    }
}

.indent1em {
    text-indent: -1em;
    padding-left: 1em;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .indent1em {
        font-size: 12px;
        font-size: 3.2vw;
    }
}

.spec_wrap {
    border-top: 1px solid #3C3C50;
    border-bottom: 1px solid #3C3C50;
    box-sizing: border-box;
    padding: 1em 0;
}

@media screen and (max-width: 768px) {
    .spec_wrap {
        margin: 10% max(22px, 5.6%);
    }
}

.spec_ttl {
    font-size: 24px;
    margin-bottom: 1em;
    text-align: center;
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .spec_ttl {
        font-size: 18px;
        font-size: 4.8vw;
    }
}

#optional-parts .bba_flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-top: min(87px, 8.3%);
}

@media screen and (max-width: 768px) {
    #optional-parts .bba_flex {
        display: block;
        margin-top: 11.5%;
        padding: 0 9.4%;
    }
}

.bba_image {
    width: 23%;
    margin: 0 auto 0 0;
}

@media screen and (max-width: 768px) {
    .bba_image {
        width: 43.6%;
        margin: 0 auto;
    }
}

.bba_text {
    width: 71.8%;
    font-size: 22px;
    font-weight: 500;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    .bba_text {
        width: 100%;
        margin-top: 1em;
        font-size: 14px;
        font-size: 3.8vw;
    }
}

.bba_ttl {
    font-size: 50px;
    font-weight: 500;
    text-align: left;
}

.bba_ttl span {
    font-size: 22px;
}

@media screen and (max-width: 768px) {
    .bba_ttl {
        font-size: 24px;
        font-size: 6.2vw;
        text-align: center;
        margin-bottom: .3em;
    }
    
    .bba_ttl span {
        font-size: 14px;
    }
}



.btn_top {
    width: 100%;
    display: block;
    margin-top: min(87px, 8.3%);
}

@media screen and (max-width: 768px) {
    .btn_top {
        display: block;
        margin-top: 11.5%;
        padding:0 max(22px, 5.6%);
    }
}


#optional-parts .sec01_textwrap {
    width: min(500px, 48.8%);
    margin: 0 auto min(40px, 3.8%);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    #optional-parts .sec01_textwrap {
        width: 100%;
        padding: 0 min(15px, 4%) 0;
    }
}

#optional-parts h2.sec01_title {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto min(40px, 3.8%);
}

@media screen and (max-width: 768px) {
    #optional-parts h2.sec01_title {
        font-size: 22px;
        font-size: 5.6vw;
        margin: 0 auto min(30px, 9%);
    }
}

#optional-parts .sec01_textwrap p {
    font-size: 20px;
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    #optional-parts .sec01_textwrap p {
        font-size: 14px;
        font-size: 3.8vw;
        line-height: 2;
    }
}

#optional-parts .movie_wrap {
    margin: min(90px, 8.7%) auto ;
}

@media screen and (max-width: 768px) {
    #optional-parts .movie_wrap {
        margin: min(45px, 13.5%) auto;
        padding: 0 min(15px, 4%) 0;
    }
}


/* セクション02 */

#optional-parts .sec_title {
    position: absolute;
    top: 0;
    left: 0;
    width: min(58px, 3.76%);
    z-index: 2;
}

@media screen and (max-width: 768px) {
    #optional-parts .sec_title {
        width: 9.8%;
    }
}

#optional-parts #sec02 {
    background-color: #FAFAFA;
    padding: min(100px, 5.1%) 0;
}

@media screen and (max-width: 768px) {
    #optional-parts #sec02 {
        background-color: #FAFAFA;
        padding: min(40px, 10.6%) 0;
    }
}

#optional-parts .series_slide {
    width: 100%;
    margin: 0 auto;
}

#optional-parts .series_slide li {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0.5%;
}

#optional-parts .series_slide li .btn_buy {
    width: 100%;
    display: block;
    margin-top: 2.5%;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    #optional-parts .slick-slide img {
        margin-bottom: 0px;
    }
}

#optional-parts .series_slide .slick-arrow{
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#optional-parts .series_slide .slick-next, #optional-parts .series_slide .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 5.3%;
    position: absolute;
    cursor: pointer;
}

#optional-parts .series_slide .slick-next{
    background-image: url(../images/slider_r.png);
    right: 0;
    margin: auto 2.5% auto 0;
}

#optional-parts .series_slide .slick-prev{
    background-image: url(../images/slider_l.png);
    left: 0;
    margin: auto 0 auto 2.5%;
}

#optional-parts .series_slide .slick-dots li button:before{
	font-size:16px!important;
}

#optional-parts .series_slide .slick-dots li{
	width:3em!important;
}

#optional-parts .series_slide .slick-dots{
	bottom: -5%!important;
}

@media only screen and (max-width: 767px) {
    #optional-parts .series_slide .slick-dots li button:before{
        font-size:2.8vw!important;
    }

    #optional-parts .series_slide .slick-dots li{
        width:2em!important;
    }

    #optional-parts .series_slide .slick-dots{
        bottom: -9.5%!important;
    }
}

/* セクション03 */

#optional-parts #sec03 {
    background-color: #E5F0EF;
    padding: min(100px, 5.1%) 0 calc(0% + 10vw);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec03 {
        padding: min(40px, 10.6%) 0 calc(0% + 20vw); 
    }
}

#optional-parts .look_slide {
    width: 100%;
    margin: 0 auto;
    /* padding: 0 0 100px 0; */
}

@media only screen and (max-width: 767px) {
    #optional-parts .look_slide {
        width: 100%;
        /* padding: 0 max(22px, 5.6%) min(100px, 13%); */
        padding: 0 max(22px, 5.6%) 0;
    }
}

#optional-parts .look_slide li {
    width: 100%;
    margin: 0 0.2%;
}

@media only screen and (max-width: 767px) {
    #optional-parts .look_slide li {
        width: 100%;
        margin: 0;
    }
}

#optional-parts .look_slide li element {
    backface-visibility: visible;/*初期値 背面が可視になる*/
    backface-visibility: hidden;/*背面が非表示になる*/
}

@media only screen and (max-width: 767px) {
    #optional-parts .slick-slide img {
        margin-bottom: 0px;
        backface-visibility: hidden;/*追加*/
    }
}

#optional-parts .look_slide .slick-arrow{
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#optional-parts .look_slide .slick-next, #optional-parts .look_slide .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: max(30px, 1.5%);
    position: absolute;
    cursor: pointer;
}

#optional-parts .look_slide .slick-next{
    background-image: url(../images/slider_r.png);
    top: 15%;
    right: 0;
    bottom: 0;
    left: 18.5%;
    margin: auto;
}

#optional-parts .look_slide .slick-prev{
    background-image: url(../images/slider_l.png);
    top: 15%;
    right: 18.5%;
    bottom: 0;
    left: 0;
    margin: auto;
}


@media only screen and (max-width: 767px) {
    #optional-parts .look_slide .slick-next{
        top: 15%;
        right: 0;
        left: auto;
        margin: auto 4% auto 0;
    }
    
    #optional-parts .look_slide .slick-prev{
        top: 15%;
        right: auto;
        left: 0;
        margin: auto 0 auto 4% ;
    }
}

#optional-parts .look_slide .slick-dots li button:before{
	font-size:16px!important;
}

#optional-parts .look_slide .slick-dots li{
	width:3em!important;
}

#optional-parts .look_slide .slick-dots{
	bottom: -5%!important;
}

@media only screen and (max-width: 767px) {
    #optional-parts .look_slide .slick-dots li button:before{
        font-size:2.8vw!important;
    }

    #optional-parts .look_slide .slick-dots li{
        width:2em!important;
    }

    #optional-parts .look_slide .slick-dots{
        bottom: -9.5%!important;
    }
}


/* セクション04 */

#optional-parts #sec04 {
    background-color: #F3F1EE;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec04 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec04_title {
    width: min(564px, 55%);
    margin: 0 auto;
    transform: rotate(3deg);
}

@media screen and (max-width: 768px) {
    #optional-parts .sec04_title {
        width: 89.5%;
        margin: 0 auto;
        transform: rotate(0deg);
    }
}

#optional-parts .sec04_lead {
    margin: min(20px, 21.9%) auto;
    width: min(830px, 81%);
    text-align: left;
    font-size: 20px;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    #optional-parts .sec04_lead {
        margin: 5.7% auto 0;
        width: 85.5%;
        font-size: 14px;
        font-size: 3.8vw;
    }
}

#optional-parts .crew_wrap {
    width: 100%;
    border: 2px solid #707070;
    background-color: #FFFFFF;
    border-radius: 30px;
    padding: min(50px, 4.8%) min(60px, 5.8%) min(80px, 7.8%);
    margin-top: min(50px, 4.8%);
}

@media screen and (max-width: 768px) {
    #optional-parts .crew_wrap {
        width: 100%;
        border: 1px solid #707070;
        border-radius: 10px;
        padding: min(25px, 7.2%) min(15px, 4.3%) min(30px, 8.6%);
        margin-top: min(30px, 4.8%);
    }
}

#optional-parts .crew_title {
    width: min(300px, 32.6%);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #optional-parts .crew_title {
        width: min(198px, 62.6%);
        margin: 0 auto;
    } 
}

#optional-parts ul.crew_image {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 3.8%;
}

@media screen and (max-width: 768px) {
    #optional-parts ul.crew_image {
        gap: 0 5.3%;
    }
}

#optional-parts ul.crew_image li {
    width: 21.7%;
    margin-top: 5.4%;
}

@media screen and (max-width: 768px) {
    #optional-parts ul.crew_image li {
        width: 28.4%;
        margin-top: 8.5%;
    }
}

#optional-parts ul.enjoy_index {
    display: flex;
    flex-direction: column;
}

#optional-parts ul.enjoy_index li {
    padding: 1em 1.5em 1em 3em;
    border-bottom: 1px dotted #707070;
    font-size: 26px;
    font-weight: 500;
    text-indent: -2em;
    position: relative;
}

@media screen and (max-width: 768px) {
    #optional-parts ul.enjoy_index li {
        font-size: 14px;
        font-size: 3.8vw;
    }
}

#optional-parts ul.enjoy_index li a {
    color: #3C3C50;
    display: block;
}

#optional-parts ul.enjoy_index li a:hover {
    text-decoration: none;
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

#optional-parts ul.enjoy_index li::after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-image: url(../images/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    margin: auto 1em auto 0;
}


/* セクション05 */

#optional-parts #sec05 {
    background-color: #759F85;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec05 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec05_title {
    width: min(665px, 72.1%);
    margin: 0 auto;
    transform: rotate(3deg);
}

@media screen and (max-width: 768px) {
    #optional-parts .sec05_title {
        width: 89.5%;
        margin: 0 auto;
        transform: rotate(0deg);
    }
}

#optional-parts .enjoy_wrap {
    width: 100%;
    margin-top: 6.5%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy_wrap {
        width: 100%;
        margin-top: 6.9%;
    } 
}

#optional-parts .enjoy_wrap li {
    position: relative;
}

#optional-parts .enjoy01_comment01 {
    width: 73.2%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy01_comment02 {
    width: 73.1%;
    margin: 0 auto 0 0;
    padding-top: 6.5%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy01_comment03 {
    width: 57.6%;
    margin: 0 0 0 auto;
    padding: 7.6% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01_comment03 {
        padding: 3.2% 0 11.5% 0;
    }
}

#optional-parts .enjoy01_comment04 {
    width: 57.6%;
    margin: 0 auto 0 0;
}

#optional-parts .enjoy01_comment05 {
    width: 73.1%;
    margin: 0 0 0 auto;
    padding: 7.6% 0 10.8% 0;
}


@media screen and (max-width: 768px) {
    #optional-parts .enjoy01_comment05 {
        padding: 11.5% 0 14.4% 0;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01_comment01, #optional-parts .enjoy01_comment02, #optional-parts .enjoy01_comment03, #optional-parts .enjoy01_comment04, #optional-parts .enjoy01_comment05 {
        width: 100%;
    }
}

#optional-parts .enjoy01__bg01 {
    position: absolute;
    width: 15.3%;
    top: 0;
    left: 0;
    margin: 0 0 0 20.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01__bg01 {
        position: absolute;
        width: 16.1%;
        top: 0;
        left: 0;
        margin: 3.2% 0 0 0%;
    }
}

#optional-parts .enjoy01__bg02 {
    position: absolute;
    width: 24.3%;
    bottom: 0;
    left: 0;
    margin: 0 0 4.7% 25.5%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01__bg02 {
        position: absolute;
        width: 32.3%;
        top: 0;
        left: 0;
        margin: 5.7% 0 0 0%;
    }
}

#optional-parts .enjoy01__bg03 {
    position: absolute;
    width: 9.4%;
    bottom: 0;
    right: 0;
    margin: 0 3.8% 6.3% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy01__bg03 {
        width: 15%;
        margin: 0 4.3% 6.3% 0;
    }
}

#optional-parts .enjoy_life_wrap {
    width: 100%;
    background-color: #FFF6CC;
    border: 2px solid #000;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    padding: 3em;
    box-shadow: 3px 3px 0 0 rgba(0 0 0 / 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy_life_wrap {
        padding: 2.5em 1.5em;
    }
}

#optional-parts .enjoy_life_wrap p {
    max-width: 715px;
    font-size: 20px;
    font-weight: 700;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy_life_wrap p {
        font-size: 14px;
        font-size: 3.8vw;
    }
}

#optional-parts .enjoy_life_ttl {
    position: absolute;
    display: block;
    width: 32%;
    margin: -2% auto 0;
    top: 0;
    left: 0;
    right: 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy_life_ttl {
        position: absolute;
        display: block;
        width: 65%;
        margin: -3.7% auto 0;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* セクション06 */

#optional-parts #sec06 {
    background-color: #BED8D7;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec06 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec06_title {
    width: 83.1%;
    margin: 0 auto;
    /* transform: rotate(3deg); */
}

@media screen and (max-width: 768px) {
    #optional-parts .sec06_title {
        width: 100%;
        margin: 0 auto;
        /* transform: rotate(0deg); */
    }
}

#optional-parts .enjoy_image {
    width: 81%;
    margin: 3.2% auto 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy_image {
        width: 100%;
    }
}

#optional-parts .enjoy02_comment01 {
    width: 69.5%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy02_comment02 {
    width: 60%;
    margin: 0 auto 0 0;
    padding-top: 6.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy02_comment03 {
    width: 69.5%;
    margin: 0 0 0 auto;
    padding: 6.5% 0 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02_comment03 {
        padding: 11.5% 0 0 0;
    }
}

#optional-parts .enjoy02_comment04 {
    width: 69.6%;
    margin: 0 auto 0 0;
    padding: 7.6% 0 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02_comment04 {
        padding: 11.5% 0 0 0;
    }
}

#optional-parts .enjoy02_comment05 {
    width: 69.6%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 10.8% 0;
}


@media screen and (max-width: 768px) {
    #optional-parts .enjoy02_comment05 {
        padding: 11.5% 0 14.4% 0;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02_comment01, #optional-parts .enjoy02_comment02, #optional-parts .enjoy02_comment03, #optional-parts .enjoy02_comment04, #optional-parts .enjoy02_comment05 {
        width: 100%;
    }
}

#optional-parts .enjoy02__bg01 {
    position: absolute;
    width: 5.3%;
    top: 0;
    right: 0;
    margin: 2.6% 19.2% 0 0 ;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02__bg01 {
        position: absolute;
        width: 6.3%;
        margin: 0 0 0 13.8%;
    }
}

#optional-parts .enjoy02__bg02 {
    position: absolute;
    width: 5.2%;
    top: 0;
    left: 0;
    margin: 3.1% 0 0 8.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02__bg02 {
        position: absolute;
        width: 6.3%;
        top: 0;
        left: 0;
        margin: 0 0 0 13.2%;
    }
}

#optional-parts .enjoy02__bg03 {
    position: absolute;
    width: 4.3%;
    bottom: 0;
    right: 0;
    margin: 0 9.5% 3.2% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy02__bg03 {
        position: absolute;
        width: 6.3%;
        bottom: 0;
        right: 0;
        margin: 0 9.8% 0.8% 0;
    }
}



/* セクション07 */

#optional-parts #sec07 {
    background-color: #0087BE;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec07 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec07_title {
    width: 79.1%;
    margin: 0 auto;
    /* transform: rotate(3deg); */
}

@media screen and (max-width: 768px) {
    #optional-parts .sec07_title {
        width: 91.9%;
        margin: 0 auto;
        /* transform: rotate(0deg); */
    }
}


#optional-parts .enjoy03_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy03_comment02 {
    width: 77.1%;
    margin: 0 auto 0 0;
    padding-top: 7.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy03_comment03 {
    width: 77.1%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03_comment03 {
        padding: 11.5% 0 0 0;
    }
}

#optional-parts .enjoy03_comment04 {
    width: 63.4%;
    margin: 0 auto 0 0;
    padding: 7.9% 0 9.3% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03_comment04 {
        width: 79.1%;
        padding: 11.5% 0 13.8% 0;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03_comment01, #optional-parts .enjoy03_comment02, #optional-parts .enjoy03_comment03 {
        width: 100%;
    }
}

#optional-parts .enjoy03__bg01 {
    position: absolute;
    width: 3.8%;
    top: 0;
    right: 0;
    margin: 1% 10.4% 0 0 ;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03__bg01 {
        position: absolute;
        width:6.6%;
        margin: 2.6% 15.6% 0 0%;
    }
}

#optional-parts .enjoy03__bg02 {
    position: absolute;
    width: 3.8%; 
    top: 0;
    left: 0;
    margin: 0 0 0 10.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03__bg02 {
        position: absolute;
        width: 6.6%;
        top: 0;
        left: 0;
        margin: 5.4% 0 0 14.4%;
    }
}

#optional-parts .enjoy03__bg03 {
    position: absolute;
    width: 16.5%;
    top: 0;
    right: 0;
    margin: 2.8% 13.6% 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy03__bg03 {
        position: absolute;
        width: 19%;
        margin: 11.5% 0 0 0;
    }
}

/* セクション08 */

#optional-parts #sec08 {
    background-color: #A0B5CC;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec08 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec08_title {
    width: 76.1%;
    margin: 0 auto;
    /* transform: rotate(3deg); */
}

@media screen and (max-width: 768px) {
    #optional-parts .sec08_title {
        width: 91.9%;
        margin: 0 auto;
        /* transform: rotate(0deg); */
    }
}


#optional-parts .enjoy04_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy04_comment02 {
    width: 67.5%;
    margin: 0 auto 0 0;
    padding-top: 7.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy04_comment03 {
    width: 52%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 13% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04_comment03 {
        padding: 11.5% 0 14.4% 0;
    }
}

#optional-parts .enjoy04_comment04 {
    width: 69%;
    margin: 0 auto 0 0;
    padding: 0 0 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04_comment04 {
        width: 79.1%;
        padding: 0 0 0 0;
    }
}

#optional-parts .enjoy04_comment05 {
    width: 69%;
    margin: 0 0 0 auto;
    padding: 7.7% 0 10.2% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04_comment05 {
        width: 79.1%;
        padding: 11.5% 0 13.8% 0;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04_comment01, #optional-parts .enjoy04_comment02, #optional-parts .enjoy04_comment03, #optional-parts .enjoy04_comment04, #optional-parts .enjoy04_comment05 {
        width: 100%;
    }
}

#optional-parts .enjoy04__bg01 {
    position: absolute;
    width: 24%;
    top: 0;
    left: 0;
    margin: 0 0 0 24.7% ;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04__bg01 {
        position: absolute;
        width:32.8%;
        margin: 2% 0 0 0;
    }
}

#optional-parts .enjoy04__bg02 {
    position: absolute;
    width: 2.8%; 
    top: 0;
    right: 0;
    margin: 8.6% 15.2% 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04__bg02 {
        position: absolute;
        width: 6%;
        top: 0;
        right: 0;
        margin: 0 0 0 10%;
    }
}

#optional-parts .enjoy04__bg03 {
    position: absolute;
    width: 4.8%;
    bottom: 0;
    right: 0;
    margin: 0 6.8% 5.9% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy04__bg03 {
        position: absolute;
        width: 8%;
        margin: 0 7.2% 6.6% 0;
    }
}



/* セクション09 */

#optional-parts #sec09 {
    background-color: #90766B;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec09 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec09_title {
    width: 100%;
    margin: 0 auto;
    /* transform: rotate(3deg); */
}

@media screen and (max-width: 768px) {
    #optional-parts .sec09_title {
        width: 100%;
        margin: 0 auto;
        /* transform: rotate(0deg); */
    }
}

#optional-parts .enjoy05_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy05_comment02 {
    width: 73.8%;
    margin: 0 auto 0 0;
    padding-top: 7.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy05_comment03 {
    width: 57.5%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 7.6%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05_comment03 {
        padding: 11.5% 0 11.5% 0;
    }
}

#optional-parts .enjoy05_comment04 {
    width: 69%;
    margin: 0 auto 0 0;
    padding: 0 0 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05_comment04 {
        width: 79.1%; 
    }
}

#optional-parts .enjoy05_comment05 {
    width: 69%;
    margin: 0 0 0 auto;
    padding: 7.6% 0 9.7% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05_comment05 {
        width: 79.1%;
        padding: 11.5% 0 13.2% 0;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05_comment01, #optional-parts .enjoy05_comment02, #optional-parts .enjoy05_comment03, #optional-parts .enjoy05_comment04, #optional-parts .enjoy05_comment05 {
        width: 100%;
    }
}

#optional-parts .enjoy05__bg01 {
    position: absolute;
    width: 4.2%;
    top: 0;
    right: 0;
    margin: 2.7% 13.3% 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05__bg01 {
        position: absolute;
        width:4.9%;
        margin: 2% 9.2% 0 0;
    }
}

#optional-parts .enjoy05__bg02 {
    position: absolute;
    width: 19.8%; 
    top: 0;
    left: 0;
    margin: 3% 0 0 18.9%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05__bg02 {
        position: absolute;
        width: 24.8%;
        top: 0;
        left: 0;
        margin: 12.4% 0 0 0%;
    }
}

#optional-parts .enjoy05__bg03 {
    position: absolute;
    width: 5.3%;
    top: 0;
    left: 0;
    margin: 4.8% 0 0 9.7%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05__bg03 {
        position: absolute;
        width: 6.3%;
        margin: 0 0 0 11.5%;
    }
}

#optional-parts .enjoy05__bg04 {
    position: absolute;
    width: 5.3%;
    bottom: 0;
    right: 0;
    margin: 0 6.5% 3.3% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy05__bg034 {
        position: absolute;
        width: 4.9%;
        margin: 0 8.6% 4.4% 0;
    }
}


/* セクション10 */

#optional-parts #sec10 {
    background-color: #CDD942;
    background-image: url(../images/bg_grid.png);
    padding: min(200px, 10.2%) 0 calc(0% + 10vw);
    margin-top: calc(0% - 7vw);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
    clip-path:polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #optional-parts #sec10 {
        background-image: url(../images/bg_grid.png);
        background-size: 5%;
        padding: min(100px, 26.6%) 0 calc(0% + 20vw); 
        margin-top: calc(0% - 14vw);
        clip-path:polygon(0 calc(0% + 14vw), 100% 0, 100% 100%, 0 100%);
    }
}

#optional-parts .sec10_title {
    width: 82%;
    margin: 0 auto;
    /* transform: rotate(3deg); */
}

@media screen and (max-width: 768px) {
    #optional-parts .sec10_title {
        width: 99%;
        margin: 0 auto;
        /* transform: rotate(0deg); */
    }
}

#optional-parts .enjoy06_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

#optional-parts .enjoy06_comment02 {
    width: 74.8%;
    margin: 0 auto 0 0;
    padding-top: 7%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06_comment02 {
        padding-top: 11.5%;
    }
}

#optional-parts .enjoy06_comment03 {
    width: 73.1%;
    margin: 0 0 0 auto;
    padding: 6.5% 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06_comment03 {
        padding: 11.5% 0 0 0;
    }
}

#optional-parts .enjoy06_comment04 {
    width: 73.8%;
    margin: 0 auto 0 0;
    padding: 7.6% 0 9.7% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06_comment04 {
        width: 79.1%; 
    }
}


@media screen and (max-width: 768px) {
    #optional-parts .enjoy06_comment01, #optional-parts .enjoy06_comment02, #optional-parts .enjoy06_comment03, #optional-parts .enjoy06_comment04, #optional-parts .enjoy06_comment05 {
        width: 100%;
    }
}

#optional-parts .enjoy06__bg01 {
    position: absolute;
    width: 5.3%;
    top: 0;
    left: 0;
    margin: 1.7% 0 0 9%;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06__bg01 {
        position: absolute;
        width:4.9%;
        margin: 2% 9.2% 0 0;
    }
}

#optional-parts .enjoy06__bg02 {
    position: absolute;
    width: 5.3%; 
    top: 0;
    right: 0;
    margin: 1.5% 6.6% 0 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06__bg02 {
        position: absolute;
        width: 4.9%;
        margin: 0 4.5% 0 0%;
    }
}

#optional-parts .enjoy06__bg03 {
    position: absolute;
    width: 10.2%;
    bottom: 0;
    left: 0;
    margin: 0 0 0% 0;
}

@media screen and (max-width: 768px) {
    #optional-parts .enjoy06__bg03 {
        position: absolute;
        width: 12.4%;
        margin: 0 0 2% 0;
    }
}

/* セクション_オプション */
#optional-parts .sec_option {
    margin-top: calc(175/1920*100%);
    padding-bottom: calc(270/1920*100%);
    font-family: "Zen Kaku Gothic New", sans-serif;
}

#optional-parts .sec_option:last-child {
    padding-bottom: min(90px, 5.8%);
}

@media screen and (max-width: 768px) {
    #optional-parts .sec_option {
        margin-top: calc(50/390*100%);
        padding-bottom: calc(70/390*100%);
    }
}

#optional-parts .sec_option_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #3C3C50;
    font-size: 24px;
    font-weight: 500;
    color: #3C3C50;
    line-height: 1;
    padding: calc(35/1040*100%) 0 !important ;
}

@media screen and (max-width: 1000px) {
    #optional-parts .sec_option_ttl {
        font-size: 2.4vw;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .sec_option_ttl {
        border-top: 1px solid #3C3C50;
        font-size: 4.6vw;
        line-height: 1;
        padding: calc(17/390*100%) 0 !important ;
        margin: 0 calc(22/390*100%);
    }
}

#optional-parts .optionImage_slide_wrap {
    width: 100%;
    position: relative;
    background-color: #F0F0F0;
    padding: calc(270/960*100%) 0 calc(270/960*100%);
}

@media screen and (max-width: 768px) {
    #optional-parts .optionImage_slide_wrap {
        padding: calc(50/390*100%) 0 calc(35/390*100%);
    }
}

#optional-parts .optionImage_ttl {
    position: absolute;
    font-size: 24px;
    font-weight: 500;
    top:0;
    left: 0;
    margin: calc(200/960*100%) 0 0 calc(105/960*100%);
}

@media screen and (max-width: 1000px) {
    #optional-parts .optionImage_ttl {
        font-size: 3.0vw;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .optionImage_ttl {
        font-size: 3.5vw;
        margin: calc(30/390*100%) 0 0 calc(20/390*100%);
    }
}

#optional-parts .optionImage_slide {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .optionImage_slide {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
}

#optional-parts .optionImage_slide li {
    text-align: center; /* 画像中央寄せしたい場合 */
}

#optional-parts .optionImage_slide li img {
    width: calc(750/960*100%);
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 768px) {
    
    #optional-parts .optionImage_slide li img {
        width: calc(333/390*100%);
        margin: 0 auto;
        display: block;
    }
}

#optional-parts .optionImage_slide .slick-arrow{
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#optional-parts .optionImage_slide .slick-next, #optional-parts .optionImage_slide .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 2.5%;
    position: absolute;
}

@media screen and (max-width: 768px) {
    #optional-parts .optionImage_slide .slick-next, #optional-parts .optionImage_slide .slick-prev{
        width: 5.1%;
    }
}

#optional-parts .optionImage_slide .slick-next{
    background-image: url(../images/slider_r.png);
    right: 3%;
    margin: auto 0;
}

#optional-parts .optionImage_slide .slick-prev{
    background-image: url(../images/slider_l.png);
    left: 3%;
    margin: auto 0;
}

#optional-parts .optionImage_slide .slick-dots li button:before{
	font-size:10px!important;
}

.slick-dots li.slick-active button:before
{
    opacity: 1;
}

#optional-parts .optionImage_slide .slick-dots li{
	width:1.5em!important;
}

#optional-parts .optionImage_slide .slick-dots{
	bottom: -7%!important;
}

#optional-parts .option_container01, #optional-parts .option_container02 {
    display: flex;
    justify-content: space-between;
    margin: calc(65/1040*100%) auto 0;
}

#optional-parts .option_container02 {
    align-items: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .option_container01, #optional-parts .option_container02 {
        display: flex;
        flex-direction: column;
        margin: calc(45/390*100%) calc(22/390*100%) 0;
    }
}

#optional-parts .option_image {
    width: calc(510/1090*100%);
}

@media screen and (max-width: 768px) {
    #optional-parts .option_image {
        width: 100%;
    }
}

.optionImage_slide02 {
    width: 100%;
}

.slide_notes {
    margin-top: calc(130/510*100%) !important;
    font-size: 15px;
}

@media screen and (max-width: 1000px) {
    .slide_notes {
        font-size: 1.5vw;
    }
}

@media screen and (max-width: 768px) {
    .slide_notes {
        margin-top: calc(20/346*100%) !important;
        font-size: 3.5vw;
        text-align: center;
    }
}

.option_ex {
    width: calc(510/1090*100%);
}

@media screen and (max-width: 768px) {
    .option_ex {
        width: 100%;
    }
}

.option_ex_ttl, .option_ex_ttl02 {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.option_ex_ttl02 {
    margin-top: calc(40/510*100%) !important;
}

@media screen and (max-width: 1000px) {
    .option_ex_ttl, .option_ex_ttl02 {
        font-size: 2.4vw;
    }
}

@media screen and (max-width: 768px) {
    .option_ex_ttl, .option_ex_ttl02 {
        font-size: 4.6vw;
        margin-top: calc(25/346*100%) !important;
    }
}

.option_ex_text {
   font-size: 20px;
   line-height: 1.3;
   text-align: center;
   margin-top: calc(10/510*100%) !important;
}

@media screen and (max-width: 1000px) {
    .option_ex_text {
        font-size: 2.0vw;
    }
}


@media screen and (max-width: 768px) {
    .option_ex_text {
        font-size: 3.5vw;
        margin-top: calc(10/346*100%) !important;
    }
}

.parts_banner {
    display: block;
    margin: calc(100/1040*100%) auto 0;
}

@media screen and (max-width: 768px) {
    .parts_banner {
        display: block;
        margin: calc(45/390*100%) auto 0;
        padding: 0 calc(22/370*100%);
    }
}

/* ロード用スライダー */

#optional-parts .road_optionImage_slide_wrap {
    width: 100%;
    position: relative;
    background-color: #F0F0F0;
    /* padding: calc(270/960*100%) 0 calc(270/960*100%); */
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide_wrap {
        padding: calc(50/390*100%) 0 calc(35/390*100%);
    }
}

#optional-parts .road_optionImage_ttl {
    position: absolute;
    font-size: 24px;
    font-weight: 500;
    top:0;
    left: 0;
    margin: calc(-40/960*100%) 0 0 calc(105/960*100%);
}

@media screen and (max-width: 1000px) {
    #optional-parts .road_optionImage_ttl {
        font-size: 3.0vw;
    }
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_ttl {
        font-size: 3.5vw;
        margin: calc(30/390*100%) 0 0 calc(20/390*100%);
    }
}


#optional-parts .road_optionImage_slide {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
}

#optional-parts .road_optionImage_slide li {
    text-align: center; /* 画像中央寄せしたい場合 */
}

#optional-parts .road_optionImage_slide li img {
    width: calc(750/960*100%);
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide li img {
        width: calc(333/390*100%);
        margin: 0 auto;
        display: block;
    }
}

#optional-parts .road_optionImage_slide li .slide_option {
    margin: calc(50/1040*100%) auto 0 ;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide li .slide_option {
        margin: calc(50/1040*100%) auto 0 ;
        font-size: 3vw;
    }
}

#optional-parts .road_optionImage_slide .slick-arrow{
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#optional-parts .road_optionImage_slide .slick-next, #optional-parts .road_optionImage_slide .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 2.5%;
    position: absolute;
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide .slick-next, #optional-parts .road_optionImage_slide .slick-prev{
        width: 5.1%;
    }
}

#optional-parts .road_optionImage_slide .slick-next{
    background-image: url(../images/slider_r.png);
    right: 3%;
    margin: auto 0;
}

#optional-parts .road_optionImage_slide .slick-prev{
    background-image: url(../images/slider_l.png);
    left: 3%;
    margin: auto 0;
}

#optional-parts .road_optionImage_slide .slick-dots li button:before{
	font-size:10px!important;
}

.slick-dots li.slick-active button:before
{
    opacity: 1;
}

#optional-parts .road_optionImage_slide .slick-dots li{
	width:1.5em!important;
}

#optional-parts .road_optionImage_slide .slick-dots{
	bottom: 15%!important;
}

@media screen and (max-width: 768px) {
    #optional-parts .road_optionImage_slide .slick-dots{
        bottom: 12%!important;
    }
}


   /* other
---------------------------------------------------------*/
.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
  }  
    
  .clearfix { display: inline-table; }  
    
  /* Hides from IE-mac \*/  
  * html .clearfix { height: 1%; }  
  
  .clearfix { display: block; } 
  
  
  @media screen and (max-width: 768px) {

    #navi-open {
      background-color:transparent;
    }

    #header_nav .inner-link {
        background: rgba(255 255 255 / 0.8);
    }

    #header_nav li a {
        color: #333;
    }

    #header_nav li {
        border-bottom: 1px solid #333;
    }

    .menu-trigger span {
        background-color: #333;
    }
}




   /* フェード
---------------------------------------------------------*/

.js-fadeup {
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup.is-visible {
    transform: translateY(0);
    opacity: 1;
  }
  .js-fadeup-x {
    transform: translateX(-30%);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup-x.is-visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  .js-fadeup-row-child {
    transform: translateY(16px);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup-row.is-visible .js-fadeup-row-child {
    transform: translateY(0);
    opacity: 1;
  }