﻿@charset "utf-8";
.c-3{color: #1d6690;}
.c-4{color: #a1c7e0;}
.c-red{color: #d91a1a;}


.bg-3{background-color: #1d6690;}
.pd-0{padding-bottom: 0 !important;}

.bgg-1{background: url("assets/images/cl/bg-02.png") repeat center center / contain;}


/*------INDEX------*/
/*cl_sec*/
.cl_main .sec{padding: 100px 0;}
.cl_sec-head{text-align: center; margin-bottom: 80px;}
.cl_secsec-title{font-size: 1.8rem; font-weight: bold; margin-bottom: 5px;}

/*mv*/
.cl-mv{text-align: center; padding: 60px 0; position: relative;}
.cl-video{margin-top: 60px; position: relative;}

/*slide*/
.cl-swiper{padding-bottom: 50px;}
.cl-swiper .item-meta{font-weight: bold; position: relative; gap: 15px;}
.cl-swiper .item-meta::after{background: url("assets/images/cl/line-01.png") no-repeat center center / contain; display: block; content: ""; width: 250px; height: 4px;}
.cl-swiper .item-num{font-size: 2.8rem; white-space: nowrap;}
.cl-swiper .item-title{font-size: 1.4rem;white-space: nowrap;}
.wrp-cl_swiper{padding-left: 20px;}
.txt-01{min-width: 80px; margin-right: 25px;}
.ico-01{bottom: 10px; right: 11%;}
.ico-02{top: 25px; right: 9%;}
.cl-menulist{grid-template-columns: repeat(2, auto); gap: 40px 20px; margin-bottom: 80px;}

/*price*/
.ico-03{top: 0; width: 15%;}
.wrp-cl_price{padding-top: 100px;}
.cl_price-top{width: 75%;}
.txt-02{margin-right: 15px;}
.cl_price-txt{margin: 20px 0;}
.cl_price-txt_2{background-color: #f4f4f4; padding: 25px; border-radius: 25px;}

/*cl_price-swiper*/
.cl_price-swiper{margin-top: 80px;}
.wrp-cl_price-swiper-btn{justify-content: center; gap: 30px; margin-top: 50px;}
.cl_price-swiper .swiper-button-next,
.cl_price-swiper .swiper-button-prev {
  width: 54px;  /* 画像のサイズに合わせて調整 */
  height: 19px;
  position: relative;
  transition: all .5s 0s ease;
  left: 0;
}
.cl_price-swiper .swiper-button-next::after,
.cl_price-swiper .swiper-button-prev::after {
  content: none;
}
.cl_price-swiper .swiper-button-prev {
  background: url('assets/images/cl/arrow_l.png') no-repeat center center / contain;
}
.cl_price-swiper .swiper-button-next {
  background: url('assets/images/cl/arrow_r.png') no-repeat center center / contain;
}
.cl_price-swiper .swiper-button-prev:hover{left: -30px;}
.cl_price-swiper .swiper-button-next:hover{left: 30px;}

/*maintenance*/
.ico-05{top: 15%; right: 0;}
.ico-09{top: 50%; left: 3%;}
.mainte-item{margin-bottom: 50px;}
.mainte-text{font-size: 1.2rem; line-height: 1.8; text-align: center;}
.wrp-mainte_box{margin: 30px 0;}
.mainte-box{background-color: #fff; padding: 50px; border-radius: 25px;}
.mainte-imges{gap: 20px; font-size: 2rem; justify-content: center;}
.mainte-texts{align-items: flex-start; margin-top: 40px;}
.mainte-texts-title{font-size: 1.4rem; font-weight: bold;}
.mainte-texts-title i{margin-right: 10px; font-size: 0.6rem;}
.mainte-texts-list{width: 60%;}
.mainte-texts-list li{margin-bottom: 10px; position: relative; border-bottom:2px solid  #e3e3e3; padding-bottom: 10px; margin-bottom: 10px;}
.mainte-texts-list li:last-child{border-bottom: none;}

/*baby*/
.ico-06{top: -60px; right: 30%; width: 100px; }
.baby-img_1{margin-bottom: 40px;}
.baby-img_2{margin: 40px 0; justify-content: center; gap: 80px;}
.wrp-baby_price{padding:150px 0 100px 0;}
.baby-price{justify-content: center;}
.baby_price-list{width: 60%; margin-left: 50px;}
.baby_price-list li{font-weight: bold; background-color: #fff; padding: 20px; border-radius: 15px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;}
.mainte-imges.ver-baby{position: relative; bottom: -80px;}

/*faq*/
.wrp-faq{margin-bottom: 80px;}
/* アコーディオン全体 */
.faq-box{ border-top: 1px solid rgba(255,255,255,0.4); width: 80%;}
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.4); }

/* 質問部分 */
.faq-button { width: 100%; background: none; border: none; padding: 25px 0; color: #fff; font-size: 18px; font-weight: 500; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.3s; }
.faq-button:focus { outline: none; }

/* アイコン (+/-) */
.faq-icon { position: relative; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: #fff; transition: 0.3s; }
.faq-icon::before { width: 100%; height: 2px; top: 9px; left: 0; } /* 横線 */
.faq-icon::after { width: 2px; height: 100%; top: 0; left: 9px; } /* 縦線 */

/* 開いている時のアイコン（縦線を消してマイナスにする） */
.faq-button[aria-expanded="true"] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

/* 回答部分（吹き出し） */
.faq-body { padding: 0 0 30px 0; }
.faq-balloon { background: #f5f5f5; color: #333; padding: 30px; border-radius: 30px; font-size: 15px; line-height: 2; position: relative; }

.btn-3.ver-big{width: 100%; padding: 35px 0;}
.btn-3.ver-big::after{background-image: url("assets/images/cl/arrow_002.png"); width: 70px; height: 19px;}

/*------ARCIVE------*/
.wrp-shops_head{padding: 30px 0 100px;}
.wrp-shops_head .toggle-container{bottom: 20px;}
.shops-head{font-weight: bold; justify-content: center; margin-bottom: 50px;}
.shops-head .item-title{font-size: 2rem; margin-bottom: 15px;}
.shops-head .item-sub{font-size: 1.4rem; color: #1d6690;}
.shops-btns .btn{width: 45%;}
.wrp-shops_list{background-color: #f0f0f0;}
.shops-search{padding: 20px 0; margin-bottom: 50px;}
.ul-search{display: flex; align-items: center; gap: 20px;}
.ul-search .nav-item a{color: #1d6690; font-size: 1.2rem; font-weight: bold; position: relative;}
.ul-search .nav-item a::after{display: block; content: ""; width: 100%; height: 1px; border-bottom: 2px solid #1d6690; position: absolute; bottom: -5px; left: 0;}
.ul-search .mypin { margin-right: 10px; }

.mc-btn-location { background-color: #1e5687; color: white; border: none; padding: 12px 25px; border-radius: 50px; font-size: 16px; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.mc-btn-location:hover { background-color: #154066; transform: translateY(-2px); }
.mc-btn-location:active { transform: translateY(0); }
.mc-icon-pin { position: relative; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background-color: white; flex-shrink: 0; margin-top: -4px; }
.mc-icon-pin::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1e5687; }
.mc-loader { margin-top: 15px; font-size: 14px; color: #1e5687; font-weight: bold; }

/*shoplist*/
.shops-list{padding-bottom: 50px;}
.mc-shop-card {font-weight: bold; margin-bottom: 25px; font-size: 16px; background: white; border-radius: 20px; width: 100%; padding: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: var(--mc-main-blue); position: relative; box-sizing: border-box; }
.mc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.mc-brand-section { display: flex; gap: 15px; }
.mc-logo-box { background-color: var(--mc-main-blue); color: white; padding: 5px; border-radius: 4px; text-align: center; font-weight: bold; line-height: 1.2; width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: center; font-size: 20px; flex-shrink: 0; box-sizing: border-box; }
.mc-store-info h2 { margin: 0; font-size: 14px; font-weight: normal; color: var(--mc-main-blue); }
.mc-store-name { font-size: 24px; font-weight: bold; margin-top: 5px; display: block; color: var(--mc-main-blue);}
.mc-address-info { text-align: right; color: var(--mc-text-gray); font-size: 14px; line-height: 1.6; display: flex; align-items: center; gap: 10px;}
.mc-address-info .span-zip { display: block; }
.mc-map-link { color: var(--mc-main-blue); text-decoration: none; padding: 0 4px; font-size: 16px; font-weight: bold; }
.mc-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; }
.mc-info-row { display: flex; align-items: center; border-bottom: 1px solid var(--mc-border-gray); padding: 8px 0; }
.mc-label { border: 1.5px solid var(--mc-main-blue); border-radius: 20px; font-weight: bold; width: 80px; text-align: center; padding: 2px 0; margin-right: 15px; flex-shrink: 0; box-sizing: border-box; }
.mc-value { color: var(--mc-text-gray); }
.mc-value-multi { line-height: 1.4; }
.mc-arrow-icon { position: absolute; bottom: 25px; right: 30px; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent var(--mc-main-blue); }

/*laundory*/
.main-laundry .pin-solid,
.main-laundry .mc-logo-box{background-color: var(--mc-main-green);}

.main-laundry .cl-label,
.main-laundry .mc-map-link,
.main-laundry .pin-outline,
.main-laundry .mc-label{border-color: var(--mc-main-green);}

.main-laundry .cl-brand-sub,
.main-laundry .cl-map-link,
.main-laundry .cl-label,
.main-laundry .mc-store-name,
.main-laundry .mc-map-link,
.main-laundry .mc-shop-card,
.main-laundry .ul-search .nav-item a,
.main-laundry .mc-store-info h2,
.main-laundry .shops-head .item-sub{color: var(--mc-main-green);}
.main-laundry .mc-arrow-icon{ border-color: transparent transparent transparent var(--mc-main-green);}

.mc-logo-box .t1{font-size: 20px;}
.mc-logo-box .t2{font-size: 14px; letter-spacing: -2px;}

/*------SINGLE LAUNDRY------*/
.wrp-shopmeta{position: relative; padding-bottom: 20px;}
.wrp-shopmeta .toggle-container{bottom: -25px;}
.shop-head{margin-bottom: 80px;}
.shop-sec_price{margin-bottom: 80px;}
.shop-sec_price .wrp-cl_price{padding-top: 50px;}

.cl-container {text-align: center; background: white;font-weight: bold; padding-bottom: 100px;}
.cl-top-illustration { margin-bottom: 25px; }
.cl-brand-sub { font-size: 14px; font-weight: bold; color: var(--mc-main-blue); margin-bottom: 5px; display: block; }
.cl-store-name { font-size: 26px; font-weight: bold;}
.cl-map-wrapper { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 15px; }
.cl-map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.cl-map-img { width: 100%; display: block; }
.cl-address-row { display: flex; align-items: center; margin:0 0 30px; padding: 0 5px; gap: 15px;}
.cl-map-link { color: var(--mc-main-blue); text-decoration: none; font-weight: bold; }
.cl-details-section { display: flex; align-items: flex-start; text-align: left; margin-bottom: 40px; }
.cl-info-table {flex: 1; max-width: 500px;}
.cl-info-row { display: flex; align-items: center; border-bottom: 1px solid var(--cl-gray); padding: 10px 0; }
.cl-label { border: 1px solid var(--mc-main-blue); color: var(--mc-main-blue); border-radius: 15px; font-size: 14px; width: 70px; text-align: center; padding: 2px 0; margin-right: 15px; flex-shrink: 0; font-weight: bold; }
.cl-value { font-size: 16px; }
.cl-icon-side { display: flex; gap: 20px; padding-left: 40px; }
.cl-status-icon { width: 47px; height: 46px; }
.cl-nav-area { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 20px; }
.cl-tab-icons { display: flex; gap: 40px; margin-bottom: 10px; }
.cl-icon-wrapper { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; color: var(--mc-main-blue); border-bottom: 2px solid var(--mc-main-blue); cursor: pointer; }
.cl-pin-solid, .cl-pin-outline { position: relative; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); flex-shrink: 0; }
.cl-pin-solid::after, .cl-pin-outline::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cl-pin-solid { background-color: var(--mc-main-blue); }
.cl-pin-solid::after { background-color: white; }
.cl-pin-outline { border: 2px solid var(--mc-main-blue); background-color: transparent; box-sizing: border-box; }
.cl-pin-outline::after { background-color: var(--mc-main-blue); }
.cl-icon-text { font-weight: bold; font-size: 15px; }
.cl-back-btn { background: #333; color: white; width: 100%; max-width: 400px; padding: 15px; border-radius: 40px; text-decoration: none; font-size: 14px; display: flex; align-items: center; justify-content: center; position: relative; }
.cl-back-btn::before { content: '←'; position: absolute; left: 20px; font-size: 20px; }

/*------PC small------*/
@media only screen and (max-width: 1580px) {


}

/*------PAD pro------*/
@media only screen and (max-width: 1050px) {

}

  
/*------PAD------*/
@media only screen and (max-width: 880px) {

}

/*------Sm------*/
@media only screen and (max-width: 767px) {
    /*------HEADER------*/
    .head-top{position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; padding: 15px 0; box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.2)}
    .clheader-logo .logo-a{width: 85px;}
    .clheader .head-nav{background-color: rgba(29, 102, 144, 0.9); padding-bottom: 60px;}
    .clheader .head-nav .switch-field label{color: #1d6690;}
    .clheader .head-nav .switch-selection{background-color: #1d6690;}
    .ul-cl_smnav{grid-template-columns: repeat(2, auto); gap:10px 0;}
    .ul-cl_smnav .nav-link{color: #fff; font-size: 1rem; font-weight: bold; padding:0 10px;}

    /*offcanvas*/
    .m-toggle.ver-cl{background-color: #303c41; border:1px solid #303c41;}
    .m-toggle.ver-cl .icon-bar,
    .m-toggle.ver-cl.is-open .icon-bar{background-color: #fff;}
    
    /*------INDEX------*/
    .cl_main .sec{padding: 60px 0;}
    .cl-mv{padding: 0 0 40px;}
    .wrp-cl_swiper{display: block;}
    .txt-01{margin: 0 0 30px;}
    .wrp-cl_swiper .swiper{overflow: hidden;}
    .wrp-cl_swiper .swiper-pagination{bottom: 104%; display: flex; justify-content: flex-end; padding: 15px;}
    .ico-01{width: 55px; right: 15%;}
    .ico-02{width: 40px;}
    .cl-menulist{grid-template-columns: 100%; gap: 20px; text-align: center;}
    .ico-03{width: 40%;}
    .btn-3.ver-big{padding: 25px 0; width: 90%;}

    .wrp-cl_price{display: block; padding-top: 50px;}
    .cl_price-top{width: 100%;}
    .txt-02{text-align: right; margin: 0 20px 50px 0;}
    .ico-05{top: -1%; width: 25%;}
    .wrp-mainte_box{margin: 50px 0;}
    .mainte-imges{flex-direction: column; text-align: center;}
    .mainte-imges i{transform: rotate(90deg);}
    .mainte-texts{flex-direction: column;}
    .mainte-texts-list{width: 100%; margin: 20px 0 0;}
    .ico-06{top: -40px; right: 10%; width: 70px;}
    .baby-img_2{gap: 20px; margin-bottom: 0;}
    .baby-img_2 img{width: 30%;}
    .baby-price{flex-direction: column;}
    .baby_price-img{text-align: center; margin-bottom: 30px;}
    .baby_price-list{width: 100%; margin-left: 0;}
    .wrp-faq{flex-direction: column; }
    .txt-06-img{margin-bottom: 40px; width: 15%;}
    .faq-box{width: 100%;}

    /*------SINGLE------*/
    .shop-head{margin-bottom: 40px;}
    .cl-icon-side{padding-left: 15px; gap: 10px;}
    .mc-label,
    .cl-label{font-size: 12px; margin-right: 10px; }
    .mc-logo-box{width: 55px; height: 55px; font-size: 14px;}
    .mc-logo-box .t1{font-size: 14px;}
    .mc-logo-box .t2{font-size: 10px;}
    .mc-value,
    .cl-value{font-size: 14px;}
    .cl-address-row{gap: 10px; flex-direction: column; text-align: left; align-items: flex-start; gap: 0;}
    .cl-store-name{font-size: 22px;}

    /*------ARCIVE------*/
    .wrp-shops_head{padding: 0 0 50px;}
    .shops-head{margin-bottom: 20px;}
    .shops-head .item-title{font-size: 1.1rem;}
    .shops-head .item-sub{font-size: 0.9rem;}
    .shops-head .item-img{width: 45%;}
    .mc-header{flex-direction: column; align-items: center; gap: 15px;}
    .mc-details-grid{grid-template-columns: 100%; gap: 15px;}
    .ul-search{gap: 20px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 25px;}
    .ul-search .nav-item a{font-size: 14px;}
    .shops-search{flex-direction: column; margin-bottom: 20px;}
    .btn-4.btn-lg, .btn-6.btn-lg, .btn-5.btn-lg{width: 47%; padding: 15px 0; font-size: 1.0rem;}
    .wrp-shops_head .toggle-container{bottom: 15px;}



    /*------FOOTER------*/


}

/*------Sm small------*/
@media only screen and (max-width: 350px) {
    

}

