@charset "utf-8";

/**
 * style
 * (c) FOURDIGIT Inc.
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag, siteCommonClass
 * 4. Layout
 * 5. EachPageStyle
 *
 */

/**
 * 1. import
 */
@import url("import/reset.css");
@import url("import/util.css");

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Work+Sans:400,600');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');


@font-face {
    font-family: Brown-Bold;
    font-style: normal;
    font-weight: normal;
    src:url("fonts/lineto-brown-bold.eot");
    src:url("fonts/lineto-brown-bold.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-brown-bold.woff2") format("woff2"),
        url("fonts/lineto-brown-bold.woff") format("woff");
}

/*
font-family: 'Work Sans', sans-serif;
font-family: 'Libre Baskerville', serif;
*/

/* @import "../ext_{bukkenID}/{bukkenID}.css"; */

/**
 * 2. html, body
 */
	body {
		background-color: #fff;

		background-repeat: repeat-x;
		background-position: center top;
		
	}

	.page {
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-size: 14px;
		line-height: 1.5;

/*		min-width: 1160px; */
		color: #000;
		letter-spacing: 0.1em;
	}



	.notoSans {
		font-family: 'Noto Sans Japanese',sans-serif;
	}

/**
 * 3. HTMLtag, siteCommonClass
 */

/* anchor */
	a {
		color: #333;
		text-decoration: none;
	}
	a:visited {}

	a:hover {
		text-decoration: none;
	}
	a:active {}

/* heading */
	.siteTitle {
		/* dont use <h1> selector */
	}

	.contentTitle {
		/* dont use <h2> selector */
	}

/* cap */
	.cap,
	.caption {
		font-size: 10px;
		line-height: 15px;
		color: #666;
		background: none;
	}

	.cap {
		padding-top: 5px;
	}

	img { max-width: 100%; }

	/* imgWrap */
.imgWrap {
    position: relative;
	width: fit-content;
}

.imgWrap .caption {
    position: absolute;
    padding: 5px;
}

.caption--inLeft {
    bottom: 0;
    left: 0;
    text-align: left;
}

.caption--inUpLeft {
    top: 0;
    left: 0;
    text-align: left;
}

.caption--outLeft {
    top: 100%;
    left: 0;
    text-align: left;
}


.caption--inRight {
    right: 0;
    bottom: 0;
    text-align: right;
}

.caption--inUpRight {
    top: 0;
    right: 0;
    text-align: right;
}

.caption--outRight {
    top: 100%;
    right: 0;
    text-align: right;
}

.caption-white-shadow {
    color: #fff;
    text-shadow: 0 0 6px #000, 0 0 6px #000, 0 0 6px #000;
}

.color-white {
    color: #fff !important;
}

.color-black {
    color: #000 !important;
}


/**
 * 4. Layout
 */



	#container {
		text-align: left;
		background-color: #fff;/* transparent */
	}

@media only screen and (max-width: 640px) {
	body #container {
	padding-top: 47px;
	padding-bottom: 30px;
}

	.wrap {
	width: auto;
	padding-right: 10px;
	padding-left: 10px;
	}
}

#gNav.fixed {
	position: absolute !important;
}
@media only screen and (max-width: 640px) {
	#gHeader {
		position: absolute !important;
		z-index: 9999;
	}

	#gNav {
		top: 66px;
	}
}

/* gHeaderId */
	#gHeaderId {
		box-sizing: border-box;
		width: 100%;
		height: 115px;
		padding-bottom: 5px;
		background-color: #FFF;
	}

	#gHeaderId.fixed {
		position: fixed;
		top: -60px;
		left: 0;
		z-index: 10000;
		border-bottom: 1px solid #DDD;
	}

	#gHeaderId .hdrSublink {
		position: absolute;
		top: 0;
		right: 5px;
		padding-top: 20px;
		font-size: 11px;
		text-align: right;
	}

	#gHeaderId .hdrSublink span {
		margin-right: 3px;
		font-family:  Brown-Bold,sans-serif;
		font-size: 14px;
		color: #000;
	}

	#gHeaderId .hdrSublink a {
		padding-right: 20px;
		color: #666;
		text-decoration: none;
		letter-spacing: 0;

		background-repeat: no-repeat;
		background-position: right;
	}

	#gHeaderId h1 {
		position: absolute;
		top: 80px;
		left: 5px;
    width: 200px;
	}

	#gHeaderId #SPMENU {
		display: none;
	}

	#gHeaderId .wrap {
		position: relative;
		max-width: 1168px;
		margin-right: auto;
		margin-left: auto;
	}

	#gHeaderId.fixed h1 {
		top: 70px;
	}



@media only screen and (max-width: 640px) {
	#gHeaderId {
		position: absolute;
		top: 66px;
		left: 0;
		z-index: 10000;
		height: 70px;
	}

	#gHeaderId.fixed {
		position: fixed;
		top: 0;
	}

	#gHeaderId h1 {
		position: static;
    width: 110px;
		padding-top: 25px;
		text-align: left;
	}

	#gHeaderId .hdrSublink {
		display: none;
	}

	#gHeaderId #SPMENU {
		position: absolute;
		top: 10px;
		right: 0;
		z-index: 15000;
		box-sizing: border-box;
		display: block;
		width: 50px;
		height: 49px;
		background-color: #FFF;
	}

	#gHeaderId #SPMENU span {
		position: absolute;
		left: 0;
		display: block;
		width: 35px;
		height: 3px;
		background-color: #333;
	}

	#gHeaderId #SPMENU span.bar1 {
		top: 12px;
	}

	#gHeaderId #SPMENU.off span.bar1 {
		top: 22px;
		animation-name: bar1;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-direction: reverse;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU.on span.bar1 {
		top: 12px;
		animation-name: bar1;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU.off span.bar2 {
		top: 22px;
		animation-name: bar2;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-direction: reverse;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU.on span.bar2 {
		top: 12px;
		animation-name: bar2;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU.off span.bar3 {
		top: 22px;
		animation-name: bar3;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-direction: reverse;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU.on span.bar3 {
		top: 12px;
		animation-name: bar3;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	#gHeaderId #SPMENU span.bar2 {
		top: 22px;
	}

	#gHeaderId #SPMENU span.bar3 {
		top: 32px;
	}

	@keyframes bar1 {
		0% {top:12px;transform:rotate(0deg);}
		50% {top:22px;transform:rotate(0deg);}
		100% {top:22px;transform:rotate(45deg);}
	}
	@keyframes bar2 {
		0% {top:22px; opacity:1;}
		50% {top:22px;opacity:0;}
		100% {top:22px;opacity:0;}
	}
	@keyframes bar3 {
		0% {top:32px;transform:rotate(0deg);}
		50% {top:22px;transform:rotate(0deg);}
		100% {top:22px;transform:rotate(-45deg);}
	}

	#gHeaderId .wrap {
		padding-right: 10px;
		padding-left: 10px;
	}

}

/* gNavId */

	#gNavId {
		position: absolute;
		top: 69px;
		right: 0;
	    max-width: 1168px;
		height: 30px;
	}

	#gNavId.visible {
		display: block !important;
	}

	#gNavId ul {
		font-size: 0;
		line-height: 0;
		text-align: center;
		letter-spacing: 0;
	}

	#gNavId ul li {
		display: inline-block;
		margin-left: 25px;
	}

	#gNavId ul li a {
		position: relative;
		display: block;
		padding: 0 8px;
		font-family: Brown-Bold,sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 35px;
		color: #000;
		text-decoration: none;
		letter-spacing: 0.05em;
	}

	#gNavId ul li a::after {
		position: absolute;
		bottom: 0;
		left: 50%;
		display: block;
		width: 0%;
		height: 2px;
		content: "";
		background-color: #000;
		transition: all 0.3s;
	}

	#gNavId ul li.on a::after,
	#gNavId ul li a:hover::after {
		left: 0%;
		width: 100%;
	}

@media only screen and (max-width: 640px) {
	#gNavId {
		position: absolute;
		top: 50px;
		left: 0;
		z-index: 9999;
		display: none;
		height: auto;
		background-color: #EEE;
	}

	#gNavId ul {
		padding: 15px 0;
	}

	#gNavId ul li {
		display: inline-block;
		height: auto;
		margin: 0;
	}

}

@media only screen and (max-width: 640px) {
	#gNavId {
		position: absolute;
		top: 60px;
		left: 0;
		display: none;
		height: auto;
		background-color: #fff;
	}

	#gNavId ul li {
		display: block;
		height: auto;
		padding-left: 20px;
		margin-bottom: 15px;
		text-align: left;
	}

	#gNavId ul li a {
		display: inline-block;
	}

}




/*  content */

	#scrollArr {
		position: fixed;
		right: 20px;
		bottom: 20px;
		opacity: 1;
		transition: all 0.3s;
	}

	#scrollArr.off {
		opacity: 0;
	}

	#container.fixed {
		padding-top: 115px;
	}

	#mainContent {
		padding-top: 115px;
	}

	#mainContent .wrap {
		max-width: 1168px;
		padding-right: 56px;
		padding-left: 56px;
		margin-right: auto;
		margin-left: auto;
	}

@media only screen and (max-width: 640px) {
	#scrollArr {
		display: none;
	}

	#container.fixed {
		padding-top: 0;
	}

	#mainContent {
		padding-top: 75px;
	}

	#mainContent .wrap {
		padding-right: 10px;
		padding-left: 10px;
	}


}