@charset "UTF-8";
/*
Theme Name: MY THEME 
Author: Aini-ku
Description: Aini-kuオリジナルテーマ
Version: 1.10(2023.2 最新版)
*/


/* ===========================================
 メモ（memo）
 * ======================================== */
/*background-image: url("images/arrow_icon.png");*/

/* レスポンシブ（responsive）
------------------------------------------ */
.pc{
	display:block !important;
}
.sp{
	display:none !important;
}
@media screen and (max-width:520px){
	.sp{
		display:block !important;
	}
	.pc{
		display:none !important;
	}
}


/* FLEX（flex）
------------------------------------------ */
.flex{
	display:flex;
	align-items:center;
	flex-wrap: wrap;
}
.flex-between{
	justify-content:space-between;
}
.flex-center{
	justify-content:center;
}
.flex-start{
	justify-content:start;
}
.flex-align-start{
	align-items: start;
}
.flex-item10{
	width:10%;
}
.flex-item20{
	width:20%;
}
.flex-item25{
	width:25%;
}
.flex-item30{
	width:33%;
}
.flex-item45{
	width:45%;
}
.flex-item60{
	width:60%;
}
.flex-item70{
	width:70%;
}

@media screen and (max-width:520px){
	.flex-item10,.flex-item20,.flex-item25,.flex-item30,.flex-item45,.flex-item60,.flex-item70{
		width: 100%;
	}
}

/* POSITION（position）
------------------------------------------ */
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}

/* WIDTH（width）
------------------------------------------ */
.w-80{
	width: 80%;
}
.w-90{
	width: 90%;
}


/* Animation
------------------------------------------ */
/* 下からフェードイン */
.js-fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}
.js-fadein.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-fadein { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================
   base
========================================================== */
:root {
  --header-h: 95px;          /* PCヘッダー高さ（固定。スクロールで変えない） */
  --color-main: #1f3fa8;
  --color-accent: #008000;
  --color-text: #222;
  --font-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
 
*, *::before, *::after { box-sizing: border-box; }
 
html { scroll-behavior: smooth; }
 
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  /* ヘッダーを fixed にするぶん、最初から余白を確保しておく
     → 追従開始時にレイアウトがガタつかない */
  padding-top: var(--header-h);
}
 
body.is-menu-open { overflow: hidden; }
 
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
 
/* ==========================================================
   header
========================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 1000;
  background: #fff;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22));
}
 
/* 管理バー表示時のずれ対策（WordPressログイン時） */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
 
.header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--logo-w) 1fr;
  align-items: center;
  height: 100%;
  padding: 0 clamp(20px, 2.5vw, 48px);
  --nav-gap: clamp(24px, 3.0vw, 54px);
  --logo-w: clamp(420px, 34vw, 600px);
}
 
.header__nav { display: flex; align-items: center; }
 
/* 左：メニューをカラム中央に */
.header__nav--left { grid-column: 1; justify-content: center; }
 
/* 右：メニューは「ボタンを除いた残りのスペース」の中央、ボタンは右端 */
.header__nav--right { grid-column: 3; gap: var(--nav-gap); }
.header__nav--right .header__list { flex: 1; justify-content: center; }
 
.header__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
 
.header__list a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .3s;
}
 
.header__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
 
.header__list a:hover { color: var(--color-main); text-decoration:none; }
.header__list a:hover::after { transform: scaleX(1); }
 
/* ロゴ（中央・下に半楕円で張り出す） */
.header__logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--logo-w);
  height: calc(var(--header-h) + 45px);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: #fff;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  text-align: center;
}
.header__logo:hover{
	color:#000;
	text-decoration:none;
}
.header__logo-lead,
.header__logo-name {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.2;
  white-space: nowrap;
}
 
.header__logo-img {
  display: block;
  width: 168px;
  height: auto;
  background: #cad1d9; /* ロゴ画像のプレースホルダー */
}
.header__logo-img:hover{
	opacity:0.9;
}
.header__logo-img img { width: 100%; height: 100%; object-fit: contain; }
 
/* お問い合わせボタン */
.header__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(11px, 1vw, 14px) clamp(14px, 1.4vw, 20px);
  background: var(--color-accent);
  color: #fff;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 3px;
  white-space: nowrap;
  transition: opacity .3s;
}
.header__contact:hover { opacity: .8; color:#fff !important; text-decoration:none; }
 
/* ハンバーガー（PCでは非表示） */
.header__toggle { display: none; }
 
/* ドロワー（PCでは非表示） */
.drawer { display: none; }
 
/* ----- 1160px以下：ハンバーガー化（これ以上狭いとロゴとメニューが重なるため） ----- */
@media (max-width: 1160px) {
  :root { --header-h: 70px; }
 
  .header__inner {
    display: flex;
    justify-content: space-between;
    padding: 0 16px 0 20px;
  }
 
  .header__nav { display: none; }
 
  /* ロゴは左寄せのシンプルな並びに */
  .header__logo {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 0;
    gap: 3px;
    align-items: flex-start;
    background: none;
    border-radius: 0;
    text-align: left;
  }
  .header__logo-lead,
  .header__logo-name { font-size: 10px; }
  .header__logo-img { width: 120px; height: auto; }
 
  /* ハンバーガー */
  .header__toggle {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: var(--color-main);
    border-radius: 4px;
    cursor: pointer;
  }
  .header__toggle span {
    position: absolute;
    left: 13px;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .3s, opacity .3s, top .3s;
  }
  .header__toggle span:nth-child(1) { top: 16px; }
  .header__toggle span:nth-child(2) { top: 23px; }
  .header__toggle span:nth-child(3) { top: 30px; }
  .header__toggle[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
  .header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__toggle[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
 
  /* ドロワー */
  .drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 32px 24px 48px;
    overflow-y: auto;
    background: rgba(255, 255, 255, .98);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .admin-bar .drawer { top: calc(var(--header-h) + 32px); }
  .drawer.is-open { opacity: 1; visibility: visible; }
 
  .drawer__list { width: 100%; max-width: 480px; }
  .drawer__list li { border-bottom: 1px solid #ddd; }
  .drawer__list a {
    display: block;
    padding: 18px 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
  }
	.drawer__list a:hover{ color:#000;}
  .drawer__contact { width: 100%; max-width: 480px; justify-content: center; padding: 18px 20px; }
}
 
@media (max-width: 834px) {
  :root { --header-h: 60px; }
  .header__inner { padding: 0 12px 0 14px; }
  .header__toggle { width: 42px; height: 42px; }
  .header__toggle span { left: 10px; }
  .header__toggle span:nth-child(1) { top: 13px; }
  .header__toggle span:nth-child(2) { top: 20px; }
  .header__toggle span:nth-child(3) { top: 27px; }
  .header__toggle[aria-expanded="true"] span:nth-child(1),
  .header__toggle[aria-expanded="true"] span:nth-child(3) { top: 20px; }
  .header__logo-img { width: 114px; height: auto; }
  .header__logo-name{display:none;}
}
 
/* ==========================================================
   FV
========================================================== */
.fv {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 520px;
  max-height: 800px;
  overflow: hidden;
  background: #333;
}
 
.fv__bg,
.fv__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fv__bg img { object-fit: cover; object-position: 70% center; }
 
.fv__copy {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #fff;
  font-family: var(--font-serif);
}
 
.fv__text {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 48px);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  text-shadow: 0 0 12px rgba(0, 0, 0, .55);
}
.fv__text--lead { margin-bottom: .6em; }
.fv__text--sub  { margin-top: .6em; }
 
/* 「RAに頼んでよかった」白帯＋青文字 */
.fv__catch {
  margin: 0;
  display: inline-block;
  /* 左から表示されるアニメーション */
  clip-path: inset(0 100% 0 0);
  animation: revealLeft 1.2s cubic-bezier(.65, 0, .35, 1) .6s forwards;
}
 
.fv__catch-inner {
  display: block;
  padding: .25em .3em .3em;
  background: #fff;
  color: var(--color-main);
  font-size: clamp(28px, 3.0vw, 80px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  white-space: nowrap;
}
 
@keyframes revealLeft {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
 
/* 動きを減らす設定のユーザーにはアニメーションなし */
@media (prefers-reduced-motion: reduce) {
  .fv__catch { animation: none; clip-path: none; }
}
 
@media screen and (max-width: 834px) {
	.fv { min-height: 480px; max-height:520px; }
	.fv__copy { left: 5%; right: 5%; top: auto; bottom: 22%; transform: none; }
	.fv__text { font-size: 18px; letter-spacing: .08em; }
	.fv__catch-inner { padding: .25em .7em .3em; font-size: clamp(22px, 7vw, 34px); letter-spacing: .08em; }
}
@media screen and (max-width: 767px) {
	.fv__catch{
		max-width:95%;
	}
	.fv__catch-inner{
		font-size: clamp(22px, 6vw, 34px);
	}
}

/* ==========================================================
   gaiyo
========================================================== */
.gaiyo {
  padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 112px);
  background: #fff;
}
 
.gaiyo__inner {
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}
 
/* 見出し */
.gaiyo__title {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.3vw, 40px);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.5;
}
.gaiyo__title-line { display: block; }
.gaiyo__title em { font-style: normal; color: var(--color-main); }
 
/* 本文：幅を文字の長さに合わせ、ブロックごと中央へ。文字は左揃え */
.gaiyo__text {
  width: fit-content;
  max-width: 950px;
  margin: clamp(40px, 5vw, 80px) auto 0;
  text-align: left;
  font-size: clamp(14px, 1.0vw, 16px);
  letter-spacing: .08em;
  line-height: 2.7;
}
.gaiyo__text p { margin: 0; }
.gaiyo__text p + p { margin-top: 2.7em; }
 
/* 画像3枚（高さを揃え、幅は元画像の比率で配分） */
.gaiyo__images {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  margin: clamp(48px, 5.5vw, 88px) 0 0;
}
.gaiyo__image { min-width: 0; height: clamp(180px, 20.5vw, 340px); }
.gaiyo__image--1 { flex: 511 1 0; }
.gaiyo__image--2 { flex: 548 1 0; }
.gaiyo__image--3 { flex: 513 1 0; }
.gaiyo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
@media (max-width:767px) {
  .gaiyo__title { letter-spacing: .06em; line-height: 1.7; font-size: clamp(18px, 2.3vw, 40px); }
  .gaiyo__text { line-height: 2.2; letter-spacing: .04em; }
  .gaiyo__images { flex-direction: column; }
  .gaiyo__image { height: auto; aspect-ratio: 3 / 2; flex: none; }
}

/* ==========================================================
   business
========================================================== */
.business {
  padding: clamp(56px, 6vw, 88px) 0 clamp(72px, 8vw, 120px);
  background: #fffdf5;
}
 
.business__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}
 
/* 見出し：筆記体の英字＋青い日本語 */
.business__head { text-align: center; }
.business__en {
  margin: 0;
  font-family: "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #c9ced6;
}
.business__title {
  margin: -.6em 0 0;
  position: relative;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em; /* letter-spacingぶんの中央ズレ補正 */
  color: var(--color-main);
}
 
/* カード */
.business__list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 46px);
  margin-top: clamp(40px, 5vw, 76px);
}
 
.business__item {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 42px);
  padding: clamp(16px, 2.8vw, 34px) clamp(16px, 2.8vw, 28px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}
.business__item--reverse { flex-direction: row-reverse; }
 
.business__image { flex: 0 0 37.5%; }
.business__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
 
.business__body { flex: 1; min-width: 0; }
 
.business__name {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}
.business__name small {
  margin-left: 1em;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
 
.business__text {
  margin: 1.2em 0 0;
  font-size: clamp(13px, 1.1vw, 14.5px);
  letter-spacing: .04em;
  line-height: 1.95;
}
 
.business__btn {
  display: inline-block;
  margin-top: clamp(20px, 2.4vw, 34px);
  padding: 10px 20px;
  background: var(--color-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 4px;
  transition: opacity .3s;
}
.business__btn:hover { opacity: .9; color:#fff; text-decoration:none; }
.business__btn:visited{ color:#fff; text-decoration:none; }

@media (max-width: 767px) {
  .business__item,
  .business__item--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .business__image { flex: none; }
  .business__name small { display: block; margin: .2em 0 0; }
  .business__btn { display: block; text-align: center; }
}

/* ==========================================================
   philosophy
========================================================== */
.philosophy {
  padding-top: clamp(48px, 5vw, 80px);
  background: #fff;
}

.philosophy__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* 見出し */
.philosophy__head { text-align: center; }
.philosophy__en {
  margin: 0;
  font-family: "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #c9ced6;
}
.philosophy__title {
  position: relative;
  margin: -.55em 0 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: .1em;
}
.philosophy__title em { font-style: normal; color: var(--color-main); }

.philosophy__lead {
  margin: clamp(28px, 3.5vw, 52px) 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .06em;
  color: #444;
}

/* 01・02は2カラム、03は全幅 */
.philosophy__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px) clamp(32px, 6vw, 70px);
  margin-top: clamp(48px, 6vw, 96px);
}
.philosophy__item--wide { grid-column: 1 / -1; }

/* 「01 | タイトル」 */
.philosophy__name {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}
.philosophy__num {
  margin-right: .6em;
  padding-right: .6em;
  border-right: 1px solid #9a8fb5;
  color: var(--color-main);
  font-size: 1.05em;
  line-height: 1.2;
}

.philosophy__text {
  margin: clamp(16px, 2vw, 28px) 0 0;
  font-size: clamp(12px, 1vw, 13.5px);
  letter-spacing: .04em;
  line-height: 2.5;
  color: #444;
}
.philosophy__text strong { font-weight: 700; color: #111; }

/* 全幅画像 */
.philosophy__image {
  margin-top: clamp(48px, 6vw, 96px);
}
.philosophy__image img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 3;
  min-height: 200px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .philosophy__list { grid-template-columns: 1fr; }
  .philosophy__text { line-height: 2.2; }
  .philosophy__image img { aspect-ratio: 3 / 2; }
}

/* ==========================================================
   message
========================================================== */
.message {
  padding-top: clamp(40px, 4vw, 64px);
  background: #f6f6f6;
}

.message__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* 見出し */
.message__head { text-align: center; }
.message__en {
  margin: 0;
  font-family: "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #c9ced6;
}
.message__title {
  position: relative;
  margin: -.55em 0 0;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--color-main);
}

/* 本文：幅を文字の長さに合わせ、ブロックごと中央へ。文字は左揃え */
.message__body {
  width: fit-content;
  max-width: 100%;
  margin: clamp(48px, 6vw, 96px) auto 0;
  padding-bottom: clamp(56px, 6vw, 96px);
}
.message__text {
  margin: 0;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .04em;
  line-height: 2.5;
  color: #333;
  text-align: left;
}
.message__text strong { font-weight: 700; color: #000; }

/* 署名：本文ブロックの右端に揃える */
.message__sign {
  margin: clamp(32px, 4vw, 56px) 0 0;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .04em;
  line-height: 2.2;
  text-align: right;
  color: #333;
}

/* 全幅画像 */
.message__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 767px) {
  /* SPでは<br>の強制改行を無効にし、自然に折り返す */
  .message__text br { display: none; }
  .message__text { line-height: 2.2; }
  .message__image img { aspect-ratio: 4 / 3; }
}

/* ==========================================================
   company
========================================================== */
.company {
  padding: clamp(48px, 5vw, 80px) 0 clamp(72px, 8vw, 128px);
  background: #fff;
}

.company__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* 見出し */
.company__head { text-align: center; }
.company__en {
  margin: 0;
  font-family: "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #c9ced6;
}
.company__title {
  position: relative;
  margin: -.55em 0 0;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--color-main);
}

/* 一覧（項目ごとに下線） */
.company__list {
  margin: clamp(48px, 7vw, 112px) 0 0;
  border-bottom: 1px solid #222;
}

.company__row {
  display: grid;
  grid-template-columns: 47% 1fr;
  padding: clamp(18px, 2vw, 28px) 0;
  border-top: 1px solid #222;
}
.company__row:first-child { border-top: 0; }

.company__row dt {
  margin: 0;
  padding-left: clamp(16px, 6.8%, 76px);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
}

.company__row dd {
  margin: 0;
  padding-right: clamp(0px, 3vw, 40px);
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .04em;
  line-height: 1.95;
  color: #333;
}
.company__row dd p { margin: 0; }
.company__row dd p + p { margin-top: 1.6em; }

.company__row dd ul { margin: 0; padding-left: 1.2em; list-style: disc; }

@media (max-width: 767px) {
  .company__row { grid-template-columns: 1fr; gap: 6px; }
  .company__row dt { padding-left: 0; }
  .company__row dd { padding-right: 0; }
}

/* ==========================================================
   contact
========================================================== */
.contact {
  padding: clamp(48px, 5vw, 80px) 0 clamp(72px, 8vw, 120px);
  background: #f6f6f6;
}

.contact__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* 見出し */
.contact__head { text-align: center; }
.contact__en {
  margin: 0;
  font-family: "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  color: #c9ced6;
}
.contact__title {
  position: relative;
  margin: -.55em 0 0;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--color-main);
}
.contact__lead {
  margin: clamp(28px, 3.5vw, 52px) 0 0;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .06em;
  line-height: 2;
  color: #333;
}

/* カード3枚 */
.contact__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(40px, 5vw, 72px);
}

.contact__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .1);
  transition: transform .3s, box-shadow .3s;
}
.contact__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .15);
}

.contact__image { display: block; overflow: hidden; }
.contact__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s;
}
.contact__card:hover .contact__image img { transform: scale(1.05); }

.contact__label {
  display: block;
  margin: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 24px) 0;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

/* ボタンは下端にそろえる */
.contact__btn {
  display: block;
  margin: 15px clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 24px);
  padding: clamp(12px, 1.2vw, 16px) 8px;
  background: var(--color-accent);
  color: #fff;
  font-size: clamp(10px, 1.05vw, 14.5px);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  border-radius: 4px;
  transition: opacity .3s;
}
.contact__label + .contact__btn { margin-top: clamp(14px, 1.6vw, 22px); }
.contact__card a:hover{ text-decoration:none;}
.contact__card a:hover .contact__btn { opacity: .85; color:#fff;}

/* SP専用改行（共通ユーティリティ。他でも使えます） */
.u-sp { display: none; }

@media (max-width: 767px) {
  .u-sp { display: inline; }
  .contact__list { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================
   footer
========================================================== */
.footer {
  padding: clamp(40px, 4.5vw, 64px) 0 clamp(24px, 2.5vw, 32px);
  background: #fff;
  border-bottom: 4px solid #111;
  text-align: center;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
}

/* メニュー：縦線区切りで中央に並べる */
.footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
}
.footer__list li + li {
  margin-left: .6em;
  padding-left: .6em;
  border-left: 1px solid #333;
}
.footer__list a {
  display: block;
  font-size: clamp(10px, 1.0vw, 13px);
  letter-spacing: .06em;
  line-height: 1.4;
  transition: color .3s;
}
.footer__list a:hover { color: var(--color-accent); }

/* ロゴ */
.footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 3vw, 72px);
}
.footer__logo-lead {
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .06em;
  line-height: 1.4;
}
.footer__logo-img {
  display: block;
  width: clamp(168px, 17vw, 252px);
  height: auto;
  background: #cad1d9; /* ロゴ画像のプレースホルダー */
}
.footer__logo-img img { width: 100%; height: 100%; object-fit: contain; }

.footer__logo:hover{
	color:#000;
	text-decoration:none;
}

/* コピーライト */
.footer__copy {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .04em;
}

@media (max-width: 834px) {
  /* SPは2列に並べ、縦線区切りはなしにする */
  .footer__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px;
    max-width: 360px;
    margin: 0 auto;
  }
  .footer__list li + li { margin: 0; padding: 0; border-left: 0; }
}