@charset "UTF-8";

/* ==================================================================
CSS information
style info :「INTRODUCTION」 用
================================================================== */


/*#contents { background: url(../_img/introduction/c3_bg.jpg) top center; }
*/
/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
/*
#mainvisual { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 10; }
#mainvisual:before { content: ""; display: block; padding-top: 42%; }
#mv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media screen and (min-width: 1601px) {
#mainvisual { width: 1600px; left: 50%; margin-left: -800px; }
}
*/

#mainvisual { position: absolute; top: 0; width: 100%; left: 0%; height: 672px; z-index: 10; }

#mainvisual #mvpic { position: absolute; top: 0; width: 1600px; left: 50%; margin-left: -800px; height: 672px; }

#mv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 1400px;}
@media screen and (min-width: 1401px) {
#mv-inner { position: absolute; top: 0; left: 50%; width: 1400px; height: 100%; margin-left: -700px; }
}
#mainvisual img { width: 100%; height: auto;}

#wdBlock { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#wdBlock li { position: absolute;}
#wdBlock li img { position: relative;}
#wdBlock .wd_1 { top: 11.1607%; left: 68.4286%; width: 16.4286%;}
#wdBlock .wd_2 { top: 5.8036%; left: 69.0714%; width: 19.5000%;}
#wdBlock .wd_3 { top: 26.0417%; left: 74.5000%; width: 23.5000%;}
#wdBlock .wd_4 { top: 38.8393%; left: 72.7143%; width: 15.2143%;}
#wdBlock .wd_5 { top: 47.3214%; left: 69.4286%; width: 10.0000%;}
#wdBlock .wd_6 { top: 68.0060%; left: 63.2857%; width: 18.0000%;}
#wdBlock .wd_7 { top: 84.8214%; left: 72.4286%; width: 27.2143%;}
#wdBlock .wd_8 { top: 88.8393%; left: 51.3571%; width: 14.1429%;}
#wdBlock .wd_9 { top: 71.8750%; left: 2.2143%; width: 19.2857%;}
#wdBlock .wd_10 { top: 57.7381%; left: 10.7857%; width: 18.0000%;}
#wdBlock .wd_11 { top: 29.4643%; left: 3.2143%; width: 33.0000%;}
#wdBlock .wd_12 { top: 14.1369%; left: 85.2143%; width: 14.7857%;}
#wdBlock .wd_13 { top: 52.8274%; left: 1.9286%; width: 12.5000%;}
#wdBlock .wd_14 { top: 74.5536%; left: 20.1429%; width: 40.0000%;}
#wdBlock .wd_15 { top: 5.0595%; left: 39.6429%; width: 27.8571%;}
#wdBlock .wd_16 { top: 9.5238%; left: 46.2143%; width: 20.2143%;}
#wdBlock .wd_17 { top: 37.5000%; left: 59.1429%; width: 9.7143%;}
#wdBlock .wd_18 { top: 59.2262%; left: 80.7857%; width: 16.7143%;}
#wdBlock .wd_19 { top: 2.3810%; left: 6.5000%; width: 30.3571%;}
#wdBlock .wd_20 { top: 84.2262%; left: 6.4286%; width: 16.0714%;}

.wd_21 { top: 48.2143%; left: 38.5000%; width: 23.1429%; position: absolute;}
.wd_21 img { position: relative;}



/* --------------------------------------------------------
.contents_block
-------------------------------------------------------- */
.contents_block { position: relative; }
.contents_block .inner { position: relative; width: 960px; margin: 0 auto; }


/* #c1
-------------------------------------------------------- */
#c1 { /*background: url(../_img/introduction/c1_bg_r.png) center top repeat-y;*/ position: relative; width: 1600px; left: 50%; margin-left: -800px; height: 672px; }
#c1 img { width: 100%; height: auto;}
#c1 .pic { width: 100%; height: auto; left: 0; margin-left: 0;}

#c1 .ttl { position: absolute; top: 22.0238%; left: 21.9375%; margin-bottom: 37px; width: 27.8334%; max-width: 440px; }
#c1 .text { position: absolute; top: 327px; left: 21.9375%; width: 27.8334%; max-width: 440px; }

@media screen and (min-width: 1601px) {
#c1 .pic { width: 1600px; left: 50%; margin-left: -800px; position: relative; }
}



/* #c2
-------------------------------------------------------- */
#c2 {}
#c2 p { position: absolute;}
#c2 .pic img { position: relative;}

#c2 .block1 { background: url(../_img/introduction/c2_bg1.jpg) top center no-repeat; height: 426px;}
#c2 .block1 .copy { top: 37px; left: 406px;}
#c2 .block1 .text { top: 171px; left: 406px;}
#c2 .block1 .btn { top: 334px; left: 410px; z-index: 100;}
#c2 .block1 .pic { top: -23px; left: -24px;}

#c2 .block2 { background: url(../_img/introduction/c2_bg2.png) top center no-repeat; height: 409px;}
#c2 .block2 .copy { top: 57px; left: 26px;}
#c2 .block2 .text { top: 199px; left: 21px;}
#c2 .block2 .pic { top: -57px; left: 481px; z-index: 10;}




/* #c3
-------------------------------------------------------- */
#c3 { background: url(../_img/introduction/c3_bg.jpg) top center; height: 949px; padding-top: 52px; max-width: 1600px; margin: 0 auto; }
#c3 .copy { text-align: center; margin-bottom: 10px;}
#c3 .text { text-align: center; margin-bottom: 30px;}


#c3 #mapBox { position: relative; width: 600px; margin: 0 auto;}

#c3 #mapBox #btnList { position: absolute; top: 0; left: 0; width: 100%;}
#c3 #mapBox #btnList li { position: absolute;}
#c3 #mapBox #btnList li img { position: relative;}
#c3 #mapBox #btnList .b1 { top: 32px; left: -149px;}
#c3 #mapBox #btnList .b2 { top: 32px; right: -149px;}
#c3 #mapBox #btnList .b3 { top: 179px; left: -149px;}
#c3 #mapBox #btnList .b4 { top: 179px; right: -149px;}
#c3 #mapBox #btnList .b5 { top: 325px; left: -149px;}
#c3 #mapBox #btnList .b6 { top: 313px; right: -149px;}
#c3 #mapBox #btnList .b7 { top: 472px; left: -149px;}
#c3 #mapBox #btnList .b8 { top: 472px; right: -149px;}