@charset "UTF-8";

/* --------------------フォント-------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
.mincyou {
    font-family: "Noto Serif JP", serif;
}
.noto-sans {
    font-family: "Noto Sans JP", serif;
}
/* --------------------カラー-------------------- */
#BTSP{
    --color-brown: #A57B4D;
    --color-light-brown: #B08C64;
    --color-pink: #FF5A79;
    --color-gray: #767676;
    --color-blue: #4D70A5;
    --color-white: #FFFFFF;
}
.pink {
    color: var(--color-pink);
}
.yellow {
    color: #FBE184;
}
.green {
    color: #9DD5C5;
}
.blue {
    color: #90A6D2;
}
.purple {
    color: #AEA4CD;
}
/* -

/* --------------------共通-------------------- */
html {
    scroll-behavior: smooth;
  }
body {
    font-family: 'Yu Gothic', '游ゴシック', 'YuGothic', 'Noto Sans JP', sans-serif;
    background: var(--color-white);
}
@media screen and (max-width:767px) {
    body {
        min-width: auto;
    }
}
img {
    max-width: 100%;
    height: auto;
}
.wrap {
    margin: 40px 0;
    overflow: hidden;
}
.subtitle_pink {
    font-size: 6.9vw;
    color: var(--color-pink);
    text-align: center;
    font-weight: 500;
    margin-bottom: 40px;
}
.text_brown {
    color: var(--color-brown);
    font-size: 5.6vw;
    font-weight: 500;
    margin: 16px 0;
    text-align: center;
}
.color_correction {
    width: 110vw;
    text-align: center;
}
.color_correction img {
    margin: 0 auto;
}
.color_correction span {
    color: var(--color-gray);
    font-size: 10px;
    font-weight: 500;
}
.lineup_img {
    width: 24%;
    margin: 0 auto;
    display: block;
}
.product_info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}
.size_clothing {
    display: flex;
    gap: 6px;
}
.size_clothing span {
    color: #707070;
    border: 1px solid #707070;
    text-align: center;
    padding: 1px 2px;
}
.price{
    font-size: 13px;
    text-align: center;
    color: #707070;
}
.key_point{
    background: var(--color-light-brown);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    padding: 6px 16px;
    margin-bottom: 10px;
    display: inline-block;
}
.info_flex_center{
    display: flex;
    gap: 10%;
    max-width: 194px;
    margin: 0 auto;
}
/* -

/* --------------------ボタン系-------------------- */
.btn_brown{
    max-width: 230px;
    background: var(--color-brown);
    text-align: center;
    margin: auto;
    position: relative;
}
.btn_brown a {
    width: 100%;
    height: 100%;
    display: block;
    padding: 12px 0;
    color: var(--color-white);
    font-weight: 700;
    font-size: 18px;
}
.btn_brown img {
    position: absolute;
    top: 44%;
    right: 6%;
    width: 6%;
}
.btn {
    width: 100%;
    text-align: center;
}
.point_btn_brown,
.point_btn_blue {
    max-width: 194px;
    background: var(--color-brown);
    padding: 12px 0;
    margin: 10px auto 0;
}
.point_btn_brown a,
.point_btn_blue a {
    color: var(--color-white);
    font-weight: 700;
    font-size: 18px;
}
.point_btn_blue{
    background: var(--color-blue);
}
.approach_btn_brown,
.approach_btn_blue{
    max-width: 180px;
    background: var(--color-brown);
    padding: 4px 0;
}
.approach_btn_brown a,
.approach_btn_blue a {
    color: var(--color-white);
    font-weight: 700;
    font-size: 16px;
    display: block;
}
.approach_btn_blue{
    background: var(--color-blue);
}
/* -

/* --------------------MV-------------------- */
.mv {
    position: relative;
}

/* --------------------ハンバーガーメニュー-------------------- */
.menu {
    position: absolute;
    top: 3%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: transform 250ms ease;
    cursor: pointer;
    z-index: 9999;
}
.hamburger_menutext{
    color: #A97B50;
    font-size: 10px;
    transform: translateY(-4px);
}

.hamburger_border {
    position: relative;
    display: block;
    width: 60%;
    height: 2px;
    background: #A97B50;
    transform-origin: center center;
    transition: transform 250ms ease;
    z-index: 200;
}
.hamburger_border:nth-of-type(3) {
    transform: translateY(5px);
}
.hamburger_border:nth-of-type(4) {
    transform: translateY(11px);
}
#menuSP {
    display: none;
}

#menuSP:checked ~ .menu span:nth-of-type(2) {
    transform: translateY(8px) rotate(45deg);
}

#menuSP:checked ~ .menu span:nth-of-type(3) {
    display: none;
}
#menuSP:checked ~ .menu span:nth-of-type(4) {
    transform: translateY(6px) rotate(-45deg);
}
#menu:checked ~ .nav {
    left: 0px;
    transition: left 500ms ease;
}

.nav {
    position: absolute;
    top: 0;
    left: -100%;
    width: 150px;
    height: 100%;
    background: rgba(242, 172, 188, 0.5);
    transition: left 500ms ease;
    z-index: 1000;
}

.nav ul {
    margin: 64px 0 100px;
}

.nav ul li {
    display: block;
    text-align: left;
}

.nav ul li a {
    position: relative;
    display: block;
    padding: 15px 20px 5px;
    color: #A97B50;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.nav ul li a:hover {
    opacity: .7;
  }
/*

/* --------------------スキン-------------------- */
.skin_color {
    margin-bottom: 32px;
}
.skin_color_inner {
    padding: 0 6vw;
}
.skin_color_box {
    position: relative;
}
.skin_bg_gradation {
    position: absolute;
    top: -5%;
    left: -13%;
    z-index: -1;
}
.skin_color_stockings {
    margin: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.skin_color_texts p {
    color: var(--color-gray);
    font-size: 16px;
    font-weight: 500;
}
.skin_color_texts span {
    display: block;
    color: var(--color-gray);
    font-size: 14px;
    font-weight: 400;
    margin-top: 24px;
}
.skin_color_variations {
    margin-bottom: 10px;
}
.skin_color_variations_text {
    width: 100%;
    background: #F7ACB3;
    border-radius: 10px;
    color: var(--color-white);
    font-size: 4.9vw;
    font-weight: 600;
    text-align: center;
    padding: 6px 0;
    margin-bottom: 10px;
}
.skin_color_variations img {
    width: 80%;
    margin: 0 auto;
    display: block;
}
/* -

/* --------------------SNSクリエイター-------------------- */
.sns_creator {
    background: #F7E5E7;
    margin-bottom: 32px;
    padding: 24px 0;
}
.sns_creator_inner {
    padding: 0 6vw;
}
.sns_creator_inner h2 {
    margin-bottom: 53px;
}
.sns_movie,
.sns_description {
    background: #EEAEBC;
    margin-bottom: 16px;
    padding: 30px 20px;
}
.movie-content{
    overflow: hidden;
    padding-bottom: calc(815 / 458 * 100%);;
    position: relative;
  }
  .sns_movie iframe{
    max-width: 100%;
    min-width: auto !important;
    width: 100%;
    margin-top: -58px !important;
    position: absolute;
}
.sns_description h3 {
    color: var(--color-white);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
.sns_description p {
    color: var(--color-white);
    font-weight: 700;
};
/* -

/* --------------------アプローチ-------------------- */
.approach {
    margin-bottom: 32px;
}
.approach_inner {
    padding: 0 6vw;
}
.approach_colors_list{
    margin-bottom: 60px;
}
.approach_colors_list > p {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 16px;
}
.approach_stockings_type {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.approach_stockings_type_img {
    width: 44%;
    object-fit: cover;
}
.approach_top {
  margin-bottom: 20px;
}
.approach_top > img {
    width: 75%;
}
.approach_top p,
.approach_bottom p {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0;
    display: inline-block;
}
.approach_top p{
    color: var(--color-brown);
}
.approach_bottom p{
    color: var(--color-blue);
}
/*

/* --------------------アプローチ-------------------- */
.point {
    margin-bottom: 32px;
}
.point h2 {
    width: 100%;
    font-size: 5.6vw;
    font-weight: 500;
    color: var(--color-light-brown);
    text-align: center;
    margin-bottom: 26px;
    line-height: 1.2;
}
.point h2::before,
.point h2::after {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--color-light-brown);
    display: block;
}
.point h2::before{
    margin-bottom: 10px;
}
.point h2::after{
    margin-top: 10px;
}
.point h2 span {
    font-size: 6.5vw;
    font-weight: 700;
}
.point_inner {
    padding: 0 6vw;
}
.point_box {
    width: 100%;
    margin-bottom: 26px;
}
.point_subtitle {
    font-size: 4.6vw;
    font-weight: 500;
    color: var(--color-light-brown);
    border-bottom: 2px solid var(--color-light-brown);
    padding-bottom: 10px;
    margin-bottom: 20px;
    line-height: 1;
}
.point_subtitle:nth-of-type(1) {
    line-height: 1.5;
}
.point_content  {
    display: flex;
    gap: 6%;
}
.color_correction {
    text-align: center;
}
.color_correction span {
    color: var(--color-gray);
    font-size: 10px;
    font-weight: 500;
}
/* point1 */
.point1_description {
    width: 55vw;
}
.point1_description p {
    color: var(--color-gray);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}
.point1_description span {
    font-size: 13px;
    color: var(--color-gray);
    display: inline-block;
}
/* point2 */
.point2_text_beige {
    color: var(--color-light-brown);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.point2_text_black {
    color: var(--color-gray);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
}
.point2_description_inner {
    display: flex;
    gap: 5%;
}
.point2_net_img {
    width: 100%;
}
.point2_net_img img {
    width: 100%;
}
.color_card > img{
    margin-bottom: 20px;
}
.color_goods_top,
.color_goods_bottom {
    text-align: center;
    margin-bottom: 26px;
}
.color_goods_top_img {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    margin-bottom: 10px;
}
.color_size_img {
    width: 40%;
    object-fit: contain;
}
.color_point_img {
    width: 20%;
    object-fit: contain;
    position: absolute;
    top: 0;
    right: 0;
}

.color_goods_top_title,
.color_goods_bottom_title{
    color: var(--color-brown);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.color_goods_bottom_title {
    color: var(--color-blue);
}

/* -