@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');


/* 全体 */

#contentsarea{
width: 100%;
margin: 0 auto;
font-family: "Sawarabi Gothic", sans-serif;
font-size: 17px;
line-height: 1.7em;
color: #525252;
}


/* スライダー */

#contentsarea .swiper-box1 .swiper-slide{
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: auto;
aspect-ratio: 5 / 2;
background-size: cover;
background-position: center;
position: relative;
}

#contentsarea .swiper-box1 .swiper-slide > div{
position: absolute;
top: 50%;
left: 0;
padding: 0 5%;
transform: translateY(-50%);
color: #fff;
line-height: 2em;
}

#contentsarea .swiper-box1 .swiper-slide h3{
font-size: 35px;
}

#contentsarea .swiper-box1 .swiper-slide a.dummy_btn{
display: inline-block;
margin: 1em 0 0;
padding: 0.5em 1em;
background: #eb7d2f;
border-radius: 5px;
color: #fff;
transition: 0.3s ease-in-out;
}

#contentsarea .swiper-box1 .swiper-slide a.dummy_btn:hover{
background: #fff;
color: #212529;
}

#contentsarea .swiper-box1 .swiper-pagination-bullet{
opacity: 0.8;
margin: 0 8px;
width: 10px;
height: 10px;
background: #fff;
}

#contentsarea .swiper-box1 .swiper-pagination-bullet-active{
opacity: 1;
background: #eb7d2f;
}


/* グローバルメニュー */

#contentsarea #submenu{
width: 100%;
z-index: 999;
}

#contentsarea #submenu.top_fixed{
left: 0;
position: fixed;
top: 0;
}

#contentsarea #submenu .inner{
padding-bottom: 0;
padding-top: 0;
margin: 0 auto;
max-width: 100%;
padding: 0 5%;
background: #eb7d2f;
}

#contentsarea #submenu .submenu_list{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

#contentsarea #submenu .submenu_list li{
border-left: 1px solid #fff;
width: 20%;
font-size: 14px;
background: #eb7d2f;
}

#contentsarea #submenu .submenu_list li:last-child{
border-right: 1px solid #fff;
margin-right: 0;
}

#contentsarea #submenu .submenu_list li a{
color: #fff;
display: block;
line-height: 50px;
text-align: center;
text-decoration: none;
}

#contentsarea #submenu .submenu_list li a:hover{
color: #212529;
}

#contentsarea #submenu .submenu_list li:has(a:hover){
background: #fff;
}


/* アバウト */

#contentsarea #about{
background: #000;
color: #d6d6d6;
padding: 50px 5%;
text-align: center;
}

#contentsarea #about > div{
content: "";
display: block;
width: 100%;
max-width: 650px;
margin: 0 auto;
height: auto;
aspect-ratio: 3 / 2;
background-size: cover;
background-position: center;
background-image: url('/features/allstores/gluboost/gluboost-mv.png')
}

#contentsarea #about h1{
color: #eb7d2f;
}

#contentsarea #about p{
margin-top: 1em;
}

#contentsarea #about p span{
color: #eb7d2f;
}


/* メイン */

#contentsarea .maincontents{
margin: 0 auto;
width: 100%;
max-width: 1100px;
padding: 0 5%;
}

#contentsarea .maincontents > div{
padding: 100px 0 50px;
margin-top: -50px;
border-bottom: 2px solid #eb7d2f;
}

#contentsarea .maincontents > div:last-child{
border-bottom: none;
}

#contentsarea .maincontents h2{
color: #eb7d2f;
}

#contentsarea .maincontents h2 span{
display: inline-block;
margin: 0 0 0 0.7em;
font-size: 60%;
color: #212529;
}

#contentsarea .maincontents p{
margin: 1em 0 0;
}

#contentsarea .maincontents span.mark{
display: block;
text-indent: -1em;
padding-left: 1em;
}

#contentsarea .maincontents span.mark:before{
content: "・";
color: #eb7d2f;
}

#contentsarea .maincontents span.notes{
display: block;
font-size: 0.8em;
text-indent: -0.5em;
padding-left: 0.5em;
}

#contentsarea .maincontents span.notes:before{
content: "*";
color: #eb7d2f;
}

#contentsarea .maincontents .product_list{
margin: 25px 0 0;
display: flex;
flex-wrap: wrap;
gap: 25px 2%;
}

#contentsarea .maincontents .product_list li{
width: 23.5%;
text-align: center;
font-weight: bold;
color: #212529;
}

#contentsarea .maincontents .product_list .product_photo{
content: "";
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
}


/* 動画 */

#contentsarea #video{
background: #000;
color: #d6d6d6;
padding: 50px 0;
}

#contentsarea .video_contents{
margin: 0 auto;
width: 100%;
max-width: 1100px;
padding: 0 5%;
}

#contentsarea .video_contents h2{
text-align: center;
color: #eb7d2f;
}

#contentsarea .video_contents h3{
color: #d6d6d6;
}

#contentsarea .video_contents > div{
padding: 50px 0;
border-bottom: 1px solid #ced4da;
}

#contentsarea .video_contents > div:last-child{
border-bottom: none;
}

#contentsarea .video_contents .swiper-box2,
#contentsarea .video_contents .swiper-box3,
#contentsarea .video_contents .swiper-box4,
#contentsarea .video_contents .swiper-box5,
#contentsarea .video_contents .swiper-box6{
position: relative;
margin: 25px 0 0;
}

#contentsarea .video_contents .swiper{
width: calc(100% - 100px);
margin: 0 auto;
}

#contentsarea .video_contents .swiper iframe{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}

#contentsarea .video_contents .swiper p{
margin: 1em 0 0;
color: #9a9898;
font-size: 15px;
}

#contentsarea .video_contents .swiper-button-prev,
#contentsarea .video_contents .swiper-button-next{
width: 30px;
height: 30px;
top: calc(50% - 15px);
background-image: none;
}

#contentsarea .video_contents .swiper-button-prev{
left: -7px;
}

#contentsarea .video_contents .swiper-button-next{
right: -7px;
}

#contentsarea .video_contents .swiper-button-prev::after,
#contentsarea .video_contents .swiper-button-next::after{
position: absolute;
width: 15px;
height: 15px;
border-top: 1px solid #9a9898;
border-right: 1px solid #9a9898;
content:'';
}

#contentsarea .video_contents .swiper-button-prev:hover::after,
#contentsarea .video_contents .swiper-button-next:hover::after{
opacity: 0.8;
}

#contentsarea .video_contents .swiper-button-prev::after{
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

#contentsarea .video_contents .swiper-button-next::after{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


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

/* SP全体 */

#contentsarea{
font-size: 15px;
}


/* SPスライダー */

#contentsarea .swiper-box1 .swiper-slide h3{
font-size: 30px;
}

#contentsarea .swiper-box1 .swiper-slide > div p{
line-height: 1.5em;
margin: 0.5em 0 0;
}


/* SPグローバルメニュー */

#contentsarea #submenu .submenu_list li{
font-size: 13px;
}


/* SPアバウト */

#contentsarea #about > div{
width: 80%;
}

#contentsarea #about h1{
font-size: 30px;
line-height: 1.2em;
}


/* SPメイン */

#contentsarea .maincontents .product_list li{
width: 32%;
}


/* SP動画 */

#contentsarea .video_contents h3{
font-size: 22px;
}
}


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

/* SP_S全体 */

#contentsarea{
font-size: 14px;
}


/* SP_Sスライダー */

#contentsarea .swiper-box1 .swiper-slide h3{
font-size: 26px;
}

#contentsarea .swiper-box1 .swiper-slide a.dummy_btn{
margin: 0.5em 0 0;
padding: 0.2em 0.8em;
}


/* SP_Sグローバルメニュー */

#contentsarea #submenu .inner{
padding: 0;
}

#contentsarea #submenu .submenu_list{
flex-wrap: wrap;
}

#contentsarea #submenu .submenu_list li{
width: calc(100% / 3);
border-right: none!important;
}

#contentsarea #submenu .submenu_list li:nth-child(3n+1){
border-left: none!important;
}

#contentsarea #submenu .submenu_list li:nth-child(n+4){
border-top: 1px solid #fff;
}

#contentsarea #submenu .submenu_list li a{
line-height: 1em;
padding: 1em 0;
}


/* SP_Sアバウト */

#contentsarea #about h1{
font-size: 26px;
}


/* SP_Sメイン */

#contentsarea .maincontents h2{
font-size: 26px;
}

#contentsarea .maincontents > div{
padding: 129px 0 50px;
margin-top: -79px;
}

#contentsarea .maincontents .product_list li{
width: 49%;
}


/* SP_S動画 */

#contentsarea .video_contents h2{
font-size: 26px;
}

#contentsarea .video_contents h3{
font-size: 20px;
}

#contentsarea .video_contents .swiper p{
font-size: 13px;
}

}