@charset "utf-8";

body{
	text-align: center;
	line-height: 1.6;
	font-size: 0.9em;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin:0;
	padding:0;
	color:#333;
	background-color:#fff;
	overflow-y: scroll;
}
a:link {color:#666; text-decoration:none;}
a:visited {color:#666;text-decoration:none;}
a:hover {color:#ccc; text-decoration:none;}
a:active {color:#666;text-decoration:none;}
img.icon{width: 25px; height: 20px; margin-top: 0.3%; margin-left: 1%;}


/* header
--------------------------------------------------------------------------------------*/
#header{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

#header #head{
	max-width: 1260px;
	margin: 0 auto;
	clear: both;
}

#header #head h1 {
	width: 130px;
	height:130px;
	margin:30px 0 0 0;
	padding: 0;
	float:left;
	box-shadow: 0 0 10px #999;
	-webkit-box-shadow: 0 0 10px #999;
	-moz-box-shadow: 0 0 10px #999;
	z-index: 7712;
	position:relative;
}

#header #head ul#language{
	height: 23px !important;
	margin: 10px 0 0 0;
	padding: 0;
	float: right;
}
#header #head #language li{
	width: 85px!important;
	height: 23px !important;
	margin: 0;
	padding:0;
	float: left;
}
#header #head #language li.ja.on{ background:url(../../img/common/lg_ja_on.png) 0px top no-repeat;}
#header #head #language li.en.on{ background:url(../../img/common/lg_en_on.png) 0px top no-repeat;}
#header #head #language li.on img{visibility: hidden;}



/* navigation
--------------------------------------------------------------------------------------*/
#nav{
	height: auto;
	margin:-80px 0 0 0;
	padding: 0.5% 0 0.5% 140px;
	text-align:center;
	background:#595757;
	z-index: 7710;
	position:relative;
}

#nav #navigation{
	max-width: 1260px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#nav #navigation #menu {
	width: 98%;
	/*width: 85%;*/
	text-align:center;
}
#nav #navigation #menu ul {
	margin:0 0;
	/*margin:0;*/
	padding:0;
	list-style-type:none;
}
#nav #navigation #menu li {
	display:inline-block;
	position:relative;
	text-align:center;
	padding: 0 3%;
	font-size: 90%;
}
#menu li a{ color: #fff;}
#menu li a:hover {opacity: .5; filter:alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
#menu li.on{color: #18e7ff;}
#menu li.on a{ color: #18e7ff;}
.slicknav_menu {display:none;}


/* common
--------------------------------------------------------------------------------------*/
#bnnArea{
width: 90%;
margin: 0 5%;
padding: 0;
text-align: center;
}

#bnnArea .host{
	clear: both;
	margin-bottom: 5%;
}

#bnnArea h3{
	color:#666;
	font-size:20px;
	margin: 0 0 20px 0;
	padding:0;
	line-height:1;
	position: relative;
	text-align: center;
	font-weight:400;
}
#bnnArea h3:before {
	border-top: 1px solid #666;
	content: "";
	position: absolute;
	top: 42%;
	left: 0;
	width: 100%;
}
#bnnArea h3 span {
	background-color: #fff !important;
	display: inline-block;
	padding:0 20px;
	position: relative;
}

#bnnArea p {
	text-align: left;
	margin: 0 0 2% 0;
}

#bnnArea p.alC {
	text-align: center;;
	margin: 0 0 2% 0;
}
#bnnArea p img{
}
#bnnArea p img.fL{
	margin-right: 2%;
}

.boxx{
clear:both;	
}
.box {
margin-bottom: 40px;
padding-bottom: 40px;
clear:both;
}

.box2nd {
margin-bottom: 20px;
padding-bottom: 20px;
clear:both;
}
.box20 {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
clear:both;
}

.box10 {
margin-bottom: 10px;
padding-bottom: 10px;
clear:both;
}

.box5 {
margin-bottom: 5px;
padding-bottom: 5px;
clear:both;
}

.box0 {
margin: 0;
padding: 0;
clear:both;
}

.box90per {
	width: 90%;
margin-left: 5%;
margin-right: 5%;
clear:both;
}

.box80per {
	width: 80%;
margin-left: 10%;
margin-right: 10%;
clear:both;
}

.box70per {
	width: 70%;
margin-left: 15%;
margin-right: 15%;
clear:both;
}
.boxBorder{
margin: 0 0 30px 0;
padding: 0 0 30px 0;
clear:both;
	border-bottom: 1px dotted #666;
}
.boxColor{
	clear:both;
	background-color:#f6faff;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	padding: 18px 24px;
	border: 1px solid #699fdb;
}
.boxColor2{
	clear:both;
	background-color:#fff;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	padding: 18px 25px;
	border: 1px solid #666;
}



/* footer
--------------------------------------------------------------------------------------*/
#footer {
clear:both;
width: 100%;
margin: 0;
padding: 1% 0 0 0;
	background: linear-gradient(135deg, #68e4fb, #397ebe) ;
	min-width: 100%;
	color: #fff;
	font-size: 12px;
	text-align: center;
}

#footer #contact{
	max-width: 1260px;
	margin: 0 auto 0 auto;
	padding:0;
	clear:both;
	text-align:left;
}
#footer #contact p.cons{
	width:98%;
	text-align: center;
	margin: 0 1% 1% 1%;
}
#footer #contact p.cons a{color: #fff; text-decoration: underline;}

#footer #contact dl{
	width:98%;
	text-align: left;
	margin: 2% 1% 3% 1%;
	position: relative;
}
#footer #contact dt{
	width: 8em;
	margin: 0 0 3px 0;
	padding: 0;
	float: left;
	clear:both;
	position:relative;
}
#footer #contact dd{
	margin: 0 0 3px 8em;
	padding-left: 2em;
	position:relative; 
	overflow:hidden;
	text-align: left;
	border-left: 1px solid #fff;
}
#footer #contact a{color: #fff;}

#footer #foot{
	width: 100%;
	margin: 0;
	padding:1% 0 0.5% 0;
	clear:both;
	text-align:left;
	background: linear-gradient(135deg, #5bcefa, #164090);
}
#footer #foot #footer_menu{
	max-width: 1260px;
	margin: 0 auto;
	clear:both;
}
#footer #foot ul{
	padding: 0;
	text-align: center;
}
#footer #foot li{
	display: inline;
	margin-left: 5%;
}
#footer #foot  li a{
	color: #fff;
	background:url(../../img/common/arrow.png) no-repeat left 3px;
	background-size:4px 8px;
	padding-left:11px;
}

table.zero{
width:100%;
font-size:100%;
text-align:left;
border-collapse:collapse;
}

.zero th{
width:5%;
padding:0 2px 0 0;
text-align:left;
vertical-align:top;
white-space:nowrap;
}
.zero td{
width:auto;
padding: 0;
text-align:left;
vertical-align:top;
}
table.two{
width:100%;
font-size:100%;
text-align:left;
border-collapse:collapse;
}
.two th{
	margin:0;
	padding:6px 12px;
	text-align:center;
	font-weight:700;
	font-size:95%;
	line-height:1.2;
	vertical-align:middle;
	white-space:nowrap;
	color: #fff;
	background-color:#2267b3;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
}
.two td{
	width:auto;
	margin: 0;
	padding:8px 12px ;
	text-align:left;
	vertical-align:middle;
	border-bottom:1px solid #fff;
	background-color:#fcfcfc;
}
 .two td.bg{
	background-color:#efefef;
}
 table.three{
width:100%;
font-size:100%;
text-align:left;
border-collapse:collapse;
	border: 1px solid #ccc;
}
 .three th{
	width: 30%;
	margin:0;
	padding:10px;
	font-size:95%;
	line-height:1.2;
	vertical-align:middle !important;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align: center;
}
 .three td{
	width:auto;
	margin: 0;
	padding:10px;
	text-align:left;
	vertical-align:top;
	border-bottom:1px solid #ccc;
}


ul.lists{
	text-align:left;
}
.lists li{
	display:block;
	text-align:left;
}
.lists li.circle{background:url(../../img/common/circle.png) no-repeat 0 6px;background-size:12px 12px; padding-left: 15px;}
.lists li.circle2{background:url(../../img/common/circle.png) no-repeat 0 6px;background-size:12px 12px;	padding-left: 15px;}
.lists li.kome{background:url(../../img/common/kome.png) no-repeat 0 3px;background-size:15px 15px; padding-left: 20px;}
.lists li.komeRed{background:url(../../img/common/komeRed.png) no-repeat 0 3px;background-size:15px 15px; padding-left: 20px;}
.lists li.dot{background:url(../../img/common/dot.png) no-repeat 0 8px;background-size:6px 6px; padding-left: 12px;}


/*column*/
.column3,
.column4 {
	display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
	align-content:flex-start;
	word-wrap:break-word;	
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
}
.column3 .column{
  margin: 0 0 5% 0;
  width: calc(30%);
	display: table;
 }
.column3::after {
	width: calc(30%);
	display: block;
	content:"";
}
.column3 .column img,
.column4 .column img{
	width: 100%;
	height: auto;
	margin-bottom: 2%;
}
.column4 .column{
  margin: 0 0 30px 0;
  width: calc(22%);
	padding-bottom: 2%;
	display: table;
}
.column4::after {
	content: "";
	display: block;
	width: calc(22%);
}
.column4::before {
	content: "";
	display: block;
	width: calc(22%);
	height: 0;
	order: 1;
}
/*
.column .item img{	width: 100%; height: auto; }
*/

/* ここからタブ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/
@media screen and (max-width: 1260px) {

img {
	vertical-align: top;
	max-width: 100% !important;
	height: auto;
	-ms-interpolation-mode: bicubic; 
}
#footer #foot ul{
	width: 100%;
}
#nav #navigation #menu li {
	font-size: 85%;
	padding: 0 1.5%;
}

}



/* ここからスマホ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 481px) {
.forPc {display: none;}
.forSp {display: block;}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-box-shadow: none;
box-shadow: none;   
outline: none;
}

html, body{
	text-align: center;
	width: 100%;
	font-size:14px;
	line-height:1.5;
	min-width:initial;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
    background:none;
	margin: 0;
    padding: 0;
}

img {
	vertical-align: top;
	width: 100%;
	max-width: 100% !important;
	height: auto;
}
a {word-break: break-all;}


/* header
--------------------------------------------------------------------------------------*/
#header{
	width: 100%;
	margin:0;
	padding: 0;
	text-align: center;
	position:fixed;
	top:0;
	z-index:9999;
	background:#fff;
}

#header #head{
	max-width: 1260px;
	margin: 0 auto;
	clear: both;
}

#header #head h1 {
	width:30%;
	height:auto;
	margin:1% 35%;
	box-shadow:none ;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

#header #head ul#language{
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	padding: 0;
	float: right;
	z-index: 9955;
}
#header #head #language li{
	margin: 0;
	padding:0;
}
#header #head #language li.ja.on{ background:none; display: none;}
#header #head #language li.en.on{ background:none; display: none;}
#header #head #language li.on img{visibility: none;}

#footer #foot{
	background: none;
}


/* navigation
--------------------------------------------------------------------------------------*/
.slicknav_menu {display:block;}
#nav{display: none;}
	

/* common
--------------------------------------------------------------------------------------*/
#wrapper{
width: 100%;
margin: 0;
padding: 5% 0;
text-align: center;
clear:both;
}

#bnnArea{
	width: 90%;
	clear:both;
	margin: 0 5%;
	padding: 0;
}
#bnnArea h3{
	font-size: 1.3em;
}
#bnnArea .host{
	clear: both;
	margin-bottom: 8%;
}
#bnnArea p img{
	width: 60%;
	padding:  2% 20%;
}

#bnnArea p {
	margin: 0 0 5% 0;
}

.box {
margin-bottom: 10%;
padding-bottom: 10%;
clear:both;
}


/* footer
--------------------------------------------------------------------------------------*/
#footer {
clear:both;
width: 100%;
margin: 0;
padding: 2% 0 1% 0;
	min-width: 100%;
}

#footer #contact{
	max-width: 100%;
	margin: 0;
	clear:both;
}
#footer #contact dl{
	width:96%;
	text-align: left;
	margin: 2% 1% 3% 1%;
	padding: 2%;
	position:inherit;
}
#footer #contact dt{
	width: auto;
	float: none;
}
#footer #contact dd{
	margin: 0 0 3px 0;
	padding-left: 0;
	border-left: none;
}
#footer #contact dd a{color: #fff;}


#footer #foot{
}
#footer #foot #footer_menu{
	max-width: 100%;
	margin: 0;
}
#footer #foot ul{
	width: 96%;
	padding: 2%;
	float: none;
}
#footer #foot li{
	display: inline;
	margin-left: 0;
	margin-right: 2%;
}
#footer #foot  li a{
	color: #fff;
	background:url(../../img/common/arrow.png) no-repeat left 3px;
	background-size:4px 8px;
	padding-left:11px;
}

.boxColor,
.boxColor2{
	padding: 3% 3%;
}
	
.box70per,
.box80per {
	width: 100%;
margin-left: 0;
margin-right: 0;
clear:both;
}

.scrollbar{
width:100% !important;
overflow: auto;
}
.scrollbar::-webkit-scrollbar{height: 5px;}
.scrollbar::-webkit-scrollbar-track{background: #f1f1f1;}
.scrollbar::-webkit-scrollbar-thumb {background: #bcbcbc;}

.scrollbar table.two{
	width: 300% !important;
}
	/*column*/
.column3 .column{
  margin: 0 1% 5% 1%;
	width: calc(48%);
	display: table;
 }

}