@charset "UTF-8";
/*=============================================================

	Date: 2026-5-
	CSS Document ： SEASON LOOK
	
=============================================================*/
/*------------------------------------
仮想LP用ベース
------------------------------------*/
.fca_cat-hero, .sr_page-shopping-result__free {
  overflow: visible !important;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container__in {
  max-width: 100%;
}
.fca_cat-hero .sr_page-shopping-result__free .fca_container {
  padding: 0;
}
.fca_page-shop-category__body {
  margin-top: 0;
}
/*------------------------------------

ベース

------------------------------------*/
#outer_id {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.125rem;
  /* animation: fade_fl 0.7s both 0s; */
}
#outer_id img {
  max-width: 100%;
  height: auto;
}
#container_id {
  opacity: 1;
}
#container_id a {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
@media (hover: hover) {
  #container_id a:hover {
    opacity: 0.6;
  }
}
/* == container == */
#container_id {}
/*------------------------------------

FV

------------------------------------*/
#container_id .title-wrapper {}
#container_id .title-wrapper .main-title {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  font-size: 190%;
    letter-spacing: 0.07em;
  margin: 1em;
  animation: title-fadein 1s forwards 0s;
  opacity: 0;
}
/* = title = */
#container_id .title-wrapper .title-nav {
  display: flex;
  justify-content: center;
  align-items: center; /* flex-wrap: wrap; */ margin: 0 auto;
  max-width: 2000px;
}
#container_id .title-wrapper .title-nav > div {
  position: relative;
  animation: item-fadein 1s forwards 0s;
  opacity: 0;
}
#container_id .title-wrapper .title-nav .theme01 {
  animation-delay: 0.5s;
}
#container_id .title-wrapper .title-nav .theme02 {
  animation-delay: 0.8s;
}
#container_id .title-wrapper .title-nav .theme03 {
  animation-delay: 1.1s;
}
@keyframes title-fadein {
  0% {
    transform: translate(0px, 0.6em);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1.0;
  }
}
@keyframes item-fadein {
  0% {
    transform: translate(0px, 2em);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1.0;
  }
}
#container_id .title-wrapper .title-nav a {
  display: block;
}
#container_id .title-wrapper .title-nav a .main {}
#container_id .title-wrapper .title-nav a .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#container_id .title-wrapper .title-nav .theme01 a .text {
  mix-blend-mode: multiply;
}
#container_id .title-wrapper .title-nav .theme02 {}
#container_id .title-wrapper .title-nav .theme02 a {}
#container_id .title-wrapper .title-nav .theme02 a .main {}
#container_id .title-wrapper .title-nav .theme02 a .text {}
/*------------------------------------

スクロール表示

------------------------------------*/
#scroll_id {
  text-align: center;
  margin: 1.4em auto;
}
#scroll_id .text {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
#scroll_id .scroll-line {}
/* アニメーション線 */
.scroll-line {
  position: relative;
  content: "";
  width: 1px;
  height: 2.5em;
  display: block;
  background-color: #000;
  margin: 0.5em auto 0;
}
.scroll-line::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #000;
  animation: scroll-horizontal_id 2.5s infinite;
  position: absolute;
  top: 0;
  left: 0;
}
.scroll-line::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes scroll-horizontal_id {
  0% {
    transform: scaleY(0);
    transform-origin: top center;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top center;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
}
/*------------------------------------

コンテンツ

------------------------------------*/
#contents-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/*------------------------------------

PC：サイドナビ

------------------------------------*/
#contents-wrapper .side-contents {
  background: #FFF;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  width: calc(100%);
}
#contents-wrapper .side-contents .side-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#contents-wrapper .side-contents .side-bg div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #FFF;
  transition: all 0.7s;
}
#contents-wrapper .side-contents .side-bg div.on {
  opacity: 1;
}
#contents-wrapper .side-contents .side-bg .bg01 {
  background-image: url(../images/theme01_bg01.webp);
}
#contents-wrapper .side-contents .side-bg .bg02 {
  background-image: url(../images/theme02_bg01.webp);
  opacity: 0;
}
#contents-wrapper .side-contents .side-bg .bg03 {
  background-image: url(../images/theme03_bg01.webp);
  opacity: 0;
}
#contents-wrapper .side-contents .side-inner {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  /* font-size: 1.3cqw; */
  width: 70%;
  max-width: 235px;
  margin: 0 auto;
  text-align: center;
}
#contents-wrapper .side-contents .side-inner .side-logo {
  width: 100%;
  margin: 0 auto 2em;
  font-size: 8.3cqw;
}
#contents-wrapper .side-contents .side-inner .side-logo img {
    width: 80%;
}
#contents-wrapper .side-contents .side-inner .side-logo span {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  line-height: 1.3;
  margin: 1em;
  display: block;
}
#contents-wrapper .side-contents .side-inner .link-list {
  font-size: 7.3cqw;
}
.link-list {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal; /* font-size: 7.3cqw; */
}
.link-list .link-bnr {
  background: #7ccccf;
  color: #FFF;
  display: block;
  letter-spacing: 0.1em;
  padding: 0.7em 0;
  position: relative;
}
.link-list .link-bnr::after {
  display: block;
  width: 0.8em;
  height: 100%;
  content: '';
  background-image: url(../images/arrow_w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0.6em;
	 transition: all 0.3s;
}
@media (hover: hover) {
  .side-nav a:hover .nav-main::after,
	.link-list .link-bnr:hover::after{
    transform: translateX(0.2em);
  }
}


/* = PC：右ナビ = */
#contents-wrapper .side-contents.right {
  order: 1;
}
#contents-wrapper .side-contents.right .side-bg {}
#contents-wrapper .side-contents.right .side-bg div {}
#contents-wrapper .side-contents.right .side-bg .bg01 {
  background-image: url(../images/theme01_bg02.webp);
}
#contents-wrapper .side-contents.right .side-bg .bg02 {
  background-image: url(../images/theme02_bg02.webp);
}
#contents-wrapper .side-contents.right .side-bg .bg03 {
  background-image: url(../images/theme03_bg02.webp);
}
#contents-wrapper .side-contents.right .side-nav {
  text-align: center; /* width: 80%; */ margin: 0 auto; /* max-width: 210px; */ font-size: 7.3cqw;
  display: flex; /* justify-content: center; */ /* align-items: center; */ /* flex-wrap: wrap; */ flex-direction: column;
  gap: 2.5em;
}
#contents-wrapper .side-contents.right .side-nav a {
  display: block; /* margin: 1em 0; */ position: relative;
}
#contents-wrapper .side-contents.right .side-nav a .nav-num {
  background: #fff;
  color: #000;
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  margin: 0 0 0.7em;
  padding: 0.1em 0 0;
}
#contents-wrapper .side-contents.right .side-nav a .nav-num .num {}
#contents-wrapper .side-contents.right .side-nav a .nav-main {
  display: block;
  margin: 0 auto;
  position: relative;
}
#contents-wrapper .side-contents.right .side-nav a .nav-main::after {
  display: block;
  width: 0.8em;
  height: 100%;
  content: '';
  background-image: url(../images/arrow_b.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0em;
	transition: all 0.3s;
}



#contents-wrapper .side-contents.right .side-nav a .nav-main img {
  width: 70%;
}
#contents-wrapper .side-contents.right .side-nav a:nth-child(1) .nav-main img {
  width: 60%;
}
#contents-wrapper .side-contents.right .side-nav a:nth-child(2) .nav-main img {
  width: 66%;
}
#contents-wrapper .side-contents.right .side-nav a:nth-child(3) .nav-main img {}
/*------------------------------------

メインコンテンツ

------------------------------------*/
#main-contents {
  max-width: 690px;
  min-width: 500px;
  width: 55%;
  flex-shrink: 0;
  container-type: inline-size;
  overflow: hidden;
}
/* ==▼ Theme 1 ▼== */
.theme-block {
  margin-bottom: 6em;
}
/* テーマタイトル */
.theme-block .theme-title {
  position: relative;
}
.theme-block .theme-title .theme-photo {}
.theme-block .theme-title .theme-photo .theme-photo01 {}
.theme-block .theme-title .theme-text {
  position: absolute;
  top: 0;
  left: 0;
}
.theme-block .theme-title .theme-text .theme-num { /* color: #FFF; */ font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 4cqw;
}
.theme-block .theme-title .theme-text .theme-main {}
.theme-block .theme-title .theme-text .theme-sub {}
.theme-block .theme-title .theme-text .theme-sub img {}
/* テーマリード */
.theme-block .theme-lead {
  text-align: center;
  margin: 1.9em 0 2.5em;
  line-height: 2.0;
  font-family: "游ゴシック体 Pr6N D",sans-serif; 
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: 2.9cqw;
}
.theme-block .theme-lead p {
  margin: 0 0 1em;
}
/* = LOOK一覧 = */
.theme-block .look-list {}
.theme-block-output {}
/* CSV出力 */
/* == coordi == */
.look-block {
  margin: 0 0 3em;
}
.look-block .look-main {
  display: flex;
justify-content: center;
}
.look-block .look-main img {}
.look-block.w80 .look-main img {
  width: 80%;
}
.look-block.w90 .look-main img {
  width: 90%;
}
.look-block.right .look-main {
  justify-content: flex-end;
}
.look-block.left .look-main {
  justify-content: flex-start;
}
.look-block.center .look-main {
  justify-content: center;
}
.look-block .item-list {
  width: 90%;
  margin: 1em auto; /* display: flex; */ /* justify-content: flex-end; */ /* align-items: center; */ /* flex-wrap: wrap; */ /* flex-direction: column; */ /* text-align: right; */ font-size: 3cqw;
}

.look-block.left .item-list{
	margin-left: 0;
}

.look-block .item-list .item {
  margin: 0.7em 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.look-block .item-list .item a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.look-block .item-list .item a .spec_id {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  line-height: 1;
}
.look-block .item-list .item a .spec_id .name_id {
  font-family: "Libre Baskerville", serif;
  font-size: 100%;
  font-weight: 600;
  margin-top: 0.08em;
}
.look-block .item-list .item a .spec_id .price_id {
  font-family: "Judson", serif;
  font-style: italic;
  font-size: 105%;
  text-align: right;
  line-height: 1;
}
.look-block .item-list .item a .spec_id .price_id .tax_id {}
.look-block .item-list .item a .buy {
  font-family: "Libre Baskerville", serif;
  font-size: 100%;
  font-weight: 600;
  color: #FFF;
  background: #000;
  padding: 0.3em 1em 0.2em;
  line-height: 1;
  letter-spacing: 0.15em;
  font-size: 70%;
}
.look-block.sub {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4%;
  width: 90%;
  margin: 0 auto 6em;
}
.look-block.sub .look-main {
  width: 55%;
  flex-shrink: 0;
}
.look-block.sub .item-list {
  width: 40%;
  margin: 0;
  opacity: 0;
}
.look-block.sub.scroll-on .item-list {
  animation: zoom-fade 1.3s forwards 0s;
}
#theme02 .look-block.sub.scroll-on .item-list {
  animation: look-fadein 1.3s forwards 0s;

}

.look-block.sub .item-list .item {
  justify-content: center;
  margin: 1em 0;
}
.look-block.sub .item-list .item a {
  align-items: flex-end;
}
.look-block.sub .item-list .item a .spec_id {
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  align-items: flex-start;
  gap: 0;
}
.look-block.sub .item-list .item a .buy {
  margin-bottom: 0.3em;
}

/*==================================

footer

==================================*/
.look-footer {font-size: 4.5cqw;width: 70%;margin: 0 auto 3em;text-align: center;}

.look-footer .link-list {
}

.look-footer .link-list .link-bnr {
}



/*==================================

個別設定

==================================*/
/* ==▼ Theme 1 ▼== */
#theme01 {}
/* テーマタイトル */
#theme01 .theme-title {
  position: relative;
  background-image: url(../images/theme01_main.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}
#theme01 .theme-title .theme-photo {}
#theme01 .theme-title .theme-photo .theme-photo01 {}
#theme01 .theme-title .theme-text {
  color: #7e7066;
  text-align: center;
  width: 100%;
  top: 57%;
  left: 18%;
}
#theme01 .theme-title .theme-text .theme-num {
  margin-bottom: 0.2em;
}
#theme01 .theme-title .theme-text .theme-main {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 8cqw;
  font-style: normal;
  -moz-osx-font-smoothing: unset;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-bottom: 0.25em;
}
#theme01 .theme-title .theme-text .theme-sub {
  width: 45%;
  margin: 0 auto;
}
#theme01 .theme-title .theme-text .theme-sub img {
    display: block;
    margin: 0;
}
#theme01 .theme-main {
  opacity: 0;
}
#theme01.scroll-on .theme-main {
  opacity: 1;
}
#theme01 .theme-main .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}
#theme01.scroll-on .theme-main .char {
  opacity: 1;
  transform: translateY(0);
}
#theme01 .theme-title .theme-text {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    transform 1.3s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
  transition-delay: 1.7s;
}
#theme01.scroll-on .theme-title .theme-text {
  opacity: 1;
  transform: translateY(0);
}

/* タイトル */

#theme01 .thema_text_id {
  position: absolute;
  z-index: 10;
  left: 18%;
  width: 60%;
  opacity: 0;
  top: 45%;
}
#theme01 .thema_ttl_photo_id {
position: relative;
height:860px;
margin-top: 0em;
}

#theme01 .thema_ttl_photo_id img {
  display: block;
  opacity: 0;
  will-change: opacity, transform; /* アニメーションを滑らかに、色を安定させる */
}
#theme01 .thema_ttl_photo_id img.thema_ttl_photo01_id {
  width: 24%;
  position: absolute;
  z-index: 1;
  left: 9%;
  top: 0;
}
#theme01 .thema_ttl_photo_id img.thema_ttl_photo02_id {
  width: 29%;
  position: absolute;
  z-index: 0;
  left: 23%;
  top: 11%;
}
#theme01 .thema_ttl_photo_id img.thema_ttl_photo03_id {
  width: 43%;
  position: absolute;
  z-index: 1;
  right: 0%;
  top: 8%;
}
#theme01 .thema_ttl_photo_id img.thema_ttl_photo04_id {
  width: 54%;
  position: absolute;
bottom: 2%;
  z-index: 0;
  left: 6%;
}

#theme01 .scrollin.active img.thema_ttl_photo01_id {
  animation: zoom_fade01 1.0s forwards 0.5s;
}
#theme01 .scrollin.active img.thema_ttl_photo02_id {
  animation: zoom_fade01 1.0s forwards 0s;
}
#theme01 .scrollin.active img.thema_ttl_photo03_id {
  animation: zoom_fade01 1.0s forwards 1s;
}
#theme01 .scrollin.active img.thema_ttl_photo04_id {
  animation: zoom_fade01 1.0s forwards 0.3s;
}

.scrollin {
  transition: opacity .8s, transform .8s;
  opacity: 0;
}
.scrollin.active {
  transition-delay: .0s;
  opacity: 1;
}
@keyframes zoom_fade01 {
  0% {
    transform: translate(0px, 0px) scale(1.2);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px) scale(1.0);
    opacity: 1;
  }
}
/* ==▼ Theme 2 ▼== */
#theme02 {
  padding-top: 1em;
}
/* テーマタイトル */
#theme02 .theme-title {}
#theme02 .theme-title .theme-photo {
  width: 100%;
}
#theme02 .theme-title .theme-photo .theme-photo01 {}
#theme02 .theme-title .theme-text { /* color: #3D80B3; */ text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
}
#theme02 .theme-title .theme-text .theme-num {
  margin-bottom: 0.2em;
  position: absolute;
  top: 10%;
  right: 10%;
  color: #fff;
}
#theme02 .theme-title .theme-text .theme-main {}
#theme02 .theme-title .theme-text .theme-sub {
  width: 6.7%;
  margin: 0 auto;
  position: absolute;
  top: 16%;
  right: 15.5%;
}
#theme02 .theme-title .theme-text .theme-sub img {
  width: 100%;
}
#theme02 .theme-title .theme-text .theme-num {
  transition: clip-path 0.4s cubic-bezier(.1, .5, .6, 1);
  transition-delay: 0.3s;
  clip-path: inset(0 100% 0 0);
}
#theme02.scroll-on .theme-title .theme-text .theme-num {
  clip-path: inset(0 0 0 0);
}
#theme02 .theme-title .theme-text .theme-sub {
  transition: clip-path 1.2s cubic-bezier(.1, .5, .6, 1);
  transition-delay: 0.8s;
  clip-path: inset(0 0 100% 0);
}
#theme02.scroll-on .theme-title .theme-text .theme-sub {
  clip-path: inset(0 0 0 0);
}
/* ==▼ Theme 3 ▼== */
#theme03 {
    margin-bottom: 3.5em;
}
/* テーマタイトル */
#theme03 .theme-title {}
#theme03 .theme-title .theme-photo {}
#theme03 .theme-title .theme-photo .theme-photo01 {}
#theme03 .theme-title .theme-text {
  color: #FFF;
  text-align: center;
  width: 65%;
  top: 28%;
  left: 17%;
  filter: drop-shadow(0px 0px 1em rgba(0,0,0,0.4));
}
#theme03 .theme-title .theme-text .theme-num {
  margin-bottom: 0.5em;
}
#theme03 .theme-title .theme-text .theme-main {}
#theme03 .theme-title .theme-text .theme-sub {
  /* width: 83%; */
  /* margin: 3% 0 0 11%; */
}
#theme03 .theme-title .theme-text .theme-sub img {
  width: 100%;
}
#theme03 .theme-title .theme-text .theme-num, #theme03 .theme-title .theme-text .theme-sub {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    transform 1.3s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
  transition-delay: 0.5s;
}
#theme03.scroll-on .theme-title .theme-text .theme-num, #theme03.scroll-on .theme-title .theme-text .theme-sub {
  opacity: 1;
  transform: translateY(0em);
}
.pagetop_id {
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 60px;
  aspect-ratio: 1;
}
.pagetop_id img {}

#theme03 .theme-lead span {
  background: linear-gradient(transparent 55%, #ffeb00 55%);
}
/*==================================

アニメーション

==================================*/
/*
.scroll-anime {
  opacity: 0;
  transform: translateY(40px);
  transition: .8s ease;
}

.scroll-anime.scroll-on {
  opacity: 1;
  transform: translateY(0);
}
*/
.look-block .look-main img {
  opacity: 0;
}
.look-block.scroll-on .look-main img {
  animation: look-fadein 1.3s forwards 0s;
}

#theme01 .look-block.scroll-on .look-main img, #theme03 .look-block.scroll-on .look-main img {
  animation: zoom-fade 1.3s forwards 0s;
}
@keyframes look-fadein {
  0% {
    transform: translate(0px, 2em);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1.0;
  }
}
@keyframes zoom-fade {
  0% {
    transform: scale(1.07);
    opacity: 0;
  }
  100% {
    transform: scale(1.0);
    opacity: 1.0;
  }
}

/*==================================

SP

==================================*/
@media screen and (max-width: 900px) {
  #container_id .title-wrapper .title-nav {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  #outer_id {
    font-size: 3.7vw;
  }
  #container_id .title-wrapper .main-title {
    font-size: 135%;
    margin: 0.7em;
    letter-spacing: 0.05em;
  }
  .side-contents {
    display: none;
  }
  #main-contents {
    min-width: 100%;
    width: 100%;
  }
	.theme-block .theme-lead{
		font-size: 3.5cqw;
	}
  .pagetop_id {
    width: 13vw;
  }
  .pagetop_id img {}

/* theme01 */
#theme01 .thema_ttl_photo_id {
  height: 125vw;
}

}