@charset "utf-8";
/* CSS Document */

/* ================= PC（≥769px）：既存MVをそのまま使う ================= */
@media (min-width:769px){
  /* --- 調整用パラメータ --- */
  :root{
    --mv-h: clamp(520px, 48vw, 880px);
    --right-w: clamp(34vw, 42vw, 48vw);
    --top-offset: clamp(120px, 14.64vw, 220px);
    --right-bottom-gap: clamp(24px, 3vw, 90px);
    --left-extra-gap:  clamp(18px, 1.8vw, 48px);
    --copy-shadow: 0 2px 8px rgba(0,0,0,.25);
  }

  .mv.pc{
    position: relative;
    width: 100%;
    height: var(--mv-h);
    overflow: hidden;
  }
  .mv.pc .mv1{
    position: absolute; left: 0; top: 0;
    bottom: calc(var(--right-bottom-gap) + var(--left-extra-gap));
    width: 50vw; z-index: 1;
  }
  .mv.pc .mv1 img,
  .mv.pc .mv2 img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

  .mv.pc .mv2{
    position: absolute; right: 0; top: var(--top-offset);
    bottom: var(--right-bottom-gap);
    width: var(--right-w); z-index: 2;
  }

  .mv.pc .copy{
    position: absolute; left: 52%; top: var(--top-offset);
    transform: translateX(-50%); z-index: 1000; pointer-events: none;
  }
  .mv.pc .copy img{
    width:auto;
    height: calc(var(--mv-h) - var(--top-offset) - var(--right-bottom-gap));
    filter: drop-shadow(var(--copy-shadow));
  }

  /* アクセス時アニメ */
  .mv.pc .mv1     { animation: fadeDown 3.15s cubic-bezier(.2,.7,.10,1) .00s both; }
  .mv.pc .mv2     { animation: fadeUp   3.15s cubic-bezier(.2,.7,.10,1) .20s both; }
  .mv.pc .copy    { animation: fadeOnly 2.15s ease-out                  .55s both; }

  @keyframes fadeDown{ from{opacity:0;transform:translateY(-28px);} to{opacity:1;transform:none;} }
  @keyframes fadeUp  { from{opacity:0;transform:translateY( 28px);} to{opacity:1;transform:none;} }
  @keyframes fadeOnly{ from{opacity:0;} to{opacity:1;} }

  @media (prefers-reduced-motion: reduce){
    .mv.pc .mv1, .mv.pc .mv2, .mv.pc .copy{ animation:none !important; opacity:1; transform:none; }
  }
}
/* ================= SP（≤768px）：別DOMを表示（アニメ付き） ================= */
@media (max-width:768px){
  /* ヘッダー固定ぶんの押し出し（先に定義済みの --sp-header-h を利用） */
  .mv_sp{ margin-top: var(--sp-header-h, 72px); }

  .mv_sp{
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .mv_sp .mv1{ position: relative; }
  .mv_sp .mv1 img{ display:block; width:100%; height:auto; }

  /* 2つのコピー画像を絶対配置（1枚目＝画面上やや右／2枚目＝右下） */
  .mv_sp .copy{ position:absolute; pointer-events:none; }

  /* 上側のコピー（2番目の .copy）：画面幅の70% */
  .mv_sp .copy:nth-child(2){
    top:  clamp(8px, 5vw, 28px);
    right:clamp(10px, 4vw, 22px);
    width: 70vw;
    max-width: 100%;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }

  /* 下側のコピー（3番目の .copy）：画面幅の25% */
  .mv_sp .copy:nth-child(3){
    right: clamp(30px, 12vw, 60px);
    bottom:clamp(30px, 12vw, 60px);
    width: 25vw;
    max-width: 100%;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }

  /* 画像の縦横をそのまま使うので、コピーはimg幅で調整 */
  .mv_sp .copy img{ display:block; width:100%; height:auto; }

  /* ===== アニメーション指定 ===== */
  .mv_sp .mv1{               /* ① 背景：その場でフェード */
    animation: spFade 1s ease-out .0s both;
  }
  .mv_sp .copy:nth-child(2){ /* ② 上コピー：左からフェードイン（同時開始） */
    animation: spSlideLeft 1s ease-out .0s both;
  }
  .mv_sp .copy:nth-child(3){ /* ③ 下コピー：少し遅らせて下から */
    animation: spSlideUp 2s ease-out .80s both;
  }
}

/* キーフレーム */
@keyframes spFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes spSlideLeft{
  from{ opacity:0; transform: translateX(-20px); } /* 左から */
  to  { opacity:1; transform: none; }
}
@keyframes spSlideUp{
  from{ opacity:0; transform: translateY(20px); }  /* 下から */
  to  { opacity:1; transform: none; }
}

/* モーション軽減に配慮 */
@media (prefers-reduced-motion: reduce){
  .mv_sp .mv1,
  .mv_sp .copy:nth-child(2),
  .mv_sp .copy:nth-child(3){
    animation: none !important; opacity: 1; transform: none;
  }
}



.content01 {
    text-align: center;
    /* フォールバック */
    padding: 90px 0 0;
    /* 対応ブラウザで top だけ上書き */
    padding-top: clamp(90px, 7vh, 120px);
}
@media screen and (max-width: 767px) {
    .content01 {
        padding: 60px 5vw 0;
    }
}

.content01 h2{
  font-size: clamp(20px, 2.000vw, 26px); /* 59/1366*100 = 4.319vw */
  line-height: 1.15;
}

.content01 h3{
  font-size: clamp(18px, 1.900vw, 24px); /* 30/1366*100 = 2.196vw */
  line-height: 1.2;
    margin: 40px 0;               /* フォールバック */
    margin: clamp(30px, 4vh, 60px) 0;     /* 対応ブラウザで上書き */
}

.content01 p{
  font-size: clamp(14px, 1.171vw, 16px); /* 16/1366*100 = 1.171vw */
  line-height: 2.0; /* 読みやすさ用。お好みで調整 */
}

/* コンテナ */
.news-area{
  width: min(100%, 690px);   /* 最大470px、狭い画面では100% */
  margin: 90px auto 0;       /* 上60px、左右中央 */
}

/* 見出し（必要に応じて調整） */
.news-area h2{
  margin: 0 0 16px;
  font-size: clamp(18px, 2.0vw, 24px);
  line-height: 1.2;
}

/* 1行（=1件） */
.news-area .box{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 5px 0;
    margin-top: 20px;
}
.news-area .box:first-of-type{ border-top: 0; }

/* 日付：60px固定・改行しない */
.news-area .date{
  flex: 0 0 60px;            /* 固定幅 */
  width: 100px;
  white-space: nowrap;       /* 改行禁止 */
  font-variant-numeric: tabular-nums; /* 桁が揃って見える */
    font-size: 16px;
    text-align: left;
    line-height: 180%;
}

/* 本文：残り幅いっぱいで折り返し */
.news-area .comment{
  flex: 1 1 auto;
  min-width: 0;              /* 折り返しのために必要 */
  overflow-wrap: anywhere;   /* 長い語でも折り返す（和文でも安全） */
    font-size: 16px;
    text-align: left;
    line-height: 180%;
}

.news-area .comment h4 {
    font-size: 16px;
    font-weight: bold;
}


.content02 {
    margin:90px 0;
  text-align: center;
  padding: 60px 0 0;
  padding: clamp(60px, 6vh, 96px);
    background: url("../images/top/c2-back.jpg")no-repeat;
    background-size: cover;
}


.content02 .icon {
    width: 60px;
    margin: auto;
}
.content02 h2{
  font-size: clamp(24px, 2.196vw, 28px);
  line-height: 1.0;
  margin: 10px 0;
}

.content02 p {
    margin: 40px 0;
    font-size: 17px;
}

.content02 a {
    margin: 20px 0;
    font-size: 17px;
}

.content03 {
    /* フォールバック */
    padding: 60px 0 0;
    /* 対応ブラウザで top だけ上書き */
    padding-top: clamp(60px, 6vh, 96px);
    text-align: center;
}

@media screen and (max-width: 767px) {
    .content03 {
        padding: 0px 5vw 0;
    }
}


.content03 h2 {
    font-size: clamp(20px, 2.000vw, 27px);
}

.content03 .box{
  display:flex;
  align-items: stretch;
  gap:35px;
    max-width: 1000px;
    margin: 40px auto 0;
}



.content03 .box .text{
  flex:1 1 0;
  border-block:1px solid #736357;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0 30px;
    text-align: left;
}

.content03 .box .text h3{
    font-size: 26px;
}
.content03 .box .text h3 span{
    font-size: 20px;
    display: block;
    line-height: 100%;
}

.content03 .box .text ul{
    display: flex;
    gap:15px;
    margin-top: 10px;
}

.content03 .box .text ul li a{
    color: #736357;
    font-size: 14px;
    border: solid 1px #736357;
    display: block;
    padding: 3px 10px;
    line-height: 100%;
    letter-spacing: 2px;
    font-weight: bold;
}

.content03 .box .text ul li a span{
    font-size: 10px;
    margin-right: 5px;
}

.content03 .box .text h4{
    font-size: 22px;
    margin-top: 15px;
    line-height: 100%;
}

.content03 .box .text p {
    margin-top: 15px;
    font-size: 14px;
    line-height: 180%;
}

.content03 .box .photo{
    max-width: 480px;
  flex:0 0 auto;
  background:#f5f5f5;         /* 余白が出るので下地色を入れると綺麗（任意） */
}

.content03 .box .photo img{
  display:block;
  width:100%;
  height:100%;                /* 親と等高 */
  object-fit: contain;        /* トリミングしない・余白OK */
}

/* 1000px以下で自動調整 */
@media (max-width: 1000px){

  /* 1) レイアウト：縦積み、余白を少しコンパクトに */
  .content03 .box{
    flex-direction: column;   /* 横並び → 縦並び */
    gap: 20px;
    max-width: min(92vw, 720px); /* 横幅も少し絞る */
    margin: clamp(24px, 4vh, 40px) auto 0;
  }

  .content03 .box .text{
    padding: 16px 18px;        /* 余白を縮める */
  }

  /* 2) 画像：等高指定を解除して自然な比率で表示 */
  .content03 .box .photo img{
    height: auto;              /* ← これで縦に伸びすぎない */
    object-fit: cover;         /* はみ出しは軽くトリミング（不要なら contain に） */
    width: 100%;
  }

  /* 3) タイポを可変（小画面で自動縮小） */
  .content03 h2{
    font-size: clamp(18px, 3.8vw, 27px);
  }
  .content03 .box .text h3{
    font-size: clamp(20px, 4.5vw, 26px);
    line-height: 1.3;
  }
  .content03 .box .text h3 span{
    font-size: clamp(14px, 3.2vw, 20px);
  }
  .content03 .box .text p{
    margin-top: 18px;
    font-size: clamp(13px, 2.6vw, 14px);
    line-height: 1.8;
  }

  /* 4) ボタン群は折り返しOK・タップしやすく */
  .content03 .box .text ul{
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 12px;
  }
  .content03 .box .text ul li a{
    font-size: clamp(12px, 2.8vw, 14px);
    padding: 6px 12px;
  }
}

/* さらに小さい端末向けの微調整（任意） */
@media (max-width: 480px){
  .content03 .box{ gap: 16px; }
  .content03 .box .text{ padding: 12px 14px; }
}


.content04{
  padding: 90px 0 0;
  padding-top: clamp(90px, 10vh, 120px);
  text-align: center;
}
.content04 h2{
  font-size: clamp(19px, 1.740vw, 24px);
  letter-spacing: 4px;
}

/* ラッパー */
.content04 .carousel{
  position: relative;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* JSが .box 群を包む .track を生成します */
.content04 .carousel .track{
  display: flex;
  gap: 15px;
  width: 100%;
}

/* PC幅：従来どおり5枚並び */
@media (min-width: 1201px){
  .content04 .carousel .track .box{ width: 20%; }
  .content04 .carousel .arw{ width: 33px; display:flex; align-items:center; }
}

/* PC幅（スライドじゃない表示）では矢印を非表示 */
@media (min-width: 1201px){
  .content04 .carousel .arw{ display: none !important; }
    .content04 .carousel {
        padding: 0 30px;
    }
}


/* 共通：カード中の要素 */
.content04 .carousel .box .photo img{
  display:block; width:100%; height:auto;
}
.content04 .carousel .box h3{
  font-size: 22px;
  border-bottom: 1px solid #736357;
}
.content04 .carousel .box p{
  text-align: left;
  margin-top: 10px;
  min-height: 80px;
}

/* ===== スライダー（≤1200px） ===== */
@media (max-width: 1200px){
  /* 矢印を重ねて配置 */
  .content04 .carousel .arw{
    position: absolute; top:0; bottom:0;
    width: 48px; display:grid; place-items:center;
    z-index: 4; cursor: pointer; user-select: none;
    background: none; /* 必要なら薄いグラデを足してOK */
  }
  .content04 .carousel .arw:first-of-type{ left: 0; }
  .content04 .carousel .arw:last-of-type{ right: 0; }

  /* 横スクロール＋スナップ */
  .content04 .carousel .track{
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-inline: 8vw;  /* 中央配置の余白（左右が少し見える） */
  }
  /* 無限巻き戻し用に一瞬スナップを切るクラス */
  .content04 .carousel .track.no-snap{
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .content04 .carousel .track::-webkit-scrollbar{ display:none; }

  /* 1枚を中央に、左右が少し見える幅 */
  .content04 .carousel .track .box{
    flex: 0 0 auto;
    width: clamp(280px, 85vw, 420px);  /* ★中央1枚＋左右ちょい見せ */
    scroll-snap-align: center;
  }

  /* モバイルでは本文高さ固定を外す方が自然 */
  .content04 .carousel .box p{ min-height: auto; }
}

/* クローンスライドはフォーカス/読み上げ対象から外す */
.content04 .carousel .track .box.is-clone{
  pointer-events: none;
}
.content04 .carousel .track .box.is-clone a,
.content04 .carousel .track .box.is-clone button{
  pointer-events: none;
}