@charset "utf-8";


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

.backnumber th,
.backnumber td { width: 100%; display: block; }
.backnumber th { padding: 1em 0 0; border-bottom: none; }
.backnumber td { margin: 0 0 1em; padding: 0; border-bottom: 1px #898989 dotted; }
.backnumber td span { display: block; font-weight: bold; }
.backnumber td ul li { padding: 0 0 0.8em; }
.backnumber td ul li:nth-child(1) { padding-bottom: 1em; }

.business div { width: 100% auto; -js-display: flex; -ms-flex-preferred-size: auto; display: -webkit-box; display: -moz-box; 
				display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
				-webkit-box-pack:justify; -ms-flex-pack:justify; -webkit-justify-content: space-between; justify-content: space-between; *zoom: 1; }
.business div.sort { width: 45%; margin: 0.5em; padding: 0; border: 1px #DDDDDD solid; }
.business p.links_p { height: 6em; text-align: center; } /* parts */

.logob_01 { width: 47%; }
.logob_01 ul li ul { width: 98%; }

/* flex...needed*/ 
.german div.goods { width: 100% auto; -js-display: flex; -ms-flex-preferred-size: auto; display: -webkit-box; display: -moz-box; 
					display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
					-webkit-box-pack:justify; -ms-flex-pack:justify; -webkit-justify-content: space-between; justify-content: space-between; *zoom: 1; }
.german div.goods div { width: 45%; margin: 0.5em; padding: 0; }

} /* 960 */



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

.top_ads {  }

#head { width: 100%; height: 4em; top: -0.3em; }
#head .inner { width: 100%; height: 4em; padding-top: 0; background: none; background-size: 0; }
#head .logo { float: left; width: auto; height: 4em; margin: 0; padding: 0.6em 0.5em 0; }
#head .inner p { display: none; }


/* header#head > div.inner > nav#top-navi > ul.main-menu > ul.sub-menu */
#top-navi { position: absolute; width: 100.5%; left: -65em; top: 5.3em; /* closed*/ margin: 0 auto; padding: 0; border: none; z-index: 990;
			background: #DDDDDD; background: rgba(240, 240, 240, 0.5); 
			-webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
#top-navi ul li a strong { display: inline; font-size: 1em; color: #2b2b2b;}

.main-menu { display: block; position: static; width: 100%; margin: 0; padding: 0; background: #fff; }
.main-menu > li { display: block; position: static; width: 100%; margin: 0 auto; padding: 0; line-height: 1.3em; text-align: left; 
				  background: #fff; border-right: none; border-bottom: 2px #DDDDDD solid; }
.main-menu > li:last-child { border-bottom: none; }
.main-menu > li a { width: 65% auto; display: block; margin: 0; padding: 0.7em 1.5em; }
.main-menu li.home  { position: static; width: 100%; margin: 0 auto; padding: 0; line-height: 1.5em; border-left: none; border-bottom: 2px #DDDDDD solid; }
.main-menu li.home a { display: block; width: 100% auto; margin: 0 auto; padding: 0.7em 1.5em 0; line-height: 1.5em; color: #2b2b2b; }
.main-menu li.home a:hover { display: block; margin: 0; padding: 0.7em 1.5em 0; line-height: 1.5em; background: #F5F5F5; }
.main-menu li.home img { display: none; }
.main-menu li.no-sub  { position: static; width: 100%; margin: 0 auto; padding: 0; border-right: none; }
.main-menu li.no-sub a { display: block; width: 100% auto; margin: 0 auto; padding: 0.7em 1.5em; line-height: 1.5em; color: #2b2b2b; }
.main-menu li label { display: inline-block; position: absolute; right: 0; width: 20%; height: 3.08em; margin: -4.47em 0 0 0; 
							cursor: pointer; background: #fff; padding: 10px; z-index: 1; }
.main-menu li label:hover{ background: #F5F5F5; }
.main-menu li a:hover + label { background: #F5F5F5; }
.main-menu li:hover > label { background: #F5F5F5; } 
.main-menu li:hover > a { background: #F5F5F5; }
.main-menu li input[type="checkbox"].on-off ~ ul  { max-height: 0; overflow: hidden; -moz-transition: max-height 1s ease; 
													-webkit-transition: max-height 1s ease; -ms-transition: max-height 1s ease; 
													-o-transition: max-height 1s ease; transition: max-height 1s ease; }
.main-menu li:hover ul { position: relative; width: 100%; top: 0; left: 0; border: none; }
.sub-menu { position: relative; width: 100%; top: 0; left: 0; list-style: none; border: none; margin: 0; padding: 0; }
.sub-menu li a { padding: 0.9em 2.7em; border-top: 1px #DDDDDD solid; background: #F5F5F5; text-align: left; }
.sub-menu li a:hover { background: #F5F5F5; text-decoration: underline; }
.main-menu li input[type="checkbox"].on-off:checked + label { background: #F5F5F5; }
.main-menu input[type="checkbox"].on-off:checked ~ ul { max-height: 35em; visibility: visible; opacity: 1; }
.main-menu label::after { margin-top: 1em; width: 12px; height: 12px; }

#gsearch-mobile { display: block; position: static; width: 100%; margin: 0 auto; padding: 0; height: 3em; }
#gsearch-mobile form{ margin: 1.5em; text-align: center; }
#gsearch-mobile .gsearch-mobile-span { font-size: 0.9em; color: #898989; }
#gsearch-mobile .c { width: 30%; }
.main-menu li.language-select-mobile { display: block; position: static; width: 100%; margin: 0; padding: 0.5em 0 0; height: 3em; text-align: center; }
.main-menu li.language-select-mobile a { display: inline; margin: 0 0.5em; padding: 0.5em 0 0; background: #fff; }
.main-menu li.language-select-mobile a:hover { background: #fff; }
.main-menu li.language-select-mobile img { margin: 0; padding: 0; border: none; width: 35px; }


/* header#head > div.inner > div#mobil-head > div#navi-toggle ***********/
#mobile-head { width: 100%; height: 5em; margin-top: 0.2em; padding: 0; z-index: 999; background: #fff; 
			   border-top: 2px #DDDDDD solid; border-bottom: 2px #DDDDDD solid; }
#navi-toggle { display: block; }
.open #navi-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); }
.open #navi-toggle span:nth-child(2) { width: 0; left: 50%; }
.open #navi-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
.open #top-navi { -moz-transform: translateX(65em); -webkit-transform: translateX(65em); transform: translateX(65em); }


#main { display: block; margin: 1.5em 0 0;/*don't touch the margin-top */ padding: 0 0.3em 15em; }
#main.contactformmain { padding-bottom: 11em; }
#contents { float: none; width: 100%;/* don't change */ padding: 0 0 2em; }

/***** #main > article#contents > div.d_01 > section.XXX *****/
.s_03 img.newsimg { max-width: 150px; width: 30%;}
.latest_nn table { width: 65%; margin: 0 -10px; }
.latest_nn th, 
.latest_nn td { width: 100%; display: block; }
.latest_nn th { padding: 0; }
.latest_nn td { padding: 0 0 1em; border-bottom: none; }
.latest_nn span.seasonsspan { display: block; }

.logob_01 { width: 48%; }

.impressumtable th,
.impressumtable td { width: 100%; display: block; }
.impressumtable th { padding: 0; }
.impressumtable td { padding: 0 0 0.5em; }


/*****  -- #main > aside#sidebar > div#language-select-pc, div.gsearch-pc, ul.sads, div.faceblink *****/
#sidebar { float: none; width: 100%; border-top: border-bottom: 2px #DDDDDD solid;
		   -webkit-box-shadow: 0 0.7em 0.7em -6px #CACBCB; -moz-box-shadow: 0 0.7em 0.8em -6px #CACBCB; box-shadow: 0 0.7em 0.8em -6px #CACBCB inset; }

#gsearch-pc { display: none; }
#language-select-pc ul li { display: none; }
.sads { padding: 1em; text-align: center; }
.sads li { width: 47%; padding: 0 0.5em; display: inline-block; text-align: center; vertical-align: top; }
.sads li p { display: block; margin: -0.2em 0 0; padding: 0; text-align: center; line-height: 0.6em; }
.sads li p a { text-decoration: none; color: #ff0000; font-weight: normal; font-size: 0.8em; }
.sads li img { margin: 0; padding: 0; width: 100%; border: 1px #DDDDDD solid; }
.nnbloglink img.iroiroblog { width: 30%; margin: 0.5em 1em 0; padding: 0; }


/***** #footer > div.sitemap > div.sm_01, div.sm_02 *********************/
#footer { height: 15em; }
#footer h2{ padding: 0.5em; font-size: 1em; color: #fff; }
#footer.contactformfooter { height: 10em; }
.sitemap { width: 100% auto; height: 7em; margin: 0; padding: 0 1em; line-height: 1.5em; }
.sitemap::after { content: ""; clear: both; display: block; }
.sitemap ul { margin: 0; padding: 0 1em; list-style: none; }
.sitemap ul li { margin: 0; padding: 0; }
.sitemap ul li a { margin: 0; padding: 0; }
.sitemap ul li a:hover  { text-decoration: underline; }
.sm_01 { width: 47%; font-weight: bold; }
.sm_02 { width: 50%; display: block; }
.sm_02 ul li:nth-child(n+2) a { display: none; }
} /* 768 */





/***********************************************************************/
/***** 720 *************************************************************/
/***********************************************************************/
@media screen and (max-width: 720px) {
#main { padding-bottom: 16em; }

/*.advertisement h1 span { display: block; padding: 0; }*/
.process { position: relative; height: 12em; } /* parts */
.process p { width: 87%; }
.process ol { width: 83%; }
.process ol span{ display: block; }
.advertisement th { width: 26%; }
.logob_01 { display: block; margin: 0.7em 0; width: 99%; }

.sads { padding: 1em 0; text-align: center; }
.sads li { width: 70%; }
.nnbloglink img.iroiroblog { width: 60%; }


#footer { height: 16em; }
} /* 720 */





/***********************************************************************/
/***** 599 *************************************************************/
/***********************************************************************/
@media screen and (max-width: 599px) {
#head .logo { float: left; width: auto; height: 2.6em; margin: 0; padding: 0.8em 0.5em 0; }
#mobile-head { height: 4em; margin-top: 0.2em; padding-top: 0; z-index: 999; background: #fff; }
#top-navi { top: 4.2em; }
#navi-toggle { right: 12px; top: 14px; width: 34px; height: 36px; }

#main { margin-top: 0.5em; padding-bottom: 23em; }
#main.contactformmain { padding: 0 1em 16em; }

/***** #main > article#contents > div.d_01 > section.XXX *****/
.s_01 div.link_to_subcat ul li span { display: block; } /* backnumber li in main category */
.latest_nn h1 .period { display: block; position: relative; padding: 0 0.5em; }
.latest_nn img { float: none; }
.latest_nn table { width: 100%; margin: 0;}
.wpnewshome li { padding: 0 0.3em 0.3em; }
.newposthome th,
.newposthome td { display: block; width: 100%; }
.newposthome th { padding: 0.3em 0 0; text-align: left; }
.newposthome td { padding: 0 0 0.3em; }
.backnumber td h1 .period { display: block; position: relative; margin: 0; padding: 0 0.5em; }
.business div { display: block; }
.business div.sort { width: 90%; margin-bottom: 1em; }

.advertisement h1 span { display: block; padding: 0; }
.process { position: relative; height: 18em; } /* parts */
.process p { width: 81%; }
.process ol { width: 76%; }

.advertisement th { width: 30%; }
.advertisement div.magazine_contents { display: block; }
.advertisement div.magazine_contents div { width: 90%; margin: 0 0 1em; }
.advertisement table { margin: 1em auto 2em; }
.advertisement th,
.advertisement td { width: 100% auto; display: block; }
.advertisement th { width: 42%; padding: 0; border: none; border-bottom: 1px #898989 dotted; }
.advertisement td { padding: 0 0 0.7em; border: none; }

/*#contents .useful_links div.categorywrap ul { display: block; }*/
.categorywrap ul li { display: block; }
.categorywrap ul li::after { display: none; }
.public_i {  }
.public_i th,
.public_i td { width: 100% auto; display: block; padding: 0 1em; border: none; }
.public_i th { width: 30%; padding: 0 0 0 1em; font-weight: bold; }
.public_i td { padding-bottom: 0.7em; }
.sortwrap { text-align: center; }

.contactformdiv p span { display: block; }
.contactformdiv p span.agreement_ja { display: inline-block; }
.german div.magazine_page { display: block; }
.german div.magazine_page div { width: 90%; margin: 0 0 1em; }
.german div.goods { display: block; }
.german div.goods div { width: 90%; }
.fc2formparts { width: 100% auto; margin: 1em 0; padding: 1em 0.5em; list-style: none; border: 1px #c0c0c0 dotted; }
.sads li { width: 90%; }

#footer { height: 23em; }
#footer.contactformfooter { height: 16em; }
#footer h2{ font-size: 0.9em; color: #fff;  }
.sitemap { display: block; height: auto; }
.sm_01 { width: 100%; font-size: 0.9em; }
.sm_02 { width: 100%; font-size: 0.9em; }
.footercopy { padding: 0 2.4em 0.5em; text-align: left; font-size: 0.8em; }
} /* 599*/





/***********************************************************************/
/***** 360 **************************************************************/
/***********************************************************************/
@media screen and (max-width: 360px) {
#head .logo { height: 2em; margin: 0; padding: 1.1em 0.5em 0; }
.d_01 h1 span.al { display: block; padding: 0 0.5em 0.5em; }
.d_01 h1 span.bnyear { display: block; padding: 0 0.5em 0.5em; }
.bnotheryears ul li { width: 45%; }
#gsearch-mobile { padding: 0; height: 4em; }
.process { height: 21.5em; } /* parts */
.process p { width: 77%; }
.process ol { width: 72%; }
.contactformdiv p span.agreement_ja { display: block; margin: 0; padding: 0 0 0 2.5rem; }
.contactformdiv input[type="submit"] { display: block; margin: 0.5rem 0; }
/*.sads {  padding: 1em 0; text-align: center; }
.sads li { width: 90%; }
.nnbloglink img.iroiroblog { width: 60%; }*/
} /* 360*/