TEST 4のコーディングです。
cssのノーマライズ部分
@charset "UTF-8";
/*色*/
/*フォント*/
/*レスポンシブル*/
/*通常のmax-widthでの設定*/
/*min-widthでの小刻みの設定*/
/*---------------サイトの基本設定---------------*/
/*cssのリセット*/
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;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
}
/*html&bodyの設定*/
html {
font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
overflow-x: hidden;
}
body {
font-family: "Noto Serif JP", serif, "Noto Sans JP", "YakuHanJPs_Noto",
"Roboto", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium",
"YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ",
"Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0;
padding: 0;
line-height: 1.8;
width: 100%;
max-width: 100vw;
height: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
/* - - h1.h2.h3.... - - */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
color: #000;
}
/* -- a -- */
a {
color: #000;
text-decoration: none;
outline: none;
}
a,
a > img {
transition: 0.2s;
}
/* -- img -- */
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
/* -- ul -- */
ul {
list-style: none;
}
li {
list-style: none;
}
/* -- :hover -- */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
cursor: pointer;
}
/* -- input --*/
input[type="text"] {
font-size: 1rem;
}
input[type="submit"] {
padding: 8px;
border: #efefef;
color: #000;
background-color: #f0f8ff;
}
/*---------------サイトの基本設定---------------*/
/*---------------確認用に一時記述----------------*/
/*--------要素を入れたら高さを消してください------*/
header {
background-color: #fff;
}
.header_inner {
background-color: #fff;
}
.container {
background-color: #fff;
}
.contents {
background-color: #fff;
padding: 10px;
}
#sidebar {
background-color: #edf2f6;
}
footer {
background-color: #dfdfdf;
}
.footer_inner {
height: 250px;
}
/*.header_inner,
.footer_inner,
.container{
max-width: 1350px;
margin: 0 auto;
padding-right: 25px;
padding-left: 25px;
}
.container {
margin-top: 10px;
padding: 0px 10px 60px 10px;
@include m.breakpoint(ipad-pro){
margin-top: 0px;
padding: 0px 25px 60px 25px;
}
}今回のプロジェクトはwidthが最大なのでミュート*/
/*----------------------------------------------*/
/* モバイルとPCでの表示に関するスタイル*/
.sp-only {
display: block;
}
@media (min-width: 80rem) {
.sp-only {
display: none;
}
}
.pc-only {
display: none;
}
@media (min-width: 80rem) {
.pc-only {
display: block;
}
}
.mobile-only {
display: block;
}
@media (min-width: 48rem) {
.mobile-only {
display: none;
}
}
.tablet-only {
display: none;
}
@media (min-width: 48rem) {
.tablet-only {
display: block;
}
}cssのheader部分まで
@charset "UTF-8";
/*色*/
/*フォント*/
/*レスポンシブル*/
/*通常のmax-widthでの設定*/
/*min-widthでの小刻みの設定*/
/*ヘッダーのCSS*/
/*ヘッダー設定*/
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
transition: 0.5s;
z-index: 9000;
}
.header.hide {
top: -80px;
}
.header .header_inner {
display: flex;
height: 40px;
padding: 20px;
}
.header .header_inner .cart_user_login {
display: flex;
align-items: center;
}
.header .header_inner .cart_user_login .user_login_wrap img {
height: 45px;
}
.header .header_inner .cart_user_login_sp .cart_wrap_sp a img {
max-width: 40px;
max-height: 40px;
}
.header .header_inner .bland_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*ハンバーガーナビの設定*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top: 0;
right: -120%;
width: 60%;
/*半分とか調整をする際は、g-nav-listも合わせる*/
height: 100vh;
/*ナビの高さ*/
background: #fff;
/*動き*/
transition: all 0.6s;
}
@media (min-width: 48rem) {
#g-nav {
width: 40%;
}
}
#g-nav.panelactive {
right: 0;
}
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 60%;
/*半分とか調整をする際は、g-navも合わせる*/
height: 100vh;
/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 48rem) {
#g-nav.panelactive #g-nav-list {
width: 40%;
}
}
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
left: 5%;
margin-top: 100px;
}
@media (min-width: 64.375rem) {
#g-nav ul {
left: 10%;
}
}
#g-nav ul .sns-wrapper {
display: flex;
gap: 20px;
margin-top: 10px;
margin-left: 10px;
}
#g-nav ul .sns-wrapper .x-logo a img {
width: 20px;
height: 20px;
}
@media (min-width: 48rem) {
#g-nav ul .sns-wrapper .x-logo a img {
width: 35px;
height: 35px;
}
}
#g-nav ul .sns-wrapper .insta-logo a img {
width: 25px;
height: 25px;
}
@media (min-width: 48rem) {
#g-nav ul .sns-wrapper .insta-logo a img {
width: 40px;
height: 40px;
}
}
#g-nav li {
font-size: 1.5rem;
list-style: none;
text-align: left;
}
@media (min-width: 48rem) {
#g-nav li {
font-size: 2rem;
}
}
#g-nav li li:not(:first-child) {
margin-top: 20px;
}
#g-nav li a {
color: #000;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/*========= ボタンのためのCSS ===============*/
.openbtn {
position: absolute;
z-index: 9999;
/*ボタンを最前面に*/
top: 15px;
right: 10px;
cursor: pointer;
width: 45px;
height: 45px;
}
@media (min-width: 64.375rem) {
.openbtn {
width: 70px;
height: 70px;
}
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*ナビ内のアコーディオン階層のCSS*/
/*====================================================================
.s_01 .accordion_one
====================================================================*/
.section {
position: relative;
right: 8px;
width: 150px;
margin: 0 auto;
}
@media (min-width: 48rem) {
.section {
right: 0px;
width: 300px;
}
}
.s_01 .accordion_one .accordion_header {
color: #000;
padding: 10px;
font-size: 1.5rem;
text-align: left;
position: relative;
right: 12px;
z-index: 1;
cursor: pointer;
transition-duration: 0.2s;
}
@media (min-width: 48rem) {
.s_01 .accordion_one .accordion_header {
font-size: 2rem;
right: 0px;
}
}
.s_01 .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 15%;
width: 40px;
height: 40px;
margin-top: -20px;
box-sizing: border-box;
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.s_01 .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.s_01 .accordion_one .accordion_header.open .i_box {
transform: rotate(-360deg);
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before,
.s_01 .accordion_one .accordion_header .i_box .one_i:after {
display: flex;
content: "";
background-color: #000;
border-radius: 10px;
width: 15px;
height: 3px;
position: absolute;
top: 7px;
left: 1.4px;
transform: rotate(0deg);
transform-origin: center center;
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before {
width: 3px;
height: 15px;
top: 1px;
left: 7px;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:after {
transform: rotate(-45deg);
}
.s_01 .accordion_one .accordion_inner {
display: none;
padding-left: 20px;
box-sizing: border-box;
font-size: 0.8rem;
}
@media (min-width: 48rem) {
.s_01 .accordion_one .accordion_inner {
font-size: 1.5rem;
}
}
.s_01 .accordion_one .accordion_inner .box_one {
height: auto;
}
.s_01 .accordion_one .accordion_inner .box_one p {
margin-top: 10px;
font-size: 1.2rem;
}
@media (min-width: 48rem) {
.s_01 .accordion_one .accordion_inner .box_one p {
font-size: 1.5rem;
}
}
/*ポップアップバナー*/
.popup-banner {
position: fixed;
left: 0px;
bottom: 0px;
width: 300px;
z-index: 1000;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
overflow: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-20px);
}
@media (max-width: 560px) {
.popup-banner {
width: 200px;
height: 200px;
z-index: 1000;
}
}
.popup-banner.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.popup-banner.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-20px);
}
.popup-banner.closed {
display: none;
}
.popup-close {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 20px;
line-height: 1;
z-index: 1;
}
.popup-banner img {
width: 100%;
display: block;
}
/*モーダルバナー*/
.modal-banner {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-banner.show {
display: block;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: fadeIn 0.3s ease;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate(-50%, -45%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 24px;
line-height: 1;
z-index: 1;
transition: background 0.2s;
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.9);
}
.modal-content img {
width: 600px;
height: auto;
display: block;
}
@media (max-width: 560px) {
.modal-content img {
max-width: 350px;
height: auto;
display: block;
}
}
/* スクロール禁止用 */
body.no-scroll {
overflow: hidden !important;
position: fixed;
width: 100%;
left: 0;
right: 0;
}
/*# sourceMappingURL=lp_beauty_header.css.map */
cssのmainの中身（これだけSCSS）
<section id="repeat" class="repeat">
<div class="repeat_wrapper">
<picture class="repeat_picture">
<source
srcset="img/beauty_lp/repeat_img.png"
media="(min-width: 1030px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/repeat_img.png"
media="(min-width: 768px)"
type="image/png"
/>
<source
srcset="img/beauty_lp/repeat_img_sp.png"
media="(max-width: 767px)"
type="image/png"
/>
<img
src="../img/beauty_lp/repeat_img.png.png"
alt="”代替テキスト”"
/>
</picture>
<p>
DEMOクリームを「ぜひリピートしたい・リピートしたい」と回答<br />（DEMOクリームをご購入者1,483名にアンケート
広告配信：2023.12〜2025.1）
</p>
</div>
</section>cssのcta_1
/*CTA1のコンテンツ*/
.cta_1 {
background-color: v.$background-color-1;
padding-top: 20px;
padding-bottom: 80px;
@include m.breakpoint(tablet) {
padding-top: 20px;
padding-bottom: 100px;
}
@include m.breakpoint(pc) {
padding-top: 125px;
padding-bottom: 125px;
}
.cta_1_wrapper {
padding: 20px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 10px auto;
box-sizing: border-box;
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.cta_container {
text-align: center;
@include m.breakpoint(pc) {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.product_img {
margin: 0 auto;
max-width: 300px;
@include m.breakpoint(tablet) {
max-width: 354px;
}
@include m.breakpoint(pc) {
margin: unset;
max-width: 428px;
}
}
.cta1_cart_1 {
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 365px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
.cta1_cart_2 {
margin-top: 68px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
.red {
color: v.$red;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 20px;
max-width: 365px;
width: 100%;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
}
}
}cssのmechanism
/*メカニズムのコンテンツ*/
.mechanism {
width: 100%;
background-color: v.$background-color-2;
padding: 50px 0px 50px 0px;
.mecha_wrapper {
padding: 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 10px auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
width: 100%;
max-width: 700px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1400px;
}
.text-box {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 30px);
max-width: 272px;
margin: 0 auto;
padding: 15px;
border: 1px solid v.$textbox-border-1;
background-color: v.$white;
@include m.breakpoint(pc) {
width: 60%;
}
.title_text {
width: 100%;
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.5rem;
}
}
.arrow {
width: 15px;
height: 15px;
display: block;
border-bottom: solid 2px;
border-right: solid 2px;
transform: rotate(45deg);
margin-top: -5px;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
margin: 50px 0 50px 0;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.5rem;
}
}
ul {
text-align: center;
@include m.breakpoint(tablet) {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
li {
width: 100%;
max-width: 300px;
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
padding: 25px;
margin: 0 auto;
background-color: v.$box-1;
box-sizing: border-box;
@include m.breakpoint(tablet) {
margin: unset;
font-size: 2.4rem;
}
&:nth-child(2) {
margin-top: 40px;
background-color: v.$box-2;
@include m.breakpoint(tablet) {
margin: unset;
}
}
&:nth-child(3) {
margin-top: 40px;
background-color: v.$box-3;
@include m.breakpoint(tablet) {
margin: unset;
}
}
&:nth-child(4) {
margin-top: 40px;
background-color: v.$box-4;
@include m.breakpoint(tablet) {
margin: unset;
}
}
}
}
}
}cssのclip_art
/*シミの図のコンテンツ*/
.clip_art {
position: relative;
width: 100%;
background-color: v.$background-color-3;
.clip_art_wrapper {
padding: 50px 10px 50px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 30px 100px 30px;
/* 幅を計算して指定 */
width: calc(100% - 60px);
/* 画面が狭いときでもきれいに見えるように */
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
}
.ttl_wrapper_clip {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 30px;
max-height: 30px;
margin-right: 10px;
@include m.breakpoint(tablet) {
max-width: 50px;
max-height: 50px;
}
}
h2 {
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
}
.clip_img {
display: block;
margin: 0 auto;
&:hover {
opacity: 0.7;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 800px;
text-align: center;
}
}
p{
text-align: center;
}
#zoomback {
/* 絶対位置に配置 */
position:absolute;
display:flex;
justify-content:center;
align-items:center;
display: none;
top:0;
left:0;
/* 画面いっぱいに */
width:100%;
height:100%;
/* 背景を少し透過 */
background-color:rgba(255, 255, 255, 0.85);
/* 中のimgを中央揃え */
z-index: 10000;
}
/* 拡大画像のサイズを調整 */
#zoomimg {
width:100%;
@include m.breakpoint(pc) {
width: 50%;
}
}
.deka {
animation:deka 0.3s ease-out;
}
@keyframes deka {
from {
transform:scale(0)
}
}
}
}cssのprotect_skin
/*肌を守るコンテンツ*/
.protect_skin {
width: 100%;
background: linear-gradient(
180deg,
#fdf6ed 0%,
#dadbdd 50%,
#c9cdd6 75%,
#c0c7d2 88%,
#b7c0ce 95% 100%
);
.pr_skin_contents {
padding: 40px 10px 40px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 40px 0px 40px 0px;
/* 幅を計算して指定 */
width: calc(100% - 100px);
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.pr_skin_wrapper {
.pr_text {
.text_1 {
width: fit-content;
font-size: min(7.27vw, 32px); /*440pxで*/
font-weight: bold;
text-align: center;
margin: 0 auto;
border-bottom: dashed 2px #609ce4;
}
.text_2 {
width: fit-content;
font-size: min(7.27vw, 32px); /*440pxで*/
font-weight: bold;
text-align: center;
margin: 20px auto;
border-bottom: dashed 2px #609ce4;
.dots {
background-image: radial-gradient(
circle at center,
#609ce4 20%,
transparent 30%
); /* 点の色とサイズ調整 */
background-position: top right; /* 点の位置 */
background-repeat: repeat-x; /* 横方向に繰り返し */
background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
padding-top: 0.5rem; /* 縦方向の位置調整 */
font-size: min(10.91vw, 48px); /*440pxで*/
}
}
.text_3 {
width: fit-content;
font-size: 3.2rem;
font-weight: bold;
text-align: center;
margin: 20px auto;
border-bottom: dashed 2px #609ce4;
.dots {
background-image: radial-gradient(
circle at center,
#609ce4 20%,
transparent 30%
); /* 点の色とサイズ調整 */
background-position: top right; /* 点の位置 */
background-repeat: repeat-x; /* 横方向に繰り返し */
background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
padding-top: 0.5rem; /* 縦方向の位置調整 */
font-size: 4.8rem;
}
}
}
.user_unstable_wrapper {
display: block;
@include m.breakpoint(tablet) {
display: flex;
align-items: center;
justify-content: center;
}
@include m.breakpoint(pc) {
width: calc(100% - 20%);
margin: 0 auto;
}
.user_voice {
margin-top: 40px;
@include m.breakpoint(tablet) {
width: calc(100% - 20%);
}
ul {
li {
flex: none;
position: relative;
width: calc(100% - 100px);
@include m.breakpoint(tablet) {
display: flex;
width: calc(100% - 30%);
}
@include m.breakpoint(pc) {
width: calc(100% - 30%);
}
p {
padding: 10px;
background-color: v.$white;
font-size: min(3.41vw, 15px); /*440pxで*/
font-weight: bold;
border-radius: 10px;
@include m.breakpoint(tablet) {
font-size: 15px;
}
}
img {
position: absolute;
transform: translate(10px, -5px) rotate(90deg);
@include m.breakpoint(tablet) {
transform: unset;
left: auto;
right: -25px;
bottom: 16px;
}
}
&:nth-child(2) {
margin-top: 30px;
margin-left: 100px;
}
&:nth-child(3) {
margin-top: 30px;
}
}
}
}
.pr_image {
margin-top: 30px;
text-align: center;
img {
width: 100%;
max-width: 354px;
}
}
}
}
}
}
/*三角スペース*/
.triangle-space {
position: relative;
box-sizing: border-box;
z-index: 1;
img {
width: 100%;
margin-top: -2px;
z-index: 1;
}
}cssのcta_6
/*cta_6のコンテンツ*/
.cta_6{
position: relative;
&::before{
content: "";
background-image: url(../img/beauty_lp/cta2_bk_sp.png);
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
transition: inherit;
z-index: -2;
@include m.breakpoint(tablet) {
background-image: url(../img/beauty_lp/cta2_bk_tablet.png);
}
@include m.breakpoint(pc) {
background-image: url(../img/beauty_lp/cta2_bk4800.png);
}
}
.cta_6_wrapper{
padding: 50px 10px 50px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 10px 100px 10px;
/* 幅を計算して指定 */
width: calc(100%);
/* 画面が狭いときでもきれいに見えるように */
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
}
.ttl_wrapper{
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.text_neta{
width: 50%;
position: absolute;
top: -40px;
z-index: -1;
@include m.breakpoint(tablet) {
width: 100%;
}
@include m.breakpoint(pc) {
left:450px;
}
}
@include m.breakpoint(pc) {
margin-top: 80px;
}
}
.cta_container {
text-align: center;
@include m.breakpoint(pc) {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
margin-top: 100px;
}
.product_img {
position: relative;
left: 20px;
margin: 0 auto;
max-width: 400px;
@include m.breakpoint(tablet) {
max-width: 600px;
}
@include m.breakpoint(pc) {
margin: unset;
max-width: 800px;
}
}
.cart_wrapper{
.cta1_cart_1 {
margin-top: -20px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 365px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
.cta1_cart_2 {
margin-top: 30px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
.red {
color: v.$red;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 20px;
max-width: 365px;
width: 100%;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
@include m.breakpoint(pc) {
margin-left: -100px;
}
}
a {
img {
max-width: 365px;
width: 100%;
margin-top: 30px;
@include m.breakpoint(tablet) {
margin-top: 40px;
}
}
}
}
}
.triangle{
position: absolute;
top:-1px;
left: 50%;
transform: translate(-50%);
@include m.breakpoint(tablet) {
top:0px;
}
@include m.breakpoint(pc) {
top:0px;
}
}
}cssのresarch_30
/*30年の研究コンテンツ*/
.resarch_30{
position: relative;
.resarch_picture {
box-sizing: border-box;
img {
width: 100%;
height: 100%;
object-fit: cover;
@include m.breakpoint(tablet) {
height: 1000px;
}
}
}
.resarch_wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding: 0px 10px 0px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
}
.text-box {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 auto;
padding: 15px;
border: 1px solid v.$textbox-border-1;
background-color: v.$white;
@include m.breakpoint(pc) {
width: 60%;
}
.title_text {
width: 100%;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.5rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 3.2rem;
}
}
.arrow {
width: 10px;
height: 10px;
display: block;
border-bottom: solid 2px;
border-right: solid 2px;
transform: rotate(45deg);
margin-top: -5px;
@include m.breakpoint(tablet) {
width: 15px;
height: 15px;
}
}
}
img{
display: block;
margin: 50px auto;
@include m.breakpoint(tablet) {
margin: 0 auto;
}
}
p{
color: v.$white;
text-align: left;
}
}
}cssのexplain_30
/*30年の研究成果の説明コンテンツ*/
.explain_30{
position: relative;
.ex_wrapper{
width: calc(100%);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
/* 幅を計算して指定 */
box-sizing: border-box;
@include m.breakpoint(tablet) {
width: 100%;
max-width: 900px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.three_points{
padding: 80px 20px;
@include m.breakpoint(tablet) {
padding: 80px 10px;
}
ul{
display: block;
text-align: center;
@include m.breakpoint(tablet) {
display: flex;
justify-content: center;
gap: 20px;
}
li{
padding: 25px 10px;
background-color: v.$box-5;
@include m.breakpoint(tablet) {
width: calc(30% - 10px);
margin-top: 0px;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
p{
width: 50%;
margin: 0 auto;
margin-top: 10px;
font-size: min(3.18vw, 14px); /*440pxで*/
@include m.breakpoint(tablet) {
width: 100%;
font-size: 1.4rem;
}
@include m.breakpoint(pc) {
width: 60%;
}
}
&:nth-child(2){
margin-top: 20px;
background-color: v.$box-6;
@include m.breakpoint(tablet) {
margin-top: 0px;
}
}
&:nth-child(3){
margin-top: 20px;
background-color: v.$box-7;
@include m.breakpoint(tablet) {
margin-top: 0px;
}
}
}
}
}
.ex_wrapper_img_text{
max-width: 940px;
margin: 0 auto;
padding: 0 20px 80px 20px;
img{
display: block;
margin: 0 auto;
&:hover {
opacity: 0.7;
}
}
p{
text-align: center;
}
#zoomback_2 {
/* 絶対位置に配置 */
position:absolute;
display:flex;
justify-content:center;
align-items:center;
display: none;
top:0;
left:0;
/* 画面いっぱいに */
width:100%;
height:100%;
/* 背景を少し透過 */
background-color:rgba(255, 255, 255, 0.85);
/* 中のimgを中央揃え */
z-index: 10000;
}
/* 拡大画像のサイズを調整 */
#zoomimg_2 {
width:100%;
@include m.breakpoint(pc) {
width: 50%;
}
}
.deka {
animation:deka 0.3s ease-out;
}
@keyframes deka {
from {
transform:scale(0)
}
}
.triangle_img{
width: 100%;
max-width: 166px;
margin-top: 40px;
margin-bottom: 60px;
@include m.breakpoint(tablet) {
max-width: 230px;
}
}
h3{
width: 100%;
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: normal;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.5rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 3.2rem;
}
.under{
background: linear-gradient(transparent 50%, #EBB9C1 50%);
}
}
}
}
}cssのprotect_woman_img
/*肌のプロテストの一文*/
.protect_woman_img{
background: linear-gradient(
90deg,
#DBE9F6 50%,
#A3D3FF 100%,
);
.pr_w_wrapper{
display: flex;
justify-content: center;
align-items: center;
img{
max-width: 130px;
@include m.breakpoint(tablet) {
max-width: 200px;
position: relative;
bottom:-5px;
}
@include m.breakpoint(pc) {
max-width: 250px;
}
}
h2{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 4rem;
}
}
}
}cssのcta_3
/*cta_3のコンテンツ*/
.cta_3{
background-color: v.$background-color-1;
.cta_3_wrapper{
padding: 50px 10px 50px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 10px 100px 10px;
/* 幅を計算して指定 */
width: calc(100%);
/* 画面が狭いときでもきれいに見えるように */
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
}
.ttl_wrapper{
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
}
.cta_container {
text-align: center;
@include m.breakpoint(pc) {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
margin-top: 50px;
}
.product_img {
margin: 0 auto;
max-width: 300px;
@include m.breakpoint(tablet) {
max-width: 354px;
}
@include m.breakpoint(pc) {
margin: unset;
max-width: 428px;
}
}
.cta1_cart_1 {
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 365px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
.cta1_cart_2 {
margin-top: 30px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
.red {
color: v.$red;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 20px;
max-width: 365px;
width: 100%;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
a {
img {
max-width: 365px;
width: 100%;
margin-top: 30px;
@include m.breakpoint(tablet) {
margin-top: 40px;
}
}
}
}
}
}cssのhow_to_use
/*ご使用方法のコンテンツ*/
.how_to_use {
position: relative;
background-color: v.$background-color-4;
.use_container {
padding: 20px;
padding-top: 100px;
padding-bottom: 100px;
@include m.breakpoint(tablet) {
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
padding-top: 100px;
padding-bottom: 100px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.use_text {
text-align: center;
h2 {
font-size: min(5.45vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 4rem;
}
@include m.breakpoint(pc) {
font-size: 4rem;
}
}
p {
width: calc(100% - 40px);
display: inline-block;
text-align: left;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 2.4rem;
text-align: center;
margin-top: 30px;
}
@include m.breakpoint(pc) {
font-size: 2.4rem;
}
}
}
img {
margin-top: 30px;
&:hover {
opacity: 0.7;
}
@include m.breakpoint(pc) {
display: block;
max-width: 1000px;
margin: 0 auto;
margin-top: 30px;
}
}
p{
text-align: center;
}
#zoomback_3 {
/* 絶対位置に配置 */
position:absolute;
display:flex;
justify-content:center;
align-items:center;
display: none;
top:0;
left:0;
/* 画面いっぱいに */
width:100%;
height:100%;
/* 背景を少し透過 */
background-color:rgba(255, 255, 255, 0.85);
/* 中のimgを中央揃え */
z-index: 10000;
}
/* 拡大画像のサイズを調整 */
#zoomimg_3 {
width:100%;
@include m.breakpoint(pc) {
width: 50%;
}
}
.deka {
animation:deka 0.3s ease-out;
}
@keyframes deka {
from {
transform:scale(0)
}
}
}
}
cssのuser_voice
/*お客様の声*/
.user_voice{
.voice_contents{
position: relative;
padding: 50px 15px;
/* 幅を計算して指定 */
width: calc(100% - 30px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
margin-bottom: 80px;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 50px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
h2{
font-size: min(5.45vw, 24px); /*440pxで*/
font-weight: bold;
text-align: center;
margin-bottom: 30px;
@include m.breakpoint(tablet) {
font-size: 4rem;
}
@include m.breakpoint(pc) {
font-size: 4rem;
margin-bottom: 100px;
}
}
.swiper{
.scroll_hint{
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
margin-left: -20px;
width: 100%;
font-size: min(2.73vw, 12px); /*440pxで*/
margin-bottom: 20px;
@include m.breakpoint(tablet) {
font-size: 1rem;
}
.anime_arrow{
display: block;
width: 13px;
height: 8px;
color: v.$font-color;
background-color: v.$font-color;
clip-path: polygon(0 0, 0 100%, 100% 49%);
animation-name: sidemoveAnimeBt;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
}
}
}
}
@keyframes sidemoveAnimeBt{
0%{
transform: translateX(0%);
}
100%{
transform: translateX(50%);
}
}
/*お客様の声・カルーセルスライダーと中身*/
.swiper--wrapper {
/* wrapperのサイズを調整 */
width: 100%;
height: 300px;
}
.swiper-slide {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
text-align: center;
.voice_card{
border: 5px solid v.$textbox-border-1;
border-radius: 130px 10px 10px 10px;
height: 980px;
@include m.breakpoint(tablet-mini) {
height: 900px;
}
@include m.breakpoint(ipad-pro) {
height: 980px;
}
.v_prof{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
padding: 15px;
padding-top: 20px;
@include m.breakpoint(tablet) {
padding: 50px 50px 15px 50px;
}
&::after{
content: "";
display: block;
width: 80%;
height: 0;
border-bottom: 1px solid v.$border;
position: absolute;
bottom: -20px;
}
img{
width: 80px;
height: 80px;
@include m.breakpoint(tablet) {
width: 126px;
height: 126px;
}
}
.v_p_text{
width: 55%;
@include m.breakpoint(tablet) {
width: 100%;
}
h2{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color-2;
margin-bottom: 5px;
@include m.breakpoint(tablet) {
font-size: 2.4rem;
}
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
}
}
.v_answer{
margin-top: 40px;
margin-bottom: 20px;
padding: 15px;
p{
font-size: min(3.41vw, 15px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color-3;
letter-spacing: 3px;
.pink{
color:v.$font-color-2;
}
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
}
.v_ttl{
p{
font-size: min(2.95vw, 13px); /*440pxで*/
font-weight: bold;
color:v.$font-color;
padding: 20px;
border-radius: 10px 10px 10px 10px;
background: linear-gradient(
270deg,
#FFF5F7 0%,
#FFF8F9 13%,
#E8ACB5 100%,
);
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.v_ms{
margin-top: 20px;
margin-bottom: 20px;
padding: 15px;
p{
font-size: min(3.41vw, 15px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color-3;
letter-spacing: 3px;
.pink{
color:v.$font-color-2;
}
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
}
}
}
.swiper-slide:nth-child(3n + 1) {
background-color: v.$white;
}
.swiper-slide:nth-child(3n + 2) {
background-color: v.$white;
}
.swiper-slide:nth-child(3n + 3) {
background-color: v.$white;
}
/*ボタン矢印*/
.swiper-button-prev,
.swiper-button-next {
width: 24px!important; /* ボタンの幅 */
height: 40px!important; /* ボタンの高さ */
background-size: 24px 40px!important; /* 表示したいサイズ */
transform: translateY(-50%)!important;
margin-top: 0!important;
}
/* 次ページボタンのスタイル */
.swiper-button-next {
background-image: url(../img/beauty_lp/right_arrow.png);
top:100% !important;
right: 20% !important;
@include m.breakpoint(pc) {
top:13% !important;
right: 10% !important;
}
}
/* 前ページボタンのスタイル */
.swiper-button-prev {
background-image: url(../img/beauty_lp/left_arrow.png);
top:100% !important;
left: 20% !important;
@include m.breakpoint(pc) {
top:13% !important;
left: 80% !important;
}
}
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
/*ページネーション*/
.swiper-pagination-bullets {
position: static;
margin-top: 16px;
bottom:unset !important;
}
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
margin: 0 0 0 10px !important;
background: #333 !important;
}
.swiper-pagination-bullet:first-child {
margin: 0 !important;
}cssのquetion
/*よくある質問*/
.quetion{
background-color: v.$background-color-5;
.qa_contents{
position: relative;
padding: 50px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 50px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
h2{
font-size: min(5.45vw, 24px); /*440pxで*/
font-weight: bold;
text-align: center;
margin-bottom: 30px;
@include m.breakpoint(tablet) {
font-size: 4rem;
}
@include m.breakpoint(pc) {
font-size: 4rem;
margin-bottom: 100px;
}
}
}
}
/*質問のアコーディオンの設定*/
.accordion-area {
list-style: none;
width: 96%;
max-width: 900px;
margin: 0 auto;
li {
margin: 10px 0;
section {
border: 1px solid #ccc;
background: v.$white;
/*アコーディオンタイトル*/
.title {
position: relative;
/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
padding: 3%;
padding-right: 15%;
transition: all .5s ease;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 2rem;
}
span{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
color:v.$Q;
margin-right: 10px;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 2rem;
}
}
&::after {
position: absolute;
content: "";
color: v.$arrow;
line-height: 1;
width: 1em;
height: 1em;
top:40%;
right: 15px;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(135deg);
}
&.close {
&::after {
transform: rotate(-45deg);
}
}
}
/*アコーディオンで現れるエリア*/
.box {
display: none;
/*はじめは非表示*/
background: v.$background-color-5;
padding: 3%;
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: left;
color:v.$font-color;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 2rem;
}
span{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
color:v.$A;
margin-right: 10px;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 2rem;
}
}
}
}
}
}
}cssのsurport
/*サポート*/
.surport{
background-color: v.$background-color-6;
.sp_contents{
position: relative;
padding: 80px 20px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.text_wrapper{
width: 100%;
margin: 0 auto;
.text-box {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 273px;
margin: 0 auto;
padding: 15px;
border: 1px solid v.$textbox-border-1;
background-color: v.$white;
@include m.breakpoint(pc) {
width: 60%;
}
.title_text {
width: 100%;
font-size: min(5.45vw, 24px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.5rem;
}
}
.arrow {
width: 15px;
height: 15px;
display: block;
border-bottom: solid 2px;
border-right: solid 2px;
transform: rotate(45deg);
margin-top: -5px;
}
}
}
.sp_points{
ul{
display: flex;
flex-direction: column;
text-align: center;
@include m.breakpoint(tablet) {
display: flex;
justify-content: center;
flex-direction: unset;
flex-wrap: wrap;
gap: 20px;
margin-top: 80px;
}
@include m.breakpoint(ipad-pro) {
flex-wrap: nowrap;
}
li{
display: flex;
justify-content: center;
align-items: center;
background-color: v.$box-5;
width: 100%;
max-width: 275px;
height: 130px;
margin: 0 auto;
padding: 10px 15px;
margin-top: 20px;
@include m.breakpoint(tablet) {
width:40%;
height: auto;
margin-top: 0px;
}
@include m.breakpoint(ipad-pro) {
width: calc(25% - 10px);
margin-top: 0px;
}
p{
width: 100%;
margin: 0 auto;
margin-top: 10px;
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
width: 100%;
font-size: 2rem;
font-weight: bold;
}
@include m.breakpoint(pc) {
width: 90%;
}
}
&:nth-child(2){
margin-top: 20px;
background-color: v.$box-8;
@include m.breakpoint(tablet) {
margin-top: 0px;
}
}
&:nth-child(3){
margin-top: 20px;
background-color: v.$box-9;
@include m.breakpoint(tablet) {
margin-top: 0px;
}
}
&:nth-child(4){
margin-top: 20px;
background-color: v.$box-10;
@include m.breakpoint(tablet) {
margin-top: 0px;
}
}
}
}
}
}
}cssのcta_4
/*CTA4*/
.cta_4{
position: relative;
&::before{
content: "";
background-image: url(../img/beauty_lp/cta4_back.png);
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
transition: inherit;
z-index: -2;
}
.cta_4_wrapper{
padding: 150px 10px 200px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 200px 10px 400px 10px;
/* 幅を計算して指定 */
width: calc(100%);
/* 画面が狭いときでもきれいに見えるように */
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
padding: 500px 10px 600px 10px;
}
.ttl_wrapper{
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
@include m.breakpoint(tablet) {
font-size: 4.8rem;
}
}
}
.cta_container {
text-align: center;
@include m.breakpoint(pc) {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
margin-top: 50px;
}
.product_img {
margin: 0 auto;
max-width: 300px;
@include m.breakpoint(tablet) {
max-width: 354px;
}
@include m.breakpoint(pc) {
margin: unset;
max-width: 428px;
}
}
.cta1_cart_1 {
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 365px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
.cta1_cart_2 {
margin-top: 30px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
.red {
color: v.$red;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 20px;
max-width: 365px;
width: 100%;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
a {
img {
max-width: 365px;
width: 100%;
margin-top: 30px;
@include m.breakpoint(tablet) {
margin-top: 40px;
}
}
}
}
}
.cta4_top{
position: absolute;
top:0;
left:0;
right: 0;
width: 100%;
z-index: 2;
}
.cta4_bt{
position: absolute;
left:0;
right: 0;
bottom: 0;
width: 100%;
z-index: 2;
}
}cssのproduct_pt
/*商品の特徴*/
.product_pt{
background-color: v.$background-color-3;
.pt_wrapper{
position: relative;
padding: 0 20px;
padding-bottom: 50px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 0px 50px 50px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.ttl_wrapper{
.text_bubble{
width: 60%;
margin: 0 auto;
text-align: center;
@include m.breakpoint(tablet) {
width: 40%;
}
@include m.breakpoint(ipad-pro) {
width: 30%;
}
@include m.breakpoint(pc) {
width: 40%;
}
p{
background-color: v.$font-color-2;
padding: 10px;
border-radius: 10px;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
color: v.$font-color-4;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 3.2rem;
}
}
img{
margin-top: -10px;
}
}
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 4.8rem;
}
@include m.breakpoint(pc) {
font-size: 6.4rem;
}
}
}
.pt_container{
display: block;
margin-top: 30px;
margin-bottom: 50px;
@include m.breakpoint(ipad-pro) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 32px 20px;
justify-content: flex-start;
width: 100%;
height: auto;
}
.pt_1{
display: block;
background-color: v.$font-color-4;
padding: 20px;
@include m.breakpoint(tablet) {
padding: 30px 50px;
}
@include m.breakpoint(ipad-pro) {
display: flex;
justify-content: center;
gap:40px;
width: calc(100% - 40px *0);
}
.pt1_text{
.pt1_ttl{
p{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
color:v.$textbox-border-1;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
}
}
.explain_pt1{
margin-top: 20px;
font-size: min(3.64vw, 16px); /*440pxで*/
}
}
.pt1_img{
margin-top: 20px;
@include m.breakpoint(ipad-pro) {
width: 40%;
}
}
}
.pt_2{
display: block;
background-color: v.$font-color-4;
padding: 20px;
margin-top: 30px;
@include m.breakpoint(tablet) {
padding: 30px 50px;
}
@include m.breakpoint(ipad-pro) {
width: calc(50% - 110px);
margin-top: 0px;
}
.pt2_text{
.pt2_ttl{
p{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
color:v.$textbox-border-1;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
}
}
.explain_pt2{
margin-top: 20px;
font-size: min(3.64vw, 16px); /*440pxで*/
}
}
.pt2_img{
margin-top: 20px;
}
}
.pt_3{
display: block;
background-color: v.$font-color-4;
padding: 20px;
margin-top: 30px;
@include m.breakpoint(tablet) {
padding: 30px 50px;
}
@include m.breakpoint(ipad-pro) {
width: calc(50% - 110px);
margin-top: 0px;
}
.pt3_text{
.pt3_ttl{
p{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
color:v.$textbox-border-1;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
}
}
.explain_pt3{
margin-top: 20px;
font-size: min(3.64vw, 16px); /*440pxで*/
}
}
.pt3_img{
margin-top: 20px;
}
}
.pt_4{
display: block;
background-color: v.$font-color-4;
padding: 20px;
margin-top: 30px;
@include m.breakpoint(tablet) {
padding: 30px 50px;
}
@include m.breakpoint(ipad-pro) {
width: calc(50% - 110px);
margin-top: 0px;
}
.pt4_text{
.pt4_ttl{
p{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
color:v.$textbox-border-1;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
}
}
.explain_pt4{
margin-top: 20px;
font-size: min(3.64vw, 16px); /*440pxで*/
}
}
.pt4_img{
margin-top: 20px;
}
}
.pt_5{
display: block;
background-color: v.$font-color-4;
padding: 20px;
margin-top: 30px;
@include m.breakpoint(tablet) {
padding: 30px 50px;
}
@include m.breakpoint(ipad-pro) {
width: calc(50% - 110px);
margin-top: 0px;
}
.pt5_text{
.pt5_ttl{
p{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
color:v.$textbox-border-1;
}
h3{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
}
}
.explain_pt5{
margin-top: 20px;
font-size: min(3.64vw, 16px); /*440pxで*/
}
}
.pt5_img{
margin-top: 20px;
}
}
}
}
}cssのdifferentiation
/*差別化ポイント*/
.differentiation{
background-color: v.$background-color-4;
.df_wrapper{
position: relative;
padding: 50px 20px;
padding-bottom: 80px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1300px;
}
.ttl_wrapper{
.text_bubble{
width: 50%;
margin: 0 auto;
text-align: center;
@include m.breakpoint(tablet) {
width: 40%;
}
@include m.breakpoint(ipad-pro) {
width: 30%;
}
@include m.breakpoint(pc) {
width: 40%;
}
p{
background-color: v.$font-color-2;
padding: 10px;
border-radius: 10px;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
color: v.$font-color-4;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 3.2rem;
}
}
img{
margin-top: -10px;
}
}
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 4.8rem;
}
@include m.breakpoint(pc) {
font-size: 6.4rem;
}
}
}
.ttl_sub{
position: relative;
margin-top: 30px;
.sub_text{
@include m.breakpoint(tablet) {
margin-top: 100px;
margin-bottom: 120px;
}
h3{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 3.6rem;
}
}
p{
font-size: min(3.18vw, 14px); /*440pxで*/
font-weight: normal;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 3.6rem;
}
.big_text{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
color: v.$textbox-border-1;
@include m.breakpoint(tablet) {
font-size: 2.4rem;
}
@include m.breakpoint(pc) {
font-size: 4.8rem;
}
}
}
}
.star_1{
position: absolute;
left: -20px;
bottom:-30px;
width: 40px;
max-width: 100%;
@include m.breakpoint(tablet-mini) {
left: 10px;
bottom: -50px;
width: 74px;
}
@include m.breakpoint(tablet) {
bottom: -50px;
}
@include m.breakpoint(ipad-pro) {
left: 30px;
bottom: -70px;
width: 148px;
}
@include m.breakpoint(pc) {
left: -30px;
bottom: -70px;
}
}
.star_2{
position: absolute;
right: -10px;
bottom:20px;
width: 40px;
max-width: 100%;
@include m.breakpoint(tablet-mini) {
right: 10px;
bottom:0px;
width: 74px;
}
@include m.breakpoint(tablet) {
right: 40px;
bottom:20px;
}
@include m.breakpoint(ipad-pro) {
width: 148px;
right: 20px;
bottom:20px;
}
}
}
.df_table_contents{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
max-width: 100%;
height: auto;
margin-top: 50px;
overflow-x: auto;
overflow-y: hidden;
.pt1_table{
margin-top: 20px;
@include m.breakpoint(ipad-pro) {
margin-top: 0px;
}
.pt1_a{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 80px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
opacity: 0;
@include m.breakpoint(tablet) {
width: 170px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt1_b{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
@include m.breakpoint(tablet) {
width: 170px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt1_c{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
@include m.breakpoint(tablet) {
width: 170px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt1_d{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
@include m.breakpoint(tablet) {
width: 170px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt1_e{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
@include m.breakpoint(tablet) {
width: 170px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
}
.pt2_table{
height: 540px;
width: 185px;
max-width: 100%;
border-radius: 10px;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.15);
background: linear-gradient(90deg, #E8ACB5 50%, #FFEEE6 100%);
@include m.breakpoint(tablet) {
width: 285px;
}
@include m.breakpoint(ipad-pro) {
height: 670px;
width: 385px;
}
.pt2_a{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 100px;
width: 175px;
max-width: 100%;
/*background: v.$table-b1;*/
@include m.breakpoint(tablet) {
width: 275px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 385px;
}
img{
width: 170px;
max-width: 100%;
margin-left: -10px;
@include m.breakpoint(tablet) {
width: 270px;
}
@include m.breakpoint(ipad-pro) {
width: 370px;
}
}
}
.pt2_b{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 165px;
max-width: 100%;
background: v.$background-color-7;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:22px;
left: 35px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:30px;
left: 70px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 365px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt2_c{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 165px;
max-width: 100%;
background: v.$background-color-7;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:22px;
left: 35px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:30px;
left: 70px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 365px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt2_d{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 165px;
max-width: 100%;
background: v.$background-color-7;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:22px;
left: 35px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:30px;
left: 70px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 365px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
.pt2_e{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 165px;
max-width: 100%;
background: v.$background-color-7;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:22px;
left: 35px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:30px;
left: 70px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 365px;
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 2.4rem;
}
}
}
}
.pt3_table{
margin-top: 20px;
@include m.breakpoint(ipad-pro) {
margin-top: 0px;
}
.pt3_a{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 80px;
width: 120px;
max-width: 100%;
background: v.$background-color-8;
border-right: 1px solid #e6e6e6ff;
border-bottom: 1px solid #e6e6e6ff;
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt3_b{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt3_c{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
&::before{
content: "";
background-image: url("../img/beauty_lp/circle_blue.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt3_d{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt3_e{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle_blue.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
}
.pt4_table{
margin-top: 20px;
@include m.breakpoint(ipad-pro) {
margin-top: 0px;
}
.pt4_a{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 80px;
width: 120px;
max-width: 100%;
background: v.$background-color-8;
border-right: 1px solid #e6e6e6ff;
border-bottom: 1px solid #e6e6e6ff;
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt4_b{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt4_c{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle_blue.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt4_d{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt4_e{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
}
.pt5_table{
margin-top: 20px;
@include m.breakpoint(ipad-pro) {
margin-top: 0px;
}
.pt5_a{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 80px;
width: 120px;
max-width: 100%;
background: v.$background-color-8;
border-bottom: 1px solid #e6e6e6ff;
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt5_b{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle_blue.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt5_c{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt5_d{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b1;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/triangle.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
.pt5_e{
display: flex;
flex: none;
justify-content: center;
align-items: center;
height: 107px;
width: 120px;
max-width: 100%;
background: v.$table-b2;
border-bottom: 1px solid #e6e6e6ff;
position: relative;
&::before{
content: "";
background-image: url("../img/beauty_lp/circle_blue.png");
background-position: 50%;
background-size: contain;
background-repeat: no-repeat;
border-radius: inherit;
position: absolute;
top:20px;
left: 25px;
transition: inherit;
width: 60%;
height: 60%;
z-index: 0;
@include m.breakpoint(tablet) {
left: 55px;
}
@include m.breakpoint(ipad-pro) {
top:25px;
left: 40px;
}
}
@include m.breakpoint(tablet) {
width: 265px;
}
@include m.breakpoint(ipad-pro) {
height: 130px;
width: 200px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
z-index: 2;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
}
}
}
}
}
}cssのdeveloper
/*開発者の声*/
.developer{
position: relative;
background-color: v.$background-color-9;
overflow-x: hidden;
.dv_wrapper{
position: relative;
z-index: 2;
padding: 70px 20px;
padding-bottom: 80px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1300px;
padding-top: 200px;
}
.ttl_wrapper{
.text_bubble{
width: 60%;
margin: 0 auto;
text-align: center;
@include m.breakpoint(tablet) {
width: 40%;
}
@include m.breakpoint(ipad-pro) {
width: 30%;
}
@include m.breakpoint(pc) {
width: 40%;
}
p{
background-color: v.$font-color-2;
padding: 10px;
border-radius: 10px;
font-size: min(3.64vw, 16px); /*440pxで*/
font-weight: bold;
color: v.$font-color-4;
@include m.breakpoint(tablet) {
font-size: 2rem;
}
@include m.breakpoint(pc) {
font-size: 3.2rem;
}
}
img{
margin-top: -10px;
}
}
h2{
font-size: min(4.55vw, 20px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
@include m.breakpoint(ipad-pro) {
font-size: 4.8rem;
}
@include m.breakpoint(pc) {
font-size: 6.4rem;
}
}
}
.dv_contents{
.dv_img_ct{
margin-top: 30px;
position: relative;
@include m.breakpoint(tablet) {
margin-top: 100px;
}
.dv_face{
width: 60%;
@include m.breakpoint(pc) {
width: 50%;
position: relative;
left:100px;
}
}
.dv_name{
position: absolute;
top:30%;
left: 40%;
width: 60%;
padding: 20px;
background-color: v.$background-color-10;
border: solid 3px v.$textbox-border-1;
border-radius: 10px;
box-sizing: border-box;
@include m.breakpoint(tablet) {
width: 35%;
top:40%;
left: 50%;
}
@include m.breakpoint(pc) {
width: 28%;
top:100px;
left:500px;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.5rem;
}
@include m.breakpoint(pc) {
font-size: 2.4rem;
}
}
h3{
font-size: min(2.73vw, 12px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.5rem;
}
@include m.breakpoint(pc) {
font-size: 2.4rem;
}
}
}
}
.dv_text{
margin-top: 30px;
padding: 20px 20px;
background-color: v.$background-color-10;
border: solid 1px #e6e6e6;
box-shadow:2px 2px 0 rgba(0,0,0,.1);
@include m.breakpoint(pc) {
width: 50%;
margin: 0 auto;
position: relative;
top: -250px;
left: 100px;
padding: 50px 50px;
}
p{
/*font-size: min(2.95vw, 13px); /*440pxで*/
font-size: 1.3rem;
background-color: #fff;
line-height: 2;
background-image: linear-gradient( #ccc .1px, transparent .1em );
background-size: auto 2em;
border-bottom: 1px solid #ccc;
margin:0;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
line-height: 3;
background-size: auto 3em;
}
}
}
}
}
.dv_neta_1{
position: absolute;
width: 90%;
top:60px;
right: -150px;
z-index: 1;
@include m.breakpoint(tablet) {
width: 60%;
}
@include m.breakpoint(pc) {
width: 44%;
height: 30%;
}
}
.dv_neta_2{
position: absolute;
width: 80%;
bottom:0px;
left: 0px;
z-index: 1;
@include m.breakpoint(tablet) {
width: 60%;
bottom:50px;
}
@include m.breakpoint(pc) {
width: 40%;
bottom:0px;
}
}
}cssのcta_5
/*cta_5のコンテンツ*/
.cta_5{
position: relative;
&::before{
content: "";
background-image: url(../img/beauty_lp/cta5_bk4800.png);
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left:0;
transition: inherit;
z-index: -2;
}
.cta_5_wrapper{
padding: 50px 10px 50px 10px;
/* 幅を計算して指定 */
width: calc(100% - 20px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 100px 10px 100px 10px;
/* 幅を計算して指定 */
width: calc(100%);
/* 画面が狭いときでもきれいに見えるように */
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
text-align: center;
}
.ttl_wrapper{
h2{
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
p{
font-size: min(3.64vw, 16px); /*440pxで*/
text-align: center;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
}
.cta_container {
text-align: center;
@include m.breakpoint(pc) {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
margin-top: 100px;
}
.product_img {
position: relative;
left: 20px;
margin: 0 auto;
max-width: 400px;
@include m.breakpoint(tablet) {
max-width: 600px;
}
@include m.breakpoint(pc) {
margin: unset;
max-width: 800px;
}
}
.cart_wrapper{
@include m.breakpoint(pc) {
margin-left: -150px;
}
.cta1_cart_1 {
margin-top: -20px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 365px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
.cta1_cart_2 {
margin-top: 30px;
.p_name {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
h2 {
font-size: min(5.68vw, 25px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.2rem;
}
}
.p_data {
font-size: min(3.64vw, 16px); /*440pxで*/
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.p_cost {
font-size: min(5.68vw, 24px); /*440pxで*/
font-weight: bold;
@include m.breakpoint(tablet) {
font-size: 3.6rem;
}
span {
font-size: min(3.64vw, 16px); /*440pxで*/
margin-right: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
& :nth-child(2) {
margin-right: 0px;
}
.red {
color: v.$red;
}
}
}
a {
.button-56 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 20px;
max-width: 365px;
width: 100%;
height: 80px;
padding: 0.9em 2em;
background-color: v.$button-1;
color: v.$white;
font-family: "Noto Serif JP", serif;
font-weight: normal;
font-size: min(4.55vw, 20px); /*440pxで*/
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 30%),
0 2px 3px -2px rgb(0 0 0 / 20%);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
@include m.breakpoint(tablet) {
width: 438px;
font-size: 2.4rem;
}
}
.button-56:hover {
@include m.breakpoint(pc) {
transform: translateY(-1px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 20%),
0 0 5px rgb(0 0 0 / 10%);
}
}
.button-56::after {
content: "";
width: 20px;
height: 20px;
margin-top: 5px;
margin-left: 8px;
background-image: url("../img/beauty_lp/cart.svg");
}
}
}
a {
img {
max-width: 365px;
width: 100%;
margin-top: 30px;
@include m.breakpoint(tablet) {
margin-top: 40px;
}
}
}
}
}
}
}cssのbanner
/*バナーコンテンツ*/
.banner{
position: relative;
background: linear-gradient(90deg, #FFF5F5 50%, #F8ECED 100%);
overflow-x: hidden;
overflow-y: hidden;
.bn_wrapper{
padding: 50px 20px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
margin-top: 80px;
margin-bottom: 80px;
@include m.breakpoint(tablet) {
padding: 100px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.bn_contents{
position: relative;
z-index: 2;
ul{
li{
text-align: center;
&:nth-child(2){
margin-top: 60px;
}
&:nth-child(3){
margin-top: 60px;
}
}
}
}
}
.dv_netabg_1{
position: absolute;
width: 40%;
height: 40%;
top:-20px;
right: -40px;
z-index: 1;
@include m.breakpoint(tablet) {
width: 30%;
height: 50%;
}
@include m.breakpoint(pc) {
width: 35%;
height: 50%;
}
}
.dv_netabg_2{
position: absolute;
width: 40%;
bottom:-20px;
left: -40px;
z-index: 1;
@include m.breakpoint(tablet) {
width: 30%;
left:-60px;
bottom:-10px;
}
@include m.breakpoint(pc) {
width: 35%;
bottom:-250px;
}
}
}cssのtest-clinic(コチラはcss)
/*test-clinicセクション*/
.test-clinic {
width: 100%;
background-color: #f8f5f2;
padding: 80px 0;
}
.clinic-section {
max-width: 1080px;
margin: 0 auto;
display: flex;
gap: 40px;
align-items: flex-start;
}
@media (max-width: 1080px) {
.clinic-section {
width: calc(100vw - 40px); /* 画面幅から左右20pxずつ引く */
max-width: 100%; /* はみ出し防止 */
margin: 0 auto; /* 中央寄せ */
padding: 0 20px;
box-sizing: border-box; /* padding込みで幅計算 */
}
}
@media (max-width: 730px) {
.clinic-section {
display: flex;
flex-direction: column;
padding: 0px;
}
}
/*左側のクリニック情報部分*/
.clinic-info {
flex: 1;
width: calc(100% - 50px);
min-width: 320px;
/* 左側のテキスト部分 */
}
@media (max-width: 730px) {
.clinic-info {
width: 100%;
}
}
.clinic-title {
padding-left: 30px;
margin-bottom: 40px;
border-left: 4px solid #1a1a1a;
}
.clinic-title h2 {
font-size: 48px;
font-weight: bold;
margin: 6px 0;
}
@media (max-width: 1080px) {
.clinic-title h2 {
font-size: 28px;
}
}
.clinic-title p {
font-size: 20px;
margin: 0px 0;
}
@media (max-width: 730px) {
.clinic-title p {
font-size: 15px;
}
}
.sub-title {
font-size: 18px;
line-height: 200%;
letter-spacing: 5px;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.sub-title {
font-size: 15px;
}
}
.explain-text {
font-size: 16px;
line-height: 200%;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.explain-text {
font-size: 14px;
}
}
.clinic-advantages {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 項目間の余白 */
margin: 60px 0;
padding: 0;
list-style: none;
}
@media (max-width: 730px) {
.clinic-advantages {
margin-bottom: 30px;
}
}
.clinic-advantages li {
width: calc((50% - 20px));
position: relative;
background: #fff;
border-radius: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.2s;
padding: 0;
}
.clinic-advantages li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
text-decoration: none;
color: #222;
font-weight: bold;
font-size: 14px;
}
@media (max-width: 768px) {
.clinic-advantages li a {
font-size: 12px;
}
}
@media (max-width: 400px) {
.clinic-advantages li a {
font-size: 10px;
}
}
.clinic-advantages li a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
.clinic-advantages li a:hover::after {
animation-name: sidemoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
/* 右に動いて元の位置に戻るアニメーション */
@keyframes sidemoveAnimeBt {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
/* clinic-advantages li a::after 右向き三角形（デフォルト） */
.clinic-advantages li a.triangle-right::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}
/* 下向き三角形 */
/*.clinic-advantages li a.triangle-down::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}*/
/* 左向き三角形 */
/*.clinic-advantages li a.triangle-left::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}*/
/* 上向き三角形 */
/*.clinic-advantages li a.triangle-up::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #888;
margin-left: 12px;
flex-shrink: 0;
}*/
/*左向き三角形*/
/*.clinic-advantages li a::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-bottom: 2px solid #888;
border-left: 2px solid #888;
transform: rotate(45deg);
margin-left: 12px;
flex-shrink: 0;
}*/
/*上向き三角形*/
/*.clinic-advantages li a::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-left: 2px solid #888;
border-top: 2px solid #888;
transform: rotate(-45deg);
margin-left: 12px;
flex-shrink: 0;
}*/
/* クリニックボタン */
.clinic-btn-pc {
display: inline-block;
background: #333;
color: #fff;
border-radius: 24px;
padding: 16px 48px;
font-weight: bold;
font-size: 12px;
letter-spacing: 5px;
text-align: center;
margin-top: 32px;
text-decoration: none;
transition: background 0.2s;
}
.clinic-btn:hover {
background: #1976d2;
}
@media (max-width: 730px) {
.clinic-btn-pc {
display: none;
}
}
@media (hover: hover) {
.clinic-advantages li a:hover::after {
animation-name: sidemoveAnimeBt;
animation-duration: 0.6s;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
}
.clinic-btn:hover {
background: #1976d2;
}
}
/* 右側のクリニックリスト部分 */
.clinic-list {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 32px;
}
@media (max-width: 1080px) {
.clinic-list {
max-width: 300px;
}
}
@media (max-width: 730px) {
.clinic-list {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
}
.clinic-pic-wrapper li {
position: relative;
}
.clinic-pic-wrapper li:nth-child(2) {
margin-top: 50px;
}
.clinic-pic-wrapper li a {
display: block;
max-width: 500px;
overflow: hidden;
border-radius: 8px; /* 角丸は任意 */
}
.clinic-pic-wrapper li a img {
width: 100%;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.clinic-pic-wrapper li a img:hover {
transform: scale(1.08);
}
.clinic-place {
position: absolute;
bottom: -20px;
max-width: 400px;
width: 100%;
padding: 10px;
background-color: #fff;
z-index: 10;
}
@media (max-width: 1080px) {
.clinic-place {
max-width: 250px;
}
}
.clinic-place p {
font-size: 18px;
font-weight: bold;
margin: 4px 0;
line-height: 1.5;
color: #578dc0;
}
.clinic-place span {
font-size: 14px;
margin: 4px 0;
line-height: 1.5;
}
@media (hover: hover) {
.clinic-pic-wrapper li a img:hover {
transform: scale(1.08);
}
}
/* SPクリニックボタン */
.clinic-page-btn-wrapper-sp {
margin: 30px auto;
}
.clinic-btn-sp {
display: inline-block;
background: #333;
color: #fff;
border-radius: 24px;
padding: 16px 48px;
font-weight: bold;
font-size: 12px;
letter-spacing: 5px;
text-align: center;
margin-top: 32px;
text-decoration: none;
transition: background 0.2s;
}
.clinic-btn:hover {
background: #1976d2;
}
@media (min-width: 730px) {
.clinic-btn-sp {
display: none;
}
}cssのtelとmainの終わり
/*Telコンテンツ*/
.tel{
background-color: v.$background-color-11;
.tel_wrapper{
padding: 20px 10px;
/* 幅を計算して指定 */
width: calc(100% - 40px);
/* 画面が狭いときでもきれいに見えるように */
margin: 0 auto;
box-sizing: border-box;
@include m.breakpoint(tablet) {
padding: 20px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
p{
font-size: min(2.27vw, 10px); /*440pxで*/
font-weight: bold;
text-align: center;
position: relative;
top:5px;
@include m.breakpoint(tablet) {
font-size: 1.4rem;
}
}
.tel_link{
display: block;
@include m.breakpoint(tablet) {
display: flex;
align-items: center;
justify-content: center;
}
p{
font-size: min(2.73vw, 12px); /*440pxで*/
margin: 5px 0;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
.t_1{
font-size: min(2.73vw, 12px); /*440pxで*/
margin-left: 10px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
.t_2{
margin-left: 10px;
}
}
.tel_number{
a{
font-size: min(2.73vw, 12px); /*440pxで*/
margin-left: 5px;
@include m.breakpoint(tablet) {
font-size: 1.6rem;
}
}
span{
margin-left: 10px;
@include m.breakpoint(tablet) {
font-size: 1.2rem;
}
}
}
}
}
} cssのfooterとTOPに戻るのcss
#footer{
background-color: v.$background-color-12;
.footer_inner{
padding: 20px 10px;
/* 幅を計算して指定 */
width: 100%;
/* 画面が狭いときでもきれいに見えるように */
height: 200px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
@include m.breakpoint(tablet) {
padding: 20px 50px;
}
@include m.breakpoint(pc) {
width: 100%;
max-width: 1200px;
}
.ft_container{
position: absolute;
inset: 0;
margin: auto;
@include m.breakpoint(tablet) {
display: flex;
justify-content: space-between;
align-items: center;
}
.ft_logo{
a{
display: flex;
align-items: center;
justify-content: center;
.ft_text{
margin-left: -10px;
p{
font-size: min(2.27vw, 10px); /*440pxで*/
font-weight: bold;
color: v.$font-color-4;
}
h2{
font-size: min(3.41vw, 15px); /*440pxで*/
font-weight: bold;
color: v.$font-color-4;
}
}
@include m.breakpoint(tablet) {
width: 100%;
justify-content: flex-start;
}
}
}
.ft_other{
display: flex;
justify-content: center;
width: 90%;
margin: 0 auto;
@include m.breakpoint(tablet) {
display: flex;
justify-content: flex-end;
width: 60%;
position: absolute;
top:60px;
right: 0px;
}
@include m.breakpoint(ipad-pro) {
width: 70%;
}
@include m.breakpoint(pc) {
width: 60%;
}
ul{
display: flex;
flex-wrap: wrap;
width: 70%;
@include m.breakpoint(ipad-pro) {
width: 70%;
}
@include m.breakpoint(pc) {
width: 90%;
}
li{
&::after{
content: "/";
padding: 0 5px 0 5px;
color:v.$font-color-4;
}
&:nth-child(5)::after{
content: "";
padding: 0;
}
a{
font-size: min(2.27vw, 10px); /*440pxで*/
color:v.$font-color-4;
@include m.breakpoint(ipad-pro) {
font-size: 1.4rem;
}
@include m.breakpoint(pc) {
font-size: 1.5rem;
}
}
}
}
.logo_img{
display: flex;
align-items: center;
gap:20px;
.ft_logo_x{
img{
width: 30px;
}
}
.ft_logo_insta{
img{
width: 32px;
}
}
@include m.breakpoint(tablet) {
display: none;
}
}
}
.logo_img_tablet{
display: none;
@include m.breakpoint(tablet) {
display: flex;
align-items: center;
gap:20px;
position: absolute;
right: 240px;
top:120px;
.ft_logo_x{
img{
width: 30px;
}
}
.ft_logo_insta{
img{
width: 32px;
}
}
}
@include m.breakpoint(ipad-pro) {
position: absolute;
right: 415px;
}
@include m.breakpoint(pc) {
position: absolute;
right: 565px;
top:100px;
}
}
}
}
}
/*ページトップのJS*/
/*========= ページトップのためのCSS ===============*/
/*スクロールリンクの形状*/
/*スクロールリンクの形状*/
.scroll-top {
/*表示位置*/
position: fixed;
right: 20px;
bottom: 10px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
visibility: hidden;
transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
/*縦書き*/
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
/*改行禁止*/
white-space: nowrap;
/*矢印の動き*/
animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove{
0%{bottom:20px;}
50%{bottom:25px;}
100%{bottom:20px;}
}
/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
opacity: 1;
visibility: visible;
}
/*リンク全体の aタグの形状*/
.scroll-top a {
text-decoration: none;
color: v.$font-color;
text-transform: uppercase;
font-size:0.9rem;
display: block;
}
/*スクロールリンクの形状*/
.js-scroll-down a::after{
content:"";
position: absolute;
top:0;
right:0;
width:1px;
height: 50px;
background:v.$font-color;
}
.js-scroll-down a::before {
content: "";
position: absolute;
top: 30px;
right: -6px;
width: 1px;
height: 20px;
background: v.$font-color;
transform: skewX(-31deg);
}
/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll-down a::before{
right:-11px;
}
/*ページトップリンクの形状*/
.js-pagetop a::after{
content:"";
position: absolute;
top:0;
right:0;
width:1px;
height: 50px;
background:v.$font-color;
}
.js-pagetop a::before {
content: "";
position: absolute;
top: 0;
right: -6px;
width: 1px;
height: 20px;
background: v.$font-color;
transform: skewX(31deg);
}
/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
right:0;
}サイトは
こちらから