@charset "utf-8";
@import url("fontawesome-4.3.0.min.css");
@import url("framework.css");


/* ------------------------------------
	全体
-------------------------------------*/
html 
{
	 font-size: 62.5%;
	 /*　ベースを10pxにしています　*/ 
}

body 
{
	-webkit-text-size-adjust: 100%;
	background: url("../../images/home_bk.jpg") top center no-repeat;
	background-size:content;	
	background-color:#ffffff;
	 font-size: 1.0rem;
	 line-height : 1.6;
	 color:#000000;
	 font-family: "Noto Serif JP","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	 font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; 
}


h1,h2,h3,h4,p,li, section li
{
	margin:0;	
	padding:0;
  font-family: "Noto Serif JP","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
}

h1, h2, h3
{
	font-weight:400; 	
}

h2 
{	
	font-size:3rem;
	font-weight:500;
}	

h2
{
	font-size: 24px; 
	font-size: 2.4rem;	 
}

p, li, a
{
	font-weight:500;
}
 

h3 
{
	font-size: 22px; 
	font-size: 2.2rem;	 
}

h4
{
	font-size: 16px; 
	font-size: 1.6rem;	 
}

p
{
	 font-size:1.4rem;
	 color : #222222 ;
	/* letter-spacing:1px;
	letter-spacing:0.1rem;*/
	line-height:1.7;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

a
{
	color:#333333;
}

a 
{
	color:#4BA225;
}

a:hover
{
	border-bottom:1px dashed #4BA225;
}

li
{
	font-size:14px;
	font-size:1.4rem;
	color:#333333;
}

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

header, section, footer
{
	margin:0 auto;
}

section
{
	margin-bottom:8rem;
}

hr
{
border-color:#D7D7D7;
}

label span
{
	color:#FF0000;
}

.overlay
{
	color:inherit;
	background-color:rgba(0,0,0,.65);
}

.faico a, 
#mainav *, 
#backtotop, 
.services i, 
#info .services li,  
.overlay
{
	transition:all .3s ease-in-out;
}

/* ------------------------------------
	ヘッダー
------------------------------------- */
.row0 
{
	border-bottom:1px solid #dcdcdc ;
	margin-bottom:20px;
	margin-bottom:2rem;
	background: url(../../images/topbar.jpg) 0 0 repeat-x;	
}

header
{ 
margin:0 auto; 
padding:3rem 0 0 0;
}

header .fl_left{margin:0;}
header .fl_left .inline > li{margin-right:15px;}
header .fl_left .inline > li i{margin:0 5px 0 0; line-height:normal;}
header .fl_right{margin:0 0 15px 0;}
header .faico li{margin:0;}
h1{margin:0 0 8px 0;padding:0;font-size:1em;font-family: "Sawarabi Mincho";}
p.header-class-name{margin:0 0 16px 0;padding:0;color:#000000;font-size:12px;text-align:left;}
header .wf-notosansjapanese { font-family: "Noto Sans Japanese","メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

header .faico a{color:inherit;}
header .faico a:hover{color:#FFFFFF;}


/* ------------------------------------
	ナビゲーション
------------------------------------- */
.row1 
{
	margin-bottom:20px;
	margin-bottom:2rem;
}

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

#mainav ul 
{
	width: 100%;
  display: flex;
  justify-content: space-between;	
}

#mainav li 
{
	 padding:0 0.3rem;
	 background: transparent;
	 font-size:14px;
	 font-size:1.4rem;
	 /*text-align: center;	*/
}

#mainav li:last-child
{
	margin-right:0;	
}

#mainav li a, #mainav li a:link, #mainav li a:active
{
	display:block;
	 padding:0 0 6px 0;
	color:#333333;
	font-size:1.4rem;
	font-weight:500;
}

#mainnav li a:hover
{
border-bottom:3px solid #4BA225;
}

#mainav .drop::after, 
#mainav li li .drop::after
{
	position:absolute; 
	font-family:"FontAwesome"; 
}

#mainav{}
#mainav li{display:inline-block; position:relative; margin:0 18px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li a{display:block; padding:0 0 6px 0;color:#666666;}
#mainav li.active a{color:#ffffff;color:#666666;padding:1px 8px;background-color:#4BA225;background-color:#ffffff;border-bottom:3px solid #4BA225;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
#mainav form{display:none; margin: 0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:1px solid;}
#mainav form select{margin: 0 auto; width:60%; padding:5px; border:1px solid;}
#mainav form select option{margin:5px; padding:0; border:none;}

#mainav select option[selected] 
{
background: #CCC;
}

#mainav select>option:hover
{
        color:#cccccc;
        cursor: pointer;
}


/* ------------------------------------
	メインイメージ
------------------------------------ */
.row2
{
	margin-bottom:8rem;
}

#pageintro
{ 
	margin-bottom:40px;
	margin-bottom:4rem;
	padding:28rem 0 5rem;
}

#pageintro .heading{margin-bottom:10rem;text-shadow:3px 3px 3px #000000;color:#ffffff;}
#pageintro .services{margin:0;padding:0;}
#pageintro .services article{padding-bottom:0;0;padding:3rem;}
#pageintro .services .heading{font-size:16px; text-transform:uppercase;}
#pageintro .services .heading{margin:0;padding:0;font-size:24px;line-height:1.6;}

#pageintro h2{color:#FFFFFF;font-family: 'ヒラギノ明朝 Pro W6','Hiragino Mincho Pro','ＭＳ 明朝','MS Mincho',serif;
font-weight:normal;}
#pageintro .services .heading{color:#FFFFFF;}
#pageintro .services .heading a{color:#FF8D2C;}
#pageintro .services p{color:#ffffff;}
#pageintro .services a i{color:#CCCCCC; border-color:#333333;}
#pageintro .services li:hover a i{color:#FFFFFF; background-color:#4BA225; border-color:#4BA225;}
#pageintro .services .overlay:hover{background-color:rgba(0,0,0,0.8);}
#pageintro .services .overlay{background-color:rgba(0,0,0,0.5);}
#pageintro .services .overlay a:hover{color:#ffffff;}

.slider {
	width: 100%;
	height: 600px;
	background-position:center center;
	background-size: cover;
	/*display: flex;
	align-items: center;
	justify-content: center;*/
}





/* ------------------------------------
	SNS
-------------------------------------*/
.row41 .one_quarter
{
margin-bottom:1rem;
height:7rem;
}

.row41 img
{
 float: left; 
 margin-right: 10px; }
}

.row41 p
{
margin-top:0;
padding:0 0 0 6rem;
line-height:1.6;
font-size:1.2rem;
color:#333333;
}


.row41 a
{
color:#cccccc;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* ------------------------------------
	フッター
------------------------------------- */
.row5
{
background-color:#f4f4f4;
border-top:1px solid #f0f0f0;
}

footer{padding:50px 0;}

footer h3
{
margin:0; 
padding:0 0 0.8rem 0; 
color:#666666;
font-size:1.6rem;
font-weight:400;
border-bottom:8px solid #cccccc; 
}

footer ul, #footer ul li 
{
margin:0;
padding:0;
}

footer .linklist li
{
margin-bottom:0.5rem;
padding-bottom:0.5rem;
border-bottom:1px dashed #cccccc;
}

footer .linklist li,
footer .linklist li a,
footer .linklist2,
footer .linklist2 a
{
font-size:1.4rem;
}

footer .linklist2
{
margin:0;
padding:0;
border-bottom:1px dashed #cccccc;
}

footer .linklist2 li
{
padding-bottom:0.4rem;
line-height:1.4;
}

footer .linklist2:last-child
{ 
	/*margin-top:-10px;*/
}


/* ------------------------------------
	COPYRIGHT
-------------------------------------*/
.row6
{
padding:1rem 0;
-ms-box-shadow:0px -8px 8px -1px #666 inset;
-moz-box-shadow:0px -8px 8px -1px #666 inset;
-webkit-box-shadow:0px -8px 8px -1px #666 inset;
-o-box-shadow:0px -8px 8px -1px #666 inset;
box-shadow:0px -8px 8px -1px #666 inset;
color:#ffffff; 
background-color:#888888;
}

.row6 footer
{
	margin:0 auto;
	text-align:center;
}

footer small
{
	color:#cccccc;
	font-size:1.2rem;
}


/* -------------------------------------
　　和のイメージ
------------------------------------- */
.image
{
	margin:0 auto;
	padding:0;
}

.image p img
{
	padding:5rem 0;
}

.row7, .row7 a
{
background-color:#4BA225;
}

.row8, .row8 a
{
	padding:1rem;
	color:#666666; 
	background-color:#4BA225;
}


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

/* -------------------------------------
	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 6px 0 0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block;height:20px;font-size:16px; text-align:center;}

/*-------------------------------
            Clear Fix
--------------------------------*/
.clearfix:after
{
  content: "";
  display: block;
  clear: both;
}



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


/* Smartphone + Tablet
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:180px) and (max-width:750px) {
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.last{margin-bottom:0;}

	header{text-align:center;}
	header .inline{margin-bottom:15px;}
	header .faico li{float:none;}

	#header #logo{text-align:center; margin-bottom:15px;}

	#pageintro{padding:140px 0 50px;}
	main img
	{
		width:100%;
	}

	/*#info{padding-bottom:50px;}*/
	
	#info,
	#class,
	.row41 section
	{
		margin-bottom:4rem;
	}
	
	#footer {padding-bottom:20px;}
    #sign {padding:2rem 0;}
	
	.row3 .profileicon {color:#4BA225;}
}

@media screen and (min-width:180px) and (max-width:900px) {
	header, main, section, aside, footer, #header, #pageintro, #breadcrumb, #info, #class, .image 
	{
		max-width:90%;
	}

	#mainav ul{display:none;}
	#mainav form{display:block;}

	main img
	{
		width:100%;
	}
	
	#copyright p:first-of-type{margin-bottom:10px;}
}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px) {
	header, nav, main, section, aside, footer, #mainav #header, #pageintro, #breadcrumb, #info, #class, .image 
	{
		max-width:978px;
	}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px) {
	.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;}

	.xxl{font-size:40px;}
}