/*コメント*/
.title-space-bottom-s{padding-bottom:4%;}

.title-space-bottom{padding-bottom:8%;}

.title-space-top{padding-top:8%;}

.title-space-top-s{padding-top:4%;}
/**/
.space-5{line-height:5.0;}

.space-2{line-height:2.0;}

.contents-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: auto;
}

.contents-wrapper .vertical-label-wrapper .vertical-label-text {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-lr;   /* ← rl → lr に変更 */
  text-orientation: mixed;
  /* transform: rotate(180deg); ← 削除 */
  position:relative;z-index:5;
}

.contents-wrapper-reverse {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: auto;
}

/* ? 右端に配置するための追加 */
.contents-wrapper-reverse .vertical-label-wrapper-reverse {
  /*margin-left: auto;*/ /* 左側に余白を自動で埋めて右端へ押し出す */
}

.contents-wrapper-reverse .vertical-label-wrapper-reverse .vertical-label-text-reverse {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-rl;   /* ? rl に戻す */
  text-orientation: mixed;
  position:relative;z-index:5;
}
/* ===========================
   スマホ（768px以下）
=========================== */
@media (max-width: 768px) {
.contents-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
.contents-wrapper-reverse {
    flex-direction: row;
    align-items: flex-start;
  }

 .wrap-flex-next-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* ← 縦ラベルの隣で残り幅を使い切る */
  }
.contents-wrapper-reverse .wrap-flex-next-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* ← 縦ラベルの隣で残り幅を使い切る */
  }
.vertical-label-wrapper-reverse {
    flex-shrink: 0;
  }
.vertical-label-wrapper {
    flex-shrink: 0;
  }

}.contents-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: auto;
}

.contents-wrapper .vertical-label-wrapper .vertical-label-text {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-lr;   /* ← rl → lr に変更 */
  text-orientation: mixed;
  /* transform: rotate(180deg); ← 削除 */
  position:relative;z-index:5;
}

.contents-wrapper-reverse {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  height: auto;
}

/* ? 右端に配置するための追加 */
.contents-wrapper-reverse .vertical-label-wrapper-reverse {
  /*margin-left: auto;*/ /* 左側に余白を自動で埋めて右端へ押し出す */
}

.contents-wrapper-reverse .vertical-label-wrapper-reverse .vertical-label-text-reverse {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-rl;   /* ? rl に戻す */
  text-orientation: mixed;
  position:relative;z-index:5;
}
/* ===========================
   スマホ（768px以下）
=========================== */
@media (max-width: 768px) {
.contents-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
.contents-wrapper-reverse {
    flex-direction: row;
    align-items: flex-start;
  }

 .wrap-flex-next-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* ← 縦ラベルの隣で残り幅を使い切る */
  }
.contents-wrapper-reverse .wrap-flex-next-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* ← 縦ラベルの隣で残り幅を使い切る */
  }
.vertical-label-wrapper-reverse {
    flex-shrink: 0;
  }
.vertical-label-wrapper {
    flex-shrink: 0;
  }
.contents-wrapper-reverse .vertical-label-wrapper-reverse .vertical-label-text-reverse {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-rl;   /* ? rl に戻す */
  text-orientation: mixed;
  position:relative;z-index:5;
}
.contents-wrapper .vertical-label-wrapper .vertical-label-text {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  white-space: nowrap;
  writing-mode: vertical-lr;   /* ← rl → lr に変更 */
  text-orientation: mixed;
  /* transform: rotate(180deg); ← 削除 */
  position:relative;z-index:5;
}

}


/*帯が開く
<p class="band">
<span>TITLE TEXT</span>
</p>
*/
 /* テキストラッパー（帯マスク） */
p.band {
    margin: 0;
    /*text-align: center;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04rem;*/
}
p.band span {
    display: inline-block;
    padding: 4px 20px;
    position: relative;
}
p.band span,
p.band span::after {
  animation-delay: var(--animation-delay, 2s); /* アニメーションの開始タイミング */
  animation-iteration-count: var(--iterations, 1); /* 再生される回数 */
  animation-duration: var(--duration, 800ms); /* 完了するまでの所要時間 */
  animation-fill-mode: both; /* 実行の前後 */
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* タイミングの指定 */
}

p.band.scroll-in span {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
}
p.band.scroll-in span::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFEDEA;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
/*1文字浮き上がる <p class="js-split-up">英数字ABC123や記号も対応。改行もそのまま。</p>*/
/* 1文字ずつのアニメ用 */
.split-up{
  display: inline-block;
}

.split-up__char{
  display: inline-block;
  will-change: transform, opacity;
}

/* 文字が上下に動くときに、はみ出しを隠して「下から出てくる」感を作る */
.split-up__charWrap{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* 空白も幅を維持する */
.split-up__space{
  display:inline-block;
  width: 0.5em;
}
/*scale-up*/
.scale-up {
  overflow: hidden; /* ← a タグに移動 */
}

.scale-up a {
  position: relative;
  display: block; /* grid → block に変更 */
  overflow: hidden; /* ← ここに移動することで画像のはみ出しを防ぐ */
}

/* 画像 */
.scale-up a img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .3s ease;
}

/* オーバーレイ */
.scale-up a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 1;
}

/* 文字（中央に絶対配置） */
.scale-up a .label {
  position: absolute;   /* ← absolute に変更 */
  top: 50%;             /* ← 縦中央 */
  left: 50%;            /* ← 横中央 */
  transform: translate(-50%, -50%); /* ← ズレを補正 */
  z-index: 2;
  color: #fff;
}

/* hover拡大 */
.scale-up a:hover img {
  transform: scale(1.1);
}
/*part2*/
.scale-up-2{
  position: relative;
  display: block; /* grid → block に変更 */
  overflow: hidden; /* ← ここに移動することで画像のはみ出しを防ぐ */
}

/* 画像 */
.scale-up-2 img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .3s ease;
}

.scale-up-2::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .0);
  pointer-events: none;
  z-index: 2;
}

/* 文字（中央に絶対配置） */
.scale-up-2 .label {
  position: absolute;   /* ← absolute に変更 */
  top: 50%;             /* ← 縦中央 */
  left: 50%;            /* ← 横中央 */
  transform: translate(-50%, -50%); /* ← ズレを補正 */
  z-index: 3;
  
}
/* hover拡大 */
.scale-up-2:hover img {
  transform: scale(1.1);
}
/*part3*/
.scale-up-3{
  position: relative;
  display: block; /* grid → block に変更 */
  overflow: hidden; /* ← ここに移動することで画像のはみ出しを防ぐ */
}

/* 画像 */
.scale-up-3 img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .3s ease;
}

.scale-up-3::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 2;
}

/* 文字（中央に絶対配置） */
.scale-up-3 .label {
  position: absolute;   /* ← absolute に変更 */
  top: 50%;             /* ← 縦中央 */
  left: 50%;            /* ← 横中央 */
  transform: translate(-50%, -50%); /* ← ズレを補正 */
  z-index: 3;
  
}
/* hover拡大 */
.scale-up-3:hover img {
  transform: scale(1.1);
}
/**/
.circle a img,.circle img{border-radius:15px;}

.circle-2 img{border-radius:50%;}
/* ブログアーカイブのスタイル */
.blog-list {
    margin: 0 -15px; /* 左右のネガティブマージンでコンテナをはみ出し、等間隔に */
}
.blog-item2 {
    /*float: none;*/
    width: 100%; /* 4つずつ表示 */
    padding: 0 15px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
.blog-item {
    float: left;
    width: calc(100%/3); /* 4つずつ表示 */
    padding: 0 15px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
.blog-detail-content{background:rgba(255,255,255,0.8);padding:10px;border-radius:10px;width:80%;}

.blog-detail-content h5{font-size:1.6em;}

.blog-detail-content p{font-size:1.2em;}
/* レスポンシブ対応 */
@media screen and (max-width: 992px) {
    .blog-item2 {
        width: 100%; /* タブレットでは3つずつ */
    }
    .blog-item {
        width: calc(100%/2); /* タブレットでは3つずつ */
    }
    .blog-detail-content h5{font-size:1.3em;}

    .blog-detail-content p{font-size:1.2em;}

    .blog-detail-content{background:rgba(255,255,255,0.8);padding:10px;border-radius:10px;width:100%;}
}

@media screen and (max-width: 768px) {
    .blog-item2 {
        width: 100%; /* 小さいタブレットでは2つずつ */
    }
    .blog-item {
        width: calc(100%/2); /* 小さいタブレットでは2つずつ */
    }
    .blog-detail-content h5{font-size:1.3em;}

    .blog-detail-content p{font-size:1.2em;}

    .blog-detail-content{background:rgba(255,255,255,0.8);padding:10px;border-radius:10px;width:100%;}
}

@media screen and (max-width: 480px) {
    .blog-item2 {
        width: 100%; /* スマホでは1つずつ */
    }
    .blog-item {
        width: calc(100%/2); /* スマホでは1つずつ */
    }
    .blog-detail-content h5{font-size:1.3em;}

    .blog-detail-content p{font-size:1.2em;}

    .blog-detail-content{background:rgba(255,255,255,0.8);padding:10px;border-radius:10px;width:100%;}
}

.blog-link {z-index:1;position:relative;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.blog-link:hover {
    opacity: 0.8;
}

.blog-thumbnail {
    overflow: hidden;
    margin-bottom: 10px;
}

.blog-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-date time {
    font-size: 1.25em;
    color: #666;
    margin-bottom: 5px;
}

.blog-box h4{font-size:1.25em;}

.entry-title h5,.entry-title p{
    font-size: 1.35em;
    margin: 0;
    line-height: 1.4;
    font-weight: normal;
}
/**/
.fade-in-element {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 5s ease, transform 1s ease;
}

.fade-in-element.visible {
    opacity: 1;
    transform: translateY(0);
}

.head-left-border {
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* centerからflex-startに変更 */
    position: relative; /* :after の位置基準 */
}
 
.head-left-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
    margin-left: 1rem;
}

.head-left-border:before {
    font-style: italic;
    content: attr(data-en);
    position: absolute;
    top: 100%;
    left: 50%; /* 50%から0に変更 */
    transform: translateX(-50%); 
    padding: 0 1em;
    background-color: transparent;
    font-size: 1.2em;
    text-align: center; /* 中央揃えから左揃えに変更 */
    width: 100%; /* 必要に応じて幅を調整 */
}

.no-line2 a, .no-line2 a:hover, .no-line2 a:hover:after
	{text-decoration:none;
	color:#2a2a2a !important;
	/*text-shadow:1px 1px 1px black !important;

-webkit-text-shadow:1px 1px 1px black !important;*/}

.glowAnime span{opacity: 0;display:inline-block;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime 1s ease-out forwards;display:inline-block; }

@keyframes glow_anime{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

/*menu-bar*/
.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#FF7A00;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -10px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#FF7A00;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*1moji-1moji*/
/*text animetions*/
@keyframes showTextFromBottom{
  0%{
    transform: translateY( 100% );
  }
  100%{
    transform: translateY( 0px );
  }
}
.anime-up.displayed span,.anime-up-a.displayed span,.anime-up-b.displayed span,.anime-up-c.displayed span{
  animation: showText 1s backwards;
  display: inline-block;
}
.anime-up.displayed > span,.anime-up-a.displayed > span,.anime-up-b.displayed > span,.anime-up-c.displayed > span{
  overflow: hidden;
}
.anime-up.displayed > span > span,.anime-up-a.displayed > span > span,

.anime-up-b.displayed > span > span,.anime-up-c.displayed > span > span{
  animation: showTextFromBottom 0.5s backwards;
}
/**/
.aa{margin:0;}
/*slick-card-slider*/
/*rolling-text*/
/**/
/*caption*/
/**/
.item {
  position: relative;
  overflow: hidden;
}

.item:hover .caption-up {
  transform: translateY(0);
}

.caption-up {
  /*text-align: left;*/
  margin: 0;
  padding: 1em;
  position: absolute;
  z-index: 10;
  top: 0; /* bottom: 0 から top: 0 に変更 */
  left: 0;
  width: 100%;
  height: 100%; /* 高さを100%に設定して画像全体を覆う */
  overflow: auto;
  box-sizing: border-box;
  transition: transform 0.5s;
  transform: translateY(100%);
  background: #eac8c1;
  
}

/*
  The rest is only styling for this example page
*/

/*button*/
.btn-b {
  display: inline-block;
  padding: 0.8em 0.8em;
  background-color: #eeeeee; /* 背景色 */
  box-shadow: 0 5px 0 #898989; /* 影の太さ・色 */
  border-radius: 5px;
  /*color: #fff;*/
  /*cursor: pointer;*/
  text-decoration: none; /* 文字の下線を消す */
}

/* ホバー時 */
.btn-b:hover {
  box-shadow: none;
  transform: translateY(5px);
}
/*button*/
.btn-z {
  display: inline-block;
  padding: 0.8em 2em;
  background-color: #eeeeee; /* 背景色 */
  box-shadow: 0 5px 0 #898989; /* 影の太さ・色 */
  border-radius: 5px;
  /*color: #fff;*/
  /*cursor: pointer;*/
  text-decoration: none; /* 文字の下線を消す */
}

/* ホバー時 */
.btn-z:hover {
  box-shadow: none;
  transform: translateY(5px);
}

.btn-y {
  display: inline-block;
  padding: 0.8em 1.2em;
  background-color: #eeeeee; /* 背景色 */
  box-shadow: 0 5px 0 #898989; /* 影の太さ・色 */
  border-radius: 5px;
  /*color: #fff;*/
  /*cursor: pointer;*/
  text-decoration: none; /* 文字の下線を消す */
}

/* ホバー時 */
.btn-y:hover {
  box-shadow: none;
  transform: translateY(5px);
}
/*オレンジ*/
.btn-x {
  display: inline-block;
  padding: 0.8em 2em;
  background-color: #FF7300; /* 背景色 */
  /*box-shadow: 0 5px 0 #FF7300;*/ /* 影の太さ・色 */
  border-radius: 5px;
  /*color: #fff;*/
  /*cursor: pointer;*/
  text-decoration: none; /* 文字の下線を消す */
}

/* ホバー時 */
.btn-x:hover {
  box-shadow: none;
  /*transform: translateY(5px);*/
}

/*end*/
/*modal-window*/
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
    min-height: auto;
    overflow:auto;
}
.modal.modal-fullscreen .modal-dialog {
  margin: 0;
  width: 100%;min-height:auto;
  animation-duration:0.6s;
}
.modal.modal-fullscreen .modal-content {
  border: none;
  -moz-border-radius: 0;min-height:auto;
  border-radius: 0;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  -o-box-shadow: inherit;
  box-shadow: inherit;
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
  padding: 0;min-height:auto;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
  left: 0;
  position: absolute;
  right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
  top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
  bottom: 0;height:10vh;
}
/*end*/


/*bush! button*/
@keyframes animate{
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0}
}


div.btn-0 {
  position: relative;
  width: 250px;
  margin: 0px auto;
  transition: .2s;
}
div.btn-0:before, div.btn-0:after {
  content: "";
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  top: 3px;
  left: 0;
  border-radius: 32px;
  background: #06C755;
  border: 1px solid #ff999e;
  transform: translate3d(0,0,0);
}
div.btn-0:before {z-index:2;
  animation: animate 2s ease-out infinite;
}
div.btn-0:after {z-index:2;
 animation: animate 2s ease-out 1s infinite;
}

.btn-0 a {font-family: 'Raleway', 'Open Sans', sans-serif;
  display: block;
  position: relative;z-index:5;
  top: 3px;
  padding: 20px 0;
  border-radius: 32px;
  color: #fff;font-weight:bold;
  text-align: center;
  text-decoration: none;
  background: #06C755;
}
.btn-0 a:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #19904A;
  border-radius: 32px;
  transition: .2s;
  transform: translate3d(0,0,0);
}
.btn-0 span {
  display: block;
  position: relative;
  top: -3px;
  z-index: 2;
  font-family: sans-serif;
  transition: .2s;
}
.btn-0 span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 8px;
  height: 8px;  
  margin: -4px 0 0 0;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: translateX(5px) rotate(45deg);
  transition: .3s .1s;
}

.btn-0 a:hover {color: #fff;font-weight:bold;text-decoration: none;
  top: 3px;
}
.btn-0 a:hover:after {color: #fff;font-weight:bold;text-decoration: none;
  top: 0;
  background: #06C755;
}
.btn-0 a:hover span {
  top: 0;
}
.btn-0 a:hover span:after {
  right: 27px;
}
/*end*/
/*part2*/
div.btn-00 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  transition: .2s;
}
div.btn-00:before, div.btn-0:after {
  content: "";
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  top: 3px;
  left: 0;
  border-radius: 32px;
  background: #EE7800;
  border: 1px solid #E27D17;
  transform: translate3d(0,0,0);
}
div.btn-00:before {z-index:2;
  animation: animate 2s ease-out infinite;
}
div.btn-00:after {z-index:2;
 animation: animate 2s ease-out 1s infinite;
}

.btn-00 a {font-family: 'Raleway', 'Open Sans', sans-serif;
  display: block;
  position: relative;z-index:5;
  top: 3px;
  padding: 20px 0;
  border-radius: 32px;
  color: #fff;font-weight:bold;
  text-align: center;
  text-decoration: none;
  background: #EE7800;
}
.btn-00 a:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #EE7800;
  border-radius: 32px;
  transition: .2s;
  transform: translate3d(0,0,0);
}
.btn-00 span {
  display: block;
  position: relative;
  top: -3px;
  z-index: 2;
  font-family: sans-serif;
  transition: .2s;
}
.btn-00 span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 8px;
  height: 8px;  
  margin: -4px 0 0 0;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: translateX(5px) rotate(45deg);
  transition: .3s .1s;
}

.btn-00 a:hover {color: #fff;font-weight:bold;text-decoration: none;
  top: 3px;
}
.btn-00 a:hover:after {color: #fff;font-weight:bold;text-decoration: none;
  top: 0;
  background: #EE7800;
}
.btn-00 a:hover span {
  top: 0;
}
.btn-00 a:hover span:after {
  right: 27px;
}
/*end*/
/*========= モーダル表示のためのCSS ===============*/

/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

.next a {color:#151515;
  padding-top: 60px;
}
.next a:hover, .next a:hover:after{color:#151515; text-decoration:none;}

 .next a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #151515;
  border-bottom: 1px solid #151515;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}
.padding-between{padding:2% 4% 2% 4%;}
.flowchart{
  margin-left: .5em;
  border-left: 2px dashed;
}
.flowchart h2{
  position: relative;
  margin-left: 2em;
  margin-bottom: 0;
}
.flowchart p{
  margin-top: .3em;
  margin-left: 3em;
}
.flowchart h2:before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: calc(-2em - 6px);
  top: .5em;
}
.flowchart h2:after{
  content: "";
  border-bottom: 1px solid;
  width: 1.5em;
  background: #000;
  position: absolute;
  top: .7em;
  left: -2em; 
}

/*#eac8c1*/
.emphasis-bright-block h1,.emphasis-bright-block p,.emphasis-bright-block h2{
	box-decoration-break:clone;
	-webkit-box-decoration:clone;
        display:block;
	padding:10px;
 	line-height:2.2;
	font-weight:bold;
	text-align:center;
	color:#151515;
	background-color:#eac8c1;}

/*#eac8c1;*/
.emphasis-bright p,.emphasis-bright span,.emphasis-bright h2{
	box-decoration-break:clone;
	-webkit-box-decoration:clone;
        display:inline-block;
	padding:10px;
 	line-height:2.2;
	font-weight:bold;
	text-align:center;
        color:#151515;
	background:#eac8c1;}

/*fadeup-text*/
.anime .bg-wrap,
.anime .bg-wrap .inn {
  display:inline-block;
}
 
.anime .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
/*.anime .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.anime .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.anime .bg-wrap .inn.small {
  font-size: 15px;
}*/
 
.anime .bg-wrap .inn {
  opacity: 0;
  transform: translateY(200px);
  transition: 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.anime.is-animated .bg-wrap {
  opacity: 1;
}
 
.anime.is-animated .bg-wrap .inn {
  opacity: 1;
  transform:  translateY(0px);
}
/*fadeup-text_end*/
/*fade-part2*/
.animate .bg-wrap,
.animate .bg-wrap .inn {
  display:block;
}
 
.animate .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
/*.anime .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.anime .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.anime .bg-wrap .inn.small {
  font-size: 15px;
}*/
 
.animate .bg-wrap .inn {
  opacity: 0;
  transform: translateX(-300px);
  transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.animate.is-animated .bg-wrap {
  opacity: 1;
}
 
.animate.is-animated .bg-wrap .inn {
  opacity: 1;
  transform:  translateX(0px);
}
/*fade-part3*/
.anim .bg-wrap,
.anim .bg-wrap .inn {
  display:block;
}
 
.anim .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
 
/*.anime .bg-wrap + .bg-wrap {
  margin-top: 10px;
}
 
.anime .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.anime .bg-wrap .inn.small {
  font-size: 15px;
}*/
 
.anime .bg-wrap .inn {
  opacity: 0;
  transform: translateY(100px);
  transition: 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.anime.is-animated .bg-wrap {
  opacity: 1;
}
 
.anime.is-animated .bg-wrap .inn {
  opacity: 1;
  transform:  translateY(0px);
}

/**/
.fadeup {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fadeup.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 遅延バリエーション */
        .fadeup.delay-1 { transition-delay: 0.1s; }
        .fadeup.delay-2 { transition-delay: 0.2s; }
        .fadeup.delay-3 { transition-delay: 0.3s; }
        .fadeup.delay-4 { transition-delay: 0.4s; }
        .fadeup.delay-5 { transition-delay: 0.5s; }

.gold10,.gold10 a,.gold10 a:hover,.gold10 a:hover:after{color:#C9A961;text-decoration:none;}

.peach10,.peach10 a,.peach10 a:hover,.peach10 a:hover:after{color:#DB8270;text-decoration:none;}

.special-button-2 {
            position: relative;
            width: 280px;
            height: 70px;
            font-size: 1.35em;
            color: #C9A961;
            background-color: transparent;
            border: 2px solid #C9A961;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s ease;
            overflow: hidden; /* 重要: 背景エフェクトがはみ出さないようにする */
            box-sizing: border-box;
        }
        
        /* aタグのスタイル */
        .special-button-2 a {
            color: #C9A961;
            text-decoration: none;
            transition: color 0.3s ease;
            z-index: 1;
            position: relative;
        }
        
        /* ホバー時の背景エフェクト */
        .special-button-2:after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background-color: #C9A961;
            transition: left 0.3s ease;
            z-index: 0;
        }
        
        .special-button-2:hover {
            color: #ffffff;
        }
        
        .special-button-2:hover a {
            color: #ffffff;
        }
        
        .special-button-2:hover:after {
            left: 0;
        }
/*special-button-3<a class="special-btn" href="#">VIEW MORE</a>*/
a.special-btn {
  display: inline-block;
  width: 280px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  color: #fff;
  background-color: #EA9988;
  font-size:1.35em;
  font-weight:bold;
  border-radius:10px;
}
a.special-btn:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple 1.5s infinite;
  color: #fff;
}
@keyframes ripple {
  0% {box-shadow: 0 0 0 0 #EA9988;}
  70% {box-shadow: 0 0 0 10px rgb(234 153 136 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(234 153 136 / 0%);}
}

/* ============================================================
   ARCHIVE: スタッフ一覧
 ============================================================ */
/* ===== スタッフアーカイブ ===== */

/* 共通レイアウト */
.staff-archive-row {
    margin-bottom: 20px;
}

.staff-archive-link {
    display: block;
    text-decoration: none;
}
.staff-archive-link:hover,
.staff-archive-link:focus,
.staff-archive-link:visited {
    text-decoration: none;
}
.staff-archive-container {
    display: flex;
    align-items: center;
    gap: 0;
}

/* アイキャッチ画像：7割 */
.staff-archive-photo {
    width: 50%;
    flex-shrink: 0;
}

.staff-archive-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio:1200/686;
}

/* テキストエリア：3割 */
.staff-archive-text {
    width: 50%;
    padding: 0 15px;
    box-sizing: border-box;
}

.staff-archive-catch {
    color:#C9A961;
    font-size: 1.5em;
    margin-bottom: 8px;
}

.staff-name-jp {
    color:#151515;
    font-size: 1.25em;
    margin-bottom: 4px;
}

.staff-name-en {
    color:#DB8270;
    font-weight:bold;
    font-size: 1.1em;
}


/* ===== スマホ（768px以下）：アイキャッチのみ表示 ===== */
@media screen and (max-width: 768px) {

    .staff-archive-container {
        display: block;
    }

    /* 写真を全幅に */
    .staff-archive-photo {
        width: 100%;
    }

    /* テキストエリアを非表示 */
    .staff-archive-text {
        display: none;
    }
}

/* ============================================================
   SINGLE: スタッフ詳細
 ============================================================ */

/* ---------- ヘッダー：写真＋名前エリア ---------- */
.staff-header-container {
    display: flex;
    align-items: center;
    gap: 0;
}

/* アイキャッチ画像：7割 */
.staff-header-photo {
    width: 50%;
    flex-shrink: 0;
}

.staff-header-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1200 / 686;
}

/* テキストエリア：3割 */
.staff-header-text {
    width: 50%;
    padding: 0 20px;
    box-sizing: border-box;
}

.staff-name-jp-single {
    color: #151515;
    font-size: 1.25em;
    margin-bottom: 6px;
}

.staff-name-en-single {
    color: #DB8270;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0;
}

/* ---------- 詳細情報エリア ---------- */
.staff-detail-item {
    padding: 20px;
    box-sizing: border-box;
}

.staff-catch {
    color: #C9A961;
    font-size: 1.3em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #C9A961;
}

.staff-comment {
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 16px;
}

.staff-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- プロフィール表 ---------- */
.staff-profile-table-wrap {
    padding: 20px;
    box-sizing: border-box;
}

.staff-profile-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-profile-table th,
.staff-profile-table td {
    padding: 10px 14px;
    border: 1px solid #ddd;
    font-size: 0.95em;
    vertical-align: top;
    text-align: left;
}

.staff-profile-table th {
    background: #f5f0e8;
    color: #151515;
    font-weight: bold;
    white-space: nowrap;
    width: 160px;
}

.staff-profile-table td {
    color: #333;
}


/* ============================================================
   SINGLE スタッフ：スマホ（768px以下）
 ============================================================ */
@media screen and (max-width: 768px) {

    /* --- ヘッダー --- */
    .staff-header-container {
        display: block;  /* 縦並び */
    }

    /* アイキャッチ：100% */
    .staff-header-photo {
        width: 100%;
    }

    /* 名前エリア：画像直下 */
    .staff-header-text {
        width: 100%;
        padding: 12px 0 0;
    }

    .staff-name-jp-single {
        font-size: 1.1em;
    }

    .staff-name-en-single {
        font-size: 1em;
    }

    /* --- 詳細情報 --- */
    .staff-detail-item {
        padding: 16px;
    }

    .staff-catch {
        font-size: 1.1em;
    }

    /* --- プロフィール表 --- */
    .staff-profile-table th {
        width: 100px;
        font-size: 0.85em;
    }

    .staff-profile-table td {
        font-size: 0.85em;
    }
}
/*staff-video*/
/* ============================================================
   SINGLE スタッフ：動画ボタン＆モーダル
 ============================================================ */

/* --- 動画ボタン --- */
.staff-video-btn-wrap {
    margin-top: 14px;
    margin-bottom: 0;
}

.staff-video-btn {border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #C9A961;
    color: #fff;
    font-size: 0.95em;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
}

.staff-video-btn:hover {
    background: #b08840;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.staff-video-btn-icon {
    font-size: 1em;
    line-height: 1;
}

/* --- モーダル背景 --- */
.staff-modal {
    display: none;  /* 初期非表示 */
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.staff-modal.is-open {
    display: flex;
}

.staff-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

/* --- モーダルコンテンツ --- */
.staff-modal-content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 860px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* --- 動画を16:9で表示 --- */
.staff-modal-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.staff-modal-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- 閉じるボタン --- */
.staff-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.6em;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    z-index: 2;
    transition: opacity 0.2s;
}

.staff-modal-close:hover {
    opacity: 0.7;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .staff-video-btn {
        font-size: 0.88em;
        padding: 9px 16px;
    }

    .staff-modal-content {
        width: 95%;
    }

    .staff-modal-close {
        top: -36px;
        font-size: 1.4em;
    }
}
/* ============================================================
   事業紹介・代表挨拶 動画ボタン追加スタイル
 ============================================================ */

/* special-btn をベースにしたモーダルボタン共通調整 */
.overview-video-btn .staff-video-btn-icon,
.greeting-video-btn .staff-video-btn-icon {
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}

/* overview-video-btn は special-btn クラスを流用するので
   staff-video-btn 固有の背景色・形状は上書きしない           */
a.special-btn.overview-video-btn,
a.special-btn.greeting-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/*<h2 class="heading-cover" data-en="Recruit"><span>英字とラインのCSS見出し</span></h2> */
.heading-cover {
	position: relative;
	padding-top: 60px;
	font-size: 2.2em;
	border-bottom: 2px solid #DB8270;
}

.heading-cover span {
	position: relative;
	z-index: 2;
}

.heading-cover::before {
	content: attr(data-en);
	position: absolute;
	top: 0px;
	left: 0;
	color: #e6b8af;
	font-size: 1.8em;
        /*letter-spacing: 0.1em;*/
	z-index: 1;
        font-family: "Lato", sans-serif;
        font-weight: 300;
        font-style: italic;
}
/*パール色background: radial-gradient(circle at 30% 30%, #fff 0%, #fdfcfb 40%, #e2d1c3 100%);*/
/*<div class="btn_box">
  <a href="#" class="btn animation">
    RESET<span class="icon arrow-3"></span>
  </a>
</div>*/
.btn_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
}

.btn {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: center;
  line-height: 50px;
  width: 280px;
  height: 60px;
  background: #FFF;
  margin: auto;
  border: 1px solid #000;
  position: relative;
  display: block;
  overflow: hidden;
  transition: 0.5s;
  text-decoration: none;
}

.btn .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #000;
}

.btn .icon.arrow-3 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  right: 0.625rem; /* ← left から right に変更 */
  width: 1.125rem;
  height: 0.1rem;
  background: none;
}

.btn .icon.arrow-3::before {
  position: absolute;
  content: "";
  top: -0.3rem;
  right: 0.0625rem; /* ← 右向き矢印のまま維持 */
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #000;
  border-right: 0.125rem solid #000;
  transform: rotate(45deg);
}

/* ホバー時：右方向へ移動 */
.btn:hover .icon.arrow-3 {
  background: #000;
  transform: translate(1rem, 0); /* 右方向へスライド */
}
/*no link*/
.next2{color:#151515;
  padding-top: 60px;
}
.next2{color:#151515; text-decoration:none;}

 .next2 span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #151515;
  border-bottom: 1px solid #151515;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb2 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb2 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb2 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

/* ========================================
   overview 一覧（archive-overview）カード
   PC: 画像左 + タイトル右 横並び
   SP: 画像上 + タイトル下 縦並び
   ======================================== */

/* カードリンク全体 */
.overview-card-link {
    display: flex;
    flex-direction: row;       /* PC: 横並び */
    align-items: center;
    gap: 16px;
    text-decoration: none;
    width: 100%;
}

/* アイキャッチ画像エリア */
.overview-card-thumb {
    flex: 0 0 50%;           /* PC: 固定幅 */
    max-width: 50%;
}

.overview-card-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;      /* 960:640 = 3:2 */
}

/* タイトルエリア */
.overview-card-title {
    flex: 1;
}

/* アイキャッチなし時はタイトルを中央寄せ */
.overview-card-title.no-thumb {
    text-align: center;
}

/* ----------------------------------------
   SP: 縦並び（768px以下）
   ---------------------------------------- */
@media screen and (max-width: 768px) {

    .overview-card-link {
        flex-direction: column; /* SP: 縦並び */
        align-items: stretch;
        gap: 10px;
    }

    .overview-card-thumb {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .overview-card-title {
        text-align: center;
    }
}


/* ========================================
   overview 詳細（single-overview）
   写真＋本文レイアウト
   PC: 写真（左）＋ 文章（右）横並び
   SP: 写真（上）＋ 文章（下）縦並び
   ======================================== */

/* ラッパー：写真あり時のみFlexbox横並び */
.overview-content-wrap {
    display: flex;
    flex-direction: row;       /* PC: 横並び */
    align-items: flex-start;   /* 上揃え */
    gap: 24px;
    margin-bottom: 24px;
}

/* 写真なし時はブロック表示 */
.overview-content-wrap.no-photo {
    display: block;
}

/* 写真エリア（左・PC: 50%） */
.overview-content-photo {
    flex: 0 0 50%;
    max-width: 50%;
}

.overview-content-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;       /* 960:640 = 3:2 */
}

/* 文章エリア（右・PC: 残り幅） */
.overview-content-text {
    flex: 1;
}

/* ----------------------------------------
   SP: 縦並び（768px以下）
   ---------------------------------------- */
@media screen and (max-width: 768px) {

    .overview-content-wrap {
        flex-direction: column; /* SP: 縦並び */
        gap: 16px;
    }

    /* 写真エリア：SP時は全幅 */
    .overview-content-photo {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    /* 文章エリア：SP時は全幅 */
    .overview-content-text {
        width: 100%;
    }
}