@charset "utf-8";

/* ページセット
-------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	html { overflow-y: scroll; }
	body { color: #000; }
}
@media screen and (max-width: 767px) {
	body { -webkit-text-size-adjust: 100%; color: #000; }
	img { max-width: 100%; height: auto; width /***/:auto; }
}

@media screen and (min-width: 768px) {
	.forSP { display: none; }
	.forPC { display: inline; }
}
@media screen and (max-width: 767px) {
	.forSP { display: inline; }
	.forPC { display: none; }
}


@media screen and (min-width: 768px) {
	header { border-bottom: 1px solid #dadada!important; }
}
@media screen and (max-width: 767px) {
	header,
	footer,
	#global_bc { background: #fff; }
	#annotation { margin-top: 0; }
	footer { margin-bottom: 107px!important; padding-bottom: 10px!important; }
}

@media screen and (min-width: 768px) {
	#contentsWrap { position: relative; background: url(../images/common/bg.jpg) center top no-repeat; background-size: cover; background-attachment: fixed; }
	#contents { position: relative; padding-bottom: 20px; }
	#contents h1 { text-align: center; margin: 0 auto; width: 977px; height: 527px; background: url(../images/common/logo_jarasta_G6.png) center top no-repeat; text-indent: -9999px; }
	#contents h1 a { display: block; margin: 0 auto; width: 500px; height: 220px; }

	.contentsBody { position: relative; margin: -280px auto 0 auto; width: 980px; border: 6px solid #7c370a; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 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; }
	.contentsInner { margin: 0 auto; padding-bottom: 25px; border: 3px solid #d5b75d; background: rgba(255,255,255,0.88); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-sizing: border-box; }
	.contentsBody.double { margin-top: 0; width: 470px; box-sizing: border-box; }
	.contentsBody.adjust { margin-top: 50px; }
	.titleCategory { margin: -40px auto 5px auto; text-align: center; }

	#contents p.introduction { margin-bottom: 20px; text-align: center; font-size: 2.0rem; font-weight: bold; line-height: 1.4; }
	#contents div.introduction { position: relative; padding: 20px 0; background: rgba(255,238,0,0.55); box-sizing: border-box; }
	#contents div.introduction p { text-align: center; font-size: 1.8rem; line-height: 1.5; }
	#contents div.introduction p.adjust { padding-top: 30px; }
	#contents dl.introduction { display: table; width: 100%; padding: 20px 0; background: rgba(255,238,0,0.55); box-sizing: border-box; }
	#contents dl.introduction dt { display: table-cell; width: 34%; vertical-align: middle; text-align: right; }
	#contents dl.introduction dt img { margin-right: 10px; width: 217px; height: 93px; }
	#contents dl.introduction dd { display: table-cell; width: 66%; vertical-align: middle;  }
	#contents dl.introduction dd p { text-align: left; font-size: 1.8rem; line-height: 1.5;  }

	#chara01 { position: absolute; top: -210px; left: 40px; z-index: 100; }
	#chara02 { position: absolute; top: -210px; right: 25px; z-index: 100; }
}

@media screen and (max-width: 767px) {
	body,
	#contentsWrap { background: none; }    
	body::before { content: ""; display: block; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: url(../images/common/bg.jpg) center top no-repeat; background-size: auto 100%; z-index: -1; }
	#contents { margin: 0 auto; background: url(../images/common/flash.png) center top no-repeat; background-size: contain; }
	#contents h1 { margin: 0 auto 10px auto; padding: 0; text-align: center; }
	.contentsBody { position: relative; margin: 0 10px; border: 6px solid #7c370a; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 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; }
	.contentsInner { margin: 0 auto; border: 3px solid #d5b75d; background: rgba(255,255,255,0.88); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-sizing: border-box; }

	.titleCategory { margin-top: -7%; padding: 0; text-align: center; z-index: 10000; }
	.titleCategory.single img { height: 11.875vw; }
	.titleCategory.double img { height: 19.21875vw; }
	/*.titleCategory.triple img { height: 28.90625vw; }*/
	.titleCategory.triple img { height: 23.90625vw; }
	.titleCategory.adjust { margin-top: -20px; }

	#chara01 { display: none; }
	#chara02 { display: none; }

	#contents p.introduction { padding: 3px 10px 10px 10px; font-size: 1.5rem; text-align: center; font-weight: bold; line-height: 1.5; }
	#contents div.introduction { margin-top: 5px; padding: 10px 12px; background: rgba(255,238,0,0.55); box-sizing: border-box; line-height: 1.5; font-size: 1.2rem; }
	#contents dl.introduction  { }
	#contents .introduction dt { margin-top: -5px; text-align: center; padding: 0 30px 10px 30px;}
	#contents .introduction dd { }
	#contents .introduction dd p { text-align: left; font-size: 1.2rem; line-height: 1.5; }
	#contents .introduction .iconLimited { position: relative; float: right; margin: -15px -10px 0 0; width: 100px;-moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); }
}


@media screen and (min-width: 768px) {
	#navWrap { position: fixed; left: 0; bottom: 0; width: 100%; height: 99px; background: url(../images/common/bg_nav.png) 0 0 repeat-x; z-index: 10000; }
	#nav { margin: 17px auto 8px auto; width: 980px; height: 74px; background: url("../images/common/nav_close.png") 0 0 no-repeat; }
	#nav li { float: left; width: 162px; height: 74px; text-indent: -9999px; }
	#nav li a { display: block; width: 162px; height: 74px; }
	#nav li#navIchioshi,
	#nav li#navIchioshi a { width: 166px; }
	#nav li#navGoods,
	#nav li#navGoods a { width: 166px; }
	
	#nav li#navIchioshi a:hover,
	.categoryIchioshi #navIchioshi a { background: url(../images/common/nav.png) 0 -74px no-repeat; }	
	#nav li#navHowto a:hover,
	.categoryHowto #navHowto { background: url(../images/common/nav.png) -166px -74px no-repeat; }
	#nav li#navCard	a:hover,
	.categoryCard #navCard { background: url(../images/common/nav.png) -328px -74px no-repeat; }
	#nav li#navJara a:hover,
	.categoryJara #navJara   { background: url(../images/common/nav.png) -490px -74px no-repeat; }
	#nav li#navEvent a:hover,
	.categoryEvent #navEvent { background: url(../images/common/nav.png) -652px -74px no-repeat; }
	#nav li#navGoods a:hover,
	.categoryGoods #navGoods { background: url(../images/common/nav.png) -814px -74px no-repeat; }
	
	/*#navTxtWrap { height: 45px; background: url(../images/common/footerlink.gif) 0 0 repeat-x; }
	#navTxt { margin: 0 auto; width: 980px; }
	#navTxt li { float: left; line-height: 45px; font-size: 1.5rem; font-weight: bold; }
	#navTxt #navSearch  { margin-right: 25px; padding-left: 38px; background: url(../images/common/icon_search.png) left center no-repeat; background-size: 34px auto; }
	#navTxt #navMembers { margin-right: 25px; padding-left: 23px; background: url(../images/common/icon_members.png) left center no-repeat; background-size: 20px auto; }
	#navTxt li a { display: inline-block; padding-right: 22px; background: url(../images/common/arrow_r.png) right center no-repeat; background-size: 20px auto; color: #debc6a; line-height: 45px; }
	#navTxt li a:hover { text-decoration: underline; }*/
}

@media screen and (max-width: 767px) {
	#navWrap { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 10000; }
	#nav li { float: left; width: 16.6666666666666666666666666666666666666666666666666%; }
	#nav li img { width: auto; }
	
	#navTxt { padding: 0 7px; box-sizing: border-box; background: #7c370a; }
	#navTxt li { float: left; width: 50%; font-size: 1.2rem; font-weight: bold; box-sizing: border-box; }
	#navTxt #navSearch  { padding-left: 24px; background: url(../images/common/icon_search.png) left center no-repeat; background-size: auto 17px; }
	#navTxt #navMembers { padding-left: 16px; background: url(../images/common/icon_members.png) left center no-repeat; background-size: auto 17px; }
	#navTxt li a { display: inline-block; padding-right: 16px; background: url(../images/common/arrow_r.png) right center no-repeat; background-size: 14px auto; color: #debc6a; line-height: 38px; }
	#navTxt li a:hover { text-decoration: underline; }
	#global_footer { padding-bottom: 17%; }
}

/* footer
-------------------------------------------*/
/* contentFoot */
@media screen and (min-width: 768px) {
	#footer { margin-top: 150px; padding: 0; width: 100%; height: 50px; background: #e6cd84/* url(../images/common/footer_2.gif)*/; }
	#footerInner { margin: 0 auto; width: 980px; }
	#footer #footerNav { position: relative; height: 50px; background: #e6cd84; }
	#footer #footerNav #footerLinkBtn { left: 0; top: 10px; }
	#footer #footerNav li { float: left; text-indent: -9999px; }
	#footer #footerNav li a { display: block; }
/*	#footer #footerNav #footerFaq { position: absolute; left: 0; top: 23px; width: 132px; height: 55px; background:url(../images/common/btn_faq.png) 0 0 no-repeat; }
	#footer #footerNav #footerFaq a { width: 132px; height: 55px; }
	#footer #footerNav #footerFaq a:hover { background:url(../images/common/btn_faq.png) 0 -55px; }*/
	#footer #footerNav #footerRule { position: absolute; left: 0; top: 23px; width: 162px; height: 55px; background:url(../images/common/btn_rule.png) 0 0 no-repeat; }
	#footer #footerNav #footerRule a { width: 162px; height: 55px; }
	#footer #footerNav #footerRule a:hover { background:url(../images/common/btn_rule.png) 0 -55px; }
	#footer #footerNav #footerAbout { position: absolute; left: 172px; top: 23px; width: 165px; height: 55px; background: url(../images/common/btn_about.png) 0 0 no-repeat; }
	#footer #footerNav #footerAbout a { display: block; width: 165px; height: 55px; }
	#footer #footerNav #footerAbout a:hover { background:url(../images/common/btn_about.png) 0 -55px; }
	#footer #footerNav #footerInq { position: absolute; left: 347px; top: 23px; width: 124px; height: 55px; background: url(../images/common/btn_inquiry.png) 0 0 no-repeat; }
	#footer #footerNav #footerInq a { display: block; width: 124px; height: 55px; }
	#footer #footerNav #footerInq a:hover { background:url(../images/common/btn_inquiry.png) 0 -55px; }
	#footer #footerNav .copyright { /*position: absolute; left: 485px; top: 45px; width: 310px; */ padding-top: 15px; text-align: center; }
	#footer #footerNav .copyright img { width: 310px; height: auto; }
	#footer #footerNav #footerTw { position: absolute; left: 815px; top: 10px; width: 80px; height: 80px; background: url(../images/common/btn_tw.png) 0 0 no-repeat; }
	#footer #footerNav #footerFb { position: absolute; right: 0; top: 10px; width: 80px; height: 80px; background: url(../images/common/btn_fb.png) 0 0 no-repeat; }
	#footer #footerNav #footerLinkSns a { display: block; width: 80px; height: 80px; }
	/*#footerCopyright { width: 980px; height: 77px; background: url(../images/common/logo_tta.png) right center no-repeat; text-indent:-9999px; }*/
}

@media screen and (max-width: 767px) {
	#footer { padding: 0; width: 100%; background: #e6cd84; }
	#footer #footerNav { padding-top: 10px; }
	#footer #footerNav #footerLinkBtn { clear: both; padding: 0 10px; box-sizing: border-box; }
	#footer #footerNav li { float: left; }
	#footer #footerNav li span { display: none; }
	#footer #footerNav li a { display: block; padding: 10px 0; background: #fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: center; }
	/* よくある質問あり */
/*	#footer #footerNav #footerFaq { width: 29%; }
	#footer #footerNav #footerFaq img { width: 69px; height: 12px; }*/
	#footer #footerNav #footerRule { width: 32%; }
	#footer #footerNav #footerRule img { width: 87px; height: 11px; }
	#footer #footerNav #footerAbout { margin: 0 2%; width: 32%; }
	#footer #footerNav #footerAbout img { width: 90px; height: 11px; }
	#footer #footerNav #footerInq { width: 32%; }
	#footer #footerNav #footerInq img { width: 66px; height: 11px; }
/*
	#footer #footerNav #footerAbout { float: left; margin-right: 1px; width: 49%; }
	#footer #footerNav #footerAbout img { width: 102px; height: 12px; }
	#footer #footerNav #footerInq { float: right; margin-left: 1%; width: 49%; }
	#footer #footerNav #footerInq img { width: 71px; height: 12px; }*/

	#footer #footerLinkSns { padding: 8px 10px 0 10px; width: 100%; box-sizing: border-box; }
	#footer #footerLinkSns li a { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-indent: -9999px; }
	#footer #footerNav #footerTw { float: left; margin-right: 1px; width: 49%; }
	#footer #footerNav #footerTw a { background: #5ea9dd url(../images/common/btn_tw_sp.png) center center no-repeat; background-size: auto 20px; }
	#footer #footerNav #footerFb { float: right; margin-left: 1%; width: 49%; height: 30px; }
	#footer #footerNav #footerFb a { background: #3b5998 url(../images/common/btn_fb_sp.png) center center no-repeat; background-size: auto 20px; }
	#footer #footerNav #footerLinkSns a { display: block; }
	#footer #footerNav p { clear: both; padding: 10px; line-height: 1.6; color: #7c370a; font-size: 1.1rem; text-align: center; }
	#footerCopyright { height: 42px; background: #fff url(../images/common/logo_tta.png) no-repeat; text-indent:-9999px; background-position : right 10px center; background-size: auto 32px; }
}