@charset "UTF-8";

/* ベース */

#coosa {
    width: 100%;
    margin: 30px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    color: #3C3C50;
    font-weight: 400;
}

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

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

#coosa p {
    margin: 0;
    padding: 0;
}

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

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

#coosa h1, #coosa h2, #coosa h3 {
    margin: 0;
    padding: 0;
}

#coosa a:hover {
    opacity: 0.5;
}

#coosa * {
    box-sizing: border-box;
}

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

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

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

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

/* レイアウト */

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

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

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

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

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

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

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


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

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

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

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

#coosa .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) {
    #coosa .l_wrap_round .title {
        border-radius: 10px 10px 0 0;
    }  
}

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

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

#coosa .btn_floating {
    position: fixed;
    width: min(325px, 16.9%);
    box-shadow: 0px 3px 6px rgba(0 0 0 / .2);
    display: block;
    z-index: 101;
    bottom: 0;
    right: 0;
    margin: 0 35px 35px 0;
}

@media screen and (max-width: 768px) {
    #coosa .btn_floating {
        position: fixed;
        width: 100%;
        box-shadow: 0px -3px 6px rgba(0 0 0 / .2);
        bottom: 0;
        right: 0;
        margin: 0 auto;
    }

    #coosa .btn_floating a:hover  {
        opacity: 1 !important;
    }

}


/* モジュール */

#coosa .pc {display: block;}
#coosa .sp {display: none;}
#coosa .sp02 {display: none;}

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

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

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

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

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

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

/* マージン系 */

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

/* キービジュアル */
#coosa .kv {
    width: 100%;
    opacity: 0;
    transition: .3s;
}

#coosa .kv.slick-initialized {
    opacity: 1;
  }

#coosa .kv .slick-slide{
    height: auto!important;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

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

#coosa .kv .slick-next, #coosa .kv .slick-prev{
    padding: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: 1.3%;
    position: absolute;
    cursor: pointer;
}

#coosa .kv .slick-next{
    background-image: url(../images/slider_r.png);
    right: 0;
    margin: auto 1.8% auto 0;
    z-index: auto;
}

#coosa .kv .slick-prev{
    background-image: url(../images/slider_l.png);
    left: 0;
    margin: auto 0 auto 1.8%;
    z-index: auto;
}

@media screen and (max-width: 768px) {
    #coosa .kv .slick-next, #coosa .kv .slick-prev{
        width: 5.1%;
    }
    
    #coosa .kv .slick-next{
        background-image: url(../images/slider_r.png);
        right: 0;
        margin: auto 4.3% auto 0;
    }
    
    #coosa .kv .slick-prev{
        background-image: url(../images/slider_l.png);
        left: 0;
        margin: auto 0 auto 4.3%;
    }
}

#coosa .kv .slick-dots li button:focus:before
{
    opacity: .7!important;
	color: #fff;
}

#coosa .kv .slick-dots li button:before{
	font-size:16px!important;
    font-size:12px!important;
    opacity: .5!important;
    color: #ccc;
}

#coosa .kv .slick-dots li.slick-active button:before{
    opacity: .7!important;
    color: #fff;
}

#coosa .kv .slick-dots li{
	width:1.5em!important;
}

#coosa .kv .slick-dots{
	bottom: 5%!important;
}

@media screen and (max-width: 768px) {
    #coosa .kv .slick-dots li button:before{
        font-size:2.3vw!important;
    }

    #coosa .kv .slick-dots li{
        width:1.5em!important;
    }

    #coosa .kv .slick-dots{
        bottom: 3.8%!important;
    }
}

/* セクション01 */

#coosa #sec01 {
    background-color: #F3F1EE;
    padding: min(90px, 4.6%) 0 ;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

@media screen and (max-width: 768px) {
    #coosa #sec01 {
        padding: min(50px, 13.3%) 0;
    }
}

#coosa .sec01_textwrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

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

#coosa .sec01_textwrap .lead {
    display: inline-block;
    margin: 0 auto min(40px, 3.8%);
    text-align: left;
}

#coosa 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) {
    #coosa h2.sec01_title {
        font-size: 22px;
        font-size: 5.6vw;
        margin: 0 auto min(30px, 9%);
    }
}

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

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

#coosa .movie_wrap {
    margin: min(75px, 7.2%) auto 0 ;
    width: 100%;
}

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

#coosa .movie_wrap .movie {
    width: 100%;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 16 / 9;
}

#coosa .movie_vartical_wrap {
    margin: min(75px, 7.2%) auto 0 ;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

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

#coosa .movie_vartical_wrap .movie_vartical01, #coosa .movie_vartical_wrap .movie_vartical02 {
    width: 47.1%;
    height: auto;
    aspect-ratio: 9 / 16;
    display: block;
}

.movie_vartical_l {
    margin: 0 auto 0 0;
}

.movie_vartical_r {
    margin: 0 0 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .movie_vartical_wrap .movie_vartical01 {
        width: 100%;
    }

    #coosa .movie_vartical_wrap .movie_vartical02 {
        width: 100%;
        aspect-ratio: auto;
    }
    
    .movie_vartical_l {
        margin: 0;
        padding: 0 min(15px, 4%) 0;
    }
    
    .movie_vartical_r {
        margin: min(45px, 13%) 0 0 0;
        padding: 0 min(15px, 4%) 0;
    }
}



/* セクション02 */

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

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

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

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

#coosa .series_slide {
    width: 100%;
    margin: 0 auto;
}

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

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

#coosa .series_slide li .btn_buy02 {
    width: 100%;
    display: block;
    margin-top: 2.5%;
    /* cursor: pointer; */
}

#coosa .series_slide li .btn_comingsoon {
    width: 100%;
    display: block;
    margin-top: 2.5%;
    opacity: .3;
}

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

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

#coosa .series_slide .slick-next, #coosa .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;
}

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

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

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

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

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

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

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

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

.btn_choice {
    width: 38.8%;
    margin: 3.8% auto 0;
    display: block;
}

@media only screen and (max-width: 768px) {
    .btn_choice {
        width: 81%;
        margin: 6.4% auto 0;
        display: block;
    }
    
}

/* セクション03 */

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

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

#coosa .look_slide {
    width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    #coosa .look_slide {
        width: 100%;
        padding: 0 max(22px, 5.6%) 0;
    }
}

#coosa .look_slide li {
    width: 100%;
    margin: 0 0.2%;
}

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

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

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

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

#coosa .look_slide .slick-next, #coosa .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;
}

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

#coosa .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) {
    #coosa .look_slide .slick-next{
        top: 15%;
        right: 0;
        left: auto;
        margin: auto 4% auto 0;
    }
    
    #coosa .look_slide .slick-prev{
        top: 15%;
        right: auto;
        left: 0;
        margin: auto 0 auto 4% ;
    }
}

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

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

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

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

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

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


/* セクション04 */

#coosa #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% 100%, 0 100%);
}

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

#coosa .sec04_title {
    width: min(564px, 55%);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec04_title {
        width: 89.5%;
        margin: 0 auto;
    }
}

#coosa .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) {
    #coosa .sec04_lead {
        margin: 5.7% auto 0;
        width: 85.5%;
        font-size: 14px;
        font-size: 3.8vw;
    }
}

#coosa .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) {
    #coosa .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%);
    }
}

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

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

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

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

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

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

#coosa .enjoy_index {
    display: flex;
    flex-direction: column;
}

#coosa .enjoy_index a {
    color: #3C3C50;
}

#coosa .enjoy_index a:hover {
    text-decoration: none;
}

#coosa .enjoy_index .list {
    padding: 1em 1.5em 1em 3em;
    border-bottom: 1px dotted #707070;
    font-size: 26px;
    font-weight: 500;
    text-indent: -2.2em;
    position: relative;
}

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

#coosa .enjoy_index .list a {
    color: #3C3C50;
    display: block;
    width: 100%;
}

#coosa .enjoy_index .list a:hover {
    text-decoration: none;
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

#coosa .enjoy_index .list::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 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec05_title {
    width: min(665px, 72.1%);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec05_title {
        width: 89.5%;
        margin: 0 auto;
    }
}

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

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

#coosa .enjoy_wrap li {
    position: relative;
}

#coosa .enjoy01_comment01 {
    width: 73.2%;
    margin: 0 0 0 auto;
}

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

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

#coosa .enjoy01_comment03 {
    width: 57.6%;
    margin: 0 0 0 auto;
    padding: 7.6% 0;
}

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

#coosa .enjoy01_comment04 {
    width: 57.6%;
    margin: 0 auto 0 0;
}

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


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

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

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

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

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

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

#coosa .enjoy01__bg03 {
    position: absolute;
    width: 9.4%;
    bottom: 0;
    right: 0;
    margin: 0 3.8% 3.3% 0;
}

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

#coosa .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) {
    #coosa .enjoy_life_wrap {
        padding: 2.5em 1.5em;
    }
}

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

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

#coosa .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) {
    #coosa .enjoy_life_ttl {
        position: absolute;
        display: block;
        width: 65%;
        margin: -3.7% auto 0;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* セクション06 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec06_title {
    width: 83.1%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec06_title {
        width: 100%;
        margin: 0 auto;
    }
}

#coosa .enjoy_image {
    width: 81%;
    margin: 3.2% auto 0;
}

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

#coosa .enjoy02_comment01 {
    width: 69.5%;
    margin: 0 0 0 auto;
}

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

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

#coosa .enjoy02_comment03 {
    width: 69.5%;
    margin: 0 0 0 auto;
    padding: 6.5% 0 0 0;
}

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

#coosa .enjoy02_comment04 {
    width: 69.6%;
    margin: 0 auto 0 0;
    padding: 7.6% 0 0 0;
}

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

#coosa .enjoy02_comment05 {
    width: 61.8%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 10.8% 0;
}


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

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

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

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

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

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

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

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



/* セクション07 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec07_title {
    width: 79.1%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec07_title {
        width: 91.9%;
        margin: 0 auto;
    }
}


#coosa .enjoy03_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

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

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

#coosa .enjoy03_comment03 {
    width: 77.1%;
    margin: 0 0 0 auto;
    padding: 7.2% 0 0 0;
}

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

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

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

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

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

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

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

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

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

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

/* セクション08 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec08_title {
    width: 76.1%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec08_title {
        width: 91.9%;
        margin: 0 auto;
    }
}


#coosa .enjoy04_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

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

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

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

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

#coosa .enjoy04_comment04 {
    width: 69%;
    margin: 0 auto 0 0;
    padding: 0 0 0 0;
}

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

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

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

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

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

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

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

@media screen and (max-width: 768px) {
    #coosa .enjoy04__bg02 {
        display: none;
    }
}

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

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


/* セクション09 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec09_title {
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec09_title {
        width: 100%;
        margin: 0 auto;
    }
}

#coosa .enjoy05_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

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

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

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

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

#coosa .enjoy05_comment04 {
    width: 69%;
    margin: 0 auto 0 0;
    padding: 0 0 0 0;
}

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

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

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

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

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

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

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

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

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

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

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

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


/* セクション10 */

#coosa #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% 100%, 0 100%);
}

@media screen and (max-width: 768px) {
    #coosa #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%);
    }
}

#coosa .sec10_title {
    width: 82%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #coosa .sec10_title {
        width: 99%;
        margin: 0 auto;
    }
}

#coosa .enjoy06_comment01 {
    width: 73.1%;
    margin: 0 0 0 auto;
}

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

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

#coosa .enjoy06_comment03 {
    width: 73.1%;
    margin: 0 0 0 auto;
    padding: 6.5% 0 0;
}

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

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

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


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

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

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

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

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

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

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


   /* 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;
  }