/* CSS Document */

@charset "UTF-8";

@import url('/dist/css/reset.css');
@import url('/dist/css/menu.css');

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&display=swap');

@import url('https://use.fontawesome.com/releases/v6.3.0/css/all.css');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');

/*----------------------------------------------------------------------
変数定義
-----------------------------------------------------------------------*/
:root {
	--primary-text-color: #434343;
	--link-hover-color: #D1725D;
	--primary-theme-color: #A7917B;
	--secondary-theme-color: #40414A;
}

/*----------------------------------------------------------------------
フォント
-----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
全体
-----------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

body {
	background-color: #FFF;
	font-family: 'Shippori Mincho', serif;
	letter-spacing: 0.08em;
	color: var(--primary-text-color);
}

strong {
	font-weight: 600;
}

picture {
	display: block;
}

img {
	max-width: 100%;
}

@media screen and (max-width: 1160px) {
	._100 {
		width: 100vw;
		margin-left: -20px;
	}
}

a {
	display: inline-block;
}

/*----------------------------------------------------------------------
ヘッダー
-----------------------------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 150px;
	background: var(--secondary-theme-color);
	z-index: 100;
}

header > div.inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 50px;
}

a {
	display: inline-block;
}

header > div.inner > a.logo {
	width: 260px;
	max-width: 46vw;
}

header > div.inner > p {
	font-size: 0.75rem;
	color: #FFF;
}

header > div.inner > p a {
	margin-left: 0.875rem;
}

header > div.inner > p a > img {
	vertical-align: -2px;
}

@media screen and (max-width: 900px) {
	header > div.inner > p a {
		display: block;
		margin: 0;
		max-width: 32vw;
	}

	header > div.inner > p a > img {
		vertical-align: 0;
	}
}

header nav {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: flex;
	justify-content: space-around;
	width: 1200px;
	max-width: 100%;
	transform: translateX(-50%);
}

header nav a {
	min-width: 60px;
	padding: 0 12px 5px;
	border-bottom: 7px solid var(--secondary-theme-color);
	font-family: "Cormorant", serif;
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
header nav a.current {
	border-bottom: 7px solid var(--primary-theme-color);
	transition: 0.3s;
}
header nav a:hover {
	border-bottom: 7px solid #FFF;
}

header nav a > small {
	display: block;
	font-size: 0.625em;
}

@media screen and (max-width: 1180px) {
	header nav a {
		font-size: 0.9375rem;
	}
}
@media screen and (max-width: 1060px) {
	header {
		height: 80px;
	}

	header > div.inner {
		gap: 0 26px;
		height: 100%;
		padding: 16px 40px 16px 150px;
	}

	header > div.inner > a.logo {
		width: 200px;
	}

	header nav {
		display: none;
	}
}
@media screen and (max-width: 680px) {
	header {
		height: 80px;
	}

	header > div.inner {
		justify-content: center;
		height: 100%;
		padding: 14px 60px;
	}

	header > div.inner > p {
		display: none;
	}
}

/*----------------------------------------------------------------------
アンカーリンク調整
-----------------------------------------------------------------------*/
html, body {
	scroll-padding-top: 170px;
}

@media screen and (max-width: 1060px) {
	html, body {
		scroll-padding-top: 80px;
	}
}

/*----------------------------------------------------------------------
main-photo
-----------------------------------------------------------------------*/
#main-photo {
	position: relative;
	width: 100%;
	height: 460px;
	margin-top: 150px;
	overflow: hidden;
}

#main-photo > picture {
	width: 100%;
	height: 100%;
}

#main-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1060px) {
	#main-photo {
		margin-top: 80px;
	}
}
@media screen and (max-width: 736px) {
	#main-photo {
		height: 62vh;
		margin-top: 66px;
	}
}

/*----------------------------------------------------------------------
メイン
-----------------------------------------------------------------------*/
main {
	width: 1200px;
	max-width: 100%;
	margin-inline: auto;
	padding: 0 20px;
}

main p {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.9;
	text-align: justify;
}
@media screen and (max-width: 680px) {
	body {
		font-size: 14px;
	}
}

main > article picture {
	text-align:center;
}

/*----------------------------------------------------------------------
flexレイアウト
-----------------------------------------------------------------------*/
div.flex {
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
	margin-top: 2.75rem;
	max-width: 100%;
}

div.flex > * {
	align-self: center;
}

/*----------------------------------------------------------------------
見出し
-----------------------------------------------------------------------*/
main.index h2 {
	display: inline-block;
	position: relative;
	padding-top: 100px;
	font-family: "Cormorant", serif;
	font-size: 2.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}
main.index h2::before {
	display: block;
	position: absolute;
	top: 0;
	left: calc((100% - 3px) / 2);
	content: "";
	width: 50%;
	height: 90px;
	border-left: 3px solid var(--primary-theme-color);
}

main.index h3 {
	font-size: 1.9375rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
}

main.index h4 {
	display: inline-block;
	position: relative;
	font-family: "Cormorant", serif;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--primary-theme-color);
}
main.index h4::after {
	position: absolute;
	content: "";
	bottom: 35%;
	right: -100px;
	width: 90px;
	height: 1px;
	background: var(--primary-theme-color);
}

/*----------------------------------------------------------------------
間隔
-----------------------------------------------------------------------*/
main > article h2+p {
	margin-top: 3rem;
}
main > article h3+p {
	margin-top: 1.5rem;
}
main > article picture+p, main > article img+p {
	margin-top: 3rem;
}
main p+p {
	margin-top: 1.875rem;
}

main > article h2+h3 {
	margin-top: 1.875rem;
}
main > article picture+h3 {
	margin-top: 2rem;
}

main > article h2+picture {
	margin-top: 1.375rem;
}
main > article p+picture, main > article p+img {
	margin-top: 2.125rem;
}

/*----------------------------------------------------------------------
h1ロゴ
-----------------------------------------------------------------------*/
main.index h1 {
	margin: auto;
	width: 516px;
	max-width: 100%;
}

main.index > article:first-of-type {
	padding: 7.5rem 0;
}

/*----------------------------------------------------------------------
ボタンリンク
-----------------------------------------------------------------------*/
a.button {
	display: table;
	margin: 7rem auto 0;
	padding: 1.5rem 5rem 1.5rem 6rem;
	background: #FFF;
	border: 1px solid #000;
	border-radius: 40px;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-text-color);
	text-decoration: none;
}
a.button:hover {
	color: var(--primary-theme-color);
}

a.button > span {
	margin-left: 1rem;
}

a.button > span > img {
	vertical-align: 3px;
}

@media screen and (max-width: 736px) {
	a.button {
		margin: 6rem auto 0;
		padding: 1.5rem 2.5rem 1.5rem 3.5rem;
		font-size: 1rem;
	}
}

/*----------------------------------------------------------------------
Concept
-----------------------------------------------------------------------*/
#Concept {
	border-image: linear-gradient(var(--secondary-theme-color),var(--secondary-theme-color)) fill 0//0 100vw 0 100vw;
	color: #FFF;
}

#Concept h2 {
	display: inline-grid;
	place-items: center;
	width: 100%;
	margin: -35px auto 0;
	color: #A7917B;
}

#Concept .flex:first-of-type {
	column-gap: 60px;
}
@media screen and (max-width: 1200px) {
	#Concept .flex:first-of-type {
		column-gap: 40px;
	}
}
@media screen and (max-width: 736px) {
	#Concept .flex:first-of-type {
		column-gap: 20px;
	}
}

/*----------------------------------------------------------------------
Location
-----------------------------------------------------------------------*/
#Location {
	padding-top: 3rem;
	border-image: linear-gradient(#8E867B,#8E867B) fill 0//0 100vw 0 100vw;
	color: #FFF;
}

#Location h2::before {
	border-left: 3px solid #FFF;
}

#Location .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px;
	margin-top: 3.5rem;
}
@media screen and (max-width: 800px) {
	#Location .grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
}

/*----------------------------------------------------------------------
Design
-----------------------------------------------------------------------*/
#Design {
	padding: 3rem 0 6rem;
}

#Design h2 {
	color: var(--primary-theme-color);
}

#Design .grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 40px;
	place-items: center;
	margin-top: 2.5rem;
}
@media screen and (max-width: 800px) {
	#Design .grid {
		grid-template-columns: 1fr;
	}
}

#Design h4 {
	margin: 7rem 0 2.5rem;
}

/*----------------------------------------------------------------------
Designer
-----------------------------------------------------------------------*/
#Designer {
	border-image: linear-gradient(var(--secondary-theme-color),var(--secondary-theme-color)) fill 0//0 100vw 0 100vw;
	padding: 6rem 0 8rem;
	color: #FFF;
}

#Designer .grid {
	display: grid;
	grid-template-columns: 3fr 4fr;
	gap: 0 calc(5rem + 95px);
}
@media screen and (max-width: 1060px) {
	#Designer .grid {
		gap: 0 50px;
	}
}
@media screen and (max-width: 900px) {
	#Designer .grid {
		gap: 0 40px;
	}
}
@media screen and (max-width: 736px) {
	#Designer .grid {
		grid-template-columns: 1fr;
	}
}

#Designer h4 {
	margin-bottom: 1.25rem;
}

#Designer p > b {
	font-size: 1.4375rem;
}

#Designer p > b > small {
	margin-left: 1rem;
	font-size: 1.125rem;
}

#Designer p+p {
	margin-top: 0;
}

#Designer dl {
	padding: 1.5rem 0;
	border-bottom: 1px solid #FFF;
	font-size: 0.8125rem;
}

#Designer dt+dd, #Designer dd+dd {
	margin-top: 0.25rem;
}

#Designer dl+p {
	margin-top: 2rem;
	font-size: 0.9375rem;
	line-height: 1.5rem;
}

#Designer dl+p a {
	color: #FFF;
	text-decoration: none;
}
#Designer dl+p a:hover {
	text-decoration: underline;
}

@media screen and (min-width: 1060px) {
	#Designer h4, #Designer p:first-of-type {
		margin-left: -5rem;
	}
}

/*----------------------------------------------------------------------
フッター
-----------------------------------------------------------------------*/
footer {
	display: grid;
	grid-template-columns: 1fr;
	place-items: center;
	gap: 16px;
	width: 100%;
	padding: 3rem 50px 2.5rem;
	border-top: 2px solid #FFF;
	background: #31323C;
}

footer > img:first-of-type {
	max-width: 60vw;
}
footer > img:nth-of-type(2) {
	max-width: 40vw;
}

/*
footer > img:nth-of-type(3) {
	max-width: 20vw;
	margin-top: 6px;
}
*/

p.copyright {
	margin-top: 0.5rem;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 0.75rem;
	color: #FFF;
	text-align: center;
}
@media screen and (max-width: 680px) {
	p.copyright {
		margin-top: 1.5rem;
	}
}

/*----------------------------------------------------------------------
バナー
-----------------------------------------------------------------------*/
a#contact-banner {
	position: fixed;
	bottom: 13px;
	right: 0;
	width: 110px;
	max-width: 20vw;
	opacity: 1;
}

/*----------------------------------------------------------------------
レスポンシブ
-----------------------------------------------------------------------*/
@media screen and (max-width: 960px) {
	main > article p br:not(.all) {
		display: none;
	}
}

@media screen and (min-width: 736px) {
	.sp {
		display: none;
	}
}

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

	br.sp {
		display: block !important;
	}
}

/*----------------------------------------------------------------------
メニュー調整
-----------------------------------------------------------------------*/
#overlay {
	display: block;
	top: -80px;
	height: 100vh;
}

#overlay-button > p {
	color: #FFF;
}

#overlay-button span:before, #overlay-button span:after {
	background-color: #FFF;
}
#overlay-button:hover span:before, #overlay-button:hover span:after {
	background: #FFF;
}

@media screen and (min-width: 1060px) {
	#overlay-button, #overlay, .nav-content {
		display: none;
	}
}

@media screen and (max-width: 680px) {
	#overlay {
		background: rgba(50, 50, 50, 0.1);
	}

	#overlay-input:checked ~ .nav-content {
		top: 80px;
		left: 0;
	}
}

.nav-content > .wrapper {
	align-items: center;
}

.nav-content > .wrapper > ul {
	text-align: center;
}

.nav-content ul li + li {
	margin-top: 0.25rem;
}

.nav-content ul li + li {
  margin-top: 0.25rem;
}

@media screen and (min-width: 680px) and (max-width: 1000px) {
	.nav-content ul li.category {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 680px) {
	.nav-content ul li.category {
		margin-bottom: 0;
	}

	.nav-content ul li + li.category {
		margin-top: 1rem;
	}
}

/*----------------------------------------------------------------------
メールフォーム調整
-----------------------------------------------------------------------*/
form#mailformpro input, select, textarea, button {
	font-family: 'Shippori Mincho', serif;
	letter-spacing: 0.08em;
	color: var(--primary-text-color);
}