@charset "UTF-8";
/* CSS Document */

/*
*ナビゲーション設定
*/
nav ul{
	list-style:none;
}
/*----------------------------------------------------------------------

	Common 共通項目
	
----------------------------------------------------------------------*/

body{
	line-height: 1.5;
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family: "Poppins","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-size:12px;
	color: #242424;
	margin:0 auto; 
	background-color:#FFFFFF; /*#F5F5F5F*/
}

a:link,
a:visited {
	color: #000000;
	text-decoration: none;
}

a:active,a:hover{
	outline:0;
}


html{
	font-size:13px;
	line-height:1.53846em;
}

html,body{
	height:100%;
}

a:visited,a:active{
	color:inherit;
}

a:hover,a:focus{
	color:gray;
}


/*TOP　フルスクリーン画面
---------------------------------------------------------------------------*/
#banner{
	/*background-color: white/*#f3f9fc*/
	background-image: url("../images/produit/bgproduit.png");
	background-repeat: no-repeat;
	background-size: cover;
	height:780px;
	width:100%;
} 

#warapper{
	margin: 0 auto;
	position: relative;/*相対配置*/
    overflow:hidden;/*iphone上でコンテンツが画面いっぱいに表示されず、右側に変な余白が出た時*/
}
#warapper p{
	color:white;
	text-decolration: none;
	font-weight:normal;
	font-size:28px;
	text-align: center;
	padding-top:280px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
#warapper #marque #photo1{
	margin-top:-260px;
	margin-left:320px;
	width: 50%;
}

@media screen and (max-width: 768px) { 
	#warapper #marque #photo1{
	width: 60%;
    margin-left:160px;
	margin-top:-190px;
}
}
@media screen and (max-width: 480px) {
	#warapper #marque #photo1{
	width: 70%;
    margin-left:60px;
	margin-top:-140px;
}
}
#menu_wrapper2{ /*ナビの位置*/
	position:absolute;
	left:830px;
	top:20px;
    width: 600px;
}

#container h1{ /*商品名　中央*/
	color: white;
	font-size:40px;
	font-weight:bold;
	text-align: center;
	margin-top:-50px;
}

nav ul li {
	float: left;
	position:relative;
	/*margin-top:10px;*/
	border-top: medium none;
	padding: 0.38462em 0px 0.30769em;
	margin-right: 2px/*1.53846em*/;/*ナビの幅*/
	font-size: 14px;
	letter-spacing: 1.5px;
    color:#222;
}
nav ul li .center{
	margin-left:20px;
	margin-right:16px;
}

/*英字に切り替わるナビ
---------------------------------------------------------------------------*/

    #menu_wrapper2 li a span.en {
        display: inline;
    }
    #menu_wrapper2 li a:hover span.en {
        display: none;
    }
    #menu_wrapper2 li a span.jp {
        display: none;
    }
    #menu_wrapper2 li a:hover span.jp {
        display: inline;
    }
    #menu_wrapper2 li a span.en {
	color:#0c4863;
	font-size:13px;
	margin-right:26px;
}
    #menu_wrapper2 li a span.jp {
	color:#0c4863;
	font-size:13px;
	margin-right:26px;
	letter-spacing: inherit;
}

/*ドロップダウンメニュー用
---------------------------------------------------------------------------*/
ul.ddmenu {
	position:absolute;
	/*left:20px;
	top:20px;*/
/*	width: 136px;*/					/*ドロップダウンメニューボックスの幅*/
/*	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-top: 1px solid #999;*/
	visibility: hidden;
    z-index: 100;
	top:28px;
	left:-54px;
}
ul.ddmenu li {
	/*border-bottom: 1px solid #999;*/	/*ドロップダウンメニュー１個ごとの下線の幅、線種、色*/
	font-size:9px;
	background: #0c4863;/*ドロップダウンメニューの背景色*/
	color: #fff;
}
ul.ddmenu li a {
	display: block;
	text-align: center;	/*文字をセンタリング*/
	line-height: 20px;
	width: 160px;		/*ドロップダウンメニューの幅*/
	text-decoration: none;
	color:#fff;
	font-size:8px;
}
	
ul.ddmenu li a:hover {
	background: #0c4863;	/*マウスオン時のドロップダウンメニューの背景色*/
	color: lightgrey;			/*マウスオン時のドロップダウンメニューの文字色*/
}
ul.ddmenu li li{
	/*border-bottom: 1px solid #999;*/	/*ドロップダウンメニュー１個ごとの下線の幅、線種、色*/
	font-size:9px;
	background: #0c4863;/*ドロップダウンメニューの背景色*/
	color: #fff;
}
ul.ddmenu li li{
	/*border-bottom: 1px solid #999;*/	/*ドロップダウンメニュー１個ごとの下線の幅、線種、色*/
	font-size:9px;
	background: #0c4863;/*ドロップダウンメニューの背景色*/
	color: #fff;
}

/*ハンバーガーメニュー用
---------------------------------------------------------------------------*/
header {
  background: tranparent;
}

#nav-drawer {
  position: relative;
  
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
@media screen and (max-width: 479px) {
	
#nav-open {
  display: inline-block;
  width: 30px;
  height: 10px;
  vertical-align: middle;
  margin-left:300px; /*位置*/
}
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
#nav-open {
  display: inline-block;
  width: 30px;
  height: 10px;
  vertical-align: middle;
  margin-left:480px; /*位置*/
  margin-top:20px;
}
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 1px;/*線の太さ*/
  width: 18px;/*長さ*/
  border-radius: 2px;
  background: black; /*線の色*/
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 300px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content ul li {
	font-size:20px;
	margin-left:30px;
	margin-top:20px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media screen and (min-width:480px) and (min-width:768px){
  #nav-open {
    display:none;
  }
}

/*-----#container ----*/
#container{
	background-color: #f3f9fc;
}
#container h1{
	font-size:48px;
	margin-top:130px;
	margin:auto;
	color:#9ACDE9
}
#container h2{
	font-size:30px;
	margin-top:130px;
	margin-bottom: 18px;
	margin:auto;
	text-align: center;
	color:#9ACDE9
}

 #left-list {
	text-align: left;
	list-style-type: disc;
    font-size:13px;
	height:auto;
	width: auto;

}
  #left-list {
	margin-top: 40px;     
	margin-left: 50px;
	margin-bottom: 30px;			
}
/*-----col_2 ----*/
*,*:before,*:after{
    box-sizing: border-box;	
}
.col_2{
	width: 100%;
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height:auto;	
}

.col_2 img{
	width:100%;
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height: auto;
	margin-top:-10px;
	margin-bottom: 20px;
}
.col_2 > div{
	width: 50%;
	padding:70px;
}
@media screen and (max-width:960px){
	.col_2>div{
		width: 100%;
	}
}
.col_2 p{
	width:auto;
	height:auto;
	font-size: 13.5px;
}

.col_2 #list{
	margin-top: auto;
	}
.col_2 li{
	font-size:15px;
	color:darkgray;
	}	
.col_2 p{
	font-size:15px;
	color:darkgray;
	margin-top:20px;
	}
	

/*-----------
     table
-------------*/
table.company {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 12px;
    font-size: 16px;
	padding-bottom: 20px;
}

table.company th,
table.company ,td {
    padding: 6px;
	font-size: 16px;
	color:darkgray;
}
table.company th {
	
    background: #0c4863;
    vertical-align: middle;
    text-align: left;
    width: 100px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
}
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #0c4863;
    border-width: 10px;
    margin-top: -10px;
}
/* firefox */
/*@-moz-document url-prefix() {*/
table.company th::after {
	float: right;
	padding: 0;
	left: 30px;
	top: 10px;
	content: " ";
	height: 0;
	width: 0;
	position: relative;
	pointer-events: none;
	border: 10px solid transparent;
	border-left: #0c4863 10px solid;
}
table.company td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}
	
/*-----col_3 ----*/
*,*:before,*:after{
    box-sizing: border-box;	
}
.col_3{
	width: 100%;
	background-color: white;
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height:auto;	
}

.col_3 img{
	width:100%;
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height: auto;
	margin-top:-10px;
	margin-bottom: 20px;
}
.col_3 > div{
	width: 50%;
	padding:70px;
}
@media screen and (max-width:960px){
	.col_3>div{
		width: 100%;
	}
}
.col_3 p{
	width:auto;
	height:auto;
	font-size: 13.5px;
}

.col_3 #list{
	margin-top: auto;
	}
.col_3 li{
	font-size:15px;
	color:darkgray;
	}	
.col_3 p{
	font-size:15px;
	color:darkgray;
	margin-top:20px;
	}
	
/*-----col_4 ----*/	
*,*:before,*:after{
    box-sizing: border-box;	
}
.col_4{
	width: 100%;
	background-color:#f3f9fc;
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height: auto;
}
.col_4 > div{
	width: 20%;
	padding:10px;
}
.col_4 > div > div{
		position:relative;
		overflow:hidden;
	}	
.col_4 img{	
	display:flex;
	display: -ms-flexbox;
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	height: auto;
	margin-top:-10px;
	margin-bottom: 20px;
	padding-left:50px;
}
@media screen and (max-width:960px){
	.col_4>div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 100%;
		margin-left:82px;
	}
}
	
/*---------------------
Footer
-----------------------*/
footer{
	font-style:normal;
	color:darkgray;
	font-size:12px;
	background-repeat: no-repeat;
	background-size: cover;
	height:20px;
	width:relative;
	
}


footer p#copyright {
	padding-top:60px;
	text-align:center;
	font-size: 11px;
	background-color:#f3f9fc;
}