@charset "utf-8";

/*common

-----------------------------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-fjalla);
}

section {
	padding-top: 50px;
}

address {
	font-style: normal;
}

p {
	margin-bottom: 10px;
}

p:last-of-type {
	margin-bottom: 0;
}

a {
	color: var(--font-link);
}

img {
	object-fit: cover;

	object-position: center;
}

dl,
dt,
dd {
	margin: 0;
}

span.br:before {
	content: '\A';

	white-space: pre;
}

span.pc-br:before {
	content: '\A';

	white-space: pre;
}

div.contents-wrapper {
	width: calc(100% - 100px);

	max-width: var(--content-width);

	margin: 0 auto;
}

div.sec-head {
	margin-bottom: 30px;

	color: var(--color-purple);

	text-align: center;

	font-family: var(--font-sawarabi);
}

div.sec-head > h2 {
	display: block;

	font-weight: 400;

	font-size: 1.8rem;

	text-transform: uppercase;
}

div.sec-head > span {
	display: block;

	font-size: 1rem;

	text-transform: capitalize;

	margin-top: 5px;
}

@media screen and (max-width: 1023px) {
	p {
		margin-bottom: 10px;
	}

	span.pc-br:before {
		content: none;

		white-space: pre;
	}

	span.tab-br:before {
		content: '\A';

		white-space: pre;
	}

	span.tablet-br {
		display: block;
	}
}

@media screen and (max-width: 767px) {
	span.sp-br:before {
		content: '\A';

		white-space: pre;
	}

	div.contents-wrapper {
		width: calc(100% - 60px);
	}

	section {
		padding-top: 30px;
	}

	span.sm-br {
		display: block;
	}

	div.sec-head > h2 {
		font-size: 1.3rem;
	}

	div.sec-head > span {
		margin-top: 0;
	}
}

/* home

-----------------------------------------------------------------------------------------*/

/** hero **/

div.hero {
	height: calc(100vh - var(--header-height));
}

div.hero.bg-img {
	background: url('../images/hero-bg-img.jpg') no-repeat center/cover;

	position: relative;

	margin-top: 85px;
}

div.hero-inner {
	height: 100%;
}

div.hero-copy-container {
	color: var(--color-white);

	position: relative;

	z-index: 2;

	text-shadow: 1px 1px 4px #7e7d7d;

	font-family: var(--font-sawarabi);
}

div.hero-main-copy {
	font-size: 2.5rem;

	font-weight: 400;

	font-family: var(--font-fjalla);

	position: relative;

	margin-bottom: 14px;
}

div.hero-sub-copy {
	font-size: 1.8rem;
}

/** greeting **/

div.greeting-contents-img {
	width: 20%;
}

div.greeting-contents-text {
	width: fit-content;

	padding-left: 50px;
}

/** guidance **/

section.guidance .sec-contents-inner {
	gap: 7%;
}

div.guidance-item {
	width: calc((100% - 7% * 2) / 3);

	position: relative;

	font-family: var(--font-sawarabi);
}

div.guidance-item::after {
	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(0, 0, 0, 0.35);
}

div.guidance-item.left {
	background-image: url('../images/guidance-img01.jpg');
}

div.guidance-item.center {
	background-image: url('../images/guidance-img02.jpg');
}

div.guidance-item.right {
	background-image: url('../images/guidance-img03.jpg');
}

div.guidance-item a {
	padding: 85px 0;

	width: 100%;

	color: var(--color-white);

	position: relative;

	z-index: 1;

	font-size: 1.4rem;
}

/* news */

article.news-item {
	/* color: var(--color-black); */

	font-size: 1rem;

	margin-bottom: 25px;
	align-items: center;
}

article.news-item:last-of-type {
	margin-bottom: 0;
}

article.news-item i {
	display: flex;

	align-items: center;

	color: var(--color-purple);
}

article.news-item i,
div.news-item-date {
	margin-right: 20px;
}

div.news-item-date span {
	color: var(--color-gray);
}

div.news-item-title a {
	color: rgb(36, 76, 216);

	margin: 0 2px;
}

@media screen and (max-width: 1023px) {
	div.hero {
		height: calc(700px - var(--header-height));
	}

	/* greeting */

	div.greeting-contents-img {
		width: 30%;
	}

	div.greeting-contents-text {
		width: 70%;

		font-size: 0.9rem;
	}

	/** guidance **/

	body.home section.guidance .sec-contents {
		padding: 25px 20px;
	}

	div.guidance-item a {
		font-size: 1.2rem;
	}

	/* news */

	article.news-item {
		font-size: 1rem;
	}
}

@media screen and (max-width: 767px) {
	div.hero {
		height: calc(400px - var(--header-height));
	}

	div.hero-main-copy {
		font-size: 1.8rem;
	}

	div.hero-sub-copy {
		font-size: 1rem;
	}

	/* greeting */

	div.greeting-contents-img {
		width: 60%;
	}

	div.greeting-contents-text {
		width: 100%;

		margin-top: 30px;

		padding-left: 0;

		font-size: 1rem;
	}

	/* guidance */

	section.guidance .sec-contents-inner {
		flex-direction: column;

		gap: 30px;
	}

	div.guidance-item {
		width: 100%;
	}

	div.guidance-item:first-of-type {
		margin-top: 0;
	}

	/* news */

	article.news-item {
		font-size: 0.95rem;
	}

	div.news-item-title {
		margin-top: 5px;
	}

	div.news-item-title a {
		margin-left: 0;
	}
}

/* page common

-----------------------------------------------------------------------------------------*/

section.page-hero {
	background-image: url('../images/hero-bg-img.jpg');

	width: 100%;

	height: 50vh;

	margin-top: var(--header-height);

	padding: 0;
}

div.page-hero-inner {
	height: 100%;

	position: relative;
}

div.page-hero-inner:after {
	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(61, 59, 59, 0.67);
}

div.page-hero-inner h1 {
	color: var(--color-white);

	font-size: 2rem;

	text-align: center;

	position: relative;

	z-index: 1;

	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1023px) {
	section.page-hero {
		height: auto;

		aspect-ratio: 5 / 2;
	}
}

@media screen and (max-width: 767px) {
	section.page-hero {
		height: 250px;
	}

	div.page-hero-inner h1 {
		font-size: 1.4rem;
	}
}

/* implant page

-----------------------------------------------------------------------------------------*/

div.page-implant-contents-img {
	margin: 25px auto 0;
}

div.page-implant-contents-img img {
	max-width: 250px;

	height: auto;
}

div.page-implant-feature {
	margin-top: 25px;

	justify-content: center;

	gap: 50px;
}

div.page-implant-merit {
	margin-bottom: 10px;
}

div.page-implant-left-title h3,
div.page-implant-right-title h3 {
	color: var(--color-purple);

	font-size: 1.2rem;

	margin-bottom: 15px;
}

div.page-implant-merit-left,
div.page-implant-demerit-left {
	color: var(--color-purple);

	margin-right: 10px;
}

section.page-flow .sec-contents img {
	max-width: 800px;
}

section.page-price .sec-contents {
	flex-direction: column;
}

div.page-price-text {
	margin-bottom: 15px;
}

div.page-price-text p {
	color: var(--color-orange);
}

div.page-price-sec:not(.page-price-sec:last-of-type) {
	margin-bottom: 30px;
}

div.page-price-sec-title {
	margin-bottom: 20px;
}

div.page-price-sec-title h3 {
	font-weight: 700;

	font-size: 1.25rem;
}

div.page-price-sec-text {
	margin-top: 15px;
}

.page-price-item:not(.page-price-item:last-of-type) {
	margin-bottom: 10px;
}

div.page-price-sec:last-of-type .page-price-item {
	/* margin-bottom: 0; */
}

div.page-price-item-title {
	margin-right: 15px;

	color: var(--color-purple);
}

div.page-price-item-title .page-price-item-price {
	margin-left: 15px;
}

div.page-price-item-price {
	color: var(--font-black);
}

.page-price-item .small {
	font-size: 0.8rem;

	margin-left: 10px;
}

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 767px) {
	div.page-implant-contents-img img {
		width: 45%;
	}

	div.page-implant-contents-img figcaption {
		font-size: 0.9rem;
	}

	div.page-implant-feature {
		gap: 20px;
	}

	div.page-implant-merit-text,
	div.page-implant-demerit-text {
		flex-direction: column;
	}

	div.page-implant-merit-left,
	div.page-implant-demerit-left {
		font-size: 1.1rem;

		margin: 0 0 10px 0;
	}

	div.page-implant-merit-right,
	div.page-implant-demerit-right {
		font-size: 0.95rem;
	}

	div.page-implant-left-title h3,
	div.page-implant-right-title h3 {
		text-align: center;
	}

	div.page-implant-right-text {
		text-align: center;
	}

	.page-price-item {
		flex-direction: column;
	}

	div.page-price-item-title {
		margin-right: 0;
	}

	div.page-price-item-title .page-price-item-price {
		display: none;
	}

	div.page-price-item-price {
		margin-top: 3px;
	}

	div.page-price-item-price.none {
		display: block;
	}
}

/* faq page

-----------------------------------------------------------------------------------------*/

div.page-faq {
	padding-top: 50px;
}

div.page-faq dl {
	padding: 40px 9%;

	border-bottom: 1px solid var(--color-gray);
}

div.page-faq dl:first-of-type {
	padding-top: 0;
}

div.page-faq dt,
div.page-faq dd {
	font-size: 1rem;

	margin-left: 50px;

	position: relative;
}

div.page-faq dt {
	margin-bottom: 35px;
}

div.page-faq dt:before,
div.page-faq dd:before {
	content: '';

	position: absolute;

	left: -50px;

	font-family: var(--font-sawarabi);

	font-size: 2rem;
}

div.page-faq dt:before {
	top: 50%;

	transform: translateY(-50%);

	color: var(--color-purple);
}

div.page-faq dd:before {
	top: -5px;

	color: var(--color-orange);
}

div.page-faq dt:before {
	content: 'Q';
}

div.page-faq dd:before {
	content: 'A';
}

@media screen and (max-width: 1023px) {
	div.page-faq dt,
	div.page-faq dd {
		font-size: 0.95rem;
	}

	div.page-faq dl {
		padding-left: 0;

		padding-right: 0;
	}
}

@media screen and (max-width: 767px) {
	div.page-faq {
		padding-top: 30px;
	}

	div.page-faq .sec-contents {
		width: 100%;
	}

	div.page-faq dt,
	div.page-faq dd {
		margin-left: 30px;
	}

	div.page-faq dt:before,
	div.page-faq dd:before {
		left: -30px;
	}

	div.page-faq dt {
		margin-bottom: 30px;
	}
}

/* info page

-----------------------------------------------------------------------------------------*/
section.page-request .sec-head span {
	text-transform: none;
}

section.page-request .sec-contents {
	text-align: center;
}

section.page-request .sec-contents a,
section.page-workshop .sec-contents a {
	color: rgb(36, 76, 216);

	font-size: 1.1rem;

	margin: 0 2px;
}

section.page-workshop .sec-contents span {
	margin-left: 16px;
}

@media screen and (max-width: 767px) {
	section.page-workshop .sec-contents p {
		font-size: 0.95rem;
	}
}