/*========================*/
/*========================*/
/*========================*/
/*========PC========*/
/*========================*/
/*========================*/
/*========================*/
html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}
*{
  margin: 0;
  padding: 0;
  line-height: 1em;
}
li{
  list-style:none;
}

a{
  text-decoration: none;
}

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  margin: 0;
}
/*フェードインアニメーション*/
.fadein {
  opacity : 0;
  transform : translate(0, 10px);
  transition : all 1s;
}
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
/*背景色*/
.bg_black{
  background-color: #000;
}
/*font*/
.league_gothic{
  font-family: 'League Gothic', sans-serif;
}

/*color*/
.color_white{
  color: #fff!important;
}
.color_orange{
  color: #edb50d!important;
}

.common_container{
  padding: 0px 80px 0px;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/*==HEADER==*/
/*** ボタン全体 ***/
.menu-btn{
  display: block;
  position: fixed;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50px;
  background-color: #f2bf0d;
  right: 2%;
  top: 2%;
}

/*** ボタンの三本線（共通） ***/
.menu-btn span{
  position: absolute;
  width: 40%; /*線の長さ*/
  height: 2px; /*線の太さ*/
  left: calc(50% - 40% / 2); /*中央から長さの半分を引く*/
  background: #000; /*線の色*/
  transition: .4s;
}

/* 順に上・中・下の線 */
.top-bar{
  top: calc(35% - 2px / 2); /*上から35%の位置*/ 
}
.center-bar{
  top: calc(50% - 2px / 2); /*上から50%の位置*/
}
.under-bar{
  top: calc(65% - 2px / 2); /*上から65%の位置*/
}


/** クリック後(✔が入った後)の線 **/
/*上の線*/
#open:checked ~ .menu-btn > .top-bar {
  top: calc(50% - 2px / 2); /*中央*/
  transform: rotate(45deg); /*45度回転*/
}
/*中の線*/
#open:checked ~ .menu-btn > .center-bar{
  opacity: 0;/*真ん中の線は透過*/
}
/*下の線*/
#open:checked ~ .menu-btn > .under-bar{
  top: calc(50% - 2px / 2); /*中央*/
  transform: rotate(-45deg); /*-45度回転*/
}

/*** チェックボックスは非表示に ***/
#open{
  display: none;
}


/*** メニュー内容 ***/
.inner-menu{
  position: fixed; /*画面固定*/
  top: 0;
  right: 0;
  width: 700px; /*全画面*/
  height: 100%;
  box-sizing: border-box;
  padding: 160px 100px 0;
  background: #eee; /*背景*/
  opacity: 0; /*透明*/
  visibility: hidden; /*標準で非表示*/
  transition: .5s;
  z-index: 99; /*ボタンより背面(小さい値)*/
  overflow-y: scroll; /*スクロール可*/
  text-align: center;
}
/*リスト*/
.inner-menu ul{
  list-style: none;
  padding-left: 0;
  border-bottom: 1px dashed;
  padding-bottom: 8px;
  margin-bottom: 42px;
}
.inner-menu ul li{
  padding: 0 0 24px 0;
}
/*リンク*/
.inner-menu a{
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.inner-menu li a{
  transition: color 1s;
}
.inner-menu li a:hover{
  transition: color .2s cubic-bezier(.22,1,.36,1);
  color: #f2bf0d;
}
.menu_contact{}
.menu_contact .contact_item{
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 0 32px 0;
}
.menu_contact .contact_item .contact_desc{
  width: 100%;
  margin: 0 3% 0 0;
}
.menu_contact .contact_item .contact_desc:last-child{
  margin: 0 0 0 0;
}
.menu_contact .contact_item .contact_desc a{
  background-color: #f2bf0d;
  border-radius: 16px;
  display: block;
  width: 100%;
  transition: 0.3s ease-out;
}
.menu_contact .contact_item .contact_desc a:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}

.menu_contact .contact_item .contact_desc a .contact_icon{
  width: 72px;
  margin: 0 auto;
}
.menu_contact .contact_item .contact_desc a .contact_icon img{
  width: 100%;
}
.menu_contact .contact_item .contact_desc a .league_gothic{
  font-size: 2rem;
  padding: 0 0 4px 0;
  letter-spacing: 0.04em;
}
.menu_contact .contact_item .contact_desc a .contact_jp{
  font-weight: bold;
  font-size: 1.8rem;
}
.menu_contact .tel_number{
  font-size: 3rem;
  font-weight: bold;
}
.menu_contact .tel_number a{
  font-size: 5.2rem;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  pointer-events: none;
}
.menu_contact .tel_number a span{
  font-weight: bold;
  font-size: 3.2rem;
  padding: 0 10px 2px 0;
}

/*** クリックで(✔が入ったら)メニューを表示 ***/
#open:checked ~ .inner-menu{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.inner-menu a .menu_en{
  font-size: 5.2rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
.inner-menu a .menu_jp{
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: bold;
}










/*==FOOTER==*/
#page_top{
  width: 70px;
  height: 70px;
  position: fixed;
  right: 2%;
  bottom: 2%;
  background: #000000;
  border-radius: 50%;
  transition: 0.3s ease-out;
}
#page_top:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}
#page_top a{
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  text-decoration: none;
  letter-spacing: 0.3em;
}


#page_top a::before{
  display: inline-block;
  content: "";
  position: absolute;
  width: 2px;
  height: 32px;
  top: -15px;
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
}
#page_top a::after{
  content: 'TOP';
  font-size: 2.5rem;
  color: #fff;
  position: absolute;
  top: 32px;
  bottom: 0px;
  right: 0;
  left: 4px;
  margin: auto;
  text-align: center;
}



/*====*/
/*==トップページ==*/
/*====*/

/*ページトップ 会社名*/
.company_name{
  font-size: 2.7rem;
  color: #aaa;
  letter-spacing: 0.42em;
  text-align: center;
  margin: 32px 0 80px 0;
  animation: flash 0.7s linear infinite;
}
@keyframes flash {
  0%,25%,50%,80%,100%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  65%{
    opacity: 1;
  }
}

/*メインビジュアル*/
.main_visual{ 
  position: relative;
}
.main_visual .motto{
  position: relative;
  width: 90%;
  max-width: 1030px;
  height: 250px;
  background-image: url(../img/main_visual_title.webp);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.main_visual .motto img{
  width: 216px;
  position: absolute;
  right: -5%;
  bottom: 0;
}
.main_visual .tiger_img{
  position: relative;
  top: -100px;
  z-index: -1;
  max-width: 1070px;
  height: 1000px;
  background-image: url(../img/tiger.webp);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
}
/*メインビジュアルアニメーション*/
.tiger_img {
  animation: fadein-top 2s ease-out forwards;
}

@keyframes fadein-top {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.main_visual .motto{
  opacity: 0;
  animation: fadein 6s ease forwards;
  animation-delay: 2s;
}
@keyframes fadein {
  100% {  opacity: 1;}
}

/*スクロールアニメーション*/
.scroll {
  position: absolute;
  text-align:center;
  color: #fff;
  left: 0;
  right: 0;
  bottom: 560px;
}

.scroll::after {
  animation: scroll 3.5s infinite;
  display: inline-block;
  content: "";
  position: absolute;
  width: 1px;
  height: 200px;
  top: 90px;
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
}
.scroll .text{
  font-size: 3.0rem;
  margin: 0;
}
.scroll .text span{
  display: block;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0 0 16px 0;
}
.scroll .text .scroll_en{
  font-size: 4.0rem;
}

@keyframes scroll {
  0% {
    transform:translateY(0px);
    opacity: 0;
  }
  
  40% {
    opacity: 1;
  }
  
  80% {
    transform:translateY(30px);
    opacity: 0;
  }
  
  100% {
    opacity: 0;
  }
  
}

/*虎渓三笑*/
.top_about{}
.top_about .motto_main{

}

.flex-container{
  display: none;
}








.top_about .about_motto{
  color: #e6ab0d;
  padding: 0 0 44px 0;
}
.top_about .about_motto h2{
  font-size: 11.0rem;
  letter-spacing: 0.2em;
  display: inline-block;
  padding: 0 0 16px 0;
}
.top_about .about_motto p{
  font-size: 4.1rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  display: inline-block;
}
.top_about .motto_sidebar{
  color: #fff;
  font-size: 0;
  font-weight: bold;
  padding: 24px 0;
  margin: 0 0 96px 0;
  background-image: linear-gradient(to right, #fff 8px, transparent 8px);
  background-size: 18px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.top_about .top_dash{
  padding: 2px 0 0px 0;
  background-image: linear-gradient(to right, #fff 8px, transparent 8px);
  background-size: 18px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  margin: 0;
}
.top_about .motto_sidebar p{
  margin: 0;
  font-size: 4.1rem;
  display: inline-block;
  letter-spacing: 0.15em;
  line-height: 1.6;
}
.top_about .about_sidebar{
  font-size: 2.4rem;
  letter-spacing: 0.3em;
}
.top_about .about_sidebar p{
  color: #fff;
  line-height: 2.0;
}
.top_about .about_sidebar p.catchcopy{
  margin: 56px 0;
  padding: 0px 10px;
  display: inline-block;
  font-weight: bold;
  background-color: #fff;
  color: #0f0f04;
}
.top_about .about_sidebar p span {
  display: inline-block;
}

/*社内イメージ*/
.about_img{
  position: relative; /* 中央寄せしたい要素の親タグにrelativeをつける */
  overflow: hidden;  /* はみ出した部分は表示しないようにする */
  height: 930px; /* 高さは固定値を入れる */
}
.about_img img{
  position: absolute;
  top: 50%; /* トップを基準に中央配置 */
  left: 50%; /* 左を基準に中央配置 */
  width: auto;
  height: 930px;
  transform: translate(-50%, -50%);
}

/*BUSINESS*/
.top_business{
  background-image: url(../img/business_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #ecaf0b;
  padding: 180px 0 180px 0;
}
.business_wrap{}

/*title common*/
.title{
  text-align: center;
  padding: 0 0 96px 0;
}
.title h2{
  font-size: 13rem;
  letter-spacing: 0.1em;
  line-height: 0.8;
  padding: 0 0 50px 0;
  font-weight: normal;
}
.title p{
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  font-weight: normal;
}

.business_wrap ul,
.contact_wrap ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.business_wrap ul:before,
.contact_wrap ul:before{
  content: "";
  display: block;
  width: 21%;
  order: 1;
  height: 0;
}
.business_wrap ul li,
.contact_wrap ul li{
  width: 21%;
}
.business_wrap ul li:last-child,
.contact_wrap ul li:last-child{
  margin: 0;
}
.business_wrap ul li a{
  min-width: 100%;
  background-color: #171717;
  display: inline-block;
  padding: 64px 0 90px 0;
  border-radius: 8px;
  position: relative;
  transition: 0.3s ease-out;
}
.business_wrap ul li a:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}
.business_wrap ul li a::after,
.contact_wrap ul li a::after{
  display: inline-block;
  content: "";
  position: absolute;
  width: 2px;
  height: 60px;
  bottom: -30px;
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
}
.business_wrap ul li a.private,
.contact_wrap ul li a.private{
  pointer-events: none;
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%);
  opacity: 75%;
}
.business_wrap ul li a.private::after,
.contact_wrap ul li a.private::after{
  background: #404040;
}
.business_wrap ul li a .business_icon,
.contact_wrap ul li a .contact_icon{
  width: 75px;
  margin: 0 auto;
  padding: 0 0 40px 0;
}
.business_wrap ul li a .business_icon img,
.contact_wrap ul li a .contact_icon img{
  width: 100%;
}
.business_wrap ul li a .business_name,
.contact_wrap ul li a .contact_name{
  color: #fff;
  text-align: center;
}
.business_wrap ul li a .business_name p,
.contact_wrap ul li a .contact_name p{
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  padding: 0 0 30px 0;
}
.business_wrap ul li a .business_name h3,
.contact_wrap ul li a .contact_name h3{
  font-size: 2.4rem;
  letter-spacing: 0.26em;
  font-weight: normal;
}
/*BUSINESS 1300px*/
@media screen and (max-width: 1300px) {
  .business_wrap ul li,
  .contact_wrap ul li {
    width: 48%;
    margin-bottom: 40px;
  }
}
/*BUSINESS 960px*/
@media screen and (max-width: 959px) {
  .business_wrap ul li,
  .contact_wrap ul li{
    width: 48%;
    margin-bottom: 40px;
  }
}

/*CONTACT*/
.top_contact{
  background-color: #151515;
  padding: 180px 0 180px 0;
}
.contact_wrap ul li a{
  min-width: 100%;
  background-color: #e6ab0d;
  display: inline-block;
  padding: 64px 0 90px 0;
  border-radius: 8px;
  position: relative;
  transition: 0.3s ease-out;
}
.contact_wrap ul li a:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}


/*COMPANY*/
.top_company{
  background-image: url(../img/company_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #111111;
  padding: 180px 0 180px 0;
}
.company_wrap{
  padding-top: 200px;
}
.company_info{
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.company_info .info_list{
  position: relative;
  width: 60%;
}
.company_info .info_list .table_tr{
  padding: 0 0 40px 0;
}
.company_info .info_list .table_tr .table_th{
  position: relative;
  z-index: 1;
  text-align: center;
  width: 170px;
  color: #fff;
  padding: 11px 0;
  font-size: 2.0rem;
  letter-spacing: 0.3em;
  font-weight: bold;
  display: inline-block;
}
.company_info .info_list .table_tr .table_th::before{
  transform: skewX(-20deg);
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: -1;
  background-color:#000000;
}
.company_info .info_list .table_tr .table_th h3{
}
.company_info .info_list .table_tr .table_td{
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  padding: 0 0 0 40px;
  display: inline-block;
}
.company_info .map{
  position: relative;
  width: 40%;
}
.company_info .map .kagawa{
}
.company_info .map .kagawa img{
  width: 100%;
}
/*COMPANY 1300px*/
@media screen and (max-width: 1300px) {
.company_info{
  -webkit-justify-content: center;
  justify-content: center;
}
.company_info .info_list{
  width: 100%;
}
.company_info .map{
  width: 60%;
}


}

/*COMPANY 932px*/
@media screen and (max-width: 932px) {
  .company_info {
    display: block;
  }
  .company_info .info_list{
    width: 100%;
  }
  .company_info .info_list .table_tr .table_th {
    display: block;
    margin: 0 auto 20px auto;
  }
  .company_info .info_list .table_tr .table_td {
    display: block;
    padding: 0 0 0 0;
    text-align: center;
  }
  .company_info .map {
    width: 100%;
}
}

/*========*/
/*====【PAGE】CARWASH====*/
/*========*/
.bg_bubble{
  background-image: url(../img/bg_bubble.webp);
  width: 100%;
  background-size: cover;
}
.carwash_wrap{
  padding: 0 0 100px 0!important;
}
.carwash_intro{
  padding: 0 0 0 0;
}
.carwash_intro .carwash_img{
  width: 100%;
  margin: 0 auto;
  padding: 0 0 72px 0;
  z-index: 2;
}
.carwash_intro .carwash_img img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 15px;
}
.carwash_intro .carwash_sidebar{}
.carwash_intro .carwash_sidebar .sidebar_block{
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  padding: 0 0 40px 0;
}
.carwash_intro .carwash_sidebar .sidebar_block:last-child{
  padding: 0;
}
.carwash_intro .carwash_sidebar .sidebar_block p{
  line-height: 2.0;
}
.carwash_intro .carwash_sidebar .sidebar_block .line{
  display: inline-block;
}
.carwash_intro .carwash_sidebar .sidebar_block .catchcopy{
  margin: 0 7px 0 0;
  padding: 0px 10px 0px 18px;
  display: inline-block;
  font-weight: bold;
  background-color: #000000;
  color: #f9d40d;
  line-height: 1.5;
}


.shop_wrap{}
.shop_wrap .shop_img{
    position: relative;
    overflow: hidden;
    height: 650px;
}
.shop_wrap .shop_img img{
position: absolute;
    top: 35%;
    left: 50%;
    width: auto;
    height: 1000px;
    transform: translate(-50%, -50%);
}

.shop_wrap .shop_info {
  padding: 150px 0 150px  0;
  background-color: #151515;
  text-align: center;
}
.shop_wrap .shop_info p{
  font-size: 2.4rem;
  letter-spacing: 0.15em;
  line-height: 2.0;
  color: #fff;
}
.shop_wrap .shop_info .emphasis{
  background-color: #f2bf0d;
  color: #151515;
  display: inline-block;
  line-height: 1.5;
  font-weight: bold;
  padding: 0px 10px 0px 18px;
  margin: 0 0 10px 0;
}
.shop_wrap .shop_info .dot_wrap{
  cursor: pointer;
  border: none;
  background: none;
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  padding: 30px 0;
}
.shop_wrap .shop_info .dot_wrap .dot,
.shop_wrap .shop_info .dot_wrap .dot::before,
.shop_wrap .shop_info .dot_wrap .dot::after{
  display: block;
  position: absolute;
  border-radius: 50%;
  /* ドット1つのサイズ */
  width: 6px;
  height: 6px;
  /* ドットの色 */
  background-color: #fff;
}
.shop_wrap .shop_info .dot_wrap .dot::before,
.shop_wrap .shop_info .dot_wrap .dot::after{
  content: '';
}
.shop_wrap .shop_info .dot_wrap .dot::before{
  top: -12px;
}
.shop_wrap .shop_info .dot_wrap .dot::after{
  top: 12px;
}
.shop_wrap .shop_info .dot_wrap .dot{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.shop_wrap .shop_info .shop_button{}
.shop_wrap .shop_info .shop_button a{
  width: 148px;
  display: block;
  margin: 0 auto;
  position: relative;
  transition: 0.3s ease-out;
}
.shop_wrap .shop_info .shop_button a:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}
.shop_wrap .shop_info .shop_button a::after{
  display: inline-block;
  content: "";
  position: absolute;
  width: 2px;
  height: 60px;
  bottom: -30px;
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
}
.shop_wrap .shop_info .shop_button a img{
  width: 100%;
}

/*=====*/
/*PHOTO*/
/*=====*/
.photo_wrap{
  padding: 150px 0 150px 0;
}
.underlayer_title{
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 0 60px 0;
}
.underlayer_title p{
  font-size: 13rem;
  letter-spacing: 0.1em;
  line-height: 0.8;
  font-weight: normal;
  color: #edb50d;
  padding: 0 40px 0 0;
}
.underlayer_title .title_icon{
  width: 60px;
}
.underlayer_title .title_icon img{
  width: 100%;
}
.title_intro{}
.title_intro p{
  font-size: 2.4rem;
  letter-spacing: 0.15em;
  line-height: 2.0;
}
.title_intro .emphasis{
  background-color: #151515;
  color: #f2bf0d;
  display: inline-block;
  line-height: 1.5;
  font-weight: bold;
  padding: 0px 10px 0px 18px;
}

/*slider*/
.slider_items {
  width: 100%;
  display: flex;
  max-width: 80%;
  margin: auto;
}

.slider_items li {
  height: auto;
  margin-right: 10px;
  margin-left: 10px;
}

.slider_items img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}


/*=====*/
/*PRICE*/
/*=====*/
.price_wrap{
  padding: 100px 0;
}
/*ポップアップ*/
.popup_wrap input {
  display: none;
}
.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #0c0c0cc7;
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}
.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}
.price_button_area{
  padding: 100px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2%;
}

/*ポッポアップ内容*/
.popup_content {
  position: relative;
  align-self: center;
  width: 75%;
  max-width: 800px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(94, 94, 94, 0.7);
  text-align: center;
  padding: 72px 24px 72px 24px;
}
.popup_content img{
  margin: 0 0 16px 0;
  height: 60px;
}
.popup_content .league_gothic{
  font-size: 8rem;
  letter-spacing: 0.2em;
  padding: 0 0 32px 0;
}
.popup_content p{
  font-size: 2.4rem;
}
.popup_content .price_table{
  margin: 24px 0 0 0;
  height: 200px;
  overflow: scroll;
}

.popup_content .price_table table{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 2.4rem;
 }
 .popup_content .price_table table th{
  padding: 10px;
  border: solid 1px #000;
  color: #fff;
  font-weight: normal;
 }
 .popup_content .price_table table td{
  padding: 10px 20px;
  border: solid 1px #000;
  text-align: left;
  line-height: 1.3;
 }
.table_yellow{
  background-color: #dca40d;
}
.table_black{
  background-color: #000000;
}
.table_cream{
  background-color: #fbe8b4;
}






.close_btn {
  position: absolute;
  top: 24px;
  right: 26px;
  font-size: 30px;
  cursor: pointer;
  color: #fff;
  background-color: #000;
  border-radius: 30px;
  padding: 10px 10px;
  width: 30px;
  height: 30px;
  line-height: 1;
}
.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.open_btn {
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: .3s ease;
  padding: 30px 0px 30px 40px;
  font-weight: bold;
  background-color: #171717;
  max-width: 530px;
  width: 100%;
  display: inline-block;
  margin: 0 0 32px 0;
  transition: 0.3s ease-out;
}
.open_btn:hover{
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}

/*ボタン*/
.open_btn img{
  width: 70px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 26px 0 0;
}
.open_btn p{
  font-size: 24px;
  letter-spacing: 0.1em;
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
}
.open_btn .league_gothic{
  font-size: 36px;
  letter-spacing: 0.2em;
  padding: 0 16px 0 0;
}

/*ご予約はこちら*/
.link_button a {
  background: #dca40d;
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 280px;
  padding: 32px 25px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-size: 1.6rem;
  font-weight: bold;
  transition: 0.3s ease-out;
}
.link_button a:hover {
  transform: translateY(-4px);
  transition: 0.1s ease-out;
}
.link_button a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 6px;
height: 6px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: translateY(-50%) rotate(45deg);
}


/*========*/
/*====【PAGE】DESIGN====*/
/*========*/
.design_sidebar{
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  text-align: center;
}
[data-ruby] {
  position: relative;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.5em;
}
rt{
  letter-spacing: 0;
  font-size: 1rem;
}
.design_sidebar p{
  line-height: 2.0;
}

.space_img{
  width: 100%;
}
.space_img img{
  width: 100%;
}

/*STEP*/
.step{
  background-color: #0bec95;
  padding: 100px 0;
  background-image: url(../img/step_bg.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.step .step_intro{
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  margin: 0 0 40px 0;
}
.step .step_intro p{
  line-height: 2.0;
}
.step .step_intro .catchcopy{
  margin: 0 7px 0 0;
  padding: 0px 10px 0px 18px;
  display: inline-block;
  font-weight: bold;
  background-color: #fff;
  color: #0bec95;
  line-height: 1.5;
}

.step_list{}
.step_list .step_item {
  width: 60%;
  margin: 0px auto 50px auto;
}
.step_list .step_item img{
  width: 100%;;
}
.design_request{}
.design_request .hochiki{
  width: 500px;
  margin: 0 auto;
}
.design_request .hochiki img{
  width: 100%;
}

.alert{
  width: 400px;
  margin: 0 auto;
  padding: 32px 0 0 0;
}
.alert .alert_item{
  display: flex;
  align-items: center;
  padding: 0 0 16px 0;
}
.alert .alert_item img{
  width: 18px;
  padding: 0 16px 0 0;
}
.alert .alert_item p{
  font-size: 1.8rem;
}
























/*========================*/
/*========================*/
/*========================*/
/*========TABLET========*/
/*========================*/
/*========================*/
/*========================*/

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


/*==HEADER==*/
.menu_contact .contact_item .contact_desc a .contact_jp {
  display: none;
}
.inner-menu {
  width: 100%;
  padding: 70px 30px 0;
}
.inner-menu a {
  padding: 0px 0;
}










.common_container {
    max-width: none;
    margin-left: 25px;
    margin-right: 25px;
    padding: 0 0 0;
}

/*====*/
/*==トップページ==*/
/*====*/

/*ページトップ 会社名*/
.company_name{
  font-size: 1.8rem;
  letter-spacing: 0.28em;
   margin: 24px 0 50px 0;
}

/*メインビジュアル*/
.main_visual {
  height: auto;
}
.main_visual .motto{
  background-image: url(../img/sp/main_visual_title.webp);
  width: 80%;
  max-width: inherit;
  height: auto;
  padding-top: 80%;
}
.main_visual .motto img{
  width: 90%;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.main_visual .tiger_img {
  bottom: 0;
  height: auto;
  padding-top: 90%;
  max-width: inherit;
}

/*スクロールアニメーション*/
.scroll {
  bottom: 0;
  top: 0;
  margin: auto;
  height: fit-content;
}

/*虎渓三笑*/
.top_about .motto_main {
  display: none;
}



.flex-container {
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0 0 70px 0;
  gap: 30px;
}

.vertical-wrap {
  writing-mode: vertical-rl;
}

.vertical-content {
  color: #fff;
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 0.3em;
}
.vertical-content p{
  line-height: 2.4;
  border-right: 2px dashed #ffff;
  display: table;
}

.other {
  color: #e6ab0d;
}
.other h2{
  font-size: 5.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.other p{
  font-size: 2.0rem;
  font-weight: bold;
  padding: 0 0 0 16px;
}

.vertical-content, 
.other {
  padding: 8px;
  writing-mode: vertical-lr;
}













.top_about .about_motto {
  color: #e6ab0d;
  padding: 0 0 44px 0;
}
.top_about .about_motto h2 {
  font-size: 5.5rem;
  letter-spacing: 0.2em;
  display: inline-block;
  padding: 0 0 0px 32px;
  writing-mode: vertical-rl;
}
.top_about .about_motto p {
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  display: inline-block;
  writing-mode: vertical-rl;
  vertical-align: top;
  padding: 0 0 0 16px;
}
.top_dash{
  display: none;
}
.top_about .motto_sidebar {
  padding: 0;
  margin: 0 0 96px 0;
  background-image: inherit;
  background-size: 0;
  background-repeat: inherit;
  background-position: inherit;
}
.top_about .motto_sidebar p {
  writing-mode: vertical-rl;
  vertical-align: top;
  line-height: 2.4;
  border-right: 2px dashed #ffff;
  font-size: 2.4rem;
}
.top_about .about_sidebar{
  font-size: 1.4rem;
}
.top_about .about_sidebar p.catchcopy {
  margin: 40px 0;
}

/*社内イメージ*/
.about_img{
  height: 500px; /* 高さは固定値を入れる */
}
.about_img img{
  height: 500px;
}

/*BUSINESS*/

/*title common*/
.title{
  text-align: center;
  padding: 0 0 50px 0;
}
.title h2{
  font-size: 6.5rem;
  letter-spacing: 0.1em;
  line-height: 0.8;
  padding: 0 0 24px 0;
}
.title p{
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  font-weight: bold;
}

.top_business,
.top_contact {
  padding: 100px 0 100px 0;
}
.business_wrap ul li,
.contact_wrap ul li{
  margin-bottom: 40px;
}
.business_wrap ul li a,
.contact_wrap ul li a{
  padding: 35px 0 40px 0;
}
.business_wrap ul li a::after,
.contact_wrap ul li a::after{
  height: 32px;
  bottom: -18px;
}
.business_wrap ul li a .business_name h3,
.contact_wrap ul li a .contact_name h3{
  font-size: 1.2rem;
}
.business_wrap ul li a .business_name p,
.contact_wrap ul li a .contact_name p{
  font-size: 1.8rem;
  padding: 0 0 16px 0;
}
.business_wrap ul li a .business_icon,
.contact_wrap ul li a .contact_icon{
  padding: 0 0 24px 0;
}

/*CONTACT*/





/*COMPANY*/
.company_wrap {
    padding-top: 200px;
}
.top_company {
    background-image: url(../img/sp/company_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: #111111;
    padding: 180px 0 180px 0;
}

/*========*/
/*====【PAGE】CARWASH====*/
/*========*/
.carwash_intro {
  padding: 0 0 0 0;
}
.carwash_intro .carwash_sidebar .sidebar_block {
  font-size: 1.4rem;
}
.shop_wrap .shop_img {
  height: 380px;
}
.shop_wrap .shop_img img {
  position: absolute;
  top: 35%;
  left: 50%;
  width: auto;
  height: 500px;
  transform: translate(-50%, -50%);
}

.shop_wrap .shop_info {
  text-align: left;
}
.shop_wrap .shop_info p {
  font-size: 1.4rem;
}
.shop_wrap .shop_info {
  padding: 100px 0 100px 0;
}
.shop_wrap .shop_info .shop_button a {
  width: 70px;
}
.shop_wrap .shop_info .shop_button a::after {
  height: 30px;
  bottom: -8px;
}

/*=====*/
/*PRICE*/
/*=====*/
.title_intro p {
  font-size: 1.4rem;
}
.underlayer_title p {
  font-size: 5.2rem;
  padding: 0 20px 0 0;
}
.popup_content img {
  height: 30px;
}
.popup_content .league_gothic {
  font-size: 4rem;
  letter-spacing: 0.2em;
  padding: 0 0 24px 0;
}
.popup_content p {
  font-size: 1.2rem;
}
.popup_content .price_table {
  margin: 16px 0 0 0;
}
.popup_content .price_table table {
  font-size: 1.2rem;
}
.popup_content {
  padding: 40px 24px 40px 24px;
}
.close_btn {
  top: 20px;
  right: 20px;
  padding: 5px 5px;
}
.popup_content .price_table table td {
  padding: 10px 12px;
}
.underlayer_title {
  padding: 0 0 40px 0;
}
.underlayer_title .title_icon {
  width: 30px;
}
.price_button_area {
  padding: 50px 0 0 0;
}


.open_btn img {
  margin: 0 12px 0 0;
}
.open_btn .league_gothic {
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  padding: 0 8px 0 0;
}
.open_btn p {
  font-size: 1.2rem;
}
.open_btn {
  padding: 30px 0px 30px 16px;
}

/*========*/
/*====【PAGE】DESIGN====*/
/*========*/
.design_sidebar {
  font-size: 1.4rem;
}

/*STEP*/
.step .step_intro {
  font-size: 1.4rem;
}
.step .step_intro .catchcopy {
  padding: 0px 0px 0px 6px;
}


.design_request .hochiki {
  width: 370px;
}







}














/*========================*/
/*========================*/
/*========================*/
/*========SP========*/
/*========================*/
/*========================*/
/*========================*/
@media screen and (max-width: 520px) {


/*==HEADER==*/
.inner-menu a .menu_en {
  font-size: 4.2rem;
}
.inner-menu ul li {
  padding: 0 0 16px 0;
}
.menu-btn {
  width: 50px;
  height: 50px;
}

.menu_contact .tel_number a{
  pointer-events: inherit;
}
/*====*/
/*==トップページ==*/
/*====*/

/*ページトップ 会社名*/
.company_name{
  margin: 32px 0 40px 0;
}
/*スクロールアニメーション*/
.scroll .text{
  font-size: 2.0rem;
}
.scroll .text .scroll_en{
  font-size: 3.0rem;
}
.scroll::after{
  height: 110px;
  top: 70px;
}

/*メインビジュアル*/
.main_visual .tiger_img {
  top: auto;
}
/*スクロールアニメーション*/
.scroll {
  top: -50px;
}
.scroll .text span {
  padding: 0 0 8px 0;
}
.scroll .text {
  font-size: 1.5rem;
}
.scroll .text .scroll_en {
  font-size: 2.0rem;
}

/*社内イメージ*/
.about_img{
  height: 400px; /* 高さは固定値を入れる */
}
.about_img img{
  height: 400px;
}


/*COMPANY*/
.company_info .info_list .table_tr .table_th {
    font-size: 1.2rem;
    width: 123px;
    padding: 6px 0;
}
.company_info .info_list .table_tr .table_td {
    font-size: 1.2rem;
}

/*footer*/
#page_top {
  width: 50px;
  height: 50px;
}
#page_top a {
  width: 50px;
  height: 50px;
}
#page_top a::after {
  font-size: 1.5rem;
  top: 21px;
}
#page_top a::before {
  height: 22px;
  top: -11px;
}

/*========*/
/*====【PAGE】DESIGN====*/
/*========*/
.design_sidebar {
  text-align: justify;
}

/*STEP*/
.step_list .step_item {
  width: 90%;
  margin: 0px auto 50px auto;
}

.design_request .hochiki {
  width: 70%;
}

.alert {
  width: 90%;
}
.alert .alert_item p {
  font-size: 1.6rem;
  line-height: 1.4;
}





















}