﻿.font_8up{
    font-size: calc(1rem + 16px);
}
@media screen and (min-width: 769px){
    html, body{
        font-size: 18px;
    }
    .font_2dw{
        font-size: 1.0rem;
    }
}
.bg_color3{
    background-color: #00442f;
}
a.linkStyle{
    color: #fefefe;
    text-decoration: underline;
}
#wrap.bg_color3{
    background-color: #FFFFFF;
}
#wrap.underWrap.bg_color3{
    background-color: #00442f;
}
/*header*/
.mainwrap-r{
    margin: 0 0 0 auto;
}
header{
    background-color: rgba(254,254,254,0.23);
    margin: 20px 20px 0 0;
}
header .head_tel {
    border-radius: 0;
    border: none;
    border-top: solid 2px #fefefe;
    max-width: 90%;
    margin: 0 auto;
}
#head_tel_wrap{
    width: 100%;
    justify-content: center;
}
#head_tel_wrap p{
    display: none;
}
#head_tel_wrap a{
    font-size: 16px;
    cursor: default;
}
#head_tel_wrap a.txt_color_nomal{
    color: #fefefe;
}
#head_tel_wrap .head_tel{
    margin-top: 60px;
}
/*sliding-bird*/
#slidingBird{
    top: 20vh;
    left: 800px;
    animation: bird 12.0s linear infinite;
}
@keyframes bird{
    0%{
        left: 1246px;
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    100%{
        left: -1246px;
    }
}
.sliding-bird{
    width: 200px;
    position: absolute;
}
.hane1{
    width: 300px;
	content: url('./Dup/img/hane1.png');
	position: absolute;
    top: -91px;
    left: 17px;
	animation: hane1 0.75s alternate infinite;
}
.hane2{
    width: 111px;
	content: url('./Dup/img/hane2.png');
	position: absolute;
    top: -94px;
    left: 39px;
	animation: hane2 0.75s alternate infinite;
}
@keyframes hane1{
    0%{
        transform: translate(0,0);
    }
    100%{
        transform: rotateY(208deg) rotate(39deg);
        top: -3px;
        left: -121px;
    }
}
@keyframes hane2{
    0%{
        transform: translate(0,0);
    }
    100%{
        transform: rotateY(184deg) rotate(66deg);
        top: -10px;
        left: -43px;
    }
}
@media screen and (max-width:768px){
    #slidingBird{
        display: none;
    }
}
/*FV*/
#customMain.mgt-92{
    margin-top: -92px;
}
.catch{
    bottom: auto;
    top: 35%;
    right: 20%;
}
.catch img{
    display: none;
}
.catch h1{
    color: #fefefe;
    font-size: 60px;
    font-family: 'RocknRoll One', sans-serif;
}
.catch h1 .fontBigger{
    font-size: 72px;
}
.catch_anim{
    opacity: 0;
    transform:translate(100px, -30px);
}
.catch_anim.active{
    opacity:1;
    transform: translate(0,0);
    transition-duration:3.0s;
}
.fixbnr{
    right: 88px;
    z-index: 3;
}
.fixbnr.letter{
    width: 240px;
    right: 46px;
    bottom: 3px;
    z-index: 2;
    animation: rotate 20s infinite linear;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
#customMain{
    width: 100%;
    height: 100.5vh;
    max-height: 1080px;
    background-image: url('./Dup/img/TOP1.jpg');
    background-repeat: no-repeat;
}
#mainwrap{
    padding: 0;
}
@media screen and (max-width: 1025px){
    .catch{
        width: 80%;
        max-width: 520px;       
    }
    .fixbnr{
        bottom: 310px;
        right: 79px;
        width: 120px;
    }
    .fixbnr.letter{
        width: 190px;
        right: 46px;
        bottom: 279px;
    }
}
@media screen and (max-width: 768px){
    .fixbnr {
        display: none;
    }
    .mg_t-50px_tb{
        margin-top: 345px;
    }
    #customMain{
        background-image: url('./Dup/img/spTOP.png');
    }
}
@media screen and (max-width: 668px){
    .catch{
        right: -3%;
    }
}
@media screen and (max-width: 375px){
    #top_news{
        margin-top: 500px;
    }
}
@media screen and (max-width: 331px){
    #top_news{
        margin-top: 570px;
    }
}
/*TOP*/
#top_news{
    padding-top: 96px;
}
#top_contents1{
    background-color: #00442f;
}
#top_contents1 h3,#top_contents1 p{
    color: #fefefe;
}
#top_contents1 p.con_txt::after{
    content:"";
    display: block;
    width: 600px;
    height: 300px;
    background-image:url('./Dup/img/con1illust.png') ;
    background-repeat: no-repeat;
    background-size: cover;
    animation: anim_type1 3s infinite ease-in-out alternate;
}
@keyframes anim_type1 {
	0% {transform:translate(0, 40px) rotate(-7deg);}
	50% {transform:translate(0, 47px) rotate(0deg);}
	100% {transform:translate(0, 40px) rotate(7deg);}
}
@media screen and (max-width: 768px){
    #top_contents1{
        background-color: #2F4449;
    }
    #top_contents1 p.con_txt::after{
        height: 105px;
        width: 211px;
    }
}
@media screen and (max-width: 668px){
    ::-webkit-full-page-media, :future, :root #top_news{
  margin-top: 265px;
}
}
#points{
    background-color: #FFFFFF;
    padding: 100px 0;
}
#points img{
    width:100px;
}
#points .point1,#points .point2{
    max-width: 1280px;
    margin: 0 auto;
}
#points .pointTitle,#points .pointText {
    justify-content: flex-start;
    gap:20px;
}
#points .pointTitle h2{
    font-size: 48px;
    line-height: 4.0rem;
}
#points .pointTitle p{
    font-size: 24px;
}
#points .pointText p{
    font-size: 16px;
    padding: 40px 0 0 20px;
}
#points .fontSmall{
    font-size: 40px;
}
#points .point2{
    margin-top: 40px;
}
#points .eachTree{
    padding: 40px 0 0 20px;
    gap: 20px;
}
#points .eachTree h3{
    padding-left: 20px;
    font-size: 24px;
}
#points .eachTree p{
    font-size: 20px;
}
#points img.TreeIcon{
    width: 270px;
    height: 270px;
    border-radius: 50%;
    object-fit: cover;
}
.point2 br{
    display: none;
}
@media screen and (max-width: 768px){
    #points{
        padding: 100px 20px;
    }
    #points img{
        width: 50px;
    }
    #points .pointTitle p{
        font-size: 18px;
    }
    #points .pointTitle h2{
        font-size: 28px;
        line-height: 2.4rem;
    }
    #points .fontSmall{
        font-size: 24px;
    }
    .point2 br{
        display: block;
    }
}
/*top-cms*/
#top_cms{
    color: #fefefe;
}
/*下層一般*/
.under_page h3,.under_page p,.under_page p.txt_color_nomal{
    color: #fefefe;
}
.under_page p.nav_sub_title{
    color: #232323;
}
/*利用シーン*/
#cms_3-c .cate_title ,#cms_3-c .box_title1,#cms_3-c .box_txt1{
    color: #fefefe;
}
/*木材を用いた事業*/
#cms_2-c .cate_title ,#cms_2-c .cate_txt1, #cms_2-c .box_title1,#cms_2-c .box_txt2{
    color: #fefefe;
}
/*お問い合わせ*/
#page08 h3,#page08  p,#page08  p.txt_color_nomal{
    color: #232323;
}
#page08 .tel_box a{
    cursor: default;
}
/*サイトマップ*/
#page10 .txt_color1{
    color: #fefefe;
}
/*footer*/
#copylight, #footer span, .footer_tel ,.footer_tel .txt_color_nomal,.footer_txt,#foot_nav a{
    color: #fefefe;
}
.footer_tel a{
    cursor: default;
}
@media screen and (max-width: 668px){
    #footer_info .pd_t-50px_tb{
        padding-top: 0;
    }
    .info_txt_wrap{
        margin-bottom: 0;
        padding: 50px 0;
    }
}

/* ---------- loopSlider ---------- */
#topcms_gallery_type1 .loopSliderWrap{
    top: 0;
    left: 0;
    height: 450px;
}
#topcms_gallery_type1 .loopSlider {
    margin: 0 auto;
    height: 450px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul {
    height:450px;
    float: left;
    overflow: hidden;
}
#topcms_gallery_type1 .loopSlider .ul .li {
    width: 450px;
    height: 450px;
    float: left;
    display: inline;
    overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0;
}
#topcms_gallery_type1 .loopSlider .ul .li img{
    border-radius: 0;
}
#topcms_gallery_type1 .loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*リンクボタン*/
#topcms_gallery_type1 .btn{z-index: 3;}
#topcms_gallery_type1 .btn a::before {
    content: '';
    position: absolute;
    bottom: 55px;
    right: 27%;
    width: 42%;
    height: 1px;
    background: #333;
    transition: all .3s;
}
#topcms_gallery_type1 .btn a::after {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 27%;
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}
#topcms_gallery_type1 .btn a:hover::before {
    right: 16%;
    background: #fff;
}
#topcms_gallery_type1 .btn a:hover::after {
    right: 15%;
    background: #fff;
}
#topcms_gallery_type1 .btn {
    display: block;
}
#topcms_gallery_type1 .btn a {
    background: #fff;
    color: #212121;
    width: 200px;
    height: 200px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    flex-wrap: wrap;
    transition: all 0.4s;
}
#topcms_gallery_type1 .btn a:hover {
    background: #00442f; /*#1c1c1c*/
    color: #fff;
}
#topcms_gallery_type1 .btn a span, .btn a strong {
    text-align: center;
}
@media(max-width: 768px) {
#topcms_gallery_type1,#topcms_gallery_type1 .loopSliderWrap,#topcms_gallery_type1 .loopSlider,#topcms_gallery_type1 .loopSlider ul,#topcms_gallery_type1 .loopSlider .ul .li{
	height: 280px;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 280px;
}
#topcms_gallery_type1 {
    padding-bottom: 0;
    padding-top: 0;
}
}
@media(max-width: 667px) {
#topcms_gallery_type1,.loopSliderWrap,.loopSlider,.loopSlider .ul,.loopSlider .ul .li{
	height: 179px!important;
}
#topcms_gallery_type1 .loopSlider .ul .li{
    width: 179px;
}
#topcms_gallery_type1 .btn a::after {
    bottom: 35px;
    right: 27%;
}
#topcms_gallery_type1 .btn a::before {
    bottom: 30px;
    right: 27%;
}
#topcms_gallery_type1 .btn a {
    width: 140px;
    height: 140px;
    line-height: 1.7;
}
}