@charset "utf-8";





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



#page-head-bg{
	position: fixed;
	width: 100%;
	height: 400px;
	background:url(../i/h2_bg_company.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-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;
  }
}




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

	message
	
========================================*/

section#message-contents{
	margin-bottom:60px;
}

p.message-lead{
	font-size:21px;
	font-weight: 500;
}

.message-signature{
	width: 100%;
	margin: 24px 0 24px 0;
	text-align: right;
}
.signature-yaku{
	display: block;
	margin:0 0 9px 0;
	font-size: 13px;
	text-align: right;
}
.signature-name{
	display: block;
	font-size: 21px;
	text-align: right;
}

.message-photo{
	width: 100%;
	margin: 60px 0 60px 0;
}
.message-photo img{
	width: 100%;
	border-radius: 18px;
}




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

	outline
	
========================================*/

section#outline{
	width: 90%;
	margin-bottom:0 auto 60px auto;	
	
}

.outline-table{
	width: 100%;
	margin: 0 0 30px 0;
	border-collapse: collapse;
}
.outline-table th{
	width: 30%;
	color:#036eb7;
	font-size:13px;
	font-weight: 400;
	text-align: center;
	vertical-align: top;
	padding: 15px 0 15px 0;
}
.outline-table td{
	font-size:13px;
	font-weight: 400;
	vertical-align: top;
	padding: 15px 15px 15px 15px;
}
.bg-gray{
	background: #efeff4;
}



section#access{
	margin-bottom:60px;	
	position: relative;
}


#access-inner{
  z-index: 99;
}

.access-bg-gray{
	background: #efeff4;
	height: 500px;
	width: 100%;
	margin-top: -470px;
}



.gmap {
	width: 100%;
	margin: 0 auto 0 auto;
	border-radius: 18px;
}

.gmap iframe {
	border-radius: 18px;
	width: 100%;
	aspect-ratio: 16/9;
}


.outline-address{
	font-size: 16px;
	margin: 30px 0 30px 0;
	text-align: center;
}


.outline-info{
	display: block;
	text-align: center;
}

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

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

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





/*== ボタン共通設定 */
.btn-to-map{
	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-map::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-map span {
	font-size:15px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 18px 0 0 0;
}

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

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

/*== 背景が流れる（斜め） */
.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%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}



section#soshiki{
	margin-bottom:60px;	
	position: relative;
}

.soshikizu{
	width: 100%;
	text-align: center;
}

.soshikizu img{
	width: 100%;
	height: auto;
	margin: auto;
}




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

	outline
	
========================================*/


#sdgs-head{
	text-align: center;
}

.sdgs-head-image{
	width: 100%;
	max-width: 1300px;
	min-width: 400px;
	margin: 0 auto 45px auto;
	overflow: hidden;
}
.sdgs-head-image img{
	width: 100%;
	height: auto;
	margin: auto;
}

section#sdg-lead{
	margin-bottom: 30px;	
}

.sdg-lead-photo-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 0 30px 0;
}

.sdg-lead-photo{
	width: 48%;
	margin-bottom: 9px;
}

.sdg-lead-photo img{
	width: 100%;
}


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

.sdgs-contents-col{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 60px 0;
}

.sdgs-contents-left{
	width:100%;
	margin-bottom: 21px
}
.sdgs-contents-right{
	width:100%;
}
.sdgs-contents-right img{
	width:100%;
}

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

p.sdgs-contents-p{
	font-size: 15px;
	line-height: 1.8;
	padding: 0;
	margin: 0 0 12px 0;
}

img.sdgs-contents-icon{
	width: 240px;
	height: auto;
}




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

	csr
	
========================================*/


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

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

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

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

.csr-contents-h4{
	font-size:21px;
	line-height: 1.5;
	padding: 0;
	margin: 0 0 12px 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_company.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;
}

.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-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: flex-start;
	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-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;
  }
}




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

	message
	
========================================*/

section#message-contents{
	margin-bottom:60px;
}

p.message-lead{
	font-size:25px;
	font-weight: 500;
}

.message-signature{
	width: 100%;
	margin: 24px 0 24px 0;
	text-align: right;
}
.signature-yaku{
	display: block;
	font-size: 18px;
	text-align: right;
}
.signature-name{
	display: block;
	font-size: 29px;
	text-align: right;
}

.message-photo{
	width: 100%;
	margin: 60px 0 60px 0;
}
.message-photo img{
	width: 100%;
	border-radius: 18px;
}




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

	outline
	
========================================*/

section#outline{
	width: 960px;
	margin-bottom:60px;	
}

.outline-table{
	width: 100%;
	border-collapse: collapse;
}
.outline-table th{
	width: 330px;
	color:#036eb7;
	font-size:15px;
	font-weight: 400;
	text-align: center;
	vertical-align: top;
	padding: 15px 0 15px 0;
}
.outline-table td{
	font-size:15px;
	font-weight: 400;
	vertical-align: top;
	padding: 15px 0 15px 0;
}
.bg-gray{
	background: #efeff4;
}



section#access{
	margin-bottom:60px;	
	position: relative;
}


#access-inner{
  z-index: 99;
}

.access-bg-gray{
	background: #efeff4;
	height: 480px;
	width: 100%;
	margin-top: -400px;
}



.gmap {
	width: 960px;
	margin: 0 auto 0 auto;
	border-radius: 18px;
}

.gmap iframe {
	border-radius: 18px;
	width: 100%;
	aspect-ratio: 16/9;
}

.outline-address{
	font-size: 22px;
	margin: 45px 0 30px 0;
	text-align: center;
}

.outline-info{
	display: flex;
	justify-content: center;
}

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

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

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





/*== ボタン共通設定 */
.btn-to-map{
    /*アニメーションの起点とするため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-map::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-map span {
	font-size:15px;
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
	transform: skewX(18deg);
	display: inline-block;
	margin: 18px 0 0 0;
}

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

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

/*== 背景が流れる（斜め） */
.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%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}



section#soshiki{
	margin-bottom:60px;	
	position: relative;
}

.soshikizu{
	width: 100%;
	text-align: center;
}

.soshikizu img{
	width: 750px;
	height: auto;
	margin: auto;
}




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

	outline
	
========================================*/


#sdgs-head{
	text-align: center;
}

.sdgs-head-image{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 45px auto;
	overflow: hidden;
}
.sdgs-head-image img{
	width: 100%;
	height: auto;
	margin: auto;
}

section#sdg-lead{
	margin-bottom: 60px;	
}

.sdg-lead-photo-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 30px 0;
}

.sdg-lead-photo{
	width: 24%;
}

.sdg-lead-photo img{
	width: 100%;
}


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

.sdgs-contents-col{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 90px 0;
}

.sdgs-contents-left{
	width:420px;
}
.sdgs-contents-right{
	width:500px;
}

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

p.sdgs-contents-p{
	font-size: 18px;
	line-height: 1.8;
	padding: 0;
	margin: 0 0 30px 0;
}

img.sdgs-contents-icon{
	width: 324px;
	height: auto;
}




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

	csr
	
========================================*/


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

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

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

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


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