@charset "utf-8";

body.sp:not(.nonav) article[role=main] { float: none !important; width: inherit !important; margin: 0 auto; padding: 0 0 3em; }
body.sp article[role=main] #cmn_stackbox { width: 100%; margin: 0 auto; padding: 0; }
body#spnonavnoheader  article[role="main"] { margin: 0 auto; }
body#spnonav article[role="main"] { width: 100%; }

body.nonav { width: 100% !important; height: 100% !important; background-color: transparent; }
body.nonav header[role="banner"],
body.nonav header[role="banner"] * { height: auto; background-color: transparent !important; }
body.nonav header[role="banner"] { margin: 0 auto -0.5em; padding-top: 1em; border-top: none; }
body.nonav header[role="banner"]:before { border: none; }
body.nonav header[role="banner"] > div { height: auto; }
body.nonav header[role="banner"] > div > h1 { width: 100%; height: 2em; margin: 0; padding: 0; border: none; box-shadow: none; text-align: left; box-sizing: border-box; }
body.nonav header[role="banner"] > div.social_box { z-index: 1010 !important; }

body.nonav article[role="main"] .spgosite { padding: 1em 0; text-align: right; }
body.nonav article[role="main"] .spgosite a { display: inline-block; margin-left: 1em; }
body.nonav article[role="main"] .spgosite a:before { content: '\e812'; display: inline-block; margin-right: 0.3em; font-family: 'lacitta-pc'; line-height: 1.4; font-size: 1.4rem; font-style: normal; font-weight: normal; text-align: center; opacity: 0.7; }
body.nonav article[role="main"] .cl-notranslate a.ja { display: none; }
html[lang="en"] body.nonav article[role="main"] .cl-notranslate a.ja { display: inline-block; }
html[lang="en"] body.nonav article[role="main"] .cl-notranslate a.en { display: none; }

body.true_padding #cmn_stackbox { padding: 1em !important; }
body.no_title article[role="main"] #cmn_stackbox > h2 { color: inherit; background-color: transparent; }
body.no_title article[role="main"] #cmn_stackbox > h2 { padding: 0 !important; background: none; }
body.no_title article[role="main"] #cmn_stackbox h3 { color: inherit; }
body.no_title article[role="main"] #cmn_stackbox h3::before { content: ''; display: none; }


/* PC & WideTablet Landscape */
@media screen and ( min-width: 1024px ) {
	body.nonav header[role="banner"],
	body.nonav article[role="main"] { width: 950px; margin: 0 auto; }
}

/*  Not PC & WideTablet Portrait */
@media screen and ( min-width: 768px ) and ( max-width: 1023px ) {
	html:not(.pc) body.nonav article[role="main"] { padding-top: 4rem; }
	html:not(.pc) body.nonav article[role="main"] .spgosite { position: absolute; top: -0.5rem; right: 0.25em; font-size: 1.5rem; z-index: 1000; }
	html:not(.pc) body.nonav header[role="banner"] > div > h1 { padding: 0.25em 38rem 0 0; }

}

/*  Not PC & Tablet Portrait */
@media screen and ( max-width: 767px ) {
	html:not(.pc) body.nonav header[role="banner"] { margin-bottom: 0; }
	html:not(.pc) body.nonav header[role="banner"] > div { width: 100%; padding: 0; }
	html:not(.pc) body.nonav header[role="banner"] .social_box { margin-bottom: -0.5rem; padding-right:  0.5em; }

	html:not(.pc) body.nonav header[role="banner"] { position: relative; height: 6.8rem; padding: 2.5rem 0 0 0; box-sizing: border-box; }
	html:not(.pc) body.nonav header[role="banner"] > div > h1 { min-width: 100%; height: 1.75rem; margin: -1.5rem 0 0 .5rem; padding: 0 8.5rem 0 0; }
	html:not(.pc) body.nonav article[role="main"] .spgosite { position: absolute; top: -7rem; right: 1em; z-index: 1000; }

	html.mobile body.nonav article[role="main"] .spgosite { font-size: 0.9rem; z-index: 10000; }
	html.mobile header[role="banner"] .social_box { position: absolute; top: auto; bottom: 0.5rem; width: 100%; margin: 0; padding: 0; text-align: center; vertical-align: baseline; }

	html:not(.pc) #cmn_stackbox { padding-top: 0.4em; font-size: 1.4rem; }
	html:not(.pc) #cmn_stackbox > .box_onehalf { width: 49.75%; }
	html:not(.pc) #cmn_stackbox > .box_onequarter { width: 24.4% !important;  }
	html:not(.pc) #cmn_stackbox > .box_onethird { width: 32.8%; }
	html:not(.pc) #cmn_stackbox > .box_twothird { width: 66.49%; }
	html:not(.pc) #cmn_stackbox > .box_threequarter { width: 74.868%; }
	html:not(.pc) #cmn_stackbox [data-stacktype=mix_ihw] > div,
	html:not(.pc) #cmn_stackbox [data-stacktype=mix_ihw] > figure { float: left; max-width: 96%; }
	html:not(.pc) #cmn_stackbox [data-stacktype=mix_ihw] > figure { margin: 0 1em 0.5em 0; }
	html:not(.pc) #cmn_stackbox [data-stacktype=mix_ihw] > div:after { content: ""; clear: both; display: block; height: 0; }
	html:not(.pc) #cmn_stackbox [data-stacktype=wygtext].box_onehalf + [data-stacktype^=image].box_onehalf { width: 49.6% !important; }
}

/*  Not PC & Mobile Portrait */
@media only screen and ( max-width: 599px ) {
	html.mobile body.nonav header[role="banner"] .social_box  { padding: 0; }
	html.mobile body.nonav header[role="banner"] .social_box > div.twitter { margin-right: -2%; }
	html.mobile body.nonav header[role="banner"] .social_box > div.facebook{ margin-right: -2%; }
	html.mobile body.nonav header[role="banner"] .social_box > div.google_plusone { margin-right: -2%; }
	html.mobile body.nonav header[role="banner"] .social_box > div.line_send { margin-left:  2%; }
	html.mobile body.nonav header[role="banner"] .social_box > div > iframe { transform:scale(0.9); }
	html:not(.pc) #cmn_stackbox > .box_onequarter,
	html:not(.pc) #cmn_stackbox > .box_onethird,
	html:not(.pc) #cmn_stackbox > .box_onehalf,
	html:not(.pc) #cmn_stackbox > .box_twothird,
	html:not(.pc) #cmn_stackbox > .box_threequarter { width: 100% !important; padding-left: 0; }
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onequarter,
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onequarter + .box_twothird,
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onequarter + .box_threequarter,
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onethird + .box_onequarter { width: 49.4% !important; }
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onethird + .box_twothird { width: 59.5% !important; }
	html:not(.pc) #cmn_stackbox [data-stacktype^=image].box_onethird { width: 31.8% !important; }
}

/*  Not PC & Mobile Portrait */
@media only screen and ( max-width: 320px ) {
	html.mobile body.nonav article[role="main"] .spgosite { font-size: 0.9rem; }
	html.mobile body.nonav header[role="banner"] .social_box { margin-left: -0.5%; }
	html.mobile body.nonav header[role="banner"] .social_box .google_plusone { margin: 0 -7%; }
	html.mobile body.nonav header[role="banner"] .social_box iframe { transform: scale(0.88); }
}
