div.wpcf7 {
margin: 0;
padding: 0;
}
div.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: 0;
padding: 0;
border: 0;
}
div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #ff0000;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
border: 2px solid #f7e700;
}
.wpcf7-form-control-wrap {
position: relative;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
border: 1px solid #ff0000;
background: #fff;
padding: .2em .8em;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-display-none {
display: none;
}
div.wpcf7 .ajax-loader {
visibility: hidden;
display: inline-block;
background-image: url(//kamahori-office.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif);
width: 16px;
height: 16px;
border: none;
padding: 0;
margin: 0 0 0 4px;
vertical-align: middle;
}
div.wpcf7 .ajax-loader.is-active {
visibility: visible;
}
div.wpcf7 div.ajax-error {
display: none;
}
div.wpcf7 .placeheld {
color: #888;
}
div.wpcf7 .wpcf7-recaptcha iframe {
margin-bottom: 0;
}
div.wpcf7 input[type="file"] {
cursor: pointer;
}
div.wpcf7 input[type="file"]:disabled {
cursor: default;
}
div.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}:root {
--forest: #174f3d;
--forest-deep: #0d3a2d;
--forest-soft: #2d6855;
--sage: #dfe9de;
--sage-pale: #f0f4ed;
--cream: #f7f4ec;
--paper: #fffdf8;
--rose: #d6a6ad;
--rose-pale: #f2e4e3;
--ink: #21312c;
--muted: #6c7772;
--line: rgba(23, 79, 61, 0.16);
--shell: min(1180px, calc(100% - 48px));
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.035em;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
p,
h1,
h2,
h3,
figure,
blockquote,
dl,
dd {
margin: 0;
}
button,
summary,
a {
-webkit-tap-highlight-color: transparent;
}
.shell {
width: var(--shell);
margin-inline: auto;
}
.section-pad {
padding-block: 128px;
}
.topline {
position: relative;
z-index: 20;
background: var(--forest-deep);
color: rgba(255, 255, 255, 0.86);
font-size: 11px;
letter-spacing: 0.14em;
}
.topline-inner {
min-height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
}
.topline-info {
display: flex;
align-items: center;
gap: 14px;
}
.topline-info span {
width: 1px;
height: 11px;
background: rgba(255, 255, 255, 0.35);
}
.site-header {
position: sticky;
top: 0;
z-index: 15;
background: rgba(255, 253, 248, 0.94);
border-bottom: 1px solid rgba(23, 79, 61, 0.1);
backdrop-filter: blur(14px);
}
.header-inner {
min-height: 88px;
display: flex;
align-items: center;
gap: 32px;
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 260px;
line-height: 1.2;
}
.wordmark-emblem {
width: 48px;
height: 48px;
flex: 0 0 auto;
object-fit: contain;
}
.wordmark-ja {
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.09em;
white-space: nowrap;
}
.desktop-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: clamp(18px, 2.25vw, 34px);
}
.desktop-nav a {
position: relative;
padding-block: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
}
.desktop-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 5px;
width: 0;
height: 1px;
background: var(--rose);
transition: width 180ms ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
width: 100%;
}
.header-contact {
min-height: 88px;
margin-left: 4px;
padding-inline: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--forest);
color: white;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
transition: background 180ms ease;
}
.header-contact:hover,
.header-contact:focus-visible {
background: var(--forest-deep);
}
.mobile-menu {
display: none;
}
.hero {
position: relative;
overflow: hidden;
background: var(--sage-pale);
}
.hero::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: rgba(23, 79, 61, 0.08);
}
.hero-grid {
min-height: 704px;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.72fr);
align-items: center;
gap: clamp(48px, 8vw, 120px);
padding-block: 72px 82px;
}
.hero-copy {
position: relative;
z-index: 2;
}
.eyebrow {
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px;
color: var(--forest);
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 44px;
height: 1px;
background: var(--rose);
}
.hero h1 {
max-width: 710px;
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(48px, 5.4vw, 78px);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.05em;
}
.hero h1 em,
.statement em {
position: relative;
color: var(--forest-soft);
font-style: normal;
white-space: nowrap;
}
.hero h1 em::after,
.statement em::after {
content: "";
position: absolute;
z-index: -1;
left: -0.04em;
right: -0.04em;
bottom: 0.06em;
height: 0.24em;
background: var(--rose-pale);
}
.hero-lead {
margin-top: 30px;
color: #4a5d56;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 17px;
line-height: 2.05;
}
.hero-actions {
margin-top: 38px;
display: flex;
align-items: center;
gap: 34px;
}
.button {
min-width: 205px;
min-height: 62px;
padding-inline: 26px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
transition: transform 180ms ease, background 180ms ease;
}
.button:hover,
.button:focus-visible {
transform: translateY(-2px);
}
.button-dark {
background: var(--forest);
color: white;
}
.button-dark:hover,
.button-dark:focus-visible {
background: var(--forest-deep);
}
.button span {
color: var(--rose);
font-size: 17px;
}
.phone-link {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.phone-link small {
margin-bottom: 7px;
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
}
.phone-link strong {
color: var(--forest);
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
letter-spacing: 0.06em;
}
.trust-list {
margin: 34px 0 0;
padding: 24px 0 0;
display: flex;
gap: 25px;
border-top: 1px solid var(--line);
list-style: none;
}
.trust-list li {
position: relative;
padding-left: 15px;
color: #50625b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
.trust-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rose);
}
.hero-panel {
position: relative;
z-index: 2;
min-height: 500px;
padding: 55px 48px 42px;
overflow: hidden;
background: var(--forest);
color: white;
box-shadow: 32px 32px 0 var(--sage);
}
.hero-panel::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
right: -78px;
top: -76px;
border: 1px solid rgba(255, 255, 255, 0.23);
border-radius: 47% 53% 62% 38%;
transform: rotate(28deg);
}
.hero-panel-kicker {
color: var(--rose-pale);
font-family: Georgia, "Times New Roman", serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
}
.hero-panel-title {
margin-top: 26px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(40px, 4vw, 58px);
line-height: 1.4;
letter-spacing: 0.08em;
}
.hero-panel-text {
max-width: 320px;
margin-top: 24px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
line-height: 2;
}
.focus-stack {
margin-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.focus-stack span {
padding-block: 10px;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
letter-spacing: 0.12em;
}
.panel-script {
position: absolute;
right: 28px;
bottom: 18px;
color: rgba(242, 228, 227, 0.22);
font-family: "Brush Script MT", "Segoe Script", cursive;
font-size: 30px;
transform: rotate(-7deg);
}
.hero-orbit {
position: absolute;
border: 1px solid rgba(23, 79, 61, 0.13);
border-radius: 47% 53% 45% 55%;
}
.hero-orbit-one {
width: 410px;
height: 410px;
left: -250px;
bottom: -210px;
transform: rotate(22deg);
}
.hero-orbit-two {
width: 170px;
height: 170px;
left: 48%;
top: 36px;
border-color: rgba(214, 166, 173, 0.35);
transform: rotate(-28deg);
}
.hero-side-label {
position: absolute;
right: 17px;
top: 50%;
color: rgba(23, 79, 61, 0.35);
font-family: Georgia, "Times New Roman", serif;
font-size: 9px;
letter-spacing: 0.24em;
writing-mode: vertical-rl;
transform: translateY(-50%);
}
.section-label {
display: flex;
align-items: center;
gap: 16px;
color: var(--forest);
font-family: Georgia, "Times New Roman", serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
}
.section-label::before {
content: "";
width: 34px;
height: 1px;
background: var(--rose);
}
.section-label span {
color: var(--muted);
font-family: "Yu Gothic", "YuGothic", sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
}
.section-label.light {
color: #fff;
}
.section-label.light span {
color: rgba(255, 255, 255, 0.58);
}
.intro {
background: var(--paper);
}
.intro-grid {
display: grid;
grid-template-columns: 0.38fr 1fr;
gap: 70px;
}
.statement {
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(38px, 4.2vw, 58px);
font-weight: 500;
line-height: 1.55;
letter-spacing: 0.06em;
}
.intro-text {
max-width: 650px;
margin-top: 36px;
color: #59665f;
font-size: 14px;
line-height: 2.2;
}
.services {
position: relative;
overflow: hidden;
background: var(--forest-deep);
color: white;
}
.services::before {
content: "主な業務内容";
position: absolute;
left: -20px;
top: 20px;
color: rgba(255, 255, 255, 0.028);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(96px, 14vw, 210px);
font-weight: 700;
letter-spacing: 0.02em;
}
.section-heading {
position: relative;
display: grid;
grid-template-columns: 0.7fr 1.15fr 0.8fr;
align-items: end;
gap: 50px;
margin-bottom: 70px;
}
.section-heading h2,
.split-title h2,
.about-copy h2,
.fees-intro h2,
.voice-heading h2,
.faq h2,
.contact h2 {
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
}
.section-heading > p:last-child {
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
line-height: 2;
}
.service-list {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.service-card {
position: relative;
min-height: 178px;
padding: 34px 75px 34px 0;
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
gap: 35px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background 200ms ease, padding 200ms ease;
}
.service-card:hover {
padding-left: 22px;
background: rgba(255, 255, 255, 0.04);
}
.service-index {
display: flex;
align-items: center;
gap: 20px;
}
.service-index span {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 33px;
}
.service-index small {
color: rgba(255, 255, 255, 0.42);
font-family: Georgia, "Times New Roman", serif;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.service-content {
display: grid;
grid-template-columns: 175px minmax(230px, 0.8fr) 1fr;
align-items: center;
gap: 35px;
}
.service-tag {
color: rgba(255, 255, 255, 0.48);
font-size: 10px;
letter-spacing: 0.09em;
}
.service-content h3 {
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(21px, 2.2vw, 29px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
}
.service-content > p:last-child {
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
line-height: 2;
}
.service-arrow {
position: absolute;
right: 15px;
top: 50%;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--rose);
transform: translateY(-50%);
transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.features {
background: var(--cream);
}
.split-title {
display: grid;
grid-template-columns: 0.55fr 1fr;
align-items: start;
gap: 60px;
}
.split-title h2 {
color: var(--forest-deep);
}
.feature-grid {
margin-top: 72px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.feature-grid article {
min-height: 345px;
padding: 44px 42px;
border-right: 1px solid var(--line);
transition: background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.feature-grid article:first-child {
border-left: 1px solid var(--line);
}
.feature-grid article > span {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
}
.feature-grid h3 {
margin-top: 38px;
color: var(--forest);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 26px;
font-weight: 500;
line-height: 1.65;
letter-spacing: 0.07em;
}
.feature-grid p {
margin-top: 26px;
color: #68746e;
font-size: 12px;
line-height: 2;
}
.about {
background: var(--forest);
color: white;
}
.about-grid {
display: grid;
grid-template-columns: minmax(380px, 0.9fr) 1fr;
align-items: center;
gap: clamp(70px, 10vw, 140px);
}
.about-frame {
position: relative;
aspect-ratio: 0.9;
overflow: hidden;
background: var(--sage);
color: var(--forest);
box-shadow: -28px 28px 0 var(--rose-pale);
}
.about-frame::after {
content: "";
position: absolute;
inset: 38px;
border: 1px solid rgba(23, 79, 61, 0.25);
}
.about-initial {
position: absolute;
left: 50%;
top: 42%;
color: rgba(23, 79, 61, 0.11);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(180px, 22vw, 310px);
line-height: 0.8;
transform: translate(-50%, -50%);
}
.about-name-ja {
position: absolute;
z-index: 2;
left: 52px;
bottom: 78px;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(37px, 4.2vw, 56px);
font-weight: 700;
line-height: 1.08;
letter-spacing: 0.12em;
}
.about-caption {
position: absolute;
z-index: 2;
right: 22px;
top: 45%;
font-family: Georgia, "Times New Roman", serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.3em;
writing-mode: vertical-rl;
}
.about-flower {
position: absolute;
z-index: 1;
display: block;
width: 92px;
height: 128px;
border: 1px solid rgba(23, 79, 61, 0.25);
border-radius: 80% 10% 75% 15%;
}
.flower-one {
right: 45px;
top: 56px;
transform: rotate(34deg);
}
.flower-two {
right: 100px;
top: 100px;
transform: rotate(69deg) scale(0.72);
}
.about-copy h2 {
margin-top: 33px;
color: white;
}
.about-copy > p:not(.section-label):not(.emblem-note) {
margin-top: 30px;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 2.15;
}
.profile-list {
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.profile-list div {
padding-block: 13px;
display: grid;
grid-template-columns: 110px 1fr;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 11px;
}
.profile-list dt {
color: rgba(255, 255, 255, 0.42);
}
.profile-list dd {
color: rgba(255, 255, 255, 0.9);
}
.emblem-note {
margin-top: 18px;
color: rgba(255, 255, 255, 0.48);
font-size: 10px;
}
.fees {
background: var(--paper);
}
.fees-grid {
display: grid;
grid-template-columns: 0.76fr 1fr;
gap: clamp(60px, 9vw, 130px);
}
.fees-intro h2 {
margin-top: 32px;
color: var(--forest-deep);
}
.fees-intro > p:not(.section-label) {
margin-top: 30px;
color: #66736d;
font-size: 13px;
line-height: 2.05;
}
.fees-intro .fee-small {
font-size: 10px !important;
line-height: 1.8 !important;
}
.fee-table {
align-self: start;
border-top: 2px solid var(--forest);
}
.fee-row {
min-height: 78px;
padding: 19px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border-bottom: 1px solid var(--line);
}
.fee-row span {
font-size: 13px;
}
.fee-row strong {
color: var(--forest);
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 18px;
white-space: nowrap;
}
.fee-consult {
margin-top: 20px;
padding: 25px 28px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--sage);
color: var(--forest);
}
.fee-consult span {
font-size: 12px;
font-weight: 700;
}
.fee-consult strong {
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 24px;
}
.flow {
position: relative;
background: var(--forest-deep);
color: white;
}
.flow-heading h2 {
color: white;
}
.flow-list {
margin: 70px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
list-style: none;
}
.flow-list li {
position: relative;
min-height: 290px;
padding: 36px 25px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
transition: background 220ms ease;
}
.flow-list li:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.flow-list li:not(:last-child)::after {
content: "→";
position: absolute;
z-index: 2;
right: -13px;
top: 48px;
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--rose);
color: var(--forest-deep);
font-size: 11px;
}
.flow-number {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
}
.flow-list h3 {
margin-top: 38px;
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 19px;
font-weight: 500;
letter-spacing: 0.07em;
}
.flow-list p {
margin-top: 22px;
color: rgba(255, 255, 255, 0.58);
font-size: 11px;
line-height: 2;
}
.voice {
background: var(--rose-pale);
}
.voice-heading {
display: grid;
grid-template-columns: 0.5fr 1fr;
align-items: start;
gap: 70px;
}
.voice-heading h2 {
color: var(--forest-deep);
}
.voice-grid {
margin-top: 70px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.voice-grid figure {
position: relative;
min-height: 300px;
padding: 52px 48px 42px;
background: var(--paper);
border-top: 3px solid var(--forest);
transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.voice-grid figure::before {
content: "“";
position: absolute;
right: 30px;
top: 8px;
color: var(--sage);
font-family: Georgia, "Times New Roman", serif;
font-size: 92px;
line-height: 1;
}
.voice-grid blockquote {
position: relative;
z-index: 1;
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 18px;
line-height: 2;
}
.voice-grid figcaption {
margin-top: 38px;
padding-top: 22px;
display: flex;
flex-direction: column;
border-top: 1px solid var(--line);
}
.voice-grid figcaption strong {
font-size: 12px;
}
.voice-grid figcaption span {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
}
.faq {
background: var(--paper);
}
.faq-grid {
display: grid;
grid-template-columns: 0.6fr 1fr;
gap: clamp(60px, 9vw, 130px);
}
.faq h2 {
margin-top: 32px;
color: var(--forest-deep);
}
.faq-list {
border-top: 2px solid var(--forest);
}
.faq-list details {
border-bottom: 1px solid var(--line);
}
.faq-list summary {
min-height: 84px;
padding: 22px 8px;
display: grid;
grid-template-columns: 34px 1fr 24px;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
list-style: none;
transition: background 180ms ease, color 180ms ease;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary span {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
}
.faq-list summary i {
color: var(--forest);
font-size: 18px;
font-style: normal;
transition: transform 180ms ease;
}
.faq-list details[open] summary i {
transform: rotate(45deg);
}
.faq-list details > p {
padding: 0 35px 26px 54px;
color: #66736d;
font-size: 12px;
line-height: 2;
}
.contact {
position: relative;
overflow: hidden;
background: var(--forest);
color: white;
}
.contact-inner {
position: relative;
z-index: 2;
}
.contact h2 {
margin-top: 28px;
font-size: clamp(42px, 5.5vw, 72px);
}
.contact-inner > p:not(.section-label) {
margin-top: 28px;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 2.1;
}
.contact-actions {
margin-top: 52px;
display: grid;
grid-template-columns: 1fr 0.58fr;
gap: 18px;
}
.contact-phone,
.contact-address {
min-height: 170px;
padding: 34px 40px;
}
.contact-phone {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--paper);
color: var(--forest);
transition: transform 180ms ease;
}
.contact-phone:hover,
.contact-phone:focus-visible {
transform: translateY(-3px);
}
.contact-phone small {
color: var(--muted);
font-size: 10px;
letter-spacing: 0.1em;
}
.contact-phone strong {
margin-top: 5px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(35px, 4vw, 52px);
line-height: 1.15;
letter-spacing: 0.06em;
}
.contact-phone span {
position: absolute;
right: 35px;
bottom: 30px;
color: var(--rose);
font-size: 11px;
font-weight: 700;
}
.contact-address {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.22);
}
.contact-address > span {
color: var(--rose-pale);
font-family: Georgia, "Times New Roman", serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
}
.contact-address p {
margin-top: 15px;
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 18px;
line-height: 1.7;
}
.contact-address small {
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
}
.contact-orbit {
position: absolute;
right: -250px;
top: -230px;
width: 700px;
height: 700px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 52% 48% 41% 59%;
transform: rotate(18deg);
}
.contact-orbit::after {
content: "";
position: absolute;
inset: 90px;
border: 1px solid rgba(214, 166, 173, 0.24);
border-radius: 43% 57% 55% 45%;
}
.site-footer {
padding: 74px 0 28px;
background: #092a22;
color: white;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.footer-mark .wordmark-en {
color: white;
}
.footer-mark .wordmark-ja {
color: white;
}
.footer-grid > div > p {
margin-top: 25px;
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
}
.footer-grid nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 28px;
}
.footer-grid nav a {
padding-block: 5px;
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
}
.footer-grid nav a:hover,
.footer-grid nav a:focus-visible {
color: white;
}
.footer-bottom {
margin-top: 60px;
padding-top: 22px;
display: flex;
justify-content: space-between;
gap: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.35);
font-size: 9px;
letter-spacing: 0.08em;
}
.mobile-call {
display: none;
} .detail-hero {
position: relative;
overflow: hidden;
background: var(--sage-pale);
}
.detail-hero-inner {
position: relative;
z-index: 2;
min-height: 520px;
padding-block: 54px 84px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.breadcrumbs {
position: absolute;
top: 36px;
left: 0;
display: flex;
flex-wrap: wrap;
gap: 9px;
color: var(--muted);
font-size: 10px;
}
.breadcrumbs a {
border-bottom: 1px solid var(--line);
}
.detail-number {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
}
.detail-audience {
margin-top: 18px;
color: var(--forest);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
}
.detail-hero h1 {
margin-top: 18px;
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(44px, 6vw, 76px);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.06em;
}
.detail-lead {
margin-top: 25px;
color: #4a5d56;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 18px;
}
.detail-orbit {
position: absolute;
right: -120px;
top: -180px;
width: 560px;
height: 560px;
border: 1px solid rgba(23, 79, 61, 0.13);
border-radius: 47% 53% 45% 55%;
transform: rotate(24deg);
}
.detail-orbit::after {
content: "";
position: absolute;
inset: 90px;
border: 1px solid rgba(214, 166, 173, 0.35);
border-radius: 55% 45% 52% 48%;
}
.detail-two-column,
.detail-fee-grid {
display: grid;
grid-template-columns: 0.78fr 1fr;
align-items: start;
gap: clamp(60px, 9vw, 130px);
}
.detail-two-column h2,
.detail-section-heading h2,
.detail-fee-grid h2,
.detail-related h2 {
margin-top: 30px;
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(34px, 3.7vw, 52px);
font-weight: 500;
line-height: 1.55;
letter-spacing: 0.06em;
}
.detail-prose p {
color: #59665f;
font-size: 14px;
line-height: 2.25;
}
.detail-prose p + p {
margin-top: 25px;
}
.detail-work {
background: var(--forest-deep);
color: white;
}
.detail-section-heading {
display: grid;
grid-template-columns: 0.6fr 1fr;
align-items: start;
gap: 60px;
}
.detail-section-heading h2 {
margin-top: 0;
color: white;
}
.work-grid {
margin-top: 68px;
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.work-grid article {
min-height: 270px;
padding: 38px 40px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background 220ms ease;
}
.work-grid article > span {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
}
.work-grid h3 {
margin-top: 27px;
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 24px;
font-weight: 500;
}
.work-grid p {
margin-top: 20px;
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
line-height: 2;
}
.detail-fees {
background: var(--paper);
}
.detail-fee-copy {
margin-top: 28px;
color: #66736d;
font-size: 13px;
line-height: 2;
}
.detail-fee-row {
min-height: 92px;
padding: 22px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border-bottom: 1px solid var(--line);
transition: background 180ms ease, padding-inline 180ms ease;
}
.detail-fee-row > div {
display: flex;
flex-direction: column;
}
.detail-fee-row span {
font-size: 13px;
}
.detail-fee-row small {
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}
.detail-fee-row strong {
color: var(--forest);
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 18px;
white-space: nowrap;
}
.fee-notice {
margin-top: 20px;
color: var(--muted);
font-size: 10px;
line-height: 1.8;
}
.detail-documents {
background: var(--cream);
}
.document-list {
margin: 0;
padding: 0;
border-top: 2px solid var(--forest);
list-style: none;
}
.document-list li {
position: relative;
padding: 20px 10px 20px 38px;
border-bottom: 1px solid var(--line);
font-size: 13px;
transition: background 180ms ease, padding-left 180ms ease;
}
.document-list li::before {
content: "✓";
position: absolute;
left: 8px;
color: var(--rose);
font-weight: 700;
}
.document-note {
margin-top: 22px;
color: var(--muted);
font-size: 11px;
}
.detail-related {
background: var(--forest);
color: white;
}
.detail-related h2 {
color: white;
}
.related-grid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.related-grid a {
min-height: 145px;
padding: 24px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 15px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background 200ms ease, color 200ms ease;
}
.related-grid span {
color: var(--rose);
font-family: Georgia, "Times New Roman", serif;
}
.related-grid strong {
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 16px;
font-weight: 500;
}
.related-grid i {
color: var(--rose-pale);
font-style: normal;
}
.detail-contact {
padding-block: 110px;
}
@media (max-width: 1100px) {
.desktop-nav {
gap: 16px;
}
.desktop-nav a {
font-size: 11px;
}
.header-contact {
padding-inline: 20px;
}
.hero-grid {
grid-template-columns: 1.1fr 0.78fr;
gap: 50px;
}
.service-card {
grid-template-columns: 170px 1fr;
}
.service-content {
grid-template-columns: 140px minmax(220px, 0.9fr) 1fr;
gap: 25px;
}
.flow-list {
grid-template-columns: repeat(3, 1fr);
}
.flow-list li:nth-child(3) {
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.flow-list li:nth-child(n + 4) {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.flow-list li:nth-child(3)::after {
display: none;
}
}
@media (max-width: 900px) {
:root {
--shell: min(100% - 38px, 720px);
}
.section-pad {
padding-block: 92px;
}
.desktop-nav,
.header-contact {
display: none;
}
.header-inner {
min-height: 76px;
}
.mobile-menu {
position: relative;
margin-left: auto;
display: block;
}
.mobile-menu summary {
width: 48px;
height: 48px;
display: grid;
place-content: center;
gap: 7px;
background: var(--forest);
cursor: pointer;
list-style: none;
}
.mobile-menu summary::-webkit-details-marker {
display: none;
}
.mobile-menu summary span {
width: 21px;
height: 1px;
display: block;
background: white;
}
.mobile-menu nav {
position: absolute;
right: 0;
top: 56px;
width: min(80vw, 320px);
padding: 18px 24px;
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 18px 45px rgba(13, 58, 45, 0.16);
}
.mobile-menu nav a {
padding: 10px 2px;
border-bottom: 1px solid var(--line);
font-size: 12px;
font-weight: 700;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 70px;
padding-block: 72px 100px;
}
.hero-copy {
max-width: 680px;
}
.hero-panel {
width: min(520px, calc(100% - 30px));
min-height: 440px;
margin-left: auto;
}
.hero-side-label {
display: none;
}
.intro-grid,
.section-heading,
.split-title,
.voice-heading,
.faq-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.section-heading {
margin-bottom: 55px;
}
.section-heading > p:last-child {
max-width: 500px;
}
.service-card {
grid-template-columns: 135px 1fr;
}
.service-content {
grid-template-columns: 1fr;
gap: 8px;
}
.service-tag {
order: 2;
}
.service-content > p:last-child {
order: 3;
}
.feature-grid {
grid-template-columns: 1fr;
}
.feature-grid article,
.feature-grid article:first-child {
min-height: auto;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.feature-grid article:last-child {
border-bottom: 0;
}
.about-grid {
grid-template-columns: minmax(0, 520px);
justify-content: center;
gap: 90px;
}
.fees-grid {
grid-template-columns: 1fr;
gap: 65px;
}
.voice-grid {
grid-template-columns: 1fr;
}
.detail-two-column,
.detail-fee-grid,
.detail-section-heading {
grid-template-columns: 1fr;
gap: 35px;
}
.related-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
:root {
--shell: calc(100% - 32px);
}
html {
scroll-padding-top: 74px;
}
body {
padding-bottom: 72px;
}
.section-pad {
padding-block: 74px;
}
.topline {
display: none;
}
.site-header {
top: 0;
}
.header-inner {
min-height: 72px;
}
.wordmark {
min-width: 0;
gap: 8px;
}
.wordmark-emblem {
width: 39px;
height: 39px;
}
.wordmark-ja {
font-size: 13px;
letter-spacing: 0.04em;
}
.hero-grid {
min-height: 0;
padding-block: 60px 84px;
gap: 58px;
}
.eyebrow {
margin-bottom: 22px;
font-size: 9px;
}
.eyebrow::before {
width: 26px;
}
.hero h1 {
font-size: clamp(39px, 11vw, 55px);
line-height: 1.46;
}
.hero-lead {
margin-top: 24px;
font-size: 14px;
}
.desktop-only {
display: none;
}
.hero-actions {
margin-top: 30px;
align-items: stretch;
flex-direction: column;
gap: 22px;
}
.button {
width: 100%;
}
.phone-link strong {
font-size: 22px;
}
.trust-list {
gap: 9px 18px;
flex-wrap: wrap;
}
.trust-list li {
font-size: 9px;
}
.hero-panel {
width: calc(100% - 18px);
min-height: 420px;
padding: 45px 30px 38px;
box-shadow: 18px 18px 0 var(--sage);
}
.hero-panel-title {
font-size: 40px;
}
.hero-panel-text {
font-size: 12px;
}
.hero-orbit-two {
left: auto;
right: -80px;
}
.section-label {
gap: 10px;
font-size: 9px;
}
.section-label::before {
width: 24px;
}
.statement,
.section-heading h2,
.split-title h2,
.about-copy h2,
.fees-intro h2,
.voice-heading h2,
.faq h2 {
font-size: 32px;
}
.intro-text {
font-size: 13px;
}
.service-card {
min-height: 0;
padding: 30px 48px 30px 0;
grid-template-columns: 1fr;
gap: 18px;
}
.service-card:hover {
padding-left: 12px;
}
.service-index {
gap: 13px;
}
.service-index span {
font-size: 25px;
}
.service-content h3 {
font-size: 22px;
}
.service-arrow {
right: 1px;
width: 34px;
height: 34px;
}
.feature-grid {
margin-top: 50px;
}
.feature-grid article {
padding: 34px 28px;
}
.feature-grid h3 {
margin-top: 22px;
font-size: 23px;
}
.about-grid {
gap: 75px;
}
.about-frame {
box-shadow: -16px 16px 0 var(--rose-pale);
}
.about-frame::after {
inset: 24px;
}
.about-name-ja {
left: 34px;
bottom: 52px;
font-size: 34px;
}
.profile-list div {
grid-template-columns: 83px 1fr;
gap: 10px;
}
.fee-row {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.fee-consult {
padding: 21px 20px;
}
.fee-consult strong {
font-size: 20px;
}
.flow-list {
grid-template-columns: 1fr;
}
.flow-list li,
.flow-list li:first-child {
min-height: 0;
padding: 30px 28px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.flow-list li:nth-child(n + 4) {
border-top: 0;
}
.flow-list li:not(:last-child)::after {
right: 24px;
top: auto;
bottom: -13px;
content: "↓";
display: grid;
}
.flow-list li:last-child::after {
content: none;
}
.flow-list h3 {
margin-top: 20px;
}
.voice-grid figure {
min-height: 0;
padding: 40px 28px 32px;
}
.voice-grid blockquote {
font-size: 16px;
}
.faq-list summary {
grid-template-columns: 27px 1fr 18px;
font-size: 12px;
}
.faq-list details > p {
padding: 0 18px 24px 41px;
}
.contact h2 {
font-size: 40px;
}
.contact-actions {
grid-template-columns: 1fr;
}
.contact-phone,
.contact-address {
min-height: 150px;
padding: 28px 24px;
}
.contact-phone strong {
font-size: 32px;
}
.contact-phone span {
right: 24px;
bottom: 22px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
.mobile-call {
position: fixed;
z-index: 40;
left: 0;
right: 0;
bottom: 0;
min-height: 72px;
padding: 10px 22px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--forest-deep);
color: white;
box-shadow: 0 -8px 24px rgba(9, 42, 34, 0.2);
}
.mobile-call span {
color: var(--rose-pale);
font-size: 11px;
font-weight: 700;
}
.mobile-call strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
letter-spacing: 0.05em;
}
.detail-hero-inner {
min-height: 430px;
padding-block: 75px 62px;
}
.breadcrumbs {
top: 24px;
}
.detail-hero h1 {
font-size: 39px;
}
.detail-lead {
font-size: 15px;
line-height: 1.8;
}
.detail-two-column h2,
.detail-section-heading h2,
.detail-fee-grid h2,
.detail-related h2 {
font-size: 31px;
}
.work-grid {
grid-template-columns: 1fr;
margin-top: 45px;
}
.work-grid article {
min-height: 0;
padding: 32px 28px;
}
.detail-fee-row {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.related-grid a {
min-height: 110px;
}
.detail-contact {
padding-block: 78px;
}
}
.motion-enabled .reveal-item {
opacity: 0;
translate: 0 26px;
}
.motion-enabled .reveal-item.is-visible {
animation: reveal-up 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-up {
to {
opacity: 1;
translate: 0 0;
}
}
@media (hover: hover) and (pointer: fine) {
.service-card:hover,
.service-card:focus-visible {
background: rgba(214, 166, 173, 0.12);
}
.service-card:hover .service-arrow,
.service-card:focus-visible .service-arrow {
background: var(--rose);
border-color: var(--rose);
color: var(--forest-deep);
transform: translateY(-50%) scale(1.08);
}
.feature-grid article:hover {
background: var(--paper);
box-shadow: 0 18px 42px rgba(13, 58, 45, 0.1);
transform: translateY(-6px);
}
.flow-list li:hover,
.work-grid article:hover {
background: rgba(214, 166, 173, 0.1);
}
.voice-grid figure:hover {
border-color: var(--rose);
box-shadow: 0 18px 42px rgba(13, 58, 45, 0.1);
transform: translateY(-6px);
}
.faq-list summary:hover,
.faq-list summary:focus-visible {
background: var(--sage-pale);
color: var(--forest);
}
.detail-fee-row:hover {
padding-inline: 14px;
background: var(--sage-pale);
}
.document-list li:hover {
padding-left: 46px;
background: rgba(255, 253, 248, 0.78);
}
.related-grid a:hover,
.related-grid a:focus-visible {
background: rgba(214, 166, 173, 0.16);
}
.contact-phone:hover,
.contact-phone:focus-visible {
background: var(--rose-pale);
}
}
:where(a, summary):focus-visible {
outline: 3px solid var(--rose);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.motion-enabled .reveal-item,
.motion-enabled .reveal-item.is-visible {
opacity: 1;
translate: none;
animation: none;
}
} body.admin-bar .site-header {
top: 32px;
}
.detail-page-content,
.detail-page-content > section {
margin: 0;
}
.content-page {
min-height: 60vh;
background: var(--paper);
}
.content-narrow {
max-width: 840px;
}
.content-page h1 {
margin-top: 28px;
color: var(--forest-deep);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: clamp(38px, 5vw, 60px);
font-weight: 500;
line-height: 1.5;
}
.entry-content,
.content-page > .shell > p,
.post-list {
margin-top: 36px;
color: #59665f;
}
.entry-content > * + *,
.post-list article + article {
margin-top: 24px;
}
.post-list article {
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.post-list h2 {
margin-top: 6px;
color: var(--forest);
font-family: "Yu Mincho", "YuMincho", serif;
font-size: 24px;
}
@media screen and (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
}