@charset "UTF-8";
/* CSS Document */
/*
Theme Name: gohannowa_new
Description: 食品ロス削減サービス
Theme URI: gohannowa.jp
Author: G-Place Corporation.
Version: 1.0.1
*/
/*ブレイクポイント 980px（仮）*/

* {box-sizing:border-box;}
body , html {width:100%; height:100%; margin:0; padding:0;	font-family: 'Noto Sans JP', sans-serif;}
p , ul , li , dl , dt , dd ,input {margin:0; padding:0; list-style:none;}
strong , em , h1 , h2 , h3 , h4 ,h5 {font-size:100%; font-weight:normal; font-style:normal; margin:0; padding:0; line-height:1;}
img {width:100%; border:none; vertical-align:bottom;}
a {text-decoration:none; color:#444;}
.mark a{ background: linear-gradient(transparent 0%, #fff799 0%);}	

/*decoration parts*/
.bg_wh {background:#fff!important;}
.bg_li {background:#FCF8F5;}
.bg_lgy {background-color:#F2F2F2;}
.bg_bl {background:#a7d2cb; color:#fff;}
.bg_ye {background:#849108;}
.bd {	border:#ccc 1px solid;	}
.bd-tb {border-bottom:#ccc 1px solid;	}
.catchCopy {display:block; padding-bottom:20px; text-align:center; font-weight:700; line-height:1.4; color:#565656; /* マーカー風background:linear-gradient(transparent 60%, #6f6 60%);*/}
.catchCopy em {display:block; margin:20px 0 10px; padding:15px 0;; line-height:1.6; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; background:rgba(245,215,16,.3); color:rgba(119,37,0,1);}
.lg_txt {letter-spacing: .18em;} 
.boxTtl strong {display:block; margin-bottom:10px; text-align:center; font-size:20px; font-weight:700;}
.pgh {display:block; margin-top:15px;}
.notice{display:block; margin-top:15px; text-align:center; font-size:12px;}
.txtWh {color:#fff!important;}
.marker { background:linear-gradient(transparent 60%, #FFE500 60%);}
figcaption {text-align:left; font-size:13px; margin:0 auto;}

.giza {position:relative; overflow:visible;}
.giza > span {display:block; width:100%; height:25px; position:absolute; left:0; z-index:2;}
.gizaTop > span {top:-24px;}
.gizaBottom > span {bottom:-24px;}
.gizaTop {
	background-color: #F2F5D6;
}

/*リンク*/
.linkBtn {display:block; text-align:center!important; width:100%;}
.linkBtn > * {display:inline-block; margin:0 auto; padding:10px 30px; background:#F0FF66; color:rgb(51, 51, 51); transition: all .4s; cursor:pointer; position:relative; overflow:hidden; border-radius:30px;}
.aMove {animation: aMove-move 2s ease-in-out 0s infinite normal;}
@keyframes aMove-move{
  0%{
    transform:rotate(0);
  }
  80%{
    transform:rotate(0);
  }
  90%{
    transform:rotate(-2deg);
  }
  100%{
    transform:rotate(0);
  }
}

.linkBtn > a.toUser {background:#DB5310;color:white;}
.linkBtn > a.toShop {background:#18853B;color:white;}


.linkAnime {
	position:absolute;
	top:10px;
	left:0;
	width:100%;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
   	-webkit-align-items: center;
    align-items: center;
}

.linkAnime em {
	display:block;
	width:30px;
	height:30px;
	border:5px solid rgba(255,255,255,.2);
	border-radius:50%;
	animation: linkcircle 3s ease-in-out 0s infinite normal;
	opacity: 1;
}
@keyframes linkcircle{
  0%{
	transform: scale(0);
  }
40%{
	transform: scale(0);
  }
  100%{
	transform: scale(50);
	 opacity:0;
  }
}




.linkBtn2 {display:block; text-align:right; margin-top:10px;}
.linkBtn2 a {text-decoration:underline; font-size:13px;}
.linkBtn2 a:before {content:'>';}
.pageBottomBtn {margin-top:50px;}

.linkBlank , .linkBlank-wh {position:relative;}
.linkBlank:after {content:''; position:absolute; display:block; width:12px; height:12px; top:2px; right:-15px; background:url(img/parts/link.png) no-repeat; background-size:cover;}
.linkBlank-wh:after {content:''; position:absolute; display:block; width:12px; height:12px; top:2px; right:-15px; background:url(img/parts/link-wh.png) no-repeat; background-size:cover;}

@media screen and (max-width:979px){
	.linkBtn > *{width:80%;}
	.sp {display:block;}
	.pc {display:none;}
	.lg_txt {font-size:110%; font-weight:400; line-height:1.7; text-align:left;}
	.catchCopy { font-size:24px;}
	.catchCopy em {font-size:20px;}
}

@media screen and (min-width:980px){
	.linkBtn > *{width:60%;}
	.sp {display:none;}
	.pc {display:block;}
	.lg_txt {font-size:130%; font-weight:400; line-height:1.7; text-align:center;}
	.catchCopy {font-size:32px;}
	.catchCopy em {font-size:26px;}
	.linkBtn > *:hover { background:rgba(240,255,102,.7);}
}


/*****************************
		TOPへボタン
*****************************/
.topBtn {
	display:block;
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:8!important;
	background:rgba(0,0,0,.7);
	opacity:0;
	transition: all 1s;
	border-radius:5px;
}

.topBtn.btnHide {
	background:rgba(0,0,0,.8);
	opacity: 1;
	transition: all 1s;
}

.topBtn span {
	display:block;
	width:10px;
	height:10px;
	border-top:#fff 2px solid;
	border-left:#fff 2px solid;
	margin:18px 17px 15px;
	transform: rotate(45deg);
}

/*****************************
		layout
*****************************/

#wrapper {
	width:100%;
	text-align:center;
	letter-spacing:1px;
	color:#565656;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
}

section {
	position:relative;
	overflow:hidden;
	padding:50px 20px;
	width:100%;
	/*min-height:100vh;*/
	text-align:center;
}

section.circleL:before {
	position:absolute;
	top:-50%;
	right:-20%;
	content:'';
	width:1000px;
	height:1000px;
	border-radius:50%;
	background:rgba(255,255,255,.1);
	z-index:0;
}

section .content {
	overflow:hidden;
	max-width:1280px;
}

section .content .contentInner {
	text-align:left;
}

.postInner , .categoryInner{
	min-height:100vh;
}

@media screen and (max-width:979px){
	#wrapper {
		font-size:14px;
		line-height:1.6;
	}
	
	section .content {
		margin:0 auto;
		padding:30px 0 50px;
	}
	
}

@media screen and (min-width:980px){
	#wrapper {
		font-size:16px;
		line-height:1.8;
	}
	
	section .content {
		margin:0 auto;
		padding:50px 30px;
	}
	
	section.firstCont {
		padding-top:100px!important;		
	}
	
}

/*****************************
		header
*****************************/
#headWrap {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9;
	background:#fff;
	transition: all .7s;
}

.homePage #headWrap {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:rgba(119,37,0,0);
	transition: all .7s;
}

.homePage #headWrap.open {
	background:#fff;
	transition: all .7s;
}

h1 {
	position:absolute;
	display:table;
	height:auto;
	left:20px;
	font-weight:700;
	font-size:24px;
	transition: all .5s;
	z-index:11;
}

.homePage h1 {
	position:absolute;
	display:table;
	height:auto;
	top:-100px;
	left:20px;
	font-weight:700;
	font-size:24px;
	transition: all .5s;
}



h1 a {
	display:table-cell;
	vertical-align:middle;
	color:rgba(246,195,2);	
}



@media screen and (max-width:979px){
	#headWrap{height:40px;}
	
	h1 {width:100px;}
	
	.homePage h1.show , h1 {top:5px;}
}

@media screen and (min-width:980px){
	#headWrap{height:50px;}
	h1 {width:100px;}
	.homePage h1.show , h1 {top:10px;}
}

/*****************************
		pop-up Log-in
*****************************/
		
		.popUp-bg {
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100vh;
			z-index:9998;
			background:rgba(0,0,0,.9);
		}
		
		.popUp {
			position:fixed;
			top:0;
			left:0;
			margin:auto 0;
			display:none;
			width:100%;
			height:100vh;
			text-align:center;
			z-index:9998;
		}
		
		.popUp .popUpPosition {
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: center;
    		justify-content: center;
    		-webkit-align-items: center;
    		align-items: center;
			width:100%;
			height:100vh;
		}

		
		.popup-inner{
			position:relative;
			display: -webkit-flex;
    		display: flex;
    		-webkit-justify-content: center;
    		justify-content: center;
    		-webkit-align-items: center;
    		align-items: center;
			margin:0 auto;
			vertial-align:middle;
			width:96%;
			max-width:1000px;
			height:90vh;
			border-radius:20px;
			color:rgba(119,37,0,1);
			z-index:9999;
		}
		
		.userLogin .popup-inner {
			background:rgba(245,215,16,1);
		}

		.shopLogin .popup-inner {
			background:rgba(245,184,16,1);
		}
		
		.popup-inner div {
						
		}

		.popup-inner div h3{
			display:block;
			font-size:18px;
			margin-bottom:30px;
			text-align:center;
		}
		
		.popup-inner div h4{
			display:block;
			margin-bottom:5px;
		}

.popup-inner div form {
   padding:0!important;
}

		.popup-inner div input{
			border:none;
			margin-bottom:20px;
			padding:10px;
			font-size:16px;
			border-radius:5px;
		}
		
		.popUpClose {
			position:absolute;
			right:10px;
			top:10px;
		}
		
		.popUpClose span{
			display:inline-block;
			position:relative;
			width:30px;
			height:30px;
			cursor: pointer;
		}
		
		.popUpClose em:first-child {
			position:absolute;
			top:9px;
			left:0;
			display:inline-block;
			width:30px;
			height:2px;
			background:#fff;
			line-height:0;
			transform: translateY(5px) rotate(45deg);
		}
		
		.popUpClose em:last-child {
			position:absolute;
			top:9px;
			left:0;
			display:inline-block;
			width:30px;
			height:2px;
			background:#fff;
			transform: translateY(5px) rotate(-45deg);
		}

/****** sns login *******/

.snsLogin {
	margin-top:20px;
	padding:10px;
	background:#fff;
	border-radius:10px;
}

.snsLogin ul{
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	margin-top:15px;
}

.snsLogin ul li {
	display:inline-block;
	width:40px;
	padding:0 5px;
}

/*****************************
		global navi
*****************************/
nav{
	position:fixed;
	width:100%;
	font-size:14px;
}

nav	div a{
	display:block;
	padding:5px;
	color:rgb(51, 51, 51);
}

nav	ul.loginBtnWrap li a{
	display:block;
	font-weight:500;
	border-radius:5px;
	padding:7px 8px;
	color:white !important;
}

.headLoginBtn .popUpUser {
	background:rgba(219,83,16,1);
	transition: .5s;
}

.headLoginBtn .popUpUser:hover {
	background:rgba(219,83,16,.5);		
}

.headLoginBtn .popUpShop {
	background:rgba(24,133,59,1);	
	transition: .5s;
}

.headLoginBtn .popUpShop:hover {
	background:rgba(24,133,59,.5);		
}



@media screen and (max-width:979px){
	nav {
        display:none;
		z-index:12;
		background:#fff;
position: relative;
padding-top: 300%;
width: 100%;
height: 0;
	}
	
	nav > div {
		margin:0;
		text-align:center;
		z-index:13;
position: absolute;
left: 0;
top: 0;
width: 100%;
	}
	
	nav .navHead {
position: absolute;
		display:block;
		width:100%;
		height:40px;
		background:#fff;
		z-index:13;
left: 0;
top: 0;
	}
	
	nav .navHead span {
		position:absolute;
		top:5px;
		left:20px;
		display:inline-block;
		width:100px;
	}
    nav	ul {
       padding:50px 40px 0;
	}
	nav	ul li{
		display:block;
		margin:0 15px 10px;
	}
	
.menuBtn {position:fixed; top:10px; right:20px; z-index:9999;}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 20px;
  height: 20px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;

}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 8px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-315deg);
  transform: translateY(8px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(315deg);
  transform: translateY(-8px) rotate(315deg);
}
}

@media screen and (min-width:980px){
	nav {
		display:block!important;
		z-index:10;
	}
	nav	div {
		display:table;
		margin:2px 0 0;
		padding:0 20px;
		float:right;
	}
    
    nav	div a{
	    position:relative;
        overflow:hidden;
    }
    
    nav	div ul:first-child a:after {
        content:'';
        position:absolute;
        bottom:0;
        left:-100%;
        width:100%;
        height:2px;
        background:rgba(255,255,255,.5);
        transition: all .3s;
    }
    
    nav	div ul:first-child a:hover:after {
        transform:translateX(100%);
    }
	
	nav	div ul.loginBtnWrap {
		padding-top:4px;
	}
    
	nav .navHead {display:none;}
	
	nav	ul {
		display:table-cell;
		vertical-align:middle;
		padding-left:10px;
	}
	
	nav	ul.contentNav a{
		margin-top:6px!important;
	}
	
	nav	ul li{
		display:inline-block;
        letter-spacing: 1px;
        padding:0 3px;
	}

}


/*****************************
		footer
*****************************/

footer {text-align:center; background:#333333; font-family: 'Noto Sans JP', sans-serif;}
#copyright {padding:10px 0; text-align:center; font-size:11px; color:#fff;}
#copyright p{
	margin:1em 0;
}


#footerContent {margin:0 auto; max-width:980px; z-index:2;}
#footerContent a { color:#fff;}
.footNav {
	padding:50px 0;
}

/* SNS */
.footNav dd {
	text-align:center;
}
.footNav dd ul {
	display: table;
	margin:0 auto;
}

.footNav dd ul li{
	display: table-cell;
	padding:10px;
}

.footNav dd ul li span {
	display:inline-block;
	width:25px;
	height:25px;	
}

.footerLogo {
	text-align:center;
	margin-bottom:20px;
}

.footerLogo span {
	display:inline-block;
	width:100px;
	margin:0 auto;
}


@media screen and (max-width:979px){
	.footNav dd {
		margin-top:50px;
	}
	
	.footNav dt div ul li {
		padding: 10px 0;
		font-size:14px;
	}
}

@media screen and (min-width:980px){
	.footNav {
		display:table;
		width:100%;
	}	
	
	.footNav dt , .footNav dd {
		display:table-cell;
		width:50%;
	}
	
	.footNav dt {
		text-align:left;
	}
	
	.footNav dt div {
		display:table;
		width:100%;
	}

	.footNav dt div ul{
		display:table-cell;	
		width:50%;
	}
	
	.footNav dt div ul li {
		margin: 5px 0;
		font-size:14px;
	}

}


/*****************************
		index
*****************************/



section .content .contentInner:first-child {
	padding-top:0;
}

.copyArea span{
	display:block;
	margin-top:10px;
}

@media screen and (max-width:979px){
	#main{
		padding-top:40px;
	}
	.copyArea {
		padding:0 0 40px;
	}
}

@media screen and (min-width:980px){
	#main{
		padding-top:60px;
	}
	.copyArea {
		padding:0 0 20px;
	}
}

/*index*/

#topSlide{
	position:relative;
	width:100%;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
}

#topSlide .topTtl{
	position:absolute;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	color:#fff;
    z-index:2;
}

#topSlide .topTtl h2 {
	display:block;
	text-align:center;
	width:100%;
}

#topSlide .topTtl h2 span {
	display:inline-block;
	margin:0 auto;
    max-width:600px;
}

#topSlide .topTtl h2 span img {
    max-width:600px;
}

#topSlide .topTtl p {
	max-width:1000px;
	margin:20px auto;
	padding:20px;
}

.nextContBtn {
	display:block;
	position:absolute;
	bottom:20px;
	width:100%;
	text-align:center;
	animation: nextContBtn 2s ease-in-out 0s infinite normal;
    z-index:2;
}

.swiper-slide {

}

.swiper-slide img {
   	height:100vh;
	height: calc(var(--vh, 1vh) * 100); 
    object-fit: cover;
}

@keyframes nextContBtn{
  0%{
    bottom:20px;
  }
  50%{
    bottom:30px;
  }
  100%{
    bottom:20px;
  }
}

.nextContBtn a{
	display:inline-block;
	margin:0 auto;
	padding:10px;
	width:50px;
	height:50px;
	background:rgba(0,0,0,.5);
	border-radius: 50%;
}


.nextContBtn a em{
	display:inline-block;
	width:15px;
	height:15px;
	border-bottom:#fff 2px solid;
	border-left:#fff 2px solid;
	transform: rotate(-45deg);
	z-index:5;
}

@media screen and (max-width:979px){
	.titleImg div h2 {
		font-size:300%;
	}
	.titleImg div h2 span {
		max-width:600px;
		padding:0 10%;
	}
}
@media screen and (min-width:980px){
	.titleImg div h2 {
		font-size:500%;
	}
	.titleImg div h2 span {
		max-width:800px;		
	}
}

/* 食品ロス削減量 */

.serviceDesc {
	margin:0 auto;
	text-align:center;
	color:#fff;
}
 
.serviceDesc dt div{
	position:relative;
    line-height:5!important;
    border-radius:50%;
    margin:0 auto;
    background:rgba(226,78,66,.9);
    color:#fff;
}

.serviceDesc dt div strong {
	position:absolute;
	top:-30px;
	left:0;
	width:100%;
	text-align:center;
}

.serviceDesc dt div strong img {
	display:block;
	width:240px!important;
	margin: 0 auto;
} 

.serviceDesc dt div em{
	display:block;
	padding-top:70px;
	font-size:400%;
	font-family: 'Dancing Script', cursive;
	transform: rotate(-180deg);
}

.serviceDesc dt div em:after {
	content:' kg';
	font-family: 'Noto Sans JP', sans-serif;
	font-size:24px;
}


.serviceDesc dd div ul li p {
	text-align:left;
}

.serviceDesc dd div ul li img{
	border-radius:10px;
}

.serviceDesc dd h2 {
	display:inline-block;
	transform:rotate(-7deg);
	padding:5px 20px!important;
	z-index:2;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
}

@media screen and (max-width:979px){
  .serviceDesc dt div{
        width:280px;
	    height:280px;
    }  
}

@media screen and (min-width:980px){
   .serviceDesc dt div{
        width:300px;
	    height:300px;
    }   
}

/************************
	フードロスとは
************************/
			
#foodlossDesc {
	z-index:9999;
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:url('img/parts/0cb351c2.png');
	width:100%;
	height:100vh!important;
	color:#444;
	ext-align:center;
}
				
#foodlossDesc .popUpClose {
	position:absolute;
	right:20px;
	top:20px;
}
				
#foodlossDesc .popUpClose {background:rgba(0,0,0,.7); padding:8px 7px 0; border-radius:50%; }
				
#foodlossDesc .popUpClose em:first-child , #foodlossDesc .popUpClose em:last-child{
	background:#fff;
}


				
.foodlossWrap {
	overflow:scroll;
	text-align:center;
	padding:100px 0 50px!important;
	height:100vh;
}
				
.foodloss-inner {
	text-align:center;
	max-width:1024px;
	margin:0 auto 40px;
	padding:0 20px;
}


				
.foodloss-inner figure {
	text-align:center;
}
				
.foodloss-inner figure img{
	max-width:1000px;
	margin:0 auto;
}

.foodloss-inner p {
	text-align:left;
}

.foodloss-inner .lastBlock{
	margin-bottom:40px!important;
}
				
.foodlossClose span{display:inline-block; cursor:pointer;}

.foodlossClose figcaption {max-width:800px;}

.foodloss-inner h3 {
	display:inline-block;
	margin:0 0 25px!important;
	padding:10px 20px!important;
	text-align:center;
	border-bottom:solid 2px #772500;
	border-top:solid 2px #772500;
	font-weight:700;
	color:#772500;
}


@media screen and (max-width:979px){
	.serviceDesc dt {
		margin-bottom:50px;
	}
	
	.serviceDesc dd div ul li .linkBtn {
		margin-top:20px;
	}
	
	.serviceDesc dd div ul li p {
		margin-top:15px;
		font-size:110%;
	}
    
    .serviceDesc dt div{
	    padding:70px 0 100px;
	    z-index:5;
    }
	
	.foodloss-inner h3 {
		font-size:140%;
	}
}	
	
@media screen and (min-width:980px){
	.serviceDesc div{
		/*max-width:1000px;*/
	}
	
	.serviceDesc dl {
		display:table;
		width:100%;
	}
	.serviceDesc dt {
		position:absolute;
		display:table-cell;
		width:30%;
		vertical-align:middle;
	}
	
	.serviceDesc dt div{
		position:absolute;
		top:-20px;
		left:0px;
		margin:20px 40px;
		z-index:2;
	}

	.serviceDesc dd {
		position:relative;
		display:table-cell;
		width:70%;
		text-align:left;
		vertical-align:middle;
	}
	
	.serviceDesc dd h2 {
		position:absolute;
		top:-30px;
		left:30px;
	}
	
	.serviceDesc dd div ul{
		display:table;
		margin-top:20px;
		width:100%;
		text-align:left;
	}
	
	.serviceDesc dd div ul li{
		display:table-cell;
		vertical-align:top;
		width:50%;
	}
	
	.serviceDesc dd div ul li{
		position:relative;
		display:table-cell;
		vertical-align:top;
		width:50%;
	}
	
	.serviceDesc dd div ul li p {
		padding:20px;
		font-size:120%;
	}
	
	.serviceDesc dd div ul li .linkBtn {
		position:absolute;
		bottom:0;
		right:0;
	}
    .serviceDesc dt div{
	    padding:70px 0 100px;
	    z-index:5;
    }
	
	.foodloss-inner h3 {
		font-size:180%;
	}
}	


/* 使い方 */
.merit h2 {
	color:#333;
}

.charactor {
	text-align:center;
}

.charactor span {
	position:relative;
	display:inline-block;
	width:60px;
	margin:0 auto;
}

.charactor span.userHand strong{
	position:absolute;
	bottom:15px;
	left:-20px;
	display:inline-block;
	width:18px;
	animation: userHand 1s ease-in-out 0s infinite normal;
}

@keyframes userHand{
  0%{
    transform:rotate(0);
	transform-origin: right bottom;
  }
  50%{
    transform:rotate(-10deg);
	transform-origin: right bottom;
  }
  100%{
    transform:rotate(0);
	transform-origin: right bottom;
  }
}

.charactor span.shopHand strong{
	position:absolute;
	bottom:30px;
	right:-30px;
	display:inline-block;
	width:20px;
	animation: shopHand 1s ease-in-out 0s infinite normal;
}

@keyframes shopHand{
  0%{
    transform:rotate(5deg);
	transform-origin: left bottom;
  }
  50%{
    transform:rotate(15deg);
	transform-origin: left bottom;
  }
  100%{
    transform:rotate(5deg);
	transform-origin: left bottom;
  }
}


.howToUse {
	text-align:center;
}


.howToUse li p{
	text-align:left;
}

.howToUse li dl dt p {
	overflow: hidden;
	text-align:center;
}

.howToUse li dl dt p img {
	margin:0 auto;
	/*transform: rotate(10deg);
	animation:2s ease-in 1s infinite alternate forwards running expansion;*/
}

@keyframes expansion{
  0%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(-10deg);
  }
}

.howToUse li dl dd p {
	padding:1em;
	line-height:1.6;
	max-width:300px;
	margin:0 auto;
	color:#333;
}


@media screen and (max-width:979px){
	.howToUse li {
		margin-bottom:20px;
	}
	.howToUse li div {
		padding:0;
	}
	.howToUse li dl dt p img {
		max-width:200px;
	}
}

@media screen and (min-width:980px){
	.howToUse li div {
		padding:20px;
	}
	.howToUse li dl dt p img {
		max-width:300px;
	}
}

.boxTxt li dl img {

}

/* サービス対応エリア */
.seaviceArea ul{
	overflow:hidden;
	padding-top:30px;
}

.seaviceArea ul li{
	float:left;
	text-align:center;
}

.seaviceArea ul li p {
	padding:5px;
	text-align:center;
	font-size:12px;
}

.seaviceArea ul li p img{
	max-width:80px;
	margin:0 auto;
	
}

.seaviceArea ul li p strong {
	display:block;
	margin-top:10px;
	line-height:1.6;
}

/*
.seaviceArea ul li p strong:after {
	content:'様';
}
*/

@media screen and (max-width:979px){
	.seaviceArea ul li{
		width:25%;
	}
}

@media screen and (min-width:980px){
	.howToUse ul{
		display:table;
		width:100%;
	}
	
	.howToUse li{
		display:table-cell;
		width:33.333%;
	}
	
	.seaviceArea ul li{
		width:10%;
	}
}

/*TOPニュース*/
#newsList {
	width:100%;
	text-align:center;
	max-width:1000px;
	margin:0 auto;
}

#newsList li {
	padding:8px;
	border-bottom:#eee 1px solid;	
}

#newsList li:first-child{
	border-top:#eee 1px solid;	
}


#newsList dl{
	display:table;
	width:100%;
	font-size:14px;
}

#newsList dl dd {
	display:table-cell;
	width:10%;
	text-align:left;
	vertical-align:middle;
}

#newsList dl dd span {
	display:inline-block;
	font-size:12px;
	color:#666;
}

#newsList dl dt {
	display:table-cell;
	width:90%;
	text-align:left;
	vertical-align:middle;
}

#newsList dl dt p {
	padding-left:15px;
	line-height:1.5;
}


/*ニュース一覧*/

#post #newsList {
	margin-bottom:50px;
}

/*****************************
		TOP コラム
*****************************/



#blog .blogColumn .blogBox {
	display:block;
	margin:5px;
}


#blog .blogColumn dl dd p {
	overflow:hidden;
	background-position:center!important;
	background-repeat: no-repeat!important;
}



#blog .blogColumn dl dt p:after {
	content:'記事を読む';
	font-size:12px;
	position:absolute;
	padding:20px 10px;
	border:rgba(161,94,0,1) 2px dashed;
	border-radius:50%;
	background:rgba(161,94,0,.1);
	color:rgba(161,94,0,1);
	transition:all .5s;
}
	
#blog .blogColumn dl dd span {
	display:block;
	padding:0 0 5px;
	font-size:12px;
	text-align:right;
	color:#999;
}

#blog .blogColumn a.blogBox {
	border-radius: 0 10px 10px 10px;
	background:rgba(255,255,255,1);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
}

#blog .blogColumn em {
	position:absolute;
	display:block;
	width:100%;
	font-size:13px;
}

#blog .blogColumn em ul li {
	display:inline-block;
	background:#444;
	transform: rotate(-5deg);
}

#blog .post-categories a {
	display:inline-block;
	padding:10px 15px!important;
	font-size:13px;
	color:#fff!important;
}

.cateListBtn a {
	margin-bottom:20px;
}

#blog .blogColumn em.cate1 ul li {background:#A13200;}
#blog .blogColumn em.cate2 ul li {background:#063A68;}
#blog .blogColumn em.cate3 ul li {background:#A15E00;}
#blog .blogColumn em.cate4 ul li {background:#006D44;}

@media screen and (max-width:979px){
	
	#blog > ul{
		margin-top:50px;
	}
	
	#blog .blogColumn {
		margin:30px 0 0;
	}
	#blog .blogColumn dl{
		display:table;
		padding:0;
		width:100%;
		position:relative;
	}

	#blog .blogColumn dl dt {
		display:table-cell;
		width:60%;
		vertical-align:middle;
		padding-bottom:20px;
	}
	

	
	#blog .blogColumn {
		position:relative;
		padding-bottom:30px;
	}
	
	#blog .blogColumn em {
		top:-25px;
		left:-5px;
	}
	
	#blog .blogColumn dl dt em a {
		display:block;
		padding:8px 15px;
		font-size:13px;
		color:#fff;
	}
	
	#blog .blogColumn em ul {
		margin:0!important;
		padding:0!important;
	}

	#blog .blogColumn dl dt p , #blog .blogColumn dl dd p{
		margin:0 10px;
		line-height:1.5;
	}
	
	#blog .blogColumn dl dt p:after {
		bottom:-10px;
		right:5px;
	}

	#blog .blogColumn dl dd {
		display:table-cell;
		padding:10px 0;
		width:40%;
		vertical-align:top;
	}
	
	#blog .blogColumn dl dd span {
	padding:0 10px!important;
	}


	#blog .blogColumn dl dd p {
        overflow:hidden;
        background-position:center!important;
        background-size:cover!important;
		height:100px;
		background-size:100%!important;
	}
}


@media screen and (min-width:980px){
	#blog > ul{
		display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: center;
    	justify-content: center;
    	-webkit-align-items: center;
    	align-items: center;
		padding:50px 0;
		width:100%;
	}

	#blog .blogColumn {
		position:relative;
		width:25%;
	}
	
	#blog .blogColumn a.blogBox{
		display:block;
		margin:0 20px;
		padding-top:5px;
	}
	
#blog .blogColumn a.blogBox:hover dl dt p:after {
	transform:rotate(360deg);
}


	#blog .blogColumn dl {
		margin:10px;
	}

	
	#blog .blogColumn dl dt {
		padding-bottom:20px;
	}

	#blog .blogColumn em {
		top:-10px;
		left:-5px;
	}
	
	#blog .blogColumn em ul {
		margin:0!important;
		padding:0!important;
	}

	#blog .blogColumn dl dt p{
		height:80px;
		margin-top:7px;
		padding-bottom:20px;
	}
	
	#blog .blogColumn dl dt p:after {
		bottom:-10px;
		right:0px;
	}

	#blog .blogColumn dl dd p {
		overflow:hidden;
		background-size:120%!important;	
		height:200px;
		transition: all 0.5s ease-out;
	}
    
	#blog .blogColumn a:hover dl dd p {
	    background-size:140%!important;
	    background-position:center!important;
    }

}



/*****************************
		カテゴリ一覧 category.php
*****************************/
.categoryBox {
	overflow:hidden;
	padding:50px 0;
}

#blog h2.cate1 {color:#A13200;}
#blog h2.cate2 {color:#063A68;}
#blog h2.cate3 {color:#A15E00;}
#blog h2.cate4 {color:#006D44;}

@media screen and (max-width:979px){

	.categoryBox .blogColumn {
		margin:0!important;
		padding-bottom:10px!important;
	}
	
}

@media screen and (min-width:980px){
	.categoryBox li{
		float:left;
		margin-bottom:30px;
	}
	
}


/****************************
		peger
****************************/

.wp-pagenavi {
	margin:50px 0;
	text-align:center;
}

.wp-pagenavi > * {
	border:none!important;
}

.wp-pagenavi .current {
	background:#A15E00;
	padding:4px 11px 5px!important;
	border-radius: 50%;
	color:#fff;
}

.wp-pagenavi a {
	color:#A15E00;
}

.wp-pagenavi .pages {
	display:none!important;
}
/*****************************
		SEACH
*****************************/

.search {
	text-align:center;
	padding:20px 0 50px;
}

.search form {
	text-align:center;
}

.search input[type="text"] {
	border:#eee;
	background:#efefef;
	padding:10px;
	font-size:18px;
}

input[type="text"]:focus {
  border: none;
  outline: 0;
}

input[type="submit"] {
	line-height:1;
	border:none;
	border-radius:0;
	padding:15px 15px 13px;
	background:#444;
	color:#fff;
}

@media screen and (max-width:979px){
	input[type="submit"]{
		margin-top:10px;
	}
}



/*****************************
		記事詳細 single.php
*****************************/

#post .postInner{
	max-width:980px;
	margin:0 auto;
	padding:15px;
	min-height:100vh;
}

#post .content {
	background:rgba(255,255,255,.8);
	border-radius:30px;
}

#post .postInner h2{
	display:block;
	padding-bottom:10px;
	margin-bottom:40px;
	text-align:center;
}

.article {
	max-width:800px!important;
	margin:0 auto 50px;
	padding:0;
	letter-spacing:0.15em;
}

.article .eyeCatch {margin-bottom:30px;}

.article .eyeCatch img{width:100%!important; height:auto!important;}

.article p , .article figure , .article ul {
	margin-bottom:20px;
}

.article h2 , .article h3 {position:relative; display:block; margin:60px 0 20px 0; padding:0 0 0 15px; font-size:22px!important; text-align:left!important;}
.article h2:before , .article h3:before {content:''; position:absolute; top:0; left:0; display:block; width:3px; height:25px; background:#444;}


.article figure {
	padding:0!important;
	margin-left:0;
	margin-right:0;
}

.article figure img{
	width:100%!important;
	height:auto!important;
}

.article ul li{
	list-style: disc!important;
	margin-left:1.5em;
}

.article ol li{
	list-style:decimal!important;
}

.article blockquote {
	margin:0!important;
	padding:10px 15px;
	background:#eee!important;
	border-radius:10px;
	text-align:right;
}
.article blockquote p {
	text-align:left;
}

.article blockquote p:before , .article blockquote p:after{
	content:'”';
}

.article blockquote cite {
	position:relative;
	display:inline-block;
	font-size:12px;
	color:#999;
}

.article blockquote cite a:before {content:''; position:absolute; top:6px; left:-17px; display:block; width:12px; height:12px; background:url(img/parts/link.png) no-repeat; background-size:cover;}

.article strong { background:linear-gradient(transparent 60%, #afeeee 60%);}

.article a {word-break: break-all; position:relative; background:linear-gradient(transparent 90%, #ffadad 90%);}

.wp-block-file {text-align:center;}

.wp-block-file span {display:block; margin-bottom:5px;}

#post .pager {
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	margin-bottom:30px;
}

#post .pager p {
	display:inline-block;
	padding:10px 15px;
}

#post .pager a {
	position:relative;
}

#post .pager a[rel~='prev']:before {
	content:'';
	position:absolute;
	top:7px;
	left:-20px;
	width:15px;
	height:2px;
	background:#444;
	transform: rotate(-45deg);
}

#post .pager a[rel~='prev']:after {
	content:'';
	position:absolute;
	top:17px;
	left:-20px;
	width:15px;
	height:2px;
	background:#444;
	transform: rotate(45deg);
}

#post .pager a[rel~='next']:before {
	content:'';
	position:absolute;
	top:7px;
	right:-20px;
	width:15px;
	height:2px;
	background:#444;
	transform: rotate(45deg);
}

#post .pager a[rel~='next']:after {
	content:'';
	position:absolute;
	top:17px;
	right:-20px;
	width:15px;
	height:2px;
	background:#444;
	transform: rotate(-45deg);
}
	
	.postMeta {
		text-align:center;
		margin-bottom:10px;
		padding-bottom:10px;
	}
	
	.postMeta span {
		display:block;
	}

.postMeta .category a{
	display:inline-block;
	margin-bottom:20px;
	padding:5px 20px;
	border-radius:40px;
	color:#fff;
	background:#ccc;
}

.postMeta.cate1 .category a {background:#A13200;}
.postMeta.cate2 .category a {background:#063A68;}
.postMeta.cate3 .category a {background:#A15E00;}
.postMeta.cate4 .category a {background:#006D44;}

#post .catchCopy {
	margin-bottom:50px!important;
}

#post .blogPageTtl {
	text-align:center;
}

#post .blogPageTtl strong {
	display:block;
	transform: rotate(-2deg);
	color:#ccc;
}

#post .blogPageTtl .catchCopy {
	display:inline-block;
	position:relative;
	margin:20px auto 0;
	padding:0 10px;
}

#post .blogPageTtl .catchCopy:before {
	position:absolute;
	top:-10px;
	left:0;
	content:' ';
	display:block;
	width:100%;
	height:3px;
	background:#ccc;
	transform: rotate(-2deg);
}

#post .blogPageTtl .catchCopy:after {
	position:absolute;
	bottom:-14px;
	left:0;
	content:' ';
	display:block;
	width:100%;
	height:3px;
	background:#ccc;
	transform: rotate(2deg);
}

@media screen and (min-width:979px){
	#post .postInner h2{
		font-size:180%;
	}
}

@media screen and (min-width:979px){
	#post .postInner h2{
		font-size:140%;
	}
}

/*****************************
		LOADING
*****************************/

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
     
.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ea5b30, 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.5), -1.8em -1.8em 0 0em rgba(234,91,48, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.7), 1.8em -1.8em 0 0em #ea5b30, 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.5), 1.8em -1.8em 0 0em rgba(234,91,48, 0.7), 2.5em 0em 0 0em #ea5b30, 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.5), 2.5em 0em 0 0em rgba(234,91,48, 0.7), 1.75em 1.75em 0 0em #ea5b30, 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.5), 1.75em 1.75em 0 0em rgba(234,91,48, 0.7), 0em 2.5em 0 0em #ea5b30, -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.5), 0em 2.5em 0 0em rgba(234,91,48, 0.7), -1.8em 1.8em 0 0em #ea5b30, -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.5), -1.8em 1.8em 0 0em rgba(234,91,48, 0.7), -2.6em 0em 0 0em #ea5b30, -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.5), -2.6em 0em 0 0em rgba(234,91,48, 0.7), -1.8em -1.8em 0 0em #ea5b30;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ea5b30, 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.5), -1.8em -1.8em 0 0em rgba(234,91,48, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.7), 1.8em -1.8em 0 0em #ea5b30, 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.5), 1.8em -1.8em 0 0em rgba(234,91,48, 0.7), 2.5em 0em 0 0em #ea5b30, 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.5), 2.5em 0em 0 0em rgba(234,91,48, 0.7), 1.75em 1.75em 0 0em #ea5b30, 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.5), 1.75em 1.75em 0 0em rgba(234,91,48, 0.7), 0em 2.5em 0 0em #ea5b30, -1.8em 1.8em 0 0em rgba(234,91,48, 0.2), -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.5), 0em 2.5em 0 0em rgba(234,91,48, 0.7), -1.8em 1.8em 0 0em #ea5b30, -2.6em 0em 0 0em rgba(234,91,48, 0.2), -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.5), -1.8em 1.8em 0 0em rgba(234,91,48, 0.7), -2.6em 0em 0 0em #ea5b30, -1.8em -1.8em 0 0em rgba(234,91,48, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(234,91,48, 0.2), 1.8em -1.8em 0 0em rgba(234,91,48, 0.2), 2.5em 0em 0 0em rgba(234,91,48, 0.2), 1.75em 1.75em 0 0em rgba(234,91,48, 0.2), 0em 2.5em 0 0em rgba(234,91,48, 0.2), -1.8em 1.8em 0 0em rgba(234,91,48, 0.5), -2.6em 0em 0 0em rgba(234,91,48, 0.7), -1.8em -1.8em 0 0em #ea5b30;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}
    
.loadInner {
	display:block;
	width:100%;
	position:absolute;
	top:30vh;
}

/*****************************
			faq
*****************************/

.faq {
	max-width:980px;
	margin:0 auto;
}

.faq h4{
	display:inline-block;
	margin-bottom:25px;
	border:#444 1px solid;
}
	
.faq strong {
	display:block;
	width:30px;
	font-size:220%;
	line-height:1;
	text-align:center;
	font-weight:700;
}

.faq dt strong {color:#489090;}
.faq dd strong {color:#F07878;} 

.faq dl {
	margin-bottom:50px;
}

.faq dt , .faq dd {
	display: -webkit-flex;
    display: flex;
	padding: 0 10px;
}

.faq dt {
	margin-bottom:15px;
    -webkit-align-items: start;
    align-items: start;
}
	
.faq dd {
	margin-bottom:20px;
	padding-bottom:20px;
    -webkit-align-items: start;
    align-items: start;
	border-bottom:#ccc 1px solid;
}

.faq dl dd:last-child {
	border-bottom:none;	
}
	
.faq dt p , .faq dd p {
	text-align:left;
	margin-left:15px;
}


.faq .notice {
	text-align:left!important;
	margin-top:5px!important;
}

@media screen and (max-width:979px){
	.faq h4{
		padding:7px 15px;
		font-size:120%;
	}	
}

@media screen and (min-width:980px){
	.faq h4{
		padding:10px 20px;
		font-size:120%;
	}	
}


/*****************************
		page
*****************************/

.page {
	margin-bottom:50px;
}

.page h3 {
	display:block;
	margin-top:30px;
	margin-bottom:10px;
	padding-left:20px;
	border-left:#444 5px solid;
	font-size:20px;
	font-weight:700;
}

.page h3:first-child {
	margin-top:0!important;
}

.page ul , .page p {
	margin-top:15px;
}


.page li {
	list-style:circle;
	margin-left:1em;
}


/*****************************
		contact
*****************************/

.contact h3 {	
	display:block;
	margin-bottom:20px;
	font-size:20px;
	font-weight:700;
}
.contact ul {
	margin-top:30px;
}
.contact li strong {
	display:block;
	font-weight:700;
	margin-bottom:10px;
}
	
.contact li span {
	display:block;
}
	
@media screen and (max-width:979px){
	.contact li {
		margin-bottom:20px;
	}
}
		

@media screen and (min-width:980px){
	.contact ul {
		display:table;
		width:100%;
	}
	
	.contact ul li {
		display:table-cell;
		width:50%;
	}
}

/**** youtube ****/

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
     right: 0;
    width: 100% !important;
    height: 100% !important;  
}

@media screen and (max-width:979px){
	.wp-block-embed {
		margin:0!important;
	}
}





/* coming soon */
.comingSoon  {text-align:center; padding:10px 0; background:#063A68; margin:0 10px;}
.comingSoon h3 {margin-bottom:15px; font-weight: 900; letter-spacing:.15em; font-style:italic; color:#ffff00;}
.comingSoon h3 strong {font-weight: 900; font-size:160%; font-style:italic;}
.comingSoon p {color:#fff; line-height:1.5!important; text-align:center;}
@media screen and (max-width:979px){
.comingSoon {transform: rotate(-3deg); box-shadow: 4px 8px 4px -4px rgba(0,0,0,0.41);}
.comingSoon h3 { font-size:20px; line-height:1.7;}
}
@media screen and (min-width:980px){
.comingSoon {transform: rotate(-3deg); box-shadow: 4px 8px 4px -4px rgba(0,0,0,0.41);}
.comingSoon h3 {font-size:24px;}
}


/*使い方動画ページ*/
    .dougaLineUp dl { font-family: 'Noto Sans JP', sans-serif; font-size:120%; margin-bottom:30px; font-weight:700;}
    .dougaLineUp dd span { position:relative; }
    .dougaLineUp dd span::after{ content:''; width:80px; height:56px; background:url(img/parts/y-tube_rd.png) no-repeat; background-size:contain; position:absolute; bottom:10px; right:10px; }
    .dougaLineUp dt p {padding:5px; text-align:center; z-index:2; font-size:14px; margin-top:0!important;}
    .dougaLineUp a { display:block; margin-bottom:50px;}
    
    
    @media screen and (min-width:768px){
        .dougaLineUp {display:flex; flex-wrap: wrap; align-items: center;}
        .dougaLineUp a{width:50%;}
        .dougaLineUp a dl {margin:10px;} 
        .dougaLineUp dd span{display:flex;}
        .switchTxt span::before {content:'クリック';}
    }
    @media screen and (max-width:767px){
        .dougaLineUp dl{width:100%;}
        .switchTxt span::before {content:'タップ';}
    }