@charset "utf-8";

/************************************************************************
	
**************************************************************************/
/* 
-------------------------------------------------------- */

/* base
-------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
	display: block;
}
html {
	line-height: 1;
	scroll-behavior: smooth;/* スムーススクロール */
}
ul, ol {
	list-style-type: none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {
	border: none;
}
img {
	vertical-align: bottom;
	border: none;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}
img[src*=".svg"] {
	width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
*,
:before,
:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
	border: none;
	border-radius: 0;
	outline: none;
}
textarea {
	resize: vertical;
}
input[type='checkbox'],
input[type='radio'] {
	display: none;
}
input[type='submit'],
input[type='button'],
label,
button,
select {
	cursor: pointer;
}
select::-ms-expand {
	display: none;
}

/************************************************************************
	フォント
**************************************************************************/
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-x: hidden;
}
body {
	font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic Std', 'Noto Sans JP', 'noto-sans-cjk-jp', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.9;
	background: #fff;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	word-wrap: normal;
	overflow-x: hidden;
}

.noto{
	font-family: 'Noto Sans JP', sans-serif;
}
.std{
	font-family: 'Hiragino Kaku Gothic Std', 'noto-sans-cjk-jp', sans-serif;
	font-weight: 900;
}
.fot{
	font-family: 'fot-udkakugo-large-pr6n' , sans-serif;
	font-weight: 500;
}

/* -------------
サイズ　色　太さ
-------------------------------------------------------- */
.fz14{ font-size: 1.4rem;}
.fz18{ font-size: 1.8rem;}
.fz19{ font-size: 1.9rem;}
.fz20{ font-size: 2rem;}
.fz22{ font-size: 2.2rem;}
.fz24{ font-size: 2.4rem;}
.fz26{ font-size: 2.6rem;}
.fz28{ font-size: 2.8rem;}
.fz30{ font-size: 3rem;}
.fz34{ font-size: 3.4rem;}
.fz38{ font-size: 3.8rem;}
.fz40{ font-size: 4rem;}
.fz42{ font-size: 4.2rem;}
.fz48{ font-size: 4.8rem;}

.fw400{ font-weight: 400;}
.fw500{ font-weight: 500;}
.b { font-weight: 700; }
.fw900 { font-weight: 900; }

.white{ color: #fff;}

@media screen and (max-width: 1024px){/* 元のサイズ*0.9 */
	.fz18{ font-size: 1.7rem;}
	.fz19{ font-size: 1.8rem;}
	.fz20{ font-size: 1.9rem;}
	.fz22{ font-size: 2.02rem;}
	.fz24{ font-size: 2.21rem;}
	.fz26{ font-size: 2.39rem;}
	.fz28{ font-size: 2.58rem;}
	.fz30{ font-size: 2.76rem;}
	.fz34{ font-size: 3.13rem;}
	.fz38{ font-size: 3.5rem;}
	.fz40{ font-size: 3.68rem;}
	.fz42{ font-size: 3.86rem;}
	.fz48{ font-size: 4.42rem;}
}

@media screen and (max-width: 900px){/* 更に*0.9 */
	body{ font-size: 1.5rem;}
	.fz18{ font-size: 1.6rem;}
	.fz19{ font-size: 1.7rem;}
	.fz20{ font-size: 1.8rem;}
	.fz22{ font-size: 1.86rem;}
	.fz24{ font-size: 2.03rem;}
	.fz26{ font-size: 2.2rem;}
	.fz28{ font-size: 2.37rem;}
	.fz30{ font-size: 2.54rem;}
	.fz34{ font-size: 2.88rem;}
	.fz38{ font-size: 3.22rem;}
	.fz40{ font-size: 3.25rem;}
	.fz42{ font-size: 3.39rem;}
	.fz48{ font-size: 4.06rem;}
}

@media screen and (max-width: 590px) {/* 更に*0.9 */
	body{ font-size: 1.45rem;}
	.fz18{ font-size: 1.55rem;}
	.fz19{ font-size: 1.6rem;}
	.fz20{ font-size: 1.65rem;}
	.fz22{ font-size: 1.71rem;}
	.fz24{ font-size: 1.87rem;}
	.fz26{ font-size: 2.02rem;}
	.fz28{ font-size: 2.18rem;}
	.fz30{ font-size: 2.34rem;}
	.fz34{ font-size: 2.65rem;}
	.fz38{ font-size: 2.96rem;}
	.fz40{ font-size: 3.11rem;}
	.fz42{ font-size: 3.27rem;}
	.fz48{ font-size: 3.74rem;}
}

@media screen and (max-width: 480px) {/* 更に*0.9 */
	body{ font-size: 1.4rem;}
	.fz18{ font-size: 1.45rem;}
	.fz19{ font-size: 1.5rem;}
	.fz20{ font-size: 1.55rem;}
	.fz22{ font-size: 1.6rem;}
	.fz24{ font-size: 1.72rem;}
	.fz26{ font-size: 1.86rem;}
	.fz28{ font-size: 2.01rem;}
	.fz30{ font-size: 2.15rem;}
	.fz34{ font-size: 2.44rem;}
	.fz38{ font-size: 2.72rem;}
	.fz40{ font-size: 2.87rem;}
	.fz42{ font-size: 3.01rem;}
	.fz48{ font-size: 3.44rem;}
}

/* ------------
	リンク
---------------------------------------------------------------------- */
a {
	color: inherit;
	transition: .5s;
}
a:hover {
	opacity: 0.5;
}
.underline {
	text-decoration: underline;
}
.underline:hover {
	text-decoration: none;
	opacity: 1;
}

.a_primary{
	display: inline-block;
	font-weight: 700;
	color: #21a2bf;
	padding-top: 10px;
	text-decoration: underline;
	position: relative;
}

.a_primary.arrow::after{
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1em;
	background: url(../img/cmn/arrow03.svg) no-repeat center/contain;
	position: relative;
	margin-left: .5em;
	top: 2px;
}

/* ::-moz-selection {
	color: #fff;
	background: #449d87;
}
::selection {
	color: #fff;
	background: #449d87;
} */

/* ------------
その他
-------------------------------------------------------- */

.u{ text-decoration: underline 1px solid;}

.i{font-style: italic;}

.palt{
	font-feature-settings: "palt";
}

.tal { text-align: left; }
.tac, .tac_pc { text-align: center; }
.tar { text-align: right; }

.indent{text-indent: 1em;}
span.indent{
	display: inline-block;
}

.capitalize{
	text-transform: capitalize;
}
.capitalize.none{
	text-transform: none;
}

.uppercase{
	text-transform: uppercase;
}

.strong_primary{
	padding: .2em;
	margin: 0 .2em;
	background-color: #fff;
}

@media screen and (max-width: 768px) {
	.palt_sp{
		font-feature-settings: "palt";
	}

	.tac_pc{
		text-align: left;
	}
}


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

/* ------------------
	見出しなど装飾
---------------------------------------------------------------------- */
.title_primary{
	font-family: 'Hiragino Kaku Gothic Std', 'noto-sans-cjk-jp', 'Noto Sans JP', sans-serif;
	font-size: 4rem;
	font-weight: 900; 
	line-height: 1.2;
	letter-spacing: .1em;
	margin-bottom: 40px;
}
.title_primary .sub{
	font-family: 'fot-udkakugo-large-pr6n' , sans-serif;
    font-weight: 500;
	font-size: .35em;
	letter-spacing: .08em;
	line-height: 5rem;
	color: #ec5813;
	text-transform: uppercase;
}

@media screen and (max-width: 1024px) {
	.title_primary{
		font-size: 3.7rem;
		margin-bottom: 35px;
	}
}
@media screen and (max-width: 900px) {
	.title_primary{
		font-size: 3.25rem;
	}
}
@media screen and (max-width: 768px) {
	.title_primary{
		font-size: 3.25rem;
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 480px) {
	.title_primary{
		font-size: 2.4rem;
		margin-bottom: 20px;
		line-height: 1.5;
	}
}

/************************************************************************
	余白
**************************************************************************/

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

}

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

}

/* ----------------------------------------------------------------------
	インナー
---------------------------------------------------------------------- */
.inner_primary{
	max-width: 1080px;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}


@media screen and (max-width: 768px) {
	.inner_primary{
		width: 90%;
	}
}

.cover{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
}

.iframe{
	position: relative;
}
.iframe::before{
	content: "";
	display: block;
	padding-top: 56.25%;
}

.iframe iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


@media screen and (max-width: 768px) {
	.inner{
		width: 94.67%;/* 750pxのとき710px */
	}
	.sp_inner{/* スマホの時は↑より広くなる */
		width: 97.33%;
	}
	.only_sp_inner{/* PCでは100％。スマホの時だけinnerの幅 */
		width: 94.67%;
		margin-left: auto;
		margin-right: auto;
	}
	.mw1200_1140{
		width: 95.77%;
	}
}


/************************************************************************
	flex
**************************************************************************/
.flex {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
.flex_pc{/* 1024以下block */
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}

.wrap{
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.col3 li{
	width: 31%;
	margin-right: auto;
	margin-bottom: 30px;
}
.col3 li:nth-of-type(3n){
	margin-right: 0;
}

@media screen and (max-width: 768px) {
	.flex_pc{
		display: block;
		}

	.col3 li{
		width: 48%;
		margin-right: auto;
		margin-bottom: 20px;
	}
	.col3 li:nth-of-type(3n){
		margin-right: auto;
	}
	.col3 li:nth-of-type(2n){
		margin-right: 0;
	}
}

/************************************************************************
	btn
**************************************************************************/

#btn_to_top{
	color: #fff;
	border-radius: 50%;
	background-color: var(--blue_primary);
	position: fixed;
	right: 30px;
	bottom: 30px;
}
#btn_to_top a{
	display: block;
	width: 55px;
	height: 55px;
	position: relative;
}
#btn_to_top a::before{
	content: url(../img/cmn/icon/arrow_w_top.svg);
	display: block;
	width: 18px;
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
}
#btn_to_top a::after{
	content: "TOP";
	display: block;
	font-weight: 700;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}

.btn_primary{
	display: block;
	margin: 0 auto;
	width: 250px;
	border-radius: 10px;
	overflow: hidden;
}

.btn_primary a, .btn_primary p{
	display: block;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
	text-align: center;
	width: 100%;
	padding: .5em .5em .5em 0;
	background-color: #22a2c2;
	position: relative;
}

.btn_primary a::before, .btn_primary p::before{
	content: "";
	width: .9em;
	height: .8em;
	background: url(../img/cmn/arrow02.svg) no-repeat center/contain;
	position: absolute;
	top: 50%;
	right: .9em;
	transform: translateY(-50%);
}

@media screen and (max-width: 480px) {
	.btn_primary{
		width: 210px;
		margin: 0 auto;
	}
	.btn_primary a, .btn_primary p{
		font-size: 1.6rem;
		position: relative;
	}
}


/************************************************************************
	list
**************************************************************************/
.thin_green_disc li{
	position: relative;
	padding-left: 24px;
}
.thin_green_disc li::before{
	content: '';
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #70d08b;
	position: absolute;
	top: 6px;
	left: 0;
}
.green_disc li{
	padding: 15px 0 15px 35px;
	border-bottom: #7d7d7d 1px dotted;
	position: relative;
}
.green_disc li::before{
	content: '';
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #449d87;
	position: absolute;
	top: 22px;
	left: 8px;
}

.decimal li{
	padding: 15px 0 15px 35px;
	border-bottom: #7d7d7d 1px dotted;
	position: relative;
	counter-increment: count;
}
.decimal li::before{
	content: counter(count)".";
	font-weight: 700;
	position: absolute;
	top: 15px;
	left: 0;
}

@media screen and (max-width: 768px) {
	.thin_green_disc li{
		padding-left: 22px;
	}
	.thin_green_disc li::before{
		width: 13px;
		height: 13px;
	}

	.green_disc li{
		padding-left: 30px;
	}
	.green_disc li::before{
		width: 13px;
		height: 13px;
		top: 21px;
	}

	.decimal li{
		padding-left: 30px;
	}
}

/************************************************************************
	animation
**************************************************************************/
@media screen and (max-width: 768px) {

}

/************************************************************************
	icon
**************************************************************************/

.arrow_circle{
	position: relative;
}
.arrow_circle a::before{
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/cmn/icon/arrow_circle.svg) no-repeat center/contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

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

/************************************************************************
	PC/SP
**************************************************************************/
.hide, .db480, .sp, .db1024{ display: none; }

@media screen and (max-width: 1024px){
	.dn1024{display: none;}
	.db1024{display: block;}
}

@media screen and (max-width: 768px) {
	.pc { display: none;}
	.sp { display: block;}
}

@media screen and (max-width: 480px) {
	.dn480{ display: none;}
	.db480{ display: block;}
}

/************************************************************************
	その他
**************************************************************************/

.anchor{
	margin-top: -80px;
	padding-top: 80px;
}
@media screen and (max-width: 540px){
	.anchor{
		margin-top: -60px;
		padding-top: 60px;
	}
}

/************************************************************************
	header
**************************************************************************/
header{
	width: 100%;
	height: 140px;
	transition: .4s;
	position: fixed;
	top: 0;
	z-index: 100;
}

header h1{
	width: 300px;
	padding-left: 50px;
	transition: .4s;
}
header h1.is_400, header h1.is_sp400{
	display: none;
}

.is_scroll header{
	height: 100px;
}
.is_scroll header h1{
	width: 240px;
	padding-left: 30px;
	opacity: .7;
}


header h1 img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

header .wrapper_btn{
	width: 160px;
	height: 80px;
	margin-left: auto;
	border-radius: 0 0 0 10px;
	overflow: hidden;
	transition: .4s;
}
.is_scroll header .wrapper_btn{
	width: 120px;
	height: 60px;
	opacity: .8;
}
.hmb_open.is_scroll header .wrapper_btn{
	opacity: 1;
}

.btn_to_contact{
	width: 50%;
}
.btn_to_contact a{
	display: block;
	background-color: #22a2c2;
	width: 100%;
	height: 100%;
}
.btn_to_contact a::before{
	content: "";
	display: block;
	width: 60%;
	height: 100%;
	margin: auto;
	background: url(../img/cmn/icon_contact.svg) no-repeat center/contain;
}

@media screen and (max-width: 768px){
	header{
		height: 100px;
	}
	.is_scroll header{
		height: 80px;
	}

	header h1{
		width: 30%;
		padding-left: 5%;
	}
	.is_scroll header h1{
		width: 25%;
		padding-left: 3%;
	}

	header .wrapper_btn{
		width: 130px;
		height: 65px;
	}
	.is_scroll header .wrapper_btn{
		width: 110px;
		height: 55px;
	}

}
@media screen and (max-width: 480px){
	header{
		height: 70px;
	}
	.is_scroll header{
		height: 50px;
	}

	header .wrapper_btn{
		width: 120px;
		height: 60px;
	}
	.is_scroll header .wrapper_btn{
		width: 100px;
		height: 50px;
	}
}

/* **** hmb **** */
.hmb{
	width: 50%;
	background-color: #8ed556;
	position: relative;
	transition: .4s;
}
.hmb:hover{
	background-color: #77b843;
}

.hmb span{
	display: inline-block;
	width: 45%;
	height: 4px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	transition: all 0.4s;
	left: 28%;
}

.hmb span:nth-of-type(1){
	top: 38%;
}
.hmb span:nth-of-type(2){
	top: 58%;
}

.hmb_open .hmb span:nth-of-type(1) {
	top: 40%;
	transform: translateY(6px) rotate(-40deg);
}

.hmb_open .hmb span:nth-of-type(2){
	top: 55%;
	transform: translateY(-6px) rotate(40deg);
}

.hmb_open.is_scroll header .hmb span:nth-of-type(1) {
	top: 38%;
	transform: translateY(6px) rotate(-40deg);
}

.hmb_open.is_scroll header .hmb span:nth-of-type(2){
	top: 58%;
	transform: translateY(-6px) rotate(40deg);
}

@media screen and (max-width: 768px){
	.hmb_open .hmb span:nth-of-type(1) {
		top: 38%;
		transform: translateY(6px) rotate(-40deg);
	}
	
	.hmb_open .hmb span:nth-of-type(2){
		top: 57%;
		transform: translateY(-6px) rotate(40deg);
	}
}
@media screen and (max-width: 480px){
	.hmb_open .hmb span:nth-of-type(1) {
		top: 38%;
		transform: translateY(6px) rotate(-40deg);
	}
	
	.hmb_open .hmb span:nth-of-type(2){
		top: 58%;
		transform: translateY(-6px) rotate(40deg);
	}
}

/* ***********************************************************************
	global
************************************************************************ */
#global{
	color: #fff;
	max-width: 500px;
	width: 100%;
	height: 100vh;
	padding-top: 100px;
	margin: 0;
	background-color: #22a2c2;
	opacity: .9;
	position: fixed;
	z-index: 10;
	right: -120%;
	transition: all .6s;
}

.hmb_open #global{
	overflow: auto;
	right: 0;
}
.hmb_open #global::-webkit-scrollbar{
	width: 15px;
}
.hmb_open #global::-webkit-scrollbar-track{
	background-color: #232e33;
	border-radius: 5px;
} 
.hmb_open #global::-webkit-scrollbar-thumb{
	background-color: #337db5;
	border-radius: 5px;
	border: 2px solid #232e33;
}

.gnav{
	padding-left: 50px;
}
.gnav a{
	display: block;
	width: fit-content;
	font-weight: 700;
	position: relative;
}
.gnav a:hover{
	opacity: 1;
}

.gnav a::after{
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition: .3s;
}
.gnav a:hover::after{
	width: 100%;
}

.gnav_primary{
	padding-top: 1em;
	margin-bottom: .5em;
}

.gnav_primary a{
	font-size: 2rem;
}

.gnav_secondary a{
	font-size: 1.6rem;
	margin-left: 2em;
}

.gnav_secondary a::before{
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	position: absolute;
	left: -1.4em;
}

@media screen and (max-width: 768px){
	#global{
		max-width: none;
	}
	.gnav{
		width: fit-content;
		padding-left: 0;
		margin: auto;
	}
}

@media screen and (max-width: 480px){
	#global{
		padding-top: 70px;
	}
	.gnav_primary a{
		font-size: 1.8rem;
	}
	.gnav_secondary a{
		font-size: 1.4rem;
	}
}

/* ***********************************************************************
	footer
************************************************************************ */
/* *******
	footer上
************************************** */
#footer_download{
	padding: 50px 0;
	background-color: #00a4c3;
}

.download_bnr_wrapper{
	max-width: 880px;
	width: 88%;
	margin: auto;
}

.download_bnr_wrapper a{
	display: block;
}
@media screen and (max-width: 768px) {
	#footer_download{
		padding: 30px 0;
	}
}
/* ********
	footer下
******************************************* */
#footer_content{
	padding: 80px 6.88% 50px 16.25%;
	background-color: #8ed556;
}

#footer_content .container{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	max-width: 1240px;
	margin: auto;
}


.footer_contact_wrapper{
	width: 54%;
	padding: 35px 0;
	margin: auto 0 auto auto;
	background-color: #fff;
	border-radius: 10px;
	-ms-flex-order:2; /*for IE10*/
	-webkit-order:2; /* for old webkit browser */
	order:2;
}
.address_wrapper{
	-ms-flex-order:1; /*for IE10*/
	-webkit-order:1; /* for old webkit browser */
	order:1;
}

.footer_btn{
	color: #fff;
	text-align: center;
	max-width: 450px;
	width: 86%;
	margin: auto auto 20px;
	border-radius: 10px;
	background-color: #8ed556;
	position: relative;
}
.footer_btn.tel{
	background-color: #21a1c0;
}

.footer_btn a{
	display: block;
	font-weight: 700;
	padding: .8em 0 .8em 1em;
}
.footer_btn a::before{
	content: "";
	display: block;
	width: 1.5em;
	padding-top: 1.5em;
	background: url(../img/cmn/icon_contact.svg) no-repeat center/contain;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}
.footer_btn.tel a::before{
	background: url(../img/cmn/icon_tel.svg) no-repeat center/contain;
}

.address_wrapper h2{
	margin-bottom: 25px;
}
.address_wrapper address{
	margin-bottom: 120px;
}
.address_wrapper address li{
	margin-bottom: 5px;
}

.address_wrapper address .control{
	display: none;
}

.address_wrapper .privacy{
	margin-bottom: 30px;
}

.copywrite{
	font-size: 14px;
	letter-spacing: .1em;
	text-align: center;
}
.copywrite .copy{
	font-size: 1.5em;
	vertical-align: sub;
}

@media screen and (max-width: 1340px) {
	#footer_content{
		padding: 80px 0 50px;
	}
	#footer_content .container{
		width: 92%;
	}
}
@media screen and (max-width: 1100px) {
	.address_wrapper{
		min-width: 415px;
	}
	.address_wrapper address .control{
		display: block;
	}
	.address_wrapper address .indent_control{
		display: inline-block;
		text-indent: 1em;
	}

	.address_wrapper address{
		margin-bottom: 60px;
	}
}

@media screen and (max-width: 900px) {
	#footer_content{
		padding: 50px 0 30px;
	}
	#footer_content .container{
		display: block;
	}

	.footer_contact_wrapper{
		width: 90%;
		padding: 25px 0;
		margin: auto auto 50px;
	}

	.address_wrapper address{
		padding-left: 50px;
		margin-bottom: 30px;
	}

	.address_wrapper address .control{
		display: none;
	}

	.address_wrapper .privacy{
		margin-bottom: 30px;
	}

}
@media screen and (max-width: 768px) {
	#footer_content{
		padding: 40px 0 20px;
	}

	.footer_contact_wrapper{
		padding: 15px 0 20px;
	}

	.address_wrapper h2{
		width: 240px;
	}

}

@media screen and (max-width: 550px) {
	.address_wrapper address{
		padding-left: 0;
	}
}

@media screen and (max-width: 480px) {
	#footer_content{
		padding: 30px 0 15px;
	}
	
	.footer_contact_wrapper{
		width: 100%;
		padding: 10px 0 20px;
	}

	.address_wrapper h2{
		width: 200px;
	}
	.address_wrapper address .control{
		display: block;
	}

	.address_wrapper .privacy{
		margin-bottom: 20px;
	}

	.copywrite{
		font-size: 12px;
	}
}

/* ***********************************************************************
	mv
************************************************************************ */
#mv{
	position: relative;
	background: url(../img/top/mv.jpg) no-repeat center/cover;
}
#mv::before{
	content: "";
	display: block;
	padding-top: 57.5%;
}
#mv::after{
	content: "";
	display: block;
	width: 100%;
	padding-top: 28%;
	background: url(../img/top/mv_deco.png) no-repeat center/100% 100%;
	position: absolute;
	bottom: -22%;
}

.mv_side{
	width: min(100px, 10%);
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

.mv_side_text{
	background-image: linear-gradient(90deg, #7bcf88, #0eb2db);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	padding-bottom: 13vw;
	margin: auto;
	transform: rotate(180deg);
}
.mv_side_text .copy{
	font-size: 1.5em;
	vertical-align: sub;
}


.mv_text{
	position: absolute;
	right: 20px;
	top: 45%;
	transform: translateY(-50%);
}
.mv_text p{
	font-size: min(40rem, 3vw);
	font-weight: 700;
	letter-spacing: .15em;
	width: fit-content;
	padding: 0 .6em;
	margin-bottom: min(35px, 5%);
	background-color: #fff;
}

#mv .banner{
	min-width: 150px;
	width: 30%;
	transition: .4s;
	position: fixed;
	bottom: 4%;
	right: 2%;
	z-index: 2;
}
.is_scroll #mv .banner{
	min-width: 120px;
	width: 21%;
	position: fixed;
}

#mv .banner .close{
	width: 8%;
	min-width: 15px;
	border-radius: 50%;
	overflow: hidden;
	transition: .4s;
	position: absolute;
	top: -8%;
	left: -3%;
}
#mv .banner .close:hover{
	background-color: #ddd;
}

.is_scroll .banner .close{
	width: 5.6%;
	min-width: 10px;
	border-radius: 50%;
}

#mv .banner .close::before{
	content: "";
	display: block;
	padding-top: 100%;
}
#mv .banner .close::after{
	content: "\02715";
	display: block;
	font-size: 1.5vw;
	font-weight: 900;
	transition: .4s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.is_scroll #mv .banner .close::after{
	font-size: 1vw;
}

@media screen and (max-width: 768px){
	.mv_side_text{
		font-size: 2vw;
		padding-bottom: 8vw;
	}

	.is_scroll #mv .banner{
		width: 27%;
	}
	.is_scroll .banner .close{
		width: 7.2%;
	}
	.is_scroll #mv .banner .close::after{
		font-size: 1.35vw;
	}
}
@media screen and (max-width: 480px){
	.mv_side_text{
		font-size: 2vw;
		padding-bottom: 4vw;
	}

	.is_scroll #mv .banner .close{
		top: -13%;
		left: -5%;
	}
}
@media screen and (max-width: 380px){
	.mv_side_text{
		font-size: 2vw;
		padding-bottom: 2vw;
	}
	
}

/* ********
	top_about
************************************************************************ */
#top_about{
	padding: 80px 0 50px;
}
#top_about .text_wrapper{
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

#top_about .message{
	margin-bottom: 20px;
}


#top_about figure{
	border-radius: 10px;
}

@media screen and (max-width: 1024px){
	#top_about{
		padding: 70px 0 40px;
	}
}

@media screen and (max-width: 768px){
	#top_about{
		padding: 60px 0 30px;
	}

}

@media screen and (max-width: 480px){
	#top_about{
		padding: 40px 0 15px;
	}
}

/* ********
	top_can_do
************************************************************************ */
#top_can_do{
	padding: 100px 0 250px;
	background: url(../img/top/can_do_bg.png) no-repeat center/100% 100%;
}
#top_can_do .container{
	margin-bottom: 40px;
}

#top_can_do .wrapper{
	width: 32.5%;
	padding: 50px 10px 30px;
	margin-bottom: 10px;
	border: 2px solid #21a1c0;
	border-radius: 10px;
	background-color: #fff;
}

#top_can_do .wrapper .img_wrapper{
	width: 25%;
	margin: auto auto 30px;
	background: url(../img/top/can_do01.svg) no-repeat center/contain;
	position: relative;
}
#top_can_do .wrapper .img_wrapper::before{
	content: "";
	display: block;
	padding-top: 95%;
}

#top_can_do .wrapper:nth-of-type(2) .img_wrapper{
	background: url(../img/top/can_do02.svg) no-repeat center/contain;
}
#top_can_do .wrapper:nth-of-type(3) .img_wrapper{
	background: url(../img/top/can_do03.svg) no-repeat center/contain;
}
#top_can_do .wrapper:nth-of-type(4) .img_wrapper{
	background: url(../img/top/can_do04.svg) no-repeat center/contain;
}
#top_can_do .wrapper:nth-of-type(5) .img_wrapper{
	background: url(../img/top/can_do05.svg) no-repeat center/contain;
}
#top_can_do .wrapper:nth-of-type(6) .img_wrapper{
	background: url(../img/top/can_do06.svg) no-repeat center/contain;
}

@media screen and (max-width: 768px){
	#top_can_do{
		padding: 50px 0 250px;
		background: url(../img/top/can_do_bg.png) no-repeat center/cover;
	}

	#top_can_do .wrapper{
		width: 49%;
		padding: 30px 10px 20px;
	}
}
@media screen and (max-width: 480px){
	#top_can_do{
		padding: 30px 0 180px;
	}
	#top_can_do .wrapper{
		font-size: 12px;
		padding: 20px 2px 10px;
		margin-bottom: 5px;
	}
}

/* ********
	top_reason
************************************************************************ */
#top_reason {
	margin-top: -80px;
}
#top_reason .reason_wrapper{
	position: relative;
}
#top_reason .reason_wrapper:nth-of-type(1){
	margin-bottom: 21%;
}
#top_reason .number{
	font-family: 'Hiragino Kaku Gothic Std', 'Noto Sans JP', sans-serif;
	font-size: min(90px, 7vw);
	font-weight: 900;
	color: #fff;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #8ed556;
}
#top_reason .reason_wrapper:nth-of-type(2n) .number{
	-webkit-text-stroke-color: #21a1c0;
}

#top_reason .reason_items{
	width: calc(92% - 7vw);
	padding: 60px 20px 60px 80px;
	margin-left: auto;
	margin-bottom: 50px;
	background-color: #8ed556;
	border-radius: 10px;
}
#top_reason .reason_wrapper:nth-of-type(1) .reason_items{
	padding: 60px 20px 120px 80px;
}

#top_reason .reason_wrapper:nth-of-type(2n) .reason_items{
	background-color: #21a1c0;
}

#top_reason .reason_items .title{
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}

#top_reason .reason_items .strong_primary{
	color: #000;
}

#top_reason .reason_items .text{
	color: #fff;
}

#top_reason .reason_images{
	width: calc(92% - 7vw);
	position: absolute;
	top: 60%;
	left: 5%;
}
#top_reason .reason_images li{
	border-radius: 10px;
	overflow: hidden;
	box-shadow: -8px 8px 15px -6px #bababa;
}

#top_reason .reason_images figure{
	position: relative;
}
#top_reason .reason_images figure::before{
	content: "";
	display: block;
	padding-top: 66.67%;
}
#top_reason .reason_images figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

#top_reason .reason_images p{
	padding: 1em;
	background-color: #fff;
}


@media screen and (max-width: 768px){
	#top_reason {
		margin-top: -160px;
	}
	#top_reason h2{
		margin-bottom: 0;
	}
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-top: -20px;
		margin-bottom: 35%;
	}

	#top_reason .number{
		font-size: max(30px, 6vw);
	}

	#top_reason .reason_items{
		width: 100%;
		padding: 30px 20px 30px 30px;
		margin-bottom: 10px;
	}
	#top_reason .reason_wrapper:nth-of-type(1) .reason_items{
		padding: 30px 20px 60px 30px;
	}

	#top_reason .reason_images{
		width: 100%;
		top: 80%;
		left: 5%;
	}
	#top_reason .reason_images li{
		width: 31%;
		margin: 0 auto;
	}
}


@media screen and (max-width: 680px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 75%;
	}
	#top_reason .reason_images{
		display: block;
		width: 100%;
		top: 80%;
		left: 5%;
	}
	#top_reason .reason_images li{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		width: 100%;
		margin: 0 auto 10px;
	}
	#top_reason .reason_images figure{
		width: 40%;
	}
	#top_reason .reason_images p{
		width: 60%;
	}
}

@media screen and (max-width: 480px){
	#top_reason {
		margin-top: -100px;
	}
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 55%;
	}
	#top_reason .reason_wrapper .reason_items{
		padding: 20px 15px 20px 20px;
	}
	#top_reason .reason_wrapper:nth-of-type(1) .reason_items{
		padding: 20px 15px 40px 20px;
	}
	#top_reason .reason_items .title{
		margin-bottom: 10px;
	}

	#top_reason .number{
		-webkit-text-stroke-width: 1px;
	}

	#top_reason .reason_images{
		display: block;
		width: 100%;
		top: 80%;
		left: 5%;
	}
	#top_reason .reason_images li{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		width: 100%;
		margin: 0 auto 10px;
	}
	#top_reason .reason_images figure{
		width: 30%;
	}
	#top_reason .reason_images p{
		width: 70%;
	}
}

@media screen and (max-width: 455px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 70%;
	}
}
@media screen and (max-width: 431px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 80%;
	}
}
@media screen and (max-width: 410px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 85%;
	}
}
@media screen and (max-width: 380px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 90%;
	}
}
@media screen and (max-width: 360px){
	#top_reason .reason_wrapper:nth-of-type(1){
		margin-bottom: 95%;
	}
}

/* ********
	top_company
************************************************************************ */
#top_company .switch_flex{
	display: contents;
}
#top_company{
	padding: 80px 0;
}

#top_company .gradation{
	margin-bottom: 30px;
}
#top_company .message{
	margin-bottom: 40px;
}

#top_company .container figure{
	width: 50%;
}
#top_company .container figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#top_company .text_wrapper{
	width: 47%;
	margin-left: auto;
}
#top_company .text_wrapper .text{
	padding-top: 50px;
	margin-bottom: 50px;
}

#top_company .container .text_wrapper .btn_primary{
	margin-left: 0;
}

@media screen and (max-width: 1024px){
	#top_company{
		padding: 70px 0;
	}
}

@media screen and (max-width: 768px){
	#top_company{
		padding: 50px 0;
	}

	#top_company .switch_flex{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}

	#top_company .message{
		width: 55%;
		padding-top: 10%;
		margin-right: auto;
		margin-bottom: 0;
	}
	#top_company .container figure{
		width: 42%;
	}
	#top_company .container figure img{
		height: auto;
		object-fit: fill;
	}

	#top_company .text_wrapper{
		width: 100%;
	}
	#top_company .text_wrapper .text{
		padding-top: 20px;
		margin-bottom: 20px;
	}
	
	#top_company .container .text_wrapper .btn_primary{
		margin: auto;
	}
}
@media screen and (max-width: 480px){
	#top_company{
		padding: 30px 0;
	}

	#top_company .message{
		padding-top: 0;
	}
}

/* ***********************************************************************
	下層　共通
************************************************************************ */
.page_title_wrapper{
	padding: 100px 0 60px;
	position: relative;
}
.page_title_wrapper::before, .page_title_wrapper::after{
	content: "";
	display: block;
	width: 100%;
	height: 9px;
	background-color: #00a2c3;
	position: absolute;
}
.page_title_wrapper::before{
	bottom: 9px;
}
.page_title_wrapper::after{
	background-color: #74d63c;
	bottom: 0;
}
.page_title_wrapper .title_primary{
	margin: 0;
	text-align: center;
}

.blue_deco{
	font-weight: 700;
	padding-left: .8em;
	position: relative;
}
.blue_deco::before{
	content: "";
	display: inline-block;
	width: .3em;
	height: 1.1em;
	background-color: #00a4c3;
	margin-right: 10px;
	border-radius: 5px;
	position: absolute;
	top: .3em;
	left: 0;
}

@media screen and (max-width: 768px){
	.page_title_wrapper{
		padding: 70px 0 40px;
		position: relative;
	}

	.page_title_wrapper::before, .page_title_wrapper::after{
		height: 7px;
	}
	.page_title_wrapper::before{
		bottom: 7px;
	}

}
@media screen and (max-width: 480px){
	.page_title_wrapper{
		padding: 50px 0 30px;
		position: relative;
	}
	.page_title_wrapper::before, .page_title_wrapper::after{
		height: 5px;
	}
	.page_title_wrapper::before{
		bottom: 5px;
	}

}
@media screen and (max-width: 380px){
	.mv_side_text{
		padding-bottom: 2vw;
	}
}
/* ***********************************************************************
	事業案内
************************************************************************ */
/* ********
	ダイワ工業について
********************************* */
.business_about_container{
	padding: 120px 0 100px;
}
.business_about01{
	margin-bottom: 70px;
}
.business_about01 .text_wrapper{
	width: 54.6%;
	margin-right: auto;
}
.business_about01 .text_wrapper .note{
	margin-bottom: 30px;
}
.business_about01 .img_wrapper{
	width: 40%;
}

.business_about02 img{
	border-radius: 10px;
	overflow: hidden;
}
.business_about02 figcaption{
	padding: 10px 0;
}

@media screen and (max-width: 1024px){
	.business_about_container{
		padding: 90px 0 60px;
	}
}
@media screen and (max-width: 768px){
	.business_about_container{
		padding: 60px 0 20px;
	}
	.business_about01{
		margin-bottom: 60px;
	}
	.business_about01 .text_wrapper{
		width: 100%;
		margin-bottom: 30px;
	}
	.business_about01 .img_wrapper{
		width: 100%;
	}

	.business_about02 img{
		border-radius: 10px;
		overflow: hidden;
	}
	.business_about02 figcaption{
		padding: 10px 0;
	}
}
@media screen and (max-width: 480px){
	.business_about_container{
		padding: 40px 0 0px;
	}

	.business_about01 .text_wrapper .note{
		margin-bottom: 20px;
	}
	
}


/* ********
	ダイワ工業にできること
********************************* */
.can_do{
	padding: 90px 0;
	background-color: #f2f2f2;
	counter-reset: can_count;
}

.can_do h3{
	margin-bottom: 50px;
	letter-spacing: 0.1em;
}

.can_do ol li{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	margin-bottom: 55px;
}
.can_do ol li:nth-last-of-type(1){
	margin-bottom: 0;
}

.can_do ol li .icon{
	width: 15.7%;
}
.can_do ol li .text_wrapper{
	width: 82%;
	margin-left: auto;
}
.can_do ol li h4{
	padding-left: 2.2em;
	margin-bottom: 10px;
	counter-increment: can_count;
	position: relative;
}
.can_do ol li h4::before{
	content: counter(can_count, decimal-leading-zero)".";
	font-family: 'fot-udkakugo-large-pr6n' , sans-serif;
	color: #21a2bf;
	font-weight: 700;
	position: absolute;
	left: 0;
}

.can_do ol li{
	counter-increment: privacy_count;
}


@media screen and (max-width: 1024px){
	.can_do{
		padding: 80px 0 60px;
	}
}
@media screen and (max-width: 768px){
	.can_do{
		padding: 60px 0 40px;
	}
	.can_do h3{
		margin-bottom: 40px;
	}

	.can_do ol li{
		display: block;
		margin-bottom: 40px;
	}
	
	.can_do ol li .icon{
		min-width: 100px;
		width: 25%;
		margin: auto auto 20px;
	}
	.can_do ol li .text_wrapper{
		width: 100%;
	}
}
@media screen and (max-width: 480px){
	.can_do{
		padding: 40px 0 30px;
	}
	.can_do h3{
		margin-bottom: 30px;
	}
	.can_do ol li{
		margin-bottom: 20px;
	}
	.can_do ol li .icon{
		margin: auto auto 10px;
	}
}

/* ********
	各コストイメージ
********************************* */
.business_cost{
	padding: 100px 0;
}
.business_cost .img_wrapper figure{
	text-align: center;
	width: 49%;
	margin: auto;
}
.business_cost .img_wrapper figcaption{
	font-weight: 700;
	text-align: center;
	margin-bottom: 15px;
}

@media screen and (max-width: 1024px){
	.business_cost{
		padding: 80px 0;
	}
}

@media screen and (max-width: 768px){
	.business_cost{
		padding: 60px 0 20px;
	}
	.business_cost .img_wrapper figure{
		width: 90%;
		margin-bottom: 60px;
	}
}
@media screen and (max-width: 480px){
	.business_cost{
		padding: 40px 0 10px;
	}
	.business_cost .img_wrapper figure{
		margin-bottom: 40px;
	}
	.business_cost .img_wrapper figcaption{
		margin-bottom: 5px;
	}
}

/* ********
	お取引の流れ
********************************* */
.business_flow{
	padding: 90px 0 100px;
	background-color: #f2f2f2;
}

.business_flow .flow_wrapper figure{
	width: 43.5%;
}
.business_flow .flow_wrapper .text_wrapper{
	width: 53%;
	padding-top: 10px;
	margin-left: auto;
}
.business_flow h3{
	margin-bottom: 40px;
}
.business_flow .note{
	font-weight: 700;
	margin-bottom: 30px;
}

.business_flow .text{
	margin-bottom: 40px;
}

.business_flow .btn_primary{
	margin: 0;
}

@media screen and (max-width: 1024px){
	.business_flow{
		padding: 80px 0 90px;
	}
}

@media screen and (max-width: 768px){
	.business_flow{
		padding: 50px 0 60px;
	}
	.business_flow .items{
		margin-bottom: 40px;
	}
	.business_flow h3{
		margin: auto;
	}
	.business_flow .note{
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 480px){
	.business_flow{
		padding: 30px 0 40px;
	}
	.business_flow .text{
		margin-bottom: 20px;
	}
	.business_flow .btn_primary {
		margin: auto;
	}
}

/* ***********************************************************************
	会社概要
************************************************************************ */
/* *******
	WE LOVE FOR YOU!
********************************** */
#company .intro{
	padding: 100px 0;
}
#company .intro .container{
	padding-bottom: 70px;
}

#company .intro .text_wrapper{
	width: 54%;
	margin-right: auto;
}

#company .summary h3{
	white-space: nowrap;
	margin-bottom: 20px;
}

#company .intro .text_wrapper .message{
	margin-bottom: 30px;
}


#company .intro figure{
	text-align: center;
	width: 43%;
}

@media screen and (max-width: 1024px){
	#company .intro{
		padding: 80px 0;
	}
	#company .intro .container{
		padding-bottom: 50px;
	}
}

@media screen and (max-width: 768px){
	#company .intro{
		padding: 50px 0;
	}
	#company .intro .container{
		padding-bottom: 40px;
	}

	#company .intro .text_wrapper{
		width: 100%;
		padding-bottom: 20px;
	}

	#company .intro .text_wrapper .message .control{
		display: none;
	}

	#company .intro figure{
		width: 80%;
		margin: auto;
	}
}
@media screen and (max-width: 610px){

	#company .intro .text_wrapper .message .control{
		display: block;
	}
}

@media screen and (max-width: 480px){
	#company .intro{
		padding: 30px 0 40px;
	}
	#company .intro .container{
		padding-bottom: 30px;
	}
	#company .intro .text_wrapper{
		padding-bottom: 15px;
	}
	#company .intro .text_wrapper .message{
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 359px){
	#company .summary h3{
		font-size: 2.4rem;
		white-space: normal;
	}
}
/* *******
	表
********************************** */
#company table, #company th, #company td {
	border:1px solid #ccc;
}

#company  th, #company td {
	padding: .8em .1em .8em 1em;
}

#company  th{
	font-weight: 700;
	min-width: 88px;
	background-color: #f2f2f2;
}


#company table li{
	padding: 8px 0;
}

#company table .control{
	display: none;
}

@media screen and (max-width: 768px){
	/* #company table .control{
		display: block;
	} */
}
@media screen and (max-width: 610px){
	#company table .control{
		display: block;
	}
	#company table .indent_control{
		display: inline-block;
		text-indent: 1em;
	}
}
@media screen and (max-width: 480px){
	#company  td{
		padding: .8em .1em .8em .3em;
	}
}
@media screen and (max-width: 410px){
	#company table .indent_control{
		text-indent: 0;
	}
}

/* *******
	アクセス
********************************** */
#company .access{
	padding-bottom: 120px;
}
#company .access address{
	margin-bottom: 30px;
}

.map{
	position: relative;
}
.map::before{
	content: "";
	display: block;
	padding-top: 38.9%;
}
.map iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

@media screen and (max-width: 1024px){
	#company .access{
		padding-bottom: 90px;
	}
	#company .access address{
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 768px){
	#company .access{
		padding-bottom: 60px;
	}
	.map::before{
		padding-top: 56.25%;
	}
}
@media screen and (max-width: 480px){
	#company .access{
		padding-bottom: 40px;
	}
	#company .access address{
		margin-bottom: 15px;
	}
}

/* ***********************************************************************
	お問い合わせ
************************************************************************ */
.required{
	position: relative;
}
.required:before{
	content: "\0203B";
	font-weight: 700;
	color: #d10023;
	position: absolute;
	left: .8em;
}

::placeholder {
	color: #cacaca;
}


#contact .inner_primary{
	padding: 100px 0;
}

#contact .text_wrapper{
	padding-bottom: 50px;
}
#contact .text_wrapper .guidance{
	padding-bottom: 15px;
}
#contact .text_wrapper .required{
	padding-left: 2em;
}

#contact table, #contact th, #contact td {
	border:1px solid #ccc;
}

#contact table{
	margin-bottom: 40px;
}

#contact  th, #contact td {
	padding: .8em .1em .8em 2em;
}

#contact th{
	font-weight: 700;
	min-width: 140px;
	background-color: #f2f2f2;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"]{
	max-width: 450px;
	width: 90%;
	padding: .5em;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	box-shadow: none;
}
#contact textarea{
	width: 95% !important;
	height: 6em !important;
	padding: .5em;
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	box-shadow: none;
}

#contact .checkbox{
	white-space: nowrap;
	position: relative;
	width: fit-content;
}
#contact .checkbox::before{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 8px;
	background-color: #fff;
	vertical-align: middle;
	border: #808080 2px solid;
	border-radius: 3px;
	position: relative;
	top: -.1em;
}
#contact .checkbox::after{
	content: "";
	display: inline-block;
	width: .4em;
	height: .7em;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	opacity: 0;
	transform: rotate(45deg);
	position: absolute;
	left: .3em;
	top: 1.1em;
}
#contact input[type=checkbox]:checked ~ .checkbox::before{
	background-color: #22a2c2;
	border: #22a2c2 2px solid;
}
#contact input[type=checkbox]:checked ~ .checkbox::after{
	opacity: 1;
}

#contact button{
	padding: 0;
	text-shadow: none;
	transition: .4s;
}
#contact button:hover{
	opacity: .7;
}

#contact table .control{
	display: none;
}

@media screen and (max-width: 1024px){
	#contact .inner_primary{
		padding: 80px 0;
	}
	
	#contact .text_wrapper{
		padding-bottom: 40px;
	}
	#contact .text_wrapper .guidance{
		padding-bottom: 15px;
	}
}


@media screen and (max-width: 768px){
	.required:before{
		left: .3em;
	}

	#contact .inner_primary{
		padding: 60px 0;
	}
	
	#contact .text_wrapper{
		padding-bottom: 30px;
	}
	#contact .text_wrapper .guidance{
		padding-bottom: 10px;
	}
	#contact .text_wrapper .required{
		padding-left: 1.5em;
	}
	#contact table{
		margin-bottom: 30px;
	}
	#contact th{
		padding: .8em .1em .8em 1.5em;
	}
}
@media screen and (max-width: 570px){
	#contact table .control{
		display: block;
	}
	#contact table .control_indent{
		display: inline-block;
		text-indent: 1.5em;
	}
}
@media screen and (max-width: 480px){
	.required:before{
		left: .8em;
	}

	#contact .inner_primary{
		padding: 40px 0;
	}
	
	#contact .text_wrapper{
		padding-bottom: 20px;
	}
	#contact .text_wrapper .required{
		padding-left: 2em;
	}
	#contact table{
		margin-bottom: 20px;
	}

	#contact th, #contact td{
		display: block;
	}

	#contact th{
		padding: .8em .1em .8em 2em;
	}
	#contact td{
		display: block;padding: .8em .1em 1.2em 2em;
	}


	#contact table .control{
		display: none;
	}
	#contact table .control_indent{
		display: inline-block;
		text-indent: 0;
	}
}

/* ****サンクスページ*** */
@media screen and (max-width: 700px){
	#contact.thanks h3{
		font-size: 2.4rem;
	}
}
@media screen and (max-width: 500px){
	#contact.thanks h3{
		font-size: 2rem;
	}
}
@media screen and (max-width: 410px){
	#contact.thanks h3{
		font-size: 1.6rem;
	}
}

/* ***********************************************************************
	プライバシーポリシー
************************************************************************ */
#privacy .guidance{
	padding-top: 80px;
	margin-bottom: 60px;
}
.privacy_list{
	margin-bottom: 100px;
}
.privacy_list dt{
	margin-bottom: 30px;
}
.privacy_list dd{
	margin-bottom: 50px;
}
.privacy_list dd p{
	margin-bottom: 20px;
}
.privacy_list dd ol{
	margin-bottom: 30px;
	counter-reset: privacy_count;
}

.privacy_list dd ol li{
	padding: 15px 0 15px 2.2em;
	counter-increment: privacy_count;
	position: relative;
}
.privacy_list dd ol li::before{
	content: counter(privacy_count, decimal-leading-zero)".";
	color: #b2b2b2;
	font-weight: 700;
	position: absolute;
	top: 15px;
	left: 0;
}

@media screen and (max-width: 1024px){
	#privacy .guidance{
		padding-top: 60px;
		margin-bottom: 40px;
	}
	.privacy_list{
		margin-bottom: 70px;
	}
}

@media screen and (max-width: 768px){
	#privacy .guidance{
		padding-top: 40px;
		margin-bottom: 40px;
	}
	.privacy_list{
		margin-bottom: 50px;
	}
	.privacy_list dt{
		margin-bottom: 25px;
	}
	.privacy_list dd{
		margin-bottom: 40px;
	}

	.privacy_list dd ol{
		margin-bottom: 25px;
	}
	
	.privacy_list dd ol li{
		padding: 10px 0 10px 2.2em;
		counter-increment: privacy_count;
		position: relative;
	}
	.privacy_list dd ol li::before{
		top: 10px;
	}
}

@media screen and (max-width: 480px){
	#privacy .guidance{
		padding-top: 30px;
		margin-bottom: 20px;
	}
	.privacy_list{
		margin-bottom: 40px;
	}
	.privacy_list dt{
		margin-bottom: 15px;
	}
	.privacy_list dd{
		margin-bottom: 30px;
	}
	.privacy_list dd p{
		margin-bottom: 15px;
	}
	.privacy_list dd ol{
		margin-bottom: 20px;
	}
	
	.privacy_list dd ol li{
		padding: 10px 0 10px 2.2em;
		counter-increment: privacy_count;
		position: relative;
	}
	.privacy_list dd ol li::before{
		top: 10px;
	}
}

/* デジタルサイネージ */

#signage .business_about01 .img_wrapper{
	width: 43%;
}
.jc-sb {
	justify-content: space-between;
}
#signage .business_about01 .text_wrapper{
	width: 51%;
	margin-right: 0;
}

/* .ex-img li {
	width: 50%;
} */
#signage .can_do {
    background-color: #fff;
	padding: 0px;
}
#signage .can_do ol li .icon {
    width: 15%;
}
#signage .can_do ol li .text_wrapper {
    width: 80%;
}

#signage .can_do ol li h4::before {
    content: counter(can_count, decimal-leading-zero) ".";
    font-family: 'fot-udkakugo-large-pr6n', sans-serif;
    color: #ee7944;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.bg-section {
	background-color: #f2f2f2;
	margin: 120px 0px;
}
#signage .strong_primary {
    padding: 10px;
	margin: 0px;
	margin-right: 5px;
	letter-spacing: 0.1em;
}

.lh2 {
	line-height: 2.2;
}

#signage .bg-section .business_about01 .text_wrapper {
    width: 53%;
}
.merit_list ol li {
    counter-increment: privacy_count;
}
.merit_list ol li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 70px;
}

.merit_list ol li:last-of-type {
    margin-bottom: 40px;
}
.merit_list ol li h4 {
    padding-left: 2em;
    margin-bottom: 20px;
    counter-increment: can_count;
    position: relative;
}

#signage .merit_list ol li h4::before {
    content: counter(can_count, decimal-leading-zero) ".";
    font-family: 'fot-udkakugo-large-pr6n', sans-serif;
    color: #00a4c3;
    font-weight: 700;
    position: absolute;
    left: 0;
}
.merit_list {
    counter-reset: can_count;
}
.merit-txt {
	width: 60%;
}
.merit-img {
	width: 34%;
}
.merit_list .business_about01 {
    margin-bottom: 100px;
}
.signage-list {
	display: flex;
	align-items: center;
}

.signage-intro p.fz26 {
	margin-bottom: 40px;
	letter-spacing: 0.15rem;
}

.signage-intro {
	margin-bottom: 120px;
}

.fz14　{
	font-size: 14px;
}
.fz52 {
	font-size: 52px;
	color: #ee7944;
	margin-top: 80px;
	line-height: 1.5;
}

.ta-r {
	text-align: right;
}
.ta-c {
	max-width: 356px;
	text-align: center;
	margin-left: auto;
}
  
  .ta-c span {
	display: inline-block;
	text-align: left;
}
  .signage01::before {
	content:'屋内用壁掛けモデル 4Kサイネージ';
	position: absolute;
	top: 100%;
	left: 7px;
	display: inline-block;
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
.signage02::before {
	content:'超大型サイネージ';
	position: absolute;
	top: 99%;
	left: -3px;
	display: inline-block;
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
.signage03::before {
	content:'LCDサイネージ';
	position: absolute;
	top: 101%;
	left: 8px;
	display: inline-block;
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
  .signage-list figure {
	position: relative;
}
.hiragino-w8 {
	font-family: 'Hiragino Kaku Gothic Std', 'noto-sans-cjk-jp', 'Noto Sans JP', sans-serif;
}
#signage .business_about01 {
    margin-bottom: 95px;
}
#signage h2 br:nth-of-type(2), .can_do .fz26 br { 
	display: none; 
}

.fz52 span {
	font-size: 28px;
	vertical-align: 2px;
    margin-left: 5px;
}

/* サイネージ　メディアクエリ */

@media screen and (max-width: 1024px){
	.ex-img li, .ex-img img {
		width: 100%;
	}
	.signage03 {
		margin-top: 50px;
	}
}


@media screen and (max-width: 768px){
#signage .business_about01 .img_wrapper, #signage .can_do ol li .text_wrapper, #signage .bg-section .business_about01 .text_wrapper, .merit-img, .merit-txt,
#signage .img_wrapper.sp img, .ex-img li, .ex-img img {
	width: 100%;
}
#signage .business_about01 .text_wrapper {
    width: 100%;
	margin-top: 30px;
}
#signage .business_about01 {
    margin-bottom: 40px;
}
#signage .can_do {
    background-color: #fff;
    margin-top: 60px;
}

#signage .can_do ol li h4 {
    margin: 20px 0px 10px;
 
}
#signage .can_do ol li {
	margin-bottom: 30px;
}

#signage .business_about01 .text_wrapper .note {
	margin-bottom: 20px;
	font-feature-settings: 'palt';
	font-size: 18px;
}
#signage .strong_primary {
    padding: 5px;
}
.merit_list .flex_pc {
	display: flex;
    flex-direction: column-reverse;
}
.bg-section {
    margin: 80px 0px;
	padding: 80px 0px;
}
.merit_list ol li {
    display: block;
    margin-bottom: 60px;
}
.merit-txt {
	margin-top: 20px;
}
.merit_list ol li h4 {
    margin-bottom: 10px;
}
.signage-list {
	justify-content: center;
}
.signage-list figure {
    margin-bottom: 60px;
}
.fz52 {
    font-size: 40px;
    line-height: 1.2;
	margin-top: 40px;
}
.ta-c {
    max-width: 335px;
}
.fz14 {
    font-feature-settings: 'palt';
	margin-top: 10px;
}
#signage h2 br:nth-of-type(2), .can_do .fz26 br { 
	display: block; 
}
.merit_list ol li:last-of-type {
	margin-bottom: 0px;
}
.signage03 {
	margin-top: 0;
}
.title_primary .sub {
    line-height: 1rem;
}
.fz52 span {
	font-size: 20px;
}
}