@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap');


/* common
-------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
ul {
    list-style: none;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
	border: none;
	vertical-align: bottom;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
address, em, code, cite, dfn, var, optgroup {
  font-style: normal;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}
input[type="button"],input[type="text"],input[type="submit"],input[type="reset"],textarea {
	-webkit-appearance: none;
	border-radius: 0;
	font-family: 'Noto Sans JP', "Meiryo UI" , "メイリオ" , Meiryo , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}


/* module
------------------------------------------------- */
.floatL {
	float: left;
	display: inline;
}
.floatR {
	float: right;
	display: inline;
}
.alignCenter {text-align: center;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.valignTop {vertical-align: top;}
.valignMiddle {vertical-align: middle;}
.valignBottom {vertical-align: bottom;}

.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

.none { display: none; }
.pcon { display: block; }
.spon { display: none; }
@media only screen and (max-width:640px){
.pcon { display: none; }
.spon { display: block; }
}


/* a
------------------------------------------------- */
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
	text-decoration: none;
	outline: none;
	color: #231815;
}
@media only screen and (min-width:641px){
a:hover {
	text-decoration: underline;
}
.al:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	transition: 0.3s;
	text-decoration: none;
}
}


/* font
------------------------------------------------- */
@media only screen and (min-width:641px){
.fo10 { font-size: 10px; }
.fo11 { font-size: 11px; }
.fo12 { font-size: 12px; }
.fo13 { font-size: 13px; }
.fo14 { font-size: 14px; }
.fo15 { font-size: 15px; }
.fo16 { font-size: 16px; }
.fo17 { font-size: 17px; }
.fo18 { font-size: 18px; }
.fo19 { font-size: 19px; }
.fo20 { font-size: 20px; }
.fo21 { font-size: 21px; }
.fo22 { font-size: 22px; }
.fo23 { font-size: 23px; }
.fo24 { font-size: 24px; }
.fo25 { font-size: 25px; }
.fo26 { font-size: 26px; }
.fo27 { font-size: 27px; }
.fo28 { font-size: 28px; }
.fo29 { font-size: 29px; }
.fo31 { font-size: 31px; }
.fo33 { font-size: 33px; }
.fo35 { font-size: 35px; }
.fo37 { font-size: 37px; }
.fo39 { font-size: 39px; }
.fo43 { font-size: 43px; }
.fo48 { font-size: 48px; }
.fo51 { font-size: 51px; }
}
@media only screen and (min-width:641px) and (max-width:1400px){
.fo10 { font-size: 0.714vw; }
.fo11 { font-size: 0.786vw; }
.fo12 { font-size: 0.857vw; }
.fo13 { font-size: 0.92vw; }
.fo14 { font-size: 1vw; }
.fo15 { font-size: 1.071vw; }
.fo16 { font-size: 1.143vw; }
.fo17 { font-size: 1.214vw; }
.fo18 { font-size: 1.286vw; }
.fo19 { font-size: 1.357vw; }
.fo20 { font-size: 1.428vw; }
.fo21 { font-size: 1.5vw; }
.fo22 { font-size: 1.571vw; }
.fo23 { font-size: 1.643vw; }
.fo24 { font-size: 1.714vw; }
.fo25 { font-size: 1.785vw; }
.fo26 { font-size: 1.857vw; }
.fo27 { font-size: 1.928vw; }
.fo28 { font-size: 2vw; }
.fo29 { font-size: 2.071vw; }
.fo31 { font-size: 2.214vw; }
.fo33 { font-size: 2.357vw; }
.fo35 { font-size: 2.5vw; }
.fo37 { font-size: 2.643vw; }
.fo39 { font-size: 2.785vw; }
.fo43 { font-size: 3.071vw; }
.fo48 { font-size: 3.429vw; }
.fo51 { font-size: 3.642vw; }
}
@media only screen and (max-width:640px) {
	.sfo14 { font-size: 2.1875vw; }
	.sfo15 { font-size: 2.34375vw; }
	.sfo16 { font-size: 2.5vw; }
	.sfo17 { font-size: 2.65625vw; }
	.sfo18 { font-size: 2.8125vw; }
	.sfo19 { font-size: 2.96875vw; }
	.sfo20 { font-size: 3.125vw; }
	.sfo21 { font-size: 3.28125vw; }
	.sfo22 { font-size: 3.4375vw; }
	.sfo23 { font-size: 3.59375vw; }
	.sfo24 { font-size: 3.75vw; }
	.sfo25 { font-size: 3.90625vw; }
	.sfo26 { font-size: 4.0625vw; }
	.sfo28 { font-size: 4.375vw; }
	.sfo29 { font-size: 4.53125vw; }
	.sfo33 { font-size: 5.15625vw; }
	.sfo35 { font-size: 5.46875vw; }
	.sfo37 { font-size: 5.78125vw; }
}

/* html
-------------------------------------------------*/
html {
    overflow-x: hidden;
	overflow-y: scroll;
}

/* body
------------------------------------------------- */
body {
	font-family: 'Noto Sans JP', "Meiryo UI" , "メイリオ" , Meiryo , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐ ゴシック" , "MS PGothic" , sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #231815;
    font-weight: 400;
	-webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}
@media only screen and (min-width:641px) and (max-width:1400px){
body {
	font-size: 1.071vw;
}
}
@media only screen and (max-width:640px){
body {
	font-size: 3.733vw; /*24px */
    line-height: 1.6;
}
}

/* module
------------------------------------------------- */
.alignCenter {text-align: center;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.valignTop {vertical-align: top;}
.valignMiddle {vertical-align: middle;}
.valignBottom {vertical-align: bottom;}


/* wrapper
------------------------------------------------- */
#wrapper {
	width: 100%;
	margin: 0 auto;
	clear: both;
    overflow-x: hidden;
	overflow-y: hidden;
}

/* inner
------------------------------------------------- */
.inner {
    width: 100%;
    max-width: 1400px;
	margin: 0 auto;
	clear: both;
	position: relative;
    box-sizing: border-box;
}
@media only screen and (max-width:640px) {
	.inner {
		width: 90%;
		padding: 0;
	}
}
.inner2 {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	clear: both;
	position: relative;
    box-sizing: border-box;
}
@media only screen and (max-width:1400px) and (min-width: 641px) {
	.inner2 {
		width: 65.714em;
	}
}
@media only screen and (max-width:640px) {
	.inner2 {
		width: 90%;
		padding: 0;
	}
}

/* nav
------------------------------------------------- */
.nav {
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
}
.nav .inner {
	position: relative;
}
.gnav {
	background: #fff;
	width: 13em;
	padding-top: 1.667em;
	position: fixed;
	top: 2.533em;
	left: 1em;
	z-index: 999;
}
.gnav .logo {
	width: 7em;
	height: auto;
	margin: 0 auto;
}
.gnav ul {
	text-align: center;
	font-weight: 700;
	line-height: 2.5;
	padding: 1em 0;
}
.gnav ul li a {
	color: #3F7476;
}
.gnav ul li a:hover {
	color: #98644D;
	text-decoration: none;
}
.banner3 {
	width: 24.8em;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99;
}
@media only screen and (max-width:640px) {
	.nav {
		position: relative;
	}
	.nav .inner {
		width: 100%;
	}	
	.hmenu {
		background: #3F7476;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 12.5vw;
		padding: 2vw 18vw 2vw 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;
		opacity: 1;
	}
	.hmenu .logo {
		width: 11.25vw;
		height: auto;
	}
	.hmenu .title {
		color: #fff;
		font-weight: 700;
	}
	.hamburger {
		width: 6.875vw;
		height: auto;
		display: block;
		position: fixed;
		top: 3vw;
		right: 4vw;
		z-index: 101;
	}
	.hamburger .close {
		display: none;
	}
	.hamburger.active .close {
		display: block;
		position: absolute;
		top: 8vw;
		right: 8vw;
	}
	.hamburger.active .open {
		display: none;
	}
	.hmenu.active {
		background: #fff;
	}
	.gnav {
		display: none;
	}
	.gnav.active {
		display: block;
		width: 100%;
		padding: 0;
		top: 0;
		left: 0;
		position: fixed;
		z-index: 100;
	}
	.gnav .flex_sp {
		display: flex;
		height: 160vw;
	}
	.gnav .flex_sp .logo {
		width: 42.18%;
		box-sizing: border-box;
		margin: 0;
		background: url("../img/bg_menu.png") no-repeat top left;
		background-size: cover;
		position: relative;
		z-index: 2;
		padding: 8vw 0 0;
	}
	.gnav .flex_sp .logo img {
		width: 25.9375vw;
		margin: 0 auto 4vw;
	}
	.gnav .flex_sp .logo span {
		display: block;
		color: #fff;
		text-align: center;
	}
	.gnav .flex_sp ul {
		width: 57.82%;
		box-sizing: border-box;
		text-align: center;
		padding: 30vw 0 0;
		line-height: 3;
		position: relative;
		z-index: 2;
		background: #fff;
	}
	.gnav .flex_sp div .close {
		width: 6.875vw;
		height: auto;
	}
	.gnav .banner1 {
		position: absolute;
		top: 127vw;
		left: 15vw;
		z-index: 101;
		width: 69.53vw;
	}
	.banner3 {
		width: 70vw;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 99;
	}
}

/* footer
------------------------------------------------ */
#footer {
	background: #3F7476;
	padding: 1.2em 0;
	display: flex;
	justify-content: center;
}
#footer small {
	color: #fff;
}
@media only screen and (max-width:640px) {
	#footer {
		padding: 2vw 0;
	}
}