@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;}
li{ list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins { background-color:#ff9; color:#000; text-decoration:none;}
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

.bold { font-weight:bold;}
.fl { float:left;}
.fr { float:right;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}
.hidden { display: none;}
.absolute { position:absolute;}
.relative { position:relative;}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:24px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#1a1a1a; border-radius:4px;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; line-height:1.7; color:#fff; background-color:#1a1a1a; letter-spacing:0.1em;}
body,html{ height:100%;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
a{ text-decoration: none; color:#fff;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}
.gothic{ font-family: "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;}


.swiper-slide{ height:608px; width:100%;}
.swiper-pagination-bullet{ border:1px solid #999; width:1rem; height:1rem; opacity:1; background:none;}
.swiper-pagination-bullet-active{ background:#999;}

.effect-fade-header { opacity:0; transform:translate(-45px, 0); -webkit-transform:translate(-45px, 0); transition:all 1s; -webkit-transition:all 1s;}
.effect-fade-header.effect-scroll{ opacity:1; transform:translate(0, 0); -webkit-transform:translate(0, 0);}

.effect-fade { opacity:0; transform:translate(-45px, 0); -webkit-transform:translate(-45px, 0); transition:all 1s; -webkit-transition:all 1s;}
.effect-fade.effect-scroll{ opacity:1; transform:translate(0, 0); -webkit-transform:translate(0, 0);}




#main1{ background:url(img/main1_ver2.jpg) center 0 no-repeat; background-size:cover;}
#main2{ background:url(img/main2.jpg) center 0 no-repeat; background-size:cover;}
#main3{ background:url(img/main3_ver2.jpg) center 0 no-repeat; background-size:cover;}
#main4{ background:url(img/main4.jpg) center 0 no-repeat; background-size:cover;}
#main5{ background:url(img/main5.jpg) center 0 no-repeat; background-size:cover;}
#main6{ background:url(img/main6.jpg) center 0 no-repeat; background-size:cover;}

#mainWrapper{ position:relative; max-width:1280px; margin:0 auto;}
#mainWrapper h1{position: absolute; top:50%; left:50%; z-index:500; margin:-50px 0 0 50px; opacity:0; transform:translate(-1rem, 0); -webkit-transform:translate(-1rem, 0); transition:all 0.5s; -webkit-transition:all 0.5s;}
#mainWrapper h1.move1{ opacity:1; transform:translate(0, 0); -webkit-transform:translate(0, 0);}
#mainWrapper h1 img{ max-width:440px; width:100%; height:auto;}
#billboardWrapper{ position:absolute; top:0; left:50%; z-index:501; margin:0 0 0 200px;}
#billboardWrapper img{ width:265px; height:auto;}

#gNav{ padding:2rem 0;}
#gNav li{ display:inline-block; padding:0 2rem;}
#gNav li a{ color:#fff; position:relative;}
#gNav li a:after{ content:""; position:absolute; top:1.4em; left:0; width:100%; height:1px; background:#999; transition:all 0.5s; -webkit-transition:all 0.5s; transform:scaleX(0); -webkit-transform:scaleX(0);}
#gNav li a:hover:after{ transform:scaleX(1); -webkit-transform:scaleX(1);}


#concept{ margin-top:-1rem; padding-top:1rem;}


.defaultWrapper{ max-width:1280px; margin:0 auto;}
.defaultTitle{ position:relative; width:780px; margin:0 auto;}
.defaultTitle img{ height:30px; width:auto;}
.defaultTitle:before, .defaultTitle:after { content:''; position:absolute; top:50%; display:inline-block; height:1px; background-color:#fff;}
.defaultTitle:before { left:0;}
.defaultTitle:after { right:0;}

#conceptCatTitle.defaultTitle:before, #conceptCatTitle.defaultTitle:after { width:220px;}
#menuCatTitle.defaultTitle:before, #menuCatTitle.defaultTitle:after { width:260px;}
#infoCatTitle.defaultTitle:before, #infoCatTitle.defaultTitle:after { width:180px;}




#conceptWrapper{ margin:4rem auto 0;}
#conceptWrapper h3{ font-size:1.8rem; color:#deca71; font-weight:normal; margin:0 auto 2rem;}

#conceptInner{ margin:4rem auto 0; position:relative; padding:0 260px;}
#conceptInner:before, #conceptInner:after { content: ''; position: absolute; top: 0; display:block; width:240px; height:100%;}
#conceptInner:before { left:0; background:url(img/concept_bg1.jpg) left 0 no-repeat; background-size:contain;}
#conceptInner:after { right:0; background:url(img/concept_bg2.jpg) right 0 no-repeat; background-size:contain;}
#conceptInner p{ margin-top:2rem;}
#conceptInner p span.font--s{ font-size:0.8rem;}
#conceptInner p span.inlineblock{ display:inline-block; margin:0 0.4rem;}

#scene1Wrapper{ margin:8rem auto 0; background:url(img/scene1.jpg) center center no-repeat; padding:0 0 2rem; position:relative; overflow:hidden;}
#scene1Wrapper:before{ content:""; position:absolute; top:0; left:0;  width:100%; height:100%; background-color:#1a1a1a; opacity:0.9;}
#scene1Wrapper *{ position:relative;}
#scene1Wrapper h2{ position:absolute; top:2rem; left:0; z-index:502; background:rgba(0,0,0,0.75); padding:1rem 2rem; width:50%; text-align:left;}
#scene1Wrapper h2 img{ height:48px; width:auto;}

#scene2Wrapper{ margin:0 auto 0; background:url(img/scene2.jpg) center center no-repeat; padding:0 0 2rem; position:relative; overflow:hidden;}
#scene2Wrapper:before{ content:""; position:absolute; top:0; left:0;  width:100%; height:100%; background-color:#1a1a1a; opacity:0.9;}
#scene2Wrapper *{ position:relative;}
#scene2Wrapper h2{ position:absolute; top:2rem; right:0; z-index:502; background:rgba(0,0,0,0.75); padding:1rem 2rem; width:50%; text-align:right;}
#scene2Wrapper h2 img{ height:48px; width:auto;}

#scene3Wrapper{ margin:0 auto 0; background:url(img/scene3.jpg) center center no-repeat; padding:0 0 2rem; position:relative; overflow:hidden;}
#scene3Wrapper:before{ content:""; position:absolute; top:0; left:0;  width:100%; height:100%; background-color:#1a1a1a; opacity:0.9;}
#scene3Wrapper *{ position:relative;}
#scene3Wrapper h2{ position:absolute; top:2rem; left:0; z-index:502; background:rgba(0,0,0,0.75); padding:1rem 2rem; width:50%; text-align:left;}
#scene3Wrapper h2 img{ height:48px; width:auto;}




.twoColumn{ display:block;}

.sceneLeftTextBlock{ float:left; width:35%; padding:9rem 0 0 2rem;}
.sceneRightPhotoBlock{ float:right; width:65%;}
.sceneRightTextBlock{ float:right; width:35%; padding:9rem 2rem 0 0;}
.sceneLeftPhotoBlock{ float:left; width:65%;}

.sceneContentWrapper{ border:1px solid #fff; padding:1rem; font-size:0.8rem; margin:2rem auto 0; max-width:320px;}
.sceneContentWrapper > p{ text-align:left;}
.recommendScene{ margin-top:1rem; padding-top:1rem; border-top:1px solid #fff; text-align:left;}
.recommendScene > p{ margin-bottom:0.5rem;}
.recommendScene > ul > li{ display:inline-block; margin-right:1rem;}


#menuWrapper{ background:url(img/menu_bg.jpg) center 0 no-repeat; background-size:100% 100%; padding:8rem 0 0;}
#menuLeadText{ margin:2rem auto 0; font-size:1.2rem;}
#menuList{ padding:0 2rem; max-width:960px; margin:0 auto;}
#menuList li{ margin-top:4rem;}

.menuLeftTextBlock{ float:left; width:40%; text-align:left; padding:4rem 0 4rem 0;}
.menuRightPhotoBlock{ float:right; width:60%; text-align:left;}
.menuLeftTextBlock h3{ margin-bottom:1rem; padding-bottom:1rem; position:relative;}
.menuLeftTextBlock h3:after{ content:""; position:absolute; bottom:0; left:0; height:1px; width:100%; background:#fff;}
.menuLeftTextBlock h3.noLine{ margin-bottom:2rem; padding-bottom:0;}
.menuLeftTextBlock h3.noLine:after{ content:none;}
.menuLeftTextBlock span{ font-size:0.8rem;}

.menuLeftTextBlock.ph2rem{ padding:2rem 0 2rem 0;}
#ownerPlan{ margin-top:2rem;}


.menuRightTextBlock{ float:right; width:40%; text-align:left; padding:4rem 0 4rem 4rem;}
.menuLeftPhotoBlock{ float:left; width:60%; text-align:left;}
.menuRightTextBlock h3{ margin-bottom:1rem; padding-bottom:1rem; position:relative;}
.menuRightTextBlock h3:after{ content:""; position:absolute; bottom:0; right:0; height:1px; width:200%; background:#fff;}
.menuRightTextBlock span{ font-size:0.8rem;}
.menuRightTextBlock p.mt1rem{margin-top:1rem;}


.imgDeco{ position:relative;}
.imgDeco:before{ content:""; position:absolute; width:100%; height:100%; bottom:-1rem; right:-1rem; background:rgba(215,180,30,0.3);}
.imgDeco img{ position:relative;}

#subMenuWrapper{ background:rgba(128,128,128,0.3); padding:2rem 0; margin-top:4rem;}
#subMenuList{ padding:0 2rem; max-width:960px; margin:0 auto;}




#infoWrapper{ padding:8rem 0 0;}
#infoMainWrapper{ margin:2rem auto;}
#infoMainLeft{ float:left; width:50%;}
#infoMainRight{ float:right; width:50%;}

#infoTextWrapper{ margin:4rem auto;}
#infoTextLeft{ float:left; width:33%; text-align:left; padding:0 2rem;}
#infoTextCenter{ float:left; width:34%; border-left:1px solid #999; border-right:1px solid #999; text-align:left; padding:0 2rem;}
#infoTextRight{ float:left; width:33%; text-align:left; padding:0 2rem;}
.infoText{ color:#ccc;}
.infoText dl dd{ margin-bottom:1rem;}
.infoText dl dd span.addEx{ display:inline-block; margin-left:1rem;}

a .telLink{ text-decoration:underline;}




#footerWrapper{ border-top:1px solid #fff; max-width:1280px; margin:2rem auto 0;}
#copyRight{ font-size:0.75rem; letter-spacing:0em; padding:1rem 0;}
#toTopBtnWrapper{ position:fixed; bottom:2rem; right:2rem; background:rgba(0,0,0,0.9); display:none; z-index:600;}
#toTopBtnWrapper img{ width:50px; height:50px; cursor:pointer;}
#hamburger{ display:none;}
#sNav{ display:none;}




/* IE11 にのみ適用される */
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, 
}

@media only screen and (max-width : 1100px) {
#scene1Wrapper h2 img{ height:34px; width:auto;}
#scene2Wrapper h2 img{ height:34px; width:auto;}
#scene3Wrapper h2 img{ height:34px; width:auto;}
}




@media only screen and (max-width : 800px) {

.swiper-slide{ height:420px;}


#mainWrapper h1{position: absolute; top:50%; left:50%; margin:0; transform:translate(-70%, -50%); -webkit-transform:translate(-70%, -50%);}
#mainWrapper h1.move1{ transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}

#billboardWrapper{ left:auto; right:47px; margin:0;}
#gNav{ display:none;}


.defaultTitle{ width:100%;}
.defaultTitle img{ height:18px;}

#conceptCatTitle.defaultTitle:before, #conceptCatTitle.defaultTitle:after { width:200px;}
#menuCatTitle.defaultTitle:before, #menuCatTitle.defaultTitle:after { width:220px;}
#infoCatTitle.defaultTitle:before, #infoCatTitle.defaultTitle:after { width:160px;}

#conceptWrapper{ margin:3rem auto 0;}
#conceptWrapper h3{ font-size:1.2rem; margin:0 auto;}

#conceptInner{ margin:2rem auto 0; padding:0 1rem;}
#conceptInner:before, #conceptInner:after { content:none;}
#conceptInner p{ margin-top:1rem; font-size:0.8rem;}




#scene1Wrapper{ margin:3rem auto 0; padding:0;}
#scene1Wrapper h2{ position:static; width:100%; margin-top:1rem;}

#scene2Wrapper{ padding:0;}
#scene2Wrapper h2{ position:static; margin-top:1rem; width:100%; text-align:left;}

#scene3Wrapper{ padding:0;}
#scene3Wrapper h2{ position:static; margin-top:1rem; width:100%;}

#scene1Wrapper h2 img{ height:28px; width:auto;}
#scene2Wrapper h2 img{ height:28px; width:auto;}
#scene3Wrapper h2 img{ height:28px; width:auto;}


.sceneLeftTextBlock{ float:none; width:100%; padding:2rem 1rem 0;}
.sceneRightPhotoBlock{ float:none; width:100%; padding:2rem 0 0;}

.sceneRightTextBlock{ float:none; width:100%; padding:2rem 1rem 0;}
.sceneLeftPhotoBlock{ float:none; width:100%; padding:2rem 0 0;}




#menuWrapper{ padding:3rem 0 0;}
#menuLeadText{ font-size:1rem;}
#menuList{ padding:0 1rem;}
#menuList li{ margin-top:2rem;}

.menuLeftTextBlock{ float:none; width:100%; padding:0;}
.menuRightPhotoBlock{ float:none; width:100%;}
.menuLeftTextBlock h3.noLine{ margin-bottom:1rem;}
.menuLeftTextBlock p{margin-bottom:1rem;}

.menuLeftTextBlock.ph2rem{ padding:0;}
#ownerPlan{ margin-top:2rem;}

.menuRightTextBlock{ float:none; width:100%; padding:0;}
.menuLeftPhotoBlock{ float:none; width:100%;}
.menuRightTextBlock h3:after{ left:0; right:auto; width:100%;}
.menuRightTextBlock p{margin-bottom:1rem;}

#subMenuWrapper{ padding:1rem 0; margin-top:3rem;}
#subMenuList{ padding:0 1rem;}




#infoWrapper{ padding:3rem 0 0;}

#infoMainWrapper{ margin:2rem auto;}
#infoMainLeft{ float:none; width:100%;}
#infoMainRight{ float:none; width:100%;}

#infoTextWrapper{ margin:2rem 1rem;}
#infoTextLeft{ float:none; width:100%; padding:0;}
#infoTextCenter{ float:none; width:100%; border-left:none; border-right:none; border-top:1px solid #999; padding:1rem 0 0;}
#infoTextRight{ float:none; width:100%; padding:1rem 0 0; border-top:1px solid #999;}




#toTopBtnWrapper{ bottom:1rem; right:1rem;}
#sNav{ display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:548; display:none;}
#sNav ul{ padding:2rem 0 0;}
#sNav ul li{ margin-bottom:2rem;}
#sNav ul li a{ color:#fff;}
#hamburger{ display:block; position:fixed; top:0; right:0; z-index:550; background:#fff; border:1px solid #1a1a1a; padding:10px 8px 2px;}

}




@media only screen and (max-width : 600px) {
.swiper-slide{ height:280px;}
.swiper-pagination-bullet{ width:0.75rem; height:0.75rem;}

#mainWrapper h1 img{ width:60vw;}
#billboardWrapper img{ width:160px;}

#conceptCatTitle.defaultTitle:before, #conceptCatTitle.defaultTitle:after { width:60px;}
#menuCatTitle.defaultTitle:before, #menuCatTitle.defaultTitle:after { width:100px;}
#infoCatTitle.defaultTitle:before, #infoCatTitle.defaultTitle:after { width:60px;}
}




@media only screen and (max-width : 320px) {
#scene1Wrapper h2 img{ height:24px; width:auto;}
#scene2Wrapper h2 img{ height:24px; width:auto;}
#scene3Wrapper h2 img{ height:24px; width:auto;}
}