/* =========================
   Base / Reset
========================= */


/*  main visual  */
#mv{
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
#mv video {
width: 100%;
height: 101%;
object-fit: cover;
position: absolute;
top: -2px;
left: 0;
}

.mv-title-wrap{
line-height: 1;

font-weight: 600;
top:150px;
left:min(7.142vw, 100px);
z-index: 2;
}
.mv-title span{
font-size: min(4vw, 56px);
width: min(5.714vw, 80px);
height: min(5.714vw, 80px);
background-color: #fff;
color: #00619F;
display: inline-flex;
border: 1px solid #00619F;
justify-content: center;
align-items: center;
font-family: "Barlow Condensed", sans-serif;
font-weight: 400;
  margin-top: -1px;
  margin-left: -1px;
}

.transparent{
background-color: transparent!important;
border: transparent!important;
}

.mv-wrap{
display: flex;
}
.mv-left, .mv-right{

position: relative;
}
.mv-left{
width: 46%;
padding: 150px 0 0 min(7.142vw, 100px);
z-index: 2;
}
.mv-right{
width: 54%;
padding: 50px 0 0 0;
}
.mv-copy{
 font-size: min(4vw, 36px);
 font-weight: 500;
 margin-top: 20px;
     font-feature-settings: "palt";
      letter-spacing: 0.05em;
      line-height: 1.3;
}
.mv-service{
 font-size:min(1.8vw, 20px);
 font-weight: 500;
 margin-top: 10px;
 letter-spacing: 0.05em;
 line-height: 1.3;
}


ul.mv-kv-inner{
width: min(53.571vw, 750px);
height: min(53.571vw, 750px);
display: inline-block;
position: relative;
}
.mv-img{
width: min(25.714vw, 360px);
height: min(25.714vw, 360px);

}
.kv07{
   position: absolute;
   left:0;
   top: 50%;
   transform: translateY(-50%);
}
.kv08{
   position: absolute;
   left:50%;
   top:0;
   transform: translateX(-50%);
}
.kv09{
   position: absolute;
   left:50%;
   bottom:0;
   transform: translateX(-50%);
}
.kv10{
   position: absolute;
   right:0;
   top: 50%;
   transform: translateY(-50%);
}
.major-copy{
font-size: 11.6vw;
position: absolute;
font-family: "Barlow Condensed", sans-serif;
bottom: 2%;
margin-left: 2.5%;
font-weight: 600;
color: #fff;
z-index: 2;
line-height: 0.9;
letter-spacing: -0.02em;
}

.major-copy span{
color: #00619F;
}
.br1200{
display: none;
}
@media (max-width: 1200px){
.major-copy{
font-size: min(19.2vw, 180px);
}
.br1200{
display: block;
}
}

@media (max-width: 900px){
#mv{
height: auto;
padding-bottom: 26vw;
}
.mv-wrap {
flex-direction: column;
}
.mv-left, .mv-right {
width: 100%;
}
.mv-left{
padding: 100px 0 0 6vw;
}
.mv-right{
padding: 0;
text-align: right;
margin-top: -16vw;
}

.mv-title span{
font-size: 6.222vw;
width: 8.888vw;
height: 8.888vw;
}
ul.mv-kv-inner {
width: 83.3331vw;
height: 83.3331vw;
margin-right: -5vw;
}
.mv-img {
width: 40vw;
height: 40vw;
}
}
@media (max-width: 600px){
.mv-service {
    font-size: 10px;
     margin-top: 4px;
}


.mv-copy {
  font-size: 20px;
    margin-top: 10px;
}
}
/* -------------------- section top-message -------------------- */
#top-message{
    width: 100%;
    padding: 200px 0;
    text-align: center;
}
p.message-text{
    font-size: 24px;
    line-height: 2;
    color: #1d1d1d;
    font-weight: 600;
    position: relative;
    width: 480px;
    z-index: 6;
    text-align: justify;
    display: inline-block;
    font-feature-settings: "palt";
    letter-spacing: 0.03EM;
}

@media (max-width: 600px) {
#top-message {
padding: 100px 0;
}
  p.message-text { font-size: 18px; width: 320px; }
}


/* -------------------- section top-service -------------------- */
/* ==================================================
   section top-service（追加：ここが今回の本体）
   - 左：透明 / テキストは固定せずスクロール
   - SERVICE：テキストスクロール中は動かない（sticky）※背面
   - 右：#000 背景 + 左に縦線 / 画像はstickyで100vh固定
   - 画像：80% 幅 / aspect 5:3 / max-width なし
   - 右画像：フェードアウト→差替→フェードイン
================================================== */
#top-service{
  width: 100%;
  position: relative;
  overflow: visible;
  z-index: 1;
}

.top-service-inner{
  width: 100%;
  display: flex;
  align-items: stretch;
}

.top-service-left,
.top-service-right{
  width: 50%;
  position: relative;
  border-top: 1.5px solid #555;
  border-bottom: 1.5px solid #555;
}

.top-service-left{ background: #fff; }

/* ここが「テキスト群→SERVICE」の階層。SERVICEは背面。 */

/* ---- Common: Top section big titles ---- */
.top-service-title,
.top-works-title,
.top-video-title,
.top-writer-title{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.top-service-title{
position: sticky;
  top: 0;
  left: 0;
  padding-top: 40px;
  padding-left: 3%;
  font-size: clamp(72px, 14vw, 180px);
  z-index: 3;
  color: #ECF4F7;
  background-color: #fff;
}

.top-service-items{
  margin-top: -150px; /* SERVICEと干渉しない */
}

.top-service-item{
  min-height: 100vh;
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid #555;
}

.top-service-item:last-child{
  border-bottom: 0;
}

.top-service-text{
  width: 70%;
  margin: 0 auto;
  color: #000;
  position: relative;
  z-index: 2; /* ★テキスト群が前面 */
}

.top-service-h3{
  margin: 0 0 14px 0;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

.top-service-p{
  margin: 0 0 22px 0;
  color: #1d1d1d;
  line-height: 1.8;
  font-size: 16px;
  letter-spacing: 0.02em;
}


/* ---- Common: detail buttons ---- */
.top-details-btn,
.video-details-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.top-details-btn{
min-width: 280px;
  border: 1px solid #1d1d1d;
  border-radius: 8px;
  color: #1d1d1d;
  background: #fff;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.top-details-btn:hover{
  transform: translateY(-1px);
  background: #0b67a3;
  color: #fff;
}

.top-service-right{
  background: #ECF4F7;
}
.top-service-right::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #555;
  z-index: 1;
}

.top-service-right-inner{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.top-service-media{
  width: 90%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1.5px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-service-img{
will-change: opacity;
}

.top-works-cta{
    position: absolute;
    bottom: 60px;
    right:5%;
}
    a.top-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 64px;
  border: 1px solid #E271A5;
  border-radius: 32px;
  color: #fff;
  background: #E271A5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

@media (max-width: 900px){
  /* 背景を白にし、header(difference)が黒見えする前提 */
  #top-service{
background: #fff;
border-top: 0;
border-bottom: 0;
  }

  /* SPではScrollTriggerで pin するため、inner は「1画面」 */
  #top-service .top-service-inner{
display: block;
position: relative;
height: 100vh;
  }

  /* 上半分：テキスト */
  #top-service .top-service-left{
width: 100%;
height: 60vh;
background: #fff;
border: 0;
overflow: hidden;
  }

  /* 下半分：画像 */
  #top-service .top-service-right{
width: 100%;
height: 40vh;
border: 0;
  }
  #top-service .top-service-right::before{ display: none; }

  /* SERVICE 文字：ヘッダーと被らない位置へ（safe-area込み） */
  #top-service .top-service-title{
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 56px);
left: 0;
width: 100%;
padding: 0;
margin: 0;
text-align: center;
z-index: 0;
pointer-events: none;
font-size: min(22vw, 180px);

  }

  /* テキスト表示エリア（SERVICEの下に配置） */
  #top-service .top-service-items{
position: relative;
height: 100%;
margin: 0;
padding: 0;
/* タイトル分を避けて配置 */
padding-top: calc(env(safe-area-inset-top, 0px) + 120px);
  }

  /* 各サービス：SPでは重ねてフェード切替 */
  #top-service .top-service-item{
position: absolute;
left: 0;
right: 0;
top: calc(env(safe-area-inset-top, 0px) + 120px);
bottom: 0;
min-height: auto;
height: auto;
border: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
  }

  #top-service .top-service-text{
width: min(86%, 520px);
margin: 0 auto;
text-align: left;
  }

  #top-service .top-service-h3{
margin: 0 0 14px 0;
font-size: clamp(28px, 7vw, 46px);
letter-spacing: 0.04em;
line-height: 1.15;
  }

  #top-service .top-service-p{
margin: 0 0 22px 0;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.02em;
color: #111;
  }

.top-details-btn{
  min-width: 260px;
  height: 48px;
  font-size: 13px;
}

  /* 下の画像：ボックスを大きく（スクショ風） */
  #top-service .top-service-right-inner{
position: relative;
top: auto;
height: 100%;
padding: 24px 0 22px;
display: flex;
justify-content: center;
  }

  #top-service .top-service-media{
width: min(86%, 520px);
height: calc(36vh - 46px);
aspect-ratio: auto;
border-radius: 14px;
border: 0;
background: #d0d0d0;
  }

  #top-service .top-service-img{
width: 100%;
height: 100%;
object-fit: cover;
  }

  /* top-service内のCTAはSPでは出さない（スクショ準拠） */
  #top-service .top-works-cta{ display: none; }

  /* 初期表示：1つ目だけ見える（JSでも制御するが保険） */
  #top-service .top-service-item:first-child{
opacity: 1;
pointer-events: auto;
  }
}

/* -------------------- section top-works -------------------- */
/* =========================================================
   section top-works  （このブロックを丸ごと採用）
========================================================= */

/* ---- Common: Works / Video / Writer section wrappers ---- */
#top-works,
#top-video,
#top-writer{
  width: 100%;
  padding: 200px 0 160px;
  position: relative;
  overflow: hidden;
}

.top-works-inner,
.top-video-inner,
.top-writer-inner{
  width: 100%;
  margin: 0;
  position: relative;
}
#top-works{
background: #113062;
}

/* 幅1200px制限なし */


/* 左上：WORKS 白フチ文字 */

/* ---- Common: Works / Video / Writer big title layout ---- */
.top-works-title,
.top-video-title,
.top-writer-title{
  position: absolute;
  top: 20px;
  left: 1.5%;
  font-size: min(22vw, 180px);
  pointer-events: none;
  z-index: 1;
}



.top-video-btn,
.top-writer-btn{
  margin-top: 34px;
}

.works-carousel-dots,
.writer-carousel-dots{
  margin-top: 16px;
  gap: 8px;
}
.top-works-title{
color: transparent;
  opacity: .3;
  -webkit-text-stroke: 1.5px #fff;
  text-stroke: 1.5px #fff;
  text-transform: uppercase;
}

/* 真ん中上：制作実績（h2） */

/* ---- Common: Works / Video / Writer section heading & UI ---- */
.top-works-h2,
.top-video-h2,
.top-writer-h2{
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 28px;
  padding-top: 20px;
  position: relative;
  z-index: 2;
}


.top-video-h2,
.top-writer-h2{ color: #111; }


.top-works-h2{ color: #fff; }
.top-video-h2,
.top-writer-h2{ color: #111; }
.top-works-slider-wrap,
.top-video-slider-wrap,
.top-writer-slider-wrap{
  width: 100%;
  position: relative;
  z-index: 2;
}

.top-works-btn,
.top-video-btn,
.top-writer-btn{
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}


/* スライダー外枠 */
.top-works-slider-wrap{
margin-top: 40px;
}

/* =========================================================
   自前 無限カルーセル（3枚30% + 左右5%見切れ）
========================================================= */

/* ---- Common: Works / Video / Writer carousel base ---- */
.works-carousel,
.video-carousel,
.writer-carousel{
  width: 100%;
  position: relative;
}

.works-carousel-viewport,
.video-carousel-viewport,
.writer-carousel-viewport{
  overflow: hidden;
  position: relative;
}

.works-carousel-track,
.video-carousel-track,
.writer-carousel-track{
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.works-carousel-nav,
.video-carousel-nav,
.writer-carousel-nav{
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 50;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.works-carousel-nav::before,
.video-carousel-nav::before,
.writer-carousel-nav::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.works-carousel-dots,
.video-carousel-dots,
.writer-carousel-dots{
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
}

.works-carousel-dot,
.video-carousel-dot,
.writer-carousel-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* ---- Common: Works / Video / Writer cards ---- */
.works-card,
.video-card,
.writer-card{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ---- Common: cover images ---- */
.top-service-img,
.works-card-thumb img,
.video-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* 左右5%見切れ領域 */
.works-carousel-viewport{
padding: 0 5%;
}

/* トラック */
.works-carousel-track{
gap: 0;
}

/* 30%固定（3枚で90%） */
.works-card{
flex: 0 0 30%;
  background: transparent;
}

/* サムネ */
.works-card-thumb{
  aspect-ratio: 5 / 3;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}


/* 下の黒帯 */
.works-card-meta{
  background: #fff;
border-left: 1.5px solid #ccc;
  padding: 16px 20px 20px;
  display: grid;
  gap: 4px;
}

.works-card-name{
  color: #1d1d1d;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.works-card-sub{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.works-card-year{
  color: #333;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.works-card-genre{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 4px 10px 2px;
  border-radius: 2px;
  background: #00B9C6;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* =========================================================
   矢印（左右上に重ねる）
========================================================= */
.works-carousel-nav{
top: calc(50% - 70px);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
}

/* 見切れpadding(5%)の内側に合わせる */
.works-carousel-nav--prev{ left: calc(5% - 16px); }
.works-carousel-nav--next{ right: calc(5% - 16px); }



.works-carousel-nav--prev::before{
  border-right: 8px solid rgba(255,255,255,0.85);
  transform: translateX(-1px);
}

.works-carousel-nav--next::before{
  border-left: 8px solid rgba(255,255,255,0.85);
  transform: translateX(1px);
}

/* =========================================================
   ドット（即時移動）
========================================================= */


.works-carousel-dot{
background: #fff;
  opacity: 0.35;
  border: none;
}

.works-carousel-dot.is-active{
  opacity: 1;
}

/* =========================================================
   BTN（詳しく見る）
========================================================= */
.top-works-btn{
margin-top: 50px;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px){
  #top-works,
  #top-video,
  #top-writer{
    padding: 90px 0 70px;
  }

  .top-works-title,
  .top-video-title,
  .top-writer-title{
    top: 2%;
    left: 4%;
  }

  .top-works-slider-wrap,
  .top-video-slider-wrap{
    margin-top: 56px;
  }

  .top-works-h2,
  .top-video-h2{
    font-size: 24px;
  }
}
@media (max-width: 900px){
.works-carousel-viewport{
  padding: 0 6%;
}

  /* SPは1枚強見え（見切れ維持） */
  .works-card{
  flex-basis: 78%;
}

  .works-carousel-nav--prev{
  left: calc(6% + 6px);
}
  .works-carousel-nav--next{
  right: calc(6% + 6px);
}
}



@media (max-width: 600px){
  .top-works-slider-wrap,
  .top-video-slider-wrap,
  .top-writer-slider-wrap{
    margin-top: 24px;
  }
}
@media (max-width: 600px){
.works-card-name{
  font-size: 16px;
}
.works-card-meta{
  padding: 12px 16px;
}
.works-card-sub{
  margin-top: 0;
}
}

/* -------------------- section top-video -------------------- */
#top-video{
background: #ECF4F7;
}



/* 左上：VIDEO（薄い水色） */
.top-video-title{
color: #C5DFEF;
}

/* 真ん中上：動画 */


/* スライダー外枠 */
.top-video-slider-wrap{
margin-top: 60px;
}

/* =========================================================
   Video Carousel（真ん中3枚を常に成立させる）
   - 左右見切れ：5%
   - gap：可変（clamp）
   - カード幅： (100% - gap*2) / 3
========================================================= */
.video-carousel{
--edge: 5%;
  --gap: clamp(18px, 2.2vw, 36px);
}

.video-carousel-viewport{
padding: 0 var(--edge);
  box-sizing: border-box;
}

.video-carousel-track{
flex-wrap: nowrap;
  gap: var(--gap);
}

/* ★3枚固定の核（4枚入る余地を潰す） */
.video-card{
flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
  max-width: none;
  box-sizing: border-box;
}

/* サムネ */
.video-card-thumb{
  width: 100%;
  aspect-ratio: 5 / 3;
  background: #ccc;
  border-radius: 10px;
  overflow: hidden;
}


/* タイトル */
.video-card-text{
  margin: 8px 0 0 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
}



/* arrows（黒丸＋白矢印） */
.video-carousel-nav{
top: calc(50% - 70px);
  border: none;
  background: #111;
}

/* edgeの内側に合わせる */
.video-carousel-nav--prev{ left: calc(var(--edge) - 16px); }
.video-carousel-nav--next{ right: calc(var(--edge) - 16px); }


.video-carousel-nav--prev::before{
  border-right: 8px solid rgba(255,255,255,0.92);
  transform: translateX(-1px);
}
.video-carousel-nav--next::before{
  border-left: 8px solid rgba(255,255,255,0.92);
  transform: translateX(1px);
}

/* dots（画像：●●●○●●●●●● の見え方） */
.video-carousel-dots{
margin-top: 28px;
  gap: 10px;
}

.video-carousel-dot{
background: #555;
  border: 1px solid transparent;
}

/* active：中抜き（白地） */
.video-carousel-dot.is-active{
  background: transparent;
  border-color: #555;
}

/* CTA（詳しく見る：四角・細線） */


.video-details-btn{
width: 280px;
  border: 1px solid #333;
  background: #fff;
  color: #111;
  border-radius: 0;
}

/* ----- <=900px ----- */
@media (max-width: 900px){
.video-carousel-nav--prev{
  left: calc(var(--edge) + 24px);
}
.video-carousel-nav--next{
  right: calc(var(--edge) + 24px);
}


  

  /* SP：左右6% + 1枚強見せ */
  .video-carousel{
  --edge: 6%;
  --gap: clamp(14px, 2.2vw, 22px);
}


  /* ★ここが重要：SPは78%固定 */
  .video-card{
  flex: 0 0 78%;
}
}


/* ----- <=600px ----- */
@media (max-width: 600px){
.video-details-btn{
  width: 260px;
}
}

/* -------------------- section top-event -------------------- */

/* ========================
   section event
======================== */

#top-event {
    width: 100%;
    padding: 140px 0;
	background-color: #ECF4F7;
}

img.event-img{
	width: 100%;
}


/* -------------------- section top-writer -------------------- */
#top-writer{
background: #fff;
}



.top-writer-title{
color: #ECF4F7;
}



.top-writer-slider-wrap{
margin-top: 56px;
}

/* =========================================================
   Writer Carousel
   - 中央カード：840px（固定）
   - gap：60px（固定）
========================================================= */


.writer-carousel-viewport{
padding-left: calc((100% - 840px) / 2);
  padding-right: calc((100% - 840px) / 2);
}

.writer-carousel-track{
align-items: stretch;
  gap: 60px;
}

/* カード（幅はJSで840px固定 / 高さ500px） */
.writer-card{
flex: 0 0 840px;
  max-width: 840px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 左右カード暗転（黒50%） */
.writer-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 5;
}
.writer-card.is-dim::after{ opacity: 1; }

.writer-card-inner{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.writer-card-info{
background: #113062;
  color: #fff;
  padding: 44px 44px 40px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.writer-card-name{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0;
}

.writer-card-bio{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.writer-card-photo{
  background: #fff;
  position: relative;
  height: 600px;
}

.writer-card-img{
  width: 100%;
  height: 600px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* arrows */
.writer-carousel-nav{
top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.8);
}



.writer-carousel-nav--prev::before{
  border-right: 8px solid rgba(0,0,0,0.75);
  transform: translateX(-1px);
}
.writer-carousel-nav--next::before{
  border-left: 8px solid rgba(0,0,0,0.75);
  transform: translateX(1px);
}

/* 位置（重なり解消） */
.writer-carousel-nav--prev{ left: 2%; }
.writer-carousel-nav--next{ right: 2%; }

/* dots */

.writer-carousel-dot{
background: #111;
  opacity: 0.25;
  border: none;
}
.writer-carousel-dot.is-active{ opacity: 1; }



/* 無限ループ補正ジャンプ中はオーバーレイのtransitionを止める（フラッシュ防止） */
.writer-carousel.is-jumping .writer-card::after{
  transition: none !important;
}


/* =========================================================
   <=900px：左右5% / 真ん中86% / gap2%
   高さ：8/5 を維持
========================================================= */
@media (max-width: 900px){
/* SPはJSでpadding(左右5%)を入れるため、CSSのcalcを無効化 */
  .writer-carousel-viewport{
  padding-left: 0;
  padding-right: 0;
}

  .writer-card{
  height: auto;
}
.writer-card-info{
  color: #fff;
  padding: 16px 13px 16px;
  display: grid;
  align-content: center;
  gap: 12px;
}
  .writer-card-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.writer-card-photo{
  height: 100%;
}
.top-writer-h2{
  font-size: 28px;
  padding-top: 20px;
}
}

@media (max-width: 600px){
.top-writer-h2{
  font-size: 24px;
}
.writer-card-name {
    font-size: 20px;
}
}

/* -------------------- section top-contact -------------------- */
/* =========================
   top-contact
========================= */

.top-contact{
  width: 100%;
  padding: 120px 20px 120px;
  background-color: #f4f3ef; /* 画像に近い薄いベージュ */
  text-align: center;
  position: relative;
}

.top-contact-inner{
  width: 100%;
  margin: 0 auto;

}

.top-contact-title{
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 32px;
    text-align: center;
}

.top-contact-text{
  max-width: 920px;
  margin: 0 auto 56px;
  font-size: 14px;
  line-height: 2;
  color: #111;
}

@media (max-width: 900px){
.top-contact-text {
margin: 0 auto 24px;
}

.top-contact{
  padding: 60px 20px 60px;
}
}


/* -------------------- section footer -------------------- */

.site-footer{
  width: 100%;
  background: #2C3B4F;
  color: #fff;
  padding: 80px 6% 80px;
}

.site-footer-inner{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6%;
}

/* left */
.site-footer-left{
  width: 46%;
  min-width: 360px;
}

img.f-logo{
  width: 220px;
}

.site-footer-company{
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.site-footer-address{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

.site-footer-address p{
  margin: 0;
}

.site-footer-copy{
  margin-top: 70px;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* right nav */
.site-footer-nav{
  width: 48%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
}

.site-footer-nav-col{
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-nav-col li{
  border-bottom: 1px solid #4C607B;
  padding: 18px 0 16px;
  position: relative;
}

.site-footer-nav-col li:first-child{
  padding-top: 0;
}

.site-footer-link{
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-family: var(--font-en);
  opacity: 0.95;
  transition: opacity .2s ease;
}

.site-footer-link:hover{
  opacity: 0.65;
}

/* responsive */
@media (max-width: 900px){
  .site-footer{
padding: 60px 6% 60px;
  }

  .site-footer-inner{
flex-direction: column;
gap: 48px;
  }

  .site-footer-left,
  .site-footer-nav{
width: 100%;
min-width: 0;
  }

  .site-footer-copy{
margin-top: 40px;
  }

  .site-footer-nav{
gap: 8%;
  }
}
@media (max-width: 600px){
img.f-logo {
    width: 180px;
}
}