@charset "utf-8";
/* ------------------------------------------------------------ common */
body { position: relative; }

#fv { position: relative; background: #fcfaf3; padding: 0 0 120px; }
#fv .mainimg { background: url(../images/index/fv.jpg) center center no-repeat; background-size: cover; height: 900px; position: relative; }
#fv .mainimg::before { position: absolute; content: ""; background: url(../images/index/header_bg.png) repeat-x left top; width: 100%; height: 250px; top: 0; left: 0; }
#fv .mainimg .outer { width: 100%; height: 1000px; position: absolute; top: 0; }
#fv .mainimg .inner { text-align: right; }
#fv .mainimg .fv_text { padding: 270px 0 0 0; }
#fv .toabout { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; width: 710px; margin: 0 auto; }
#fv .toabout:hover,
#fv .toabout:hover img { filter:alpha(opacity=100) !important; -moz-opacity: 1 !important; opacity: 1 !important; }

.hidden { overflow: hidden; }
#profile { padding: 150px 0 450px; background: #fcfaf3; position: relative; }
#profile .right { float: right; position: relative; z-index: 2; }
#profile .right h3 { font-size: 18px; color: #07a33e; font-family: 'Cormorant', serif; letter-spacing: 3px; }
#profile .right h4 { font-size: 50px; line-height: 120%; padding: 0 0 50px; background: url(../images/common/basic_green_slash.svg) left 130px no-repeat; background-size: 345px; }
#profile .right p { font-size: 20px; line-height: 220%; }
#profile .right h5 { font-size: 48px; color: #07a33e; font-family: learning-curve, sans-serif; padding: 20px 0 0; }
#profile .right .btn1 { text-align: center; }
#profile .right .btn1 a { font-size: 18px; background: url(../images/common/white_arrow.svg) 94% center no-repeat #07a33e; display: block; border-radius: 15px; color: #fff; padding: 15px 0; }
#profile .right .btn1 a span { display: block; font-size: 26px; line-height: 130%; }
#profile .par_image1 { position: absolute; top: 0; left: 50%; width: 1100px; margin-left: -1050px; transition: .5s; }
#profile .par_image2 { position: absolute; top: 320px; left: 50%; width: 1100px; margin-left: -490px; transition: .5s; }


#herb_slider { position: relative; background: #fcfaf3; }
#herb_slider .topCloud { background: url(../images/index/topCloud.png) center top repeat-x; height: 128px; position: absolute; top: 0; width: 100%; z-index: 1; }
#herb_slider .botCloud { background: url(../images/index/botCloud.png) center bottom repeat-x; height: 72px; position: absolute; bottom: 0; width: 100%; z-index: 1; }
#herb_slider .viewport { max-width: 1600px; margin: 0 auto; overflow: hidden; }
#herb_slider .slideContainer { width: 500vw; margin: 0 auto; }
#herb_slider .slideContainer .slider { width: 100vw; height: auto; max-width: 1600px; float: left; position: relative; }
#herb_slider .slideContainer .slider .slideImg { width: 100%; height: auto; }
#herb_slider .slideContainer .slider .toDet { position: absolute; left: 25%; top: 16%; text-align: right; }
#herb_slider .slideContainer .slider .toDet .dotted { display: inline-block; background: url(../images/index/tenten.png) right center no-repeat; padding: 0 100px 0 0; }
#herb_slider .slideContainer .slider .toDet .icon { display: inline-block; border: 1px solid #207c3d; padding: 15px; border-radius: 50%; background: rgba(255,255,255,0.8); }
#herb_slider .slideContainer .slider .toDet h4 { font-size: 18px; color: #fff; font-family: 'Cormorant', serif; text-align: center; /* background: url(../images/common/basic_white_slash.svg) center bottom no-repeat; background-size: 150px; */ }
#herb_slider .slideContainer .slider .toDet p { display: none; color: #fff; font-size: 20px; text-align: center; padding: 5px 0 0; }
#herb_slider .slick-prev { left: 40px; z-index: 9; }
#herb_slider .slick-next { right: 40px; }
#herb_slider .slick-prev img,
#herb_slider .slick-next img { width: 60px; height: auto; }

#basics { background: url(../images/index/basic_bot.jpg) center bottom repeat-x #fcfaf3; padding: 140px 0 250px; }
#basics h3 { font-size: 18px; color: #07a33e; text-align: center; font-family: 'Cormorant', serif; }
#basics h4 { font-size: 40px; text-align: center; }
#basics p.caut { text-align: center; font-size: 16px; }
#basics ul { padding: 40px 0 0; }
#basics ul li { float: left; width: calc(100% / 3 - 1px); margin: 0 0 0 1px; }
#basics ul li:first-child { margin: 0 auto; }
#basics ul li h5 { font-size: 16px; text-align: center; padding: 30px 0 0; font-family: 'Cormorant', serif; color: #cacaca; }
#basics ul li h5 span { color: #009e3d; }
#basics ul li p { font-size: 24px; text-align: center; background: url(../images/common/basic_arrow.svg) center bottom no-repeat; padding: 0 0 20px; }

#information { padding: 100px 0 120px; }
#information h3 { font-size: 18px; color: #07a33e; text-align: center; font-family: 'Cormorant', serif; }
#information h4 { font-size: 40px; text-align: center; }
#information p.caut { text-align: center; font-size: 16px; }
#information ul { padding: 80px 0 40px; }
#information ul li { text-align: center; }
#information ul li .margin { border: 2px solid #e5e5e5; border-radius: 25px; box-sizing: border-box; padding: 0 0 20px; margin: 0 9px; }
#information ul li a { display: block; }
#information ul li h5 { font-size: 68px; font-family: learning-curve, sans-serif; color: #07a33e; line-height: 100%; margin: -30px 0 0; padding: 0 0 20px; background: url(../images/common/basic_green_slash.svg) center 60px no-repeat; background-size: 200px auto; }
#information ul li p.suben { font-size: 14px; font-family: 'Cormorant', serif; color: #b9bab6; line-height: 20px; letter-spacing: 3px; }
#information ul li p.subjp { font-size: 22px; padding: 5px 20px 20px; line-height: 27px; }
#information ul li img { margin: 0 auto; }
#information .slick-list { padding-top: 30px !important; }
#information ul li .b_btn { text-align: right; padding: 20px 20px 0; }
#information ul li .b_btn img { display: inline; }
#information ul .slick-prev { left: -21px; top: 50%; z-index: 9; }
#information ul .slick-next { right: -21px; top: 50%; z-index: 9; }
@media only screen and (max-width:1100px){
#information ul .slick-prev { left: 0; z-index: 9; }
#information ul .slick-next { right: 30px; z-index: 9; }
}
#information ul .slick-prev img,
#information ul .slick-next img { width: 60px; height: auto; }



@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#fv .mainimg .fv_text { padding: 240px 100px 0 0; }
#fv .mainimg .f_new img.PC { width: 80px; height: auto; }
#fv .mainimg .f_new img.SP { width: 100%; height: auto; }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
#fv .mainimg .fv_text { padding: 240px 100px 0 0; }
#fv .mainimg .f_new img.PC { width: 80px; height: auto; }
#fv .mainimg .f_new img.SP { width: 100%; height: auto; }
}
/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ fv */
#fv { padding: 0 0 50px; }
#fv .mainimg { background: url(../images/index/fv_sp.jpg) center center no-repeat; background-size: cover; width: 94%; margin: 4% auto 0; height: auto; text-align: center; height: 122vw; overflow: hidden; }
#fv .mainimg::before { display: none; }
#fv .mainimg .outer { width: 100%; height: auto; margin: auto; left: 0; right: 0; top: 0; }
#fv .mainimg .inner { text-align: center; }
#fv .mainimg .fv_text { padding: 25% 0 0; width: 82%; height: auto; margin: 0 auto; }

#fv .toabout { width: 94%; }
#fv .toabout img { max-width: 100%; height: auto; }

#profile { padding: 0 0 90px; }
#profile .inner { width: 100%; }
#profile .right { float: none; margin: 0 auto; padding: 0; }
#profile .right h3 { text-align: center; font-size: 4vw; padding: 30px 0 5px; }
#profile .right h4 { font-size: 7vw; line-height: 140%; text-align: center; background: url(../images/common/basic_green_slash.svg) center bottom no-repeat; background-size: 200px auto; padding: 0 0 20px; margin: 0 auto 30px; }
#profile .right p { font-size: 14px; line-height: 170%; width: 90%; margin: 0 auto 30px; }
#profile .right h5 { font-size: 30px; text-align: center; }
#profile .right .btn1 { width: 90%; margin: 0 auto; }
#profile .right .btn1 a { font-size: 14px; background-size: 30px auto; }
#profile .right .btn1 a span { font-size: 16px; }
#profile .par_image1, #profile .par_image2 { display: none; }
#profile .bg_pic { width: 100%; height: auto; }
#profile .bg_pic:nth-of-type(2) { margin: -30% auto 0; }

#basics { padding: 0 0 80px; }
#basics h3 { font-size: 4vw; letter-spacing: 2px; }
#basics h4 { font-size: 7vw; line-height: 140%; }
#basics p.caut { font-size: 14px; padding: 20px 0 0; }
#basics ul li { float: none; width: 100%; margin: 0; padding: 0 0 50px; }
#basics ul li:first-child { padding: 0 0 50px; }
#basics ul li img { width: 100%; height: auto; }
#basics ul li h5 { padding: 15px 0 0; letter-spacing: 2px; }
#basics ul li p { padding: 0 0 15px; }

#information { padding: 50px 0; }
#information .inner { width: 100%; }
#information h3 { font-size: 4vw; letter-spacing: 2px; width: 90%; margin: 0 auto 5px; }
#information h4 { font-size: 7vw; line-height: 140%; width: 90%; margin: 0 auto; }
#information p.caut { font-size: 14px; text-align: left; padding: 20px 0; width: 90%; margin: 0 auto; }
#information ul { padding: 30px 0 40px; }
#information ul li h5 { font-size: 48px; margin: -20px 0 0; padding: 0; background: url(../images/common/basic_green_slash.svg) center bottom no-repeat; background-size: 120px; }
#information ul li p.suben { font-size: 12px; letter-spacing: 2px; padding: 20px 0 0; }
#information ul li p.subjp { font-size: 18px; }
#information .prod_img img { width: auto; height: 200px; }
#information .slick-list { padding: 30px 10px 10px; }
#information ul .slick-prev { left: 12px; }
#information ul .slick-next { right: 12px; }
#information ul .slick-prev img,
#information ul .slick-next img { width: 40px; height: auto; }
#information .btn a { padding: 15px 60px 15px 60px; }
footer .copyright { padding: 5px 0 55px; }
}