@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	width				: 100%;
	background			: #e5e5e5;
	font-size			: 1.6rem;
	font-family			: "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	line-height			: 1.8;
	color				: #252525;
}
body.open{
	position: fixed;
}
@media screen and (min-width: 768px) {
body{
	padding: 0 0 30px 0;
}
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: underline;
	color				: #7d0000;
}
a:hover{ text-decoration: none; }



/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 768px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 768px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 768px) { [data-show=pc]{ display: block; } }


/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed!important;
	top					: 0px;
	z-index				: 10;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{ width: 100%; }


/*-----------------------------------------------------
 main
-----------------------------------------------------*/
.main{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: 90vw;
	outline:11px solid #7d0000;
}
@media screen and (max-width: 767px) {
.main{
	margin				: 20px auto -110px auto;
	border-top:50px solid #7d0000;
	border-bottom:100px solid #7d0000;
}
}
@media screen and (min-width: 768px) {
.main{
	margin				: 150px auto 0 auto;
	outline:100px solid #7d0000;
	width: 768px; }
}
@media screen and (min-width: 1100px) {
.main{ width: 1000px; }
}
@media screen and (min-width: 1300px) {
.main{ width: 1200px; }
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}
#language{
	position: absolute;
	right: 0;
	top: -58px;
	height: 60px;
}
@media screen and (min-width: 768px) {
#language{
	top: -110px;
	height: 125px; }
}

#header{ z-index: 2; }
#contents{
	background			: #FFF;
	padding				: 1px 0;
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 navi
-----------------------------------------------------*/
/* navi-opener
-----------------------------------------------------*/
#navigation .navi-opener{
	position			: absolute;
	top					: 10px;
	left				: 50%;
	z-index				: 100;
	width				: 35px;
	height				: 25px;
	cursor				: pointer;
	transform			: translateX(-50%);
}
@media screen and (min-width: 768px) {
#navigation .navi-opener{
	top					: -70px;
	width				: 70px;
	height				: 50px;
}
}
#navigation .navi-opener img{
	position			: absolute;
	opacity				: 1;
	transition			: opacity 0.5s ease-in-out;
}
#navigation .navi-opener img.closer{ opacity: 0; }
.open #navigation .navi-opener .closer{ opacity: 1; }
.open #navigation .navi-opener .opener{ opacity: 0; }

/* navi-content
-----------------------------------------------------*/
#navigation .navi-content{
	position			: fixed;
	top					: 0;
	left				: 0;
	z-index				: 10;
	opacity				: 0;
	width				: 100%;
	height				: 100%;
	background			: #7d0000;
	pointer-events		: none;
	transition			: opacity 0.8s ease-in-out;
}
.open #navigation .navi-content{
	opacity				: 1;
	pointer-events		: auto;
}

/* container
-----------------------------------------------------*/
#navigation .container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: 90vw;
}
@media screen and (min-width: 768px) {
#navigation .container{ width: 668px; }
}
@media screen and (min-width: 1100px) {
#navigation .container{ width: 900px; }
}
@media screen and (min-width: 1300px) {
#navigation .container{ width: 1100px; }
}

/* navi
-----------------------------------------------------*/
#navigation .navi{
    margin: 60px 0 0 0;
	width				: 50%;
}
#navigation .navi li {
    margin: 18px 0;
}
#navigation .navi li a{
	position			: relative;
	left				: 0;
	transition			: left 0.2s ease-in-out;
}
#navigation .navi li a:hover{ left: 40px; }
@media screen and (min-width: 768px) {
#navigation .navi{
	margin				: 120px 0;
	width				: 25%;
}
#navigation .navi li{ margin: 30px 0; }
}

/*-----------------------------------------------------
 language
-----------------------------------------------------*/
#language .navi{
	position			: relative;
	top					: 15px;
	z-index				: 11;
	text-align			: right;
}
#language .navi li{
	display				: inline-block;
	list-style			: none;
	font-size			: 1.5rem;
}
#language .navi li:after{ content: " ｜"; }
#language .navi li:last-child:after{ content: ""; }
#language .navi li a{
	text-decoration		: none;
	color				: #252525;
}
.page-ja-child #language .navi li.ja a,
.page-ja #language .navi li.ja a,
.page-en-child #language .navi li.en a,
.page-en #language .navi li.en a,
.page-cn-child #language .navi li.cn a,
.page-cn #language .navi li.cn a{ color: #fff; }


@media screen and (min-width: 768px) {
#language .navi{ top: 47px; }
}

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
/* logo
-----------------------------------------------------*/
#header .logo{
	position			: absolute;
	left				: -3vw;
	top					: -3vw;
	width				: 40vw;
}
#header .logo2{
	position			: absolute;
	right				: 3vw;
	bottom				: 3vw;
	width				: 25vw;
}
@media screen and (min-width: 768px) {
#header .logo{
	left				: -15px;
	top					: -15px;
	width				: 250px;
}
#header .logo2{
	right				: 15px;
	bottom				: 15px;
	width				: 150px;
}
}
@media screen and (min-width: 1100px) {
#header .logo{
	left				: -45px;
	top					: -45px;
	width				: 336px;
}
#header .logo2{
	right				: 25px;
	bottom				: 25px;
	width				: 267px;
}
}

/*-----------------------------------------------------
 section
-----------------------------------------------------*/
.section{
	position			: relative;
	clear				: both;
	margin				: 30px 0 20px 0;
	overflow			: hidden;
}
body:not(.front-page) .section{
	margin: 30px 0 0px 0;
	min-height			: 200px;
}
.section p{ line-height: 1.95; }

@media screen and (min-width: 768px) {
.section{ margin: 70px 0 50px 0; }
body:not(.front-page) .section{
	margin				: 70px 0 40px 0;
	min-height			: 650px;
}

}
@media screen and (min-width: 1300px) {
body.page-security .section{
	min-height			: 1300px;

}
}
/* container under
-----------------------------------------------------*/
.section .container{
	position			: relative;
	margin				: 0 auto;
	width				: 70vw;
}
.section .the_title{
	margin				: 0 0 10px 0;
	letter-spacing		: 3px;
	font-size			: 16px;
	font-weight			: bold;
	color:#7D0000;
}
.section .the_content{
	margin				: 0 0 30px 0;
	font-size			: 15px;
}
.section .more{
	margin				: 20px 0 0 0;
	width				: 80px;
}
.section .more a{
	position			: relative;
	top					: 0;
}
.section .more a:hover{ top: 3px; }

.section .title-eng{
	position			: absolute;
	top					: 0;
	width				: calc(calc(calc(100% - 70vw) / 2) * 0.8);
}
#contents .section:nth-child(odd) .title-eng	{ left: 0; }
#contents .section:nth-child(even) .title-eng	{ right: 0; }


.section .the_thumbnail{
	width				: calc(calc(calc(100% - 70vw) / 2) + 70vw);
	background			: url(../images/img_back.png) repeat;
	background-size		: 10px;
}

#contents .section:nth-child(odd) .the_thumbnail{
	float				: right;
	padding				: 0 calc(calc(100% - 70vw) / 2) 0 0;
}
#contents .section:nth-child(even) .the_thumbnail{ padding: 0 0 0 calc(calc(100% - 70vw) / 2); }


@media screen and (min-width: 768px) {
.section .container{ width: 500px; }

.section .title-eng{ width: calc(calc(calc(100% - 500px) / 2) * 0.44); }
#contents .section:nth-child(odd) .title-eng	{ left: calc(calc(calc(100% - 500px) / 2) /4); }
#contents .section:nth-child(even) .title-eng	{ right: calc(calc(calc(100% - 500px) / 2) /4); }

.section .the_thumbnail{ width: calc(calc(calc(100% - 500px) / 2) + 500px); }
#contents .section:nth-child(odd) .the_thumbnail{
	margin				: 0 0 0 calc(calc(100% - 500px) / 2);
	padding				: 0 calc(calc(100% - 500px) / 2) 0 0;
}
#contents .section:nth-child(even) .the_thumbnail{ padding: 0 0 0 calc(calc(100% - 500px) / 2); }

.section .the_title{ font-size: 25px; }
.section .the_content{
	font-size			: 16px;
	margin				: 0 0 50px 0;
}
.section .more{ width: 145px; }
}

@media screen and (min-width: 1100px) {
.section .container{ width: 735px; }

.section .title-eng{ width: calc(calc(calc(100% - 735px) / 2) * 0.44); }
#contents .section:nth-child(odd) .title-eng	{ left: calc(calc(calc(100% - 735px) / 2) /4); }
#contents .section:nth-child(even) .title-eng	{ right: calc(calc(calc(100% - 735px) / 2) /4); }

.section .the_thumbnail{ width: calc(calc(calc(100% - 735px) / 2) + 735px); }
#contents .section:nth-child(odd) .the_thumbnail{
	margin				: 0 0 0 calc(calc(100% - 735px) / 2);
	padding				: 0 calc(calc(100% - 735px) / 2) 0 0;
}
#contents .section:nth-child(even) .the_thumbnail{ padding: 0 0 0 calc(calc(100% - 735px) / 2); }
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer .container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: 90vw;
}
@media screen and (min-width: 768px) {
#footer .container{ width: 768px; }
}
@media screen and (min-width: 1100px) {
#footer .container{ width: 1000px; }
}
@media screen and (min-width: 1300px) {
#footer .container{ width: 1200px; }
}

/* navi
-----------------------------------------------------*/
#footer .navi ul{
	padding				: 35px 0;
	text-align			: center;
}
#footer .navi ul li{
	display				: inline-block;
	list-style			: none;
	margin				: 0 5px;
	font-size			: 12px;
}
#footer .navi ul li a{
	text-decoration		: none;
	color				: #fff;
}
#footer .navi ul li a:hover{ text-decoration: underline; }
@media screen and (min-width: 768px) {
#footer .navi ul{ text-align: right; }
#footer .navi ul li{ font-size: 15px; }
}


/* content styles
---------------------------------*/
.back {
	text-align:right;
}
.title_n {
	font-size:24px!important;
	font-weight:bold;
	color:#7d0000;
}
.thum0 {
padding-top:100px;
	background-color:#fff;
}
	.top_news {
	width:100%;
	border-bottom-width: 7px;
    border-bottom-style: solid;
    border-bottom-color: #7d0000;
	padding-bottom:27px;
}

.top_news a {
	color:#252525;
	text-decoration:none;
		font-weight:bold;
}
.top_news a:hover {
	color:#7d0000;
	text-decoration:none;
	font-weight:bold;
}
.news_l {
	float:left;
	width:370px;
	padding:60px 40px 30px;
}
.news_r {
	float:left;
	padding:60px 0 0;
	width:790px;
}
@media screen and (max-width: 1300px) {
.news_r {
float: none;
    padding: 60px 0 0;
    width: 90%;
    margin: auto;
}
}
.date {
	margin-right:45px;
}
@media only screen and (max-width: 481px){
.date {
	margin-right:10px;
	font-size:12px;
}
.news_l {
	float:left;
	width:60%;
	padding:40px 30px 30px;
}
	.news_l img{
	width:100%;
}
.news_r {
	float:none;
	padding:60px 0 0;
	width:90%;
	margin:auto;
}
}
.news_list {
	width:auto;
}
.news_list li {
border-bottom-width: 2px;
    border-bottom-style: dashed;
    border-bottom-color: #000;
	width:100%;
	padding:10px 0;
}

.the_content .inner h3{
	margin				: 50px 0 20px 0;
	font-size			: 2.4rem;
	line-height			: 1.5;
	color:#7D0000;
	font-weight:bold;
}
.the_content .inner h3:first-child{ margin: 0 0 15px 0; }
.the_content .inner h3 small{
	display				: block;
	margin				: 5px 0 0 0;
	font-size			: 1.4rem;
}

.the_content .inner p{ margin-bottom: 1em; }

.the_content .inner table th,
.the_content .inner table td{
	padding				: 20px;
}
@media only screen and (max-width: 481px){
	.the_content .inner table th {
    min-width: 8em;
    /* word-break: break-all; */
    padding: 10px;
    font-size: 12px;
	}
	.the_content .inner table td{
	padding				: 10px;
		word-break: break-all;
		font-size:12px;
}
	
}




.the_content .inner table tr:nth-child(odd) th {  
  background: rgba(0, 0, 0, 0.05);
}
.the_content .inner table tr:nth-child(odd) td {  
  background: rgba(0, 0, 0, 0.05);
}  

.sec_li li{
	margin-left:20px;
}

.sec_li li{
	list-style-position: inside;
	list-style-type: decimal;
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin-bottom: 10px;
}

.txt_r {
	text-align: right;
}

.about1 {
	width: 60%;
	margin-bottom: 50px;
}

@media only screen and (max-width: 481px){
.about1 {
	width: 100%;
	margin-bottom: 50px;
}
}

.about1 img{
	width:100%;
}

.about2_img {
	float: left;
	width: 25%;
	margin-right: 20px;
}

.about2_img img{
	width:100%;
}

.service1 {
	width: 100%;
}

.service1 img{
	width:100%;
}
.ue20 {
	margin-top:20px;
}