@charset "utf-8";
/* CSS Document */
html{
    font-size: 62.5%;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.6rem;
	color:#000;
	margin:0;
	padding:0;
	background-image:url(../images/bg.jpg);
}

@media (max-width: 991px){
	body {
		background-image:none;
	}
}

#header{
	background-color: #333;
	color: #ffffff;
	padding: 0.5rem 2rem;
}

#header .list-language{
	margin: 0;
	text-align: right;
}

#header .list-language li{
	display: inline-block;
	background-image: none;
	padding: 0;
}

#header .list-language li:not(:last-child){
	margin-right: 2rem;
}

#header .list-language li::before{
	content: none;
}

#header .list-language a{
	color: #ffffff;
}

#header .list-language a:hover,
#header .list-language a:active,
#header .list-language a:focus{
	text-decoration: none;
	opacity: 0.8;
}

html[lang="ja"] #header .list-language .language_ja a{
	pointer-events: none;
}

html[lang="en"] #header .list-language .language_en a{
	pointer-events: none;
}

@media (max-width: 991px){
	#header .list-language li{
		font-size: 1.8rem;
	}
}

#base {
	margin:0 auto;
	padding:0;
	width:100%;
	background-color:#FFF;
}

@media (min-width: 992px){
	#base {
		width: 970px;
	}	
}


.img_top {
	width: 100%;
	vertical-align: middle;
}

.img_top.en{
	display: none;
}

html[lang="en"] .img_top.en{
	display: block;
}

html[lang="en"] .img_top.ja{
	display: none;
}


#main {
	margin:0;
	padding:2rem;
}

@media (max-width: 991px){
	#main {
		padding:1rem;
	}
}

h1 {
	font-size: 2.4rem;
	color:#F00;
	margin: 0 0 2rem;
	background-color: #333;
	position: relative;
	padding: 1rem 2rem 1rem 12rem;
}

h1::before{
	content: url(../images/h1_bg.png);
	position:absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	    -ms-transform : translateY(-50%);
	        transform : translateY(-50%);
	left: 1rem;
}

@media (max-width: 991px){
	h1 {
		font-size: 1.8rem;
		padding: 0.5rem 1rem;
		margin: 0;
	}

	h1::before{
		content: none;
	}
}

.lyt-box{
	margin-bottom: 2rem;
    padding: 2rem 1rem;
    border: 1px solid #efefef;
}

.lyt-box > :last-child{
	margin-bottom: 0;
}

@media (max-width: 991px){
	.lyt-box{
		padding: 0;
		border: none;
	}
}

dl{
	margin:0 0 2rem;
}

dt{
	background-color: #333333;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

dd{
	margin: 0 0 2rem;
	font-size: 1.4rem;
	line-height: 1.6;
	padding: 0 1rem;
}

dl > dd:last-child{
	margin-bottom: 0;
}

@media (max-width: 991px){
	dt{
		font-size: 1.6rem;
	}
}

.content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	counter-reset: number-heading;
}

.content .lyt-box{
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.content .lyt-box:not(:last-child){
	margin-right: 1rem;
}

@media (max-width: 991px){
	.content {
		display: block;
	}

	.content .lyt-box{
		padding: 2rem 1rem;
		border: 1px solid #efefef;
	}

	.content .lyt-box:not(:last-child){
		margin-right: 0;
	}
}

.content .lyt-box ul{
	padding: 0;
}

h2 {
	color:#000;
    margin: 0 0 2rem;
    padding: 0.5rem 1rem 0.5rem 6rem;
    background-color: #efefef;
	font-size: 2rem;
	position: relative;
}

h2::before{
	content: url(../images/h2_bg.png);
	position:absolute;
	height: 52px;
    width: 53px;
	top: -7.5px;
	left: 0.5rem;
}

h2::after{
	counter-increment: number-heading;
    content: counter(number-heading, upper-alpha);
	color: #ffffff;
	position:absolute;
	left: 0.5rem;
    top: 10px;
    font-size: 1.6rem;
    text-align: center;
    height: 52px;
    width: 53px;
}

@media (max-width: 991px){
	h2 {
		font-size: 1.8rem;
	}
}

p {
	line-height: 1.8;
	margin-bottom: 2rem;
}


ul {
	margin: 1rem 2rem 0.5rem 0;
}


ul li {
	position: relative;
	list-style:none;
	padding-left: 2.5rem;
	font-size: 1.6rem;
	line-height: 1.8;
}

ul li::before{
	position: absolute;
	content: url(../images/li_icon.jpg);
	top: 0;
	left: 0;
}


a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #666;
}


a:hover {
	text-decoration: underline;
	color: #F00;
}

a:active {
	text-decoration: none;
	color: #F00;
}

img {
	border:none;
	margin:0;
	padding:0;
	width:100%;
	max-width: 100%;
}

#footer {
	margin:0 auto;
	height:10rem;
	padding:0.5rem;
	background-color:#333;
	clear:both;
}

#footer p {
	font-size: 1.4rem;
	color:#FFF;
	text-align:center;
}