/*
Theme Name: CUBIC
Description: CUBIC Template
Author: 管理人
*/



body{
    
}
.in{
    width: 90%;
}
.pc{
    display: none;
}

/*----------*/
/*ヘッダー*/
/*----------*/
header{
    width: 95%;
    padding: 2% 0;
    top: 0;
    z-index: 11;
    margin: 4% auto 0;
}
#header{
    gap: 5%;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    
}
#header h1{
    width: calc(100% - 5% - 60px);
    max-width: 508px;
    z-index: 11;
}

/*ナビ*/
nav{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    padding: 100px 5% 80px;
    overflow: auto;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}
nav.active{
    opacity: 1;
    visibility:visible;
}
nav .menu-mane_menu-container ul{
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
}
.menu-mane_menu-container ul a{
    padding: 1em 1.5em;
}
/*ハンバーガーボタン*/
.navbutton{
    background-color: var(--blcolor);
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    padding: 15px;
    color: #fff;
    cursor: pointer;
    z-index: 11;
}
.navbutton > div{
    position: relative;
    width: 100%;
    height: 100%;
}
.navbutton span{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    
    height: 1px;
    width: 100%;
    margin: auto;
    transition: 0.5s;
    background-color: currentColor;
}
.navbutton span:nth-child(1){
    top: 0;
}
.navbutton span:nth-child(2){
    top: 0;
    bottom: 0;
}
.navbutton span:nth-child(3){
    bottom: 0;
}
.navbutton.active span:nth-child(1){
    transform: rotate(45deg);
    top: 14px;
}
.navbutton.active span:nth-child(2){
    left: 50%;
    opacity: 0;
}
.navbutton.active span:nth-child(3){
    transform: rotate(-45deg);
    bottom: 15px;
}


/*----------*/
/*フッター*/
/*----------*/





/*------------------*/
/*ホーム/
/*------------------*/

.home_contents{
    flex-wrap: wrap;
}
.content_title{
    font-size: calc(1.9375rem + ((1vw - 3.2px) * 1.9031));
}
.home_contenttexts{
    -webkit-order: 3;
    order: 3;
    width: 100%;
}
.home_content_message{
    font-size: calc(1.8125rem + ((1vw - 3.2px) * 4.1522));
}
.home_contenttexth{
    font-size: calc(1.625rem + ((1vw - 3.2px) * 2.4221));
    margin-bottom: 1em;
}
/*ホームBLUE-KITEとは*/
.home_01 .home_content_img{
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 61%, 0 61%);
    margin-bottom: -26.5%;
    z-index: -1;
    width: 36%;
}
.home_01 .home_content_img img{
    width: 100%;
}
.home_01 .home_content_message{
    margin-left: 0.5em;
}
/*ホーム協力店紹介*/
.wave_01 {
    top: -14px;
}
.home_02 .map_selects{
    position: relative;
}
.home02_img{
    width: 15%;
    left: 13%;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%);
    margin-top: -19%;
    margin-right: -24%;
    z-index: -1;
}
/*ホーム協力店募集*/
.home_03 .home_content_img{
    -webkit-order: -1;
    order: -1;
    transform: scaleX(-1);
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 61%, 0 61%);
    margin-bottom: -33.5%;
    z-index: -1;
    width: 41%;
    left: 7%;
}
.home_03 .home_content_img img{
    width: 100%;
}
/*ホームお知らせ*/
.home_news{
    -webkit-flex-direction: column;
    flex-direction: column;
}
.home_news .tab_botom{
    margin-bottom: 2em;
}
.home_news .tab_botom ul{
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
/*見出し*/
h2{
    font-size: calc(1.5625rem + ((1vw - 3.2px) * 1.1161));
}
h3{
    font-size: calc(1.1875rem + ((1vw - 3.2px) * 0.6696));
}
h4{
    
}
h5{
    
}

/*-----------------*/
/*協力店紹介*/
/*-----------------*/

/*協力店紹介ボタン*/
.map_selects{
    gap: 1em;
    container-type: inline-size;
    flex-wrap: wrap;
}
.map_selects form {
    width: calc(33% - 1em);
}
@container (width <= 500px) {
    .map_selects form:has(select){
        width: calc(51% - 1em);
    }
    .map_selects form:has(.search_box){
        width: 100%;
    }
}
/*協力店紹介一覧*/
.shop_list li{
    container-type: inline-size;
}
@container (325px <= width) {
    .shop_list ul li{
        display: block;
    }
    .shoplist_grid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
    .shop_list .shoplist_img {
        grid-column: span 2 / span 2;
    }
    .shop_list .shoplist_texts{
        grid-column: span 3 / span 3;
        grid-column-start: 3;
        display: block;
    }
    .shoplist_data,
    .shoplist_service{
        margin-bottom: 1em;
    }
}

/*協力店詳細*/
.single_shophed{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
    grid-gap: 1rem;
}
div:has(.shop_data){
    container-type: inline-size;
}
@container (480px >= width) {
    .shop_data :is(table,tbody,tr,th,td){
        display: block;
    }.shop_data table tr{
        border-bottom: none;
    }
}
.shop_message{
    container-type: inline-size;
}
@container (510px >= width) {
    .message_title,
    .message_text{
        width: 100%;
    }
    .message_text{
        border-left:none;
        border-top: 1px solid var(--blcolor);
    }
    
}

/*-----------------*/
/*固定ページ*/
/*-----------------*/
/*BLUE KITEとは*/
.text_box:has(.about01_list){
    container-type: inline-size;
}

@container (580px >= width) {
    .about01 dl {
        display: block;
    }
    .about01 dl dt{
        padding: 0;
        margin-bottom: 1em;
    }
    .about01 dl dd{
        padding: 1em 0 0;
        border-top: 1px solid var(--blblack_color);
        border-left: none;
    }
}

.text_box:has(.blue_kite_sticker){
    container-type: inline-size;
}

@container (520px >= width) {
    .blue_kite_sticker{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
        grid-gap: 1rem;
    }
    .blue_kite_sticker_img,
    .blue_kite_sticker_text{
        width: 100%;
    }
    
}
.text_box:has(.rigth_text){
    container-type: inline-size;
}
@container (500px >= width) {
    .rigthImag_box dl{
        display: block;
    }
    .rigthImag_box :is(.rigth_text,.tdImg){
        display: block;
        width: 100%;
    }
    .tdImg{
        margin-top: 1em;
    }
}