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

wildlife

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

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

.header-totop{ max-width: 1020px; margin: 0 auto; text-align: left;}
.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;}

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

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

.wildlifeBtn{  max-width: 1020px; margin: 65px auto 0; display: flex; flex-wrap: wrap; justify-content: center;}
.wildlifeBtn > li{ width: 184px; height: 80px; margin: 25px 25px 0 0;}
.wildlifeBtn > li:nth-child(-n+5){ margin-top: 0;}
.wildlifeBtn > li:nth-child(5n),
.wildlifeBtn > li:last-child{ margin-right: 0;}
.wildlifeBtn li.encounter { background: url("../images/hellowoods/wildlife/btn-pc01.png");}
.wildlifeBtn li.ammals { background: url("../images/hellowoods/wildlife/btn-pc02.png")}
.wildlifeBtn li.wild-bird { background: url("../images/hellowoods/wildlife/btn-pc03.png")}
.wildlifeBtn li.insect { background: url("../images/hellowoods/wildlife/btn-pc04.png")}
.wildlifeBtn li.reptiles { background: url("../images/hellowoods/wildlife/btn-pc05.png")}
.wildlifeBtn li.amphibian { background: url("../images/hellowoods/wildlife/btn-pc06.png")}
.wildlifeBtn li.trees { background: url("../images/hellowoods/wildlife/btn-pc07.png")}
.wildlifeBtn li.flower { background: url("../images/hellowoods/wildlife/btn-pc08.png")}
.wildlifeBtn li.mushroom { background: url("../images/hellowoods/wildlife/btn-pc09.png")}
.wildlifeBtn > li a.encounter{ position: relative; font-size: 18px; font-weight: bold; display: block; transition: opacity 0.7s; color: #000;
text-align: center; padding-top: 15px;}
.wildlifeBtn > li a{ position: relative; font-size: 18px; font-weight: bold; display: block; transition: opacity 0.7s; color: #000;
text-align: center; padding-top: 25px;}
.wildlifeBtn > li a .text > span{ display: block; width: 100%; text-align: center;}
.wildlifeBtn > li a .text > span img{ display: block; width: 100%; }

.wildlife-lead-bg{ min-height: 268px; background: url("../images/hellowoods/wildlife/img-wildlife01.png"), url("../images/hellowoods/wildlife/img-wildlife02.png"); background-repeat: no-repeat; background-position: left bottom, right 15px top; background-size: 250px, 190px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20px; width: 1020px; margin: 0 auto; text-align: center; line-height: 2; letter-spacing: 0.08em;}
.wildlife-lead-bg p{ width: 650px; }

.wildlife-list01{ display: flex; flex-wrap: wrap;}
.wildlife-list01 li{ width: 310px; margin: 45px 45px 0 0;}
.wildlife-list01 li:nth-child(-n+3){ margin-top: 0; }
.wildlife-list01 li:nth-child(3n),
.wildlife-list01 li:last-child{ margin-right: 0; }
.wildlife-list01 li .img{ width: 100%; margin-bottom: 20px; display: block; position: relative;}
.wildlife-list01 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/wildlife/frame02.svg") no-repeat center center; background-size: 100% 100%;}
.wildlife-list01 li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
.wildlife-list01 li .text{ text-align: center;}

.wildlife-accordion-box{ margin-top: 45px;}
.wildlife-accordion-box .wildlife-accordion-open-btn{ display: none;}

.wildlife-list02{ display: block; width: 100%; }
.wildlife-list02 li{ display: flex; justify-content: space-between; width: 100%; margin-bottom: 80px;}
.wildlife-list02 li:nth-child(odd){ flex-direction: row;}
.wildlife-list02 li:nth-child(even){ flex-direction: row-reverse;}
.wildlife-list02 li:last-child{ margin-bottom: 0;}
.wildlife-list02 li .img{ width: 420px; position: relative;}
.wildlife-list02 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/wildlife/frame01.svg") no-repeat center center; background-size: 100% 100%;}
.wildlife-list02 li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
.wildlife-list02 li .textBox{ width: 510px;}
.wildlife-list02 li .textBox h3{ font-size: 24px; letter-spacing: 0.11em; margin-bottom: 8px;}
.wildlife-list02 li .textBox h3 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;}
.wildlife-list02 li .textBox .text{ font-size: 15px;}

.wildlife-other-box{ box-sizing: border-box; padding: 50px; margin: 80px auto 0;}
.wildlife-other-box.yellow{ background: #ffffed;}
.wildlife-other-box.green{ background: #f2fef0;}
.wildlife-other-box.blue{ background: #e9fdfd;}
.wildlife-other-box .wildlife-other-ttl{ display: flex; flex-direction: row; margin-bottom: 20px;}
.wildlife-other-box h3{ font-size: 24px; letter-spacing: 0.11em; display: inline-block;}
.wildlife-other-box h3 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;}
.wildlife-other-box .kind{ display: inline-block; }
.wildlife-other-box .nameText{ margin: 0 auto; font-size: 15px;}

.bnr-center{ margin: 140px auto 0; text-align: center;}
.bnr-center a{ transition: opacity 0.5s;}
.bnr-center a:hover{ transition: opacity 0.5s; opacity: 0.7;}

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

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 not screen and (max-width: 749px) {
main .sp{ display: none !important;}
    
.wildlifeBtn > li a:hover{ opacity: 0.7;}
    
.wildlife-accordion-box .wildlife-accordion-open-box{ display: block!important;}
.wildlife-accordion-box .wildlife-accordion-open-btn{ display: none !important;}
}


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

wildlife

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

.wildlife-mv-heading{ width: 100%; bottom: auto !important; top: -190px; left: 0 !important; padding: 30px 30px 0;}
.wildlife-mv-heading .heading-text { font-size: 23px; -webkit-text-fill-color: #fff; color: #fff; text-align: left;}
.wildlife-mv-heading .heading-subtext{ width: 100%; max-width: 100%; height: 55px; margin: 20px 0 0; fill: #fff;}
.wildlife-mv-heading .heading-subtext svg use{ width: 100%; height: 100%;}
    
.wildlifeBtn{  width: 100%; box-sizing: border-box; margin: 30px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;}
.wildlifeBtn > li{ width: calc(50% - 10px); margin: 20px 0 0; height: calc(50% - 10px); }
.wildlifeBtn > li:first-child{ width: 100%;}
.wildlifeBtn > li:nth-child(-n+5){ margin-top: 20px;}
.wildlifeBtn > li:nth-child(5n){ margin-right: 0;}
.wildlifeBtn > li:nth-child(1){ margin-top: 0;}
.wildlifeBtn li.encounter { background: url("../images/hellowoods/wildlife/btn-sp01.png");}
.wildlifeBtn li.ammals { background: url("../images/hellowoods/wildlife/btn-sp02.png")}
.wildlifeBtn li.wild-bird { background: url("../images/hellowoods/wildlife/btn-sp03.png")}
.wildlifeBtn li.insect { background: url("../images/hellowoods/wildlife/btn-sp04.png")}
.wildlifeBtn li.reptiles { background: url("../images/hellowoods/wildlife/btn-sp05.png")}
.wildlifeBtn li.amphibian { background: url("../images/hellowoods/wildlife/btn-sp06.png")}
.wildlifeBtn li.trees { background: url("../images/hellowoods/wildlife/btn-sp07.png")}
.wildlifeBtn li.flower { background: url("../images/hellowoods/wildlife/btn-sp08.png")}
.wildlifeBtn li.mushroom { background: url("../images/hellowoods/wildlife/btn-sp09.png")}
.wildlifeBtn > li a.encounter { position: relative; font-size: 14px; font-weight: bold; display: block; color: #000; text-align: center; padding: 10px 0;}
.wildlifeBtn > li a{ position: relative; font-size: 14px; font-weight: bold; display: block; color: #000; text-align: center; padding: 10px 0;}
.wildlifeBtn > li a .text{ align-items: center; color: #333333;}
.wildlifeBtn > li a .text > span{ display: block; width: 100%; text-align: center;}

.wildlife-container01{ padding: 50px 0 0;}
.wildlife-container01 .l-container{ padding: 0 30px; max-width: 1020px;}
.wildlife-container01 .heading-subtext{ height: auto;}
.wildlife-container01 .subpage-banner{ width: 100%; left: 0;}
.wildlife-container01 .l-container p{ line-height: 2; font-size: 12px;}
.wildlife-container01:first-child{ padding-bottom: 30px;}
   
#wildlife-lead{ padding: 50px 0 0; margin-top: -50px;}
.wildlife-lead-bg{ min-height: 8em; background: url("../images/hellowoods/wildlife/img-wildlife01.png"), url("../images/hellowoods/wildlife/img-wildlife02.png"); background-repeat: no-repeat; background-position: left bottom, right top; background-size: 24.242424242424242%, 24.24242424242%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; width: 100%; margin: 0 auto; text-align: center; line-height: 2; letter-spacing: 0.08em;}
	
.wildlife-lead-bg{ width:100%;}
    
.wildlife-list01{ display: flex; flex-wrap: wrap;}
.wildlife-list01 li{ width: calc(50% - 10px); margin: 20px 20px 0 0;}
.wildlife-list01 li:nth-child(-n+3){ margin-top: 20px; }
.wildlife-list01 li:nth-child(3n){ margin-right: 20px; }
.wildlife-list01 li:nth-child(-n+2){ margin-top: 0; }
.wildlife-list01 li:nth-child(even){ margin-right: 0; }
.wildlife-list01 li:last-child{ margin-right: 0; }
.wildlife-list01 li .img{ width: 100%; margin-bottom: 15px; position: relative;}
.wildlife-list01 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/wildlife/frame02.svg") no-repeat center center; background-size: 100% 100%;}
.wildlife-list01 li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
.wildlife-list01 li .text{ text-align: center;}
    
.wildlife-accordion-box{ margin-top: 20px;}
.wildlife-accordion-box .wildlife-accordion-open-box{ display: none;}
.wildlife-accordion-box .wildlife-accordion-open-btn{ display: block; text-align: center; margin-top: 20px;}
.wildlife-accordion-box .wildlife-accordion-open-btn .inner01{ display: inline-block; padding-right: 20px; position: relative;}
.wildlife-accordion-box .wildlife-accordion-open-btn .inner01::after{ content: ""; display: block; width: 10px; height: 10px; border-top: 1px solid #5cb995; border-right: 1px solid #5cb995; transform: rotate(135deg); position: absolute; right: 0; top: calc(50% - 7px)}
.wildlife-accordion-box .wildlife-accordion-open-btn.active .inner01::after{ transform: rotate(-45deg); top: calc(50% - 3px)}
    
.wildlife-list02{ display: block; width: 100%; }
.wildlife-list02 li{ display: block; width: 100%; margin-bottom: 40px;}
.wildlife-list02 li:nth-child(odd){ flex-direction: row;}
.wildlife-list02 li:nth-child(even){ flex-direction: row-reverse;}
.wildlife-list02 li:last-child{ margin-bottom: 0;}
.wildlife-list02 li .img{ width: 100%; margin-bottom: 30px; position: relative;}
.wildlife-list02 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/wildlife/frame01.svg") no-repeat center center; background-size: 100% 100%;}
.wildlife-list02 li .img img{ display: block; width: 100%; position: relative; z-index: 1;}
.wildlife-list02 li .textBox{ width: 100%;}
.wildlife-list02 li .textBox h3{ font-size: 13px; letter-spacing: 0.11em; margin-bottom: 8px;}
.wildlife-list02 li .textBox h3 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;}
.wildlife-list02 li .textBox .text{ font-size: 12px;}
    
.wildlife-other-box{ box-sizing: border-box; padding: 30px; margin: 40px auto 0;}
.wildlife-other-box.yellow{ background: #ffffed;}
.wildlife-other-box.green{ background: #f2fef0;}
.wildlife-other-box.blue{ background: #e9fdfd;}
.wildlife-other-box .wildlife-other-ttl{ display: flex; flex-direction: row; margin-bottom: 15px;}
.wildlife-other-box h3{ font-size: 13px; letter-spacing: 0.11em; display: inline-block;}
.wildlife-other-box h3 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;}
.wildlife-other-box .kind{ display: inline-block; }
.wildlife-other-box .nameText{ margin: 0 auto; font-size: 12px;}

.bnr-center{ margin: 50px auto 0; text-align: center;}
    
/*------------------------------------------------

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;}
}