@charset "utf-8";

	@import url("introduction.css");
	@import url("information.css");
	
	@media screen and (max-width:767px){/*-sp-*/
		body{
			font-size: .9em;
		}
	}
	header{
		background: #000;
	}
	img{
		max-width: 100%;
	}
	
	.head-class{
		display: block !important;
		text-align: center;
		font-weight: bold;
		font-size: .75em;
		padding: .7em 0 .4em;
		margin: auto;
		border-width: 1px 0;
		border-style: solid;
	}
	
	.width{
		max-width: 980px;
		margin: auto;
	}
	*:focus {
		outline: none;
	}
	
	
/*- メインビジュアル -*/
	.main-visual{
		height: 0px;
		padding-top: 380px;
		background-position: center center;
		background-repeat: no-repeat;
		border-width: 3px 0px;
		border-style: solid;
		overflow: hidden;
		transition: .2s;
	}
@media screen and (max-width:959px){/*-tb-*/
	.main-visual{
		background-size: cover;
		padding-top: 35%;
		border-width: 1px 0px;
	}
}
@media screen and (max-width:767px){/*-sp-*/
	.main-visual{padding-top:49%;}
}
	
	
	#navigation{}
	.nav-position{
		background: #fff;
		width: 100%;
		box-shadow: 0 1px 1px 0 rgba(0,0,0,0.3);
		z-index: 100;
		position: static;
	}
	.nav-position.follow{
		position: fixed;
		box-shadow: 0 3px 2px 0 rgba(0,0,0,0.3);
		top: -2px;
	}
	.navigation{
		max-width: 980px;
		text-align: center;
	}
		.page-navigation{float: left;}
			.page-navigation li a{
				display: block;
				color: #919191;
				font-weight: bold;
				text-decoration: none;
				line-height: 1em;
				padding: .8em 1em .6em;
			}
			.page-navigation li a:hover{
				background: #ececec;
				transition: 0.2s;
			}
		.link-navigation{float: right;}
			.link-navigation li{
				padding: .3em .2em .1em;
			}
			.link-navigation li a{
				font-size: .8em;
				font-weight: bold;
				padding: .6em 1em .5em 3em;
				background-position: 5% center;
				border-radius: 2px;
			}
@media screen and (max-width:767px){/*-sp-*/
	.navigation{
		/*font-size: 70%;*/
		padding: 1px 0;
	}
		.page-navigation{
			width: 50%;
		}
			.page-navigation li{
				width: 33.33333%;
			}
			.page-navigation li a{
				display: block;
				color: #919191;
				font-weight: normal;
				text-decoration: none;
				line-height: 1em;
				padding: .8em 0 .6em;
				margin-left: 1em;
				font-size: 2.5vw;
			}
		.link-navigation{
			width: 45%;
		}
			.link-navigation li{
				width: 50%;
				padding: 0;
			}
			.link-navigation li a{
				font-size: 1vw;
				font-weight: normal;
				padding: .5em .2em .5em;
				background-position: center 5%;
				background-image: none;
				border-radius: 0px;
				margin-right: 1px;
			}
}

	
	main[role] > section:not(#introduction){
		text-align: center;
		padding: 1.5em 1em;
		box-shadow: 0 6px 4px -4px rgba(0,0,0,0.3) inset;
	}
@media screen and (max-width:767px){
	main[role] > section:not(#introduction){
		padding: 1.5em .5em;
	}	
}


#summary{}
	.summary{
		max-width: 980px;
		margin: auto;
		vertical-align: top;
		display: flex;
		align-items: center;
	}
		.summary > div{
			text-align: left;
			height: 100%;
			width: 75%;
			box-sizing: border-box;
			padding-right: .5em;
		}
			.summary > div p{
				
			}
			.summary > div strong{
				display: block;
				font-size: 1.5em;
				line-height: 1.8em;
				font-weight: bold;
				margin-bottom: .5em;
				border-bottom: 1px solid #dddddd;
				padding-bottom: .1em;
			}
				.summary > div strong *{
					font-weight: inherit;
				}
				.summary > div strong rt{
					font-weight: normal;
					opacity: .6;
					font-size: .4em;
				}
@-moz-document url-prefix(){
				.summary > div strong rt{
					margin-bottom: -.7em !important;
				}
}
			.summary > div p{
				color: #666;
				
			}

		.summary > figure{
			width: 25%;
		}
			.summary > figure img{
				width: 90%;
			}

@media screen and (max-width:767px){/*-sp-*/
		.summary > div strong{
			padding-bottom: .5em;
			font-size: 4.5vw;
			text-align: center;
			margin-bottom: 1.5em;
		}
			.summary{
				display: block;
			}
			.summary > figure{
				width: auto;
				border: 1px solid #ddd;
				padding: .5em;
			}
				.summary > figure img{
					max-width: 200px;
				}
			.summary > div{
				width: auto;
				margin-bottom :1em;
				padding-right: 0;
			}
				..summary > div p{
					padding: 0em 1em;
					line-height: 1.3em;
				}

}
			
	div.card-db{
		text-align :center;
		padding: 1em;
		background: #f0f0f0;
	}	
		
		
aside#recommend{}			
	.recommend{
		font-size: .7em;
		text-align: center;
		background: #eee;
		letter-spacing: -.40em;
		box-shadow: 0 1em 1em -1em #d2d2d2 inset ,0 -1em 1em -1em #d2d2d2 inset; 
	}
		.recommend li{
			display: inline-block;
			letter-spacing: normal;
			padding: 0;
			margin: auto;
			width: calc(100% / 3);
			max-width: calc(980px / 3);
		}
			.recommend li a{
				padding: 2em 0;
				display: flex;
				text-decoration: none;
				align-items: center;
			}
			.recommend li a figure{
				width: 30%;
				box-sizing: border-box;
				padding: 0 1%;
			}
			.recommend li a figure{
				box-shadow: none;
			}
			.recommend li a dl{
				width: 70%;
				text-align: left;
				line-height: 1.3em;
				color: #888;
			}
			.recommend li a dt{ padding: .5em 0;}
			.recommend li a dd.recom-soon{ color:#1ea2ff; }
				.recommend li a dt span.recom-title{
					display: inline-block;
					font-size: 110%;
					color: #333;
					font-weight: bold;
				}
			.recommend li a:hover{
				opacity: .7;
				transition: .2s;
			}
@media screen and (max-width:751px){
		.recommend{
			
		}
			.recommend li{
				display: block;
				width: auto;
				max-width: 100%;
				border-top: #ddd 1px solid;
				text-align: center;
			}
			.recommend li a{
				padding: 1em 0;
				text-align: center;
				max-width: calc(330px);
				margin: auto;
			}
			.recommend li a figure{
				margin: auto;
				
			}
			.recommend li a dl{
				margin: auto;
				
			}
}

	.convini{
		font-size: .8em;
		max-width: 980px;
		text-align: left;
		margin: auto;
		box-sizing: border-box;
	}
		.convini > p{
			margin-left: calc(32% + 1.5em);
			color: #666;
			padding: .3em 0;
		}
		.convini > p:first-child{
			border-top: 1px solid #ddd;
		}
		.convini > p em{
			font-weight: bold;
			font-size: 1.2em;
			padding-top: .6em;
			color: #777;
			display: block;
		}
		.convini > p a{
			display: inline-block;
			border: 1px solid #bc2a3f;
			color: #bc2a3f;
			text-decoration: none;
			font-size: .9em;
			line-height: 1em;
			padding: .8em 3em .5em 4.5em;
			position: relative;
			margin-bottom: .8em;
		}
		.convini > p a:hover{
			background: #bc2a3f;
			color: #fff;
			transition: .2s;
		}
			.convini > p a::before{
				content: "";
				position: absolute;
				width: 1.2em;
				height: 1.2em;
				left: .7em; top: 50%;
				transform: translate(0,-50%);
				background: url(/japan/assets/svg/download.svg);
				background-size: 100% auto;
				filter: brightness(0) saturate(100%) invert(23%) sepia(71%) saturate(2378%) hue-rotate(331deg) brightness(84%) contrast(92%);
			}
			.convini > p a:hover::before{
				transition: .2s;
				filter: invert(100%);
			}
			
		.convini > p small{
			display: block;
			padding-left: 1.2em;
			position: relative;
			opacity: .8;
		}
			.convini > p small::before{
				content: "※";
				position: absolute;
				left: 0; top: 0;
			}
@media screen and (max-width:767px){
	.convini{
		margin: -1em .5em;
	}
		.convini > p{
			margin-left: auto;
		}
}
	
	

	.trademark{
		text-align: center;
		line-height: 1.2em;
		margin: 1.5em auto auto;
		padding: 1em;
		border: 1px solid #ddd;
		/*width: fit-content;*/
		box-sizing: border-box;
		max-width: 980px;
	}
		.trademark small{
			display: block;
			font-size: .8em;
			color: #808080;
		}
@media screen and (max-width:751px){
	.trademark{
		
	}
}

.misdisplay{
	background: #d00;
	text-align: center;
	display: block;
	color: #dd0;
	padding: 1em 1em 1em;
	text-decoration: none;
	font-size: .9em;
	position: relative;
}
	.misdisplay::before{
		content: "";
		display: inline-block;
		height: 1.4em;
		width: 1.4em;
		background: url(/japan/assets/svg/attention.svg) center center no-repeat;
		background-size: 100% auto;
		filter: invert(72%) sepia(85%) saturate(761%) hue-rotate(11deg) brightness(102%) contrast(101%);
		transform: translate(-.5em,.3em);
	}
	.misdisplay:hover{
		background: #e00;
		color: #fff;
		/*text-decoration: underline;*/
		transition: .2s;
	}
	.misdisplay:hover::before{
		filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(133deg) brightness(105%) contrast(102%);
		transition: .2s;
	}