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

main {
  background:
  url(/story/ehon/feature/images/ecological_survey/2025/bg-btm.webp) repeat-x bottom 0 center,
   linear-gradient(180deg,
      #CEB965 0,
      #CEB965 102px,
      #768DAD 102px,
      #768DAD 100%);
      height: 100%;
  background-size: auto 294px, auto;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .1em;
  overflow-x:hidden;
}

article {
    color: #FFF;
    padding:0 15px 300px;
}


@media screen and (max-width:768px) {
main {
  background:
  url(/story/ehon/feature/images/ecological_survey/2025/bg-btm-sp.webp) no-repeat bottom 0 center,
  linear-gradient(180deg,
      #CEB965 0,
      #CEB965 calc((56 / 375) * 100vw),
      #768DAD calc((56 / 375) * 100vw),
      #768DAD 100%);
      height: 100%;
  background-size: contain, auto;
}
article {
    color: #FFF;
    padding:0 0 calc((120 / 375) * 100vw);
}
}


/* lead */
.bl-ttl{
  max-width: 1126px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.ttl-01{
  width: 676px;
  height: auto;
  margin-top: 52px;
}
.ttl-02{
  width: 368.45px;
  height: auto;
  margin-top: 48px;
}

.bl-lead{
  max-width: 1067px;
  margin: 80px auto;
  padding: 20px;
  border: 1px solid #fff;
  position: relative;
}
.lead--ttl{
  padding: 10px 0 24px 16px;
  margin-bottom:16px;
  border-bottom: 1px solid #fff;
  position: relative;
}
.lead--ttl img{
  width: auto;
  height: 38px;
}
.lead--txt{
  font-size: 2rem;
  position: relative;
  z-index: 1;
}

.lead--ttl::after {
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/sub-ttl-check.png) no-repeat center / contain;
  width: 38px;
  height: 48px;
  position: absolute;
  top: 0;
  right: 20px;
}
.bl-lead::after{
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-lead-01.webp) no-repeat center / contain;
  width: 190px;
  height: 253px;
  position: absolute;
 bottom: -128px;
  right: -80px;
  z-index: 0;
}

@media screen and (max-width:768px) {
.bl-ttl{
  width: 100%;
  display: block;
  padding: calc((15 / 375) * 100vw);
  position: relative;
}
.ttl-01{
  width: calc((310 / 375) * 100vw);
  margin-top: calc((17 / 375) * 100vw);
}
.ttl-02{
  width: calc((110 / 375) * 100vw);
  height: auto;
  position: absolute;
  right: calc((6 / 375) * 100vw);
  top: calc((22 / 375) * 100vw);
  margin-top: inherit;
}

.bl-lead{
  width: calc((345 / 375) * 100vw);
  margin: calc((36 / 375) * 100vw) auto calc((40 / 375) * 100vw);
  padding: calc((18 / 375) * 100vw);
}
.lead--ttl{
  padding: 0 0 calc((12 / 375) * 100vw) 0; 
  margin-bottom:calc((12 / 375) * 100vw);
}
.lead--ttl img{
  height: calc((20 / 375) * 100vw);
}
.lead--txt{
  font-size: calc((16 / 375) * 100vw);
}

.lead--ttl::after {
  width: calc((32 / 375) * 100vw);
  height: calc((34 / 375) * 100vw);
  top: calc((-9 / 375) * 100vw);;
  right: 0;
}
.bl-lead::after{
  width: calc((133 / 375) * 100vw);;
  height: calc((176 / 375) * 100vw);
 bottom: calc((-30 / 375) * 100vw);
right: calc((-10 / 375) * 100vw);
}

}


/* report */
.bl-report{
 max-width: 1098px;
  margin: 0 auto;
}
.bl-report + .bl-report{
  margin-top: 80px;
}
.report-box + .report-box{
margin-top: 48px;
}
.report-ttl{
  width: auto;
  height: 50px;
  margin-bottom: 32px;
}
.report-flexbox{
  display: flex;
  align-items: flex-start;
}

.report-flexitem--info{
flex: 0 0 322px;
}

.report-flexitem--info .--ttl{
margin-bottom: 50px;
position: relative;
}
.report-flexitem--info .--ttl img {
  width: auto;
  height: 28px;
}
.report-flexitem--info .--ttl::after {
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/baloon-01.svg) no-repeat center / contain;
  width: 206px;
  height: 43px;
  position: absolute;
  bottom:-40px;
}

.uheroArea .report-flexitem--info > .--ttl{
text-align: right;
padding-right: 16px;
}
.uheroArea .report-flexitem--info .--ttl::after {
  right: 0;
}

.report--txtbox{
font-size: 2rem;
line-height: 1.9;
border: 1px solid #fff;
padding: 20px;
position: relative;
z-index: 1;
}
.uherofaunaArea .report-flexbox {
  align-items: center;
}
.uherofaunaArea h2{
text-align: right;
}

.uherofaunaArea .report-flexitem--info > .--ttl{
text-align: left;
padding-left: 16px;
}
.uherofaunaArea .report-flexitem--info .--ttl::after {
  left: 0;
  transform: scale(-1, 1);
}


.report-uhero{
  position: relative;
  z-index: 1;
  background:
    url(/story/ehon/feature/images/ecological_survey/2025/deco-starbar.png) repeat-x center top / auto 184px,
    url(/story/ehon/feature/images/ecological_survey/2025/deco-starbar.png) repeat-x center bottom / contain;
  background-size: auto 184px; 
  padding-bottom: 80px;
}


@media screen and (min-width:769px) {
.report-uhero::after {
  content: '';
  background:
    url(/story/ehon/feature/images/ecological_survey/2025/bg-report-uhero.webp) no-repeat center / contain;
  width: 1119px;
  height: 1099px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  z-index: 0;
}
}

@media screen and ( max-width:1024px){
.report-uhero::after {
  width: 90%;
  height: 90%;
}
}


@media screen and (max-width:768px) {
.bl-report{
  width:100%;
}
.bl-report + .bl-report{
  margin-top: 80px;
}
.report-ttl{
  height: calc((30 / 375) * 100vw);
  margin-bottom: calc((32 / 375) * 100vw);
  margin-left: calc((20 / 375) * 100vw);
}
.report-flexbox{
flex-direction: column;
  align-items: flex-start;
}
.report-flexitem--img{
margin-bottom: 7vw;
}
.report-flexitem--info{
flex: 0 0 auto;
padding:calc((15 / 375) * 100vw);
}
.report-flexitem--info .--ttl{
margin-bottom: calc((35 / 375) * 100vw);
position: relative;
}
.report-flexitem--info .--ttl img {
  height: calc((22 / 375) * 100vw);
}
.report-flexitem--info .--ttl::after {
  width: calc((141 / 375) * 100vw);
  height: calc((29/ 375) * 100vw);
  bottom:calc((-24/ 375) * 100vw);
}
.uheroArea .report-flexitem--info > .--ttl{
padding-right: calc((4/ 375) * 100vw);
}
.report--txtbox{
font-size: calc((16/ 375) * 100vw);
line-height: 1.68;
padding: calc((20/ 375) * 100vw);
}
.uherofaunaArea .report-flexbox {
flex-direction:column-reverse;
}
.uherofaunaArea h2{
text-align:left;
}
.uherofaunaArea .report-flexitem--info > .--ttl{
padding-left: calc((4/ 375) * 100vw);
}
.report-uhero{
  background:url(/story/ehon/feature/images/ecological_survey/2025/deco-starbar.png) repeat-x center top / auto calc((57/ 375) * 100vw),
  url(/story/ehon/feature/images/ecological_survey/2025/deco-starbar.png) repeat-x center bottom / contain;
  ;
  background-size: auto calc((57/ 375) * 100vw); 
  padding-top: calc((80/ 375) * 100vw);
  padding-bottom: calc((57/ 375) * 100vw);
}

.uheroArea::after {
  content: '';
  background:
    url(/story/ehon/feature/images/ecological_survey/2025/bg-report-uhero-sp.webp) no-repeat left center / contain;
  width: 100%;
  height: 100%;
  background-size: 222% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48%, -52%);
  z-index: 0;
}

.uherofaunaArea::after {
  content: '';
  background:
    url(/story/ehon/feature/images/ecological_survey/2025/bg-report-uhero-sp.webp) no-repeat right 10px center / contain;
  width: 100%;
  height: 100%;
  background-size: 222% 100%;
  position: absolute;
  top: 50%;
left: 50%;
  transform: translate(-52%, -50%);
  z-index: 0;
}
}

.report-gender h2,.report-location h2,.report-style h2{
  text-align: center;
}
.report-gender .report-item--img{
width: 714px;
height: auto;
margin: 0 auto;
}
.report-gender .report--txtbox{
width: 699px;
margin: 30px 138px 0 auto;
}
.report-gender .report--txtbox::before{
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-gender-02.png) no-repeat center / contain;
  width:414px;
  height: 449px;
  position: absolute;
  top:-214px; 
  left: -368px;
  z-index: 0;
}
/* .report-gender .report--txtbox::before{
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-gender-02.webp) no-repeat center / contain;
  width:414px;
  height: 449px;
  position: absolute;
  top:-214px; 
  left: -368px;
  z-index: 0;
} */

.report-gender .report--txtbox::after{
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-gender-01.webp) no-repeat center / contain;
  width: 73px;
  height: 86px;
  position: absolute;
  bottom:0; 
  right: -90px;
}

.bl-deco{
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-starbar.png) repeat-x center / contain;
  width: 100%;
  height: 150px;
  margin-top: 40px;
}


.report-location{
  margin-top: 48px;
}

.report-box{
  position: relative;
  z-index: 10;
}
.report-location .report-box > .report-item--img{
  width: 908px;
  height: auto;
  margin: 0 auto;
}
.report-location .report-box::before{
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-location.png) no-repeat center / contain;
  width:515px;
  height: 520px;
  position: absolute;
  top:20px; 
  left: 60px;
}


.report-style .report-box > .report-item--img{
  width: 711px;
  height: auto;
   margin: 24px auto 0;
   position: relative;
}

.report-style .report-box > .report--txtbox {
  width: 840px;
  margin: 32px auto 0;
}

.report-style .report-box > .report-item--img::before {
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-style-01.png) no-repeat center / contain;
  width: 159px;
  height: 238px;
  position: absolute;
  top:40px; 
  left: -185px;
}
.report-style .report-box > .report-item--img::after {
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-style-02.png) no-repeat center / contain;
  width: 429px;
  height: 319px;
  position: absolute;
  top:40px; 
  right: -300px;
}
.report-style .report-box > .report--txtbox::before {
  content: '';
  background: url(/story/ehon/feature/images/ecological_survey/2025/deco-style-03.png) no-repeat center / contain;
  width: 248px;
  height: 284px;
  position: absolute;
  top:-280px; 
  left: -142px;
}

.bl-creator{
font-size: 2rem;
line-height: 2.2;
font-weight: 300;
text-align: center;
margin: 64px auto 0;
}


@media screen and (max-width:768px) {
.report-gender h2,.report-location h2,.report-style h2{
  text-align: left;
}
.report-gender{
  padding: calc((15 / 375) * 100vw);
}
.report-gender .report-item--img{
width: 100%;
}
.report-gender .report--txtbox{
width: initial;
margin: calc((15 / 375) * 100vw) auto 0;
}

.report-gender .report--txtbox::before{
  width:calc((240 / 375) * 100vw);
  height: calc((260 / 375) * 100vw);
  top: initial;
  bottom:calc((-132 / 375) * 100vw); 
  left: calc((-63 / 375) * 100vw);
  z-index: 0;
}
.report-gender .report--txtbox::after{
  width: calc((73 / 375) * 100vw);
  height: calc((86 / 375) * 100vw);
  position: absolute;
  bottom:calc((-94 / 375) * 100vw);  
  right: calc((12 / 375) * 100vw);  
}

.bl-deco{
  width: 100%;
  height: calc((47 / 375) * 100vw);
  margin-top: calc((120 / 375) * 100vw);
}
.report-location{
  margin-top: calc((16 / 375) * 100vw);
}

.report-location .report-box > .report-item--img{
  width: 98%;
}

.report-location .report-box::before{
  width:calc((211 / 375) * 100vw);
  height: calc((213 / 375) * 100vw);
  position: absolute;
  top:calc((8 / 375) * 100vw);
  left:calc((12 / 375) * 100vw);
}


.report-style{
  padding: calc((15 / 375) * 100vw);
}

.report-style .report-box > .report-item--img{
  width: 90%;
   margin: 24px auto 0;
}

.report-style .report-box > .report--txtbox {
  width: 100%;
  margin: calc((32 / 375) * 100vw) auto 0;
}

.report-style .report-box > .report-item--img::before {
 width: calc((124 / 375) * 100vw);
  height: calc((185 / 375) * 100vw);
  top:initial; 
  bottom: calc((-52 / 375) * 100vw);
  left: calc((-32 / 375) * 100vw);
}
.report-style .report-box > .report-item--img::after {
  width: calc((173 / 375) * 100vw);
  height: calc((129 / 375) * 100vw);
  top:calc((-62 / 375) * 100vw);
  right:calc((-42 / 375) * 100vw);
}
.report-style .report-box > .report--txtbox::before {
  width: calc((183 / 375) * 100vw);
  height:calc((209 / 375) * 100vw);
  top:initial; 
bottom: calc((-148 / 375) * 100vw);
  left:initial; 
right:calc((8 / 375) * 100vw);
}

.bl-creator{
font-size: calc((14 / 375) * 100vw);
 line-height: 1.8;
 letter-spacing: 0.05em;
 margin: calc((180 / 375) * 100vw) auto 0;
}
}