@charset "UTF-8";

/* ===============================================
# 変数・リセット
=============================================== */
:root {
  --color-black: #3B3C3C;
  --color-white: #ffffff;
  --color-gray: #A09898;
  --color-text: #3B3C3C;
  --color-bg: #ffffff;
  --color-blue: #17338D;
  --color-blue-dark: #2d4aab;
  --max-width: 390px;
  --font-indivisible: "indivisible-variable", sans-serif;
  --font-dnp-shuei: "dnp-shuei-gothic-kin-std", sans-serif;
  --font-notosans: "Noto Sans JP", sans-serif;
  --font-sofia: "sofia-pro", sans-serif;
}

html, body {
  overflow-x: hidden;
}
html {
  font-size: min(10px, 100vw * 10 / 390);
}
body {
  font-family: var(--font-dnp-shuei);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text);
}
* {
  box-sizing: border-box;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
figure { margin: 0; }
h1, h2, h3 { margin: 0; }
h1 {
  width: 29.651rem;
  height: auto
}
p {
  font-size: 1.1rem;
  line-height: 1.9;
  margin: 0;
}
ul, ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ===============================================
# レイアウト基本構造
=============================================== */
.wrapper {
  position: relative;
  margin-inline: auto;
}
.wrapper .header-content {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  background-color: transparent;
  z-index: 3;
  margin-top: 2.8rem;
  transform: translateX(0.5px);
}
.wrapper .content {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  background-color: transparent;
  z-index: 1;
  transform: translateX(0.5px);
}
@media (min-width: 391px) {
  .wrapper .content {
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  }
  .wrapper .header-content {
    box-shadow: none;
  }
}
@media (max-width: 390px) {
  .wrapper .header-content {
    margin-top: 0;
  }
}
.wrapper .content .headline,
.wrapper .content .contents,
.wrapper .content .shop_list,
.wrapper .content .store,
.wrapper .content footer {
  position: relative;
  background: var(--color-white);
  z-index: 2;
}
.wrapper .content .chapter {
  position: relative;
  z-index: 2;
}
.wrapper .content .contents_item {
  background: var(--color-white);
}


/* ===============================================
# 背景レイヤー
=============================================== */
.bg-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1140px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-a {
  background-image: url(../img/bg-01.jpg);
  opacity: 1;
}
.bg-b {
  background-image: url(../img/bg-02.jpg);
}
.bg-c {
  background-image: url(../img/bg-03.jpg);
}
@media (max-width: 767px) {
  .bg-layer { display: none; }
}
@media (max-width: 1139px) {
  .wrapper .content {
    box-shadow: -3px 0 6px rgba(0,0,0,0.2), 3px 0 6px rgba(0,0,0,0.2);
  }
  .wrapper .header-content {
    box-shadow: none;
  }
  .wrapper .header-content::before,
  .wrapper .header-content::after {
    content: '';
    position: absolute;
    top: 4%;
    bottom: 0;
    width: 5px;
    background: rgba(0,0,0,0.2);
    filter: blur(3px);
  }
  .wrapper .header-content::before { left: -3px; }
  .wrapper .header-content::after { right: -3px; }
  .header-fv {
    top: -0.6rem !important;
  }
  .header-fv img {
    filter: none;
    content: url(../img/fv/fv_sp.png);
  }
}


/* ===============================================
# PC左ロゴ
=============================================== */
.pc-logo-left {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% - 570px + (570px - 195px) / 2 - 13rem);
  z-index: 10;
  width: 26rem;
}
@media (max-width: 1139px) {
  .pc-logo-left { display: none; }
}
.pc-logo-left img {
  width: 100%;
  height: auto;
}


/* ===============================================
# header / KV
=============================================== */
.header {
  position: relative;
  z-index: 1;
  background: transparent;
}
.header-inner {
  position: relative;
  width: 100%;
  min-height: 73.4rem;
}
.header-logo {
  position: absolute;
  top: 2.63rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.header-logo h1 img {
  width: 29.651rem;
  height: auto;
  display: block;
  margin-bottom: 0.84rem;
}
.header-logo-main {
  width: 32.87rem;
  height: auto;
  max-width: none;
  display: block;
  margin-bottom: 1.07rem;
}
.header-logo-collection {
  width: 8.543rem;
  height: auto;
  align-self: flex-end;
}
.header-catch-vertical {
  position: absolute;
  top: 12rem;
  left: 1rem;
  z-index: 10;
  margin: 0;
  line-height: 1;
}
.header-catch-vertical img {
  width: auto;
  height: 29.8rem;
}
.header-fv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.header-fv img {
  display: block;
  width: 39rem;
  height: auto;
  object-fit: cover;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.15));
}
.header-copy-right {
  position: absolute;
  top: 26.45rem;
  right: 1.12rem;
  z-index: 10;
}
.header-copy-right img {
  width: 7.784rem;
  height: auto;
}
.header-copy-en {
  position: absolute;
  bottom: 2.33rem;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
}
.header-copy-en img {
  width: 35.866rem;
  height: auto;
  max-width: 100%;
}


/* ===============================================
# headline
=============================================== */
.wrapper .content .headline {
  padding: 3rem 0;
}
.headline {
  position: relative;
  padding: 3rem 0;
  z-index: 2;
  background: var(--color-white);
  color: var(--color-blue);
  text-align: center;
}
.headline img {
  width: 33.138rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
.headline_text {
  margin-top: 2rem;
  font-family: var(--font-notosans);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  padding: 0 4rem;
  letter-spacing: -0.03em;
}


/* ===============================================
# contents（目次）
=============================================== */
.contents {
  position: relative;
  padding: 0.6rem 0 7.2rem 0;
  background: var(--color-white);
}
.contents_item {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: visible;
  margin-bottom: 6.26rem;
  width: 100%;
}
.contents_item:last-child {
  margin-bottom: 0;
}
.contents_item-image {
  flex: 0 0 19.2rem;
  width: 19.2rem;
  height: 26.5rem;
  overflow: visible;
  position: relative;
}
.contents_item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contents_item-text {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 2.2rem 0 3rem;
}
.contents_item-rule {
  display: block;
  border: none;
  border-top: 1px solid #17338D;
  width: 14.8rem;
  margin: 0 0 0.77rem 0;
}
.contents_item-label {
  display: block;
  width: 3.664rem;
  height: auto;
  margin-bottom: 2.71rem;
}
.contents_item-name {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.09rem;
}
.contents_item-title {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 3.2rem;
}
.contents_item-desc {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
.contents_item-bottom-rule {
  display: block;
  border: none;
  border-top: 1px solid #17338D;
  width: 14.8rem;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 3rem;
}
/* 個別サイズ指定 */
.item01 .contents_item-name { width: 5.358rem; }
.item02 .contents_item-name { width: 5.683rem; }
.item03 .contents_item-name { width: 4.277rem; }
.item01 .contents_item-title { width: 8.048rem; }
.item02 .contents_item-title { width: 8.617rem; }
.item03 .contents_item-title { width: 6.69rem; }
.item01 .contents_item-desc { width: 14.454rem; }
.item02 .contents_item-desc { width: 12.41rem; }
.item03 .contents_item-desc { width: 13.989rem; }

.contents_check {
  position: absolute;
  bottom: -2.1rem;
  left: -1rem;
  width: 6.2rem;
  height: 6.2rem;
  text-decoration: none;
  z-index: 10;
}
.contents_item.item02 .contents_check {
  left: 2rem;
}
.contents_check img {
  width: 100%;
  height: auto;
}
@media (any-hover: hover) {
  .contents_check:hover { opacity: 0.85; }
}


/* ===============================================
# chapter（共通）
=============================================== */
.chapter {
  position: relative;
  overflow: hidden;
}
.chapter-style {
  position: relative;
  margin-bottom: 6rem;
}

/* 章ヘッダー（共通） */
.chapter-head {
  padding: 3rem 3rem 2rem;
  text-align: center;
}
.chapter-head-label {
  font-family: var(--font-indivisible);
  font-size: 0.9rem;
  color: var(--color-white);
  text-decoration: underline;
  margin: 0 0 0.8rem;
  display: block;
  letter-spacing: 0.05em;
}
.chapter-head-title-bracket {
  position: relative;
  font-family: var(--font-indivisible);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 1.5rem;
  padding: 0.5rem 2.5rem;
  text-align: center;
  line-height: 1.3;
}
.chapter-head-copy {
  font-family: var(--font-dnp-shuei);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-white);
  margin: 0 0 1.5rem;
}
.chapter-head-text {
  font-size: 1.2rem;
  line-height: 1.9;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* テキストカラー */
#chapter01 .chapter-head-label,
#chapter01 .chapter-head-title-bracket,
#chapter01 .chapter-head-copy,
#chapter01 .chapter-head-text,
#chapter01 .style-body,
#chapter01 .style-credit {
  color: var(--color-white);
}
#chapter02 .chapter-head-label,
#chapter02 .chapter-head-title-bracket,
#chapter02 .chapter-head-copy,
#chapter02 .chapter-head-text,
#chapter02 .style-body,
#chapter02 .style-credit,
#chapter03 .chapter-head-label,
#chapter03 .chapter-head-title-bracket,
#chapter03 .chapter-head-copy,
#chapter03 .chapter-head-text,
#chapter03 .style-body,
#chapter03 .style-credit {
  color: var(--color-blue);
}

/* テキストエリア（共通） */
.style-info {
  padding: 0 3rem;
  text-align: center;
  color: var(--color-white);
}
.style-body {
  font-family: var(--font-notosans);
  font-size: 1.3rem;
  line-height: calc(25/13);
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.style-credit {
  font-family: var(--font-notosans);
  font-size: 1.1rem;
  line-height: calc(19/11);
  letter-spacing: -0.03em;
  margin: 0;
}

/* 商品情報エリア（共通） */
.style-product {
  position: relative;
  padding: 3.59rem 0 0;
}
.style-product-inner {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 31.7rem;
  overflow: visible;
}
.style-item-img {
  position: absolute;
  top: 0;
  left: 7.55rem;
  width: 23.8rem;
  height: auto;
}
.style-item-text {
  position: absolute;
  top: 2.22rem;
  left: 3.48rem;
  z-index: 2;
}
.style-item-text p {
  margin: 0;
}
.style-item-text span {
  display: block;
  font-family: var(--font-notosans);
  font-size: 1.1rem;
  font-weight: 700;
  color: #393641;
  background: var(--color-white);
  border: 1px solid #393641;
  padding: 0.2rem 0.6rem;
  width: fit-content;
  line-height: 1.4;
  letter-spacing: 0;
}
.style-item-text span + span {
  margin-top: 0.5rem;
}
.style-wearing-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(7.55rem + 23.8rem + 1.11rem);
  width: 1.2rem;
  height: auto;
}

/* BUYボタン */
.buy-btn {
  position: absolute;
  bottom: -2.9rem;   
  left: 0;
  display: block;
  width: fit-content;
  min-width: 6.5rem;
  padding: 0.2rem 1rem;
  font-family: var(--font-indivisible);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 0.5px solid var(--color-black);
  border-radius: 100vmax;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.3s ease, background 0.3s ease;
  animation: poyopoyo 2s ease-out infinite;
}
@media (any-hover: hover) {
  .buy-btn:hover {
    background-color: var(--color-white);
    color: #393641;
    outline: none;
  }
}
@keyframes poyopoyo {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.1); }
  20%  { transform: scale(0.95); }
  30%  { transform: scale(1.05); }
  40%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ===============================================
# chapter01
=============================================== */
#chapter01 {
  background: var(--color-blue);
  box-shadow: -3px 0 6px rgba(0,0,0,0.1), 3px 0 6px rgba(0,0,0,0.1);
  clip-path: inset(0 -10px 0 -10px);
}
.chapter01 {
  margin-top: 0;
}

/* 章ヘッダー */
#chapter01 .chapter-head {
  padding: 6.1rem 0 0;
  text-align: center;
}
#chapter01 .chapter-head-label {
  margin: 0 0 1.47rem;
}
#chapter01 .chapter-head-label img {
  width: 6.681rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter01 .chapter-head-title-bracket {
  margin: 0 0 2.88rem;
}
#chapter01 .chapter-head-title-bracket img {
  width: 24.24rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter01 .chapter-head-copy {
  margin: 0 0 1.92rem;
}
#chapter01 .chapter-head-copy img {
  width: 22.52rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter01 .chapter-head-text {
  font-family: var(--font-notosans);
  font-size: 1.3rem;
  line-height: calc(25/13);
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
  padding: 0 3rem;
}

/* 写真エリア */
.style-photos {
  position: relative;
  height: 85rem;
  margin-bottom: 3rem;
  overflow: visible;
}
.style-with-text {
  position: absolute;
  top: 7rem;
  right: 2rem;
  width: 13.5rem;
  height: auto;
  z-index: 4;
}
.style-catch-vertical {
  position: absolute;
  top: 45rem;
  left: 2rem;
  width: 7rem;
  height: auto;
  z-index: 3;
}

/* style01 */
#c01-style1 {
  margin-bottom: 0;
}
#c01-style1 .style-photos { height: 85rem; }

/* card1-s1 */
.card1-s1 {
  position: absolute;
  top: 3.48rem;
  left: 0.1px;
  width: 32.529rem;
  z-index: 2;
}
.card1-s1 img {
  width: 100%;
  height: auto;
  display: block;
}
.card2-s1 {
  position: absolute;
  top: -2rem;
  left: 17rem;
  width: 23.314rem;
  transform: rotate(8deg);
  transform-origin: top left;
  z-index: 3;
  overflow: visible;
}
.card2-s1 img {
  width: 100%;
  height: auto;
  display: block;
}
#c01-style1 .style-with-text {
  position: absolute;
  top: 10.42rem;
  right: 0;
  margin-right: 4.76rem;
  width: 11.034rem;
  height: auto;
  z-index: 4;
}
#c01-style1 .style-catch-vertical {
  position: absolute;
  top: 49.314rem;
  left: 3.83rem;
  width: 6.166rem;
  height: auto;
  z-index: 3;
}

/* style02 */
#c01-style2 {
  margin-bottom: 3rem;
}
#c01-style2 .style-photos { height: 104rem; }
.card1-s2,
.card1-s2.c01-swiper-wrap {
  position: absolute;
  top: 5.65rem;
  right: -0.1px;
  width: 32.429rem;
  z-index: 2;
  margin-left: auto;
}
.card1-s2 img {
  width: 100%;
  height: auto;
  display: block;
}
.card2-s2 {
  position: absolute;
  top: 54.75rem;
  left: 2.71rem;
  width: 30.229rem;
  transform: rotate(-5deg);
  transform-origin: top right;
  z-index: 3;
}
.card2-s2 img {
  width: 100%;
  height: auto;
  display: block;
}
#c01-style2 .style-with-text {
  position: absolute;
  top: 3.73rem;
  right: 3.08rem;
  width: 16.34rem;
  height: auto;
  z-index: 4;
}
#c01-style2 .style-catch-vertical {
  position: absolute;
  left: 7.9rem;
  width: 6.11rem;
  height: auto;
  z-index: 4;
}

/* style03 */
#c01-style3 .style-photos { height: 89rem; }
#c01-style3 .style-info {
  padding: 0 1.5rem;
}
.card1-s3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30.229rem;
  z-index: 2;
}
.card1-s3 img {
  width: 100%;
  height: auto;
  display: block;
}
.card2-s3 {
  position: absolute;
  top: 39rem;
  right: 2.5rem;
  width: 17.256rem;
  z-index: 3;
}
.card2-s3 img {
  width: 100%;
  height: auto;
  display: block;
}
.card3-s3 {
  position: absolute;
  top: 50.68rem;
  left: 2.2rem;
  width: 24.129rem;
  transform: rotate(4deg);
  transform-origin: top left;
  z-index: 2;
}
.card3-s3 img {
  width: 100%;
  height: auto;
  display: block;
}
#c01-style3 .style-with-text {
  position: absolute;
  top: 5.8rem;
  right: 6.42rem;
  width: 12.694rem;
  height: auto;
  z-index: 4;
}
#c01-style3 .style-catch-vertical {
  position: absolute;
  top: 62.5rem;
  right: 2.5rem;
  left: auto;
  width: 6.137rem !important;
  height: auto;
  z-index: 4;
}

/* ===============================================
# chapter01 スライダー
=============================================== */
.c01-swiper-wrap {
  position: relative;
}
.c01-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ドットナビ共通 */
.c01-swiper-pagination {
  position: absolute;
  top: 0;
  right: -1.2rem;
  left: auto !important;
  width: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 10;
}

/* card2-s1：右下配置 */
.card2-s1 .c01-swiper-pagination {
  bottom: 0rem !important;
  top: auto !important;
  right: -1.2rem !important;
}

/* card1-s2：左肩配置 */
.card1-s2 .c01-swiper-pagination {
  left: -1.2rem !important;
  right: auto !important;
}

/* ドット色 */
.c01-swiper-pagination .swiper-pagination-bullet {
  width: 0.4rem !important;
  height: 0.4rem !important;
  background: #9B9494 !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  display: block !important;
}
.c01-swiper-pagination .swiper-pagination-bullet-active {
  background: #FFFEEE !important;
}

/* ===============================================
# chapter02
=============================================== */
#chapter02 {
  background: #f8f8f8;
}

/* 章ヘッダー */
#chapter02 .chapter-head {
  padding: 6.1rem 0 0;
  text-align: center;
}
#chapter02 .chapter-head-label {
  margin: 0 0 1.47rem;
}
#chapter02 .chapter-head-label img {
  width: 6.95rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter02 .chapter-head-title-bracket {
  margin: 0 0 2.88rem;
}
#chapter02 .chapter-head-title-bracket img {
  width: 26.25rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter02 .chapter-head-copy {
  margin: 1.13rem auto 1.92rem;
  display: block;
}
#chapter02 .chapter-head-copy img {
  width: 18.912rem !important;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter02 .chapter-head-text {
  font-family: var(--font-notosans);
  font-size: 1.3rem;
  line-height: calc(25/13);
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
  padding: 0 3rem;
}

/* スタイルブロック共通 */
.c02-style {
  padding: 4.26rem 0 0;
}
#c02-style2, #c02-style3, #c02-style4, #c02-style5 {
  padding-top: 0;
}

/* 白背景ボックス */
.c02-white-box {
  position: relative;
  width: 33rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.7rem;
  padding-bottom: 1rem;
  overflow: visible;
}

/* Sheer */
.c02-sheer {
  display: block;
  width: 6.55rem;
  height: auto;
  margin: 0 auto;
  padding-top: 2.89rem;
  margin-bottom: 0;
  position: relative;
  z-index: 5;
}
#c02-style2 .c02-sheer {
  margin: 0;
  left: 1.81rem;
  top: 0.75rem;
  width: 14.564rem;
}
#c02-style3 .c02-sheer {
  margin: 0 auto;
  width: 7.958rem;
}
#c02-style4 .c02-sheer {
  top: 6rem;
  right: -9.2rem;
  width: 11.885rem;
}
#c02-style5 .c02-sheer {
  margin: 0 auto;
  top: 0.75rem;
  width: 10.994rem;
}

/* スライダー */
.c02-slider-wrap {
  position: relative;
  width: 27.4rem;
  margin: -1.5rem auto 0;
}
.c02-swiper {
  width: 27.4rem;
  height: 41.4rem;
  overflow: hidden;
}
.c02-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Style番号 */
.c02-style-num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -1.19rem;
  width: 2.8rem;
  height: auto;
  z-index: 10;
}
#c02-style2 .c02-style-num {
  top: auto;
  bottom: -4.5rem;
}
#c02-style3 .c02-style-num {
  right: auto;
  left: -1rem;
}
#c02-style4 .c02-style-num {
  right: auto;
  left: -1rem;
  top: 1rem;
}

/* ドットナビ */
.c02-swiper-pagination.swiper-pagination-bullets {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: -1.2rem !important;
  width: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  z-index: 10;
}
.c02-swiper-pagination .swiper-pagination-bullet {
  width: 0.4rem !important;
  height: 0.4rem !important;
  background: #CECECE !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  display: block !important;
}
.c02-swiper-pagination .swiper-pagination-bullet-active {
  background: #17338D !important;
}

/* Socks */
.c02-socks {
  display: block;
  width: 13.145rem;
  height: auto;
  margin: -1.6rem auto 0;
  position: relative;
  z-index: 5;
}
#c02-style2 .c02-socks {
  position: absolute;
  top: 11rem;
  right: 1.27rem;
  width: 12.446rem;
}
#c02-style3 .c02-socks {
  width: 14.867rem;
  margin-top: -2.3rem;
}
#c02-style4 .c02-socks {
  position: absolute;
  left: 1.5rem;
  width: 19.233rem;
  margin-top: -2.43rem;
}
#c02-style5 .c02-socks {
  width: 21.07rem;
}

/* コピー */
.c02-copy {
  display: block;
  height: auto;
  margin: 0 auto;
}
.c02-copy img {
  display: block;
  height: auto;
  margin: 0 auto;
}
#c02-style1 .c02-copy { margin: 1.13rem auto 1.92rem; }
#c02-style2 .c02-copy { margin: 3.3rem auto 2.3rem; }
#c02-style3 .c02-copy { margin: 2.2rem auto 1.92rem; }
#c02-style4 .c02-copy { margin: 3.5rem auto 1.9rem; }
#c02-style5 .c02-copy { margin: 2rem auto 1.92rem; }
#c02-style1 .c02-copy img { width: 21.555rem !important; }
#c02-style2 .c02-copy img { width: 16.029rem !important; }
#c02-style3 .c02-copy img { width: 20.243rem !important; }
#c02-style4 .c02-copy img { width: 19.284rem !important; }
#c02-style5 .c02-copy img { width: 16.031rem !important; }

/* テキスト（ボックス外） */
.c02-text {
  padding: 2rem 3rem 0;
  text-align: center;
}

/* WEARING SOCKS DATA */
.c02-wearing {
  text-align: center;
  margin: 3.04rem 0 1.15rem 0;
}
.c02-wearing img {
  width: 13.712rem;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 止まり絵＋タグ＋BUY */
.c02-item-wrap {
  position: relative;
  margin: 1.15rem auto 0;
  width: 23.6rem;
}
.c02-item-img {
  display: block;
  width: 100%;
  height: auto;
}
.c02-item-wrap .style-item-text {
  position: absolute;
  top: 5.24rem;
  left: auto;
  right: -5.1rem;
  z-index: 2;
  transform: none;
}
#c02-style3 .style-item-text {
  right: -3rem;
}
#c02-style4 .style-item-text {
  top: auto;
  bottom: 5rem;
}
#c02-style5 .style-item-text {
  top: 34%;
  left: -2rem;
}


/* ===============================================
# chapter03
=============================================== */
#chapter03 {
  background-color: #f0ede8;
  background-image:
    url(../img/chapter03/bg_spiral.jpg),
    url(../img/chapter03/bg_note.jpg);
  background-repeat: no-repeat, repeat-y;
  background-position: top center, 1.3rem center;
  background-size: 100% auto, 100% auto;
}

/* 章ヘッダー */
#chapter03 .chapter-head {
  padding: 6.1rem 0 0;
  text-align: center;
}
#chapter03 .chapter-head-label {
  margin: 0 0 1.47rem;
}
#chapter03 .chapter-head-label img {
  width: 6.95rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter03 .chapter-head-title-bracket {
  margin: 0 0 2.88rem;
}
#chapter03 .chapter-head-title-bracket img {
  width: 23.604rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter03 .chapter-head-copy {
  margin: 0 0 1.92rem;
}
#chapter03 .chapter-head-copy img {
  width: 27.337rem;
  height: auto;
  display: block;
  margin: 0 auto;
}
#chapter03 .chapter-head-text {
  font-family: var(--font-notosans);
  font-size: 1.3rem;
  line-height: calc(25/13);
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
  padding: 0 3rem;
}

/* スタイルブロック共通 */
.c03-style {
  padding: 3rem 2rem 0;
  text-align: center;
  margin-bottom: 0;
}

/* Style番号＋テーマ名 */
.c03-style-num {
  display: block;
  width: 34rem;
  height: auto;
  margin: 0 auto 2rem;
}
#c03-style1 .c03-style-num { width: 29.833rem; }
#c03-style2 .c03-style-num { width: 30.186rem; }
#c03-style3 .c03-style-num { width: 30.186rem; }
#c03-style4 .c03-style-num { width: 30.186rem; }
#c03-style5 .c03-style-num { width: 30.186rem; }

/* 大写真 */
.c03-photo-large {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}
.c03-photo-large > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}
.c03-photo-large.c03-large-s1 { width: 32.331rem; margin: 1.85rem auto 2rem; }
.c03-photo-large.c03-large-s2 { width: 32.331rem; margin: 0 auto 2rem; }
.c03-photo-large.c03-large-s3 { width: 32.331rem; margin: 0 auto 2rem; }
.c03-photo-large.c03-large-s4 { width: 32.331rem; margin: 0 auto 2rem; }
.c03-photo-large.c03-large-s5 { width: 32.331rem; margin: 0 auto 2rem; }

/* 縦書きキャッチ（共通） */
.c03-catch-vertical {
  position: absolute;
  bottom: -4rem;
  left: -1.5rem;
  width: auto;
  height: 22rem;
  z-index: 2;
}

/* 下段：小写真＋mini-png（共通） */
.c03-photo-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.c03-photo-small {
  width: 55%;
  flex-shrink: 0;
  margin-top: -6rem;
}
.c03-photo-small img {
  display: block;
  width: 100%;
  height: auto;
}
.c03-mini-png {
  width: 50%;
  flex-shrink: 0;
  z-index: 2;
  margin-right: -5%;
  margin-top: 3rem;
}
.c03-mini-png img {
  display: block;
  width: 100%;
  height: auto;
}

/* 英字キャッチpng */
.c03-catch-en {
  position: absolute;
  height: auto;
}
.c03-catch-en-s1 { width: 8.746rem; top: 0; left: 0; }
.c03-catch-en-s2 { width: 8.598rem; top: 0; left: 2rem; }
.c03-catch-en-s3 { width: 6.006rem; top: 0; left: -1rem; }
.c03-catch-en-s4 { width: 3.961rem; top: 0; left: 2rem; }
.c03-catch-en-s5 { width: 7.327rem; top: 0; left: -1rem; }

/* キャッチ・本文・クレジット */
.c03-copy {
  color: var(--color-blue);
  margin-bottom: 1.5rem;
}
.c03-body {
  color: var(--color-blue);
  margin-bottom: 1rem;
}
.c03-credit {
  color: var(--color-blue);
  margin-bottom: 5rem;
}

/* 商品エリア */
.c03-product-wrap {
  padding: 0 2rem 5rem;
}
.c03-item-img-wrap {
  position: relative;
  width: 29.8rem;
  margin: 0 auto;
}
.c03-item-img {
  display: block;
  width: 100%;
  height: auto;
}
.c03-item-text {
  position: absolute;
  top: 2rem;
  left: -2rem;
  z-index: 2;
}
.c03-wearing-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -2rem;
  width: 1.1rem !important;
  height: auto;
}

/* style01 個別 */
#c03-style1, #c03-style2, #c03-style3, #c03-style4 {
  margin-bottom: -3rem;
}
#c03-style1 .c03-photo-wrap {
  position: relative;
  height: 24rem;
  margin-top: 0;
  margin-bottom: 3rem;
  display: block;
}
#c03-style1 .c03-mini-png {
  position: absolute;
  top: -4rem;
  left: -1rem;
  width: 19.9rem;
  margin: 0;
  z-index: 4;
}
#c03-style1 .c03-mini-png img { width: 100%; }
#c03-style1 .c03-catch-en {
  position: absolute;
  top: -3rem;
  left: 9.5rem;
  z-index: 5;
}
#c03-style1 .c03-photo-small {
  position: absolute;
  top: -9.5rem;
  right: 0;
  width: 22rem;
  margin: 0;
  z-index: 3;
}
#c03-style1 .c03-photo-small img { width: 100%; }
#c03-style1 .c03-catch-vertical {
  width: 6.35rem;
  height: auto;
  bottom: -5rem;
  left: 0.2rem;
  z-index: 2;
}

/* style02〜05 photo-wrap: positionベース */
#c03-style2 .c03-photo-wrap,
#c03-style3 .c03-photo-wrap,
#c03-style4 .c03-photo-wrap,
#c03-style5 .c03-photo-wrap {
  position: relative;
  display: block;
  margin-bottom: 3rem;
}
#c03-style2 .c03-photo-wrap { height: 28rem; }
#c03-style3 .c03-photo-wrap { height: 24rem; }
#c03-style4 .c03-photo-wrap { height: 24rem; width: 100%; }
#c03-style5 .c03-photo-wrap { height: 20rem; }

/* style02 個別 */
#c03-style2 .c03-photo-small {
  position: absolute;
  top: -6rem;
  left: 0;
  width: 25.95rem;
  margin: 0;
  z-index: 2;
}
#c03-style2 .c03-photo-small img { width: 100%; }
#c03-style2 .c03-catch-en {
  position: absolute;
  top: -2.2rem;
  left: 17rem;
  z-index: 3;
  width: 8.85rem !important;
}
#c03-style2 .c03-mini-png {
  position: absolute;
  top: -9.2rem;
  right: -6.8rem;
  width: 22.5rem;
  margin: 0;
  z-index: 3;
  height: 50rem;
}
#c03-style2 .c03-mini-png img { width: 100%; }
#c03-style2 .c03-catch-vertical {
  bottom: auto;
  left: auto;
  top: 6rem;
  right: 1rem;
}

/* style03 個別 */
#c03-style3 .c03-mini-png {
  position: absolute;
  top: -2rem;
  left: -2rem;
  width: 19.9rem;
  margin: 0;
  z-index: 5;
}
#c03-style3 .c03-mini-png img { width: 100%; }
#c03-style3 .c03-catch-en {
  position: absolute;
  top: -3.5rem;
  left: 8.8rem;
  z-index: 6;
  width: 6.35rem !important;
}
#c03-style3 .c03-photo-small {
  position: absolute;
  top: -9rem;
  right: 0;
  width: 22.95rem;
  margin: 0;
  z-index: 3;
}
#c03-style3 .c03-photo-small img { width: 100%; }
#c03-style3 .c03-catch-vertical {
  bottom: auto;
  left: auto;
  top: 22rem;
  right: 1rem;
  z-index: 4;
}

/* style04 個別 */
#c03-style4 .c03-photo-small {
  position: absolute;
  top: -6.2rem;
  left: 0;
  width: 23.95rem;
  margin: 0;
  z-index: 2;
}
#c03-style4 .c03-photo-small img { width: 100%; }
#c03-style4 .c03-catch-en {
  position: absolute;
  top: 1rem;
  left: 21.5rem;
  z-index: 3;
  width: 4.9rem !important;
}
#c03-style4 .c03-mini-png {
  position: absolute;
  top: -8rem;
  right: -2rem;
  left: auto;
  width: 18.5rem;
  margin: 0;
  z-index: 3;
}
#c03-style4 .c03-mini-png img { width: 100%; }
#c03-style4 .c03-catch-vertical {
  bottom: auto;
  left: auto;
  top: 6rem;
  right: 1rem;
}

/* style05 個別 */
#c03-style5 .c03-mini-png {
  position: absolute;
  top: -10rem;
  left: -1.9rem;
  width: 19.9rem;
  margin: 0;
  z-index: 2;
}
#c03-style5 .c03-mini-png img { width: 100%; }
#c03-style5 .c03-catch-en {
  position: absolute;
  top: -4.8rem;
  left: 11.3rem;
  z-index: 5;
  width: 7.6rem !important;
}
#c03-style5 .c03-photo-small {
  position: absolute;
  top: -9rem;
  right: 0;
  width: 21.95rem;
  margin: 0;
  z-index: 3;
}
#c03-style5 .c03-photo-small img { width: 100%; }
#c03-style5 .c03-catch-vertical {
  bottom: auto;
  left: auto;
  top: 13rem;
  right: 0.5rem;
}


/* ===============================================
# shop_list
=============================================== */
.shop_list {
  text-align: center;
  padding: 8rem 0 0;
}
.shop_list_title {
  width: 17rem;
  margin: 0 auto;
}
.shop_list ul {
  display: grid;
  gap: 2rem;
  text-align: center;
  margin-top: 2.5rem;
}
.shop_list ul li span {
  display: block;
  font-family: var(--font-dnp-shuei);
  font-size: 1.1rem;
}
.shop_list ul li a {
  color: var(--color-gray);
  text-decoration: none;
  font-size: 1rem;
  transition: opacity 0.3s ease;
}
.shop_list ul li a:hover {
  opacity: 0.7;
}


/* ===============================================
# store
=============================================== */
.store {
  padding: 4rem;
  text-align: center;
}
.store-btn {
  display: inline-block;
  width: 16.2rem;
}
.store-btn:focus {
  outline: none;
}
@media (any-hover: hover) {
  .store-btn:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    /*outline: 1.5px solid var(--color-black);*/
  }
}


/* ===============================================
# footer
=============================================== */
footer {
  position: relative;
  padding: 2em 0;
  background-color: var(--color-white);
}
footer ul.sns {
  display: flex;
  justify-content: center;
  margin: 1em auto;
  list-style-type: none;
}
footer ul.sns li {
  width: 1.5em;
  margin: 1em;
}
footer ul.sns li a { display: block; }
footer small {
  text-align: center;
  display: block;
  color: var(--color-black);
}





/* ===============================================
# アニメーション
=============================================== */

/* FV フェードイン */
.header-copy-right,
.header-copy-en {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.header-copy-right.is-visible,
.header-copy-en.is-visible {
  opacity: 1;
}

/* chapter01 スクロールアニメーション */
.js-fade--2,
.js-fade--3 {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.js-fade--2.is-visible,
.js-fade--3.is-visible {
  opacity: 1;
}
.js-slide-down {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: /*opacity 1.5s ease,*/ clip-path 1.5s ease;
}
.js-slide-down.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* chapter02 スクロールアニメーション */
.c02-js-fade--1,
.c02-js-fade--2,
.c02-js-fade--3 {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.c02-js-fade--1.is-visible,
.c02-js-fade--2.is-visible,
.c02-js-fade--3.is-visible {
  opacity: 1;
}
.c02-js-slide-down {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: /*opacity 1.5s ease,*/ clip-path 1.5s ease;
}
.c02-js-slide-down.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* chapter03 スクロールアニメーション */
.c03-js-fade--2,
.c03-js-fade--3 {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.c03-js-fade--2.is-visible,
.c03-js-fade--3.is-visible {
  opacity: 1;
}
.c03-js-slide-down {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: /*opacity 1.5s ease,*/ clip-path 1.5s ease;
}
.c03-js-slide-down.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
}

/* CHECKボタン */
@keyframes yura {
  0%   { rotate: 0deg; }
  50%  { rotate: -10deg; }
  100% { rotate: 0deg; }
}
.contents_check img {
  animation: yura 3s infinite;
}