@charset "utf-8";
/* index.css */
/*===============================================
●共通
===============================================*/
/* メールフォーム、プライバシーポリシーを開くと背後が動かないように設定 */
body.contactOpen {
	height: 100%;
	overflow: hidden;
}

/* タイトルのスタイル */
.title01 {
	color: var(--colorTextMain);
	font-family: var(--font01);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
}
.title02 {
	display: block;
	color: var(--colorMain);
	font-family: var(--font02);
	font-weight: 600;
	letter-spacing: 0.1em;
	position: relative;
}
.title03 {
	display: block;
	color: var(--colorMain);
	font-family: var(--font01);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1.5;
	position: relative;
}
.title03::after {
	display: block;
	content: "";
	height: 2px;
	background-color: var(--colorMain);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* 汎用クラス */
.marginTop

/* メインビジュアル */
.mv {
	width: 100%;
}
.mvWrap {
	width: 100%;
	height: 100%;
}
.mv_inner {
	width: 100%;
	height: 100%;
}
.mv_inner .logo {
	position: absolute;
}
.mvContainer .areaText .textBox .mainText {
	font-weight: 700;
	font-family: var(--font01);
	line-height: 1.2;
	letter-spacing: 0.2em;
}
.mvContainer .areaText .textBox .mainText div {
	width: fit-content;
	background: linear-gradient(transparent 72%, rgba(233, 201, 203, 0.5) 72%);
}
.mvContainer .areaText .textBox .mainText strong {
	color: var(--colorMain);
}
.mvContainer .areaText .textBox .mainText .decoration {
	position: relative;
}
.mvContainer .areaText .textBox .mainText .decoration:before {
	content: "";
	display: inline-block;
	width: 50%;
	padding-top: calc(41 / 36 * 50%);
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateX(-25%);
	background-image: url(../../images/index/mv_mainTextDecoration.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.mvContainer .areaText .textBox .subText {
	position: relative;
	color: var(--colorMain);
	font-family: var(--font01);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.2em;
	margin-top: 2.4em;
}
.mvContainer .areaImage .image {
	border-radius: 8px;
	overflow: hidden;
}
.mvContainer .areaImage .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 74% center;
}


/* contents */
.contentsbox {
	background-color: var(--colorBackGround);
}
#contents01 {background-image: url("../../images/index/img01.jpg"); }
#contents02 {background-image: url("../../images/index/img02.jpg"); }
#contents03 {background-image: url("../../images/index/img03.jpg"); }
#contents04 {background-image: url("../../images/index/img04.jpg"); }
#contents05 {background-image: url("../../images/index/img04.jpg"); }
.contentsbox .inner header { text-align: center;}
.contentsbox .inner header p {
	text-align: center;
	font-family: var(--font01);
	letter-spacing: 0.05em;
	position: relative;
}
.contentsbox .contentsLead {
	font-size: 1.125rem;
	font-family: var(--font01);
	font-weight: 500;
	line-height: 1.7;
}
.contentsbox p {
	font-size: var(--size16px);
	letter-spacing: 0.02em;
	line-height: 2;
}
.contentsbox ul li {
	padding-left: 1em;
	text-indent: -1em;
}

/* タイトルに背景色がついたリスト */
.contentsbox dl dt {
	font-size: var(--size16px);
	font-family: var(--font01);
	font-weight: 500;
	color: var(--colorMain);
	line-height: 1.5;
	background-color: var(--colorSub);
}
.contentsbox dl dd {
	font-size: var(--size16px);
	line-height: 2;
}
.contentsbox dl table th {
	font-weight: bold;
	line-height: 2;
}
.contentsbox dl table td {line-height: 2;}

/* グーグルマップ */
.googleMap iframe {
	width: 100%;
}

/* タイトルに背景色がついたもの */
.articleItemTitle {
	font-size: var(--size16px);
	font-family: var(--font01);
	font-weight: 500;
	color: var(--colorMain);
	line-height: 1.5;
	background-color: var(--colorSub);
}

/* 画像とテキストのコンテナ */
.imageContainer {
	display: flex;
}
.imageContainer .areaText .text {
	font-family: var(--font01);
	font-weight: 500;
	line-height: 1.875;
}
.imageContainer .areaImage .image {
	border-radius: 8px;
	overflow: hidden;
}
.imageContainer .areaImage .image img {
	width: 100%;
	height: auto;
}

/* 画像と説明文のカラムコンテナ */
.columnContainer {
	display: flex;
}
.columnContainer figure img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.columnContainer figure figcaption {
	font-family: var(--font01);
	text-align: center;
	font-weight: 700;
	line-height: 1.3;
}
.columnContainer .text {
	text-align: center;
	line-height: 1.5;
	margin-top: 8px;
}

/* お問合せの電話リンクボタン */
.businessHours {
	font-family: var(--font01);
	font-weight: 500;
	text-align: center;
}
.linkContact {
	width: fit-content;
	margin:  12px auto 0;
}
.linkContact a {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--colorMain);
	font-family: var(--font02);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}
.linkContact a::before {
	content: "";
	display: inline-block;
	mask-image: url(../../images/index/iconTel.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: var(--colorMain);
}

/*===============================================
●画面の横幅が768px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 768px){

	body {
		padding-top: var(--headerHightSP);
	}
	
	/* 共通 */
	.title01 {
		font-size: var(--size24px);
		padding-bottom: 0.5em;
	}
	.title01.singleTitle {
		margin-bottom: 0.83em;
	}
	.title02 {	
		font-size: var(--size20px);
		padding-bottom: 1em;
	}
	.title02:after {
		width: 50px;
		bottom: 0.5em;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: var(--size18px);
		padding-bottom: 36px;
	}
	.title03::after {
		width: 30px;
		top: 2.75em;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.contentsbox .inner header p {
		font-size: var(--size18px);
		margin-bottom: 28px;
	}
	
	/* リンク */
	a.btn {
		padding: 8px 0;
	}
	
	/* mainVisual */
	.mv {
		height: calc(100svh - var(--headerHightSP));
	}
	.mv_inner {
		border: 16px solid var(--colorBackGround);
	}

	/* SPで外枠をつくるときは、このクラスにつけてください */
	.mvSpBorder {
		height: 100%;
		border: 16px solid var(--colorBackGround);
	}
	.mv_inner .logo {
		width: 50%;
		max-width: 150px;
	}
	
	
	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 140% auto;
		padding-top: 35%;
	}
	.contentsbox {
		line-height: 2.26;
	}
	.contentsbox .inner {
		padding: 32px 16px 72px;
	}

	.contentsbox .contentsLead {
		margin-bottom: 104px;
	}

	.contentsbox .articleWrap + .articleWrap {
		margin-top: 104px;
	}
	.contentsbox .articleItem + .articleItem {
		margin-top: 56px;
	}

	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 16px;
		padding: 8px 16px;
	}
	.contentsbox dl dd {
		padding: 0 16px;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 16px;
	}
	.contentsbox dl table th {
		display: block;
		width: 100%;
	}
	.contentsbox dl table td {
		display: block;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 16px;}

	/* タイトルに背景色がついたもの */
	.articleItemTitle {
		margin-bottom: 16px;
		padding: 8px 16px;
	}

	/* 画像とテキストのコンテナ */
	.imageContainer {
		flex-direction: column;
		gap: 24px;
	}
	.imageContainer .areaImage {
		order: 1;
	}
	.imageContainer .areaText {
		order: 2;
	}

	/* 画像と説明文のカラムコンテナ */
	.columnContainer {
		flex-direction: column;
		gap: 24px;
	}
	.columnContainer figcaption {
		margin-top: 16px;
	}

	/* お問合せのリンクテキスト */
	.linkContact a {
		font-size: var(--size32px);
	}
	.linkContact a::before {
		width: 40px;
		height: 40px;
	}
}

/*===============================================
●画面の横幅が769px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px){
	
	/*共通*/
	.title01 {
		font-size: 2.5rem; /* 40px */
		margin-bottom: 16px;
	}
	.title02 {	
		font-size: 1rem; /* 16px */
	}
	.title02:after {
		width: 50px;
		bottom: 1rem;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: var(--size24px);
		padding-bottom: 24px;
		margin-bottom: 56px;
	}
	.title03::after {
		width: 30px;
		bottom: 0;
	}
	
	/* メインビジュアル */
	.mvWrap {
		position: relative;
		height: 100svh;
	}
	.mv_inner {
		height: 100vh;
		border: 40px solid var(--colorBackGround);
	}
	.mv .logo {
		width: 222px;
		height: 56px;
	}
	
	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		padding-top: 24rem;
	}
	.contentsbox {
		max-width: 1100px;
		line-height: 2.26;
		margin: 0 auto;
	}
	.contentsbox .inner header {
		margin-bottom: 56px;
	}
	.contentsbox .inner header p {
		font-size: 1.375rem; /* 22px */
		line-height: 1.5;
	}
	.contentsbox .contentsLead {
		margin-bottom: 104px;
		text-align: center;
	}

	.contentsbox .articleWrap + .articleWrap {
		margin-top: 104px;
	}
	.contentsbox .articleItem + .articleItem {
		margin-top: 56px;
	}

	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 32px;
		padding: 8px 32px;
	}
	.contentsbox dl dd {
		padding: 0 24px;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 30px;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 24px;}
	.contentsbox dl table th {
		width: 15%;
		min-width: 150px;
	}

	/* タイトルに背景色がついたもの */
	.articleItemTitle {
		margin-bottom: 32px;
		padding: 8px 32px;
	}

	/* 画像とテキストのコンテナ */
	.imageContainer {
		gap: 4%;
	}
	.imageContainer.imageLeft {
		flex-direction: row-reverse;
	}
	.imageContainer.imageLeft .areaText .text {
		text-align: right;
	}
	.imageContainer.imageRight {
		flex-direction: row;
	}
	.imageContainer .areaImage {
		width: 52%;
		max-width: 480px;
	}
	.imageContainer .areaText {
		flex: 1;
	}

	/* 画像と説明文のカラムコンテナ */
	.columnContainer {
		gap: 2.6%;
	}
	.columnContainer.column3 .columnBox {
		width: calc((100% - 2.6% * 2) / 3);
	}
	.columnContainer.column4 .columnBox {
		width: calc((100% - 2.6% * 3) / 4);
	}
	.columnContainer figure figcaption {
		font-size: var(--size18px);
		margin-top: 16px;
	}

	/* お問合せのリンクテキスト */
	.linkContact a {
		font-size: var(--size40px);
	}
	.linkContact a::before {
		width: 40px;
		height: 40px;
	}
}


/*===============================================
●画面の横幅が～768px の メインビジュアル (Sp)
===============================================*/
@media screen and (max-width: 768px) {

	.mvContainer {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.mvContainer .areaText {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mvContainer .areaText .textBox {
		position: relative;
	}
	.mvContainer .areaText .textBox::before { /* テキスト横の飾り */
		content: "";
		display: inline-block;
		width: 23%;
		max-width: 110px;
		padding-top: calc(256 / 88 * 23%);
		position: absolute;
		right: 0;
		top: 0;
		/* transform: translate(0, -50%); */
		background-image: url(../../images/index/mv_sp.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaText .mainText {
		font-size: 3.125rem;
		font-size: clamp(3.125rem, 12.5vw, 4.5rem);
	}
	.mvContainer .areaText .subText {
		font-size: 1.25rem;
	}
	.mvContainer .areaImage {
		height: 65%;
	}
	.mvContainer .areaImage::before { /* イラストと吹き出し */
		content: "";
		display: inline-block;
		width: 100%;
		padding-top: calc(169 / 368 * 100%);
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url(../../images/index/mv_staff_sp.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaImage .image {
		height: 67%;
	}
}

/*===============================================
●画面の横幅が769～1279px の メインビジュアル (Tab)
===============================================*/
@media screen and (min-width: 769px) and ( max-width: 1279px) {

	.mvContainer {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.mvContainer::before { /* 上部の飾り */
		content: "";
		display: inline-block;
		width: 81%;
		padding-top: calc(132 / 559 * 81%);
		position: absolute;
		left: 4%;
		top: 8%;
		transform: translate(0, -50%);
		background-image: url(../../images/index/mv_tabTop.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer::after { /* 下部の飾り */
		content: "";
		display: inline-block;
		width: 60%;
		padding-top: calc(94 / 406 * 60%);
		position: absolute;
		left: 8%;
		bottom: 0;
		transform: translate(0, -8%);
		background-image: url(../../images/index/mv_tabBottom.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaText {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mvContainer .areaText .textBox {
		transform: translateY(25%);
	}
	.mvContainer .areaText .mainText {
		font-size: 4.5rem;
		display: flex;
	}
	.mvContainer .areaText .subText {
		font-size: 1.25rem;
	}
	.mvContainer .areaText .subText br {
		display: none;
	}
	.mvContainer .areaText .textBox .subText::before { /* ローラー */
		content: "";
		display: inline-block;
		width: 8%;
		padding-top: calc(75 / 72 * 8%);
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(-50%, 50%);
		background-image: url(../../images/index/mv_center.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaImage {
		height: 60%;
	}
	.mvContainer .areaImage::before { /* イラストと吹き出し */
		content: "";
		display: inline-block;
		width: 20%;
		padding-top: calc(577 / 137 * 20%);
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url(../../images/index/mv_staff_tab.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaImage .image {
		height: 77%;
	}
}

/*===============================================
●画面の横幅が1280px以上 の メインビジュアル C)
===============================================*/
@media screen and (min-width: 1280px) {
	
	/* メインビジュアル */
	.mvContainer {
		position: relative;
		display: flex;
		height: 100%;
	}
	.mvContainer::before { /* 上部の飾り */
		content: "";
		display: inline-block;
		width: 22%;
		padding-top: calc(162 / 318 * 22%);
		position: absolute;
		left: 4%;
		top: 25%;
		transform: translate(0, -50%);
		background-image: url(../../images/index/mv_pcTop.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer::after { /* 下部の飾り */
		content: "";
		display: inline-block;
		width: 65%;
		padding-top: calc(121 / 948 * 65%);
		position: absolute;
		left: 4%;
		bottom: 0;
		transform: translate(0, -8%);
		background-image: url(../../images/index/mv_pcBottom.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaText {
		flex: 1;
		position: relative;
	}
	.mvContainer .areaText .textBox {
		position: relative;
		z-index: 10;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mvContainer .areaText .textBox .mainText {
		font-size: clamp(3rem, 6.2vw, 7rem); /* 48px ～ 112px を可変 */
	}
	.mvContainer .areaText .textBox .subText {
		font-size: clamp(1rem, 2vw, 2rem); /* 16px ～ 32px を可変 */
	}
	.mvContainer .areaText .subText br {
		display: block;
	}
	.mvContainer .areaText .textBox .subText::before { /* ローラー */
		content: "";
		display: inline-block;
		width: 24%;
		padding-top: calc(75 / 72 * 24%);
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(200%, 0);
		background-image: url(../../images/index/mv_center.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaImage {
		position: relative;
		width: 66%;
		height: 100%;
	}
	.mvContainer .areaImage::before { /* イラストと吹き出し */
		content: "";
		display: inline-block;
		width: 24%;
		padding-top: calc(775 / 264 * 24%);
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url(../../images/index/mv_staff_pc.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.mvContainer .areaImage .image {
		width: 100%;
		height: 85%;
	}
}