@charset "UTF-8";
@import "reset5.css";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(//fast.fonts.net/cssapi/85ebac5b-eb75-4962-b1ca-cbc90c7129d4.css);

body { color:#242424; line-height:1; background-color: #eff2f3; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden; font-family: "Linotype Univers","Univers LT", Univers, "Helvetica Neue", Helvetica, Arial, 'Noto Sans JP', sans-serif, YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }
html { min-height: 100%; }

* html body { font-family: "Linotype Univers","Univers LT", Univers, "Helvetica Neue", Helvetica, Arial, 'Noto Sans JP', sans-serif, YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }
*:first-child+html body { font-family:"Linotype Univers","Univers LT", Univers, "Helvetica Neue", Helvetica, Arial, 'Noto Sans JP', sans-serif, YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }

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

iframe { overflow: hidden }

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

.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

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

/* 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; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !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; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt80 { margin-top:80px !important; }


.tx9 { font-size: 9px !important; }
.tx10 { font-size: 10px !important; }
.tx11 { font-size: 11px !important; }
.tx12 { font-size: 12px !important; }
.tx13 { font-size: 13px !important; }
.tx14 { font-size: 14px !important; }
.tx15 { font-size: 15px !important; }
.tx16 { font-size: 16px !important; }
.tx18 { font-size: 18px !important; }
.tx20 { font-size: 20px !important; }
.tx24 { font-size: 24px !important; }
.tx28 { font-size: 28px !important; }
.tx32 { font-size: 32px !important; }
.tx36 { font-size: 36px !important; }
.tx40 { font-size: 40px !important; }

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

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

/* !Links */
a:link { color: #949494; text-decoration: none; }
a:visited { color: #949494; text-decoration: none }
a:hover { color: #646464; text-decoration: underline; }
a:active { color: #469920; text-decoration: none }
a.nb:link { border-bottom: none }

html { margin: 0; padding: 0}
body { margin: 0; padding: 0 }

h3 { font-weight: 400 }

.noscroll {
  position: fixed !important;
  overflow-y: scroll;
}

#wrapper { position: relative; /*background-color: #eff2f3;*/ background: url(../img/bg.jpg) repeat-y; background-size: contain; z-index: 10 }
.bg { position: fixed; left: 0; bottom: 0; z-index: 0 }

.mov { position: relative; background: #e1e2e2 }
.mov #player {  }
.mov .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #e1e2e2 }
.mov #snd { position: absolute; left: 15px; bottom: 10px; cursor: pointer }
.mov #loader { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }

#main { position: relative; background: #e1e2e2 }
#main h1 { position: absolute; left: 5%; top: 50%; margin: -90px 0 0; z-index: 10 }
#main h2 { position: absolute; right: 7%; top: 50%; margin: -16px 0 0; z-index: 10 }
#main img.slide { position: absolute; left: 0; top: 0; z-index: 0; display: none }
#main #bullets { position: absolute; left: 50%; bottom: 15px; z-index: 10; margin-left: -48px }
#main #bullets li { float: left; padding: 4px; cursor: pointer }
#main #loader { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }

#navigation { width: 100%; height: 70px; background: #fff; border-bottom: solid 1px #e7e7e7; position: relative; z-index: 1000 }
#navigation li { width: 20%; float: left }
#navigation li a { display: block; padding: 27px 0 }
#navigation li a span { position: relative }
#navigation li a span .bar { position: absolute; bottom: -10px; left: 0; width: 0; height: 4px; background: #e1e2e2 }
#navigation li.cur a span .bar { background: #231815 }

.sec { padding: 0 7% }

#poster { margin: 120px 0 80px }

#poster .line { position: relative }
#poster .t { position: absolute }
#poster .st { height: 0; overflow: hidden }
#poster .cl, #poster .ct { opacity: 0 }

#line1 .t01 { left: 0; top: 0 }
#line1 .t02 { left: 7.6%; top: 0 }
#line1 .t03 { left: 10.2%; top: 0 }
#line1 .t04 { left: 15.85%; top: 0 }
#line1 .t05 { left: 20.35%; top: 0 }
#line1 .t06 { left: 23.75%; top: 0 }
#line1 .t07 { left: 34.2%; top: 0 }
#line1 .t08 { left: 38.05%; top: 0 }
#line1 .t09 { left: 43.15%; top: 0 }
#line1 .t10 { left: 53.55%; top: 0 }
#line1 .t11 { left: 56.8%; top: 0 }
#line1 .t12 { left: 61.9%; top: 0 }
#line1 .t13 { left: 67%; top: 0 }
#line1 .t14 { left: 74.5%; top: 0 }
#line1 .t15 { left: 80.45%; top: 0 }
#line1 .t16 { left: 84.9%; top: 0 }
#line1 .t17 { left: 90.15%; top: 0 }
#line1 .t18 { left: 94.25%; top: 0 }

#line2 .t01 { left: 0.5%; top: 0 }
#line2 .t02 { left: 12.8%; top: 0 }
#line2 .t03 { left: 25.9%; top: 0 }
#line2 .t04 { left: 38.4%; top: 0 }
#line2 .t05 { left: 52.6%; top: 0 }
#line2 .t06 { left: 64.75%; top: 0 }
#line2 .t07 { left: 74.75%; top: 0 }
#line2 .t08 { left: 84.4%; top: 0 }

#line3 .t01 { left: 0; top: 0 }
#line3 .t02 { left: 23.9%; top: 0 }
#line3 .t03 { left: 50.6%; top: 0 }
#line3 .t04 { left: 75.3%; top: 0 }

#line4 .t01 { left: 0; top: 0 }
#line4 .t02 { left: 15.45%; top: 0 }
#line4 .t03 { left: 26.8%; top: 0 }
#line4 .t04 { left: 37.4%; top: 0 }
#line4 .t05 { left: 40.35%; top: 0 }
#line4 .t06 { left: 55.2%; top: 0 }
#line4 .t07 { left: 58.9%; top: 0 }
#line4 .t08 { left: 67.9%; top: 0 }
#line4 .t09 { left: 70.25%; top: 0 }
#line4 .t10 { left: 90.8%; top: 0 }

#line5 .t01 { left: 0; top: 0 }
#line5 .t02 { left: 6.35%; top: 0 }
#line5 .t03 { left: 13.05%; top: 0 }
#line5 .t04 { left: 20.9%; top: 0 }
#line5 .t05 { left: 27.75%; top: 0 }
#line5 .t06 { left: 29.95%; top: 0 }
#line5 .t07 { left: 37.4%; top: 0 }
#line5 .t08 { left: 45.7%; top: 0 }
#line5 .t09 { left: 54.65%; top: 0 }
#line5 .t10 { left: 66.9%; top: 0 }
#line5 .t11 { left: 74%; top: 0 }
#line5 .t12 { left: 81%; top: 0 }
#line5 .t13 { left: 88.05%; top: 0 }
#line5 .t14 { left: 93.75%; top: 0 }

#line6 .t01 { left: 0; top: 0 }
#line6 .t02 { left: 2.45%; top: 0 }
#line6 .t03 { left: 7.4%; top: 0 }
#line6 .t04 { left: 11.8%; top: 0 }
#line6 .t05 { left: 13.3%; top: 0 }
#line6 .t06 { left: 18.25%; top: 0 }
#line6 .t07 { left: 23.05%; top: 0 }
#line6 .t08 { left: 26.55%; top: 0 }
#line6 .t09 { left: 28.9%; top: 0 }
#line6 .t10 { left: 35.65%; top: 0 }
#line6 .t11 { left: 39%; top: 0 }
#line6 .t12 { left: 48.1%; top: 0 }
#line6 .t13 { left: 52.9%; top: 0 }
#line6 .t14 { left: 60.7%; top: 0 }
#line6 .t15 { left: 64.8%; top: 0 }
#line6 .t16 { left: 71.6%; top: 0 }
#line6 .t17 { left: 76.35%; top: 0 }
#line6 .t18 { left: 81.4%; top: 0 }
#line6 .t19 { left: 86%; top: 0 }
#line6 .t20 { left: 90.8%; top: 0 }

#line7 .t01 { left: 0; top: 0 }
#line7 .t02 { left: 9.6%; top: 0 }
#line7 .t03 { left: 24.3%; top: 0 }
#line7 .t04 { left: 28.35%; top: 0 }
#line7 .t05 { left: 35.2%; top: 0 }
#line7 .t06 { left: 37.6%; top: 0 }
#line7 .t07 { left: 45.9%; top: 0 }
#line7 .t08 { left: 53.3%; top: 0 }
#line7 .t09 { left: 61.25%; top: 0 }
#line7 .t10 { left: 63.5%; top: 0 }
#line7 .t11 { left: 71%; top: 0 }
#line7 .t12 { left: 78.5%; top: 0 }
#line7 .t13 { left: 81.35%; top: 0 }
#line7 .t14 { left: 91.15%; top: 0 }

#line8 .t01 { left: 0; top: 0 }
#line8 .t02 { left: 6.25%; top: 0 }
#line8 .t03 { left: 11.4%; top: 0 }
#line8 .t04 { left: 14.2%; top: 0 }
#line8 .t05 { left: 19.3%; top: 0 }
#line8 .t06 { left: 23.7%; top: 0 }
#line8 .t07 { left: 24.95%; top: 0 }
#line8 .t08 { left: 31.1%; top: 0 }
#line8 .t09 { left: 39.2%; top: 0 }
#line8 .t10 { left: 45.2%; top: 0 }
#line8 .t11 { left: 53.25%; top: 0 }
#line8 .t12 { left: 57.5%; top: 0 }
#line8 .t13 { left: 61.95%; top: 0 }
#line8 .t14 { left: 67.2%; top: 0 }
#line8 .t15 { left: 71.1%; top: 0 }
#line8 .t16 { left: 75.85%; top: 0 }
#line8 .t17 { left: 81.65%; top: 0 }
#line8 .t18 { left: 89.65%; top: 0 }
#line8 .t19 { left: 92.75%; top: 0 }
#line8 .t20 { left: 95.75%; top: 0 }

#information { opacity: 0; padding-top: 40px }
#information h1 { margin: 0 0 80px }
#information .stetement {}
#information .stetement .fltL { width: 50%; text-align: left }
#information .stetement .fltL .pr { padding-right: 40px }
#information .map .logo { margin: 40px 0 }
#map-canvas { width: 100%; }
#information .sponcer { padding: 120px 0 }
#information .sponcer a { margin: 0 40px; display: inline-block }

#btn_menu { display: none }
#gotop { position: fixed; right: 15px; bottom: -60px; z-index: 10; cursor: pointer }

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


#statement { margin: 120px 0 120px }
#statement .statement_inner { font-family: "游明朝体", "Yu Mincho", YuMincho, serif; letter-spacing: 0.04em; text-align: left; margin: 0 0 80px }
#statement .statement_inner .l { width: 43%; padding-left: 7%; float: left }
#statement .statement_inner .r { width: 43%; padding-left: 7%; float: left }

#movie { margin: 0 0 120px }
#movie ul { margin: 0 -25px }
#movie ul li { width: 33.3%; float: left }
#movie ul li .inner { padding: 0 25px }
#movie ul li a {  display: block; overflow: hidden; cursor: pointer }
#movie ul li p { margin-top: 10px }
#movie ul.txtC li { margin: 0 33.3% }

#graphic { margin: 0 0 120px }
#graphic ul { margin: 0 -25px }
#graphic ul li { width: 25%; float: left }
#graphic ul li .inner { padding: 0 25px 50px }
#graphic ul li a {  display: block; overflow: hidden; cursor: pointer }
#graphic ul li p { margin-top: 10px }


#photo { margin: 0 0 120px }
#photo .gal {}
#photo .gal li { float: left; width: 20%; overflow: hidden; margin: 0 0 20px; cursor: pointer; opacity: 0.5 }
#photo .gal li a { position:relative; display:block; }

#foot { padding: 0 7% 120px }


#lay { position: fixed; left: 0; top: 0; width: 0; height: 100%; background: #eff2f3; text-align: center; z-index: 1002; display: none }
#lay .photo { opacity: 0; margin-top: 0; }
#lay .next { position: absolute; left: 50%; bottom: 20px; margin-left: 60px; cursor: pointer }
#lay .prev { position: absolute; left: 50%; bottom: 20px; margin-left: -120px; cursor: pointer }
#lay .close { position: absolute; right: 30px; top: 30px; cursor: pointer }
#lay .loader { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000; display: none }
#lay p.num { position: absolute; left: 50%; bottom: 20px; margin-left: -80px; color: #231815; width: 160px; text-align: center; font-size: 16px; letter-spacing: 0.2em; font-weight: 200; z-index: 1000 }
#lay p.num span { font-size: 40px; letter-spacing: 0.24em; }
#lay .mv { position: absolute; left: 50%; top: 50%; width: 960px; height: 540px; margin: -270px 0 0 -480px }


@media screen and (max-width: 760px){
	
body { font-size:13px; line-height: 1; }	

.mov #snd { position: absolute; left: 5px; bottom: 5px; cursor: pointer }
.mov #snd img { width: 30px }

#main { position: relative; background: #e1e2e2 }
#main h1 { position: absolute; left: 50%; top: 50%; margin: -60px 0 0 -60px; z-index: 10 }
#main h1 img { width: 120px; }
#main h2 { position: absolute; right: 0; top: 100%; margin: 40px 0 0; width: 100%; text-align: center; z-index: 10 }
#main h2 img { height: 18px; }
#main img.slide { position: absolute; left: 0; top: 0; z-index: 0; display: none }
#main #bullets { position: absolute; left: 50%; bottom: 5px; z-index: 10; margin-left: -48px }
#main #bullets li { float: left; padding: 4px; cursor: pointer }
#main #loader { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }

#navigation { width: 100%; height: auto; background: #fff; border-bottom: solid 1px #e7e7e7; position: fixed; left: 0; top: 0; z-index: 1000; display: none }
#navigation li { width: 100%; float: none; border-bottom: solid 2px #231815 }
#navigation li a { display: block; padding: 30px 0 }
#navigation li a span { position: relative }
#navigation li a span .bar { position: absolute; bottom: -10px; left: 0; width: 0; height: 4px; background: #e1e2e2 }
#navigation li.cur a span .bar { background: #231815 }

.sec { padding: 0 7% }

#poster { margin: 60px 0 40px }

#poster .st { height: 100%; overflow: hidden }
#poster .cl, #poster .ct { opacity: 1 }

#information { opacity: 1; padding-top: 0 }
#information h1 { margin: 0 0 40px }
#information .stetement {}
#information .stetement .fltL { width: auto; text-align: left; float: none; margin-bottom: 20px }
#information .stetement .fltL .pr { padding-right: 0 }
#information .map .logo { margin: 20px 0 }
#information .map .logo img { width: 120px }
#map-canvas { width: 100%; }
#information .sponcer { padding: 60px 0 }
#information .sponcer a { margin: 0 10px; display: inline-block }
#information .sponcer a img { height: 15px }

#btn_menu { display: block; position: fixed; right: 0; top: 0; z-index: 1000; cursor: pointer }
#gotop { position: fixed; right: 5px; bottom: -60px; z-index: 10; cursor: pointer }
#gotop img { width: 30px }

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

#statement { margin: 120px 0 60px }
#statement .statement_inner { font-family: "游明朝体", "Yu Mincho", YuMincho, serif; letter-spacing: 0.04em; text-align: left; margin: 0 0 80px }
#statement .statement_inner .l { width: auto; padding-left: 0; float: none; margin-bottom: 4em }
#statement .statement_inner .r { width: auto; padding-left: 0; float: none }
#statement h2 img { width: 100%; height: auto }

#movie { margin: 0 0 60px }
#movie ul { margin: 0 }
#movie ul li { width: 100%; float: none; margin-bottom: 20px }
#movie ul li .inner { padding: 0 }
#movie ul li a {  display: block; overflow: hidden; cursor: pointer }
#movie ul li p { margin-top: 5px }
#movie ul.txtC li { margin: 0 auto }

#graphic { margin: 0 0 60px }
#graphic ul { margin: 0 -12px }
#graphic ul li { width: 100%; float: left }
#graphic ul li .inner { padding: 0 12px 25px }
#graphic ul li a {  display: block; overflow: hidden; cursor: pointer }
#graphic ul li p { margin-top: 10px }


#photo { margin: 0 0 40px }
#photo .gal {}
#photo .gal li { float: left; width: 50%; overflow: hidden; margin: 0 0 20px; cursor: pointer; opacity: 0.5 }
#photo .gal li a { position:relative; display:block; }

#foot { padding: 0 7% 60px }

#lay { position: fixed; left: 0; top: 0; width: 0; height: 100%; background: #eff2f3; text-align: center; z-index: 1002; display: none }
#lay .photo { opacity: 0; margin-top: 0; }
#lay .next { position: absolute; left: 50%; bottom: 20px; margin-left: 60px; cursor: pointer }
#lay .prev { position: absolute; left: 50%; bottom: 20px; margin-left: -106px; cursor: pointer }
#lay .close { position: absolute; right: 15px; top: 15px; cursor: pointer }
#lay .loader { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000; display: none }
#lay p.num { position: absolute; left: 50%; bottom: 20px; margin-left: -80px; color: #231815; width: 160px; text-align: center; font-size: 16px; letter-spacing: 0.2em; font-weight: 200; z-index: 1000 }
#lay p.num span { font-size: 40px; letter-spacing: 0.24em; }
#lay .mv { position: absolute; left: 50%; top: 50%; width: 100%; height: 200px; margin: -100px 0 0 -50% }

}


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

}