html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
list-style: none;
}
:root {
--headerHeightOffsetD: -69px;
--closeNewTop: 63px;
}
html {
word-break: unset;
}
body {
line-height: 1;
}
@media screen and (min-width: 768px), print {
body {
letter-spacing: normal;
}
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
img,
video {
font-size: 0;
line-height: 0;
}
body {
font-family: YakuHanMP_Noto, 'Poppins', 'Noto Serif JP', 'Noto Sans JP', sans-sefif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
font-weight: 400;
}
body img {
width: 100%;
vertical-align: top;
}
@media screen and (max-width: 767px) {
.u-is-pc {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.u-is-sp {
display: none !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.u-is-sp {
display: none !important;
}
}
.u-img-wrap {
font-size: 0;
line-height: 0;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.l-container {
width: 1000px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.l-container {
width: 78.125vw;
}
}
@media screen and (max-width: 767px) {
.l-container {
width: 89.46666666666667vw;
}
}
.c-footer-btn {
border-top: 1px solid #9c8585;
}
@media screen and (min-width: 768px) {
.c-footer-btn-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-list {
display: block;
}
}
.c-footer-btn-content {
position: relative;
}
@media screen and (min-width: 768px) {
.c-footer-btn-content {
height: 240px;
width: 50%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content {
height: 18.75vw;
width: 50%;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content {
height: 32.666666666666664vw;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:hover .c-footer-btn-text {
opacity: 0.5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:hover .c-footer-btn-text {
opacity: 0.5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:first-child {
border-right: 1px solid #9c8585;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:first-child {
border-right: 1px solid #9c8585;
}
}
.c-footer-btn-content:first-child:before {
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:first-child:before {
left: 140px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:first-child:before {
left: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content:first-child:before {
left: 21.333333333333336vw;
}
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:first-child .c-footer-btn-text {
left: 50%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:first-child .c-footer-btn-text {
left: 50%;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content:first-child .c-footer-btn-text {
right: 21.333333333333336vw;
}
}
.c-footer-btn-content:first-child:hover:before {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.c-footer-btn-content:last-child:before {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:last-child:before {
right: 140px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:last-child:before {
right: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content:last-child:before {
right: 18vw;
}
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:last-child .c-footer-btn-text {
right: 50%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:last-child .c-footer-btn-text {
right: 50%;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content:last-child .c-footer-btn-text {
left: 18vw;
}
}
.c-footer-btn-content:last-child:hover:before {
-webkit-transform: translateX(10px) rotate(180deg);
transform: translateX(10px) rotate(180deg);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.c-footer-btn-content:before {
content: '';
background-image: url("/bs/ayurtime/assets/images/common/arrow.png");
background-repeat: no-repeat;
position: absolute;
top: 50%;
}
@media screen and (min-width: 768px) {
.c-footer-btn-content:before {
background-size: 61px 11px;
width: 61px;
height: 11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-content:before {
background-size: 4.765625vw 0.859375vw;
width: 4.765625vw;
height: 0.859375vw;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content:before {
background-size: 14.000000000000002vw 2.533333333333333vw;
width: 14.000000000000002vw;
height: 2.533333333333333vw;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-content+.c-footer-btn-content {
border-top: 1px solid #9c8585;
}
}
.c-footer-btn-link {
display: block;
height: 100%;
}
@media screen and (min-width: 768px) {
.c-footer-btn-link {
width: 640px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-link {
width: 50vw;
}
}
.c-footer-btn-text {
color: #401e1f;
position: absolute;
top: 48%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.c-footer-btn-text {
font-size: 20px;
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-text {
font-size: calc(1vw * 20 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-text {
font-size: calc(1vw * 40 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
.c-footer-btn-span {
display: block;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.c-footer-btn-span {
font-size: 12px;
line-height: 4.02;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-footer-btn-span {
font-size: calc(1vw * 12 / 1280 * 100);
line-height: 4.02;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.c-footer-btn-span {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2.01;
letter-spacing: 0.2em;
}
}
.c-text-kizai {
display: block;
position: relative;
}
@media screen and (min-width: 768px) {
.c-text-kizai {
font-size: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-text-kizai {
font-size: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.c-text-kizai {
font-size: 1.333333333333333vw;
margin-top: 4vw;
top: 2.666666666666667vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-small .c-text-kizai {
position: relative;
top: -3.466666666666666vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content-text .c-text-kizai {
position: relative;
top: -2.133333333333333vw;
}
}
@media screen and (max-width: 767px) {
.p-point-text-small .c-text-kizai {
position: relative;
top: -3.466666666666666vw;
}
}
.c-mark-kome {
vertical-align: super;
}
@media screen and (min-width: 768px) {
.c-mark-kome {
font-size: 10px;
line-height: 1;
letter-spacing: 0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-mark-kome {
font-size: calc(1vw * 10 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.c-mark-kome {
font-size: calc(1vw * 10 / 750 * 100);
line-height: 1;
letter-spacing: 0.05em;
}
}
.view:not(.is-show) {
opacity: 0;
-webkit-transition: opacity 1s, -webkit-transform 2s ease 0.1s;
transition: opacity 1s, -webkit-transform 2s ease 0.1s;
transition: opacity 1s, transform 2s ease 0.1s;
transition: opacity 1s, transform 2s ease 0.1s, -webkit-transform 2s ease 0.1s;
}
@media screen and (min-width: 768px) {
.view:not(.is-show) {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.view:not(.is-show) {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
@media screen and (max-width: 767px) {
.view:not(.is-show) {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
.view.is-show {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 1s, -webkit-transform 2s ease 0.1s;
transition: opacity 1s, -webkit-transform 2s ease 0.1s;
transition: opacity 1s, transform 2s ease 0.1s;
transition: opacity 1s, transform 2s ease 0.1s, -webkit-transform 2s ease 0.1s;
}
.view-delay:not(.is-show) {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 1s 0.3s, -webkit-transform 2s ease 0.2s;
transition: opacity 1s 0.3s, -webkit-transform 2s ease 0.2s;
transition: opacity 1s 0.3s, transform 2s ease 0.2s;
transition: opacity 1s 0.3s, transform 2s ease 0.2s, -webkit-transform 2s ease 0.2s;
}
@media screen and (min-width: 768px) {
.view-delay:not(.is-show) {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.view-delay:not(.is-show) {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
@media screen and (max-width: 767px) {
.view-delay:not(.is-show) {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
.view-delay.is-show {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 1s 0.3s, -webkit-transform 2s ease 0.2s;
transition: opacity 1s 0.3s, -webkit-transform 2s ease 0.2s;
transition: opacity 1s 0.3s, transform 2s ease 0.2s;
transition: opacity 1s 0.3s, transform 2s ease 0.2s, -webkit-transform 2s ease 0.2s;
}
.kv-view:not(.is-show) {
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.kv-view.is-show {
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.kv-text:not(.is-show) {
opacity: 0;
-webkit-transition: opacity 1s 0.7s;
transition: opacity 1s 0.7s;
}
.kv-text.is-show {
opacity: 1;
-webkit-transition: opacity 1s 0.7s;
transition: opacity 1s 0.7s;
}
.kv-product:not(.is-show) {
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.kv-product.is-show {
opacity: 1;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.b-footer {
font-family: YakuHanMP_Noto, 'Noto Sans JP';
border-top: 1px solid #808080;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.b-footer {
padding-top: 20px;
font-size: 13px;
line-height: 2.153846153846154;
letter-spacing: 0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer {
padding-top: 1.5625vw;
font-size: calc(1vw * 13 / 1280 * 100);
line-height: 2.153846153846154;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.b-footer {
padding: 8vw 5.333333333333334vw;
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2.166666666666667;
letter-spacing: 0.05em;
}
}
.b-footer-inner {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.b-footer-inner {
max-width: 960px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-inner {
max-width: 960px;
}
}
@media screen and (min-width: 768px) {
.b-footer-inner-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-inner-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 767px) {
.b-footer-inner-box {
display: block;
}
}
.b-footer-text {
margin-right: auto;
}
@media screen and (min-width: 768px) {
.b-footer-text {
padding-left: 20px;
font-size: 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-text {
padding-left: 1.5625vw;
font-size: 1.171875vw;
}
}
@media screen and (min-width: 768px) {
.b-footer-contents {
font-size: 12px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-contents {
font-size: 0.9375vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 767px) {
.b-footer-contents {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.b-footer-contents .b-footer-contents-detail {
position: relative;
}
.b-footer-contents .b-footer-contents-detail+.b-footer-contents-detail:before {
position: absolute;
content: '';
display: inline-block;
width: 1px;
background-color: #808080;
}
@media screen and (min-width: 768px) {
.b-footer-contents .b-footer-contents-detail+.b-footer-contents-detail:before {
height: 13px;
top: 7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-contents .b-footer-contents-detail+.b-footer-contents-detail:before {
height: 1.015625vw;
top: 0.546875vw;
}
}
.b-footer-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 767px) {
.b-footer-group {
width: 90vw;
position: relative;
}
}
@media screen and (max-width: 767px) {
.b-footer-group-content:last-child {
margin-left: 8.666666666666668vw;
}
}
.b-footer-group-content:last-child:before {
content: '';
display: inline-block;
width: 1px;
background-color: #808080;
position: relative;
}
@media screen and (min-width: 768px) {
.b-footer-group-content:last-child:before {
left: 0;
top: 2px;
height: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-group-content:last-child:before {
left: 0px;
top: 0.15625vw;
height: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.b-footer-group-content:last-child:before {
left: -4.266666666666667vw;
top: 0.266666666666667vw;
height: 3.333333333333333vw;
}
}
.b-footer-contents-detail a {
text-decoration: none;
color: #666;
}
@media screen and (min-width: 768px) {
.b-footer-contents-detail a {
padding: 0 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-contents-detail a {
padding: 0 1.5625vw;
}
}
.b-footer-copyright {
color: #8f8f8f;
}
@media screen and (min-width: 768px) {
.b-footer-copyright {
padding-right: 20px;
font-size: 10px;
margin: 15px 0 30px;
text-align: right;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-footer-copyright {
padding-right: 1.5625vw;
font-size: 0.78125vw;
margin: 1.171875vw 0 2.34375vw;
text-align: right;
}
}
@media screen and (max-width: 767px) {
.b-footer-copyright {
font-size: calc(1vw * 11 / 750 * 100);
line-height: 1;
letter-spacing: 0.01em;
margin: 6vw 0 8vw;
}
}
.b-header {
position: fixed;
top: var(--closeNewTop);
top: 0;
left: 0;
width: 100%;
z-index: 1;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
@media screen and (min-width: 768px) {
.b-header {
padding: 90px 25px 25px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-header {
padding: 90px 1.953125vw 1.953125vw;
max-width: 100vw;
}
}
@media screen and (max-width: 767px) {
.b-header {
padding: 90px 5.600000000000001vw 5.600000000000001vw;
max-width: 102.4vw;
}
}
.b-header:not(.is-loaded) {
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.b-header.is-loaded {
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.b-header-logo {
display: block;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
.b-header-logo {
width: 156px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-header-logo {
width: 12.1875vw;
}
}
@media screen and (max-width: 767px) {
.b-header-logo {
width: 33.6vw;
margin: 0 auto;
}
}
.b-header-menu {
pointer-events: auto;
cursor: pointer;
position: absolute;
bottom: 30px;
}
@media screen and (min-width: 768px) {
.b-header-menu {
width: 46px;
right: 25px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-header-menu {
width: 3.59375vw;
right: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.b-header-menu {
width: 10.666666666666668vw;
right: 5.600000000000001vw;
}
}
.b-header-menu span {
display: block;
width: 100%;
}
@media screen and (min-width: 768px) {
.b-header-menu span {
height: 2px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-header-menu span {
height: 0.15625vw;
}
}
@media screen and (max-width: 767px) {
.b-header-menu span {
height: 0.533333333333333vw;
}
}
@media screen and (min-width: 768px) {
.b-header-menu span+span {
margin-top: 8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.b-header-menu span+span {
margin-top: 0.625vw;
}
}
@media screen and (max-width: 767px) {
.b-header-menu span+span {
margin-top: 1.466666666666667vw;
}
}
.color-0 .b-header-logo .is-white {
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.color-0 .b-header-logo .is-black {
display: none;
}
.color-0 .b-header-menu span {
background-color: #fff;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.color-1:not(.no-active) .b-header-logo .is-white {
display: none;
}
.color-1:not(.no-active) .b-header-logo .is-black {
opacity: 1;
pointer-events: none;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.color-1.no-active .b-header-logo .is-white {
display: none;
}
.color-1.no-active .b-header-logo .is-black {
opacity: 0;
pointer-events: auto;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.color-1 .b-header-menu span {
background-color: #300c0d;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.color-2 .b-header-logo {
pointer-events: none;
}
.color-2 .b-header-logo .is-white {
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.color-2 .b-header-logo .is-black {
display: none;
}
.color-2 .b-header-menu span {
background-color: #300c0d;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.p-concept {
background-size: cover;
background-repeat: no-repeat;
color: #401e1f;
}
@media screen and (min-width: 768px) {
.p-concept {
background-image: url("/bs/ayurtime/assets/images/concept/concept-bg_pc.jpg");
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept {
background-image: url("/bs/ayurtime/assets/images/concept/concept-bg_pc.jpg");
}
}
@media screen and (max-width: 767px) {
.p-concept {
background: -webkit-gradient(linear, left top, left bottom, from(#fff7f0), to(#feeeeb));
background: -webkit-linear-gradient(#fff7f0, #feeeeb);
background: linear-gradient(#fff7f0, #feeeeb);
}
}
@media screen and (min-width: 768px) {
.p-concept.is-features {
background-image: url("/bs/ayurtime/assets/images/features/features-bg_pc.jpg");
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept.is-features {
background-image: url("/bs/ayurtime/assets/images/features/features-bg_pc.jpg");
}
}
@media screen and (max-width: 767px) {
.p-concept.is-features {
background: -webkit-gradient(linear, left top, left bottom, from(#fbf0f3), color-stop(#eeeef9), to(#eff4f8));
background: -webkit-linear-gradient(#fbf0f3, #eeeef9, #eff4f8);
background: linear-gradient(#fbf0f3, #eeeef9, #eff4f8);
}
}
.p-concept-text {
text-align: center;
}
@media screen and (min-width: 768px) {
.p-concept-text {
padding-top: 143px;
font-size: 16px;
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-text {
padding-top: 11.171875vw;
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.p-concept-text {
padding-top: 41.06666666666667vw;
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
.p-concept-title {
text-align: center;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.p-concept-title {
font-size: 36px;
line-height: 1;
letter-spacing: 0.05em;
margin-top: 81px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-title {
font-size: calc(1vw * 36 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-top: 6.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-title {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.388888888888889;
letter-spacing: 0.05em;
margin-top: 11.466666666666667vw;
}
}
@media screen and (min-width: 768px) {
.p-concept-list {
margin: 127px auto 0;
padding-bottom: 240px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-list {
margin: 9.921875vw auto 0;
padding-bottom: 18.75vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-list {
margin: 18.666666666666668vw auto 0;
padding-bottom: 26.666666666666668vw;
}
}
@media screen and (min-width: 768px) {
.p-concept-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.p-concept-content {
display: block;
}
}
@media screen and (min-width: 768px) {
.p-concept-content:nth-child(odd) .p-concept-content-image {
width: 386px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content:nth-child(odd) .p-concept-content-image {
width: 30.15625vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content:nth-child(odd) .p-concept-content-image {
width: 65.33333333333333vw;
position: relative;
left: 2.666666666666667vw;
}
}
.p-concept-content:nth-child(odd) .p-concept-content-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-concept-content:nth-child(odd) .p-concept-content-text {
margin-left: 38px;
top: -7px;
left: 58px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content:nth-child(odd) .p-concept-content-text {
margin-left: 2.96875vw;
top: -0.546875vw;
left: 4.53125vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content:nth-child(odd) .p-concept-content-text {
left: 2.666666666666667vw;
top: -2.133333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-concept-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) {
.p-concept-content:nth-child(even) .p-concept-content-image {
width: 251px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content:nth-child(even) .p-concept-content-image {
width: 19.609375vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content:nth-child(even) .p-concept-content-image {
width: 47.656000000000006vw;
margin-left: auto;
position: relative;
left: -2.666666666666667vw;
}
}
.p-concept-content:nth-child(even) .p-concept-content-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-concept-content:nth-child(even) .p-concept-content-text {
margin-right: 202px;
top: -2px;
left: 116px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content:nth-child(even) .p-concept-content-text {
margin-right: 15.78125vw;
top: -0.15625vw;
left: 9.0625vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content:nth-child(even) .p-concept-content-text {
text-align: right;
top: -2.4vw;
left: -2.133333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-concept-content+.p-concept-content {
margin-top: 159px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content+.p-concept-content {
margin-top: 12.421875vw;
}
}
@media screen and (max-width: 767px) {
.p-concept-content+.p-concept-content {
margin-top: 13.600000000000001vw;
}
}
@media screen and (min-width: 768px) {
.p-concept-content-image {
-webkit-box-shadow: 20px 20px 50px #d8b9b0;
box-shadow: 20px 20px 50px #d8b9b0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content-image {
-webkit-box-shadow: 1.5625vw 1.5625vw 3.90625vw #d8b9b0;
box-shadow: 1.5625vw 1.5625vw 3.90625vw #d8b9b0;
}
}
@media screen and (max-width: 767px) {
.p-concept-content-image {
-webkit-box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #d8b9b0;
box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #d8b9b0;
}
}
@media screen and (min-width: 768px) {
.p-concept-content-text {
font-size: 16px;
line-height: 2.5;
letter-spacing: 0em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-concept-content-text {
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 2.5;
letter-spacing: 0em;
}
}
@media screen and (max-width: 767px) {
.p-concept-content-text {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2.333333333333333;
letter-spacing: 0em;
margin-top: 9.333333333333334vw;
}
}
.c-head-text {
text-align: center;
font-family: YakuHanMP_Noto, 'Noto Serif JP';
font-weight: 500;
}
@media screen and (min-width: 768px) {
.c-head-text {
margin: 40px auto 0;
font-size: 16px;
line-height: 1.75;
letter-spacing: 0em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.c-head-text {
margin: 3.125vw auto 0;
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 1.75;
letter-spacing: 0em;
}
}
@media screen and (max-width: 767px) {
.c-head-text {
margin: 4.533333333333333vw auto 0;
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2;
letter-spacing: 0em;
}
}
@media screen and (min-width: 768px) {
.p-feature-list {
margin: 99px auto 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-list {
margin: 7.734375vw auto 0;
}
}
@media screen and (max-width: 767px) {
.p-feature-list {
margin: 18.133333333333333vw auto 0;
}
}
.p-feature-content {
text-align: center;
}
@media screen and (min-width: 768px) {
.p-feature-content {
font-size: 24px;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 103px;
width: calc((100% - 20px) / 3);
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content {
font-size: calc(1vw * 24 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 8.046875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 13.333333333333334vw;
}
}
.p-feature-content:nth-child(1) .p-feature-img {
position: relative;
}
/*@media screen and (min-width: 768px) {
.p-feature-content:nth-child(1) .p-feature-img {
top: -10px;
left: 38px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(1) .p-feature-img {
top: -0.78125vw;
left: 2.96875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(1) .p-feature-img {
left: 2.133333333333333vw;
}
}
.p-feature-content:nth-child(1) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(1) .p-feature-aroma {
top: -10px;
left: 32px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(1) .p-feature-aroma {
top: -0.78125vw;
left: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(1) .p-feature-aroma {
top: 1.866666666666667vw;
}
}
.p-feature-content:nth-child(1) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(1) .p-feature-text {
top: -16px;
left: 30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(1) .p-feature-text {
top: -1.25vw;
left: 2.34375vw;
}
}
.p-feature-content:nth-child(2) .p-feature-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(2) .p-feature-img {
width: 243px;
top: -7px;
left: -7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(2) .p-feature-img {
width: 18.984375vw;
top: -0.546875vw;
left: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(2) .p-feature-img {
top: -2.133333333333333vw;
left: -2.933333333333333vw;
width: 64.53333333333333vw;
}
}
.p-feature-content:nth-child(2) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(2) .p-feature-aroma {
top: -14px;
left: 4px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(2) .p-feature-aroma {
top: -1.09375vw;
left: 0.3125vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(2) .p-feature-aroma {
top: -1.866666666666667vw;
}
}
.p-feature-content:nth-child(2) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(2) .p-feature-text {
top: -20px;
left: 5px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(2) .p-feature-text {
top: -1.5625vw;
left: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(2) .p-feature-text {
top: -3.733333333333334vw;
}
}
.p-feature-content:nth-child(3) .p-feature-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(3) .p-feature-img {
width: 208px;
top: -13px;
left: -30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(3) .p-feature-img {
width: 16.25vw;
top: -1.015625vw;
left: -2.34375vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(3) .p-feature-img {
top: -5.600000000000001vw;
width: 56.266666666666666vw;
}
}
.p-feature-content:nth-child(3) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(3) .p-feature-text {
top: -13px;
left: -26px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(3) .p-feature-text {
top: -1.015625vw;
left: -2.03125vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(3) .p-feature-text {
top: -1.866666666666667vw;
left: 2.133333333333333vw;
}
}
.p-feature-content:nth-child(3) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(3) .p-feature-aroma {
top: -4px;
left: -25px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(3) .p-feature-aroma {
top: -0.3125vw;
left: -1.953125vw;
}
}
.p-feature-content:nth-child(4) .p-feature-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(4) .p-feature-img {
width: 221px;
top: -26px;
left: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(4) .p-feature-img {
width: 17.265625vw;
top: -2.03125vw;
left: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(4) .p-feature-img {
width: 59.86666666666667vw;
top: -3.733333333333334vw;
}
}
.p-feature-content:nth-child(4) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(4) .p-feature-text {
top: -27px;
left: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(4) .p-feature-text {
top: -2.109375vw;
left: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(4) .p-feature-text {
top: -2.4vw;
}
}
.p-feature-content:nth-child(4) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(4) .p-feature-aroma {
top: -20px;
left: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(4) .p-feature-aroma {
top: -1.5625vw;
left: 1.015625vw;
}
}
.p-feature-content:nth-child(5) .p-feature-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(5) .p-feature-img {
width: 247px;
top: -26px;
left: -4px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(5) .p-feature-img {
width: 19.296875vw;
top: -2.03125vw;
left: -0.3125vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(5) .p-feature-img {
width: 67.33333333333333vw;
top: -4.266666666666667vw;
left: 1.6vw;
}
}
.p-feature-content:nth-child(5) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(5) .p-feature-text {
top: -26px;
left: -8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(5) .p-feature-text {
top: -2.03125vw;
left: -0.625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(5) .p-feature-text {
top: -2.133333333333333vw;
}
}
.p-feature-content:nth-child(5) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(5) .p-feature-aroma {
top: -20px;
left: -8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(5) .p-feature-aroma {
top: -1.5625vw;
left: -0.625vw;
}
}
.p-feature-content:nth-child(6) .p-feature-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(6) .p-feature-img {
width: 232px;
top: -25px;
left: -17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(6) .p-feature-img {
width: 18.125vw;
top: -1.953125vw;
left: -1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(6) .p-feature-img {
width: 63.6vw;
top: -4vw;
left: 1.6vw;
}
}
.p-feature-content:nth-child(6) .p-feature-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(6) .p-feature-aroma {
top: -20px;
left: -21px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(6) .p-feature-aroma {
top: -1.5625vw;
left: -1.640625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(6) .p-feature-aroma {
top: -3.2vw;
}
}
.p-feature-content:nth-child(6) .p-feature-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-feature-content:nth-child(6) .p-feature-text {
top: -28px;
left: -22px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-content:nth-child(6) .p-feature-text {
top: -2.1875vw;
left: -1.71875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-content:nth-child(6) .p-feature-text {
top: -5.333333333333334vw;
}
}*/
@media screen and (min-width: 768px) {
.p-feature-img {
width: 255px;
margin: 0 auto 29px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-img {
width: 19.921875vw;
margin: 0 auto 2.265625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-img {
width: 69.33333333333334vw;
margin: 0 auto 2.533333333333333vw;
}
}
.p-feature-aroma {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-feature-aroma {
font-size: 16px;
line-height: 1;
letter-spacing: 0.05em;
margin-top: 31px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-aroma {
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-top: 2.421875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-aroma {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-top: 6.666666666666667vw;
}
}
@media screen and (min-width: 768px) {
.p-feature-text {
font-size: 14px;
line-height: 1.714285714285714;
letter-spacing: 0em;
margin-top: 22px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-text {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 1.714285714285714;
letter-spacing: 0em;
margin-top: 1.71875vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-text {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2;
letter-spacing: 0em;
margin-top: 4.266666666666667vw;
}
}
.p-feature-title-pink {
color: #dd7ca2;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-pink {
top: -9px;
left: 32px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-pink {
top: -0.703125vw;
left: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-title-pink {
top: 2.133333333333333vw;
}
}*/
.p-feature-title-blue {
color: #5aafc1;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-blue {
top: -13px;
left: 5px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-blue {
top: -1.015625vw;
left: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-title-blue {
top: -1.6vw;
}
}*/
.p-feature-title-yellow {
color: #d8a300;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-yellow {
top: -4px;
left: -25px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-yellow {
top: -0.3125vw;
left: -1.953125vw;
}
}*/
.p-feature-title-green {
color: #4aa474;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-green {
top: -19px;
left: 12px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-green {
top: -1.484375vw;
left: 0.9375vw;
}
}*/
.p-feature-title-orange {
color: #eb8b44;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-orange {
top: -20px;
left: -7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-orange {
top: -1.5625vw;
left: -0.546875vw;
}
}*/
.p-feature-title-red {
color: #e25b5b;
position: relative;
font-weight: 600;
}
/*@media screen and (min-width: 768px) {
.p-feature-title-red {
top: -19px;
left: -21px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-feature-title-red {
top: -1.484375vw;
left: -1.640625vw;
}
}
@media screen and (max-width: 767px) {
.p-feature-title-red {
top: -0.8vw;
}
}*/
@media screen and (min-width: 768px) {
.p-point-list {
padding-top: 109px;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-list {
padding-top: 8.515625vw;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.p-point-list {
padding-top: 19.2vw;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) {
.p-point-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.p-point-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.p-point-content:nth-child(odd) .p-text-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(odd) .p-text-box {
margin-right: 33px;
top: 5px;
left: -7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(odd) .p-text-box {
margin-right: 2.578125vw;
top: 0.390625vw;
left: -0.546875vw;
}
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (max-width: 767px) {
.p-point-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
flex-direction: column-reverse;
}
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(even) .p-text-box {
margin-left: 80px;
margin-right: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(even) .p-text-box {
margin-left: 6.25vw;
margin-right: 0;
}
}
@media screen and (max-width: 767px) {
.p-point-content:nth-child(even) .p-text-box {
text-align: right;
}
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(even) .p-point-img {
top: 2px;
left: -28px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(even) .p-point-img {
top: 0.15625vw;
left: -2.1875vw;
}
}
@media screen and (max-width: 767px) {
.p-point-content:nth-child(even) .p-point-img {
margin-left: auto;
}
}
.p-point-content:nth-child(even) .p-point-text-large {
position: relative;
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(even) .p-point-text-large {
top: 10px;
left: -30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(even) .p-point-text-large {
top: 0.78125vw;
left: -2.34375vw;
}
}
@media screen and (min-width: 768px) {
.p-point-content:nth-child(even) .p-point-text-small {
top: -5px;
left: -30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content:nth-child(even) .p-point-text-small {
top: -0.390625vw;
left: -2.34375vw;
}
}
@media screen and (min-width: 768px) {
.p-point-content+.p-point-content {
margin-top: 240px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content+.p-point-content {
margin-top: 18.75vw;
}
}
@media screen and (max-width: 767px) {
.p-point-content+.p-point-content {
margin-top: 11.733333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-point-content .p-text-box {
margin-right: 33px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-content .p-text-box {
margin-right: 2.578125vw;
}
}
.p-point-text-large {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-point-text-large {
font-size: 36px;
line-height: 1.555555555555556;
letter-spacing: 0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-text-large {
font-size: calc(1vw * 36 / 1280 * 100);
line-height: 1.555555555555556;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-point-text-large {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.555555555555556;
letter-spacing: 0.05em;
margin-top: 8.133333333333333vw;
}
}
.p-point-text-small {
position: relative;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.p-point-text-small {
font-size: 16px;
line-height: 1.75;
letter-spacing: 0em;
margin-top: 57px;
top: -18px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-text-small {
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 1.75;
letter-spacing: 0em;
margin-top: 4.453125vw;
top: -1.40625vw;
}
}
@media screen and (max-width: 767px) {
.p-point-text-small {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2;
letter-spacing: 0em;
margin-top: 6.666666666666667vw;
top: -2.933333333333333vw;
}
}
.p-point-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-point-img {
-webkit-box-shadow: 1.5625vw 1.5625vw 3.90625vw #b3bdd4;
box-shadow: 1.5625vw 1.5625vw 3.90625vw #b3bdd4;
width: 620px;
left: 7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-img {
-webkit-box-shadow: 1.5625vw 1.5625vw 3.90625vw #b3bdd4;
box-shadow: 1.5625vw 1.5625vw 3.90625vw #b3bdd4;
width: 48.4375vw;
left: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-point-img {
-webkit-box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #b3bdd4;
box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #b3bdd4;
width: 82.66666666666667vw;
}
}
@media screen and (min-width: 768px) {
.p-point-span {
font-size: 14px;
line-height: 1;
letter-spacing: -0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-point-span {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 1;
letter-spacing: -0.05em;
}
}
@media screen and (max-width: 767px) {
.p-point-span {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.555555555555556;
letter-spacing: -0.05em;
}
}
@media screen and (min-width: 768px) {
.p-material-list {
margin: 84px auto 0;
padding-bottom: 245px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-list {
margin: 6.5625vw auto 0;
padding-bottom: 19.140625vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.p-material-list {
margin: 15.466666666666667vw auto 0;
padding-bottom: 26.666666666666668vw;
display: block;
}
}
@media screen and (min-width: 768px) {
.p-material-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media screen and (max-width: 767px) {
.p-material-content {
display: block;
}
}
@media screen and (max-width: 767px) {
.p-material-content+.p-material-content {
margin-top: 13.066666666666665vw;
}
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(1) .p-material-img {
width: 142px;
top: 9px;
left: -4px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(1) .p-material-img {
width: 11.09375vw;
top: 0.703125vw;
left: -0.3125vw;
}
}
@media screen and (max-width: 767px) {
.p-material-content:nth-child(1) .p-material-img {
width: 24.4vw;
}
}
.p-material-content:nth-child(1) .p-text-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(1) .p-text-box {
top: -2px;
left: 8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(1) .p-text-box {
top: -0.15625vw;
left: 0.625vw;
}
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(1) .p-material-name {
top: 24px;
left: -11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(1) .p-material-name {
top: 1.875vw;
left: -0.859375vw;
}
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(1) .p-material-text {
top: 12px;
left: -11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(1) .p-material-text {
top: 0.9375vw;
left: -0.859375vw;
}
}
.p-material-content:nth-child(2) .p-material-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(2) .p-material-img {
top: 7px;
left: 9px;
width: 140px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(2) .p-material-img {
top: 0.546875vw;
left: 0.703125vw;
width: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.p-material-content:nth-child(2) .p-material-img {
width: 26.266666666666666vw;
}
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(2) .p-material-name {
/*top: 26px;*/
top: 24px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(2) .p-material-name {
/*top: 2.03125vw;*/
top: 1.875vw;
}
}
@media screen and (min-width: 768px) {
.p-material-content:nth-child(2) .p-material-text {
top: 12px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-content:nth-child(2) .p-material-text {
top: 0.9375vw;
left: -0.859375vw;
}
}
.p-material-img {
position: relative;
}
@media screen and (max-width: 767px) {
.p-material-img {
margin: 0 auto;
}
}
.p-material-name {
position: relative;
font-weight: 600;
line-height: 1.5 !important;
}
@media screen and (min-width: 768px) {
.p-material-name {
font-size: 18px;
line-height: 1.611111111111111;
letter-spacing: 0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-name {
font-size: calc(1vw * 18 / 1280 * 100);
line-height: 1.611111111111111;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-material-name {
text-align: center;
font-size: calc(1vw * 32 / 750 * 100);
line-height: 0.90625;
letter-spacing: 0.05em;
margin-top: 6.666666666666667vw;
top: 1.333333333333333vw;
}
}
.p-material-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-material-text {
font-size: 14px;
line-height: 1.714285714285714;
letter-spacing: 0.05em;
margin-top: 25px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-text {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 1.714285714285714;
letter-spacing: 0.05em;
margin-top: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.p-material-text {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1.583333333333333;
letter-spacing: 0.05em;
margin-top: 4vw;
}
}
@media screen and (min-width: 768px) {
.p-material-list .p-text-box {
width: 320.03px;
margin-left: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-material-list .p-text-box {
width: 25.00234375vw;
margin-left: 1.5625vw;
}
}
.p-gnav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
z-index: 100;
}
.p-gnav-wrapper:not(.is-show) {
opacity: 0;
pointer-events: none;
}
.p-gnav-wrapper:not(.is-show) .p-gnav-content {
pointer-events: none;
left: 100%;
-webkit-transition: left 0.5s ease 0.5s;
transition: left 0.5s ease 0.5s;
}
.p-gnav-wrapper:not(.is-show) .p-gnav-item {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
opacity: 0;
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transition-delay: 0;
transition-delay: 0;
}
.p-gnav-wrapper:not(.is-show) .p-gnav-close {
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.p-gnav-wrapper.is-show {
opacity: 1;
pointer-events: auto;
}
.p-gnav-wrapper.is-show .p-gnav-content {
pointer-events: auto;
-webkit-transition: left 1s ease;
transition: left 1s ease;
}
@media screen and (min-width: 768px) {
.p-gnav-wrapper.is-show .p-gnav-content {
left: 50%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-wrapper.is-show .p-gnav-content {
left: 50%;
}
}
@media screen and (max-width: 767px) {
.p-gnav-wrapper.is-show .p-gnav-content {
left: 0;
}
}
.p-gnav-wrapper.is-show .p-gnav-item {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
-webkit-transition: opacity 1s ease 0.5s, -webkit-transform 1s ease 0.5s;
transition: opacity 1s ease 0.5s, -webkit-transform 1s ease 0.5s;
transition: transform 1s ease 0.5s, opacity 1s ease 0.5s;
transition: transform 1s ease 0.5s, opacity 1s ease 0.5s, -webkit-transform 1s ease 0.5s;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(1) {
-webkit-transition-delay: 1s !important;
transition-delay: 1s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(2) {
-webkit-transition-delay: 1.1s !important;
transition-delay: 1.1s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(3) {
-webkit-transition-delay: 1.2s !important;
transition-delay: 1.2s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(4) {
-webkit-transition-delay: 1.3s !important;
transition-delay: 1.3s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(5) {
-webkit-transition-delay: 1.4s !important;
transition-delay: 1.4s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(6) {
-webkit-transition-delay: 1.5s !important;
transition-delay: 1.5s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(7) {
-webkit-transition-delay: 1.6s !important;
transition-delay: 1.6s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(8) {
-webkit-transition-delay: 1.7s !important;
transition-delay: 1.7s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(9) {
-webkit-transition-delay: 1.8s !important;
transition-delay: 1.8s !important;
}
.p-gnav-wrapper.is-show .p-gnav-item:nth-child(10) {
-webkit-transition-delay: 1.9s !important;
transition-delay: 1.9s !important;
}
.p-gnav-wrapper.is-show .p-gnav-close {
opacity: 1;
-webkit-transition: opacity 0.5s ease 2s;
transition: opacity 0.5s ease 2s;
}
.p-gnav-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
.p-gnav-content {
position: absolute;
top: 0;
left: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
overflow: scroll;
}
@media screen and (min-width: 768px) {
.p-gnav-content {
width: 50%;
/*padding: 0 144px;*/
padding: 0 72px;
padding-right: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-content {
width: 50%;
/*padding: 0 11.25vw;*/
padding: 0 5.5vw;
padding-right: 0;
}
}
@media screen and (max-width: 767px) {
.p-gnav-content {
width: 100%;
/*padding: 0 17.599999999999998vw;*/
padding: 0 8.5vw;
}
}
.p-gnav-box {
padding: 110px 0;
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
@media screen and (min-width: 768px) {
.p-gnav-box {
padding: 110px 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-box {
padding: 8.59375vw 0;
}
}
@media screen and (max-width: 767px) {
.p-gnav-box {
padding: 25.466666666666665vw 0;
}
}
.p-gnav-list {
min-height: 100%;
}
.p-gnav-item a {
color: #401e1f;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
display: block;
}
@media screen and (min-width: 768px) {
.p-gnav-item a {
font-size: 28.03px;
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-item a {
font-size: calc(1vw * 28.03 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.p-gnav-item a {
font-size: calc(1vw * 50 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
.p-gnav-item a:not(:hover) {
opacity: 1;
}
.p-gnav-item a:hover {
opacity: 0.5;
text-decoration: none;
}
@media screen and (min-width: 768px) {
.p-gnav-item+.p-gnav-item {
margin-top: 67px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-item+.p-gnav-item {
margin-top: 5.234375vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-item+.p-gnav-item {
margin-top: 15.066666666666666vw;
}
}
.p-gnav-close {
position: absolute;
top: 27px;
right: 27px;
width: 58px;
height: 58px;
display: inline-block;
text-decoration: none;
z-index: 100;
}
@media screen and (min-width: 768px) {
.p-gnav-close {
top: calc(27px + var(--closeNewTop));
/* top: 27px; */
right: 27px;
width: 58px;
height: 58px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-close {
top: calc(2.109375vw + var(--closeNewTop));
/* top: 2.109375vw; */
right: 2.109375vw;
width: 4.53125vw;
height: 4.53125vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-close {
top: calc(5.333333333333334vw + var(--closeNewTop));
/* top: 5.333333333333334vw; */
right: 5.333333333333334vw;
width: 10.666666666666668vw;
height: 10.666666666666668vw;
}
}
.p-gnav-close::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 1px;
background: #300c0d;
display: inline-black;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
.p-gnav-close::before {
width: 82px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-close::before {
width: 6.406249999999999vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-close::before {
width: 14.933333333333335vw;
}
}
.p-gnav-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: 1px;
background: #300c0d;
display: inline-black;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 768px) {
.p-gnav-close::after {
width: 82px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-close::after {
width: 6.406249999999999vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-close::after {
width: 14.933333333333335vw;
}
}
.p-gnav-span {
position: relative;
}
@media screen and (min-width: 768px) {
.p-gnav-span {
font-size: 14px;
line-height: 1;
letter-spacing: 0.2em;
left: 3px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-span {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
left: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-span {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
left: 0.666666666666667vw;
}
}
@media screen and (min-width: 768px) {
.p-gnav-span+.p-gnav-text {
margin-top: 18px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-gnav-span+.p-gnav-text {
margin-top: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.p-gnav-span+.p-gnav-text {
margin-top: 5.2vw;
}
}
.p-intro-list {
color: #401e1f;
}
@media screen and (min-width: 768px) {
.p-intro-list {
padding: 185px 0 240px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-list {
padding: 14.453125vw 0 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-list {
padding: 26.400000000000002vw 0 13.333333333333334vw;
}
}
.p-intro-content {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.p-intro-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.p-intro-content {
display: block;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(even) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(even) {
display: block;
text-align: right;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(even) .p-intro-top {
margin-top: 28px;
position: relative;
top: -10px;
left: -15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(even) .p-intro-top {
margin-top: 2.1875vw;
position: relative;
top: -0.78125vw;
left: -1.171875vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(even) .p-intro-content-item:nth-child(2) {
margin-right: 76px;
margin-left: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(even) .p-intro-content-item:nth-child(2) {
margin-right: 5.9375vw;
margin-left: 0;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(even) .p-intro-img {
margin-left: auto;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(even) .p-intro-link {
margin: 9.2vw 5.333333333333334vw 0 auto;
width: auto;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(1) .p-intro-large {
top: -9px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(1) .p-intro-large {
top: -0.703125vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(1) .p-intro-large {
top: -0.666666666666667vw;
}
}
.p-intro-content:nth-child(1) .p-intro-small {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(1) .p-intro-small {
top: -19px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(1) .p-intro-small {
top: -1.484375vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(1) .p-intro-small {
top: -4vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(1) .p-intro-link {
top: -6.133333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(2) .p-intro-img {
position: relative;
left: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(2) .p-intro-img {
position: relative;
left: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(2) .p-intro-top {
position: relative;
left: 0.4vw;
}
}
.p-intro-content:nth-child(2) .p-intro-large {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(2) .p-intro-large {
top: -20px;
left: -15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(2) .p-intro-large {
top: -1.5625vw;
left: -1.171875vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(2) .p-intro-large {
top: -1.866666666666667vw;
left: 1.066666666666667vw;
}
}
.p-intro-content:nth-child(2) .p-intro-small {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(2) .p-intro-small {
top: -32px;
left: -14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(2) .p-intro-small {
top: -2.5vw;
left: -1.09375vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(2) .p-intro-small {
top: -5.066666666666666vw;
}
}
.p-intro-content:nth-child(2) .p-intro-link {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(2) .p-intro-link {
top: -11px;
left: -16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(2) .p-intro-link {
top: -0.859375vw;
left: -1.25vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(2) .p-intro-link {
top: -6.933333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(3) .p-intro-img {
position: relative;
top: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(3) .p-intro-img {
position: relative;
top: 0.46875vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(3) .p-intro-large {
font-size: 24px;
line-height: 1.666666666666667;
letter-spacing: 0.02em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(3) .p-intro-large {
font-size: calc(1vw * 24 / 1280 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.02em;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(3) .p-intro-large {
top: -2.4vw;
}
}
.p-intro-content:nth-child(3) .p-intro-small {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(3) .p-intro-small {
top: -18px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(3) .p-intro-small {
top: -1.40625vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(3) .p-intro-small {
top: -5.333333333333334vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(3) .p-intro-link {
top: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(3) .p-intro-link {
top: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content:nth-child(3) .p-intro-link {
top: -13.333333333333334vw;
}
}
.p-intro-content:nth-child(3) .p-intro-top {
position: relative;
}
@media screen and (min-width: 768px) {
.p-intro-content:nth-child(3) .p-intro-top {
top: 4px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content:nth-child(3) .p-intro-top {
top: 0.3125vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-content+.p-intro-content {
margin-top: 157px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content+.p-intro-content {
margin-top: 12.265625vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-content+.p-intro-content {
margin-top: 13.333333333333334vw;
}
}
@media screen and (min-width: 768px) {
.p-intro-img {
width: 520px;
height: 390px;
-webkit-box-shadow: 20px 20px 50px #deb9c4;
box-shadow: 20px 20px 50px #deb9c4;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-img {
width: 40.625vw;
height: 30.46875vw;
-webkit-box-shadow: 1.5625vw 1.5625vw 3.90625vw #deb9c4;
box-shadow: 1.5625vw 1.5625vw 3.90625vw #deb9c4;
}
}
@media screen and (max-width: 767px) {
.p-intro-img {
width: 72.8vw;
height: 54.666666666666664vw;
-webkit-box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #deb9c4;
box-shadow: 2.666666666666667vw 2.666666666666667vw 6.666666666666667vw #deb9c4;
}
}
@media screen and (min-width: 768px) {
.p-intro-img img {
width: 520px;
height: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-img img {
width: 40.625vw;
height: 100%;
}
}
@media screen and (max-width: 767px) {
.p-intro-img img {
width: 72.8vw;
height: 100%;
}
}
@media screen and (min-width: 768px) {
.p-intro-top {
font-size: 12px;
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-top {
font-size: calc(1vw * 12 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.p-intro-top {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
margin-top: 10vw;
}
}
.p-intro-large {
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-intro-large {
font-size: 24px;
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-top: 68px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-large {
font-size: calc(1vw * 24 / 1280 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-top: 5.3125vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-large {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-top: 11.866666666666667vw;
}
}
.p-intro-small {
font-family: YakuHanMP_Noto, 'Noto Serif JP';
}
@media screen and (min-width: 768px) {
.p-intro-small {
font-size: 14px;
line-height: 2;
letter-spacing: 0em;
margin-top: 40px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-small {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 2;
letter-spacing: 0em;
margin-top: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-small {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2;
letter-spacing: 0em;
margin-top: 6.666666666666667vw;
}
}
.p-intro-link {
display: block;
color: #401e1f;
position: relative;
white-space: nowrap;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
.p-intro-link {
font-size: 16px;
line-height: 1;
letter-spacing: 0.2em;
margin-top: 40px;
width: 116px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-link {
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
margin-top: 3.125vw;
width: 9.0625vw;
}
}
@media screen and (max-width: 767px) {
.p-intro-link {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
margin-top: 9.2vw;
width: 23.112vw;
}
}
.p-intro-link:after {
content: '';
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
.p-intro-link:after {
width: 6px;
height: 6px;
border-top: 1px solid #401e1f;
border-right: 1px solid #401e1f;
left: calc(100% + 16px);
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-link:after {
width: 0.46875vw;
height: 0.46875vw;
border-top: 0.078125vw solid #401e1f;
border-right: 0.078125vw solid #401e1f;
left: calc(100% + 1.25vw);
}
}
@media screen and (max-width: 767px) {
.p-intro-link:after {
width: 1.6vw;
height: 1.6vw;
border-top: 0.133333333333333vw solid #401e1f;
border-right: 0.133333333333333vw solid #401e1f;
left: calc(100% + 3.2vw);
}
}
.p-intro-link:hover {
opacity: 0.5;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
color: inherit;
text-decoration: none;
}
@media screen and (min-width: 768px) {
.p-intro-content-item+.p-intro-content-item {
margin-left: 60px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-intro-content-item+.p-intro-content-item {
margin-left: 4.6875vw;
}
}
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list {
background: #fff url('../images/slick-carousel/ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face {
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('../fonts/slick-carousel/slick.eot');
src: url('../fonts/slick-carousel/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick-carousel/slick.woff') format('woff'), url('../fonts/slick-carousel/slick.ttf') format('truetype'), url('../fonts/slick-carousel/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.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:before,
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: '←';
}
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-next {
right: -25px;
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: '→';
}
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
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 {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
.p-kv-list {
overflow: hidden;
position: relative;
height: 100vh;
}
@media screen and (min-width: 768px) {
.p-kv-content-bg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-content-bg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 767px) {
.p-kv-content-bg {
display: block;
}
}
@media screen and (min-width: 768px) {
.p-kv-bg-left,
.p-kv-bg-right {
width: 50%;
height: 100vh;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-bg-left,
.p-kv-bg-right {
width: 50%;
height: 100vh;
}
}
@media screen and (max-width: 767px) {
.p-kv-bg-left,
.p-kv-bg-right {
width: 100%;
height: 50vh;
}
}
.p-kv-bg-left img,
.p-kv-bg-right img {
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.p-kv-bg-left img,
.p-kv-bg-right img {
width: 100%;
height: 100vh;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-bg-left img,
.p-kv-bg-right img {
width: 100%;
height: 100vh;
}
}
@media screen and (max-width: 767px) {
.p-kv-bg-left img,
.p-kv-bg-right img {
width: 100%;
height: 50vh;
}
}
.p-kv-bg-left {
position: relative;
}
.p-kv-center-product {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.p-kv-center-product {
width: 155px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-center-product {
width: 12.109375vw;
}
}
@media screen and (max-width: 767px) {
.p-kv-center-product {
width: 22.133333333333333vw;
}
}
.p-kv-left-text {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.p-kv-left-text {
font-size: 30.92px;
line-height: 1;
letter-spacing: 0.25em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-left-text {
font-size: calc(1vw * 30.92 / 1280 * 100);
line-height: 1;
letter-spacing: 0.25em;
}
}
@media screen and (max-width: 767px) {
.p-kv-left-text {
font-size: calc(1vw * 46 / 750 * 100);
line-height: 1;
letter-spacing: 0.25em;
}
}
.p-kv-scroll {
position: fixed;
bottom: 0;
z-index: 1;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
@media screen and (min-width: 768px) {
.p-kv-scroll {
right: 34px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-scroll {
right: 2.65625vw;
}
}
@media screen and (max-width: 767px) {
.p-kv-scroll {
right: 5.333333333333334vw;
}
}
.p-kv-scroll:not(.is-loaded) {
opacity: 0;
}
.p-kv-scroll.is-loaded {
opacity: 1;
}
.p-kv-scroll-text {
position: absolute;
-webkit-transform: rotate(90deg) translate(0, -50%);
transform: rotate(90deg) translate(0, -50%);
-webkit-transform-origin: top right;
transform-origin: top right;
right: 0;
}
@media screen and (min-width: 768px) {
.p-kv-scroll-text {
bottom: 73px;
font-size: 12px;
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-scroll-text {
bottom: 5.703125vw;
font-size: calc(1vw * 12 / 1280 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
@media screen and (max-width: 767px) {
.p-kv-scroll-text {
bottom: 18.133333333333333vw;
font-size: calc(1vw * 24 / 750 * 100);
line-height: 1;
letter-spacing: 0.2em;
}
}
.p-kv-scroll-bar::before {
content: '';
bottom: 0;
background: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 768px) {
.p-kv-scroll-bar::before {
position: absolute;
width: 1px;
height: 63px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-scroll-bar::before {
position: absolute;
width: 1px;
height: 4.921875vw;
}
}
@media screen and (max-width: 767px) {
.p-kv-scroll-bar::before {
position: fixed;
width: 1px;
height: 16.53333333333333vw;
}
}
.p-kv-scroll-bar::after {
content: '';
bottom: 0;
background: #fff;
-webkit-animation: scroll 2s ease infinite;
animation: scroll 2s ease infinite;
}
@media screen and (min-width: 768px) {
.p-kv-scroll-bar::after {
position: absolute;
width: 1px;
height: 63px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-scroll-bar::after {
position: absolute;
width: 1px;
height: 4.921875vw;
}
}
@media screen and (max-width: 767px) {
.p-kv-scroll-bar::after {
position: fixed;
width: 1px;
height: 16.53333333333333vw;
}
}
.color-0 .p-kv-scroll-text {
color: #fff;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.color-0 .p-kv-scroll-bar::before {
background: rgba(255, 255, 255, 0.5);
}
.color-0 .p-kv-scroll-bar::after {
background: #fff;
}
.color-1 .p-kv-scroll-text {
color: #300c0d;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.color-1 .p-kv-scroll-bar::before {
background: rgba(48, 12, 13, 0.5);
}
.color-1 .p-kv-scroll-bar::after {
background: #300c0d;
}
.existence-0.is-loaded {
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.existence-1.is-loaded {
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50.1% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
}
@keyframes scroll {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50.1% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
}
@media screen and (min-width: 768px) {
.p-products {
padding-top: 100px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products {
padding-top: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.p-products {
position: relative;
top: -17.599999999999998vw;
padding-top: 13.333333333333334vw;
}
}
@media screen and (min-width: 768px) {
.p-products-inner {
padding-bottom: 180px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-inner {
padding-bottom: 14.0625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-inner {
padding-bottom: 23vw;
}
}
.p-products-title {
text-align: center;
color: #401e1f;
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-products-title {
font-size: 24px;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 81px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-title {
font-size: calc(1vw * 24 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 6.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-title {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-bottom: 13.333333333333334vw;
top: 2.133333333333333vw;
}
}
.p-products-list {
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.5);
position: relative;
}
/*add2207*/
/* .p-products-list::after {
content: "浴用化粧料";
font-size: 16px;
font-weight: 500;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
color: #401E1F;
border: solid 1px;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 52px;
width: 113px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
} */
@media screen and (min-width: 768px) {
.p-products-list {
/*padding: 80px 36px;*/
padding: 80px 36px 30px;
/*add2207*/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-list {
/*padding: 6.25vw 1.5625vw;*/
padding: 6.25vw calc(1.5625vw + 69px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 767px) {
/*add2207*/
/* .p-products-list::after {
font-size: 14px;
bottom: 39px;
width: 99px;
height: 30px;
} */
.p-products-list {
/*padding: 12.933333333333334vw 0 3.466666666666666vw;*/
padding: 12.933333333333334vw 0 calc(3.466666666666666vw + 50px);
display: block;
}
}
@media screen and (min-width: 768px) {
.p-products-content {
margin-bottom: 81px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
width: 50%;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content {
margin-bottom: 6.328125vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
width: 50%;
}
}
@media screen and (max-width: 767px) {
.p-products-content {
display: block;
text-align: center;
}
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(even) {
position: relative;
top: 7px;
left: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(even) {
position: relative;
top: 0.546875vw;
left: 1.5625vw;
}
}
.p-products-content:last-child {
margin-bottom: 0;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.p-products-content:last-child {
margin-left: 40px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:last-child {
margin-left: 3.125vw;
}
}
@media screen and (min-width: 768px) {
.p-products-content:last-child .p-products-img {
width: 85px;
margin-right: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:last-child .p-products-img {
width: 6.640625vw;
margin-right: 0;
}
}
@media screen and (min-width: 768px) {
.p-products-content:last-child .p-products-item:nth-child(2) {
margin-left: 43px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:last-child .p-products-item:nth-child(2) {
margin-left: 3.359375vw;
}
}
.p-products-content:last-child .p-products-aroma,
.p-products-content:last-child .p-products-box {
display: none;
}
@media screen and (max-width: 767px) {
.p-products-content+.p-products-content {
margin-top: 13.600000000000001vw;
}
}
.p-products-content:nth-child(1) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(1) .p-products-aroma {
top: -1px;
left: 9px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(1) .p-products-aroma {
top: -0.078125vw;
left: 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(1) .p-products-aroma {
top: 2.133333333333333vw;
}
}
.p-products-content:nth-child(1) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(1) .p-products-time {
top: -2px;
left: 7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(1) .p-products-time {
top: -0.15625vw;
left: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(1) .p-products-time {
top: 1.6vw;
}
}
.p-products-content:nth-child(1) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(1) .p-products-intro {
top: -8px;
left: 9px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(1) .p-products-intro {
top: -0.625vw;
left: 0.703125vw;
}
}
.p-products-content:nth-child(1) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(1) .p-products-box {
top: -3px;
left: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(1) .p-products-box {
top: -0.234375vw;
left: 0.46875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(1) .p-products-box {
top: -1.6vw;
}
}
.p-products-content:nth-child(2) .p-products-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(2) .p-products-img {
top: -7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(2) .p-products-img {
top: -0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(2) .p-products-img {
top: -1.6vw;
left: -2.933333333333333vw;
}
}
.p-products-content:nth-child(2) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(2) .p-products-aroma {
top: -6px;
left: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(2) .p-products-aroma {
top: -0.46875vw;
left: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(2) .p-products-aroma {
top: -2.933333333333333vw;
}
}
.p-products-content:nth-child(2) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(2) .p-products-time {
top: -6px;
left: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(2) .p-products-time {
top: -0.46875vw;
left: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(2) .p-products-time {
top: -3.466666666666666vw;
}
}
.p-products-content:nth-child(2) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(2) .p-products-intro {
top: -11px;
left: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(2) .p-products-intro {
top: -0.859375vw;
left: 1.09375vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(2) .p-products-intro {
top: -5.066666666666666vw;
}
}
.p-products-content:nth-child(2) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(2) .p-products-box {
top: -8px;
left: 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(2) .p-products-box {
top: -0.625vw;
left: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(2) .p-products-box {
top: -5.866666666666666vw;
}
}
.p-products-content:nth-child(3) .p-products-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(3) .p-products-img {
top: 6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(3) .p-products-img {
top: 0.46875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(3) .p-products-img {
top: -7.733333333333333vw;
}
}
.p-products-content:nth-child(3) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(3) .p-products-aroma {
top: 7px;
left: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(3) .p-products-aroma {
top: 0.546875vw;
left: 1.015625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(3) .p-products-aroma {
top: -6.933333333333333vw;
}
}
.p-products-content:nth-child(3) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(3) .p-products-time {
top: 6px;
left: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(3) .p-products-time {
top: 0.46875vw;
left: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(3) .p-products-time {
top: -7.199999999999999vw;
}
}
.p-products-content:nth-child(3) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(3) .p-products-intro {
left: 9px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(3) .p-products-intro {
left: 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(3) .p-products-intro {
top: -9.066666666666666vw;
}
}
.p-products-content:nth-child(3) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(3) .p-products-box {
top: 3px;
left: 9px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(3) .p-products-box {
top: 0.234375vw;
left: 0.703125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(3) .p-products-box {
top: -10.666666666666668vw;
}
}
.p-products-content:nth-child(4) .p-products-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(4) .p-products-img {
left: 8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(4) .p-products-img {
left: 0.625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(4) .p-products-img {
top: -11.733333333333333vw;
left: -1.066666666666667vw;
}
}
.p-products-content:nth-child(4) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(4) .p-products-aroma {
left: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(4) .p-products-aroma {
left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(4) .p-products-aroma {
top: -12.266666666666666vw;
}
}
.p-products-content:nth-child(4) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(4) .p-products-time {
left: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(4) .p-products-time {
left: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(4) .p-products-time {
top: -12.266666666666666vw;
}
}
.p-products-content:nth-child(4) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(4) .p-products-intro {
top: -8px;
left: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(4) .p-products-intro {
top: -0.625vw;
left: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(4) .p-products-intro {
top: -14.000000000000002vw;
}
}
.p-products-content:nth-child(4) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(4) .p-products-box {
top: -3px;
left: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(4) .p-products-box {
top: -0.234375vw;
left: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(4) .p-products-box {
top: -16vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(5) {
margin-top: 0;
position: relative;
top: -1.6vw;
}
}
.p-products-content:nth-child(5) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(5) .p-products-aroma {
left: 12px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(5) .p-products-aroma {
left: 0.9375vw;
}
}
.p-products-content:nth-child(5) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(5) .p-products-time {
left: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(5) .p-products-time {
left: 0.78125vw;
}
}
.p-products-content:nth-child(5) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(5) .p-products-intro {
top: -7px;
left: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(5) .p-products-intro {
top: -0.546875vw;
left: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(5) .p-products-intro {
top: -2.133333333333333vw;
}
}
.p-products-content:nth-child(5) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(5) .p-products-box {
top: -3px;
left: 7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(5) .p-products-box {
top: -0.234375vw;
left: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(5) .p-products-box {
top: -2.933333333333333vw;
}
}
.p-products-content:nth-child(6) .p-products-img {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(6) .p-products-img {
top: -7px;
left: 8px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(6) .p-products-img {
top: -0.546875vw;
left: 0.625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(6) .p-products-img {
top: -5.333333333333334vw;
left: -0.533333333333333vw;
}
}
.p-products-content:nth-child(6) .p-products-aroma {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(6) .p-products-aroma {
top: -5px;
left: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(6) .p-products-aroma {
top: -0.390625vw;
left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(6) .p-products-aroma {
top: -4.8vw;
}
}
.p-products-content:nth-child(6) .p-products-time {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(6) .p-products-time {
top: -7px;
left: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(6) .p-products-time {
top: -0.546875vw;
left: 1.328125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(6) .p-products-time {
top: -5.333333333333334vw;
}
}
.p-products-content:nth-child(6) .p-products-intro {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(6) .p-products-intro {
top: -13px;
left: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(6) .p-products-intro {
top: -1.015625vw;
left: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(6) .p-products-intro {
top: -6.933333333333333vw;
}
}
.p-products-content:nth-child(6) .p-products-box {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-content:nth-child(6) .p-products-box {
top: -8px;
left: 18px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-content:nth-child(6) .p-products-box {
top: -0.625vw;
left: 1.40625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(6) .p-products-box {
top: -7.733333333333333vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(7) .p-products-img {
width: 22vw;
position: relative;
top: -8vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(7) .p-products-time {
position: relative;
top: -7.733333333333333vw;
}
}
@media screen and (max-width: 767px) {
.p-products-content:nth-child(7) .p-products-intro {
position: relative;
top: -8.533333333333333vw;
}
}
.p-products-item {
color: #401e1f;
}
@media screen and (min-width: 768px) {
.p-products-img {
width: 159px;
margin-right: 10px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-img {
width: 12.421875vw;
margin-right: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.p-products-img {
width: 43.06666666666666vw;
margin: 0 auto;
}
}
.p-products-aroma {
display: inline-block;
border: 1px solid #d6cdd3;
}
@media screen and (min-width: 768px) {
.p-products-aroma {
font-size: 13px;
line-height: 1;
letter-spacing: 0em;
padding: 3px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-aroma {
font-size: calc(1vw * 13 / 1280 * 100);
line-height: 1;
letter-spacing: 0em;
padding: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.p-products-aroma {
font-size: calc(1vw * 32 / 750 * 100);
line-height: 1;
letter-spacing: 0em;
padding: 0.666666666666667vw 0.8vw 0.4vw;
margin-top: 5.333333333333334vw;
}
}
.p-products-time {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-products-time {
font-size: 18px;
line-height: 1;
letter-spacing: 0.05em;
margin-top: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-time {
font-size: calc(1vw * 18 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-top: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.p-products-time {
font-size: calc(1vw * 34 / 750 * 100);
line-height: 1;
letter-spacing: 0em;
margin-top: 4.666666666666667vw;
}
}
.p-products-intro {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-products-intro {
font-size: 14px;
line-height: 1.785714285714286;
letter-spacing: 0em;
margin-top: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-intro {
font-size: calc(1vw * 14 / 1280 * 100);
line-height: 1.785714285714286;
letter-spacing: 0em;
margin-top: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.p-products-intro {
font-size: calc(1vw * 26 / 750 * 100);
line-height: 1.538461538461539;
letter-spacing: 0em;
margin-top: 4.666666666666667vw;
}
}
@media screen and (min-width: 768px) {
.p-products-color {
font-size: 12px;
line-height: 1.5;
letter-spacing: 0em;
margin-left: 11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-color {
font-size: calc(1vw * 12 / 1280 * 100);
line-height: 1.5;
letter-spacing: 0em;
margin-left: 0.859375vw;
}
}
@media screen and (max-width: 767px) {
.p-products-color {
font-size: calc(1vw * 26 / 750 * 100);
line-height: 0.692307692307692;
letter-spacing: 0em;
margin-left: 1.466666666666667vw;
}
}
.p-text-color-pink {
color: #dd7ca2;
}
.p-text-color-blue {
color: #5aafc1;
}
.p-text-color-yellow {
color: #d8a300;
}
.p-text-color-green {
color: #4aa474;
}
.p-text-color-orange {
color: #eb8b44;
}
.p-text-color-red {
color: #e25b5b;
}
@media screen and (min-width: 768px) {
.p-products-box {
margin-top: 14px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-box {
margin-top: 1.09375vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (max-width: 767px) {
.p-products-box {
margin-top: 4vw;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
.p-products-color-ball {
position: relative;
}
@media screen and (min-width: 768px) {
.p-products-color-ball {
width: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-color-ball {
width: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.p-products-color-ball {
width: 4vw;
left: -0.8vw;
left: -0.266666666666667vw;
}
}
.p-products-border {
display: none;
}
@media screen and (max-width: 767px) {
.p-products-border {
display: block;
padding: 0 0 35px;
margin: auto;
width: 89.46666666666667vw;
background-color: rgba(255, 255, 255, 0.5);
}
.p-products-border img {
padding: 0 15px;
}
}
.p-products-news {
margin: auto;
position: relative;
}
.p-products-newsBg {
position: absolute;
margin: auto;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
padding: 0 25px 25px;
}
@media screen and (max-width: 767px) {
.p-products-newsBg {
padding: 5% 5% 20%;
}
}
.p-products-newsBg img {
object-fit: cover;
width: 100%;
display: block;
}
.p-products-newsBox {
padding-top: 100px;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-newsBox {
padding-top: 80px;
}
}
@media screen and (max-width: 767px) {
.p-products-newsBox {
padding-top: 0;
}
}
.p-products-news-title {
text-align: center;
color: #401e1f;
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-products-news-title {
font-size: 24px;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-news-title {
font-size: calc(1vw * 24 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
}
@media screen and (max-width: 767px) {
.p-products-news-title {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-bottom: 20px;
top: 2.133333333333333vw;
}
}
.p-products-news-subtitle {
text-align: center;
color: #401e1f;
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-products-news-subtitle {
font-size: 20px;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-products-news-subtitle {
font-size: calc(1vw * 26 / 1280 * 100);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 50px;
}
}
@media screen and (max-width: 767px) {
.p-products-news-subtitle {
font-size: calc(1vw * 30 / 750 * 100);
line-height: 1.666666666666667;
letter-spacing: 0.05em;
margin-bottom: 12%;
top: 2.133333333333333vw;
}
}
.p-products-newsBoxContent {
width: 70%;
margin: auto;
display: flex;
justify-content: center;
gap: 50px;
}
@media screen and (max-width: 767px) {
.p-products-newsBoxContent {
width: 70%;
flex-wrap: wrap;
gap: 0;
}
}
.p-products-newsBoxContentItem {
width: calc((100% - 50px * 1) / 2);
position: relative;
z-index: 5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-products-newsBoxContentItem {
width: 100%;
}
.p-products-newsBoxContentItem+.p-products-newsBoxContentItem {
margin-top: 35%;
}
}
.p-products-newsBoxContentItem img {
width: 80%;
margin: auto;
}
@media screen and (max-width: 767px) {
.p-products-newsBoxContentItem img {
width: 90%;
margin: auto;
}
}
.p-products-newsBoxContentItem figcaption {
margin-top: 15px;
text-align: center;
letter-spacing: 0.05em;
color: #401e1f;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.p-products-newsBoxContentItem figcaption {
margin-top: 20px;
line-height: 1.5;
font-size: calc(1vw * 30 / 750 * 100);
}
}
/*add2207*/
.p-products-newsBox::after {
content: "浴用化粧料";
font-size: 16px;
font-weight: 500;
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
color: #401E1F;
border: solid 1px;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -60px;
width: 113px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
@media screen and (max-width: 767px) {
/*add2207*/
.p-products-newsBox::after {
font-size: 14px;
bottom: -9%;
width: 99px;
height: 30px;
}
}
.p-shop-inner {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.p-shop-inner {
padding: 110px 0 130px;
width: 1000px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-inner {
padding: 8.59375vw 0 10.15625vw;
width: 84.6875vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-inner {
padding: 26.666666666666668vw 0 3.2vw;
width: 84.66666666666667vw;
}
}
.p-shop-title {
text-align: center;
color: #401e1f;
font-weight: 600;
}
@media screen and (min-width: 768px) {
.p-shop-title {
font-size: 32px;
line-height: 0.635625;
letter-spacing: 0.05em;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-title {
font-size: calc(1vw * 32 / 1280 * 100);
line-height: 0.635625;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 767px) {
.p-shop-title {
font-size: calc(1vw * 36 / 750 * 100);
line-height: 0.565;
letter-spacing: 0.05em;
}
}
.p-shop-list {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.p-shop-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 84px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 6.5625vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 12.133333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-shop-contents {
margin-right: 132px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-contents {
margin-right: 10.3125vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-contents {
margin-bottom: 16.8vw;
}
}
/*.p-shop-contents:nth-child(3),
.p-shop-contents:nth-child(5) {
margin-right: 0;
}*/
.p-shop-contents:nth-child(4) {
margin-right: 0;
}
@media screen and (min-width: 768px) {
/*.p-shop-contents:nth-child(4),
.p-shop-contents:nth-child(5) {
margin-top: 35px;
}*/
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-contents:nth-child(4),
.p-shop-contents:nth-child(5) {
margin-top: 2.734375vw;
}
}
.p-shop-link {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
display: block;
}
.p-shop-link:hover {
opacity: 0.5;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
.p-shop-content-amazon {
width: 118px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-content-amazon {
width: 9.21875vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-content-amazon {
width: 29.46666666666667vw;
position: relative;
left: 3.733333333333334vw;
top: 0.533333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-shop-content-lohaco {
width: 141px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-content-lohaco {
width: 11.015625vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-content-lohaco {
width: 35.733333333333334vw;
}
}
@media screen and (min-width: 768px) {
.p-shop-content-rakuten {
width: 172px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-content-rakuten {
width: 13.4375vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-content-rakuten {
width: 35.6vw;
}
}
@media screen and (min-width: 768px) {
.p-shop-content-atcosme {
width: 139px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-content-atcosme {
width: 10.859375vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-content-atcosme {
width: 35.199999999999996vw;
}
}
@media screen and (min-width: 768px) {
.p-shop-content-bathclin {
width: 119px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-shop-content-bathclin {
width: 9.296875vw;
}
}
@media screen and (max-width: 767px) {
.p-shop-content-bathclin {
width: 30vw;
position: relative;
left: 3.2vw;
top: -3.2vw;
}
}
.p-state {
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 768px) {
.p-state {
background-image: url("/bs/ayurtime/assets/images/top/state-bg_pc.png");
height: 100vh;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state {
background-image: url("/bs/ayurtime/assets/images/top/state-bg_pc.png");
height: 100vh;
}
}
@media screen and (max-width: 767px) {
.p-state {
background-image: url("/bs/ayurtime/assets/images/top/state-bg_sp.png");
height: 100vh;
}
}
.p-state-inner {
color: #401e1f;
}
@media screen and (min-width: 768px) {
.p-state-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 40px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 3.125vw;
}
}
@media screen and (max-width: 767px) {
.p-state-inner {
display: block;
text-align: center;
padding: 27.73333333333333vw 0 26.666666666666668vw;
}
}
.p-state-copy-01 {
position: relative;
font-weight: 500;
}
@media screen and (min-width: 768px) {
.p-state-copy-01 {
font-size: 30.92px;
line-height: 1;
letter-spacing: 0.25em;
left: -90px;
top: -58px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-copy-01 {
font-size: calc(1vw * 30.92 / 1280 * 100);
line-height: 1;
letter-spacing: 0.25em;
left: -7.03125vw;
top: -4.53125vw;
}
}
@media screen and (max-width: 767px) {
.p-state-copy-01 {
font-size: calc(1vw * 46 / 750 * 100);
line-height: 1;
letter-spacing: 0.25em;
left: 0.533333333333333vw;
}
}
.p-state-copy-02 {
position: relative;
}
@media screen and (min-width: 768px) {
.p-state-copy-02 {
font-size: 16px;
line-height: 2.125;
letter-spacing: 0.05em;
margin-left: 71px;
top: -38px;
left: 7px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-copy-02 {
font-size: calc(1vw * 16 / 1280 * 100);
line-height: 2.125;
letter-spacing: 0.05em;
margin-left: 5.546875vw;
top: -2.96875vw;
left: 0.546875vw;
}
}
@media screen and (max-width: 767px) {
.p-state-copy-02 {
font-size: calc(1vw * 24 / 750 * 100);
line-height: 2.416666666666667;
letter-spacing: 0.06em;
margin-top: 10.666666666666668vw;
}
}
.p-state-copy-02 .p-state-text.p-01 {
position: relative;
}
@media screen and (min-width: 768px) {
.p-state-copy-02 .p-state-text.p-01 {
top: 26px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-copy-02 .p-state-text.p-01 {
top: 2.03125vw;
}
}
.p-state-copy-02 .p-state-text.p-02 {
position: relative;
}
@media screen and (min-width: 768px) {
.p-state-copy-02 .p-state-text.p-02 {
top: -6px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-copy-02 .p-state-text.p-02 {
top: -0.46875vw;
}
}
.p-state-copy-02 .p-state-text.p-03 {
position: relative;
}
@media screen and (min-width: 768px) {
.p-state-copy-02 .p-state-text.p-03 {
top: -22px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-copy-02 .p-state-text.p-03 {
top: -1.71875vw;
}
}
.p-state-text {
position: relative;
}
@media screen and (min-width: 768px) {
.p-state-text {
top: 11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-text {
top: 0.859375vw;
}
}
@media screen and (max-width: 767px) {
.p-state-text {
top: -0.8vw;
left: 0.133333333333333vw;
}
}
@media screen and (min-width: 768px) {
.p-state-text+.p-state-text {
margin-top: 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-state-text+.p-state-text {
margin-top: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.p-state-text+.p-state-text {
margin-top: 6.4vw;
}
}
.p-state-text.no-kerning {
-webkit-font-feature-settings: initial;
font-feature-settings: initial;
}
.p-top-bg {
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.p-top-bg {
background-image: url("/bs/ayurtime/assets/images/top/top-bg_pc.jpg");
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-top-bg {
background-image: url("/bs/ayurtime/assets/images/top/top-bg_pc.jpg");
}
}
@media screen and (max-width: 767px) {
.p-top-bg {
background: -webkit-gradient(linear, left top, left bottom, from(#fff0f0), color-stop(#f3edf8), to(#e9f0f9));
background: -webkit-linear-gradient(#fff0f0, #f3edf8, #e9f0f9);
background: linear-gradient(#fff0f0, #f3edf8, #e9f0f9);
}
}
/*カルーセル下余白調整(タブレット）*/
@media screen and (min-width: 768px) and (max-width: 1279px) {
.p-kv-list {
height: auto !important;
}
}
/*「おかえりわたし」ブロック余白調整（タブレット）*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
.p-state {
height: 50vh;
}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.p-state {
height: 70vh;
}
}
/* .is-scrolled-offset [data-switchheader-role="header"] {
top: var(--headerHeightOffsetD);
} */