/* ============================================================
   まにぃ@Canva図解デザイナー  スタイルシート
   色：ベージュ（生成り）× やさしい緑
   ============================================================ */

:root{
  --cream:      #FBF7EF;
  --cream-2:    #F5EEE1;
  --cream-3:    #EFE6D4;
  --white:      #FFFFFF;

  --ink:        #33312B;
  --ink-soft:   #6E695E;
  --ink-faint:  #A69F91;

  --green:      #7D9B6A;
  --green-dark: #4E6B3F;
  --green-pale: #E6EEDC;
  --green-mist: #F1F6EA;

  --pink:       #E9AFA6;
  --pink-pale:  #FAE7E3;
  --yellow:     #F1CE79;
  --yellow-pale:#FCF2DA;

  --radius-l: 32px;
  --radius-m: 22px;
  --radius-s: 14px;

  --shadow-s: 0 4px 14px rgba(90,76,50,.06);
  --shadow-m: 0 12px 36px rgba(90,76,50,.09);
  --shadow-l: 0 26px 60px rgba(90,76,50,.14);

  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --pad-sec: clamp(76px, 9vw, 132px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:2;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-head); line-height:1.5; margin:0; letter-spacing:.01em; }
p{ margin:0; }
ul,dl,dd{ margin:0; padding:0; list-style:none; }

.wrap{
  width:min(1120px, 100% - 44px);
  margin-inline:auto;
}

.sp-br{ display:none; }

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,239,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(125,155,106,.14);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:70px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:
    radial-gradient(circle at 32% 30%, var(--yellow) 0 26%, transparent 27%),
    linear-gradient(140deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:0 3px 10px rgba(82,112,64,.28);
}
.brand-name{
  font-family:var(--font-head); font-weight:700; font-size:17px;
  line-height:1.3; letter-spacing:.02em;
}
.brand-sub{
  display:block; font-size:10.5px; font-weight:500;
  color:var(--green-dark); letter-spacing:.08em;
}
.nav{ display:flex; align-items:center; gap:26px; font-size:14px; font-weight:500; }
.nav a{ color:var(--ink-soft); }
.nav a:hover{ color:var(--green-dark); }
.nav-cta{
  background:var(--green); color:var(--white) !important;
  padding:9px 20px; border-radius:999px; font-weight:700;
  box-shadow:0 5px 14px rgba(82,112,64,.26);
}
.nav-cta:hover{ background:var(--green-dark); }

/* ============================================================
   ファーストビュー
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(112px,13vw,168px);
  background:
    radial-gradient(1000px 620px at 82% 6%,  var(--green-mist) 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 78%,   var(--yellow-pale) 0%, transparent 60%),
    linear-gradient(168deg, #FDFBF6 0%, var(--cream-2) 58%, var(--cream-3) 100%);
}
.blob{ position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; }
.blob-a{
  width:min(430px,58vw); aspect-ratio:1; right:-9%; top:-13%;
  background:radial-gradient(circle at 34% 32%, rgba(230,238,220,.95), rgba(125,155,106,.30));
}
.blob-b{
  width:min(300px,44vw); aspect-ratio:1; left:-9%; top:34%;
  background:radial-gradient(circle at 40% 36%, rgba(250,231,227,.95), rgba(233,175,166,.28));
}
.blob-c{
  width:min(190px,30vw); aspect-ratio:1; right:16%; bottom:9%;
  background:radial-gradient(circle at 38% 34%, rgba(252,242,218,.98), rgba(241,206,121,.34));
}
.dots{
  position:absolute; left:4%; bottom:16%; width:150px; height:110px; opacity:.5;
  background-image:radial-gradient(rgba(125,155,106,.55) 1.7px, transparent 1.8px);
  background-size:15px 15px;
}

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.14fr .86fr;
  gap:clamp(28px,5vw,64px); align-items:center;
}
.hero-badge{
  display:inline-block; margin-bottom:24px;
  background:var(--white); color:var(--green-dark);
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  padding:8px 20px; border-radius:999px;
  box-shadow:var(--shadow-s); border:1px solid rgba(125,155,106,.2);
}
.hero-title{
  font-size:clamp(30px, 4.5vw, 53px);
  font-weight:900; line-height:1.42; margin-bottom:26px;
}
.hero-title .line{ display:block; white-space:nowrap; }
.hero-title em{
  font-style:normal; position:relative; color:var(--green-dark);
  padding:0 .06em;
}
.hero-title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:.34em;
  background:linear-gradient(90deg, rgba(241,206,121,.72), rgba(233,175,166,.6));
  border-radius:999px; z-index:-1;
}
.hero-lead{
  font-size:clamp(14.5px,1.5vw,16px); color:var(--ink-soft);
  line-height:2.15; margin-bottom:34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.btn{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:15.5px; padding:16px 36px; border-radius:999px; text-align:center;
}
.btn-primary{
  background:linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color:var(--white); box-shadow:0 12px 26px rgba(82,112,64,.3);
}
.btn-primary:hover{ box-shadow:0 8px 18px rgba(82,112,64,.36); }
.btn-ghost{
  background:var(--white); color:var(--green-dark);
  border:1.5px solid rgba(125,155,106,.4); box-shadow:var(--shadow-s);
}
.btn-ghost:hover{ border-color:var(--green); }

/* ヒーローの画像まわり */
.hero-visual{ display:flex; justify-content:center; }
.visual-stack{ position:relative; width:min(380px,100%); aspect-ratio:1/1.06; }
.peek{
  position:absolute; width:53%; border-radius:18px;
  box-shadow:var(--shadow-l); border:5px solid var(--white);
  object-fit:cover; object-position:top center; aspect-ratio:3/4;
}
.peek-back{ top:2%;  left:0;   transform:rotate(-7deg); }
.peek-front{ bottom:0; right:0; transform:rotate(6deg); }
.avatar-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60%; aspect-ratio:1; border-radius:50%;
  padding:9px; background:var(--white);
  box-shadow:0 20px 46px rgba(90,76,50,.2);
}
.avatar{ width:100%; height:100%; border-radius:50%; object-fit:cover; }

.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.hero-wave svg{ width:100%; height:clamp(48px,6vw,90px); display:block; }

/* ============================================================
   セクション共通
   ============================================================ */
.section{ padding:var(--pad-sec) 0; }
.sec-label{
  font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:.24em; color:var(--green); margin-bottom:14px;
  display:flex; align-items:center; gap:12px;
}
.sec-label::after{
  content:""; flex:none; width:38px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--green), transparent);
}
.sec-label.light{ color:rgba(255,255,255,.85); justify-content:center; }
.sec-label.light::after{ background:linear-gradient(90deg, rgba(255,255,255,.7), transparent); }
.sec-title{
  font-size:clamp(26px,3.4vw,40px); font-weight:900; margin-bottom:18px;
}
.sec-lead{ color:var(--ink-soft); font-size:15px; margin-bottom:8px; }

/* ============================================================
   こんな方へ
   ============================================================ */
.section-target{ background:var(--cream); }
.target-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:18px; margin-top:44px;
}
.target-list li{
  position:relative; display:flex; gap:18px; align-items:flex-start;
  background:var(--white); border-radius:var(--radius-m);
  padding:28px 30px; box-shadow:var(--shadow-s);
  border:1px solid rgba(125,155,106,.13);
}
.target-num{
  font-family:var(--font-head); font-weight:900; font-size:20px;
  color:var(--green); opacity:.55; line-height:1.7; flex:none;
}
.target-list p{ font-size:15px; line-height:1.95; }
.target-list b{
  font-weight:700; color:var(--ink);
  background:linear-gradient(transparent 62%, rgba(241,206,121,.5) 62%);
}

/* ============================================================
   できること
   ============================================================ */
.section-services{
  background:linear-gradient(180deg, var(--cream) 0%, var(--green-mist) 100%);
}
.cards{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:26px; margin-top:46px;
}
.card{
  position:relative; background:var(--white);
  border-radius:var(--radius-l); padding:46px 40px 44px;
  box-shadow:var(--shadow-m); border:1px solid rgba(125,155,106,.14);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; right:-42px; top:-42px;
  width:150px; height:150px; border-radius:50%;
  background:linear-gradient(140deg, var(--green-pale), rgba(241,206,121,.34));
}
.card-icon{
  position:relative; width:60px; height:60px; border-radius:19px;
  display:grid; place-items:center; color:var(--white);
  background:linear-gradient(140deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:0 10px 22px rgba(82,112,64,.3); margin-bottom:22px;
}
.card-icon svg{ width:30px; height:30px; }
.card-no{
  font-family:var(--font-head); font-weight:900; font-size:12px;
  letter-spacing:.18em; color:var(--green); margin-bottom:6px;
}
.card-title{ font-size:22px; font-weight:700; margin-bottom:16px; }
.card-body{
  font-size:15px; color:var(--ink-soft); line-height:2.05;
}
.card-body + .card-body{ margin-top:14px; }

/* ============================================================
   作品ギャラリー
   ============================================================ */
.section-works{ background:var(--green-mist); }
.gallery{
  margin-top:44px;
  column-count:3; column-gap:24px;
}
.shot{
  break-inside:avoid; margin:0 0 24px;
  background:var(--white); border-radius:var(--radius-m);
  padding:12px 12px 6px; box-shadow:var(--shadow-m);
  border:1px solid rgba(125,155,106,.14);
}
.shot img{ border-radius:14px; width:100%; }
.shot figcaption{
  font-family:var(--font-head); font-weight:700; font-size:13.5px;
  line-height:1.6; padding:14px 8px 14px; color:var(--ink);
}
.shot figcaption span{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:12px; color:var(--ink-faint); margin-top:3px;
}

/* ============================================================
   私について
   ============================================================ */
.section-about{
  background:linear-gradient(180deg, var(--green-mist) 0%, var(--cream) 46%);
}
.about-inner{
  display:grid; grid-template-columns:330px 1fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.about-photo{ text-align:center; }
.about-frame{
  position:relative; width:min(270px,74%); margin-inline:auto;
  border-radius:50%; padding:12px; background:var(--white);
  box-shadow:var(--shadow-l);
}
.about-frame::before{
  content:""; position:absolute; inset:-16px; border-radius:50%;
  border:2px dashed rgba(125,155,106,.38);
}
.about-frame img{ border-radius:50%; aspect-ratio:1; object-fit:cover; }
.about-name{
  font-family:var(--font-head); font-weight:700; font-size:19px;
  margin-top:26px; line-height:1.5;
}
.about-name span{
  display:block; font-size:12px; font-weight:500;
  color:var(--green-dark); letter-spacing:.06em;
}
.about-text p{ font-size:15.5px; color:var(--ink-soft); margin-top:18px; }
.about-text b{ color:var(--ink); font-weight:700; }
.about-turn{
  position:relative; padding-left:22px;
  border-left:3px solid var(--pink); color:var(--ink) !important;
  font-family:var(--font-head); font-weight:700;
}

/* ============================================================
   大事にしていること
   ============================================================ */
.section-values{ background:var(--cream); }
.values{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:26px; margin-top:46px;
}
.value{
  position:relative; background:
    linear-gradient(150deg, var(--white) 0%, #FDFBF6 100%);
  border-radius:var(--radius-l); padding:44px 38px 40px;
  box-shadow:var(--shadow-s); border:1px solid rgba(125,155,106,.16);
}
.value-no{
  font-family:var(--font-head); font-weight:900; font-size:52px;
  line-height:1; color:var(--green-pale); margin-bottom:8px;
}
.value h3{
  font-size:20px; font-weight:700; margin-bottom:14px; color:var(--green-dark);
}
.value p{ font-size:15px; color:var(--ink-soft); line-height:2.05; }

/* ============================================================
   稼働について
   ============================================================ */
.section-hours{ background:var(--cream); padding-top:0; }
.hours-box{
  margin-top:40px; background:var(--white);
  border-radius:var(--radius-l); padding:clamp(32px,4vw,52px);
  box-shadow:var(--shadow-m); border:1px solid rgba(125,155,106,.14);
}
.hours-head{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(17px,2.1vw,22px); margin-bottom:26px; color:var(--green-dark);
}
.hours-list{ display:grid; gap:2px; }
.hours-list > div{
  display:grid; grid-template-columns:130px 1fr;
  gap:16px; align-items:baseline;
  padding:18px 4px; border-top:1px dashed rgba(125,155,106,.3);
}
.hours-list > div:last-child{ border-bottom:1px dashed rgba(125,155,106,.3); }
.hours-list dt{
  font-family:var(--font-head); font-weight:700; font-size:14px;
  color:var(--white); background:var(--green);
  border-radius:999px; text-align:center; padding:5px 0;
}
.hours-list dd{ font-size:15.5px; color:var(--ink-soft); }

/* ============================================================
   お問い合わせ
   ============================================================ */
.section-contact{ background:var(--cream); padding-bottom:clamp(90px,10vw,130px); }
.contact-box{
  position:relative; overflow:hidden; text-align:center;
  border-radius:var(--radius-l); padding:clamp(50px,7vw,84px) clamp(24px,5vw,64px);
  background:
    radial-gradient(620px 380px at 84% 8%, rgba(241,206,121,.28) 0%, transparent 60%),
    radial-gradient(520px 340px at 8% 92%, rgba(233,175,166,.26) 0%, transparent 58%),
    linear-gradient(140deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow:var(--shadow-l);
}
.blob-d{
  width:260px; height:260px; left:-70px; bottom:-90px;
  background:radial-gradient(circle at 40% 36%, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.contact-title{
  position:relative; color:var(--white); font-size:clamp(25px,3.4vw,38px);
  font-weight:900; margin-bottom:20px;
}
.contact-lead{
  position:relative; color:rgba(255,255,255,.9); font-size:15px;
  line-height:2.05; margin-bottom:36px;
}
.btn-contact{
  position:relative; background:var(--white); color:var(--green-dark);
  padding:18px 52px; box-shadow:0 14px 30px rgba(40,60,30,.26);
}
.btn-contact:hover{ background:var(--cream); }
.contact-note{
  position:relative; margin-top:20px; font-size:12.5px;
  color:rgba(255,255,255,.78);
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  background:var(--cream-3); padding:44px 0;
  text-align:center; border-top:1px solid rgba(125,155,106,.18);
}
.foot-brand{
  font-family:var(--font-head); font-weight:700; font-size:15px;
  color:var(--ink); margin-bottom:6px;
}
.foot-copy{ font-size:12px; color:var(--ink-faint); letter-spacing:.06em; }

/* ============================================================
   タブレット
   ============================================================ */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-badge{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .sec-label{ justify-content:flex-start; }
  .hero-visual{ order:-1; margin-bottom:26px; }
  .visual-stack{ width:min(320px,86%); }
  .gallery{ column-count:2; }
  .about-inner{ grid-template-columns:1fr; }
  .about-photo{ margin-bottom:14px; }
  .cards, .values, .target-list{ grid-template-columns:1fr; }
}

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width:620px){
  body{ font-size:15px; }
  .wrap{ width:min(560px, 100% - 34px); }
  .sp-br{ display:block; }

  .nav{ gap:0; }
  .nav a:not(.nav-cta){ display:none; }
  .nav-cta{ padding:8px 17px; font-size:13px; }
  .brand-name{ font-size:15px; }

  .hero{ padding-bottom:clamp(96px,20vw,130px); }
  .hero-title{ font-size:clamp(28px,8.2vw,40px); line-height:1.42; }
  .hero-lead{ line-height:2.05; }
  .btn{ font-size:15px; padding:15px 30px; }
  .hero-actions{ gap:11px; }
  .hero-actions .btn{ flex:1 1 auto; }

  .target-list li{ padding:22px 22px; gap:14px; }
  .card{ padding:36px 26px 34px; }
  .card-title{ font-size:20px; }
  .value{ padding:34px 26px 32px; }

  .gallery{ column-count:1; }
  .shot{ margin-bottom:20px; }

  .hours-list > div{ grid-template-columns:96px 1fr; gap:12px; padding:16px 2px; }
  .hours-list dt{ font-size:13px; }
  .hours-list dd{ font-size:14.5px; }

  .about-frame{ width:min(220px,64%); }
  .btn-contact{ width:100%; padding:17px 20px; }
}