@charset "utf-8";
/* ------ General Settings ------ */
html {
	*overflow-x: hidden;
}
body {
	background-color: #D5D6C3;
}
#siteWrapper {
	background-color: #D5D6C3;
	padding: 20px!important;
}
@media screen and (min-width: 1px) and (max-width: 639px) {
	#siteWrapper {
		padding: 2%!important;
	}
}
#wrapper {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	border-top: solid 20px #000;
	border-bottom: solid 20px #000;
	border-left: solid 20px #333;
	border-right: solid 20px #333;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
}
@media screen and (max-width: 1440px) {
	#wrapper {
		margin: 0;
	}
}
@media screen and (min-width: 1px) and (max-width: 639px) {
	body {
		background-color: #ccc;
	}
	#siteWrapper {
		background-color: #ccc;
	}
	#wrapper {
		border: double 4px #0089ab;
		filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
	}
}
.fLeft {
	float: left;
}
.fRight {
	float: right;
}
a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	line-height: 1px;
	transition: .3s;
}
.forPc {
	display: block;
}
.forMobile {
	display: none;
}
@media screen and (max-width: 639px) {
	.forPc {
		display: none;
	}
	.forMobile {
		display: block;
	}
}
/* ------ webfont ------ */
/* 日本語フォント */
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	line-height: 160%;
	color: #222;
	text-align: left;
	-webkit-text-size-adjust: none;
}
/* 指定英字フォント */
.webfontL {
	font-family: 'Barlow', sans-serif;
	font-weight: 900!important;
}
.webfontS {
	font-family: 'Barlow', sans-serif;
	font-weight: 100!important;
}
/* ------ ライン ------ */
/* leftLine */
.leftLine {
	line-height: 100%;
	display: flex;
	align-items: center;
}
.leftLine:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
/* 左右ライン */
.wLine {
	display: flex;
	align-items: center;
}
.wLine:before, .wLine:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #222;
}
.wLine:before {
	margin-right: 1rem;
}
.wLine:after {
	margin-left: 1rem;
}

/* ------ inview アニメーション ------ */
/* fade-In */
.fade-In {
	opacity: 0;
	transition: 2s;
}
.fade-In.is-show {
	opacity: 1;
}
/* fadeIn_up */
.fadeIn_up {
	opacity: 0;
	transform: translate(0, 10%);
	transition: 1.5s;
}
.fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
}
/* fadeIn_left */
.fadeIn_left {
	opacity: 0;
	transform: translate(-10%, 0);
	transition: 3s;
}
.fadeIn_left.is-show {
	transform: translate(0, 0);
	opacity: 1;
}
/* fadeIn_right */
.fadeIn_right {
	opacity: 0;
	transform: translate(10%, 0);
	transition: 3s;
}
.fadeIn_right.is-show {
	transform: translate(0, 0);
	opacity: 1;
}

/* ------ webfont icon ------ */
/* icon */
.icon01::before {
	font-family: 'Material Symbols Outlined';
	content: "\e887";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon02::before {
	font-family: 'Material Symbols Outlined';
	content: "\eaaa";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon03::before {
	font-family: 'Material Symbols Outlined';
	content: "\e5cc";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon04::before {
	font-family: 'Material Symbols Outlined';
	content: "\e5cd";
	vertical-align: -5%;
	margin-right: 0.2em;
}
.icon05::before {
	font-family: 'Material Symbols Outlined';
	content: "\e5c5";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon06::before {
	font-family: 'Material Symbols Outlined';
	content: "\e5df";
	vertical-align: -10%;
	margin-right: 0.2em;
}
.icon07::before {
	font-family: 'Material Symbols Outlined';
	content: "\e02e";
	vertical-align: -10%;
	margin-right: 0.2em;
}

/* nav
================================================== */
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
	position: absolute;
	left: -9999px;
}
.menu-icon:checked + label,
.menu-icon:not(:checked) + label{
	position: fixed;
	top: 42px;
	right: 40px;
	display: block;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 191;
}
.menu-icon:checked + label:before,
.menu-icon:not(:checked) + label:before{
	position: absolute;
	content: '';
	display: block;
	width: 30px;
	height: 20px;
	z-index: 192;
	top: 0;
	left: 0;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: border-width 100ms 1500ms ease, 
	top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
	height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), 
	background-color 200ms ease,
	transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after,
.menu-icon:not(:checked) + label:after{
	position: absolute;
	content: '';
	display: block;
	width: 22px;
	height: 2px;
	z-index: 192;
	top: 10px;
	right: 4px;
	background-color: #fff;
	margin-top: -1px;
	transition: width 100ms 1750ms ease, 
	right 100ms 1750ms ease,
	margin-top 100ms ease, 
	transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:before{
	top: 10px;
	transform: rotate(45deg);
	height: 2px;
	background-color: #fff;
	border-width: 0;
	transition: border-width 100ms 340ms ease, 
	top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
	height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), 
	background-color 200ms 500ms ease,
	transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked + label:after{
	width: 30px;
	margin-top: 0;
	right: 0;
	transform: rotate(-45deg);
	transition: width 100ms ease,
	right 100ms ease,  
	margin-top 100ms 500ms ease, 
	transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav{
	position: fixed;
	top: 15px;
	right: 15px;
	display: block;
	width: 70px;
	height: 70px;
	padding: 0;
	margin: 0;
	z-index: 190;
	overflow: hidden;
	border-top: solid 5px #000;
	border-bottom: solid 5px #000;
	border-left: solid 5px #333;
	border-right: solid 5px #333;
	box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
	background-color: #999;
	transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),  
	right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
	transform 250ms 1100ms ease,
	width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
	height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked ~ .nav {
	animation-play-state: paused;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	width: 200%;
	height: 200%;
	transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),  
	right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
	transform 250ms 700ms ease,
	width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
	height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav ul{
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: 6;
	text-align: center;
	transform: translateY(-50%);
	list-style: none;
}
.nav ul li{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 10px 0;
	text-align: center;
	list-style: none;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: all 250ms linear;
}
.nav ul li:nth-child(1){
transition-delay: 200ms;
}
.nav ul li:nth-child(2){
	transition-delay: 150ms;
}
.nav ul li:nth-child(3){
	transition-delay: 100ms;
}
.nav ul li:nth-child(4){
	transition-delay: 50ms;
}
.nav ul li a{
	font-size: 9vh;
	text-transform: uppercase;
	line-height: 1.2;
	display: inline-block;
	position: relative;
	color: #fff;
	transition: all 250ms linear;
}
.nav ul li a:hover{
	text-decoration: none;
	color: #1273a8;
}
.nav ul li a:after{
	display: block;
	position: absolute;
	top: 50%;
	content: '';
	height: 2vh;
	margin-top: -1vh;
	width: 0;
	left: 0;
	background-color: #000;
	opacity: 0.8;
	transition: width 250ms linear;
}
.nav ul li a:hover:after{
	width: 100%;
}
.menu-icon:checked ~ .nav  ul li {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 350ms ease,
	transform 250ms ease;
}
.menu-icon:checked ~ .nav ul li:nth-child(1){
	transition-delay: 1400ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(2){
	transition-delay: 1480ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(3){
	transition-delay: 1560ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(4){
	transition-delay: 1640ms;
}
@media screen and (max-width: 800px) {
	.menu-icon:checked + label,
	.menu-icon:not(:checked) + label{
		top: 33px;
		right: 30px;
	}
	.nav{
		width: 50px;
		height: 50px;
	}
	.nav ul li a{
		font-size: 8vh;
	}
}	
@media screen and (max-width: 639px) {
	.menu-icon:checked + label,
	.menu-icon:not(:checked) + label{
		top: 23px;
		right: 25px;
	}
	.nav{
		top: 5px;
		right: 10px;
		box-shadow: 5px 5px 0px 0px rgba(0,0,0,1);
	}
}	

/* headBtnArea
================================================== */
#headBtnArea {
	position: absolute;
	width: 100%;
	top: 1%;
	left: 3.5%;
	transition: .6s;
}
#headBtnArea.zoom {
	top: 10px;
	left: 10px;
	transition: .6s;
}
#headBtnBox {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}
.headBtn {
	position: fixed;
	width: 24%;
	max-width: 350px;
	transition: .9s;
	z-index: 200;
}
.headBtn.zoom {
	width: 90px!important;
	transition: .9s;
}
.headBtn .zoomBox {
	display: block;
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.headBtn .zoomBox:hover {
	transform: scale(1.2); /*画像の拡大率*/
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.headBtn .zoomBox a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}
/* ------ headBtn ------ */
@media screen and (max-width: 638px) {
	#headBtnArea.zoom {
		top: 5px;
		left: 5px;
	}
	#headBtnBox {
		width: 100%;
		padding: 0;
	}
	.headBtn {
		width: 80px;
		opacity: 0;
		filter: alpha(opacity=0);
		-ms-filter: "alpha( opacity=0 )";
		transition: .6s;
	}
	.headBtn.zoom {
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha( opacity=100 )";
		transition: .6s;
	}
	.headBtn .zoomBox:hover {
		transform: scale(1.1); /*画像の拡大率*/
		transition-duration: 0.2s; /*変化に掛かる時間*/
	}
}

/* gNav
================================================== */
#gNav {
	width: 67%;
	padding-left: 33%;
}
@media screen and (max-width: 1300px) {
	#gNav {
	}
}
@media screen and (max-width: 639px) {
	#gNav {
		display: none;
	}
}
#gNav li{
	float: left;
	list-style: none;
	margin: 0 5% 0 0;
	padding: 4% 0 2%;
	font-size: 410%;
	line-height: 100%;
}
#gNav li:last-child{
	margin-right: 0;
}
@media screen and (max-width: 1400px) {
	#gNav li {
		font-size: 4.4vw;
	}
}
@media screen and (max-width: 1100px) {
	#gNav li {
		margin: 0 3% 0 0;
		padding: 4% 0 0;
		font-size: 4vw;
	}
}
@media screen and (max-width: 639px) {
	#gNav li {
		font-size: 200%;
		display: block;
	}
}
#gNav li .btnlinestretches4 {
	/*線の基点とするためrelativeを指定*/
	position: relative;
	/*リンクの形状*/
	padding: 10px 0;
	text-decoration: none;
	outline: none;
}
/*線の設定*/
#gNav ul .btnlinestretches4::before, #gNav ul .btnlinestretches4::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	/*線の形状*/
	background: #fff;
	width: 100%;
	height: 5px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}
/*hover時に伸びる線の形状*/
#gNav ul .btnlinestretches4::after {
	width: 0;
	background: #000;
}
/*hover時に100%に伸びる*/
#gNav ul .btnlinestretches4:hover::after {
	width: 100%;
}

/* contentWrapper
================================================== */
.contentWrapper {
	padding-bottom: 12%;
}
@media screen and (max-width: 639px) {
	.contentWrapper {
		padding-bottom: 26%;
	}
}
/* ------ contentArea ------ */
.contentArea {
	width: 90%;
	margin: 0 auto;
}

/* footArea
================================================== */
#footArea {
	background: #efefef;
	padding: 2% 0 3%;
}
@media screen and (max-width: 639px) {
	#footArea {
		padding: 6% 0;
	}
}

/* breadArea */
#breadArea {
	max-width: 960px;
	margin: 2% auto 0;
	padding: 0 5%;
}
@media screen and (max-width: 639px) {
	#breadArea {
		width: 90%;
		padding: 0;
		margin: 4% auto 0;
	}
}
.breadcrumbs {
	background-color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    border-radius: 3px;
	height: 40px;
	padding: 0 5%;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	font-size: 70%;
	line-height: 40px;
}
@media screen and (max-width: 639px) {
	.breadcrumbs {
		padding: 0 5%;
	}
}
.breadcrumbs li{
	display: inline-block;
}

/* footBlock */
#footBlock {
	position: relative;
	z-index: 1;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 5%;
}
@media screen and (max-width: 639px) {
	#footBlock {
		padding: 0 0 8%;
	}
}
/* footBox */
.footBox {
	padding: 1% 0;
	border-bottom: dotted 1px #fff;
	color: #fff;
}
.footBox:last-child {
	border-bottom: none;
}
@media screen and (max-width: 639px) {
	.footBox {
		width: 90%;
		margin: 0 auto;
		padding: 2% 0;
	}
}
/* footBox linkBox */
.footBox .linkBox {
	position: relative;
	z-index: 10;
	text-align: center;
}
.footBox .linkBox a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999px;
    z-index: 11;
	color: #463318;
}
.footBox .zoomBox {
	display: block;
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.footBox .zoomBox:hover {
	transform: scale(1.2); /*画像の拡大率*/
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.footBox .zoomBox:hover {}
.footBox .linkBox .footListL {
	font-size: 100%;
	font-weight: normal;
	line-height: 120%;
}
.footBox h3 {
	margin: 0;
}
.footBox p {
	font-size: 70%;
}
@media screen and (max-width: 639px) {
	.footBox p {
		font-size: 90%;
	}
}
.footListS {
	font-size: 70%;
	font-weight: normal!important;
}
@media screen and (max-width: 639px) {
	.footListS {
		font-size: 90%;
	}
}
/* footBoxS */
.footBoxS {
	clear: both;
	width: 100%;
	border-top: dotted 1px #fff;
}
@media screen and (max-width: 639px) {
	.footBoxS {
		width: 90%;
		margin: 0 auto;
		padding-top: 2%
	}
}
.footBoxS h3 {
	float: left;
	width: 33.3%;
	padding: 1% 0;
	margin: 0;
	text-align: center;
	font-size: 70%;
}
@media screen and (max-width: 639px) {
	.footBoxS h3 {
		float: none;
		width: 100%;
		padding: 2% 0 0;
		font-size: 90%;
	}
}
.footBoxS h3 a{
	color: #fff;
	display: block;
}
.footBoxS h3 a:hover{
	color: #23d5ab;
	transition: 0.3s;
}

/* footLogo */
.footLogo {
	clear: both;
	width: 100%;
	margin: 20px 0 50px;
}
.footLogo h2 {
	width: 50%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
}
@media screen and (max-width: 639px) {
	.footLogo {
		border: none;
	}
}
/* footSns */
.footSns {
	width: 100px;
	margin: 30px auto 0;
}
.footSnsIcon {
	float: left;
	margin: 0 10px;
	width: 30px;
}
.footSnsIcon:last-child {
	padding-top: 4px;
}
/* crArea */
#crArea {
	background: #efefef;
	padding-bottom: 20px;
}
#crArea p{
	width: 90%;
	font-weight: 500;
	margin: 0 auto;
	text-align: center;
	font-size: 60%!important;
}
@media screen and (max-width: 639px) {
	#crArea p{
		font-size: 60%;
	}
}
/* backtotop */
.backtotop {
	position: fixed;
	bottom: 15px;
	z-index: 90;
	display: none;
	right: 15px;
}
@media screen and (max-width: 639px) {
	.backtotop {
		bottom: 5px;
		right: 5px;
	}
}
.backtotop .zoomBox {
	display: block;
	width: 80px;
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.backtotop .zoomBox:hover {
	transform: scale(1.2); /*画像の拡大率*/
	transition-duration: 0.2s; /*変化に掛かる時間*/
}
.backtotop .zoomBox a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}
@media screen and (max-width: 639px) {
	.backtotop .zoomBox {
		width: 60px;
	}
}





/* ------ 投稿記事 ------ */
.entry-content p {
	padding-bottom: 3%;
	line-height: 200%;
}
@media screen and (max-width: 638px) {
	.entry-content p {
		padding-bottom: 5%;
	}
}
.entry-content figure{
	padding-bottom: 3%;
}
@media screen and (max-width: 638px) {
	.entry-content figure{
		padding-bottom: 5%;
	}
}