@charset "utf-8";

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

@font-face {
  font-family: 'Hannari';
  src: url('../fonts/Hannari.woff') format('woff');
}



/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1{}
.row2{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{color:#fff;}
.row5 a:hover{color:#fff; 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-color:#954747;}
.row3{background-color:#f2f2f3;}
.row4{background-color: #f8b500;}
.row5{ background-color:#954747;}
.row6{}
.row7{background-color: #fff;}



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



/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding:0px 0 0 0; text-align:left; /* background: url(../img/header_back.png) no-repeat; background-position: right top;  background-size:200px;  */}
#header #logo{text-transform:none; padding:30px 0 18px 0;}
#header .tel{font-size:2rem; line-height:1.6}


/* breadcrumbs
--------------------------------------------------------------------------------------------------------------- */
.breadcrumbs{padding:15px 0 0 0;}
.breadcrumbs a{color:#090; text-decoration:none;}
.breadcrumbs a:hover{color:#090; text-decoration:underline;}


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



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:40px 2px 45px 2px; display: block;}
.container_blog{padding:10px 0 0 0;}
 
/* Content */
.content{}


.newsin{padding:20px; border-top:dashed 1px #666;}
.newsin:last-child{border-bottom:dashed 1px #666; border-top:dashed 1px #666;}
.newsin a{color:#007a41}

.workshop01{padding:40px 20px; border-top:solid 1px #CCC;}
.workshop01:last-child{border-bottom:solid 1px #CCC; border-top:solid 1px #CCC;}
.workshop01 img{border-radius: 50%;}


.about_box{padding:30px; border:solid 5px #dcdddd; border-radius: 20px;}
.about_sub{font-size:1.3rem; font-weight:bold; margin:0 0 10px 0; line-height:1.8;}
.about_sub span{color:#F60;}
.about_titile{padding:10px 10px 10px 60px; background-color:#efefef; border-radius:10px; position:relative;}
.about_icon{position: absolute; left:10px; bottom:0;}
.about_box img{border-radius: 20px;}


.entry01{width:60%; margin:0 auto; padding:8px 0; border-radius: 30px; border:solid 2px #333; background-color:#FFF;}


/* 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;}




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



/* title
--------------------------------------------------------------------------------------------------------------- */



/* Sidebar
--------------------------------------------------------------------------------------------------------------- */
#right_contents{font-size:1.1rem;}

#right_contents .button{padding: 0; position: relative; line-height: 1.5; list-style-type: none!important;}
#right_contents .button a{display:block; padding: 10px 0 10px 10px; color: #fff; background-color:#61A505; border-radius:5px; text-decoration:none !important;}
#right_contents .button a:hover{color: #fff; background-color: #9C0; text-decoration:none;}
#right_contents .button a:after {font-family: FontAwesome; content: "\f054"; position: absolute; right : 10px; color: #fff;}


#right_contents ul {padding: 0; position: relative;}

#right_contents ul li{line-height: 1.5; border-top: solid 1px silver; list-style-type: none !important;}
#right_contents ul li a{display:block; padding: 10px 0 10px 10px; color: #61A505; text-decoration:none !important;}
#right_contents ul li a:after {font-family: FontAwesome; content: "\f054"; position: absolute; right : 10px; color: #61A505;}

#right_contents ul li:last-of-type {border-bottom: solid 1px silver;}





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

#footer .title{margin:0 0 10px 0; padding:0; text-transform:uppercase;}
#footer ul{margin:0 0 10px 0; 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%; table-layout: auto; border: solid 1px #999;}
table, th, td{border-collapse:collapse; vertical-align: top;}
table th{font-size:1.1rem; background-color:#E7F4D2;}
th, td{padding:7px 8px; border: solid 3px #fff;}
th{vertical-align:middle; text-align:center;}
td{background-color: #F3FCEB;}

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_info th, table.table_info td{padding:7px 8px;}
table.table_news th, table.table_news td{padding:6px 8px;}


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_style01{table-layout:auto; border-collapse: collapse; border-spacing: 0;width: 100%;}
table.table_style01 tr{border-bottom: solid 1px #CCC;}
table.table_style01 th, table.table_style01 td{border: none !important;}
/* table tr:hover{background-color: #d4f0fd;} */

table.table_style02{table-layout:auto; width: 100%; border-collapse: collapse; border-spacing: 0;}
table.table_style02 th, table.table_style02 td{border: none !important; padding: 10px 10px; text-align:left;}
table.table_style02 tr:nth-child(odd){background-color: #F5F5F5 !important;}


table.table_style03{width: 100%; border-collapse: collapse;}
table.table_style03 tr{border-bottom: solid 2px white;}
table.table_style03 tr:last-child{border-bottom: none;}
table.table_style03 th{border: none !important; position: relative; text-align: left; width: 20%; background-color: #52c2d0; color: white; text-align: center; padding: 10px 0;}
table.table_style03 td{border: none !important; text-align:left; width: 80%; background-color: #eee; padding: 10px 0px 10px 20px;}

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:60px; height:60px; line-height:55px; font-size:30px; 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: #3e3a39; background-color:#fff;}
a{color: #61A505; outline:none; text-decoration:underline;}
a:hover{color: #61A505; 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(129,112,129,.4); /* #817081 */}





/* botton
--------------------------------------------------------------------------------------------------------------- */
a.btn01, a.btn02{color: inherit; background-color:#fff;  border:solid 2px #9C0; text-decoration:none !important;}
.btn01:hover, .btn02:hover{color:#FFFFFF !important; background-color:#9C0; border-color:#9C0; 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: #F60; /*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:880px){
	#topbar, #mainav, .breadcrumbs, .container, .container_blog, #foot_banner, #copyright{max-width:880px;}
	#header, #pageintro, #footer, .centred{max-width:880px;}
}


@media screen and (max-width:879px){
	
	.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, #header, .breadcrumbs, .container, .container_blog, .centred{max-width:92%;}
	#pageintro, #copyright{max-width:94%;}
	#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;}
	
	
	#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 20px 0 0;}
	
	
	.entry01{width:95%; margin:0 auto; padding:8px 0; border-radius: 30px;}
		
	.about_box{padding:20px;}
	
	.container_blog{padding:0;}
	.container{padding:40px 0 45px 0;}
		
	#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;}
	
		
	
	#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.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;}


}