@charset "UTF-8";
main{
  overflow: hidden;
  padding-bottom: 60px;
}
.under_mv{
  background: url("../img/mv.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン縦向きレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

#wrap {height: auto; margin:0 auto; background: #ffffff;padding: 80px 30px;display: block;} 

/* #wrap #header{ width:400px; height:40px; margin:0 auto; text-align:left;padding: 0 0 10px 0;}
#wrap #header h1{ padding:0 0 0 0;} */
#wrap #container{ width:400px; margin:0 auto; text-align:left;}
#wrap #container #maincol{ width:400px; padding:0; overflow:hidden;}
#wrap #container #maincol .title{ width:400px;height: 86px; padding:0; background:url(../images/small/maincol_bg_01.gif); background-repeat: no-repeat; overflow:hidden;}
#wrap #container #maincol .cate{ width: 400px; height:30px;margin-top: -30px; text-align:center;padding:0 0 0 0;}
#wrap #container #maincol .section{ width:330px; padding:0px 35px; background:url(../images/small/maincol_bg_02.gif); overflow:hidden; background-repeat: repeat-y;}
#wrap #container #maincol .section ul{ list-style:none; float:left; text-align:center;}
#wrap #container #maincol .section ul li{ width:165px; height:233px; float:left; display:block; color:#fff;}
#wrap #container #maincol .section ul li a{ font-size:10px; display:inline-block;}
#wrap #container #maincol .section ul li span{ padding:10px 0 0 0; line-height:1.2em; display:block; font-size: 1.2rem;}
#wrap #container #maincol .section ul li img{ width:100px; margin: 5px 0 -5px 0; border: 1px solid #999999; position: relative;}
#wrap #container #maincol .section ul li .btn img{ width:45px; border: 0px;}

img.bg{ display:none;}

/* タイトルが2行になる場合 */
.two_lines{
    padding: 5px 0 0 0 !important;
}
.two_lines--btn{
    margin-top: -10px;
}

/* スマートホン横向き または768px以上*/
@media screen and (orientation:landscape),
	   screen and (min-width: 768px) {
/* #wrap #header{ width:750px;} */
#wrap #container{ width:750px;}
#wrap #container #maincol{ width:750px;}
#wrap #container #maincol .title{ width:750px; background:url(../images/medium/maincol_bg_01.gif);height: 86px;}
#wrap #container #maincol .cate{ width:750px;height: 30px;height: 30px;margin-top: -30px;padding: 0 0 0 0;}
#wrap #container #maincol .section{ width:750px; background:url(../images/medium/maincol_bg_02.gif);}
#wrap #container #maincol .section ul li{ width:172px;}

}

/* PC向け及び印刷用レイアウトの指定：1024px以上では固定レイアウト */
@media only screen and (min-width: 1024px), print {
#wrap{ max-width:1100px;}
/* #wrap #header{ width:1000px;} */
#wrap #container{ width:1000px;}
#wrap #container #maincol{ width:1000px;}
#wrap #container #maincol .title{ width:1000px;height: 100px; background:url(../images/large/maincol_bg_01.gif);}
#wrap #container #maincol .cate{ width:1000px;margin-top: -50px;padding: 5px 0 5px 0; height: 40px;}
#wrap #container #maincol .section{ width:930px;width: 100%; background:url(../images/large/maincol_bg_02.gif);}
#wrap #container #maincol .section ul li{ width:186px; height: 253px;}
}
@media screen and ( max-width: 767px ){
  #wrap {padding: 80px 0;}
  body {min-width: 400px;}
  #wrap #container #maincol .section {width: 400px;}

  /* スマホ表示の時タイトルが2行になる場合 */
  .sp_two_lines{
    padding: 5px 0 0 0 !important;
  }
  .sp_two_lines--btn{
    margin-top: -10px;
  }
}