@charset "utf-8";

:root {

--base-color: #71592C;

--white: #FFFFFF;

--white95: rgba(255,255,255,0.95);

--white14: rgba(255,255,255,0.14);

--white86: rgba(255,255,255,0.86);

--white20: rgba(255,255,255,0.2);

--black: #000000;

--black06: rgba(0,0,0,0.06);

--black40: rgba(0,0,0,0.4);

--black10: rgba(0,0,0,0.1);

--black50: rgba(0,0,0,0.5);

--brown2: #E6A429;

--brown3: #F2ECDF;

--brown4: #565046;

--brown5: #6B6356;

--bluegreen: #8FC9B5;

--green: #ADCA38;

--pale: #FD9C6F;

--yellow: #FFFA74;

}

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

	デフォルトスタイル

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figcaption, figure, section, footer, header, main, hgroup, menu, nav, summary {

	margin: 0;

	padding: 0;

	background: transparent;

	border: 0;

	outline: 0;

	font-size: 1em;

	box-sizing: border-box;

}

html {

	font-size: 62.5%;

}

@media all and (min-width: 897px) and (max-width: 1225px) {

	html {

		font-size: calc(1000vw / 1225);

	}

}

@media all and (max-width: 374px) {

	html {

		font-size: calc(1000vw / 375);

	}

}

body, table, input, textarea, select, option {

	font-family: "Noto Sans JP", sans-serif;

}

article, aside, canvas, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {

	display: block;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

chrome_annotation {

	border: none !important;

}

:focus {

	outline: 0;

}

ins {

	text-decoration: none;

}

del {

	text-decoration: line-through;

}

img {

	vertical-align: top;

	max-width: 100%;

    height: auto;

}

address {

	font-style: normal;

}

a,

a:link {

	color: var(--base-color);

	text-decoration: none;

	transition: 0.3s;

}

a:visited {

	color: var(--base-color);

}

a:hover {

	color: var(--base-color);

}

a:active {

	color: var(--base-color);

}

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

	レイアウト

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

body {

	color: var(--base-color);

	font-size: 1.6rem;

	font-weight: 400;

	line-height: 1.5;

	text-size-adjust: none;

	-webkit-text-size-adjust: none;

	background-color: #FFF;

}

body.fixed {

	overflow-y: scroll;

}

.fixed {

	position: fixed;

	width: 100%;

	height: 100%;

}

#container {

	position: relative;

	text-align: left;

}

a[href^="tel:"] {

	cursor: default;

	pointer-events: none;

}

@media all and (min-width: 897px) {

	.sp {

		display: none !important;

	}

}

@media all and (max-width: 896px) {

	body {

		min-width: inherit;

		font-size: 1.4rem;

	}

	a:hover,

	a:hover img {

		opacity: 1 !important;

	}

	.pc {

		display: none !important;

	}

	a[href^="tel:"] {

		cursor: pointer;

		pointer-events: auto;

	}

	#container {

		margin-bottom: 6rem;

	}

}

@media all and (max-width: 1024px) {

	a:hover,

	a:hover img {

		opacity: 1 !important;

	}

}

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

	ヘッダー

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

#gHeader {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	z-index: 999;

	background-color: var(--white);

}

#gHeader .hBox {

	padding-left: 2rem;

}

#gHeader .hLogo {

	margin-top: 1.3rem;

	width: 44rem;

}

#gHeader .hLogo a {

	display: flex;

	flex-wrap: wrap;

}

#gHeader .hLogo span {

	display: block;

}

#gHeader .hLogo .pic {

	margin-right: 0.8rem;

	width: 6.5rem;

}

#gHeader .hLogo .rArea {

	margin-top: 0.2rem;

}

#gHeader .hLogo .rArea .txt {

	font-size: 1.4rem;

	font-weight: 400;

	letter-spacing: 0.05em;

}

#gHeader .hLogo .rArea .txtImg {

	margin: 0.4rem 0 0 -0.4rem;

	width: 36.5rem;

}

#gHeader .linkUl li {

	width: 28rem;

}

#gHeader .linkUl li a {

	padding-bottom: 0.5rem;

	min-height: 8rem;

	color: var(--white);

	font-size: 2.2rem;

	font-weight: 700;

	letter-spacing: 0.02em;

	text-align: center;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;

	box-sizing: border-box;

	background: var(--brown2) url(../img/common/icon01.webp) no-repeat right 2.8rem center / 0.8rem;

}

#gHeader .linkUl li a:hover {

	opacity: 0.65;

}

#gHeader .linkUl li a span {

	padding: 0 2.6rem 0 3.4rem;

	display: inline-block;

	background: url(../img/common/icon04.webp) no-repeat left center / 2.4rem;

}

#gHeader .linkUl li.tel a {

	background: var(--brown3) url(../img/common/icon02.webp) no-repeat right 2.8rem center / 0.8rem;

}

#gHeader .linkUl li.tel a span {

	padding: 0.2rem 1.7rem 0 2.5rem;

	color: var(--base-color);

	font-size: 2.8rem;

	font-family: "Cabin", sans-serif;

	background: url(../img/common/icon03.webp) no-repeat left center / 1.8rem;

}

#gHeader .menu {

	position: relative;

	height: 8rem;

	width: 9rem;

	cursor: pointer;

	z-index: 1000;

	-webkit-transition: all .3s ease;

	transition: all .3s ease;

	background-color: var(--white);

}	

#gHeader .menu span {

	margin: 0 0 0 -1.6rem;

	background: var(--base-color);

	border: none;

	height: 0.2rem;

	width: 3.2rem;

	position: absolute;

	top: 3rem;

	left: 50%;

	-webkit-transition: all .35s ease;

	transition: all .35s ease;

	cursor: pointer;

}	

#gHeader .menu span:nth-of-type(2) {

	top: 3.9rem;

}	

#gHeader .menu span:nth-of-type(3) {

	top: 4.8rem;

}

#gHeader .menu.on .top {

	transform: translateY(0.9rem) translateX(0) rotate(45deg);

}

#gHeader .menu.on .middle {

	opacity: 0;

}

#gHeader .menu.on .bottom {

	transform: translateY(-0.9rem) translateX(0) rotate(-45deg);

}

.menuBox { 

	position: fixed;

	right: 0;

	top: 0;

	width: 40rem;

	background: var(--white);

	z-index: 100;

	height: 100%;

	overflow-y: auto;

	box-sizing: border-box;

	transform: translateX(100%);

	transition: .4s;

}

.menuBox.open {

	transform: translateX(0);

}

.menuBox .innerBox {

	padding: 10rem 6rem 5rem;

}

.menuBox .naviList {

	margin-bottom: 5.5rem;

}

.menuBox .naviList > li {

	border-bottom: 1px solid var(--brown3);

}

.menuBox .naviList .liStyle {

	border-bottom: 0;

}

.menuBox .naviList > li > a {

	padding: 1.1rem 0;

	display: inline-block;

	font-weight: 500;

	letter-spacing: 0.16rem;

}

.menuBox .naviList > li > a:hover,

.menuBox .naviList .subNaviList a:hover {

	opacity: 0.65;

}

.menuBox .naviList .subNaviList {

	margin: 0.5rem 0 1.3rem 0.5rem;

}

.menuBox .naviList .subNaviList li {

	width: 48%;

} 

.menuBox .naviList .subNaviList a {

	padding-left: 1rem;

	position: relative;

	color: var(--brown2);

	font-size: 1.4rem;

	font-weight: 500;

	letter-spacing: 0.14rem;

	line-height: 2;

}

.menuBox .naviList .subNaviList a::after {

	width: 0.3rem;

	height: 0.3rem;

	position: absolute;

	top: 1rem;

	left: 0;

	z-index: 1;

	content: "";

	background-color: var(--brown2);

	border-radius: 50%;

}

#gHeader .menuBox .linkUl li {

	margin-bottom: 1.9rem;

}

#gHeader .menuBox .linkUl li:last-child {

	margin-bottom: 0;

}

#gHeader .menuBox .linkUl li a {

	padding-bottom: 0;

	border-radius: 0.8rem;

	min-height: 6rem;

	font-size: 2rem;

}

#gHeader .menuBox .linkUl li span {

	padding-right: 3.5rem;

	background-size: 2.2rem auto;

	background-image: url(../img/common/icon11.webp);

}

#gHeader .menuBox .linkUl li.tel span {

	padding-right: 2.7rem;

	background-size: 1.6rem auto;

	font-size: 2.6rem;

	background-image: url(../img/common/icon10.webp);

}

@media all and (min-width: 1025px) {

	#gHeader .menu:hover {

		opacity: 0.65;

	}

}

@media all and (max-width: 896px) {

	#gHeader {

		position: static;

	}

	#gHeader .hBox {

		padding-left: 1rem;

	}

	#gHeader .hLogo,

	.menuBox .logo {

		margin-top: 1rem;

		width: 29rem;

	}

	#gHeader .hLogo .pic,

	.menuBox .logo .pic {

		margin-right: 0.6rem;

		width: 4.4rem;

	}

	#gHeader .hLogo .rArea,

	.menuBox .logo .rArea {

		margin-top: 1px;

	}

	#gHeader .hLogo .rArea .txt,

	.menuBox .logo .rArea .txt {

		font-size: 1rem;

	}

	#gHeader .hLogo .rArea .txtImg,

	.menuBox .logo .rArea .txtImg {

		margin: 0.6rem 0 0 -0.2rem;

		width: 23.3rem;

	}

	.menuBox .logo {

		margin-left: 1rem;

	}

	.menuBox .logo a {

		display: flex;

		flex-wrap: wrap;

	}

	.menuBox .logo .rArea .txt {

		letter-spacing: 0.05em;

	}

	.menuBox .logo span {

		display: block;

	}

	.menuBox .logo .pic {

		display: inline-block;

	}

	#gHeader .rBox {

		display: block;

	}

	#gHeader .menu {

		position: fixed;

		top: 0;

		right: 0;

		height: 6rem;

		width: 6rem;

		border-radius: 0 0 0 1.2rem;

	}	

	#gHeader .menu span {

		margin: 0 0 0 -1.6rem;

		top: 2rem;

	}	

	#gHeader .menu span:nth-of-type(2) {

		top: 2.9rem;

	}	

	#gHeader .menu span:nth-of-type(3) {

		top: 3.8rem;

	}

	.menuBox { 

		width: 100%;

	}

	.menuBox .innerBox {

		padding: 3.8rem 4.7rem 5rem 4.9rem;

	}

	.menuBox .naviList > li > a {

		padding: 1.05rem 0;

		font-size: 1.6rem;

		display: block;

	}

	.menuBox .naviList .subNaviList li {

		width: 48%;

	} 

	.menuBox .naviList .subNaviList a {

		display: block;

	}

}

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

	フッター

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

#gFooter .yellowBg {

	position: relative;

	padding-bottom: 11.5rem;

}

#gFooter .yellowBg::after {

	position: absolute;

	z-index: -1;

	top: -35rem;

	left: 0;

	width: 100%;

	height: calc(100% + 35rem);

	content: "";

	background: linear-gradient(0deg, var(--brown3) 0%, var(--white) 100%);

}

#gFooter .comAccessBox {

	margin-top: 23.9rem;

}

#gFooter .fBox {

	padding: 10.8rem 0 4.4rem;

	background-color: var(--brown4);

}

#gFooter .fBox .content {

	margin-bottom: 11.8rem;

	max-width: 100rem;

	flex-direction: row-reverse;

	align-items: flex-start;

}

#gFooter .fBox .fLogo {

	margin: 0.5rem 7.5rem 0 0;

	width: 19.5rem;

	text-align: center;

}

#gFooter .fBox .fLogo a {

	display: inline-block;

}

#gFooter .fBox .fLogo span {

	margin: 1.4rem 0 1.3rem;

	display: block;

	color: var(--white);

	font-size: 1.4rem;

	letter-spacing: 0.07rem;

}

#gFooter .fBox .rBox {

	flex: 1;

}

#gFooter .fBox .naviBox a {

	color: var(--white);

	font-weight: 500;

	letter-spacing: 0.16rem;

}

#gFooter .fBox .naviBox {

	padding: 0 6.3rem 0 3rem;

	border-left: 1px solid var(--brown5);

}

#gFooter .fBox .fNavi > li {

	margin-bottom: 1.4rem;

}

#gFooter .fBox .fNavi > li:last-child {

	margin-bottom: 0;

}

#gFooter .fBox .subBox {

	margin: 2.3rem 0 0 0.5rem;

}

#gFooter .fBox .subNavi {

	width: 13rem;

}

#gFooter .fBox .subNavi li {

	margin-bottom: 1.2rem;

}

#gFooter .fBox .subNavi a {

	padding-left: 1rem;

	position: relative;

	font-size: 1.4rem;

	font-weight: 400;

	letter-spacing: 0.14rem;

}

#gFooter .fBox .subNavi a::after {

	position: absolute;

	top: 1rem;

	left: 0;

	width: 0.3rem;

	height: 0.3rem;

	content: "";

	z-index: 1;

	background-color: var(--white);

	border-radius: 50%;

}

#gFooter .fBox address {

	text-align: center;

	color: var(--white);

	font-size: 1.2rem;

	font-weight: 500;

	letter-spacing: 0.216rem;

}

#gFooter .fBox .naviBox a:hover {

	opacity: 0.65;

}

@media all and (max-width: 896px) {

	#gFooter .yellowBg {

		padding-bottom: 5.5rem;

	}

	#gFooter .yellowBg::after {

		top: -20rem;

		height: calc(100% + 20rem);

	}

	#gFooter .comAccessBox {

		margin-top: 8.9rem;

	}

	#gFooter .fBox {

		padding: 3rem 0 1.8rem;

	}

	#gFooter .fBox .content {

		margin-bottom: 4.4rem;

		max-width: 100%;

		display: block;

	}

	#gFooter .fBox .fLogo {

		margin: 0 auto;

		width: 26rem;

	}

	#gFooter .fBox .fLogo .img01 {

		width: 10.1rem;

	}

	#gFooter .fBox .fLogo span {

		margin: 1rem 0 0.8rem;

		font-size: 1.2rem;

		letter-spacing: 0.06rem;

	}

	#gFooter .fBox .rBox {

		display: block;

	}

	#gFooter .fBox .naviBox {

		margin-bottom: 4rem;

		padding: 0 2rem;

		border-left: 0;

	}

	#gFooter .fBox .naviBox a {

		color: var(--white);

		font-weight: 500;

		letter-spacing: 0.16rem;

	}

	#gFooter .fBox .fNavi > li {

		margin-bottom: 0;

		border-bottom: 1px solid var(--brown5);

	}

	#gFooter .fBox .fNavi > li > a {

		padding: 0.9rem 0;

		display: block;

	}

	#gFooter .fBox .subBox {

		margin: 1.8rem 0 3rem 0.5rem;

	}

	#gFooter .fBox .subNavi {

		margin-top: -1.3rem;

		width: 43.5%;

	}

	#gFooter .fBox .subNavi li {

		margin: 1.3rem 0 0;

	}

	#gFooter .fBox .subNavi a {

		display: block;

	}

	#gFooter .fBox address {

		font-size: 1rem;

		letter-spacing: 0.1rem;

	}

}