@charset "euc-jp";

body{
    overflow-x: hidden;
}

body.fixed{
    position: fixed;
}

#klaara {
 padding-top: 120px;
 padding-bottom: 100px;
}

sup {
 font-size: 0.625em;
 /* font-size: x-small; */
 vertical-align: super;
}

@media screen and (max-width: 1000px) {
 #klaara {
  padding-top: 0;
  padding-bottom: 50px;
 }

 #page_top {
  display: block !important;
  width: 30px;
  right: 20px;
  -webkit-background-size: contain;
  background-size: contain;
 }
}

/* --------------------------------- */
/* Class */

.container {
 max-width: 1000px;
 margin: 0 auto;
}

.flex {
 display: flex;
}

.btn-primary {
 /* height: 68px; */
 border-radius: 3em;
 font-size: 22px;
 color: #fff;
 line-height: 40px;
 text-align: center;
 display: inline-block;
 width: 342px;
 min-width: auto;
 background: #518a70 url(/img/index_arw_06.png) no-repeat 92.7% center;
 -webkit-background-size: 7px auto;
 background-size: 7px auto;
 padding: 14px 23px 14px 15px;
}

.btn-primary:hover {
 color: #fff;
 background-color: #395944;
}

.btns {
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 justify-content: center;
 margin-bottom: 60px;
}

.btns .btn-primary {
 line-height: 1;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 justify-content: center;
 -ms-align-items: center;
 align-items: center;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .container {
  margin: 0 20px;
 }

 .btn-primary {
  font-size: 14px;
  width: 197px;
  line-height: 1;
 }
}

/* --------------------------------- */
/* nav-sub */

#nav-sub {
 position: fixed;
 top: 70px;
 background: #fff;
 width: 100%;
 box-shadow: 0px 3px 6px -3px rgba(0, 0, 0, 0.16);
 z-index: 999;
}

#nav-sub .wrapper {
 max-width: 1000px;
 margin: 0 auto;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -ms-align-items: center;
 align-items: center;
}

#nav-sub p {
 font-size: 18px;
 color: #447355;
}

#nav-sub .wrapper > ul {
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 margin-left: 125px;
}

#nav-sub .wrapper > ul > li > a {
 position: relative;
 display: block;
 text-align: center;
}

#nav-sub .wrapper > ul > li > a:hover::after,
#nav-sub .wrapper > ul > li > a.is-active::after {
 visibility: visible;
}

/* PC only */
@media screen and (min-width: 1001px) {
 #nav-sub ul::before {
  content: "";
  width: 1px;
  height: 30px;
  background: #ececec;
  margin-top: 10px;
 }

 #nav-sub .wrapper > ul > li {
  position: relative;
 }

 #nav-sub .wrapper > ul > li::after {
  content: "";
  width: 1px;
  height: 30px;
  background: #e4e4e4;
  margin-top: 10px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
 }

 #nav-sub .wrapper > ul > li > a {
  padding: 10px 16px;
 }

 #nav-sub .wrapper > ul > li > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #447355;
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
 }
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 #nav-sub {
  position: sticky;
  top: 0;
 }

 #nav-sub .wrapper {
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
 }

 #nav-sub .wrapper > p {
  padding: 5px 18px;
  background: url("/img/index_arw_05.png") no-repeat 95.3125% center;
  background-size: 10px auto;
  width: 100%;
 }

 #nav-sub .wrapper.open > p {
  background: url("/img/ico_close.png") no-repeat 95.3125% center;
  background-size: 13px;
 }

 #nav-sub .wrapper > ul {
  flex-direction: column;
  margin: 0;
  width: 100%;
  border-top: 1px solid #ececec;
  font-size: 14px;
  display: none;
  position: absolute;
  top: 46px;
  background: #fff;
 }

 #nav-sub .wrapper > ul li {
  border-bottom: 1px solid #ececec;
  width: 100%;
  text-align: left;
 }

 #nav-sub .wrapper > ul li a {
  padding: 11px 18px;
  color: #447355;
  background: url("/img/index_arw_02.png") no-repeat 95.3125% center;
  background-size: 6px auto;
 }
}

/* --------------------------------- */
/* Movie */

.mov-list-item {
 /* width: 100%;
	text-align: center; */
}
.mov-list-inr {
 position: relative;
 width: 100%;
 /* padding-top: 58.1632653%; */
 aspect-ratio: 1000/565;
}
.mov-list-item-img {
 position: absolute;
 display: block;
 width: 100%;
 top: 0;
}
.mov-list-item-img.delete_btn {
 opacity: 0;
 pointer-events: none;
}
.mov-list-item-img img {
 width: 100%;
}
.mov-list-item-txt {
 font-size: 28px;
 color: #447355;
 margin: 0 0 50px 0;
 text-align: center;
}
.movie-outline {
 position: relative;
}
.conv-movie {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 justify-content: center;
 align-items: center;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 background: #000;
 opacity: 0;
}
.conv-movie-inr {
 position: relative;
 /* padding-top: 56.25%; */
 width: 100%;
 aspect-ratio: 1000 / 565;
}
.conv-movie-inr iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.is_active .conv-movie {
 opacity: 1;
}

/* --------------------------------- */
/* key-visual */

/* Mobile only */
@media screen and (max-width: 1000px) {
 .key-visual .container {
  margin: 0;
 }

 .key-visual img {
  width: 100%;
 }
}

/* --------------------------------- */
/* section01 */

.section01 {
 position: relative;
 margin-top: 100px;
 z-index: 100;
}

.section01 .container {
 padding: 0 30px;
 position: relative;
 z-index: 10;
}

.section01 h2 {
 color: #518a70;
 font-size: 38px;
 margin-right: 50px;
 /* flex: 1 0 auto; */

}

.section01 .text-box {
 letter-spacing: 0.1em;
 line-height: 1.875;
}

.section01 .text-box p {
 margin-bottom: 1.4375em;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section01 {
  margin-top: 50px;
 }

 .section01 .container {
  padding: 0;
 }

 .section01 .flex {
  flex-direction: column;
 }

 .section01 h2 {
  font-size: 25px;
  margin-right: 0;
  margin-bottom: 35px;
  line-height: 1.4901960784313726;
 }

 .section01 .text-box {
  font-size: 14px;
  line-height: 2.2857142857142856;
 }
}

/* --------------------------------- */
/* horizontal-scroll */

.horizontal-scroll-wrapper {
 margin-top: -177px;
}

.horizontal-scroll-list-wrapper {
 position: relative;
 width: 100%;
 height: 100vh;
 min-height: 890px;
 background: url(../img/section01_bg.jpg) no-repeat bottom 93px center;
 overflow: hidden;
}

.horizontal-scroll-list {
 position: absolute;
 bottom: 0;
 left: 50%;
 min-width: 100%;
 display: flex;
 gap: 23px;
 overflow: hidden;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .horizontal-scroll-wrapper {
  margin-top: -338px;
 }

 .horizontal-scroll-list-wrapper {
  min-height: 676px;
  background: url(../img/section01_bg_sp.jpg) no-repeat bottom 31px left;
  background-size: 100% auto;
 }

 .horizontal-scroll-list figure {
  width: 240px;
 }
}

/* --------------------------------- */
/* section02 */

.section02 {
 margin-top: 100px;
 text-align: center;
}

.section02 h2 {
 font-size: 38px;
 line-height: 1.89;
 /* color: #fff; */
 letter-spacing: 0.06em;
 margin-bottom: 40px;
}

.section02 .mov-list-item {
 margin-bottom: 60px;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section02 {
  margin-top: 50px;
 }

 .section02 .container {
  padding: 0;
 }

 .section02 .text-box {
  color: #000;
 }

 .section02 h2 {
  font-size: 22px;
  line-height: 1.4545454545454546;
  margin-bottom: 20px;
 }

 .section02 .text-box p {
  font-size: 13px;
  text-align: left;
 }

 .section02 .mov-list-item {
  margin-bottom: 20px;
 }
}

/* --------------------------------- */
/* section03 */

.section03 {
 margin-top: 100px;
}

.section03 h2 {
 font-size: 38px;
 text-align: center;
 margin-bottom: 40px;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section03 {
  margin-top: 50px;
 }

 .section03 h2 {
  font-size: 26px;
  line-height: 1.3846153846153846;
  margin-bottom: 30px;
 }
}

/* --------------------------------- */
/* product-box */

.product-box {
 margin-top: 100px;
 color: #000;
}

.product-box .image {
 text-align: center;
}

.product-box .flex {
 align-items: center;
 justify-content: space-between;
}

.product-box .text-box {
 font-size: 36px;
 line-height: 1.5;
 letter-spacing: 0.06em;
}

.product-box .logo-box {
 display: flex;
 align-items: center;
}

.product-box .btns {
 flex-direction: column;
 gap: 8px;
 margin: 0;
}

.product-box .btns .btn-primary {
 padding: 17px 23px 17px 15px;
}

/* PC only */
@media screen and (min-width: 1001px) {
 .product-box .logo-box {
  flex-direction: row-reverse;
  gap: 23px;
 }

 .product-box .logo-box .new {
  width: 75px;
 }

 .product-box .logo-box .logo {
  width: 402px;
 }
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .product-box {
  margin-top: 50px;
 }

 .product-box .image {
  margin-bottom: 20px;
 }

 .product-box .flex {
  flex-direction: column;
 }

 .product-box .text-box {
  font-size: 26px;
  text-align: center;
 }

 .product-box .logo-box {
  flex-direction: column;
  margin-top: 20px;
 }

 .product-box .logo-box .new {
  width: 48px;
  margin-bottom: -20px;
 }

 .product-box .logo-box .logo {
  width: 256px;
 }

 .product-box .btns {
  margin-top: 15px;
  gap: 10px;
 }

 .product-box .btns .btn-primary {
  padding: 13px 23px 13px 15px;
 }
}

/* --------------------------------- */
/* section04 */

.section04 {
 margin-top: 120px;
 position: relative;
 overflow: hidden;
 max-width: 100%;
}

.section04 h2 {
 font-size: 60px;
 line-height: 1.3333333333333333;
 text-align: center;
}

/* js-scale-up */
.scroll-scaleup-wrapper {
 position: relative;
 background: rgb(250, 250, 250);
 background: linear-gradient(
  0deg,
  rgba(250, 250, 250, 1) 0%,
  rgba(219, 218, 216, 1) 100%
 );
 padding-bottom: 100px;
 overflow: hidden;
 /* min-height: 590px; */
 /* height: 100vh; */
}

.scroll-scaleup-image {
 /* overflow: hidden; */
 max-width: 100%;
 min-height: 450px;
 background: #fff;
 text-align: center;
}

.scroll-scaleup-image img {
 width: 70%;
 transform-origin: top center;
}

.section04-content {
    padding-top: 30%;
   }

/* Mobile only */
@media screen and (max-width: 1000px) {
 .scroll-scaleup-wrapper {
  padding-bottom: 50px;
 }

 .section04-content {
  /* padding-top: 70px; */
  padding-top: 25vh;
 }
 
 .section04 .scroll-scaleup-image {
  overflow: hidden;
 }
}

.section04 .grid h3 {
 font-size: 30px;
 line-height: 1.3333333333333333;
}

.section04 .grid p {
 font-size: 14px;
}

/* PC only */
@media screen and (min-width: 1001px) {
 .section04 .grid {
  display: grid;
  column-gap: 30px;
  row-gap: 30px;
  align-self: center;
 }

 .section04 #grid01 {
  grid-template-areas:
   "image title"
   "image text";
  grid-template-columns: 570px 1fr;
  grid-template-rows: auto auto;
  margin-bottom: 60px;
 }

 .section04 #grid02 {
  display: grid;
  grid-template-areas:
   "title image"
   "text image";
  grid-template-columns: 1fr 570px;
  grid-template-rows: auto auto;
 }

 .section04 #grid03 {
  grid-template-areas:
   "image title"
   "image text";
  grid-template-columns: 670px 1fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 36px;
 }

 .section04 #grid04 {
  display: grid;
  grid-template-areas:
   "title image"
   "text image";
  grid-template-columns: 1fr 670px;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 36px;
 }

 .section04 .grid .image {
  grid-area: image;
  align-self: center;
 }

 .section04 .grid .image img {
  width: 100%;
 }

 .section04 .grid h3 {
  grid-area: title;
  align-self: end;
 }

 .section04 .grid p {
  grid-area: text;
  align-self: start;
 }
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section04 {
  margin-top: 50px;
 }
 /* 
 .section04 > .bg {
  padding-bottom: 50px;
  padding-top: 70px;
 } */

 .section04 h2 {
  font-size: 28px;
 }

 .section04 .grid h3 {
  font-size: 23px;
  margin-bottom: 20px;
  text-align: center;
 }

 .section04 .grid .image {
  margin-bottom: 20px;
 }
 /* 
 .section04 .grid{
    text-align: center;
 } */

 .section04 #grid01 {
  margin-bottom: 50px;
 }

 .section04 #grid04 p {
  text-align: left;
 }
}

/* --------------------------------- */
/* basic-function */

.basic-function {
 margin-top: 100px;
 border-top: 1px solid #bebebe;
 border-bottom: 1px solid #bebebe;
 padding: 100px 0;
}

.basic-function h2 {
 text-align: center;
 margin-bottom: 36px;
 font-size: 40px;
 letter-spacing: 0.1em;
}

.basic-function .flex {
 justify-content: space-between;
 flex-wrap: wrap;
 row-gap: 60px;
}

.basic-function .flex li {
 width: 21%;
}

.basic-function .box {
 background: #fff;
}

.basic-function li h3 {
 background: #518a70;
 color: #fff;
 font-size: 18px;
 font-weight: bold;
 padding: 7px;
 line-height: 1.1;
 text-align: center;
 min-height: 3em;
 display: flex;
 align-items: center;
 justify-content: center;
 letter-spacing: 0.1em;
}

.basic-function li img {
 width: 100%;
}

.basic-function li p {
 margin-top: 14px;
 line-height: 1.5;
 text-align: center;
 font-size: 14px;
}

/* .basic-function li p.note {
 font-size: 12px;
 margin-top: 0;
} */

/* Mobile only */
@media screen and (max-width: 1000px) {
 .basic-function {
  margin-top: 50px;
  padding: 50px 0;
 }

 .basic-function h2 {
  font-size: 23px;
  margin-bottom: 20px;
 }

 .basic-function .flex {
  row-gap: 30px;
 }

 .basic-function .flex li {
  width: 47.4%;
 }

 .basic-function li h3 {
  font-size: 14px;
 }

 .basic-function li p {
  font-size: 13px;
  margin-top: 12px;
 }

 /* .basic-function li p.note {
  margin-top: 8px;
 } */
}

/* --------------------------------- */
/* section05 */

.section05 {
 margin-top: 100px;
}

.section05 h3 {
 color: #518a70;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section05 {
  margin-top: 50px;
 }

 .section05 p {
  text-align: center;
 }
}

/* --------------------------------- */
/* section06 */

.section06 {
 margin-top: 100px;
}

.section06 h3 {
 color: #518a70;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section06 {
  margin-top: 50px;
 }

 .section06 .image img {
  width: 100%;
 }
}

/* --------------------------------- */
/* section07 */

.section07 {
 margin-top: 100px;
}

/* Mobile only */
@media screen and (max-width: 1000px) {
 .section07 {
  margin-top: 50px;
 }

 .section07 .container {
  margin: 0;
 }
}

/* --------------------------------- */
/* attention-list */

.attention-list {
 margin-top: 70px;
 list-style: none;
 font-size: 12px;
 line-height: 1.5;
}

.attention-list .container {
 /* border: 1px solid #508a70; */
 /* padding: 37px 40px; */
}

.attention-list ol {
 margin-bottom: 16px;
}

.attention-list li {
 /* counter-increment: number; */
 /* margin-bottom: 8px; */
 padding-left: 1.5em;
 text-indent: -1.5em;
}

.attention-list li:before {
 /* content: "*" counter(number) ":"; */
 /* margin-right: 10px; */
}

@media screen and (max-width: 1000px) {
 .attention-list {
  margin-top: 30px;
 }

 /* .attention-list .container {
  padding: 20px;
 } */

 .attention-list li {
  margin-top: 0;
 }

 .product-box .attention-list {
  margin-top: 20px;
 }
}

/* --------------------------------- */
/* bottom-nav */

#bottom-nav {
 display: none;
}

#bottom-nav .btn-primary {
 height: 60px;
}

@media screen and (max-width: 1000px) {
 #bottom-nav {
  display: block;
  background: #fff;
  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.16);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 10px;
  z-index: 100;
 }

 #bottom-nav .btns {
  justify-content: space-between;
  margin-bottom: 0;
  gap: 10px;
 }

 #bottom-nav .btns li {
  flex: 1;
 }

 #bottom-nav .btn-primary {
  min-width: auto;
  width: auto;
  height: 40px;
  background: #518a70 url(/img/index_arw_06.png) no-repeat 92.7% center;
  -webkit-background-size: 5px auto;
  background-size: 5px auto;
  padding: 0 17px 0 10px;
 }
}

/* --------------------------------- */
/* shop.html */
/* --------------------------------- */

#wrapper {
    padding-top: 120px;
}

#shop-list ul {
 display: block;
}

#nav-sub .wrapper > ul > li > a > .wfree {
    line-height: 22px;
}
.wfree-item {
    display: flex;
    font-size: 10px;
    color: #ae72a3;
    line-height: 1;
    justify-content: center;
}
.btns .wfree-item {
    font-size: 13px;
    color: #ebc172;
    padding: 0 0 5px 0;
}
.product-box .btns .btn-primary.wfree-on {
    padding: 8px 23px 8px 15px;
}
@media screen and (max-width: 1000px) {
    .btns .btn-primary span {
        font-size: 10px;
    }
    #nav-sub .wrapper > ul > li > a {
        text-align: left;
    }
    #nav-sub .wrapper > ul > li > a > .wfree {
        display: flex;
        align-items: center;
    }
    .wfree-item {
        order: 2;
        font-size: 12px;
        margin: 0 0 0 5px;
    }
    .wfree-ttl {
        order: 1;
    }
    .btns .btn-primary .wfree-item-sp {
        color: #ebc172;
    }
}

/* 2024.08.27 ADD */
.tooltip-event {
    position: relative;
    margin: 0 0 0 0;
}
.tooltip {
    position: absolute;
    padding: 6px 10px;
    width: 290px;
    color: #000;
    background: #ebc172;
    box-sizing: border-box;
    border-radius: 25px;
    top: -32px;
    left: 50%;
    margin: 0 0 0 -145px;
    -webkit-box-shadow: 0px 8px 20px 8px rgb(112 112 112 / 12%);
    -moz-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    -ms-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    -o-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    box-shadow: 0 8px 20px 8px rgb(112 112 112 / 12%);
    z-index: 2;
}
.tooltip:before {
    content: "";
    position: absolute;
    bottom: -21px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 16px solid #ebc172;
    z-index: 1;
    transform: rotateX(180deg);
}
.product-box .tooltip-txt {
    text-align: center;
    line-height: 1.2;
    font-size: 14px;
}
.tooltip-event.tool02 {
    margin: 0;
}
.tooltip02 {
    position: absolute;
    padding: 2px 10px;
    width: 150px;
    color: #000;
    background: #ebc172;
    box-sizing: border-box;
    border-radius: 25px;
    top: -22px;
    left: 50%;
    margin: 0 0 0 -75px;
    -webkit-box-shadow: 0px 8px 20px 8px rgb(112 112 112 / 12%);
    -moz-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    -ms-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    -o-box-shadow: 0px 8px 20px 8px rgba(112, 112, 112, 0.12);
    box-shadow: 0 8px 20px 8px rgb(112 112 112 / 12%);
    z-index: 2;
}
.tooltip02:before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -8px;
    border: 7px solid transparent;
    border-bottom: 10px solid #ebc172;
    z-index: 1;
    transform: rotateX(180deg);
}
.tooltip02-txt {
    text-align: center;
    line-height: 1.2;
    font-size: 10px;
}
@media screen and (max-width: 1000px) {
    .tooltip {
        width: 197px;
        margin: 0 0 0 -98px;
    }
}