@charset "UTF-8";
/* ============================================================
   style.css … PC用（min-width:801px）※このファイル単独で完結（style_sd.css と独立）
   配色/フォント/装飾画像はこのファイル冒頭の :root で管理。
   ============================================================ */

/* ★デザイントークン（黒を基調とした大人イメージ）※PC専用・独立管理 */
:root{
  --color-text:#efe9df;
  --color-plan-btn:#a98f5e;
  --color-slide1-bg:#100f0d;
  --color-access-link:#a98f5e;
  --font-main:'Zen Old Mincho', serif;
  --font-accent:'Cormorant Garamond', serif;
  --bg-all:none;
  --bg-leaf:none;
  --bg-page:#0f0f0d;
}

html { font-size: 62.5%; }
body {
  color: var(--color-text);
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:left;
  font-size: 1.6rem;
  line-height:1.6;
  font-family: var(--font-main);
  font-weight: 400;
}
h1,h2,h3,h4 {
  text-align: left;
  width: 100%;
  display: block;
  font-weight: bold;
  margin: 0;
  padding:0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
a{text-decoration: none;}
p{margin:0;}

/* For modern browsers */
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

/* other */
.mainbody{ width: 100%; margin: 0 auto;}
.contents_wrpper {
  background: var(--bg-page);
  width: 100%;
  margin: 0 auto;
}
.serif {/*font-family: 'Vollkorn', serif;*/
  font-family: 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', '游明朝 Medium', 'YuMincho Medium', '游明朝', YuMincho, 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;}
.serif2 {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}
.tategaki {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}


/* フェードイン */

.fade01 {
	animation: fade 3.5s;
	animation-fill-mode: forwards;
	opacity: 1;
}
.fade02 {
	animation: fade 1.5s;
	animation-fill-mode: forwards;
	opacity: 1;
}
.list-mv01 {
  opacity: 0;
}
.mv01 {
  opacity: 1.0;
}
.move02 {
	animation: bottom-to-top 2s;
	animation-fill-mode: forwards;
	opacity: 1;
}
img.zoom {
	transform: scale(1.11);
}

/* fade */
@keyframes fade {
	0% { opacity: 0; }
	20% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes bottom-to-top {
	0% { opacity: 0; transform: translateY(50px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes blur-txt {
  0% {
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    perspective: 1000;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    perspective: 1000;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

.animation-delay02 { -webkit-animation-delay: .2s !important; animation-delay: .2s !important; }
.animation-delay04 { -webkit-animation-delay: .4s !important; animation-delay: .4s !important; }
.animation-delay08 { -webkit-animation-delay: .8s !important; animation-delay: .8s !important; }
.animation-delay12 { -webkit-animation-delay: 1.2s !important; animation-delay: 1.2s !important; }
.animation-delay16 { -webkit-animation-delay: 1.6s !important; animation-delay: 1.6s !important; }
.animation-delay20 { -webkit-animation-delay: 2.0s !important; animation-delay: 2.0s !important; }


/*見出し*/
h2.midashi {
  margin: 0;
  letter-spacing: 5px;
  line-height: 1.2;
  width: auto;
  padding: 35px 0 0;
  position: relative;
  z-index: 1;
  border-top: 2px solid rgba(255,255,255,0.8);
}
h2.midashi .main {
  font-weight: 600;
  font-size: 2.6rem;
  padding: 0;
  line-height: 1.8;
  display: block;
}
h2.midashi .sub {
    display: block;
    font-size: 1.5rem;
    padding: 0;
    font-weight: 400;
}


/* ----------------- head ------------------ */

#header {
  width: 100%;
  height: 100vh;
}

/* タイトル */
#top_ttl{
  width: 120px;
  height: 500px;
  text-align: center;
  margin: auto;
  position: absolute;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-weight: normal;
  font-size: 3rem;
  color: #fff;
  letter-spacing: 4px;
}
#top_ttl a { -webkit-transition: all .3s; transition: all .3s; }
#top_ttl a:hover {opacity: 0.8;}
#top_ttl .logo_hotel {
  display: block;
  width: 55px;
  height: 262px;
}
#top_ttl span { text-align: right; }

/* ナビゲーション */
#navi {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
}
#navi .logo_ikyu{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  width: 100px;
  height: auto;
}
#navi .logo_ikyu a{ -webkit-transition: all .3s; transition: all .3s; }
#navi .logo_ikyu a:hover {opacity: 0.8;}

#navi ul.menu {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: auto;
  margin: 60px 40px 0 160px;
  padding: 0;
  font-size: 1.8rem;
  list-style-type: none;
  letter-spacing: 4;
  font-weight: 400;
}
#navi ul.menu li.link {
  padding: 0 10px;
  position: relative;
  z-index: 1;
}
#navi ul.menu li.link a {
  color: #fff;
  padding: 0;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#navi ul.menu li.link a::before{
  position: absolute;
  z-index: 1;
  content: "";
  border-left: 1px solid #fff;
  height: 8px;
  width: 1px;
  top: -25px;
  left: 50%;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#navi ul.menu li.link a:hover {opacity: 0.6;}
#navi ul.menu li.link a:hover::before{ top: -20px; }

/*swiper*/
#header .ss-slider {
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
	z-index: 1;
}
#header .ss-slider .swiper-slide {
	position: relative;
	z-index: 999;
  width: 100%;
}

/*swiper1枚目設定*/
#header .ss-slider .swiper-slide.swiper-slide-00 {
	display: flex;
	align-content: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
  background: var(--color-slide1-bg);
}


/*fadeデフォルト
#header .fade {
	opacity: 0;
}*/

/*swiper縮小*/
#header .ss-slider .swiper-slide-active .slide-img,
#header .ss-slider .swiper-slide-duplicate-active .slide-img,
#header .ss-slider .swiper-slide-prev .slide-img {
	animation: zoomDown 10s linear 0s 1 normal both;
}

_:lang(x)::-ms-backdrop,#header .ss-slider .swiper-slide-active .slide-img,
_:lang(x)::-ms-backdrop,#header .ss-slider .swiper-slide-duplicate-active .slide-img,
_:lang(x)::-ms-backdrop,#header .ss-slider .swiper-slide-prev .slide-img {
	animation-play-state : paused;
}

@keyframes zoomDown {
	0% { transform: scale(1.1); }
	100% { transform: scale(1); }
}
#header .ss-slider .slide-img {
	width: 100%;
	height: 100vh;
  background: #000;
}
#header .ss-slider .slide-img img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: 50% 50%;
  opacity: 0.8;
}

/*画像位置の個別調整（案件ごとに調整）*/
#header .ss-slider .swiper-slide.swiper-slide-02 img { object-position: 50% 100% !important; }
#header .ss-slider .swiper-slide.swiper-slide-03 img{ object-position: 50% 80% !important; }
#header .ss-slider .swiper-slide.swiper-slide-04 img { object-position: 50% 20% !important; }
#header .ss-slider .swiper-slide.swiper-slide-05 img { object-position: 50% 20% !important; }

/*画像明るさ*/
#header .ss-slider .swiper-slide:after{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.2);
  content: "";
  top: 0;
  left: 0;
}
#navi, #top_ttl{ opacity: 0; }

@media screen and (max-width: 1600px) and (min-width: 1px) {
  #navi ul.menu { font-size: 1.6rem; }
  #top_ttl { height: 480px; }
}

/* ----------------- about ------------------ */

#about {
  width: 100%;
  height: 100vh;
  min-height: 780px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}
#about:before {
  position: absolute;
  z-index: 2;
  content: "";
  background: var(--bg-leaf) no-repeat right top;
  background-size: 100%;
  opacity: 0.9;
  left: calc(50% + 330px);
  top: 0;
  width: 246px;
  height: 296px;
}
#about .lead {
  width: 520px;
  margin: 0 auto;
}
#about .lead h2 {
  margin: 0;
  letter-spacing: 5px;
  line-height: 1;
  width: auto;
  padding: 35px 10px 0;
  border-top: 2px solid var(--color-text);
}
#about .lead h2 .name {
  font-weight: 600;
  font-size: 2.9rem;
  padding: 0;
  display: block;
}
#about .lead h2 .area {
  display: block;
  font-size: 1.5rem;
  padding: 0;
  font-weight: 300;
  margin-right: 20px;
}
#about .lead .txt {
  font-size: 1.9rem;
  line-height: 2.4;
  letter-spacing: 4px;
  margin-bottom: 0px;
  margin-top: 75px;
  margin-right: 50px;
}

#about .lead .btn { width: 100%; text-align: right; }
#about .lead .btn a {
  display: inline-block;
  width: 180px;
  color: #fff;
  text-align: left;
  font-size: 1.4rem;
  border-bottom: 1px solid #fff;
  line-height: 3;
  padding-left: 20px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}
#about .lead .btn a:after {
  display: block;
  position: absolute;
  z-index: 2;
  top: calc(50% - 3px);
  right: 5px;
  width: 5px;
  height: 5px;
  border-color: #fff;
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .3s;
}

#about .fade {opacity: 0;}

@media screen and (max-width: 1600px) and (min-width: 1px) {

}

/* ----------------- topics ------------------ */

#topics {
  width: 100%;
  padding: 0;
  margin: 0;
}
#topics .topics_in{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  min-height: 780px;
}
/* ■トピックス背景画像（件数ぶん nth-of-type を用意。ファイル名は案件の実画像に合わせる） */
#topics .topics_in:nth-of-type(1) {
  background: url(https://www.img-ikyu.com/contents/dg/special/2026/00003286/image/tpc01_01.jpg?auto=compress,format&fit=crop&lossless=0) no-repeat center center / cover fixed;
}
#topics .topics_in:nth-of-type(2) {
  background: url(https://www.img-ikyu.com/contents/dg/special/2026/00003286/image/tpc02_01.jpg?auto=compress,format&fit=crop&lossless=0) no-repeat center bottom / cover fixed;
}
#topics .topics_in:nth-of-type(3) {
  background: url(https://www.img-ikyu.com/contents/dg/special/2026/00003286/image/tpc03_01.jpg?auto=compress,format&fit=crop&lossless=0) no-repeat center bottom / cover fixed;
}
#topics .topics_in .txt {
  width: 520px;
  margin: 0 auto;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}
#topics .topics_in .txt .lead {
  font-size: 1.8rem;
  line-height: 2.4;
  letter-spacing: 4px;
  margin-bottom: 0px;
  margin-top: 85px;
  margin-right: 45px;
}
#topics h2.midashi .main {
  margin-right: 15px;
  font-size: 2.8rem;
}
#topics h2.midashi .sub {
  font-size: 1.5rem;
  padding-right: 10px;
}
#topics h2.midashi .sub i {
  font-family: var(--font-accent);
  font-style: normal;
  writing-mode: horizontal-tb;
  font-size: 1.2em;
  letter-spacing: 0;
  margin-top: 10px;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
#topics .bottom-to-top,#topics .fade {opacity: 0;}

/* ----------------- plan ------------------ */

#spplan {
  width: calc(100% - 40px);
  margin: 20px;
  padding: 12.5vw 5% 8.333vw;
  overflow: hidden;
  background: rgba(255,255,255,0.8);
}
#spplan .ex {
  width: 1500px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 0.729vw;
  color: #666;
}
#spplan .plan_wp {
  width: 1500px;
  max-width: 100%;
  margin: 0 auto 10.416vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
#spplan .plan_wp:nth-of-type(2) { margin-bottom: 3.126vw; }
#spplan .plan {
  width: 30%;
  margin: 0;
  text-align: center;
  letter-spacing: 4px;
  display: flex;
  flex-flow: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#spplan .plan .ttl {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#spplan .plan .ttl .midashi { border-top: 2px solid var(--color-text); }
#spplan .plan .ttl .midashi .main {font-size: 3rem; line-height: 1.6; font-weight: 600; margin-right: 10px; margin-bottom: 20px; display: inline-block;}
#spplan .plan .ttl .midashi .sub {font-size: 1.5rem;}
#spplan .plan .ttl .midashi .sub i {
  font-family: var(--font-accent);
  font-style: normal;
  writing-mode: horizontal-tb;
  font-size: 1.2em;
  letter-spacing: 0;
  margin-top: 6px;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
#spplan .plan .ttl .midashi strong {
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  padding: 8px 3px;
  display: inline-block;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  line-height: 1;
  margin-right: 10px;
  backface-visibility: hidden;
}

#spplan .plan_wp .plan h3 {
  font-size: 2.4rem;
  line-height: 1.8;
  margin: 0 30px 0 0;
  padding-top: 90px;
  display: block;
  text-align: left;
  font-weight: 400;
  width: auto;
}
#spplan .plan_wp .plan p {
  text-align: left;
  line-height: 2.2;
  padding-top: 60px;
  letter-spacing: 4px;
  margin-right: 30px;
  font-size: 1.8rem;
}
#spplan .plan_wp .img {
  width: 66%;
  margin: 0;
  align-self: flex-start;
}
#spplan .plan_wp .img img {width: 100%;}
.reverse{ flex-flow: row-reverse; }
#spplan .plan_wp.reverse .plan .ttl { width: 100%; }

/* ■装飾（葉っぱ）の配置。プラン件数に応じて nth-of-type を調整 */
#spplan .plan_wp:nth-of-type(1):before {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--bg-leaf) no-repeat right top;
  background-size: 100%;
  opacity: 0.9;
  left: calc(50% + 630px);
  top: -300px;
  width: 246px;
  height: 296px;
}
#spplan .plan_wp:nth-of-type(2):before {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--bg-leaf) no-repeat right top;
  background-size: 100%;
  opacity: 0.9;
  right: calc(50% + 570px);
  top: -250px;
  width: 246px;
  height: 296px;
}
#spplan .plan_wp:nth-of-type(2) .img,
#spplan .plan_wp:nth-of-type(3) .img{
  display: flex;
  align-items: center;
  justify-content: center;
}
#spplan .plan_wp:nth-of-type(3):before {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--bg-leaf) no-repeat right top;
  background-size: 100%;
  opacity: 0.9;
  left: calc(50% + 630px);
  top: 0;
  width: 246px;
  height: 296px;
}


a.plan_rate{
  width: 100%;
  display: block;
  margin: 0;
  padding: 17px 0;
  border: 1px solid var(--color-plan-btn);
  text-align: center;
  color: #fff !important;
  background-color: var(--color-plan-btn);
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 2rem;
  text-decoration:none;
  letter-spacing: 0;
}
a.plan_rate:hover{ opacity: 0.8; text-decoration:none; }
.plan_rate b { font-size: 2.0rem; line-height: 1.3; }
.off { display: block; }
.off strong{ font-size: 1.3rem !important; display: block; }
.shousai{ font-size: 1.3rem !important; line-height: 1.15; margin-bottom: 5px; display: block; }
.shousai b{ font-size: 1.9rem !important; }
.shousai .ll{ display: none !important; }
.shousai .s{ font-size:1.3rem !important; }
.after_point_rate { font-size: 1.9rem !important; }
#spplan .bottom-to-top,#spplan .fade {opacity: 0;}

@media screen and (max-width: 1600px) and (min-width: 1px) {
  #spplan .plan_wp .plan h3 { font-size: 2.2rem; margin: 0 35px 0 0; padding-top: 70px; }
  #spplan .plan_wp .plan p { margin-right: 25px; font-size: 1.6rem; padding-top: 70px; }
  #spplan .plan .ttl .midashi .main { font-size: 2.6rem; }
  #spplan .ex { font-size: 0.833vw; }
}

/* ----------------- photo gallery ------------------ */
#pg {
  width: 100%;
  padding: 140px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
#pg .ttl {
  width: 75px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#pg .ttl h2.midashi { border-top: 2px solid var(--color-text); }

/*swiper*/
/*スライダー*/
#pg .pg-slider  {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto !important;
}
#pg .pg-slider .swiper-wrapper {
	width: 100%;
  height: auto;
}
#pg .pg-slider .swiper-slide {
	position: relative;
	z-index: 999;
}
#pg .pg-slider .swiper-slide img { width: 100%; }
#pg .pg-slider .swiper-slide .swiper-caption {
  position: absolute;
  bottom: 15px;
  color: #fff;
  right: 25px;
  text-align: right;
  font-size: 1.4rem;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

 /*ボタン（共通）*/
 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 25px;
  position: absolute;
  z-index: 9;
  display: flex;
  justify-content: center;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px !important; }
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: rgba(255,255,255,0.8);
}
.swiper-pagination-bullet-active { opacity: 1; background: #fff; }

#pg .bottom-to-top,#pg .fade {opacity: 0;}

@media screen and (max-width: 1600px) and (min-width: 1px) {
}

/* ----------------- map ------------------ */
#access {
  width: 100%;
  padding: 50px 5% 0;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

#access .ttl { width: 75px; margin: 0 auto; margin-bottom: 50px; }
#access .ttl h2.midashi { border-top: 2px solid var(--color-text); }
.access_box{ width: 1350px; max-width: 100%; position: relative; }
.map { width: 100%; height: 600px; }
#access .contents{
  width: 100%;
  padding: 0 170px;
  margin: 25px auto;
  display: flex;
  line-height: 1;
  align-items: center;
}
#access .contents h3 { font-size: 1.8rem; display: inline-block; margin-right: 30px; }
#access .contents .txt { font-size: 1.4rem; display: inline-block; margin-right: 30px; }
#access .contents .link { font-size: 1.4rem; display: inline-block; margin-right: 30px; }
#access .contents .link a {
  background: var(--color-access-link);
  font-size: 1.1rem;
  color: #fff;
  padding: 4px 10px;
  line-height: 1;
  text-decoration: none;
}

.fukid {font-size:1.2rem; text-align:left; color:#333; width:350px; height:80px;}
.fukid a {color: #333;}
.map_photo{ width:100px; height:75px; float:left; margin:0 10px 0 0; border:0px; }
.map_directory_wp { width: 100%; max-width: 100%; }
.map_directory {width:1200px; max-width: 100%; text-align:center; margin:0 auto; padding:15px 0;}
.map_directory a {color:#333; margin:0 7px; font-size:1.5rem; margin-right: 1em;}

#access .bottom-to-top,#access .fade {opacity: 0;}

@media screen and (max-width: 1600px) and (min-width: 1px) {
}

/* ----------------- footer ------------------ */
.ft2 { width: 100%; padding: 120px 0 50px; }
.ft2 img { width: 100px; height: auto; }
address {
  font-style: normal;
  font-size: 1.1rem;
  color: #999999;
  font-family: helvetica, sans-serif, verdana;
  padding: 15px 0 20px 0;
  text-align: center;
}
/* ----------------- Page Top ------------------ */
#toPageTop {position:fixed; bottom:10px; right:50px;z-index: 9999;}
#toPageTop a {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
  border-right: 4px solid #999999;
  border-top: 4px solid #999999;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
#toPageTop a:hover img {visibility:hidden;}

/* ----------------- 共通（余白ユーティリティ） ------------------ */
.tp100 {margin-top:100px;}
.tp80 {margin-top:80px;}
.tp60 {margin-top:50px;}
.tp50 {margin-top:50px;}
.tp45 {margin-top:45px;}
.tp40 {margin-top:40px;}
.tp35 {margin-top:35px;}
.tp30 {margin-top:30px;}
.tp25 {margin-top:25px;}
.tp20 {margin-top:20px;}
.tp15 {margin-top:15px;}
.tp10 {margin-top:10px;}
.tp5 {margin-top:5px;}
.tp0{ margin-top: 0px;}
.bm50 {margin-bottom:50px;}
.bm45 {margin-bottom:45px;}
.bm40 {margin-bottom:40px;}
.bm35 {margin-bottom:35px;}
.bm30 {margin-bottom:30px;}
.bm25 {margin-bottom:25px;}
.bm20 {margin-bottom:20px;}
.bm15 {margin-bottom:15px;}
.bm10 {margin-bottom:10px;}
.bm5 {margin-bottom:5px;}
.pb220{ padding-bottom: 220px;}


.pc_none{display:none !important;}
.pc_space:after{
  content:'　\A';
  white-space: pre;
}
.opc :hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
  }

/* =====================================================================
   歓宿縁 ESHIKOTO 個別調整（黒を基調とした大人イメージ）※この案件のみ
   ===================================================================== */
/* TOPタイトル（施設ロゴ無し→テキスト＋縦組み英字。公式HPのトンマナに寄せる） */
#top_ttl{ justify-content:center; align-items:center; gap:22px; height:auto; }
#top_ttl .site-name{ font-size:3.2rem; font-weight:500; letter-spacing:12px; writing-mode:vertical-rl; -ms-writing-mode:tb-rl; text-shadow:0 0 14px rgba(0,0,0,.7); }
#top_ttl .site-en{ writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:var(--font-accent); font-size:1.25rem; letter-spacing:7px; color:rgba(255,255,255,.82); text-shadow:0 0 10px rgba(0,0,0,.7); }

/* 見出しは細身にして端正な印象に */
#about .lead h2 .name, #topics h2.midashi .main, #spplan .plan .ttl .midashi .main{ font-weight:500; }

/* ABOUT：写真4枚＋横組みの編集的レイアウト（縦書きの間延びを解消） */
#about{ height:auto; min-height:0; display:block; padding:130px 5%; }
#about:before{ display:none; }
#about .about-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:64px; }
#about .about-photos{ width:56%; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#about .about-photos figure{ margin:0; overflow:hidden; }
#about .about-photos img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 3s; }
#about .about-photos figure:hover img{ transform:scale(1.05); }
#about .about-photos .ph1{ grid-column:1 / -1; height:300px; }
#about .about-photos .ph2{ height:210px; }
#about .about-photos .ph3{ height:210px; }
#about .about-photos .ph4{ grid-column:1 / -1; height:260px; }
#about .about-lead{ width:44%; color:#efe9df; }
#about .about-lead .en{ font-family:var(--font-accent); font-style:italic; font-size:2.8rem; letter-spacing:4px; color:var(--color-plan-btn); display:block; line-height:1; }
#about .about-lead h2{ border:none; margin:14px 0 24px; padding:0; }
#about .about-lead h2 .name{ font-size:2.6rem; font-weight:500; letter-spacing:4px; display:block; }
#about .about-lead h2 .area{ font-size:1.4rem; font-weight:300; opacity:.75; display:block; margin-top:8px; }
#about .about-lead .txt{ writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; font-size:1.6rem; line-height:2.3; letter-spacing:1px; }

/* PLAN：白カード→黒基調の半透明カード＋明色文字 */
#spplan{ background:rgba(15,14,11,.55); }
#spplan .plan, #spplan .plan_wp .plan p{ color:#efe9df; }
#spplan .plan .ttl .midashi{ border-top-color:rgba(255,255,255,.5); }

/* 見出し（ギャラリー/アクセス）を明色に */
#pg .ttl h2.midashi, #access .ttl h2.midashi{ color:#efe9df; border-top-color:rgba(255,255,255,.5); }

/* トピックス④：8つのヴィラを作品集風グリッドで見せる（1枚背景ではない別レイアウト） */
#topics .topics_villa{ width:100%; padding:140px 5%; color:#efe9df; }
#topics .topics_villa .villa-txt{ max-width:760px; margin:0 auto 70px; text-align:center; writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; }
#topics .topics_villa .villa-txt .midashi{ display:inline-block; border-top:2px solid rgba(255,255,255,.5); letter-spacing:3px; }
#topics .topics_villa .villa-txt .midashi .sub i{ font-family:var(--font-accent); font-style:italic; }
#topics .topics_villa .villa-txt .lead{ margin-top:34px; line-height:2.2; letter-spacing:2px; font-size:1.7rem; }
#topics .topics_villa .villa-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
#topics .topics_villa .villa-grid figure{ margin:0; }
#topics .topics_villa .villa-grid img{ width:100%; height:230px; object-fit:cover; display:block; }
#topics .topics_villa .villa-grid figcaption{ font-size:1.3rem; letter-spacing:1px; padding-top:10px; text-align:center; }

/* =====================================================================
   歓宿縁 ESHIKOTO 追加：参考イメージ反映（TOP / TOPICS1-3 / ヴィラslider）PC
   ===================================================================== */
/* --- TOP（MV） --- */
#navi{ align-items:center; padding:30px 46px 0; box-sizing:border-box; }
#navi .brand{ width:auto; height:auto; margin:0; }
#navi .brand a{ display:flex; flex-direction:column; line-height:1; }
#navi .brand .brand-jp{ font-size:2.4rem; letter-spacing:5px; color:#fff; text-shadow:0 0 12px rgba(0,0,0,.5); }
#navi .brand .brand-en{ font-family:var(--font-accent); font-size:1.15rem; letter-spacing:6px; color:rgba(255,255,255,.85); margin-top:6px; padding-left:2px; }
#navi ul.menu{ width:auto; flex-direction:row; margin:6px 0 0; padding:0; gap:36px; font-size:1.5rem; letter-spacing:2px; }
#navi ul.menu li.link{ padding:0; }
#navi ul.menu li.link a{ font-family:var(--font-accent); }
#navi ul.menu li.link a::before{ display:none; }
#navi .logo_ikyu{ position:static; width:92px; height:auto; }

.mv-side{ position:absolute; left:40px; top:50%; transform:translateY(-50%); z-index:9998; display:flex; flex-direction:column; align-items:center; color:rgba(255,255,255,.85); text-shadow:0 0 10px rgba(0,0,0,.5); }
.mv-side .mv-en{ writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:var(--font-accent); letter-spacing:9px; font-size:1.35rem; }
.mv-side .mv-en2{ writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:var(--font-accent); letter-spacing:5px; font-size:1rem; margin-top:16px; opacity:.85; }
.mv-side .mv-scroll{ writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:var(--font-accent); letter-spacing:3px; font-size:1rem; margin-top:34px; padding-bottom:60px; position:relative; }
.mv-side .mv-scroll::after{ content:""; position:absolute; left:50%; bottom:0; width:1px; height:48px; background:rgba(255,255,255,.6); }

.mv-catch{ position:absolute; z-index:9998; left:11%; top:44%; transform:translateY(-50%); color:#fff; }
.mv-catch .c-main{ font-size:2.7rem; line-height:1.95; letter-spacing:3px; font-weight:500; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.mv-catch .c-sub{ margin-top:22px; font-size:1.4rem; line-height:1.9; letter-spacing:2px; padding-left:3px; text-shadow:0 2px 14px rgba(0,0,0,.55); }

/* --- TOPICS 1-3：全面写真＋大タイトル（左右交互） --- */
#topics .topics_in{ position:relative; padding:0 8%; }
#topics .topics_in.tp-right{ justify-content:flex-end; }
#topics .topics_in.tp-left{ justify-content:flex-start; }
#topics .topics_in::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.4)); z-index:0; }
#topics .topics_in.tp-left::before{ background:linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.05)); }
#topics .tp-inner{ position:relative; z-index:1; max-width:500px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); }
#topics .tp-no{ display:inline-block; font-family:var(--font-accent); font-style:italic; font-size:1.5rem; letter-spacing:3px; color:#fff; margin-bottom:18px; padding-left:2px; }
#topics .tp-no i{ font-style:italic; font-size:1.4em; margin-left:8px; color:var(--color-plan-btn); }
#topics .tp-ttl{ font-size:3.2rem; font-weight:500; line-height:1.5; letter-spacing:4px; margin:0; }
#topics .tp-lead{ margin-top:26px; font-size:1.55rem; line-height:2.2; letter-spacing:1.5px; }

/* --- TOPICS4：ヴィラ カードスライダー --- */
#topics .topics_villa{ padding:130px 0 140px; }
#topics .topics_villa .villa-txt{ padding:0 5%; }
#topics .topics_villa .villa-slider{ max-width:1200px; margin:56px auto 0; padding:0 60px; position:relative; }
#topics .topics_villa .villa-slider figure{ margin:0; }
#topics .topics_villa .villa-slider img{ width:100%; height:300px; object-fit:cover; display:block; }
#topics .topics_villa .villa-slider figcaption{ margin-top:14px; text-align:center; font-size:1.35rem; letter-spacing:1px; color:#efe9df; }
#topics .topics_villa .villa-swiper-pagination{ position:static; margin-top:26px; text-align:center; }

/* =====================================================================
   歓宿縁 ESHIKOTO 追加②：ロゴ / ABOUTボタン / PLAN再調整 / villaドット  PC
   ===================================================================== */
/* ブランドロゴ（headerLogoWH.svg） */
#navi .brand img{ width:190px; height:auto; display:block; }

/* ABOUT：施設詳細ボタン */
#about .about-lead .about-btn{ margin-top:38px; }
#about .about-lead .about-btn a{ display:inline-flex; align-items:center; gap:16px; font-family:'Cormorant Garamond', 'Zen Old Mincho', serif; font-size:1.45rem; letter-spacing:3px; color:#efe9df; border:1px solid rgba(255,255,255,.55); padding:15px 34px; transition:all .35s; }
#about .about-lead .about-btn a::after{ content:"→"; transition:transform .35s; }
#about .about-lead .about-btn a:hover{ background:var(--color-plan-btn); border-color:var(--color-plan-btn); color:#fff; }
#about .about-lead .about-btn a:hover::after{ transform:translateX(5px); }

/* PLAN：1枚画像（スライドなし）＋横組み・バランス調整 */
#spplan{ padding:110px 5% 96px; }
#spplan .plan_wp{ align-items:center; margin:0 auto 72px; gap:56px; flex-wrap:nowrap; }
#spplan .plan_wp:last-child{ margin-bottom:0; }
#spplan .plan_wp:before{ display:none; }
#spplan .plan_wp .img{ width:56%; margin:0; align-self:center; }
#spplan .plan_wp .img img{ width:100%; height:auto; display:block; }
#spplan .plan{ width:44%; display:block; text-align:left; letter-spacing:0; }
#spplan .plan .ttl{ writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; display:block; width:100%; margin:0; }
#spplan .plan .ttl .midashi{ border-top:2px solid rgba(255,255,255,.5); padding:26px 0 0; letter-spacing:0; }
#spplan .plan .ttl .midashi .sub{ font-family:var(--font-accent); font-style:italic; font-size:1.7rem; letter-spacing:2px; color:var(--color-plan-btn); display:block; }
#spplan .plan .ttl .midashi .sub i{ font-style:italic; margin-left:8px; }
#spplan .plan .ttl .midashi .main{ font-size:2.1rem; font-weight:500; line-height:1.7; letter-spacing:1px; margin:14px 0 0; display:block; }
#spplan .plan .plan_rate{ margin-top:34px; max-width:380px; padding:16px 0; }

/* TOPICS4：ページネーションのドット位置を近づける */
#topics .topics_villa{ padding:120px 0 90px; }
#topics .topics_villa .villa-swiper-pagination{ position:static; margin-top:16px; text-align:center; }
#topics .topics_villa .villa-swiper-button-next{ right:14px; }
#topics .topics_villa .villa-swiper-button-prev{ left:14px; }

/* --- TOPICS1-3 背景クロスフェード（A案） --- */
#topics .topics_in{ overflow:hidden; }
#topics .tp-bg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
#topics .tp-bg, #topics .tp-bg .swiper-wrapper, #topics .tp-bg .swiper-slide{ height:100%; }
#topics .tp-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
#topics .topics_in::before{ z-index:1; }
#topics .tp-inner{ z-index:2; }

/* =====================================================================
   歓宿縁 ESHIKOTO 修正：TOPナビを上部バーに固定 / レイアウト整理  PC
   ===================================================================== */
#navi{ position:absolute; top:0; left:0; right:0; width:100%; height:auto; margin:0; padding:26px 4%; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; z-index:9999; }
#navi .brand{ position:static; width:auto; height:auto; margin:0; flex:0 0 auto; }
#navi .brand a{ display:block; }
#navi .brand img{ width:168px; height:auto; display:block; }
#navi ul.menu{ position:static; width:auto; flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:34px; margin:0; padding:0; font-size:1.5rem; letter-spacing:2px; }
#navi ul.menu li.link{ padding:0; }
#navi ul.menu li.link a{ font-family:var(--font-accent); color:#fff; }
#navi ul.menu li.link a::before{ display:none; }
#navi .logo_ikyu{ position:static; width:84px; height:auto; margin:0; flex:0 0 auto; }
#navi .logo_ikyu img{ width:100%; height:auto; display:block; }
/* キャッチ位置をナビと干渉しない中段へ */
.mv-catch{ left:13%; top:48%; }
.mv-side{ left:44px; }

/* =====================================================================
   歓宿縁 ESHIKOTO 修正②：縦長ロゴを左固定 / ナビ右寄せ / mv-side廃止  PC
   ===================================================================== */
.mv-logo{ position:absolute; top:30px; left:38px; z-index:9999; display:block; }
.mv-logo img{ height:clamp(340px,58vh,500px); width:auto; display:block; }
.mv-side{ display:none; }
#navi{ justify-content:flex-end; gap:44px; padding:30px 48px; }
#navi ul.menu{ flex:0 0 auto; }
.mv-catch{ left:210px; top:47%; }

/* キャッチの横はみ出し防止 */
.mv-catch{ max-width:60%; }

/* MV左下：scroll インジケーター（ロゴの下） */
.mv-scroll{ position:absolute; left:54px; bottom:46px; z-index:9999; writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:var(--font-accent); font-size:1.2rem; letter-spacing:3px; color:rgba(255,255,255,.85); text-shadow:0 0 10px rgba(0,0,0,.6); padding-bottom:56px; }
.mv-scroll::after{ content:""; position:absolute; left:50%; bottom:0; width:1px; height:44px; background:rgba(255,255,255,.6); }

/* TOPICS4：スライド高さを中身に合わせて詰める（下の余白＝ドット離れを解消） */
#topics .topics_villa .villa-slider .swiper-wrapper{ height:auto !important; align-items:flex-start; }
#topics .topics_villa .villa-slider .swiper-slide{ height:auto !important; }
#topics .topics_villa .villa-swiper-pagination{ position:static; margin-top:14px; text-align:center; }

/* TOPICS4：流れる連続移動（マーキー）／左右余白なし PC */
#topics .topics_villa .villa-slider{ max-width:none; margin:56px 0 0; padding:0; }
#topics .topics_villa .villa-slider .swiper-wrapper{ transition-timing-function:linear !important; align-items:flex-start; height:auto !important; }
#topics .topics_villa .villa-slider .swiper-slide{ width:32vw; height:auto !important; }
#topics .topics_villa .villa-slider img{ width:100%; height:23vw; object-fit:cover; display:block; }
#topics .topics_villa .villa-slider figcaption{ margin-top:14px; text-align:center; font-size:1.3rem; letter-spacing:1px; color:#efe9df; }
#topics .topics_villa .villa-swiper-button, #topics .topics_villa .villa-swiper-pagination{ display:none !important; }

/* TOPICS4：CSSマーキー（8枚×2セット無限スクロール・左右余白なし） PC */
#topics .topics_villa .villa-marquee{ width:100%; margin-top:56px; overflow:hidden; }
#topics .topics_villa .villa-track{ display:flex; gap:16px; width:max-content; animation:villaScroll 55s linear infinite; }
#topics .topics_villa .villa-track figure{ margin:0; flex:0 0 auto; width:32vw; }
#topics .topics_villa .villa-track img{ width:100%; height:23vw; object-fit:cover; display:block; }
#topics .topics_villa .villa-track figcaption{ margin-top:14px; text-align:center; font-size:1.3rem; letter-spacing:1px; color:#efe9df; }
#topics .topics_villa .villa-marquee:hover .villa-track{ animation-play-state:paused; }
@keyframes villaScroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }

/* scroll をロゴの左右中心に合わせる（ロゴ中心 ≈ 100px） */
.mv-scroll{ left:100px; transform:translateX(-50%); }

/* TOPICS4：各画像の左上にグループロゴを重ねる PC */
#topics .topics_villa .villa-track figure{ position:relative; }
#topics .topics_villa .villa-track .villa-logo{ position:absolute; top:16px; left:16px; width:78px; height:auto; z-index:2; }

/* TOPICS1-3：空いた側に毛筆スタイルの大きな装飾漢字（logoJou風＝Yuji Boku） PC */
#topics .tp-kanji{ position:absolute; z-index:2; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; -ms-writing-mode:tb-rl; font-family:'Yuji Boku', serif; font-weight:400; font-size:clamp(84px,11vw,152px); letter-spacing:10px; color:rgba(255,255,255,.92); text-shadow:0 2px 24px rgba(0,0,0,.55); pointer-events:none; }
#topics .topics_in.tp-right .tp-kanji{ left:9%; }
#topics .topics_in.tp-left .tp-kanji{ right:9%; }

/* TOPICS装飾漢字：New Tegomin・横書き・小さめ・かっこよく（上書き） PC */
#topics .tp-kanji{ writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; font-family:'New Tegomin', serif; font-weight:400; font-size:clamp(34px,4vw,60px); letter-spacing:8px; color:rgba(255,255,255,.9); text-shadow:0 2px 16px rgba(0,0,0,.5); }

/* TOPICS / PLAN のセクション見出し（ギャラリー・アクセスと同じ体裁） PC */
#topics > .ttl, #spplan > .ttl{ width:75px; margin:0 auto; }
#topics > .ttl{ padding:120px 0 70px; }
#spplan > .ttl{ padding:0 0 64px; }
#topics > .ttl h2.midashi, #spplan > .ttl h2.midashi{ color:#efe9df; border-top:2px solid rgba(255,255,255,.5); }

/* PLAN料金：下段（割引後）を主役に・上段は控えめ PC */
#spplan a.plan_rate{ font-size:1.5rem; line-height:1.55; padding:18px 12px; }
#spplan .plan_rate > b{ font-size:1.7rem !important; font-weight:600; }         /* 上段の通常価格 */
#spplan .off{ display:block; margin-top:10px; }
#spplan .shousai{ font-size:1.4rem !important; display:block; line-height:1.3; }
#spplan .shousai b{ font-size:1.4rem !important; }                              /* 「10%」等 */
#spplan .shousai .s{ font-size:1.25rem !important; }                           /* 「税込」 */
#spplan .shousai b.after_point_rate{ font-size:2.8rem !important; font-weight:700; line-height:1.15; }  /* 割引後価格＝主役 */

/* TOPキャッチを小さめに（調整） PC */
.mv-catch .c-main{ font-size:2.05rem; line-height:1.95; letter-spacing:2px; }
.mv-catch .c-sub{ font-size:1.2rem; margin-top:18px; }

/* MV左カラム：ロゴと scroll を同一軸で中央そろえ（左右中心ズレ解消） PC */
.mv-left{ position:absolute; top:30px; left:38px; bottom:44px; z-index:9999; display:flex; flex-direction:column; align-items:center; }
.mv-logo{ position:static; top:auto; left:auto; }
.mv-logo img{ display:block; }
.mv-scroll{ position:static; left:auto; right:auto; top:auto; bottom:auto; transform:none; margin-top:auto; }
.mv-scroll::after{ left:50%; }

/* PLAN料金：割引後価格を少し小さく（調整） PC */
#spplan .shousai b.after_point_rate{ font-size:2.2rem !important; }

/* PLAN料金：行間を少し詰める（調整） PC */
#spplan a.plan_rate{ line-height:1.35; }
#spplan .off{ margin-top:4px; }
#spplan .shousai{ line-height:1.2; }

/* Googleマップの高さを低く（調整） PC */
#access .map{ height:380px; }

/* TOPICS04 の番号「04」を 01-03 と同じアクセント色に */
#topics .topics_villa .villa-txt .midashi .sub i{ color:var(--color-plan-btn); }

/* TOPICS1-3：背景スライドの前後アロー（スライドと分かるように） PC */
#topics .topics_in::before{ pointer-events:none; }
#topics .tpbg-prev, #topics .tpbg-next{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.7rem; line-height:1; background:rgba(0,0,0,.15); cursor:pointer; transition:all .3s; -webkit-tap-highlight-color:transparent; }
#topics .tpbg-prev:hover, #topics .tpbg-next:hover{ background:rgba(0,0,0,.45); border-color:#fff; }
#topics .tpbg-prev{ left:26px; }
#topics .tpbg-next{ right:26px; }
#topics .swiper-button-disabled{ opacity:1; }

/* TOPICSアロー：円形をやめて矢印だけに PC */
#topics .tpbg-prev, #topics .tpbg-next{ width:auto; height:auto; border:none; border-radius:0; background:none; font-size:3rem; text-shadow:0 1px 10px rgba(0,0,0,.6); }
#topics .tpbg-prev:hover, #topics .tpbg-next:hover{ background:none; border:none; opacity:.7; }

/* TOPICS04 の番号「04」前に空白（01-03と同じ） */
#topics .topics_villa .villa-txt .midashi .sub i{ margin-left:8px; }

/* TOPICSセクション見出しの main を他セクションと同じ 2.6rem に（28px→26px） */
#topics > .ttl h2.midashi .main{ font-size:2.6rem; margin-right:0; }

/* セクション区切り：黒の濃淡をごく僅かに交互（区切りを認識しやすく） */
#about  { background:#141311; }   /* 少し明るい黒 */
#spplan { background:#0b0b09; }   /* 少し暗い黒（旧rgba指定を上書き） */
#pg     { background:#141311; }   /* 少し明るい黒 */
#access { background:#0b0b09; }   /* 少し暗い黒 */

/* セクション区切り：濃淡をはっきりめに（調整） */
#about  { background:#1e1b16; }
#spplan { background:#080706; }
#pg     { background:#1e1b16; }
#access { background:#080706; }

/* ACCESS：上の余白を他セクションと揃える PC */
#access{ padding-top:120px; }