@charset "utf-8";

@media screen and (min-width: 768px) {
	.categoryTop #main {  text-align: center; margin: 0 auto; width: 100%; background: url("../images/index/top_main_last.png") center top no-repeat; }
	.categoryTop #main h1 { width: 956px; padding-top: 377px; height: 636px; background-image: none; box-sizing: border-box; text-indent: -9999px; }
	.categoryTop #main h1 /*a { display: block; margin: 0;  height: 210px; width: 210px; }*/

	.categoryTop #about { margin: 15px auto 100px auto; position: relative; background: #f00 }
	.categoryTop #about.contentsBody { margin-top: 0; } /* アンケートあり */
	.categoryTop #about.contentsBody { margin-top: 100px; } /* アンケートなし */
	.categoryTop #about .contentsInner { height: 243px; }
	.categoryTop #about h2 { position: absolute; top: -48px; left: 25px;  }
	.categoryTop #about dt { position: absolute; top: 68px; left: 28px; font-size: 20px; font-weight: bold; text-align: left; line-height: 1.5; }
	.categoryTop #about dd { position: absolute; top: 135px; left: 25px; }
	.categoryTop #about .chara { position: absolute; right: -48px; bottom: -20px; }
	
	.categoryTop #jara { position: relative; margin: 20px auto 0 auto; width: 888px; }
	.categoryTop #jara h2 { margin-bottom: 5px; }
	.categoryTop #jaraInner { width: 888px; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #jara .btnJara { padding: 15px 0 0 0; text-align: center; }
	.categoryTop #jara .chara01 { position: absolute; top: -95px; left: -60px; }
	.categoryTop #jara .chara02 { position: absolute; top: -90px; left: -75px; }
	.categoryTop #jara .chara03 { position: absolute; top: -95px; right: -10px; }

	.categoryTop #pickup { position: relative; margin: 20px auto 0 auto; padding-bottom: 30px; width: 888px; }
	.categoryTop #pickup h2 { margin-bottom: 5px; }
	.categoryTop #pickup .chara01 { position: absolute; top: -125px; left: -60px; }
	.categoryTop #pickup .chara02 { position: absolute; top: -125px; left: -75px; }
	.categoryTop #pickup .chara03 { position: absolute; top: -125px; right: -10px; }
	.categoryTop #pickup .slider { padding-bottom: 40px;  width: 888px; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; background: #fff; }

	.categoryTop #message { margin: -30px auto 20px auto; width: 880px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	.categoryTop #message p { padding: 20px; font-size: 1.6rem; line-height: 2.0; text-align: left; }
    
	.categoryTop #message2 { margin: 15px auto 0 auto; width: 880px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
    .categoryTop #message2 h2 { margin: 0 20px 20px 20px; padding: 30px 0 20px 0; font-size: 2.8rem; font-weight: bold; border-bottom: 2px solid #7c370a; color: #7c370a; }
	.categoryTop #message2 p { padding: 0 20px 20px 20px; font-size: 1.6rem; line-height: 1.8; text-align: left; }

	.categoryTop #news { position: relative; margin: 50px auto 0 auto; width: 788px; height: 427px; background: url(../images/index/bg_news.png) 0 0 no-repeat; }
	.categoryTop #news h2 { margin-bottom: 10px; text-align: center; }
	.categoryTop #news h2 img { margin-top: -20px; }
	.categoryTop #news #newsInner ul { margin: 0 auto; padding-bottom: 10px; width: 640px; text-align: left; height: 280px; overflow: auto; box-sizing: border-box; }
	.categoryTop #news dl { display: table; padding: 13px 0 10px 0 /*18px 0 15px 0;*/; width: 100%; background: url(../images/common/border.png) 0 0 repeat-x; overflow: auto; }
	.categoryTop #news dt { display: table-cell; padding: 8px 0 3px 36px; width: 160px; color: #7c370a; font-size: 1.4rem; /*1.6rem;*/ font-weight: bold; vertical-align: middle; box-sizing: border-box; }
	.categoryTop #news dl.icon01 dt { background: url(../images/index/news_icon_01.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon02 dt { background: url(../images/index/news_icon_02.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon03 dt { background: url(../images/index/news_icon_03.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon04 dt { background: url(../images/index/news_icon_04.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon05 dt { background: url(../images/index/news_icon_05.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon06 dt { background: url(../images/index/news_icon_06.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon07 dt { background: url(../images/index/news_icon_07.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon08 dt { background: url(../images/index/news_icon_08.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon09 dt { background: url(../images/index/news_icon_09.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dl.icon10 dt { background: url(../images/index/news_icon_10.png) left center no-repeat; background-size: 30px auto; }
	.categoryTop #news dd { display: table-cell; width: 480px; font-size: 1.4rem; /*1.6rem;*/ vertical-align: middle; line-height: 1.6; }
	.categoryTop #news dd a { text-decoration: none; color: #000; }
	.categoryTop #news dd a:hover { text-decoration: underline; }
	.categoryTop #news .more { margin: 10px auto 0 auto; width: 640px; padding: 20px 0 0 0; background: url(../images/common/border.png) 0 0 repeat-x; text-align: center;  }
	.categoryTop #news .more a { font-size: 1.4rem; font-weight: bold; color: #7c370a;  display: inline-block; padding-right: 22px; line-height: 22px; background: url(../images/common/arrow_02.png) right center no-repeat; background-size: 20px auto; }
	.categoryTop #news .more a:hover { text-decoration: underline; }
	.categoryTop #news .chara01 { position: absolute; top: -70px; left: -110px;  display: none; }
	.categoryTop #news .chara02 { position: absolute; top: -45px; left: 60px; }
	.categoryTop #news .chara03 { position: absolute; top: -70px; right: -50px;  display: none; }
	.categoryTop #news .chara04 { position: absolute; top: -70px; left: -110px;  /*position: absolute; left: -120px; bottom: 50px; */}
	.categoryTop #news .chara05 { position: absolute; top: -70px; right: -115px; /*position: absolute; right: -105px; bottom: 40px; */}
	.categoryTop #news dd .new { padding: 3px 7px; color: #fff; background: #e10000; font-size: 1.2rem; font-weight: bold; font-family: Verdana, Geneva, "sans-serif";}
	.categoryTop #news .hide { display: none; }
	
	.categoryTop #hteq { margin: 90px auto 0 auto; width: 980px; }
	.categoryTop #hteq .contentsInner { height: 233px; }
	.categoryTop #hteq h2 { position: absolute; top: -35px; left: 25px; }
	.categoryTop #hteq dt { position: absolute; top: 68px; left: 32px; font-size: 16px; font-weight: bold; text-align: left; line-height: 1.6; }
	.categoryTop #hteq dd { position: absolute; top: 128px; left: 22px; }
	.categoryTop #hteq .charaHt { position: absolute; left: 250px; top: -50px; }
	.categoryTop #hteq .charaSh { position: absolute; right: 0px; bottom: -40px; }
	
	/* 動画ひとつ */
	.categoryTop #movie { margin: 50px auto 0 auto; width: 860px; }
	.categoryTop #movie #youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.categoryTop #movie .btnMovie { padding: 15px 0 0 0; text-align: center; } 
	
	
	/* 動画ふたつ
	.categoryTop #movie { position: relative; margin: 200px auto 0 auto; width: 980px; }
	.categoryTop #movie h2 { position: absolute; top: -150px; left: 130px; }
	.categoryTop #movie .youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.categoryTop #movie .btnMovie { padding: 15px 0 0 0; text-align: center; } 	
	.categoryTop #movie ul#movieInner { margin: 30px 30px 0 30px; }
	.categoryTop #movie ul#movieInner li { width: 48%; box-sizing: border-box; text-align: center; }
	.categoryTop #movie ul#movieInner li.odd { float: left; margin-right: 2%; }
	.categoryTop #movie ul#movieInner li.even { float: right; margin-left: 2%; }
	.categoryTop #movie ul#movieInner dt { margin-bottom: 15px; }
	.categoryTop #movie ul#movieInner dd { font-size: 16px; font-weight: bold; text-align: center; line-height: 1.6; } */	

	.categoryTop #enquate { margin: 40px auto 30px auto; width: 650px; height: 255px; position: relative; box-sizing: border-box; }
	.categoryTop #enquate .contentsInner { height: 243px; box-sizing: border-box; }
	.categoryTop #enquate h2 { position: absolute; top: -28px; left: 20px;  }
	.categoryTop #enquate dt { position: absolute; top: 80px; left: 20px; font-size: 18px; font-weight: bold; text-align: left; line-height: 1.5; }
	.categoryTop #enquate dd { position: absolute; top: 145px; left: 20px; }
	.categoryTop #enquate .chara { position: absolute; right: -40px; bottom: -20px; }

	.categoryTop #bannerList { margin: 0 auto; padding: 20px 0 40px; width: 500px; }
	.categoryTop #bannerList li { width: 250px; box-sizing: border-box; }
	.categoryTop #bannerList li.odd { float: left; text-align: left; }
	.categoryTop #bannerList li.even { float: right; text-align: right; }
	.categoryTop #bannerList li img { width: 248px; height: 78px; }	
}

@media screen and (max-width: 767px) {
	.fr { float: none; }
	.categoryTop #main { position: relative; overflow: hidden; }
	.categoryTop #main h1 { display: none; }
	.categoryTop #membersLink { margin: -13% 0 30px 6px; }
	.categoryTop #jara { position: relative;  margin: 0 10px 0 10px; }
	.categoryTop #jara h2 { margin-bottom: 5px; text-align: center; }
	.categoryTop #jara h2 img { height: 45px; width: auto; }
	.categoryTop #jaraInner { border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #jara .btnJara { padding: 15px 0 0 0; text-align: center; }
	.categoryTop #jara .chara01 { position: absolute; top: -65px; left: -10px; display: none; }
	.categoryTop #jara .chara02 { position: absolute; top: -60px; left: -35px; display: none; }
	.categoryTop #jara .chara03 { position: absolute; top: -65px; right: 45px; display: none; }
	.categoryTop #jara .btnJara { padding: 10px 0 0 0; text-align: center; }
	.categoryTop #jara .btnJara img { height: 60px; width: auto; }

	/*.categoryTop #pickup { position: relative; margin: -42% 10px 0 10px; }*/
    .categoryTop #pickup { position: relative; margin: 0 10px 0 10px; }
	.categoryTop #pickup h2 { margin-bottom: 5px; text-align: center; }
	.categoryTop #pickup .chara01 { display: none; }
	.categoryTop #pickup .chara02 { display: none; }
	.categoryTop #pickup .chara03 { display: none; }
	.categoryTop #pickup .slider { padding-bottom: 30px; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; background: #fff; }

	.categoryTop #message { margin: -10px 10px 20px 10px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
	.categoryTop #message p { padding: 15px; font-size: 1.4rem; line-height: 1.6; text-align: left; }

	.categoryTop #message2 { margin: -42% 10px 20px 10px; background: rgba(255,255,255,0.9); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-sizing: border-box; }
    .categoryTop #message2 h2 { margin: 0 20px 20px 20px; padding: 30px 0 20px 0; font-size: 2.2rem; line-height: 1.3; font-weight: bold; border-bottom: 2px solid #7c370a; color: #7c370a; }
	.categoryTop #message2 p { padding: 0 20px 20px 20px; font-size: 1.4rem; line-height: 1.8; text-align: left; }

	.categoryTop #news { position: relative; margin: -5% 0 30px; }
	.categoryTop #news .charaList { display: none; }
	.categoryTop #news h2 { position: absolute; left: 0; top: 0; right: 0; margin-bottom: 10px; text-align: center; }
	.categoryTop #news h2 img { margin-top: 7%; height: 45px; width: auto; }
	.categoryTop #news #newsInner { position: absolute; left: 0; top: 13%; margin: 0 14% 0 16%; text-align: left;  }
	.categoryTop #news #newsInner ul { overflow: auto; height: 95vw;  }
	.categoryTop #news dl { padding: 10px 0 8px 0/* 15px 0 13px 0*/; background: url(../images/common/border.png) 0 0 repeat-x; background-size:  auto 3px; }
	.categoryTop #news dt { margin-bottom: 2px; padding-left: 27px; color: #7c370a; font-size: 3.125vw; font-weight: bold; vertical-align: middle; box-sizing: border-box; line-height: 23px; }
	.categoryTop #news dl.icon01 dt { background: url(../images/index/news_icon_01.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon02 dt { background: url(../images/index/news_icon_02.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon03 dt { background: url(../images/index/news_icon_03.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon04 dt { background: url(../images/index/news_icon_04.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon05 dt { background: url(../images/index/news_icon_05.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon06 dt { background: url(../images/index/news_icon_06.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon07 dt { background: url(../images/index/news_icon_07.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon08 dt { background: url(../images/index/news_icon_08.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon09 dt { background: url(../images/index/news_icon_09.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dl.icon10 dt { background: url(../images/index/news_icon_10.png) left center no-repeat; background-size: 24px auto; }
	.categoryTop #news dd { font-size: 3.125vw; vertical-align: middle; line-height: 1.5; }
	.categoryTop #news dd a { text-decoration: none; color: #000; }
	.categoryTop #news dd a:hover { text-decoration: underline; }
	.categoryTop #news .more { padding: 14px 0 0 0; background: url(../images/common/border.png) 0 0 repeat-x; text-align: center; background-size: auto 3px;  }
	.categoryTop #news .more a { font-size: 3.125vw; font-weight: bold; color: #7c370a;  display: inline-block; padding-right: 18px; line-height: 16px; background: url(../images/common/arrow_02.png) right center no-repeat; background-size: 16px auto; }
	.categoryTop #news .more a:hover { text-decoration: underline; }
	.categoryTop #news dd .new { padding: 2px 4px; color: #fff; background: #e10000; font-size: 3.125vw; font-weight: bold; font-family: Verdana, Geneva, "sans-serif";}
	.categoryTop #news .hide { display: none; }

	.categoryTop .contentsInner { position: relative; width: 100%; float: none!important; }
	.categoryTop .contentsInner h2 { margin: -8% 0 0 10px; }
	.categoryTop .contentsInner h2 img { height: 60px; width: auto; }
	.categoryTop .contentsInner dt { padding: 5px 0 10px 15px; box-sizing: border-box; width: 45%; font-size: 1.2rem; line-height: 1.5;font-weight: bold; }
	.categoryTop .contentsInner dd { padding: 0 0 5px 10px; }
	.categoryTop .contentsInner dd img { height: 55px; width: auto; }
	
	.categoryTop #about { margin-bottom: 40px; }
	.categoryTop #about .chara  { position: absolute; right: -230px; top: -30px; }
	.categoryTop #about .chara img { width: 55%; }
	.categoryTop #about .contentsInner dt { width: 62%; font-weight: bold; }
	.categoryTop #hteq .charaHt { position: absolute; right: 0px; top: -30px; width: 50%; }
	.categoryTop #hteq .charaSh { position: absolute; right: -20px; bottom: -15px; width: 45%; }
	.categoryTop #hteq .charaSh img { width: 60%; }
	.categoryTop #hteq .fl { float: none; margin-bottom: 40px; }

	/* 動画ひとつ*/
	.categoryTop #movie { margin: 20px 10px 30px 10px; }
	.categoryTop #movie #youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.categoryTop #movie .btnMovie { padding: 10px 0 0 0; text-align: center; }
	.categoryTop #movie .btnMovie img { height: 60px; width: auto; } 
	
	/* 動画二つ 
	.categoryTop #movie { position: relative; margin: 70px 10px 0 10px; }
	.categoryTop #movie h2 { position: absolute; top: -35px; left: 17vw;  }
	.categoryTop #movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.categoryTop #movie #movieInner { padding-top: 10px; padding-right: 10px; box-sizing: border-box; }
	.categoryTop #movie #movieInner li { margin-bottom: 15px; }
	.categoryTop #movie #movieInner li.even { margin-bottom: 0; }
	.categoryTop #movie #movieInner dt { padding-right: 5px; width: 100%; box-sizing: border-box; }
	.categoryTop #movie #movieInner .youtube { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border: 4px solid #fff; box-shadow: 0px 0px 10px 2px #000; -moz-box-shadow: 0px 0px 10px 2px #000; -webkit-box-shadow: 0px 0px 10px 2px #000; box-sizing: border-box; }
	.categoryTop #movie #movieInner dd { font-size: 1.2rem; line-height: 1.5;font-weight: bold; text-align: center; }
	.categoryTop #movie .btnMovie { padding: 0 0 0 0; text-align: center; }
	.categoryTop #movie .btnMovie img { height: 65px; width: auto; }*/


	.categoryTop #enquate { margin: 10px 10px 80px 10px; }
	.categoryTop #enquate dt { width: 70%; }
	.categoryTop #enquate dd {  }
	.categoryTop #enquate .chara { position: absolute; right: -10px; top: 0px; width: 37%; }

	.categoryTop #bannerList { margin: 0 3%; width: 94%; }
	.categoryTop #bannerList li { float: left; padding-left: 3px; text-align: right;  width: 50%; box-sizing: border-box; }
	.categoryTop #bannerList li img { }
}
@media screen and (max-width:320px) {
	.categoryTop #about .chara  { position: absolute; right: -190px; top: -10px; width: 100%; }
	.categoryTop #about .chara img { width: 40%; }
	.categoryTop #news dl { padding: 6px 0 4px 0; }
	.categoryTop #newsInner { top: 15%!important;}
	.categoryTop #news #newsInner ul { overflow: auto; height: 95vw; }
	.categoryTop #news .more { padding: 8px 0 0 0; }
	.categoryTop .contentsInner dt { padding: 5px 0 10px 15px; box-sizing: border-box; width: 62%; font-size: 1.2rem; line-height: 1.5; }
	.categoryTop #hteq .charaHt { position: absolute; right: -30px; top: -10px; width: 52%; }
	.categoryTop #hteq .charaSh { position: absolute; right: -20px; bottom: 0px; width: 43%; }
	.categoryTop #hteq .charaSh img { width: 60%; }
	.categoryTop #enquate .chara { position: absolute; right:-10px; top: 10px; width: 30%; }
}

@media screen and (min-width: 768px) {
	#bg { position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000; opacity: 0.8; }
	#first { position: fixed; top: 50%; left: 50%; z-index: 9999; width: 900px; height: 500px; margin: -250px 0 0 -450px; text-align: center; background: #fff; padding: 10px; box-sizing: border-box; }
	#first a { display: block; text-align: center; padding: 10px 0 0 0; text-decoration: none; font-size: 1.6rem; font-weight: bold; color: #444; }
}
@media screen and (max-width: 767px) {
	#bg { position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; min-width: 100%; height: auto; min-height: 100%; background: #000; opacity: 0.8; }
	#first { position: fixed; top: 0; left: 0; margin: 5% 2%; z-index: 9999; width: 96%; text-align: center; background: #fff; padding: 10px; box-sizing: border-box; }
	#first a { display: block; text-align: center; padding: 10px 0 0 0; text-decoration: none; font-size: 1.4rem; font-weight: bold; color: #444; }
}



