@charset "utf-8";
body {
	-webkit-print-color-adjust: exact;
}

/* fonts tweaks ---------------------------------------- */
/* text color fontfamily */
html{
    font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
	color:#1e1e1e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* mincho */
.min{
	font-family:"ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important	
}

body{
    font-size:1.55rem;/* 15.5px*/
    line-height: 1.8em;
	-webkit-text-size-adjust: 100%;/* webkit browser bug 拡大表示 */
	font-feature-settings: "palt";/* carning CSSで文字詰め */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}
/*font size responsive */
/* PC & default */
h1 {font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(20rem + ((1vw - 0.64rem) * 2.1429)); /* 24px~36pxで可変*/ }
h2 {font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc( 2rem + ((1vw - 0.64rem) * 0.7143)); /* 20px~24pxで可変*/ }
/* Tab */
@media (min-width: 768px) {
	
}
/* Sp */
@media screen and (max-width: 767px) {
    h1{font-size: 2.4rem;/* 24px*/ }
    h2 {font-size: 2rem;/* 20px */ }
}
/* ▽ baloon triangle ------------------------- */
.balloon{
	position: relative;
}
.balloon:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #fde7d1 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

header{}

.f_wid{
	width: 100vw;
	margin: 0 calc(-50vw + 50%) !important;
	object-fit: cover;
}
/* link 矢印 ----------------------------------- */
a.a_btn{
	position: relative;
	display: block;
	box-sizing: border-box;
}
a.a_btn::after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	width: 3px;
	height: 3px;
	margin: -2px 0 0 0;
	border-top: solid 2px #1e1e1e;
	border-right: solid 2px #1e1e1e;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);	
}
a.a_btn:hover{}
a.a_btn:hover::after{}

/* font deco------------------------------------------------ */
/* 必ずspanに適用する block要素には適用しない */
span.doubleunderline{
	border-bottom: double 6px orange;
}
span.dashed{
	border-bottom: dashed 2px orange;	
}
span.dotted{
	border-bottom: dotted 3px orange;	
}
span.borderline{
	border-bottom: solid 2px orange;	
}
/* base Link color ------------------------ */
a{
	color: #1e1e1e;
}
a:visited{
	color: #1e1e1e;
}
a:hover{
	color: #1e1e1e;
}
/* header common -------------------------- */
div.headlogobox p{}
/* main visual ---------------------------- */
#mavisual{}
#mavisualinner{
}
/* lower-page mv gradation box */
.mavbox{}
/* contents ------------------------------- */



/* bunner maincont bottom */
#bunner_maincnt{
}
.bunner_maincnt_inner{
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
#bunner_maincnt ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#bunner_maincnt ul li{
	width:calc((100% / 2) - 0px );
	overflow: hidden;
}
#bunner_maincnt ul li img{
	width: 100%;
	height: 100%;
}
/* side menu under */
.bunner_side{
	width: 100%;
}
.bunner_side ul{
	width: 100%;
	box-sizing: border-box;
	padding:0px 0px 12px;

}
.bunner_side ul li{
}
/* breadcrumb ------------------------------ */
#breadcrumb{
	width: 100%;
	background: #FCFCFC;
}
.breadcrumbinner{
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	box-sizing: border-box;
}
/* breadcrumb margin responsive */
@media screen and (max-width:1024px){
	.breadcrumbinner{
		padding: 0 4.8%;
	}
	#breadcrumb ul li{
		height: 44px !important;
		line-height: 44px !important;
	}
	#breadcrumb ul li a{
		height: 44px !important;
		line-height: 44px !important;
	}
}
@media screen and (min-width:1025px){
	.breadcrumbinner{
		padding: 0 64px;
	}
	#breadcrumb ul li{
		height: 44px !important;
		line-height: 44px !important;
	}
	#breadcrumb ul li a{
		height: 44px !important;
		line-height: 44px !important;
	}
}
#breadcrumb ul{
	width: 100%;
	clear: both;
	overflow:hidden; 
}
#breadcrumb ul li{
	min-width: 68px;
	font-size: 12px;
	line-height: 14px;
	height: 14px;
	float: left;
	padding-top:9px;
	padding-bottom: 9px;
}
#breadcrumb ul li a{
	width: 100%;
	display: block;
	line-height: 14px;
	height: 14px;
	font-size: 12px;
}
#breadcrumb ul li a::after{
	content: ">";
	padding-left: 14px;
	color: #B5B5B5;
}


/* footer ---------------------------------- */
footer {
	width: 100%;
}
.footerinner{
	width: 100%;
	max-width: 1024px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}

p.footlogo{
	width: 100%;
	text-align: center;
	font-size: 0;
}
/* div.footer_nav nav#footer_nav */
p.footlogo{
	margin-bottom: 12px;
}
@media screen and (max-width: 767px){
	p.footlogo img{
		max-height: 40px;
	}
	.footerinner{
		padding: 6.4%;
		margin-bottom: 6.4%;
	}
	div.bunner_footer{
		width: 100%;
		margin: 4.8% auto 4.8%;
	}
	/* 1column padding margin */
	footer.content_1column .footerinner{
		padding: 4.8% !important;
		margin-bottom: 0 !important;
	}
	footer.content_1column .footerinner p.footlogo{
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}
@media screen and (min-width: 768px) and (max-width:1024px){
	p.footlogo img{
		vertical-align: bottom;
		max-height: 34px;
	}
	.footerinner{
	}
	p.footlogo{
		justify-content: flex-end;
	}
	/* bunner_footer */
	div.bunner_footer{
		width: 30%;
	}
	/* 1column padding margin */
	footer.content_1column .footerinner{
		padding: 36px !important;
		margin-bottom: 0 !important;
	}
	footer.content_1column .footerinner p.footlogo{
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}
@media screen and (min-width: 1025px){
	footer p.footlogo{
		margin-bottom: 36px;
	}
	p.footlogo img{
		max-height: 34px;
		vertical-align: bottom;
	}
	footer .footerinner{
		padding: 48px 48px;
		margin:0 auto 48px;
		justify-content: space-between;
	}
	/* bunner_footer */
	div.bunner_footer{
		width: 30%;
	}
	div.footer_nav nav ul li:last-child{
		margin: 0 !important;
	}
	/* 1column padding margin */
	footer.content_1column .footerinner{
		padding: 36px !important;
		margin-bottom: 0 !important;
	}
	footer.content_1column .footerinner p.footlogo{
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}
/* footer navigation linkaction */
div.footer_nav nav ul li a{
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	line-height: 44px;
	font-size:11px;
	color: #FFF;
	padding-left: 12px;
	display: block;
	position: relative;
	letter-spacing: 0.075em;
}
div.footer_nav nav ul li a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 0;
	border-top: solid 1px #FFF;
	border-right: solid 1px #FFF;
   	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);	
	}
div.footer_nav nav ul li a:hover{
	background: #FFF;
	color: #1e1e1e;
}
div.footer_nav nav ul li a:hover:after{
	border-top: solid 1px #1e1e1e !important;
	border-right: solid 1px #1e1e1e !important;
}

/* footer linkcolor */
footer a.a_btn::after{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	
}
footer a.a_btn:hover{
	border-bottom:solid 1px #1e1e1e;
	transition: all .4s;
	padding-left: 16px;
	font-weight: bold;
}

/* bunner_footer --------------------------- */

/* copyright ------------------------------- */
#copylight{
	border-top: solid 1px #666666;
	width: 100%;
	background: #FFF;
	font-size:13px;
	color: #1e1e1e;
	line-height: 1.5em;
	box-sizing: border-box;
	padding: 4.6% 6.4% 16.8%;
	text-align: center;
}
@media screen and (min-width:769px){
	#copylight{
	font-size:14px;
	text-align: center;
	padding: 24px 64px 24px !important;
	}
}


/* 404 ------------------------------------- */
div.page404 ol{
	width: 100%;
	padding: 8% 0 8%;
	min-height:700px;
	background-size: 92% auto;
	background-position:top center;
	position: relative;
	box-sizing: border-box;
}
div.page404 ol li a{
	width: 240px;
	text-align: center;
	box-sizing: border-box;
	padding: 3.2%;
	display: block;
	position: relative;
	background: #090909;
	color: #FFF;
}


/* animation */
.msg {
  color: whitesmoke;
  text-align:center;
  font-family: 'Bree Serif', Courier, monospaced;
  font-size:1em;
  width:20%;
  position:absolute;
  margin:35px 0 0 2px;
  pointer-events: none; 
}


@media screen and (max-width:767px){
	#contact{
		width:100%;
	}
	
}
@media screen and (min-width:768px){
	#contact{
		width: 88%;
		margin:0 auto 0;

	}
	
}

/* contactform */
/* .contact お問い合わせフォーム 1colmn */
.content_1colmn .floatingmenu{
	display: none !important;
}

#contact_wrapper{}

.contactbox{}

.content_1column .contact{}



.step ul{
	width: 100%;
	background-color: #e5e5e5;
	box-sizing: border-box;
}
.cd-breadcrumb:after, .cd-multi-steps:after {
	content: "";
	display: table;
	clear: both;
}
.cd-breadcrumb li{
	display: inline-block;
	width: calc((100% - 4em ) / 3 );
	float: left;
}
.cd-breadcrumb li:last-of-type::after{
  /* hide separator after the last item */
  display: none;
}
.cd-breadcrumb li > *{
  /* single step */
  display: inline-block;
  color: #000;
}

.cd-breadcrumb.triangle {
/* reset basic style */
	background-color: transparent;
	padding: 0;
}
.cd-breadcrumb.triangle li {
	width: calc((100% - 8px) /3);
	position: relative;
	padding: 0;
	margin: 4px 4px 4px 0;
}
.cd-breadcrumb.triangle li:last-of-type {
margin-right: 0;
}
.cd-breadcrumb.triangle li > * {
	width: 100%;
	font-size: 20px;
	position: relative;
	padding:15px 1.1em 15px 2.5em;
	box-sizing: border-box;
	color: #000;
	background-color: #e5e5e5;
	border-color: #e5e5e5;
}
.cd-breadcrumb.triangle li.current > * {
	color: #FFF;
	background-color: #E84572;
	border-color: #E84572;
	text-decoration:none;
}
.cd-breadcrumb.triangle li:first-of-type > * {
	padding-left: 1.6em;
	border-radius: .25em 0 0 .25em;
}
.cd-breadcrumb.triangle li:last-of-type > * {
	border-radius: 0 .25em .25em 0;
}
.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	height: 0;
	width: 0;
	border: 30px solid transparent; /* triangle height */
	border-right-width: 0;
	border-left-width: 20px;
}
/* this is the white separator between two items */
.cd-breadcrumb.triangle li::after {
	z-index: 1;
	-webkit-transform: translateX(4px);
	-moz-transform: translateX(4px);
	-ms-transform: translateX(4px);
	-o-transform: translateX(4px);
	transform: translateX(4px);
	border-left-color: #ffffff;
	/* reset style */
	margin: 0;
}
/* this is the colored triangle after each element */
.cd-breadcrumb.triangle li > *::after {
	z-index: 2;
	border-left-color: inherit;
}
/* hide the triangle after the last step */
.cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
	display: none;
}
.checkedstep{
background:#b2b2b2 url(../../wp_template_satolab/images/contact/checked.png) no-repeat;
background-position: right center;
background-size: 25px 24px;
}

.formdesc{
	font-size: 14px;
}
.formdesc p:nth-child(1){
	padding-bottom: 16px;
}
.formdesc dl dd ul li:nth-child(3){
	text-indent: 1em;
}
.forminner{
	width: 100%;
	border:solid 1px #B2B2B2;
	box-sizing: border-box;
	margin-bottom: 48px;
}
.form dl{
	width: 100%;
	display: table;
	box-sizing: border-box;
	font-size: 16px;
	border-bottom: solid 1px #b2b2b2;

}
.form dl:nth-last-child(1){
	border-bottom: none;
}
.form dl dt{
	width: 242px;
	padding: 12px;
	display: table-cell;
	box-sizing: border-box;
	background: #f5fbf7;
	vertical-align: middle;
}
dl.mail dd,dl.tel dd{
	padding-top: 21px!important;
}
.form dl dt span{
	color: #FF0000;
	padding-left: 12px;
}
.form dl dd{
	width:calc(100% - 242px );
	padding: 12px;
	border-left: solid 1px #b2b2b2;
	background: #FFF;
	box-sizing: border-box;
	display: table-cell;
}

.form dl.inquiry dd{
	padding-left: 32px !important;
}
.inquiry .wpcf7-list-item label input{
	border: none !important;
	display: inline;
}
.wpcf7-list-item{
  position: relative;
  cursor: pointer;
}
span.wpcf7-list-item label input[type="checkbox"]{
}
span.wpcf7-list-item label{
	position: relative;
}
span.wpcf7-list-item label input{
	position: relative;
	padding-left: 20px;
}
span.wpcf7-list-item label input::before{
	width: 14px;
	height: 14px;
	background: #FFF;
	border: solid 1px #000;
	content: "";
	border-radius: 50%;
	position: absolute;
	left: 0;
	box-sizing: border-box;
	top: -1px;
}
span.wpcf7-list-item label input::after{}
span.wpcf7-list-item label input:checked::before{}
span.wpcf7-list-item label input:checked::after{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #000;
	content: "";
	position: absolute;
	left: 2px;
	top: 1px;
	border:none !important;
	box-shadow: none !important;
}

span.wpcf7-list-item label span.wpcf7-list-item-label{}
/* name kana -------------------- */
.wpcf7 input[name="sei"],.wpcf7 input[name="mei"],.wpcf7 input[name="kanamei"],.wpcf7 input[name="kanasei"]{
	width: 100%;
	height: 32px !important;
	padding:0 8px;
	box-sizing: border-box;
}

.wpcf7 input[name="text-548"],.wpcf7 input[name="text-549"],.wpcf7 input[name="product"]{
	width: 100%;
	height: 32px !important;
	padding:0 8px;
}

.name dd{}
.name dd ul{
	width: 100%;
	clear: both;
	overflow: hidden;
}

.name dd ul li{
	float: left;
}
.name dd ul li:nth-child(1){
	width: 10%;
	line-height: 32px;

}
.name dd ul li:nth-child(2){
	width: 34%;
	margin-right: 12%;

}
.name dd ul li:nth-child(3){
	width: 10%;
	line-height: 32px;
}
.name dd ul li:nth-child(4){
	width: 34%;
}

.kana dd{}
.kana dd ul{
	width: 100%;
	clear: both;
	overflow: hidden;
}

.kana dd ul li{
	float: left;
}

.kana dd ul li:nth-child(1){
	width: 10%;
	line-height: 32px;
}

.kana dd ul li:nth-child(2){
	width: 34%;
	margin-right: 12%;
}
.kana dd ul li:nth-child(3){
	width: 10%;
	line-height: 32px;
}
.kana dd ul li:nth-child(4){
	width: 34%;
}


dl.tel{}
dl.tel dd{}
dl.tel dd ol{
	width: 100%;
	clear: both;
	overflow: hidden;
}
dl.tel ol li{
	float:left; 
}

dl.tel ol li:nth-child(1),dl.tel ol li:nth-child(3),dl.tel ol li:nth-child(5){
	width: 28%;
	width: calc(( 100% - 16% ) / 3);
}

dl.tel ol li:nth-child(2),dl.tel ol li:nth-child(4){
	width: 8%;
	text-align: center;
	line-height: 32px;
}

.wpcf7 textarea{
	width: 100%;
	height: 100px !important;
}

.wpcf7 input[type="email"],.wpcf7 text{
	width: 100%;
	height: 32px !important;
}


.wpcf7 input[type="tel"]{
	width: 100%;
	height: 32px !important;
	
}

.wpcf7 input[type="submit"] {
	background: #1e1e1e;
	border-radius: 4px;
	color: #fff;
	width: 88%;
	height:88px;
	font-size: 30px;
	box-sizing: border-box;
	border: solid 1px #efefef;
}

.formdesc{
	margin-bottom: 6.4%;
	line-height: 1.8em;
}

.descbtn p.wpcf7c-elm-step1{
	width: 100%;
	margin-bottom:48px;
	clear: both;
	text-align: center;
	overflow: hidden;
}

.descbtn p.wpcf7c-elm-step2{
	width: 100%;
	margin-bottom:48px;
	text-align: center;

	clear: both;
	overflow: hidden;
}

.wpcf7-custom-item-error{}


/* SP&Tab floating menu p a des */
@media screen and (max-width:640px){
	#myBtn {
		width: 60px;
		display: none;
		position: fixed;
		right: 6.4%;
		bottom: 16px;
		z-index: 99;
		border: 0;
		background: none;
	}
	#myBtn a{
		width: 60px;
		height: 60px;
		line-height: 60px;
		border-radius: 50%;
		background: #efefef;
		border: 1px solid #efefef;
		display: block;
		box-sizing: border-box;
		font-size: 0.8em;
		letter-spacing: -0.015em;
		text-align: center;
	}
	#myBtn a:hover {
		color: #fff;
		background: #E84D50;
	}

	#myBtn a:nth-child(2){
	}
}
/* PC floating menu p a des */
@media screen and (min-width:641px){
	#myBtn {
		display: none;
		position: fixed;
		bottom: 48px;
		right: 48px;
		z-index: 99;
		border: 0;
		background: none;
		clear: both;
		overflow: hidden;
	}
	#myBtn a{
		float: left;
		width: 74px;
		height: 74px;
		line-height: 74px;
		background: #fff;
		border: 1px solid #efefef;
		display: block;
		box-sizing: border-box;
		border-radius: 50%;
		font-size: 0.7em;
		text-align: center;
	}
	#myBtn a:hover {
		color: #fff;
		background: #E84D50;
	}

	#myBtn a:nth-child(2){
		margin-left: 36px;
	}
}



.fadein{
  animation-name:fadein;
  animation-duration:40s;
  animation-timing-function: ease-out;
  animation-delay:1s;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
// アニメーション
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}