@charset 'utf-8';

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

#acs-code {
	position:absolute;
	left:-1px;top:-1px;width:1px;height:1px;
	opacity:0;
	visibility:hidden;
	overflow:hidden;
}

/**** user logined ****/
body:not(.ptluser-logined) .for-ptluser,
body.ptluser-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;
	
	max-height:80vh;
	overflow-y:auto;
	
	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; } /* X は後ろの方で */
.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;
	}
}

/* twitter-x */

.fa-x::before {
	content: "";
	background-image: url(/static/img/x-logo.svg);
	width: 1em;
	height: 0.85em;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 100%;
}

.sns-shares-x-simple {
	background: black;
}
.sns-shares-x-simple .fa-twitter + span > span:first-child {
	display: none;
}
.sns-shares-x-buttons>a>.fa-x {
	margin-right: 0;
	margin-left: 0;
}

/*** 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; }

/* bookmark */
.content-bookmark-label::before {
	content:"Bookmark";
	margin-left:.25em;
}
.content-bookmarked .content-bookmark-label::before {
	content:"Bookmarked";
}
.content-bookmarked .fa-bookmark-o::before {
	content:"\f02e"; /* fa-bookmark */
}
.content-bookmarked-count { margin-left:.25em; }
.content-bookmarked-count:empty { display:none; }
.content-bookmarked-count:not(:empty)::before { content:"(" }
.content-bookmarked-count:not(:empty)::after { content:")" }

.widget.widget-bookmarks:empty { display:none; }

/******* 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; }

img[src$=".jpg#lz:small"]:not([width]),
img[data-src-lazy$="_small.jpg"]:not([width]),
img[data-lazy-loading$=".jpg#lz:small"]:not([width]) { width:160px; }
img[src$=".jpg#lz:normal"]:not([width]),
img[data-src-lazy$="_normal.jpg"]:not([width]),
img[data-lazy-loading$=".jpg#lz:normal"]:not([width]) { width:320px; }
img[src$=".jpg#lz:large"]:not([width]),
img[data-src-lazy$="_large.jpg"]:not([width]),
img[data-lazy-loading$=".jpg#lz:large"]:not([width]) { width:640px; }
img[src$=".jpg#lz:xlarge"]:not([width]),
img[data-src-lazy$="_xlarge.jpg"]:not([width]),
img[data-lazy-loading$=".jpg#lz:xlarge"]: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; }
img[src$="#lz:orig"][data-src-lazy]:not([width]),
img[data-lazy-loading$="#lz:orig"]:not([width]) { width:33.33333%; opacity:0; }


/********** lazy load cdn image ************/
/* blank gif datauri: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 
 * loading svg: <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" stroke="#f8f8f8" stroke-width="1" r="10" stroke-dasharray="47.12388980384689 17.707963267948966" transform="rotate(48 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
 * loading svg datauri: data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgY2xhc3M9Imxkcy1yb2xsaW5nIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmOGY4ZjgiIHN0cm9rZS13aWR0aD0iMSIgcj0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjQ3LjEyMzg4OTgwMzg0Njg5IDE3LjcwNzk2MzI2Nzk0ODk2NiIgdHJhbnNmb3JtPSJyb3RhdGUoNDggNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==
 * made by https://loading.io/, http://www.convertstring.com/ja/EncodeDecode/Base64Encode
 */

img[data-src-lazy][src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"] {
	/* <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" stroke="#f8f8f8" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(186 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg> */
	background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgY2xhc3M9Imxkcy1yb2xsaW5nIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmOGY4ZjgiIHN0cm9rZS13aWR0aD0iMSIgcj0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjQ3LjEyMzg4OTgwMzg0Njg5IDE3LjcwNzk2MzI2Nzk0ODk2NiIgdHJhbnNmb3JtPSJyb3RhdGUoNDggNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==) !important;
	background-position:center center !important;
	background-size:contain !important;
}
[data-bgimage-lazy][style*="url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"] {
	background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgY2xhc3M9Imxkcy1yb2xsaW5nIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmOGY4ZjgiIHN0cm9rZS13aWR0aD0iMSIgcj0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjQ3LjEyMzg4OTgwMzg0Njg5IDE3LjcwNzk2MzI2Nzk0ODk2NiIgdHJhbnNmb3JtPSJyb3RhdGUoNDggNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==) !important;
	background-position:center center !important;
	background-size:contain !important;
}

/*** ajax error ***/
.network-error { padding:1em; text-align:center; white-space:pre; border:1px solid #ccc; }


/*
	通常のボタン：灰地黒文字
		.btn
		input[type="button"]
		button[type="button"]
	重要系なボタン：赤地白文字 - ただし .btn-normal をつければ通常扱い
		.btn.btn-colored
		input[type="submit"]
		button
		button[type="submit"]
	
	.btn 内はnowap
	  - <br>で常に改行
	  _ .btn > .span + .span はモバイルでのみ改行
*/

.btn,
a.btn,
button,
input[type="button"], input[type="submit"], input[type="reset"] {
	text-decoration:none;
	display:inline-block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align:middle;
	
	/* input 系と同じメトリックスにしておくべし */
	line-height:1.6; /* FireFox select 問題で変えられない。複数行では要注意。 */
	padding:.35em 1em;
	
	position:relative;
	border-radius:0;
	text-shadow:none;
	box-shadow:none;
	
	color:black;
	background:#eee;
	border:1px solid #ccc;
	
	/* shadow分があるので十分にとっておくべし */
	margin:.25em .25em .5em 0;
	
	cursor:pointer;
}

a.btn > .fa:first-child:not(:only-child)
.btn > .fa:first-child:not(:only-child) {
	opacity:.5;
	margin-left:-.35em;
	margin-right:.15em;
}

/* hover shadow */
.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus,
button:hover,
button:focus,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
	text-decoration:none;
	position:relative;
	box-shadow:2px 2px rgba(0, 0, 0, .2);
}
.btn:active,
a.btn:active,
button:active,
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
	text-decoration:none;
	position:relative;
	box-shadow:none;
	top:2px; left:2px;
}

.btn:hover,
a.btn:hover,
button:hover,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
	color:black;
	background:#eee;
	border:1px solid #ccc;
}
.btn:active,
a.btn:active,
button:active,
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
	color:black;
	background:#eee;
}

.btn-colored, .btn-colored:hover, .btn-colored:active, .btn-colored[disabled], .btn-colored[disabled]:hover,
a.btn-colored, a.btn-colored:hover, a.btn-colored:active, a.btn-colored[disabled], a.btn-colored[disabled]:hover,
input[type="button"].btn-colored, input[type="button"].btn-colored:hover, input[type="button"].btn-colored:active,
button:not([type]):not(.btn-normal),
button[type="submit"]:not(.btn-normal), input[type="submit"]:not(.btn-normal),
button[type="submit"]:not(.btn-normal):hover, input[type="submit"]:not(.btn-normal):hover,
button[type="submit"]:not(.btn-normal):active, input[type="submit"]:not(.btn-normal):active {
	color:white;
	border:1px solid hsl(359, 57%, 49%);
	background:hsl(359, 57%, 49%);
}

.btn-small {
	font-size:85%;
}

input[disabled], select[disabled], textarea[disabled], button[disabled],
.btn.disbabled, .btn[disabled], a.btn.disbabled, a.btn[disabled] {
	cursor:default;
	cursor:not-allowed;
	cursor:no-drop;
	opacity:.3;
}

a.btn.back:before,
.btn.back:before {
	content:'\f060'; /* fa-arrow-left */
}

input[type="checkbox"], input[type="radio"] {
	vertical-align:middle;
	margin:0;
}
input[type="checkbox"] + span, input[type="radio"] + span {
	margin-left:.25em;
}

label.checkbox-multiline { display:flex; }
label.checkbox-multiline > input[type="checkbox"],
label.radio-multiline > input[type="radio"] {
	margin-top:.3em;
}

@media (max-width:767px) {
	.btn, a.btn {
		width:100%;
		text-align:center;
	}
	
	/* nowrap内でモバイルのみ強制改行したい場合に <br> 代わりに使う  */
	span.mobile-wrap::before {
		content:'';
		display:block;
	}
}

/***** nav ********/
.nav {
	margin-left: 0;
	list-style: none;
	padding:0;
	margin:0 0 1em 0;
}

.nav-tabs {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:1em;
	/* border:1px solid #ccc; */
	border-bottom: 1px solid #ccc;
}
.nav-tabs:after {
	content:"";
	clear:both;
	display:block;
	/* border-bottom: 1px solid #ccc; */
	border-bottom:none;
}
.nav-tabs > li {
	margin-bottom: 0;
	float:none;
	margin:0;
	margin-right:-1px;
	padding:0;
}
.nav-tabs > li > a {
	color:inherit;
}
.nav-tabs > li > a {
	padding:.5em 1em;
	margin:0;
	border-radius:0;
	border:none;
	line-height:1.2;
	text-decoration:none;
	display:block;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover {
	/* background-color: hsl(359, 57%, 49%); /* rgb(199, 54, 56) #c73638 */
	/* border:1px solid hsl(359, 57%, 49%); /* rgb(199, 54, 56) #c73638 */
	color:inherit;
	border:none;
	border-bottom:3px solid black;
	margin-bottom:-1px;
	background:transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:hover {
	/* border-bottom-color:hsla(359, 57%, 49%); */
	border-bottom-color:hsla(0, 0%, 0%);
}
.nav-tabs > li > a:hover {
	border-bottom-color:hsla(0, 0%, 0%, .3);
}

/** breadcrumb **/
@media (min-width:768px) {
	li.breadcrumb > a > span {
		max-width:30em;
	}
	li.breadcrumb:first-child > a > span {
		padding-left:0;
	}
}