@charset "utf-8";
/* ===================================================
	客室 吉祥 CSS
====================================================== */

/* ---------------------------------------------------
	delighters.js（スクロール連動アニメーション）
------------------------------------------------------ */
.delighter.fade { transform:none; opacity:0; transition: all 1s ease-out; }
.delighter.fade.started { transform:none; opacity:1!important; }

.delighter.LtoR { transform:translate(-20%); opacity:0; transition: all 1s ease-out; }
.delighter.LtoR.started { transform:none; opacity:1!important; }

.delighter.RtoL { transform:translate(20%); opacity:0; transition: all 1s ease-out; }
.delighter.RtoL.started { transform:none; opacity:1!important; }

.delighter.BtoT { transform:translateY(50px); opacity:0; transition: all 1s ease-out; }
.delighter.BtoT.started { transform:none; opacity:1!important; }

.delighter.zoom{ opacity: 1; transform: scale(1.1); transition: transform 2s ease-out;}
.delighter.zoom.started{ transform: scale(1); }

@media screen and (max-width: 600px) {
.delighter.fade { transform:none; opacity:1; transition: none; }
.delighter.fade.started { transform:none; opacity:1!important; }

.delighter.LtoR { transform:none; opacity:1; transition: none; }
.delighter.LtoR.started { transform:none; opacity:1!important; }

.delighter.RtoL { transform:none; opacity:1; transition: none; }
.delighter.RtoL.started { transform:none; opacity:1!important; }

.delighter.BtoT { transform:none; opacity:1; transition: none; }
.delighter.BtoT.started { transform:none; opacity:1!important; }
}


body {
min-width: 1140px; min-height: 100vh; background: url(../../room/renew_kissho/img/bg1.gif); color: #fff;
font-size: 16px; font-weight: normal; line-height: 2;
font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
-webkit-text-size-adjust: 100%;
}

input,
select,
textarea { font-size: 13px;}

div { -webkit-box-sizing: border-box; box-sizing: border-box;}

a { text-decoration: none; color: #fff;}
a:hover { text-decoration: underline;}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.ofi { object-fit: cover; font-family: 'object-fit: cover;' }

.v_rl{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

.view_sp{ display: none;}

.flex_col { display: flex; justify-content: space-between;}

.inner_md { width: 1100px; max-width: 90%; margin: 0 auto;}

.btn_reserve{
    --gold-1:#e2c06a;
    --gold-2:#f1d88a;
    --gold-3:#e2c06a;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:320px;
    height:60px;
    position:relative;
    border-radius:9999px;
    color:#222;
    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            var(--gold-1) 0%,
            var(--gold-2) 48%,
            var(--gold-3) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        0 3px 8px rgba(0,0,0,.15);

    overflow:hidden;
}

.btn_reserve::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            45deg,
            rgba(255,255,255,0) 34%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,0) 66%
        );

    pointer-events:none;
}

.btn_reserve span{
    font-size:18px;
    position:relative;
    z-index:1;
}

.btn_reserve::after{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    width:7px;
    height:7px;
    border-top:1px solid #8c7333;
    border-right:1px solid #8c7333;

    transform:translateY(-50%) rotate(45deg);
}
.btn_reserve:hover { opacity: .7; text-decoration: none;}

/* cormorant-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../../common/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.font_en { font-family: 'Cormorant Garamond';}
.txt_color { color: #e3c16b;}

@media screen and (max-width: 600px) {
body,
input,
select,
textarea { font-size: 16px;}
body { min-width: 0;}

.inner_md { width: 90%;}

.view_sp{ display: block;}
.view_pc{ display: none;}

.flex_col { display: block;}
}


/* ---------------------------------------------------
	header
------------------------------------------------------ */
header { position: relative;}
header .logo { display: table; width: 300px; height: auto; margin: 80px auto 30px;}
header h1 { position: relative; z-index: 2; text-align: center; color: #e3c16b; font-size: 36px; margin: 0 0 400px;}
header h1 > span:nth-of-type(1) { display: table; margin: 0 auto; font-size: 26px;}

header h1 [data-ruby] {
	position: relative;
}
header h1 [data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 13px;
	line-height: 0;
}
header h1 .font_en { display: table; margin: 0 auto; font-size: 180px; color: #fff; line-height: 1;}
header h1 .font_en span { color: #e3c16b;}

header h1+img { position: absolute; top: 140px; width: 100%; height: auto; z-index: 1;}

#sec_lead { position: relative; z-index: 2;}
#sec_lead .txt_color { display: table; margin: 10px auto 0; font-size: 26px; text-align: center;}
#sec_lead .txt_color span { font-size: 36px;}
#sec_lead .txt_color [data-ruby] {
	position: relative;
}
#sec_lead .txt_color [data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 13px;
	line-height: 0;
}
#sec_lead h2 { color: #e3c16b; font-size: 46px; text-align: center;}
#sec_lead h2+p { margin: 0 0 80px; text-align: center; font-size: 18px; line-height: 2.8;}
#sec_lead .sec_col >p { font-size: 18px; text-align: center;}
#sec_lead .sec_col >p+p { font-size: 16px;}
#sec_lead .sec_col .flex_col { margin: 40px 0 0;}
#sec_lead .sec_col .flex_col > ul { display: flex; width: 64%;}
#sec_lead .sec_col .flex_col .sec_txt { width: 33%;}

#cnav { padding: 80px 0 90px;}
#cnav h2 { margin: 0 0 40px; font-size: 26px; text-align: center;}
#cnav ul { display: flex; justify-content: space-between; text-align: center;}
#cnav ul li { width: 23.6%;}
#cnav ul a { display: block; padding: 0 0 30px; background: url(../../room/renew_kissho/img/icon_arrow1.svg)no-repeat bottom center; background-size: 11px;}
#cnav ul a:hover { opacity: .7; text-decoration: none;}


@media screen and (max-width: 600px) {
  header .logo { width: 200px;}
  header h1 { margin: 0 auto; width: 90%; line-height: 1.5; font-size: 24px;}
  header h1 > span:nth-of-type(1) { margin: 0 auto 20px; font-size: 20px;}
  header h1 .font_en { font-size: 100px;}
  header h1+img { position: static; margin: -100px auto 0;}
  
  #sec_lead .txt_color { margin: 20px auto 10px; font-size: 20px; line-height: 1.5;}
  #sec_lead h2 { font-size: 34px; line-height: 1.5;}
  #sec_lead h2+p {  margin: 15px 0 50px; font-size: 16px; text-align: left; line-height: 2.4;}
  #sec_lead .txt_color span { font-size: 30px;}
  #sec_lead .sec_col .flex_col { margin: 20px 0 0;}
  #sec_lead .sec_col .flex_col > ul { width: 100%;}
  #sec_lead .sec_col .flex_col > ul img { height: 42vw;}
  #sec_lead .sec_col .flex_col .sec_txt { width: 100%; margin: 20px 0 0;}

  #cnav { padding: 50px 0;}
  #cnav h2 { margin: 0 0 20px; font-size: 22px;}
  #cnav ul { display: block;}
  #cnav ul li { width: 100%; margin: 0 0 10px;}
  #cnav ul a { display: flex; align-items: center; padding: 0; background-color: #35312e; background-position: right 3% center;}
  #cnav ul a img { width: 30%; margin: 0 4% 0 0; height: auto;}
  #cnav ul a p { width: 66%; text-align: left;}
}

/* ---------------------------------------------------
	sec_room
------------------------------------------------------ */
#sec1,#sec3 { background: url(../../room/renew_kissho/img/bg2.gif);}
.sec_room { padding: 100px 0 120px;}
.sec_room .s_tit { display: table; margin: 0 auto 20px; padding: 1px 22px; color: #e3c16b; border: 1px solid #e3c16b; font-size: 18px;}
.sec_room h2 { padding: 0 0 40px; text-align: center; font-size: 36px;}
.sec_room .sec_photo { width: 1500px; max-width: 100%; margin: 0 auto 60px !important;}
.sec_room .sec_photo img { height: 800px;}
.sec_room .sec_photo .slick-dots { bottom: 10px;}
.sec_room .sec_photo .slick-dots li{ margin: 0; width: 28px;}
.sec_room .sec_photo .slick-dots li button:before { color: #fff; opacity: 1;}
.sec_room .sec_photo .slick-dots li.slick-active button:before { font-size: 20px;}
.sec_room .sec_txt { width: 46%;}
.sec_room .sec_txt h3 { margin: 0 0 25px; font-size: 26px; color: #e3c16b;}
.sec_room .sec_txt h3+p { padding: 0 0 30px;}
.sec_room .sec_txt h3+p+p { line-height: 2.5;}
.sec_room .sec_txt a { display: table; line-height: 1.8; margin: 5px 0 0 .6em; padding: 0 20px 0 0; background: url(../../room/renew_kissho/img/icon_arrow2.svg)no-repeat right center; background-size: 13px; border-bottom: 1px solid #fff;}
.sec_room .sec_txt a:hover { text-decoration: none; opacity: .7;}

.sec_room .sec_madori { width: 47%;}
/* .sec_room .sec_madori img { width: auto; height: auto;} */
.sec_room .calendar_489ban { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px;}
.sec_room .calendar_489ban h4 { position: absolute; width: 100%;}
.sec_room .calendar_489ban .calendar { width: 32%;}
.sec_room .calendar_489ban caption { color: #aaa; text-align: right;}
.sec_room .calendar_489ban .calendar :is(th, td) {
  text-align: center;
  border: 1px solid #ccc;
  line-height: 1.3;
}
.sec_room .calendar_489ban .calendar th {
  background: #ededed;
  padding: 10px 5px;
  font-weight: normal;
  color: #000;
}
.sec_room .calendar_489ban .calendar td {
  padding: 5px;
  background-color: #fff;
  color: #000;
}
.sec_room .calendar_489ban .calendar tbody tr:empty {
  display: none;
}
.sec_room .calendar_489ban .calendar td a { color: #000;}
.sec_room .calendar_489ban .calendar :is(th, td):first-child,
.sec_room .calendar_489ban .calendar :is(th, td):first-child a,
.sec_room .calendar_489ban .calendar td.holiday,
.sec_room .calendar_489ban .calendar td.holiday a {
  color: #dd5355;
}
.sec_room .calendar_489ban .calendar :is(th, td):last-child,
.sec_room .calendar_489ban .calendar :is(th, td):last-child a {
  color: #7f83bb;
}

.sec_room .btn_reserve { display: flex; margin: 50px auto 0;}

@media screen and (max-width: 600px) {
  .sec_room { padding: 50px 0;}
  .sec_room .s_tit { font-size: 16px;}
  .sec_room h2 { width: 90%; margin: 0 auto; padding: 0 0 20px; font-size: 22px; line-height: 1.5;}
  .sec_room .sec_txt h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.5;}
  .sec_room .sec_txt h3+p { padding: 0 0 20px;}
  .sec_room .sec_photo { margin: 0 auto 30px !important;}
  .sec_room .sec_photo img { height: 70vw;}
  .sec_room .sec_txt,
  .sec_room .sec_madori { width: 100%;}
  .sec_room .sec_madori img { height: auto;}
  .sec_room .sec_txt { margin-bottom: 30px;}
  .sec_room .sec_txt h3+p+p { line-height: 2;}
  .sec_room .calendar_489ban { display: block;}
  .sec_room .calendar_489ban .calendar { width: 100%; margin: 0 0 20px;}

  .sec_room .btn_reserve { width: 300px; height: 50px;}
  .btn_reserve span { font-size: 16px;}
  
}

/* ---------------------------------------------------
	sec_detail
------------------------------------------------------ */
#sec_detail { padding: 100px 0; background: url(../../room/renew_kissho/img/bg2.gif);}
#sec_detail h2 { padding: 8px 0 0; writing-mode: vertical-rl; font-size: 36px;}
#sec_detail h2 span { color: #e3c16b;}
#sec_detail .flex_col div { width: 1000px; max-width: 91%;}
#sec_detail .flex_col dl { padding: 30px 0; border-bottom: 1px solid #666;}
#sec_detail .flex_col dl:first-of-type { padding-top: 0;}
#sec_detail .flex_col dt::before { content: "■"; color: #e3c16b;}

@media screen and (max-width: 600px) {
  #sec_detail { padding: 50px 0 70px;}
  #sec_detail h2 { padding: 0; writing-mode: inherit; font-size: 24px;}
  #sec_detail .flex_col dl { padding: 20px 0;}
  #sec_detail .flex_col div { width: 100%; max-width: 100%;}
}


/* ---------------------------------------------------
	footer
------------------------------------------------------ */

footer { padding: 80px 0 40px; background: url(../../img/bg2.gif); text-align: center;}
footer >img { margin: 0 0 40px;}
footer >img+a { display: block; width: 320px; margin: 0 auto 40px; padding: 14px 0; background-color: #568944; text-align: center; color: #fff; border-radius: 6px;}
footer >img+a:hover { text-decoration: none;  opacity: .7; }
footer .tel-link { display: table; margin: 0 auto 30px; font-size: 36px; line-height: 1; color: #fff;}
footer .tel-link span { font-size: 24px;}
footer .tel-link .time{font-size:15px;display: block;margin-top: 10px;}

footer .tel-link+a {
    display: table;
    width: 300px;
    margin: 0 auto;
    padding: 14px 0;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;
    color: #000;
    position: relative;
}

footer .tel-link+a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 35px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #b9922d;
    border-right: 1px solid #b9922d;
    transform: translateY(-50%) rotate(45deg);
}

footer .tel-link+a span {
    display: inline;
    padding: 0 30px;
}

footer .tel-link+a:hover {
    text-decoration: none;
    opacity: .7;
}
footer .copy { padding: 30px 0 0; font-size: 12px;}


@media screen and (max-width: 600px) {
	footer { padding: 50px 0 100px;}
	footer >img { width: 213px; height: auto; margin: 0 0 26px;}
	footer >img+a { max-width: 92%; margin: 0 auto 26px;}
	footer .tel-link { font-size: 24px;}
	footer >img+a+p { margin: 0 auto; max-width: 92%;}
	footer .tel-link span { font-size: 18px;}
}