@charset 'utf-8';

/* common.css のうち amp では使わないもの */

/**** user logined ****/
body:not(.snsuser-logined) .for-snsuser,
body.snsuser-logined .for-anonymous {
	display:none!important;
}

/**** header ****/
#header, .spiral-header {}

#header-container, .spiral-header-container {
	position:fixed; top:0; left:0; width:100%;
	z-index:200;
	/* color:white; */
}

#header-container, .spiral-header-container { height:64px; }
#main {
	padding-top:66px;
	padding-top:75px;
}

#header-container, .spiral-header-container {
	margin-top:0;
	transform:translateY(0);
	
	-webkit-transition:-webkit-transform .2s ease, margin-top .2s ease;
	-webkit-transition:transform .2s ease, margin-top .2s ease;
	-moz-transition:transform .2s ease, margin-top .2s ease;
	-ms-transition:transform .2s ease, margin-top .2s ease;
	transition:transform .2s ease, margin-top .2s ease;
}

#header.slide-up #header-container {
	margin:0;

	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}

#header-container > *, .spiral-header > * { position:relative; z-index:2; }
.spiral-header-bgs,
#header-bgs {
	position:absolute;
	top:0; right:0; bottom:-2px; left:0;
	overflow:hidden;
}
.spiral-headier-bgs:after,
#header-bgs:after {
	content:"";
	display:block;
	position:absolute;
	width:100%;
	bottom:0;
	border-bottom:2px solid #f8f8f8;
	/* z-index:0; */
}


/* header menu */

.menu-overflowed > .container {
	background: white;
}

.spiral-header-bg,
#header-bg {
	height:64px;
	background: white;
}
#header-menu-bg {
	height:42px;
	background: white;
}

#header-menu {
	background:none;
}

/* initialized add by common-adjustheader.js */
#header:not(.initialized) {
	background: white;
}
@media (max-width:767px) {
	#header:not(.initialized) #header-menu {
		background: white;
	}
}


.spiral-header-title,
#header-title {
	max-width:240px;
	margin:0;
}

.spiral-header-title > a > img,
#header-title > a > img {
	display:block;
	/* max-height:100%; */ /* #2390 */
}

.spiral-header-title > a > .header-title-text,
#header-title > a > .header-title-text {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:10px;
	line-height:1em;
}

#header-right > a {
	padding-top:10px;
	padding-bottom:10px;
}

@media all and (min-width:768px){
	#header-menu > * {
		height:64px;
	}
}

.spiral-header-defaults,
.spiral-header-bgs > *,
#header-bgs > * { position:relative; }


@media all and (max-width:767px) {
	#main {
		padding-top:calc(64px + 35px + 2px);
		padding-top:101px;
	}
	.spiral-header-container,
	#header-container {
		font-size:14px;
		height:auto;
	}
	
	#header.slide-up #header-container {
		/* margin-top:42px; /* header-menu-height */
	}
	
	#header-menu {
		font-size:90%;
	}
	
	#header-menu {
		-webkit-box-ordinal-group:3;
		-moz-box-ordinal-group:3;
		-ms-flex-order:3;
		-webkit-order:3;
		order:3;
		
		width:100%;
		padding-left:15px;
		padding-right:15px;
	}
	
	#header-defaults {
		flex-wrap:wrap;
	}
	#header-menu:after {
		content:'';
		display:block;
		margin-bottom:-100%;
	}
	
	#header-menu > * {
		display:inline-block;
	}
	#header-menu {
		white-space: nowrap;
	}
	
	#header-menu > .menu-more {
		padding-left:10px;
		padding-right:10px;
		line-height:1;
	}
	
	#header-right {
		-webkit-box-ordinal-group:2;
		-moz-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
}

.spiral-header a:hover,
#header a:hover { text-decoration:none; }
/* #header { color:white; } */

.spiral-header-title a, .spiral-header-menu a, .spiral-header-right a { color:inherit; }
#header-title a, #header-menu a, #header-right a { color:inherit; }

#header-left {
	padding:10px 20px 10px 10px;
}
#header-right {
	/* padding:10px 10px 10px 20px; */
	padding-left:20px;
	padding-right:10px;
}

/* #menu-icon > img { height:68px; vertical-align:middle; } */
/* #menu-icon .fa , #signup-icon .fa { font-size:30px; } */

#header-right > a {
	padding-left:10px;
	padding-right:10px;
}

@media (max-width:767px) {
	#header-right > a {
		padding-left:7px;
		padding-right:7px;
	
	}
}

/* @media all and (max-width:356px) { */
@media all and (max-width:767px) {
	#header-right {
		width:75px;
		white-space:normal;
		padding:0 7px;
		
	}
	#header-right > a {
		padding:2px 4px;
		text-align:center;
		width:50%;
	}
	#header-right > a#search-icon {
		-webkit-box-ordinal-group:4;
		-moz-box-ordinal-group:4;
		-ms-flex-order:4;
		-webkit-order:4;
		order:4;
	}
	
	#header-right > a#menu-icon {
		-webkit-box-ordinal-group:2;
		-moz-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
	#header-right > a#signup-icon {
		-webkit-box-ordinal-group:1;
		-moz-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
		/*
		flex:1 0 100%;
		text-align:right;
		/* padding-right:10px; */
	}
	#header-right > a#user-notifies-toggle {
		-webkit-box-ordinal-group:3;
		-moz-box-ordinal-group:3;
		-ms-flex-order:3;
		-webkit-order:3;
		order:3;
		/*
		flex:1 0 100%;
		text-align:right;
		/* padding-right:10px; */
	}
}


#header-menu {
	/* for chrome 40 bug */
	justify-content:flex-start;
	justify-content:initial;
}

#header-menu {
	font-size:75%;
}

@media (max-width:767px){
	#header-menu {
		font-size:90%;
	}
}

#header-menu > a {
	padding:0.6em;
}

@media (max-width:767px) {
	#header-menu > * {
		padding-top:12px;
		padding-bottom:10px;
	}
}

/*
#header-menu > * {
	border:2px solid transparent;
	border-left:none;
	border-right:none;
}

#header-menu > *:active,
#header-menu > *:hover,
#header-menu > *.active {
	border-bottom-color:black;
}
*/

#header-menu > a { position:relative; }

#header-menu > a:active:after,
#header-menu > a:hover:after,
#header-menu > a.active:after {
	content:"";
	display:block;
	position:absolute;
	top:100%;
	left:0; right:0;
	border-bottom:2px solid black;
}

#header:not(.initialized) #header-menu {
	overflow:hidden;
}

#header-menu > *.active {
	font-weight:bold;
}

@media (min-width:768px) {
	
	#header-menu > * {
		
		/******* .centeringchild *********/
		
		display:-webkit-box; /* iOS6-,Sf3.1-6.0,Ad2.1-4.3 */
		display:-moz-box; /* Fx19-21 */
		display:-ms-flexbox; /* IE10 */
		display:-webkit-flex; /* Chrome28-,Sf6.1+,iOS7 */
		display:flex; /* standard */
		
		-webkit-box-orient: horizontal;
		-moz-box-orient: horizontal;
		-ms-flex-direction:row;
		-webkit-flex-direction:row;
		flex-direction:row;
		
		/* アイテム全体の左右（上下）処理 */
		-webkit-box-lines:single;
		-moz-box-lines:single;
		-ms-flex-wrap:nowrap;
		-webkit-flex-wrap:nowrap;
		flex-wrap:nowrap;
		
		/* アイテム全体の上下処理 */
		-ms-flex-line-pack:center;
		-webkit-align-content:center;
		align-content:center;
		
		/* 各アイテムの上下処理 - 各アイテム自身の align-self で上書き */
		-webkit-box-align:center;
		-moz-box-align:center;
		-ms-flex-item-align:center;
		-webkit-align-items:center;
		align-items:center;
		
		/* アイテム全体の左右処理 */
		-webkit-box-pack:center;
		-moz-box-pack:center;
		-ms-flex-pack:center;
		-webkit-justify-content:center;
		justify-content:center;
		
		
		/***** .centeringchild.inline *****/
		
		
		_disabled_display:-webkit-inline-box; /* iOS6-,Sf3.1-6.0,Ad2.1-4.3 */
		_disabled_display:-moz-inline-box; /* Fx19-21 */
		_disabled_display:-ms-inline-flexbox; /* IE10 */
		_disabled_display:-webkit-inline-flex; /* Chrome28-,Sf6.1+,iOS7 */
		_disabled_display:inline-flex; /* standard */
		
		-webkit-box-flex:0; /* iOS6-,Sf3.1-6.0 */
		-moz-box-flex:0; /* Fx19- */
		-ms-flex:none;
		-webkit-flex:none; /* Chrome28-,Sf6.1+,iOS7 */
		flex:none; /* standard */
		
	}
	
	#header-menu > * > * {
		/***** .centeringchild ******/
		-webkit-box-flex:0; /* iOS6-,Sf3.1-6.0 */
		-moz-box-flex:0; /* Fx19- */
		-ms-flex:none;
		-webkit-flex:none; /* Chrome28-,Sf6.1+,iOS7 */
		flex:none; /* standard */
	}
}

.menu-more { position:relative; }
.menu-overflowed > .container {
	display:block;
	
	position:absolute;
	top:100%;
	right:0;
	margin-top:-5px;
	
	background:white;
	border:1px solid #ddd;
	
	white-space:nowrap;
}
.menu-overflowed > .container > * {
	display:block;
	padding:0.5em 1em;
}

#left-menu {}

#left-menu-container {
	position:fixed;
	top:0;
	right:0;
	/* bottom:0; */
	width:320px;
	overflow-y:auto;
	z-index:0;
	background:white;
	z-index:1000;
	
	border:1px solid #eee;
}

#left-menu-container {
	visibility:hidden;
	
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
	
	-webkit-transition:-webkit-transform .2s ease,
		visibility 0s linear .2s;
	-webkit-transition:transform .2s ease,
		visibility 0s linear .2s;
	-moz-transition:transform .2s ease,
		visibility 0s linear .2s;
	-ms-transition:transform .2s ease,
		visibility 0s linear .2s;
	transition:transform .2s ease,
		visibility 0s linear .2s;
}

#left-menu.opened #left-menu-container {
	visibility:visible;
	
	-webkit-transform:translateY(68px);
	-moz-transform:translateY(68px);
	-ms-transform:translateY(68px);
	transform:translateY(68px);
	
	/*
	-webkit-transition:visibility 0s linear .2s;
	-moz-transition:visibility 0s linear .2s;
	-ms-transition:visibility 0s linear .2s;
	*/
	-webkit-transition:-webkit-transform .2s ease,
		visibility 0s linear .2s;
	-webkit-transition:transform .2s ease,
		visibility 0s linear .2s;
	-moz-transition:transform .2s ease,
		visibility 0s linear .2s;
	-ms-transition:transform .2s ease,
		visibility 0s linear .2s;
	transition:transform .2s ease,
		visibility 0s linear .2s;
	
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s;
}

#left-menu-container li.menu-item {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

#left-menu-container li.menu-item > a {
	-moz-opacity:0.75;
	opacity:0.75;
}
#left-menu-container li.menu-item.active > a,
#left-menu-container li.menu-item:hover > a {
	-moz-opacity:1;
	opacity:1;
}

/*** sns_shares ***/

.sns-shares-simple {
	margin-top:20px;
}

.content-body > .sns-shares-simple:first-child {
	margin-top:0;
	margin-bottom:15px;
}

@media (min-width:768px) {
	#main > .sns-shares-simple { padding-left:0; padding-right:0; }
}
.sns-shares-simple {
	position:relative;
	display:block;
	
	z-index:10;
	
	/* white-space:nowrap; */
}
.sns-shares-simple-buttons > a {
	display:inline-block;
	color:white !important;
	
	text-decoration:none;
	text-align:center;
	
	/* white-space:nowrap; */
	
	overflow:hidden;
	
	/*
	-moz-opacity:0.25;
	opacity:0.25;
	*/
	-moz-opacity:0.75;
	opacity:0.75;
	padding:8px 5px;
}

/* タッチデバイスではホバーアニメーションはしない。重くなる。 */
html:not(.ua-ios) .sns-shares-simple-buttons > a,
html:not(.ua-android) .sns-shares-simple-buttons > a {
	-webkit-transition:opacity linear .1s;
	-moz-transition:opacity linear .1s;
	transition:opacity linear .1s;
}

.sns-shares-simple-buttons > a:hover {
	-moz-opacity:1;
	opacity:1;
}

.sns-shares-facebook-simple { background-color:#265a96; }
.sns-shares-twitter-simple { background-color:#00acec; }
.sns-shares-google-simple { background-color: #dd4b39; }
.sns-shares-line-simple { background-color:#00c300; }
.sns-shares-hatebu-simple { background-color:#2c6ebd; }

/* disable text
.sns-shares-simple-buttons > a > span { display:none; }
*/

.sns-shares-simple-buttons {
	/* white-space:nowrap; */
	letter-spacing:0;
}
.sns-shares-simple-buttons > * {
	letter-spacing:normal;
	vertical-align:middle;
}
.sns-shares-simple-buttons > a {
	font-size:180%;
	line-height:1;
}

.sns-shares-simple-buttons > a > * {
	display:inline-block;
	vertical-align:baseline;
}

@media (max-width:767px) {
	.sns-shares-simple-buttons > a > span {
		font-size:80%;
	}
}

.sns-shares-simple-buttons > a {
	width:49%;
	
	width:-webkit-calc( 50% - 3px );
	width:calc( 50% - 3px );
	
	position:relative;
	margin:0;
}

.sns-shares-simple-buttons > a:nth-child(2n){
	margin-left:6px;
}

.sns-shares-simple-buttons > a:nth-child(n+3) {
	margin-top:6px;
}

.sns-shares-simple-buttons > a > .fa {
	position:relative;
	top:0.08em;
	margin-right:0.3em;
	margin-left:-0.3em;
}

.sns-shares-simple-buttons > a > span {
}

.sns-shares-simple-buttons > a > span > span:first-child {
	font-size:1rem;
	display:inline-block;
	vertical-align:middle;
}

.sns-shares-simple-buttons > a > span > span:empty {
	display:none;
}
.sns-shares-simple-buttons > a > span > span + span {
	margin-left:.5em;
	font-family:Georgia, sans-serif;
}

@media (max-width:767px) {
	.sns-shares-simple-buttons > a.has-count > span > span:first-child {
		display:none;
	}
}

/*** signup ***/

#nativeadinfo > .nativeadinfo-container,
#signup > .signup-container {
	position:fixed;
	top:0;
	right:0;
	
	/* padding:30px 15px 15px 15px; */
	padding:15px;
	
	/*
	color:white;
	background:rgba(0,0,0,0.75);
	*/
	background:white;
	border:1px solid #ddd;
	
	z-index:32767;
	
	text-align:center;
}

/*
.signup-close {
	position:absolute;
	top:5px;
	right:25px;
	color:inherit;
}
*/

.signup input[type="text"],
.signup input[type="submit"] {
	display:block;
	width:100%;
	padding:5px;
	font-size:inherit;
}
.signup input[type="submit"] {
	margin-top:5px;
	/* color:white; */
	/*
	background:transparent;
	*/
	/*
	font-weight:bold;
	border-radious:5px;
	border:1px solid #888;
	*/
}

#signup > .signup-container { width:320px; }

.radio-signup-content p { text-align:left; }

.signup-notify, .signup .alert { font-size:80%; }
.signup-notify a, .signup-notify a:visited {
	/* color:hsl(203, 82%, 75%); /* = #168dd9 = hsl(203, 82%, 47%) = hsv(203,90%,85%) = rgb(22,141,217) */
}

#nativeadinfo > .nativeadinfo-container,
#signup > .signup-container {
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
	
	-webkit-transition:-webkit-transform .2s ease;
	-webkit-transition:transform .2s ease;
	-moz-transition:transform .2s ease;
	-ms-transition:transform .2s ease;
	transition:transform .2s ease;
}

#nativeadinfo.opened > .nativeadinfo-container,
#signup.opened > .signup-container {
	-webkit-transform:translateY(68px);
	-moz-transform:translateY(68px);
	-ms-transform:translateY(68px);
	transform:translateY(68px);
}

.signup form .error_msg {
	font-size:80%;
	font-weight:bold;
	text-align:left;
	color:#f88;
}


@media (max-width:767px) and (orientation:portrait) {
	.signup-container,
	#left-menu-container {
		/* width:100vw; */
		width:100%;
	}
}

.signup-container > input[type="radio"] {
	position:absolute;
	left:-10000px;
	top:-10000px;
	width:0;
	height:0;
	overflow:hidden;
}

.signup-container > .radio-signup-content { display:none; }
.signup-container > input[type="radio"]#radio-signup-site:checked ~ #radio-signup-site-content,
.signup-container > input[type="radio"]#radio-signup-user:checked ~ #radio-signup-user-content {
	display:block;
}

.signup-container > input[type="radio"]#radio-signup-site:checked ~ label[for="radio-signup-site"],
.signup-container > input[type="radio"]#radio-signup-user:checked ~ label[for="radio-signup-user"] {
	color:black;
	font-weight:bold;
}

a.signup-button {
	display:block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:0.5em 1em;
	background:#888;
	color:white;
	white-space:nowrap;
	overflow:hidden;
	
	text-decoration:none;
	-moz-opacity:0.8;
	opacity:0.8;
}
a.signup-button:hover,
a.signup-button:active {
	text-decoration:none;
	-moz-opacity:1;
	opacity:1;
}

a.signup-button + a.signup-button {
	margin-top:0.5em;
}

a.signup-button-facebook {
	background:#265a96;
}
a.signup-button-twitter {
	background:#00acec;
}
a.signup-button-line {
	background:#00c300;
}

a.signup-button-yahoojapan {
	background:#ff0033;
}

.signup-description {
	font-size:80%;
}

.signup-content-vertical {
	text-align:left;
}
.signup-content-vertical > * {
	display:block;
	padding:7px 0;
	-moz-opacity:0.75;
	opacity:0.75;
}
.signup-content-vertical > *:active,
.signup-content-vertical > *:hover {
	text-decoration:none;
	-moz-opacity:1;
	opacity:1;
}

@media (max-width:767px) {
	.signup.opened > .signup-container {
		-webkit-transform:translateY(50px);
		-moz-transform:translateY(50px);
		-ms-transform:translateY(50px);
		transform:translateY(50px);
	}
	#left-menu.opened #left-menu-container {
		-webkit-transform:translateY(50px);
		-moz-transform:translateY(50px);
		-ms-transform:translateY(50px);
		transform:translateY(50px);
	}
}

#signuped-user {
	height:36px;
	width:36px;
	-moz-border-radius:18px;
	border-radius:18px;
	
	background-color:#ccc;
	color:white;
	font-size:24px;
	line-height:1.2;
	
	text-transform:capitalize;
	
	position:relative;
	overflow:hidden;
	background-size:cover;
	background-position:center center;
	
	vertical-align:middle;
	display:flex;
	align-items:center;
	justify-content:center;
}

@media (max-width:767px) {
	#signuped-user {
		height:24px;
		width:24px;
		-moz-border-radius:12px;
		border-radius:12px;
		
		font-size:16px;
	}
}

#signuped-user > img { opacity:0; width:100%; height:100%; vertical-align:top; }

/******* contents carousel defaults ********/
.carousel-container > .wfcontent.image-bg .content-info {
	display:none;
}
.carousel-container > .wfcontent.image-bg .wfcontent-container {
	max-width:100%;
	margin:0;
}
.carousel-container > .wfcontent.image-bg .content-title {
	position:absolute;
	top:auto;
	right:0;
	left:0;
	bottom:0;
	
	margin:0;
	padding:.5em .75em;
	
	font-size:1rem;
	font-weight:normal;
}
.carousel-container > .wfcontent.image-bg:before  {
	content:"";
	display:block;
	height:0;
	/* padding-top:61.8%; /* golden */
	padding-top:56.25%; /* 16:9 */
}

/****** lazy load img ********/

[data-src-lazy], [data-bgimage-lazy], [data-lazy-loading], [data-lazy-loaded] {
	transition-property:opacity;
	transition-delay:0s;
	transition-duration:.1s;
	transition-timing-function:linear;
}

[data-src-lazy], [data-bgimage-lazy], [data-lazy-loading] {
	opacity:.75;
}

/* 幅明示指定のない lazy place は読み込み先に幅を合わせる */
img[src$="?lz=small"][data-src-lazy]:not([width]),
img[src$="?lz=small"][data-lazy-loading]:not([width]) { width:160px; }
img[src$="?lz=normal"][data-src-lazy]:not([width]),
img[src$="?lz=normal"][data-lazy-loading]:not([width]) { width:320px; }
img[src$="?lz=large"][data-src-lazy]:not([width]),
img[src$="?lz=large"][data-lazy-loading]:not([width]) { width:640px; }
img[src$="?lz=xlarge"][data-src-lazy]:not([width]),
img[src$="?lz=xlarge"][data-lazy-loading]:not([width]) { width:1280px; }

/* 幅明示指定がなく、lazy load がオリジナルの場合、1/3幅のみ確保 (小さい可能性がある) */
img[src$="?lz=orig"][data-src-lazy]:not([width]),
img[src$="?lz=orig"][data-lazy-loading]:not([width]) { width:33.33333%; opacity:0; }