@charset "UTF-8";

/* ==========================================================
   ANA Crowne Plaza Kochi: facility-specific overrides

   Add only Kochi-specific differences to this file.
   Common presentation belongs in the shared CSS files.
   This stylesheet is loaded only by the Kochi site, so no
   facility-name prefix is required.
   ========================================================== */
/*調整 */
.margin-top2{margin-top: 2%;}
.margin-top3{margin-top: 3%;}
.margin-top4{margin-top: 4%;}
.margin-top5{margin-top: 5%;}
.margin-bottom2{margin-bottom: 2%;}
.margin-bottom3{margin-bottom: 3%;}
.margin-bottom4{margin-bottom: 4%;}
.margin-bottom5{margin-bottom: 5%;}
.margin-bottom6{margin-bottom: 6%;}
.margin-bottom7{margin-bottom: 7%;}
.margin-m-top3{margin-top: -3%;}
.margin-m-top5{margin-top: -5%;}
.font80{font-size: 80%;}
.redText{color: #A70505;}

/*stay page */
/*suite room 追加 */
.floor-option-control--club:checked ~ .floor-tab-labels label[for="radioclub"],
.floor-option-control--middle:checked ~ .floor-tab-labels label[for="radiomiddle"],
.floor-option-control--suite:checked ~ .floor-tab-labels label[for="radiosuite"] {
  border-bottom: 4px solid var(--color-midnight);
  margin-bottom: -2px;
}

.floor-option-control--club:checked ~ .floor-club,
.floor-option-control--middle:checked ~ .floor-middle,
.floor-option-control--suite:checked ~ .floor-suite {
  display: block;
}

.floor-option-control--club:checked ~ .floor-tab-labels.common-motion-tabs label[for="radioclub"],
.floor-option-control--middle:checked ~ .floor-tab-labels.common-motion-tabs label[for="radiomiddle"],
.floor-option-control--suite:checked ~ .floor-tab-labels.common-motion-tabs label[for="radiosuite"] {
  border-bottom: 0;
  margin-bottom: 0;
}

.floor-option-control--club:checked ~ .floor-tab-labels label[for="radioclub"],
.floor-option-control--middle:checked ~ .floor-tab-labels label[for="radiomiddle"],
.floor-option-control--suite:checked ~ .floor-tab-labels label[for="radiosuite"] {
  margin-bottom: 0;
  border-bottom: 0;
  color: var(--color-black);
}

.floor-option-control--club:checked ~ .floor-tab-labels label[for="radioclub"]::after,
.floor-option-control--middle:checked ~ .floor-tab-labels label[for="radiomiddle"]::after,
.floor-option-control--suite:checked ~ .floor-tab-labels label[for="radiosuite"]::after,
.floor-information-section .floor-tab-labels .tab-label:hover::after {
  transform: scaleX(1);
}

/*access page */
/*駐車場料金表の文字が小さすぎるので */
.textBasic {font-size:var(--font-size-md);}

.parking-box ol {
  margin: 0 0 24px;
  padding-left: 1.2em;
  list-style-type:decimal;
}

.parking-box ol li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/*マンダリンコート　個室料金表組 */
.private-room-price-wrap {
	overflow-x: scroll;
	margin-top: 5%;
}
.private-room-price {
	width:100%;
	margin: 0 auto;
    border-collapse: collapse;
	white-space: nowrap;
}
.private-room-price th,
.private-room-price td {
    border: 1px solid #ccc;
    padding: 0.5em 1em;
    text-align: left;
	width: auto;
}
.private-room-price th {
    background-color: #f4f4f4;
    font-weight: 400;
}
/*レストランページ　プラシャンティのh3だけ改行するので修正 マンダリンオートの高さ調整*/
#prashanti .information_area h3 {white-space: nowrap;}
#mandarin-court .restaurants_list article .information_area h3 {line-height: 30px;}

/*写真複数枚表示 横スワイプ*/
.detail-gallery {
  width: 100%;
  margin: 0 auto 28px;
  overflow: hidden;
}
.detail-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.detail-gallery__thumbs::-webkit-scrollbar {
  display: none;
}
.detail-gallery__item {
  flex: 0 0 78%;
  width: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
}
.detail-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*表の右側の線がないので */
.event-detail-info div{border-right: 1px solid var(--color-sea-salt);} 

/*クリックで下に開くアコーディオン--------------------------------------------- */
.DetailAccordion { max-width: 100%; margin-top: 25px;}
.toggle-s {
	display: none;
}
.summary-label {		/*タイトル*/
	padding: 0.6rem 1em;
	display: block;
	color: #000;
	background:rgba(26,26,26,0.2);
	cursor: pointer;
}
.summary-label::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 8px );
	right: 20px;
	transform: rotate(135deg);
}
.summary-label,
.summary-content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.summary-content {/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.summary-content:last-child {/*本文*/
	margin-bottom:0;
}
.toggle-s:checked + .summary-label + .summary-content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle-s:checked + .summary-label::before {
	transform: rotate(-45deg) !important;
}






/*↓常に一番下に書いておく↓　PCのみ表示 */
.sp-none{display:none; }
.pc-none{display:block; }
@media screen and (min-width: 601px) {







}
@media screen and (min-width: 768px) {
/*マンダリンコート　個室料金表組 */
.private-room-price-wrap {
	overflow-x: scroll;
	-ms-overflow-style: none;
	/*Firefoxへの対応*/
	scrollbar-width: none;
	margin-top: 2%;
}	
/*写真複数枚表示 ブロックで並べる場合*/
.detail-gallery {
    display: block;
    overflow: visible;
  }
  .detail-gallery__thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    overflow: visible;
    padding: 0;
  }
  .detail-gallery__item {
    flex: none;
    width: calc((100% - 40px) / 3);
    aspect-ratio: 4 / 5;
  }

	
	
	
	
/*↓常に一番下に書いておく↓　スマホのみ表示 */
.sp-none{display:block; }
.pc-none{display:none; }	
}