@charset "UTF-8";

/* @group font */

/* Noto Sans JP（テンプレート theme-original のサブセット約4,450字＋「鑽」。文字一覧は materials/font-subset/charset.txt、ライセンスは fonts/NotoSansJP-OFL.txt） */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
}

/* @end font */


/* @group base */

:root {
  --ink: #1c2430;
  --sub: #5a6472;
  --line: rgba(28, 36, 48, .16);
  --tint: #f3f5f8;
  --accent: #c9a64a;
  --serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.2rem;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
}

p { margin: 0 0 1.2em; }

a { color: var(--ink); text-underline-offset: .25em; }
a:hover { opacity: .7; }

ul { margin: 0; padding: 0; list-style: none; }

.inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

.inner--narrow { max-width: 800px; }

.label {
  display: inline-block;
  margin-right: .6em;
  color: var(--sub);
  font-size: 1.2rem;
  letter-spacing: .05em;
}

/* PDFリンク */
.pdf::after {
  content: "PDF";
  display: inline-block;
  margin: 0 .3em 0 .4em;
  padding: 0 .4em;
  border: 1px solid currentColor;
  font-size: 1rem;
  line-height: 1.6;
  vertical-align: .15em;
  letter-spacing: .05em;
}

/* 外部サイトを新しいタブで開くリンク */
.blank::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin: 0 .3em 0 .4em;
  background: currentColor;
  vertical-align: -.05em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9 2h5v5M14 2L7 9M12 9.5V14H2V4h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9 2h5v5M14 2L7 9M12 9.5V14H2V4h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 文の途中で折り返さないまとまり */
.nowrap { display: inline-block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ボタン（お問い合わせフォーム） */
.btn {
  display: inline-block;
  min-width: 24rem;
  padding: 1.4rem 3.2rem;
  border: 1px solid var(--ink);
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
}

.btn::after {
  content: "→";
  margin-left: 1em;
}

.btn:hover { background: var(--ink); color: #fff; opacity: 1; }

.btn--white { border-color: #fff; }
.btn--white:hover { background: #fff; color: var(--ink) !important; }

@media (max-width: 480px) {
  .btn { display: block; min-width: 0; }
}

/* @end base */


/* @group header */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  max-width: 1200px;
  height: 6.4rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}

.header__logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}

.header__nav { margin-left: auto; }

.header__nav ul { display: flex; gap: 2.4rem; }

.header__nav a {
  font-size: 1.3rem;
  text-decoration: none;
  letter-spacing: .05em;
  white-space: nowrap;
}

.header__tel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}

.header__tel span {
  margin-right: .4em;
  color: var(--sub);
  font-family: var(--sans);
  font-size: 1.1rem;
}

@media (max-width: 960px) {
  .header__nav { display: none; }
  .header__tel { margin-left: auto; }
}

@media (max-width: 480px) {
  .header__inner { height: 5.6rem; padding: 0 1.6rem; }
  .header__logo { font-size: 1.6rem; }
  .header__tel { font-size: 1.5rem; }
  .header__tel span { display: none; }
}

/* @end header */


/* @group hero */

/* 第1弾の背景をそのまま引き継ぐ */
.hero {
  background:
    radial-gradient(circle 62vmax at 100% 0%, rgba(240, 226, 178, .62) 0%, rgba(244, 237, 212, .36) 32%, rgba(246, 243, 234, 0) 70%),
    radial-gradient(ellipse 85% 75% at 0% 100%, rgba(112, 138, 166, .46) 0%, rgba(142, 164, 188, .25) 35%, rgba(170, 186, 204, 0) 72%),
    linear-gradient(160deg, #f8fafc 0%, #eaeff4 50%, #d9e1e9 100%);
  background-color: #eaeff4;
  text-align: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(64vh, 560px);
  padding: 8rem 2.4rem;
}

/* 制作中のお知らせ（本サイト公開時に削除） */
.hero__notice {
  margin: 4rem 0 0;
  padding: 2rem 2.4rem;
  color: var(--sub);
  font-size: 1.4rem;
  line-height: 1.8;
  background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 480px) {
  .hero__notice { padding: 1.2rem 1.6rem; font-size: 1.3rem; }
}

.hero__name {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(3.2rem, 7vw, 5.2rem);
  letter-spacing: .1em;
  line-height: 1.4;

}

.hero__lead {
  margin: 0 0 3.6rem;
  color: var(--sub);
  font-size: 1.5rem;
  word-break: keep-all;
}

.hero__info {
  padding-top: 3.2rem;
  border-top: 1px solid rgba(28, 36, 48, .2);
  font-size: 1.5rem;
}

.hero__info p { margin: 0 0 .4em; }

.hero__info a {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .04em;
}

/* @end hero */


/* @group section */

.section { padding: 10rem 0; }

.section--tint { background: var(--tint); }

.heading {
  margin: 0 0 4.8rem;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2.8rem;
  letter-spacing: .08em;
  line-height: 1.5;
}

.heading__en {
  display: block;
  margin-bottom: .6rem;
  color: var(--sub);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.heading__en::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 1px;
  margin-right: 1rem;
  background: var(--accent);
  vertical-align: middle;
}

.subheading {
  margin: 4rem 0 1.6rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.subheading--first { margin-top: 0; }

@media (max-width: 767px) {
  .section { padding: 6.4rem 0; }
  .heading { margin-bottom: 3.2rem; font-size: 2.4rem; }
  .subheading { font-size: 1.7rem; }
}

/* @end section */


/* @group greeting */

.greeting {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6.4rem;
  align-items: start;
}

.greeting__photo { margin: 0; }

.greeting__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 写真が届くまでの仮の枠 */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background: var(--tint);
  color: #a3abb5;
  font-size: 1.2rem;
  letter-spacing: .3em;
}

.greeting__sign {
  margin-top: 3.2rem;
  text-align: right;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .1em;
}

.greeting__sign span {
  margin-right: 1em;
  color: var(--sub);
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .05em;
}

/* 事務所名の由来 */
.greeting__name {
  margin: 2.4rem 0;
  padding: 2.4rem 2.8rem;
  background: var(--tint);
  font-size: 1.5rem;
}

.greeting__name p:last-child { margin-bottom: 0; }

.greeting__name-title {
  margin-bottom: .8rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .1em;
}

@media (max-width: 767px) {
  .greeting { grid-template-columns: 1fr; gap: 4rem; }
  .greeting__photo {
    order: 1; /* 写真をごあいさつ文の下へ */
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .greeting__name { padding: 2rem; }
}

@media (max-width: 480px) {
  .greeting__photo { max-width: 60vw; }
}

/* @end greeting */


/* @group service */

.service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  counter-reset: service;
}

.service li {
  position: relative;
  padding: 2.4rem 2.4rem 2.4rem 6.8rem;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1.8;
  counter-increment: service;
}

.service li::before {
  content: counter(service, decimal-leading-zero);
  position: absolute;
  top: 2.2rem;
  left: 2.4rem;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
}

.service__link {
  margin: 3.2rem 0 0;
  font-size: 1.4rem;
}

@media (max-width: 480px) {
  .service { grid-template-columns: 1fr; }
  .service li { padding: 2rem 2rem 2rem 6rem; }
  .service li::before { top: 1.8rem; left: 2rem; }
}

/* @end service */


/* @group fee */

.fee__price { margin-bottom: .8rem; }

.fee__price strong {
  margin-right: .1em;
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.fee__price small {
  margin-left: .4em;
  color: var(--sub);
  font-size: 1.4rem;
}

.dl { margin: 0 0 2.4rem; border-top: 1px solid var(--line); }

.dl div {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.dl dt { font-weight: 500; }
.dl dd { margin: 0; }

@media (max-width: 480px) {
  .dl div { grid-template-columns: 1fr; gap: .2rem; }
}

/* @end fee */


/* @group flow */

.contact-box {
  margin: 3.2rem 0;
  padding: 2.8rem 3.2rem;
  background: #fff;
  border-top: 2px solid var(--accent);
}

.contact-box p { margin: 0; }

.contact-box__tel a {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: .04em;
}

.contact-box__time { font-weight: 500; }

.contact-box__note {
  margin-top: .8rem !important;
  color: var(--sub);
  font-size: 1.4rem;
}

.contact-box__form { margin-top: 2.4rem !important; }

@media (max-width: 480px) {
  .contact-box { padding: 2.4rem 2rem; }
}

/* @end flow */


/* @group access */

.access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem;
}

.access__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

.access__address {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 500;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.access__route li {
  position: relative;
  padding-left: 1.4em;
}

.access__route li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: .2em;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--accent);
}

.access .subheading { margin-top: 3.2rem; }

@media (max-width: 767px) {
  .access { grid-template-columns: 1fr; gap: 3.2rem; }
}

/* 事務所の写真（お試し） */
.access-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: 640px;
  margin-top: 4.8rem;
}

.access-photos figure { margin: 0; }

.access-photos img {
  display: block;
  width: 100%;
  height: auto;
}

.access-photos figcaption {
  margin-top: .6rem;
  color: var(--sub);
  font-size: 1.2rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .access-photos { gap: .8rem; margin-top: 4rem; }
  .access-photos figcaption { font-size: 1.1rem; }
}

/* @end access */


/* @group profile */

.profile__name {
  margin: -2.4rem 0 4rem;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .1em;
}

.profile__name span {
  margin-right: 1em;
  color: var(--sub);
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 400;
}

.profile__name .profile__kana {
  display: inline-block;
  margin: 0 0 0 1em;
  letter-spacing: .15em;
  white-space: nowrap;
}

.profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.4rem;
}

.table { margin: 0; border-top: 1px solid var(--line); font-size: 1.5rem; }

.table div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 1.6rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}

.table dt { color: var(--sub); }
.table dd { margin: 0; }

.affiliation { font-size: 1.5rem; }

.affiliation > li {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}

.affiliation > li:first-child { border-top: 1px solid var(--line); }

.affiliation ul {
  margin-top: .4rem;
  color: var(--sub);
  font-size: 1.4rem;
}

.affiliation ul li { padding-left: 1.2em; text-indent: -1.2em; }
.affiliation ul li::before { content: "・"; }

@media (max-width: 767px) {
  .profile__name { margin-top: -1.2rem; }
  .profile { grid-template-columns: 1fr; gap: 4rem; }
}

/* @end profile */


/* @group contact */

.contact {
  padding: 9.6rem 0;
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.contact a { color: #fff; }

.contact__title {
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2.6rem;
  letter-spacing: .08em;
}

.contact__tel { margin: 3.2rem 0 .4rem; }

.contact__tel a {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 3.4rem);
  text-decoration: none;
  letter-spacing: .06em;
}

.contact__time { margin: 0; color: rgba(255, 255, 255, .75); font-size: 1.4rem; }

.contact__form { margin: 3.2rem 0 0; text-align: center; }

@media (max-width: 767px) {
  .contact { padding: 6.4rem 0; text-align: left; }
  .contact__title { font-size: 2.2rem; }
  .contact__tel, .contact__time { text-align: center; }
}

/* @end contact */


/* @group form */

/* お問い合わせ（page-placeholder-contact.php）・送信完了（page-placeholder-thanks.php）
   「必須」のラベル、エラー文、送信中の表示はメールフォームのプログラム（assets/mailform/）が書き出す */

.page-contact__tel { color: var(--sub); font-size: 1.4rem; }
.page-contact__tel a { color: var(--ink); font-family: var(--serif); font-size: 1.7rem; text-decoration: none; letter-spacing: .04em; }

.page-contact__back { margin-top: 4.8rem; text-align: center; }

.form { margin-top: 4.8rem; }

.form-list { margin: 0; }

.form-list dt {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.2rem;
  font-weight: 500;
}

.form-list dt:first-child { margin-top: 0; }

.form-list dd { margin: 1rem 0 0; }

/* 「必須」のラベル */
.form-list dt i { font-style: normal; font-weight: normal; }

.form-list dt span {
  display: block;
  padding: .4em .8em;
  background: var(--tint);
  font-size: 1.1rem;
  line-height: 1;
}

.form-list dt span.required { background: #a33; color: #fff; }

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.6rem; /* 16px未満にすると、iPhoneで入力時に画面が拡大される */
  line-height: 1.5;
}

.form-input--short { max-width: 32rem; }

.form-textarea { min-height: 20rem; resize: vertical; }

.form-input:focus,
.form-textarea:focus { border-color: var(--ink); outline: 1px solid var(--ink); }

.form-choices { margin-top: 1.6rem; }

.form-choices label {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  cursor: pointer;
}

.form-choices input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: var(--ink); }

/* エラー文 */
.form-list .error_blank,
.form-list .error_format,
.form-list .error_match {
  display: block;
  margin-top: .6rem;
  color: #a33;
  font-size: 1.4rem;
}

.form-list .error_blank:empty,
.form-list .error_format:empty,
.form-list .error_match:empty { display: none; }

/* ボタン */
.form-submit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 4.8rem 0 0;
}

.form-button {
  width: 100%;
  max-width: 28rem;
  padding: 1.4rem 3.2rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .08em;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.form-button:hover { opacity: .8; }

.form-button--back { background: #fff; color: var(--ink); }

/* 確認画面。プログラムが表示を切り替える */
.form-confirm { display: none; margin-top: 4.8rem; }

.form-confirm__title {
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2rem;
  letter-spacing: .05em;
}

.form-confirm dl {
  margin: 0;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.form-confirm dl:first-child { border-top: 1px solid var(--line); }

.form-confirm dt { color: var(--sub); font-size: 1.4rem; }

.form-confirm dd { margin: .4rem 0 0; overflow-wrap: anywhere; } /* 改行はプログラムが <br> にする */

/* 送信中に画面全体を覆う表示 */
.loading-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  background: rgba(0, 0, 0, .6);
}

.loading {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, .3);
  border-left-color: #fff;
  border-radius: 50%;
  animation: form-loading 1s linear infinite;
}

@keyframes form-loading { to { transform: rotate(360deg); } }

/* @end form */


/* @group privacy */

/* プライバシーポリシー（お問い合わせフォームの中にスクロールで表示） */
.privacy {
  max-height: 32rem;
  overflow-y: auto;
  padding: 2.4rem 2.8rem;
  border: 1px solid var(--line);
  background: var(--tint);
  font-size: 1.4rem;
  line-height: 1.8;
  overscroll-behavior: contain;
  scroll-margin-top: 12rem; /* #privacy で来たとき、上の「個人情報の取り扱い」まで見せる */
}

.privacy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.privacy__title {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.8rem;
  letter-spacing: .05em;
}

.privacy h3 { margin: 2.4rem 0 .6rem; font-size: 1.5rem; font-weight: 500; }

.privacy p { margin: 0 0 .8em; }

.privacy__list { margin: 0; padding: 0; list-style: none; }

.privacy__list li { display: flex; }

.privacy__list span { flex-shrink: 0; }

@media (max-width: 767px) {
  .privacy { max-height: 28rem; padding: 2rem; }
}

/* @end privacy */


/* @group footer */

.footer {
  padding: 4.8rem 0 3.2rem;
  font-size: 1.4rem;
}

.footer__name {
  margin-bottom: .8rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: .08em;
}

.footer__info { color: var(--sub); }

.footer__copy { margin: 3.2rem 0 0; color: var(--sub); }

/* @end footer */