@charset "utf-8";





@media only screen and (max-width: 480px) {



#page-head-bg{
	position: fixed;
	width: 100%;
	height: 400px;
	background:url(../i/h2_bg_service.jpg) no-repeat center center;
	background-size:cover;
	z-index: -1;
}


/*======================================

	sub-menu
	
========================================*/

.submenu-head{
	width: 100%;
	height: 48px;
	margin: 0px 0 0 0;
	background: url("../../i/submenu_head.png") repeat-x left bottom;
	background-size: auto 39%;
}

.submenu-wrapper{
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 48px 0 42px 0;
	background: #efeff4;
}
.submenu{
	width: 90%;
	margin: 0 auto 0 auto;
	background: #eee;
	display: block;
	flex-wrap: wrap;
	justify-content: center;
	background: transparent;
}

.submenu-box{
	width: 270px;
	height: 66px;
	margin: 0 auto 12px auto;
	display: block;
	position: relative;
}

.submenu-box::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../i/link_anchor.png") no-repeat;
  top: 50%;
  right: 18px;
  margin-top: -5px;
  opacity: 1;
}
.submenu-box:hover::after {
  animation: arrow 0.8s infinite;
}



.submenu-left{
	width: 102px;
	height: 66px;
	clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 53px 100%);
	position: relative;
}

.submenu-left img{
	position: absolute;
	top:-32%;
	left: -32%;
  transform: scale(0.6);
}

.submenu-left img.submenu-img-content{
	position: absolute;
	top:-110%;
	left:-120%;
  transform: scale(0.35);
}

.submenu-right{
	width: 210px;
	height: 66px;
	clip-path: polygon(0% 100%, 48px 0%, 100% 0%, 100% 100%);
	position: absolute;
	background: #fff;
	right: 0;top:0;
}


.submenu-title{
	width: 100%;
	height: 100%;
	position: relative;
}

.submenu-title span{
	display: inline-block;
	position: absolute;
	font-size: 13px;
	font-weight: 500;
	top:50%;
	left:48px;
	transform: translate(0%, -50%);
	color: #000;
}





/*======================================

	top
	
========================================*/



.top-menu{
	width: 90%;
	display: block;
	margin: 30px auto 30px auto;
}

a.top-menu-box{
	width: 100%;
	height: 90px;
	display: flex;
	align-items: center;
	margin: 0 0% 15px 0%;
	border:1px solid #ddd;
	position: relative;
}

#top-menu-message{
	margin-right: 0px;
}
#top-menu-sdgs{
	margin-right: 0px;
}

.top-menu-photo{
	width: 150px;
	height: 90px;
}
.top-menu-photo img{
	width: 150px;
	height: 90px;
  object-fit: cover; /* この一行を追加するだけでOK! */
}


.top-menu-title{
	display: block;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0 0 0 0;
	padding: 0px 42px 0px 15px;
	position: relative;
}



.top-menu-title-jp{
	display: block;
	width: 100%;
	font-size: 15px;
	line-height: 1;
	font-weight: 500;
	margin: 0px 0 6px 0px;
	padding: 0px 0 0px 0px;
	color:#000;
}
.top-menu-title-en{
	display: block;
	width: 100%;
	font-size: 8px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0px 0 0px 0px;
	padding: 0px 0 0px 0px;
}

a.top-menu-box:hover{
	cursor: pointer;
}

.top-menu-box::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../../i/link_anchor.png") no-repeat;
  bottom: 36px;
  right: 15px;
  margin-top: -5px;
  opacity: 1;
}
.top-menu-box:hover::after {

}



@keyframes arrow {
  0% {
    right: 30px;
    opacity: 1;
  }
  100% {
    right: 10px;
    opacity: 0;
  }
}




section#to-inquiry{
	margin-top: 60px;
	margin-bottom: 75px;
}

.to-inquiry-lead{
	font-size: 22px;
	margin: 45px 0 30px 0;
	text-align: center;
}


.to-inquiry-box{
	display: block;
	text-align: center;
}

.to-inquiry-left{
	display: block;
	width: 100%;
	margin: 0 9px 0 0;
}
.to-inquiry-right{
	display: block;
	width: 100%;
	margin: 0 0px 0 0px;
	padding: 6px 0 0 0;
	position: relative;
}

.to-inquiry-tel{
	font-size:36px;
	font-weight: 500;
	color:#036eb7;
	line-height: 1;
	padding: 0 0 0 0;
	margin: 0 0 9px 0 ;
}
.to-inquiry-tel span{
	display: inline-block;
	font-size:24px;
	margin: 0 6px 0 0;
}

.to-inquiry-businesshours{
	font-size:13px;
	font-weight: 400;
}




/*== ボタン共通設定 */
.btn-to-inquiry{
 	margin-top: 18px;
   /*アニメーションの起点とするためrelativeを指定*/
	width: 320px;
	height: 60px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-inquiry::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  transform: skewX(18deg);
  background: url("../../i/link_anchor_white.png") no-repeat;
  top: 50%;
  right: 40px;
  margin-top: -5px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-inquiry span {
	font-size:15px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 18px 0 0 -18px;
}

.btn-to-inquiry:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-inquiry span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}





/*======================================

	eom
	
========================================*/

section#oem-flow{
	margin-bottom:60px;
}


.service-contents-h4{
	font-size:21px;
	font-weight: 500;
	margin: 45px 0 18px 0;
	padding: 0 0 0 0;
}

.flow-table{
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
}

.flow-table th{
	display: block;
	width: 100%;
	padding: 21px 0 21px 30px;
	font-size:16px;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px dotted #ddd;
	border-right: 0px solid #ddd;
}

.flow-table th span{
	color: #036eb7;
	display: inline-block;
	margin:0 9px 0 0;
}

.flow-table th span{
	color: #036eb7;
}

.flow-table td{
	display: block;
	width: 100%;
	padding: 21px 0 21px 30px;
	font-size:15px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}



section#oem-standard{
	margin-bottom:60px;
}



.oem-standard-head{
	width: 100%;
	display: block;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	padding: 18px 18px 15px 18px;
}

.standard-head-title{
	font-size:16px;
	margin: 0 0px 12px 0;
	padding: 0 0 3px 0;
	line-height: 1;
}
.standard-head-btn{
	width: 145px;
}


/*== ボタン共通設定 */
.btn-to-material{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 145px;
	height: 33px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-material::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  transform: skewX(18deg);
  background: url("../../i/link_anchor_white.png") no-repeat;
  top: 11px;
  right: 15px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-material span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 7px 0 0 -18px;
}

.btn-to-material:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-movie span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}



.oem-bottle-wrapper{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 21px 0 0 0;
}

.oem-bottle{
	width: 48%;
	margin: 15px 0 15px 0;
}

.oem-bottle-photo{
	width: 100%;
	margin: 0px 0 0 0;
	border-bottom: 1px solid #000;
}
.oem-bottle-photo img{
	width: 100%;
}
.oem-bottle-name{
	width: 100%;
	height: 80px;
	text-align: center;
	background: #efeff4;
	border-bottom: 1px solid #000;
	position: relative;
	margin: 0;
	padding: 0 12px 0 12px;
}
.oem-bottle-name span{
	width: 100%;
	position: absolute;
	font-size: 14px;
	font-weight: 500;
	top:50%;
	left:50%;
	transform: translate( -50%, -50%);
}

.oem-bottle-info{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}
.oem-bottle-info dt{
	width: 42%;
	font-size: 13px;
	color: #036eb7;
	margin: 0;
	padding: 6px 15px 6px 15px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}
.oem-bottle-info dd{
	width: 58%;
	font-size: 13px;
	margin: 0;
	padding: 6px 15px 6px 15px;
	border-bottom: 1px solid #000;
}








/*======================================

	material
	
========================================*/


section#material-contents{
	background: url("../../i/bg_skyblue.jpg") no-repeat center top;
	background-size: 800px auto;
	padding: 30px 0 30px 0;
}

#material-contents img{
	width: 100%;
}

.material-contents-col01{
	width: 100%;
	display: block;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 45px 0;
}
.material-contents-col01-left{
	width: 100%;
}
.material-contents-col01-right{
	width: 100%;
}

.material-contents-col02{
	width: 100%;
	display: block;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 0 0 80px 0;
}
.material-contents-col02-right{
	width: 100%;
}
.material-contents-col02-left{
	width: 100%;
}

.material-contents-h4{
	font-size:21px;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 24px 0;
}




.composition{
	width: 100%;
	margin: 0px 0 30px 0;
}

.composition-head{
	width: 100%;
	height: 75px;
	font-size:18px;
	font-weight: 500;
	color:#fff;
	text-align: center;
	background: linear-gradient(to right, #036eb7, #00acb1);
	padding: 24px 0 0 0;
	border-top-left-radius:18px;
	border-top-right-radius:18px;
}

.composition-info{
	width: 100%;
	height: 400px;
	background: url("../i/material_photo03.jpg") no-repeat center center;
	background-size:cover;
	border-bottom-left-radius:18px;
	border-bottom-right-radius:18px;
	position: relative;
}

.composition-content-box{
	width: 85%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate( -50%,-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border-top:1px solid #2ea7e0;
}

.composition-content{
	width: 50%;
	padding:12px 9px 12px 9px;
	font-size:12px;
    border-bottom:1px solid #2ea7e0;
}

.composition-content-left{
    border-right:1px solid #2ea7e0;
}



section#material-fujisan{
	background: #2ea7e0 url("../i/bg_white.png") no-repeat center bottom;
	background-size:100% 48px;
	padding: 45px 0 0px 0;
	margin: 0 0 90px 0;
}

#material-fuj::after {
  content: 'asdfasdfas';
  width: 100%;
  height: 100px;
  display: block;
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
}

.material-fujisan-lead{
	text-align: center;
	color:#fff;
	font-size: 21px;
	font-weight: 600;
	padding: 0px 0 45px 0;
	margin: 0px 0 45px 0;
	border-bottom:1px solid #fff;
}

section#material-fujisan img{
	width: 100%;
	height: auto;
}




/*======================================

	faq
	
========================================*/



#faq-wrapper{
	background: #fff url("../i/faq_bg.jpg") repeat-y center 50px;
	background-size: 800px auto;
}


section#faq-contents{
	margin-bottom:45px;
}

.faq-contents-head{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 3px 0 3px 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	margin: 0 0 24px 0;
}

.faq-contents-head-num{
	width: 60px;
	margin: 0 9px 0 12px;
}
.faq-contents-head-num img{
	width: 100%;
}

.faq-contents-head-title{
	font-size: 18px;
	font-weight: 500;
}


dl.faq-contents-q{
	width: 100%;
	padding: 0;
	margin: 0;
}

.faq-contents-q dt{
	display: block;
	font-size:14px;
	line-height: 1.8;
	padding: 9px 0px 9px 15px;
	margin: 0;
	color:#036eb7;
	background: #efeff4;
	display: flex;
	justify-content: flex-start;
}
.faq-contents-q dd{
	display: block;
	font-size:14px;
	line-height: 1.8;
	padding: 9px 0px 15px 15px;
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.faq-contents-q dd a{
	color:#036eb7;
	text-decoration: underline;
}

.faq-contents-q dt span,.faq-contents-q dd span{
	margin-right: 15px;
	display: inline-block;
}

.faq-contents-q a{
	color:#036eb7;
	text-decoration: underline;
}



/*======================================

	content
	
========================================*/



#content-wrapper{
	background: #fff url("../i/faq_bg.jpg") repeat-y center top;
	background-size: 800px auto;
	padding: 30px 0 0px 0;
	}


section#service-contents{
	padding: 60px 0 0px 0;
}

#service-contents img{
	width: 100%;
}

#service-contents-oroshi-left{
	margin-bottom: 21px;
}

.service-contents-col01{
	width: 100%;
	display: block;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 45px 0;
}
.service-contents-col01-left{
	width: 100%;
}
.service-contents-col01-right{
	width: 100%;
}

.service-contents-col02{
	width: 100%;
	display: block;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 0 0 80px 0;
}
.service-contents-col02-right{
	width: 100%;
}
.service-contents-col02-left{
	width: 100%;
}

.service-contents-h4{
	font-size:21px;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 24px 0;
}








}/*//end  max-width: 480px ///////////////////////*/







@media only screen and (min-width: 481px) {


#page-head-bg{
	position: fixed;
	width: 100%;
	height: 450px;
	background:url(../i/h2_bg_service.jpg) no-repeat;
	background-size:cover;
	z-index: -1;
}





/*======================================

	sub-menu
	
========================================*/

.submenu-head{
	width: 100%;
	height: 48px;
	margin: 0px 0 0 0;
	background: url("../../i/submenu_head.png") repeat-x left center;
}

.submenu-wrapper{
	width: 100%;
	margin: -2px 0 0 0;
	padding: 48px 0 42px 0;
	background: #efeff4;
}
.submenu{
	width: 900px;
	margin: 0 auto 0 auto;
	background: #eee;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: transparent;
}

.submenu-box{
	width: 430px;
	height: 108px;
	margin: 0 0 40px 0;
	display: block;
	position: relative;
}

.submenu-box::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../../i/link_anchor.png") no-repeat;
  top: 50%;
  right: 30px;
  margin-top: -5px;
  opacity: 1;
}
.submenu-box:hover::after {
  animation: arrow 0.8s infinite;
}



.submenu-left{
	width: 168px;
	height: 108px;
	clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 120px 100%);
	position: absolute;
	left: 0;top:0;
}

.submenu-left img.submenu-img-content{
	position: absolute;
	top:-45%;
	left:-55%;
  transform: scale(0.55);
}


.submenu-right{
	width: 300px;
	height: 108px;
	clip-path: polygon(0% 100%, 48px 0%, 100% 0%, 100% 100%);
	position: absolute;
	background: #fff;
	right: 0;top:0;
}


.submenu-title{
	width: 100%;
	height: 100%;
	position: relative;
}

.submenu-title span{
	display: inline-block;
	position: absolute;
	font-size: 15px;
	font-weight: 500;
	top:50%;
	left:75px;
	transform: translate(0%, -50%);
	color: #000;
}



/*======================================

	top
	
========================================*/



.top-menu{
	width: 960px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 30px auto 30px auto;
}

a.top-menu-box{
	width: 430px;
	display: block;
	margin: 0 0 80px 0;
	border:1px solid #ddd;
	position: relative;
}

#top-menu-message{
	margin-right: 100px;
}
#top-menu-sdgs{
	margin-right: 100px;
}

.top-menu-photo{
	width: 100%;
}
.top-menu-photo img{
	width: 100%;
}

.top-menu-title{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 70px;
	text-align: left;
	margin: 0 0 0 0;
	position: relative;
}

#top-menu-oem{
	margin-right: 100px;
}

.top-menu-title-jp{
	display: inline-block;
	font-size: 20px;
	font-weight: 500;
	margin: 0px 0 0 30px;
	color:#000;
}
.top-menu-title-en{
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	margin: 0px 0 0px 9px;
	padding: 0px 0 0px 0px;
}

a.top-menu-box:hover{
	cursor: pointer;
}

.top-menu-box::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../../i/link_anchor.png") no-repeat;
  bottom: 29px;
  right: 30px;
  margin-top: -5px;
  opacity: 1;
}
.top-menu-box:hover::after {
  animation: arrow 0.8s infinite;
}



@keyframes arrow {
  0% {
    right: 30px;
    opacity: 1;
  }
  100% {
    right: 10px;
    opacity: 0;
  }
}



/*======================================

	eom
	
========================================*/

section#oem-flow{
	margin-bottom:0px;
}


.service-contents-h4{
	font-size:30px;
	font-weight: 500;
	margin: 45px 0 18px 0;
	padding: 0 0 0 0;
}

.flow-table{
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
}

.flow-table th{
	width: 240px;
	padding: 21px 0 21px 30px;
	font-size:20px;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.flow-table th span{
	color: #036eb7;
	display: inline-block;
	margin:0 9px 0 0;
}

.flow-table th span{
	color: #036eb7;
}

.flow-table td{
	padding: 21px 0 21px 30px;
	font-size:15px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}



section#oem-standard{
	padding-top: 110px;
	margin-bottom:90px;
}



.oem-standard-head{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	padding: 18px 24px 15px 24px;
}

.standard-head-title{
	font-size:20px;
	margin: 0 30px 0 0;
	padding: 0 0 3px 0;
	line-height: 1;
}
.standard-head-btn{
	width: 145px;
}


/*== ボタン共通設定 */
.btn-to-material{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 150px;
	height: 33px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-material::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  transform: skewX(18deg);
  background: url("../../i/link_anchor_white.png") no-repeat;
  top: 11px;
  right: 15px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-material span {
	font-size:13px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 6px 0 0 -18px;
}

.btn-to-material:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-movie span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}



.oem-bottle-wrapper{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 21px 0 0 0;
}

.oem-bottle{
	width: 300px;
	margin: 30px 0 30px 0;
}

.oem-bottle-photo{
	width: 100%;
	margin: 0px 0 0 0;
	border-bottom: 1px solid #000;
}
.oem-bottle-photo img{
	width: 100%;
}
.oem-bottle-name{
	width: 100%;
	height: 80px;
	text-align: center;
	background: #efeff4;
	border-bottom: 1px solid #000;
	position: relative;
	margin: 0;
}
.oem-bottle-name span{
	width: 100%;
	position: absolute;
	font-size: 15px;
	font-weight: 500;
	top:50%;
	left:50%;
	transform: translate( -50%, -50%);
}

.oem-bottle-info{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
}
.oem-bottle-info dt{
	width: 42%;
	font-size: 15px;
	color: #036eb7;
	margin: 0;
	padding: 6px 15px 6px 15px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}
.oem-bottle-info dd{
	width: 58%;
	font-size: 15px;
	margin: 0;
	padding: 6px 15px 6px 15px;
	border-bottom: 1px solid #000;
}




/*======================================

	material
	
========================================*/


section#material-contents{
	background: url("../../i/bg_skyblue.jpg") no-repeat center top;
	padding: 60px 0 30px 0;
}

.material-contents-col01{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 80px 0;
}
.material-contents-col01-left{
	width: 415px;
}
.material-contents-col01-right{
	width: 500px;
}

.material-contents-col02{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 0 0 80px 0;
}
.material-contents-col02-right{
	width: 415px;
}
.material-contents-col02-left{
	width: 500px;
}

.material-contents-h4{
	font-size:30px;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 24px 0;
}




.composition{
	width: 100%;
	margin: 60px 0 60px 0;
}

.composition-head{
	width: 100%;
	height: 100px;
	font-size:30px;
	font-weight: 500;
	color:#fff;
	text-align: center;
	background: linear-gradient(to right, #036eb7, #00acb1);
	padding: 27px 0 0 0;
	border-top-left-radius:18px;
	border-top-right-radius:18px;
}

.composition-info{
	width: 100%;
	height: 480px;
	background: url("../i/material_photo03.jpg") no-repeat center top;
	border-bottom-left-radius:18px;
	border-bottom-right-radius:18px;
	position: relative;
}

.composition-content-box{
	width: 480px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: absolute;
	top:86px;
	left: 48px;
    background-color: rgba(255, 255, 255, 0.7);
    border-top:1px solid #2ea7e0;
}

.composition-content{
	width: 50%;
	padding:12px 18px 12px 18px;
	font-size:15px;
    border-bottom:1px solid #2ea7e0;
}

.composition-content-left{
    border-right:1px solid #2ea7e0;
}



section#material-fujisan{
	background: #2ea7e0 url("../i/bg_white.png") no-repeat center bottom;
	background-size:100% 75px;
	padding: 100px 0 0px 0;
	margin: 0 0 90px 0;
}

#material-fuj::after {
  content: 'asdfasdfas';
  width: 100%;
  height: 100px;
  display: block;
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
}

.material-fujisan-lead{
	text-align: center;
	color:#fff;
	font-size: 30px;
	font-weight: 600;
	padding: 0px 0 60px 0;
	margin: 0px 0 60px 0;
	border-bottom:1px solid #fff;
}





/*======================================

	faq
	
========================================*/



#faq-wrapper{
	background: #fff url("../i/faq_bg.jpg") repeat-y center top;
}


section#faq-contents{
	margin-bottom:90px;
}

.faq-contents-head{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 3px 0 3px 0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	margin: 0 0 24px 0;
}

.faq-contents-head-num{
	width: 120px;
	margin: 0 0 0 12px;
}
.faq-contents-head-num img{
	width: 100px;
	height: auto;
}

.faq-contents-head-title{
	font-size: 25px;
	font-weight: 500;
}


dl.faq-contents-q{
	width: 100%;
	padding: 0;
	margin: 0;
}

.faq-contents-q dt{
	display: block;
	font-size:15px;
	line-height: 1.8;
	padding: 15px 21px 15px 21px;
	margin: 0;
	color:#036eb7;
	background: #efeff4;
	display: flex;
	justify-content: flex-start;
}
.faq-contents-q dd{
	display: block;
	font-size:15px;
	line-height: 1.8;
	padding: 15px 21px 21px 21px;
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.faq-contents-q dd a{
	color:#036eb7;
	text-decoration: underline;
}

.faq-contents-q dt span,.faq-contents-q dd span{
	margin-right: 15px;
	display: inline-block;
}

.faq-contents-q a{
	color:#036eb7;
	text-decoration: underline;
}
.faq-contents-q a:hover{
	opacity: 0.8;
}



/*======================================

	content
	
========================================*/



#content-wrapper{
	background: #fff url("../i/faq_bg.jpg") repeat-y center top;
}


section#service-contents{
	padding: 60px 0 0px 0;
}

.service-contents-col01{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 80px 0;
}
.service-contents-col01-left{
	width: 415px;
}
.service-contents-col01-right{
	width: 500px;
}

.service-contents-col02{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse; 
	margin: 0 0 80px 0;
}
.service-contents-col02-right{
	width: 415px;
}
.service-contents-col02-left{
	width: 500px;
}

.service-contents-h4{
	font-size:30px;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 24px 0;
}

.service-contents-col01-right img,.service-contents-col02-left img{
	width: 100%;
	height: auto;
}










section#to-inquiry{
	margin-top: 90px;
	margin-bottom: 75px;
}

.to-inquiry-lead{
	font-size: 22px;
	margin: 45px 0 30px 0;
	text-align: center;
}

.to-inquiry-box{
	display: flex;
	justify-content: center;
}

.to-inquiry-left{
	width: 350px;
	margin: 0 9px 0 0;
}
.to-inquiry-right{
	width: 350px;
	margin: 0 0px 0 9px;
	padding: 6px 0 0 0;
	position: relative;
}

.to-inquiry-tel{
	font-size:42px;
	font-weight: 500;
	color:#036eb7;
	line-height: 1;
	padding: 0 0 0 0;
	margin: 0 0 9px 0 ;
}
.to-inquiry-tel span{
	display: inline-block;
	font-size:24px;
	margin: 0 6px 0 0;
}

.to-inquiry-businesshours{
	font-size:13px;
	font-weight: 400;
}




/*== ボタン共通設定 */
.btn-to-inquiry{
    /*アニメーションの起点とするためrelativeを指定*/
	width: 320px;
	height: 60px;
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 0px solid #555;/* ボーダーの色と太さ */
	background: linear-gradient(to right, #036eb7, #00acb1);
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	transform: skewX(-18deg);
}

.btn-to-inquiry::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  transform: skewX(18deg);
  background: url("../../i/link_anchor_white.png") no-repeat;
  top: 50%;
  right: 40px;
  margin-top: -5px;
  opacity: 1;
}


/*ボタン内spanの形状*/
.btn-to-inquiry span {
	font-size:15px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 18px 0 0 -18px;
}

.btn-to-inquiry:hover span{
	color:#fff;
}

/*ボタン内spanの形状*/
.btn-to-inquiry span i {
	display: inline-block;
	margin: 0 12px 0 0;
	font-size:18px;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#036eb7;
	width:120%;
	height: 100%;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}





}/*//end  min-width: 481px ///////////////////////*/