@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
	--navy: #05245D;
	--yellow: #f7cf00;
	--gold: #AB9100;
	--line: #39c94a;
	--content-width: 112rem;
	--header-height: 8rem;
}

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

html {
	font-size: calc(100vw / 128);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: #fff;
	background: var(--navy);
	font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 500;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Shared layout and section components */
.l-inner {
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

.section-eyebrow {
	margin: 0;
	color: var(--gold);
	font-family: Arial, sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
}

.section-title {
	margin: 2.8rem 0 0;
	color: var(--navy);
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 3.6rem;
	font-weight: 900;
	text-align: center;
}

.three-column-grid,
.cta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.cta-grid {
	gap: 1.6rem;
}

.cta-grid--dark-tel .contact-card--tel {
	color: #fff;
	background: var(--navy);
}

.cta-grid--dark-tel .contact-card--tel img {
	filter: brightness(0) invert(1);
}

.site-header {
	position: fixed;
	z-index: 100;
	inset: 0 0 auto;
	height: var(--header-height);
	color: var(--navy);
	background: #fff;
	box-shadow: 0 0.2rem 0.8rem rgb(0 0 0 / 8%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2.4rem, 128rem);
	height: 100%;
	margin-inline: auto;
}

.site-header__logo {
	width: 28.2rem;
    margin-top: -0.5rem;
}

.site-header__logo picture,
.site-header__logo img {
	display: block;
	width: 100%;
}

.site-header__actions,
.header-tel,
.header-button {
	display: flex;
	align-items: center;
}

.site-header__actions {
	gap: 1rem;
}

.header-tel {
	gap: 0.56rem;
	margin-right: 0.56rem;
	font-family: Arial, sans-serif;
	font-size: 3.2rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.header-tel img {
	width: 2.4rem;
}

.header-tel:hover{ 
	opacity: 0.6;
}

.header-button {
	justify-content: center;
	height: 4rem;
	padding-inline: 2.16rem;
	border-radius: 999px;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 0.5s 0.5s,
		color 0.5s;
}

.header-button--mail {
	color: #fff;
	background: var(--gold);
	gap: 2.4rem;
    border: 0.2rem solid var(--gold);
}

.header-button--mail:hover {
	background: #fff;
	color: var(--gold);
}

.header-button--line {
    color: var(--line);
	background: #fff;
	gap: 0.7rem;
    border: 0.2rem solid var(--line);
}

.header-button--line:hover {
	background: var(--line);
	color: #FFF;
}


.header-button__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.header-button__icon-image {
	display: block;
	width: 100%;
	transition: opacity;
}

.header-button__icon-image--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.header-button:hover .header-button__icon-image--default {
	opacity: 0;
}

.header-button:hover .header-button__icon-image--hover {
	opacity: 1;
}

.header-button--mail .header-button__icon {
	width: 2.5rem;
}

.header-button--line .header-button__icon {
	width: 2rem;
}

.fixed-sp-cta {
	display: none;
}

.hero {
	min-height: 92.8rem;
	padding: calc(var(--header-height) + 4.6rem) 2.4rem 6rem;
	background: var(--navy);
}

.hero__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 50rem;
	gap: 6.6rem;
}

.hero__copy {
	padding-top: 1.12rem;
}

.hero h1 {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	line-height: 1;
}

.hero__city {
    background: linear-gradient(
        to bottom,
        #F2CD00 0%,
        #9F8600 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
	font-size: 10.2rem;
	font-weight: 700;
	letter-spacing: 0.025em;
}

.hero__city-en {
	color: #426198;
	font-size: 4.3rem;
}

.hero__lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	margin: 4.2rem 0 0;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 2.5rem;
	text-align: center;
}

.hero__lead-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.28rem;
	width: 100%;
	white-space: nowrap;
}

.hero__lead-line img {
    width: 2.6rem;
}

.hero__lead-main {
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
}

.hero__trust {
	display: flex;
	align-items: flex-end;
    gap: 2rem;
	margin-top: 3rem;
}

.hero__trust > img:not(.hero__partnership) {
	width: 10.3rem;
}

.hero__partnership {
	width: 27.5rem;
    margin-left: -0.7rem;
}

.hero__description {
    width: 110%;
	margin: 6.5rem 0 0;
	font-size: 1.8rem;
	line-height: 1.6;
    font-weight: 400;
}

.hero__promise {
	margin: 3.04rem 0 0;
	font-size: 2.4rem;
    font-weight: 500;
}

.hero__promise em {
	color: var(--yellow);
	font-style: normal;
}

.hero__visual {
	display: flex;
	flex-direction: column;
	gap: 2.64rem;
}

.hero__photo {
	width: 50rem;
	aspect-ratio: 2012 / 1504;
	object-fit: cover;
}

.hero__map {
	display: grid;
	place-items: center;
	width: 50rem;
	height: 27.6rem;
	overflow: hidden;
	background: #fff;
	border-radius: 2rem;
	font-size: 1.6rem;
	font-weight: 400;
}

.hero__map iframe {
    width: 100%;
    height: 100%;
}


.hero__cta {
	margin-top: 4rem;
}

.contact-card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11.4rem;
	border-radius: 2rem;
    color: #FFF;
}

.contact-card--tel {
	flex-direction: column;
	color: var(--navy);
	background: #fff;
}

.contact-card--tel > small {
	font-size: 1.6rem;
}

.worry__cta__tel,
.contact-card__phone {
	display: flex;
	align-items: center;
	font-family: Arial, sans-serif;
    font-size: 3.8rem!important;
	font-weight: 700;
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

.worry__cta__tel img,
.contact-card__phone img {
	width: 3rem;
}

.contact-card--tel > span {
    flex-direction: initial!important;
	font-size: 1.6rem;
    line-height: 1.2;
}

.worry__cta__tel {
    line-height: 1.2!important;
}

.contact-card--mail {
	gap: 2.72rem;
	background: var(--gold);
}

.contact-card--line {
	gap: 2.32rem;
	background: var(--line);
}

.contact-card--mail > img {
	width: 3.4rem;
    margin-bottom: 2rem;
}

.contact-card--line > img {
	width: 2.6rem;
    margin-bottom: 2rem;
}

.contact-card > span {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-card__label {
	font-size: 2.4rem;
}

.contact-card > span small {
	margin-top: 0.56rem;
	font-size: 1.6rem;
    font-weight: 500;
}

.worry {
	padding: 11.4rem 2.4rem 10rem;
	color: #333;
	background: #f1eee7;
}

.worry__eyebrow {
	color: #b79a00;
	font-size: 1.8rem;
}

.worry h2 {
	margin: 2rem 0 0;
	font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.worry__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem 5.2rem;
	margin: 5.36rem 0 0;
	padding: 0;
	list-style: none;
}

.worry__list li {
	display: flex;
	gap: 1.6rem;
	padding: 1.5rem 2.6rem;
    color: #555555;
	background: #fff;
	border-radius: 2rem;
	font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 500;
}

.worry__list li:last-child {
	grid-row: 5;
	grid-column: 1;
}

.worry__list img {
	flex: 0 0 auto;
	width: 2.8rem;
	height: 2.8rem;
    margin-top: 0.3rem;
}

.worry__note {
	margin: 5.5rem 0 0;
	color: #111;
	font-size: 1.8rem;
	line-height: 2;
	text-align: center;
}

.worry__note span {
    color: #05245D;
}

.worry__cta {
	margin-top: 6.72rem;
}

.inheritance-law {
	min-height: 71.04rem;
	padding: 10.48rem 2.4rem 9.6rem;
	color: #222;
	background: #f8f7f3;
	border-top: 0.32rem solid #f0eee8;
}

.inheritance-law__alert {
	display: grid;
	place-items: center;
	width: fit-content;
	min-width: 37.7rem;
	height: 4.6rem;
	margin: 0 auto;
	padding-inline: 2.4rem;
	color: var(--navy);
	border: 0.16rem solid var(--navy);
	border-radius: 999px;
	font-size: 1.8rem;
}

.inheritance-law h2 {
	margin: 3.2rem 0 0;
	font-size: 3.6rem;
}

.inheritance-law__cards {
	gap: 1.8rem;
	margin-top: 4.8rem;
}

.law-card {
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 0 0.56rem 0.96rem rgb(0 0 0 / 14%);
}

.law-card__icon {
	display: grid;
	place-items: center;
	height: 12.4rem;
	color: #fff;
	background: var(--navy);
}

.law-card__icon img {
	height: 7.9rem;
    object-fit: contain;
}

.law-card__body {
	padding: 2rem 1.1rem 2rem 1.4rem;
}

.law-card__tag {
	margin: 0;
	color: #b99b00;
	font-size: 1.6rem;
	line-height: 1.3;
}

.law-card h3 {
	margin: 0.8rem 0 0;
	color: var(--navy);
	font-size: 2rem;
	line-height: 1.4;
}

.law-card__body > p:last-child {
	margin: 1.2rem 0 0;
	font-size: 1.6rem;
	line-height: 1.75;
}

.reason {
	min-height: 87.12rem;
	padding: 9.12rem 2.4rem 8.48rem;
	background: var(--navy);
}

.reason__eyebrow {
	color: var(--gold);
	font-size: 1.8rem;
}

.reason h2 {
	margin: 3.2rem 0 0;
	color: #fff;
	line-height: 1.5;
}

.reason__cards {
	gap: 1.8rem;
	margin-top: 6rem;
}

.reason-card {
	position: relative;
	min-width: 0;
	min-height: 47.84rem;
	padding: 2.08rem 1.6rem 2rem;
	background: #15346C;
	border-radius: 2rem;
}

.reason-card__number {
	position: absolute;
	top: -1.36rem;
	left: 50%;
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	color: var(--navy);
	background: var(--gold);
	border-radius: 50%;
	font-family: Arial, sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	transform: translateX(-50%);
}

.reason-card__visual {
	display: grid;
	place-items: center;
	height: 14.24rem;
	overflow: hidden;
	background: #fff;
	border-radius: 2rem;
}

.reason-card__visual img {
	width: 12.16rem;
	height: 11.2rem;
	object-fit: contain;
}

.reason-card__visual--kanden img {
	width: 94%;
	height: 11.84rem;
}

.reason-card h3 {
	margin: 3.2rem 0 2rem;
	font-size: 2rem;
	line-height: 1.5;
    font-weight: 500;
}

.reason-card > p {
	margin: 1.6rem 0 0;
	font-size: 1.6rem;
	line-height: 1.8;
}

.team {
	padding: 11.2rem 2.4rem 9.6rem;
	color: #111;
	background: #f8f7f3;
}

.team__professions {
	display: flex;
	justify-content: center;
	gap: 4rem;
	margin: 4.48rem 0 0;
	padding: 0;
	list-style: none;
}

.team__professions li {
	display: grid;
	place-items: center;
	width: 13.44rem;
	height: 13.44rem;
	color: #fff;
	background: #b99b00;
	border-radius: 50%;
	font-size: 1.84rem;
}

.team__lead {
	margin: 3.76rem 0 0;
	font-size: 1.8rem;
	text-align: center;
}

.team__services {
	gap: 1.8rem;
	margin-top: 3.6rem;
}

.service-card {
	padding: 2.08rem 1.84rem 2.4rem;
	background: #fff;
	border-top: 0.72rem solid var(--navy);
	border-radius: 2rem;
	box-shadow: 0 0.48rem 1.04rem rgb(0 0 0 / 14%);
}

.service-card h3 {
	margin: 0;
	color: var(--navy);
	font-size: 2rem;
}

.service-card ul {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0.88rem 1.04rem;
	margin: 2.16rem 0 0;
	padding: 0;
	list-style: none;
}

.service-card li {
	padding: 0.768rem 1.5rem;
	color: #766f5e;
	background: #efede5;
	border-radius: 999px;
	font-size: 1.4rem;
    font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.specialists {
	padding: 9.12rem 2.4rem 11.2rem;
	color: #111;
	background: #f1eee7;
}

.specialists__grid {
	gap: 3.52rem 1.8rem;
	margin-top: 5.92rem;
}

.specialist-card,
.specialists__more {
	height: 45.36rem;
	overflow: hidden;
	border-radius: 2rem;
	box-shadow: 0 0.48rem 1.04rem rgb(0 0 0 / 16%);
}

.specialists__more:hover {
	background: #FFF;
	color: var(--navy);
}

.specialist-card {
	background: #fff;
}

.specialist-card > img {
	width: 100%;
	height: 34.24rem;
	object-fit: cover;
    box-shadow: 0 0.3rem 0.6rem rgb(0 0 0 / 16%);
}

.specialist-card__body {
	padding: 2rem 2.24rem 1.6rem;
}

.specialist-card__body p {
	margin: 0;
	color: #b99b00;
	font-size: 1.6rem;
}

.specialist-card__body h3 {
	margin: 0.72rem 0 0;
	color: var(--navy);
	font-size: 2rem;
	line-height: 1.1;
}

.specialist-card__body span {
	display: block;
	margin-top: 0.72rem;
	color: #6b6b6b;
	font-family: Arial, sans-serif;
	font-size: 1.4rem;
    font-weight: 600;
}

.specialists__more {
	display: flex;
	flex-direction: column;
	justify-content: center;
    padding: 3.2rem 0 3.2rem 2.32rem;
	color: #fff;
	background: var(--navy);
}

.specialists__more p {
	margin: 0;
	font-size: 1.6rem;
	line-height: 2;
}

.specialists__more-link {
	display: block;
	margin-top: 2.88rem;
	color: #DEC328;
	font-size: 1.8rem;
	font-weight: 700;
}

.specialists__contact {
	margin-top: 11.2rem;
	text-align: center;
}

.specialists__summary {
	margin: 0;
	font-size: 2.4rem;
	line-height: 1.65;
}

.specialists__contact > h3 {
	margin: 3.6rem 0 0;
	color: var(--navy);
	font-size: 3.2rem;
}

.specialists__cta {
	margin-top: 4.8rem;
	text-align: left;
}

.specialists__evaluations {
	display: flex;
	justify-content: center;
	gap: 3.2rem;
	margin-top: 6.08rem;
}

.specialists__evaluations img {
	width: 17.4rem;
	height: 17.4rem;
	object-fit: contain;
}

.specialists__results {
	margin: 4.32rem 0 0;
	font-size: 2.4rem;
	line-height: 1.65;
    font-weight: bold;
}

.case-study {
	min-height: 76rem;
	padding: 8.96rem 2.4rem 5.44rem;
	color: #111;
	background: #f8f7f3;
}

.case-study h2,
.faq h2 {
	margin: 2.88rem 0 0;
}

.case-study__cards {
	gap: 1.8rem;
	margin-top: 2.24rem;
}

.case-card {
	/* height: 40.8rem; */
	overflow: hidden;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 0 0.56rem 1.04rem rgb(0 0 0 / 15%);
}

.case-card__image {
	height: 20.7rem;
}

.case-card__body {
	padding: 1.68rem 1.52rem 1.92rem;
}

.case-card__body > span {
	display: inline-block;
	padding: 0.72rem 1.44rem;
	color: #fff;
	background: #b99b00;
	border-radius: 999px;
	font-size: 1.6rem;
	line-height: 1;
}

.case-card h3 {
	margin: 1.2rem 0 0;
	color: var(--navy);
	font-size: 2rem;
	line-height: 1.45;
    font-weight: 500;
}

.case-card p {
	margin: 1.12rem 0 0;
	font-size: 1.6rem;
	line-height: 1.65;
    font-weight: 400;
}

.case-study__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 18.88rem;
	height: 4.16rem;
	margin: 4rem auto 0;
	padding-inline: 3.2rem 1.6rem;
	color: var(--navy);
	background: #fff;
	border: 0.16rem solid var(--navy);
	border-radius: 999px;
	font-size: 1.4rem;
}

.case-review__more {
    width: 22.88rem;
    margin-top: 2rem;
}

.case-study__more:hover {
	color: #FFF;
	background: var(--navy);
}

.faq {
	min-height: 93.92rem;
	padding: 9.52rem 2.4rem 8.72rem;
	color: #111;
	background: #f1eee7;
}

.faq__list {
	display: grid;
	gap: 2.4rem;
	margin-top: 4.96rem;
}

.faq-card {
	min-height: 13.28rem;
	padding: 2.32rem 2.48rem;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 0 0.48rem 1.04rem rgb(0 0 0 / 14%);
}

.faq-card p {
	display: flex;
	align-items: center;
	gap: 1.44rem;
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.4;
}

.faq-card__answer {
	margin-top: 1.28rem !important;
	font-weight: 500;
}

.faq-card p > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	color: #fff;
	background: var(--navy);
	border-radius: 50%;
	font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 2.3rem;
	font-weight: 700;
    padding-bottom: 0.4rem;
}

.faq-card__answer span {
	background: #b99b00 !important;
}

.faq-card__question-text {
	color: var(--navy);
}

.flow {
	padding: 9.28rem 2.4rem 10.4rem;
	color: #222;
	background: #f8f7f3;
}

.flow__cta {
    margin-top: 5.12rem;
}

.flow__eyebrow {
	letter-spacing: normal;
}

.flow h2 {
	letter-spacing: normal;
}

.flow__lead {
	margin: 3.84rem 0 0;
	font-size: 1.84rem;
	text-align: center;
}

.flow__steps {
	display: grid;
	gap: 6.08rem;
	margin-top: 7.2rem;
}

.flow-step {
	position: relative;
	border: 0.1rem solid #ddd;
	background: #fff;
}

.flow-step:not(:last-child)::after {
	position: absolute;
	bottom: -4.4rem;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 1.44rem solid #333;
	border-right: 0.88rem solid transparent;
	border-left: 0.88rem solid transparent;
	content: "";
	transform: translateX(-50%);
}

.flow-step h3 {
	display: flex;
	align-items: center;
	height: 7.6rem;
	margin: 0;
	padding-inline: 4.64rem;
	color: #fff;
	background: var(--navy);
	font-size: 2rem;
}

.flow-step__body {
	min-height: 7.76rem;
	padding: 2.4rem 4.64rem;
}

.flow-step__body > p {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.8;
}

.flow-step--contact .flow-step__body {
	min-height: 20.8rem;
}

.flow-step__contact {
	display: grid;
	grid-template-columns: 1fr 0.75fr;
	align-items: center;
	gap: 4.8rem;
	margin-top: 2.56rem;
}

.flow-step__phone {
	display: flex;
	align-items: center;
	gap: 3.2rem;
}

.flow-step__phone-number {
	color: var(--navy);
	font-family: Arial, sans-serif;
	font-size: 2.88rem;
	font-weight: 700;
	white-space: nowrap;
}

.flow-step__phone-number img {
    display: inline-block;
    width: 2rem;
}

.flow-step__phone > span {
	font-size: 1.52rem;
	font-weight: 500;
}

.flow-step__phone small {
	display: block;
	margin-top: 0.72rem;
	color: #777;
	font-size: 1.12rem;
}

.flow-step__buttons {
	display: grid;
	gap: 1.6rem;
}

.flow-step__buttons a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.48rem;
	color: #fff;
	background: var(--gold);
    border: 1px solid var(--gold);
	border-radius: 999px;
	font-size: 1.44rem;
    max-width: 27rem;
}

.flow-step__buttons a:hover {
    color: var(--gold);
    background: #FFF;
}

.flow-step__buttons a:last-child {
	background: var(--line);
    border: 1px solid var(--line);
}

.flow-step__buttons a:last-child:hover {
    color: var(--line);
    background: #FFF;
}

.flow-step__buttons p {
    margin: 0;
    min-width: 20rem;
    text-align: center;
}

.area {
	min-height: 105.12rem;
	padding: 8.8rem 2.4rem 4.8rem;
	color: #111;
	background: #f1eee7;
	border-top: 0.24rem solid #ebe8e0;
}

.area__regions {
	min-height: 20.48rem;
	margin-top: 1.92rem;
	padding: 2.48rem 2.72rem 2.16rem;
	background: #fff;
	border-radius: 2rem;
}

.area__regions ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 1.28rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.area__regions li {
	padding: 1.04rem 2.64rem;
	color: #fff;
	background: var(--navy);
	border-radius: 999px;
	font-size: 1.44rem;
	line-height: 1;
	white-space: nowrap;
}

.area__regions .area__regions--primary {
	background: #b99b00;
}

.area__regions p {
	margin: 2.64rem 0 0;
	color: #777;
	font-size: 1.8rem;
	font-weight: 500;
}

.area__access {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.8rem;
	margin-top: 4.16rem;
}

.area__office,
.area__map {
	height: 38.4rem;
	background: #fff;
	border-radius: 2rem;
}

.area__office {
	padding: 3.52rem 4.24rem;
}

.area__office h3 {
	margin: 0;
	color: var(--navy);
	font-size: 2.4rem;
}

.area__office p {
	margin: 2rem 0 0;
	font-size: 1.8rem;
	line-height: 1.85;
}

.area__office p + p {
	margin-top: 2rem;
}

.area__office > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 22.8rem;
	height: 4.16rem;
	margin-top: 2.88rem;
	padding-inline: 2.88rem 1.44rem;
	color: var(--navy);
	border: 0.16rem solid var(--navy);
	border-radius: 999px;
	font-size: 1.6rem;
}

.area__office > a:hover {
    background: var(--navy);
    color: #FFF;
}

.area__office p a:hover {
	opacity: 0.6;
}

.area__map {
	display: grid;
	place-items: center;
	color: #aaa;
	font-size: 1.6rem;
	font-weight: 400;
}

.area__map iframe {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
}

.area__cta {
	margin-top: 5.12rem;
}

.area-page {
	padding-top: var(--header-height);
	background: #f1eee7;
}

.area-page-main {
	padding: 6.4rem 2.4rem 3.2rem;
	text-align: center;
}

.area-page-main__eyebrow {
	font-size: 1.8rem;
}

.area-page-main__title {
	margin: 2.4rem 0 0;
	color: var(--navy);
	font-size: 4rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.area-page-list-box {
	max-width: 112rem;
	margin: 3.2rem auto 0;
	padding: 4.4rem 4rem 4.6rem;
	background: #fff;
	border-radius: 2rem;
	text-align: left;
}

.area-page-list-box__note {
	margin: 0 0 0.4rem;
	color: #f00;
	font-size: 1.6rem;
	font-weight: 700;
}

.area-page-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.4rem 4rem;
}

.area-page-link {
	display: flex;
	align-items: flex-end;
	min-height: 9.6rem;
	padding: 2.7rem 2.8rem 2.7rem 4.4rem;
	color: var(--navy);
	background: #f1eee7;
	border-radius: 1.8rem;
	box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 16%);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.area-page-link:hover,
.area-page-link--active {
	color: #fff;
	background: var(--navy);
}

.area-page-link__ja {
	font-size: 4.2rem;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}

.area-page-link__en {
	margin-left: 2.4rem;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.area-page-link__arrow {
	margin-left: auto;
	font-size: 4rem;
	font-weight: 500;
	line-height: 1;
}

.area-page-proof {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	margin-top: 7rem;
}

.area-page-proof__badges {
	display: flex;
	align-items: center;
	gap: 2.4rem;
}

.area-page-proof__badges img {
	width: 17.5rem;
	height: 17.5rem;
	object-fit: contain;
}

.area-page-proof__partner {
	text-align: left;
}

.area-page-proof__partner p {
	margin: 0 0 1.2rem;
	color: var(--navy);
	font-size: 1.8rem;
	font-weight: 500;
}

.area-page-proof__partner img {
	width: 37.2rem;
	background: #fff;
}

.area-page-result-text {
	color: #000;
	margin: 4rem 0 0;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.7;
	text-align: center;
}

.area-page-result-text small {
	font-size: 1.6rem;
}

.area-page-bottom-cta {
	padding: 3.8rem 2.4rem 7.6rem;
	background: #f1eee7;
	text-align: center;
}

.area-page-bottom-cta h2 {
	margin: 0;
	color: var(--navy);
	font-size: 3.2rem;
	font-weight: 900;
	line-height: 1.5;
}

.area-page-cta {
	margin-top: 4rem;
}

.site-footer {
	color: #111;
	background: #fff;
}

.site-footer__main {
	min-height: 36.64rem;
	padding: 3.2rem 2.4rem 2.72rem;
}

.site-footer__logo {
	display: block;
	width: 26rem;
}

.site-footer__info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6.4rem;
	margin-top: 4.3rem;
}

.site-footer__info h2 {
	margin: 0;
	color: var(--navy);
	font-size: 1.8rem;
}

.site-footer__info p {
	margin: 1rem 0 0;
	font-size: 1.6rem;
	font-weight: 500;
}

.site-footer__button-box {
	margin-top: 2.64rem;
}

.site-footer__official-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4.32rem;
	width: 40.8rem;
	height: 5.2rem;
	color: #fff;
	background: var(--navy);
    border: 1px solid var(--navy);
	border-radius: 999px;
	font-size: 1.52rem;
}

.site-footer__official-button:hover {
    color: var(--navy);
    background: #FFF;
}

.site-footer__official-button p {
    margin: 0;
    min-width: 30rem;
    text-align: center;
}

.site-footer__company {
	min-height: 12rem;
	padding-left: 4rem;
	border-left: 0.16rem solid var(--navy);
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 7.04rem;
	color: #fff;
	background: var(--navy);
	font-weight: 500;
}

.site-footer__bottom a {
	font-size: 1.2rem;
}

.site-footer__bottom small {
	margin-top: 0.64rem;
	font-size: 1.2rem;
}

.sp {
	display: block;
}

@media (min-width: 769px) {
    .pc {
        display: block;
    }
	.sp {
		display: none;
	}
}

@media (hover: hover) {
	.site-header a,
	.contact-card {
		transition:
			opacity 0.2s ease,
			transform 0.2s ease;
	}

	/* .site-header a:hover,
	.contact-card:hover {
		opacity: 0.82;
	} */

	.contact-card:hover {
		transform: translateY(-0.5rem);
	}
}

@media (min-width: 1280px) {
	html {
		font-size: 10px;
	}
}

@media (max-width: 768px) {
    .pc {
        display: none;
    }

	html {
		font-size: calc(100vw / 39);
	}

	:root { --header-height: 6.8rem; }
	body {
		min-width: 0;
		padding-bottom: 6.4rem;
	}
	.l-inner { width: 100%; }
	.section-eyebrow { font-size: 1.5rem; }
	.section-title,
	.inheritance-law h2 {
		margin-top: 1.6rem;
		font-size: 2rem;
		line-height: 1.45;
	}
	.three-column-grid,
	.cta-grid,
	.worry__list,
	.hero__top,
	.area__access,
	.site-footer__info,
	.flow-step__contact { grid-template-columns: 1fr; }

	.site-header {
		box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 18%);
        height: 4.5rem;
	}
	.site-header__inner {
		justify-content: flex-start;
		width: 100%;
		padding-inline: 0.5rem;
	}
	.site-header__logo {
		width: min(26rem, 100%);
		margin-top: 0;
	}
	.site-header__actions { display: none; }

	.hero {
		min-height: 0;
		padding: calc(4.5rem + 2.2rem) 2rem 6rem;
		overflow: hidden;
	}
	.hero__top {
		display: grid;
		grid-template-columns: 13.5rem minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: 1.6rem;
		align-items: end;
	}
	.hero__copy,
	.hero__visual { display: contents; }
	.hero h1 {
		grid-column: 1;
		grid-row: 2;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 0.2rem;
		position: relative;
		z-index: 1;
	}
	.hero__city {
		font-size: 4.1rem;
		white-space: nowrap;
	}
	.hero__city-en {
		padding-left: 2.4rem;
		font-size: 1.15rem;
		letter-spacing: 0.25em;
	}
	.hero__lead {
		grid-column: 1 / -1;
		grid-row: 1;
		gap: 1rem;
		margin-top: 0;
		font-size: 1.5rem;
	}
	.hero__lead-line { gap: 0.8rem; white-space: nowrap; }
	.hero__lead-line img { width: 2rem; }
	.hero__lead-main { font-size: 2.44rem; }
	.hero__trust {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.6rem;
		height: auto;
		margin-top: -1rem;
	}
	.hero__trust > img:not(.hero__partnership) { width: 5.7rem; }
	.hero__partnership { width: 12.9rem; margin-left: 0; }
	.hero__photo {
		grid-column: 2;
		grid-row: 2 / span 2;
		align-self: start;
		justify-self: end;
		width: 52.2666666667vw;
		height: auto;
		aspect-ratio: 392 / 316;
		border-radius: 1.2rem;
	}
	.hero__map {
		grid-column: 1 / -1;
		grid-row: 4;
		width: 100%;
		height: 15rem;
		margin-top: 0.4rem;
		border-radius: 1.2rem;
	}
	.hero__description {
		grid-column: 1 / -1;
		grid-row: 5;
		width: 100%;
		margin-top: 0.2rem;
		font-size: 1.4rem;
		line-height: 1.55;
	}
	.hero__description br,
	.worry__list br,
	.worry__note br,
	.specialists__summary br,
	.specialists__results br { display: none; }
	.hero__promise {
		grid-column: 1 / -1;
		grid-row: 6;
		margin-top: 0.2rem;
		font-size: 2rem;
		line-height: 1.5;
		text-align: center;
	}
	.hero__cta {
		width: min(100%, 30.2rem);
		margin: 2.6rem auto 0;
	}

	.cta-grid { gap: 1.2rem; }
	.contact-card { height: 9.6rem; border-radius: 1.4rem; }
	.contact-card--tel > small,
	.contact-card--tel > span,
	.contact-card > span small { font-size: 1.3rem; line-height: 1.5; }
	.worry__cta__tel,
	.contact-card__phone { font-size: 3rem!important; }
	.contact-card__label { font-size: 2rem; line-height: 1.5; }
	.contact-card--mail,
	.contact-card--line { gap: 2rem; }
	.contact-card--mail > img,
	.contact-card--line > img { margin-bottom: 1.5rem; }

	.fixed-sp-cta {
		position: fixed;
		z-index: 160;
		left: 50%;
		bottom: 0;
		display: grid;
		grid-template-columns: 1.75fr 1fr 1fr;
		width: min(100%, 57.6rem);
		height: 4.4rem;
		transform: translateX(-50%);
		box-shadow: 0 -0.2rem 0.8rem rgb(0 0 0 / 10%);
	}
	.fixed-sp-cta__item {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-align: center;
	}
	.fixed-sp-cta__item--tel {
		flex-direction: column;
		color: var(--navy);
		background: #fff;
	}
	.fixed-sp-cta__item--tel span {
		position: relative;
		padding-left: 2.2rem;
		font-size: 2.1rem;
		font-weight: 700;
		line-height: 1;
	}
	.fixed-sp-cta__item--tel span::before {
		position: absolute;
		left: 0;
		top: 50%;
		width: 1.8rem;
		height: 1.8rem;
		background: url("./img/tel_icon.webp") center / contain no-repeat;
		content: "";
		transform: translateY(-50%);
	}
	.fixed-sp-cta__item--tel small {
		margin-top: 0.35rem;
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1;
	}
	.fixed-sp-cta__item--mail {
		flex-direction: column;
		gap: 0.45rem;
		background: var(--gold);
	}
	.fixed-sp-cta__item--line {
		flex-direction: column;
		gap: 0.45rem;
		background: var(--line);
	}
	.fixed-sp-cta__item--mail img { width: 1.8rem; }
	.fixed-sp-cta__item--line img { width: 1.3rem; }
	.fixed-sp-cta__item span {
		font-size: 1.05rem;
		font-weight: 500;
		line-height: 1;
	}

    .fixed-sp-cta__item--tel span {
        font-size: 1.9rem;
    }

	.worry,
	.inheritance-law,
	.reason,
	.team,
	.specialists,
	.case-study,
	.faq,
	.flow,
	.area {
		min-height: 0;
		padding: 5rem 2rem;
	}
	.worry h2,
	.reason h2 { margin-top: 1.6rem; }
	.worry__list { gap: 1.2rem; margin-top: 3.2rem; }
	.worry__list li,
	.worry__list li:last-child {
		grid-row: auto;
		grid-column: auto;
		gap: 1.2rem;
		padding: 1.5rem;
		font-size: 1.6rem;
		border-radius: 1.4rem;
	}
	.worry__list img { width: 2.2rem; height: 2.2rem; }
	.worry__note {
		margin-top: 3.2rem;
		font-size: 1.6rem;
		line-height: 1.8;
		text-align: left;
	}
	.worry__cta { margin-top: 4rem; }

	.inheritance-law__alert {
		width: 100%;
		min-width: 0;
		height: auto;
		padding: 1rem 1.5rem;
		font-size: 1.4rem;
		text-align: center;
	}
	.inheritance-law__cards,
	.reason__cards,
	.team__services,
	.specialists__grid,
	.case-study__cards { gap: 2rem; margin-top: 3.5rem; }
	.specialists__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.6rem;
	}
	.law-card__icon { height: 14rem; }
	.law-card__body { padding: 2rem; }
	.reason-card { min-height: 0; padding: 2rem; }
	.reason-card h3 { min-height: 0; font-size: 2rem; }
	.reason-card > p { font-size: 1.6rem; }

	.team__professions { flex-wrap: wrap; gap: 1.4rem; margin-top: 3.2rem; }
	.team__professions li { width: 9.6rem; height: 9.6rem; font-size: 1.8rem; }
	.team__lead { font-size: 1.6rem; line-height: 1.7; }
	.service-card { min-height: 0; }
    .service-card li { font-size: 1.4rem; padding: 0.5rem 1rem; }

	.specialist-card,
	.specialists__more { height: auto; border-radius: 1rem; }
	.specialist-card > img { height: 17rem; }
	.specialist-card__body { padding: 1.4rem 1.2rem; }
	.specialist-card__body p { font-size: 1.3rem; }
	.specialist-card__body h3 { font-size: 1.6rem; }
	.specialist-card__body span { font-size: 1.2rem; }
	.specialists__more { padding: 1rem; }
    .specialists__more p {font-size: 1.4rem;}
    .specialists__more-link {font-size: 1.6rem;}
	.specialists__contact { margin-top: 7rem; }
	.specialists__summary,
	.specialists__results { font-size: 1.6rem; line-height: 1.8; }
	.specialists__contact > h3 {
		margin-top: 2.4rem;
		font-size: 2rem;
		line-height: 1.5;
	}
	.specialists__cta { margin-top: 3.5rem; }
	.specialists__evaluations { gap: 1.5rem; margin-top: 4rem; }
	.specialists__evaluations img { width: 13rem; height: 13rem; }

	.case-card { height: auto; }
    .case-card h3 {font-size: 1.8rem;}
	.case-card__image { height: 20rem; }
	.case-card__body { padding: 2rem; }

	.faq__list { gap: 1.5rem; margin-top: 3.5rem; }
	.faq-card { min-height: 0; padding: 1.8rem 1.5rem; }
	.faq-card p {
		align-items: flex-start;
		gap: 1rem;
		font-size: 1.6rem;
		line-height: 1.65;
	}
	.faq-card p > span:first-child { min-width: 2.8rem; width: 2.8rem; min-height: 2.8rem; height: 2.8rem; font-size: 1.8rem; padding-bottom: 0.2rem;}
	.faq-card__question-text {
		display: block;
		width: auto;
		height: auto;
		background: transparent;
	}

	.flow__lead { margin-top: 2.4rem; font-size: 1.6rem; line-height: 1.8; }
	.flow__steps { gap: 5rem; margin-top: 4rem; }
	.flow-step h3 {
		height: auto;
		min-height: 6rem;
		padding: 1.5rem;
		font-size: 1.8rem;
		line-height: 1.5;
	}
    .flow-step:not(:last-child)::after {
        bottom: -3.4rem;
    }
	.flow-step__body,
	.flow-step--contact .flow-step__body { min-height: 0; padding: 2rem 1.5rem; }
	.flow-step__body > p { font-size: 1.6rem; }
	.flow-step__contact { gap: 2rem; margin-top: 2.4rem; }
	.flow-step__phone {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}
	.flow-step__phone-number { font-size: 2.5rem; }
	.flow-step__buttons a { height: 5rem; max-width: initial; }

	.area__regions { padding: 2rem 1.5rem; }
	.area__regions ul { gap: 1rem; }
	.area__regions li {
		padding: 1rem 1.4rem;
		font-size: 1.25rem;
		white-space: normal;
	}
	.area__regions p { font-size: 1.6rem; line-height: 1.8; }
	.area__access { gap: 2rem; margin-top: 3rem; }
	.area__office,
	.area__map { height: auto; min-height: 30rem; }
	.area__office { padding: 2.5rem 2rem; }
	.area__office > a { width: 100%; }
    .area__office p {font-size: 1.6rem;}
	.area__cta { margin-top: 3.5rem; }

	.site-footer__main { height: auto; padding: 4rem 2rem; }
	.site-footer__logo { width: 22rem; }
	.site-footer__info { gap: 4rem; margin-top: 4rem; }
	.site-footer__info p { font-size: 1.4rem; line-height: 1.8; margin: 0.5rem 0 0; }
	.site-footer__button-box { margin-top: 3rem; }
	.site-footer__official-button { width: 100%; font-size: 1.35rem; }
    .site-footer__official-button p {min-width: 25rem;}
	.site-footer__company {
		min-height: 0;
		padding: 3rem 0 0;
		border-top: 0.1rem solid var(--navy);
		border-left: 0;
	}
	.site-footer__bottom {
		height: auto;
		min-height: 8rem;
		padding: 1.5rem;
		text-align: center;
	}

	.area-page-main {
		padding: 0 2rem 0;
	}
	.area-page-main__eyebrow {
		font-size: 1.4rem;
	}
	.area-page-main__title {
		margin-top: 1.6rem;
		font-size: 2.6rem;
	}
	.area-page-list-box {
		min-height: 0;
		margin-top: 2.8rem;
		padding: 2.4rem 1.6rem;
		border-radius: 1.6rem;
	}
	.area-page-list-box__note {
		font-size: 1.2rem;
	}
	.area-page-links {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.area-page-link {
		min-height: initial;
		padding: 2rem 1.8rem 2rem 2.2rem;
		border-radius: 1.2rem;
	}
	.area-page-link__ja {
		font-size: 2.5rem;
	}
	.area-page-link__en {
		margin-left: 1.4rem;
		font-size: 1.3rem;
	}
	.area-page-link__arrow {
		font-size: 3rem;
	}
	.area-page-proof {
		flex-direction: column;
		gap: 2.4rem;
		margin-top: 4rem;
	}
	.area-page-proof__badges {
		gap: 1.6rem;
	}
	.area-page-proof__badges img {
		width: 13rem;
		height: 13rem;
	}
	.area-page-proof__partner {
		text-align: center;
	}
	.area-page-proof__partner p {
		font-size: 1.5rem;
	}
	.area-page-proof__partner img {
		width: min(100%, 32rem);
		margin: auto;
	}
	.area-page-result-text {
		margin-top: 3rem;
		font-size: 1.7rem;
		line-height: 1.8;
	}
	.area-page-result-text small {
		font-size: 1.2rem;
	}
	.area-page-bottom-cta {
		padding: 3rem 2rem 5rem;
	}
	.area-page-bottom-cta h2 {
		font-size: 2.2rem;
	}
	.area-page-cta {
		margin-top: 2.8rem;
	}
}