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

CONCEPT

------------------------------------------------*/

#concept{ padding-bottom: 20px;}
.concept-effort.concept-container01{ padding-bottom: 0; }
.concept-effort.concept-container01 .heading{ margin: 0 auto 40px;}

.header-totop{ max-width: 1020px; margin: 0 auto; text-align: left; color: #000;}
.header-totop a{ transition: opacity 0.5s; color: #000;}
.header-totop a:hover{ transition: opacity 0.5s; opacity: 0.7;}
.header-totop a img{ width: 150px;}

.cpncept-mv-heading{ width: 100%; bottom: 5px !important;}
.cpncept-mv-heading .heading-text { font-size: 45px; -webkit-text-fill-color: #fff; color: #fff;}
.cpncept-mv-heading .heading-subtext{ width: 100%; max-width: 790px; height: 80px; margin-top: 20px; fill: #fff;}

.conceptBtn{  max-width: 1020px; margin: 65px auto 0; display: flex; justify-content: space-between;}
.conceptBtn > li{ width: 228px;}/* 5→ width: 184px */
.conceptBtn > li a{ position: relative; font-size: 18px; font-weight: bold; display: block;}
.conceptBtn > li a .text{ position: absolute; z-index: 3; height: 100%; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; color: #333333;}
.conceptBtn > li a .text > span{ display: block; width: 100%; text-align: center;}
.conceptBtn > li a .on{ z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s; display: block; line-height: 1;}
.conceptBtn > li a .off{ z-index: 1; position: relative; transition: opacity 0.5s; display: block; line-height: 1;}
.conceptBtn > li a .on img,
.conceptBtn > li a .off img{ width: 100%; display: block;}
.conceptBtn > li a img{ display: block;}
.conceptBtn > li a:hover .on{ opacity: 1;}
.conceptBtn > li a:hover .off{ opacity: 0;} 
.conceptBtn > li.active a .on{ opacity: 1; }
.conceptBtn > li.active a .off{ opacity: 0;}

.conceptBtn.split05 > li { width: 184px;}

.heading-main.heading-main-concept{ margin-bottom: 50px;}
.heading.initiatives{ text-align: center;}

.concept-container01{ padding-bottom: 145px; }
.concept-container01 .l-container{ padding: 0; max-width: 1020px;}
.concept-container01 .l-container p{ line-height: 2;}
.concept-container01:last-child{ padding-bottom: 65px;}

.concept-main{ margin-bottom: 45px; }
.concept-main .l-container{ padding: 0; max-width: 1020px;}
.concept-main p{ font-size: 16px; text-align: center; line-height: 2.2;}
.concept-attempt-list{ display: flex; justify-content: space-between; margin: 80px auto 0;}
.concept-attempt-list li{ width: 321px;}
.concept-attempt-list li:nth-child(2){ padding-top: 60px;}

.concept-symbol{ background: url("../images/hellowoods/concept/img-symbol-pc.png") no-repeat calc(50% - 210px) top; min-height: 490px; box-sizing: border-box; padding: 35px 0; margin-bottom: 120px;} 
.concept-symbol .concept-symbol-img{ display: none;}
.concept-symbol .l-container{ max-width: 1020px; padding: 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center;}
.concept-symbol .l-container .concept-symbol-text{ width: 530px;}
.concept-symbol .l-container .concept-symbol-text h3{ margin: 0 auto 40px;}
.concept-symbol .l-container .concept-symbol-text span{ font-size: 16px; line-height: 2; margin-bottom: 50px;}


.concept-symbol2{ background: url("../images/hellowoods/concept/img-symbol2-pc.png") no-repeat calc(50% - 265px) top; min-height: 490px; box-sizing: border-box; padding: 35px 0; margin-bottom: 120px;} 
.concept-symbol2 .concept-symbol-img{ display: none;}
.concept-symbol2 .l-container{ max-width: 1020px; padding: 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center;}
.concept-symbol2 .l-container .concept-symbol-text{ width: 530px;}
.concept-symbol2 .l-container .concept-symbol-text h3{ margin: 0 auto 40px;}
.concept-symbol2 .l-container .concept-symbol-text span{ font-size: 16px; line-height: 2; margin-bottom: 50px;}


.concept-symbol3{ background: url("../images/hellowoods/concept/img-symbol3-pc.png") no-repeat calc(50% - 265px) top; min-height: 490px; box-sizing: border-box; padding: 35px 0; margin-bottom: 120px;} 
.concept-symbol3 .concept-symbol-img{ display: none;}
.concept-symbol3 .l-container{ max-width: 1020px; padding: 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center;}
.concept-symbol3 .l-container .concept-symbol-text{ width: 530px;}
.concept-symbol3 .l-container .concept-symbol-text h3{ margin: 0 auto 40px;}
.concept-symbol3 .l-container .concept-symbol-text span{ font-size: 16px; line-height: 2; margin-bottom: 50px;}

.button.w450{ width: 450px}

.captionTxtC{ margin: 10px auto 0; text-align: center; font-size: 90%;}



/*------------------------------------------------

MECHANISM

------------------------------------------------*/
.mechanism-learn.concept-container01{ padding-bottom: 0; }
.mechanism-learn.concept-container01 .heading{ margin: 0 auto 40px;}

.mechanism-mv-heading{ width: 100%; bottom: 5px !important;}
.mechanism-mv-heading .heading-text { font-size: 45px; -webkit-text-fill-color: #fff; color: #fff;}
.mechanism-mv-heading .heading-subtext{ width: 100%; max-width: 686px; height: 80px; margin-top: 20px; fill: #fff;}

.subpage-button-family-walk.mechanism{ height: auto;}
.subpage-button-family-walk.mechanism .banner-list{ display: block; height: auto;}
.subpage-button-family-walk.mechanism .banner-list .list-item{ position: relative; opacity: 1;}
.subpage-button-family-walk.mechanism .banner-list a{ display: block;}

.biodiversity-flex-box{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2em;}
.biodiversity-flex-box .text{ margin: 0; width: 510px;}
.biodiversity-flex-box .img{ margin: 0; width: 460px;}
.biodiversity-flex-box .img img{ display: block; width: 100%;}

.hellowoods-point-of-view-flex-box{ display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; margin: 70px auto 0;}
.hellowoods-point-of-view-flex-box .textBox{ width: 510px;}
.hellowoods-point-of-view-flex-box .textBox h4{ margin: 0 auto 30px; line-height: 2; border-bottom: 2px solid #d8db68;}
.hellowoods-point-of-view-flex-box .textBox h4 span{ color: #049265; font-size: 20px; font-weight: bold; }
.hellowoods-point-of-view-flex-box .img{ width: 420px;}

/* バナーあり
.season-animal-list{ margin: 80px auto 150px;}*/
.season-animal-list{ margin: 80px auto 0;}
.season-animal-list li{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin: 0 auto 30px;}
.season-animal-list li:last-child{ margin-bottom: 0;}
.season-animal-list li:nth-child(odd){ flex-direction: row;}
.season-animal-list li:nth-child(even){ flex-direction: row-reverse;}
.season-animal-list li .img{ width: 500px;}
.season-animal-list li .img img{ display: block; width: 100%;}
.season-animal-list li .textBox{ width: 510px;}


/*------------------------------------------------

ACTIVETIES

------------------------------------------------*/

.activities-mv-heading{ width: 100%; bottom: 5px !important;}
.activities-mv-heading .heading-text { font-size: 45px; -webkit-text-fill-color: #fff; color: #fff;}
.activities-mv-heading .heading-subtext{ width: 100%; max-width: 686px; height: 80px; margin-top: 20px; fill: #fff;}

.composition-list{ width: 100%; display: flex; justify-content: space-between;}
.composition-list > li{ width: 320px;}
.composition-list > li .button{ width: 320px;}

.activities-program-list{ margin: 80px auto 0;}
.activities-program-list > li{ margin-bottom: 80px; display: flex; justify-content: space-between;}
.activities-program-list > li:nth-child(odd){ flex-direction: row;}
.activities-program-list > li:nth-child(even){ flex-direction: row-reverse;}
.activities-program-list > li:last-child{ margin-bottom: 0;}
.activities-program-list > li .img{ width: 420px;}
.activities-program-list > li .textBox{ width: 510px;}

.communication-flex-box{ background: url("../images/hellowoods/concept/img-activities02.png") no-repeat right top; background-size: 420px; margin-top: 80px;}
.communication-flex-box .img{ display: none;}
.communication-flex-box .textBox h3{ margin-top: 80px;}
.communication-flex-box .textBox h3:first-child{ margin-top: 0;}
.participation-flex-box{ display: flex; justify-content: space-between; }
.participation-flex-box > .concept-list{ width: 465px; }

.culture-flex-box{ background: url("../images/hellowoods/concept/img-activities04.png") no-repeat right top; background-size: 420px; margin-top: 80px;}
.culture-flex-box .textBox h3{ margin-top: 80px;}

.concept-list > li{ text-indent: -1.5em; padding-left: 1.5em; display: block; line-height: 2;}
.concept-list > li::before{ content: "\25CF"; color: #896239; margin-right: 0.5em; }



/*------------------------------------------------

BIODIVERSITY

------------------------------------------------*/

.biodiversity-mv-heading{ width: 100%; bottom: 5px !important;}
.biodiversity-mv-heading .heading-text { font-size: 45px; -webkit-text-fill-color: #fff; color: #fff;}
.biodiversity-mv-heading .heading-subtext{ width: 100%; max-width: 686px; height: 80px; margin-top: 20px; fill: #fff;}



/*-------------------

hw-report

--------------------*/

.report-mv-heading{ width: 100%; bottom: 5px !important;}
.report-mv-heading .heading-text { font-size: 45px; -webkit-text-fill-color: #fff; color: #fff;}
.report-mv-heading .heading-subtext{ width: 100%; max-width: 830px; height: 80px; margin-top: 20px; fill: #fff;}

.reportCatch{ font-size: 18px; text-align: center;}

#hw-report .hw-report-list{ display: block; width: 100%; margin: 80px auto 120px;}
#hw-report .hw-report-list li{ display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 80px;}
#hw-report .hw-report-list li:nth-child(odd){ padding-right: 60px; flex-direction: row; background: url("../images/hellowoods/concept/bg-hw-report01.png") no-repeat right center; background-size: 575px;}
#hw-report .hw-report-list li:nth-child(even){ padding-left: 60px; flex-direction: row-reverse; background: url("../images/hellowoods/concept/bg-hw-report02.png") no-repeat left center; background-size: 575px;}
#hw-report .hw-report-list li:last-child{ margin-bottom: 0;}
#hw-report .hw-report-list li .img{ width: 420px; position: relative;}
#hw-report .hw-report-list li .img::after{ content: ""; width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; z-index: 2; top: -2px; left: -2px; background: url("../images/hellowoods/concept/frame-hw-report.svg") no-repeat center center; background-size: 100% 100%;}
#hw-report .hw-report-list li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
#hw-report .hw-report-list li .textBox{ width: 450px; position: relative;}
#hw-report .hw-report-list li .textBox p{ font-size: 15px; color: #6c5232; line-height: 2.4; font-weight: bold; position: inherit; z-index: 99;}
#hw-report .hw-report-list li .textBox p span{ color: #009245;}
#hw-report .hw-report-list li .textBox p.leaf{ z-index: 1; position: absolute;}

#hw-report .hw-report-list li .textBox p.leaf.r20-t{ right: -20px; top: -90px; width: 160px;}
#hw-report .hw-report-list li .textBox p.leaf.r15-t{ right: 15px; top: -50px; width: 100px;}
#hw-report .hw-report-list li .textBox p.leaf.r20-m{ right: -20px; top: 108px; width: 114px;}
#hw-report .hw-report-list li .textBox p.leaf.r05-m{ right: 5px; top: 80px; width: 160px;}

#hw-report .hw-report-list li .textBox p.leaf.r40m-t182m{ right: -40px; top: -182px; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t129m{ right: -40px; top: -129px; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t40{ right: -40px; top: 40px; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t102{ right: -40px; top: 102px; }
#hw-report .hw-report-list li .textBox p.leaf.r20m-t25{ right: -20px; top: 25px; }
#hw-report .hw-report-list li .textBox p.leaf.r15m-t52m{ right: -15px; top: -52px; }
#hw-report .hw-report-list li .textBox p.leaf.r00-t127{ right: -20px; top: 127px; }
#hw-report .hw-report-list li .textBox p.leaf.r55m-t10m{ right: -55px; top: -10px; }
#hw-report .hw-report-list li .textBox p.leaf.type01{ width: 170px; }
#hw-report .hw-report-list li .textBox p.leaf.type02{ width: 100px; }
#hw-report .hw-report-list li .textBox p.leaf.type03{ width: 114px; }
#hw-report .hw-report-list li .textBox p.leaf.type04{ width: 170px; }

#hw-report h3.impressions{ width: 430px; margin: 0 auto 40px; text-align: center; padding-bottom: 20px; border-bottom: solid 1px #d8db67; position: relative;}
#hw-report h3.impressions::before,
#hw-report h3.impressions::after{ position: absolute; top: 100%; left: 50%; content: ""; height: 0; width: 0;}
#hw-report h3.impressions::before { border: 14px solid; border-color: transparent;  border-top-color: #d8db67; margin-left: -14px;}
#hw-report h3.impressions::after { border: 12px solid; border-color: transparent; border-top-color: white; margin-left: -12px;}

#hw-report .impressions-list{ display: block; width: 100%; margin: 80px auto 0;}
#hw-report .impressions-list li{ display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: 80px;}
#hw-report .impressions-list li:nth-child(odd){ flex-direction: row;}
#hw-report .impressions-list li:nth-child(even){ flex-direction: row-reverse;}
#hw-report .impressions-list li:last-child{ margin-bottom: 0;}
#hw-report .impressions-list li .img{ width: 350px;}
#hw-report .impressions-list li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
#hw-report .impressions-list li .textBox{ position: relative; box-sizing: border-box;}
#hw-report .impressions-list > li:nth-child(odd) .textBox{ width: 620px; padding: 70px 110px 80px 90px; background: url("../images/hellowoods/concept/bg-impressions01.png") no-repeat left top; background-size: contain;}
#hw-report .impressions-list > li:nth-child(even) .textBox{ width: 620px; padding: 80px 90px 80px 110px; background: url("../images/hellowoods/concept/bg-impressions02.png") no-repeat right top; background-size: contain;}
#hw-report .impressions-list li .textBox p{ font-size: 15px; color: #333; line-height: 2; font-weight: normal; position: inherit; z-index: 99;}
#hw-report .impressions-list li .textBox p.name{ text-align: right; margin: 10px 0 0;}
#hw-report .impressions-list li .textBox p span{ color: #009245;}
#hw-report .impressions-list li .textBox p.leaf{ z-index: 1;}

#hw-report .impressions-list li:nth-child(odd) .textBox::before{content: ""; background: url("../images/hellowoods/concept/leaf02-01.png") no-repeat 0 0; background-size: cover; width: 80px; height: 138px;  z-index: 1; position: absolute; left: 0; top: 0;}
#hw-report .impressions-list li:nth-child(even) .textBox::before{ content: ""; background: url("../images/hellowoods/concept/leaf02-02.png") no-repeat 0 0; background-size: cover; width: 80px; height: 156px;  z-index: 1; position: absolute; right: 0; top: 0; }

#hw-report .wrapReport{ margin: 200px auto 0;}
#hw-report .wrapReport:first-of-type{ margin-top: 40px;}
#hw-report .wrapReport:first-of-type .reportTtlBox:first-child{ margin-top: 0;}
#hw-report .reportTtlBox{ margin: 120px auto 50px; box-sizing: border-box; padding: 40px; background: #eff9f3;}
#hw-report .reportTtl{ text-align: center; margin: 0 auto 30px;}
#hw-report .reportTtl span{ background: -webkit-gradient(linear, left top, right top, from(#027cc3), to(#09a046)); background: linear-gradient(to right, #027cc3 0%, #09a046 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-size: 28px;}
#hw-report .reportTtlBox p{ font-size: 16px;}

#hw-report .youtube{ width: 100%; margin: 50px auto;}
#hw-report .innerYoutube{ width: 100%; padding-top: 56.25%; position: relative;}
#hw-report .innerYoutube iframe{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0;}

.honda-contribution{ background: url("../images/hellowoods/concept/img-tomorrow-pc.png") no-repeat calc(50% - 210px) center; min-height: 490px; box-sizing: border-box; padding: 35px 0; margin-top: 120px;} 
.honda-contribution .honda-contribution-text-img{ display: none;}
.honda-contribution .l-container{ max-width: 1020px; padding: 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center;}
.honda-contribution .l-container .honda-contribution-text{ width: 530px;}
.honda-contribution .l-container .honda-contribution-text h3{ margin: 0 auto 40px;}
.honda-contribution .l-container .honda-contribution-text span{ font-size: 16px; line-height: 2; margin-bottom: 50px;}

#hw-report .leaseImg{ width: 860px; margin: 150px auto 0;}
#hw-report .leaseImg ul{ display: flex; justify-content: space-evenly; flex-wrap: wrap; margin-bottom: 0;}
#hw-report .leaseImg li{ width: 370px;}


/*------------------------------------------------

COMMON

------------------------------------------------*/

#page-top{ display:none; position:fixed; z-index:200; width: 50px; bottom: 30px; right: 30px;}
#page-top .totopBtn{ margin:0; padding:0; width: 100%;}
#page-top .totopBtn a{ display: block;}
#page-top .totopBtn img{ width: 100%;}
#move-page-top{ text-decoration:none; display:block; cursor:pointer; transition: opacity 0.5s;}


@media screen and (min-width: 750px) {
main .sp{ display: none !important;}
}


@media screen and (max-width: 749px) {
/*------------------------------------------------

CONCEPT

------------------------------------------------*/
  
#concept{ padding-bottom: 0;}
main .pc{ display: none !important;}
 
#birth{ margin-top: -20px;}

.concept-effort.concept-container01{ padding-bottom: 0; }
.concept-effort.concept-container01 .heading{ margin: 0 auto;}
    
.header-totop{ max-width: 1020px; padding: 0; margin: 0 auto; text-align: left; color: #000;}
.header-totop a{ color: #000;}
.header-totop a img{ width: 35vw;}

.cpncept-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.cpncept-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.cpncept-mv-heading .heading-subtext{ width: 100%; max-width: 100%; height: 55px; margin: 20px 0 0; fill: #fff;}
.cpncept-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}


.conceptBtn{  width: 100%; box-sizing: border-box; margin: 30px auto 0; display: flex; justify-content:center; flex-wrap: wrap; padding: 0;}
.conceptBtn > li{ width: calc(50% - 10px); margin: 20px 20px 0 0;}
.conceptBtn > li:nth-child(-n+2){ margin-top: 0;}
.conceptBtn > li:nth-child(even){ margin-right: 0;}
.conceptBtn > li a{ position: relative; font-size: 12px !important; font-weight: bold; display: block;}
.conceptBtn > li a .text{ position: absolute; z-index: 3; height: 100%; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; color: #333333;}
.conceptBtn > li a .text > span{ display: block; width: 100%; text-align: center;}
.conceptBtn > li a .on{ z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s;}
.conceptBtn > li a .off{ z-index: 1; position: relative; transition: opacity 0.5s;}
.conceptBtn > li a img{ display: block;}
.conceptBtn > li a:hover .on{ opacity: 1;}
.conceptBtn > li a:hover .off{ opacity: 0;} 
    
.conceptBtn.split05 > li { width: calc(50% - 10px);}

.heading-main.heading-main-concept{ margin-bottom: 20px;}
.heading.initiatives{ text-align: center;}

.concept-container01{ padding: 50px 0 0;}
.concept-container01 .l-container{ padding: 0 30px; max-width: 1020px;}
.concept-container01 .heading-subtext{ height: auto;}
.concept-container01 .subpage-banner{ width: 100%; left: 0;}
.concept-container01 .l-container p{ line-height: 2; font-size: 12px;}
.concept-container01:first-child{ padding-bottom: 30px;}

.concept-main{ margin: -30px auto 10px; padding-top: 50px;}
.concept-main .heading-main.heading-main-concept { margin-bottom: 30px;}
.concept-main .l-container{ padding: 0 20px; max-width: 1020px;}
.concept-main p{ font-size: 12px; text-align: left; line-height: 2;}
.concept-attempt-list{ display: block; margin: 40px auto 0;}
.concept-attempt-list li{ width: 80%; margin: 0 auto 30px;}
.concept-attempt-list li:nth-child(2){ padding-top: 0;}   
.concept-attempt-list li:last-child{ margin-bottom: 0;}
    
.concept-symbol{ background: none; min-height: 0px; box-sizing: border-box; padding: 35px 0; margin-bottom: 0;} 
.concept-symbol .concept-symbol-img{ display: block; width: 100%; margin-bottom: 15px;}
.concept-symbol .l-container{ width: auto; padding: 0 20px; display: block; }
.concept-symbol .l-container .concept-symbol-text{ width: 100%;}
.concept-symbol .l-container .concept-symbol-text h3{ margin: 0 auto 15px;}
.concept-symbol .l-container .concept-symbol-text span{ font-size: 12px; line-height: 2; margin-bottom: 20px;}
	    
.concept-symbol2{ background: none; min-height: 0px; box-sizing: border-box; padding: 35px 0; margin-bottom: 0;} 
.concept-symbol2 .concept-symbol-img{ display: block; width: 100%; margin-bottom: 15px;}
.concept-symbol2 .l-container{ width: auto; padding: 0 20px; display: block; }
.concept-symbol2 .l-container .concept-symbol-text{ width: 100%;}
.concept-symbol2 .l-container .concept-symbol-text h3{ margin: 0 auto 15px;}
.concept-symbol2 .l-container .concept-symbol-text span{ font-size: 12px; line-height: 2; margin-bottom: 20px;}
	    
.concept-symbol3{ background: none; min-height: 0px; box-sizing: border-box; padding: 35px 0; margin-bottom: 0;} 
.concept-symbol3 .concept-symbol-img{ display: block; width: 100%; margin-bottom: 15px;}
.concept-symbol3 .l-container{ width: auto; padding: 0 20px; display: block; }
.concept-symbol3 .l-container .concept-symbol-text{ width: 100%;}
.concept-symbol3 .l-container .concept-symbol-text h3{ margin: 0 auto 15px;}
.concept-symbol3 .l-container .concept-symbol-text span{ font-size: 12px; line-height: 2; margin-bottom: 20px;}

.button.w450{ width: 80%}

.captionTxtC{ margin: 2% auto 0; text-align: center; font-size: 70%!important;}
    
    
/*------------------------------------------------

MECHANISM

------------------------------------------------*/
#learn{ margin-top: -20px;}
#biodiversity{ margin-top: -20px;}
    
.mechanism-learn.concept-container01{ padding-bottom: 0; }
.mechanism-learn.concept-container01 .heading{ margin: 0 auto;}

.mechanism-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.mechanism-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.mechanism-mv-heading .heading-subtext{ width: 87%; max-width: 87%; height: 55px; margin: 20px 0 0; fill: #fff;}
.mechanism-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}
    
.learn .heading{ margin-top: 0;}

.subpage-button-family-walk.mechanism{ height: auto;}
.subpage-button-family-walk.mechanism .banner-list{ display: block; height: auto;}
.subpage-button-family-walk.mechanism .banner-list .list-item{ position: relative; opacity: 1;}
.subpage-button-family-walk.mechanism .banner-list a{ display: block;}

.biodiversity-flex-box{ display: block; margin-top: 2em;}
.biodiversity-flex-box .text{ margin: 0; width: 100%;}
.biodiversity-flex-box .img{ margin: 30px auto 0; width: 80%;}
.biodiversity-flex-box .img img{ display: block; width: 100%;}

.hellowoods-point-of-view-flex-box{ display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; margin: 30px auto 0;}
.hellowoods-point-of-view-flex-box .textBox{ width: 100%;}
.hellowoods-point-of-view-flex-box .textBox h4{ margin: 0 auto 10px; line-height: 2; border-bottom: 2px solid #d8db68;}
.hellowoods-point-of-view-flex-box .textBox h4 span{ color: #049265; font-size: 13px; font-weight: bold; }
.hellowoods-point-of-view-flex-box .img{ width: 80%; margin: 30px auto 0;}

.season-animal-list{ margin: 40px auto 60px;}
.season-animal-list li{ display: block; margin: 0 auto 60px;}
.season-animal-list li:last-child{ margin-bottom: 0;}
.season-animal-list li:nth-child(odd){ flex-direction: row;}
.season-animal-list li:nth-child(even){ flex-direction: row-reverse;}
.season-animal-list li .img{ width: 100%; margin: 0 auto 30px;}
.season-animal-list li:nth-child(odd) .img img{ display: block; width: 80%; margin: 0 4% 0 auto;}
.season-animal-list li:nth-child(even) .img img{ display: block; width: 80%; margin: 0 auto 0 4%;}
.season-animal-list li .textBox{ width: 100%;}
    
    
/*------------------------------------------------

ACTIVETIES

------------------------------------------------*/
#motegi-nature{ margin-top: -20px;}
    
.activities-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.activities-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.activities-mv-heading .heading-subtext{ width: 87%; max-width: 87%; height: 55px; margin: 20px 0 0; fill: #fff;}
.activities-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}
    
.composition-list{ width: 100%; display: block; }
.composition-list > li{ width: 100%; margin-bottom: 60px;}
.composition-list > li:last-child{ margin-bottom: 0;}
.composition-list > li .img{ width: 80vw; margin: 0 auto;}
.composition-list > li .button{ width: 100%;}

.activities-program-list{ margin: 60px auto 0;}
.activities-program-list > li{ margin-bottom: 60px; display: block; }
.activities-program-list > li:last-child{ margin-bottom: 0;}
.activities-program-list > li .img{ width: 100%; margin-bottom: 20px;}
.activities-program-list > li .textBox{ width: 100%;}

.communication-flex-box{ background: none; margin-top: 60px;}
.communication-flex-box .img{ display: block; margin: 0 auto 30px; width: 80vw;}
.communication-flex-box .textBox h3{ margin-top: 40px;}
.communication-flex-box .textBox h3:first-child{ margin-top: 0;}
.participation-flex-box{ display: block; justify-content: space-between; }
.participation-flex-box > .concept-list{ width: 100%; }

.culture-flex-box{ background: none; margin-top: 60px;}
.culture-flex-box .img{ display: block; margin: 0 auto 0; width: 80vw;}
.culture-flex-box .textBox h3{ margin-top: 60px;}

.concept-list > li{ text-indent: -1.5em; padding-left: 1.5em; display: block; line-height: 2; font-size: 12px;}
.concept-list > li::before{ content: "\25CF"; color: #896239; margin-right: 0.5em; }

    

/*------------------------------------------------

BIODIVERSITY

------------------------------------------------*/

.biodiversity-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.biodiversity-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.biodiversity-mv-heading .heading-subtext{ width: 87%; max-width: 87%; height: 55px; margin: 20px 0 0; fill: #fff;}
.biodiversity-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}



/*-------------------

hw-report

--------------------*/
    
.report-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.report-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.report-mv-heading .heading-subtext{ width: 100%; max-width: 100%; height: 55px; margin: 20px 0 0; fill: #fff;}
.report-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}
    
.reportCatch{ font-size: 14px !important; text-align: center;}

#hw-report .hw-report-list{ display: block; width: 100%; margin: 40px auto 50px;}
#hw-report .hw-report-list li{ display: block; width: 100%; margin-bottom: 60px;}
#hw-report .hw-report-list li:nth-child(odd){ padding-right: 0; background: url("../images/hellowoods/concept/bg-hw-report03.png") no-repeat center bottom; background-size: 100%; background-position: center bottom;}
#hw-report .hw-report-list li:nth-child(even){ padding-left: 0; background: url("../images/hellowoods/concept/bg-hw-report04.png") no-repeat center bottom; background-size: 100%; background-position: center bottom;}
#hw-report .hw-report-list li:last-child{ margin-bottom: 0;}
#hw-report .hw-report-list li .img{ width: 100%; position: relative; margin: 0 auto 30px; z-index: 1;}
#hw-report .hw-report-list li .img::after{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); position: absolute; z-index: 2; top: -1px; left: -1px; background: url("../images/hellowoods/concept/frame-hw-report.svg") no-repeat center center; background-size: 100% 100%;}
#hw-report .hw-report-list li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
#hw-report .hw-report-list li .textBox{ width: 100%; position: relative;}
#hw-report .hw-report-list li .textBox p{ font-size: 12px; color: #6c5232; line-height: 2.4; font-weight: bold; position: inherit; z-index: 99;}
#hw-report .hw-report-list li .textBox p span{ color: #009245;}
#hw-report .hw-report-list li .textBox p.leaf{ z-index: 3; position: absolute;}

#hw-report .hw-report-list li .textBox p.leaf.r20-t{ left: -5%; top: -45%; width: 28vw;}
#hw-report .hw-report-list li .textBox p.leaf.r15-t{ right: -5%; top: -25%; width: 22vw;}
#hw-report .hw-report-list li .textBox p.leaf.r20-m{ left: -1%; top: -30%; width: 22vw; transform: rotate( -45deg );}
#hw-report .hw-report-list li .textBox p.leaf.r05-m{ right: -5%; top: -30%; width: 30vw; transform: rotate( 90deg );}

#hw-report .hw-report-list li .textBox p.leaf.r40m-t182m{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t129m{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t40{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r40m-t102{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r20m-t25{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r15m-t52m{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r00-t127{ right: auto; top: auto; }
#hw-report .hw-report-list li .textBox p.leaf.r55m-t10m{ right: auto; top: auto; }
    
#hw-report .hw-report-list li .textBox p.leaf.type01{ width: 28vw; top: -45%;}
#hw-report .hw-report-list li .textBox p.leaf.type02{ width: 22vw; top: -25%;}
#hw-report .hw-report-list li .textBox p.leaf.type03{ width: 22vw; top: -30%; }
#hw-report .hw-report-list li .textBox p.leaf.type04{ width: 30vw; top: -30%; }
#hw-report .hw-report-list li:nth-child(odd) .textBox p.leaf.type01{ left: -5%; right: auto;}
#hw-report .hw-report-list li:nth-child(even) .textBox p.leaf.type01{ left: auto; right: -5%;}
#hw-report .hw-report-list li:nth-child(odd) .textBox p.leaf.type02{ left: -5%; right: 0;}
#hw-report .hw-report-list li:nth-child(even) .textBox p.leaf.type02{ left: auto; right: -5%;}
#hw-report .hw-report-list li:nth-child(odd) .textBox p.leaf.type03{ left: -1%; right: auto; transform: rotate( -45deg );}
#hw-report .hw-report-list li:nth-child(even) .textBox p.leaf.type03{ left: auto; right: -1%; transform: rotate( 45deg );}
#hw-report .hw-report-list li:nth-child(odd) .textBox p.leaf.type04{ left: -5%; right: auto; transform: rotate( -90deg );}
#hw-report .hw-report-list li:nth-child(even) .textBox p.leaf.type04{ left: auto; right: -5%; transform: rotate( 90deg );}


#hw-report h3.impressions{ width: 240px; margin: 0 auto 40px; text-align: center; padding-bottom: 5%; border-bottom: solid 1px #d8db67; position: relative;}
#hw-report h3.impressions::before,
#hw-report h3.impressions::after{ position: absolute; top: 100%; left: 50%; content: ""; height: 0; width: 0;}
#hw-report h3.impressions::before { border: 8px solid; border-color: transparent;  border-top-color: #d8db67; margin-left: -8px;}
#hw-report h3.impressions::after { border: 6px solid; border-color: transparent; border-top-color: white; margin-left: -6px;}

#hw-report .impressions-list{ display: block; width: 100%; margin: 40px auto 0;}
#hw-report .impressions-list li{ display: block; width: 100%; margin-bottom: 60px;}
#hw-report .hw-report-list li:last-child{ margin-bottom: 0;}
#hw-report .impressions-list li:nth-child(odd){ flex-direction: row;}
#hw-report .impressions-list li:nth-child(even){ flex-direction: row;}
#hw-report .impressions-list li:last-child{ margin-bottom: 0;}
#hw-report .impressions-list li .img{ width: 100%;}
#hw-report .impressions-list li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
#hw-report .impressions-list li .textBox{ position: relative; box-sizing: border-box; margin: 0 auto 15%;}
#hw-report .impressions-list > li:nth-child(odd) .textBox{ width: 100%; padding: 8%; background: #fdf9f4; border-radius: 7%;}
#hw-report .impressions-list > li:nth-child(odd) .textBox::after{ content: url(../images/hellowoods/concept/bg-impressions-stick.png); width: 5%; position: absolute; left: 5%; bottom: -13%;}
#hw-report .impressions-list > li:nth-child(even) .textBox{ width: 100%; padding: 8%; background: #fdf9f4; border-radius: 7%;}
#hw-report .impressions-list > li:nth-child(even) .textBox::after{ content: url(../images/hellowoods/concept/bg-impressions-stick.png); transform: scale( -1, 1 ); width: 5%; position: absolute; right: 5%; bottom: -13%;}
#hw-report .impressions-list li .textBox p{ font-size: 12px; color: #333; line-height: 2; font-weight: normal; position: inherit; z-index: 99;}
#hw-report .impressions-list li .textBox p.name{ text-align: right; margin: 5% 0 0;}
#hw-report .impressions-list li .textBox p span{ color: #009245;}
#hw-report .impressions-list li .textBox p.leaf{ z-index: 1;}

#hw-report .impressions-list li .textBox p.leaf.l-t{ position: absolute; left: -5%; top: -10%; width: 12vw;}
#hw-report .impressions-list li .textBox p.leaf.r-t{ position: absolute; right: -5%; top: -10%; width: 12vw;}
    
#hw-report .impressions-list li:nth-child(odd) .textBox::before{content: ""; background: url("../images/hellowoods/concept/leaf02-01.png") no-repeat 0 0; background-size: auto 100%; width: 12vw; height: 20.5vw;  z-index: 1; position: absolute; left: -5%; top: -10%;}
#hw-report .impressions-list li:nth-child(even) .textBox::before{ content: ""; background: url("../images/hellowoods/concept/leaf02-02.png") no-repeat 0 0; background-size: auto 100%;; width: 12vw; height: 23.3333333333vw; z-index: 1; position: absolute; right: -5%; top: -10%; }
    
#hw-report .wrapReport{ margin: 100px auto 0;}
#hw-report .wrapReport:first-of-type{ margin-top: 40px;}
#hw-report .wrapReport:first-of-type .reportTtlBox:first-child{ margin-top: 0;}
#hw-report .reportTtlBox{ margin: 60px auto 30px; box-sizing: border-box; padding: 25px 15px; background: #eff9f3;}
#hw-report .reportTtl{ margin: 0 auto 20px; text-align: center;}
#hw-report .reportTtl span{ background: -webkit-gradient(linear, left top, right top, from(#027cc3), to(#09a046)); background: linear-gradient(to right, #027cc3 0%, #09a046 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-size: 16px;}
#hw-report .reportTtlBox p{ font-size: 13px;}

#hw-report .youtube{ width: 100%; margin: 30px auto;}
#hw-report .innerYoutube{ width: 100%; padding-top: 56.25%; position: relative;}
#hw-report .innerYoutube iframe{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0;}
    
.honda-contribution{ background: none; min-height: 0px; box-sizing: border-box; padding: 0; margin: 80px 0 0;} 
.honda-contribution .honda-contribution-img{ display: block; width: 100%; margin-bottom: 15px;}
.honda-contribution .l-container{ width: auto; padding: 0; display: block; }
.honda-contribution .l-container .honda-contribution-text{ width: 100%;}
.honda-contribution .l-container .honda-contribution-text h3{ margin: 0 auto 15px;}
.honda-contribution .l-container .honda-contribution-text span{ font-size: 12px; line-height: 2; margin-bottom: 20px;}
    
#hw-report .leaseImg{ width: 80VW; margin: 80px auto 0;}
#hw-report .leaseImg ul{ display: block; justify-content: space-between; flex-wrap: wrap;}
#hw-report .leaseImg li{ width: auto; margin-bottom: 10%;}
#hw-report .leaseImg li:last-child{ margin-bottom: 0;}
    
    
/*------------------------------------------------

COMMON

------------------------------------------------*/

#page-top{ display:none; position:fixed; z-index:200; width: 10vw; bottom: 3vw; right: 3vw;}
#page-top .totopBtn{ margin:0; padding:0; width: 100%;}
#page-top .totopBtn a{ display: block;}
#page-top .totopBtn img{ width: 100%;}
#move-page-top{ text-decoration:none; display:block; cursor:pointer; transition: opacity 0.5s;}
}