@charset "utf-8";

/*
16px基準文字サイズ
8px	  0.5rem
10px	0.625rem
11px	0.6875rem
12px	0.750rem
13px	0.8125rem
14px  0.875rem
15px	0.9375rem
16px	1rem
18px	1.125rem
20px	1.25rem
21px  1.3125rem
22px	1.375rem
24px	1.5rem
28px  1.75rem
30px  
32px	2rem
36px	2.25rem 
38px	2.375rem 
39px	 2.4375rem
40px	 2.5rem
*/
/*
Layout（ページを構成する要素に対して使用するクラス）・・・「l-」
Component（複数のページで再利用できる要素に対して使用するクラス）・・・「c-」
Project（ページ単位で使用するクラス）・・・「p-」
Utility（強制的にスタイルを当てたりする調整用のクラス）・・・「u-」
*/

/* ================================================
   RESET
================================================ */
html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img, abbr, acronym, fieldset {
border: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
a {
display: block; 
text-decoration: none;
color: inherit;
outline: none;
}
a[href^="tel:"]{
   pointer-events: none;
   display: inline-block;
   color: #e60012;
}
@media screen and (max-width: 768px) {
   a[href^="tel:"] {
       pointer-events: auto;
   }
}

/* ================================================
   BASIC
================================================ */
html {
	scroll-behavior: smooth;
}

@media (max-width: 1400px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 0.9375rem;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
/*html {
font-size:62.5%;
}
*/
body {
font-size:1rem;
line-height: 1.6;
font-family: "Noto Sans JP", serif;
background-color:#eeebe2 ;
font-weight: 500;
color: #000;
padding: 0px;
margin: 0px;
-webkit-text-size-adjust:100%;
letter-spacing:0.05em;
overflow:hidden;
overflow-y:scroll;
overflow-x:hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
animation: loading 1s;
position: relative;
}
@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

a {
color:#000;
-webkit-transition: all .4s;
transition: all .4s;
text-decoration:none;
opacity:1;
}
a:hover {
opacity: 1;
-webkit-transition: all .4s;
transition: all .4s;
text-decoration:none;
}
@media screen and (min-width: 768px) {
   a[href^="tel:"] {
       pointer-events: none;
   }
}

/* WRAPPER
------------------------------------------------ */
#l-wrapper {
   position: relative;
}
#wrapper img {
max-width:100%;
height:auto;
}

/* HEADER
------------------------------------------------ */
#header {
width: 100%;
position: fixed;
z-index: 100;
top:0;
}
.l-header_inr {
position: relative;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 7rem;
max-height: 100px;
overflow: hidden;
}
.l-logo {
   width: 11rem;
   max-width: 190px;
   min-width: 120px;
}

.l-head_link {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-left: 2rem;
}
.l-head_link_item {
   overflow: hidden;
   display: flex;
    align-items: center;
    height: 100px;
}
.l-head_link_item a {
   width: 7rem;
   min-width: 100px;
   color: #fff;
   padding:2rem 0.5rem;
   text-align: center;
   margin: 0 auto;
   display: inline-block;
   position: relative;
   transition: transform .3s ease-in-out;
}
.l-head_link_item a span {
   display: block;
}
.l-head_link_item img {
   width: 34px;
}
.l-head_link_item._h_recruit {
   background: #535353;
   transition: all .3s;
}
.l-head_link_item._h_contact {
   background: #e60012;
   transition: transform .3s ease-in-out;
}
.l-navi {
   margin-left: auto;
}
.l-gnav {
display: flex;
align-items: baseline;
justify-content:space-around;
}
.l-gnav_item:first-child {
   margin-left: 0;
}
.l-gnav_item {
   margin: 0 1.2rem;
   transition: transform .3s ease-in-out;
}
.l-gnav_item a {
font-size: 1rem;
line-height: 1.2;
padding: 0.1rem 0.2083333333vw;
overflow: hidden; 
transition: transform .3s ease-in-out;
position: relative;
color: #fff;
}


.l-gnav_item_txt {
   position: relative;
   transition: transform .3s ease-in-out;
   text-decoration: none;
   display: inline-block;
}
.l-gnav_item a .l-gnav_item_txt:after{
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   margin: auto;
   bottom: 0;
   transform: translateY(102%);
   white-space: nowrap;
   z-index: 10;
   transition: transform .3s ease-in-out;
}
.l-gnav_item a:hover .l-gnav_item_txt {
   transform: translateY(-100%);
   transition: transform .3s ease-in-out;
}
.l-gnav_item a:hover .l-gnav_item_txt:after {
   transform: translateY(100%);
   transition: transform .3s ease-in-out;
}

._h_slidetext {
   overflow: hidden;  
}
._h_slidetext p{
   transition: transform .3s ease-in-out;
   position: relative;
   text-decoration: none;
   display: inline-block;
}
._h_slidetext p:after{
   content: attr(data-text);
   position: absolute;
   top: 2px;
   left: 0;
   right: 0;
   transform: translateY(100%);
   white-space: nowrap;
   z-index: 10;
   transition: transform .3s ease-in-out;
}
.l-head_link_item a:hover ._h_slidetext p {
   transform: translateY(-100%);
   transition: transform .3s ease-in-out;
}
.l-head_link_item a:hover ._h_slidetext p:after {
   transform: translateY(100%);
   transition: transform .3s ease-in-out;
}

.l-head_link_item._h_recruit a:hover {
   background: #000;
   transition: all .3s;
}
.l-head_link_item._h_contact a:hover {
   background: #bc000d;
   transition: all .3s;
}

.l-head_link_list {
   display: flex;
   gap: 1rem;

}
.l-head_link_list_item_icon {
width: 1.5rem;
height: auto;
}

.l-head_link_list_item img {
   filter: invert(100%);
}

.head_inverted {
filter: invert(100%);
transition: all .3s;
}


.p-header__page .l-header_inr {
   filter: invert(100%);
   transition: all .3s;
}


@media (max-width: 768px) {

   .l-header_inr {
      height: 65px;
      padding: 0 ;
   }
   .l-navi {
      display: none;
   }
   .l-head_link_item a {
      min-width: 100%;
      padding: 2rem 0;
   }
   .l-head_link {
      margin-left: 0;
      margin-right: 65px;
   }
   .l-head_link_item img {
      width: 30px;
  }
  ._h_slidetext p {
      font-size: 0.65rem;
   letter-spacing: 0;
   }
   .l-head_link_item {
      height: 65px;
      width:65px ;
   }
}

@media screen and (max-width: 768px) {
   .l-logo {
      min-width: 160px;
      width: 17rem;
      padding-left:10px;
   }
  .l-gnav_item a {
   padding: 0.8rem;
   line-height: 1.3;
  }
  .l-gnav {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   background: #ddc041;
  }
  .l-gnav li a {
   color: #fff;
  }
  .l-gnav li {
   width: auto;
   text-align: center;
  }
  .l-header_contact {
   display: none;
  }
  .l-header_inr_nav_sub {
   display: none;
   margin: 0 auto;
  }
  .l-head_link_item {
   height: 65px;
   width:65px ;
   }
}
@media screen and (max-width: 640px) {
   .l-gnav_item a {
      font-size: 3.2vw;
      line-height: 1.2;
      padding: 0.8rem 0;
   }
   .l-gnav_item span {
      display: block;
   }
   ._h_slidetext p {
      font-size: 0.6rem;
      letter-spacing: 0;
  }
  .l-head_link_item {
   height: 65px;
   width:63px ;
   }
   .l-header_inr {
      padding: 0 0 0 10px;
  }
}
@media screen and (max-width: 540px) {
   .l-logo {
      min-width: 160px;
      width: 41vw;
      padding-left: 0;
   }
}


/* VISUAL
------------------------------------------------ */
.p-hero {
   background: url(images/mv_bg.jpg);
   background-size: cover;
   height: 100vh;
   position: relative;
}
.p-hero_mes {
position: absolute;
left: 0;
right:0;
bottom: 1vw;
margin: auto;
width: fit-content;
height: fit-content;
}
.p-hero_txt {
font-size: 9.4vw;
font-weight: 900;
line-height: 1.1;
color: #fff;
text-shadow: #333 1px 0 20px;
filter: drop-shadow(0 0 5px #333);
}
@media screen and (min-width: 1650px) {
   .p-hero_txt {
   font-size: 10rem;
   }
}
.p-hero_txt {
   font-feature-settings: "palt";
   color: transparent;
   animation: blur 10s ease 1 forwards;  /* アニメーションは1回だけ実行され、その後状態を保持する */
   -webkit-animation: blur 10s ease 1 forwards; /* Webkit対応 */
 }
 @keyframes blur {
   0%    {text-shadow:  0 0 100px #fff; opacity: 0;}  /* 最初は透明 */
   5%    {text-shadow:  0 0 90px #fff;}
   15%   {opacity: 1;}  /* 表示される */
   20%   {text-shadow:  0 0 0px #fff;}
   80%   {text-shadow:  0 0 0px #fff;}
   85%   {opacity: 1;}  /* 表示されたまま */
   100%  {text-shadow:  0 0 0px #fff; opacity: 1;}  /* 最後に消えずに表示されたままにする */
}

@media screen and (max-width: 768px) {
   .p-hero_txt {
      font-size: 8vw;
      text-align: center;
   }
   .p-hero_pic {
      width: 11rem;
      text-align: center;
      margin: 0 auto;
   }
   .p-hero_txt {
      padding: 4rem 20px 0;
  }
  .p-hero_txt h2 {
   font-size: 1.75rem;
  }
  .p-hero {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
   }
   .p-hero_mes {
      position: relative;
      height: auto;
      margin: 0;
      left: 0;
      bottom: 0;
   }

}
@media screen and (max-width: 640px) {
   .p-mv_pic {
   width: 7rem;
   }
  .p-hero_txt h2 {
   font-size: 1.5rem;
   }
   .p-hero_txt p {
      font-size: 1rem;
      margin: 0.8rem auto;
   }
   .p-mv_process{
      margin-top: 2rem;
      }
}

/* MVスライダー（シネマチック）
------------------------------------------------ */
.p-hero {
   overflow: hidden;
   background: #000;
}
.p-hero__slider {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
/* 写真の上に陰影をのせて大人っぽい雰囲気に（周辺と上下を暗く） */
.p-hero__slider::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 3;
   background:
      radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
   pointer-events: none;
}
.p-hero__slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   opacity: 0;
   transition: opacity 2.4s ease;
}
/* 表示中の写真は前面、ひとつ前の写真はその後ろに残す */
.p-hero__slide.is-active {
   opacity: 1;
   z-index: 2;
}
.p-hero__slide.is-prev {
   opacity: 1;
   z-index: 1;
}
.p-hero__slide-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
/* ぼかし＋暗がりからピントが合い、そのままゆっくりズームアウト */
.p-hero__slide.is-active .p-hero__slide-img,
.p-hero__slide.is-prev .p-hero__slide-img {
   animation: p-hero-cinema 9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
@keyframes p-hero-cinema {
   0% {
      transform: scale(1.18);
      filter: blur(14px) brightness(0.45);
   }
   30% {
      filter: blur(0) brightness(1);
   }
   100% {
      transform: scale(1);
      filter: blur(0) brightness(1);
   }
}

/* 番号と進行バー */
.p-hero__nav {
   position: absolute;
   right: 2.5rem;
   top: 50%;
   z-index: 4;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   transform: translateY(-50%);
   font-family: "Special Gothic Expanded One", sans-serif;
   font-size: 1rem;
   color: #fff;
}
.p-hero__progress {
   position: relative;
   width: 1px;
   height: 7.5rem;
   background: rgba(255, 255, 255, 0.3);
   overflow: hidden;
}
.p-hero__progress-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   transform: scaleY(0);
   transform-origin: top;
}
.p-hero__progress-bar.is-run {
   animation: p-hero-progress 7s linear forwards;
}
@keyframes p-hero-progress {
   0% {
      transform: scaleY(0);
   }
   100% {
      transform: scaleY(1);
   }
}

/* メッセージはスライダーより前面に */
.p-hero_mes {
   z-index: 4;
}

/* SINCE 1980：白文字、最後に字間を広げながら現れる */
.p-hero_since {
   font-family: "Special Gothic Expanded One", sans-serif;
   font-size: 1rem;
   letter-spacing: 0.1em;
   color: #fff;
   opacity: 0;
   transition: opacity 1.6s ease 2.2s, letter-spacing 2.4s cubic-bezier(0.19, 1, 0.22, 1) 2.2s;
}
.p-hero.is-ready .p-hero_since {
   opacity: 1;
   letter-spacing: 0.5em;
}

/* キャッチコピー：既存のぼかし演出を止め、1文字ずつ浮かび上がらせる */
.p-hero_txt {
   color: #fff;
   animation: none;
   -webkit-animation: none;
   text-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
   filter: none;
}
.p-hero_char {
   display: inline-block;
   opacity: 0;
   filter: blur(16px);
   transform: translateY(0.35em) scale(1.08);
}
.p-hero.is-ready .p-hero_char {
   animation: p-hero-char 1.6s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--i) * 0.09s) forwards;
}
@keyframes p-hero-char {
   0% {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(0.35em) scale(1.08);
   }
   100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
   }
}

/* 動きを減らす設定の端末ではアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
   .p-hero__slide {
      transition: none;
   }
   .p-hero__slide.is-active .p-hero__slide-img,
   .p-hero__slide.is-prev .p-hero__slide-img,
   .p-hero__progress-bar.is-run,
   .p-hero.is-ready .p-hero_char {
      animation: none;
   }
   .p-hero_char,
   .p-hero_since {
      opacity: 1;
      filter: none;
      transform: none;
      transition: none;
   }
   .p-hero__progress-bar.is-run {
      transform: scaleY(1);
   }
}

@media screen and (max-width: 768px) {
   .p-hero__nav {
      top: auto;
      right: 1.25rem;
      bottom: 1.5rem;
      flex-direction: row;
      transform: none;
   }
   .p-hero__progress {
      width: 5rem;
      height: 1px;
   }
   .p-hero__progress-bar {
      transform: scaleX(0);
      transform-origin: left;
   }
   @keyframes p-hero-progress-x {
      0% {
         transform: scaleX(0);
      }
      100% {
         transform: scaleX(1);
      }
   }
   .p-hero__progress-bar.is-run {
      animation-name: p-hero-progress-x;
   }
   .p-hero_since {
      text-align: center;
   }
}

/* オープニング：上下の黒い帯が開いて写真が現れる
------------------------------------------------ */
.p-hero__curtain {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 6;
   pointer-events: none;
}
.p-hero__curtain::before,
.p-hero__curtain::after {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 50.5%;
   background: #000;
   animation: 1.6s cubic-bezier(0.77, 0, 0.18, 1) 0.4s both;
}
.p-hero__curtain::before {
   top: 0;
   animation-name: p-hero-curtain-top;
}
.p-hero__curtain::after {
   bottom: 0;
   animation-name: p-hero-curtain-bottom;
}
@keyframes p-hero-curtain-top {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(-100%);
   }
}
@keyframes p-hero-curtain-bottom {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(100%);
   }
}

/* スクロールを促す表示（縦線の中を光が流れる） */
.p-hero__scroll {
   position: absolute;
   right: 2.5rem;
   bottom: 0;
   z-index: 4;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
   color: #fff;
}
.p-hero__scroll-txt {
   writing-mode: vertical-rl;
   font-family: "Special Gothic Expanded One", sans-serif;
   font-size: 0.75rem;
   letter-spacing: 0.3em;
}
.p-hero__scroll-line {
   position: relative;
   width: 1px;
   height: 5rem;
   background: rgba(255, 255, 255, 0.3);
   overflow: hidden;
}
.p-hero__scroll-line::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   animation: p-hero-scroll-line 2.4s cubic-bezier(0.77, 0, 0.18, 1) infinite;
}
@keyframes p-hero-scroll-line {
   0% {
      transform: translateY(-100%);
   }
   60% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(100%);
   }
}

/* スクロールで動かす要素は描画を軽くする */
.p-hero__slider,
.p-hero_mes {
   will-change: transform;
}

/* 動きを減らす設定の端末では帯と線の動きを出さない */
@media (prefers-reduced-motion: reduce) {
   .p-hero__curtain {
      display: none;
   }
   .p-hero__scroll-line::after {
      animation: none;
   }
}

@media screen and (max-width: 768px) {
   .p-hero__scroll {
      right: auto;
      left: 1.25rem;
   }
}

/* CONTENTS
------------------------------------------------ */

.l-contents {
margin-top:8rem;
}


/* FOOTER
------------------------------------------------ */
.l-footer {
   position: relative;
   z-index: 10;
   margin-top: 4rem;
   padding: 7rem 0 7rem 0;
   background: #7e0d18;
   color: #fff;
}
.l-footer_inr {
position: relative;
margin: 0 auto;
padding: 0 20px;
max-width: 1300px;
}
.l-footer_contents {
   max-width: 1300px;
   padding: 0 20px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: baseline;
   gap: 5rem;
}
.l-footer_logo {
   width: 14rem;
}
.l-footer_main {
   display: flex;
   justify-content:space-between;
   flex-direction: row-reverse;
   margin: 5rem 0;
}
.l-footer_main a {
   color: #fff;
}
.l-footer_add {
font-size: 0.9375rem;
margin: 1rem 0;
}
.l-footer_tel {
   font-size: 1rem;
   margin-bottom: 2rem;
}
.l-footer_tel span {
    width: 2.4em;
    display: inline-block;
}
.l-footer_google {
   margin: 1rem 0;
   text-decoration: underline;
}
.l-footer_sns {
 width: 2rem;
 filter: invert(100%); 
}
.l-copy {
   font-size: 1rem;
}
.l-footer_nav {
   display: flex;
   justify-content:space-between;
   gap: 5rem;
}
.l-footer_nav_list li {
   margin: 1rem 0;
}
.l-footer_nav_list a {
   padding: 0.3rem 0.2rem;
   font-size: 1rem;
   position: relative;
   display: inline-block;
}

.l-footer_nav_list_sub a {
   font-size: 1rem ;
   position: relative;
   padding: 0.3rem 0.2rem 0.3rem 2rem;
   position: relative;
}

.l-footer_sub {
display: flex;
justify-content:space-between;
gap: 4rem;
flex-direction: row-reverse;
align-items: end;
margin-top: 4rem;
}


@media (max-width: 768px) {

   .l-footer_main {
      display: block;
      justify-content: space-between;
  }
  .l-footer_head {
   margin-top: 3rem;
   text-align: center;
  }
   .l-footer_contents {
      display: block;
      text-align: center;
  }
  .l-footer_logo {
   margin: 0 auto 2rem;
   }
   .l-footer_link {
      text-align: center;
      margin: 2rem auto;
   }

   .l-footer {
      margin-bottom: 0;
      margin-top: 0;
  }
  .l-footer_tel {
   font-size: 1rem;
   }
   .l-footer_sub {
      display: block;
      justify-content: space-between;
      gap: 3rem;
      flex-direction: unset;
      margin-top: 2rem;
   }
   .l-copy {
      font-size: 1rem;
      margin-top: 4rem;
      text-align: center;
  }
  .l-footer_nav {
   gap: 1rem;
   text-align: center;
    justify-content: center;
   }
   .l-footer_nav_list a {
   font-size: 1.5rem ;
   }

}

@media (max-width: 640px) {
   .l-footer_nav {
      display: block;
  }
  .l-footer_nav_list li {
   border-bottom: 1px solid #ddd;
   margin: 0 0;
   padding: 0.5rem 0;
  }
  .l-footer_nav_list:last-child li {
   border-bottom: none !important;
  }
  .l-footer_nav_list_sub {
   border-bottom: none !important;
  }
  .l-footer_nav_list:last-child .l-footer_nav_list_sub {
   border-bottom: none !important;
  }
  .l-footer_nav_list .l-footer_nav_list_sub {
   padding: 0.2rem 0 !important;
  }
  
}

/* PAGETOP */

/* ================================================
   コンテンツページ
================================================ */

/* 共通
------------------------------------------------ */
.c-btn {
   width: 15rem;
}
.c-btn._sizewide {
   width: min(13vw + 150px, 500px);
}

.c-btn {
display: inline-block;
padding: 1rem 2rem;
background: none;
color: #7e0d18;
border: 1px solid #7e0d18;
border-radius: 50px 50px;
font-size: 1rem;
font-weight: 600;
text-align: center;
margin: 0 auto;
}
.c-btn {
position: relative;
transition: all .4s;
overflow: hidden;
z-index: 1;
}

.c-btn_red::after {
   border-radius: 2px 2px;
   background: #333;
   position: absolute;
   top: 0;
   left: 0;
   content: '';
   width: 100%;
   height: 100%;
   transform: scale(0, 1);
   transform-origin: left top;
   transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
   z-index: -1;
 }
 .c-btn_yellow {
   color: #fff799;
   border: 1px solid #fff799;
 }
 .c-btn_wht {
   color: #fff;
   border: 1px solid #fff;
 }

 .c-btn_red_arw {
   position: absolute;
   width: 30px;
   height: fit-content;
   display: block;
   right: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .4s;
}
.__arw_main::before {
   content: "";
   height: 1px;
   background-color: #fff;
   position: absolute;
   width: 30px;
   right: 0;
} 
.__arw_main::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   transform-origin: right bottom;
   width: 16px;
   height: 1px;
   background-color: #fff;
   transform: rotate(45deg);
}
.c-btn_red a:hover .c-btn_red_arw {
   right: 0.5rem;
   transition: all .4s;
}
.p-top-section_btn_center {
   text-align: center;
   margin: 0 auto;
}

@media (max-width: 768px) {
   .c-btn_red._sizewide {
   width: min(30vw + 150px, 350px);
   }
   .c-btn_red {
      width: min(15rem + 3rem, 320px);
  }
  .p-top-about_img_sub_bg {
   width: 20%;
   height: 25rem;
  }
  .c-btn_red a {
   padding: 1.3rem 1rem;
  }
  .c-btn_red a {
   padding: 1rem;
   font-size: 1rem;
   }
}
@media (max-width: 640px) {
   .c-btn_red {
   width: min(13rem + 3rem, 320px);
   }
}

/* TOP
------------------------------------------------ */
.p-top-section {
max-width: 1300px;
margin: 8rem auto;
padding: 0 20px;
}
.p-top-section_wide {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.p-top-section_inr {
max-width: calc(1300px - 30px);
margin: 0 auto;
}
.p-top-section_ttl {
font-size: 2.2rem;
margin-bottom: 4rem;
font-weight: 600;
}
.p-top-section_ttl span {
   font-size: 4rem;
   margin-bottom: .2rem;
   font-weight: 400;
   display: block;
   color: #d7000e;
   position: relative;
   line-height: 1.1;
}
.p-top-section_ttl span::before {
   content: "";
   width: 2rem;
   height: 1px;
   background:#d7000e ;
   left:-2.5rem;
   top:0;
   bottom: 0;
   margin: auto;
   position: absolute;
}
.p-top-section_ttl_lead {
   font-size: 1.125rem;
}
.p-top-section_head {
   position: relative;
   padding: 2rem 0;
   margin: 8rem auto 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
}
.p-top-section_ttl_pic {
   display: block;
   line-height: 1;
   width: 12rem;
   text-align: center;
   margin: 0 auto;
}
.p-top-news_btn {
   position: absolute;
   left: 0;
   bottom: 0;
}

.p-top_ttl_head {
   width: fit-content;
}
.p-top_ttl_jp {
   font-size: 1.25rem;
   font-weight: bold;
}
.p-top_ttl_en {
   font-size: 4.5rem;
   line-height: 1.1;
   font-family: "Special Gothic Expanded One";
}



@media screen and (max-width: 1200px) {
   .p-top-section_ttl_lead br {
      display: none;
  }
}
@media screen and (max-width: 1023px) {
   .p-top-section_head {
      display: block;
   }
}

@media screen and (max-width: 768px) {
   .p-top-section_ttl span {
   font-size: 3rem;
   }
   .p-top-section_ttl {
      font-size: 1.7rem;
      margin-bottom: 2rem;
   }
   .p-top-section {
      margin: 6rem auto;
   }
   .p-top_ttl_en {
    font-size: 3rem;
   }
}
@media screen and (max-width: 640px) {
   .p-top-section_ttl span {
   font-size: 2.2rem;
   }
}


/* Top Instagram
------------------------------------------------ */
.p-top_instagram_ttl {
   font-family: "Special Gothic Expanded One";
   color: #84ccc9;
   font-size: 4rem;
   margin-top: -10rem;
   text-align: center;
   position: absolute;
    top: -3rem;
    right: 0;
    left: 0;
    margin: auto;
}
.p-top_instagram_wrap {
   padding: 5rem 3rem 4rem 3rem;
   background: #fff;
   border-radius: 20px 20px;
   position: relative;
}
.p-top_instagram_list {
   display: flex;
   gap:1rem;
}

@media screen and (max-width: 768px) {
   .p-top_instagram_ttl {
   font-size: 5.5vw;
   top: -2rem;
   }

}

/* Top News
------------------------------------------------ */
.p-top_news_wrap {
   display: flex;
    justify-content: space-between;
}
.p-top_news_list {
   display: flex;
   gap:2rem;
   justify-content: space-between;
   width: 50rem;
}
.p-top_news_list_item {
   width: 50%;
}
.p-top_news_list_item_pic img {
border-radius: 20px 20px;
}
.p-top_news_list_item_data {
font-family: "Noto Sans JP", serif;
font-weight: bold;
font-size: 1rem;
margin: 1rem 0 0.5rem 0;
}
.p-top_news_list_item_ttl {
font-weight: bold;
font-size: 1rem;
}

@media screen and (max-width: 768px) {
   .p-top_news_wrap {
   display: block;
   }
   .p-top_news_list {
    width: auto;
   }
   .p-top_news_list {
      margin-top: 3rem;
   }
}

/* About
------------------------------------------------ */
.p-top-about {
position: relative;
}
.p-top-about_txt {
   margin: 1rem 0 3rem;
   font-size: 1.125rem;
}
.p-top-about_txt p {
   margin-bottom: 2rem;
   color: #7e0d18;
}
.p-top-about_ttl {
   color: #7e0d18;
   font-size: 4rem;
   font-weight: 900;
   writing-mode: vertical-rl;
}
.p-top-about_img {
}
.p-top-about_pic {
   position: relative;
     overflow: hidden;
}
.p-top-about_inr {

}
.p-top-about_content {
   position: relative;
   margin-top: 4rem;
}
.p-top-about_slideerea {
   display: flex;
  overflow: hidden;
  width: 100%;
  height: fit-content;
   position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.p-top-about_img {
   text-align: center;
   margin: 0 auto;
   position: relative;
}

.p-top-about_slidetxt {
   font-size: 12rem;
   font-weight: bold;
   font-family: "Special Gothic Expanded One";
   color: #84ccc9;
   z-index: 10;
   animation: loop_animation_right_double 30s linear infinite;
   white-space: nowrap;
}
@keyframes loop_animation_right_double {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.p-top-about_main {
      max-width: 1300px;
         margin: 0 auto;
  display: flex;
  gap: 5rem;
  justify-content: center;
}
@media screen and (max-width: 768px) {
   .p-top-about_inr {
      display: block;
   }
   .p-top-about:after {
      width: 11%;
   }
   .p-top-about_content {
      width: 80%;
      margin-left: auto;
      margin-top: 3rem;
  }
  .p-top-about_slidetxt {
    font-size: 18vw;
  }
}
.p-top-about_card_list {

}
.p-top-about_card {
     min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #000;
}
.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-wrapper.__card1 {
  transform: rotate(3deg) !important;
}
.card-wrapper.__card2 {
  transform: rotate(6deg) !important;
}
.card-wrapper.__card3 {
  transform: rotate(0) !important;
}
.card-wrapper.__card4 {
  transform: rotate(10deg) !important;
}
.card-wrapper.__card2 {
  /*margin: 0 8rem 0 !important;*/
}
.card-wrapper.__card3 {
  /*margin: 0 0 0 10rem !important;*/
}
.card-wrapper.__card4 {
  /*margin:0 8rem 0 0 !important;*/
}
.card-wrapper.__card2 {
  /*margin:0 0 0 !important;*/
}
/*
.card-wrapper:nth-of-type(2n) {
  transform: rotate(3deg);
}
.card-wrapper:nth-of-type(2n+1) {
  transform: rotate(-6deg);
}
.card-wrapper:nth-of-type(3n) {
  transform: rotate(0);
}
.card-wrapper:nth-of-type(5) {
  transform: rotate(10deg);
}
*/
.card-contents {
  position: relative;
  background-color: #000;
  border-radius: 15px 15px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.card-contents.__vertical {
  width: 400px;
  height: 680px;
}
.card-contents.__side {
  width: 600px;
  height: 480px;
}
.card-contents img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px 15px;
  object-fit: cover;
}
.card-wrapper .spacer {
  width: 100%;
  height: 100vh;
}

.p-top-gradient {
   position: absolute;
   left:0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
  height: 100%;
  width: 100%;
  background-color: rgba(238, 235, 226, 1);
  background-image: radial-gradient(circle, rgba(254, 171, 8, 1), rgba(238, 235, 226, 1) 35rem);
}

/* About 住吉スクウェア
------------------------------------------------ */
.p-top_about_head {
   text-align: center;
   margin-bottom: 4rem;
       width: auto;
}
.p-top-about-sumiyoshi_pic img {
   border-radius: 20px 20px;
}
.p-top-about-sumiyoshi_content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap:4rem;
   align-items: baseline;
}
.p-top-about-sumiyoshi_txt p:first-child {
   margin-bottom: 1rem;
}
.p-top-about-sumiyoshi_data {
   margin-top: 2rem;
   padding: 2rem;
   background: #fff;
   border-radius: 20px 20px;
}
.p-top-about-sumiyoshi_data_ttl {
   font-size: 1.125rem;
   font-weight: bold;
   color: #7e0d18;
   margin-bottom: 1rem;
}
.p-top-about-sumiyoshi_data_add {
   margin-bottom: 1rem;
}
.p-top-about-sumiyoshi_data_wrap {
   display: flex;
   gap: 3rem;
   align-items: center;
}
.p-top-about-sumiyoshi_data_description {

}
.p-btn_about_sumiyoshi {
   margin:1rem auto 0;
   text-align: center;
}
.p-top-about-sumiyoshi_data_point {
   background: #fff4f4;
    padding: 0.8rem;
    border-radius: 10px 10px;
    color: #7e0d18;
}

@media screen and (max-width: 768px) {
   .p-top-about-sumiyoshi_content {
    display: block;
   }
   .p-top-about-sumiyoshi_main {
      margin-top: 2rem;
   }
   .p-top-about-sumiyoshi_data_description {
    width: 50%;
   }
   .p-top-about-sumiyoshi_data_point {
       width: 50%;
   }
}


/* HOW TO PLAY
------------------------------------------------ */
.p-top-howto {
   background: #7e0d18;
}
/* 左右で色を分ける（画面の端から端まで）
   境目：コンテンツ幅（最大1270px）の左端から30%（見出しとカードの切れ目） */
.p-top-section_wide.p-top-howto {
   --howto-pad: 4rem; /* 画面の左右の余白 */
   --howto-content: min(100% - var(--howto-pad) * 2, 1270px);
   --howto-split: calc((100% - var(--howto-content)) / 2 + var(--howto-content) * 0.3);
   padding: 0 var(--howto-pad);
   background: linear-gradient(to right, #7e0d18 var(--howto-split), #650a13 var(--howto-split));
}
.p-top-howto_inr .p-top-howto {
   background: none;
}
/* 境目の両側にも余白：見出しの右側・カードの左側 */
@media screen and (min-width: 769px) {
   .p-top_howto_head {
      box-sizing: border-box;
      padding-right: 2rem;
   }
   .p-top-howto_case {
      box-sizing: border-box;
      padding-left: 6rem;
   }
}
/* SPは見出しとカードが縦に並ぶので1色、余白も元のまま */
@media screen and (max-width: 768px) {
   .p-top-section_wide.p-top-howto {
      padding: 0 20px;
      background: #7e0d18;
   }
}
.p-top-howto_inr {
padding: 8rem 0;
}
.p-top_howto_head {
color:#fff799;
}
.p-top-howto_head_txt {
   font-weight: bold;
   margin: 2rem 0;
   font-size: 1.125rem;
}
.p-top-howto_slidetxt {
   font-size:2rem;
   font-weight: bold;
   font-family: "Special Gothic Expanded One";
   color: #000;
   z-index: 10;
   animation: loop_animation_right_double 30s linear infinite;
   white-space: nowrap;
}
@keyframes loop_animation_right_double {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.p-top-howto_slidetxt_en {
   font-family: "Special Gothic Expanded One";
   margin: 0 2rem;
}
.p-top-howto_slidetxt_jp {
   margin: 0 2rem;
   font-size:1.125rem;
}

.p-top-howto_case {
   margin-top:4rem;
}
.p-top-howto_sticky  {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
}
.p-top-howto_case {
   width: 68%;
}
.p-top_howto_head {
width: 30%;
position: sticky;
top: 0;
padding-top: 3rem;
}
.p-top-howto_case_pic {
object-fit: cover;
    object-position: center;
}
.p-top-howto_case_list_item_wrap {
   position: relative;
}
.p-top-howto_case_num {
   position: absolute;
   left:2rem;
   top:2rem;
   padding: 0.5rem 1rem;
   font-size: 1.125rem;
   font-weight: bold;
   border-radius: 50px 50px;
   border: 1px solid #ffff;
   color: #fff;
}
.p-top-howto_case_ttl {
    font-size: 3rem;
   font-weight: bold;
   color: #fff;
}
.p-top-howto_case_txt {
       font-size: 1.215rem;
   font-weight: bold;
   color: #fff;
}
.p-top-howto_case_head {
   position: absolute;
   left:2rem;
   bottom:4rem;
}
.p-top-howto_case_list_item:first-vhild {
 margin-top: 0;  
}
.p-top-howto_case_list_item {
 margin-top: 2rem;  
}
.p-top-howto_case_pic {
   overflow: hidden;
}
.p-top-howto_case_pic img {
   border-radius: 20px 20px;
}
/* 写真の上に黒のグラデーションを重ねて文字を読みやすくする */
.p-top-howto_case_pic {
   position: relative;
   border-radius: 20px 20px;
}
/* ホバーで画像をゆっくり拡大（はみ出しは角丸の枠で切り取る） */
.p-top-howto_case_pic img {
   transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* カードの高さを抑える：写真を横2:縦1で切り抜く */
.p-top-howto_case_pic img {
   display: block;
   width: 100%;
   aspect-ratio: 2 / 1;
   object-fit: cover;
}
/* SPは横幅が狭いので文字が収まるよう3:2のまま */
@media screen and (max-width: 768px) {
   .p-top-howto_case_pic img {
      aspect-ratio: 3 / 2;
   }
}
.p-top-howto_case_list_item a:hover .p-top-howto_case_pic img {
   transform: scale(1.08);
}
.p-top-howto_case_pic::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 20px 20px;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.65) 100%);
   pointer-events: none;
}
/* 文字はグラデーションより手前に表示 */
.p-top-howto_case_num,
.p-top-howto_case_head {
   z-index: 1;
}
.p-top-howto_ttl_display {
display: block;
}

@media screen and (max-width: 768px) {
   .p-top-howto_case {
    width: auto;
   }
   .p-top_howto_head {
    width: auto;
    position: relative;
    padding-top: 3rem;
   }
   .p-top-howto_sticky {
    display: block;
    margin-bottom: 60px;
   }
   .p-top-howto_ttl_display {
      display: inline-block;
      margin: 0 1rem;
   }
}

/* Floor
------------------------------------------------ */
.p-top-floor_head {
   text-align: center;
   width: 100%;
   margin-bottom: 4rem;
}
.p-top-floor_head_lead {
   font-size: 1.125rem;
   font-weight: bold;
}
.p-top-floor_main {
padding: 3rem;
border-radius: 20px 20px;
background: #fff;
}
.p-top-floor_main:first-child {
margin-top: 0;
}
.p-top-floor_main {
margin-top: 2rem;
}
.p-top-floor_num {
   font-family: "Special Gothic Expanded One";
   color: #84ccc9;
   font-size: 4rem;
   font-weight: bold;
}
.p-top-floor_map {
   text-align: center;
   margin: 0 auto;
   display: block;
}
.p-btn_floor {
   text-align: center;
   margin: 0 auto;
}

@media screen and (max-width: 768px) {
   .p-top-floor_head_lead {
      margin-top: 2rem;
   }
}

/* ACCESS
------------------------------------------------ */
.p-top-access {
   color: #fff;
   position: relative;
   /* フッター（z-index: 10）より手前に出して、下部の角丸・余白が隠れないように */
   z-index: 11;
}
.p-top-access_inr {
    margin: 8rem auto 0;
    padding: 0 20px;
    margin-bottom: -4rem;
}
.p-top-access_main {
   display: grid;
    grid-template-columns: 53% 1fr;
   gap: 2rem;
   align-items: center;
      padding: 5rem 4rem;
    max-width: 1300px;
   background: url(images/p_access_bg.jpg) no-repeat center center #000;
   background-size: cover;
      border-radius: 20px 20px;
}
.p-top-access_name {
   font-size: 1.215rem;
   font-weight: bold;
   margin: 4rem 0 2rem;
}
.p-top-access_list_item {
   border-bottom:1px solid #fff;
   font-size: 0.9375rem;
}
.p-top-access_list_data {
   display: flex;
   padding: 1rem 0;
}
.p-top-access_list_data_ttl {
   font-weight: bold;
   width: 7.5rem;
}
.p-top-access_list_data_link a{
color: #fff;
text-decoration: underline;
}
.p-top-access_list_data_link {
   display: inline-block;
   margin: 0 1rem;
}

.p-top-access {
   position: relative;
}
.p-top-access:after {
   content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 0;
    display: block;
    background: #7e0d18;
    z-index: -10;
    width: 100%;
    height: 75%;
}

@media screen and (max-width: 768px) {
   .p-top-access_main {
    display: block;
    grid-template-columns: 53% 1fr;
   }
   .p-top-access_map {
      margin-top: 3rem;
   }
}

/* News
------------------------------------------------ */
.p-top-news_main {
   display: flex;
   justify-content:space-between;
   gap: 2rem;
}
.p-top-news_list_wrap {
   width: 70%;
}
.p-top-news_list {
   padding: 2rem 10px;
   border-bottom: 1px solid #ccc;
}
.p-top-news_list_main {
   display: flex;
}
.p-top-news_list_main_data {
   display: flex;
   gap: 1.5rem;
   width: 40%;
   align-items: center;
}
.p-top-news_list_day {
   display: inline-block;
   color: #e60012;
   font-size: 1.3rem;
}
.p-top-news_list_cat {
   margin-left: 2rem;
   min-width: 8rem;
   text-align: center;
   padding: 0.1rem 0.5rem;
   border-radius: 3px;
   border: 1px solid #e60012;
   color: #e60012;
   font-size: 0.87rem;
}
.p-top-news_main {
   position: relative;
}

@media screen and (max-width: 768px) {
   .p-top-news_main {
   display: block;
   }
   .p-top-news_btn {
      position: relative;
      margin-top: 3rem;
      margin-left: auto;
      margin-right: auto;
   }
   .p-top-news_list_wrap {
      width: auto;
  }
  .p-top-news_list_main {
   display: block;
   }
   .p-top-news_list_main_data {
      display: flex;
      width: auto;
      margin-bottom: 1rem;
  }
}

/* Contact
------------------------------------------------ */
.p-btm-contact {
   border: 1px solid #fff;
border-radius: 20px 20px;
max-width: 1300px;
padding: 4rem 2rem;
margin: 0 auto;
}
.p-btm-contact_inr {
   max-width: 1300px;
   margin: 0 auto;
   padding:0 20px;
   display: flex;
    justify-content: space-between;
    align-items: center;
}
.p-btm-contact_lead {
 font-size: 1rem;
 font-weight: bold;
}
.p-btn-btm_contact {

}
.p-btm-contact_main {
margin-top: 3rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.p-btm-contact_ttl {
   font-size: 1.5rem;
   line-height: 1.3;
   font-weight: bold;
   margin-bottom: 1.5rem;
}
.p-btm-contact_ttl span {
   color: #e60012;
   font-size: 3rem;
   font-weight: 500;
display: block;
}
.p-btm-contact_lead {
   font-size: 1.125rem;
}
.p-btm-contact_ttl_sub {
   font-size: 1.5rem;
   font-weight: 600;
   text-align:center ;
}
.p-btm-contact_tel {
   color: #e60012;
   font-size: 2.5rem;
   font-weight: 500;
   text-align:center ;
}
.p-btm-contact_tel a {
   display: inline-block;
   color: #e60012;
}
.p-btm-contact_tel span {
   font-size: 1.5rem;
   font-weight: 500;
}
.p-btm-contact_fax {
   color: #e60012;
   font-size: 1.5rem;
   font-weight: 500;
   text-align:center ;
}
.p-btm-contact_main_block {
   background: #fff;
   padding: 2rem;
}

.p-btm-contact_btn {
   margin: 1rem auto 0 auto;
   text-align: center;
}

.l-footer_bottom {
   margin-top: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.l-footer_privacy a {
   font-size: 0.875rem;
   color: #fff;
}
.l-footer_copy {
   font-family: "Special Gothic Expanded One";
   font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
   .p-btm-contact_inr {
        display: block;
   }
   .p-btm-contact_main {
      margin-top: 3rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
   .p-btm-contact_lead {
      font-size: 1.125rem;
  }
  .p-btm-contact_lead br {
   display: none;
  }
  .p-btm-contact_ttl_sub {
   font-size: 1.215rem;
  }
  .p-btm-contact_tel {
   font-size: 2rem;
  }
   .p-btm-contact_main_block {
    padding: 2rem 1rem;
   }
   .p-btm-contact {
      padding: 5rem 1rem;
   }
   .p-btm-contact_ttl span {
      font-size: 2.5rem;
   }
   .p-btn-btm_contact {
    text-align: center;
    margin-top: 2rem;
   }  
   .l-footer_bottom {
   margin-top: 3rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.25rem;
   text-align: center;
   }
   /* コピーライトは小さく、行間をあけて読みやすく */
   .l-footer_copy {
      font-size: 0.75rem;
      line-height: 1.8;
   }
}

@media screen and (max-width: 540px) {
   .p-btm-contact_tel {
       font-size: 1.7rem;
   }
   .p-btm-contact_lead {
      font-size: 1rem;
      text-align: left;
  }
}

/* PAGE
------------------------------------------------ */
.l-breadcrumbs {
display: flex;
gap: 1.5rem;
font-size: 0.8125rem;
max-width: calc(1300px - 30px);
justify-content: end;
margin-bottom: 2rem;
padding: 0 1rem;
}
.l-breadcrumbs span {
   color: #000;
   position: relative;
}
.l-breadcrumbs span:nth-child(1)::before {
display: none;
}
.l-breadcrumbs span::before {
content: "";
width: 0.6rem;
height: 1px;
background: #828282;
position: absolute;
left:-1.1rem;
top:0;
bottom: 0;
margin: auto;
}
.l-breadcrumbs span a {
color: #828282;
}
.l-page-head_ttl {
font-size: 2.5rem;
margin-bottom: 4rem;
font-weight: 600;
}
.l-page-head_ttl span {
font-size: 5rem;
margin-bottom: .2rem;
font-weight: 400;
display: block;
color: #d7000e;
position: relative;
line-height: 1.1;
}
.l-page-head_ttl span::before {
content: "";
width: 21vw;
height: 1px;
background:#d7000e ;
left:-22vw;
top:0;
bottom: 0;
margin: auto;
position: absolute;
}
.l-page-head {
max-width: calc(1300px - 30px);
margin: 12rem auto 4rem;
padding-left: 3rem;
}
.l-page-head_txt {
   margin-bottom: 3rem;
   font-size: 1.125rem;
   text-align: justify;
}
.l-page-chead_image {
object-fit: contain;
object-position: right top;
margin-right: calc(45% - 46vw);
}
.p-page-section {
margin: 10rem 0;
}
.p-page-section_inr {
   max-width: calc(1100px - 30px);
   margin: 0 auto;
   padding: 0 20px;
}
.p-page-section_inr {
   max-width: calc(1100px - 30px);
   margin: 0 auto;
}

@media screen and (max-width: 768px) {
   .l-page-head_txt  {
      font-size:1rem;
      padding-right: 20px;
   }
   .l-page-head_txt br {
      display: none;
   }
   .p-page-section {
      margin: 5rem 0 5rem;
   }
   .l-page_head_ttl {
      font-size:2rem;
   }
   .l-page-head_ttl span {
      font-size: 3.5rem;
   }
   .l-page-head_ttl {
      font-size: 2rem;
   }
   .l-page-head {
      padding-left: 2.5vw;
   }
}
@media screen and (max-width: 600px) {
   .l-page-head {
      padding-left: 1.5rem;
   }
   .l-page-head_ttl span {
      font-size: 2.5rem;
   }
   .p-base_details_tel {
      margin-top: 1rem;
   }
}

/* COMPANY
------------------------------------------------ */
.p-company_ttl {
   font-size: 3rem;
   margin-bottom: 4rem;
   font-weight: 600;
}
.p-company_ttl span {
   position: relative;
   color: #e60012;
   font-size: 1.5rem;
   font-weight: 500;
   display: block;
   margin-bottom: 1rem;
}
.p-company_ttl span:after {
content: "";
   position: absolute;
   left:-2.2rem;
   top: 0;
   bottom: 0;
   margin: auto;
   height: 1px;
   width: 1.5rem;
   background: #e60012;
}
.p-company_mes_txt {
   margin-bottom: 1rem;
   line-height: 1.8;
}
.p-company_mes_ttl {
   font-size: 2rem;
   margin-bottom: 2rem;
   font-weight: 600;
   letter-spacing: 4px;
}
.p-company_mes {
   display: flex;
   gap: 3rem;
}
.p-company_mes_pic {
   min-width: 320px;
   max-width: 400px;
}
.p-company_mes_name {
   margin-left: auto;
   width: 250px;
}
.p-company_philosophy_section {
   margin-bottom:4rem;
}
.p-company_philosophy_list li {
   font-size: 1.25rem;
   margin-top: 1.5rem;
   padding-left: 1.5rem;
   position: relative;
}
.p-company_philosophy_list li:first-child {
   margin-top: 0;
}
.p-company_philosophy_list li:before {
content: "";
width: 10px;
height: 10px;
background: #e60012;
position: absolute;
left:0;
top:0;
bottom: 0;
margin: auto;
}
.p-company_philosophy_ttl {
   font-size: 1.75rem;
   margin: 2rem 0 ;
   font-weight: 600;
   color: #e60012;
   position: relative;
}
.p-company_philosophy_ttl_sub {
    font-size: 1.5rem;
    margin: 2rem auto 2rem;
    display: block;
    font-weight: 600;
    position: relative;
    /* text-align: center; */
    display: flex;
    /* justify-content: center; */
}
.p-company_philosophy_ttl_sub span {
    position: relative;
    /* padding: 1rem 2rem; */
    padding: 1rem 0;
}
 .p-company_philosophy_ttl_sub span:after {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 10px;
   content: '';
   background-image: -webkit-repeating-linear-gradient(135deg, #e60012, #e60012 1px, transparent 2px, transparent 5px);
   background-image: repeating-linear-gradient(-45deg, #e60012, #e60012 1px, transparent 2px, transparent 5px);
   background-size: 7px 7px;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }

.p-company_philosophy_txt {
    /* width: 75%; */
    font-size: 1rem;
    margin: 0 auto;
    /* text-align: center; */
}
.p-company_philosophy_logo li {
   border: 1px solid #000;
   margin: 1rem auto;
   padding: 1rem;
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   font-size: 1.215rem;
   color:#e60012;
}
.p-company_philosophy_logo li span {
   margin-right: 2rem;
}
.p-company_philosophy_logo li img {
max-width: 500px;
}
.p-company_philosophy_ttl_logo {
   font-size: 1.215rem;
   font-weight: 600;
   margin: 2rem 0 1rem;
}
.p-company_philosophy_brandlogo {
   max-width: 360px;
   margin-bottom: 1rem;
}

.p-company_table {
   border-top: 1px solid #ddd;
width: 100%;
margin: 2rem 0 4rem 0;
}
.p-company_table tr {
   border-bottom: 1px solid #ddd;
   position: relative;
}
.p-company_table tr:after {
   content: "";
   position: absolute;
   left:0;
   bottom: -1px;
   width: 12rem;
   height: 1px;
   background-color: #e60012;
}
.p-company_table tr th {
   padding: 1.5rem 0.5rem;
   color: #000;
   font-weight: bold;
   width: 25%;
   vertical-align: baseline;
}
.p-company_table tr td {
padding: 1.5rem 0.5rem;
}
.p-companybase_head {
   display: flex;
   justify-content: space-between;
   gap: 3rem;
   align-items: center;
}
.p-companybase_head_txt {
   width: 65%;
}
.p-company-base_btn {
   margin: 4rem auto 0 auto;
}
.p-company-base_pic {
   width: 90%;
   margin: 0 auto;
}

@media screen and (max-width: 768px) {
   .l-page-head {
      margin: 10rem auto 4rem;
  }
   .p-company_philosophy_list li:before {
      top: 0.5rem;
      bottom: unset;
   }
   .p-company_philosophy_list li {
      font-size: 1.125rem;
   }
   .p-company_philosophy_ttl_sub {
      font-size: 1.215rem;
   }
   .p-company_philosophy_ttl_sub span {
      padding: 1rem 0;
   }
   .p-company_philosophy_txt {
      /* width: 95%; */
      text-align: left;
   }
   .p-company_ttl {
      font-size: 2.5rem;
      margin-bottom: 4rem;
  }
   .p-company_philosophy_logo li {
      padding: 1rem;
      display: block;
   }
   .p-company_philosophy_logo li img {
      max-width: 100%;
   }
   .p-company_philosophy_ttl_logo {
   }
   .p-company_philosophy_brandlogo {
      max-width: 300px;
   }
   .p-company_mes_main {
      margin-bottom: 2rem;
   }
   .p-company_mes {
      display: block;
  }
   .p-companybase_head {
      display: block;
      margin-bottom: 3rem;
   }
   .p-company_mes_pic {
      text-align: center;
      margin:  0 auto;
   }
   .p-companybase_head_txt {
      width: auto;
  }
  .p-company_table tr th {
   width: 100%;
   display: block;
   padding: 1.5rem 0.5rem 0 0.5rem;
   }
   .p-company_table tr td {
   display: block;
   padding: 1rem 0.5rem 1.5rem 0.5rem;
   }
}

/* History */
.p-timeline {
   list-style: none;
   position: relative;
 }
.p-timeline li {
   margin-bottom: 60px;
   display: flex;
   gap: 8rem;
   position: relative;
 }
 .p-timeline::before {
   content: '';
   width: 1px;
   height: 100%;
   background: #e60012;
   position: absolute;
   left: 10rem;
   top: 24px;
}
.p-timeline-date {
font-size: 2.7rem;
font-weight: 600;
text-align: center;
color: #e60012;
line-height: 1.2;
position: relative;
width: 7rem;
}
.p-timeline-date:before {
   content: '';
   width: 12px;
   height: 12px;
   background: #e60012;
   position: absolute;
   left: 9.65rem;
   top: 24px;
   border-radius: 100%;
 }
.p-timeline-date span {
   display: block;
   font-size: 1rem;
   width: 7rem;
    text-align: center;
    margin: 0 auto;
}
.p-timeline-content {
   margin-top: 1rem;
   position: relative;
}
.p-timeline-date::after {
   content: '';
   width: 5rem;
   height: 1px;
   background: #e60012;
   position: absolute;
   left: 7.5rem;
   top: 29px;
}
.p-timeline-content p {
   font-size: 1.125rem;
}
.p-timeline-content a {
   display: inline-block;
   color: #e60012;
   font-weight: 500;
   text-decoration: underline;
}
.p-company-history {
   padding: 8rem 0;
   background: url(images/p_company_history_bg.jpg) no-repeat center center;
   background-size: cover;
}
.p-company-history_main {
   padding: 4rem;
   background: #fff;
   border-radius: 20px 20px;
}
.p-company-history_ttl {
   color: #fff !important;
}
.p-company-history_ttl span {
   color: #fff !important;
}
.p-company_ttl.p-company-history_ttl span:after {
   content: "";
   position: absolute;
   left: -2.2rem;
   top: 0;
   bottom: 0;
   margin: auto;
   height: 1px;
   width: 1.5rem;
   background: #fff;
}

@media screen and (max-width: 768px) {
   .p-company-history {
      padding: 6rem 0;
   }
   .p-company-history_main {
   padding: 3rem 2.5rem;
   }
}
@media screen and (max-width: 640px) {
   .p-timeline li {
   margin-bottom: 40px;
   display: block;
   margin-left: 1.6rem;
   }
   .p-timeline-content p {
      font-size: 1rem;
  }
  .p-timeline-date:before {
   left: -1.6rem;
  }
  .p-timeline::before {
   left: 0.35rem;
   }
   .p-timeline-date::after {
      width: 2rem;
      left: -2.2rem;
  }
}
@media screen and (max-width: 540px) {
   .p-company-history_main {
   padding: 3rem 1.5rem;
   }
}



/* Prvacy policy
------------------------------------------------ */
/*PRIVACY*/
.wrapHINAGATA h3 {
   margin:1.5em 0;
   font-size:1.125rem;
   padding:1rem 0;
   border-bottom:1px solid #ccc;
   font-weight:600;
   }
   div.wrapHINAGATA p{
      margin:1rem 0;
      line-height:1.5;
   }
   div.wrapHINAGATA ul{
      margin:20px 0 0 30px;
   }
   div.wrapHINAGATA ul li{
      list-style:outside decimal;
      line-height:140%;
      margin:10px 0 0 0;
   }
   div.wrapHINAGATA ul li ul{
      margin:15px 0 10px 10px;
   }
   div.wrapHINAGATA ul li ul li{
      list-style:outside none;
      margin-left:20px;
      text-indent:-1.5em;
   }
   div.wrapHINAGATA ul.child{
      margin:15px 0 0 10px;
   }
   div.wrapHINAGATA ul.child li{
      list-style:outside none;
      margin-left:45px;
      text-indent:-1.7em;
   }
   div.wrapHINAGATA p.tR{
      margin:30px 0 0 0;
      font-size:0.95em;
      line-height:140%;
      text-align:right;
   }
   div.wrapHINAGATA ul li ul li ol li{
      list-style:outside lower-roman;
      margin-left:20px;
      text-indent:-0.2em;
   }
   div.wrapHINAGATA ol{
      margin:1rem 0 0 2rem;
   }
   div.wrapHINAGATA ol li{
      list-style:outside decimal;
      line-height:140%;
      margin:1rem 0 0 0;
   }
   div.wrapHINAGATA ol li ol{
   margin-bottom: 20px;
   }
   div.wrapHINAGATA ol li ol li{
   font-size: 100%;
   }
.p-privacy_company {
   font-size: 1rem;

}

/* Contact
------------------------------------------------ */
.p-contact .p-page-section_inr {
   max-width: calc(900px - 30px);
    margin: 0 auto;
}
.p-contact_company {
   font-size: 1.3rem;
   margin: 2rem 0 0.5rem;
   font-weight: 600;
}
.p-contact_tel {
   font-size: 1.215rem;
   color: #e60012;
   font-weight: 600;
}
.p-contact_tel a {
   color: #e60012;
   display: inline-block;
}
.p-contact_time {
margin-bottom: 2rem;
}
.p-contact_table {
border-top: 1px solid #ddd;
width: 100%;
margin: 4rem 0 3rem 0;
font-size: 1rem !important;
}
.p-contact_required {
   font-size: 0.875rem;
   margin-left: 1.2rem;
   color: #e60012;
}
.p-contact_table tr {
border-bottom: 1px solid #ddd;
position: relative;
}
.p-contact_table tr:after {
position: absolute;
content: "";
left: 0;
bottom: -1px;
width: 5rem;
height: 1px;
background: #e60012;
z-index: 2;
}
.p-contact_table tr th {
padding: 1.5rem 0.5rem;
font-weight: bold;
width: 14rem;
}
.p-contact_table tr td {
padding: 1.5rem 0.5rem;
}
input[type=checkbox] {
   transform: scale(2);
   margin-right:1rem;
}
.p-contact_table input[type=text] {
   appearance: none;
   border: solid 1px #ccc;
   border-radius: 2px;
   background: #fff;
   padding: 0.8rem 0.8rem;
   width: 90%;
   max-width: 600px;
   font-size: 1rem;
}
.p-contact_table textarea {
   appearance: none;
   border: solid 1px #ccc;
   border-radius: 2px;
   background: #fff;
   padding: 0.8rem 0.8rem;
   width: 90%;
   max-width: 600px;
   font-size: 1rem;
}
.p-contact_table_link {
display: inline;
text-decoration: underline;
margin: 0 0.2rem;
color: #e60012;
}
.p-contact_attention span {
   color: #cc0000;
}
.p-contact_btn {
   text-align: center;
   margin: 3rem auto 0;
}
.p-contact_btn_css {
   background-color: #e60012;
   color: #fff;
   padding: 1rem 4rem ;
   text-decoration: none;
   border-radius: 5px;
   font-size: 1em;
   border: none;
   cursor: pointer;
   transition: all .3s;
 }
 .p-contact_btn_css:hover {
   color: #fff;
   opacity: 0.8;
   background-color: #333;
   transition: all .3s;
 }
 .p-contact_lead_thanksttl {
   font-size: 1.75rem;
   font-weight: 600;
   text-align: center;
   color: #e60012;
   margin-bottom: 3rem;
 }
 .p-contact_lead_thanksttl span {
   color: #000;
   display: block;
   font-size: 1.5rem !important;
 }
 .p-contact_lead {
   font-size: 1rem;
 }
 .p-contact_lead_thanks_btn {
   max-width: 280px;
   margin: 4rem auto 0;
}
.p-contact_lead_thanks_btn a {
   display: block;
   border: 1px solid #ccc;
   padding: 1.2rem;
   text-align: center;
   border-radius: 50px 50px;
}
.p-contact_lead_thanks_btn a:hover {
   opacity: 0.7;
}
.p-contact_thanks {
   text-align: center;
}


@media screen and (max-width: 768px) {
.p-contact_table tr th {
   padding: 1rem 0 0;
   display: block;
   width: auto;
   }
   .p-contact_table tr td {
   display: block;
   width: auto;
   padding: 1rem 0 1.5rem;
   }
}


/* ADD
------------------------------------------------ */
.b {
font-weight:bold;
}
.center {
text-align:center;
}
.mt10 {
margin-top: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt40 {
margin-top: 40px !important;
}
.mt60 {
margin-top: 60px;
}
.mt80 {
margin-top: 80px !important;
}
.mt120 {
margin-top: 120px;
}
.f11{
font-size: 11px;
}
.f12{
font-size: 12px;
}
.f14{
font-size: 14px;
}
.f15{
font-size: 15px;
}
.f16{
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f21 {
font-size: 21px;
}
.f24 {
font-size: 24px;
}
.red {
color: #cc0000;
}
.txt-r {
text-align: right;
}
.bg-gray1{
padding:20px;
background:#efefef;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}

/* FADE
------------------------------------------------ */
.fadeIn_up {
   opacity: 0;
   transform: translate(0, 30%);
   transition: 1s;
 }
 .fadeIn_up.is-show {
   transform: translate(0, 0);
   opacity: 1;
 }
 .fadeIn {
   opacity: 0;
   transition: 2s;
 }
 .fadeIn.is-show {
   opacity: 1;
 }

/* LOADER
------------------------------------------------ */
 .loader {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: #fff;
   z-index: 555;
   top: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .loader .txt {
   font-size: 45px;
   font-weight: bold;
   color: rgb(30, 50, 93);
   display: none;
 }


/* =====================================================
   Layout: グローバルメニュー（PC・SP共通の全画面メニュー）
   ===================================================== */
/* ハンバーガーボタン */
.c-hamburger {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}
.c-hamburger__lines {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 10px;
}
.c-hamburger__line {
  position: absolute;
  right: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition:
    transform var(--hover-time, 0.5s) var(--hover-ease, ease),
    width var(--hover-time, 0.5s) var(--hover-ease, ease),
    top var(--hover-time, 0.5s) var(--hover-ease, ease),
    bottom var(--hover-time, 0.5s) var(--hover-ease, ease);
}
.c-hamburger__line:nth-child(1) {
  top: 0;
}
/* 下の線は短め。ホバーで伸びる */
.c-hamburger__line:nth-child(2) {
  bottom: 0;
  width: 65%;
}
.c-hamburger:hover .c-hamburger__line:nth-child(2) {
  width: 100%;
}
.c-hamburger__label {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}
/* 開いているときは「×」に */
.c-hamburger.is-open .c-hamburger__line:nth-child(1) {
  top: 50%;
  transform: rotate(30deg);
}
.c-hamburger.is-open .c-hamburger__line:nth-child(2) {
  bottom: auto;
  top: 50%;
  width: 100%;
  transform: rotate(-30deg);
}
/* ハンバーガーの分だけヘッダー右側をあける */
.l-head_link {
  margin-right: 8rem;
}

/* PCヘッダーメニュー：英字を小さく添える */
.l-gnav_item_en {
  display: block;
  margin-bottom: 0.25rem;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: max(0.5625rem, 10px);
  letter-spacing: 0.15em;
  opacity: 0.6;
}

/* メニューを開いている間：後ろをスクロールさせない、ヘッダーは白文字に */
body.is-menu-open {
  overflow: hidden;
}
body.is-menu-open .p-header__page .l-header_inr,
body.is-menu-open .head_inverted {
  filter: none;
}
body.is-menu-open .l-navi,
body.is-menu-open .l-head_link {
  opacity: 0;
  pointer-events: none;
}
.l-navi,
.l-head_link {
  transition: opacity var(--hover-time, 0.5s) var(--hover-ease, ease);
}

/* 全画面メニュー：右上のボタンから円が広がるように開く */
.l-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  overflow-y: auto;
  color: #fff;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 4rem) 3.5rem);
  transition:
    clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1),
    visibility 0s linear 0.9s;
}
.l-menu.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 4rem) 3.5rem);
  transition:
    clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1),
    visibility 0s;
}
/* 背景：黒に夜の外観写真をうっすら重ねる */
.l-menu__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)),
    url(images/mv_p_1.jpg) center / cover no-repeat;
  transform: scale(1.1);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-menu.is-open .l-menu__bg {
  transform: scale(1);
}
.l-menu__inner {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4rem;
  max-width: 1300px;
  min-height: 100%;
  margin: 0 auto;
  padding: 9rem 1.25rem 4rem;
}

/* メニュー項目：開くと1行ずつ下から現れる */
.l-menu__item {
  overflow: hidden;
}
.l-menu__item + .l-menu__item {
  margin-top: 0.75rem;
}
.l-menu__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.25rem 0;
  color: #fff;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-menu.is-open .l-menu__link {
  transform: translateY(0);
}
.l-menu.is-open .l-menu__item:nth-child(1) .l-menu__link { transition-delay: 0.35s; }
.l-menu.is-open .l-menu__item:nth-child(2) .l-menu__link { transition-delay: 0.43s; }
.l-menu.is-open .l-menu__item:nth-child(3) .l-menu__link { transition-delay: 0.51s; }
.l-menu.is-open .l-menu__item:nth-child(4) .l-menu__link { transition-delay: 0.59s; }
.l-menu__num {
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 0.875rem;
  opacity: 0.5;
}
.l-menu__en {
  position: relative;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 3.5rem;
  line-height: 1.15;
  transition: color var(--hover-time, 0.5s) var(--hover-ease, ease);
}
/* ホバー：下線が左から伸び、文字が黄色に */
.l-menu__en::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time, 0.5s) var(--hover-ease, ease);
}
.l-menu__link:hover .l-menu__en {
  color: #fff799;
}
.l-menu__link:hover .l-menu__en::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.l-menu__jp {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
}

/* 住所など：最後にふわっと現れる（右下に配置） */
.l-menu__info {
  align-self: end;
  font-size: 1rem;
  line-height: 1.9;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-menu.is-open .l-menu__info {
  opacity: 1;
  transform: none;
  transition-delay: 0.8s;
}
.l-menu__name {
  font-weight: 700;
}
.l-menu__address {
  font-style: normal;
  opacity: 0.8;
}
.l-menu__sns {
  display: inline-block;
  margin-top: 1rem;
  transition:
    transform var(--hover-time, 0.5s) var(--hover-ease, ease),
    opacity var(--hover-time, 0.5s) var(--hover-ease, ease);
}
.l-menu__sns:hover {
  transform: translateY(-3px);
  opacity: 0.7;
}
.l-menu__sns-icon {
  width: 2rem;
  /* 黒いアイコンを白に */
  filter: invert(100%);
}
/* プライバシーポリシー：小さな文字リンク（下線が伸びる） */
.l-menu__sub-link {
  position: relative;
  display: table;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #fff;
  opacity: 0.7;
}
.l-menu__sub-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time, 0.5s) var(--hover-ease, ease);
}
.l-menu__sub-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* 動きを減らす設定の端末では、開閉の動きをなくす */
@media (prefers-reduced-motion: reduce) {
  .l-menu,
  .l-menu.is-open,
  .l-menu__bg,
  .l-menu__link,
  .l-menu__info {
    transition: none;
  }
}

@media screen and (max-width: 768px) {
  .c-hamburger {
    right: 1.25rem;
  }
  /* SPはヘッダーが狭いので「MENU」の文字は隠して線だけに */
  .c-hamburger__label {
    display: none;
  }
  .l-head_link {
    margin-right: 4.5rem;
  }
  .l-menu {
    clip-path: circle(0 at calc(100% - 3rem) 2rem);
  }
  .l-menu.is-open {
    clip-path: circle(150% at calc(100% - 3rem) 2rem);
  }
  .l-menu__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3rem;
    padding: 7rem 1.25rem 3rem;
  }
  .l-menu__link {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  /* 番号は常に英字の上の行に置いてそろえる */
  .l-menu__num {
    width: 100%;
  }
  .l-menu__sub-link {
    font-size: 16px;
  }
  .l-menu__en {
    font-size: 2.25rem;
  }
  .l-menu__jp {
    width: 100%;
    font-size: 16px;
  }
  .l-menu__info {
    font-size: 16px;
  }
}

/* =====================================================
   p-photos-scatter / 写真ランダム重なりエフェクト
   ※ p-top-about_img 内専用・他スタイルに影響しない
   ===================================================== */

/* 流れるテキスト「LIFE STYLE HUB」を最前面に */
.p-top-about_img .p-top-about_slideerea {
  z-index: 30;
  /* テキストはクリックを邪魔しないように */
  pointer-events: none;
}

/* 親コンテナ（位置の基準） */
.p-top-about_img .p-photos-scatter {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* 流れるテキスト(z-index:30)より下に配置 */
  z-index: 10;
  /* 画面外スライドインがはみ出すための領域確保 */
  overflow: visible;
}

/* 写真を配置するステージ */
.p-top-about_img .p-photos-scatter__stage {
  position: relative;
  width: 100%;
  /* 写真が散らばるエリアの高さ */
  height: 800px;
  overflow: visible;
}

/* 個別の写真 */
.p-top-about_img .p-photos-scatter__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  /* 初期状態: 非表示 */
  opacity: 0;
  /* GPU加速 */
  will-change: transform, opacity;
  /* アニメーション：着地で少し行き過ぎて戻る弾む動き */
  transition: transform 1.4s cubic-bezier(0.16, 1.25, 0.3, 1),
              opacity 0.5s ease-out;
}

/* 画像本体 */
.p-top-about_img .p-photos-scatter__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 表示時のスタイル（JSが付与） */
.p-top-about_img .p-photos-scatter__item.is-visible {
  opacity: 1;
}

/* 着地後、写真がそれぞれゆっくりふわふわ揺れる */
.p-top-about_img .p-photos-scatter__item.is-visible img {
  animation: p-photos-float 6s ease-in-out var(--float-delay, 0s) infinite alternate;
}
.p-top-about_img .p-photos-scatter__item:nth-child(even).is-visible img {
  animation-duration: 7.5s;
  animation-direction: alternate-reverse;
}
@keyframes p-photos-float {
  0% {
    transform: translateY(0) scale(1.04) rotate(0deg);
  }
  100% {
    transform: translateY(-10px) scale(1.08) rotate(0.8deg);
  }
}

/* 動きを減らす設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
  .p-top-about_img .p-photos-scatter__item {
    transition: opacity 0.5s ease-out;
  }
  .p-top-about_img .p-photos-scatter__item.is-visible img {
    animation: none;
  }
}

/* タブレット以下 */
@media (max-width: 1024px) {
  .p-top-about_img .p-photos-scatter__item {
    width: 260px;
  }
  .p-top-about_img .p-photos-scatter__stage {
    height: 620px;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .p-top-about_img .p-photos-scatter__item {
    width: 220px;
  }
  /* SPは縦に長くなりすぎないよう6枚まで表示 */
  .p-top-about_img .p-photos-scatter__item:nth-child(n+7) {
    display: none;
  }
  .p-top-about_img .p-photos-scatter__stage {
    height: 700px;
  }
}

/* =====================================================
   Project: p-floor（フロアガイド）
   ===================================================== */
.p-floor {
  padding-bottom: 6rem;
}
.p-floor__inner {
  max-width: 81.25rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* タブ */
.p-floor__tabs {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 3rem;
  border: 2px solid #7e0d18;
  border-radius: 3rem;
  overflow: hidden;
}
.p-floor__tab {
  padding: 0.75rem 3.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Special Gothic Expanded One", sans-serif;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #7e0d18;
  transition: background 0.3s, color 0.3s;
  letter-spacing: 0.05em;
}
.p-floor__tab.is-active {
  background: #7e0d18;
  color: #fff;
}
.p-floor__tab:hover:not(.is-active) {
  background: rgba(126, 13, 24, 0.08);
}

/* パネル */
.p-floor__panel {
  display: none;
}
.p-floor__panel.is-active {
  display: block;
}

/* フロアマップ */
.p-floor__map {
  background: #fff;
  border-radius: 0.75rem;
  padding: 2rem 2.5rem;
  margin-bottom: 3rem;
}
.p-floor__map-label {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: "Special Gothic Expanded One", sans-serif;
  color: #5a9fb8;
  margin-bottom: 1rem;
  line-height: 1;
}
.p-floor__map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 店舗カード */
.p-floor__shop {
  display: grid;
  grid-template-columns: 5rem 18rem 1fr;
  gap: 0 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid #ccc9be;
  align-items: start;
}
.p-floor__shop-num {
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "Special Gothic Expanded One", sans-serif;
  color: #5a9fb8;
  line-height: 1;
  padding-top: 0.25rem;
}

/* スライダー */
.p-floor__shop-slider {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 4 / 3;
}
.p-floor__slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.p-floor__slider-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-floor__slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
.p-floor__slider-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.p-floor__slider-btn--prev { left: 0.5rem; }
.p-floor__slider-btn--next { right: 0.5rem; }
.p-floor__slider-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.375rem;
}
.p-floor__slider-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s;
}
.p-floor__slider-dot.is-active {
  background: #fff;
}

/* 店舗情報 */
.p-floor__shop-genre {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.25rem;
}
.p-floor__shop-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-family: "Special Gothic Expanded One", sans-serif;
}
.p-floor__shop-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 1rem;
}
.p-floor__shop-data {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.p-floor__shop-data-label {
  color: #666;
}
.p-floor__shop-data-val {
  color: #333;
}
.p-floor__shop-sns {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}
.p-floor__shop-sns-icon {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0);
  display: block;
}

/* タブレット */
@media (max-width: 1024px) {
  .p-floor__shop {
    grid-template-columns: 5rem 14rem 1fr;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .p-floor__tab {
    padding: 0.625rem 2rem;
    font-size: 0.9375rem;
  }
  .p-floor__shop {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }
  .p-floor__shop-num {
    font-size: 1.25rem;
  }
}

/* =====================================================
   Project: p-howto-case（HOW TO PLAY 各ケース詳細）
   ===================================================== */

/* ---------- 固定背景：オレンジのボケた円 ---------- */
/* 画面中央に固定し、ゆっくり拡大縮小をくり返す */
.p-howto-case__bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.55) 0%, rgba(255, 160, 40, 0.3) 40%, rgba(255, 170, 60, 0) 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%) scale(0.9);
  animation: p-howto-case-bg-pulse 8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}
@keyframes p-howto-case-bg-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* ---------- ページヘッダー ---------- */
.p-howto-case__hero {
  position: relative;
  overflow: hidden;
  padding: 13.75rem 0 6.25rem;
  /* 固定背景の円が透けないように背景色を指定 */
  background: #eeebe2;
}
/* 背景画像（薄く表示） */
.p-howto-case__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.p-howto-case__hero-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.p-howto-case__hero-label {
  grid-column: 1 / 2;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-howto-case__hero-title {
  grid-column: 1 / 2;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

/* パンくず */
.p-howto-case__breadcrumb {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.p-howto-case__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
}
.p-howto-case__breadcrumb-item + .p-howto-case__breadcrumb-item::before {
  content: "–";
  margin: 0 0.75rem;
}
.p-howto-case__breadcrumb-item a {
  display: inline;
}
.p-howto-case__breadcrumb-item a:hover {
  opacity: 0.6;
}

/* ---------- メイン画像（横100%） ---------- */
.p-howto-case__mv {
  width: 100%;
}
.p-howto-case__mv-img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

/* ---------- イントロ ---------- */
.p-howto-case__intro {
  width: 100%;
}
.p-howto-case__intro-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 5.5rem 1.25rem 6rem;
  text-align: center;
}
.p-howto-case__intro-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.p-howto-case__intro-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0.25rem;
}
.p-howto-case__intro-lead {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 2.5rem;
}
.p-howto-case__intro-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.4;
  margin-top: 2.5rem;
}

/* ---------- タイムライン ---------- */
.p-howto-case__timeline {
  width: 100%;
}
.p-howto-case__timeline-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* 1ステップ：左（時間）＋右（内容）の2カラム */
.p-howto-case__step {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
}
.p-howto-case__step + .p-howto-case__step {
  margin-top: 6.75rem;
}

/* 左側：スクロールしても画面上部に固定 */
.p-howto-case__step-head {
  position: sticky;
  top: 9rem;
  align-self: start;
}
.p-howto-case__step-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.p-howto-case__step-time {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0.25rem;
}
.p-howto-case__step-genre {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 3.75rem;
}
.p-howto-case__step-shop {
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0.25rem;
}
/* ジャンル表記がない場合は時間の下に余白をとる */
.p-howto-case__step-time + .p-howto-case__step-shop {
  margin-top: 3.75rem;
}

/* 右側：内容 */
.p-howto-case__step-body {
  min-width: 0;
}
/* 最後以外のステップは下に区切り線 */
.p-howto-case__step:not(:last-child) .p-howto-case__step-body {
  padding-bottom: 6.75rem;
  border-bottom: 1px solid #000;
}
.p-howto-case__step-main-img {
  width: 100%;
  aspect-ratio: 20 / 11;
  object-fit: cover;
  border-radius: 16px;
}
.p-howto-case__step-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 4rem;
}
.p-howto-case__step-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.2;
  margin-top: 2.5rem;
}
/* 見出しなしで画像の直後に本文がくる場合 */
.p-howto-case__step-main-img + .p-howto-case__step-text {
  margin-top: 4.5rem;
}
.p-howto-case__step-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4.5rem;
}
.p-howto-case__step-gallery-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- ホテル紹介 ---------- */
.p-howto-case__hotel {
  width: 100%;
}
.p-howto-case__hotel-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 7rem 1.25rem 0;
}
.p-howto-case__hotel-card {
  display: grid;
  grid-template-columns: minmax(0, 445fr) minmax(0, 560fr);
  column-gap: 3.5rem;
  align-items: start;
  padding: 4.5rem 3.5rem;
  background: #fff;
  border-radius: 16px;
}
.p-howto-case__hotel-img {
  width: 100%;
  aspect-ratio: 445 / 340;
  object-fit: cover;
  border-radius: 16px;
}
.p-howto-case__hotel-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-howto-case__hotel-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.9;
  margin-top: 1.5rem;
}
.p-howto-case__hotel-data {
  display: flex;
  gap: 3rem;
  margin-top: 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.p-howto-case__hotel-address {
  flex-shrink: 0;
  font-style: normal;
}
.p-howto-case__hotel-feature::before {
  content: "・";
}
.p-howto-case__hotel-btn-wrap {
  margin-top: 3rem;
  text-align: center;
}
.p-howto-case__hotel-btn {
  display: inline-block;
  width: 17.5rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50px;
}
.p-howto-case__hotel-btn:hover {
  background: #000;
  color: #fff;
}

/* ---------- 他のケース ---------- */
.p-howto-case__other {
  width: 100%;
}
.p-howto-case__other-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 7rem 1.25rem 0;
}
.p-howto-case__other-title {
  padding-top: 6rem;
  border-top: 1px solid #000;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* 改行位置を読点の後にそろえる */
.p-howto-case__other-title-line {
  display: inline-block;
}
.p-howto-case__other-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4.5rem;
}
.p-howto-case__other-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
}
/* 文字を読みやすくするため下側を暗くする */
.p-howto-case__other-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.p-howto-case__other-img {
  width: 100%;
  aspect-ratio: 545 / 305;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.p-howto-case__other-link:hover .p-howto-case__other-img {
  transform: scale(1.08);
}
.p-howto-case__other-body {
  position: absolute;
  left: 3.75rem;
  bottom: 2.5rem;
  z-index: 1;
}
.p-howto-case__other-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.p-howto-case__other-name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.p-howto-case__other-text {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.75rem;
}

/* ---------- 流れる文字（ループアニメーション） ---------- */
.p-howto-case__marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  padding: 5rem 0 4rem;
}
.p-howto-case__marquee-txt {
  flex-shrink: 0;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12rem;
  line-height: 1;
  color: #84ccc9;
  white-space: nowrap;
  animation: loop_animation_right_double 30s linear infinite;
}

/* ---------- タブレット ---------- */
@media (max-width: 1023px) {
  .p-howto-case__step {
    grid-template-columns: 14rem 1fr;
  }
  .p-howto-case__hotel-card {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    padding: 3rem;
  }
  .p-howto-case__hotel-data {
    gap: 2rem;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  /* 固定背景の円 */
  .p-howto-case__bg {
    width: 25rem;
    height: 25rem;
  }

  /* ページヘッダー */
  .p-howto-case__hero {
    padding: 9rem 0 3rem;
  }
  .p-howto-case__hero-inner {
    grid-template-columns: 1fr;
  }
  .p-howto-case__hero-label {
    font-size: 16px;
  }
  .p-howto-case__hero-title {
    font-size: 2.125rem;
  }
  .p-howto-case__breadcrumb {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 1.5rem;
  }
  .p-howto-case__breadcrumb-list {
    font-size: 16px;
  }

  /* メイン画像 */
  .p-howto-case__mv-img {
    aspect-ratio: 3 / 2;
  }

  /* イントロ */
  .p-howto-case__intro-inner {
    padding: 4rem 1.25rem;
  }
  .p-howto-case__intro-num {
    font-size: 16px;
  }
  .p-howto-case__intro-title {
    font-size: 2.5rem;
  }
  .p-howto-case__intro-lead {
    font-size: 1.25rem;
    margin-top: 1.5rem;
  }
  .p-howto-case__intro-text {
    font-size: 16px;
    line-height: 2;
    margin-top: 1.5rem;
    text-align: left;
  }
  .p-howto-case__intro-text br {
    display: none;
  }

  /* タイムライン：1カラム・固定解除 */
  .p-howto-case__step {
    grid-template-columns: 1fr;
  }
  .p-howto-case__step + .p-howto-case__step {
    margin-top: 4rem;
  }
  .p-howto-case__step-head {
    position: static;
  }
  .p-howto-case__step-num {
    font-size: 16px;
  }
  .p-howto-case__step-time {
    font-size: 3rem;
  }
  .p-howto-case__step-genre {
    font-size: 16px;
    margin-top: 1rem;
  }
  .p-howto-case__step-shop {
    font-size: 1.5rem;
  }
  .p-howto-case__step-time + .p-howto-case__step-shop {
    margin-top: 1rem;
  }
  .p-howto-case__step-body {
    margin-top: 1.5rem;
  }
  .p-howto-case__step:not(:last-child) .p-howto-case__step-body {
    padding-bottom: 4rem;
  }
  .p-howto-case__step-title {
    font-size: 1.25rem;
    margin-top: 2rem;
  }
  .p-howto-case__step-text {
    font-size: 16px;
    line-height: 2;
    margin-top: 1.25rem;
  }
  .p-howto-case__step-text br {
    display: none;
  }
  .p-howto-case__step-main-img + .p-howto-case__step-text {
    margin-top: 2rem;
  }
  .p-howto-case__step-gallery {
    gap: 0.75rem;
    margin-top: 2rem;
  }

  /* ホテル紹介 */
  .p-howto-case__hotel-inner {
    padding-top: 4rem;
  }
  .p-howto-case__hotel-card {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    padding: 2rem 1.25rem;
  }
  .p-howto-case__hotel-title {
    font-size: 1.25rem;
  }
  .p-howto-case__hotel-text {
    font-size: 16px;
  }
  .p-howto-case__hotel-text br {
    display: none;
  }
  .p-howto-case__hotel-data {
    font-size: 16px;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .p-howto-case__hotel-btn-wrap {
    margin-top: 2rem;
  }
  .p-howto-case__hotel-btn {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

  /* 他のケース */
  .p-howto-case__other-inner {
    padding-top: 4rem;
  }
  .p-howto-case__other-title {
    padding-top: 4rem;
    font-size: 1.125rem;
  }
  .p-howto-case__other-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  .p-howto-case__other-body {
    left: 1.5rem;
    bottom: 1.5rem;
  }
  .p-howto-case__other-num {
    font-size: 16px;
  }
  .p-howto-case__other-name {
    font-size: 1.5rem;
  }
  .p-howto-case__other-text {
    font-size: 16px;
    margin-top: 0.25rem;
  }

  /* 流れる文字 */
  .p-howto-case__marquee {
    padding: 3rem 0 2.5rem;
  }
  .p-howto-case__marquee-txt {
    font-size: 5rem;
  }
}

/* =====================================================
   Project: p-howto（HOW TO PLAY 扉ページ）
   ===================================================== */

/* ---------- 固定背景：オレンジのボケた円 ---------- */
/* アニメーションは詳細ページと共通（p-howto-case-bg-pulse） */
.p-howto__bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.55) 0%, rgba(255, 160, 40, 0.3) 40%, rgba(255, 170, 60, 0) 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%) scale(0.9);
  animation: p-howto-case-bg-pulse 8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

/* ---------- ページヘッダー ---------- */
.p-howto__hero {
  position: relative;
  padding: 13.75rem 0 0;
}
/* 背景画像（画像自体が薄く、下に向かって透過している） */
.p-howto__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.p-howto__hero-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.p-howto__hero-label {
  grid-column: 1 / 2;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-howto__hero-title {
  grid-column: 1 / 2;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

/* パンくず */
.p-howto__breadcrumb {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.p-howto__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
}
.p-howto__breadcrumb-item + .p-howto__breadcrumb-item::before {
  content: "–";
  margin: 0 0.75rem;
}
.p-howto__breadcrumb-item a {
  display: inline;
}
.p-howto__breadcrumb-item a:hover {
  opacity: 0.6;
}

/* ---------- リード文 ---------- */
.p-howto__intro {
  width: 100%;
}
.p-howto__intro-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 5rem 1.25rem 6rem;
  text-align: center;
}
.p-howto__intro-lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- ケース一覧 ---------- */
.p-howto__case {
  width: 100%;
}
.p-howto__case-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.p-howto__case-list {
  display: grid;
  gap: 3rem;
}

/* カード全体がリンク：画像の上に文字を重ねる */
.p-howto__case-link {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1300 / 567;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
}
.p-howto__case-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.p-howto__case-link:hover .p-howto__case-img {
  transform: scale(1.08);
}
/* 文字を読みやすくするため下側を暗くする */
.p-howto__case-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
}
.p-howto__case-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 22rem 1fr;
  align-items: start;
  width: 100%;
  padding: 0 3rem 3.5rem 5rem;
}
.p-howto__case-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}
.p-howto__case-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0.75rem;
}
.p-howto__case-catch {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-howto__case-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  margin-top: 1.25rem;
}

/* ---------- 流れる文字（ループアニメーション） ---------- */
.p-howto__marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  padding: 5rem 0 4rem;
}
.p-howto__marquee-txt {
  flex-shrink: 0;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 12rem;
  line-height: 1;
  color: #84ccc9;
  white-space: nowrap;
  animation: loop_animation_right_double 30s linear infinite;
}

/* ---------- タブレット ---------- */
@media (max-width: 1023px) {
  .p-howto__case-body {
    grid-template-columns: 14rem 1fr;
    padding: 0 2.5rem 2.5rem;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  /* 固定背景の円 */
  .p-howto__bg {
    width: 25rem;
    height: 25rem;
  }

  /* ページヘッダー */
  .p-howto__hero {
    padding-top: 9rem;
  }
  .p-howto__hero-inner {
    grid-template-columns: 1fr;
  }
  .p-howto__hero-label {
    font-size: 16px;
  }
  .p-howto__hero-title {
    font-size: 2.125rem;
  }
  .p-howto__breadcrumb {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 1.5rem;
  }
  .p-howto__breadcrumb-list {
    font-size: 16px;
  }

  /* リード文 */
  .p-howto__intro-inner {
    padding: 3rem 1.25rem 3.5rem;
  }
  .p-howto__intro-lead {
    font-size: 16px;
  }

  /* ケース一覧：カード内は縦積み */
  .p-howto__case-list {
    gap: 1.5rem;
  }
  .p-howto__case-link {
    aspect-ratio: auto;
    min-height: 28rem;
  }
  .p-howto__case-link::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.75) 60%);
  }
  .p-howto__case-body {
    grid-template-columns: 1fr;
    padding: 10rem 1.25rem 2rem;
  }
  .p-howto__case-num {
    font-size: 16px;
  }
  .p-howto__case-title {
    font-size: 1.75rem;
    margin-top: 0.25rem;
  }
  .p-howto__case-content {
    margin-top: 1rem;
  }
  .p-howto__case-catch {
    font-size: 1.125rem;
  }
  .p-howto__case-text {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 0.75rem;
  }
  .p-howto__case-text br {
    display: none;
  }

  /* 流れる文字 */
  .p-howto__marquee {
    padding: 3rem 0 2.5rem;
  }
  .p-howto__marquee-txt {
    font-size: 5rem;
  }
}

/* =====================================================
   Project: p-tenant（テナントに関するお問い合わせ）
   ===================================================== */

/* ---------- 固定背景：オレンジのボケた円 ---------- */
/* アニメーションは詳細ページと共通（p-howto-case-bg-pulse） */
.p-tenant__bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.55) 0%, rgba(255, 160, 40, 0.3) 40%, rgba(255, 170, 60, 0) 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%) scale(0.9);
  animation: p-howto-case-bg-pulse 8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

/* ---------- ページヘッダー ---------- */
.p-tenant__hero {
  position: relative;
  padding: 13.75rem 0 0;
}
/* 背景画像（画像自体が薄く、下に向かって透過している） */
.p-tenant__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.p-tenant__hero-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.p-tenant__hero-label {
  grid-column: 1 / 2;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-tenant__hero-title {
  grid-column: 1 / 2;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}
.p-tenant__hero-text {
  grid-column: 1 / -1;
  margin-top: 6.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.2;
}

/* パンくず */
.p-tenant__breadcrumb {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.p-tenant__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
}
.p-tenant__breadcrumb-item + .p-tenant__breadcrumb-item::before {
  content: "–";
  margin: 0 0.75rem;
}
.p-tenant__breadcrumb-item a {
  display: inline;
}
.p-tenant__breadcrumb-item a:hover {
  opacity: 0.6;
}

/* ---------- 空きテナント情報 ---------- */
.p-tenant__vacancy {
  width: 100%;
}
.p-tenant__vacancy-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 8rem 1.25rem 0;
}
.p-tenant__vacancy-title {
  padding-bottom: 3rem;
  border-bottom: 1px solid #000;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* ダミー（グレーの枠） */
.p-tenant__vacancy-dummy {
  display: grid;
  place-items: center;
  aspect-ratio: 6 / 5;
  margin-top: 2rem;
  background: #6e6e6e;
}
.p-tenant__vacancy-dummy-text {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}

/* ---------- お問い合わせフォーム ---------- */
.p-tenant__form {
  width: 100%;
}
.p-tenant__form-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 8rem 1.25rem 3.5rem;
}
.p-tenant__form-title {
  padding-bottom: 3rem;
  border-bottom: 1px solid #000;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.p-tenant__form-lead {
  margin-top: 3.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  text-align: center;
}
.p-tenant__form-body {
  max-width: 1000px;
  margin: 4.5rem auto 0;
}
.p-tenant__form-note {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
}
.p-tenant__form-required {
  margin-left: 0.75rem;
  color: #e05a5a;
}
.p-tenant__form-note .p-tenant__form-required {
  margin-left: 0;
}

/* 1項目：左に項目名、右に入力欄 */
.p-tenant__form-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid #d6d2c8;
}
/* テキストエリアの行は項目名を上にそろえる */
.p-tenant__form-row--top {
  align-items: start;
}
.p-tenant__form-row--top .p-tenant__form-label {
  padding-top: 0.75rem;
}
.p-tenant__form-label {
  font-size: 1rem;
  font-weight: 700;
}
.p-tenant__form-input,
.p-tenant__form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #000;
}
.p-tenant__form-input {
  height: 3rem;
}
.p-tenant__form-textarea {
  height: 15.625rem;
  padding: 1rem;
  resize: vertical;
}
.p-tenant__form-input:focus,
.p-tenant__form-textarea:focus {
  outline: 2px solid #7e0d18;
  outline-offset: 0;
}

/* 個人情報の取扱 */
.p-tenant__form-privacy {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.p-tenant__form-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: #7e0d18;
  cursor: pointer;
}
.p-tenant__form-privacy-label {
  font-size: 1rem;
  font-weight: 400;
}
.p-tenant__form-privacy-link {
  display: inline;
  text-decoration: underline;
}
.p-tenant__form-privacy-link:hover {
  opacity: 0.6;
}

/* 送信ボタン */
.p-tenant__form-submit-wrap {
  margin-top: 3rem;
  text-align: center;
}
.p-tenant__form-submit {
  width: 18rem;
  padding: 1.25rem 1rem;
  border: none;
  border-radius: 50px;
  background: #7e0d18;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.4s;
}
.p-tenant__form-submit:hover {
  opacity: 0.8;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  /* 固定背景の円 */
  .p-tenant__bg {
    width: 25rem;
    height: 25rem;
  }

  /* ページヘッダー */
  .p-tenant__hero {
    padding-top: 9rem;
  }
  .p-tenant__hero-inner {
    grid-template-columns: 1fr;
  }
  .p-tenant__hero-label {
    font-size: 16px;
  }
  .p-tenant__hero-title {
    font-size: 2.5rem;
  }
  .p-tenant__breadcrumb {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 1.5rem;
  }
  .p-tenant__breadcrumb-list {
    font-size: 16px;
  }
  .p-tenant__hero-text {
    margin-top: 2.5rem;
    font-size: 16px;
    line-height: 2;
  }
  .p-tenant__hero-text br {
    display: none;
  }

  /* 空きテナント情報 */
  .p-tenant__vacancy-inner {
    padding-top: 4.5rem;
  }
  .p-tenant__vacancy-title {
    padding-bottom: 1.5rem;
    font-size: 1.375rem;
  }
  .p-tenant__vacancy-dummy {
    aspect-ratio: 4 / 3;
    margin-top: 1.5rem;
  }
  .p-tenant__vacancy-dummy-text {
    font-size: 2rem;
  }

  /* お問い合わせフォーム */
  .p-tenant__form-inner {
    padding: 4.5rem 1.25rem 3rem;
  }
  .p-tenant__form-title {
    padding-bottom: 1.5rem;
    font-size: 1.375rem;
  }
  .p-tenant__form-lead {
    margin-top: 2rem;
    font-size: 16px;
    text-align: left;
  }
  .p-tenant__form-lead br {
    display: none;
  }
  .p-tenant__form-body {
    margin-top: 2.5rem;
  }
  .p-tenant__form-note {
    font-size: 16px;
  }
  .p-tenant__form-row {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }
  .p-tenant__form-row--top .p-tenant__form-label {
    padding-top: 0;
  }
  .p-tenant__form-label,
  .p-tenant__form-input,
  .p-tenant__form-textarea,
  .p-tenant__form-privacy-label {
    font-size: 16px;
  }
  .p-tenant__form-textarea {
    height: 12rem;
  }
  .p-tenant__form-submit {
    width: 100%;
    font-size: 16px;
  }
}

/* =====================================================
   共通：スクロールフェードイン
   ===================================================== */
/* JSが動く環境でだけ、表示前は隠しておく */
.is-fade-ready .scroll-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0s),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0s);
}
.is-fade-ready .scroll-fade-up.is-inview {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の端末では、動かさずに表示 */
@media (prefers-reduced-motion: reduce) {
  .is-fade-ready .scroll-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   Project: p-privacy（プライバシーポリシー）
   ===================================================== */

/* ---------- 固定背景：オレンジのボケた円 ---------- */
/* アニメーションは詳細ページと共通（p-howto-case-bg-pulse） */
.p-privacy__bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.55) 0%, rgba(255, 160, 40, 0.3) 40%, rgba(255, 170, 60, 0) 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%) scale(0.9);
  animation: p-howto-case-bg-pulse 8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

/* ---------- ページヘッダー ---------- */
.p-privacy__hero {
  position: relative;
  padding: 13.75rem 0 0;
}
/* 背景画像（画像自体が薄く、下に向かって透過している） */
.p-privacy__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.p-privacy__hero-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.p-privacy__hero-label {
  grid-column: 1 / 2;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-privacy__hero-title {
  grid-column: 1 / 2;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

/* パンくず */
.p-privacy__breadcrumb {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.p-privacy__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
}
.p-privacy__breadcrumb-item + .p-privacy__breadcrumb-item::before {
  content: "–";
  margin: 0 0.75rem;
}
.p-privacy__breadcrumb-item a {
  display: inline;
}
.p-privacy__breadcrumb-item a:hover {
  opacity: 0.6;
}

/* ---------- 本文 ---------- */
.p-privacy__content {
  width: 100%;
}
.p-privacy__content-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6rem 1.25rem 8rem;
}
.p-privacy__lead {
  font-size: 1rem;
  font-weight: 500;
  line-height: 2;
}
.p-privacy__section {
  margin-top: 4rem;
}
.p-privacy__section-title {
  padding-bottom: 1rem;
  border-bottom: 1px solid #000;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-privacy__text {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}
.p-privacy__list {
  margin-top: 1rem;
}
.p-privacy__list-item {
  position: relative;
  padding-left: 1.25em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}
/* 先頭の「・」 */
.p-privacy__list-item::before {
  content: "・";
  position: absolute;
  left: 0;
}
.p-privacy__address {
  margin-top: 1.5rem;
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}
.p-privacy__date {
  margin-top: 4rem;
  font-size: 1rem;
  font-weight: 400;
  text-align: right;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  /* 固定背景の円 */
  .p-privacy__bg {
    width: 25rem;
    height: 25rem;
  }

  /* ページヘッダー */
  .p-privacy__hero {
    padding-top: 9rem;
  }
  .p-privacy__hero-inner {
    grid-template-columns: 1fr;
  }
  .p-privacy__hero-label {
    font-size: 16px;
  }
  .p-privacy__hero-title {
    font-size: 2.5rem;
  }
  .p-privacy__breadcrumb {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 1.5rem;
  }
  .p-privacy__breadcrumb-list {
    font-size: 16px;
  }

  /* 本文 */
  .p-privacy__content-inner {
    padding: 4rem 1.25rem 5rem;
  }
  .p-privacy__lead,
  .p-privacy__text,
  .p-privacy__list-item,
  .p-privacy__address,
  .p-privacy__date {
    font-size: 16px;
  }
  .p-privacy__section {
    margin-top: 3rem;
  }
  .p-privacy__section-title {
    font-size: 1.125rem;
  }
}

/* =====================================================
   共通：リンクのホバーアニメーション（全ページ統一）
   ① 文字リンク：下線が左から伸び、離すと右へ抜ける
   ② ボタン：塗りが左から広がり、文字色が反転して字間が広がる
   ③ 画像リンク：画像がゆっくり拡大
   ④ アイコン：少し浮き上がる
   ===================================================== */
:root {
  --hover-time: 0.5s;
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- ① 文字リンク ---------- */
/* ヘッダー：下線は日本語の文字幅だけに引く */
.l-gnav_item_jp {
  position: relative;
  display: inline-block;
}
.l-gnav_item_jp::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time) var(--hover-ease);
  pointer-events: none;
}
.l-gnav_item a:hover .l-gnav_item_jp::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* ヘッダー：既存の文字スライドを止めて下線に統一 */
.l-gnav_item a:hover .l-gnav_item_txt {
  transform: none;
}
.l-gnav_item a .l-gnav_item_txt:after {
  display: none;
}
.l-footer_privacy a,
.p-howto-case__breadcrumb-item a,
.p-howto__breadcrumb-item a,
.p-tenant__breadcrumb-item a,
.p-privacy__breadcrumb-item a {
  position: relative;
  display: inline-block;
}
.l-footer_nav_list a::after,
.l-footer_privacy a::after,
.p-howto-case__breadcrumb-item a::after,
.p-howto__breadcrumb-item a::after,
.p-tenant__breadcrumb-item a::after,
.p-privacy__breadcrumb-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time) var(--hover-ease);
  pointer-events: none;
}
.l-footer_nav_list a:hover::after,
.l-footer_privacy a:hover::after,
.p-howto-case__breadcrumb-item a:hover::after,
.p-howto__breadcrumb-item a:hover::after,
.p-tenant__breadcrumb-item a:hover::after,
.p-privacy__breadcrumb-item a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* パンくずは薄くする動きをやめて下線に統一 */
.p-howto-case__breadcrumb-item a:hover,
.p-howto__breadcrumb-item a:hover,
.p-tenant__breadcrumb-item a:hover,
.p-privacy__breadcrumb-item a:hover {
  opacity: 1;
}

/* もともと下線があるリンク：線が右へ抜けて、左から引き直される */
.p-top-access_list_data_link a,
.p-tenant__form-privacy-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.p-top-access_list_data_link a::after,
.p-tenant__form-privacy-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 1px;
  background: currentColor;
  pointer-events: none;
}
.p-top-access_list_data_link a:hover::after,
.p-tenant__form-privacy-link:hover::after {
  animation: c-link-line-run 0.8s var(--hover-ease);
}
.p-tenant__form-privacy-link:hover {
  opacity: 1;
}
@keyframes c-link-line-run {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  45% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  55% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* ---------- ② ボタン ---------- */
/* 塗りの色と、ホバー時の文字色（ボタンの種類ごと） */
.c-btn {
  --btn-fill: #7e0d18;
  --btn-text: #fff;
  transition:
    color var(--hover-time) var(--hover-ease),
    letter-spacing var(--hover-time) var(--hover-ease);
}
.c-btn_yellow {
  --btn-fill: #fff799;
  --btn-text: #7e0d18;
}
.c-btn_wht {
  --btn-fill: #fff;
  --btn-text: #7e0d18;
}
/* 既存の灰色の塗り（未使用）は使わない */
.c-btn_red::after {
  display: none;
}
/* 切り取りは枠線の外側の角丸で行い、塗りが枠線ごと覆うようにする
   （overflow: hidden だと枠線の内側で切れて、下に1pxの線が残るため） */
.c-btn,
.p-howto-case__hotel-btn,
.p-tenant__form-submit {
  overflow: visible;
  clip-path: inset(0 round 999px);
}
.c-btn::before,
.p-howto-case__hotel-btn::before,
.p-tenant__form-submit::before {
  content: "";
  position: absolute;
  /* 枠線（1px）の外側までかぶせて、縁に元の色が線のように残らないようにする */
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: inherit;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time) var(--hover-ease);
  z-index: -1;
}
.c-btn:hover,
.p-howto-case__hotel-btn:hover,
.p-tenant__form-submit:hover {
  color: var(--btn-text);
  letter-spacing: 0.15em;
  text-decoration: none;
}
.c-btn:hover::before,
.p-howto-case__hotel-btn:hover::before,
.p-tenant__form-submit:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}
/* ホテル公式サイトボタン（黒枠） */
.p-howto-case__hotel-btn {
  --btn-fill: #000;
  --btn-text: #fff;
  position: relative;
  z-index: 1;
  transition:
    color var(--hover-time) var(--hover-ease),
    letter-spacing var(--hover-time) var(--hover-ease);
}
.p-howto-case__hotel-btn:hover {
  background: none;
}
/* 送信ボタン（えんじの塗り）：白が広がり文字がえんじに */
.p-tenant__form-submit {
  --btn-fill: #fff;
  --btn-text: #7e0d18;
  position: relative;
  z-index: 1;
  border: 1px solid #7e0d18;
  transition:
    color var(--hover-time) var(--hover-ease),
    letter-spacing var(--hover-time) var(--hover-ease);
}
.p-tenant__form-submit:hover {
  opacity: 1;
}

/* ---------- ③ 画像リンク ---------- */
.p-top_instagram_list_item a,
.p-top_news_list_item_pic {
  display: block;
  overflow: hidden;
}
.p-top_news_list_item_pic {
  border-radius: 20px;
}
.p-top_instagram_list_item img,
.p-top_news_list_item_pic img {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.p-top_instagram_list_item a:hover img,
.p-top_news_list_item a:hover .p-top_news_list_item_pic img {
  transform: scale(1.08);
}
/* NEWSのタイトルは下線が伸びる（複数行でも行ごとに引く） */
.p-top_news_list_item_ttl {
  display: inline;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--hover-time) var(--hover-ease);
}
.p-top_news_list_item a:hover .p-top_news_list_item_ttl {
  background-size: 100% 1px;
}

/* ---------- ④ アイコン ---------- */
.l-head_link_list_item a,
.l-footer_sns a {
  display: inline-block;
  transition:
    transform var(--hover-time) var(--hover-ease),
    opacity var(--hover-time) var(--hover-ease);
}
.l-head_link_list_item a:hover,
.l-footer_sns a:hover {
  transform: translateY(-3px);
  opacity: 0.7;
}

/* 動きを減らす設定の端末では、動きを最小限にする */
@media (prefers-reduced-motion: reduce) {
  .c-btn,
  .c-btn::before,
  .p-howto-case__hotel-btn,
  .p-howto-case__hotel-btn::before,
  .p-tenant__form-submit,
  .p-tenant__form-submit::before,
  .p-top_instagram_list_item img,
  .p-top_news_list_item_pic img,
  .l-head_link_list_item a,
  .l-footer_sns a {
    transition: none;
  }
  .p-top-access_list_data_link a:hover::after,
  .p-tenant__form-privacy-link:hover::after {
    animation: none;
  }
}

/* =====================================================
   Project: p-floor（フロアガイド）ページ見出し
   ※ ほかの下層ページ（p-howto / p-tenant / p-privacy）と同じ形
   ===================================================== */
/* ---------- ページヘッダー ---------- */
.p-floor__hero {
  position: relative;
  padding: 13.75rem 0 0;
}
/* 背景画像（画像自体が薄く、下に向かって透過している） */
.p-floor__hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.p-floor__hero-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.p-floor__hero-label {
  grid-column: 1 / 2;
  font-size: 1.125rem;
  font-weight: 700;
}
.p-floor__hero-title {
  grid-column: 1 / 2;
  font-family: "Special Gothic Expanded One", sans-serif;
  font-size: 4.5rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

/* パンくず */
.p-floor__breadcrumb {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.p-floor__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
}
.p-floor__breadcrumb-item + .p-floor__breadcrumb-item::before {
  content: "–";
  margin: 0 0.75rem;
}
.p-floor__breadcrumb-item a {
  display: inline;
}
.p-floor__breadcrumb-item a:hover {
  opacity: 0.6;
}
/* 見出しの下に、タブまでの余白 */
.p-floor__hero {
  padding-bottom: 5rem;
}
/* パンくずのホバー：下線が左から伸びる（共通ルールと同じ動き） */
.p-floor__breadcrumb-item a:hover {
  opacity: 1;
}
.p-floor__breadcrumb-item a {
  position: relative;
  display: inline-block;
}
.p-floor__breadcrumb-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--hover-time, 0.5s) var(--hover-ease, ease);
}
.p-floor__breadcrumb-item a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (max-width: 768px) {
  /* ページヘッダー */
  .p-floor__hero {
    padding-top: 9rem;
  }
  .p-floor__hero-inner {
    grid-template-columns: 1fr;
  }
  .p-floor__hero-label {
    font-size: 16px;
  }
  .p-floor__hero-title {
    font-size: 2.5rem;
  }
  .p-floor__breadcrumb {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin-top: 1.5rem;
  }
  .p-floor__breadcrumb-list {
    font-size: 16px;
  }
  .p-floor__hero {
    padding-bottom: 3rem;
  }
}

/* =====================================================
   Project: TOP スマホ表示の調整
   ===================================================== */
@media screen and (max-width: 768px) {
  /* ボタン：余白込みの幅にして、枠からはみ出さないように */
  .c-btn {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* 英字見出し */
  .p-top_ttl_en {
    font-size: 2.5rem;
  }

  /* ABOUT：縦書きの見出しと本文を縦に並べる */
  .p-top-about_content {
    width: auto;
    margin: 3rem 0 0;
  }
  .p-top-about_main {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .p-top-about_ttl {
    font-size: 2.25rem;
  }
  .p-top-about_txt {
    margin: 0;
    font-size: 16px;
  }
  .p-top-about_txt p {
    margin-bottom: 1.5rem;
  }

  /* 運営元（ホテル）の情報：1列に */
  .p-top-about-sumiyoshi_data {
    padding: 1.5rem 1.25rem;
  }
  .p-top-about-sumiyoshi_data_wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .p-top-about-sumiyoshi_data_description,
  .p-top-about-sumiyoshi_data_point {
    width: auto;
  }

  /* HOW TO PLAY のケースカード：文字を小さく、内側の余白を詰める */
  .p-top-howto_case_num {
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
  }
  .p-top-howto_case_head {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
  }
  .p-top-howto_case_ttl {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  .p-top-howto_case_txt {
    margin-top: 0.25rem;
    font-size: 16px;
    line-height: 1.5;
  }

  /* FLOOR GUIDE：余白と「1F」を小さく */
  .p-top-floor_head {
    margin-bottom: 2.5rem;
  }
  .p-top-floor_head_lead {
    margin-top: 1.5rem;
    font-size: 16px;
  }
  .p-top-floor_main {
    padding: 1.5rem 1.25rem;
  }
  .p-top-floor_num {
    margin-bottom: 0.75rem;
    font-size: 2.5rem;
  }
  .p-btn_floor {
    margin-top: 1.5rem;
  }

  /* ACCESS：余白を詰め、項目名と内容を縦に並べる */
  .p-top-access_inr {
    margin-top: 4rem;
  }
  .p-top-access_main {
    padding: 3rem 1.25rem;
  }
  .p-top-access_name {
    margin: 2rem 0 1rem;
  }
  .p-top-access_list_item {
    font-size: 16px;
  }
  .p-top-access_list_data {
    flex-direction: column;
    gap: 0.25rem;
  }
  .p-top-access_list_data_ttl {
    width: auto;
  }
  .p-top-access_list_data_link {
    margin: 0 0 0 0.5rem;
  }
  .p-top-access_map {
    margin-top: 2rem;
  }

  /* フッターのお問い合わせ：余白を詰め、ボタンを枠いっぱいに */
  .p-btm-contact {
    padding: 3rem 1.25rem;
  }
  .p-btm-contact_inr {
    padding: 0;
  }
  .p-btm-contact_ttl {
    font-size: 1.375rem;
  }
  .p-btm-contact_lead {
    font-size: 16px;
  }
  .p-btn-btm_contact .c-btn {
    width: 100%;
  }

  /* 運営元のホテルボタン：1行に収める */
  .p-btn_about_sumiyoshi .c-btn {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
  }
  /* HOW TO PLAY のケースカード：写真の高さを少し出す */
  .p-top-howto_case_pic img {
    aspect-ratio: 4 / 3;
  }
  /* ACCESS：外側の余白が二重になっていたので、ほかと同じ20pxに */
  .p-top-access_inr {
    padding: 0;
  }
}

/* =====================================================
   共通：英字フォントの統一
   小さい英字・数字は Montserrat、大きな見出しは Special Gothic のまま
   ===================================================== */
:root {
  --font-en: "Montserrat", "Noto Sans JP", sans-serif;
}

/* パンくず：小さく、字間を広げて大文字に */
.p-howto-case__breadcrumb-list,
.p-howto__breadcrumb-list,
.p-tenant__breadcrumb-list,
.p-privacy__breadcrumb-list,
.p-floor__breadcrumb-list {
  font-family: var(--font-en);
  font-size: max(0.75rem, 11px);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* 英字ラベル・番号・時刻など */
.l-gnav_item_en,
.c-hamburger__label,
.l-menu__num,
.p-hero__nav,
.p-hero_since,
.p-hero__scroll-txt,
.p-top-howto_case_num,
.p-howto__case-num,
.p-howto-case__intro-num,
.p-howto-case__step-num,
.p-howto-case__other-num,
.p-howto-case__step-time,
.l-footer_copy {
  font-family: var(--font-en);
}
.l-gnav_item_en,
.c-hamburger__label,
.l-menu__num,
.p-hero__scroll-txt {
  font-weight: 600;
  letter-spacing: 0.2em;
}
.p-hero__nav {
  font-weight: 600;
  letter-spacing: 0.1em;
}
.p-hero_since {
  font-weight: 500;
}
.p-top-howto_case_num,
.p-howto__case-num,
.p-howto-case__intro-num,
.p-howto-case__step-num,
.p-howto-case__other-num {
  font-weight: 600;
  letter-spacing: 0.15em;
}
/* 時刻は数字の幅をそろえる */
.p-howto-case__step-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* 店名（英字まじり） */
.p-howto-case__step-shop {
  font-family: var(--font-en);
  font-weight: 700;
}
.l-footer_copy {
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ボタンの文字（VIEW MORE など。日本語は Noto Sans JP で表示） */
.c-btn,
.p-howto-case__hotel-btn,
.p-tenant__form-submit {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.c-btn:hover,
.p-howto-case__hotel-btn:hover,
.p-tenant__form-submit:hover {
  letter-spacing: 0.2em;
}

/* =====================================================
   スマホ：ロゴの大きさ（全ページ共通）
   ===================================================== */
@media screen and (max-width: 768px) {
  .l-logo {
    width: 135px;
    min-width: 0;
  }
  /* TOP ABOUT・運営元の紹介文：文の途中の改行は消し、「。」の位置でだけ改行 */
  .p-top-about_br {
    display: none;
  }
  /* TOP HOW TO PLAY：上下の余白を詰める */
  .p-top-howto_inr {
    padding: 4rem 0;
  }
}

/* =====================================================
   Utility: スマホが自動でリンクにした電話番号などの見た目
   iPhoneなどは電話番号・住所を自動でリンクにし、リンク色で表示するため、
   周りの文字と同じ色・下線なしにそろえる（タップで電話をかける機能は残る）
   ===================================================== */
a[x-apple-data-detectors],
a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* =====================================================
   フロアガイド：余白と「1F」などの見出しを小さめに
   （TOPのフロアガイド・フロアガイドページ）
   ===================================================== */
/* TOP */
.p-top-floor_head {
  margin-bottom: 3rem;
}
.p-top-floor_main {
  padding: 2rem;
}
.p-top-floor_num {
  margin-bottom: 0.75rem;
  font-size: 2.75rem;
}
/* フロアガイドページ */
.p-floor__map {
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.p-floor__map-label {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
}
.p-floor__shop {
  padding: 2rem 0;
}

@media screen and (max-width: 768px) {
  /* TOP */
  .p-top-floor_head {
    margin-bottom: 2rem;
  }
  .p-top-floor_main {
    padding: 1.25rem 1rem;
  }
  .p-top-floor_num {
    margin-bottom: 0.5rem;
    font-size: 2rem;
  }
  /* フロアガイドページ */
  .p-floor__map {
    padding: 1rem;
    margin-bottom: 2rem;
  }
  .p-floor__map-label {
    font-size: 1.5rem;
  }
  .p-floor__shop {
    padding: 1.5rem 0;
  }
}

/* =====================================================
   スマホ：横スクロール・端のバウンスを防ぐ
   ===================================================== */
/* 写真が重なるエフェクトは画面外から写真が飛んでくるため、
   区画からはみ出した部分を切り取って横スクロールが出ないようにする */
.p-top-about {
  overflow: hidden;
}
/* ページの端でさらに引っぱったときに画面が伸びる動き（バウンス）を止める */
html,
body {
  overscroll-behavior: none;
}
/* ページの土台の色をフッターと同じえんじに。
   iPhoneのSafariは画面下のツールバーの裏にも土台の色を出すため、
   フッターの下にベージュがのぞかないようにする（本文の背景はbodyのベージュのまま） */
html {
  background-color: #7e0d18;
}