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



/* ===================
new clearfix
===================*/
.clearfix:after {
visibility:hidden;/*見えなくする*/
height:0;/*見えなくする*/
display: block;/*block要素にする*/
font-size: 0;
content: " ";
clear: both;

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



/*
 * common
 */

html {
	overflow: auto;
}

body{
	overflow-x: hidden;
}

p{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:2.3;
	font-size:1.2em;
	color:#1a1a1a;
}


h2{
	text-align: center;
}

.marginTop55{
	margin-top:55px;
}

#feed .rssList li img{
	border: 4px solid #fff;
}


/* MOREボタン共通 */
.btn_toPage{
	position: relative;
	display:block;
	margin:30px auto 0;
	border:#1a1a1a solid 1px;
	color: #1a1a1a;
	line-height:1.5;
	text-align: center;
	text-decoration: none;
}

.btn_toPage:hover{
  color: #FFF;
  background: #1a1a1a;
	text-decoration: none;
}


.btn_toPage::after{
  position: absolute;
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  top: calc(50% - 3px);
  right: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.btn_toPage:hover::after{
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}




/* スマホ用　ウィンドウ幅が0〜767pxの場合に適用するCSS  ipad縦サイズ以下 */
@media screen and ( max-width:767px ) {


p{
	font-size:1.1em;
}

#wrapper{
	overflow:hidden;
}

/*ローディング画面*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ffeede;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -116px;
  margin-left: -112px;
  text-align: center;
  z-index: 900;
}

#loader img {
	width:224px;
	height:232px;
}

.btn {
    background:transparent url(btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: absolute;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 200;
}
.peke {
    background-position: -35px 0;
}
.drawr {
    display: none;
    background-color:rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    right:0;
    width:260px;
    padding:60px 0 20px 20px;
    z-index: 100;
}

/*不必要な部分を隠す*/
#bg_para {
	display:none;
}


/*ボタン*/
.btn_toPage{
	width:180px;
	padding:12px 0;
	font-size:1.3em;
}




/*
 * header
 */




/*アイキャッチ*/
#header div#mainImage img{
	width:100%;
	height:auto;
}




/*
 * content
 */

h2 img{
	width:150px;
}


#gallery h2,
#blog h2,
#access h2{/* 見出し部分 */
	 padding:60px 0 0px;
}

#concept h2{
	 padding:50px 0 50px;
}

#gallery h2{
	margin-bottom:50px;
}

#blog h2{
	margin-bottom:30px;
}


#content{
	text-align:center;
}

/*
 * concept
 */

#concept{
	background:url(../img/concept_bg_top.svg) no-repeat center 200px, url(../img/concept_bg_bottom.svg) no-repeat center 610px;
	padding-bottom:200px;
	padding-top:30px;
	height:500px;
}

#concept p.text{
	margin-top:90px;
	line-height:2;
}


/* 背景画像の設定 */

#bg_para{
	height:470px;
 	background: url(../img/bg_02.jpg) center center / cover no-repeat fixed;
}





/*
 * gallery
 */

#gallery{
	background-color: #ffeede;
	padding:60px 0 140px;
}

.autoplay img{
	margin: 0 75px;
}

.autoplay img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}


/*
 * blog
 */

div#blog{
	height:700px;
	background:url(../img/bg_blog.jpg) repeat center bottom;
	padding:50px 0 100px;
}

/*１記事毎を囲むBOX*/
#feed ul.rssList li {
	display: table;
	width: 100%;
	height:150px;
	margin-bottom:20px;

}

/*ブログからの画像を囲むBOX*/
#feed .boxLeft{
	display: table-cell;
	width:50%;
	vertical-align: middle;

}

/*日付とタイトルを囲むBOX*/
#feed .boxRight{
	display: table-cell;
	width:50%;
	margin-top:25px;
	vertical-align: middle;
	text-align: left;
}


/*画像の調整*/
#feed img{
  border-radius: 50%;
	margin-left:30px;
  height: 140px;
  width: 140px;
	-webkit-box-shadow: 2px 2px 5px #DDD; /* Safari, Chrome用 */
	-moz-box-shadow: 2px 2px 5px #DDD; /* Firefox用 */
	box-shadow: 2px 2px 5px #DDD; /* CSS3 */
}

#feed img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

#feed a,
#feed a:visited,
#feed a:active {
	color: #1a1a1a;
	text-decoration:none;
}
#feed a:hover{
	color:#F99;
	text-decoration:none;
}


/*
 * Access
 */

div#access h2{
	margin-bottom:56px;
}


/* google map レスポンシブ用 */

#accessMap {
	position: relative;
	padding-bottom: 40.25%;
	padding-top: 130px;
	height: 0;
	overflow: hidden;
}

#accessMap iframe,
#accessMap object,
#accessMap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 370px;
}

#access .tit{
	text-align: center;
}

/*
 * footer
 */

#footer{
	text-align:center;
	margin-top:100px;
}

#pageTop {
    background: url(../img/to_top_sumaho_pink.svg) no-repeat center bottom 15px; /* ロールオーバー時のチラつき防止 */
}

#pageTop a {
    width: 44px;
    height: 78px;
    background: url(../img/to_top_sumaho.svg) no-repeat center bottom 15px;
    display: block;
		margin:0 auto;
}

#pageTop a:hover {
    background-image: url(../img/to_top_sumaho_pink.svg);
}



/* ===================
		ナビゲーション
===================*/



/*フッター　サイトマップのレスポンシブ*/
ul#sitemap{
	border-top: 1px solid #1a1a1a;
}

ul#sitemap li {
	float: left;
	width: 50%;
	height:40px;
	padding:12px;
	font-size:1.2em;
	vertical-align:middle;
	box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid #1a1a1a;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

ul#sitemap li a {
	display:block;
}

/*奇数のli要素に適応*/
ul#sitemap li:nth-child(odd) {
  border-right: 1px solid #1a1a1a;
}


#sitemap li:nth-of-type(1),
#sitemap li:nth-of-type(2),
#sitemap li:nth-of-type(3),
#sitemap li:nth-of-type(4),
#sitemap li:nth-of-type(5),
#sitemap li:nth-of-type(6){
	background:url(../img/nav_arrow.svg) no-repeat center right 10px;
}



/* sns位置調整 (7番目Facebook,8番目ブログ) */
#sitemap li:nth-of-type(7){
	background:url(../img/nav_window.svg) no-repeat top 17px right 10px;
	margin-top:-4px;
	padding-bottom:4px;

}

#sitemap li:nth-of-type(8){
	background:url(../img/nav_window.svg) no-repeat top 17px right 10px;
	margin-top:-4px;
	padding-bottom:4px;
}





#footerSitemap {
	background-color: #ffeede;/*ffeede*/
	padding-bottom:30px;
}


#footerSitemap a,
#footerSitemap a:visited,
#footerSitemap a:active {
	color: #1a1a1a;
	text-decoration:none;
}
#footerSitemap a:hover{
	color:#F99;
	text-decoration:none;
}



#footerSitemap p#footerText {
	margin-bottom:15px;
	line-height:1.7;
}

#footerSitemap #footerLogo {
	margin-top:185px;
	margin-bottom: 23px;
}

#footerSitemap #footerLogo img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

#footerSitemap #footerTel {
	margin-bottom:10px;
}


address#copyright {
	background-color: #1a1a1a;
	color:#FFF;
	height: 10px;
	padding:5px 0 8px;
	text-align:center;
}



}



/* PC用　横幅768px以上に適応*/
@media screen and (min-width: 768px) {


/*ローディング画面*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ffeede;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 374px;
  height: 388px;
  margin-top: -187px;
  margin-left: -194px;
  text-align: center;
  z-index: 900;
}



#wrapper{
	max-width:960px;
	margin: 0 auto;
}

/*不必要な部分を隠す*/
#sitemap li:nth-of-type(7),
#sitemap li:nth-of-type(8){
	display:none;
}



/*ボタン*/
.btn_toPage{
	outline: none;
	width:210px;
	padding:13px 0;
	font-size:1.3em;
	-webkit-transition: all .3s;
	transition: all .3s;
}


#header h1#logo img:hover{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* ===================
		ナビゲーション
===================*/




ul#nav li a {
  position: relative;
  display: inline-block;
  padding: .4em;
  text-decoration: none;
}

/*先頭から６番目までを指定*/
ul#nav li:nth-child(-n+6) a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #f3c4b0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
ul#nav li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

ul#nav:hover li:not(:hover){/* #navにhover時、その子要素のなかでマウスを乗せていないものが半透明 */
	opacity: 0.6 ;
	filter: alpha(opacity=60) ;	/* Ie用 */
}

#fixedWrapper{
	width:100%;
	 position: fixed;
	top:0px;
	background-color:#FFF;
  z-index: 912;
}

#fixedNav{
	max-width:960px;
	height: 55px;
	left:50%;
	overflow:hidden;
	margin:0 auto;
}

/*fixed部分　左ボックス*/
#leftFixed{
	width:214px;
	float:left;
	height:25px;
	margin-top:15px;
	  z-index: 891;


}

/*fixed部分　右ボックス*/
#rightFixed{
	width:480px;
	float:right;
	position:relative;
	z-index:890;
}


#rightFixed ul#nav{
	float:left;
	height:25px;
	margin-top:17px;
	position:absolute;
	right:0;
	top:0;
	display:inline-block;
	text-align:right;
}

#rightFixed ul#nav li{
	float:left;
	padding-left:10px;
}


/* sns (7番目Facebook,8番目ブログ) */
#fixedWrapper li:nth-of-type(7),
#fixedWrapper li:nth-of-type(8){
	margin-top:-4px;
}

#fixedWrapper li:nth-of-type(8){
	margin-left:-9px;
}

#fixedWrapper li.icoFacebook li a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/* アイキャッチ */

#header div#mainImage{
	box-sizing: border-box;
	margin-left: calc(((100vw - 44rem) / 2) * -1);
  margin-right: calc(((100vw - 44rem) / 2) * -1);
  padding: 0 calc((100vw - 44rem) / 2);
	background-color: #ffeede;
	padding-top:55px;
}

#header div#mainImage img{
}

/*
 * content
 */

#gallery h2,
#blog h2,
#access h2{/* 見出し部分 */
	 padding-top:120px;
}

#concept h2{
	 padding:150px 0 50px;
}

#gallery h2{
	margin-bottom:70px;
}

#blog h2{
	margin-bottom:50px;
}


#content{
	text-align:center;
}

/* concept */

#concept{
	/* , url(../img/bg_conceptLeft.jpg) no-repeat 45% top, url(../img/bg_conceptRight.jpg) no-repeat 55% bottom */
	background:url(../img/concept_bg_top.svg) no-repeat center 330px, url(../img/concept_bg_bottom.svg) no-repeat center 780px;
	padding-bottom:230px;
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	height:800px;
}

#concept p.text{
	margin-top:145px;
	line-height:2;
}


/* 背景画像の設定 */

#bg_para{
	height:470px;
 	background: url(../img/bg_02.jpg) center center / cover no-repeat fixed;
	box-sizing: border-box;
	margin-left: calc(((100vw - 44rem) / 2) * -1);
  margin-right: calc(((100vw - 44rem) / 2) * -1);
  padding: 1.5em calc((100vw - 44rem) / 2);
}












/* gallery */

#gallery{
	background-color: #ffeede;
	box-sizing: border-box;
	margin-left: calc(((100vw - 44rem) / 2) * -1);
  margin-right: calc(((100vw - 44rem) / 2) * -1);
  padding: 1.5em calc((100vw - 44rem) / 2);
	padding:100px 0 180px;
}

.autoplay img{
}

.autoplay img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}


/* Blog */

div#blog{
	height:700px;
	background:url(../img/bg_blog.jpg) repeat center bottom;
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	padding:50px 0 100px;
}

#feed {
	width:960px;
	margin:0 auto;
	text-align:center;
}

#feed img{
  border-radius: 50%;
  height: 200px;
  width: 200px;
	margin-bottom:30px;
-webkit-box-shadow: 2px 2px 5px #DDD; /* Safari, Chrome用 */
-moz-box-shadow: 2px 2px 5px #DDD; /* Firefox用 */
box-shadow: 2px 2px 5px #DDD; /* CSS3 */
}

#feed img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

#feed ul.rssList li {
	width:320px;
	height:40px;
	float:left;
}

#feed ul.rssList li a {
	margin:5px 0;
}

#feed ul.rssList li p {
	margin-bottom:10px;
}

#feed a,
#feed a:visited,
#feed a:active {
	color: #1a1a1a;
	text-decoration:none;
}
#feed a:hover{
	color:#F99;
	text-decoration:none;
}



/* Access */

div#access h2{
	margin-bottom:56px;
}


/* google map レスポンシブ用 */

#accessMap {
	position: relative;
	padding-bottom: 40.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

#accessMap iframe,
#accessMap object,
#accessMap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 350px;
}


/*
 * footer
 */

#footer{
	text-align:center;
	margin-top:100px;
}

#pageTop {
    background: url(../img/to_top.svg) no-repeat center top; /* ロールオーバー時のチラつき防止 */
}

#pageTop a {
    width: 121px;
    height: 56px;
    background: url(../img/to_top.svg) no-repeat;
    display: block;
    text-indent: -9999px;
		margin:0 auto;
}

#pageTop a:hover {
    background-image: url(../img/to_top_on.svg);
}

#footerSitemap {
	background-color: #ffeede;
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
	padding-top:50px;
	padding-bottom:30px;
}


#footerSitemap a,
#footerSitemap a:visited,
#footerSitemap a:active {
	color: #1a1a1a;
	text-decoration:none;
}
#footerSitemap a:hover{
	color:#F99;
	text-decoration:none;
}

#footerSitemap ul#sitemap {
	overflow:hidden;
	margin-bottom:25px;
	display: inline-block;
	text-align: center;
}

#footerSitemap ul#sitemap li {
	float:left;
	margin:0 10px 0;
	font-size:1.3em;
}

#footerSitemap p#footerText {
	margin-bottom:15px;
	line-height:1.7;
}

#footerSitemap #footerLogo {
	margin-bottom: 23px;
}

#footerSitemap #footerLogo img:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

#footerSitemap #footerTel {
	margin-bottom:10px;
}


address#copyright {
	background-color: #1a1a1a;
	color:#FFF;
	height: 10px;
	text-align:center;
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
  padding: 1em 0;
}


}