@charset "UTF-8";
     *,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none; appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; } [type=checkbox] {
-webkit-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
appearance: radio;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
} :-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
} progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
} [type=search] {
outline-offset: -2px; } [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable]:focus {
outline: auto;
}   table {
border-color: inherit; border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}     body {
margin: 0 auto;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシ＞ック", Arial, Verdana, sans-serif;
font-weight: 500;
}
img, video {
width: 100%;
height: unset;
vertical-align: bottom;
}
a {
position: relative;
}
a:hover::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1333333333);
}        .layout03__item, .layout03__list, .layout02__text, .layout02__img, .layout01__block {
border: 1px solid red;
background-color: rgba(221, 221, 255, 0.5333333333);
width: 100%;
padding: 2rem;
}
.layout01 {
height: 100%;
}
.layout01 .layout01__wrapper--horizontal, .layout01 .layout01__wrapper--vertical {
display: flex;
flex-wrap: nowrap;
gap: 3%;
height: 100%;
}
.layout01__wrapper--vertical {
flex-direction: column;
}
.layout01__wrapper--horizontal {
flex-direction: row;
}
.layout02__list {
display: flex;
flex-direction: column;
gap: clamp(1px, 1.3333333333vw, 10px);
}
.layout02 .layout02__item--reverse, .layout02 .layout02__item {
display: flex;
justify-content: space-between;
gap: 3%;
}
.layout02__item {
flex-direction: row;
}
.layout02__item--reverse {
flex-direction: row-reverse;
}
.layout02__img {
margin-left: auto;
margin-right: auto;
width: 32%;
}
.layout02__text {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 2.1333333333vw, 16px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
width: 65%;
}
.layout03__list {
display: flex;
justify-content: space-between;
}
.layout03__item {
width: 30%;
height: 50%;
}
.layout03__item:nth-child(1) {
margin-top: 0;
}
.layout03__item:nth-child(2) {
margin-top: clamp(1px, 2.6666666667vw, 20px);
}
.layout03__item:nth-child(3) {
margin-top: clamp(1px, 5.3333333333vw, 40px);
}
.layout04__list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: clamp(1px, 1.3333333333vw, 10px);
}
.layout04__item {
width: 100%;
height: clamp(1px, 26.6666666667vw, 200px);
background-color: rgba(221, 221, 255, 0.5333333333);
}
@media screen and (min-width: 520px) {
.layout04__item {
width: 48%;
}
}
@media screen and (min-width: 750px) {
.layout04__item {
width: 30%;
}
}
.layout05__mainvisual {
width: 100%;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
.layout05__contents {
width: 100%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
} .clipped-shadow {
width: 100%;
height: 100%;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}
.clipped-shadow > * {
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
width: 100%;
height: 100%;
} .section {
max-width: 750px;
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #fff; }
@media screen and (min-width: 750px) {
.section {
max-width: 750px;
}
}
.section__inner {
max-width: 750px;
margin-right: auto;
margin-left: auto;
padding-left: clamp(1px, 6.6666666667vw, 50px);
padding-right: clamp(1px, 6.6666666667vw, 50px);
}
@media screen and (min-width: 750px) {
.section__inner {
max-width: 750px;
padding-left: 50px;
padding-right: 50px;
}
}
.section__contents {
padding-top: clamp(1px, 6.6666666667vw, 50px);
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
}
@media screen and (min-width: 750px) {
.section__contents {
padding-top: 50px;
padding-bottom: 50px;
}
}
.section__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
padding-top: clamp(1px, 2.6666666667vw, 20px);
padding-bottom: clamp(1px, 2.6666666667vw, 20px);
}
@media screen and (min-width: 750px) {
.section__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
padding-top: 20px;
padding-bottom: 20px;
}
}
.section__image {
width: 100%;
}
.section--sec01 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec01_bg1.png);
background-position: bottom, center;
background-size: 100%;
background-repeat: no-repeat;
padding: clamp(1px, 7.2vw, 54px) 0 clamp(1px, 2vw, 15px);
}
.section--sec02 {
background-color: #f2ede6;
padding: clamp(1px, 18.6666666667vw, 140px) clamp(1px, 6.6666666667vw, 50px) 0;
clip-path: polygon(0 0, 50% clamp(1px, 12.2666666667vw, 92px), 100% 0%, 100% 100%, 0 100%);
}
.section--sec03 {
background-color: #f2ede6;
padding: clamp(1px, 1.3333333333vw, 10px) 0 clamp(1px, 12vw, 90px);
}
.section--sec04 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec04_bg1.png);
background-size: 100% 100%;
padding: clamp(1px, 13.3333333333vw, 100px) clamp(1px, 6.6666666667vw, 50px) clamp(1px, 12.2666666667vw, 92px);
}
.section--sec05 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec05_bg1.png);
background-size: 100% 100%;
padding-top: clamp(1px, 13.3333333333vw, 100px);
padding-bottom: clamp(1px, 10.6666666667vw, 80px);
}
.section--sec06 {
background-color: #ece7e0;
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec06_bg1.png), linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, transparent 100%);
background-size: 100%;
background-repeat: no-repeat;
background-position-y: top;
padding-top: clamp(1px, 6.6666666667vw, 50px);
padding-bottom: clamp(1px, 13.3333333333vw, 100px);
}
.section--sec10 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec10_bg1.png);
background-size: 100% 100%;
}
.section--sec12 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec12_bg1.png);
background-size: 100% 100%;
background-position-y: top;
}
.section--sec13 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec13_bg1.png);
background-size: 100%;
background-position-y: bottom;
}
.section--faq {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/faq_bg.png);
background-size: 100% 100%;
padding-top: clamp(1px, 13.3333333333vw, 100px);
padding-bottom: clamp(1px, 5.3333333333vw, 40px);
} .hide-area {
display: none;
} .modaal-close:after,
.modaal-close:before {
background: #ccc;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
background: #666;
} #modaal-title {
font-size: 1.2rem;
text-align: center;
margin: 0 0 20px 0;
} .modaal-inner-wrapper {
padding: clamp(1px, 4vw, 30px) 0;
}
.modaal-container {
width: 90%;
max-width: 480px;
border-radius: clamp(1px, 4vw, 30px);
}
.modaal-content-container {
padding: clamp(1px, 4vw, 30px);
} .sec01__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.6vw, 42px);
line-height: clamp(1px, 8.5333333333vw, 64px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.sec01__img1 {
width: clamp(1px, 38.5333333333vw, 289px);
margin-left: clamp(1px, 17.3333333333vw, 130px);
margin-right: auto;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.sec01__img2 {
width: clamp(1px, 66.6666666667vw, 500px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec01__img3 {
width: clamp(1px, 37.6vw, 282px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 6.6666666667vw, 50px);
}
.sec01__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.0666666667vw, 38px);
line-height: clamp(1px, 7.4666666667vw, 56px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec01__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 6.9333333333vw, 52px);
line-height: clamp(1px, 9.6vw, 72px);
color: #fd713e;
font-feature-settings: normal;
text-align: center;
}
.sec02__list {
display: flex;
flex-direction: column;
gap: clamp(1px, 5.3333333333vw, 40px);
counter-reset: num;
}
.sec02__item {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 6.4vw, 48px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
counter-increment: num;
position: relative;
}
.sec02__item::before {
position: absolute;
content: counter(num);
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 8vw, 60px);
color: #ffffff;
font-feature-settings: normal;
text-align: center;
width: clamp(1px, 8.2666666667vw, 62px);
height: clamp(1px, 8.2666666667vw, 62px);
background-color: #fd713e;
border-radius: 50%;
left: clamp(-80px, -10.6666666667vw, 0px);
top: clamp(-6px, -0.8vw, 0px);
}
.sec02__bg1 {
clear: both;
background-color: #ffffff;
padding: clamp(1px, 1.3333333333vw, 10px);
position: relative;
}
.sec02__bg2 {
border: #f2ede6 clamp(1px, 0.8vw, 6px) solid;
padding: clamp(1px, 8vw, 60px) clamp(1px, 5.3333333333vw, 40px) clamp(1px, 8vw, 60px) clamp(1px, 14.6666666667vw, 110px);
}
.sec02__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.4666666667vw, 41px);
line-height: clamp(1px, 9.3333333333vw, 70px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
padding-top: clamp(1px, 10.6666666667vw, 80px);
}
.sec02__img {
width: clamp(1px, 40vw, 300px);
float: left;
}
.sec02__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4vw, 30px);
line-height: clamp(1px, 7.7333333333vw, 58px);
color: #ffffff;
font-feature-settings: "palt";
text-align: center;
background-color: #fd713e;
width: fit-content;
padding: 0 clamp(1px, 4vw, 30px);
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: clamp(-26px, -3.4666666667vw, 0px);
}
.sec03__item {
position: relative;
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec03_bg1.png);
background-size: 100%;
background-repeat: repeat-y;
width: clamp(1px, 86.6666666667vw, 650px);
height: auto; margin-top: clamp(1px, 8vw, 60px);
padding: clamp(1px, 8vw, 60px) clamp(1px, 5.3333333333vw, 40px) clamp(1px, 5.3333333333vw, 40px);
}
.sec03__title {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: clamp(-28px, -3.7333333333vw, 0px);
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4vw, 30px);
line-height: clamp(1px, 7.7333333333vw, 58px);
color: #ffffff;
font-feature-settings: normal;
width: fit-content;
background-color: #fd713e;
padding: 0 clamp(1px, 2.1333333333vw, 16px);
}
.sec03__text {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 6.1333333333vw, 46px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: justify;
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
}
.sec03__img1 {
width: 100%;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec04__bg2 {
background-color: #ffffff;
border: #c09a85 clamp(1px, 0.5333333333vw, 4px) solid;
padding: clamp(1px, 4.2666666667vw, 32px) clamp(1px, 8vw, 60px) clamp(1px, 6.1333333333vw, 46px);
}
.sec04__bg3 {
position: relative;
background-image: linear-gradient(to left, #fad2c2, #e0dfdf);
border-radius: clamp(1px, 5.3333333333vw, 40px);
padding: clamp(1px, 0.5333333333vw, 4px);
}
.sec04__bg4 {
border-radius: clamp(1px, 5.3333333333vw, 40px);
background-color: #ffffff;
padding: clamp(1px, 4.2666666667vw, 32px);
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
}
.sec04__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.3333333333vw, 40px);
line-height: clamp(1px, 15.4666666667vw, 116px);
color: #ffffff;
font-feature-settings: normal;
text-align: center;
background-color: #c09a85;
}
.sec04__img1 {
position: absolute;
width: clamp(1px, 21.0666666667vw, 158px);
right: clamp(-4px, -0.5333333333vw, 0px);
bottom: clamp(-50px, -6.6666666667vw, 0px);
}
.sec04__img2 {
position: absolute;
width: clamp(1px, 24vw, 180px);
right: clamp(-14px, -1.8666666667vw, 0px);
bottom: clamp(-40px, -5.3333333333vw, 0px);
}
.sec04__img3 {
position: absolute;
width: clamp(1px, 16vw, 120px);
right: clamp(-14px, -1.8666666667vw, 0px);
bottom: clamp(-20px, -2.6666666667vw, 0px);
}
.sec04__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.8666666667vw, 29px);
line-height: clamp(1px, 9.3333333333vw, 70px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
background-color: #f9e2da;
border-radius: clamp(1px, 4.6666666667vw, 35px);
width: clamp(1px, 53.3333333333vw, 400px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 4.2666666667vw, 32px);
}
.sec04__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: justify;
margin-bottom: clamp(1px, 4.2666666667vw, 32px);
}
.sec04__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.6666666667vw, 35px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 3.2vw, 24px);
}
.sec04__text3::after {
content: attr(stars) "";
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 5.0666666667vw, 38px);
line-height: 1;
color: #fd713e;
font-feature-settings: normal;
letter-spacing: 0.1em;
}
.sec04__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.6vw, 27px);
line-height: clamp(1px, 5.7333333333vw, 43px);
color: #0d0d0d;
font-feature-settings: "palt";
text-align: left;
}
.sec05 {
position: relative;
}
.sec05__bg2 {
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
background-color: #ffeae3;
padding-top: clamp(1px, 0.8vw, 6px);
padding-bottom: clamp(1px, 4vw, 30px);
clip-path: polygon(100% 0, 100% 75%, 54% 75%, 50% 100%, 46% 75%, 0 75%, 0 0);
}
.sec05__item[data-type=high] .sec05__bg2 {
background-color: rgba(216, 211, 202, 0.5019607843);
}
.sec05__item[data-type=upgrade] .sec05__bg2 {
background-color: rgba(201, 156, 77, 0.1882352941);
}
.sec05__bg3 {
border: #fd713e clamp(1px, 0.2666666667vw, 2px) solid;
border-radius: clamp(1px, 6.6666666667vw, 50px);
margin: clamp(1px, 9.3333333333vw, 70px) clamp(1px, 2.6666666667vw, 20px) clamp(1px, 5.3333333333vw, 40px);
padding: clamp(1px, 8vw, 60px) clamp(1px, 3.4666666667vw, 26px) clamp(1px, 1.3333333333vw, 10px);
position: relative;
}
.sec05__item[data-type=high] .sec05__bg3 {
border: #ab9f8c clamp(1px, 0.2666666667vw, 2px) solid;
}
.sec05__item[data-type=upgrade] .sec05__bg3 {
border: #c99c4d clamp(1px, 0.2666666667vw, 2px) solid;
}
.sec05__bg4 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/cta_btn_bg.png);
background-size: 100% 100%;
width: clamp(1px, 71.7333333333vw, 538px);
aspect-ratio: 870/234;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.sec05__bg5 {
background-image: linear-gradient(47deg, #edecec, #ffffff, #faede9);
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
gap: clamp(1px, 6.6666666667vw, 50px);
padding: clamp(1px, 1.7333333333vw, 13px) clamp(1px, 5.3333333333vw, 40px);
}
.sec05__list {
margin-left: auto;
margin-right: auto;
}
.sec05__item {
background-color: #ffffff;
border-radius: clamp(1px, 4vw, 30px);
padding-bottom: clamp(1px, 7.2vw, 54px);
position: relative;
margin-top: clamp(1px, 10.6666666667vw, 80px);
}
.sec05__item-title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: clamp(1px, 6.2666666667vw, 47px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
padding-top: clamp(1px, 4vw, 30px);
padding-bottom: clamp(1px, 2.1333333333vw, 16px);
}
.sec05__item[data-type=high] .sec05__item-title .text-accent {
color: #ab9f8c;
}
.sec05__item[data-type=high] .sec05__item-title .text-deco-marker {
background: linear-gradient(transparent 65%, rgba(171, 159, 140, 0.4392156863) 65%, rgba(171, 159, 140, 0.4392156863) 90%, transparent 90%);
}
.sec05__item[data-type=upgrade] .sec05__item-title {
padding-top: clamp(1px, 5.6vw, 42px);
padding-bottom: clamp(1px, 0.4vw, 3px);
}
.sec05__item[data-type=upgrade] .sec05__item-title .text-accent {
color: #c99c4d;
}
.sec05__item[data-type=upgrade] .sec05__item-title .text-deco-marker {
background: linear-gradient(transparent 65%, rgba(201, 156, 77, 0.4392156863) 65%, rgba(201, 156, 77, 0.4392156863) 90%, transparent 90%);
}
.sec05__list2 {
display: flex;
flex-direction: column;
justify-self: center;
align-items: center;
gap: clamp(1px, 2.1333333333vw, 16px);
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec05__list2[data-size="4"] {
height: clamp(1px, 85.3333333333vw, 640px);
}
.sec05__list2[data-size="2"] {
height: clamp(1px, 42.6666666667vw, 320px);
}
.sec05__item2 {
width: 100%;
}
.sec05__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 7.4666666667vw, 56px);
line-height: clamp(1px, 11.2vw, 84px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec05__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
}
.sec05__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.8vw, 36px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
letter-spacing: 0.05em;
}
.sec05__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: clamp(1px, 8vw, 60px);
color: #fd713e;
font-feature-settings: normal;
text-align: center;
}
.sec05__item[data-type=high] .sec05__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: clamp(1px, 8vw, 60px);
color: #fd713e;
font-feature-settings: normal;
}
.sec05__item[data-type=upgrade] .sec05__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: clamp(1px, 8vw, 60px);
color: #c99c4d;
font-feature-settings: normal;
}
.sec05__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.8vw, 36px);
line-height: 1;
color: #fd713e;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 10.6666666667vw, 80px);
letter-spacing: 0.05em;
}
.sec05__item[data-type=high] .sec05__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.8vw, 36px);
line-height: 1;
color: #ab9f8c;
font-feature-settings: normal;
}
.sec05__item[data-type=upgrade] .sec05__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.8vw, 36px);
line-height: 1;
color: #c99c4d;
font-feature-settings: normal;
}
.sec05__text5 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 5.8666666667vw, 44px);
color: #fd713e;
font-feature-settings: normal;
text-align: center;
border: #fd713e clamp(1px, 0.2666666667vw, 2px) solid;
border-radius: clamp(1px, 6.6666666667vw, 50px);
width: clamp(1px, 33.0666666667vw, 248px);
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
position: absolute;
top: clamp(-40px, -5.3333333333vw, 0px);
left: 0;
right: 0;
padding: clamp(1px, 1.8666666667vw, 14px) 0;
}
.sec05__item[data-type=high] .sec05__text5 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 5.8666666667vw, 44px);
color: #ab9f8c;
font-feature-settings: normal;
border: #ab9f8c clamp(1px, 0.2666666667vw, 2px) solid;
}
.sec05__item[data-type=upgrade] .sec05__text5 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 5.8666666667vw, 44px);
color: #c99c4d;
font-feature-settings: normal;
border: #c99c4d clamp(1px, 0.2666666667vw, 2px) solid;
}
.sec05__text6 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #ffffff;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 2.1333333333vw, 16px);
background-color: #fd713e;
}
.sec05__item[data-type=high] .sec05__text6 {
background-color: #ab9f8c;
}
.sec05__item[data-type=upgrade] .sec05__text6 {
background-color: #c99c4d;
}
.sec05__text9 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.8vw, 36px);
line-height: clamp(1px, 6.2666666667vw, 47px);
color: #ffffff;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 0.8vw, 6px);
}
.sec05__text10 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
padding-top: clamp(1px, 13.3333333333vw, 100px);
}
.sec05__text11 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4vw, 30px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
}
.sec05__img1 {
width: clamp(1px, 6.6666666667vw, 50px);
}
.sec05__img2 {
width: clamp(1px, 8.5333333333vw, 64px);
position: absolute;
right: 0;
bottom: 0;
}
.sec05__img6 {
width: clamp(1px, 22.6666666667vw, 170px);
margin-left: auto;
margin-right: auto;
position: absolute;
left: 0;
right: 0;
top: clamp(-66px, -8.8vw, 0px);
}
.sec05__text7 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: left;
margin-bottom: clamp(1px, 1.8666666667vw, 14px);
background-color: #ffeae3;
width: fit-content;
}
.sec05__text8 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.7333333333vw, 28px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: left;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.sec05__img20 {
width: clamp(1px, 26.6666666667vw, 200px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec05__img21 {
width: clamp(1px, 53.3333333333vw, 400px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec05__box1 {
padding: 0 clamp(1px, 4vw, 30px);
margin-top:clamp(1px, 16.53333333vw, 124px);
}
.sec06 {
padding-left: clamp(1px, 5.3333333333vw, 40px);
padding-right: clamp(1px, 5.3333333333vw, 40px);
}
.sec06__bg2 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec06_bg2.png);
background-size: 100% 100%;
width: clamp(1px, 91.3333333333vw, 685px);
height: clamp(1px, 54.1333333333vw, 406px);
margin-left: auto;
margin-right: auto;
padding-top: clamp(1px, 15.4666666667vw, 116px);
position: relative;
margin-bottom: clamp(1px, 13.3333333333vw, 100px);
}
.sec06__bg3 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec06_bg3.png);
background-size: 100% 100%;
height: clamp(1px, 37.3333333333vw, 280px);
margin-left: auto;
margin-right: auto;
padding-top: clamp(1px, 9.3333333333vw, 70px);
position: relative;
}
.sec06__bg3::before, .sec06__bg3::after {
position: absolute;
content: "";
}
.sec06__bg3::before {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec06_bg4.png);
background-size: 100% 100%;
width: clamp(1px, 30.9333333333vw, 232px);
height: clamp(1px, 23.2vw, 174px);
left: -5%;
top: clamp(-90px, -12vw, 0px);
}
.sec06__bg3::after {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec06_bg5.png);
background-size: 100% 100%;
width: clamp(1px, 17.7333333333vw, 133px);
height: clamp(1px, 31.7333333333vw, 238px);
right: -4%;
bottom: clamp(-70px, -9.3333333333vw, 0px);
}
.sec06__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.1333333333vw, 46px);
line-height: clamp(1px, 9.6vw, 72px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 9.3333333333vw, 70px);
width: clamp(1px, 73.3333333333vw, 550px);
margin-left: auto;
margin-right: auto;
position: relative;
}
.sec06__title::before, .sec06__title::after {
position: absolute;
content: "";
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/cta_bg2.png);
background-size: 100% 100%;
width: clamp(1px, 5.7333333333vw, 43px);
height: clamp(1px, 10.1333333333vw, 76px);
display: inline-block;
bottom: clamp(1px, 5.3333333333vw, 40px);
}
.sec06__title::before {
left: 0;
transform: rotate(124deg);
}
.sec06__title::after {
right: 0;
}
.sec06__img {
margin-left: auto;
margin-right: auto;
}
.sec06__img1 {
width: clamp(1px, 2.5333333333vw, 19px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
position: absolute;
left: 0;
right: 0;
bottom: clamp(-80px, -10.6666666667vw, 0px);
}
.sec06__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.3333333333vw, 40px);
line-height: clamp(1px, 8.2666666667vw, 62px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec06__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 7.7333333333vw, 58px);
line-height: clamp(1px, 8.8vw, 66px);
color: #fd713e;
font-feature-settings: normal;
text-align: center;
}
.sec06__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: clamp(1px, 6.1333333333vw, 46px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
}
.sec07 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec07_bg1.png);
background-size: 100% 100%;
padding-top: clamp(1px, 13.3333333333vw, 100px);
padding-bottom: clamp(1px, 13.3333333333vw, 100px);
}
.sec07__list.--1 {
margin-left: clamp(1px, 6.6666666667vw, 50px);
margin-right: clamp(1px, 6.6666666667vw, 50px);
}
.sec07__bg2 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec07_bg2.png);
background-size: 100% 100%;
width: clamp(1px, 87.2vw, 654px);
height: clamp(1px, 11.4666666667vw, 86px);
margin-left: auto;
margin-right: auto;
padding-top: clamp(1px, 1.0666666667vw, 8px);
}
.sec07__bg3 {
background-color: #ffffff;
padding: clamp(1px, 2.6666666667vw, 20px);
padding-bottom: clamp(1px, 8vw, 60px);
}
.sec07__bg4 {
border: clamp(1px, 0.2666666667vw, 2px) solid #c09a85;
border-radius: clamp(1px, 1.3333333333vw, 10px);
padding: clamp(1px, 4vw, 30px) clamp(1px, 4vw, 30px) clamp(1px, 4vw, 30px);
}
.sec07__img1 {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 0.5333333333vw, 4px);
}
.sec07__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4vw, 30px);
line-height: clamp(1px, 13.3333333333vw, 100px);
color: #ffffff;
font-feature-settings: normal;
text-align: center;
background-color: #c09a85;
}
.sec07__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.3333333333vw, 40px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
display: block;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec07__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 8.5333333333vw, 64px);
line-height: 1;
color: #fd713e;
font-feature-settings: normal;
text-align: center;
display: block;
width: clamp(1px, 65.0666666667vw, 488px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 8vw, 60px);
letter-spacing: 0.1em;
position: relative;
}
.sec07__text3::before, .sec07__text3::after {
content: "";
display: block;
width: clamp(1px, 10.6666666667vw, 80px);
height: clamp(1px, 0.2666666667vw, 2px);
top: 49%;
position: absolute;
background-color: #fd713e;
}
.sec07__text3::before {
left: 0;
}
.sec07__text3::after {
right: 0;
}
.sec07__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1;
color: #ffffff;
font-feature-settings: normal;
text-align: center;
width: clamp(1px, 33.3333333333vw, 250px);
margin-left: auto;
margin-right: auto;
position: relative;
top: clamp(-54px, -7.2vw, 0px);
background-color: #c09a85;
padding-top: clamp(1px, 1.0666666667vw, 8px);
padding-bottom: clamp(1px, 1.6vw, 12px);
}
.sec07__text4::before, .sec07__text4::after {
content: "●";
font-size: 0.3em;
position: relative;
top: clamp(-8px, -1.0666666667vw, 0px);
}
.sec07__text4::before {
margin-right: clamp(1px, 1.8666666667vw, 14px);
}
.sec07__text4::after {
margin-left: clamp(1px, 1.8666666667vw, 14px);
}
.sec07__text5 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.2vw, 24px);
line-height: clamp(1px, 4.5333333333vw, 34px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 10.6666666667vw, 80px);
}
.sec07__text6 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 1.8666666667vw, 14px);
border-bottom: clamp(1px, 0.2666666667vw, 2px) solid #c09a85;
}
.sec07__text7 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: 1.4;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec08__bg1 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec08_bg1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: clamp(1px, 14.6666666667vw, 110px);
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
height: clamp(1px, 128vw, 960px);
position: relative;
z-index: 6;
}
.sec08__bg2 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec08_bg2.png);
background-size: 100% 100%;
width: clamp(1px, 31.6vw, 237px);
height: clamp(1px, 31.6vw, 237px);
padding-top: clamp(1px, 8.5333333333vw, 64px);
margin-left: auto;
margin-right: clamp(1px, 2.6666666667vw, 20px);
margin-top: clamp(-90px, -12vw, 0px);
}
.sec08__bg3 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec08_bg3.png);
background-size: 100% 100%;
width: clamp(1px, 32vw, 240px);
height: clamp(1px, 32vw, 240px);
padding-top: clamp(1px, 12vw, 90px);
margin-left: clamp(1px, 1.3333333333vw, 10px);
margin-right: auto;
margin-top: clamp(-50px, -6.6666666667vw, 0px);
}
.sec08__bg4 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec08_bg4.png);
background-size: 100% 100%;
width: clamp(1px, 34.6666666667vw, 260px);
height: clamp(1px, 34.6666666667vw, 260px);
padding-top: clamp(1px, 9.3333333333vw, 70px);
margin-left: auto;
margin-right: clamp(1px, 4vw, 30px);
margin-top: clamp(-30px, -4vw, 0px);
}
.sec08__img1 {
width: clamp(1px, 2.5333333333vw, 19px);
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: clamp(-70px, -9.3333333333vw, 0px);
left: 0;
right: 0;
}
.sec08__img2 {
width: clamp(1px, 23.2vw, 174px);
margin-left: auto;
margin-right: auto;
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec08_img2.png);
background-size: 100% 100%;
}
.sec08__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 8vw, 60px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 8vw, 60px);
}
.sec08__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.4vw, 48px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
}
.sec08__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: center;
}
.sec09 {
background-image: linear-gradient(to bottom, #f8f7f4 0%, #ffffff 90%);
padding-top: clamp(1px, 13.3333333333vw, 100px);
position: relative;
}
.sec09__box1 {
width: clamp(1px, 86.6666666667vw, 650px);
padding-top: clamp(1px, 8vw, 60px);
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
padding-left: clamp(1px, 5.3333333333vw, 40px);
border: clamp(1px, 0.8vw, 6px) solid #ffffff;
background-image: linear-gradient(to right, #f1f1f1, #ffffff, #fbe6dd);
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
}
.sec09__box2 {
background-color: #f1efe9;
padding-top: clamp(1px, 5.3333333333vw, 40px);
padding-bottom: clamp(1px, 13.3333333333vw, 100px);
margin-bottom: clamp(1px, 6.6666666667vw, 50px);
margin-left: clamp(1px, 6.6666666667vw, 50px);
margin-right: clamp(1px, 6.6666666667vw, 50px);
}
.sec09__box3 {
padding-top: clamp(1px, 10.6666666667vw, 80px);
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
background-color: #f8f7f4;
}
.sec09__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 6.1333333333vw, 46px);
line-height: clamp(1px, 12vw, 90px);
color: #ffffff;
font-feature-settings: normal;
text-align: left;
width: clamp(1px, 86.6666666667vw, 650px);
height: clamp(1px, 12vw, 90px);
padding-left: clamp(1px, 6.6666666667vw, 50px);
background-color: #c09a85;
}
.sec09__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
position: relative;
z-index: 2;
}
.sec09__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.6666666667vw, 50px);
line-height: 1.7;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
position: relative;
z-index: 2;
}
.sec09__text4 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 2;
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 10.6666666667vw, 80px);
letter-spacing: 0.05em;
}
.sec09__text5 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.6vw, 42px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec09__text6 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.3333333333vw, 40px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 2.1333333333vw, 16px);
}
.sec09__text7 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.1333333333vw, 46px);
line-height: 1.8;
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
}
.sec09__img1 {
width: clamp(1px, 38.5333333333vw, 289px);
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
top: clamp(1px, 14.6666666667vw, 110px);
z-index: 1;
}
.sec09__img2 {
width: clamp(1px, 12vw, 90px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
}
.sec09__img3 {
width: clamp(1px, 72.5333333333vw, 544px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 8vw, 60px);
}
.sec09__img4 {
width: clamp(1px, 40.5333333333vw, 304px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.sec09__text8 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 6.6666666667vw, 50px);
line-height: 1.5;
color: #fd713e;
font-feature-settings: "palt";
text-align: center;
margin-bottom: clamp(1px, 6.6666666667vw, 50px);
}
.sec09__text9 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 2.9333333333vw, 22px);
line-height: 1;
color: #3f3a39;
font-feature-settings: "palt";
text-align: center;
margin-bottom: clamp(1px, 4vw, 30px);
}
.sec10 {
height: clamp(1px, 104vw, 780px);
padding-top: clamp(1px, 12.5333333333vw, 94px);
}
.sec10__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.8666666667vw, 29px);
line-height: clamp(1px, 7.2vw, 54px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
width: fit-content;
margin-left: auto;
margin-right: clamp(1px, 6.6666666667vw, 50px);
}
.sec10__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.6vw, 27px);
line-height: clamp(1px, 5.0666666667vw, 38px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: left;
margin-top: clamp(1px, 4.8vw, 36px);
padding-left: clamp(1px, 8vw, 60px);
text-shadow: clamp(1px, 0.9333333333vw, 7px) clamp(1px, 0.9333333333vw, 7px) clamp(1px, 1.2vw, 9px) #ffffff, clamp(1px, 0.9333333333vw, 7px) clamp(-7px, -0.9333333333vw, 0px) clamp(1px, 1.2vw, 9px) #ffffff, clamp(-7px, -0.9333333333vw, 0px) clamp(1px, 0.9333333333vw, 7px) clamp(1px, 1.2vw, 9px) #ffffff, clamp(-7px, -0.9333333333vw, 0px) clamp(-7px, -0.9333333333vw, 0px) clamp(1px, 1.2vw, 9px) #ffffff;
}
.sec11 {
padding-top: clamp(1px, 13.3333333333vw, 100px);
padding-bottom: clamp(1px, 8vw, 60px);
}
.sec11__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.8vw, 36px);
line-height: clamp(1px, 6.9333333333vw, 52px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 8vw, 60px);
position: relative;
}
.sec11__title::before, .sec11__title::after {
position: absolute;
content: "";
width: clamp(1px, 16vw, 120px);
height: 2px;
background-color: #0d0d0d;
display: block;
top: 52%;
}
.sec11__title::before {
left: 0;
}
.sec11__title::after {
right: 0;
}
.sec11__img {
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec11__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.8vw, 36px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #0d0d0d;
font-feature-settings: "palt";
text-align: left;
}
.sec11__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #0d0d0d;
font-feature-settings: "palt";
text-align: left;
}
.sec12 {
padding: clamp(1px, 13.3333333333vw, 100px) clamp(1px, 6.6666666667vw, 50px) 0;
}
.sec12__bg2 {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec12_bg2.png);
background-size: 100% 100%;
padding-bottom: clamp(1px, 6.6666666667vw, 50px);
border-bottom: 2px solid #0d0d0d;
}
.sec12__list {
display: flex;
flex-direction: column;
}
.sec12__item {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: 2;
color: #0d0d0d;
font-feature-settings: normal;
padding-left: clamp(1px, 9.3333333333vw, 70px);
position: relative;
}
.sec12__item::before {
position: absolute;
content: "◆";
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.2vw, 24px);
line-height: 1.5;
color: #fd713e;
font-feature-settings: normal;
left: clamp(1px, 4vw, 30px);
top: clamp(1px, 2.1333333333vw, 16px);
}
.sec12__title {
width: clamp(1px, 91.4666666667vw, 686px);
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec12__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: center;
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
}
.sec12__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 5.0666666667vw, 38px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: center;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
position: relative;
top: clamp(-30px, -4vw, 0px);
}
.sec12__text2::before, .sec12__text2::after {
position: absolute;
content: "";
width: clamp(1px, 25.3333333333vw, 190px);
height: 2px;
background-color: #0d0d0d;
display: block;
top: 52%;
}
.sec12__text2::before {
left: 0;
}
.sec12__text2::after {
right: 0;
}
.sec12__img1 {
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 16vw, 120px);
}
.sec13 {
display: flex;
gap: clamp(1px, 2.6666666667vw, 20px);
padding: clamp(1px, 18.6666666667vw, 140px) clamp(1px, 4vw, 30px) clamp(1px, 10.6666666667vw, 80px);
}
.sec13__flex {
display: flex;
justify-content: space-between;
}
.sec13__title {
writing-mode: vertical-rl;
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.6666666667vw, 50px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: normal;
}
.sec13__title .kuten {
display: inline-block;
transform: rotate(180deg) translateX(clamp(-10px, -1.3333333333vw, 0px));
}
.sec13__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: 1.5;
color: #0d0d0d;
font-feature-settings: "palt";
text-align: justify;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
flex-basis: clamp(1px, 34.6666666667vw, 260px);
}
.sec13__img1 {
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.sec13__img2 {
width: clamp(1px, 32.4vw, 243px);
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
margin-top: clamp(1px, 1.6vw, 12px);
}
.sec100 {
padding: clamp(1px, 2.6666666667vw, 20px) clamp(1px, 6.9333333333vw, 52px);
}
.sec100__img1 {
width: clamp(1px, 4.2666666667vw, 32px);
margin-left:auto;
margin-right:auto;
}
.sec100__list {
}
.sec100__item {
padding: clamp(1px, 6.1333333333vw, 46px) clamp(1px, 0.266667vw, 2px);
position: relative;
}
.sec100__item:not(:last-child)::after {
content: "";
position: absolute;
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/sec100_item_border.png);
background-size: 100% 100%;
width: clamp(1px, 87.4666667vw, 656px);
height: clamp(1px, 0.6666667vw, 5px);
right: 0;
left: 0;
bottom: 0;
}
.sec100__item-title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 600;
font-size: clamp(1px, 5.0666666667vw, 38px);
line-height: clamp(1px, 7.4666666667vw, 56px);
color: #000000;
font-feature-settings: "palt";
text-align: left;
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.sec100__item-title b, .sec100__item-title strong {
color: #fd713e;
}
.sec100__item-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.sec100__item-text {
width: clamp(1px, 46.13333333vw, 346px);
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 4.5333333333vw, 34px);
line-height: clamp(1px, 7.4666666667vw, 56px);
color: #000000;
font-feature-settings: "palt";
text-align: left;
}
.sec100__item-img {
width: clamp(1px, 37.33333vw, 280px);
} .header {
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: clamp(1px, 18vw, 135px);
background-color: #ff4e00;
}
.header__inner {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-left: clamp(1px, 2.6666666667vw, 20px);
padding-right: clamp(1px, 2.6666666667vw, 20px);
}
.header.active {
background-color: #fff;
} .logo__image {
display: block;
width: clamp(1px, 20.6666666667vw, 155px);
position: relative;
}
.logo__image::after {
content: "";
background-color: #ddd;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.2s;
}
.logo__image:hover::after {
opacity: 0.3;
}
.logo--centered {
margin-right: auto;
margin-left: auto;
} .mainvisual {
overflow: hidden;
margin-bottom: -1px;
width: 100%;
}
.mainvisual__image {
vertical-align: bottom;
width: 100%;
margin-left: auto;
margin-right: auto;
} .footer {
width: 100%;
height: clamp(1px, 16vw, 120px);
background-color: #c09a85;
display: flex;
align-items: center;
text-align: center;
}
@media screen and (min-width: 750px) {
.footer {
height: 120px;
}
}
.footer__inner {
margin-left: auto;
margin-right: auto;
}
.footer__copyright {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 2.1333333333vw, 16px);
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
margin-top: clamp(1px, 2.1333333333vw, 16px);
}
@media screen and (min-width: 750px) {
.footer__copyright {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1;
color: #0d0d0d;
font-feature-settings: normal;
margin-top: 25px;
}
} .faq {
height: auto;
background-color: #ffffff;
}
.faq__title {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 6.6666666667vw, 50px);
line-height: clamp(1px, 6.6666666667vw, 50px);
color: #0d0d0d;
font-feature-settings: normal;
text-align: center;
letter-spacing: 0.075em;
width: clamp(1px, 58.6666666667vw, 440px);
margin-left: auto;
margin-right: auto;
position: relative;
}
.faq__title::before, .faq__title::after {
content: "";
position: absolute;
width: clamp(1px, 5.6vw, 42px);
height: clamp(1px, 0.1333333333vw, 1px);
background-color: #0d0d0d;
top: clamp(1px, 1.0666666667vw, 8px);
bottom: 0;
margin: auto;
display: block;
}
.faq__title::before {
left: 0;
}
.faq__title::after {
right: 0;
}
.faq__list {
display: flex;
flex-direction: column;
gap: clamp(1px, 4vw, 30px);
}
.faq__item {
padding: clamp(1px, 2.6666666667vw, 20px) clamp(1px, 2.6666666667vw, 20px) clamp(1px, 2.6666666667vw, 20px) clamp(1px, 13.3333333333vw, 100px);
position: relative;
}
.faq__item::before {
position: absolute;
top: clamp(1px, 4vw, 30px);
left: clamp(1px, 4vw, 30px);
width: clamp(1px, 5.6vw, 42px);
aspect-ratio: 1;
display: flex;
align-items: baseline;
justify-content: center;
}
.faq__item--question {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.75;
color: #bcae97;
font-feature-settings: normal;
width: clamp(1px, 76vw, 570px);  }
.faq__item--question::before {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: clamp(1px, 4.8vw, 36px);
color: #ffffff;
font-feature-settings: normal;
content: "Q";
background-color: #bcae97;
}
.faq__item--question {
cursor: pointer;
transition: all 0.5s ease;
}
.faq__item--question::after {
display: block;
position: absolute;
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1;
color: #bcae97;
font-feature-settings: normal;
content: "+";
width: clamp(1px, 2.6666666667vw, 20px);
height: clamp(1px, 4vw, 30px);
top: 0;
bottom: 0;
margin: auto;
right: clamp(-50px, -6.6666666667vw, 0px);
}
.faq__item--question.close::after {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.1333333333vw, 46px);
line-height: 1;
color: #bcae97;
font-feature-settings: normal;
content: "-";
height: clamp(1px, 7.4666666667vw, 56px);
}
.faq__item--answer {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: clamp(1px, 4.8vw, 36px);
color: #0d0d0d;
font-feature-settings: normal;
width: clamp(1px, 80vw, 600px);
display: none;
}
.faq__item--answer::before {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 3.4666666667vw, 26px);
line-height: clamp(1px, 4.8vw, 36px);
color: #bcae97;
font-feature-settings: normal;
content: "A";
border: #bcae97 clamp(1px, 0.2666666667vw, 2px) solid;
top: clamp(1px, 2.6666666667vw, 20px);
}
.faq__question {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.75;
color: #bcae97;
font-feature-settings: normal;
margin-bottom: clamp(1px, 2.1333333333vw, 16px);
display: block;
} .fixed {
position: sticky;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
background-color: rgba(221, 221, 221, 0.8666666667);
}
.fixed__inner {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 750px;
margin: auto;
}
@media screen and (min-width: 750px) {
.fixed__inner {
max-width: 750px;
}
}
.fixed.active {
background-color: #fff;
}
.fixed__cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
width: 100%;
}
.fixed__btn {
width: 100%;
height: clamp(1px, 8vw, 60px);
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 2.6666666667vw, 20px);
line-height: 1;
color: #ffffff;
font-feature-settings: "palt";
text-align: center;
}
.fixed__btn-link {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
padding-top: clamp(1px, 2.6666666667vw, 20px);
}
.fixed__btn-link:hover {
position: relative;
}
.fixed__btn-link:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-color: #ffffff;
opacity: 0.2;
z-index: 1000;
}
.fixed__btn-link--img {
padding-top: 0;
} .slider {
width: 100%;
margin: 0 auto;
}
.slider img {
width: 100%;
height: auto;
}
.slider .slick-slide {
width: clamp(1px, 86.6666666667vw, 650px);
}
.slider2 .slick-slide {
margin-right: clamp(1px, 3.7333333333vw, 28px);
width: clamp(1px, 77.3333333333vw, 580px);
}
.slider .slick-slide.slick-center {
transform: scale(1); opacity: 1; }
.slider2 .draggable {
overflow: hidden !important;
}
.slider .slick-track {
display: flex;
gap: clamp(1px, 2.6666666667vw, 20px);
}
.slider2 .slick-track {
display: flex;
margin-left: clamp(1px, 2.6666666667vw, 20px);
}
.slider2 {
padding: 0 clamp(1px, 0vw, 0px) !important;
}  .slick-prev,
.slick-next {
position: absolute; top: 58%;
cursor: pointer; outline: none; height: clamp(1px, 9.7333333333vw, 73px);
width: clamp(1px, 9.7333333333vw, 73px);
background-color: #fd713e;
border-radius: 50%;
z-index: 5;
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 4.2666666667vw, 32px);
line-height: 1.5;
color: #ffffff;
font-feature-settings: normal;
display: flex;
justify-content: center;
align-items: center;
}
.slider2 .slick-prev {
left: clamp(1px, 2.6666666667vw, 20px);
}
.slider .slick-prev {
left: clamp(1px, 1.3333333333vw, 10px);
top: 47%;
}
.slick-prev span {
display: block;
border-top: #ffffff clamp(1px, 0.4vw, 3px) solid;
border-left: #ffffff clamp(1px, 0.4vw, 3px) solid;
width: clamp(1px, 3.2vw, 24px);
height: clamp(1px, 3.2vw, 24px);
margin-left: clamp(1px, 1.3333333333vw, 10px);
transform: rotate(-45deg);
}
.slider2 .slick-next {
right: clamp(1px, 2.6666666667vw, 20px);
}
.slider .slick-next {
right: clamp(1px, 1.3333333333vw, 10px);
top: 47%;
}
.slick-next span {
display: block;
border-top: #ffffff clamp(1px, 0.4vw, 3px) solid;
border-left: #ffffff clamp(1px, 0.4vw, 3px) solid;
width: clamp(1px, 3.2vw, 24px);
height: clamp(1px, 3.2vw, 24px);
margin-right: clamp(1px, 1.3333333333vw, 10px);
transform: rotate(135deg);
} .slick-dots {
text-align: center;
margin: 20px 0 0 0;
}
.slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 8px; height: 8px; display: block;
border-radius: 50%;
background: #ccc; }
.slick-dots .slick-active button {
background: #333; }
.scroll-hint-text {
font-size: clamp(1px, 2.6666666667vw, 20px);
line-height: clamp(1px, 2.6666666667vw, 20px);
}
.scroll-hint-icon {
top: clamp(1px, 97.3333333333vw, 730px);
left: clamp(1px, 25.3333333333vw, 190px);
width: clamp(1px, 32vw, 240px);
height: clamp(1px, 20vw, 150px);
border-radius: clamp(1px, 1.3333333333vw, 10px);
transition: opacity 0.3s;
opacity: 0;
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: clamp(1px, 5.3333333333vw, 40px) clamp(1px, 1.3333333333vw, 10px) clamp(1px, 1.3333333333vw, 10px) clamp(1px, 1.3333333333vw, 10px);
}
.scroll-hint-icon::before {
width: clamp(1px, 8.6666666667vw, 65px);
height: clamp(1px, 10.2666666667vw, 77px);
}
.scroll-hint-icon::after {
width: clamp(1px, 11.2vw, 84px);
height: clamp(1px, 4.2666666667vw, 32px);
top: 10px;
left: 50%;
margin-left: clamp(-40px, -5.3333333333vw, 0px);
background-size: 100% 100%;
}
.disable-scroll-hint {
display: none !important;
} .cta {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/cta_bg1.png);
background-position-y: top;
background-size: 100% 100%;
box-sizing: border-box;
padding-top: clamp(1px, 13.3333333333vw, 100px);
height: clamp(1px, 71.73333333vw, 538px);
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
.cta__bg {
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/cta_btn_bg.png);
background-size: 100% 100%;
width: clamp(1px, 93.3333333333vw, 700px);
height: clamp(1px, 25.0666667vw, 188px);
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
padding-left: clamp(1px, 1.6vw, 12px);
animation: fuwafuwa 2.5s ease infinite both;
}
.cta__text1 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: clamp(1px, 6.1333333333vw, 46px);
line-height: 1.5;
color: #fd713e;
font-feature-settings: normal;
text-align: center;
margin-bottom: clamp(1px, 6.6666666667vw, 50px);
width: fit-content;
margin-left:clamp(1px, 37.33333vw, 280px);
margin-right: auto;
position: relative;
}
.cta__text1::before, .cta__text1::after {
position: absolute;
content: "";
background-image: url(https://ans-skin.com/wp-content/themes/wp-theme-ans_v3.2/skintest-image/cta_bg2.png);
background-size: 100% 100%;
width: clamp(1px, 5.7333333333vw, 43px);
height: clamp(1px, 10.1333333333vw, 76px);
display: inline-block;
bottom: clamp(-20px, -2.6666666667vw, 0px);
}
.cta__text1::before {
left: clamp(-80px, -10.6666666667vw, 0px);
transform: rotate(124deg);
}
.cta__text1::after {
right: clamp(-80px, -10.6666666667vw, 0px);
}
.cta__text2 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 5.3333333333vw, 40px);
line-height: 1.4;
color: #ffffff;
font-feature-settings: normal;
text-align: left;
margin-bottom: clamp(1px, 0.8vw, 6px);
margin-left: clamp(1px, 1.6vw, 12px);
}
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
10% {
transform: translateY(clamp(-10px, -1.3333333333vw, 0px));
}
20% {
transform: translateY(0);
}
30% {
transform: translateY(clamp(-10px, -1.3333333333vw, 0px));
}
40% {
transform: translateY(0);
}
}
.cta__text3 {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: clamp(1px, 3.2vw, 24px);
line-height: 1.4;
color: #3f3a39;
font-feature-settings: normal;
text-align: left;
padding-top: clamp(1px, 3.2vw, 24px);
}  .text-capitalize {
text-transform: capitalize;
}
.text-uppercase {
text-transform: uppercase;
}
@media screen and (min-width: 750px) {
.sp {
display: none;
}
}
.pc {
display: none;
}
@media screen and (min-width: 750px) {
.pc {
display: inherit;
}
}
.marker {
background: linear-gradient(transparent 65%, #fdddd0 65%, #fdddd0 90%, transparent 90%);
}
.boxshadow {
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.2);
max-width: 750px;
margin: 0 auto;
}
@media screen and (min-width: 750px) {
.boxshadow {
max-width: 750px;
}
}
.text-deco-marker {
background: linear-gradient(transparent 65%, #fdddd0 65%, #fdddd0 90%, transparent 90%);
}
.text-deco-marker2 {
background: linear-gradient(transparent 70%, #fbcdba 70%, #fbcdba 90%, transparent 90%);
}
.text-deco-dash--accent, .text-deco-dash {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-thickness: clamp(1px, 0.2666666667vw, 2px);
text-underline-offset: clamp(1px, 1.0666666667vw, 8px);
}
.text-deco-dash--accent {
text-decoration-color: #fd713e;
}
.text-deco-regular {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: inherit;
line-height: inherit;
color: inherit;
font-feature-settings: inherit;
}
.text-deco-medium {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: inherit;
line-height: inherit;
color: inherit;
font-feature-settings: inherit;
}
.text-deco-bold {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: inherit;
line-height: inherit;
color: inherit;
font-feature-settings: inherit;
}
.text-deco-black {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: inherit;
line-height: inherit;
color: inherit;
font-feature-settings: inherit;
}
.text-deco-underline--accent, .text-deco-underline {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: clamp(1px, 0.2666666667vw, 2px);
text-underline-offset: 0.2em;
}
.text-deco-underline--accent {
text-decoration-color: #fd713e;
}
.text-deco-underline--double {
position: relative;
}
.text-deco-underline--double::before {
content: "";
width: 100%;
height: clamp(1px, 1.3333333333vw, 10px);
background-color: #ffffff;
border-top: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
border-bottom: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
position: absolute;
left: 0;
right: 0;
bottom: -0.1em;
}
.text-deco-underline--double--accent::before {
content: "";
width: 100%;
height: clamp(1px, 1.3333333333vw, 10px);
background-color: #ffffff;
border-top: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
border-bottom: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
position: absolute;
left: 0;
right: 0;
bottom: -0.1em;
}
.text-deco-doubleline--accent, .text-deco-doubleline {
position: relative;
}
.text-deco-doubleline--accent::before, .text-deco-doubleline::before {
content: "";
width: 100%;
height: clamp(1px, 1.6vw, 12px);
background-color: #ffffff;
border-top: clamp(1px, 0.2666666667vw, 2px) solid #0d0d0d;
border-bottom: clamp(1px, 0.2666666667vw, 2px) solid #0d0d0d;
position: absolute;
left: 0;
right: 0;
bottom: -0.3em;
}
.text-deco-doubleline--accent::before {
border-top: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
border-bottom: clamp(1px, 0.2666666667vw, 2px) solid #fd713e;
}
.text-deco-overdot--sec26, .over-dotted, .text-deco-overdot--sec13, .text-deco-overdot--sec02, .text-deco-overdot--accent, .text-deco-overdot {
position: relative;
}
.text-deco-overdot--sec26::after, .over-dotted::after, .text-deco-overdot--sec13::after, .text-deco-overdot--sec02::after, .text-deco-overdot--accent::after, .text-deco-overdot::after {
position: absolute;
content: "";
width: clamp(1px, 1.0666666667vw, 8px);
height: clamp(1px, 1.0666666667vw, 8px);
border-radius: 50%;
background-color: #0d0d0d;
margin-left: auto;
margin-right: auto;
top: clamp(1px, 0.5333333333vw, 4px);
left: 0;
right: 0;
}
.text-deco-overdot--accent::after {
background-color: #fd713e;
width: clamp(1px, 1.2vw, 9px);
height: clamp(1px, 1.2vw, 9px);
}
.over-dotted::after {
background-color: #ffffff;
width: clamp(1px, 0.5333333333vw, 4px);
height: clamp(1px, 0.5333333333vw, 4px);
top: clamp(1px, 0.2666666667vw, 2px);
}
.text-deco-overdot--sec26::after {
background-color: #fd713e;
width: clamp(1px, 1.2vw, 9px);
height: clamp(1px, 1.2vw, 9px);
}
.text-deco-overdot--sec26 ::-webkit-full-page-media, .text-deco-overdot--sec26 :future, :root .text-deco-overdot--sec26::after {
top: clamp(-10px, -1.3333333333vw, 0px);
}
.text-deco-box--accent, .text-deco-box {
display: inline-block;
border: clamp(1px, 0.4vw, 3px) solid #0d0d0d;
}
.text-deco-box--accent {
border-color: #fd713e;
}
.text-deco-bg--white {
background-color: #ffffff;
}
.text-deco-bg--grad {
background-image: linear-gradient(to left, #faebe5, #fbddd3);
}
.text-deco-bg--gray {
background-color: #f8f7f4;
}
.text-deco-bg--accent {
background-color: #fd713e;
color: #ffffff;
display: inline-block;
padding-left: clamp(1px, 1.6vw, 12px);
padding-right: clamp(1px, 1.6vw, 12px);
padding-bottom: clamp(1px, 0.5333333333vw, 4px);
}
.text-deco-italic {
display: inline-block;
transform: skew(-15deg);
}
.text-accent {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-size: inherit;
line-height: inherit;
color: #fd713e;
font-feature-settings: inherit;
}
.text-accent--bold {
font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: inherit;
line-height: inherit;
color: #fd713e;
font-feature-settings: inherit;
}
.text-num {
font-size: 1.4em;
line-height: inherit;
color: inherit;
font-feature-settings: "palt";
}
.text_color--line {
font-size: inherit;
line-height: inherit;
color: #06c755;
font-feature-settings: "palt";
}
.text-fz70 {
font-size: 0.7em;
}
.text-fz80 {
font-size: 0.8em;
}
.text-fz90 {
font-size: 0.9em;
}
.text-fz110 {
font-size: 1.1em;
}
.text-fz120 {
font-size: 1.2em;
}
.text-fz150 {
font-size: 1.5em;
}
.text-fz200 {
font-size: 2em;
line-height: 1.3;
}
.text-fz250 {
font-size: 2.5em;
}
.mb_vw10 {
margin-bottom: clamp(1px, 1.3333333333vw, 10px);
}
.mb_vw20 {
margin-bottom: clamp(1px, 2.6666666667vw, 20px);
}
.mb_vw30 {
margin-bottom: clamp(1px, 4vw, 30px);
}
.mb_vw40 {
margin-bottom: clamp(1px, 5.3333333333vw, 40px);
}
.mb_vw50 {
margin-bottom: clamp(1px, 6.6666666667vw, 50px);
}
.mb_vw60 {
margin-bottom: clamp(1px, 8vw, 60px);
}
.mb_vw70 {
margin-bottom: clamp(1px, 9.3333333333vw, 70px);
}
.mb_vw80 {
margin-bottom: clamp(1px, 10.6666666667vw, 80px);
}
.mb_vw90 {
margin-bottom: clamp(1px, 12vw, 90px);
}
.mb_vw100 {
margin-bottom: clamp(1px, 13.3333333333vw, 100px);
}
.plr_vw10 {
padding-left: clamp(1px, 1.3333333333vw, 10px);
padding-right: clamp(1px, 1.3333333333vw, 10px);
}
.plr_vw20 {
padding-left: clamp(1px, 2.6666666667vw, 20px);
padding-right: clamp(1px, 2.6666666667vw, 20px);
}
.plr_vw30 {
padding-left: clamp(1px, 4vw, 30px);
padding-right: clamp(1px, 4vw, 30px);
}
.plr_vw40 {
padding-left: clamp(1px, 5.3333333333vw, 40px);
padding-right: clamp(1px, 5.3333333333vw, 40px);
}
.plr_vw60 {
padding-left: clamp(1px, 8vw, 60px);
padding-right: clamp(1px, 8vw, 60px);
}
.nanameline--sec23, .nanameline--sec18, .nanameline--sec13, .nanameline--sec05, .nanameline--accent, .nanameline {
position: relative;
}
.nanameline--sec23::before, .nanameline--sec18::before, .nanameline--sec13::before, .nanameline--sec05::before, .nanameline--accent::before, .nanameline::before {
content: "";
position: absolute;
display: block;
width: 2px;
height: 100%;
background-color: #0d0d0d;
left: 0;
bottom: -0.1em;
transform: rotate(-30deg);
}
.nanameline--sec23::after, .nanameline--sec18::after, .nanameline--sec13::after, .nanameline--sec05::after, .nanameline--accent::after, .nanameline::after {
content: "";
position: absolute;
display: block;
width: 2px;
height: 100%;
background-color: #0d0d0d;
right: 0;
bottom: -0.1em;
transform: rotate(30deg);
}
.nanameline--accent::before {
background-color: #fd713e;
width: clamp(1px, 0.2666666667vw, 2px);
left: -0.6em;
}
.nanameline--accent::after {
background-color: #fd713e;
width: clamp(1px, 0.2666666667vw, 2px);
right: -0.6em;
}
.nanameline--sec05::before {
height: 60%;
width: clamp(1px, 0.4vw, 3px);
left: 1.4em;
bottom: 0em;
}
.nanameline--sec05::after {
height: 60%;
width: clamp(1px, 0.4vw, 3px);
right: 1.4em;
bottom: 0em;
}
.nanameline--sec13::before {
width: clamp(1px, 0.4vw, 3px);
height: 90%;
left: -0.6em;
bottom: 0em;
}
.nanameline--sec13::after {
width: clamp(1px, 0.4vw, 3px);
height: 90%;
right: -0.6em;
bottom: 0em;
}
.nanameline--sec18::before {
width: clamp(1px, 0.4vw, 3px);
height: 60%;
left: -0.6em;
bottom: 0.2em;
}
.nanameline--sec18::after {
width: clamp(1px, 0.4vw, 3px);
height: 60%;
right: -0.6em;
bottom: 0.2em;
}
.nanameline--sec23::before, .nanameline--sec23::after {
width: clamp(1px, 0.4vw, 3px);
height: 1.2em;
bottom: -0.2em;
}
.nanameline--sec23::before {
left: -0.6em;
}
.nanameline--sec23::after {
right: -0.6em;
}