@charset "utf-8";

/*********************************reset*********************************/

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	margin: 0 auto;
    scroll-padding-top: 85px;
}

body {
	margin: 0 auto;
	overflow:auto;
}

a {
	text-decoration: none;
	color: #000;
}

p {
    padding: 3px;
    line-height: 1.2;
}
li {
	list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
@media screen and (min-width: 768px) {
    html {
     scroll-padding-top: 180px;
}
}
/*********************************
link
*********************************/

#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9 {
/*	margin-top: -100px;
    padding-top: 100px;*/
}

@media screen and (min-width: 768px) {
	#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9 {
/*	margin-top: -17.5rem;
    padding-top: 17.5rem;*/
	}
}

/*********************************class*********************************/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.block {
	margin-bottom: 10px;
}

.list {}
.list li {
	margin-bottom: 30px;
} 

.width-100 {
	width: 100%;
}
.m-top-10 {
	margin-top: 10px;
}
.m-top-30 {
	margin-top: 30px;
}
.m-top-50 {
	margin-top: 50px;
}
.m-top-100 {margin-top: 100px;}
.m-top-200 {margin-top: 200px;}

.m-bottom-10 {
	margin-bottom: 10px;
}
.m-bottom-20 {
	margin-bottom: 20px;
}
.m-bottom-50 {
	margin-bottom: 50px;
}
.p-top-20 {
	padding-top: 20px;
}
.p-top-50 {
	padding-top: 50px;
}
.p-bottom-20 {
	padding-bottom: 20px;
}

.pos-relative {
	position: relative;
}
.pos-absolute {
	position: absolute;
	bottom: 1.rem;
	left: 2rem;
}

.last_bottom {
	margin-bottom: 5%;
}

.flex {
    display: flex;
}

.aligin-center {
    text-align: center;
}

.box {margin-bottom: 10%;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

.content-left {justify-content: left;}

.conteiner {margin-bottom: 5%;}

/*********************************
heading
*********************************/

.heading-1 {font-size: var(--size-small);}
.heading-2 {
    color: var(--second-color);
    font-size: 2em;
    font-weight: var(--weight-medium);
    text-align: center;
}
.heading-3 {
    font-size: 1.2em;
    color: var(--second-color);
    text-align: center;
    margin: 5% 0;
}
.heading-4 {
	font-size: 1.2em;
	margin-bottom: 5px;
    margin-left: 20%;
}

.heading-size {
    width: 80%;
}

.heading-3-box .heading-3 { font-size: 2em;}

@media screen and (min-width: 768px) {
	.heading-1 {font-size: 3rem;}
    .heading-2 {font-size: 3rem;}
	.heading-3 {font-size: 1.4em;}
	.heading-4 {font-size: 2.2em; margin-bottom: 15px;}
    .heading-3-box .heading-3 { font-size: 3em;}
}

/*********************************
header
*********************************/
header {
    position: -webkit-sticky;
	position: sticky;
    top: 0;
    z-index: 999;
}
.header {
    padding: 10px;
    background-color: rgba(0,207,193,1);
}

.bg-header {background-color: #fff;}

.header-navi {
	justify-content: space-between;
    column-gap: 1px;
}


.header-flag {
	display: inline-block;
	background: var(--main-color);
	border-radius: 3px;
	padding: 10px;	
	color: #fff;
	font-size: var(--size-medium);
	vertical-align: middle;
}

.header-icon {
	width: 60px;
    padding-top: 50%;
    padding-right: 15%;
}

@media screen and (min-width: 768px) {
	.header-navi {
    column-gap: 15px;
    }
}

/********************************* top *********************************/

.content h2 {text-align: center;}

.explanation {
    font-size: clamp(16px,3vw,28px);
    font-weight: var(--weight-medium);
    line-height: 1.2;  
    text-align: center;
    margin-bottom: 2%;
}

.adjustment {
    padding-top: 20%;
}

.bg-adjustment-2 {padding-bottom: 20%;}

@media screen and (min-width: 768px) {
    .bg-adjustment-1 {padding-bottom: 30%;}
    .bg-adjustment-2 {padding-bottom: 50%;}

}

/*********************************
artist


.child3 {}
.child3 img {
    aspect-ratio : 1 / 1;
    object-fit: cover;
}

.grid-column-3 {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    grid-gap: 4%;
}

.pattern-2 {grid-template-columns: 3fr 1fr 2fr;}

.grid-column-3.pattern-2 .child3 {
    order: 1; 
}

.grid-column-3.pattern-2 .child1 {
    order: 2; 
}

.grid-column-3.pattern-2 .child2 {
    order: 3; 
}
*********************************/
/*********************************
  artistレイアウト
*********************************/

/* --- 1. 大枠のグリッド（左右2カラム） --- */
.interview-grid {
    display: grid;
    /* 左側と右側の比率。1:1.2 など画像に合わせて調整してください */
    grid-template-columns: 1fr 1fr; 
    gap: 4%;
}

/* --- 2. 左側エリア（上下に並べる） --- */
.grid-left {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    gap: 20px; /* 上（プロフィール）と下（テキスト枠）の隙間 */
}
.grid-right {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    gap: 20px; /* 上（プロフィール）と下（テキスト枠）の隙間 */
}

/* 左上：プロフィールエリア（アイコンとテキストを横並び） --- */
.profile-box {
    display: flex;
    align-items: center; /* 縦の中央で揃える */
    gap: 15px; /* 丸アイコンとテキストの隙間 */
}

/* 丸アイコンのスタイル 
.child1 img {
    width: 80px; 
    height: 80px;
    border-radius: 50%; 
    object-fit: cover;
}
*/
/* SNSアイコンの横並び */
.sns-list-profile {
    display: flex;
    gap: 3%;
    margin-top: 5px; /* 名前とSNSの間の隙間 */
}

.sns-list-profile img {
    width: 100%; /* SNSアイコンの大きさ */
    height: auto;
}

/* 左下：テキスト枠（必要に応じて背景色や枠線を設定） */
.interview-frame {
    background-color: #ffffff;
    padding: 3%;
    box-shadow: 0px 2px 5px #000;
}


/* --- 3. 右側エリア（イラスト） --- */
.grid-right img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ==================================
   おまけ：パターン2（左右入れ替え）
   ================================== */
/* カラムが「左」と「右」の2つにまとまったので、入れ替えが超簡単になります！ */
.interview-grid.pattern-2 .grid-left {
    order: 2; /* 左の塊を右へ */
}
.interview-grid.pattern-2 .grid-right {
    order: 1; /* 右のイラストを左へ */
}

@media screen and (min-width: 768px) {
    .sns-list-profile {max-width: 50%;}
}


/*********************************
stay
*********************************/

.content-stay {
    color: #fff;
    margin-bottom: 10%;
}

.content-stay h3 {
    display: inline-block;
    font-size: clamp(12px, 4vw, 24px);
    border-bottom: 1px solid;
    padding: 0 3%;
    margin-bottom: 5%;
}

.content-stay p {margin-bottom: 6%;}

/*********************************
reason
*********************************/

.reason {/*padding-left: 20px;*/}
.reason-item {
    margin-bottom: 5%;
}
/*.reason-item img {margin-bottom: 30px;}*/
.reason-item h3 {}
.reason-item p {
    font-size: clamp(14px,3vw,26px);
    color: var(--color-3);
    font-weight: var(--weight-m);
    text-align: left;
}

.reason-text-box {
    padding-left: 20px;
    padding-right: 40px;
}

.overlap {position: relative;}

.overlap-img {width: 75%;}
.overlap-img img {aspect-ratio: 3/2;}

.radius {border-radius: 30px;}

.overlap1 {
    position: relative;
    z-index: 2;
/*    top: 50px;*/
/*    left: 70px;*/
}

.olright {margin-left: auto;}


.overlap2 {
/* ❌ position: absolute; をやめる！ */
    /* ❌ top: 85%; をやめる！ */
    
    /* ⭕️ 代わりに相対配置にして、上の要素にめり込ませる */
    position: relative; 
    z-index: 1;          /* 画像より手前（上）にするため */
    
    /* ★マイナスの数値を指定して上に引っ張り上げる（重ねる） */
    margin-top: -6%;    /* 数値はお好みで調整してください（pxでも可） */
    
    background-color: #fff;
    width: 70%;
    border-radius: 30px;
    padding: 8% 5% 5%;
}
.olleft {left: 0;}

.overlap3 {
    position: absolute;
    top: 20%;
    left: 33%;
    padding-right: 10px;
}

.overlap-icon-r {position: absolute; top: 5%; right: 0; width: 30%;}
.overlap-icon-l {position: absolute; top: 65%; left: 0; width: 25%;}

@media screen and (min-width: 768px) {
    .overlap2 {
    width: 70%;
    }
}


/*********************************
first-view
*********************************/

.first-view {
    padding-top: 15%;
    padding-bottom: 3%;
/*    display: flex;*/
}
.fv-left {
    flex: 55%;
}
.fv-left-child {
    box-sizing: border-box;
    width: 90%;
    gap: 5%;
}
.fv-right {
    text-align: right;
}
.fv-right img {}
.fv-tel {
    width: 100%;
}

.fv-icon {
    width: 6vw;
}
.fv-icon img {
    color: #000;
}
.fv-number {
    font-size: 4.8vw;
    font-weight: 700;
    }   

.heading-1-box {
	margin-top: 5px;
}
.heading-2-box {
	text-align: center;
	margin-bottom: 4%;
}

@media screen and (min-width: 768px) {
    .fv-icon {width: 5rem;}
    .fv-number {font-size: 6rem;}
}

/*********************************
benefit
*********************************/
.benefit {
	display: flex;
	flex-wrap: wrap;
    gap: 1em;
	margin-top: 10px;
}

.benefit .item {
	background: var(--second-color);
	padding: 3%;
	text-align: center;
	color: var(--third-color);
}

.item-pickup {
	background: #fff;
	border: 3px var(--main-color) solid;
	color: #000;
	font-weight: var(--weight-medium);
	padding: 2%;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.benefit .item {
		padding: 2%;
		font-size: var(--size-small);
	}
}

/*********************************
grid
*********************************/

/*********************************article*********************************/

.article-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.article-title {
	color: var(--third-color);
	font-size: var(--size-medium);
	margin-bottom: 10px;
}

.article-notice {
    justify-content: space-between;
	font-size: var(--size-small);
	text-align: left;
    color: #d6ae3c;
    padding: 0 1px;
    
}

.article-text {
	font-size: var(--size-medium);
    text-align: left;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
	.article-text {
	font-size: var(--size-xlarge);
}
}

/*********************************interview

.interview-list {}
.interview-list li {
    margin-bottom: 5%;
}

.interview-grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

.interview-icon {
     display: flex;
  justify-content: center; 
  align-items: center; 
}
.interview-icon img {
    width: 70%;
}

.interview-frame {
    background-color: #ffffff;
    padding: 3%;
    box-shadow: 0px 2px 5px #000;
}
*********************************/
/*********************************+
footer
*********************************/
.footer {
    padding-top: 5%;
    margin-bottom: 12%;
}

.footer-box {
    color: #3d3d3d;
    padding-bottom: 8%;
}

.footer-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.footer-flex img {
    width: 8%;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    z-index: 999;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

.information-box {
    text-align: center;
}
.information-title {
    font-size: var(--size-xlarge);
}
.information-text {
    font-size: var(--size-medium);
}

@media screen and (min-width: 768px) {
    .footer-box {
        display: flex;
        justify-content: space-between;
        gap: 0 5%;
    }
    .footer-flex {
        justify-content: left;        
    }
    .information-box {
        text-align: left;
    }
    .information-title {
        text-align: center;
    }
    .information-text {
        font-size: var(--size-small);
        text-align: left;
    }
}

/*********************************+sns*********************************/

.sns-list {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
}
.sns-list .item {width: 15%;}
.sns-list .item img {width: 100%;}

.sns-list-left {
    display: flex;
    align-items: center;
    justify-content: left;
    column-gap: 5px;
    margin-bottom: 6%;
}
.sns-list-left .item {width: 15%;}
.sns-list-left .item img {width: 100%;}

.sns-list-right {
    display: flex;
    align-items: center;
    justify-content: right;
    column-gap: 5px;
}
.sns-list-right .item {width: 15%;}
.sns-list-right .item img {width: 100%;}

/*********************************column*********************************/

.column-2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    margin-top: 6%;
}
.column-2-grid p {color: #fff;}

.column-2-grid img {
    aspect-ratio: 3 / 2;
}

.column-3-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2%;
    row-gap: 4%;
}
.column-3-grid img {
    aspect-ratio: 3 / 2;
}

@media screen and (min-width: 768px) {
	.article-title {font-size: var(--size-large);}
	.article-notice {font-size: var(--size-large);}
/*	.article-text {font-size: var(--size-large);}*/
}

/*********************************room*********************************/

.room-flex {
    column-gap: 30px;
    justify-content: space-around;
}
.room-img {
    width: 100px;
}

.room-overview {
    text-align: left;
    color: #000;
}

/*******************************
iframe
*******************************/
.iframe-wrapper {
/*	display: flex;
	justify-content: center;
	width: 100%;
    padding-bottom: 11.25%; 
    gap: 0 30px;*/
    margin: 0 auto 20px;
    aspect-ratio: 3 / 2;
}

@media screen and (min-width: 768px) {
    .iframe-wrapper {
        width: 50%;
        padding-bottom: 62.75px;
        margin: 0;
    }    
}

/*********************************
banner-list
*********************************/

.banner-list {width: 100%;}
.banner-list img {
    width: 100%;
    margin-bottom: 20px;
}

/*********************************
flex-column
*********************************/

.flex-column {
    display: flex;
	flex-wrap : wrap;
    justify-content: space-between;
    /* margin: 20px 10% 50px; */
    /* padding: 0 20px; */
    gap: 10px;
}
.flex-column li {
/*	width: calc(100% / 3 - );*/
/*	width: 20%;*/
}
.flex-column li {}
.flex-column a {
	color: #000;
}
.flex-column h3 {
	font-size: var(--size-small);
    font-weight: var(--weight-medium);
    padding: 5px;
    text-align: left;
	margin-bottom: 0;
}
.flex-column p {
	font-size: var(--size-small);
    font-weight: var(--weight-medium);
    padding: 5px;
    text-align: right;
	margin-bottom: 0;
}

.flex-column::after{
  content:"";
  display: block;
  width: calc(100% / 3 - 20px);
  margin: 10px;
}

.column-item {
  width:30%;
  height:auto;
  position:relative;
}

.column-item::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top: 70%;
}
.column-item img {
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
	height:100%;
  object-fit:cover;
  object-position:center;
  background:#eee;
}

@media screen and (min-width: 768px) {
	.flex-column {
    gap: 30px;
	}
}

/*********************************menu*********************************/

.menu_column {
	display: flex;
	justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
	margin-top: 40px;
}
.menu_column .item {
	position: relative;
	background: linear-gradient(0deg, transparent 50%, transparent 0%, var(--main-color)50%, var(--main-color));
	border: 3px var(--main-color) solid;
	border-radius: 10px;
	width: 31%;
	text-align: center;	
	height: 110px;
}
.menu-wrap {
    width: 100%;
    height: 100%;
}
.absolute-box-1 {
	position: absolute;
	top: 3%;
    left: 0%;
    right: 0%;
}
.absolute-box-1 img {
	width: 45px;
}
.absolute-box-2 {
	position: absolute;
	bottom: 10%;
    left: 0%;
    right: 0%;
}
.menu_column p {
	font-size: var(--size-medium);
	font-weight: var(--weight-medium);
}
.menu_column span {
	color: var(--main-color);
	font-size: var(--size-medium);
}
@media screen and (min-width: 768px) {
	.menu_column {
		gap: 20px;
	}
	.menu_column .item {
		height: 250px;
	}
	.absolute-box-1 img {
	width: 45%;
	}
	.menu_column p {
		font-size: var(--size-xxlarge);
	}
	.menu_column span {
		font-size: var(--size-xxlarge);
	}
}
/*
#flex_column li a::after{
  content:"";
  display: block;
  width: calc(100% / 3 - 20px);
  margin: 10px;
}
#flex_column li a ::after{
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top: 70%;
}
*/

/*********************************price*********************************/

.price-box {
    position: relative;
    margin-bottom: 60px;
    z-index: 9;
}

@media screen and (min-width: 768px) {
    .price-box {
    margin: var(--side-gap);

    }
}

#price_1 {
/*	margin-top: -100px;
    padding-top: 100px;*/
}

/*********************************coupon*********************************/

.coupon-list {width: 100%;}

.coupon-list .item {
    display: flex;
    margin-bottom: 40px;
    flex-grow: 1;
}

.coupon-list .item{
    width: auto;
}
.coupon-list .item img {
    width: auto;
}

.coupon-item {
	width: 100%;
}
/*.coupon-item {
	position: relative;
	margin-bottom: 30px;
    width: auto;
}*/

.item-coupon {
    flex-grow: 0;
    width: 88.58%;
}
.item-use {
    flex-grow: 0;
    width: 11.42%;
}

.coupon-use {
    font-size: var(--size-xxlarge);
    text-align: center;
    background-color: var(--main-color);
    color: #fff;
    border-right: 3px solid #000;
    border-left: 3px solid #000;
    border-bottom: 3px solid #000;
    padding: 10px;
}

/*
.coupon-item {
	position: relative;
	margin-left: 3%;
	margin-bottom: 6%;
	padding: 2%;
	border: 2px #a6a6a6 solid;
}*/

@media screen and (min-width: 768px) {
    .coupon-list {
        width: auto;
        margin: var(--side-gap);
    }    
    .coupon-use {
        border-right: 10px solid #000;
    border-left: 10px solid #000;
    border-bottom: 10px solid #000;
    }
}

.aligin-ribbon {
	position: absolute;
	top: 3%;
    left: -3%;
}

.ribbon {
	display: inline-block;
	position: relative;
	left: -1.8rem;
	padding: 2% 10% 3% 5%;
	font-size: var(--size-small);
	color: #fff;
	font-weight: var(--weight-medium);
	background: var(--main-color);
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 10px rgb(149, 158, 155);
}


/*保存
.ribbon {
  display: inline-block;
  position: relative;
  width: 160%;
  padding: 7% 0 7% 15%;
  font-size: var(--size-small);
  color: #fff;
  font-weight: var(--weight-medium);
  background: var(--main-color);
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 10px rgb(149, 158, 155);
}*/

/*.ribbon:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-left: solid 20px rgb(149, 158, 155);/*折り返し部分
}*/

.coupon-article {
	display: flex;
	margin-top: 3%;
	margin-bottom: 3%;
}
.coupon-article .child1 {
	flex: 1;
}
.coupon-article .child2 {
	flex: 2;
	position: relative;
	font-size: var(--size-small);
}

.coupon-article .box{
    width: 85%;
    position: relative;
    overflow: hidden;
}
.coupon-article .box::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.coupon-article .box img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.coupon-title {
	font-weight: var(--weight-medium);
}
.coupon-text {
	font-size: var(--size-xlarge);
	line-height: 1.2;
}
.coupon-price {	
	position: absolute;
    bottom: 0;
    right: 0;
	color: var(--main-color);
	font-size: var(--size-xsmall);
	font-weight: var(--weight-medium);
}

.coupon-notice {
	background-color: var(--second-color);
	padding-top: 2%;
    padding-right: 2%;
    padding-bottom: 15%;
    padding-left: 2%;
	margin-bottom: 2%;
}
.coupon-notice p {
	margin-bottom: 1%;
}


@media screen and (min-width: 768px) {
	.ribbon {
		font-size: var(--size-xlarge);
		left: -3.5rem;
	}
	.ribbon:before {
		position: absolute;
		content: '';
  		top: 100%;
  		left: 0;
 		border: none;
		border-bottom: solid 15px transparent;
  		border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
	}
	.coupon-text {
	font-size: var(--size-xxlarge);
	}
	.coupon-price {	
	font-size: var(--size-xlarge);
	}
	.coupon-notice p {
		font-size: var(--size-small);	
	}
}

/*********************************table*********************************/

/*table-1*/
#table-1 {
	width: 100%;
	table-layout: fixed;
	text-align: center;
    font-size: var(--size-smail);
}
#table-1 th {
	width: 40%;
	border: 2px var(--second-color) solid;
}
#table-1 td {
	border: 2px var(--second-color) solid;
}
#table-1 th,td {
	padding: 2%;
	vertical-align: middle;
}

/*table-2*/
#table-2 {
	font-size: var(--size-xsmall);
	color: var(--third-color);
}
#table-2 td {
	border: none;
}
#table-2 th {
	text-align: right;
}
#table-2 td { padding: 0px;}


/*table-3*/
#table-3 {
	width: 100%;
	table-layout: fixed;
}
#table-3 th {
	background: var(--second-color);
	border: 2px var(--second-color) solid;
	color: var(--third-color);
	width: 33%;
	font-size: var(--size-smail);
	line-height: 1.5;
}
#table-3 td {
	border: 2px var(--second-color) solid;
	font-size: var(--size-smail);
	line-height: 1.5;
}
#table-3 th,td {
	padding: 2%;
	vertical-align: middle;
}

#table-4 {
    table-layout:  fixed;
}
#table-4 tr {
    border-top: 1px #00000040 solid;
    border-bottom: 1px #00000040 solid;
}
#table-4 th,td {text-align: left; }
#table-4 th {white-space: nowrap; vertical-align:middle; font-size: 1.3em;}
#table-4 td {padding: 1%; font-size: 1.3em;}

.saturday {
	background-color: #deefff;
	color: #1976d2;
}
.sunday {
	background-color: #ffe9e7;
	color: #f44336;	
}

.name {
	font-size: 1.2rem;
	font-weight: var(--weight-regular);
}

.usable-icon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}
.usable-icon li {
	width: 15%;
}
.traffic-icon {
	width: 60%;
}

#table-3 .custom {
	max-width: 150px;
}

@media screen and (min-width: 768px) {
/*table-1*/
#table-1 {
    font-size: var(--size-large);
}

/*table-2*/
	#table-2 {
	font-size: var(--size-medium);
	width: inherit;
}
	/*table-2*/
	#table-3 th {font-size: var(--size-medium);}
	#table-3 td {font-size: var(--size-medium);}
    #table-4 th {font-size: 2.2em;}
    #table-4 td {font-size: 2em;}
	
	.name {font-size: var(--size-large);}
}

/*********************************
button
*********************************/

button {
	width: 100%;
	font-size: var(--size-xsmall);
}
button a {
	display: block;
}
button img {
	width: 2rem;
	margin-right: 1%;
	vertical-align: sub;
}

.button-1 {
	background: var(--main-color);
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: #fff;
	text-align: center;
	z-index: 99;
}
.button-1 a {
	color: #fff;
}

.button-2 {
	background: #fff;
	border: 2px var(--main-color) solid;
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: var(--main-color);
	text-align: center;
}
.button-2 a {
	color: var(--main-color);
}
.button-2 img {
	border-radius: 50%;	
	padding: 2%;
	background-color: var(--main-color);
}

.button-3 {
	border: 2px var(--second-color) solid;
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: var(--third-color);
	text-align: center;
}

.button-4 {
	background: var(--main-color);
	border-radius: 3px;
	padding: 1%;
    font-size: clamp(16px,3vw,28px);
	font-weight: var(--weight-regular);
	color: #fff;
	text-align: center;
    width: 50%;
    margin: 5% auto;
    display: block;
}
.button-4 a {color: #fff;}


.button-box {
	display: flex;
	gap: 2px;
}

.button-item {
	width: 50%;
}

.button-absolute {
	position: absolute;
    width: 92%;
    bottom: 2.9%;
    right: 0%;
    left: 5%;
	padding: 2%;
}

/*
.button-coupon {
	position: absolute;
    bottom: 2%;
    left: 6%;
    width: 89%;
    padding: 2%;
}
*/
.opacity-box {
	position: relative;
}

.tap-icon {
	position: absolute;
	z-index: 99;
    width: 18%;
    opacity: 1;
    left: 0%;
    top: 10%;
}

@media screen and (min-width: 768px) {
	button {
	font-size: var(--size-xlarge);
	}
	button img {
		width: 8%;
	}
}

/*********************************fixed*********************************/

#fixed-bottom {
	position: fixed;
	bottom: 0;
    width: 100%;
	background: #fff;
	z-index: 99;
}
#fixed-bottom .content {
	margin: inherit;
}

@media screen and (min-width: 768px) {
	#fixed-bottom {
		position: inherit;
		width: inherit;
		padding-bottom: var(--bottom-gap);
	}
	#fixed-bottom .content {
	margin: var(--side-gap);
	}
}

.modal-open-button {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);
}

.modal:target {
  display: flex;
}

.close {
	position: absolute;
    width: 92%;
    bottom: 3%;
    left: 5%;
    padding: 2%;
}
/*
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  color: black;
  text-decoration: none;
  cursor: pointer;
  transform: translate(50%, -50%);
}
*/
.modal-wrapper {
  position: relative;
  max-width: 90%;
  padding: 20px;
  margin: 25% auto;
  background-color: #fff;
  border-radius: 5px;
}

.modal-content {
	position: relative;
}

.modal-content h1 {
  margin: 0;
  font-size: 4rem;
  line-height: 1.2em;
  letter-spacing: -0.02em;
}

.modal-ribbon {
	 width: 100%;
    text-align: center;
    left: -1.8rem;
    padding: 3%;
	margin-bottom: 1%;
    font-size: var(--size-medium);
    color: #fff;
    font-weight: var(--weight-medium);
    background: var(--main-color);
}

.modal-top {
	margin-top: 2%;
}
.modal-d {
	margin-left: 2%;
}

@media screen and (min-width:768px){
	.modal-wrapper {
		max-width: 640px;
		margin: 7% auto;
	}
	.modal-content {
	}
	
}


/*********************************

*********************************/
.dummy {
	background: #dcdcdc;
	text-align: center;
}

.test {
	background-color: var(--second-color) ;
}