@charset "UTF-8";

html {
  font-size: 100%;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

body {
  background-color: #fff;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* 画面全体を覆うローディング背景 */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #fffaf5; /* 好きな背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 最前面 */
  transition: opacity 0.8s ease;
}

/* ローディングが終わったら消す */
#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 回転アニメ */
@keyframes spinOnce {
  from { transform: rotate(0deg); opacity: 0.8; }
  to   { transform: rotate(360deg); opacity: 1; }
}
.spin-on-load {
  animation: spinOnce 1.5s ease-in-out infinite;
  width: 150px;
}

/* side-container(全体の左の背景を固定) */
.side-container{
  width: calc((100vw - 520px)/2);
  height:100vh;
  padding:10% 3%;
  z-index:-1;/* ← 左はこのままでOKだけど…全体に利かすと右のボタンが死ぬ */
}
.right-container{
  position:fixed;
  right:0;
  z-index:5;
  pointer-events:auto;
    top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
    /* ↓コンテナクエリオン*/
  container-type: inline-size;
}
.left-container{
  position:fixed;
  left:0;
  height:40vh;
  /* ↓コンテナクエリオン */
  container-type:inline-size;
}
/* --- 基本（サイド幅が十分ある時）--- */
/* PCなど広い画面：画像は横400px、縦は自動＝縦横比維持 */
.left-container .left-title img{
  width: 400px;
  height: auto;          /* 縦横比そのまま */
  display: block;
  margin:0 auto;
}
.left-title{
  text-align:center;
  margin-bottom:15%;
}
.left-text{
  text-align:center;
  margin-bottom:8%;
  position:relative;
}
.left-text::before{
  content:"";
  width:20%;
  height:1px;
  background-color:black;
  position:absolute;
  left:-50px;
  top:50%;
  transform:translateY(-50%);
}
.left-text::after{
  content:"";
  width:20%;
  height:1px;
  background-color:black;
  position:absolute;
  right:-50px;
  top:50%;
  transform:translateY(-50%);
}
/* .left-image{
  margin-bottom:8%;
} */
.right-container{
  position:fixed;
  right:0;
  display: flex;
  flex-direction: column;   /* ← ここが重要！ */
  align-items: center; 
}
.right-container .menu-staff{
  width: 120px;
}

.right-container .menu-box{
  width: min(92%, 360px);
  padding: 20px;
  border: 1px solid #1655EC;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22,85,236,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;             /* ← ボタンの縦間隔はコレで統一 */
  height: auto;          /* ← 固定高さはやめて中身に合わせる */
}
/* 1つ1つのボタン（aだけを整える） */
.pc_btn{ margin: 0; }    /* 余白は親で管理 */
.pc_btn a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 18px;
  border-radius: 9999px;
  border: 1px solid #1655EC;
  background: #fff;
  color: #1655EC;
  font-weight: 600;
  text-decoration: none;

  transition: background-color .25s, color .25s, box-shadow .25s, transform .12s ease;
}

/* 右端の「＞」はCSSで描画（統一＆軽量） */
.pc_btn a::after{
  content: "";
  width: 6px; height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s;
}

/* hover：色を反転＋軽く前へ */
.pc_btn a:hover{
  background: #1655EC;
  color: #fff;
  box-shadow: 0 6px 20px rgba(22,85,236,.22);
  transform: translateY(-1px);
}
.pc_btn a:hover::after{
  transform: translateX(2px) rotate(45deg);
}

/* active：押し込み感 */
.pc_btn a:active{
  transform: translateY(0) scale(.98);
  box-shadow: 0 3px 10px rgba(22,85,236,.20);
}

/* キーボード操作の見やすいフォーカス */
.pc_btn a:focus-visible{
  outline: 3px solid #16ECAD;
  outline-offset: 3px;
}


/* common */
/* 要素の幅確認用 */
/* *{
  border:1px solid red;
} */
.container {
  max-width: 520px;
  background-color:#fff;
  margin:0 auto;
  margin-inline: auto;
  padding-inline: 5px;
  /* z-index:10; */
  /* ↑sidecontainerをz-index-1にすることで解決したのでとりあえず非表示 */
}

.wrapper {
  max-width: 490px;
  margin:0 auto;
  padding: 0 5%;
}

.text-list{
  padding:10%;
}

.text-list ol {
  list-style:none;
}

.text-list li{
  margin:16px 0;
}

.index {
  background: #f8b501;
  padding: 20px;
  display:inline-block;
}
.section-title{
  opacity:0;
}

.wave{ max-width: 100%; }

/* commonanimation */
/*
アニメーションを実行

balloon：下で定義している「@keyframes balloon」を実行
0.5s：アニメーションが始まってから終わるまでの時間（0.5sかけて実行）
ease-out：アニメーションの変化（開始時は早く、終了時は緩やかに変化）
0s：アニメーションが始まるまでの時間（0sですぐに実行）
1：アニメーションの繰り返し回数（1回）
forwards：アニメーション終了時の状態をそのまま維持
*/
/* balloon */
.balloon {
  animation: balloon 0.5s ease-out 0s 1 forwards;
}

/*
アニメーション処理

最初は「transform: scale(0.1);」で要素を小さくした状態で、「opacity: 0;」で非表示にしておく
0.5秒かけて要素を表示させながら元のサイズへ戻す
*/
@keyframes balloon {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* fadeup */
.fadeUp {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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


 

/*header*/

header {
  background-color: #fff;
  height:100vh;
  border-right:1px solid #f8b501;
  border-left:1px solid #f8b501;
  position:relative;
}

header .mainlogo{
  width:45%;
  position:absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);
}
header .people{
  width:60%;
  position:absolute;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
}
header .wave{
  position:absolute;
  bottom:0;
}
/* 初期は少し下＋小さめ＋ぼかし、マスクを細くしておく */
header .mainlogo img{
  opacity: 0;
  transform: translateY(18px) scale(.96) rotate(-2deg);
  filter: blur(8px);
  /* 中央から左右に開くマスク（inset: top right bottom left）*/
  clip-path: inset(0 50% 0 50%);
  will-change: transform, opacity, filter, clip-path;
}

/* プリローダー終了の合図 .hero-in が body に付いたら発火 */
body.hero-in header .mainlogo img{
  animation: heroReveal 900ms cubic-bezier(.2,.7,.2,1) forwards;
}

/* ほんのりグロー（影）を親に付与して“立ち上がり感”を追加 */
header .mainlogo{ filter: none; }
body.hero-in header .mainlogo{
  animation: heroGlow 2200ms ease-out 200ms forwards;
}

/* メイン：マスク開き＋ブラー→クリア＋位置と回転の収束 */
@keyframes heroReveal{
  0%{
    opacity: 0;
    transform: translateY(18px) scale(.94) rotate(-2deg);
    filter: blur(10px);
    clip-path: inset(0 50% 0 50%);
  }
  60%{
    opacity: 1;
    filter: blur(0.7px);
    clip-path: inset(0 0 0 0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}

/* サブ：うっすらドロップシャドウで“締まり”を出す */
@keyframes heroGlow{
  0%  { filter: drop-shadow(0 0 0 rgba(22,85,236,0)); }
  100%{ filter: drop-shadow(0 12px 22px rgba(22,85,236,.18)); }
}

/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce){
  header .mainlogo, header .mainlogo img{ animation: none !important; }
  header .mainlogo img{
    opacity:1; transform:none; filter:none; clip-path:none;
  }
}


/* peopleのアニメーション */
header .people img {
  animation: bounceSoft 2.8s cubic-bezier(.45, .05, .55, .95) infinite;
  transform-origin: center bottom;
}

@keyframes bounceSoft {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.03); }
}


/*ハンバーガ―メニュー*/
.hamburger {
  width: 70px;
  height: 70px;
  background-color: #16ECAD;
  display:none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.3s;
}

.hamburger:hover {
  opacity: 0.7;
}

/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
  width: 50%;
  height: 2px;
  background:#1655EC;
  position: absolute;
  left: 25%;
  transition: 0.3s;
}

/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
  top: 36%;
}

/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
  top: 50%;
}

/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
  top: 64%;
}

/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.open .hamburger span:nth-child(1) {
  top: 47%;
  background: #1655EC;
  transform: rotate(-45deg);
}

/* 2本目と3本目は重ねて45度回転 */
.open .hamburger span:nth-child(2),
.open .hamburger span:nth-child(3) {
  top: 47%;
  background: #1655EC;
  transform: rotate(45deg);
}

/*
メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく
*/
#navi {
  width: 100%;
  height: 100vh;
  background-color: #16ECAD;
  color: #1655EC;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  text-align: center;
  transition: all 0.6s ease;
  opacity: 0;
  visibility: hidden;
}

/*
ハンバーガーメニューがクリックされた際に、jQueryでheaderにopenクラスを追加して、
メニューを表示させる。
*/
.open #navi {
  opacity: 1;
  visibility: visible;
}

#navi .logo {
  width: 120px;
  position: absolute;
  top: 40px;
  left: 50px;
}

#navi .menu {
  margin: 30% 0 40px;
}

#navi .menu li {
  margin-bottom: 20px;
}

#navi .menu a {
  color: #1655EC;
  font-weight: medium;
}

#navi .btn {
  width: 250px;
  border: solid 1px #1655EC;
  color: #1655EC;
  display: inline-block;
  font-weight: medium;
  padding: 15px 0;
  transition: 0.3s;
  position: relative;
}

/* ボタンの右と下の線は疑似要素で設定 */
#navi .btn::after {
  position: absolute;
  content: "";
  width: 250px;
  border-right: solid 1px #1655EC;
  border-bottom: solid 1px #1655EC;
  padding: 15px 0;
  right: -6px;
  bottom: -6px;
}

#navi .btn:hover {
  background-color: #1655EC;
  color: #fff;
}

/* about */
.about{
  background-color: #fff;
  padding:5% 5% 10% 5%;
  border-right:1px solid #f8b501;
  border-left:1px solid #f8b501;
  border-bottom:1px solid #f8b501;
  position:relative;
}
.about .section-title img{
  width:80%;
  display:block;
  margin:0 auto;
}
.about .text-list{
  position:relative;
}
.about .text-list .staff1{
  position:absolute;
  right:-25%;
  top:-40%;
  width:160px;
}
.about .text-list img{
  width:200px;
}
.about .wave{
  position:absolute;
  bottom:0;
}
/*howto*/
.howto{
  background-color:#fff;
  padding:5% 5% 10% 5%;
  border-right:1px solid #f8b501;
  border-left:1px solid #f8b501;
}
.howto .section-title img{
  width:80%;
  display:block;
  margin:0 auto;
}
.howto .staff2 {
  display:block;
  margin:0 auto;
  width:100px;
}
.howto .staff3-position{
  position:relative;
}
.howto .staff3 {
  width:90px;
  position:absolute;
  right:-5%;
  top:-30%;
}
.howto .poligon img{
  width:70px;
  display:block;
  margin:0 auto;
}
.howto .staff4-position{
  position:relative;
}
.howto .staff4{
  width:70px;
  position:absolute;
  left:-16%;
  bottom:-30%;
}
.howto .text-list img{
  width:100px;
  margin-bottom:10px;
}
.howto .poligon{
  margin-top: 15px;
  margin-bottom:15px;
}
/* map */
.map{
  background-color:#fff;
  padding:5%;
  border:1px solid #f8b501;
}

.map .wrapper .staff5-position{
  position:relative;
}
.map .wrapper .staff5{
  width: 70px;
  position:absolute;
  top: 40%;
  right:0;
  z-index:100;
}
.map .section-title img{
  width:80%;
  display:block;
  margin:0 auto;
  margin-bottom:10%;
}
.map .treasuremap img{
  margin-top:-200px;
  display:block;
  margin:0 auto;
  width:110%;
}
/* ▼ ボタン本体：ここが“ホバー判定の対象”になる */
.btn-application {
  display: inline-flex;
  /* ★変更：a をボックス化。パディング全域が hover 判定 */
  align-items: center;
  justify-content: center;
  gap: .4em;
  background: #F7B402;
  padding: 14px 22px;
  border: 2px solid #F7B402;
  /* 左端の「線」。ここがボタンの最左端 */
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  color: #fff;

  box-sizing: border-box;
  /* ★追加：枠線込みで幅計算しレイアウトのズレ防止 */
  position: relative;
  /* ★追加：::before を重ねるための基準 */
  overflow: hidden;
  /* ★追加：演出のはみ出し防止 */
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* ▼ 子の span は“見た目用”だけ。イベントは a に集約する */
.btn-application>span {
  display: block;
  /* ★追加：文字だけに hover 判定が偏らないように */
  /* width:100%; は不要。入れたい場合のみ */
}

/* ▼ 左端からスッと走るホバー演出（必要なければ丸ごと削除OK） */
.btn-application::before {
  content: "";
  position: absolute;
  inset: 0;
  /* ボタン全体にフィット */
  transform: translateX(-100%);
  /* ★ポイント：左端の枠線の外から開始 */
  /* background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0)); */
  transition: transform .35s ease;
  pointer-events: none;
  /* ★超重要：疑似要素がマウス判定を奪わない */
}

/* ▼ hover は必ず a 本体にかける（span:hover は使わない） */
.btn-application:hover::before {
  transform: translateX(0);
  /* ★左端（枠線位置）から内側へ流入 */
}

.btn-application:hover {
  background-color: rgba(247, 180, 2, 0);
  color: #000;
  border-color: #F7B402;
}

/* ▼ フォーカス可視化（キーボード操作のアクセシビリティ） */
.btn-application:focus-visible {
  outline: 3px solid rgba(0, 102, 255, .4);
  outline-offset: 3px;
}

/* ▼ 無効化（一応） */
/*
.btn-application[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}
*/

/* form-btn */

.form {
  text-align: center;
}



/*mainvisual*/

.mainvisual img {
  width: 100%;
}

/*footer*/

footer {
  text-align:center;
  background-color:#fff;
  padding: 2% 0;
  font-size: 0.75rem;
  border-right:1px solid #f8b501;
  border-left:1px solid #f8b501;
}
.end-wrap img{
  width:170px;
}

/*responsive*/
@media(max-width:1100px){
  .hamburger {
  display:block;
}
  .right-container .cta-stripe{
    max-width: 90%;
  }
  .right-container .menu-box {
    display: none; 
  }
  .right-container .menu-staff{
    display:none;
  }
}


/* --- サイド幅が450px未満～300px以上の時（縮小対応）--- */
/* サイドの“実幅”に合わせて自動で縮小（比率維持） */
@container (max-width: 350px) and (min-width: 300px){
  .left-container .left-title img{
    width: 100%;         /* サイドの幅いっぱい */
    height: auto;        /* 縦横比維持のまま縮小 */
    /* （※ ロゴ系はトリミングしない方が綺麗なので cover は使わない運用が無難） */
  }
}
/* --- サイド幅が300px未満の時（非表示）--- */
@container (max-width: 299px){
  .left-container .left-title{
    display: none;       /* 要素ごと消す */
  }
}