@charset "UTF-8";
/* pc
-------------------------------------------------------- */
@media screen and ( min-width:641px ){
.pcHidden { display: block; }
.spHidden { display: none; }


/* blog
-------------------- */
.blogArea{ width: 100%; margin: -20px auto 0 auto; background-image: url("../images/index/blogBg.png") ;background-repeat: no-repeat; background-size: cover; }
.blog{ width:840px; margin:0px auto; padding:100px 0;}
.blogArea h1{ padding: 100px 0 80px 0;}
ul.box{ width:840px; margin:0 auto; height: 500px;overflow: auto;background: rgba(255, 255, 255, 0.65 ); padding:20px 0px 0px 0px;}
ul.box li{width: 780px;margin:0 auto 10px auto; font-size: 26px; line-height: 50px;}
/*ul.box li{margin: 0 0 10px 0;padding: 0px 0 10px 20px;}*/
div#blog{ margin: 10px 0;padding: 0px 0 10px 20px;}

.banner img{ width: 640px; margin: 0 auto; padding: 50px 0 0 0; color: #fff; cursor: pointer; transition: all 0.3s ease 0s;}
.banner img:hover { opacity: 0.6;}

/* con1
-------------------- */
.con1{ width: 100%; margin: 0 auto; background-image: url("../images/index/con1Bg.png") ;background-repeat: repeat; background-size: contain;}
.con1Inner{ width: 960px; margin: 0 auto;}
/* flex指示
-------------------- */
.flexBox { width: 960px; margin: 0 auto; display: flex; padding: 100px 0px; }
.box01{padding: 0 25px 0;}


/* mapArea
-------------------- */
.mapArea{ width: 100%; margin: 0 auto; background-image: url("../images/index/mapBg.png") ;background-repeat: no-repeat; background-size: cover;}
.mapArea h1{ color: #fff; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-weight: bold; font-size: 36px; text-align: center;}
.mapArea h2{ color: #fff; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-weight: bold; font-size:24px;}
.mapAreInner{ width: 960px; margin: 0 auto;}
.mapTextArea{ width: 960px; margin: 0 auto; display: inline-block; padding: 100px 0;}
.map{ float: right; width: 600px; height: 450px; }
.mapText{ float: left;}
.mapText p{ color: #fff;font-size: 18px;}

}

/* ipad
-------------------------------------------------------- */
@media screen and ( max-width:1024px ){

.pcHidden { display: none; }
.spHidden { display: block; }

.blogArea h1{ text-align: center;}
.blogArea h1 img{ width: 90%;}	

/* con1
-------------------- */
.con1{ max-width: 100%; margin: 0 auto; background-image: url("../images/index/con1Bg.png") ;background-repeat: repeat; background-size: contain;}
.con1Inner{ max-width: 90%; margin: 0 auto; padding: 0px 0;}
.con1 img{ max-width:100%; padding: 20px 0;}
.flexBox{ display: block;} 
.box01{ }
}


/* sp
-------------------------------------------------------- */
@media screen and ( max-width:640px ){

.pcHidden { display: none; }
.spHidden { display: block; }


/* blog
-------------------- */
.blogArea{ width: 100%; margin: 0 auto; background-image: url("../images/sp/index/blogBg_sp.png") ;background-repeat: no-repeat; background-size: cover; }
.blog{ max-width: 100%; margin:0px auto; padding:30px 0;}
.blogArea h1{ text-align: center;}
.blogArea h1 img{ width: 90%;}
ul.box{ max-width:90%; margin:20px auto; overflow: auto;background: rgba(255, 255, 255, 0.65 ); padding:20px 0px 0px 0px;}
ul.box li{float: left;max-width: 90%;margin:0 auto 10px 20px;}
/*ul.box li{margin: 0 0 10px 0;padding: 0px 0 10px 20px;}*/
div#blog{ margin: 10px 0;padding: 0px 0 10px 20px;}

.banner { max-width:90%; margin: 0 auto;}	
.banner img{ max-width: 100%; margin: 0 auto; color: #fff; cursor: pointer; transition: all 0.3s ease 0s;}
.banner img:hover { opacity: 0.6;}

/* con1
-------------------- */
.con1{ max-width: 100%; margin: 0 auto; background-image: url("../images/index/con1Bg.png") ;background-repeat: repeat; background-size: contain;}
.con1Inner{ max-width: 90%; margin: 0 auto; padding: 30px 0;}
.con1 img{ max-width:100%; padding: 20px 0;}

/* mapArea
-------------------- */
.mapArea{ max-width: 100%; margin: 0 auto; background-image: url("../images/index/mapBg.png") ;background-repeat: no-repeat; background-size: cover;}
.mapArea h1{ color: #fff; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-weight: bold; font-size: 24px; text-align: center; padding: 30px 0 10px 0;}
.mapArea h2{ color: #fff; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-weight: bold; font-size:20px; text-align: center;}
.mapAreInner{ max-width: 90%; margin: 0 auto;}
.mapTextArea{ max-width: 90%; margin: 0 auto; padding: 50px 0 30px 0;}
.map{ width: 100%; margin: 0 auto; text-align: center;}
.mapText{ }
.mapText p{ color: #fff;font-size: 16px; text-align: center;}

}