@charset "utf-8";

/*ベースのCSSの設定
----------------------------------------------------------------*/

/*ベースの要素の設定をリセット*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
img {border:0;vertical-align: top;}
sub {vertical-align:bottom;}

/*Table*/
table {border-collapse:collapse;border-spacing:0;}  
table,th,td {margin:0;padding:0;font-weight:normal;}

html {font: inherit;}

/*サイト全体の基本情報の設定*/
body {
	font-size:62.5%;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height:1.8;
}

ul, ol {list-style: none;}

.cf:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

* html .clearfix {zoom:1;}
*:first-child+html .clearfix {zoom:1;}

div {-webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;}

/*レイアウト基本設定
----------------------------------------------------------------*/

/*コンテンツ内のフォントサイズの設定*/
#contents {font-size:1.3em;}
#globalnav {font-size:1.4em;}
#header_inner .logo {}
#footer {font-size:1.2em;}
#footer_nav ul li {font-size:1.1em;}

/*レイアウトの詳細設定
----------------------------------------------------------------*/

/*サイトの幅*/

#contents_inner {
	width:1030px;
	margin:0 auto 50px;
	}

@media screen and (max-width: 640px) {
	
	#contents_inner {
	width:100%;
	margin:0 0 50px;
	}
	
	img {width:100%;}
	
}
										 
#contents_main {}

/*文字色・リンク色・背景色の設定
----------------------------------------------------------------*/
body {color:#646464;}

/*リンクの装飾の設定*/
a:link, a:visited, a:active {
	color:#646464;
	text-decoration:none;
}

a:hover {text-decoration:none;}

/*コンテンツエリアの設定
----------------------------------------------------------------*/

#contents {}

#contents:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}


/*コンテンツセクションの基本設定*/

#conbox {position:relative;}

#conbox:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

#conbox .menu_wrap:after {
	visibility:hidden;
	height:0;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
}

#conbox .menu_wrap .left {float:left;}
#conbox .menu_wrap .right {float:left;}

#conbox .menu_wrap.box01 .left {width:530px;}
#conbox .menu_wrap.box01 .right {width:500px;}

#conbox .menu_wrap.box02 .left {width:370px;}
#conbox .menu_wrap.box02 .right {width:660px;}

#conbox .menu_wrap.box03 .left {width:450px;}
#conbox .menu_wrap.box03 .right {width:580px;}

#conbox .menu_wrap.box04 .left {width:540px;}
#conbox .menu_wrap.box04 .right {width:490px;}

@media screen and (max-width: 640px) {
	
#conbox .menu_wrap .left,
#conbox .menu_wrap .right {float:none;}
#conbox .menu_wrap.box01 .left,
#conbox .menu_wrap.box01 .right,
#conbox .menu_wrap.box02 .left,
#conbox .menu_wrap.box02 .right,
#conbox .menu_wrap.box03 .left,
#conbox .menu_wrap.box03 .right,
#conbox .menu_wrap.box04 .left,
#conbox .menu_wrap.box04 .right {width:100%;}

}


figure {
	position: relative;
	overflow: hidden;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	width: 80%;
	-webkit-transition: .3s;
	transition: .3s;
	color:#FFF;
}
figcaption h3 {
	top: 30px;
}
figcaption p {
	top: 75px;
}
.button:hover figcaption {
	opacity: 1;
}
.button:hover figcaption h3,
.button:hover figcaption p {
	left: 20px;
}
.button:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
.button:hover figcaption p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

img {
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}

figure:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}


#conbox .menu_title {
	position:relative;
	color:#FFF;
	height:90px;
	line-height:1.4;
	}

#conbox .menu_title h2 {
	text-align:center;
	}

#conbox .menu_title p {
	text-align:left;
	}

@media screen and (max-width: 640px) {
	
	figcaption {
		display:none;
	}
	
	#conbox .menu_title {
	height:auto;
	padding:20px 30px ;
	}
	
	#conbox .menu_title p {
	text-align:center;
	}
	
}

#conbox .menu_title:before {
	content: '\f054';
	position: absolute;
	font-family: 'FontAwesome';
	right: 10px;
	top: 50%;
	line-height: 1;
	margin-top:-0.5em;
	font-size:1em;
	color:#FFF;
	}

#conbox .button:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

#conbox .menu_title.ttl_minamikusatsu {background-color:#FF8989;}
#conbox .menu_title.ttl_minamikusatsu p {margin-left:116px;}

#conbox .menu_title.ttl_magokoro {background-color:#BA8850;}
#conbox .menu_title.ttl_magokoro p {margin-left:50px;}

#conbox .menu_title.ttl_nomurasanfujinka {background-color:#FAB14B;}
#conbox .menu_title.ttl_nomurasanfujinka p {margin-left:200px;}

#conbox .menu_title.ttl_ladies {background-color:#EC6D56;}
#conbox .menu_title.ttl_ladies p {margin-left:80px;}

#conbox .menu_title.ttl_nomuraseikei {background-color:#4B9DDA;}
#conbox .menu_title.ttl_nomuraseikei p {margin-left:120px;}

@media screen and (max-width: 640px) {
	
#conbox .menu_title.ttl_minamikusatsu p {margin-left:0;}

#conbox .menu_title.ttl_magokoro p {margin-left:0;}

#conbox .menu_title.ttl_nomurasanfujinka p {margin-left:0;}

#conbox .menu_title.ttl_ladies p {margin-left:0;}

#conbox .menu_title.ttl_nomuraseikei p {margin-left:0;}
	
}

#conbox .minamikusatsu_concept {
	padding:20px 0 0;
	}

#conbox .minamikusatsu_concept h3,
#conbox .minamikusatsu_concept h4 {
	text-align:center;
	}

#conbox .minamikusatsu_concept p {
	width:350px;
	margin:0 auto;
	}


#conbox h2 {
	margin:0 0 5px;
	padding:8px 0 0;
	font-size:1.5em;
	letter-spacing:0.1em;
	line-height:1.4;
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	color:#FFF;
}

#conbox h3 {
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	}

#conbox h4 {
	font-size:2em;
	letter-spacing:0.1em;
	margin:0 0 10px;
	line-height:1.4;
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	}

@media screen and (max-width: 640px) {
	
#conbox h1 {
	background-color:#FF93A2;
	color:#FFF;
	text-align:center;
	padding:80px 30px;
	font-size: calc(20px + 0.25vw);
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

	
#conbox h2 {
	padding:0;
}

#conbox .minamikusatsu_concept {
	background-color:#FF93A2;
	color:#FFF;
	padding:0 30px 50px;
	}

#conbox .minamikusatsu_concept h4 {
	font-size:1.6em;
	letter-spacing:0;
	}

#conbox .minamikusatsu_concept h3,
#conbox .minamikusatsu_concept h4 {
	color:#FFF;
	}

#conbox .minamikusatsu_concept p {
	width:100%;
	margin:0;
	}

}


/*フッターエリア
----------------------------------------------------------------*/
/*ページトップ*/
#pagetop {
	position: fixed;
	bottom:50px;
	right:50px;
	z-index:100;
	}

/*フッターエリアの設定*/
#footer {}

#footer .address {
	text-align:center;
	margin:0 0 100px
	}

/*コピーライトの設定*/

#footer .copyright {
	text-align:center;
	line-height:1.4;
	padding:0 0 20px;
	}

#footer p.copyright small {}


@media screen and (max-width: 640px) {
	
	#footer {
		padding:0 30px;
		}
	
}



.sp {display:none;}
.pc {display:block;}

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