@charset "UTF-8";

/*-----------------------------------------------------
Reset 
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section , main {
	display: block;
}

a:link, a:visited, a:hover, a:active {
  color: var(--main-font-color); text-decoration: none;
}

/*html { scroll-behavior: smooth; }*/
body { line-height: 1; text-align: justify; background: #fff; color: var(--main-font-color); font-family: "A1明朝", serif; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom; flex-shrink: 0; }
picture { display: block; }

/*滞在色変*/
#Index nav.localnav #menu01 a , #Outline nav.localnav #menu02 a , #Location nav.localnav #menu03 a , #Plan nav.localnav #menu04 a , #Quality nav.localnav #menu05 a , #Structure nav.localnav #menu06 a , #Gallery nav.localnav #menu07 a { background: #f0ecde; }

/*オーバーレイ*/
.overlay { background: #fff; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }

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

common

----------------------------------------------------- */
h1 , h2 , h3 , h4 , h5 { font-weight: initial; }
.pc { display: block; }
.sp { display: none; }
p { color: var(--main-font-color); line-height: 1.4; }
/*.small { font-size: 10px; line-height: 1.3; }*/
sup { font-size: 10px; vertical-align: top; position: relative; top: -0.3em; }
.cp { font-size: 10px; line-height: 1.3 }

.w900 { max-width: 900px; width: 90%; margin: 0 auto;}
.inner { max-width: 1280px; width: 90%; margin: 0 auto; }
.flex { display: flex; justify-content: space-between; align-items: flex-start; }
[data-overDirection="full"] { width: 100vw; margin: 0 calc(50% - 50vw); }
[data-color="ocher"]{ color: #BB915C; }
[data-size="w900"]{ max-width: 900px; margin: 0 auto; }
[data-size="w1000"]{ max-width: 1000px; width: 90%; margin: 0 auto; }
[data-size="w1100"]{ max-width: 1100px; width: 90%; margin: 0 auto; }
[data-size="w1200"]{ max-width: 1200px; width: 90%; margin: 0 auto; }

:root {
	--main-font-color: #373737;
	--brown-color: #532b1a;
	--green-color: #5f825a;
	--sub-font: "Cardo", serif;
  	--ryumin-font: "リュウミン R-KL JIS2004 AP", serif;
	--gothic-font: Gothic Medium BBB , "Hiragino Kaku Gothic ProN";
	--a1gothic-font: "A1ゴシック" , "Hiragino Kaku Gothic ProN";
	--lutes-font: "Lutes UD PE Light", serif;
}
/*fade*/
.fade { opacity: 0; transition: opacity 1.5s; }
.fade.is_inview { opacity: 1; transition-delay: .8s; }

.fade_early { opacity: 0; transition: opacity 1s; }
.fade_early.is_inview { opacity: 1; transition-delay: .1s; }

.fadeup { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; }
.fadeup.is_inview { opacity: 1; transform: translateY(0); transition-delay: .1s; }

.line { border:solid #bb915c82 .3px; margin-bottom: 40px; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

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

下層heeadまわり

----------------------------------------------------- */
#main { background:url(../img/common/mv_bg.png) no-repeat; background-size: contain; padding-top: 0; padding-bottom: clamp(60px, 10vw, 120px); padding-top: 20px; }
#main .intro p.intro_ttl { font-size: clamp(18px, 4vw, 23px); line-height: 2; margin-bottom: clamp(15px, 3vw, 45px); }
#main .intro p.intro_txt { font-size: clamp(13px, 3vw, 15px); line-height: 1.8; }
#main .intro { max-width: 900px; width: 90%; margin: 0 auto; margin-bottom: 45px; text-align: center; }

.intro h2 { font-size: 35px; line-height: 50px; margin-bottom: 30px; }
.head_area { height: 290px; display: flex; align-items: center; margin-bottom: clamp(60px, 5vw, 100px); }
.head_area .head_img { position: relative; max-width: 800px; }
.head_area h3 { background: #fff; padding: 18px 25px; box-sizing: border-box; text-align:left; position: relative; left: -60px; font-size: clamp(13px, 3vw, 18px); color: #5f825a; width: min(90%, 480px); }
.head_area h3 span.en { font-family: var(--lutes-font); font-size: clamp(27px, 4vw, 36px); color: var(--mossgreen-color); display: block; margin-bottom: clamp(3px, 1vw, 10px); }
.head_area p.cp {  position: absolute; right:2%; bottom: 2%; color: #fff; text-align: right; }
.head_lead p.ttl { margin-bottom: 50px; text-align: center; font-size: clamp(1.125rem, 1.016rem + 0.55vw, 1.563rem); line-height: 1.4; color: var(--brown-color); }
.head_lead p.txt { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); text-align: center; line-height: 1.6; }
.contents { background: url("../img/common/top_bg.png")no-repeat; background-size: contain; background-position: top; }



@media print {
    header , footer { display: none!important; }
}

@media only screen and (max-width: 980px){
	#main {  padding-top: 50px; }
	.head_area { display: block; height: initial; }
	.head_area h3 { width: 100%; padding: 10px 20px 15px; left: 0; }
	.head_area .head_img { max-width: initial; width: 100%; }
}

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

/*　600pxからレスポンシブ*/
@media only screen and (max-width: 600px){
	#main { background: url(../img/common/mv_bg_sp.png) no-repeat; padding-top: 30px; }
	#main .intro p.intro_ttl { line-height: 1.7; }
	#main .intro p.intro_txt { text-align: left; }
	
	sup { font-size: 7px; top: 0em; }
	.pc { display: none; }
	.sp { display: block; }
	.head_area h3 span { margin-bottom: 10px; line-height: 1.3; }
	.head_lead { padding-top: 70px; margin-bottom: 50px; }
	.head_lead p.ttl { margin-bottom: 40px; }
	.head_lead p.txt { text-align: left; }
	.intro { margin-bottom: 40px; }
	.intro p.ttl { margin-bottom: 20px; text-align: left; }
	.line { margin-bottom: 20px; }
	[data-fontsize="font20"] { line-height: 26px; }
	p.txt { line-height: 22px; }
	p.subttl { line-height: 26px; }
	p.linettl { line-height: 26px; }
	section .intro { margin-bottom: 40px; }
}