/*!
Theme Name: miyaworks-child
Template: miyaworks
Author: miya
Description: Description
Version: 1.0.0
*/

/* =========================
   表示切替
========================= */
@media (min-width: 960px){
  /* PC / タブレット */
  .sp{display:none!important;}
  .br-sp{display:none;}
}
@media (max-width: 959px){
  /* スマホ */
  .pc{display:none!important;}
  .br-pc{display:none;}
}

/* =========================
   ベース（フォント/タイポ）
========================= */
:root{
  --text:#3c3a3a;
  --container:900px;
  --ptag:18px;
  --sp-ptag:16px;
  --cta-green:#00a282;
  --cta-orange:#ff8c00;
  --header-opacity:.85;
}

html, body{
  /* 高さ固定は副作用が出やすいので min-height に */
  min-height: 100%;
  overflow-x: hidden;
  font-family: "Yu Gothic","游ゴシック","YuGothic",sans-serif;
  color: var(--text);
  line-height: 1.7;
  font-size: var(--ptag); /* 基準 */
}

.entry-header,.entry-footer{display:none;}
.center{text-align:center;}

/* 段落 */
p{margin:0;}

/* タイトル：h2以外は24px */
h1,h3,h4,h5,h6{
  font-size:24px;
  line-height:1.5;
}
.display-none {
  display: none;
}

/* 会社概要用（ラッパーに .company-section を付与） */
.company-section h2,
.company-section h3{font-size:24px;margin-bottom:.6em;}
.company-section p,
.company-section li,
.company-section dd{font-size:16px;line-height:1.8;}

@media (max-width: 520px){
	p {
		font-size: 16px;
	}
}

/* =========================
   Header
========================= */
.site-header{
  position: sticky; top:0; z-index:50;
  background: url("https://shutter.miya-works.co.jp/wp-content/uploads/2025/10/アセット-2@2x.png") center/cover no-repeat;
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

.header-inner{
  max-width: 1000px;
  margin: 0 auto;
	padding: 34px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

/* Brand */
.brand{
  display:grid; grid-auto-flow:row; align-items:center; gap:0;
  text-decoration:none; color:var(--text);
}
.brand__logo{display:block; height:48px; width:auto;}
.brand__tagline{font-size:15px; line-height:1.4; margin:0; white-space:nowrap;}

/* Tel CTAs（tel: のリンクはHTML側で） */
.header-ctas{display:grid; grid-auto-flow:row; gap:14px;}
.cta{
  display:grid; grid-auto-flow:column; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px; font-weight:700; text-decoration:none; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
  line-height:1;
}
.cta__label{opacity:.92; font-size:14px;}
.cta__num{font-feature-settings:"tnum"; letter-spacing:.5px; font-size:16px;}
.cta--green{background:var(--cta-green);}
.cta--orange{background:var(--cta-orange);}
.cta:hover,.cta:focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  outline:none;
}

/* Responsive（960基準） */
@media (max-width: 959px){
  .header-inner{grid-template-columns:1fr; gap:10px;}
  .brand{grid-auto-flow:row; justify-items:start;}
  .brand__logo{height:42px;}
  .brand__tagline{white-space:normal; font-size: 13px;}
  .header-ctas{grid-auto-flow:row;}
  .cta{justify-content:center; padding:14px 18px;}
}
@media (max-width: 520px){
  .cta__num{font-size:18px;}
  .cta__label{font-size:13px;}
}

/* =========================
   TOP①
========================= */
.kv {
  position: relative;
  background: var(--kv-bg) center/cover no-repeat;

  /* 比率はpadding-topで制御 */
  --kv-ratio: 35.3%; /* PC：706 ÷ 1998 ≒ 35.3% */

  display: grid;
  place-items: center;
  overflow: hidden; /* はみ出し防止 */
}

/* ダミー要素で高さを確保（比率維持） */
.kv::before {
  content: "";
  display: block;
  padding-top: var(--kv-ratio);
}

/* オーバーレイ画像 */
.kv__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央固定 */
  display: block;
  width: min(900px, 55%);
  height: auto;
  z-index: 1;
}

/* タブレット〜スマホ */
@media (max-width: 959px) {
  .kv {
    --kv-ratio: 52.8%; /* 506 ÷ 959 ≒ 52.8% */
  }
  .kv__overlay {
    width: min(640px, 70%);
  }
}

/* スマホ（小型） */
@media (max-width: 520px) {
  .kv {
    --kv-ratio: 72.7%;
  }
  .kv__overlay {
    width: 88%;
  }
}

/* =========================
   TOP②
========================= */
:root{
  /* グラデーション変更：左#006fff → 右#1792ff */
  --blue-start:#006fff;
  --blue-end:#1792ff;
  --card-radius: 28px;
  --photo-radius: 28px;
  --dash: 2px dashed rgba(0,0,0,.24);
}

/* セクションの青背景（グラデ不要なら単色にしてOK） */
.one-stop{
  background: linear-gradient(90deg, var(--blue-start), var(--blue-end));
  color: var(--text);
  padding: 60px 20px 70px;
}
.one-stop__inner{
  max-width: var(--container);
  margin: 0 auto;
}
.one-stop__list .accent {
  color: #002480;
}
/* 見出し画像（中央寄せ） */
.one-stop__title{
  margin: 0;
  text-align: center;
}
.one-stop__title img{
  display: inline-block;
  width: min(480px, 92vw);
  height: auto;
	margin-bottom: 70px;
}

/* 2カラム */
.one-stop__grid{
  display: grid;
  grid-template-columns: 1fr 326px;
  align-items: center;
  gap: 24px;
}

/* 左カード */
.one-stop__card{
  background: #fff;
  border-radius: var(--card-radius);
  padding: 16px 32px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* 破線リスト */
.one-stop__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.one-stop__list li{
  font-size: var(--ptag);
  font-weight: 700;
  padding: 15px 0;
  position: relative;
}
.one-stop__list li + li{
  border-top: var(--dash);
}

/* 右写真 */
.one-stop__photo{
  margin: 0;
  border-radius: var(--photo-radius);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.one-stop__photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* 下部の白帯 */
.one-stop__note{
  background: #fff;
  padding: 16px 22px;
  margin: 38px auto 0;
  text-align: center;
  font-size: var(--ptag);
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0,0,0,.1);
  max-width: 980px;
	color: #0024c8;
}

@media (max-width: 959px){
  .one-stop{
    padding: 40px 16px 48px;
  }
  .one-stop__title img{
    width: min(380px, 94vw);
	  margin-bottom: 30px;
  }
  .one-stop__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .one-stop__photo{
    order: 2; /* 画像を下に */
  }
  .one-stop__card{
    order: 1;
    padding: 22px 20px;
  }
  .one-stop__list li{
    font-size: var(--sp-ptag);
    padding: 14px 0;
  }
  .one-stop__note{
    font-size: 15px;
    padding: 14px 16px;
    margin-top: 20px;
  }
}
/* スマホ（小型） */
@media (max-width: 520px) {
  .one-stop__title img{
    width: min(240px, 94vw);
	  margin-bottom: 20px;
  }
}
/* =========================
   TOP③
========================= */
/* ========= tokens ========= */
:root{
  --blue:#0066ff;          /* 数字・見出しの青 */
  --cream:#ffff8f;         /* 背景の淡い黄色 */
  --card-bg:#fff;
  --card-radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.10);
}

/* ========= section ========= */
.reasons{
  background: var(--cream);
  padding: 70px 20px 70px;
  color: var(--text);
}
.reasons__inner{
  max-width: var(--container);
  margin: 0 auto;
}

/* 見出し画像 */
.reasons__title{
  margin: 0 0 24px;
  text-align: center;
}
.reasons__title img{
  width: min(280px, 92vw);
  height: auto;
  display: inline-block;
	margin-bottom: 50px;
}

/* 3カラム */
.reasons__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}

/* 数字（1・2・3） */
.reason{
  position: relative;
  padding-top: 6px; /* 数字の余白微調整 */
}
.reason__num{
  position: absolute;
  left: -9px;
  top: -17px;
  font-size: 68px;
  font-weight: bold;
  color: var(--blue);
  line-height: 1;
  text-shadow:
    0 2px 0 #fff,         /* 白縁 */
    0 6px 16px rgba(0,0,0,.10); /* 軽い影 */
}
.reason__num::after {
  content: "・";
  margin-left: -10px;
  font-size: .7em;
  position: relative;
  top: 0.25em; /* ← 数値を増やすと下がる（例：0.2em〜0.35em） */
}

/* カード本体 */
.reason__card{
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 28px 0px 0px;
  text-align: center;
  min-height: 100%; /* 高さ揃え */
}

/* カード内見出し */
.reason__lead{
  font-size: 24px;
  font-weight: 800;
  color: #0024c8;
  line-height: 1.6;
  margin: 6px 0 14px;
}

/* 図版 */
.reason__fig{
  margin: 6px auto 0;
}
.reason__fig img{
  width: min(300px, 90%);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* ========= responsive (<=959px) ========= */
@media (max-width: 959px){
  .reasons{
    padding: 40px 16px 56px;
  }
  .reasons__title img{
    width: min(260px, 94vw);
	  margin-bottom: 20px;
  }
  .reasons__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .reason{ padding-top: 0; }
  .reason__num{
    position: static;
    text-align: left;
    margin: 0 0 6px 4px;
    font-size: 48px;
    text-shadow: none;
  }
  .reason__card{
    padding: 22px 16px 14px;
  }
  .reason__lead{
    font-size: 19px;
    margin-bottom: 10px;
  }
}
/* スマホ（小型） */
@media (max-width: 520px) {
  .reasons__title img {
        width: min(160px, 94vw);
        margin-bottom: 0px;
    }
  }
}
/* =========================
   TOP④
========================= */
:root{
  --blue:#0b41d8;
  --bg-gray: #f0f0f0;
}

.service {
  position: relative; /* ← 擬似要素を中に固定するため必須 */
  color: var(--text);
  text-align: center;
  padding: 100px 20px 300px;
  overflow: hidden; /* 背景のはみ出し防止 */
}

/* 疑似要素で背景レイヤーを作る */
.service::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; と同義 */
  background: var(--service-bg) center / cover no-repeat;
  transform: scale(1.0); /* ← ここでズーム倍率を調整（例：1.1＝110%） */
  z-index: -1; /* 背景として背面に */
}
.service__inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* タイトル画像 */
.service__title img{
  width: min(370px, 90vw);
  height: auto;
  margin: 0 auto 16px;
}

/* リード文 */
.service__lead{
  font-size: var(--ptag);
  line-height: 1.9;
  margin-bottom: 60px;
}

/* 各段ブロック */
.service__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
	margin-bottom: 50px;
}
.service__row--bottom{
  justify-content: center;
}

/* 写真 */
.service__img{
  width: 470px;
  height: auto;
}
.service__img01 {
	margin-top: 19px;
}
.service__img02 {
	margin-top: -19px;
}
/* 白カード */
.service__card{
	background: #fff;
  border-radius: 10px;
  padding: 35px 30px 25px 58px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  max-width: 580px;
  text-align: left;
  clip-path: polygon(7% 0, 93% 0, 100% 29%, 93% 100%, 2% 100%, 0% 44%);
}
.service__card2{
	padding: 65px 45px;
}
.service__card3{
	max-width: var(--container);
	background: rgba(255, 255, 255, 0.7); /* ← 不透明度70% */
  padding: 40px 60px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  margin: 100px 0 0;
  text-align: left;
}
.service__hd{              /* 見出し本体を前面に */
  color: var(--blue);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;              /* ← これを追加 */
  display: inline-block;
  padding-bottom: 4px;
}

.service__line{            /* 下線用クラス */
  position: relative;
}
.service__line::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:120%;
  height:8px;
  background:#ffe145;
  border-radius:2px;
  z-index:0;               /* ← -1 をやめて 0 に */
}
.service__bottom{
	margin-bottom: 40px;
	line-height: 2;
} 
.service__card p{
  font-size: var(--ptag);
  line-height: 2;
  margin: 0 0 18px;
}
.service__card2 p{
	font-size: var(--ptag);
  line-height: 2;
  margin: 0 0 18px;
}
/* =====================
   Responsive (960px)
===================== */
@media (max-width: 959px){
	.service {
    padding: 70px 20px 100px;
	}
  .service__row{
    flex-direction: column;
  }
	.service__row2 {
		flex-direction: column-reverse;
		margin-top: 50px;
	}
  .service__img{
    width: 90%;
	  margin-bottom: -34px;
    z-index: 2;
    position: relative;
  }
  .service__card{
    max-width: 90%;
    text-align: left;
	  padding: 35px 30px;
  }
	.service__card p {
		font-size: var(--sp-ptag);
	}
  .service__hd{
    font-size: 19px;
  }
	.service__card3 {
    padding: 30px 30px;
    margin: 50px 0px 0;
	}
	.service__lead{
  font-size: var(--sp-ptag);
	}
	.service__bottom {
		font-size: var(--sp-ptag);
	}
}
/* スマホ（小型） */
@media (max-width: 520px) {
	.service {
    padding: 60px 20px 20px;
	}
	.service__title img {
    width: min(230px, 90vw);
	}
  }
/* =========================
   TOP⑤
========================= */
:root {
  --voice-blue: #0b41d8;
  --voice-bg: url('https://shutter.miya-works.co.jp/wp-content/uploads/2025/10/アセット-1@2x.png');
}

.voice {
  background: var(--voice-bg) center / cover no-repeat;
  text-align: center;
  padding: 100px 20px 120px;
  position: relative;
  z-index: 1;
}

.voice__inner {
 max-width: var(--container);
  margin: 0 auto;
}

/* タイトル画像 */
.voice__title img {
  width: min(370px, 90vw);
  height: auto;
  margin: 0 auto 70px;
}

/* 各吹き出し */
.voice__item {
  background: #fff;
  border-radius: 28px;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5);
  padding: 30px 40px;
  text-align: left;
  margin-bottom: 40px;
  position: relative;
}

/* 見出し帯 */
.voice__hd {
  background: var(--voice-blue);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
	margin-bottom: 20px;
}

/* 本文 */
.voice__item p {
  line-height: 2;
  color: #333;
  margin: 0;
}

/* レスポンシブ（960px以下） */
@media (max-width: 959px) {
  .voice {
    padding: 60px 16px 60px;
  }
  .voice__item {
    padding: 24px 20px;
  }
  .voice__hd {
    font-size: 15px;
    padding: 10px 12px;
  }
}
@media (max-width: 520px){
	.voice__title img {
		width: min(230px, 90vw);
		margin: 0 auto 30px;
	}
}
/* =========================
   TOP⑥
========================= */
:root{
  --flow-bg:#dfefff;
  --flow-card:#fff;
  --flow-text:#3c3a3a;
  --flow-shadow:0 10px 22px rgba(0,0,0,.12);
}

.flow{
  background: var(--flow-bg) center/cover no-repeat;
  padding: 100px 20px 100px;
  font-family:"Yu Gothic","游ゴシック","YuGothic",sans-serif;
  color: var(--flow-text);
  text-align: center;
}
.flow__inner{
  max-width: var(--container);
  margin: 0 auto;
}

/* タイトル画像 */
.flow__title{
  margin: 0 0 24px;
}
.flow__title img{
  display: inline-block;
  width: min(470px, 92vw);
  height: auto;
	margin-bottom: 60px;
}

/* 1カード（STEP） */
.flow__item{
  display: grid;
  grid-template-columns: 120px 1fr 160px; /* バッジ / 本文 / アイコン */
  align-items: center;
  gap: 24px;
  background: var(--flow-card);
  box-shadow: var(--flow-shadow);
  text-align: left;
  margin: 0 auto 28px;
	padding-right: 20px;
}
.flow__body {
	
	}
.flow__img {
	padding: 0 20% 0 20%;
}
.flow__number img{
	padding: 50% 30%;
}
.flow__number01 {
	background-color: #ff8600;
}
.flow__number02 {
	background-color: #83ad1e;
}
.flow__number03 {
	background-color: #00c2a7;
}
.flow__number04 {
	background-color: #008eb7;
}
.flow__number05 {
	background-color: #9368ec;
}
/* バッジ画像 */
.flow__badge{
  width: 100%;
  height: auto;
  display: block;
}

/* 本文 */
.flow__hd{
  font-weight: 800;
  margin: 0 0 6px;
}
.flow__text{
  line-height: 1.9;
  margin: 0;
}
/* サブタイトルカラー*/
.flow__hd01{
	color: #ff8600;
}
.flow__hd02{
	color: #83ad1e;
}
.flow__hd03{
	color: #00c2a7;
}
.flow__hd04{
	color: #008eb7;
}
.flow__hd05{
	color: #9368ec;
}
/* 右側の小アイコン */
.flow__icon{
  justify-self: end;
  width: 100%;
  height: auto;
}

/* 区切り（…の画像） */
.flow__sep{
  margin: 6px 0 22px;
}
.flow__sep img{
  display: block;
  margin: 0 auto;
  width: 8px;  /* 画像に合わせて調整 */
  height: auto;
  opacity: .7;
}

/* ===== Responsive (<=959px) ===== */
@media (max-width: 959px){
  .flow{ padding: 60px 16px 60px; }
  .flow__item{
    grid-template-columns: 84px 1fr 64px;
    gap: 14px;
  }
  .flow__icon{ width: 52px; }
	.flow__number img{
	padding: 100% 20%;
	}
}
@media (max-width: 520px){
  .flow__item{
    grid-template-columns: 72px 1fr;    /* アイコンを下へ回す */
	  align-items: center;
  }
  .flow__icon{
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
  }
	.flow__title img {
    width: min(250px, 92vw);
    margin-bottom: 20px;
	}
	.flow__hd {
    font-size: 19px;
	}
	.flow__number img {
        padding: 115% 30%;
    }
}
/* =========================
   TOP⑦
========================= */
/* ===== FAQ ===== */
:root{
  --faq-blue:#0039d8;    /* 青バー */
  --faq-blue-hover:#002fb6;
  --faq-text:#fff;
  --faq-body:#fff;
  --faq-q-radius:14px;
  --faq-shadow:0 10px 22px rgba(0,0,255,.08);
}

.faq{
  padding: 100px 20px 100px;
}
.faq__inner{
  max-width: var(--container);
  margin: 0 auto;
}
.faq__title {
    margin: 0 0 24px;
	text-align: center;
}
.faq__title img {
    display: inline-block;
    width: min(370px, 92vw);
    height: auto;
    margin-bottom: 60px;
}

/* 質問バー */
.faq-item{
  margin: 16px 0 36px;
}
.faq-q{
  list-style: none;
  background: var(--faq-blue);
  color: var(--faq-text);
  padding: 18px 56px 18px 24px;
  border-radius: var(--faq-q-radius);
  position: relative;
  cursor: pointer;
  box-shadow: var(--faq-shadow);
  font-weight: 700;
}
.faq-q:hover{ background: var(--faq-blue-hover); }

/* 先頭の「Q.」 */
.faq-q__label{
  display: inline-block;
  margin-right: .5em;
  opacity: .95;
}

/* 右端の＋／− アイコン（CSSのみ） */
.faq-q__plus::before{
  content:"+";
  position: absolute;
  right: 18px;
  top: 47%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: #fff;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 800;
}

/* 回答 */
.faq-a{
  background: var(--faq-body);
  padding: 18px 20px;
  border-radius: 0 0 var(--faq-q-radius) var(--faq-q-radius);
  margin: 8px 10px 0; /* 青バーの内側に少し余白 */
  line-height: 1.9;
  box-shadow: var(--faq-shadow);
}

/* details のデフォルト矢印を消す */
.faq-q::-webkit-details-marker{ display:none; }

/* 開いたとき：＋を－へ */
.faq-item[open] .faq-q__plus::before{
  content:"–"; /* en dash で綺麗なマイナス */
  color: var(--faq-blue);
}

/* ===== Responsive (<=959px) ===== */
@media (max-width: 959px){
	.faq {
		padding: 60px 20px 60px;
	}
  .faq-q{ padding: 16px 52px 16px 16px; }
  .faq-a{ margin: 6px 6px 0; }
	.faq__title img {
    width: min(370px, 92vw);
	}
}
/* ===== スマホ小型 ===== */
@media (max-width: 520px){
	.faq__title img {
    width: min(230px, 92vw);
    margin-bottom: 20px;
	}
	
}
/* =========================
   TOP⑧
========================= */
:root{
  --works-bg:#e8f2ff;     /* 背景のうすい水色 */
  --btn-yellow:#fff15a;   /* もっと見るの黄色 */
  --text:#222;
}

/* セクション全体 */
.works{
  background: var(--works-bg);
  padding: 64px 20px 96px;
  color: var(--text);
}
.works__inner{
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

/* タイトル画像 */
.works__title{ margin: 0 0 24px; }
.works__title img{
  width: min(300px, 92vw);
  height: auto;
  display: inline-block;
  margin-bottom: 16px;
}

/* グリッド */
.works__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0 auto 40px;
  text-align: left;
}

/* アイテム */
.works__item{ margin: 0; }
.works__img{
  width: 100%;
  aspect-ratio: 4 / 3;     /* 画像の比率（必要に応じて変更） */
  object-fit: cover;
  display: block;
}
.works__cap{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.8;
}

/* もっと見るボタン */
.works__more{ margin: 0; }
.works__btn{
  display: inline-block;
  padding: 22px 48px;
  min-width: 320px;
  background: var(--btn-yellow);
  color: #222;
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .06s ease, filter .2s ease;
}
.works__btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* レスポンシブ（960px基準） */
@media (max-width: 959px){
  .works{ padding: 48px 16px 72px; }
  .works__grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 520px){
  .works__grid{ grid-template-columns: 1fr; }
  .works__btn{ width: 100%; min-width: 0; }
}


/* =========================
   TOP⑨
========================= */
:root{
  --area-blue1:#0b6cff;        /* 青グラデ左 */
  --area-blue2:#2a90ff;        /* 青グラデ右 */
  --area-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* セクション背景（写真） */
.area{
  position: relative;
  background: var(--area-bg) center/cover no-repeat;
  padding: 100px 20px 66px;
}

/* 背景を少し淡くしたい時はON（不要なら削除OK） */
.area::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.55);
}

/* 中身 */
.area__inner{
  position: relative;   /* ::beforeの上に出す */
  max-width: var(--container);
  margin: 0 auto;
}

/* タイトル画像 */
.area__title{
  text-align:center;
  margin: 0 0 24px;
}
.area__title img{
  width: min(330px, 92vw);
  height: auto;
  display: inline-block;
  margin-bottom: 24px;
}
/* カード */
.area-card {
	margin: 0 0 50px 0;
}
/* 青い見出しバー */
.area-card__hd{
  margin: 0;
  padding: 14px 18px;
  color:#fff;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--area-blue1), var(--area-blue2));
}
/* 白ボックス本文 */
.area-card__body{
  padding: 18px 22px;
  font-size: 16px;
  line-height: 2;
  background:#fff;
	border: solid 2px var(--area-blue2);
}

/* レスポンシブ */
@media (max-width: 959px){
  .area{ padding: 56px 16px 80px; }
  .area-card__hd{ font-size: 19px; padding: 12px 14px; }
  .area-card__body{ font-size: 15px; padding: 14px 16px; }
}
/* ===== スマホ小型 ===== */
@media (max-width: 520px){
	.area__title img {
    width: min(200px, 92vw);
	}
	.area-card {
    margin: 0 0 30px 0;
	}
}
/* =========================
   TOP⑩
========================= */
:root {
  --main-blue: linear-gradient(90deg, #0170ff, #1792ff); /* ← グラデーションに変更 */
  --accent-yellow: #ffff00;
}

/* セクション全体 */
.contact {
  position: relative;
  background: var(--main-blue);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  overflow: hidden;
}

/* 人物画像（前面・半透明） */
.contact__overlay {
  position: absolute;
  inset: 0;
	background: url("https://shutter.miya-works.co.jp/wp-content/uploads/2025/10/pixta_95444204.png") center/contain no-repeat;
  opacity: 0.3; /* ← 不透明度30% */
  z-index: 1;
}

/* コンテンツ本体 */
.contact__inner {
  position: relative;
  z-index: 2; /* 画像より上に */
  max-width: 1000px;
  margin: 0 auto;
}

/* タイトル */
.contact__title {
	margin: 0 0 20px;
}
.contact__title img {
    width: min(520px, 92vw);
    height: auto;
    display: inline-block;
}
/* サブテキスト */
.contact__sub {
  color: var(--accent-yellow);
  margin-bottom: 48px;
	font-weight: bold;
}

/* 電話ボックス */
.contact__boxes {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.contact__box {
  background: #fff;
  color: #222;
  border-radius: 4px;
  padding: 18px 36px;
  min-width: 320px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  text-align: left;
}
.contact__label {
  font-size: 15px;
  margin-left: 28px;
  font-weight: 700;
}
.contact__tel {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.contact__tel:hover {
  opacity: 0.8;
}

/* アイコン */
.contact__icon {
  margin-right: 3px;
}

/* レスポンシブ */
@media (max-width: 959px){
  .contact {
    padding: 64px 16px;
  }
  .contact__title {
    font-size: 30px;
  }
  .contact__boxes {
    flex-direction: column;
    gap: 20px;
	  align-items: anchor-center;
  }
  .contact__box {
    width: 100%;
	  max-width: 510px;
      text-align: center;
  }
}
/* =========================
   Footer
========================= */
.footer{
  background:#fff;
  padding: 36px 0px 24px;
}

.footer__inner {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}

/* キャッチコピー */
.footer__catch{
  text-align: center;
  font-size: 16px;
}

/* 2カラム配置 */
.footer__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px 48px;
  align-items: start;
}

.footer__logo img{
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
	margin-left: 20px;
}

/* 会社概要 */
.footer__title{
  font-size: 24px;     /* タイトル24px */
  font-weight: 700;
  margin: 0 0 10px;
}

.footer__dl{
  margin: 0;
}

.footer__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 6px 0;
}
.footer__row:last-child{ border-bottom: none; }

.footer__dl dt{
  font-weight: 700;
  color:#222;
  font-size: 16px;     /* 本文16px */
}

.footer__dl dd{
  margin: 0;
  font-size: 16px;
  letter-spacing: .02em;
}

.footer__tel{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__tel:hover{
  border-bottom-color:#999;
}

/* 仕切り線＆コピーライト */
.footer__divider{
  max-width: 100%;
  border: none;
  border-top: 1px solid #036ea6;
  margin: 28px 0 10px;
}

.footer__copy{
  text-align: center;
  font-size: 13px;
  color:#555;
  margin: 0;
}

/* =====================
   Responsive
===================== */
@media (max-width: 959px){
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer__logo img{
    margin: 0 auto 6px;
  }
	.footer__catch {
    font-size: 13px;
	}
}