@charset "UTF-8";
/* ============================================================
   株式会社県大文化通信 モックアップ 共通スタイルシート
   1.html / 2.html / 3.html / 4.html から相対参照して使用する。

   ページ固有のスタイルは body のクラスで切り分ける:
     .page-home  = 1.html   .page-about   = 2.html
     .page-service = 3.html .page-contact = 4.html
     .is-sub     = 下層ページ共通（背景を #fcfafa にする）
   ============================================================ */

:root{
  --red:#d6101a;
  --red-deep:#970808;
  --yellow:#fff334;
  --ink:#333;
  --text:#333;
  --muted:#555;
  --line:#e2e0e0;
  --bg:#fff;
  --bg-soft:#fcfafa;
  --col:1195px;
  --pad:24px;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --en:"Poppins","Century Gothic","Futura","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--jp);
  font-size:18px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- layout helpers ---------- */
.wrap,.col{width:min(var(--col),calc(100% - var(--pad)*2));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  height:88px;background:var(--bg);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:100%;padding:0 37px 0 72px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:50px;height:50px;flex:none}
.brand span{font-size:18px;font-weight:700;letter-spacing:.02em;line-height:1.4}
.gnav ul{display:flex;align-items:center}
.gnav li{margin-right:16px}
.gnav li:last-child{margin-right:0}
.gnav a{
  position:relative;display:block;padding:15px;
  font-size:18px;font-weight:500;line-height:1.4;text-decoration:none;color:#000;
}
.gnav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:8px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1)}
.navbtn{
  display:none;width:48px;height:48px;padding:0;
  background:none;border:0;cursor:pointer;
}
.navbtn span{display:block;width:24px;height:2px;margin:6px auto;background:var(--ink);transition:transform .25s,opacity .2s}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- shared section pieces ---------- */
body.is-sub{background:var(--bg-soft)}
.is-sub .site-header,.is-sub .site-footer{background:var(--bg-soft)}

.sec{padding:98px 0 67px}
.sec--soft{background:var(--bg-soft)}
.sec-head__en{
  font-family:var(--en);font-size:84px;font-weight:600;line-height:1;
  letter-spacing:.05em;color:var(--ink);
}
.sec-head__ja{
  display:flex;align-items:center;gap:12px;
  font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.05em;color:var(--ink);
}
.sec-head__ja::before{content:"";width:20px;height:3px;background:var(--ink);flex:none}
.sec-lead{margin:61px 0 20px;font-size:36px;font-weight:700;line-height:1.4;color:var(--ink)}
.sec-note{font-size:18px;font-weight:400;line-height:1.7;color:var(--ink)}

.h-jp{
  text-align:center;font-size:47px;font-weight:700;
  letter-spacing:.1em;text-indent:.1em;line-height:1.4;color:var(--ink);
}
.h-jp--wide{letter-spacing:.24em;text-indent:.24em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:260px;height:60px;
  font-size:18px;font-weight:400;line-height:1.4;text-align:center;text-decoration:none;
  color:#fff;background:#000;border:1px solid #000;
  transition:background .2s,color .2s;
}
.btn:hover{background:#fff;color:#000}
.btn-row{margin-top:40px;text-align:center}

/* ---------- page hero (lower pages) ---------- */
.page-hero{position:relative;height:333px;overflow:hidden;background:#333}
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.page-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.page-hero h1{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  margin:0;font-size:44px;font-weight:700;letter-spacing:.05em;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.breadcrumb{
  width:min(var(--col),calc(100% - var(--pad)*2));margin:12px auto 0;
  font-size:15px;letter-spacing:.02em;color:var(--muted);text-align:right;
}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ---------- forms ---------- */
.field{margin-bottom:32px}
.field > label,.field__label{display:block;font-size:18px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.req{color:var(--red)}
.badge{
  display:inline-block;margin-left:10px;padding:2px 13px;
  font-size:14px;font-weight:400;letter-spacing:.06em;
  color:#fff;background:var(--muted);border-radius:999px;vertical-align:3px;
}
.field__help{font-size:16px;line-height:1.7;color:var(--muted)}
.field input,.field textarea{
  display:block;width:100%;margin-top:10px;padding:10px 16px;
  font-size:17px;line-height:1.6;background:#fff;
}
.field textarea{resize:vertical}
.check{display:flex;align-items:center;gap:12px;font-size:17px}
.check input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--ink)}
.form-msg{
  margin-top:20px;padding:14px 18px;
  font-size:16px;background:#f2f7f2;border-left:3px solid #3f7d3f;color:#2c5b2c;
}
.form-msg[hidden]{display:none}

/* ---------- footer ---------- */
.site-footer{padding:90px 0 96px;background:var(--bg)}
.site-footer__inner{
  width:min(var(--col),calc(100% - var(--pad)*2));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.f-name{font-size:28px;font-weight:700;line-height:1.35;color:var(--ink)}
.f-meta{margin-top:8px;font-size:18px;line-height:1.7}
.f-rule{width:20px;height:1px;margin:18px 0 20px;background:#9a9a9a}
.f-sns{display:flex;gap:18px}
.f-sns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--ink);transition:opacity .2s;
}
.f-sns a:hover{opacity:.6}
.f-sns svg{width:28px;height:28px;fill:currentColor}
.f-nav li + li{margin-top:20px}
.f-nav a{display:inline-block;padding:5px;font-size:18px;font-weight:400;line-height:1.4;text-decoration:none;color:#000}
.f-nav a:hover{text-decoration:underline}

/* ---------- responsive (live breakpoints: 1140 / 840 / 540) ---------- */
@media (max-width:1140px){
  .sec-head__en{font-size:64px}
  .sec-lead{margin-top:48px;font-size:30px}
  .h-jp{font-size:36px}
  .sec{padding:76px 0 46px}
  .site-header__inner{padding:0 32px}
}
@media (max-width:840px){
  .site-header{height:72px}
  .site-header__inner{padding:0 20px}
  .brand img{width:40px;height:40px}
  .brand span{font-size:15px}
  .navbtn{display:block;margin-right:-12px}
  .gnav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    display:none;
  }
  .gnav.is-open{display:block}
  .gnav ul{flex-direction:column;align-items:stretch}
  .gnav li{margin-right:0}
  .gnav li + li{border-top:1px solid var(--line)}
  .gnav a{padding:16px 20px;font-size:16px}
  .gnav a::after{display:none}
  .gnav a[aria-current="page"]{color:var(--red)}
  .sec{padding:56px 0 36px}
  .sec-head__en{font-size:48px}
  .sec-lead{margin-top:34px;font-size:22px}
  .sec-head__ja{font-size:17px}
  .h-jp{font-size:28px;letter-spacing:.16em;text-indent:.16em}
  .h-jp--wide{letter-spacing:.16em;text-indent:.16em}
  .page-hero{height:220px}
  .page-hero h1{font-size:28px}
  .site-footer{padding:60px 0 64px}
  .f-name{font-size:22px}
  .site-footer__inner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:540px){
  body{font-size:14px;line-height:1.8}
  .sec{padding:44px 0 28px}
  .sec-head__en{font-size:40px}
  .sec-head__ja{font-size:16px}
  .sec-lead{margin:26px 0 16px;font-size:16px}
  .sec-note{font-size:14px}
  .h-jp{font-size:22px}
  .btn{width:100%;max-width:260px;height:52px;font-size:14px}
  .btn-row{margin-top:28px}
  .field > label,.field__label{font-size:16px}
  .field__help{font-size:13px}
  .field input,.field textarea{font-size:16px}
  .check{font-size:14px}
  .f-meta,.f-nav a{font-size:15px}
  .page-hero h1{font-size:24px}
}

/* ============================================================
   1.html 固有
   ============================================================ */

/* ---------- hero ---------- */
.hero{position:relative}
.hero__media{
  margin-left:16%;margin-right:20px;
  height:680px;overflow:hidden;
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero__catch{
  position:absolute;left:68px;bottom:124px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero__catch span{
  display:block;padding:5px 16px 8px 16px;
  background:var(--red);color:#fff;
  font-size:38px;font-weight:700;line-height:1.4;letter-spacing:.04em;
}
.hero__catch span:first-child{margin-bottom:12px}

/* ---------- picture cards ---------- */
.cards{display:grid;margin-top:79px}
.cards--2{grid-template-columns:repeat(2,1fr);gap:5px}
.cards--3{grid-template-columns:repeat(3,1fr);gap:5px}
.card{position:relative;display:block;height:350px;overflow:hidden;text-decoration:none;color:#fff}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
.card__body{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px;
}
.card__title{font-size:54px;font-weight:700;line-height:1.4;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.card__title--yellow{color:var(--yellow)}
.card__sub{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.card__sub::before{content:"";width:18px;height:2px;background:currentColor;flex:none}
.card__sub--yellow{color:var(--yellow)}
.cards--3 .card__title{font-size:40px}

/* ---------- contact form (home) ---------- */
.home-form{max-width:608px;margin:0 auto}
.home-form .field input,.home-form .field textarea{border:1px solid #000;border-radius:0}
.home-form .field input:focus,.home-form .field textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.home-form textarea{min-height:160px}
.home-form .check{margin:26px 0 28px}
.home-form button{
  padding:11px 32px;font-size:18px;font-weight:700;line-height:1.4;
  color:#fff;background:#000;border:1px solid #000;border-radius:4px;cursor:pointer;
  transition:background .2s,color .2s;
}
.home-form button:hover{background:#fff;color:#000}

@media (max-width:1140px){
  .hero__media{height:520px}
  .hero__catch{bottom:96px}
  .hero__catch span{font-size:30px}
  .cards{margin-top:56px}
  .card{height:280px}
  .card__title{font-size:40px}
  .cards--3 .card__title{font-size:30px}
}
@media (max-width:840px){
  .hero__media{margin-left:12%;margin-right:16px;height:400px}
  .hero__catch{left:20px;bottom:64px}
  .hero__catch span{font-size:22px;padding:4px 12px 6px}
  .hero__catch span:first-child{margin-bottom:8px}
  .cards{margin-top:40px}
  .card{height:220px}
  .card__title{font-size:30px}
  .cards--3 .card__title{font-size:24px}
  .card__sub{font-size:15px}
}
@media (max-width:540px){
  .hero__media{margin-left:0;margin-right:0;height:300px}
  .hero__catch{position:static;margin:14px auto 0;width:min(var(--col),calc(100% - var(--pad)*2))}
  .hero__catch span{font-size:18px}
  .cards--2,.cards--3{grid-template-columns:1fr}
  .card{height:190px}
  .card__title{font-size:18px}
  .cards--3 .card__title{font-size:18px}
  .card__sub{font-size:13px}
  .home-form textarea{min-height:130px}
  .home-form button{font-size:16px;padding:10px 26px}
}

/* ============================================================
   2.html 固有
   ============================================================ */

.mark{text-align:center;margin-bottom:34px}
.mark__en{font-family:var(--en);font-size:39px;font-weight:700;letter-spacing:.01em;line-height:1.3;color:var(--red-deep)}
.mark__ja{margin-top:4px;font-size:20px;font-weight:600;letter-spacing:.05em;color:var(--ink)}

.philosophy{padding:82px 0 76px}
.philosophy__catch{
  margin:0 auto;text-align:center;
  font-size:50px;font-weight:700;letter-spacing:.23em;
  text-indent:.23em;line-height:1.5;color:var(--ink);
}
.philosophy__text{
  width:100%;margin:32px auto 0;
  font-size:18px;line-height:2;text-align:center;
}

/* ---------- shop blocks ---------- */
.shops{padding-bottom:32px}
.shop{
  display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start;
  margin-top:68px;
}
.shop:first-child{margin-top:0}
.shop__media{position:relative;aspect-ratio:607/352;overflow:hidden}
.shop__media img{width:100%;height:100%;object-fit:cover}
.shop__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
.shop__label{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;
}
.shop__label b{font-size:46px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.shop__label small{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.shop__label small::before{content:"";width:18px;height:2px;background:currentColor;flex:none}
.shop__label--yellow{color:var(--yellow)}
.shop__info{font-size:18px;line-height:1.8;letter-spacing:.06em}
.shop__info p + p{margin-top:22px}
.shop__info a{text-decoration:none}
.shop__info a:hover{text-decoration:underline}

/* ---------- greeting ---------- */
.greet{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:start;margin-top:66px}
.greet__role{font-size:18px;font-weight:700;letter-spacing:.04em}
.greet__name{font-size:50px;font-weight:700;line-height:1.4;letter-spacing:.04em;color:var(--ink)}
.greet__text{margin-top:22px;font-size:18px;line-height:1.95}
.greet__photo{aspect-ratio:607/403;overflow:hidden}
.greet__photo img{width:100%;height:100%;object-fit:cover}

/* ---------- company table ---------- */
.company{width:min(878px,100%);margin:0 auto}
.company table{width:100%;border-collapse:collapse}
.company th,.company td{
  padding:18px 6px;font-size:18px;font-weight:400;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--line);letter-spacing:.04em;
}
.company th{width:36%;color:var(--ink)}
.company tr:first-child th,.company tr:first-child td{border-top:1px solid var(--line)}
.company a{text-decoration:none}
.company a:hover{text-decoration:underline}

@media (max-width:1140px){
  .mark__en{font-size:32px}
  .philosophy{padding:64px 0 58px}
  .philosophy__catch{font-size:38px}
  .greet__name{font-size:38px}
  .shop__label b{font-size:36px}
  .shop,.greet{margin-top:52px}
}
@media (max-width:840px){
  .mark__en{font-size:26px}
  .mark__ja{font-size:17px}
  .philosophy{padding:48px 0 40px}
  .philosophy__catch{font-size:28px;letter-spacing:.16em;text-indent:.16em}
  .philosophy__text{margin-top:22px;font-size:16px}
  .greet__name{font-size:30px}
  .greet__role,.greet__text,.shop__info{font-size:16px}
  .shop__label b{font-size:28px}
  .shop__label small{font-size:15px}
  .shop,.greet{grid-template-columns:1fr;gap:22px;margin-top:40px}
  .greet__photo{order:-1}
  .company th,.company td{padding:14px 4px;font-size:16px}
}
@media (max-width:540px){
  .mark__en{font-size:22px}
  .mark__ja{font-size:15px}
  .philosophy__catch{font-size:20px;letter-spacing:.1em;text-indent:.1em}
  .philosophy__text{font-size:14px}
  .greet__name{font-size:24px}
  .greet__role,.greet__text,.shop__info{font-size:14px}
  .shop__label b{font-size:20px}
  .shop__label small{font-size:12px}
  .company th,.company td{font-size:14px;padding:12px 2px}
}
@media (min-width:841px){
  .shop--rev .shop__media{order:2}
  .shop--rev .shop__info{order:1}
}

/* ============================================================
   3.html 固有
   ============================================================ */

.hr{width:100%;height:1px;background:#333;border:0;margin:0}

/* ---------- service rows ---------- */
.services{padding:70px 0 52px}
.svc{
  width:min(1740px,96%);margin:0 auto 96px;
  display:grid;grid-template-columns:49.4% 1fr;gap:0 32px;align-items:center;
}
.svc:last-child{margin-bottom:0}
.svc__media{aspect-ratio:4/3;overflow:hidden}
.svc__media img{width:100%;height:100%;object-fit:cover}
.svc__no{
  font-family:var(--en);font-size:21px;font-weight:600;letter-spacing:.04em;color:var(--red);
}
.svc__title{margin-top:10px;font-size:39px;font-weight:700;line-height:1.5;letter-spacing:.06em;color:var(--ink)}
.svc__text{margin-top:18px;font-size:18px;line-height:1.95}

/* ---------- works ---------- */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:76px 72px;margin-top:66px}
.work__media{aspect-ratio:3/2;overflow:hidden;margin-bottom:30px}
.work__media img{width:100%;height:100%;object-fit:cover}
.work h3{font-size:25px;font-weight:700;letter-spacing:.12em;line-height:1.5;color:var(--ink)}
.work p{margin-top:10px;font-size:18px;line-height:1.95}

/* ---------- web purchase ---------- */
.webbuy{padding:26px 0 120px}
.webbuy__title{
  text-align:center;font-size:55px;font-weight:800;
  line-height:1.4;letter-spacing:.02em;color:var(--ink);
}
.webbuy__body{width:min(981px,100%);margin:76px auto 0}
.webbuy__body h3{font-size:28px;font-weight:700;letter-spacing:.1em;line-height:1.5;color:var(--ink)}
.webbuy__body p{margin-top:12px;font-size:18px;line-height:1.95}
.webbuy__body em{font-style:normal;color:var(--red)}

@media (max-width:1140px){
  .svc__title{font-size:30px}
  .webbuy__title{font-size:40px}
  .webbuy__body{margin-top:52px}
  .work h3{font-size:21px}
}
@media (max-width:840px){
  .services{padding:48px 0 24px}
  .svc{grid-template-columns:1fr;gap:22px;margin-bottom:56px}
  .svc__no{font-size:17px}
  .svc__title{font-size:24px}
  .svc__text,.work p,.webbuy__body p{font-size:16px}
  .works{grid-template-columns:1fr;gap:48px;margin-top:40px}
  .work__media{margin-bottom:20px}
  .work h3{font-size:19px}
  .webbuy{padding:0 0 72px}
  .webbuy__title{font-size:28px}
  .webbuy__body{margin-top:36px}
  .webbuy__body h3{font-size:21px}
}
@media (max-width:540px){
  .svc__no{font-size:15px}
  .svc__title{font-size:20px}
  .svc__text,.work p,.webbuy__body p{font-size:14px}
  .work h3{font-size:16px}
  .webbuy__title{font-size:22px}
  .webbuy__body h3{font-size:17px}
}

/* ============================================================
   4.html 固有
   ============================================================ */

.contact{padding:70px 0 120px}
.contact__intro{font-size:18px;line-height:1.95}
.contact-form{margin-top:34px}
.contact-form .field{margin-bottom:38px}
.contact-form .field input,.contact-form .field textarea{
  border:1px solid #cfcdcd;border-radius:2px;background:#fff;
}
.contact-form .field input:focus,.contact-form .field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(0,0,0,.08);
}
.contact-form textarea{min-height:250px}
.contact-form .check{margin:32px 0 26px}
.contact-form button{
  min-width:98px;padding:10px 30px;
  font-size:18px;font-weight:400;line-height:1.6;letter-spacing:.06em;
  color:var(--ink);background:#fff;border:1px solid #b9b7b7;border-radius:2px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.contact-form button:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.form-inner{width:min(728px,100%);margin:0 auto}

@media (max-width:840px){
  .contact{padding:48px 0 80px}
  .contact__intro{font-size:16px}
  .contact-form textarea{min-height:190px}
}
@media (max-width:540px){
  .contact{padding:36px 0 60px}
  .contact__intro{font-size:14px}
  .contact-form .field{margin-bottom:28px}
  .contact-form textarea{min-height:150px}
  .contact-form button{font-size:16px;padding:9px 24px}
}