@charset "UTF-8";
@import "reset5.css";
@import "../font/greycliff/greycliff-cf-extra-bold/webfonts/greycliff-cf-extra-bold.css";
@import "../font/greycliff/greycliff-cf-extra-bold-oblique/webfonts/greycliff-cf-extra-bold-oblique.css";
@import "../font/greycliff/greycliff-cf-bold/webfonts/greycliff-cf-bold.css";
@import "../font/greycliff/greycliff-cf-bold-oblique/webfonts/greycliff-cf-bold-oblique.css";
@import "../font/greycliff/greycliff-cf-demi-bold/webfonts/greycliff-cf-demi-bold.css";
@import "../font/greycliff/greycliff-cf-demi-bold-oblique/webfonts/greycliff-cf-demi-bold-oblique.css";
@import "../font/greycliff/greycliff-cf-medium/webfonts/greycliff-cf-medium.css";
@import "../font/greycliff/greycliff-cf-medium-oblique/webfonts/greycliff-cf-medium-oblique.css";
@import "../font/greycliff/greycliff-cf-regular/webfonts/greycliff-cf-regular.css";
@import "../font/greycliff/greycliff-cf-regular-oblique/webfonts/greycliff-cf-regular-oblique.css";
@import "../font/greycliff/greycliff-cf-light/webfonts/greycliff-cf-light.css";
@import "../font/greycliff/greycliff-cf-light-oblique/webfonts/greycliff-cf-light-oblique.css";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body { color:#333; line-height:1;  padding: 0; position: relative; min-height: 100%; overflow-x:hidden; background: #fff; }
html {  min-height: 100%; }

* html body { font-family: 'GreycliffCF-Regular','Noto Sans JP', sans-serif,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif; }
*:first-child+html body { font-family: 'GreycliffCF-Regular','Noto Sans JP', sans-serif,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif; }
html:not(:target) body { font-family: 'GreycliffCF-Regular','Noto Sans JP', sans-serif, Helvetica, Arial, Sans-Serif;}

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 12px default setting */
body { font-size:13px; line-height: 2.0; letter-spacing: 0.08em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

h1,h2,h3,h4,h5 { color:#333; font-weight: normal }
p { font-weight: 300 }

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
	font-style:italic
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}


img { vertical-align:bottom; }


/* margin-bottom
=========================================*/
.mb0 { margin-bottom:0 !important; }
.mb3 { margin-bottom:3px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb7 { margin-bottom:7px !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !important; }
.mb120 { margin-bottom:120px !important; }

.mb1em { margin-bottom: 1em !important; }


/* margin-top
=========================================*/
.mt0 { margin-top:0 !important; }
.mt3 { margin-top:3px !important; }
.mt4 { margin-top:4px !important; }
.mt5 { margin-top:5px !important; }
.mt7 { margin-top:7px !important; }
.mt10 { margin-top:10px !important; }
.mt12 { margin-top:12px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt30 { margin-top:30px !important; }
.mt35 { margin-top:35px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }

.ml30 { margin-left:30px !important; }

.mr5 { margin-right:5px !important; }
.mr10 { margin-right:10px !important; }
.mr20 { margin-right:20px !important; }
.mr40 { margin-right:40px !important; }
.mr80 { margin-right:80px !important; }



/* padding-top
=========================================*/
.pt0 { padding-top:0 !important; }
.pt3 { padding-top:3px !important; }
.pt4 { padding-top:4px !important; }
.pt5 { padding-top:5px !important; }
.pt7 { padding-top:7px !important; }
.pt10 { padding-top:10px !important; }
.pt12 { padding-top:12px !important; }
.pt15 { padding-top:15px !important; }
.pt20 { padding-top:20px !important; }
.pt25 { padding-top:25px !important; }
.pt30 { padding-top:30px !important; }
.pt35 { padding-top:35px !important; }
.pt40 { padding-top:40px !important; }
.pt50 { padding-top:50px !important; }
.pt60 { padding-top:60px !important; }



.tx9 { font-size: 9px }
.tx10 { font-size: 10px }
.tx11 { font-size: 11px }
.tx12 { font-size: 12px }
.tx13 { font-size: 13px }
.tx14 { font-size: 14px }
.tx15 { font-size: 15px }
.tx16 { font-size: 16px }
.tx18 { font-size: 18px }
.tx20 { font-size: 20px }
.tx24 { font-size: 24px }

.tx-db { font-family: 'GreycliffCF-DemiBold' !important; }
.tx-m { font-family: 'GreycliffCF-Medium' !important; }
.tx-r { font-family: 'GreycliffCF-Regular' !important; }
.tx-l { font-family: 'GreycliffCF-Light' !important; }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }


/* !Links */
a { cursor: pointer }
a:link { color: #333; text-decoration: none }
a:visited { color: #333; text-decoration: none }
a:hover { color: #999; text-decoration: none }
a:active { color: #333; text-decoration: none }


html {  }
#wrapper { width: 100%; text-align: center; min-height: 100% }

#main { position: relative; overflow: hidden; background: #f6f6fb }
#main h1 { position: absolute; right: 80px; top: 50%; margin-top: -20px; z-index: 10; font-size: 30px; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.14em }
#main .slide { position: absolute; left: 0; top: 0; display: none; z-index: 0 }
#main #bullets { position: absolute; left: 50%; bottom: 15px; z-index: 10; margin-left: -60px; }
#main #bullets li { float: left; padding: 4px; cursor: pointer }
#main #bullets li a { display: block }

#header { padding: 30px 0; text-align: left; width: 100%; background: #fff; border-bottom: solid 1px #f1f1fc; position: fixed; left: 0; top: 0; z-index: 100 }
#top #header { position: relative }
#header h1 { margin-left: 60px }
#gnav { position: absolute; right: 30px; top: 4px }
#gnav li { float: left; font-size: 15px; line-height: 1; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em }
#gnav li a { padding: 30px; display: block; position: relative }
#gnav li a span { width: 0; height: 2px; background: #333; display: block; position: absolute; bottom: 17px; left: 50%; margin-left: -15px }
#gnav li.cur a span { width: 30px } 
#gnav li:last-child a { padding: 28px 30px }
#btn_menu { width: 80px; height: 80px; position: absolute; right: 0; top: 0; cursor: pointer; background: url(../img/btn_menu.png); display: none }

#information { padding: 30px 60px; text-align: left }
#information h3 { font-size: 16px; font-family: 'GreycliffCF-Bold'; float: left; width: 240px }
#information p { float: left }

#footer { background: #f6f6fb; padding: 60px 0; text-align: center }
#footer .foot { width: 1080px; margin: 0 auto; text-align: left }
#footer .foot ul { float: left }
#footer .foot li { float:left; margin-right: 60px; font-size: 14px; font-family: 'GreycliffCF-Bold'; }
#footer .foot li span { font-weight: 300; font-size: 11px; font-family: 'Noto Sans JP'　}
#footer .foot p { float: right; font-size: 14px; font-family: 'GreycliffCF-Bold'; }

#gotop { position: fixed; right: 0; bottom: -60px; width: 60px; height: 60px; overflow: hidden; z-index: 100 }
#gotop a { display: block; position: relative; width: 60px; height: 60px; cursor: pointer }
#gotop a img { position: absolute; left: 50%; bottom: -10px; margin-left: -2px }
#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1003; display: none }


#page_tit { width: 100%; height: 160px; background: url(../img/bg_tit.png); background-size: cover; margin-top: 80px }
#page_tit h2 { text-align: center; padding: 56px 0 0; font-size: 18px; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.18em }
#page_tit h2 span { font-weight: 300; font-size: 11px; font-family: 'Noto Sans JP' }

#content { padding: 80px 0 160px; }
.content_inner { width: 1080px; margin: 0 auto } 

.vis { margin: 0 0 120px }

.sec { text-align: left; margin: 0 0 80px }
.sec h3 { font-family: 'GreycliffCF-Medium'; font-size: 15px; line-height: 2; margin-bottom: 25px; padding: 0 40px; letter-spacing: 0.2em }
.sec h3 span { font-family: 'GreycliffCF-Bold'; font-size: 18px; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.sec p { margin-bottom: 25px; padding: 0 40px }

.floor { margin: 0 0 80px; text-align: left }
.floor .fltL { /*margin-right: 80px*/ }
.floor .fltR { width: 640px }
.floor h3 { font-family: 'GreycliffCF-Medium'; font-size: 16px; line-height: 2; margin-bottom: 25px }
.floor h3 span { font-family: 'GreycliffCF-Bold'; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.btn_gal a { font-family: 'GreycliffCF-Bold'; border: solid 1px #dedee5; background: #f5f5fc; width: 140px; padding: 8px 0; display: block; text-align: center }
.btn_gal a:hover { background: #dedee5; }

.zu { float: left; width: 50%; text-align: center; padding: 50px 0 }
.zu p { width: 250px; margin: 0 auto 20px; text-align: left; padding: 0; font-size: 15px; font-family: 'GreycliffCF-Bold'; }

.tbl { border-bottom: solid 1px #dadcff }
.tbl th { padding: 20px 40px; border-top: solid 1px #dadcff; line-height: 2; vertical-align: top; font-weight: 500; font-family: 'Noto Sans JP'; white-space: nowrap }
.tbl td { padding: 20px 40px; border-top: solid 1px #dadcff; line-height: 2 }

.gal { padding: 120px 0 0; text-align: left }
.gal h3 { font-family: 'GreycliffCF-Medium'; font-size: 14px; line-height: 2; margin-bottom: 60px }
.gal h3 span { font-family: 'GreycliffCF-Bold'; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.gal li { width: 232px; float: left; margin-right: 50px; overflow: hidden; position: relative }
.gal li span { display: block; position: absolute; background: #cfcfd9 }
.gal li span.t { width: 100%; height: 0; left: 0; top: -1px }
.gal li span.l { width: 0; height: 100%; left: -1px; bottom: 0 }
.gal li span.r { width: 0; height: 100%; right: -1px; top: 0 }
.gal li span.b { width: 100%; height: 0; right: 0; bottom: -1px }
.gal li.mb { margin-bottom: 50px }

#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #f6f6fb; text-align: center; z-index: 1002; display: none }
#lay .photo { opacity: 0; margin-top: 0; }
#lay .next { position: absolute; right: 30px; top: 50%; margin-top: 30px; cursor: pointer }
#lay .prev { position: absolute; left: 30px; top: 50%; margin-top: 30px; cursor: pointer }
#lay .close { position: absolute; right: 30px; top: 30px; cursor: pointer }
#lay h3 { position: absolute; left: 0; bottom: 25px; width: 100%; font-family: 'GreycliffCF-Medium'; font-size: 14px; line-height: 2; text-align: center; }
#lay h3 span { font-family: 'GreycliffCF-Bold'; font-size: 16px; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }

#inquiry th { width: 20% }
#inquiry th span { color: #C00 }
#inquiry .form-box01 { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; padding: 0 10px border:1px solid #cdcac8; width:98%; height:40px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#inquiry textarea { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; border:1px solid #cdcac8; width:98%; height:110px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:10px 0 }

/* mailform */
.text-success { padding: 40px; font-size: 16px; font-weight: bold }
.text-danger { padding: 40px; font-size: 16px; color: #C00; font-weight: bold }
#button_default, .MyMailForm_btn { border: solid 1px #dedee5; background: #f5f5fc; font-size:15px; letter-spacing: 0.2em; padding:16px 0; cursor:pointer; width:40%; margin: 0 30% }
#button_default:hover, .MyMailForm_btn:hover { background:#dedee5;  }

.flow p span { border: solid 1px #dedee5; background: #f9f9fc; padding: 15px 0; display: inline-block; width: 100%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

.terms ol { margin-left: 2em; padding: 0 40px }
.terms li { list-style-type: disc; list-style-position: outside; margin-bottom: 1em; font-weight: 300 }

.faq h3 span { font-size: 24px }

.policy { padding: 40px 0; border-bottom: solid 1px #dedee5; }
.policy h3 { margin-bottom: 10px }
.policy p { margin: 0 }

.btn_link a { font-family: 'GreycliffCF-Bold'; border: solid 1px #dedee5; background: #f5f5fc; width: 320px; padding: 8px 0; display: block; text-align: center; margin: 0 auto }
.btn_link a:hover { background: #dedee5; }

.bBox { border: solid 1px #dedee5; padding: 40px; text-align: center }

.mr0 { margin-right: 0 !important }

.wid1 { width: 100% !important }
.wid2 { width: 50% !important }
.wid3 { width: 33.333% !important }
.wid4 { width: 25% !important }

.bold { font-family: 'GreycliffCF-Bold'; }

@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 780px) {
	
body { font-size:12px; line-height: 1.8; -webkit-text-size-adjust: none; }
a {color:#fff; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

#main h1 { position: absolute; right: 10px; top: 40%; z-index: 10; font-size: 14px; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.18em }

#header { padding: 20px 0; text-align: left; width: 100%; background: #fff; border-bottom: solid 1px #f1f1fc; position: fixed; left: 0; top: 0; z-index: 100 }
#top #header { position: relative }
#header h1 { margin-left: 20px; }
#header h1 img { height: 15px }
#gnav { position: absolute; right: auto; top: 55px; width: 100%; background-color: #fff; border-top: solid 1px #f1f1fc; display: none }
#top #gnav { display: block; position: relative; right: auto; top: 25px; }
#gnav li { float: left; width: 49%; font-size: 15px; line-height: 1; text-align: center; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em; border-bottom: solid 1px #f1f1fc; border-left: solid 1px #f1f1fc; }
#gnav li a { padding: 30px; display: block; position: relative }
#gnav li a span { width: 0; height: 2px; background: #333; display: block; position: absolute; bottom: 17px; left: 50%; margin-left: -15px }
#gnav li.cur a span { width: 30px } 
#gnav li:last-child { width: 99%; }
#btn_menu { width: 55px; height: 55px; background-size: contain; display: block }
#top #btn_menu { display: none }

#information { padding: 20px; text-align: left }
#information h3 { font-size: 16px; font-family: 'GreycliffCF-Bold'; float: none; margin: 0 0 10px }
#information p { float: none }
	
#footer { background: #f6f6fb; padding: 30px 0; text-align: center }
#footer .foot { width: auto; margin: 0 auto; text-align: left; padding: 0 20px }
#footer .foot ul { float: none }
#footer .foot li { margin-right: 20px; margin-bottom: 10px; font-size: 13px; font-family: 'GreycliffCF-Bold'; }
#footer .foot li span { font-weight: 300; font-size: 10px; font-family: 'Noto Sans JP'　}
#footer .foot p { float: none; font-size: 13px; font-family: 'GreycliffCF-Bold'; text-align:left; margin-top: 40px }

#gotop { position: fixed; right: -10px; bottom: -60px; width: 40px; height: 40px; overflow: hidden; z-index: 100 }
#gotop a { display: block; position: relative; width: 40px; height: 40px; cursor: pointer }
#gotop a img { position: absolute; left: 50%; bottom: -30px; margin-left: -2px }

#page_tit { width: 100%; height: 90px; background: url(../img/bg_tit.png); background-size: cover; margin-top: 55px }
#page_tit h2 { text-align: center; padding: 20px 0 0; font-size: 18px; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.18em }
#page_tit h2 span { font-weight: 300; font-size: 11px; font-family: 'Noto Sans JP' }

#content { padding: 40px 0 80px; }
.content_inner { width: auto; margin: 0 auto; } 

.vis { margin: 0 -25% 30px }

.sec { text-align: left; margin: 0 0 40px }
.sec h3 { font-family: 'GreycliffCF-Medium'; font-size: 14px; line-height: 2; margin-bottom: 25px; padding: 0 20px; letter-spacing: 0.2em }
.sec h3 span { font-family: 'GreycliffCF-Bold'; font-size: 16px; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.sec p { margin-bottom: 25px; padding: 0 20px }

.floor { margin: 0 0 40px; text-align: left; padding: 0 20px }
.floor .fltL { /*margin-right: 80px*/ float: none; width: 100% }
.floor .fltR { width: auto; float: none }
.floor h3 { font-family: 'GreycliffCF-Medium'; font-size: 14px; line-height: 2; margin-bottom: 15px; margin-top: 15px; }
.floor h3 span { font-family: 'GreycliffCF-Bold'; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.btn_gal a { font-family: 'GreycliffCF-Bold'; border: solid 1px #dedee5; background: #f5f5fc; width: 140px; padding: 8px 0; display: block; text-align: center }
.btn_gal a:hover { background: #dedee5; }

.zu { float: left; width: 100%; text-align: center; padding: 30px 0 }
.zu img { width: 200px }
.zu p { width: 200px; margin: 0 auto 20px; text-align: left; padding: 0; font-size: 15px; font-family: 'GreycliffCF-Bold'; }

.tbl { border-bottom: solid 1px #dadcff }
.tbl th { padding: 20px 10px 20px 20px; border-top: solid 1px #dadcff; line-height: 2; vertical-align: top; font-weight: 500; font-family: 'Noto Sans JP'; white-space: nowrap; }
.tbl td { padding: 20px 20px 20px 10px; border-top: solid 1px #dadcff; line-height: 2 }

.gal { padding: 60px 20px 0; text-align: left }
.gal h3 { font-family: 'GreycliffCF-Medium'; font-size: 14px; line-height: 2; margin-bottom: 20px }
.gal h3 span { font-family: 'GreycliffCF-Bold'; border-right: solid 1px #dadcff; display: inline-block; padding-right: 12px; margin-right: 12px }
.gal li { width: 130px; float: left; margin-right: 20px; margin-bottom: 20px; overflow: hidden; position: relative }
.gal li span { display: block; position: absolute; background: #dedee5 }
.gal li span.t { width: 100%; height: 0; left: 0; top: -1px }
.gal li span.l { width: 0; height: 100%; left: -1px; bottom: 0 }
.gal li span.r { width: 0; height: 100%; right: -1px; top: 0 }
.gal li span.b { width: 100%; height: 0; right: 0; bottom: -1px }
.gal li.eg { margin-right: -20px }
.gal .mb120 { margin-bottom: 60px !important }
.gal .mb50 { margin-bottom: 20px !important }

#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 9001; display: none }
#lay .photo { opacity: 0; margin-top: 0; width: 100%; height: auto }
#lay .next { position: absolute; right: 10px; top: auto; bottom: 20px; margin-top: 0; cursor: pointer }
#lay .next img { width: 50px; height: 50px }
#lay .prev { position: absolute; left: 10px; top: auto; bottom: 20px; margin-top: 0; cursor: pointer }
#lay .prev img { width: 50px; height: 50px }
#lay .close { position: absolute; right: 0; top: 0; cursor: pointer }

#map-canvas { height: 360px !important }

#inquiry th { width: auto; font-size: 13px; white-space: normal }
#inquiry th span { color: #C00; }
#inquiry .form-box01 { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; padding: 0 10px border:1px solid #cdcac8; width: 200px; height:40px; font-size: 16px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#inquiry select { font-size: 16px }
#inquiry textarea { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; border:1px solid #cdcac8; width:98%; height:110px; font-size: 16px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:10px 0 }

/* mailform */
.text-success { padding: 40px; font-size: 16px; font-weight: bold }
.text-danger { padding: 40px; font-size: 16px; color: #C00; font-weight: bold }
#button_default, .MyMailForm_btn { border: solid 1px #dedee5; background: #f5f5fc; font-size:15px; letter-spacing: 0.2em; padding:16px 0; cursor:pointer; width:90%; margin: 0 5% }
#button_default:hover, .MyMailForm_btn:hover { background:#dedee5;  }

#inquiry .mb80 { margin-bottom: 40px !important }
#inquiry .mb40 { margin-bottom: 20px !important }

.flow p span { border: solid 1px #dedee5; background: #f9f9fc; padding: 15px 10px; display: inline-block; width: 90%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }

.terms ol { margin-left: 2em; padding: 0 20px }
.terms li { list-style-type: disc; list-style-position: outside; margin-bottom: 1em; font-weight: 300 }

.faq h3 span { font-size: 24px }
	
.btn_link a { font-family: 'GreycliffCF-Bold'; border: solid 1px #dedee5; background: #f5f5fc; width: 240px; padding: 8px 0; display: block; text-align: center; margin: 0 auto }
.btn_link a:hover { background: #dedee5; }

.mr0 { margin-right: 0 !important }

.wid1 { width: 100% !important }
.wid2 { width: 50% !important }
.wid3 { width: 33.333% !important }
.wid4 { width: 25% !important }

.pl20 { padding-left: 20px !important }

}


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



}