@charset "utf-8";

.block:after,
.box:after,
.item:after,
.cols:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.block,
.box,
.item,
.cols {
zoom: 1;
}

.Lato {
font-family: 'Lato', sans-serif;
font-weight: 700; /*Bold*/
}
.Noto_Sans {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400; /*Regular*/
font-weight: 700; /*Bold*/
}
.Noto_Serif {
font-family: 'Noto Serif JP', serif;
font-weight: 400; /*Regular*/
font-weight: 500; /*Medium*/
}

.fadeElm {
position: relative;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
.activeView {
transition: all 1s ease;
transform: translate(0px, 0px);
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#CONCEPT .block li.zoomElm::before,
img.zoomElm {
transform: scale(1.1);
}
#CONCEPT .block li.activeZoom::before,
img.activeZoom {
transition: all 3s ease;
transform: scale(1.0);
}

#pageBottom.hidden,
#pageBody.hidden {
overflow: hidden;
}

body {
-webkit-text-size-adjust: 100%;
}
#contents {
margin: 0 auto;
width: 750px;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
font-weight: 400; /*Regular*/
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
letter-spacing: 0.075em;
text-align: left;
}
a {
    text-decoration: none;
}

/****************************************
#MODAL
*****************************************/

#TRIGGER {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
background-color: #fff;
}
#TRIGGER div {
position: relative;
margin: 0 auto;
width: 750px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
#TRIGGER .head-text {
    font-size: 36px;
    margin: unset;
}
#TRIGGER .hamburger {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
cursor: pointer;
margin: unset;
}
#TRIGGER span {
display: block;
position: absolute;
left: 7px;
background-color:#000;
width: 36px;
height: 3px;
}
#TRIGGER span:nth-of-type(1) {
top: 12px;
}
#TRIGGER span:nth-of-type(2) {
top: 24px;
}
#TRIGGER span:nth-of-type(3) {
top: 36px;
}
#MODAL {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
}
.modalView #MODAL {
position: relative;
}
#MODAL .cont {
position: relative;
background-color: #eee;
margin: 0 auto;
width: 750px;
display: none;
z-index: 50;
}
#MODAL .close {
position: absolute;
right: 50px;
top: 20px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 50;
}
#MODAL .close::before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
width: 3px;
height: 40px;
}
#MODAL .close::after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
width: 3px;
height: 40px;
}
#MODAL .cart {
margin: 0 auto;
padding: 141px 55px 80px 55px;
display: none;
}
#MODAL .cart .txt {
margin-bottom: 27px;
font-size: 32px;
line-height: 64px;
text-align: center;
}
#MODAL .cart .note {
margin-bottom: 45px;
font-size: 20px;
line-height: 30px;
color: #666;
}
#MODAL .cart .list {
border-bottom: solid 2px #ddd;
margin-bottom: 60px;
}
#MODAL .cart .block {
display: flex;
border-top: solid 2px #ddd;
padding: 50px 0;
align-items: center;
}
#MODAL .cart .block p {
box-sizing: border-box;
position: relative;
padding-left: 90px;
width: 440px;
font-size: 28px;
line-height: 36px;
}
#MODAL .cart .block img {
transform: translateY(-50%);
position: absolute;
left: 0;
top: 50%;
width: auto;
height: 100px;
}
#MODAL .cart .select {
position: relative;
box-sizing: border-box;
background-color: #fff;
border: solid 2px #ccc;
border-radius: 8px;
width: 200px;
height: 80px;
}
#MODAL .cart .select::after {
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 28px;
top: 48%;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 14px;
height: 14px;
}
#MODAL .cart select {
box-sizing: border-box;
padding-left: 25px;
width: 200px;
height: 80px;
font-size: 28px;
cursor: pointer;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #000;
}
#MODAL .cart select::-ms-expand {
display: none;
}
#MODAL .buy a {
display: block;
position: relative;
background-color: #ffcc00;
border-radius: 8px;
margin: 0 auto;
width: 100%;
height: 120px;
font-size: 36px;
line-height: 120px;
text-align: center;
color: #000;
}
#MODAL .navi {
margin: 0 auto;
padding: 45px 55px 80px 55px;
display: none;
}
#MODAL dl {
border-bottom: solid 2px #ddd;
}
#MODAL dt {
margin-bottom: 37px;
font-size: 28px;
}
#MODAL dt span {
display: block;
margin-bottom: 5px;
font-size: 20px;
font-weight: 700; /*Bold*/
color: #99cc99;
}
#MODAL dd {
border-top: solid 2px #ddd;
font-size: 32px;
line-height: 120px;
}
#MODAL dd span {
margin-left: 40px;
font-size: 22px;
color: #99cc99;
}
#MODAL dd a {
display: block;
color: #000;
}
#MODAL ul {
display: flex;
flex-wrap: wrap;
}
#MODAL li {
box-sizing: border-box;
width: 50%;
height: 160px;
font-size: 24px;
line-height: 36px;
}
#MODAL li:nth-of-type(odd) {
padding-right: 30px;
}
#MODAL li:nth-of-type(even) {
padding-left: 30px;
}
#MODAL li a {
display: flex;
align-items: center;
position: relative;
padding-left: 90px;
height: 120px;
}
#MODAL li img {
transform: translateY(-50%);
position: absolute;
left: 0;
top: 50%;
width: auto;
height: 120px;
}


/****************************************
#VISUAL
*****************************************/
#VISUAL {
position: relative;
overflow: hidden;
height: 1500px;
margin-top: 90px;
}
#VISUAL .bg_front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
#VISUAL .bg img {
position: absolute;
left: 0;
top: 0;
animation: imgZoom 27s linear infinite;
opacity: 0;
}
#VISUAL .bg img:nth-last-of-type(1) {
animation-delay: 0;
}
#VISUAL .bg img:nth-last-of-type(2) {
animation-delay: 9s;
}
#VISUAL .bg img:nth-last-of-type(3) {
animation-delay: 18s;
}
@keyframes imgZoom {
    0% {
    transform: translateX(-450px);
    opacity: 1;
    z-index: 2;
    }
    33.33333% {
    transform: translateX(-115px);
    opacity: 1;
    z-index: 3;
    }
    44.44444% {
    transform: translateX(0);
    opacity: 0;
    z-index: 3;
    }
    55.55555% {
    transform: translateX(-450px);
    opacity: 0;
    z-index: 0;
    }
    99.99999% {
    transform: translateX(-450px);
    opacity: 0;
    z-index: 0;
    }
    100% {
    transform: translateX(-450px);
    opacity: 1;
    z-index: 0;
    }
}
#VISUAL {
position: relative;
z-index: 1;
height: 1387px;
}
#VISUAL .cont {
position: relative;
z-index: 5;
height: 1500px;
}
#VISUAL h1 {
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 180px;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-family: 'Noto Serif JP', serif;
font-weight: 500; /*Medium*/
font-size: 50px;
line-height: 100px;
letter-spacing: 0.2em;
color: #000;
margin: unset;
z-index: 10;
}
#VISUAL .set {
position: absolute;
bottom: 115px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
max-width: 620px;
width: 100%;
}
#VISUAL .set_content {
display: flex;
gap: 36px;
}
#VISUAL .set_img {
width: 198px;
}
#VISUAL .set_img img {
aspect-ratio: 198/216;
width: 100%;
height: auto;
}
#VISUAL .set_number {
font-size: 20px;
text-align: center;
margin: unset;
margin-top: 20px;
}
#VISUAL .set_text-limited {
font-size: 24px;
font-weight: 700;
color: #cc9922;
border: 2px solid #cc9922;
border-radius: 6px;
display: inline-block;
margin: unset;
padding: 2px 4px;
}

#VISUAL .set_text-main {
    font-size: 36px;
    line-height: calc(56/36);
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: unset;
}

#VISUAL .set_text-price {
font-size: 24px;
color: #dd0000;
font-weight: 700;
margin: unset;
display: flex;
align-items: flex-end;
line-height: 1;
}
.set_text--first {
    align-self: center;
}
#VISUAL .set_text-price--number {
    font-size: 59px;
}
#VISUAL .set_text-price--en {
font-size: 33px;
}
#VISUAL .set_text-price--tax {
font-size: 27px;
}
#VISUAL .set_button-text {
font-size: 30px;
margin-top: 30px;
margin-bottom: unset;
text-align: center;
}
#VISUAL .cart {
    margin: unset;
}
#VISUAL .cart a {
display: block;
position: relative;
background-color: #ffcc00;
border-radius: 8px;
margin: 0 auto;
width: 560px;
height: 120px;
font-size: 36px;
line-height: 120px;
text-align: center;
color: #000;
}

#KAORI .image img {
width: 100%;
height: auto;
}
#FLOAT {
transition: opacity 0.3s, visibility 0.3s;
transform: translateX(40px);
position: fixed;
left: 50%;
bottom: 50px;
width: 300px;
z-index: 10;
}
#FLOAT.hide {
opacity: 0;
visibility: hidden;
}
#FLOAT .image img {
width: 100%;
height: auto;
}

/****************************************
#CATCH
*****************************************/
#CATCH {
position: relative;
overflow: hidden;
}
#CATCH .bg {
position: absolute;
left: 0;
top: 0;
background: #aaccdd;
height: 100%;
}
#CATCH .bg img {
width: 100%;
height: auto;
}
#CATCH .cont {
position: relative;
padding: 408px 0 129px 0;
text-align: center;
z-index: 0;
}
#CATCH h2 {
margin-bottom: 57px;
font-family: 'Noto Serif JP', serif;
font-weight: 500; /*Medium*/
font-size: 44px;
letter-spacing: 0.15em;
line-height: 84px;
}
#CATCH p {
font-size: 28px;
letter-spacing: 0.15em;
line-height: 72px;
}

.day {
position: relative;
}
.day_text {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 44px;
line-height: calc(80/44);
width: 460px;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
}
.day img {
aspect-ratio: 1500/1702;
width: 100%;
height: auto;
}
.day_note-item {
    position: absolute;
    right: 25px;
    bottom: 0;
}
.day_note {
margin-block: 5px;
font-size: 20px;
}

/****************************************
#TARGET
*****************************************/
#TARGET {}
#TARGET2 .cont,
#TARGET .cont {
box-sizing: border-box;
position: relative;
background: url("../img/tgt_bg.jpg") no-repeat center -350px;
background-size: 750px auto;
margin: 0 auto;
padding: 123px 0 0 0;
width: 750px;
height: 700px;
text-align: center;
}
#TARGET h2 {
position: relative;
margin-bottom: 850px;
font-family: 'Noto Serif JP', serif;
font-weight: 500; /*Medium*/
font-size: 44px;
letter-spacing: 0.15em;
line-height: 84px;
z-index: 1;
}
#TARGET .icon {
position: absolute;
right: 20px;
top: 140px;
background-color: #fff;
border-radius: 50%;
width: 124px;
height: 124px;
font-size: 24px;
line-height: 124px;
text-align: center;
}
#TARGET .icon span {
font-weight: 700; /*Bold*/
font-size: 48px;
}
#TARGET2 h2 {
position: relative;
margin-top: 163px;
margin-bottom: 347px;
font-family: 'Lato', 'Noto Serif JP', serif;
font-weight: 500; /*Medium*/
font-size: 52px;
letter-spacing: 0.15em;
line-height: 80px;
z-index: 1;
}
#TARGET2 .balloon {
position: absolute;
left: 145px;
top: 109px;
}
#TARGET ul {
transform: translateX(-48%);
position: absolute;
left: 50%;
top: 300px;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-size: 28px;
line-height: 58px;
letter-spacing: 0;
color: #000;
text-align: left;
}
#TARGET li {
margin: 0 42px;
}
#TARGET li span {
display: inline-block;
background-color: #b9dbe0;
border-radius: 5px;
padding: 22px 0;
}
#TARGET li:nth-of-type(1) span {
background-color: rgba(153,210,210,0.5);
}
#TARGET li:nth-of-type(2) span {
background-color: #f9dbe7;
}
#TARGET li:nth-of-type(3) span {
background-color: #dbeddb;
}
#TARGET li:nth-of-type(4) span {
background-color: #f9e1d0;
}
#TARGET li:nth-of-type(5) span {
background-color: #dbefef;
}
#TARGET li:nth-of-type(6) span {
background-color: #e7e1f3;
}
#TARGET2 .link a,
#TARGET .link a {
display: block;
position: relative;
background-color: #ffcc00;
border-radius: 8px;
margin: 0 auto;
width: 640px;
height: 120px;
font-size: 36px;
line-height: 120px;
text-align: center;
color: #000;
}
#TARGET2 .link a::after,
#TARGET .link a::after {
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 43px;
top: 48%;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 14px;
height: 14px;
}

/****************************************
#CONCEPT
*****************************************/
#CONCEPT {}
#CONCEPT .cont {
position: relative;
padding: 180px 0 0 0;
}
#CONCEPT .en {
position: absolute;
left: 70px;
top: 120px;
}
#CONCEPT .block {
position: relative;
padding: 0 75px;
}
#CONCEPT .block:nth-of-type(1) {
padding-top: 817px;
padding-bottom: 854px;
}
#CONCEPT .block:nth-of-type(2) {
padding-top: 1403px;
padding-bottom: 661px;
}
#CONCEPT h3 {
position: absolute;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-family: 'Noto Serif JP', serif;
font-weight: 500; /*Medium*/
font-size: 36px;
line-height: 70px;
letter-spacing: 0.25em;
color: #000;
}
#CONCEPT .block:nth-of-type(1) h3 {
left: 95px;
top: 124px;
}
#CONCEPT .block:nth-of-type(2) h3:nth-of-type(1) {
right: 62px;
top: 278px;
}
#CONCEPT .block:nth-of-type(2) h3:nth-of-type(2) {
left: 62px;
top: 1042px;
}
#CONCEPT p {
font-size: 28px;
line-height: 68px;
letter-spacing: 0.1em;
}
#CONCEPT .image li {
position: absolute;
overflow: hidden;
}
#CONCEPT .block:nth-of-type(1) li:nth-of-type(1) {
right: 0;
top: 0;
width: 406px;
height: 689px;
}
#CONCEPT .block:nth-of-type(1) li:nth-of-type(2) {
right: 42px;
bottom: 358px;
width: 480px;
height: 360px;
}
#CONCEPT .block:nth-of-type(1) li:nth-of-type(2)::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
background: url("../img/ccp_pht2.jpg") no-repeat left top;
background-size: cover;
width: 480px;
height: 360px;
z-index: 1;
opacity: 0.15;
}
#CONCEPT .block:nth-of-type(1) li:nth-of-type(3) {
left: 0;
bottom: 0;
width: 600px;
height: 400px;
}
#CONCEPT .block:nth-of-type(2) li:nth-of-type(1) {
left: 0;
top: 414px;
width: 399px;
height: 500px;
}
#CONCEPT .block:nth-of-type(2) li:nth-of-type(1)::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
background: url("../img/ccp_pht4.jpg") no-repeat left top;
background-size: cover;
width: 399px;
height: 500px;
z-index: 1;
opacity: 0.75;
}
#CONCEPT .block:nth-of-type(2) li:nth-of-type(2) {
right: 72px;
top: 865px;
width: 400px;
height: 300px;
}
#CONCEPT .block:nth-of-type(2) li:nth-of-type(3) {
left: 0;
bottom: 0;
width: 750px;
height: 500px;
}

/****************************************
#FUTURES
*****************************************/
#FUTURES {}
#FUTURES .cont {
position: relative;
background-color: #fff;
padding: 132px 0 0 0;
}
#FUTURES .en {
position: absolute;
left: 415px;
top: 285px;
}
#FUTURES h2 {
margin-bottom: 83px;
font-family: 'Lato', 'Noto Serif JP', serif;
font-weight: 400; /*Regular*/
font-size: 44px;
letter-spacing: 0.15em;
line-height: 80px;
text-align: center;
}
#FUTURES .block {
position: relative;
padding-bottom: 114px;
}
#FUTURES .block:last-child {
padding-bottom: 82px;
}
#FUTURES .block h3 {
box-sizing: border-box;
display: flex;
position: relative;
margin: 0 auto 62px auto;
padding-left: 120px;
width: 640px;
min-height: 84px;
font-size: 32px;
font-weight: 700; /*Bold*/
letter-spacing: 0.15em;
line-height: 60px;
align-items: center;
}
#FUTURES .block h3::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 100%;
}
#FUTURES .block:nth-of-type(1) h3::before {
background: url("../img/ftr_num1.png") no-repeat center left;
}
#FUTURES .block:nth-of-type(2) h3::before {
background: url("../img/ftr_num2.png") no-repeat center left;
}
#FUTURES .block:nth-of-type(3) h3::before {
background: url("../img/ftr_num3.png") no-repeat center left;
}
#FUTURES .block:nth-of-type(4) h3::before {
background: url("../img/ftr_num4.png") no-repeat center left;
}
#FUTURES .block .image {
margin-bottom: 58px;
}
#FUTURES .block .image ul {
margin: 0 auto;
width: 640px;
}
#FUTURES .block .image li {
position: relative;
background-color: #edd5ab;
margin-bottom: 20px;
padding-left: 100px;
font-size: 32px;
line-height: 100px;
}
#FUTURES .block .image li::before {
content: '';
display: block;
position: absolute;
left: 30px;
top: 37px;
background: url("../img/ftr_check.png") no-repeat left top;
background-size: cover;
width: 36px;
height: 26px;
}
#FUTURES .block .image p {
margin: -21px auto -25px auto;
width: 640px;
font-size: 22px;
color: #666;
text-align: right;
}
#FUTURES .block p {
margin: 0 auto;
max-width: 600px;
font-size: 28px;
letter-spacing: 0.15em;
line-height: 68px;
}
#FUTURES .block p.note {
margin-top: 36px;
font-size: 22px;
line-height: 36px;
color: #666;
}
#FUTURES .block .box {
background-color: #f6ead5;
margin: 80px auto 18px auto;
padding: 40px 0 48px 0;
width: 640px;
text-align: center;
}
#FUTURES .block:nth-of-type(2) .box h4 {
margin-bottom: 33px;
font-size: 28px;
font-weight: 700; /*Bold*/
letter-spacing: 0.15em;
line-height: 44px;
}
#FUTURES .block .box li {
display: inline-block;
padding: 0 27px;
font-size: 24px;
line-height: 30px;
}
#FUTURES .block .box li span {
font-size: 20px;
}
#FUTURES .block .box img {
display: block;
margin-bottom: 24px;
}
#FUTURES .block:nth-of-type(4) .box h4 {
background-color: #cc9922;
margin: 10px auto 25px auto;
width: 500px;
font-size: 36px;
font-weight: 700; /*Bold*/
letter-spacing: 0.15em;
line-height: 72px;
text-align: center;
color: #fff;
}
#FUTURES .block .box h5 {
margin-bottom: 43px;
font-size: 28px;
font-weight: 400; /*Regular*/
letter-spacing: 0.15em;
line-height: 44px;
text-align: center;
}
#FUTURES .block .box .img {
position: relative;
margin: 0 auto;
width: 310px;
}
#FUTURES .block .box .img::before {
content: 'アロマバスエッセンスを入れた水道水';
position: absolute;
right: 343px;
top: 0;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
font-weight: 400; /*Regular*/
font-size: 20px;
line-height: 30px;
letter-spacing: 0;
color: #000;
text-align: left;
}
#FUTURES .block .box .img::after {
content: '水道水';
position: absolute;
left: 343px;
top: 0;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
font-weight: 400; /*Regular*/
font-size: 20px;
line-height: 30px;
letter-spacing: 0;
color: #000;
text-align: left;
}
#FUTURES .block .box p {
margin-top: 23px;
max-width: 570px;
font-size: 24px;
letter-spacing: 0;
line-height: 48px;
text-align: left;
}
#FUTURES .block .box p.note {
margin-top: -1px;
font-size: 20px;
text-align: center;
color: #666;
}
#FUTURES .chizu {
margin-top: 60px;
position: relative;
}
#FUTURES .chizu p {
position: absolute;
left: 0;
top: 110px;
max-width: 100%;
width: 100%;
font-weight: 700; /*Bold*/
font-size: 30px;
line-height: 48px;
text-align: center;
}

/****************************************
#contents .product&#contents .product2
*****************************************/
.product .cont {
position: relative;
background: url("../img/pdt_bg.png") repeat center center;
padding: 237px 0 94px 0;
}
#contents .product .cont--top {
    padding-top: 60px;
	padding-bottom: 50px;
}
#contents .product .cont--single {
	padding-bottom: 0;
}
#contents .product .en {
position: absolute;
left: 128px;
top: 128px;
}
#contents .product .balloon {
position: absolute;
right: 22px;
top: 79px;
}
#contents .product .icon {
position: absolute;
right: 45px;
top: 74px;
background-color: #fff;
border-radius: 50%;
width: 110px;
height: 110px;
font-size: 22px;
line-height: 110px;
text-align: center;
}
#contents .product .icon span {
font-weight: 700; /*Bold*/
font-family: 'Lato', 'Noto Serif JP', serif;
font-size: 48px;
}
#contents .product h2 {
position: relative;
margin-bottom: 83px;
font-family: 'Lato', 'Noto Serif JP', serif;
font-weight: 400; /*Regular*/
font-size: 44px;
letter-spacing: 0.15em;
line-height: 80px;
text-align: center;
z-index: 2;
}
#contents .product .product_title {
	font-family: 'Noto Serif JP', serif;
	font-size: 48px;
    line-height: calc(66/48);
    letter-spacing: 0;
    margin-bottom: 50px;
	text-align: center;
}
#contents .product .product_title--single {
	margin-top: 140px;
}
#contents .product .set {
padding: 0 45px 50px;
}
#contents .product .cont--top .set {
    padding-inline: 25px;
}
#contents .product .set h3 {
background-color: #d7b169;
margin-bottom: 50px;
font-weight: 700; /*Bold*/
font-size: 32px;
line-height: 90px;
text-align: center;
color: #fff;
}
#contents .item_wrap {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 4px rgba(190, 190, 190, 0.4);
padding: 40px 20px 0;
}
#contents .item_box {
display: flex;
justify-content: center;
gap: 20px;
}
#contents .product .single {
background-image: url(../img/pdt_bg.png);
position: relative;
padding: 0 45px 80px;
}
#contents .product .single h3 {
background-color: #99bb77;
margin-bottom: 24px;
font-weight: 700; /*Bold*/
font-size: 32px;
line-height: 90px;
text-align: center;
color: #fff;
}
#contents .product .single h3 span {
font-size: 24px;
}
#contents .product .slider {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #fff;
border-radius: 15px;
margin: 0 -20px 40px -20px;
}
#contents .product .slider .item {
padding: 102px 30px 70px 30px;
}
#contents .product .list .item {
background: url("../img/pdt_lin.png") no-repeat center top;
padding: 62px 0 70px 0;
}
#contents .product .list .item:nth-of-type(3),
#contents .product .list .item:nth-of-type(2),
#contents .product .list .item:nth-of-type(1) {
background: url("../img/pdt_lin.png") no-repeat 130px top;
}
#contents .product .item .image {
position: relative;
padding-top: 10px;
float: left;
}
#contents .product .item .set_image {
    width: 249px;
    padding-top: 15px;
}
#contents .product .item .set_image img {
    aspect-ratio: 290/318;
    width: 100%;
    height: auto;
}
#contents .product .single .image {
box-sizing: border-box;
padding-left: 10px;
width: 190px;
}
#contents .product .single .slider .image {
padding-left: 0px;
padding-top: 33px;
width: 180px;
}
#contents .product .item .image .icn {
z-index: 0;
position: absolute;
left: -10px;
top: -92px;
}
#contents .product .slider .item .image .icn {
z-index: 0;
position: absolute;
left: 10px;
top: -82px;
}
#contents .product .item .image .itm {
z-index: 1;
display: block;
position: relative;
margin: 0 auto 30px auto;
}
#contents .product .set .pack {
margin-left: 330px;
}
#contents .product .set .item_box .pack {
margin-left: unset;
}
#contents .product .single .pack {
box-sizing: border-box;
margin-left: 230px;
padding-top: 10px;
min-height: 455px;
}
#contents .product .single .slider .pack {
margin-left: 220px;
}
.set-price {
color: #dd0000;
font-weight: 700;
display: flex;
align-items: flex-end;
line-height: 1;
}

.set-price_number {
font-size: 160px;
}

.set-price_percent {
font-size: 48px;
margin-bottom: 13px;
}
#contents .product .item .txt {
margin-bottom: 30px;
}
#contents .product .item h4 {
margin-bottom: unset;
font-weight: 500; /*Bold*/
font-size: 32px;
line-height: 48px;
}
#contents .product .item .pack--set h4 {
font-size: 30px;
line-height: calc(56/30);
}
#contents .product .item .pack--set h4 .pack-set_title {
display: block;
font-size: 36px;
line-height: calc(48/36);
}
#contents .product h4 .pack-set_title span {
display: block;
}
#contents .product .item p.cnt {
margin-bottom: 9px;
font-size: 24px;
line-height: 40px;
}
#contents .product .item div.cnt {
clear: both;
padding-top: 30px;
padding-bottom: 30px;
}
/* アロマバスエッセンス６包セット　上部 */
#contents .product .item div.cnt .set-content {
display: flex;
flex-wrap: wrap;
list-style: none;
letter-spacing: 0;
font-size: 28px;
line-height: 46px;
gap: 22px;
justify-content: center;
}
#contents .product .item .set-content li {
    width: 171.5px;
    height: 171.5px;
    border-radius: 50%;
    font-size: 20px;
    line-height: calc(32/20);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#contents .product .item .set-content li:nth-of-type(1) {
    background-color: #eeaf7a;
}
#contents .product .item .set-content li:nth-of-type(2) {
    background-color: #f5c0cf;
}
#contents .product .item .set-content li:nth-of-type(3) {
    background-color: #a9e1e0;
}
#contents .product .item .set-content li:nth-of-type(4) {
    background-color: #81d5b5;
}
#contents .product .item .set-content li:nth-of-type(5) {
    background-color: #c2c0de;
}
#contents .product .item .set-content li:nth-of-type(6) {
    background-color: #f4da7a;
}
.price-item {
margin-top: 60px;
}
.price-item_top {
text-align: center;
font-size: 24px;
}
.price-item_content {
display: flex;
justify-content: center;
gap: 24px;
}

.price-item_off {
width: 160.5px;
height: 160.5px;
border-radius: 50%;
background-color: #dd0000;
color: #fff;
font-size: 32px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-item_off-item span {
    font-size: 53px;
}
.price-item_box {
display: flex;
}
.price-item_box:nth-of-type(1) {
margin-top: 15px;
align-items: center;
justify-content: space-between;
}
.price-item_first {
font-size: 30px;
font-weight: 500;
line-height: 1;
}
.price-item_main {
color: #dd0000;
font-size: 128px;
font-weight: 700;
line-height: 0.8;
}
.price-item_en {
    font-size: 47.5px;
}
.price-item_fax {
    font-size: 24px;
    margin-left: 14px;
}
.price-item_free {
color: #dd0000;
font-size: 27.5px;
font-weight: 700;
line-height: calc(37/27.5);
border: 2px solid #dd0000;
border-radius: 8px;
margin-top: auto;
margin-left: 24px;
padding: 6px 15px;
}
.cont--top .cart,
.cont--single .cart {
    margin-top: 50px;
}
#contents .product .cont--top .cart--set a,
#contents .product .cont--single .cart--set a {
    line-height: calc(56/40);
    padding-block: 5px;
}
.cont--top .cart span,
.cont--single .cart span {
    font-size: 28px;
    line-height: calc(56/28);
}
.set_note {
    font-size: 20px;
    line-height: calc(34/20);
    margin-top: 75px;
    max-width: 665px;
    margin-inline: auto;
}
/* トライアルセットに入っている アイテムをご紹介 */
#contents .intro .head {
position: relative;
background: url("../img/cv02_ttl_bg.jpg") no-repeat left top;
background-size: cover;
height: 1000px;
}
#contents .intro .head h2 {
font-family: 'Noto Sans JP', sans-serif;
position: absolute;
right: 55px;
top: 100px;
background-color: #fff;
border-radius: 22px;
padding: 30px 0;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-weight: 400; /*Regular*/
font-size: 24px;
line-height: 44px;
letter-spacing: 0.075em;
}
#contents .intro .head .catch {
position: absolute;
right: 121px;
top: 96px;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-weight: 400; /*Regular*/
font-size: 44px;
line-height: 70px;
letter-spacing: 0.15em;
}
#contents .intro .en {
position: absolute;
right: 50px;
top: 506px;
}
/* -------------------------------------- */
#contents .product .item .cnt--top p {
font-size: 28px;
text-align: center;
margin-top: 40px;
}
#contents .product .item .cut--under ul {
display: flex;
flex-wrap: wrap;
list-style: none;
letter-spacing: 0;
font-size: 28px;
line-height: 46px;
}
#contents .product .item .set-content--under li:nth-of-type(odd) {
width: 45%;
}
#contents .product .item .set-content--under li:nth-of-type(even) {
width: 55%;
}
#contents .product .item .cut--under p {
font-size: 24px;
line-height: 46px;
text-align: right;
}

#contents .product .item .exp {
margin-bottom: 34px;
font-size: 28px;
line-height: 48px;
}
#contents .product .item .num {
display: inline-block;
background-color: #fff;
border: solid 1px #000;
border-radius: 5px;
padding-right: 11px;
letter-spacing: 0.025em;
font-weight: 700; /*Bold*/
font-size: 22px;
line-height: 46px;
}
#contents .product .item .num span {
display: inline-block;
background-color: #000;
margin-right: 11px;
padding: 0 10px;
font-weight: 400; /*Regular*/
font-size: 20px;
color: #fff;
}
#contents .product .price {
position: relative;
z-index: 2;
}
#contents .product .set .price {
margin: 0 auto 45px auto;
width: 560px;
}
#contents .product .single .price {
margin-bottom: 45px;
}
#contents .product .price .free {
float: left;
box-sizing: border-box;
background-color: #fff;
border: solid 1px #cc9922;
border-radius: 5px;
margin-top: 6px;
width: 196px;
text-align: center;
}
#contents .product .price .free li {
border-top: solid 1px #cc9922;
font-weight: 700; /*Bold*/
font-size: 22px;
line-height: 44px;
color: #cc9922;
}
#contents .product .price .free li:first-child {
border-top: none;
}
#contents .product .price .regular {
margin-left: 217px;
font-size: 24px;
line-height: 52px;
}
#contents .product .price .special {
white-space: nowrap;
margin-top: -6px;
margin-left: 217px;
font-weight: 700; /*Bold*/
font-size: 30px;
line-height: 52px;
color: #dd0000;
}
#contents .product .price .special strong {
font-size: 48px;
}
#contents .product #ITM_SET .price .special strong {
font-size: 52px;
}
#contents .product .cart a {
display: block;
position: relative;
background-color: #ffcc00;
border-radius: 8px;
margin: 0 auto;
width: 560px;
height: 120px;
font-size: 36px;
line-height: 120px;
text-align: center;
color: #000;
}
#contents .product .cart a::after {
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 40px;
top: 50%;
border-top: 2px solid #000;
border-right: 2px solid #000;
width: 14px;
height: 14px;
}
#contents .product .item dl {
margin: 0 0 44px 0;
padding-top: 11px;
width: 660px;
font-size: 23px;
line-height: 34px;
text-align: center;
display: flex;
flex-wrap: wrap;
}
#contents .product .slider .item dl {
margin: 0 -10px 44px -10px;
}
#contents .product .item dt {
margin: 0 auto 30px auto;
width: 640px;
font-weight: 500; /*Medium*/
font-size: 28px;
overflow: hidden;
}
#contents .product .item dt span {
position: relative;
padding: 0 25px;
}
#contents .product .item dt span::before {
content: '';
display: block;
position: absolute;
left: 100%;
top: 50%;
background-color: #ddd;
width: 100%;
height: 2px;
}
#contents .product .item dt span::after {
content: '';
display: block;
position: absolute;
right: 100%;
top: 50%;
background-color: #ddd;
width: 100%;
height: 2px;
}
#contents .product .item dd {
display: block;
width: 220px;
}
#contents .product .item dd img {
display: block;
margin: 0 auto 17px auto;
}
#contents .product .note {
margin: -6px auto 0 auto;
width: 660px;
font-size: 20px;
line-height: 32px;
letter-spacing: 0;
}
#contents .product .note li {
margin-bottom: 6px;
}

/****************************************
#USER
*****************************************/
#USER h2 {
text-align: center;
padding-top: 100px;
}
#USER .cont {
padding: 85px 0 100px 0;
}
#USER .slider {}
#USER .block {
box-sizing: border-box;
padding: 0 38px;
width: 556px;
}
#USER .block .image {
margin-bottom: 40px;
}

#USER .block h5 {
position: relative;
margin-bottom: 24px;
padding: 20px 0 20px 105px;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
font-weight: 400; /*Regular*/
font-size: 20px;
line-height: 36px;
}
#USER .block h5 span {
font-size: 24px;
top: 50%;
}
#USER .block h5 img {
transform: translateY(-50%);
position: absolute;
left: 0;
top: 50%;
}
#USER .block p {
font-size: 24px;
line-height: 56px;
}

.number {
position: relative;
}
.number_head {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.number_text {
font-size: 56px;
font-family: 'Noto Serif JP', serif;
}
.number_break {
margin-top: 30px;
}

/****************************************
#MAKER
*****************************************/
#MAKER {}
#MAKER .head {
position: relative;
background: url("../img/mkv_bg.jpg") no-repeat left top;
background-size: cover;
height: 1000px;
}
#MAKER .head h2 {
position: absolute;
right: 55px;
top: 100px;
background-color: #fff;
border-radius: 22px;
padding: 30px 0;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-weight: 400; /*Regular*/
font-size: 24px;
line-height: 44px;
letter-spacing: 0.075em;
}
#MAKER .head .catch {
position: absolute;
right: 121px;
top: 96px;
font-feature-settings: "pkna";
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-weight: 400; /*Regular*/
font-size: 44px;
line-height: 70px;
letter-spacing: 0.15em;
}
#MAKER .en {
position: absolute;
right: 50px;
top: 506px;
}
#MAKER .profile {
position: absolute;
left: 55px;
bottom: 120px;
}
#MAKER .profile p:nth-of-type(1) {
font-size: 24px;
line-height: 36px;
letter-spacing: 0.15em;
}
#MAKER .profile p:nth-of-type(2) {
margin-top: 12px;
font-size: 36px;
line-height: 36px;
letter-spacing: 0.15em;
}
#MAKER .cont {
padding: 103px 0 130px 0;
}
#MAKER .block {
margin: 0 auto;
width: 600px;
}
#MAKER .block h3 {
margin-bottom: 63px;
font-size: 32px;
font-weight: 700; /*Bold*/
line-height: 60px;
letter-spacing: 0.2em;
}
#MAKER .block p {
font-size: 28px;
line-height: 68px;
letter-spacing: 0.15em;
}
#MAKER .image {
margin: 120px 0 133px 0;
}
#MAKER .image li:nth-of-type(1) {
position: relative;
margin: 0 0 0 -15px;
width: 480px;
height: 320px;
overflow: hidden;
z-index: 1;
}
#MAKER .image li:nth-of-type(2) {
margin: -13px 0 0 55px;
width: 540px;
height: 360px;
overflow: hidden;
}
#MAKER .image li img {
display: block;
}

/****************************************
#LAST
*****************************************/
#LAST {}
#LAST .cont {
position: relative;
background: #f6ead5 url("../img/lst_bg.jpg") no-repeat left top;
background-size: 750px auto;
padding: 103px 0 0 0;
}
#LAST h2 {
margin-bottom: 640px;
font-family: 'Noto Serif JP', serif;
font-weight: 400; /*Regular*/
font-size: 48px;
letter-spacing: 0.3em;
line-height: 96px;
text-align: center;
color: #fff;
}
#LAST .block {
background-color: #f6ead5;
margin: 0 auto;
padding: 57px 0 0 0;
width: 670px;
text-align: center;
}
#LAST h3 {
margin-bottom: 72px;
font-weight: 400; /*Regular*/
font-size: 36px;
letter-spacing: 0.15em;
line-height: 74px;
}
#LAST p {
margin-bottom: 130px;
font-size: 28px;
letter-spacing: 0.15em;
line-height: 68px;
}

/****************************************
#TEL
*****************************************/
#TEL .cont {
position: relative;
background-color: #d2eecd;
padding: 70px 0;
text-align: center;
}
#TEL .cont h5 {
margin-bottom: 7px;
font-size: 32px;
font-weight: 400;
}
#TEL .cont .p1 {
margin-bottom: 30px;
font-size: 72px;
line-height: 72px;
}
#TEL .cont .p1 img {
margin-right: 7px;
}
#TEL .cont .p2 {
margin-bottom: 7px;
font-size: 28px;
line-height: 36px;
}
#TEL .cont .p3 {
font-size: 20px;
line-height: 36px;
}
#TEL .cont a {
color: #000;
}

/****************************************
#footer
*****************************************/
#footer {
background-color: #fff;
border: none;
padding: 70px 0 60px 0;
text-align: center;
font-size: 20px;
}
#footer .link {
margin: 60px 0 30px 0;
font-size: 20px;
}
#footer .link a {
color: #000;
}

#USER .slick-slide {
transition:.2s linear;
opacity: 0.5;
}
#USER .slick-current {
opacity: 1;
}

/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 220px;
display: block;
width: 40px;
height: 40px;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
z-index: 10;
}
#PRODUCTS .slick-prev,
#PRODUCTS .slick-next {
border-radius: 50%;
background-color: rgba(0,0,0,0.45);
width: 64px;
height: 64px;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
opacity: 0;
display: none !important;
}

.slick-prev:before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
left: 60%;
top: 50%;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
width: 18px;
height: 18px;
}
.slick-next:before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
left: 40%;
top: 50%;
border-top: 3px solid #000;
border-right: 3px solid #000;
width: 18px;
height: 18px;
}
#PRODUCTS .slick-prev:before {
left: 55%;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
}
#PRODUCTS .slick-next:before {
left: 45%;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}

.slick-prev {
left: 80px;
}
.slick-next {
right: 80px;
}
#PRODUCTS .slick-prev {
top: 50%;
left: -15px;
}
#PRODUCTS .slick-next {
top: 50%;
right: -15px;
}

/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 40px;
}

.slick-dots {
position: absolute;
bottom: -40px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#PRODUCTS .slick-dots {
top: 40px;
bottom: inherit;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 12px;
height: 12px;
margin: 0 9px;
padding: 0;

cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 12px;
height: 12px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
background-color: #ccc;
border-radius: 50%;
width: 12px;
height: 12px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
background-color: #666;
}
#PRODUCTS .slick-dots li.slick-active button:before {
background-color: #7766aa;
}
#PRODUCTS.SET1 .slick-dots li.slick-active button:before {
background-color: #7766aa;
}
#PRODUCTS.SET2 .slick-dots li.slick-active button:before {
background-color: #a3a349;
}
#PRODUCTS.SET3 .slick-dots li.slick-active button:before {
background-color: #66aa66;
}
#PRODUCTS.SET4 .slick-dots li.slick-active button:before {
background-color: #00bbbb;
}
#PRODUCTS.SET5 .slick-dots li.slick-active button:before {
background-color: #ee7799;
}
#PRODUCTS.SET6 .slick-dots li.slick-active button:before {
background-color: #ee7744;
}