@charset "utf-8";
/*@import url(https://fonts.googleapis.com/css?family=Rajdhani);*/
/* CSS Document */

/*------------------------------------------
base
------------------------------------------*/
html {
font-size: 62.5%; /*標準サイズ*/
}
html.small {
font-size: 50%; /*小サイズ*/
}
html.big {
font-size: 87.5%; /*大サイズ*/
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


body{
	background:#fff;
	background-size: cover;
	color: #000;
	font-size: 16px;
	line-height: 250%;
	font-family:'メイリオ', 'Meiryo', sans-serif;
}



@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	.pc{display: block !important;}
	.sp{display: none !important;}
}

@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */
	body{
		font-size: 12px;
		line-height: 200%;
	}
	img{max-width: 100%;}
	.sp{display: block !important;}
	.pc{display: none !important;}
}


p{
    margin-bottom: 1.6rem;
}

.row{
	padding-left: 0;
	padding-right: 0;
}

small{
	/*display: block;*/
	line-height: 150%;
    font-size: 0.7rem;
}

.object-fit{
  object-fit: contain;
  font-family: 'object-fit: contain;'
}


#container{
    padding: 5em 0;
}


img{
	image-rendering: -webkit-optimize-contrast;
	vertical-align: bottom;
}



.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;'
}



/*-------------------------------------
btn_p
-------------------------------------*/
.btn_p {
	text-align: center;
	margin: 3rem 0;
}
.btn_p a.btn,
.btn_p input{
	font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #000;
  border-radius: 3px;
	
  border: 1px solid #000;

}



.btn_p a:hover,
.btn_p input:hover{
  color: #fff;
  background: #000;
}

.btn_p input{
	background: #fff;
}

.btn_p input:hover{
	color: #fff !important;
}


/*------------------------------------
main_img_box
---------------------------------------*/

#main_img_box{
	height: 600px;
    overflow: hidden;
    position: relative;
	color: #fff;
}


.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 600px;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 40s 0s infinite;
    animation: anime 40s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 10s;
      animation-delay: 10s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 20s;
      animation-delay: 20s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }



@keyframes anime {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    45% {
        opacity: 0;
        /* transform: scale(1.2);*/
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
		 
    }
    30% {
        opacity: 1;
    }
    45% {
         opacity: 0;
         /*transform: scale(1.2);*/
                    z-index:9;
    }
    100% { opacity: 0 }
}



@media all and (max-width: 991px) {
	#main_img_box{
		height: 40vh;
		top: 45px;
	}
	
	.main_img {
		height:40vh !important;
	}
}


/*-----------------------------------
new_sale sale_box
-----------------------------------*/
#new_sale,
.sale_box{
	z-index: 10;
	width: 100%;
	margin-top: -170px;
	position: relative;
	margin-bottom: 3rem;
}

#new_sale .row,
.sale_box .row{
	width: 100%;
	margin: 0 auto;
	max-width: 1680px;
}
.sale_box .row{
	padding-top: 40px;
}

#new_sale .row .box,
.sale_box .row .box{
	position: relative;
}

#new_sale .box a,
.sale_box .box a{
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	background: #000;
	color: #fff;
	text-align: center;
	line-height: 1.5rem;
	
}

#new_sale .box .text_box,
.sale_box .box .text_box{
	padding: 1rem;
	padding-bottom: 1.5rem;
	position: relative;
}

#new_sale .box .text_box em,
.sale_box .box .text_box em{
	font-style: normal;
	line-height: 1.5em;
}

#new_sale .box p.name,
.sale_box .box p.name{
	margin: 1.6rem 0;
	line-height: 1.5em;
}
#new_sale .box p.price,
.sale_box .box p.price{
	font-weight: bold;
	margin-top:0.5em;
	font-size: 1.8rem;
}

#new_sale .box .thum_p,
.sale_box .box .thum_p{
	margin: 0;
}

#new_sale .box em,
.sale_box .box em{
	font-style: normal;
	font-size: 1.4rem;
}

#new_sale .thum_p img,
.sale_box .thum_p img{
	width: 100%;
	height: 200px;
	object-fit:cover;
}


.sale_box .row div{
	padding-bottom: 15px;
}


#new_sale .section_h2{
	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}

#new_sale .box p.other{
	font-size: 1.2rem;
}

@media all and (max-width: 1024px) {
	#new_sale .box p.name,
	.sale_box .row p.name{
		line-height: 1.1em;
		font-size: 1.2rem;
	}
}
@media all and (max-width: 991px) {
	#new_sale .row,
	.sale_box .row{
		width: 100%;
	}
	
	#new_sale .row > div:nth-child(odd),
	.sale_box .row > div:nth-child(odd){
		padding-right: calc(15px / 2);
	}
	
	#new_sale .row > div:nth-child(even),
	.sale_box .row > div:nth-child(even){
		padding-left: calc(15px / 2);
	}
	
	#new_sale .thum_p img,
	.sale_box .thum_p img{
		height: 100px;
	}
	
	#new_sale .section_h2{
		margin-bottom: 0;
	}
	#new_sale,
	.sale_box{
		margin-top: 0px;
	}
	
}
	
@media (max-width: 767px){
	
	#new_sale .row .box:nth-child(1),
	#new_sale .row .box:nth-child(2){
		margin-bottom: 0;
		padding-bottom:1em;
	}
	.sale_box .row .box:nth-child(1),
	.sale_box .row .box:nth-child(2){
		margin-bottom: 0;
		padding-bottom:1em;
	}
	
}

/*------------------------------------
Accordion
------------------------------------*/
.acc_check{
    display: none;
}
.acc_label{
    background: #fff;
    color: #00a2ed;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
	margin: 0 auto;
	width: 240px;
    position: relative;
	border: #00a2ed solid 1px;
	text-align: center;
	cursor: pointer;
	transition:all .2s;
	
}
.acc_label:hover{
	background: #00a2ed;
	color: #fff;
}
.acc_label:after{
    box-sizing: border-box;
    content: '▽';
    display: block;
    height: 52px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}
.acc_content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acc_check:checked + .acc_label:after{
    content: '△';
}
.acc_check:checked + .acc_label + .acc_content{
	height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}


/*-------------------------------------
line
---------------------------------------*/
hr.cp_hr06 {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left,
	transparent 0%,#2ea7e0 50%,transparent 100%);
	background-image:         linear-gradient(90deg,
	transparent 0%,#2ea7e0 50%,transparent 100%);
}



/*-------------------------------------
flexbox
---------------------------------------*/
.flexbox{
    display: flex;
    flex-wrap: wrap;
}


/*--------------------------------------
select_box
-------------------------------------*/
.select_box{
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.select_box .dropdown{
	display: inline-block;
}

.select_box a{
	font-size: 1.6rem;
	padding: 0.5em 1em;
}
.select_box a.btn,
.select_box .btn-secondary:not(:disabled):not(.disabled).active,
.select_box .btn-secondary:not(:disabled):not(.disabled):active,
.select_box .show>.btn-secondary.dropdown-toggle{
	box-shadow: none !important;
	background: #fff;
	color: #000 !important;
}

.select_box .dropdown-menu{
	border: #000 solid 1px;
}

.select_box a.btn,
.select_box a.btn:hover,
.select_box a.btn:visited{
	color: #000;
}



/*-------------------------------------
box_shadow
-------------------------------------*/


.box_shadow{
    background: #fff;
    border-radius: 10px;
    box-shadow:0px 0px 12px 0px rgba(114,125,131,0.2);
    display:block;
    color: #252525;
    transition: all .5s;
    word-break: break-all;
    margin: 1em auto;
    text-align: center;
}


.box_shadow .thum img{
    border-radius: 10px 10px 0 0;
}

#container a.box_shadow:hover{
    text-decoration: none;
    box-shadow:0px 0px 12px 0px rgba(114,125,131,1);
    opacity: 0.5;
}



/*-------------------------------------
margin_box
-------------------------------------*/
.margin_box{
	margin-top: 5em;
	margin-bottom: 15rem;
}


/*-------------------------------------
padding_inner
-------------------------------------*/
.padding_inner{
    padding: 1rem;
}

.padding_inner ul{
    margin: 0;
    padding-left:1.5rem;
}

.small_text{
    font-size: 0.8rem;
    line-height: 1.2rem;
	padding: 1em 0;
}


/*-----------------------------------
inner2
------------------------------------*/

#container .inner2 .thum_left{
    float: left;
    width: 20%;
}

#container .inner2 h4,
#container .inner2 .text_box{
    float: right;
    width: 78%;
}
@media all and (max-width: 767px) {
    #container .inner2 .thum_left{width: 30%;}
    #container .inner2 h4{width: 68%;}
    #container .inner2 .text_box{
        width: 100%;
    }
}

/*------------------------------------
span.orange
------------------------------------*/
span.orange{
    color: #d25f3b;
}




/*-------------------------------------
header
-------------------------------------*/
header{
	z-index: 50;
	padding: 1rem;
	position: relative;
	background: #fff;
	width: 100%;
	text-align: center;
}

header h1{
	margin: 0;
	padding: 0.5em 0;
	zoom:0.7;
}

header h1{
	position: relative;
}

header #icon_box{
	position: absolute;
	bottom: 18%;
	right: 1rem;
}
 
header #icon_box li{
	float: left;
	list-style: none;
	padding: 0 0.5rem;
}
header #icon_box li a{
	color: #fff;
}


header ul{
	float: right;
	margin: 0;
	padding: 0;
}

header #icon_box button{
	border: #000 solid 1px;
	color: #000;
	background: #fff;
}

header #icon_box button:hover{
	background: #000;
	color: #fff;
}


/*  logo
/--------------------------------- */
@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	
	header #icon_box li a{
		font-size: 1.5rem;
	}
}



@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */
	header{
		position: absolute;
		padding: 0;
		top: 0;
		left: 0;
		height: 45px;
		z-index: 300;
		width: calc(100% - 45px);
	}
	header #icon_box li{
		font-size: 1.8rem;
	}
	header .form-inline{
		display: block;
	}

	header h1{
		text-align: left;
		display: block;
		height: 45px;
		line-height: 45px;
		padding: 0 0 0 1em;
		
	}
	
	header h1 img{
		height: 50px !important;
		padding-top: 15px;
	}
	header #icon_box{
		display: none;
		width: 100%;
		position: static;
		background: #fff;
		padding: 1rem;
	}
	
}





/*  nav
/*--------------------------------- */
nav#main_nav {
	position: relative;
	background: #b8dff7;
	/*font-family: 'Oswald', sans-serif;*/
	font-weight: 400;
	height: 60px;
	padding: 0;
}


li.nav-item ul.second_level {
	margin: 0;
	padding: 0;
	opacity: 0;
    position: absolute;
	z-index: -100;
    top: 60px;
	left: 0;
    width: 100%;
    background: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	text-align: center;
	justify-content: center;
}

li.nav-item ul.second_level li{
	list-style: none;
}

li.nav-item ul.second_level .on{
	display: none;   
}

nav#main_nav .second_level li a{
	text-decoration: none;
	font-size: 1.6rem;
	display: block;
	line-height: 1rem;
	padding: 1.5rem 2rem;
	font-weight: bold;	
	transition:0.2s;
}
nav#main_nav .second_level li a:hover{
	color: #00a2ed;
}

nav#main_nav a, nav#main_nav a:hover, nav#main_nav li a:visited{
	color: #000;
}
nav#main_nav li a.nav-link, nav#main_nav li a.nav-link:hover, nav#main_nav li a.nav-link:visited{
	color: #000;
	font-size: 2.5rem;
}

nav#main_nav li a i{
	font-size: 0.5em;
}

@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	nav#main_nav li a.nav-link, nav#main_nav li a.nav-link:hover, nav#main_nav li a.nav-link:visited{
	color: #000;
	font-size: 2.5rem;
	height: 60px;
}
	.navbar-nav .nav-link img{
		vertical-align: middle;
		height: 24px;
	}
	.navbar-nav .nav-link .fa-chevron-down{
		font-size: 10px;
		margin-left: 10px;
	}
	.navbar-nav .nav-link{
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	li.nav-item ul.second_level li{
		display: inline-block;
	}
	
	li.nav-item ul.second_level{
		max-width: 100%;
		margin: 0 auto;
		left: 0;
		right: 0;
		text-align: center;
	}
}

@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */
	.navbar{
		z-index: 200;
		padding: 0;
	}
	li.nav-item ul.second_level {
		opacity: 1;
		z-index: 200;
		position: static;
	}
	li.nav-item ul.second_level li {
		width: 100%;
		text-align: left;
	}
	li.nav-item ul.second_level li a{
		width: 100%;
		height: auto;
		padding: 1em 0;
	}
	li.nav-item ul.second_level img{
		display: none !important;
	}
	
	nav#main_nav{
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	li.nav-item ul.second_level .on{display: block !important;}
	li.nav-item ul.second_level .off{display: none !important;}
	
	
}
@media (max-width: 991px){
	.navbar{
		background: none !important;
		position: absolute!important;
	}
	
	.navbar button{
		border-color: #ffffff !important;
	}
	
	.navbar .navbar-toggler {
		color: rgba(0, 0, 0, 0.5);
		padding: 10px;
		width: 45px;
		height: 45px;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0;
		background: #b8dff7;
		border: none;
	}
	.navbar .navbar-toggler-icon {
		background-image:none; /* この行で背景画像を無効化 */
		background-color: #000;
		width: 24px;
		height: 4px;
		display: block;
		position: absolute;
		transition: ease .5s;
	}

	/* 3本のバーそれぞれの座標を設定 */
	.navbar-toggler-icon:nth-of-type(1) {top:12px;}
	.navbar-toggler-icon:nth-of-type(2) {top:20px;}
	.navbar-toggler-icon:nth-of-type(3) {top:28px;}

	/* メニューが開いている時の　3本のバーそれぞれの座標および角度を設定 */
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(1) {
		top:20px;
		transform: rotate(45deg);
	}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(2) {
		opacity: 0;
	}
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:nth-of-type(3) {
		top:20px;
		transform: rotate(-45deg);
	}
	
	
	.search_sp,
	.mail_sp,
	.cart_sp{
		position: absolute;
		z-index: 210;
		top: 20px;
		font-size: 20px;
		margin: 0;
	}
	.search_sp a,
	.mail_sp a,
	.cart_sp a{
		color: #fff;
	}
	.search_sp{left: 70px;}	
	.mail_sp{right: 50px;}
	.cart_sp{right: 15px;}
	
	.navbar-collapse{
		background: #fff;
		margin-top: 45px;
		width: 100%;
		padding: 1rem;
	}
	
	.menu_filter{
		display: none;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000000ad;
		z-index: 100;
		margin: 0;
	}
	
	li.nav-item ul.second_level{
		background: #fff;
		padding-left: 1rem;
	}
	
	nav#main_nav li a.nav-link, nav#main_nav li a.nav-link:hover, nav#main_nav li a.nav-link:visited{
		font-size: 2.5rem;
		padding: 1em 0 !important;
	}
	
	.navbar-nav .nav-link img{
		height: 30px;
	}
}






/* search_box
-------------------------------------*/
.search_box form{
	float: right;
	padding-bottom: 0rem;
}

@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	.search_box form{
		zoom:0.9;
	}
	.search_box form input{
		font-size: 0.8rem;
	}
}


@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */

}




@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */
	
	header .search_box form {
		width: 100%;
	}
	
	header .search_box form input{
		width: 70% !important;
		float: left;
		margin-bottom: .5rem!important;
		margin-top: .5rem!important;
	}
	header .search_box button{
		width: 28%;
		margin: 0;
		float: right;
		margin-bottom: .5rem!important;
		margin-top: .5rem!important;
	}
	
	header ul {
		width: 100%;
		display: flex;
	}
	
	header  ul li{
		width: 100%;
	}
}






/*------------------------------------
main_img
------------------------------------*/

/*---main_img------------------------*/
#main_img{
    position: relative;
	width: 100%;
	margin: 0 auto;
	height: 520px;
}

#main_img.content,
#main_img.content #main_img2{
    height: 350px;
}

#main_img #main_img2{
	position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}
#main_img #main_img2 li{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
#main_img #main_img2 li{background: center no-repeat; background-size: cover;}




@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	
	

}

@media all and (min-width: 991px) and (max-width:1024px){

}


@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */
	
	#main_img,
	#main_img #main_img2{
		height: 240px;
	}
	    
}



/*-----------------------------------
index_box
-------------------------------------*/


.index_box .box{
	width: 100%;
	margin-bottom: 2rem;
}


.index_box .box .text_box{
	width: 400px;
	max-height: 400px;
	padding: 4.5rem;
	background: #eaf6fd;
}
.index_box .box .back_box{
	width: calc(100% - 400px);
	overflow: hidden;
	max-height: 400px;
}

.index_box .box .back_box img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}


.index_box .text_box .text_p{
	font-size: 1.4rem;
	line-height: 2em;
}

.index_box .text_box .btn_p{
	margin: 0 auto;
	width: 100%;
}
@media (max-width: 991px){
	.index_box .box .back_box img{
		height: auto;
	}
	
	.index_box .box .text_box{
		max-height: 100%;
	}
		
	.index_box .box .back_box{
		max-height: 100%;
	}
}

/*-----------------------------------
assessment_box
-------------------------------------*/
#assessment_box .text_box{float: left;}
#assessment_box .back_box{float: right;}




/*-----------------------------------
custom_box
-------------------------------------*/
#custom_box .text_box{float: right;}
#custom_box .back_box{float: left;}



@media (max-width: 991px){
	#assessment_box .text_box,
	#assessment_box .back_box,
	#custom_box .text_box,
	#custom_box .back_box{
		float: none;
		width: 100%;
		height: auto;
	}
	#assessment_box .back_box,
	#custom_box .back_box{
		height: 200px;
	}
	.index_box .box .text_box{
		padding: 2.5rem;
	}
}
/*-----------------------------------
gallery_box
-------------------------------------*/

#gallery_box section{
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
}
#gallery_box section p{
    margin: 0;
    float: left;
    width: calc(100% / 4);
	padding: 1rem;
}
#gallery_box section a{
    position: relative;
    content: "";
    display: block;
    padding-top: 100%;
}

#gallery_box section a img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
}

@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */

    #gallery_box section p{
        margin: 0;
        float: left;
        width: calc(100% / 2);
		padding-bottom: 0;
    }
	
	#gallery_box section p:nth-child(odd){
		padding-right: calc(1rem / 2);
	}
	
	#gallery_box section p:nth-child(even){
		padding-left: calc(1rem / 2);
	}
}

/*-------------------------------------
swiper_thum
-------------------------------------*/
#swiper_thum{
	padding-bottom: 1px;
}

#swiper_thum .swiper-container {
	width: 100%;
	height: 100%;
}

#swiper_thum .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

#swiper_thum .swiper-slide a{
	display: block;
	width: 100%;
	height: 100%;
}

.swiper-container .swiper-wrapper .swiper-slide img {
	display: block;
	width: 100%;
	height: 8vw;
	object-fit: contain;
	cursor: pointer;
}
.swiper-container-thum .swiper-wrapper .swiper-slide img,
.swiper-container-thum .swiper-wrapper .swiper-slide ifream{
	display: block;
	width: 100%;
	height: 50vw;
	object-fit:contain;
}
@media all and (max-width: 767px) {
.swiper-container-thum .swiper-wrapper .swiper-slide img,
.swiper-container-thum .swiper-wrapper .swiper-slide ifream{
	display: block;
	width: 100%;
	height: 63vw;
	object-fit:contain;
}
}
#swiper_thum .swiper-container {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

#swiper_thum .swiper-slide {
	background-size: cover;
	background-position: center;
}

#swiper_thum .mySwiper2 {
	height: 80%;
	width: 100%;
}

#swiper_thum .mySwiper {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
}

#swiper_thum .mySwiper .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
}

#swiper_thum .mySwiper .swiper-slide-thumb-active {
	opacity: 1;
}




#swiper_thum .swiper-container-thum {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

#swiper_thum .swiper-slide {
	text-align: center;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}



#swiper_thum .swiper-slide div{
	font-size: 1.2rem;
	width: 100%;
	padding: 1em;
}

#swiper_thum .swiper-slide div p{
	margin: 0;
}

#swiper_thum .swiper-slide div p.title{
	font-weight: bold;
	color: #000;
}

#swiper_thum .swiper-slide div p.text{
	font-size: 1.2rem;
	line-height: 2em;
	color: #000;
	font-weight: normal;
}



#swiper_thum .swiper-container-thum {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#swiper_thum .swiper-slide {
	/*background-size: cover;*/
	background-position: center;
}

#swiper_thum .mySwiper2 {
	width: 100%;
	position: relative;
}

#swiper_thum .mySwiper {
	height: auto;
	box-sizing: border-box;
	padding: 10px 0;
}

#swiper_thum .mySwiper .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
}

#swiper_thum .swiper-slide-thumb-active {
	opacity: 1 !important;
}



#swiper_thum .swiper-button-prev:after,
#swiper_thum .swiper-button-next:after{
	content: "";
}
#swiper_thum .swiper-button-prev,
#swiper_thum .swiper-button-next{
	color: #fff;
	background: none;
	position: absolute;
	margin: 0;
	font-size: 5rem;
	text-shadow: #000 0 0 10px;
}

#swiper_thum .swiper-button-prev{
	left: 20px;
	top: calc(50% - 2.5rem);
}
#swiper_thum .swiper-button-next{
	right: 20px;
	top: calc(50% - 2.5rem);
}



/*------------------------------------
company_box
---------------------------------*/

#company_box{
	background: url("../../images/company_back.jpg") center no-repeat;
	background-size: cover;
	background-color:rgba(0,0,0,0.5);
	background-blend-mode:multiply;
	padding: 4em 0;
	color: #fff;
	text-align: center;
}
#company_box .btn_p{
	margin-bottom: 0;
}
#company_box .btn_p a,
#company_box .btn_p a:hover,
#company_box .btn_p a:visited{
	border-color: #fff;
	color: #fff;
}

#company_box .btn_p a:hover{
	background-color: #fff;
	color: #000;
}

#company_box .text_box{
	padding: 2em 0;
	padding-bottom: 3rem;
}





/*----------------------------------
delivery_box
-------------------------------------*/

#delivery_box .row{
	border-top: #b6b6b6 solid 1px;
	border-bottom: #b6b6b6 solid 1px;
	width: 100%;
	margin: 3em 0;
}

#delivery_box .row a,
#delivery_box .row a:hover,
#delivery_box .row a:visited{ 
	display:block;
	text-decoration: none;
	color: #000;
}

#delivery_box .box .text_box{
	margin: 0;
	font-weight: bold;
	line-height: 1.5rem;
	padding-top: 1rem;
}

#delivery_box .box p span{
	font-weight: normal;
	font-size: 1.4rem;
}
#delivery_box .box .thum_p img{
	height: 200px;
	width: 100%;
	object-fit: cover;
}

#delivery_box .box{
	border-right: #b6b6b6 solid 1px;
	padding: 1.5rem;
	text-align: center;
}

#delivery_box .box:last-child{
	border-right: none;
}

@media (max-width: 767px){
	#delivery_box .box:nth-child(1n),
	#delivery_box .box:nth-child(2n){
		border-bottom: #d6d6d6 solid 1px;
	}
	#delivery_box .box:nth-child(3n),
	#delivery_box .box:nth-child(4n){
		border-bottom: none;
	}
	#delivery_box .box:nth-child(even){
		border-right: none;
	}
	
	#delivery_box .box:nth-child(odd){
		border-left: none;
	}
	
}
@media (max-width: 991px){
	#delivery_box .box p img{
		max-height: 100px !important;
	}
}


/*-----------------------------------
news_box
-------------------------------------*/

#news_box ul{
	list-style: none;
	padding: 0;
	margin-bottom: 3rem;
}

#news_box .container{
	max-width: 896px;
}

#news_box ul a,
#news_box ul a:hover,
#news_box ul a:visited{
	color: #000;
}

#news_box ul span{
	padding-right: 1rem;
}

#news_box ul li{
	padding: 0.5em 0;
	border-bottom: #b2b2b2 solid 1px;
}

#news_box nav ul li{
	border: none;
}


#news_detail h3{
	font-weight: bold;
	margin-bottom: 2em;
}
#news_detail h3 .date{
	font-size: 1.2rem;
}

/*----------------------------------
contact_box
-----------------------------------*/
#contact_box{
	background: #b8dff7;
	padding: 5em 0;
	margin-bottom: 0;
}

#contact_box section{
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	background: #000;
	color: #fff;
	text-align: center;
	padding: 2.5em 0;
}

#contact_box section .tel_box{
	float: left;
	width: calc(100% / 2);
}

#contact_box section .tel_box p{
	margin: 0;
	font-weight: bold;
}
#contact_box section .tel_box p.tel{
	font-size:4rem;
	padding-bottom: 0;
}
#contact_box section .text_p{
	font-size: 16px;
	line-height: 2.5em;
}
#contact_box section .btn_box{
	float: right;
	width: calc(100% / 2);
}
#contact_box section .btn_p {
    margin: 1em 0;
}
#contact_box section .btn_p a{
	border-color: #fff;
	color: #fff;
	zoom:1.2;
}

#contact_box section .btn_p a:hover{
	background-color: #fff;
	color: #000;
}

@media (max-width: 767px){
	#contact_box section .tel_box,
	#contact_box section .btn_box{
		float: none;
		width: 100%;
	}

	#contact_box section .tel_box p{
		padding-bottom: 0.5em !important;
	}
}




/*------------------------------------
Slider
------------------------------------*/
.swiper-container {
  position: relative; 
}
/*
.swiper-container:before {
  content: "";
  display: block;
  padding-top: 50%;
}*/

.swiper-wrapper {
  position: absolute; 
  top: 0;
  left: 0;
}

.swiper-wrapper img {
    width: 100%;
    height: auto;
}

.swiper-pagination-bullet-active{
	background: #00a2ed !important;
}
.swiper-button-next{
	background: url("../../images/next.png") center no-repeat !important;
	background-size: cover !important;
}
.swiper-button-prev{
	background: url("../../images/prev.png") center no-repeat !important;
	background-size: cover !important;
}

@media (max-width: 991px){
	.header_swiper{
		padding-top: 70px;
	}
}



/* pagenation
----------------------------------*/
.pagination{
	padding-top: 2em;
}
.pagination-lg>li>a, .pagination-lg>li>span{
	color: #000;
	border-color:#000;
}

.pagination-lg a.page-link{
	box-shadow: none;
}
.pagination-lg>li>a:hover{
	background: #000;
	color: #fff;
	border-color:#000;
}








/*------------------------------------
container
------------------------------------*/
#container {
    position: relative;
    z-index: 10;
}

#container.content {
   /* background: #fbfbfb;*/
	padding-top: 0;
}

#container .container{
	padding: 10em 1rem;
}






.container section{
    padding-bottom: 5rem;
}

.container section .text_p{	
	line-height: 1.5rem;
	font-size: 0.8rem;
}
.container section .text_p span{
	font-weight: bold;
	color: #00a2ed;
	font-size: 1.2rem;
}


.container section.content{
	background: #f8f9fa;
	border: #d6d6d6 solid 1px;
	padding: 1em 1em 3em 1rem;
	margin-bottom: 3rem;
}

.container section.content article{
	max-width: 800px;
	margin: 0 auto;
	padding: 1em 0;
}


.container .small_box{
	font-size: 0.8rem;
	line-height: 1.5rem;
}




@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */
	#container.content .container{
		padding-top: 0;
	}
}



/*-----------------------------------
main_img_content
----------------------------------*/
#main_img_content{
	height: 40vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}



/*------------------------------------
stocklist_detail_box
---------------------------------------*/
.stocklist_detail_box{
	/*padding-bottom: 200px;*/
}
.stocklist_detail_box .row{
	margin: 0;
}
.stocklist_detail_box .box{
	padding: 0;
}

.stocklist_detail_box .row p{
	margin: 0;
}

.stocklist_detail_box .row img{
	width: 100%;
	object-fit:cover;
}

.stocklist_detail_box .thum1 img{
	height: 40vw;	
}

.stocklist_detail_box .thum2 img,
.stocklist_detail_box .thum3 img{
	height: 20vw;
}
.stocklist_detail_box .thum4 img,
.stocklist_detail_box .thum5 img,
.stocklist_detail_box .thum6 img,
.stocklist_detail_box .thum7 img{
	height: 15vw;
}

.stocklist_detail_box .section_h3 {
	font-size: 2.5rem;
}
.stocklist_detail_box .section_h3 em{
	font-size: 1.2rem;
	font-style: normal;
}

.stocklist_detail_box .price{
	font-size: 2rem;
	font-weight: bold;
}

@media (max-width: 767px){
	.stocklist_detail_box .row img{
		height: 50vw;
	}
}



/*------------------------------------
detail_table
-------------------------------------*/

.detail_table{
	padding-bottom: 5rem;
}
.detail_table table{
	width: 100%;
}

.detail_table table tr th{
	width: 30%;
}
.detail_table table tr{
	border-bottom: #000 solid 1px;
}
.stocklist_detail_box .stocklist_icon{
	padding-bottom: 5rem;
}

.stocklist_detail_box .stocklist_icon ul {
	margin: 0;
	padding: 0;
}
.stocklist_detail_box .stocklist_icon ul li {
    float: left;
    width: calc(100% / 7);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
	list-style: none;
	padding: 0.5em;
}
.stocklist_detail_box .stocklist_icon ul li p {
    display: table;
    width: 100%;
	margin: 0;
}

.stocklist_detail_box .stocklist_icon ul li p span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 50px;
}

.stocklist_detail_box .stocklist_icon ul li.on p{
    background-color: #b8dff7;
    color: #000;
}
.stocklist_detail_box .stocklist_icon ul li.off p {
    background-color: #ccc;
    color: #fff;
}
@media (max-width: 991px){
	.stocklist_detail_box .stocklist_icon ul li {
		width: calc(100% / 2);
	}
}


.stocklist_detail_box .text_box img{
	max-width: 100%;
}



/* contact_btn_box
-----------------------------------*/


.stocklist_detail_box .contact_btn_box{
	margin: 0 auto;
	text-align: center;
	width: 100%;
	margin-bottom: 5rem;
}

.stocklist_detail_box .contact_btn_box .section_h4{
	border-top:#000 solid 1px;
	border-bottom:#000 solid 1px;
	padding: 1em 0;
}

.stocklist_detail_box .contact_btn_box p{
	padding: 1em;
	margin: 0;
}
.stocklist_detail_box .contact_btn_box p a{
	width: 100%;
	text-align: center;
	padding: 1em 0;
	font-size: 2.5rem;
}

.stocklist_detail_box .contact_btn_box p.tel{
	font-size: 2rem;
	font-weight: bold;
}

.stocklist_detail_box .contact_btn_box p.tel span{
	font-size: 4rem;
}

.stocklist_detail_box .contact_btn_box p.mail a{
	background: #de2828;
	color: #fff;
	border: none;
	font-size:23px;
}

.stocklist_detail_box .contact_btn_box p.mail a:hover{
	background: #000;
	color: #de2828;
}

.stocklist_detail_box .contact_btn_box p.line a{
	background: #06c152;
	color: #fff;
	border: none;
	font-size:23px;
}

.stocklist_detail_box .contact_btn_box p.line a:hover{
	background: #000;
	color: #06c152;
}



.staff_list .name_p{
	margin-bottom: 2em;
	text-align: center;
}
.carcen {
	width:230px;
}
@media (max-width: 991px){
	.stocklist_detail_box .contact_btn_box p.tel span{
		font-size: 3.8rem;
		line-height: 1em;
	}
	
	.staff_list div:nth-child(odd){
		padding-right: calc(15px / 2);
	}
	.staff_list div:nth-child(even){
		padding-left: calc(15px / 2);
	}

.carcen {
	width:fit-content;
}
.carcen img {
    height: 130px !important;
　　padding:10px;

}
}

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

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


#flow_box section{
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	background: #b8dff7;
	text-align: center;
	padding: 2.5em 0;
}
#flow_box section .tel_box p{
	margin: 0;
	font-weight: bold;
}
#flow_box section .tel_box p.tel{
	font-size:4rem;
	padding-bottom: 0;
}
#flow_box section .text_p{
	font-size: 16px;
	line-height: 2.5em;
}
#flow_box section .btn_box{
	margin: 0 auto;
}


@media (max-width: 767px){
	#flow_box section .tel_box,
	#flow_box section .btn_box{
		float: none;
		width: 100%;
	}

	#flow_box section .tel_box p{
		padding-bottom: 0.5em !important;
	}
}






/* hr
-------------------------------------*/


hr {
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #e8e8e8 0, #e8e8e8 1px, transparent 0, transparent 50%), repeating-linear-gradient(135deg, #e8e8e8 0, #e8e8e8 1px, transparent 0, transparent 50%);
	background-size: 8px 8px;
	margin-bottom: 5rem;
}


/* h
---------------------------------------*/

#container h3{
    word-wrap:break-word;
}


.section_h2{
	font-weight: bold;
	font-size: 1rem;
	text-align: center;
	width: 100%;
	line-height: 2.5rem;
	margin-bottom: 2em;
}

.section_h2 em{
	font-family: 'Roboto', sans-serif;
	font-size: 3rem;
	font-style: normal;
}

.section_h2 span{
	font-size: 1.4rem;
}


.section_h3 {
	font-weight: bold;
	font-size: 1.8rem;
	padding-bottom: 0.5em;
}




.section_h4{
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1em;
}

#container h4 .small{
    font-weight: bold;
    color: #252525;
    font-style: normal;
}


#container h4.cp_h1title{
	position: relative;
	overflow: hidden;
	padding: .3rem;
}
#container h4.cp_h1title::before,
#container h4.cp_h1title::after{
	content: "";
	position: absolute;
	bottom: 0;
}
#container h4.cp_h1title:before{
	border-bottom: 4px solid #2ea7e0;
	width: 100%;
}
#container h4.cp_h1title:after{
	border-bottom: 4px solid #a2dcf7;
	width: 100%;
}


.cp_h1title {
	max-width: 800px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	padding: 0 17%;
	margin-top: 3em;
	margin-bottom: 3em;
	color:#000;
	font-size: 1.5em;
	font-weight: bold;
}
.cp_h1title:before, .cp_h1title:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 15%;
	height: 3px;
	border-top: 3px double #000;
}
.cp_h1title:before {
	left:0;
}
.cp_h1title:after {
	right: 0;
}




@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */
    .section_h2{
        font-size: 1.5rem;
		padding: 0.5rem;
		margin-bottom: 1em;
    }
}


.container section.info {
	font-size: 0.8rem;
}

.container section.info h3{
	font-size: 1.2rem;
	font-weight: 600;
	border-top: #000 solid 1px;
	border-bottom: #000 solid 1px;
	padding: 0.5rem;
}

.container section.info dl{
	line-height: 1.2rem;
}
.container section.info dl dt{
	font-weight: normal;
}



.container section.info h4{
	font-size: 1rem;
	font-weight: bold;
}

.container section.info li{
	line-height: 1.5rem;
	list-style-type: circle;
}



/* check_list
------------------------------------*/
.check_list{
	margin: 0;
	padding: 0;
	padding: 1em;
}
.check_list li{
	list-style: none;
	line-height: 1.5em;
	margin-bottom: 1em;
	font-size: 1.4rem;
	/*font-weight: bold;*/
}


/* step_list
----------------------------------*/
.step_list {
	width: 100%;
}
.step_list .inner{
	float: left;
	background: #fff;
	border: #000 solid 1px;
	/*width: calc((100% - 40px ) / 4);*/
	border-radius: 10px;
	padding: 1em;
	width: 100%;
	height: auto;
}

.step_list dt{
	line-height: 1.5em;
	text-align: center;
}
.step_list dt span{
	font-size: 1.2rem;
}

.step_list div dd{
	font-size: 1.4rem;
	line-height: 2em;
}
.step_list .box{
	margin-bottom: 1em;
}
@media (max-width: 991px){
	.step_list div{	
		/*width: calc((100% - 40px ) / 2);*/
	}
}

@media (max-width: 766px){
	
}

/* link
-----------------------------------*/
.link{
	position: relative;
	top: -200px;
	display: block;
}



/* aria_table
----------------------------------*/
.container section.content table.aria_table {
	width: 100%;
}
.container section.content table.aria_table thead th{
	background: #000;
	color: #fff;
	text-align: center;
}

.container section.content table.aria_table td{
	font-size: 0.8rem;
	text-align: center;
}

.container section.content table.aria_table tr:nth-child(odd){
	background: #ccc;
}
.container section.content table.aria_table tr:nth-child(even){
	background: #e8e7e7;
}




/* cp_table
-----------------------------------*/
.cp_table *, .cp_table *:before, .cp_table *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_table {
	max-width: 896px;
	margin: 0 auto;
	border-collapse: collapse;
	border: none;
	
}
.cp_table p{
	margin: 0;
}
.cp_table th, .cp_table  td{
	padding: 0.5em 1em 0.5em 2em !important;
	border-collapse: collapse;
	border: #000 solid 1px !important;
}
.cp_table  td{
	background: #fff;
}
.cp_table th {
	width: 20%;
	text-align: left;
	vertical-align: middle !important;
	background: #000;
	color: #fff;
	font-weight: normal;
}
@media only screen and (max-width:480px) {
	.cp_table {
		margin: 0 auto;
	}
	.cp_table th, .cp_table td {
		width: 100%;
		display: block;
		border-top: none;
	}
	.cp_table tr:first-child th {
		border-top: 1px solid #dddddd;
	}
}


.cp_table th, .cp_table  td table td{
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767px){

}






/* contact
-----------------------------------*/

.cp_form .cp_group {
	position: relative;
	width: 100%;
	margin: 40px auto;
	/*box-shadow:0px 0px 3px 2px #ededed;*/
}

.cp_form .cp_group > div, .cp_group > .title {
	margin: 8px;
}
.cp_form .cp_group .column {float: left;}
.cp_form .cp_group .column1 {width: 100%;}
.cp_form .cp_group .column2 {width: 50%;}
.cp_form .cp_group .column3 {width: 33%;}
.cp_form .cp_group .column4 {width: 25%;}
.cp_form .cp_group .column5 {width: 20%;}
.cp_form .cp_group .large {width: 100%;}
.cp_form .cp_group .medium {width: 50%;}
.cp_form .cp_group .small {width: 25%;}
.cp_form .cp_group textarea.large {
	width: 100%;
	height: 20rem;
}
.cp_form .cp_group textarea.medium {
	width: 100%;
	height: 10rem;
}
.cp_form .cp_group textarea.small {
	width: 100%;
	height: 200px;
}
.cp_form .clearfix {
	*zoom: 1;
}
.cp_form .clearfix:before, .cp_form .clearfix:after {
	display: table;
	line-height: 0;
	content: '';
}
.cp_form .cp_group {
	font-size: 1em;
	line-height: 1.231;
	/*border: 2px solid #efc164;
	border-radius: 6px;*/
}
.cp_form .cp_group label.title {
	font-size: 1rem;
	font-weight: bold;
	width: auto;
    width: 100%;
}

.cp_form .cp_group label.title span{
    font-size: 0.7rem;
    padding-left: 1rem;
    color: #d25f3b;
    
}

.cp_form .cp_group input[type=button] {
	font-size: 1rem;
	color: #666666;
	outline: none;
}
.cp_form .cp_group input[type=submit] ,
.cp_form .cp_group input[type=button] {
	/*font-size: 1.2rem;
	color: #666666;
	outline: none;
    color: #fff;*/
}
.cp_form .cp_group > div {
	position: relative;
	margin-right: 25px;
	margin-left: 25px;
}
.cp_form .cp_group h2 {
	font-size: 1.7rem;
	margin: 0.2em 0;
	color: #ffffff;
}
.cp_form .cp_group h3.title {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.cp_form .cp_group label {
	display: block;
	clear: both;
	margin-bottom: 3px;
}
.cp_form .cp_group div, .cp_form .cp_group span,
.cp_form .cp_group label, .cp_form .cp_group input,
.cp_form .cp_group textarea, .cp_form .cp_group select,
.cp_form .cp_group button, .cp_form .cp_group ul,
.cp_form .cp_group li, .cp_form .cp_group a {
	font-family: inherit;
	color: inherit;
}
/* submit + title */
.cp_form .cp_group div.submit,
.cp_form .cp_group div.title {
	/*margin: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;*/
}
.cp_form .cp_group div.submit {
/*	text-align: right;
	vertical-align: middle;
	border-top: 2px solid #efc164;
	border-radius: 0 0 5px 5px;*/
}
.cp_form .cp_group div.title {
	/*background-color: #efc164;*/
}
.cp_form .cp_group div.title p{
	/*margin-left: 27px;*/
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
}
/* element-submit + element-text */
.cp_form .cp_group > .submit,
.cp_form .cp_group > .title {
	/*background-color: #efc164;*/
}
.cp_form .cp_group > .submit {
	/*background-color: #efc164;*/
}
/* Button & submit*/
.cp_form .cp_group input[type=button],
.cp_form .cp_group input[type=submit] {
	/*display: block;
	margin: 0 auto;
	padding: 0.5em 2rem;
	cursor: pointer;
	-webkit-transition: border-color 0.6s;
	transition: border-color 0.6s;
	text-align: left;
	vertical-align: middle;
	color: #666666;
	border: 2px solid #bdc3c7;
	border-radius: 6px;
	background: #ffffff;
	-webkit-appearance: none;
	appearance: normal;
	transition: background-color 0.2s, border-radius 0.2s;*/
}
.cp_form .cp_group input[type=button][disabled] {
	cursor: default;
	opacity: 0.65;
}
.cp_form .cp_group input[type=submit] {
	/*right: 20px;
	margin-right: 27px;
	padding: 7px 15px;
	-webkit-transition: background-color 0.25s;
	transition: background-color 0.25s;
	text-align: center;
	opacity: 1;
	border: none;
	color: #fff;*/
}
.cp_form .cp_group input[type=submit]:hover {
	/*text-decoration: none;*/
}
/* File input */
.cp_form .cp_group .cp_file label {
	position: relative;
}
.cp_form .cp_group .cp_file .title {
	position: static;
}
.cp_form .cp_group .cp_file .button {
	font-size: 1rem;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	float: none;
	padding: 1.8% 1.2em 0 1.2rem;
	cursor: pointer;
	-webkit-transition: background-color 0.25s;
	transition: background-color 0.25s;
	color: #ffffff;
	border-radius: 0 6px 6px 0;
}
.cp_form .cp_group .cp_file .file_text {
	overflow: hidden;
	-webkit-transition: border-color 0.25s;
	transition: border-color 0.25s;
}
.cp_form .cp_group .cp_file .file_input {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
/* Radio & checkbox */
.cp_form .cp_group div.cp_ipcheck,
.cp_form .cp_group div.cp_ipradio {
	overflow: hidden;
}
.cp_form .cp_group input[type=checkbox],
.cp_form .cp_group input[type=radio] {
	/*font-size: 1rem;
	position: absolute;
	z-index: 1;
	float: left;
	width: 1rem;
	height: 1rem;
	margin: 0;
	cursor: pointer;
	opacity: 0.01;*/
}
.cp_form .cp_group input[type=radio] + span,
.cp_form .cp_group input[type=checkbox] + span {
	height: 19px;
	margin-right: -19px;
	padding-top: 0;
	z-index: 0;
	position: relative;
	left: 0;
	top: 0;
	vertical-align: top;
	font-size: 1rem;
	line-height: 0.8;
	cursor: pointer;
}
.cp_form .cp_group input[type=radio] + span:before,
.cp_form .cp_group input[type=checkbox] + span:before {
	font-family: 'Font Awesome 5 Free';
	font-size: 1rem;
	line-height: 1;
	position: relative;
	display: inline-block;
	width: 1rem;
	margin: 0 0.2rem;
	vertical-align: top;
}
/* checkbox */
.cp_form .cp_group input[type=checkbox] + span:before {
	content: '\f00c';
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}
.cp_form .cp_group input[type=checkbox]:hover + span:before {
	content: '\f00c';
}
.cp_form .cp_group input[type=checkbox]:checked + span:before {
	content: '\f00c';
}
/* radio */
.cp_form .cp_group input[type=radio] + span:before {
	content: '\f00c';
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}
.cp_form .cp_group input[type=radio]:hover + span:before {
	content: '\f00c';
}
.cp_form .cp_group input[type=radio]:checked + span:before {
	content: '\f00c';
}
.cp_form .cp_group input[type=text],
.cp_form .cp_group input[type=tel],
.cp_form .cp_group input[type=password],
.cp_form .cp_group input[type=email],
.cp_form .cp_group input[type=url],
.cp_form .cp_group input[type=date],
.cp_form .cp_group input[type=number],
.cp_form .cp_group textarea,
.cp_form .cp_group .cp_file .file_text,
.cp_form .cp_group select {
	box-sizing: border-box;
	padding: 6px 10px;
	-webkit-transition: border-color 0.6s;
	transition: border-color 0.6s;
	border-width: 1px;
	border-style: solid;
	border-color: #bdc3c7;
	border-radius: 6px;
	outline: none;
	-webkit-appearance: none;
	appearance: normal;
}
.cp_form .cp_group select::-ms-expand {
	display: none;
}
.cp_form .cp_group input[type=text],
.cp_form .cp_group .cp_file .file_text,
.cp_form .cp_group textarea,
.cp_form .cp_group select {
	width: 100%;
	padding: 1em;
	font-size: 1.4rem;
}


.cp_form .cp_group textarea {
	height: auto;
}
.cp_form .cp_group select {
	width: 100%;
	cursor: pointer;
	text-align: left;
}
/* type number */
.cp_form .cp_group input[type=number]::-webkit-inner-spin-button,
.cp_form .cp_group input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
@media all and (max-width: 991px) {
/* 991pxまでの幅の場合に適応される */
.cp_form .cp_group .cp_ipradio .column,
.cp_form .cp_group .cp_ipcheck .column {
	display: block;
	/*width: 100%;*/
	margin-right: 0;
}
}
/* .cp_group color scheme begin */
.cp_form .cp_group input[type=button]:focus,
.cp_form .cp_group input[type=button]:active,
.cp_form .cp_group input[type=button][disabled] {
	border-color: #e95d12;
}
.cp_form .cp_group input[type=submit],
.cp_form .cp_group input[type=button]{
	/*background-color: #e95d12;
	border-radius: 10px;
	border: #fff double 6px;
    border: none;
    line-height:0;
    padding-left:2rem;
    padding-right: 2rem;*/

}
.cp_form .cp_group input[type=submit]:hover,
.cp_form .cp_group input[type=button]:hover{
	/*background-color: #dc4e01;
	border-radius: 20px;
    color: #38aeec;*/
}
.cp_form .cp_group input[type=submit]:active,
.cp_form .cp_group input[type=button]:active{
	/*background-color: #e95d12;*/

}
.cp_form .cp_group .submit a{
    padding: 0;
}


.cp_form .cp_group .submit .btn_p{
    width: 100%;
}
/* File input */
.cp_form .cp_group .cp_file .button {
	background-color: #bdc3c7;
}
.cp_form .cp_group .cp_file .file_text {
	border-color: #bdc3c7;
}
.cp_form .cp_group .cp_file label:hover .button {
	background-color: #da3c3c;
}
.cp_form .cp_group .cp_file label:active .button {
	background-color: #b02f2f;
}
.cp_form .cp_group .cp_file label:hover .file_text {
	border-color: #da3c3c;
}
.cp_form .cp_group .cp_file label:active .file_text {
	border-color: #b02f2f;
}
/* Radio & checkbox */
.cp_form .cp_group input[type=radio]+span:before,
.cp_form .cp_group input[type=checkbox] + span:before {
	color: #bdc3c7;
}
/* checkbox */
.cp_form .cp_group input[type=checkbox]:checked + span:before {

	color: #da3c3c;
}
/* radio */
.cp_form .cp_group input[type=radio]:checked + span:before {
	color: #da3c3c;
}
.cp_form .cp_group input[type=text]:focus,
.cp_form .cp_group input[type=tel]:focus,
.cp_form .cp_group input[type=password]:focus,
.cp_form .cp_group input[type=email]:focus,
.cp_form .cp_group input[type=url]:focus,
.cp_form .cp_group input[type=date]:focus,
.cp_form .cp_group input[type=number]:focus,
.cp_form .cp_group textarea:focus,
.cp_form .cp_group .cp_file .file_text:active,
.cp_form .cp_group  select:focus {
	border-color: #da3c3c;
}
/*select*/
.cp_form .cp_group .cp_select span {
	position: relative;
}
.cp_form .cp_group .cp_select i::before {
	position: absolute;
	top: 0.4rem;
	right: 0.9rem;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_form .cp_group select:focus + i::before {
	border-top: 6px solid #da3c3c;
}


.cp_form p{
    padding-bottom: 1rem;    
}

@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */
	.cp_form .cp_group {
		width: 80%;
	}
}






/* ol list
-----------------------------------*/
ol.cp_clist {
	counter-reset:cp_clist; /*数字をリセット*/
	list-style-type: none;
	padding:0.5rem;
	margin-bottom: 5rem;
}
ol.cp_clist li {
	position: relative;
	padding-left: 30px;
	line-height: 1.5rem;
	padding: 0.5em 0.5em 0.5em 36px;
	margin-top: 1.5rem;
}
ol.cp_clist li::before {
	position: absolute;
	display:inline-block;
	top: 50%;
	left: 0;
	/* カウントさせる */
	counter-increment: cp_clist;
	content: counter(cp_clist);
	/*装飾*/
	padding: 0 0.2em 0 0.2rem;
	background: #a2d2ef;
	color: #fff;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
	transform: translateY(-50%);
}
ol.cp_clist li::after {
	position: absolute;
	content: '';
	display: block;
	top: 50%;
	left: 18px;
	height: 0;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #a2d2ef;
	transform: translateY(-50%);
}






/* cp_qa
------------------------------------*/


.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'Font Awesome 5 Free', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1em 0;
	color: #ffffff;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	line-height: 1.6rem;
	position: relative;
	display: block;
	margin: 0 0.5em 0.5em 2rem;
	padding: 1em 0 2em 0;
	cursor: pointer;
	border-radius: 0.3rem;
	background: #fff;
    color: #38aeec;
    border: #38aeec solid 1px;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa .cp_actab label span {
	display: block;
	padding: 0 2em 1em 2rem;
	border-bottom: 1px dotted #38aeec;
}
/* --?アイコン */
.cp_qa .cp_actab label::before {
	font-size: 2rem;
	position: absolute;
	z-index: 99;
	top: 0.5rem;
	left: -1rem;
	padding: 0 0.5rem;
	content: '\f128';
	border: 3px solid #38aeec;
	border-radius: 50%;
	background: #fff;
    color: #38aeec;
    border: #38aeec solid 1px;
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
}
/* --▼アイコン */
.cp_qa .cp_actab label::after {
	font-size: 1rem;
	font-weight: normal;
	line-height: 1rem;
	position: absolute;
	right: 0;
	bottom: 1rem;
	content: '▼';
	display: inline-block;
	width: 100%;
	height: 1rem;
	padding: 0.5rem;
	text-align: right;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	margin: 0 0 0.5em 0;
	padding: 0 0 0 5rem;
	-webkit-transition: max-height 1.5s ease-out;
	        transition: max-height 1.5s ease-out;
	color: #ffffff;
}
/* --!アイコン */
.cp_qa .cp_actab .cp_actab-content::before {
	font-size: 1.5rem;
	position: absolute;
	z-index: 99;
	top: calc(50% - 0.9em);
	left: 2.5rem;
	padding: 0 0.6rem;
	content: '\f12a';
    font-weight: 900;
	color: #ffffff;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: #38aeec;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 0.5em 0.5em 0.5em 0;
	padding: 1em 1em 1em 3rem;
	border-radius: 0.3rem;
	background: #38aeec;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40rem;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	bottom: 0rem;
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}


.cp_qa .cp_actab-content a{
    background: #fff;
    padding: 0.5rem;
    font-size: 0.8rem;
    margin: 0 0.5rem;
    border-radius: 5px;
}







/*-------------------------------
maintenance
---------------------------------*/

#container .maintenance_box{
    margin: 2em 0 5em 0;
}
#container .maintenance_box .inner{
    background: #26b597;
    border-radius: 0 20px;
    padding: 1rem;
    color: #fff;
    margin: 1rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
    height: 20rem;
}

@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */
    #container .maintenance_box .inner{
        height: auto;
    }
}


#container .maintenance_box .inner h3{
    display: table;
    font-size: 1.2rem;
    width: calc(100% + 3em);
    font-weight: bold;
    margin: 0;
    margin-top: -80px;
    margin-left: -2rem;
    color: #966135;

}

#container .maintenance_box .inner span{
    background: #966135;
    color: #fff;
    height: 80px;
    width: 80px;
    border-radius: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

#container .maintenance_box .inner h3 p{
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: -0.1rem;
}

#container .maintenance_box .inner .text_box{
    padding-top: 0.5rem;
}

#container .maintenance_box .inner .text_box strong{
    border-bottom: 2px dotted #fff;
    display: block;
    text-align: center;
    font-size: 1.1rem;
}



/*-----------------------------------
electrical
---------------------------------*/

.mini_gallery a{
    position: relative;
    content: "";
    display: block;
    padding-top: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mini_gallery a img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
}
/*----------------------------------
formTable
----------------------------------*/

.formTable,
.formTable tbody,
.formTable tr,
.formTable th,
.formTable td{
    width: 100%;
    display: block;
}

.formTable td input{
    padding: 1em;
}

.formTable tr{
    padding-bottom: 1em;
}

.formTable span{
    font-size: 0.8rem;
    color: #000 !important;
    font-weight: normal;
}
.formTable .red {
    font-size: 0.8rem;
    color: red !important;
    font-weight: normal;	
}
/*----------------------------------
js-animation
------------------------------------*/

.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}



/*------------------------------------
footer
------------------------------------*/
footer{
	text-align: center;
	padding:1em;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
	
	zoom:0.5;
}


.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}



address{
	text-align: center;
	background: #000;
	color: #fff;
	margin: 0;
	font-size: 1rem;
	padding: 0.5em 0;
}

/*-----pageup----------*/
#pageup {
    letter-spacing: 0;
    display: block;
    position: fixed;
	z-index: 99;
    bottom: 1rem;
    right: 50px;
}

#pageup a {
    position: relative;
    display: block;
    font-size: 10px;
    text-align: center;
    font-weight: normal;
    line-height: 112px;
    width: 80px;
    height: 80px;

    background: #000;
	border: #fff solid 1px;
    
    color: #fff;
	cursor:pointer;
	
	text-decoration:none;
	letter-spacing:0.2rem;
	padding: 0;
	
	transition: 0.5s;
}

#pageup a:before{
	content:"";
	display: block;
	width:25px;
	height:25px;
	position: absolute;
	left:27px;
	top:26px;
	margin-top:-6px;

	border-top:6px solid #fff;
	border-right:6px solid #fff;
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}

#pageup a:hover , #pageup a:visited{
	text-decoration: none;
}


@media all and (min-width: 992px) {
/* 992px以上の幅の場合に適応される */


	#pageup a:hover {
		opacity: 0.5;
	}
	#pageup a:hover:before{
		border-color:#fff;
	}

}
@media all and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */
	
	.insta_btn {
		zoom:1;
	}
    #pageup{
        bottom:1rem;
		right:1rem;
    }
}


/*-----------------------
loading
--------------------------*/
#loading{
    background: #fff;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    
    display: none;
}