@charset "shift_jis";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Orbitron:wght@400..900&family=RocknRoll+One&display=swap');

/*
 font-family: "Noto Sans JP", serif;
 font-family: "Noto Serif JP", serif;
   font-family: "Orbitron", sans-serif;
  font-weight: 400;
  font-style: normal;
*/



body {
/*	color: #999999; */
	color: #000000;
	margin: 0px;
	padding: 0px;
	text-align: center;
	 font-family: "Noto Sans JP", serif;
	background: #fff;
}

h1,h2,h3,h4,h5,h6,p,ul,li{
	margin: 0px;
	padding: 0px;
}

ul{
	list-style-type: none;
}

img {
    width:100%;
    height:auto;
	border: none;
}

.color1 {
	color: #990000;
}

#main p, #sub p {
	margin: 0.5em 1em 1em;
}

a{
  color: #004098;   
text-decoration: underline; 
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
}

a:hover { opacity:0.5; }


.flex{display:flex; justify-content: space-between; align-items: center;}
.inner{max-width:1000px;margin:0 auto;}



/*ヘッダー
------------------------------------------------------------------------------------------*/
header{}
header .header_inner{padding:0.75em;}

header h1{flex-basis:350px;margin:0;font-size:144%;text-align: center;color:#004098;font-weight:700;display:flex;align-items: center;justify-content: flex-start;margin:0 0 0 0.5em;}

header h1 span{width:40px;display:inline-block;margin:0 1em 0 0;}
header h1 span img{width:auto;height:33px}

header .description{flex-basis:60%;padding:0.5em;text-align: left;font-size:80%;font-weight:500;}
header .lang{flex-basis:15%;padding:0.5em;text-align: left;}


.keyvisual{height:500px; position: relative; overflow: hidden;
/*background: linear-gradient(135deg,  #4fdfc2 0%,#fcf558 80%);*/
background: linear-gradient(to right,  #d0e4f7 0%,#0a77d5 100%);
}
.kv_bg_image{position:absolute; width:120%;left:-10%;bottom:-17vw;z-index:1;
    
animation-delay: 0;
animation-name: kv_bg_image;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;


}
.kv_copy {
position: relative;
margin:1em 0 1em 0;
text-align: center;
z-index: 3;
font-size:333%;
font-family: "Orbitron", sans-serif;
font-weight:500;
color:#004098;
color:#5db377;
text-shadow: 1px 2px  0 #fff;

animation-delay: 0.5s;
animation-name: kv_copy;
animation-duration: 4s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;

}


.kv_copy.orangecolor {
color:#e2a209;
}

.kv_copy.redcolor {
color:#ca0223;
}



.kv_wrap{justify-content: center;}
.kv_text {margin:0 3% 0 0;z-index: 3;font-size:155%;font-weight:700;text-align: left;line-height:188%; 


animation-delay: 1s;
animation-name: kv_text;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;
}
.kv_logo{width: 275px;z-index: 3;

animation-delay: 2.5s;
animation-name: kv_text;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode:  forwards;
opacity: 0;

}



@keyframes kv_bg_image {
  0% {    opacity: 0;  transform: scale(1,1);  }
  100% {    opacity: 1;  transform: scale(1.2,1.2); }
}

@keyframes kv_copy {
  0% {    opacity: 0;  transform: translateX(-3%); }
  100% {    opacity: 1; transform: translateY(0); }
}


@keyframes kv_text {
  0% {    opacity: 0;  transform: translateX(-50%); }
  100% {    opacity: 1; transform: translateY(0); }
}

@keyframes kv_text {
  0% {    opacity: 0;  transform: translateX(-15%); }
  100% {    opacity: 1; transform: translateY(0); }
}

/*
.kv_bg_image{position:absolute; width:120%;left:-10%;bottom:-17vw;z-index:1;}
.kv_copy {position: absolute;left: 10%; top:15%;z-index: 3;font-size:333%;
font-family: "Orbitron", sans-serif;
font-weight:500;
color:#004098;
text-shadow: 1px 2px  0 #fff}
.kv_text {position: absolute;max-width: 600;left: 12%; top:36%;z-index: 3;font-size:144%;font-weight:700;text-align: left;line-height:200%; font-family: "Noto Serif JP", serif;}


.kv_logo{position: absolute;
width: 275px;
right: 22%;
bottom: 27%;
z-index: 3;}
*/
/*.kv_logo{    position: absolute;width: 400px;right: 10%; bottom:17%;z-index: 3;}*/



/* ----------------------------------- 言語ナビゲーションバー ------------------------------- */
#nav {display:flex;flex-flow:row wrap;
}
#nav li {flex-basis: 50%;
}
#nav li a {
	color: #999;
	text-decoration: none;
	background: url(../img/new/arrow1.gif) no-repeat left center;
	padding-left: 13px;font-size:80%;
}
#nav a:hover {
	color: #BB000F;
   
}


/* ----------------------------------- メニューナビゲーションバー ------------------------------- */
div.menu {
                                                /* ナビゲーションの幅 */
background: #004098; /* ナビゲーションの背景 */

font-size: 100%;

}

/* --- メニューエリア --- */
div.menu ul.nl {
                                                /* メニューの幅 */
margin: 0 auto;                                                /* センターに配置 */
padding: 0;

                            
list-style-type: none;
text-align: center;
display: flex;
justify-content: center;
    
}

/* --- メニュー項目 --- */
div.menu ul.nl >li {
width: 12%; /* 項目の幅 */
}

/* --- リンク --- */
div.menu ul.nl li a {
display: block;
position: relative;              /* IE6用 */
padding: 7px 2px 4px;            /* リンクエリアのパディング（上、左右、下） */

text-decoration: none;           /* テキストの下線（なし） */
/* font-weight: bold;                文字の太さ（太字） */
font-weight: normal;             /* 文字の太さ（ノーマル） */
color: #fff;                  /* 文字色 */
line-height: 100%;               /* 行の高さ */
}


/* 英字部分 */
div.menu ul.nl li a span.en {
display: block;
margin-top: -1px;                /* 英字部分の上マージン */
font-size: 75%;                  /* 英字の文字サイズ */
font-weight: normal;             /* 文字の太さ（ノーマル） */
letter-spacing: 0.1em;
color: #eee8aa;                  /* 英字の文字色 */
}
/* --- ポイント時の設定 --- */
div.menu ul.nl li a:hover {
background: #fcf558 ;   /* ポイント時の背景 */
color:#004098;  
 opacity: 1;    
}
div.menu ul.nl li a:hover span.en {
color: #004098; /* ポイント時の英字の文字色 */
}

div.menu ul.nl li:hover ul.sl {
position: absolute;
display: block;                     /* 疑似要素 :hover で下層のメニューを可視に */
width: 10%;                       /* 項目の幅 */
z-index: 100;
padding:1%;                               /* 上境界線 */
background: #fff ;  /* メニューの背景 */
text-align: left;
}
div.menu ul.sl li a {color:#000;font-size:90%;}
div.menu ul.sl li:hover a {
float: none;
font-weight: normal;
background: none ;  /* ポイント時の背景 */
text-decoration: none;              /* テキストの下線（なし） */
color: #f00;                     /* ポイント時の英字の文字色 */
}

/* 下層のメニューを不可視に */
div.menu ul.sl {
display: none;
    
}


/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}





/*トップメイン
------------------------------------------------------------------------------------------*/
#top_main_wrap{}
#top_main_wrap section{padding:2em 1em}

/*
#top_main_wrap section h2{font-size:222%;font-weight:700;position: relative;margin:0 0 1.25em 0;color:#004096;}
#top_main_wrap section h2:after{
content:"";
width: 0;
height: 0;
border-style: solid;
border-color: #c00 transparent transparent transparent;
border-width: 10px 50px 0px 50px;
position: absolute;
bottom:-22px;    
left:0;
    right:0;
    margin:auto;
}
*/

#top_main_wrap section h2{font-size:111%;font-weight:500;margin:0 0 0.5em 0;text-align: left;}
#top_main_wrap section h2 span{font-size:246%;font-weight:700;margin:0 0.25em 0 0;position:relative;}
#top_main_wrap section h2 span:after{content: "";height:2px; background: #000;width:100%;position: absolute;bottom:3px;left:0;}




#whatsnew .scroll_wrap{display:flex;justify-content: flex-start;flex-flow: nowrap;overflow: scroll;padding:0 0 1em 0;}
#whatsnew .scroll_wrap .item{min-width:900px;margin:0 1em 0 0;}

.swiper{position: relative;height:470px;}

.swiper-pagination{width:100%;position: absolute;bottom:0!important;}


#introduntion { background:#f9f9f9;}
#introduntion p{line-height:188%;font-size:122%;font-family: "Noto Serif JP", serif;font-weight:700;}


#top_product{}
#top_product ul.product_wrap{ flex-flow:row wrap; justify-content: center;}
#top_product ul.product_wrap li{flex-basis:48%;margin:0 0.5% 1em 0.5%;border:1px solid #033db1;padding:2px; }
#top_product ul.product_wrap li h3{font-size:130%; background: #033db1;padding:0.5em;position: relative;color:#fff;}
#top_product ul.product_wrap li h3:after{
content:"";
width: 7px;
height: 7px;
margin: auto 10px auto 0;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg);
position: absolute;
right:0.5em;
top:50%;
bottom:50%;
}
#top_product ul.product_wrap li a{text-decoration: none}
#top_product ul.product_wrap li a img{width:100%;height:auto;}
#top_product ul.product_wrap li a .thumb{ margin:0 0 2px 0;overflow: hidden;}
#top_product ul.product_wrap li a .thumb img{ transform: scale(1, 1);-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;}


#top_product ul.product_wrap li a:hover .thumb img{

    transform: scale(1.1, 1.1);  transition: 0.5s;}



/*border-radius:1em;overflow: hidden;*/



/*下層*/
#sub_main_wrap{text-align:left;margin:0 0 3em 0;}
.navibar{text-align:left;font-size:88%;margin:0.5em 1em 2em 1em;}


#sub_main_wrap h1{border-bottom:1px solid #000;padding:0 0 0.25em 0;margin:0 0 1em 0;}
#sub_main_wrap h2{border-left:5px solid #004098;padding:0.125em 0 0.5em 0.5em;margin:2em 0 1em 0;}
#sub_main_wrap .list table img{width:200px;height:auto;}

.pagetop{text-align:right;}


#sub_main_wrap table.pdtable{
    width:100%;
     background: #eff5fa;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    border-right:none;
    border-bottom:none; 

}

#sub_main_wrap table.pdtable td{
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-left:none;
    border-top:none;

}





/* **************************************************************** */
/*  フッターエリアの設定 */





footer{

	text-align: left;
	background: #f0f0f0;
    padding:2em 1em;
    color:#000;
}
footer a{color:#000;}

.footer_menu{margin:0 0 3em 0;}
.footer_menu ul{justify-content: center;flex-flow: row wrap;}
.footer_menu ul li{margin:1em 0.75em;}
.footer_menu ul li a{text-decoration:none;}
.footer_menu ul li a:before{ 
  content:"";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 10px 0 0;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
    position: relative;
top:-2px;}





.footer_wrap{align-items:flex-start;}
.add{flex-basis: 50%;}
.add .footer_coname{font-size:111%;font-weight:500;margin:0 0 0.5em 0;}

.esd_cordinater{flex-basis: 40%;}
.esd_cordinater .esd_cordinater_tt{margin:0 0 0.5em 0;}
.esd_cordinater .esd_cordinater_mark {width:30%;margin:0 0 0.5em 0;}
.esd_cordinater p{font-size:90%;}

.copyright{
     background: #004098;
    font-size:85%;
	padding: 2em 1em;
	text-align: center;
    color:#fff;

}

.copyright a{display:inline-block;margin:0 0 1em 0;color:#fff;}