@charset "UTF-8";

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

	reset

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

* { box-sizing: border-box; outline: none; }
html { font-size: 62.5%; }

body {
	font-size: 1.4rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: #585959;
	line-height: 2;
	letter-spacing: 0.03em;
}
body, ul, li { margin: 0; padding: 0; }
a, a img { transition: .3s; }
a { color: #585959; display: block; text-decoration: none; }
a:hover { color: #8f683d; }
a:hover img { opacity: .7; }
ul { list-style: none; }
img { width: 100%; height: auto; display: block; }

header,
main,
footer { width: 100%; }

header { padding: 10px 0; background: #fff; }
header.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	box-shadow: 0 -.5vw 3vw rgba(0,0,0,.1);
}

header .inner { display: flex; align-items: center; justify-content: space-between; }
header .logo { width: 20%; }
header .logo a { display: flex; justify-content: center; align-items: center; }
header nav { display: block; }
header nav ul { display: flex; margin-right: -2vw; }
header nav li { margin-right: 2vw; }
header nav li a { font-size: min(1.4vw, 17px); position: relative; line-height: 1.8; }
header nav li a:after {
	content:  "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: #8f683d;
	transition: .3s;
}
header nav li a:hover:after { width: 100%; }
header nav li .current { color: #8f683d; }

.inner { max-width: 1200px; margin: 0 auto; }
.secPad { padding: 4vw 0; }
.secPadTop { padding-top: 4vw; }
.secPadBtm { padding-bottom: 4vw; }

.pc { display: block; }
.sp { display: none; }

@media (max-width: 1300px) {
	.inner { max-width: 90%; margin: 0 auto; }
}
@media (max-width: 768px) {
	.pc { display: none; }
	.sp { display: block; }
	.secPad { padding: 8vw 0; }
	.secPadTop { padding-top: 8vw; }
	.secPadBtm { padding-bottom: 8vw; }
	
	header {
		position: fixed;
		top: 0;
		left: 0;
		padding: 4vw 0;
		box-shadow: 0 -.5vw 3vw rgba(0,0,0,.1);
		z-index: 9999;
	}
	header .logo { width: 40%; }
	header nav {
		position: fixed;
		background: rgba(255, 255, 255, .9);
		width: 100%;
		left: 0;
		top: 0;
		display: none;
		padding: 10vw 0;
	}
	header nav.is-open { display: block; }
	header nav ul { flex-direction: column; text-align: center; }
	header nav li a { font-size: 5vw; padding: 3vw 0; display: inline-block; }
	header nav li a:after { bottom: 1.5vw; }
	header #navSp { width: 15%; height: 6vw; position: relative; display: flex; align-items: center; z-index: 3; }
	header #navSp span { display: block; background: #65431e; width: 100%; height: .5vw; }
	header #navSp span:before,
	header #navSp span:after {
		content: "";
		position: absolute;
		background: #65431e;
		height: .5vw;
		width: 100%;
		left: 0;
		transition: .3s;
	}
	header #navSp span:before { top: 0; }
	header #navSp span:after { bottom:0; }
	header #navSp.is-open { margin-top: 3vw; }
	header #navSp.is-open span { background: transparent; }
	header #navSp.is-open span:before { transform: rotate(45deg); top: 45%; }
	header #navSp.is-open span:after { transform: rotate(-45deg); bottom: 45%; }
}

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

	common

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

.title { font-size: min(2.6vw, 35px); font-weight: 700; line-height: 1.5; margin: 0 0 4vw; }
.title span { background: linear-gradient(transparent 60%, #eae83a 60%); }
.title img {
	width: 12vw;
    vertical-align: middle;
    margin: 0 .4vw;
    display: inline-block;
}

.flexWrap { display: flex; justify-content: space-between; }
.flexWrap .txtBox { width: 27%; }
.flexWrap .txtBox p { font-size: min(1.5vw, 19px); text-align: justify; margin: 0; }
.flexWrap .txtBox p:not(:last-child) { margin-bottom: 2vw; }
.flexWrap .imgBox { flex: 1; }
.flexWrap > div:last-child { margin-left: 5%; }

.photoList01 { display: flex; flex-wrap: wrap; margin: 3vw -1vw 0 0; }
.photoList01 li { width: calc(100%/5 - 1vw); margin: 0 1vw 1vw 0; }
.photoList01 li img { height: 100%; object-fit: cover; }

.basicList { margin-bottom: 1vw; }
.basicList li { position: relative; padding-left: 1em; font-size: min(1.5vw, 19px); }
.basicList li:not(:last-child) { margin-bottom: 1%; }
.basicList li:before {
	content: "";
	position: absolute;
	top: 1em;
	left: 0;
	width: .3vw;
	height: .3vw;
	border-radius: 100%;
	background: #585959;
}
.basicList li span { background: linear-gradient(transparent 60%, #eae83a 60%); }

.relative { position: relative; }
.absolute { position: absolute; }

@media (max-width: 768px) {
	.title { font-size: 5.8vw; }
	.title img { width: 40vw; }
	.flexWrap { flex-direction: column; }
	.flexWrap .txtBox { width: 100%; margin-bottom: 3vw; }
	.flexWrap .txtBox p { font-size: 3.5vw; }
	.flexWrap > div:last-child { margin-left: 0; }
	.photoList01 li { width: calc(100%/3 - 1vw); }
	.basicList { margin-bottom: 2vw; }
	.basicList li { font-size: 3.5vw; }
	.basicList li:before { width: 1vw; height: 1vw; }
}

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

	top, common parts

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

#features .title,
#features03 .title { right: 0; top: 4vw; text-align: right; }
#features .txtBox,
#features03 .txtBox { padding-top: 8vw; display: flex; align-items: flex-end; }

#case .imgBox { position: relative; }
#case .moreWrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#case .moreWrap li { width: 11%; position: absolute; }
#case .moreWrap li a:hover img { opacity: .7; }
#case .moreWrap li:nth-child(1) { top: 46%; right: 11%; }
#case .moreWrap li:nth-child(2) { top: 5%; left: 31%; }
#case .moreWrap li:nth-child(3) { bottom: 12%; left: 5%; }
#case .moreWrap li:nth-child(4) { top: 38%; left: 26%; }
#case .moreWrap li:nth-child(5) { top: 21%; left: 59%; }
#case .moreWrap li:nth-child(6) { bottom: 12%; left: 57%; }

#book .imgBoth .imgBox { margin-top: 2vw; }
#book .imgBoth .imgBox:first-child { width: 51%; padding-top: 1.8%; flex: none;  }
#book .imgBoth .imgBox:last-child { margin-left: 2%; }

#contact .flexWrap .txtBox { width: 39%; text-align: right; }
#contact .flexWrap .title,
#contact02 .flexWrap .title { margin-bottom: 2vw; }
#contact02 .txtBox { width: 50%; }
#contact02 .imgBox p {
	margin: .5vw 0 0 0;
    line-height: 1.6;
    text-align: center;
    font-size: min(1.2vw, 16px);
}
#contact02 .flexWrap .flexWrap { padding: 0 0 0 5vw; flex: 1; }

footer { padding: 10px 0; text-align: center; }
footer .logo { width: 14%; margin: 0 auto; }

@media (max-width: 768px) {
	#features .title,
	#features03 .title,
	#contact .flexWrap .title { position: static; text-align: left; }
	#features .txtBox,
	#features03 .txtBox { padding-top: 3vw; }
	#book .imgBoth { flex-direction: column; }
	#book .imgBoth .imgBox:first-child { margin-bottom: 2vw; width: 100%; padding-top: 0; }
	#contact .flexWrap { flex-direction: column-reverse; }
	#contact .flexWrap .txtBox,
	#contact02 .txtBox { width: 100%; }
	#contact02 .flexWrap .flexWrap { padding: 0; flex-direction: row; justify-content: space-between; }
	#contact02 .flexWrap .flexWrap .imgBox { width: 48%; flex: none; }
	#contact02 .imgBox p { font-size: 2.5vw; }
	footer .logo { width: 40%; }
	#case .moreWrap li { width: 15%; }
}

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

	contents

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

.case-page #heading { margin-bottom: 50px; }
.case-page .case-summary .txtBox { width: 48%; }

.case-page .case-summary .sub-title { font-size: min(2.1vw, 30px); line-height: 1.6; margin: 0 auto 10px 0; }
.case-page .case-summary .sub-title span {
	line-height: 1;
	font-size: min(1.4vw, 18px);
	display: inline-block;
	background: #eae83a;
	border-radius: 100px;
	padding: 10px 20px;
	text-align: center;
	margin-bottom: 10px;
}
.case-page .case-summary .title {
	font-size: min(3.2vw, 40px);
	margin-bottom: 2vw;
	white-space: nowrap;
    z-index: 1;
    position: relative;
}

.case-page .case-summary .sub-title,
.case-page .case-summary .title {
	opacity: 0;
	transform: translateX(-10px);
	animation: titleFadeIn 0.8s ease-out forwards;
	animation-delay: 0.3s;
}

@keyframes titleFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.case-page .case-summary .imgBox { width: 42%; margin-left: 0; flex: none; }
.case-page .case-summary .photoList .main { margin-bottom: .36vw; }

@media (max-width: 1200px) {
	.case-page #heading { margin-bottom: 5vw; }
}
@media (max-width: 768px) {
	.case-page .case-summary { padding-top: 0; }
	.case-page .case-summary .flexWrap { flex-direction: column-reverse; }
	.case-page .case-summary .txtBox { width: 100%; margin-bottom: 4vw; }
	.case-page .case-summary .imgBox { width: 85%; margin: 0 auto !important; padding-left: 5%; }
	.case-page .case-summary .title { font-size: 6vw; white-space: normal; }
	.case-page .case-summary .sub-title { font-size: 4vw; }
	.case-page .case-summary .sub-title span { font-size: 3vw; padding: 5px 12px; margin-bottom: 5px; }
	.case-page .case-summary .photoList li:not(:last-child) { margin-bottom: 5px; }
}