/*	TOP ============================== */
/*main LOGO エリア ============================== */
.top #main{
position:relative;
z-index:0;
}
.top #main p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.top #main .logo{display:block;}


@media all and (min-width:960px) {
.top #main{
  background: url(../img/main.png) top center no-repeat;
  background-size: contain;
  width:100%;
  height:0;
  padding-top: 56.25%;
  }
.top #main p{width:600px;}
.top #main .logo{
  background: url(../img/logo.png) center center no-repeat;
  background-size: cover;
  width:100%;
  height:0;
  padding-top:23.5502434705622%;
}
}
@media all and (max-width:961px) {
  .top #main{
  background: url(../img/main_smp.png) top center no-repeat;
  background-size: cover;
  width:100%;
  height:0;
  padding-top:166.6666666666667%;
  }
.top #main p{width:60%;}
.top #main .logo{
  background: url(../img/logo_smp.png) center center no-repeat;
  background-size: contain;
  width:100%;
  height:0;
  padding-top:76.3318777292576%;
}
}

/*article エリア ============================== */
article h2,article h3{
  text-align:center;
}
article h2 span{
  display: block;
  font-size: 60%;
}
article h3{
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding:1em 0;
  width: 100%;
  color: #fff;
  border-radius: 15px;
}
article h3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}
article h3 a{
  margin: 0;
  padding: 0;
}
article p.catch{
  display: block;
  text-align: center !important;
}
article p.catch span{
  display: inline-block;
  padding:.5em;
  font-size: 90%;
}


@media all and (min-width:960px) {
article  h2{
  font-size: 200%;
  margin-bottom:1em;
}
}
@media all and (max-width:961px) {
article  h2{
  font-size: 140%;
  margin-bottom:1em;
}
}

/*トップメッセージ */
#message{
  background:rgba(244,246,255,1);
}
#message h2{
color:rgba(63,81,181,1);
}
#message .photo{
  display: block;
  width: 100%;
  height:0;
  padding-top:128.9473684210526%;
}
#message figcaption{font-size: 80%;}
#message p small{
  display: block;
  line-height: normal;
}
#message .btn{
  font-size: 70%;
  margin-top:1em;
  text-align: right;
}
#message li a{
  color:#fff;
  background:rgba(63,81,181,1);
  border-radius:30px;
  padding:1em 3em 1em 2em;
}
#message .btn span{
  position:relative;
  text-underline-offset: .3em;
}
#message .btn span::after{
    content: "→";
    display:inline-block;
    position: absolute;
    z-index: 101;
    right:-25%;
}
#message .btn span:hover::after{
  display: inline-block;
  content: "→";
  right:-30%;
  transition: all .3s;
}
@media all and (min-width:960px) {
#message{padding:100px 0;}
#message .message_area{
display: flex;
flex-direction:row;
align-items: center;
justify-content: space-between;
}
#message figure{width: 380px;}
#message ul
{width: 500px;}
#message p{font-size: 120%;}
#message p small{margin-top:2em;}
}

@media all and (max-width:961px) {
#message{padding:3em 0;}
#message figure{
    width:85%;
    margin:auto;
}
#message ul{
  display: flex;
  flex-direction:column-reverse;
  width: 90%;
  margin: auto;
}
#message p small{
  margin-bottom:3em;
  text-align: center !important;
}
}

/*トピックス*/
#topics .topics_area{
  position: relative;
  text-align: center;
  clear:both;
}
#topics p.catch span{
  color: rgb(0 80 255);
  border:solid 1px rgba(0,80,255,1);
  margin-bottom: 2em;

}
#topics h2{color:rgba(0,80,255,1);}
#topics .btn{
  color: #fff;
  background:rgba(0,80,255,1);
  border-radius: 50px;
  padding:.5em 2em;
}
#topics .btn:hover{
  opacity: 0.8;
}
@media all and (min-width:960px) {
#topics{
  background: url(../img/wave1.svg) bottom -1px center no-repeat;
  background-size: contain;
  padding:100px 0 200px;
}
}

@media all and (max-width:961px) {
#topics{
  background: url(../img/wave1_smp.svg) bottom -1px center no-repeat;
  background-size: contain;
  padding:3em 0 6em;
}
#topics .btn{
  display: inline-block;
  margin-top:1em;
}
}

/*水素カーバナー*/
#topics .relay_vehicle{
text-align: center !important;
}
#topics .relay_vehicle p{
text-align: center !important;
color:#00a7ea;
}

#topics .relay_vehicle a.banner{
display: block;
  background: url(../img/top/relay_vehicle_banner.png) top center no-repeat;
  background-size: contain;
  width:100%;
  height:0;
  padding-top:15.0793650793651%;
margin-top:1em;
}
#topics .relay_vehicle a.banner:hover{
opacity:0.8;
}

@media all and (min-width:960px) {
#topics .relay_vehicle{
width: 500px;
margin:4em auto 0;
}
#topics .relay_vehicle p{
font-size: 120%;
}
}

@media all and (max-width:961px) {
#topics .relay_vehicle{
width: 70%;
margin:2em auto 0;
}
#topics .relay_vehicle p{
white-space: nowrap;
}
}



/*グリーンCM*/
#topics .green_cm{
text-align: center !important;
}
#topics .green_cm p{
text-align: center !important;
color:#38bf7d;
}

#topics .green_cm a.banner{
display: block;
  background: url(../img/top/green_cm_banner.png) top center no-repeat;
  background-size: contain;
  width:100%;
  height:0;
  padding-top:15.0793650793651%;
margin-top:1em;
}
#topics .green_cm a.banner:hover{
opacity:0.8;
}

@media all and (min-width:960px) {
#topics .green_cm{
width: 500px;
margin:3em auto 0;
}
#topics .green_cm p{
font-size: 120%;
}
}

@media all and (max-width:961px) {
#topics .green_cm{
width: 70%;
margin:2em auto 0;
}
#topics .green_cm p{
white-space: nowrap;
}
}





/*/////////////// item //////////////////*/
.item
{background-image: url(../img/bg_mark1.png),url(../img/bg_mark2.png);
background-repeat: no-repeat,no-repeat;
}
@media all and (min-width:960px) {
.item{
  background-position:top 100px right,bottom 300px left;
  background-size:auto 900px,auto 900px;x;
}
}

@media all and (max-width:961px) {
.item{
  background-position:top 28em right -.5em,bottom 20em left -.5em;
  background-size:auto 15%,auto 15%;
}
.item article{
  width: 70%;
}
}
ul.tab_list section div{
  width: 100%;
  height:100%;
  margin: 0;
  transition-duration: .4s;
}
ul.tab_list section div:hover {transform: scale(1.06);}
/* 商品に見立てた枠 */
ul.tab_list section div{
    margin: 0 auto;
    position: relative;
}
/* ラベル部分 左上に表示 */
ul.tab_list section div::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 2.5em solid transparent;
    border-right: 2.5em solid #fff; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 1;
    margin:1px;
}
ul.tab_list section div::after {
    content: "→";
    display: block;
    top: 0;
    transform: rotate(0deg);
    right: 5px;
    position: absolute;
    z-index: 5;
}
ul.tab_list section div p{
  font-size: 90%;
  line-height:140%;
}


ul.other_list{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  border:dashed 2px;
  border-radius: 10px;
}

ul.other_list li:first-of-type{
width: 100%;
text-align: center;
font-size: 110%;
margin-bottom: 1em;
color: #fff ;
}

#sdgsaction ul.other_list li:first-of-type{
background:#004c87;
}
#esg ul.other_list li:first-of-type{
background:#ec6a02;
}


ul.other_list a{
  position: relative;
  text-decoration: underline;
  text-underline-offset: .3em;
}
ul.other_list a::after{
  position: absolute;
  content:"▶︎";
  display: inline-block;
  right:-20%;
}
ul.other_list a:hover::after{
  content:"▶︎";
  display: inline-block;
  right:-25%;
  transition: all .3s;
}

@media all and (min-width:960px) {
ul.tab_list{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content:center;
  margin: auto;
}
ul.tab_list li{
  width: 30%;
  margin:0 1em ;
}

#ourvision ul.tab_list li,
#report ul.tab_list li{
  width: 30%;
  margin:0 1.5em ;
}

ul.tab_list p{
  padding:1em 2em;
}

ul.tab_list section div{
min-height: 90px;
}


ul.other_list{
    margin:2em auto 0;
    padding:1em 2em 2em 2em;
}
#sdgsaction ul.other_list{
  width: 600px;
}
#sdgsaction ul.other_list li:nth-child(2),
#sdgsaction ul.other_list li:nth-child(3){
width: 40%;
}

#esg ul.other_list{
  width: 400px;
}
ul.other_list li p{
font-size: 90%;
line-height: 1.5;
margin-top: .5em;
}


}
@media all and (max-width:961px) {
ul.tab_list li{
  width: 100%;
  margin:0 auto;
}
ul.tab_list p{
  padding:1em 2em;
}
ul.other_list{
margin:2em auto;
padding:1.5em 0;
}
ul.other_list li{
width: 90%;
font-size: 70%;
margin:1em auto 0;
line-height:2em;
}
ul.other_list li:first-of-type{
width: 90%;
font-size: 80%;
margin:0 auto;
}
}

/*私たちがめざすもの*/
#ourvision p.catch span{border:solid 1px #2d9c50;color:#2d9c50;}
#ourvision h2{color:#2d9c50; }
#ourvision h2::before {
    content: "";
    display: inline-block;
    z-index: 101;
    width:50px;
    height:50px;
    background: url(../img/VISION_icon.png) center no-repeat;
    background-size: contain;
}
#ourvision h3{background:rgba(45,156,80,1);}
#ourvision h3::before {border-top: 15px solid rgba(45,156,80,1);}
#ourvision section div{background:rgba(45,156,80,0.2);}
#ourvision section div::after {color:#2d9c50;}
@media all and (min-width:960px) {
#ourvision{padding-top:100px;}
}
@media all and (max-width:961px) {
#ourvision{padding-top:3em;}
}
/*SDGsへの取り組み*/
#sdgsaction p.catch span{border:solid 1px #004c87;color:#004c87;}
#sdgsaction h2{color:#004c87;}
#sdgsaction h2::before {
    content: "";
    display: inline-block;
    z-index: 101;
    width:50px;
    height:50px;
    background: url(../img/ACTION_icon.png) center no-repeat;
    background-size: contain;
}
#sdgsaction h3{background:rgba(0,76,135,1);}
#sdgsaction h3::before {border-top: 15px solid rgba(0,76,135,1);}
#sdgsaction section div{background:rgba(0,76,135,0.2);}
#sdgsaction section div::after {color:#004c87;}
#sdgsaction ul.other_list{border-color:#004c87;}
#sdgsaction ul.other_list a{color:#004c87;}
@media all and (min-width:960px) {
#sdgsaction{padding-top:100px;}
}
@media all and (max-width:961px) {
#sdgsaction{padding-top:3em;}
}
/*環境・社会・ガバナンス*/
#esg p.catch span{
  border:solid 1px #ec6a02;color:#ec6a02;
}
#esg h2{color:#ec6a02;}
#esg h2::before {
    content: "";
    display: inline-block;
    z-index: 101;
    width:50px;
    height:50px;
    background: url(../img/ESG_icon.png) center no-repeat;
    background-size: contain;
}
#esg h3{background:rgba(236,106,2,1);}
#esg h3::before {border-top: 15px solid rgba(236,106,2,1);}
#esg section div{background:rgba(236,106,2,0.2);}
#esg section div::after {color:#ec6a02;}
#esg ul.other_list{border-color:#ec6a02;}
#esg ul.other_list a{color:#ec6a02;}
@media all and (min-width:960px) {
#esg{padding-top:100px;}
}
@media all and (max-width:961px) {
#esg{padding-top:3em;}
}
/*レポート*/
#report p.catch span{
  border:solid 1px #dc007a;color:#dc007a;
}
#report h2{color:#dc007a;}
#report h2::before {
    content: "";
    display: inline-block;
    z-index: 101;
    width:40px;
    height:40px;
    background: url(../img/REPORT_icon.png) center no-repeat;
    background-size: contain;
}
#report h3{background:rgba(220,0,122,1);}
#report h3::before {border-top: 15px solid rgba(220,0,122,1);}
#report section div{background:rgba(220,0,122,0.2);}
#report section div::after {color:#dc007a;}

@media all and (min-width:960px) {
#report
{
  background-image: url(../img/wave2.svg) ;
  background-position:bottom -1px center;
  background-repeat:no-repeat;
  background-size:contain;
  padding:100px 0 200px;
}
}
@media all and (max-width:961px) {
#report
{
  background-image: url(../img/wave2_smp.svg) ;
  background-position:bottom -1px center;
  background-repeat:no-repeat;
  background-size:contain;
  padding:3em 0 6em;
}
}
/*SNS　ハッシュタグ*/
#sns_hushtug article{margin-bottom: 0 !important;}
#sns_hushtug{
  margin:0;padding:0;
  background:rgba(244,246,255,1);}

#sns_hushtug h2{color:rgba(0,80,255,1);
margin-bottom:2em;}

#sns_hushtug p{
  text-align: center !important;
}
#sns_hushtug span.hushtug{
display: inline-block;
background:rgba(0,80,255,1);
color: #fff;
padding:0 .5em;
margin:0 .5em;
}

#sns_hushtug ul li a{
  display: flex;
  align-items: center;
  color:rgba(0,80,255,1);
}
#sns_hushtug ul li a:hover{
  opacity: 0.8;
}


#sns_hushtug .ins_icon,
#sns_hushtug .tw_icon{
  display: inline-block;
	border-radius:50%;
  width: 50px;
  height: 50px;
  margin-right:.5em;
  background:rgba(0,80,255,1);
}
#sns_hushtug .ins_icon .img_sns{
	background: url(../img/sns_instagram.png) center center no-repeat rgba(0,80,255,1);
	background-size: contain;
}
#sns_hushtug .tw_icon .img_sns{
	background: url(../img/sns_x.png) center center no-repeat rgba(0,80,255,1);
	background-size: contain;
}
#sns_hushtug .img_sns{
display: block;
width: 30px !important;
height: 30px !important;
padding:0 !important;
margin:10px !important;
}

#sns_hushtug .ask_btn{
  display: inline-block;
  color: #fff;
	background:rgba(0,80,255,1);
  border-radius: 50px;
  margin-top:1em;
  padding: 0.5em 2em;
  text-align: center;
}
#sns_hushtug .ask_btn:hover{
  opacity: 0.8;
}

@media all and (min-width:960px) {
#sns_hushtug{padding:100px 0}
#sns_hushtug ul{
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    width: 600px;
    margin:0 auto 2em;
    padding:2em;
  }
#sns_hushtug span.hushtug{
    font-size: 110%;
  }
}
@media all and (max-width:961px) {
#sns_hushtug{padding:3em 0}
#sns_hushtug ul {
    width: 90%;
    margin:2em auto 3em;
  }
#sns_hushtug ul li{
  display: flex;
  align-items: stretch;
  justify-content:space-around;
  margin:2em auto;
  }
#sns_hushtug span.hushtug{
  margin:.5em 0;
  font-size: 110%;
}
}