@charset "UTF-8";
a img:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all .5s; outline: none;}

.heading-text{ text-align: center; letter-spacing: 0;}
/*.heading-subtext-sustainabilty{ width: 960px; text-align: center; display: block; margin-top: 20px;}*/
.heading-subtext-sustainabilty img{ height: 100%; width: auto; margin: 0 auto; display: block;}


/*-- マップ
----------------------------------------------*/
#mapArea{ margin: 80px auto 0; position: relative;}
#mapArea img{ width: 100%;}
#mapArea .map{ width: 960px; margin: 0 0 100px;}
#mapArea .map-hellowoods { position: absolute; width: 220px; top: 0; left: 50px;}
#mapArea .map-park { position: absolute; width: 244px; top: 380px; left: 0;}
#mapArea .map-hondacollectionhall { position: absolute; width: 340px; top: 595px; left: 20px;}
#mapArea .map-resortarea { position: absolute; width: 380px; top: 160px; left: 380px;}
#mapArea .map-motorsports { position: absolute; width: 156px; top: 370px; left: 440px;}
#mapArea .map-environment { position: absolute; width: 220px; top: 595px; left: 410px;}
#mapArea .map-trafficeducationcenter { position: absolute; width: 270px; top: 290px; left: 690px;}
#mapArea .map-staff { position: absolute; width: 220px; top: 530px; left: 690px;}
#mapArea a{ transition: all 0.6s;}
#mapArea a:hover{ opacity: 0.5;}
 .scrollIcon{ display: none;}



/*-- コンテンツ
----------------------------------------------*/

#sdgs{ width: 960px; margin: 0 auto;}
#sdgs h3{ width: 100%; text-align: center; margin: 0 auto;}
#sdgs p.ttl-lead-txt{ width: 960px; text-align: center; margin: 40px auto 0; font-size: 18px; color: #333333; line-height: 2; letter-spacing: .1em;}
#sdgs p.ttl-sub-txt{ width: 960px; text-align: center; margin: 40px auto 0; font-size: 14px; color: #333333; line-height: 2; letter-spacing: .1em;}
#sdgs p.end-txt{ width: 960px; text-align: center; margin: 20px auto 0; font-weight: bold; font-size: 18px; color: #eb5b33; line-height: 2; letter-spacing: .1em;}

#sdgs h3.content-ttl{ width: 100%; text-align: center; margin: 140px auto 0; padding: 25px 0; font-size: 34px; font-weight: bold; letter-spacing: .1em;}
#sdgs p.contents-lead-txt{ margin: 40px auto 0; font-size: 16px; text-align: center;}

ul.detailList{ width: auto; margin: 80px auto 0;}
ul.detailList > li { width: auto; margin: 0 auto 100px; padding-bottom: 100px; list-style: none; display: flex; justify-content: space-between; flex-flow: wrap;}
ul.detailList > li:last-child {margin-bottom: 0;}
ul.detailList .imgBox{ width: 450px;}
ul.detailList .txtBox{ width: 450px; font-size: 16px; color: #333; line-height: 2;}
ul.detailList .txtBox-wide{ width: 900px; font-size: 16px; color: #333; line-height: 2;}


#fes{ margin-bottom: 160px;}
#fes h3.content-ttl{ background: #feffe0; color: #05a775; }
#fes ul.detailList > li { border-bottom: solid 1px #a3decc;}
#fes ul.detailList h4 { margin-bottom: 35px; letter-spacing: .2em;}
#fes ul.detailList h4 span{ font-size: 26px; color: #05a775; line-height: 2; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #fdffae; text-decoration-thickness: 7px; text-underline-offset: 13px;}

#fes .events-swiper-pagination{ text-align: center;}
#fes span.swiper-pagination-bullet{ display: inline-block; vertical-align: top; margin: 0 10px; width: 12px; height: 12px; background-color: #a3decc; border-radius: 50%; cursor: pointer;}
#fes span.swiper-pagination-bullet-active{ background-color: #05a775;}

#efforts h3.content-ttl{ background: #ecfff3; color: #4aa5b8;}
#efforts ul.detailList > li { border-bottom: solid 1px #b0d8e0;}
#efforts ul.detailList h4{ margin-bottom: 35px; letter-spacing: .2em;}
#efforts ul.detailList h4 span{ font-size: 26px; color: #4aa5b8; line-height: 2; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #ceffe0; text-decoration-thickness: 7px; text-underline-offset: 13px;}

#efforts .events-swiper-pagination{ text-align: center;}
#efforts span.swiper-pagination-bullet{ display: inline-block; vertical-align: top; margin: 0 10px; width: 12px; height: 12px; background-color: #b0d8e0; border-radius: 50%; cursor: pointer;}
#efforts span.swiper-pagination-bullet-active{ background-color: #4aa5b8;}



#sdgs ul.iconsBox{ width: auto; max-width: 960px; box-sizing: border-box; margin: 60px 0 0; list-style: none; display: flex; justify-content: start; flex-flow: wrap;}
#sdgs ul.iconsBox li{ width: 115px; height: 115px; margin-right: 25px; }
#sdgs ul.iconsBox li.related{ width: 125px; height: 115px; margin-right: 20px;}


.logo-wctrial{ width: 250px; margin: 100px auto 60px;}

.footLogo{ width: 790px; margin: 100px auto;}
.footLogo ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.footLogo li{ width: 370px;}
.footLogo li a{ display: block;}
.footLogo li img{ width: 370px;}



/*-- ボタン
----------------------------------------------*/
ul.txt-btn{ max-width: 960px; margin: 80px auto 120px; list-style: none; display: flex; justify-content: center; font-size: 20px; font-weight: bold;}
ul.txt-btn li{ width: 310px; margin-right: 40px; position: relative; text-align: center; letter-spacing: .1em;}
ul.txt-btn li:last-child{ margin-right: 0;}
ul.txt-btn li.green a{ color: #05a775; line-height: 2; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #fdffae; text-decoration-thickness: 10px; text-underline-offset: -5px;}
ul.txt-btn li.green a::after{ position: absolute; top: 100px; left: calc(50% - 14px); content: ''; display: block; width: 28px; height: 16px; background: url("../images/arrow-green-under.svg"); background-size: contain;}
ul.txt-btn li.blue a{ color: #4aa5b8; line-height: 2;  text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #ceffe0; text-decoration-thickness: 10px; text-underline-offset: -5px;}
ul.txt-btn li.blue a::after{ position: absolute; top: 100px; left: calc(50% - 14px); content: ''; display: block; width: 28px; height: 16px; background: url("../images/arrow-blue-under.svg"); background-size: contain;}
ul.txt-btn li a{ transition: all 0.6s;}
ul.txt-btn li a:hover{ opacity: 0.5;}

ul.green-btn02{ max-width: 960px; margin: 80px auto 0; list-style: none; display: flex; justify-content: center; font-size: 18px; color: #FFF; font-weight: bold;}
ul.green-btn02 li{ width: 280px; height: 80px; box-sizing: border-box; margin-right: 40px; position: relative; text-align: center;}
ul.green-btn02 li:last-child{ margin-right: 0; }
ul.green-btn02 li a{ background: url("../images/bg-btn-green01.jpg"); color: #FFF; display: block; padding: 26.5px; border-radius: 10px; transition: all 0.6s;}
ul.green-btn02 li a:hover{ background: url("../images/bg-btn-green02.jpg");}

ul.blue-btn04{ max-width: 960px; margin: 80px auto 0; list-style: none; display: flex; justify-content: center; font-size: 18px; color: #FFF; font-weight: bold;}
ul.blue-btn04 li{ width: 210px; height: 80px; box-sizing: border-box; margin-right: 40px; position: relative; text-align: center;}
ul.blue-btn04 li:last-child{ margin-right: 0; }
ul.blue-btn04 li a{ background: url("../images/bg-btn-blue01.jpg"); color: #FFF; display: block; padding: 26.5px; border-radius: 10px; transition: all 0.6s;}
ul.blue-btn04 li a:hover{ background: url("../images/bg-btn-blue02.jpg");}


.l-button{ margin-top: 40px;}
.button {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 430px;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border: 1px dotted #333;
    position: relative;
    letter-spacing: 0.08em;
	padding: 15px 10px;
}


.fs90{ font-size: 90%;}

.pc{ display:inline !important;}
.sp{ display:none !important;}



@media screen and (max-width: 749px){
    
a img:hover{ opacity: 1; filter:alpha(opacity=100); transition: none; outline: none;}

.heading-text{ text-align: center; letter-spacing: 0;}
/*.heading-subtext-sustainabilty{ width: 100%; text-align: center; display: block; margin-top: 2%;}*/
.heading-subtext-sustainabilty img{ height: auto; width: 100%; margin: 0 auto; display: block;}


/*-- マップ
----------------------------------------------*/
#mapArea{ margin: 0 auto 5%; position: relative; overflow: scroll;}
#mapArea img{ width: 100%;}
#mapArea .map{ width: 960px; margin: 0;}
#mapArea .map-hellowoods { position: absolute; width: 220px; top: 0; left: 50px;}
#mapArea .map-park { position: absolute; width: 244px; top: 380px; left: 0;}
#mapArea .map-hondacollectionhall { position: absolute; width: 340px; top: 595px; left: 20px;}
#mapArea .map-resortarea { position: absolute; width: 380px; top: 160px; left: 380px;}
#mapArea .map-motorsports { position: absolute; width: 156px; top: 370px; left: 440px;}
#mapArea .map-environment { position: absolute; width: 220px; top: 595px; left: 410px;}
#mapArea .map-trafficeducationcenter { position: absolute; width: 270px; top: 290px; left: 690px;}
#mapArea .map-staff { position: absolute; width: 220px; top: 530px; left: 690px;}
#mapArea a{ transition: all 0.6s;}
#mapArea a:hover{ opacity: 0.5;}
 .scrollIcon{ display: block; z-index: 2; font-size: 13px; margin: 10% auto 5%; text-align: center;}
 .scrollIcon img{ width: 10%; margin-right: 2%;}


/*-- コンテンツ
----------------------------------------------*/

#sdgs{ width: 96%; margin: 0 auto;}
#sdgs h3{ width: 100%; text-align: center; margin: 0 auto;}
#sdgs p.ttl-lead-txt{ width: 100%; text-align: center; margin: 7% auto 0; font-size: 3.7vw; color: #333333; line-height: 2; letter-spacing: .1em;}
#sdgs p.ttl-sub-txt{ width: 100%; text-align: center; margin: 7% auto 0; font-size: 3vw; color: #333333; line-height: 2; letter-spacing: .1em;}
#sdgs p.end-txt{ width: 100%; text-align: center; margin: 7% auto 0; font-weight: bold; font-size: 3.7vw; color: #eb5b33; line-height: 2; letter-spacing: .1em;}

#sdgs h3.content-ttl{ width: 100%; text-align: center; margin: 0 auto 0; padding: 5% 0; font-size: 17px; font-weight: bold; letter-spacing: .1em;}
#sdgs p.contents-lead-txt{ margin: 7% auto 0; font-size: 3.7vw; text-align: center; line-height: 2;}


.contentsBox{ margin: 0 auto 10%; padding-top: 15%;}    
    
ul.detailList{ width: auto; margin: 10% auto 0;}
ul.detailList > li { width: auto; margin: 10% auto 0; padding-bottom: 10%; list-style: none; display: flex; justify-content: space-between; flex-flow: wrap;}
ul.detailList > li:first-child { margin-top: 0;}
ul.detailList > li:last-child { margin-bottom: 0;}
ul.detailList .imgBox{ width: 100%; margin-bottom: 7%;}
ul.detailList .txtBox{ width: 100%; font-size: 13px; color: #333; line-height: 2;}
ul.detailList .txtBox-wide{ width: 100%; font-size: 13px; color: #333; line-height: 2;}

#fes{ margin: 0 auto 15%; padding-top: 15%;}
#fes h3.content-ttl{ background: #feffe0; color: #05a775; }
#fes ul.detailList > li { border-bottom: solid 1px #a3decc;}
#fes ul.detailList h4 { margin-bottom: 5%; letter-spacing: .2em;}
#fes ul.detailList h4 span{ font-size: 15px; color: #05a775; line-height: 2;  text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #fdffae; text-decoration-thickness: 5px; text-underline-offset: 5px;}

#fes .events-swiper-pagination{ text-align: center;}
#fes span.swiper-pagination-bullet{ display: inline-block; vertical-align: top; margin: 0 10px; width: 11px; height: 11px; background-color: #a3decc; border-radius: 50%; cursor: pointer;}
#fes span.swiper-pagination-bullet-active{ background-color: #05a775;}
    
    
#efforts{ margin: 0 auto 5%;  padding-top: 15%;}
#efforts h3.content-ttl{ background: #ecfff3; color: #4aa5b8;}
#efforts ul.detailList > li { border-bottom: solid 1px #b0d8e0;}
#efforts ul.detailList h4{ margin-bottom: 5%; letter-spacing: .2em;}
#efforts ul.detailList h4 span{ font-size: 15px; color: #4aa5b8; line-height: 2; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #ceffe0; text-decoration-thickness: 5px; text-underline-offset: 5px;}

#efforts .events-swiper-pagination{ text-align: center;}
#efforts span.swiper-pagination-bullet{ display: inline-block; vertical-align: top; margin: 0 10px; width: 11px; height: 11px; background-color: #a3decc; border-radius: 50%; cursor: pointer;}
#efforts span.swiper-pagination-bullet-active{ background-color: #4aa5b8;}
    
  
#sdgs ul.iconsBox{ width: 100%; max-width: 100%; box-sizing: border-box; margin: 10% 0 0; list-style: none; display: flex; justify-content: start; flex-flow: wrap;}
#sdgs ul.iconsBox li{ width: 21%; height: auto; margin-right: 4%; margin-top: 4%;}
#sdgs ul.iconsBox li.related{ width: 22.9%; height: auto; margin-right: 3%;}
#sdgs ul.iconsBox li:nth-child(4n){ margin-right: 0;}
#sdgs ul.iconsBox li:nth-child(-n+4){ margin-top: 0;}
  

.logo-wctrial{ width: 60%; margin: 0 auto 10%;}
	
.footLogo{ width: auto; margin: 15% auto;}
.footLogo ul{display: block;}
.footLogo li{ width: 70%; margin: 0 auto; display: block;}
.footLogo li:last-child{ margin-top: 7%;}
.footLogo li a{ display: block;}
.footLogo li img{ width: 100%;}
.logo-honda-mobilityland{ width: 70%; margin: 15% auto;}



/*-- ボタン
----------------------------------------------*/
ul.txt-btn{ max-width: 100%; margin: 10% auto 20%; list-style: none; display: flex; justify-content: center; font-size: 13px; font-weight: bold;}
ul.txt-btn li{ width: 50%x; margin-right: 0%; position: relative; text-align: center; letter-spacing: .08em;}
ul.txt-btn li:last-child{ margin-right: 0;}
ul.txt-btn li.green a{ color: #05a775; line-height: 2; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #fdffae; text-decoration-thickness: 10px; text-underline-offset: -5px;}
ul.txt-btn li.green a::after{ position: absolute; top: 120%; left: calc(50% - 7px); content: ''; display: block; width: 14px; height: 8px; background: url("../images/arrow-green-under.svg"); background-size: contain;}
ul.txt-btn li.blue a{ color: #4aa5b8; line-height: 2;  text-decoration: underline; text-decoration-color: currentcolor; text-decoration-thickness: auto;
text-decoration-color: #ceffe0; text-decoration-thickness: 10px; text-underline-offset: -5px;}
ul.txt-btn li.blue a::after{ position: absolute; top: 120%; left: calc(50% - 7px); content: ''; display: block; width: 14px; height: 8px; background: url("../images/arrow-blue-under.svg"); background-size: contain;}
ul.txt-btn li a{ transition: all 0.6s;}
ul.txt-btn li a:hover{ opacity: 0.5;}

ul.green-btn02{ max-width: 90%; margin: 10% auto 0; list-style: none; display: flex; justify-content: center; font-size: 13px; color: #FFF; font-weight: bold;}
ul.green-btn02 li{ width: 42.5%; height: auto; box-sizing: border-box; margin-right: 5%; position: relative; text-align: center;}
ul.green-btn02 li:last-child{ margin-right: 0; }
ul.green-btn02 li a{ background: url("../images/bg-btn-green01.jpg"); color: #FFF; display: block; padding: 7%; border-radius: 10px; transition: all 0.6s;}

ul.blue-btn04{ max-width: 90%; margin: 10% auto 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #FFF; font-weight: bold;}
ul.blue-btn04 li{ width: 42.5%; height: auto; box-sizing: border-box; margin-right: 5%; margin-top: 5%; position: relative; text-align: center;}
ul.blue-btn04 li:last-child{ margin-right: 0; }
ul.blue-btn04 li:nth-child(2n){ margin-right: 0; }
ul.blue-btn04 li:nth-child(-n+2){ margin-top: 0;}
ul.blue-btn04 li a{ background: url("../images/bg-btn-blue01.jpg"); color: #FFF; display: block; padding: 7%; border-radius: 10px; transition: all 0.6s;}


.l-button{ margin: 7% auto 0; width: 80%;}
.button {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    height: auto;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    border: 1px dotted #333;
    position: relative;
    letter-spacing: 0.08em;
	padding: 15px 10px;
}



.button {
    font-size: 11px;
    max-width: 400px;
    width: 100%;
    height: auto;
	padding: 5%;
}
	

.fs90{ font-size: 90%;}
    
.pc{ display:none !important;}
.sp{ display:inherit !important;}
	
}

	
/**--- UTF-8化 ---**/
 .heading-subtext-sustainabilty{
	text-align: center;
  position: relative;
	font-size:48pt;
	margin: 15px auto 25px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
	
@media screen and (max-width: 750px) {
.heading-subtext-sustainabilty{
	text-align: center;
	font-size:22pt;
	margin: 0 auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}

#mirai .youtubeTtl span{
	font-size:18pt;
	margin-bottom: 10px;
	display: block;
}
	
@media screen and (max-width: 750px) {
#mirai .youtubeTtl h3{
	font-size:14pt;
	display: block;
}
}

#mirai .release h3.sixItems{
	text-align: center;
  position: relative;
	font-size:20pt;
	margin: 15px auto 25px;
	letter-spacing: 0.15em;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
	
@media screen and (max-width: 750px) {
#mirai .release h3.sixItems{
	text-align: center;
	font-size:14pt;
	margin: 0 auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}
 p.heading-subtext  {
  display: inline-block;
  position: relative;
	font-size:28pt;
	margin: 10px auto 25px;
	letter-spacing: 0.15em;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
@media screen and (max-width: 750px) {
p.heading-subtext   {
    display: block;
	font-size:20pt;
	margin: 5px auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}
 .ttl-img{
	text-align: center;
  position: relative;
	font-size:28pt;
	letter-spacing: 0.1em;
	margin: 15px auto 25px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
	
@media screen and (max-width: 750px) {
 .ttl-img{
	text-align: center;
	font-size:18pt;
	margin: 0 auto 30px;
	letter-spacing: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
}

.blue{color:#4AA5B8;}
.green{color:#05A775;}