@charset "utf-8";

@import url("fontawesome-4.4.0.min.css");
@import url("framework.css");
@import url("navi.css");



/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1{}
.row2{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}
.row5 a:hover{text-decoration:underline;}


/* Rows Colour */
.row0{color:#FFFFFF; background-color:rgba(215,215,215,.8); /* #D7D7D7 */}
.row1{/* background-color:#FFFFFF; */ border-color:#F2F2F2;}
.row2{/* background-color: #FFFFFF; */ border-bottom: solid 3px #039;}
.row3{background-color: #AFDDE9; border-color: #B0E1E8;}
.row4{/* background-color: #fff; */}
.row5{background-color: #E8E8E8;}
.row6{}
.row7{background-color: #fff;}

/* トップページスライド
--------------------------------------------------------------------------------------------------------------- */
.bg-slider {
	width: 100%;
	height: 100%;
	float: right;
	/*background-position:center center; */
	background-size: cover;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	background-color: #FFF;
}



/* Head Wrapper
--------------------------------------------------------------------------------------------------------------- */
.headwrapper{position:relative; padding:0 0 60px 0;}


/* Top Bar
--------------------------------------------------------------------------------------------------------------- */
#topbar{padding:10px 0;}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding:5px 0px 20px 0; /* background: url(../img/header_back.png) no-repeat; background-position: right top;  background-size:200px;  */ margin:0 auto;}
#header #logo{text-transform:none;}
#header .tel{font-size:1.5rem; line-height:1.6; padding: 10px 0 0 0;}

#main_back{padding:10px 0 20px 0;}
#main{margin:170px auto 150px auto; color:#FFF;}
#main02{padding:100px 0 80px 100px; color:#FFF;}


#main_back02{padding:0px 0px 0px 0; background: url(../img/page_backimg.png) no-repeat; background-position: top;  margin:0 auto;}



/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:30px 0;}
#pageintro_sp{padding:0;}



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:20px 2px 30px 2px; display: block;}

.contant_in{padding:60px; background-color:#fff;}

 
/* Content */
.content{}


.title{ font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight:normal; font-size:2.8rem; margin: 0 0 60px 0; border-bottom:solid 1px #CCC;}
.title span{ font-size:1.6rem; color:#999;}

/* Boxes
--------------------------------------------------------------------------------------------------------------- */
#topics_box{width:84%; margin:0 auto 60px auto;}

.box_flow{border: 3px solid #9C0; border-radius:6px; background-color: #fff; margin:0 0 10px 0;}
.box_flow h5{color: #61A505; text-align: center; margin:10px 15px 0px 15px; border-bottom: 1px dashed #9C0 !important;}
.box_flow h5:after{display:none;}
.box_flow .inner{padding: 20px 20px;}

/* よくあるご質問 */
.box_qa {position: relative; margin: 25px 0; padding: 8px; background: #E7F4D2; border-radius: 10px;}

.box_qa .qa_title {position: relative; background: #fff; padding: 10px 5px 10px 40px; color: #454545; border-radius: 10px; font-weight: bold;}
.box_qa .qa_title:before {
    content: "Q";
    display: inline-block;
    position: absolute;
    padding: 0em;
    color: white;/*Q文字色*/
    background: #390;/*Q背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
	font-size: 1.2rem;
    line-height: 35px;
    left: -6px;
    top: 20px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.box_qa .qa_title:after {
    content: "A";
    display: inline-block;
    position: absolute;
    padding: 0em;
    color: white;/*A文字色*/
    background: #9C0;/*A背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
	font-size: 1.2rem;
    line-height: 35px;
    left: -6px;
    bottom: -70px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}

.box_qa p {padding: 15px 20px 10px 40px; margin: 0;}



.service_btn{width: 95%; margin:0 auto 30px auto;}
.service_btn .one_third{margin-left:10px;}

.order_btn01, .order_btn02 {
  position: relative;
  display: block;
  margin: 15px 0;
  padding: 12px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 20px;
  background: #090;
  text-align:center;
}

.order_btn01:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #090;
}

.order_btn01 p{
  margin: 0;
  padding: 0;
}
.order_btn02 {background: #CCC !important;}




dd {margin-left: 0;}

.flow {padding-left: 120px; position: relative;}
.flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}
.flow > li {position: relative;}
.flow > li:not(:last-child) {margin-bottom: 8vh;}
.flow > li .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(107,144,219);
  background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
  background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
  padding: 8px 20px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}
.flow > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #66d5e9;
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.flow > li dl {
  padding-left: 50px;
  position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}
.flow > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #6b90db;
  border-radius: 50%;
  left: -4px;
}
.flow > li dl::after {
  width: 25px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}
.flow > li dl dt {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: rgb(107,144,219);
  margin-bottom: 5px;
}




/* banner_area
--------------------------------------------------------------------------------------------------------------- */
#foot_banner{}
#foot_banner ul {margin: 0; padding:0;}
#foot_banner li {margin: 0 0 8px 0;}



/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{columns: 3;/*段組みの数*/padding:0 15px;/*ギャラリー左右に余白をつける*/}
.gallery li {margin-bottom: 20px;/*各画像下に余白をつける*/}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{width:100%; height:auto; vertical-align: bottom;/*画像の下にできる余白を削除*/}
/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery{
  columns:3;
  } 
}

@media only screen and (max-width: 768px) {
  .gallery{
  columns: 2;
  padding:5px;
  } 
  main ul.gallery  li {
    padding-left: 0em;
    text-indent: 0em;
}
}


/*========= レイアウトのためのCSS ===============*/

ul{ margin:0;padding: 0; list-style: none;}

a{color: #333;}

a:hover,
a:active{text-decoration: none;}

p{margin:0 10px 10px 10px; word-wrap : break-word;}

/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}






/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:25px 0; line-height:2;}

#footer .title{margin:0 0 10px 0; padding:0; text-transform:uppercase;}
#footer ul{margin:0px; padding:0;}
#footer li{padding:0 0 0 10px; list-style:none; padding:0;}
#footer li:last-child{margin:0;}

#footer a{text-decoration:none;}
#footer a:hover{text-decoration:underline;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:30px 0 40px 0; font-size:1rem; line-height:2em;}


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
.faico a, #mainav *, #backtotop, textarea, .btn01, .btn02, .btn03, .btn04, .btn05, .btn11, #shout *, .steps *{transition:all .3s ease-in-out;}







/* Tables
--------------------------------------------------------------------------------------------------------------- */
table{width: 100%; border-collapse: collapse;}
table tr{border-bottom: solid 2px white;}
table tr:last-child{border-bottom: none;}
table th{border: none; position: relative; text-align: left; width: 25%; background-color: #DEEAF5; text-align: center; padding: 20px 0;}
table td{border: none; text-align:left; width: 75%; background-color: #F5F5F5; padding: 20px 20px 20px 20px;}

table.orikaeshi{width:100%; table-layout: auto; border: solid 1px #999;}
table.orikaeshi th{font-size:1.1rem; background-color:#E7F4D2;}
table.orikaeshi th, table.orikaeshi td{border: solid 1px #fff;}
.orikaeshi th{vertical-align:middle; text-align:center;}


.row3 table{table-layout: fixed;}
.row3 td{background-color: #87C9DE; color:#fff; padding:30px 12px; text-align:center;}
.row3 td h4{font-size:1.1rem !important; margin:0 0 10px 0; line-height:1.6; font-weight:bold; color:#fff;}
.row3 td i{font-size:1.3rem;}


table.line th, table.line td{border: solid 1px #999;}


table.table_box01 th, table.table_box01 td{table-layout:auto; border: solid 1px #999; background-color:#FFF; border-collapse: collapse;}
table.table_box02 th, table.table_box02 td{table-layout:auto; border: solid 1px #999; background-color:#FFF; border-collapse: collapse;}



table.table_box01 a.color01, table.table_box02 a.color01{color:#0CF}
ol.list02 li i{color: #F00}


#pageintro #product td{padding:20px 8px;}
#pageintro .category td{padding:8px 0px !important; font-size:0.9rem; line-height:1.2; letter-spacing: -0.05em;}
#pageintro .main_box02 td{padding:8px 6px;}


table.table_fixed{width:100%; table-layout:fixed;}



/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; float:left; margin:0 2px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}

.faico a{display:block; width:30px; height:30px; line-height:30px; font-size:16px;}
.faico a{color:#FFFFFF; background-color:inherit;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:100px; right:20px; width:70px; height:70px; line-height:65px; font-size:40px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.6;}
#backtotop:hover{opacity:1;}

a#backtotop{text-decoration:none;}
a:hover#backtotop{text-decoration:none;}


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color: #333;  background-color:#ECF0F2;}
a{color: #06C; outline:none; text-decoration:underline;}
a:hover{color: #06C; text-decoration:none;}
hr, .borderedbox{border-color:#D7D7D7;}
textarea:focus, *:required:focus{border-color:#684568;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.3); /* #817081 */}





/* botton
--------------------------------------------------------------------------------------------------------------- */
a.btn01{color:#fff; background-color: #069;  border:solid 1px #069; text-decoration:none !important;}
.btn01:hover{color:#069 !important; background-color:#fff; border-color:#069; text-decoration:none !important;}

a.btn06{color:#fff; background-color: #F63;  border:solid 1px #F63; text-decoration:none !important;}
.btn06:hover{color:#F63 !important; background-color:#fff; border-color:#F63; text-decoration:none !important;}

a.btn03{color: #fff; background-color:#9C0; font-size:1.15rem; border: none; text-decoration:none !important;}

a.btn04{color: #FFFFFF; background-color:#9C0;  border:solid 2px #9C0; text-decoration:none !important;}
.btn04:hover{color:#9C0 !important; background-color:#fff; border-color:#9C0; text-decoration:none !important;}


#header #logo a{color:inherit; background-color:inherit;}

#pageintro .main_box02 td a{color:#000;}


/* Content Area */
#backtotop{color:#FFFFFF; background-color: #0CF; /*background-color:#66B3FF;*/}




/* list style
--------------------------------------------------------------------------------------------------------------- */
ol.list01{counter-reset:list; list-style-type:none; padding: 0; z-index: 2;}
ol.list01 li{position:relative; margin: 7px 0 15px 0px; padding:0 0 6px 30px; border-bottom: dashed 1px #999;}
ol.list01 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 26px;
  height: 26px;
  margin: 0 0 0 8px;
  text-align: center;
  color: #fff;
  line-height:28px;
  background: #C00;
  border-radius: 50%;
  top: 40%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ol.list01 li.blue:before{background: #7FB1E0; color:#fff}


ol.list02{ counter-reset:list; list-style-type:none; padding: 0;}
ol.list02 li{position:relative; margin: 7px 0 10px 30px; padding: 0 0 6px 5px; border-bottom: dashed 1px #999;}
ol.list02 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 25px;
  height: 25px;
  background: #FC0;
  text-align: center;
  line-height:25px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ol.list02 li.red:before{background: #F03; color:#fff}


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1000px){
	#topbar, #mainav, .breadcrumbs, .container, .container_blog, #foot_banner, #copyright{max-width:72%;}
	#header, #pageintro, #footer, .centred{max-width:1000px;}
	#main{max-width:85%;}
	.hoc{max-width:1000px;}
}


@media screen and (max-width:950px){
	
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}


	.table, .table .table-cell{display:block; width:100%; height:100%;}


	#pageintro{padding:0 0 20px 0;}
	#pageintro article{max-width:none; width:100%;}
	#pageintro article .heading{font-size:40px;}
	#pageintro article ul li{display:block; margin:0 0 10px 0;}

	#topbar, .breadcrumbs, .container, .container_blog, .centred{max-width:95%;}
	#pageintro, #copyright{max-width:95%;}
	#footer{max-width:92%;}
	

	#topbar{}
	#header{}
	#header .fl_left, header .fl_right{display:inline-block;}

	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	.centred{}


	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
	
}




@media screen and (max-width:750px){
#header{width: 94%; margin: 0px auto; padding:0px 0 5px; text-align:left; /* background: url(../img/header_back.png) no-repeat; background-position: right bottom;  background-size:200px; */}
#header .one_third{margin: 0px;}

.breadcrumbs{width:96%; margin: 0px auto; padding:10px 0 5px; text-align:left;}

#main{width:96%; margin:140px auto 130px auto;}
#main02{padding:50px 0 30px 50px; color:#FFF;}

#news{ width:100%; height:160px; overflow-y:scroll;}
#news td{font-size:0.95rem; padding: 8px;}
	
.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
/* .fl_left, .fl_right{display:block; float:none;} */
	
#header .two_third{margin: 0 0 10px 0;}

#header p{float:left;}
#header .tel{font-size:1.6rem; margin: 0 ;}


.clrbox, .clrbox li{display:block; width:100%;}
.clrbox02, .clrbox02 li{display:block; width:100%;}
#signup form{width:100%;}
	

.container{padding:0 0 30px 0;}
.contant_in{padding:22px;}

	
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:10px; right:10px; width:60px; height:60px; line-height:55px; font-size:40px; text-align:center; opacity:.2;}
	
	
.title01 {padding: 10px 0;}

.service_btn{width: 100%;}
.service_btn .one_half{width: 47%; float:left !important; margin: 0 0 15px 0 !important;}
.service_btn .one_half:last-child{margin:0px 0 15px 10px !important;}	
.order_btn01 {margin: 15px 0;}
.order_btn02 {margin: 0px 0;}

#copyright{padding:25px 0 30px 0; font-size:0.85rem; line-height:2em;}
#copyright .one_half{margin:0;}


.rank .one_third, .rank .one_quarter{display:block; clear:both; margin-bottom:10px; overflow:hidden;}
.rank .one_third .rank_img, .rank .one_quarter .rank_img{float:left; width:35%; margin:0 2% 0 0;}
.rank .one_third .rank_text, .rank .one_quarter .rank_text{float:right; width:63%;}
.box01 .rank .rank_icon, .box02 .rank .rank_icon{width:40px;}

		
/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, table th, table td{width:100%; box-sizing: border-box; border-collapse:collapse;}
table th, table td{display:block; width:100%; box-sizing: border-box; border-collapse:collapse; padding:12px 14px;}
table tr{border-bottom: solid 4px white;}

table.price th, table.price td{display:block; width:100%; border-bottom: solid 1px #999; box-sizing: border-box; border-collapse:collapse;}

table.orikaeshi th{text-align:center;}
table.orikaeshi tr, table.orikaeshi th, table.orikaeshi td{display:block; width:100%;}
table.orikaeshi th, table.orikaeshi td{padding:10px;}

#sns .one_third{width:32% !important; display:block; float:left !important; margin:0 0 5% 1% !important;}


}