@charset "UTF-8";
/*
Theme Name: スマート
Author: 株式会社メックコミュニケーションズ
Author URI: http://www.mec-com.co.jp
*/

/*style
-----------------------------------------------------------------------------------------*/
body{
	font-family: "HummingStd-L", Meiryo, "メイリオ", "Lucida Grande", Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	color:#000;
}
/*-------------------------お問い合わせボタンの色*/
.btn.toi{
	background-color:#FC9D00;
}
.btn.toi:hover{
	background-color:#FDCD00;
}
/*-------------------------電話ボタンの色*/
.btn.tel{
}
.btn.tel:hover{
}


/*header
-----------------------------------------------------------------------------------------*/
header{
	background:#e0ffff;
}
/*-------------------------header_copy*/
.header_copy{
	background:#E6E6E6;
}
/*-------------------------globalnav_btn(sp)*/
.globalnav_btn{
	color:#000;
}
.globalnav_btn::before,.globalnav_btn::after{
	background-color:#000;
}
/*-------------------------globalnavの子要素を隠す*/
.globalnav nav .accordion,
.globalnav nav .accordionopen{
	/*display:none;*/
}
/*-------------------------------------------------------------------pc*/
@media print, screen and (min-width: 768px) {
.header_toi{
	float:right;
}
.globalnav nav > ul > li:first-child{
	display:none;
}
.globalnav nav > ul > li > a{
	padding:40px 0;
}
#wrapper.scroll .globalnav nav > ul > li > a{
	padding:25px 0;
}
#wrapper.scroll .header_logo{
	display:block;
	padding:5px;
}
#wrapper.scroll .header_logo img{
	max-height:60px;
}
#wrapper.scroll .header_toi{
	display:block;
	padding:5px;
}
#wrapper.scroll .header_toi a{
	line-height:60px;
}
.header_banner{
	display:none;
}
/*hover下線*/
.globalnav nav > ul > li > a:after,
.globalnav nav > ul > li > a.current:after{
	content: "";
	display: block;
	height: 2px; 
	width:0;
	background:#f9340e;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	top:10px;
	position:relative;
	margin-left:20%;
	margin-bottom:-2px;
}
.globalnav nav > ul > li:hover > a:after,
.globalnav nav > ul > li > a.current:after{
	width:60%;
}
/*globalnav*/
.globalnav{
	color:#000;
}
/*accordion*/
.globalnav nav .accordion li + li{
	border-top:1px solid #FFF;
	font-size:15px;
}
.globalnav nav .accordion li a{
	background:#f97876;
	color:#fff;
	font-size:15px;
}
.globalnav nav .accordion li a:hover{
	background:#f5bbba;
	font-size:15px;
}
}
/*-------------------------------------------------------------------sp*/
@media screen and (max-width: 767px) {
/*globalnav*/
.globalnav{
	background:#F5F5F5;
	color:#000;
}
globalnav nav > ul > li{
	border-bottom:1px solid #000;
}
}

/*mainimg
-----------------------------------------------------------------------------------------*/
.mainimg{
	background:#CCC;
}
/*-------------------------grad*/
.grad::before,
.grad::after{
	background: -moz-linear-gradient(#CCC,rgba(0,0,0,0));
	background: -webkit-linear-gradient(#CCC, rgba(0,0,0,0));
	background: linear-gradient(to right, #CCC,rgba(0,0,0,0));
}
/*-------------------------fadeimg*/
@media screen and (min-width: 768px) {.fadeimg{height:600px;}}
@media screen and (max-width: 767px) {.fadeimg{height:300px;}}

/*main
-----------------------------------------------------------------------------------------*/
/*-------------------------localnav(pc)*/
.localnav{
	background-color:#796249;
	color:#FFF;
}
/*-------------------------single*/
.single h1{
	border-color:#000;
}
.single h2{
	background-color:#7a4600;
	color:#FFF;
}
.single h3{
	color:#000;
}
.single h4{
	border-color:#000;
	color:#000;
}
/*-------------------------sidebar*/
.sidebar h2{
	border-color:#000;
	color:#000;
}
/*-------------------------pager*/
.pager li a,
.pager li span{
	background-color:rgba(0,0,0,0.1);
	color:#000;
}
.pager li span{
	background-color:#000;
	color:#FFF;
}
.pager li a:hover{
	background-color:#CCCCCC;
}

/*footer
-----------------------------------------------------------------------------------------*/
footer{
	background-color:#FFF;
	color:#000;
}
/*-------------------------footer_toi*/
.footer_toi{
	background:#fef7e6;
	color:#000;
}
/*-------------------------footer_nav*/
.footer_nav{
	background-color:#87cefa;
	color:#FFF;
}


/*list
-----------------------------------------------------------------------------------------*/
.list.bg a{
	background-color:#fef7e6;
}
.list.bg a:hover{
	background-color:#FFE9B3;
}
@media print, screen and (min-width: 768px) {
.list.box.more a::after,
.list.box.B.more a p::after{
	color:#036eb8;
	background-image:url(images/ya_maru.svg);
}
.tx_w .list.box.more a::after,
.tx_w .list.box.more a p::after,
.list.box.tx_w.more a::after,
.list.box.tx_w.more a p::after{
	color:#FFFF00;
	background:url(images/ya_maru_y.svg) left no-repeat;
}
}



/*tx
-----------------------------------------------------------------------------------------*/
.tx{}
.tx a{color:#0038AD;}
.tx_sen{}
.tx_sen::after{border-color:#f9340e;}
.tx_kiji{border-color:#000;}
.tx_belt{background-color:#000;color:#FFF;}
.tx_line{border-color:#000;}
.tx_bar{border-color:#000;}
.tx_check{}
.tx_deco{}
.tx_kage{}
.tx_kage_w{}
.tx_maru{}
.tx_link{color:#0038AD;}
.tx_ya{}
.title1{}
.title2{}
.title3{}


/*sitemap
-----------------------------------------------------------------------------------------*/
.sitemap > li > a{
	color:#000;
	background: #FFE9B3 url(images/ya.svg) right no-repeat;
}


/*utility
キーカラー1：f9340e
キーカラー2：7a4600
キーカラー3：333333
キーカラー4：444444
キーカラー5：555555
-----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------text_color*/
/*黒色*/ .tx_k{color:#000;}
/*白色*/ .tx_w{color:#FFF;}
/*灰色*/ .tx_g{color:#666;}
/*赤系*/ .tx_r{color:red;}
/*青系*/ .tx_b{color:blue;}
/*黄系*/ .tx_y{color:yellow;}
/*キーカラー1*/ .tx_c1{color:#f9340e;}
/*キーカラー2*/ .tx_c2{color:#7a4600;}
/*キーカラー3*/ .tx_c3{color:#FC9D00;}
/*キーカラー4*/ .tx_c4{color:#444444;}
/*キーカラー5*/ .tx_c5{color:#555555;}
/*-------------------------------------------------------------------------------------------------border_color*/
/*黒色*/ .sen_k{border-color:#000;}
/*白色*/ .sen_w{border-color:#FFF;}
/*灰色*/ .sen_g{border-color:#999;}
/*赤系*/ .sen_r{border-color:red;}
/*青系*/ .sen_b{border-color:blue;}
/*黄系*/ .sen_y{border-color:yellow;}
/*キーカラー1*/ .sen_c1{border-color:#f9340e;}
/*キーカラー2*/ .sen_c2{border-color:#7a4600;}
/*キーカラー3*/ .sen_c3{border-color:#FC9D00;}
/*キーカラー4*/ .sen_c4{border-color:#444444;}
/*キーカラー5*/ .sen_c5{border-color:#555555;}
/*-------------------------------------------------------------------------------------------------bg*/
/*黒色*/.bg_k,.btn.bg_k,.bg_k.area::before{background-color:#000;color:#FFF;}
/*白色*/ .bg_w,.btn.bg_w,.bg_w.area::before{background-color:#FFF;}
/*灰色*/ .bg_g,.btn.bg_g,.bg_g.area::before{background-color:#F1F1F1;}
/*赤系*/ .bg_r,.btn.bg_r,.bg_r.area::before{background-color:red;}
/*青系*/ .bg_b,.btn.bg_b,.bg_b.area::before{background-color:blue;}
/*黄系*/ .bg_y,.btn.bg_y,.bg_y.area::before{background-color:yellow;}
/*キーカラー1*/ .bg_c1,.btn.bg_c1,.bg_c1.area::before{background-color:#f9340e;}
/*キーカラー2*/ .bg_c2,.btn.bg_c2,.bg_c2.area::before{background-color:#7a4600;}
/*キーカラー3*/ .bg_c3,.btn.bg_c3,.bg_c3.area::before{background-color:#FC9D00;}
/*キーカラー4*/ .bg_c4,.btn.bg_c4,.bg_c4.area::before{background-color:#EDEAE3;}
/*キーカラー5*/ .bg_c5,.btn.bg_c5,.bg_c5.area::before{background-color:#555555;}
/*薄いキーカラー1*/ .bg_pale_c1,.btn.bg_pale_c1,.bg_pale_c1.area::before{background-color:#fef7e6;}
/*薄いキーカラー2*/ .bg_pale_c2,.btn.bg_pale_c2,.bg_pale_c2.area::before{background-color:#e0ffff;}
/*薄いキーカラー3*/ .bg_pale_c3,.btn.bg_pale_c3,.bg_pale_c3.area::before{background-color:#f9fff5;}
/*薄いキーカラー4*/ .bg_pale_c4,.btn.bg_pale_c4,.bg_pale_c4.area::before{background-color:#fdf1f1;}
/*薄いキーカラー5*/ .bg_pale_c5,.btn.bg_pale_c5,.bg_pale_c5.area::before{background-color:#f4f0eb;}
.bg_no{background:none;}


.list.box.more a p::after{
	color:#000;
}

/*-------------------------スライド*/
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
  margin: 0 auto; /* Box外の余白 - 変更可 */
  padding: 5px 0 5px; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}
@media screen and (max-width: 767px) {
.slider-box{padding: 10px 0 0;}
}

/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
  display: none;
}
.slider-check:checked ~ .loop-box > .loop {
  animation-play-state: paused;
}
.slider-label {
  display: block;
  cursor: pointer;
  color: #fff; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;  
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden; 
}
.loop-box, .loop-box ul {
  height: 160px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: fff; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(250px * 1.1 * 20); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 150s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 4); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}
.loop-box ul.loop2 {
  animation-name: loop2;
}
@keyframes loop1 {
  0% {transform: translateX(0); }
  49.99999% {transform: translateX(-100%); }
  50% {transform: translateX(100%); }
}
@keyframes loop2 {
  0% {transform: translateX(100%); }
  100%{transform: translateX(-100%); }
}

/*-------------------------------------------------------------------------------------------------colmn*/
@media screen and (min-width: 740px) {
	.col2{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:50px;-moz-column-gap:50px;column-gap:50px;}
	.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:40px;-moz-column-gap:40px;column-gap:40px;}
	.col4{-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;}
	.col5{-webkit-column-count:5;-moz-column-count:5;column-count:5;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;}
}
@media screen and (max-width: 739px) {
	.col5{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}
}
@media screen and (max-width: 480px) {
	.col5{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}
}

/*-------------------------------------------------------------------------------------------------dot*/
.dot li::before {
  background: #e0ffff;
}

/*-------------------------------------------------------------------------------------------------faq*/
.faq .q, .faq .a {
  background-color: #fff;
}
.faq.A .q::before {
  background: #7a4600;
  color: #FFF;
}
.faq.A .a::before {
    background: #f9340e;
    color: #FFF;
}
.faq .q.open, .faq .q:hover {
  background-color: #F1F1F1;
}

/*-------------------------------------------------------------------------------------------------flow*/
.flow {
 	padding: 30px 0 30px 140px;
}
.flow_no {
 	width: 120px;
}
@media screen and (max-width: 767px) {
	.flow{padding:15px 0;}
	.flow_no{font-size:45px;line-height:1.25;width:auto;position:static;margin:0 auto;}
}
  
/*-------------------------movie*/
.movie video{
	width:100%;
	max-width:100%;
}

/*-------------------------box-shadow*/
.shadow a{
box-shadow: 0 0 4px #999;
}
@media screen and (max-width: 767px) {
	.shadow a{box-shadow: 0 0 1px #999;}
}
/*block
-----------------------------------------------------------------------------------------*/
/*-------------------------block1*/
@media screen and (min-width: 768px) {
	.block1 > figure + figure,.block1 > li + li,.block1 > div + div{margin-top:10px;}
}
@media screen and (max-width: 767px) {
	.block1 > figure + figure,.block1 > li + li,.block1 > div + div{margin-top:5px;}
}
/*-------------------------block2*/
.block2{
	font-size:0;
	margin:-10px;
}
.block2 > figure,.block2 > li,.block2 > div{
	display:inline-block;
	width:50%;
	padding:10px;
	vertical-align:top;
}
@media screen and (max-width: 767px) {
	.block2{margin:-4px;}
	.block2 > figure,.block2 > li,.block2 > div{padding:4px;}
}
/*-------------------------block3*/
.block3{
	font-size:0;
	margin:-12px;
}
.block3 > figure,.block3 > li,.block3 > div{
	display:inline-block;
	width:33.3%;
	padding:12px;
	vertical-align:top;
}
@media screen and (max-width: 767px) {
	.block3{margin:-4px;}
	.block3 > figure,.block3 > li,.block3 > div{width:calc(100%/2);padding:4px;}
}
/*-------------------------block4*/
.block4{
	font-size:0;
	margin:-8px;
}
.block4 > figure,.block4 > li,.block4 > div{
	display:inline-block;
	width:calc(100%/4);
	padding:8px;
	vertical-align:top;
}
@media screen and (max-width: 767px) {
	.block4{margin:-4px;}
	.block4 > figure,.block4 > li,.block4 > div{width:33.3%;padding:4px;}
}
/*-------------------------block5*/
.block5{
	font-size:0;
	margin:-8px;
}
.block5 > figure,.block5 > li,.block5 > div{
	display:inline-block;
	width:calc(100%/5);
	padding:8px;
	vertical-align:top;
}
@media screen and (max-width: 767px) {
	.block5{margin:-4px;}
	.block5 > figure,.block5 > li,.block5 > div{width:33.3%;padding:4px;}
}
/*-------------------------block6*/
.block6{
	font-size:0;
	margin:-8px;
}
.block6 > figure,.block6 > li,.block6 > div{
	display:inline-block;
	width:16.6%;
	padding:8px;
	vertical-align:top;
}
@media screen and (max-width: 767px) {
	.block6{margin:-4px;}
	.block6 > figure,.block6 > li,.block6 > div{width:calc(100%/4);padding:4px;}
}
/*-------------------------block_sp1*/
@media screen and (max-width: 767px) {
	.block_sp1 > figure,.block_sp1 > li,.block_sp1 > div{width:100%;padding:0;}
}
/*-------------------------hover*/
.hover{
  position:relative;
  display:block;
  height:auto;
}
.hover img{
  display:block;
  width:300px;
  margin: auto;
}
.hover:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.hover:hover:before{
  opacity:0.2;
}
/* 送信ローダーの位置調整 */
div.wpcf7 .wpcf7-spinner {
    display: block;
	margin: 10px auto 0;
}

#form input[type="submit"]{
	margin-left:0;
}
/*-------------------------step */
.step-wrap1 {
	counter-reset:count;
	position: relative;
	border: solid 2px #f1f1f1;
	padding: 20px;
}
.step-content1 {
	padding: 0 0 1.3em 2em;
	margin: 0;
	position: relative;
}
.step-content1::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background: #796249;
	border: solid 3px #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	box-shadow: 0 0 0 2px #796249;
}
.step-content1::after {
	content: "";
	display: block;
	height: calc(100% - 35px);
	border-left: dotted 5px #768888;
	position: absolute;
	top: 30px;
	left: 10px;
}
.step-title1 {
	font-weight: bold;
	font-size: 20px;
}
.step-label1 {
	color: #768888;
	font-weight: bold;
}
.step-body1 {
	margin-top: .5em;
	padding: 0 0 1em;
	border-bottom: dotted 2px #ddd;
}
.step-wrap1 > :last-of-type::after {
	display: none;
}
@media screen and (max-width: 739px) {
	.step-title1{font-size:18px;}
}
/*-------------------------フォーム部品*/
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"]{
	width:400px;
}
/*▼▼▼739px以下▼▼▼*/
@media screen and (max-width: 739px) {
	#form input,
	#form select{font-size:16px;}
	#form input[type="text"],#form input[type="tel"],#form input[type="email"],#form textarea,#form .adress input,#form .name2 input{width:100%;margin-right:0;}
	#form .zip input{width:120px;}
	#form .age input{width:120px;}
	#form select{margin-right:0px;}
}
/*▲▲▲739px以下▲▲▲*/
/* CF7チェックボックスを縦並びに */
span.wpcf7-checkbox .wpcf7-list-item {
	display: block;
}
/*-------------------------sitemap*/
.sitemap > li > a:hover {
  background-color: #fef7e6;
}
.sitemap > li > ul > li > a:hover {
  background-color: #F1F1F1;
}
/*-------------------------間を均等割（between）*/
body .pc_flex.between{
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}
/*-------------------------両端を均等割（around）*/
body .pc_flex.around{
	-ms-flex-pack:distribute;
	justify-content:space-around;
}
/*-------------------------tx_ya*/
a:hover .tx_ya, .tx_ya:hover {
  color: #ccc;
}
.tx_ya::before {
	border-left: 0.5em solid #000;
}
.tx_ya {
	color: #000;
	padding: 0.6em;
}
.c_movie li{
	margin-bottom:5px;
}