@charset "utf-8";

@media all and (min-width:1025px) {
.main_pc_only{display: block!important;}
.main_sp_only{display: none!important;}}
@media all and (max-width: 1024px) {
.main_pc_only{display: none!important;}
.main_sp_only{display: block!important;}}

@media all and (min-width: 768px) and (max-width: 1024px) {
.main_tb_only{display: block!important;}}

@media all and (max-width: 768px){
.main_tb_only{display: none!important;}}

#main {position: relative; background-image: url("../tree/images/header_bg.jpg");background-size:cover;margin-top: -223px;padding-bottom: 16%; border-bottom: solid 15px #8acd81;}
/*@media all and (min-width: 769px) and (max-width: 1025px){
#main {margin-top: 0;}
}*/
#main .header_bg{position:absolute;width: 100%;top: 0px; left: 0px;}
@media all and (max-width: 1024px) {
#main {position: relative; background-image: url("../tree/images/header_bg_sp.jpg");background-size:cover;margin-top: 0;padding-bottom: 23%;border-bottom: solid 8px #8acd81;}
}

#contents{width: 1600px; margin-left: auto; margin-right: auto;}
#contents a{color: #3cab35; text-decoration: none;}
#contents a:hover{color: #3cab35; text-decoration: underline;}
.pan{margin-top: 30px; margin-bottom: 30px;letter-spacing: 0.05em; font-weight: 900;color: #666;}
h2{font-size: 30px; color: #3cab35; padding-bottom: 7px; margin-bottom: 33px; font-weight: 900; border-bottom: 3px #9dd594 solid;letter-spacing: 0.1em;}

#goods{display:flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;}
#goods img{display: block;width: 365px;transition:0.3s;}
#goods img:hover{opacity: 0.8;-webkit-filter: drop-shadow(0px 3px 16px rgba(0,0,0,.5));filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
.good{text-align: center;letter-spacing: 0.05em;margin-bottom: 2em;}
#goods h3{font-size: 28px;font-weight: bold;margin-top: 14px; margin-bottom: 8px;}
#goods p{font-size: 18px;font-weight: bold;opacity: 0.6;}

@media all and (min-width: 1200px) and (max-width: 1599px){
#contents{width: 1200px;}
#goods img{display: block;width: 272px;}
#goods h3{font-size: 24px;}
#goods p{font-size: 14px;}
}

@media all and (min-width: 1024px) and (max-width: 1199px){
#contents{width: 1024px;}
#goods img{display: block;width: 233px;}
#goods h3{font-size: 20px;}
#goods p{font-size: 14px;}
}

@media all and (min-width: 769px) and (max-width: 1023px){
#contents{width: 769px;}
#goods img{display: block;width: 233px;}
#goods h3{font-size: 20px;}
#goods p{font-size: 14px;}
}

@media all and (min-width: 520px) and (max-width: 768px){
#contents{width: 500px;}
#goods img{display: block;width: 230px;}
#goods h3{font-size: 20px;}
#goods p{font-size: 14px;}
}

@media all and (max-width: 519px){
#contents{width: 320px;}
.pan{margin-top: 20px; margin-bottom: 20px;font-size: 12px;}
h2{font-size: 24px;padding-bottom: 8px;}
#goods img{display: block;width: 150px;}
#goods h3{font-size: 14px;}
#goods p{font-size: 12px;}
}

.left{float: left;width: 748px}
*, *:before, *:after {-webkit-box-sizing: border-box;box-sizing: border-box;}
.slider {width: 748px;position: relative;text-align: center;}
.slider > img {position: absolute;left: 0;top: 0;transition: all 0.5s;}
.slider input[name='cp_switch'] {display: none;}
.slider label {margin: 766px 5px 0 5px;border: 5px solid #8acd81;display: inline-block;cursor: pointer;transition: all 0.5s ease;}
.slider label:hover {opacity: 0.9;}
.slider label img {display: block;width: 120px;}
.slider input[name='cp_switch']:checked + label {border: 5px solid #FF7043;opacity: 1;}
.slider input[name='cp_switch'] ~ img {opacity: 0; width: 748px;}
.slider input[name='cp_switch']:checked + label + img {opacity: 1;}

.right{float: right;width: 800px;}
h3.title{font-size: 30px; color: #3cab35; padding-bottom: 7px; margin-bottom: 13px; font-weight: 900; border-bottom: 3px #9dd594 solid;letter-spacing: 0.1em;}

.right .caption{font-size: 24px; font-weight: bold;}
.caption span{background: linear-gradient(transparent 70%, #8acd81 70%);font-weight: bold;}
.right p{font-size: 16px; line-height: 180%;letter-spacing: 0.05em;}
.right .note{font-size: 14px; margin-top:0.8em;  margin-bottom: 0.5em;}

h3.online{background-image:url("../tree/images/icon_s.png");background-repeat: no-repeat; padding-right: 30px; font-size: 22px; font-weight: bold;color: #ff2430;padding-left: 43px;line-height: 2em;margin-top: 22px;margin-bottom: 0.3em;}
.o_banner img{margin-right: 10px;transition:0.3s;}
.o_banner img:hover{opacity: 0.7;}

h3.subtitle_t{background-image:url("../tree/images/icon_t.png");background-repeat: no-repeat; padding-right: 30px; font-size: 22px; font-weight: bold;color: #3cab35;padding-left: 43px;line-height: 2em;margin-top: 22px;margin-bottom: 0.3em;}

h3.subtitle_ca{background-image:url("../tree/images/icon_ca.png");background-repeat: no-repeat; padding-right: 30px; font-size: 22px; font-weight: bold;color: #3cab35;padding-left: 43px;line-height: 2em;margin-top: -27px;margin-bottom: 0.3em;}
.link img{display: block;width: 100%;transition:0.3s;}
.link img:hover{opacity: 0.7;}

#goods_2{display:flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;}
#goods_2 img{display: block;width: 185px;transition:0.3s;}
#goods_2 img:hover{opacity: 0.8;-webkit-filter: drop-shadow(0px 3px 16px rgba(0,0,0,.5));filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
#goods_2 h3{font-size: 18px;font-weight: bold;margin-top: 14px; margin-bottom: 2px;}
#goods_2 p{font-size: 12px;font-weight: bold;opacity: 0.6;}

.clear{clear: both;}

@media all and (min-width: 1200px) and (max-width: 1599px){
.left{float: left;width: 560px}
.slider {width: 560px;}
.slider input[name='cp_switch'] ~ img {width: 560px;}
.slider label {margin: 575px 5px 0 5px;}
.slider label img {width: 88px;}
.slider label {border:4px solid #8acd81;}
.slider input[name='cp_switch']:checked + label {border: 4px solid #FF7043;}
.right{float: right;width: 590px;}
h3.title{font-size: 26px;letter-spacing: 0.05em;}
.o_banner img{width: 46%;}
#goods_2 img{width: 135px;}
#goods_2 h3{font-size: 16px;}
}

@media all and (min-width: 1024px) and (max-width: 1199px){
.left{float: left;width: 480px}
.slider {width: 460px;}
.slider input[name='cp_switch'] ~ img {width: 480px;}
.slider label {margin: 492px 5px 0 5px;}
.slider label img {width: 68px;}
.slider label {border:3px solid #8acd81;}
.slider input[name='cp_switch']:checked + label {border: 3px solid #FF7043;}
.right{float: right;width: 500px;}
h3.title{font-size: 23px;}
.right .note{font-size: 13px;}
.o_banner img{width: 46%;}
#goods_2 img{width: 110px;}
#goods_2 h3{font-size: 14px;letter-spacing:0;margin-top: 7px;margin-bottom: 0;}
.link{margin-bottom: 1em;}
}

@media all and (min-width: 769px) and (max-width: 1023px){
.left{float: none; width: 100%;margin-top: 55px;}
.slider {width: 100%;}
.slider input[name='cp_switch'] ~ img {width: 100%;margin-top: 56px;}
.slider label {margin: 787px 5px 25px 5px;}
.slider label img {width: 106px;}
.slider label {border:4px solid #8acd81;}
.slider input[name='cp_switch']:checked + label {border: 4px solid #FF7043;}
.right{float: none; width: 100%;}
.right .caption{font-size: 32px;}
h3.title{font-size: 32px;text-align: left;margin-top: -29px;}
.right .note{font-size: 14px;}
.o_banner img{width: 48%;}
#goods_2 img{width: 175px;}
#goods_2 img:hover{opacity: 0.8;-webkit-filter: drop-shadow(0px 3px 16px rgba(0,0,0,.5));filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
#goods_2 h3{font-size: 16px;letter-spacing:0;margin-top: 7px;margin-bottom: 0;}
.link{margin-bottom: 3em;}
}

@media all and (min-width: 520px) and (max-width: 768px){
.pan{font-size: 12px;}
.left{float: none; width: 100%;margin-top: 55px;}
.slider {width: 100%;}
.slider input[name='cp_switch'] ~ img {width: 100%;margin-top: 56px;}
.slider label {margin: 522px 5px 25px 5px;}
.slider label img {width: 79px;}
.slider label {border:3px solid #8acd81;}
.slider input[name='cp_switch']:checked + label {border: 3px solid #FF7043;}
.right{float: none; width: 100%;}
.right .caption{font-size: 28px;}
h3.title{font-size: 23px;text-align: left;margin-top: -29px;}
.right .note{font-size: 14px;}
.o_banner img{width: 46%;}
#goods_2 img{width: 109px;}
#goods_2 img:hover{opacity: 0.8;-webkit-filter: drop-shadow(0px 3px 16px rgba(0,0,0,.5));filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
#goods_2 h3{font-size: 13px;letter-spacing:0;margin-top: 7px;margin-bottom: 0;}
.link{margin-bottom: 3em;}
}

@media all and (max-width: 519px){
.pan{font-size: 12px; letter-spacing: 0;}
.left{float: none; width: 100%;margin-top: 40px;}
.slider {width: 100%;}
.slider input[name='cp_switch'] ~ img {width: 100%;margin-top: 35px;}
.slider label {margin: 326px 5px 25px 5px;}
.slider label img {width: 41px;}
.slider label {border:3px solid #8acd81;}
.slider input[name='cp_switch']:checked + label {border: 3px solid #FF7043;}
.right{float: none; width: 100%;}
.right .caption{font-size: 19px;}
h3.title{font-size: 17px;text-align: left;margin-top: -16px;letter-spacing: 0;}
h3.subtitle_t{line-height: 1em;}
.right .note{font-size: 14px;}
.o_banner img{width: 49%;}
.o_banner img{margin-right: 0;}
#goods_2 img{width: 142px;}
#goods_2 img:hover{opacity: 0.8;-webkit-filter: drop-shadow(0px 3px 16px rgba(0,0,0,.5));filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}
#goods_2 h3{font-size: 13px;letter-spacing:0;margin-top: 7px;margin-bottom: 0;}
#goods_2 .good{margin-bottom: 1em;}
.link{margin-bottom: 3em;}
h3.subtitle_ca {margin-top:-8px}
}


.pagenavi{font-size: 1.5em; text-align: center;margin-bottom: 2em;}
/*.pagenavi a{background-color: #3cab35;}*/
.pagenavi span{padding: 2px 10px;margin: 0 4px; background-color:#3cab35;color: #fff;font-weight: bold;}
.current{background-color:#fff!important;color: #3cab35!important;border: 2px solid #3cab35;}
.pagenavi i{margin: 0 0.5em;}
.non{color:#fffff4;}

.mini{font-size: 80%;font-weight: 900;}
.yl{color: #fff450;font-weight: 900;}