/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/* body
----------------------------------------*/
:root {
  /* --header-height変数にヘッダーの高さを設定 */
  --header-height: 130px; 
}

html {
  /* ヘッダーの高さ分、スクロール位置を調整 */
  scroll-padding-top: var(--header-height);
  /* スムーズなスクロールを有効にする */
  scroll-behavior: smooth;
}

body {
font-family: "Shippori Mincho B1", serif;
font-weight: 400;
font-style: normal;
background: #fff;
}
img{
max-width: 100%;
}
iframe{
width: 100%;
}


/* アニメーションの初期状態（非表示） */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* アニメーション後の状態（表示） */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/*
----------------------------------------*/

/* #headnavを画面上部に固定 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* スクロール時のスタイル変更 */
.fixed-header.scrolled {
  background-color: white;
  color: black;
}

/* ヘッダー内の要素（リンクなど）のスタイル */
.fixed-header.scrolled a {
  color: black;
}

.fixed-header a {
  color: white;
}

.fixed-header img.logo-wh{
display: inline;
width: 100%;
}
.fixed-header img.logo-br{
display: none;
width: 0;
}


.fixed-header.scrolled img.logo-wh{
display: none;
width: 0;
}
.fixed-header.scrolled img.logo-br{
display: inline;
width: 100%;
}

.wp-block-navigation ul, .wp-block-navigation ul li{
font-size: 18px;
}




/* ハンバーガーメニューボタンの基本スタイル */
.hamburger-menu {
  position: fixed;
  top: 50px;
  right: 3%;
  width: 50px;
  height: 50px;
  z-index: 999;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none !important;
}

/* 2本線のスタイル */
.hamburger-menu span {
  display: block;
  width: 30px;
  height: 2px; /* 線の高さを2pxに変更 */
  background-color: #fff;
  margin: 6px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fixed-header .hamburger-menu.active span,
.fixed-header.scrolled .hamburger-menu span {
  background-color: #333;
}
/* 中央の線は非表示のまま */
.hamburger-menu span:nth-child(2) {
  display: none;
}

/* activeクラスが付与された時のスタイル */
.hamburger-menu.active span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}


/* ナビゲーションメニューの基本スタイル（非表示状態） */
.main-navigation {
  position: fixed;
  top: 0;
  right: 0; /* 右端に配置 */
  width: 100%;
  height: 100%;
  color: #000 !important;
  background-color: rgba(255, 255, 255, 0.95) !important; /* 半透明の白背景 */
  z-index: 998; /* ハンバーガーメニューより下に配置 */
  visibility: hidden; /* 非表示 */
  opacity: 0; /* 透明 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding-top: 100px; /* ヘッダー分を開ける */
  display: block;
  text-align: center;
  justify-content: center;
  align-items: flex-start;
}
.main-navigation .is-layout-flex{
  justify-content: center;
  align-items: flex-start;
}
/* activeクラスが付与された時のスタイル（表示状態） */
.main-navigation.active {
  visibility: visible;
  opacity: 1;
}

/* メニュー項目（ul, li, a）のスタイル */
.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
}

.main-navigation li {
  margin: 20px 0;
}

.main-navigation a {
  font-size: 24px;
  color: #333;
  text-decoration: none;
}



/* ナビゲーションメニューの基本スタイル */
.main-navigation .wp-block-navigation__responsive-container{
  /* position: fixed; で画面に固定 */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* 半透明の白背景 */
  z-index: 998; /* ハンバーガーメニューより下に配置 */

  /* 初期状態では非表示 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /*padding-top: 100px;  ヘッダー分を開ける */

  /* メニュー項目を中央に配置 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}


.wp-block-social-links {
    gap: 0.8rem; /* ここにお好みの間隔をピクセルやemなどで指定 */
    margin-left:0.8em;
}

.wp-block-social-links a[href*="lin.ee"] svg {
    /* 元のアイコンを非表示にする */
    display: none !important;
}

.wp-block-social-links a[href*="lin.ee"] {
    /* LINEアイコンの画像に置き換える */
    background-image: url('assets/layout/icon_line_br.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1em;
    height: 1em;
}


/* ハンバーガーメニューがクリックされたら表示 */
.main-navigation.active .wp-block-navigation__responsive-container {
  visibility: visible;
  opacity: 1;
  width: auto;
}

/* メニュー項目（ul, li, a）のスタイル */
.main-navigation.active .wp-block-navigation__responsive-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
}


.main-navigation.active .wp-block-navigation__responsive-container li {
  margin: 20px 0;
}
.main-navigation.active .wp-block-navigation__responsive-container li a{
font-size: 18px;
}

.main-navigation.active .wp-block-navigation__responsive-container a {
  font-size: 24px;
  color: #333;
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
.main-navigation.active{
  display: block;
}
.main-navigation.active .is-layout-flex{
  display: block;
}
.main-navigation.active .wp-block-navigation__responsive-container{
display: block;
position: relative;
padding: 0;
}
.main-navigation.active .wp-block-navigation__responsive-container ul {
  display: block;
}
.main-navigation.active .wp-block-navigation__responsive-container li{
  display: block;
  text-align: center;
}
.main-navigation.active .wp-block-navigation__responsive-container .wp-block-social-links li {
    display: inline-block !important;
    margin: 0 5px;
}
}



/*
----------------------------------------*/
.wp-block-site-title{
max-width: 140px;
}

@media screen and (max-width: 1000px) {
.pc-headmenu{
display: none !important;
}
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{
display: none !important;
}
}


/*
----------------------------------------*/
.languagebtn select{
background: none;
padding: 0.5em;
color: #fff;
font-size: 100%;
font-family: "Shippori Mincho B1", serif;
font-weight: 400;
font-style: normal;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.languagebtn select option{
color: #000;
}

.fixed-header .main-navigation.active .languagebtn select,
.fixed-header.scrolled .languagebtn select {
color: #000;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
/*
----------------------------------------*/
.main-section {
margin: 0 !important;
margin-block-start: 0 !important;
/* main-sectionを画面の100%幅・高さにする */
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw); /* 左右の余白をなくす */
  margin-right: calc(50% - 50vw);
  position: relative; /* 背景画像のコンテナとして設定 */
}
/* 背景画像のスタイル */
.main-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/layout/main.jpg'); /* ここに画像パスを記述 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* 背景をコンテンツの後ろに配置 */
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 1s ease-in-out; /* 1秒かけてゆっくりと表示 */
}

/* ページ読み込み後に画像を完全に表示 */
.main-section.loaded::before {
  opacity: 1;
}


.main-image {
margin: 0 !important;
margin-block-start: 0 !important;
  width: 100vw;
  height: 150px;
  margin-left: calc(50% - 50vw); /* 左右の余白をなくす */
  margin-right: calc(50% - 50vw);
  position: relative; /* 背景画像のコンテナとして設定 */
}
/* 背景画像のスタイル */
.main-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/layout/main.jpg'); /* ここに画像パスを記述 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* 背景をコンテンツの後ろに配置 */
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 1s ease-in-out; /* 1秒かけてゆっくりと表示 */
}

/* ページ読み込み後に画像を完全に表示 */
.main-image.loaded::before {
  opacity: 1;
}



/*
----------------------------------------*/
/* main-section内のh1とロゴの配置を中央に設定 */
.main-section h1,
.main-image h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  z-index: 10;
  text-align: center;
}
/* ロゴ画像のスタイル */
.main-section h1 img {
  width: 300px; /* 初期状態のロゴサイズ */
  height: auto;
  opacity: 0; /* 初期状態は非表示 */
  transition: all 1.6s ease-in-out;
  transition-delay: 0.9s; /* 0.8秒遅らせてアニメーションを開始 */
}
.main-image h1 img {
display: none !important;
  width: 150px; /* 初期状態のロゴサイズ */
  height: auto;
  opacity: 0; /* 初期状態は非表示 */
  transition: all 1.6s ease-in-out;
  transition-delay: 0.9s; /* 0.8秒遅らせてアニメーションを開始 */
}
/* アニメーション後のロゴのスタイル */
.main-section.loaded h1 img {
  width: 300px; /* アニメーション後のサイズ */
  opacity: 1; /* 不透明にして表示 */
}
.main-image.loaded h1 img {
  width: 150px; /* アニメーション後のサイズ */
  opacity: 1; /* 不透明にして表示 */
}

@media screen and (max-width: 900px) {
.main-section h1 img,
.main-image h1 img {
  width: 100%;  
}
.main-section.loaded h1 img {
  width: 80%;  
}
.main-image.loaded h1 img {
  width: 80%;  
}
}

/*
----------------------------------------*/
.stay-yoyakubtn{
position: fixed;
inset: 0;
margin: auto auto 50px;
width: 50%;
max-width: 274px;
height: 68px;
z-index: 9;
transition: opacity 0.3s ease;
opacity: 1;
}
.stay-yoyakubtn a{
display: block;
padding: 1em;
color: #000;
font-size: 20px !important;
text-align: center;
text-decoration: none;
background: #fff;
border-radius: 9999px;
box-sizing: border-box;
box-shadow: 0 0 5px #000;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
}

.stay-yoyakubtn.hidden {
  opacity: 0;
  pointer-events: none; /* クリック不可にする */
}

/*Reservation
----------------------------------------*/
#Reservation{
clear: both;
color: #fff;
background: #131105 url("assets/index/reservation_img.jpg") no-repeat center center / cover;
}
#Reservation .cont{
padding: 70px 0;
box-sizing: border-box;
}
#Reservation h2{
margin-top: 0;
color: #fff;
font-size: 3rem;
}
#Reservation h2 .en{
display: inline-block;
margin-left: 2em;
font-size: 44%;
}
#Reservation .stay-yoyakubtn2{
width: 50%;
max-width: 350px;
margin-bottom: 1.8em;
}
#Reservation .stay-yoyakubtn2 a{
display: block;
padding: 1em;
color: #000;
font-size: 18px !important;
text-align: center;
text-decoration: none;
background: #fff;
border-radius: 9999px;
box-sizing: border-box;
box-shadow: 0 0 5px #000;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.2);
position: relative;
}
#Reservation .stay-yoyakubtn2 a::after {
content: ''; /* 空のコンテンツ */
display: inline-block; /* インラインブロックとして扱う */
width: 0.6em; /* 矢印の幅 */
height: 0.6em; /* 矢印の高さ */
border-top: 1px solid currentColor; /* 上側のボーダー */
border-right: 1px solid currentColor; /* 右側のボーダー */
transform: rotate(45deg); /* 45度回転させて「＞」の形にする */
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%) rotate(45deg); /* 中央に配置し、回転 */
transition: all 0.3s ease;
}

#Reservation .tel-yoyaku{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#Reservation .tel-yoyaku .tel-no{
font-family: "Shippori Mincho B1", serif;
font-weight: 400;
}
#Reservation .tel-yoyaku .tel-no a{
color: #fff;
font-size: 2.6rem;
text-decoration: none;
}

@media screen and (max-width: 1422px) {
#Reservation .cont{
width: 90%;
}
}

@media screen and (max-width: 390px) {
#Reservation h2{
font-size: 2.8rem;
}
#Reservation .tel-yoyaku .tel-no a{
font-size: 2.5rem;
}
}


/*footer
----------------------------------------*/
footer .wp-block-columns{
display: block;
position: relative;
}

footer h2.copy{
font-size: 35px;
margin: 0 0 2em;
}

.footnav{
margin-bottom: 2em;
}
.footnav nav.is-layout-flex{
display: block;
}

.footnav .wp-block-navigation__container{
display: block;
}

.footnav .wp-block-navigation ul li{
margin-bottom: 1em;
}


footer .wp-block-columns .address{
position: absolute;
top: 0;
right: 0;
width: 40%;
max-width: 400px;
font-size: 15px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
text-align: right;
}

footer .wp-block-columns .address .foot-logo{
width: 100%;
max-width: 180px;
}
footer .wp-block-columns .address .addr-text{
padding: 2em 0 1em;
}
footer .wp-block-columns .address .addr-text h1,
footer .wp-block-columns .address .addr-text h3{
margin-bottom: 0.5em;
font-size: 20px;
}
footer .wp-block-columns .address .addr-text h1 br.sp,
footer .wp-block-columns .address .addr-text h3 br.sp{
display: none;
}


.footnav .wp-block-social-links{
display: none !important;
}
footer .wp-block-columns .address .wp-block-social-links{
display: inline-block;
margin: 0 0 0 auto;
padding: 0;
}
footer .wp-block-columns .address .wp-block-social-links li{
display: inline-block;
margin-right: 0.5em;
font-size: 18px;
list-style: none;
}
footer .wp-block-columns .address .wp-block-social-links a{
font-size: 24px;
display: block;
}
footer .wp-block-columns .address .wp-block-social-links a[href*="lin.ee"] {
width: 1em;
height: 1em;
}

footer .copyright{
text-align: right;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
}

footer .jigyou-saikouchiku{
font-size: 11px;
margin-top: 1em;
}


@media screen and (max-width: 1000px) {
/*footer.wp-block-template-part{
padding-bottom: 70px;
}*/
footer .wp-block-columns .address{
position: relative;
right: auto;
text-align: left;
width: 100%;
}
footer .copyright{
text-align: right;
font-size: 14px;
position: relative;
right: auto;
}
}
@media screen and (max-width: 900px) {
footer h2.copy{
font-size: 28px;
}
}
@media screen and (max-width: 760px) {
footer .wp-block-columns .address .wp-block-social-links {
margin: 0 auto;
padding: 0;
}
footer .copyright{
text-align: left;
margin-top: 2em;
}
}
@media screen and (max-width: 390px) {
footer h2.copy{
font-size: 28px;
}
footer .wp-block-columns .address .addr-text h1 br.sp,
footer .wp-block-columns .address .addr-text h3 br.sp{
display: inline;
}
}






/*
----------------------------------------*/
#ownersmessage{
clear: both;
margin-top: 100px;
margin-bottom: 180px;
}
#ownersmessage .cont{
overflow: hidden;
}
#ownersmessage h2{
margin-bottom: 100px;
text-align: center;
}
#ownersmessage .img{
float: left;
width: 40%;
margin-right: 10%;
}
#ownersmessage .text{
float: left;
width: 47%;
line-height: 2;
}
@media screen and (max-width: 1422px) {
#ownersmessage .cont{
max-width: 90%;
}
}
@media screen and (max-width: 900px) {
#ownersmessage{
margin-bottom: 5em;
}
#ownersmessage h2{
margin-bottom: 1.5em;
}
#ownersmessage .img,
#ownersmessage .text{
float: none;
width: 100%;
margin-right: 0;
}
#ownersmessage .text{
line-height: 1.8;
}
}


/*
----------------------------------------*/
#concept{
clear: both;
}
#concept .cont{
position: relative;
padding-bottom: 150px;
}
#concept h2{
}
#concept h3{
margin: 0 0 1em;
font-size: 1.5rem;
}
#concept .text{
width: 50%;
max-width: 500px;
line-height: 2;
}
#concept .img1{
position: absolute;
top: 0;
right: 0;
max-width: 318px;
}
#concept .img2{
position: absolute;
top: 48%;
left: 55%;
max-width: 414px;
}

@media screen and (max-width: 1422px) {
#concept .cont{
max-width: 90%;
}
}
@media screen and (max-width: 1000px) {
  #concept .cont {
    padding-bottom: 3em;
  }
  
  /* PC向け画像の配置をリセット */
  #concept .img1,
  #concept .img2 {
    position: static; /* absoluteを解除 */
    top: auto;
    left: auto;
    max-width: 414px;
  }

  /* 画像ラッパーを正しく配置 */
  #concept .image-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 40%;
    max-width: 414px;
  }
}

@media screen and (max-width: 900px) {
  #concept {
    margin-top: 3em;
  }
  #concept h2 {
    margin-bottom: 1.5em;
  }
  #concept .text {
    line-height: 1.8;
  }
}

@media screen and (max-width: 560px) {
  #concept .text{
    margin: 0 0 1em;
    width: 100%;
    max-width: 100%;
  }
  #concept .image-wrapper {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    display: flex;
    flex-direction:initial;
    gap:0;
    width: 100%;
    max-width: 100%;
  }
}


/*
----------------------------------------*/
#news{
clear: both;
background: #FAFAFA;
padding: 100px 0 10px;
}

#news .wp-block-post .wp-block-template-part .has-global-padding{
padding: 0;
border-bottom: 1px solid #707070;
}
#news .wp-block-post .wp-block-template-part .has-global-padding .taxonomy-category{
padding: 0 0.5em;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}
#news .wp-block-post  h2.has-large-font-size{
font-size: 1.3rem !important;
}
#news .wp-block-post .wp-block-post-excerpt__excerpt{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}
#news .wp-block-post .wp-block-post-date{
display: none;
}
.wp-block-post-date{
margin-right: 1em;
}


.wp-block-post-featured-image img,
.wp-block-post-featured-image .block-editor-media-placeholder,
.wp-block-post-featured-image .wp-block-post-featured-image__overlay{
border-radius: 0;
}


/* --- CSS変数の定義（テーマに合わせて適宜調整）--- */
:root {
    --wp--preset--spacing--20: min(1.5rem, 2vw);
    --wp--preset--spacing--30: min(2.5rem, 3vw);
    --wp--preset--spacing--40: min(4rem, 5vw);
    --wp--preset--spacing--50: min(6.5rem, 8vw);
    --wp--preset--font-size--small: 0.9rem;
    --wp--preset--font-size--large: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
    --wp--preset--color--contrast: #111111;
    --wp--preset--color--contrast-2: #636363;
    --wp--style--global--wide-size: 1280px;
}

/* --- 全体レイアウト --- */
.is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size);
}

/* --- 投稿リスト（デスクトップ向け）--- */
.columns-3.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--30);
    margin: 0;
    padding: 0;
}

/* --- 投稿リスト（モバイル向け）--- */
@media (max-width: 782px) {
    .columns-3.is-layout-grid {
        grid-template-columns: 1fr; /* 1列に変更 */
    }
}

/* --- 投稿アイテムのスタイル --- */
.columns-3.is-layout-grid > li {
    list-style: none;
}
.columns-3.is-layout-grid > li a{
text-decoration: none;
}

/* --- アイキャッチ画像のスタイル --- */
.wp-block-post-featured-image {
    aspect-ratio: 4/3;
    padding-bottom: var(--wp--preset--spacing--20);
    margin-bottom: 0;
}

.wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- タイトルと抜粋のグループ --- */
.wp-block-group.is-vertical {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 0; /* padding-topのスタイルを0に修正 */
}

/* --- タイトル、カテゴリーなどの配置 --- */
.wp-block-group.is-content-justification-left {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: center; /* 垂直方向の中央揃え */
}

/* --- フォントサイズ、色の適用 --- */
.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

.has-contrast-2-color {
    color: var(--wp--preset--color--contrast-2) !important;
}

.has-small-font-size {
    font-size: var(--wp--preset--font-size--small) !important;
}







@media screen and (max-width: 1422px) {
#news .cont{
max-width: 90%;
}
}
@media screen and (max-width: 1000px) {
#news{
clear: both;
background: #FAFAFA;
padding: 2em 0 2em;
}
}


/*
----------------------------------------*/
#contents{
clear: both;
}
#contents h2{
margin-bottom: 2em;
text-align: center;
}
#contents .contents-list{
clear: both;
width: 90%;
max-width: 1620px;
margin: 0 auto 130px;
position: relative;
overflow: hidden;
}
#contents .contents-list h3{
margin: 0 0 1.5em;
padding: 5px 0 7px 0.5em;
font-size: 3rem;
font-weight: 400;
border-left: 1px solid #707070;
}
#contents .contents-list h3 .en{
display: block;
font-size: 44%;
font-family: "Cormorant", serif;
font-weight: 400;
padding-top: 1em;
}
#contents .contents-list h4{
margin: 0 0 1em;
font-size: 1.9rem
}
#contents .contents-list .detail{
margin-bottom: 1em;
width: 31%;
text-align: left;
}
#contents .contents-list .img1{
width: 55%;
}
#contents .contents-list .sub-img{
clear: both;
width: 90%;
max-width: 1280px;
margin: 0 auto;
padding: 100px 0 0;
overflow: hidden;
}
#contents .contents-list .sub-img .img2,
#contents .contents-list .sub-img .img3{
width: 44%;
text-align: left;
}
#contents .contents-list .sub-img .img2 .sub,
#contents .contents-list .sub-img .img3 .sub{
font-size: 87%;
padding-top: 1em;
}
@media screen and (max-width: 1360px) {
#contents .contents-list h3{
margin: 0 0 0.6em;
font-size: 2.5rem;
}
#contents .contents-list h4{
margin: 0 0 0.8em;
font-size: 1.6rem;
}
}

@media screen and (max-width: 1000px) {
#contents .contents-list{
margin-bottom: 5em;
}
#contents .contents-list .detail{
float: none !important;
width: 100% !important;
}
#contents .contents-list .img1{
float: none !important;
width: 100% !important;
}
#contents .contents-list .sub-img{
padding: 2em 0 0;
}
}

@media screen and (max-width: 480px) {
#contents .contents-list h3{
font-size: 2.3rem;
}
}


/*
----------------------------------------*/
#contents1{
}
#contents1 .detail{
float: right;
}
#contents1 .img1{
float: left;
}
#contents1 .img2{
float: right;
}
#contents1 .img3{
float: left;
padding-top: 170px;
}
@media screen and (max-width: 1000px) {
#contents1 .img3{
padding-top: 2em;
}
}
@media screen and (max-width: 760px) {
#contents1 .img3{
padding-top: 0;
}
}

/*
----------------------------------------*/
#contents2{
}
#contents2 .detail{

float: left;
}
#contents2 .img1{
float: right;
}
#contents2 .img2{
float: left;
}
#contents2 .img3{
float: right;
padding-top: 170px;
}
@media screen and (max-width: 1000px) {
#contents2 .img3{
padding-top: 2em;
}
}
@media screen and (max-width: 760px) {
#contents2 .img3{
padding-top: 0;
}
}


/*
----------------------------------------*/
#contents3{
}
#contents3 .detail{
float: right;
}
#contents3 .img1{
float: left;
}
#contents3 .img2{
float: right;
}
#contents3 .img3{
float: left;
padding-top: 170px;
}
@media screen and (max-width: 1000px) {
#contents3 .img3{
padding-top: 2em;
}
}
@media screen and (max-width: 760px) {
#contents3 .img3{
padding-top: 0;
}
}

/*
----------------------------------------*/
#contents4{
}
#contents4 .detail{

float: left;
}
#contents4 .img1{
float: right;
}
#contents4 .img2{
float: left;
}
#contents4 .img3{
float: right;
padding-top: 170px;
}
@media screen and (max-width: 1000px) {
#contents4 .img3{
padding-top: 2em;
}
}
@media screen and (max-width: 760px) {
#contents4 .img3{
padding-top: 0;
}
}


/*
----------------------------------------*/
#contents5{
}
#contents5 .detail{
float: right;
}
#contents5 .img1{
float: left;
}
#contents5 .img2{
float: right;
}
#contents5 .img3{
float: left;
padding-top: 170px;
}
@media screen and (max-width: 1000px) {
#contents5 .img3{
padding-top: 2em;
}
}
@media screen and (max-width: 760px) {
#contents5 .img3{
padding-top: 0;
}
}





/*
----------------------------------------*/
#hotel-detail{
clear: both;
margin: 0 0 180px;
}
#hotel-detail h2{
margin: 2.5em 0;
text-align: center;
}
#hotel-detail .detail-data{
width: 90%;
max-width: 1280px;
margin: 0 auto;
}
#hotel-detail .detail-data table{
width: 100%;
}
#hotel-detail .detail-data table th{
width: 230px;
padding: 1rem 0;
font-size: 1.2rem;
font-weight: 400;
text-align: left;
border-bottom: 1px solid #3E3E3E;
}
#hotel-detail .detail-data table td{
padding: 1rem 0 1rem 2.5em;
font-size: 1.0rem;
/*font-family: "Noto Sans JP", sans-serif;*/
font-weight: 400;
text-align: left;
border-bottom: 1px solid #D5D5D5;
}
@media screen and (max-width: 1000px) {
#hotel-detail{
margin: 0 0 3em;
}
#hotel-detail .detail-data table td{
padding: 1rem 0 1rem 2em;
}
}
@media screen and (max-width: 900px) {
#hotel-detail h2{
margin: 1em 0 0.8em;
text-align: center;
}
#hotel-detail .detail-data table th{
display: block;
width: 100%;
padding: 1rem 0 0.6rem;
border-bottom: 1px solid #D5D5D5;
} 
#hotel-detail .detail-data table td{
display: block;
width: 100%;
padding: 1rem 0 1.5rem;
border-bottom: 1px solid #3E3E3E;
}
}
/*
----------------------------------------*/
#access{
clear: both;
width: 90%;
max-width: 1280px;
margin: 0 auto 100px;
overflow: hidden;
}
#access h2{
float: left;
width: 24%;
margin: 0;
}
#access .access-data{
float:left;
width:76%;
/*font-family: "Noto Sans JP", sans-serif;*/
font-weight: 400;
}
#access .access-data br.sp{
display: none;
}
#access .access-data .access-map{
margin: 0 0 60px;
}
#access .access-data h3{
font-size: 1.3rem;
font-weight: 400;
}
#access .access-data .access-route{
margin: 0;
padding: 60px 0 0;
}
#access .access-data .access-route li{
float: left;
list-style: none;
width: 29%;
margin: 0 21% 3em 0;
padding: 0;
box-sizing: border-box;
}
#access .access-data .access-route li:nth-child(2n+1){
clear: both;
}
#access .access-data .access-route li h4{
margin: 0 0 0.3em;
padding: 0.3em 0;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.2;
border-bottom:1px solid #707070;
}
#access .access-data .access-route li .tt{
padding: 0 0 0.5em 1em;
position: relative;
}
#access .access-data .access-route li .tt:before{
content: "・";
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1000px) {
#access{
margin: 0 auto 2em;
}
#access h2{
margin: 0 0 0.8em;
text-align: center;
float: none;
width: 100%;
}
#access .access-data{
float: none;
width: 100%;
}
#access .access-data .access-map{
margin: 0 0 1.5em;
}
#access .access-data .access-route{
padding: 1.5em 0 0;
}
}
@media screen and (max-width: 900px) {
#access .access-data .access-route li{
float:none;
width: 100%;
margin: 0 0 2em 0;
}
}
@media screen and (max-width: 760px) {
#access .access-data br.sp{
display: block;
}
}