@charset "UTF-8";
/* CSS Document */

/*----clearfix----*/
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
.clearfix { display: inline-table; }    
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */ 

/*//////////////////////////////////////////////////*/

html, body{
	width:100%;
	height:100%;
}
body{
	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	color:rgba(100,100,100,1);
	background-color:#fff;
	
	-webkit-transition: all 0.21s;
	-moz-transition: all 0.21s;
	-ms-transition: all 0.21s;
	-o-transition: all 0.21s;
	transition: all 0.21s;
}
.wrapper{
	width:90%;
	padding:5%;
	max-width:1280px;
	margin:0 auto;
}
@media screen and (max-width:960px){.wrapper{ margin-top:10px; margin-bottom:160px; }}
@media screen and (max-width:640px){.wrapper{ margin-top:15px; margin-bottom:160px; }}
@media screen and (max-width:480px){.wrapper{ margin-top:20px; margin-bottom:160px; }}
@media screen and (max-width:320px){.wrapper{ margin-top:25px; margin-bottom:160px; }}
img{
	display:block;
	width:100%;
	height:auto;
	overflow:hidden;
	line-height:0;
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
	color:rgba(100,100,100,1);
}

section h2{
	font-size:21px;
	letter-spacing:0.25em;
	line-height:1.5em;	
}
@media screen and (max-width:960px){section h2{ font-size:20px; }}
@media screen and (max-width:640px){section h2{ font-size:19px; }}
@media screen and (max-width:480px){section h2{ font-size:18px; }}
@media screen and (max-width:320px){section h2{ font-size:17px; }}
section p{
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
/*	font-weight:lighter; */
	font-size:13px;
	letter-spacing:0.2em;
	line-height:2.25em;
}
@media screen and (max-width:960px){section p{ font-size:13px; }}
@media screen and (max-width:640px){section p{ font-size:13px; }}
@media screen and (max-width:480px){section p{ font-size:14px; }}
@media screen and (max-width:320px){section p{ font-size:15px; }}

.pc{ display:block; }
@media screen and (max-width:450px){.pc{ display:none; }}

/*//////////////////////////////////////////////////*/

.border-line{
	border-bottom:2px solid rgba(200,200,200,1);
	width:45px;
	padding-bottom:90px;
	margin-bottom:90px;
}
@media screen and (max-width:960px){.border-line{ padding-bottom:80px; margin-bottom:80px; width:40px; }}
@media screen and (max-width:640px){.border-line{ padding-bottom:60px; margin-bottom:60px; width:35px; }}
@media screen and (max-width:480px){.border-line{ padding-bottom:45px; margin-bottom:45px; width:30px; }}
@media screen and (max-width:320px){.border-line{ padding-bottom:30px; margin-bottom:30px; width:25px; }}
.border-line-min{
	border-bottom:2px solid rgba(200,200,200,1);
	width:30px;
	padding-bottom:45px;
	margin-bottom:45px;
}
@media screen and (max-width:960px){.border-line-min{ padding-bottom:40px; margin-bottom:40px; width:25px; }}
@media screen and (max-width:640px){.border-line-min{ padding-bottom:35px; margin-bottom:35px; width:20px; }}
@media screen and (max-width:480px){.border-line-min{ padding-bottom:30px; margin-bottom:30px; width:15px; }}
@media screen and (max-width:320px){.border-line-min{ padding-bottom:25px; margin-bottom:25px; width:10px; }}

.BtnStyle_ghost{
	display:block;
	width:210px;
	height:15px;
	padding:15px 0;
	border:1px solid rgba(195,195,195,1);
	font-size:15px;
	line-height:1em;
	letter-spacing:0.2em;
	text-align:center;
	
	-webkit-transition: all 0.21s;
	-moz-transition: all 0.21s;
	-ms-transition: all 0.21s;
	-o-transition: all 0.21s;
	transition: all 0.21s;
}
.BtnStyle_ghost:hover{
	color:rgba(255,255,255,1);
	background-color:rgba(90,90,90,1);
	border:1px solid rgba(90,90,90,1);
}
.BtnStyle_ghost:active{
	background-color:rgba(255,255,255,1);
	color:rgba(190,190,190,1);
	border:1px solid rgba(190,190,190,1);
}
.BtnStyle_ghost span{
	letter-spacing:0.275em;
	font-size:16px;
	position:relative;
	top:-1px;
}

/*//////////////////////////////////////////////////*/

/*----header----*/
h1.headmessage{
	width:90%;
	padding:0 5%;
	max-width:1280px;
	margin:10px auto;
	font-size:9px;
	letter-spacing:0.2em;
	line-height:2em;
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
@media screen and (max-width:640px){h1.headmessage{ line-height:1.8em; }}
@media screen and (max-width:480px){h1.headmessage{ line-height:1.6em; }}
@media screen and (max-width:320px){h1.headmessage{ line-height:1.4em; }}
h1.headmessage span{
	display:inline-block;
}

header{
	margin-bottom:180px;
	position:relative;
}
@media screen and (max-width:960px){header{ margin-bottom:150px; }}
@media screen and (max-width:640px){header{ margin-bottom:120px; }}
@media screen and (max-width:480px){header{ margin-bottom:100px; }}
@media screen and (max-width:320px){header{ margin-bottom:80px ; }}
.header-title-content{
	float:left;	
}
@media screen and (max-width:1207px){.header-title-content{ float:none }}
.main-rogo{
	width:289px;
	height:auto;
	position:relative;
	top:-2px;
	
	-webkit-transition: all 0.14s;
	-moz-transition: all 0.14s;
	-ms-transition: all 0.14s;
	-o-transition: all 0.14s;
	transition: all 0.14s;
}
@media screen and (max-width:960px){.main-rogo{ width:270px; }}
@media screen and (max-width:640px){.main-rogo{ width:260px; }}
@media screen and (max-width:480px){.main-rogo{ width:55%; }}
@media screen and (max-width:320px){.main-rogo{  }}
.main-rogo:hover{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}
header .border-line{
	padding-bottom:45px;
	margin-bottom:45px;
}
@media screen and (max-width:960px){header .border-line{ padding-bottom:40px; margin-bottom:40px; width:40px; }}
@media screen and (max-width:640px){header .border-line{ padding-bottom:35px; margin-bottom:35px; width:35px; }}
@media screen and (max-width:480px){header .border-line{ padding-bottom:30px; margin-bottom:30px; width:30px; }}
@media screen and (max-width:320px){header .border-line{ padding-bottom:25px; margin-bottom:25px; width:25px; }}
.subtitle{
	font-family:"Times New Roman", Times, "游明朝体 Medium", "YuMincho Medium", serif;
	color:rgba(100,100,100,1);
	font-size:10px;
	letter-spacing:0.5em;
	line-height:2em;
}
.subtitle span{
	display:inline-block;
}

/*----nav public style----*/
.nav{
	float:right;
	position:relative;
	right:-24px;
}
@media screen and (max-width:1207px){
	.nav{ 
		float:none;
		position:static;
		right:0;
	}
}
.nav ul li{
	float:left;
}
@media screen and (max-width:1207px){.nav ul li{ float:none; }}
.nav ul li a{
	display:block;
	color:rgba(100,100,100,1);
	font-size:13px;
	padding:7px 24px;
	letter-spacing:0.15em;
	text-align:center;
	/*font-family:Arial, Helvetica, sans-serif;*/
	
	-webkit-transition: all 0.21s;
	-moz-transition: all 0.21s;
	-ms-transition: all 0.21s;
	-o-transition: all 0.21s;
	transition: all 0.21s;
}
@media screen and (max-width:1207px){
	.nav ul li a{
		text-align:center;
		display:block;
		width:100%;
		padding:20px 0;
	}
}
.nav ul li a:hover{
	color:rgba(255,255,255,1);
	background-color:rgba(90,90,90,1);
}
/*.nav ul li a:active{
	border:2px solid rgba(153,153,153,1);
	padding:5px 22px;
	background-color:rgba(255,255,255,1);
	color:rgba(153,153,153,1);
}*/
.nav-border{
	width:10px;
	border-bottom:1px solid rgba(157,157,157,1);
	margin:0 5px;
	padding-top:14px;
}
@media screen and (max-width:1207px){
	.nav-border{
		margin:15px auto;
		padding-top:0;
	}
}
/*----navi-accodion----*/
label.navi-accordion{
	display:none;
}
input[type="checkbox"].on-off{
	display: none;
}
@media screen and (max-width:1207px){
	label.navi-accordion{
z-index: 9999;
display: block;
width: 20px;
height: 20px;

background-image: url(../img/style/toggle-icon.png);
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
top: 2px;
right: 0;
-webkit-transition: all 0.21s;
-moz-transition: all 0.21s;
-ms-transition: all 0.21s;
-o-transition: all 0.21s;
transition: all 0.21s;
	}
	label.navi-accordion:hover{
		cursor: pointer;

		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	nav ul {
		width:100%;
		z-index:999;
	}
	input[type="checkbox"].on-off + ul{
		width:100%;
		height: 0;
		overflow: hidden;
		position:absolute;
		top:30px;
		background-color:rgba(245,245,245,.90);
		/*
		-webkit-transition: all 0.21s;
		-moz-transition: all 0.21s;
		-ms-transition: all 0.21s;
		-o-transition: all 0.21s;
		transition: all 0.21s;
		*/
	}	
	input[type="checkbox"].on-off:checked + ul{
		position:absolute;
		right:0;
		max-width:320px;
		height: 473px;
		z-index:9999;
		border-bottom:2px solid rgba(220,220,220,1);
		border-top:2px solid rgba(220,220,220,1);
	}
}

/*//////////////////////////////////////////////////*/
/*----contact-content----*/
.contact-content{
	background-image:url(../img/index/contact-img.jpg);
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	width:100%;
	max-width:1280px;
	height:827px;
	position:relative;
}

.contact-content .box_contact{
	position:absolute;
	top:50%;
	left:50%;
	bottom:auto;
	right:auto;
	
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.contact-content .box_contact h2{
	letter-spacing:0.45em;
	padding-bottom:45px;
	text-align:center;
}
.contact-content .box_contact .BtnStyle_ghost{
	margin:0 auto;
}

.contact-content h2{
	color:rgba(255,255,255,.9);
}
.contact-content h2 span{
	display:inline-block;
}
.contact-content .BtnStyle_ghost{
	border:1px solid rgba(255,255,255,.8);
	color:rgba(255,255,255,.9);
}
.contact-content .BtnStyle_ghost:hover{
	color:rgba(255,255,255,1);
	background-color:rgba(255,255,255,.25);
	border:1px solid rgba(255,255,255,.8);
}
.contact-content .BtnStyle_ghost:active{
	background-color:rgba(255,255,255,0);
	color:rgba(255,255,255,.7);
	border:1px solid rgba(255,255,255,.7);
}
@media screen and (max-width:960px){ .contact-content{ height:790px; }}
@media screen and (max-width:640px){ .contact-content{ height:700px; }}
@media screen and (max-width:480px){	.contact-content{ height:320px; background-image:url(../img/index/contact-img-s.jpg) !important; }}
/*//////////////////////////////////////////////////*/

/*----footer----*/
footer{
	position:relative;
}
.footer-title-content{
	float:left;
}
p.copyright{
	font-family:"Times New Roman", Times, "游明朝体 Medium", "YuMincho Medium", serif;
	color:rgba(100,100,100,1);
	font-size:10px;
	letter-spacing:0.4em;
	padding-top:70px;
	line-height:2em;
}
@media screen and (max-width:960px){.copyright{ padding-top:60px; padding-bottom:50px; }}
@media screen and (max-width:640px){.copyright{ padding-top:50px; }}
@media screen and (max-width:480px){.copyright{ padding-top:40px; }}
@media screen and (max-width:320px){.copyright{ padding-top:25px; }}

.copyright span{
	display:inline-block;
}

@media screen and (max-width:1207px){
	input[type="checkbox"].on-off:checked + ul{
		margin-bottom:70px;
	}
}
.pagetitle{
	font-size:60px;	margin-bottom:100px; line-height:60px;
}
.pagetitle span{
	font-size:24px; padding-left:3%; display:inline-block; line-height:30px;
}
@media screen and (max-width:640px){
.pagetitle{
	font-size:40px;	margin-bottom:100px; line-height:40px;
}
.pagetitle span{
	font-size:18px; padding-left:3%; display:inline-block; line-height:22px;
}}

/*//////////////////////////////////////////////////*/

/*------------------*/
/*----ripple.css----*/
/*------------------*/

/* クリックできる要素
.ripple { */
    /* 必須
	overflow:hidden;
    position: relative;
} */

/* エフェクト要素
.ripple__effect { */
    /* 値の変更はエフェクト形体・サイズ・スピードに影響する
    width: 150px;
    height: 150px; */

    /* 必須
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
} */

/* エフェクト要素の色を指定
.ripple__effect.is-orange { background: #f1c40f;}
.ripple__effect.is-blue   { background: #4aa3df;}
.ripple__effect.is-black  { background: rgba(153,153,153,1);} */

/* classが付与されたらアニメーションを実行
.ripple__effect.is-show {
    animation: ripple 0.50s ease-out;
} */

/* アニメーションの定義 */
/*
@keyframes ripple {
    from {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
		
        -webkit-opacity: 0;
        -moz-opacity: 0;
        ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
    }
}
*/