@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

:root{
  --red300:#f22519;
  --red500:#f22d20;
　--red800:#9f2a2a;
  --red900:#5d0a02;
  --orange400:#ffad19;
  --black700:#111923;
  --cream300:#fff9f3;
  --line:#e9e6e1;
  --bg: #ffd6cf;
  --red: #ff5a52;
  --orange: #ffa23f;
  --yellow: #ffe066;
  --coral: #ff7f66;
  --cream: #fff9f0;
  --white: #ffffff;
  --ink: #7a1f14;
　--red800:#9f2a2a;
}

*{
	box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--black700);font-family:'Noto Sans JP',sans-serif;background:#fff
}
a{
	color:inherit;text-decoration:none
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-15 {
	margin-bottom: 15px;
}

button{font:inherit}
.header { 
  height:72px;padding:0 clamp(20px,3vw,44px);display:flex;align-items:center;gap:34px;position:sticky;top:0;background:rgba(255,255,255,1);}
.logo { 
display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-mark { 
display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#ff6c20,var(--red500));font-size:27px;width:42px;height:42px;border-radius:4px}
.logo b { 
display:block;font-size:23px;letter-spacing:.07em;line-height:1.1}
.logo small { 
display:block;font-size:8px;font-weight:700;letter-spacing:.08em}
.header nav { 
display:flex;gap:28px;margin-left:auto;font-size:13px;font-weight:700}
.header nav a:hover { 
color:var(--red500)}
.header-actions { 
display:flex;gap:12px;align-items:center}
.join,.login { 
height:42px;display:grid;place-items:center;border-radius:28px;padding:0 25px;font-weight:800;font-size:12px}
.join { 
background:linear-gradient(100deg,#f02018,#ff651d);color:#fff}
.login { 
border:1px solid var(--red500)}
.search,.menu-button { 
border:0;background:none;font-size:25px}
.menu-button { 
display:none}
.hero { 
min-height:490px;
	position:relative;
	overflow:hidden;
/* 	background:linear-gradient(105deg,#fff 0 42%,#f8f4e9 42%); */
	display:grid;
	grid-template-columns:45% 55%;
	align-items:center
}
.hero-copy { 
z-index:3;
padding-left:clamp(32px,5vw,58px)
}

.scribble,.hero-note,.section-heading>span,.can-do i,.future h2 { 
font-family:'Noto Sans JP',sans-serif
}

.scribble { 
font-size:clamp(34px,4vw,57px);margin:0;}
h1 { 
	color:var(--red500);
	font-family:'Noto Sans JP',sans-serif;
	font-size:clamp(48px,3vw,78px);
	line-height:1;
	margin:-3px 0 28px;
}

.lead { 
font-size:14px;line-height:2;font-weight:600;
}

.cta { 
display:inline-flex;align-items:center;justify-content:space-between;min-width:230px;padding:15px 20px;margin-top:10px;color:#fff;background:linear-gradient(100deg,#f22519,#ff5b19);font-weight:800;border-radius:28px;box-shadow:0 8px 20px #f33b262d;transition:.2s}
.cta:hover { 
transform:translateY(-2px)}
.cta span { 
font-size:22px}
.hero-visual { 
height:100%;position:relative;overflow:hidden}
.hero-visual img { 
width:100%;height:100%;object-fit:cover;object-position:center}
.bubble { 
position:absolute;background:#fff;padding:16px 20px;border-radius:50%;font:600 15px/1.6 'Noto Sans JP',sans-serif;box-shadow:0 5px 20px #0001}
.bubble.one { 
top:38px;left:4%}
.bubble.two { 
top:160px;right:1%}
.hero-note { 
position:absolute;right:2%;top:20px;color:var(--red500);font-size:28px;z-index:2}
.paint { 
position:absolute;width:70px;height:130px;background:#ff7657;border-radius:50%;opacity:.9;}
.paint-a { 
left:-50px;top:30px}
.paint-b { 
left:-48px;bottom:-55px;background:var(--orange400)}
.can-do { 
display:grid;grid-template-columns:145px 1fr;gap:18px;background:var(--cream300);padding:20px 3.2vw}
.section-title { 
display:flex;gap:12px;align-items:center}
.section-title>span { 
width:5px;height:90px;background:var(--red500)}
.section-title h2 { 
font-size:22px;line-height:1.45;margin:0}
.section-title i { 
color:#75808a}
.feature-grid { 
display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.feature-grid article { 
background:#fff;border-radius:18px;text-align:center;padding:12px 10px;box-shadow:0 3px 15px #5d45360a}
.icon { 
width:58px;height:58px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#fff0b9;color:var(--red500);font-size:31px;font-weight:900}
.feature-grid h3 { 
font-size:14px;margin:6px 0}
.feature-grid p { 
font-size:10px;line-height:1.7;margin:0}
.content-section,.split-row,.voices { 
padding:30px 3.2vw}
.section-heading { 
display:flex;align-items:center;gap:26px;margin-bottom:18px}
.section-heading h2 { 
border-left:5px solid var(--red500);padding-left:10px;font-size:24px;margin:0}
.section-heading>span { 
color:var(--red500);font-size:19px;}
.section-heading>a { 
margin-left:auto;color:var(--red500);font-size:12px;font-weight:800}
.president-grid { 
display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.president-grid article { 
position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:0 4px 12px #0000000b;background:#fff}
.president-grid img { 
width:100%;height:145px;object-fit:cover}
.president-grid .tag { 
position:absolute;top:124px;left:14px;color:#fff;background:var(--red500);border-radius:12px;padding:2px 12px;font-size:10px;font-weight:800}
.president-grid small,.president-grid h3,.president-grid blockquote { 
display:block;margin-left:14px;margin-right:14px}
.president-grid small { 
font-size:9px;margin-top:7px}
.president-grid h3 { 
font-size:15px;margin-top:5px;margin-bottom:5px}
.president-grid h3 em { 
font-size:9px;font-style:normal;font-weight:500}
.president-grid blockquote { 
font-family:'Noto Sans JP',sans-serif;font-weight:600;font-size:13px;line-height:1.65;margin-top:6px;margin-bottom:12px;padding-left:12px;border-left:2px solid var(--orange400)}
.president-grid article>a { 
position:absolute;right:12px;bottom:12px;color:var(--red500)}
.split-row { 
display:grid;grid-template-columns:3fr 1fr;gap:18px}
.event-grid { 
display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.event-grid article { 
border:1px solid var(--line);padding:15px;display:grid;grid-template-columns:54px 1fr 20px;gap:8px;min-height:145px;box-shadow:0 4px 12px #0000000b}
.event-grid time { 
font-size:22px;font-weight:800}
.event-grid time small { 
display:block;font-size:10px;text-align:center}
.event-grid b { 
background:var(--red500);color:white;border-radius:14px;padding:3px 9px;font-size:9px}
.event-grid .orange { 
background:#ff8b18}
.event-grid h3 { 
font-size:13px;line-height:1.5;margin:8px 0}
.event-grid p { 
font-size:9px}
.event-grid article>span { 
align-self:end;color:var(--red500);font-size:20px}
aside ul { 
list-style:none;margin:0;padding:0;border:1px solid var(--line)}
aside li { 
padding:10px 12px;border-bottom:1px solid var(--line);font-size:10px;display:flex;justify-content:space-between}
aside li:last-child { 
border:0}
aside b { 
color:var(--red500);font-size:18px}

.voices { 
background:#fffdfa}

.voice-grid { 
display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.voice-grid article { 
display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center}

.avatar { 
font-size:46px;width:70px;height:70px;border-radius:50%;background:#fff0bd;display:grid;place-items:center}

.voice-grid p { 
border:1px solid #ffd8c9;border-radius:45%;padding:18px;font:600 12px/1.7 'Noto Sans JP',sans-serif;margin:0}

.voice-grid small { 
grid-column:2;font-size:9px}

.future { 
height:225px;position:relative;overflow:hidden;
}

.future>img { 
width:100%;height:100%;object-fit:cover;
}

/* .future:after { 
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,transparent 0 48%,rgba(255,245,236,.94) 72%);
}
 */
.future-copy { 
	position:absolute;z-index:1;inset:0 4% 0 auto;
 	display:flex;
/*	grid-template-columns:1.3fr .8fr;
	grid-template-rows:1fr 1fr; */
	align-items:center;
	gap:0 30px
}
.future h2 { 
grid-row:1/3;font-size:30px;color:var(--red500);line-height:1.45;}
.future-copy p { 
font-size:11px;align-self:end}
.future .cta { 
/* 	align-self:start; */
	margin:5px 0 0;
}
footer { 
min-height:90px;padding:15px 3.2vw;display:flex;align-items:center;gap:42px}
footer nav { 
display:flex;gap:25px;font-size:10px}
footer p { 
margin-left:auto;font-size:10px;letter-spacing:.08em}
.reveal { 
opacity:0;transform:translateY(20px);transition:.65s}
.reveal.visible { 
opacity:1;transform:none}

@media(max-width:900px){
  .header nav,.header-actions{display:none}.header{height:64px}.menu-button{display:block;margin-left:auto}.header.open{height:auto;min-height:64px;flex-wrap:wrap;padding-bottom:16px}.header.open nav{display:flex;order:3;flex-basis:100%;flex-direction:column;gap:12px}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:60px 7vw 35px}.hero-visual{height:370px}.hero-note{top:53%;font-size:22px}.can-do{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-grid article:last-child{grid-column:1/3}.president-grid{grid-template-columns:repeat(2,1fr)}.split-row{grid-template-columns:1fr}.event-grid{grid-template-columns:1fr}.voice-grid{grid-template-columns:1fr}.future{height:430px}.future:after{background:linear-gradient(0deg,rgba(255,245,236,.98),rgba(255,245,236,.08))}.future-copy{inset:auto 7vw 20px;display:block}.future h2{font-size:25px}footer{flex-direction:column;align-items:flex-start}footer nav{flex-wrap:wrap}footer p{margin:0}
}
@media(max-width:560px){
  .scribble{font-size:33px}h1{font-size:47px}.lead{font-size:12px}.hero-visual{height:300px}.bubble{font-size:11px;padding:11px}.bubble.two{top:145px}.president-grid{grid-template-columns:1fr}.president-grid img{height:200px}.president-grid .tag{top:178px}.feature-grid{grid-template-columns:1fr}.feature-grid article:last-child{grid-column:auto}.section-heading{gap:12px;flex-wrap:wrap}.section-heading h2{font-size:21px}.voice-grid article{grid-template-columns:62px 1fr}.avatar{width:58px;height:58px;font-size:36px}
}

  #stage{
    position: fixed;
    top: 0; 
	left: 0;
    width: 100%; height: 100vh;
    display:flex; align-items:center; justify-content:center;
    background: #9f2a2a;
	z-index: 99999;
    overflow: hidden;
    transition: opacity 700ms ease;
  }
  #stage.stageOut{
    opacity: 0;
    pointer-events: none;
  }
  #stage.stageHidden{
    display: none;
  }

  /* ---- 北海道イメージ（一番下のレイヤーに、大きめのエンブレムとして表示） ---- */
  #hkImgWrap{
    position: absolute;
    top: 50%; left: 50%;
    width: min(60vw, 460px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(-6deg);
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(.22,.9,.25,1), transform 800ms cubic-bezier(.22,.9,.25,1);
    filter: drop-shadow(0 14px 34px rgba(122,31,20,0.22));
  }
  #hkImgWrap img{ display:block; width:100%; height:auto; }
  #hkImgWrap.show{ opacity: 0.95; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  /* ---- ambient background blobs (静的・呼吸するだけ／上に流れない) ---- */
  .blob{
    position:absolute;
    border-radius:50%;
    filter: blur(70px);
    opacity: 0.5;
    animation: breathe 5200ms ease-in-out infinite;
    transition: opacity 900ms ease;
  }
  .blob.b1{ width:46vw; height:46vw; left:-10vw; bottom:-14vw; background: var(--red); animation-delay: 0ms; }
  .blob.b2{ width:38vw; height:38vw; right:-8vw; top:-10vw; background: var(--orange); animation-delay: 700ms; }
  .blob.b3{ width:30vw; height:30vw; right:12vw; bottom:-10vw; background: var(--yellow); animation-delay: 1400ms; opacity:0.4; }
  @keyframes breathe{
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
  }

  /* ---- Title ---- */
  #titleWrap{
    position: relative;
    z-index: 5;
    text-align:center;
  }

  .eyebrow{
    display:inline-block;
    font-weight: 700;
    font-size: clamp(11px, 1.6vw, 14px);
    letter-spacing: 0.38em;
    color: var(--red300);
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  #titleWrap.eyebrowShow .eyebrow{ opacity: 0.95; transform: translateY(0); }

  .titleStack{ position: relative; }

  h1.title{
    margin:0;
    font-weight: 900;
    font-size: clamp(42px, 10.5vw, 80px);
    line-height: 1;
    letter-spacing: 0.01em;
  }
  h1.title .ch{
    display:inline-block;
	font-family: 'Noto Serif JP', serif;
  　font-weight: 600;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(28px) scale(0.6);
    background: linear-gradient(100deg, var(--red) 0%, var(--red900) 100%);
/* 	background: linear-gradient(100deg, var(--red) 0%, var(--orange) 48%, var(--yellow) 96%); */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--cream);
    paint-order: stroke fill;
    text-shadow: 0 8px 22px rgba(122,31,20,0.28);
  }
  #titleWrap.titleShow h1.title .ch{
    animation: chIn 760ms cubic-bezier(.2,1.5,.35,1) forwards;
  }
  @keyframes chIn{
    0%   { opacity:0; filter: blur(10px); transform: translateY(28px) scale(0.6) rotate(-6deg); }
    60%  { opacity:1; filter: blur(0px);  transform: translateY(-6px) scale(1.06) rotate(2deg); }
    100% { opacity:1; filter: blur(0px);  transform: translateY(0) scale(1) rotate(0deg); }
  }

  .tagline{
    margin-top: 20px;
	font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    font-size: clamp(13px, 2vw, 20px);
    color: var(--white);
/* 	-webkit-text-stroke: 1px #ffffff; */
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 700ms ease, transform 700ms ease;
	  
  border-radius: 50px;
  background-image: -webkit-gradient(linear, right top, left top, from(#f22519), to(#f22d20));
  background-image: -webkit-linear-gradient(right, #f22519 0%, #f22d20 50%);
  background-image: linear-gradient(to left, #f22519 0%, #f22d20 50%);

  }
  #titleWrap.taglineShow .tagline{ opacity: 1; transform: translateY(0); }

  /* ---- Burst shapes ---- */
  .shape{
    position: absolute;
    top: 50%; left: 50%;
    width: var(--s, 24px);
    height: var(--s, 24px);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    will-change: transform, opacity;
  }
  .shape.charge{
    animation: chargeUp 520ms ease-out forwards;
  }
  @keyframes chargeUp{
    0%   { opacity:0; transform: translate(-50%,-50%) scale(0.1) rotate(0deg); }
    100% { opacity:0.9; transform: translate(-50%,-50%) scale(0.55) rotate(40deg); }
  }
  .shape.burst{
    animation: burstFly 950ms cubic-bezier(.16,.9,.3,1) forwards;
  }
  @keyframes burstFly{
    0%   { opacity: 0.9; transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(0.6); }
    18%  { opacity: 1;   transform: translate(-50%,-50%) translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) rotate(70deg) scale(1.2); }
    100% { opacity: 0;   transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.7); }
  }
  .shape.circle{ border-radius: 50%; background: var(--c, var(--yellow)); box-shadow: 0 0 20px 2px currentColor; }
  .shape.square{ border-radius: 8px; background: var(--c, var(--red)); box-shadow: 0 0 20px 2px currentColor; }
  .shape.triangle{
    width: 0; height: 0;
    background: none !important;
    border-left: calc(var(--s,24px) / 2) solid transparent;
    border-right: calc(var(--s,24px) / 2) solid transparent;
    border-bottom: var(--s,24px) solid var(--c, var(--orange));
    filter: drop-shadow(0 0 16px var(--c, var(--orange)));
  }


  @media (prefers-reduced-motion: reduce){
    .eyebrow, .tagline, h1.title .ch{ transition: opacity 300ms ease !important; animation: none !important; opacity:1 !important; filter:none !important; transform:none !important; }
    .shape{ display:none; }
  }


/* 検索ボタン */
.search-submit {
    top: calc(20%);
}

/* 固定ページのラベル */
.cat-label　{
background-color: #f22519;
border-radius: 50px;
}

/* 記事の見出しデザイン */


.article h2 {
    font-size: 24px;
    padding: 25px;
	color: var(--white);
    background-color: var(--red500);
    border-radius: var(--red500);
}

.article h3 {
    border-left: 7px solid var(--red300);
	border-right: none;
	border-top: none;
	border-bottom: none;
}

.article h4 {
    border-top: 2px solid var(--red300);
    border-bottom: 2px solid var(--red300);
}

.article h5 {
	border-bottom: 2px solid var(--red500);
}

.cat-link {
    background-color: var(--red500);
    border-radius: var(--red500);
}

.cat-label{
	background-color: var(--red500);
}

/* フロントページのみmainタグの余白を消す */
.home main,
.front-page main {
    padding: 0 !important; /* !importantは必要に応じて外してください */
}


/* 投稿記事の日時表記位置 */
.date-tags {
	text-align: left;
}


/* FVのCSS */
  .fv-peopleloop-section{
    background: var(--fv-peopleloop-bg);
    color: var(--fv-peopleloop-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    overflow: hidden;
    position: relative;
  }

  .fv-peopleloop-wrap{
/*     max-width: 1240px; */
    margin: 0 auto;
    padding: 96px 40px;
    display: grid;
    grid-template-columns: minmax(320px, 460px) 1fr;
    gap: 40px;
    align-items: center;
  }

  /* ---------- 左カラム：テキスト＋ボタン ---------- */
  .fv-peopleloop-text{
    position: relative;
    z-index: 2;
  }

  .fv-peopleloop-eyebrow{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fv-peopleloop-accent-dark);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
  }

  .fv-peopleloop-heading{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
  }

  .fv-peopleloop-lead{
    font-size: 17px;
    line-height: 1.9;
    color: var(--fv-peopleloop-ink-soft);
    max-width: 42ch;
    margin: 0 0 36px;
  }

  .fv-peopleloop-cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--fv-peopleloop-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .fv-peopleloop-cta:hover{
    background: var(--fv-peopleloop-accent-dark);
    transform: translateY(-1px);
  }
  .fv-peopleloop-cta:focus-visible{
    outline: 3px solid var(--fv-peopleloop-accent-dark);
    outline-offset: 3px;
  }

  /* ---------- 右カラム：人物カード斜めループ ---------- */
  .fv-peopleloop-visual{
    position: relative;
    height: 560px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    transform: rotate(7deg) scale(1.15);
    transform-origin: center;
  }

  .fv-peopleloop-lane{
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 4px;
  }
  /* 上下をふわっと隠すフェード */
  .fv-peopleloop-lane::before,
  .fv-peopleloop-lane::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 90px;
    z-index: 3;
    pointer-events: none;
  }
  .fv-peopleloop-lane::before{ top: 0;    background: linear-gradient(var(--fv-peopleloop-bg), transparent); }
  .fv-peopleloop-lane::after { bottom: 0; background: linear-gradient(transparent, var(--fv-peopleloop-bg)); }

  .fv-peopleloop-track{
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fv-peopleloop-scroll-up 22s linear infinite;
  }
  .fv-peopleloop-lane--b .fv-peopleloop-track{ animation-duration: 28s; animation-direction: reverse; }
  .fv-peopleloop-lane--c .fv-peopleloop-track{ animation-duration: 18s; }

  .fv-peopleloop-card{
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 18px 30px -12px var(--fv-peopleloop-card-shadow);
    background: var(--fv-peopleloop-sand);
  }
  .fv-peopleloop-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @keyframes fv-peopleloop-scroll-up{
    from{ transform: translateY(0); }
    to  { transform: translateY(-50%); } /* 画像を複製しているので50%でシームレスにループ */
  }

  /* ---------- レスポンシブ ---------- */
  /* スマホ幅ではカードループを背景として敷き、その上にテキスト＋ボタンを重ねる */
  @media (max-width: 900px){
    .fv-peopleloop-wrap{
      display: block;         /* グリッドをやめて重ね合わせレイアウトに */
      position: relative;
      padding: 72px 24px;
      min-height: 560px;
      isolation: isolate;     /* 内部のz-indexをこのラッパー内に閉じ込める */
    }

    /* 背景：カードループ（テキストの後ろに配置） */
    .fv-peopleloop-visual{
      position: absolute;
      inset: 0;
      height: 100%;
      z-index: 0;
      transform: rotate(6deg) scale(1.35);
      opacity: 0.5; /* 前面のテキストを邪魔しないよう控えめに */
    }

    /* 背景と前景の間に読みやすさ確保用のスクリム（グラデーション）を挿入 */
    .fv-peopleloop-wrap::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          180deg,
          var(--fv-peopleloop-bg) 0%,
          rgba(251, 250, 246, 0.82) 38%,
          rgba(251, 250, 246, 0.94) 100%
        );
      pointer-events: none;
    }

    /* 前景：テキスト＋ボタン */
    .fv-peopleloop-text{
      position: relative;
      z-index: 2;
    }
  }

  @media (max-width: 520px){
    .fv-peopleloop-wrap{ min-height: 480px; }
/*     .fv-peopleloop-lane--b { display: none; } */
	  /* 極小画面はレーンを間引いて見やすく */
  }

  /* ---------- 動きを抑えたい人向け ---------- */
  @media (prefers-reduced-motion: reduce){
    .fv-peopleloop-track{ animation: none; }
  }

/* FV最新投稿4つ分のCSS  */
.front-page-interview-section,
.front-page-interview-section *,
.front-page-interview-section *::before,
.front-page-interview-section *::after {
	box-sizing: border-box;
}

.front-page-interview-section {
    padding: 20px 3.2vw;
	background: var(--cream300);
}

.front-page-interview-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.front-page-interview-heading {
	margin-bottom: 40px;
	text-align: center;
}

.front-page-interview-heading__english {
	margin: 0 0 8px;
	color: var(--red500);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .16em;
}

.front-page-interview-heading__title {
	margin: 0;
	color: #333;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.4;
}

.front-page-interview-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.front-page-interview-card {
	min-width: 0;
	overflow: hidden;
	margin: 0;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(17, 44, 78, .08);
	transition: transform .3s ease, box-shadow .3s ease;
}

.front-page-interview-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 35px rgba(17, 44, 78, .14);
}

.front-page-interview-card__link {
	display: flex;
	height: 100%;
	color: inherit;
	text-decoration: none;
	flex-direction: column;
}

.front-page-interview-card__link:hover {
	color: inherit;
	text-decoration: none;
}

.front-page-interview-card__image-area {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: #b38990;
}

.front-page-interview-card__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .4s ease;
}

.front-page-interview-card:hover .front-page-interview-card__image {
	transform: scale(1.05);
}

.front-page-interview-card__no-image {
	display: flex;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	align-items: center;
	justify-content: center;
}

.front-page-interview-card__category {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 6px 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
    background-color: var(--red500);
	border-radius: 100px;
}

.front-page-interview-card__content {
	display: flex;
	padding: 22px 20px 24px;
	flex: 1;
	flex-direction: column;
}

.front-page-interview-card__date {
	display: block;
	margin-bottom: 9px;
	color: #8190a1;
	font-size: 12px;
	line-height: 1.5;
}

.front-page-interview-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 14px;
	color: #112c4e;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.front-page-interview-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 20px;
	color: #566273;
	font-size: 14px;
	line-height: 1.8;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.front-page-interview-card__more {
	display: inline-flex;
	margin-top: auto;
	color: #dd4242;;
	font-size: 14px;
	font-weight: 700;
	align-items: center;
	gap: 8px;
}

.front-page-interview-card__more-arrow,
.front-page-interview-button__arrow {
	transition: transform .3s ease;
}

.front-page-interview-card:hover .front-page-interview-card__more-arrow,
.front-page-interview-button:hover .front-page-interview-button__arrow {
	transform: translateX(5px);
}

.front-page-interview-button-area {
	margin-top: 48px;
	text-align: center;
}

.front-page-interview-button {
	display: inline-flex;
	min-width: 260px;
	min-height: 58px;
	padding: 14px 32px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	background-color: #dd4242;
	border: none;
	border-radius: 100px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	transition: color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.front-page-interview-button:hover {
	color: #dd4242;
	text-decoration: none;
	background-color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(17, 44, 78, .16);
	border: 1px solid #dd4242;
}

.front-page-interview-empty {
	margin: 0;
	padding: 40px 20px;
	color: #566273;
	text-align: center;
	background-color: #fff;
	border-radius: 12px;
}

@media screen and (max-width: 1024px) {
	.front-page-interview-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 600px) {
	.front-page-interview-section {
		padding: 56px 16px;
	}

	.front-page-interview-heading {
		margin-bottom: 28px;
		text-align: left;
	}

	.front-page-interview-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.front-page-interview-card__content {
		padding: 20px 18px 22px;
	}

	.front-page-interview-card__title {
		font-size: 17px;
	}

	.front-page-interview-button-area {
		margin-top: 36px;
	}

	.front-page-interview-button {
		width: 100%;
		min-width: 0;
	}
}
/* FV最新投稿4つ分のCSS  */


/************************************
** サイドバーのスタイル
************************************/
.sidebar {
  width: 376px;
  border: 1px solid transparent;
  padding: 19px;
  border-radius: var(--cocoon-basic-border-radius);
  background-color: var(--cocoon-white-color);
}
.sidebar h2,
.sidebar h3 {
  color: #fff;
  background: linear-gradient(100deg, #f22519, #ff5b19);
  padding: 12px;
  margin: 16px 0;
  border-radius: var(--cocoon-badge-border-radius);
}

/************************************
recaptcha用のcss
************************************/
.grecaptcha-badge { bottom: 20px; right: 20px; opacity: 0.6; }


/* ==========================================================
   フォーム用 カード型 html_class="cf7-a"
   ========================================================== */

/* .cf7-a {
  background: #fff; padding: 40px 40px 36px;
  border-top: 4px solid var(--cf7-main); border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 16px rgba(105, 38, 40, .08);
}
.cf7-a .cf7-row { margin-bottom: 26px; }
.cf7-a .cf7-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: .95rem; }
.cf7-a input[type="text"],
.cf7-a input[type="email"],
.cf7-a input[type="tel"],
.cf7-a select,
.cf7-a textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--cf7-text);
  background: var(--cf7-main-soft); border: 1px solid var(--cf7-border); border-radius: 4px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.cf7-a textarea { min-height: 180px; resize: vertical; }
.cf7-a input:focus,
.cf7-a select:focus,
.cf7-a textarea:focus {
  outline: none; background: #fff; border-color: var(--cf7-main);
  box-shadow: 0 0 0 3px rgba(105, 38, 40, .12);
}
.cf7-a ::placeholder { color: #B3A2A3; }
.cf7-a .cf7-accept { margin: 32px 0 28px; text-align: center; font-size: .92rem; }
.cf7-a .cf7-accept a { color: var(--cf7-main); }
.cf7-a .cf7-submit-area { text-align: center; }
.cf7-a .wpcf7-submit {
  min-width: 260px; padding: 16px 32px; font-size: 1rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--cf7-main); border: none; border-radius: 40px;
}
.cf7-a .wpcf7-submit:hover:not(:disabled) { background: var(--cf7-main-dark); } */



.wpcf7 {
	background-color: #fff;
	padding: 40px 40px 36px;
	border-top: 4px solid #692628;
    border-radius: 0 0 6px 6px;
	box-shadow: 0 2px 16px rgba(105, 38, 40, .08);
	max-width: 600px;
	margin: auto;
}


.wpcf7 p{
	margin-bottom: 16px;
}


/* ラベルのスタイル */
.wpcf7-form label {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333333; /* ダークグレー */
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
background-color: #692628; /* レッド */
color: white;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
/* インプットフィールドのスタイル */
.wpcf7-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc; /* ライトグレー */
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
background-color: #ffffff; /* 白 */
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
height: 150px;
resize: vertical;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
	background-color: #692628;
	cursor: pointer;
	transition: background-color 0.3s ease;
	border: none;
	min-width: 260px;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
    border-radius: 40px;
	margin-top: 24px;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: #fff;
	color: #692628;
	border: 2px solid #692628;
}

/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
color: red;
font-size: 14px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
color: green;
font-size: 16px;
margin-bottom: 20px;
}

/* 必須表示 */
.wpcf7 .must {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: .72rem; font-weight: 500; line-height: 1.6;
  color: #fff; background: #692628; border-radius: 3px; vertical-align: 2px;
}

/* 任意表示  */
.wpcf7 .free {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  font-size: .72rem;
  line-height: 1.6;
  color: #333;
  border: 1px solid #7b7b7b; border-radius: 3px; vertical-align: 2px;
}


/* チェックボックス・ラジオ */
.wpcf7-list-item { display: inline-block; margin: 0 20px 6px; }
.wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
  width: 18px; height: 18px; margin: 0; accent-color: #692628; cursor: pointer;
}

/* 各入力項目の色合い・幅など  */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: #2E2222;
  background: #F7F0EF; border: 1px solid #DCC9C8; border-radius: 4px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

/*  入力した後のサンクステキスト  */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #77cb94;
    background: #77cb94;
    color: #fff;
    border-radius: 50px;
    text-align: center;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
.future {
    height: 225px;
}
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

    main.main {
        padding: 16px;
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

}