@charset "UTF-8";

body{min-width:auto;}
.bp-r{background-position:right !important;}
.bp-l{background-position:left !important;}

/* 親要素: キャッチコピー配置の基準とし、ファーストビューの高さを確保 */
.p-home-hero {
  position: relative;
  height: 100vh; 
}

/* キャッチコピー（PC・ベーススタイル）*/
.p-home-hero__catchcopy{
  position: absolute; /* absoluteを維持 */
  /* 中央配置 */
  top:45%; 
  bottom:auto;
  right:auto;
  left:50%; 
  /* 縦書き時の中央寄せ */
  transform: translate(-50%, -50%); 
  
  /* 縦書き設定 */
  writing-mode: vertical-rl; 
  text-align: center; 
  
  /* サイズ調整と折り返し防止 */
  width: auto;
  height: max-content; /* 文章の長さに合わせて高さを自動調整 */

  /* 文字サイズと装飾 */
  font-size: 3.6vh; 
  line-height: 1.7; 
  /* スライドの上に表示させるため、z-indexを強化 */
  z-index: 999; 
  color: #fff;
  transition: .8s ease;
  font-weight:normal;
  background:none; 
  padding: 0 10px;
  letter-spacing: 4px;
  
  /* アニメーション */
  opacity:0;
  text-shadow:0 0 10px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.5);
  animation:catchcopyFadeIn 1.5s ease 0.5s forwards;
  
  /* 文字を読みやすくする修正：背景に極薄い帯を入れる（和風の短冊イメージ） */
  background: rgba(0, 0, 0, 0.1);  /*1%だけの薄い黒 */
  padding: 7px 3px; /* 上下左右に少し余裕を持たせる */
  backdrop-filter: blur(2px); /* 背景をわずかにぼかして文字を浮かす（最新手法） */
  border-radius: 10px;  

  /* 文字の影をより強力かつ自然にする（3層の影） */
  text-shadow: 
    0 0 15px rgba(0, 0, 0, 0.9),   /* 濃く深い影 */
    0 0 10px rgba(0, 0, 0, 0.6),   /* 中間の影 */
    2px 2px 4px rgba(0, 0, 0, 0.3); /* わずかな立体感 */
}

/* --- スクロールボタンの修正（中央固定＋ふわふわ復活） --- */

.p-home-hero__scroll-btn {
  position: absolute;
  left: 50% !important;
  /* 中央寄せ(-50%)と、アニメーションによる動きを共存させるため、
     このプロパティはアニメーション側に任せます */
  animation: scrollDownCentered 2s infinite !important;
  z-index: 10;
}

/* 中央寄せを維持したまま、上下に揺れるアニメーションを新規作成 */
@keyframes scrollDownCentered {
  0% {
    /* 水平中央(-50%)を維持したまま、高さ0の位置 */
    transform: translateX(-50%) translateY(0);
  }
  50% {
    /* 水平中央(-50%)を維持したまま、5px下に下がる */
    transform: translateX(-50%) translateY(5px);
  }
  100% {
    /* 元の位置に戻る */
    transform: translateX(-50%) translateY(0);
  }
}

/* もしボタンの矢印などが別のアニメーションを使っている場合に備え、
   干渉しそうな既存アニメーションをこのボタンでは無効化します */
.p-home-hero__scroll-btn::before,
.p-home-hero__scroll-btn::after {
    /* 必要に応じて。基本は上記 animation で上書きできるはずです */
}


/* スマホでのレスポンシブ対応（768px以下）*/
@media (max-width: 768px){
  .p-home-hero__catchcopy{
/*    font-size: 24px;*/
    height: max-content;
  }
}

/* 動くボタン */
.button-simple {
  position: relative;
  overflow: auto;
  vertical-align: middle;
  font-weight: bold;
  padding: 1px 5px;
  margin: 0px 5px 5px;
  border-radius: 30px;/*角の丸み*/
  font-size: 1em;/*文字サイズ*/
  background-color: #00357F;/*背景色*/
  color: #fff;/*文字色*/
  display: inline-block;
  text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
  box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.button-simple:before {
  /*font-family: FontAwesome;*/
  /*content: 'f144';好きなアイコン*/
  /*color: #eeee22;アイコンの色*/
  /*margin-right: 3px;*/
}
a:hover .button-simple {
  background-color: #00a41a;/*触れたときの背景色*/
  color: #fff;/*触れたときの文字色*/
  box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
  animation-play-state: paused;
  top: 3px;
}
.pekopeko {
  animation: pekopeko 2s infinite;
  box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
@keyframes pekopeko {
  0% {
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
    top: 0px;
  }
  10% {
    box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
    top: 3px;
  }
  20% {
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
    top: 0px;
  }
  30% {
    box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
    top: 3px;
  }
  40% {
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
    top: 0px;
  }
}


.tag-container{width:100%;max-width:64rem;margin:0 auto 1rem;padding:.5em;}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;justify-content: center;}
.tag-list li{color:#000;margin:0 .5em .5em 0;padding:.5em;font-size:20px;}
.smartseal{padding:0;}.smartseal img{width:80px;height:80px;}

/* おすすめ */
ul#newsList{display:flex;flex-wrap:wrap;gap:5px;}
ul#newsList li{display:flex;flex-direction:column;position:relative;overflow:hidden;}
ul#newsList .title{max-width:calc( 33.33vw - 20px );min-height:40px;position:relative;z-index:0;padding:20px;}
ul#newsList .title p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
ul#newsList .thumbnail{width:calc( 33.33vw - 20px );height:calc( 18.748vw - 11.25px );}
ul#newsList .thumbnail img{display:inline-block;object-fit: cover;position: absolute;width: 100%;height: calc( 100% - 60px );}
ul#newsList .newMark{position:absolute;bottom:0;right:0;background:yellow;color:red;
transform: rotate(-45deg) translate(30px, 50px);padding:5px 55px 30px 60px;}
/*ul#newsList li:nth-child(odd)> .title{background:#00357F;color:#fff;}
ul#newsList li:nth-child(even)> .title{background:#207700;color:#fff;}*/
ul#newsList .cat-0 .title{background:rgba(210,236,249,1);color:rgba(51,51,51,1);}
ul#newsList .cat-1 .title{background:rgba(24,145,172,1);color:rgba(255,255,255,1);}
ul#newsList .cat-2 .title{background:rgba(101,154,210,1);color:rgba(255,255,255,1);}
ul#newsList .cat-3 .title{background:rgba(31,95,139,1);color:rgba(255,255,255,1);}
ul#newsList .cat-4 .title{background:rgba(0,53,127,1);color:rgba(255,255,255,1);}
ul#newsList .cat-5 .title{background:rgba(26,26,26,1);color:rgba(255,255,255,1);}
/*@media (max-width: 1200px){
ul#newsList .title{max-width:calc(50vw - 30px);}
ul#newsList .thumbnail{width:calc(50vw - 30px);height:calc(28.125vw - 16.875px);}
}*/
@media (max-width: 768px){
ul#newsList .title{max-width:100vw;}
ul#newsList .thumbnail{width:100vw;height:56.25vw;}
}

/* 新しい新着情報 */
.c-card-news__category.\--event {background-color:purple}

/* 新しいフッター */
.p-footer__sitemap{width:100%}.p-footer__sitemap-inner{width:100%;max-width:100%}.p-footer__sitemap-list{display:flex;flex-wrap:wrap;margin:0 auto 10px;width:100%;max-width:max-content;justify-content:center;gap:20}.p-footer__sitemap-item:not(:last-child){margin-bottom:0}.p-footer__sitemap-item{margin:0;padding:0 2rem;border-left:1px solid #999}.p-footer__sitemap-item:last-child{border-right:1px solid #999}.hotel-list{padding:0 10px;margin-top:3rem;margin-bottom:5rem}.hotel-list-container{display:grid;gap:20px}@media (min-width:768px){.hotel-list-container{grid-template-columns:repeat(3,1fr);grid-auto-rows:min-content}}@media (max-width:767px){.hotel-list{margin-bottom:3rem}.hotel-list-container{grid-template-columns:1fr}}.hotel-card{position:relative;height:300px;overflow:hidden;cursor:pointer}.hotel-card img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:auto;min-height:100%;min-width:100%;object-fit:cover;transition:filter 0.3s ease}.hotel-card:hover img{filter:brightness(50%)}.hotel-info{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;color:#fff;background-color:rgba(0,0,0,.2);padding:20px;box-sizing:border-box}.hotel-card:hover .hotel-info{background-color:rgba(0,0,0,.3)}.hotel-info .hotel-subtitle,.hotel-info .hotel-en{font-size:.8rem;margin:0}.hotel-info .hotel-name{font-size:1.5rem;font-weight:700;margin:5px 0}.hotel-card img.logo-img{position:relative;top:0;left:0;transform:none;object-fit:contain;width:200px;height:auto;max-width:200px}.hotel-card:hover img.logo-img{filter:brightness(100%)}.hotel-name img{transform:none;scale:1}

/* Rooms */
.p-rooms .c-card-meter__image {
  position: relative;
  display: inline-block;
}

.p-rooms .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: right;
  color: white;
  font-size: 22px;
  font-weight: bold;
  pointer-events: none;
  padding: 30px 5px;
}



/* 中大デバイス（768px 以上）
==============================================*/
@media screen and (min-width: 768px) {
  .p-footer__company-info {margin-right:2em;}
} /* END */

/* 小デバイス（768px 未満）
==============================================*/
@media screen and (max-width:767.99px) {
.tag-list li{margin:0 .5em 0 0;font-size:16px;}
} /* END */

/* 特殊
==============================================*/
@media screen and (max-width:647px) {
  .bp-l-100{background-position:left -100px center !important;}
}
@media screen and (max-width:677px) {
  .bp-r-75{background-position:right -75px center !important;}
}
@media (max-width:1600px){
  .p-header__logo {
  width: 10rem;
  margin-left: -.5rem;
  -webkit-transform: scale(.85);
  transform: scale(.85);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  }
  .p-header__mainmenu-parent>span{font-size:smaller;}
}
@media (max-width: 1200px) and (min-width: 768px) {
  #header > ul > li:nth-child(4){width:6em;}
}

/* 動画セクションのスタイル */

.video-section .video-container {
  position: relative;
}

.video-section .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height:500px;
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (max-width:767.99px) {
  .video-section .video-container video {
    position:relative;
    height:56.25%;
    max-height:56.25%;
  }
}
 /* END */

/* アニメーションの定義 */
@keyframes catchcopyFadeIn {
  0% {
    opacity: 0;
    /* 中央寄せを維持 */
    transform: translate(-50%, -50%); 
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}