@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: 50px 0 80px 0; text-align: center; font-size: 48px; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
.blogArea h1{}
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 30px auto; font-size: 18px; line-height: 50px; border-bottom: 3px solid #2467ec;}


/* con1
-------------------- */
.con1{ background:url("../images/index/con1Bg.png"); background-position: left; background-repeat: no-repeat; background-size: contain;}
.con2{ background: url("../images/index/con2Bg.png"); padding-bottom: 20px;  background-repeat: no-repeat; background-size: contain;}
.con1,.con2{ width: 100%; margin: 0 auto; background-repeat: no-repeat; background-size: cover; padding-top: 100px;}
.con1Inner,.con2Inner{ width: 260px; margin: 0 auto; padding: 200px 0;}
.con1 h1,.con2 h1{ font-size:48px; color: #fff; text-align: center; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}

/* ここからボタンのCSS　*/
.conBox {
  display: inline-block;
  width: 250px;
  margin: 100px auto;
  text-align: left;
  border: 2px solid #fff;
  font-size: 28px; 
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}
.conBox p{ text-align: center; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
.conBox:hover { background-color: #fff; color: #333; opacity: 0.5;}	


/* 「LeftToRight」の動作内容 */
@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-50px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.css-fade1 {
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: LeftToRight;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}

/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(50px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.css-fade2 {
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
	}	
	
	
/* flex指示
-------------------- */
.flexBox { width: 960px; margin: 0 auto; display: flex; padding: 100px 0px; }
.box01{padding: 0 25px 0;}

}

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

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

/* con1
-------------------- */
.con1,.con2{ max-width: 100%; margin: 0 auto; background-repeat:no-repeat; height: 378px; background-size: cover;}	
/*.con1{ background-image: url("../images/sp/index/con1Bg_sp.png"); margin: 100px auto 0 auto;}
.con2{ background-image: url("../images/sp/index/con2Bg_sp.png");}*/
.con1Inner,.con2Inner{ max-width: 90%; margin: 0 auto; padding: 50px 0 120px 0;}
.con1 h1,.con2 h1{ font-size:28px; color: #fff; text-align: center; margin: 0 auto; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
	
/* ここからボタンのCSS　*/
.conBox { border: 1px solid #fff; max-width: 100%; margin: 20px auto 0 auto;}
.conBox p{ text-align: center; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-size:20px;}
.conBox:hover { background-color: #fff; color: #333; opacity: 0.5;}	

.css-fade1 img,.css-fade2 img{ max-width: 100%; margin: 0 auto; padding: 40px 0;}


/* blog
-------------------- */
.blogArea{ max-width: 100%; margin: 0 auto; background-image: url("../images/sp/index/blogBg_sp.png") ;background-repeat: no-repeat; background-size: cover; height: 472px;}
.blog{ max-width: 90%; margin:0px auto; padding:30px 0;}
.blogArea h1{}

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;}*/

}


/* ipad(768px)spの画像表示用
-------------------------------------------------------- */
@media screen and ( max-width:768px ){
.pcHidden { display: none; }
.spHidden { display: block; }
	
/* blog
-------------------- */
.blogArea{ max-width: 100%; margin: 0 auto; background-image: url("../images/sp/index/blogBg_sp.png") ;background-repeat: no-repeat; background-size: cover;  }
.blog{ max-width: 90%; margin:0px auto; padding:30px 0;}
.blogArea h1{ text-align: center; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}

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;}
}

/* ipad(768px)spHidden,pcHiddenを入れていない方
-------------------------------------------------------- */
@media screen and ( max-width:768px ){	
/* con1
-------------------- */
/*.con1,.con2{ max-width: 100%; margin: 0 auto; background-repeat:no-repeat;  background-size: cover;}	*/
.con1Inner,.con2Inner{ padding:120px 0;}
.con1 h1,.con2 h1{ font-size:28px; color: #fff; text-align: center; margin: 0 auto; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}	

/* ここからボタンのCSS　*/
.conBox { border: 1px solid #fff; max-width: 85%; margin: 20px auto 0 auto;}
.conBox p{ text-align: center; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-size:20px;}
.conBox:hover { background-color: #fff; color: #333; opacity: 0.5;}	

.css-fade1 img,.css-fade2 img{ max-width: 100%; margin: 0 auto; padding: 40px 0;}
}


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

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


/* con1
-------------------- */
.con1,.con2{ max-width: 100%; margin: 0 auto; background-repeat:no-repeat; height: 378px;}
.con1{ background-image: url("../images/sp/index/con1Bg_sp.png"); margin: 100px auto 0 auto;}
.con2{ background-image: url("../images/sp/index/con2Bg_sp.png");}
.con1Inner,.con2Inner{ max-width: 50%; margin: 0 auto; padding: 110px 0 80px 0;}
.con1 h1,.con2 h1{ font-size:28px; color: #fff; text-align: center; margin: 0 auto; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
	
/* ここからボタンのCSS　*/
.conBox { border: 1px solid #fff; max-width: 100%; margin: 20px auto 0 auto;}
.conBox p{ text-align: center; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
.conBox:hover { background-color: #fff; color: #333; opacity: 0.5; }	
		
.css-fade1 img,.css-fade2 img{ max-width: 100%; margin: 0 auto; padding: 40px 0 0 0;}


/* blog
-------------------- */
.blogArea{ max-width: 100%; margin: 0 auto; background-image: url("../images/sp/index/blogBg_sp.png") ;background-repeat: no-repeat; background-size: cover; }
.blog{ max-width: 90%; margin:0px auto; padding:30px 0;}
.blogArea h1{ text-align: center; font-weight: bold; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}

ul.box{ max-width:90%; margin:20px auto; overflow: auto;background: rgba(255, 255, 255, 0.65 ); padding:10px 0px 10px 0px;}
ul.box li{float: left;max-width: 90%;margin:0 auto 10px 20px; display: inline-block; font-size: 12px; border-bottom: 3px solid #2467ec;}
/*ul.box li{margin: 0 0 10px 0;padding: 0px 0 10px 20px;}*/
div#blog{ margin: 10px 0; padding: 0px 0 10px 20px;}
			

}

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

.pcHidden { display: none; }
.spHidden { display: block; }
.css-fade1 img,.css-fade2 img{ max-width: 90%; margin: 0 auto;}

}