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

	Date: 2026-10
	CSS Document ： 「シャツって、どう着る？」着こなしレッスン
 
=============================================================*/
.pc_fg {
 display: block;
}
.sp_fg {
 display: none !important;
}
#contents_fg img {
 height: auto;
}
#contents_fg a {
 transition: all .3s;
 color: #000;
 text-align: center;
}
#contents_fg a:hover {
 text-decoration: none;
 /*opacity: .75;*/
}
#contents_fg li {
    list-style: none;
}
/* PC */
.sr_page-shopping-result__free .fca_container__in {
 max-width: 100%;
}
.sr_page-shopping-result__free .fca_container__in.load_fg{	animation: fade_fg 1.0s ease 0s forwards;}
.sr_page-shopping-result__free .fca_container {
 padding: 0;
 position: relative;
 z-index: 100000;
}
#contents_fg {
    max-width: 1200px;
    font-family: "游ゴシック体 Pr6N D";
    line-height: 1.7;
 margin: 0 auto -1.5em;
 letter-spacing: .13em;
 color: #000;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 opacity: 0;
 background-color: #d4e5e4;
 padding-top: 4em;

}
.load_fg #contents_fg {
 animation: fade_fg 1.0s ease 0s forwards;
}
#contents_wrap_fg {
 width: 100%;
 margin: 0 auto;
 margin-top: -1.4em;
}
#contents_fg ul {
 /* padding-inline-start: 0; */
}

#wrapper {
    background: #f9f9f9;
}


/*------------------------------------
title
------------------------------------*/
.ttl_fg {
    position: relative;
    /* width: 100vw; */
    height: 480px;
    background-image: url(../images/title_bk.webp);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    background-color: #d4e5e4;
    max-width: 1200px;
    margin: 0 auto 7.5em;;
}
.ttl_photo {
 max-width: 920px;
 margin: 0 auto;
 height: 100%;
 display: block;
 position: relative;
}

.ttl_photo img.main_ttl_fg {
    position: absolute;
    top: -7%;
    left: 22.5%;
    width: 56%;
    opacity: 0;

}

.ttl_photo img.icon_ttl01_fg {
    position: absolute;
    top: 47%;
    left: 31%;
    width: 39%;
    opacity: 0;
}

.load_fg .ttl_photo img.main_ttl_fg {
    animation: bound_ttl_fg 0.7s ease 0.5s forwards;
}
.load_fg .ttl_photo img.icon_ttl01_fg {
 animation: fadeIn02_lv 0.5s ease 1s forwards;
}
.load_fg .ttl_photo img.icon_ttl02_lv {
    animation: fadeIn02_lv 0.5s ease 1.3s forwards;
   }
   @keyframes bound_ttl_fg {
    0% {
     opacity: 0;
     transform: translateY(-0px);
    }
    50% {
     opacity: 1;
     transform: translateY(-8px);
    }
    100% {
     opacity: 1;
     transform: translateY(0px);
    }
   }
   
/*------------------------------------
メイン
------------------------------------*/
.wrap_inner_fg {
    max-width: 1600px;
    margin: 2em auto 0;
    padding-top: 1em ;
    overflow: hidden;
}


/*------------------------------------
リードエリア
------------------------------------*/
.lead_fg {
 text-align: center;
 margin: 0.5em auto 2em;
  font-size: 92%;
 opacity: 0;
}
.load_fg .lead_fg {
 animation: fadeIn_fg 0.8s ease 2s forwards;
}
.lead_fg p.lead_text_fg {
    font-size: 110%;
    line-height: 2.1em;
    letter-spacing: 2.2px;
}

.lead_fg p.lead_text_fg span.text_underline {
    background: linear-gradient(transparent 50%, #ffffff 50%);
    padding-bottom: 3px;
}
/*------------------------------------

レッスンエリア

------------------------------------*/
.item_ttl_wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;

}
.item_ttl_wrap .item_ttl p.item_name_fg {
    font-size: 215%;
    font-family: "あおとゴシック B";  
    margin-bottom: 0.1em;
    margin-top: -0.5em;
}
#item01 .item_ttl_wrap .item_ttl {
    text-align: center;
    margin-left: -1em;
    margin-top: 1em;
    z-index: 1;
}

.item_ttl_wrap .item_ttl p:nth-child(3) {
    margin-top: 0.3em;
    line-height: 1.4;
    font-size: 96%;
    letter-spacing: 1.1px;
}
#item01_fg, #item02_fg {
    max-width: 470px;
    /* width:560px; */
    margin: 1em auto 5em;
    transform: scale(0.95);
}
#item01_fg ul li .point_box, #item02_fg ul li .point_box {
    /* border: 2.5px solid #000; */
    background-color: #ffffff;
    border-radius: 10px;
    max-width: 560px;
    position: relative;
    text-align: center;
    height: auto;
    padding: 6% 0 0;
}
#item01_fg ul li .point_box .point_inner, #item02_fg ul li .point_box .point_inner {
    padding: 1.2em 0em;
}
.point_inner .point_img {
    padding: 0em 0em 0.3em;
}
.point_box .lesson_ttl {
width: 70%;
}
/* item02 */
#item02 .item_ttl_wrap .item_ttl {
    text-align: center;
    margin-right: -1em;
    z-index: 1;
}



/*------------------------------------
スライド
------------------------------------*/
.styling_md .no_single {
    /* width: 10%; */
}
/* Slickの初期化前・読み込み中のガタつきを防ぐ */
.styling_md {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

/* Slickの初期化が完了した（スライドが準備できた）ときにつくクラス、または読み込み後 */
.slick-initialized.styling_md {
    opacity: 1;
    visibility: visible;
}
/* Slider用 CSS */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.slick-list {
    position: relative;
    display: block;
    overflow: inherit;
    margin: 0 auto;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
margin: 0 auto;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
    margin: 0 1em;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-slide { 
	transform:scale(0.77);
	transition: all 0.5s;
}

.slick-center {
    transform: scale(1.02);
}

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

slide arrows 左右の矢印

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

.slide-arrow {
    font-size: 0;
    line-height: 0;
    position: absolute;
    border: none;
    outline: none;
    z-index: 8;
    top: calc(100% - 75%);
    display: block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: all .3s;
    background-color: transparent;
    background-image: url(../images/slider_arrow_prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: all 0.2s;
    transition: transform .3s ease; /* ゆっくり変化させる */
}
/* next prev */
.prev-arrow {
    left: -5%;
}
.next-arrow {
    right: -5%;
    background-image: url(../images/slider_arrow_next.svg);
}

.slide-arrow:hover {
    transform: scale(1.2); /* 拡大 */
}
.slick-prev,
.slick-next {
    display: none !important;
}
/*==================================

slide dots スライド下の丸

==================================*/
.point_inner {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center;    /* 中央揃え（必要に応じて変更） */
}
.point_img {
    margin-bottom: 20px; /* 画像と商品の間隔 */
}

.slick-dotted.slick-slider {
    margin-bottom: 50px;
}
/* スライダー自体の下部に余白を空けず、位置を調整する */
.slick-slider {
    position: relative;
}
.slide-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.8em auto;
}
.slide-dots-container ul {
    padding: 0 8px 0 8px;
    margin-top: -0.6em;
}
/* 左側の矢印（←） */
.slide-dots-container .slide-arrow {
    line-height: 0;
    position: static;
    border: none;
    outline: none;
    z-index: 8;
    top: calc(100% - 75%);
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    transition: all .3s;
    background-color: transparent;
    background-image: url(../images/slick_arrow_prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: all 0.2s;
    transition: transform .3s ease; /* ゆっくり変化させる */
}

/* 右側の矢印（→） */
.slide-dots-container .next-arrow {
    background-image: url(../images/slick_arrow_next.svg);
}
/* 各ドット（li）のスタイル */
.slick-dots li {
    position: relative;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    margin: 0 0.3em;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 14px;
    height: 14px;
    padding: 3px;
    cursor: pointer;
    border: 0;
    background: none;
    outline: none;
    text-align: center;
}

.slick-dots li button:hover, 
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before, 
.slick-dots li button:focus:before {
    opacity: 1;
}

/* ドットの見た目（丸枠） */
.slick-dots li button:before {
    /* transition: all 130ms cubic-bezier(0.250, 0.250, 0.750, 0.750); */
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    content: '';
    border-radius: 20px;
    opacity: 1;
    border: 1px solid #000000;
}

/* アクティブ（現在のスライド）のドットの色を黒にする */
/* アクティブ（現在のスライド）のドットの色を黒にする */
.styling_md .slick-dots li.slick-active button:before,
.slick-dots li.slick-active button:before {
    opacity: 1 !important;
    background: #000 !important;
}



/*------------------------------------

商品リンク

------------------------------------*/
/* nwe item */
.item_link_wrap {
    padding: 0;
    margin-bottom: 0;
}
.items_fg {
    max-width: 400px;
    margin: 0em auto 0;
	text-align: center;

}
.items_fg ul.item_link_wrap {
    margin: 1em auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    justify-content: center;
}
.item_link_wrap li a {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    /* width: 340px; */
    gap: 1.5em;
}
.item_spec_fg {
    font-family: "游ゴシック体 Pr6N D";
    margin-bottom: 1em;
}
.item_link_wrap .item_price_fg {
    display: block;
    line-height: 100%;
    font-size: 92%;
    font-weight: bold;
    font-family: "游ゴシック体 Pr6N M";
    margin-top: -0.1em;
    letter-spacing: 1px;
}
.item_link_wrap .item_tani_fg {
	font-size: 70%;
	line-height: 100%;
	vertical-align: baseline;
}
.item_link_wrap .item_price_fg_red {
color: #c1272d;
letter-spacing: 1.5px;
}
.item_link_wrap .item_price_fg_red .item_tani_fg .tani_bg {
    font-size: 80%;
   margin-right: -0.2em;
}
.item_link_wrap .item_num_lv {
	font-size: 100%;
	letter-spacing: 0.3px;
	line-height: 1.3;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.item_link_wrap .item_txt_fg {
	display: inline-block;
    font-size: 90%;
    line-height: 1.3em;
    letter-spacing: 1.4px;
}
.item_link_wrap .item_name_fg {
}

.item_link_wrap .detail_lv {
	display: block;
	margin: 0.3em auto 0;
	width: 11.7em;
}
.item_link_wrap .item_tax_lv {
    font-size: 60%;
    line-height: 100%;
    vertical-align: baseline;
    letter-spacing: 0.1px;
}
.item_link_wrap a {
    transition: all .3s;

}
.item_link_wrap a:hover {
	text-decoration: none;
}
.item_link_wrap a:hover .item_price_fg ,.item_link_wrap a:hover img {
	opacity: 0.7;
    transition: all .3s;

}
.top-link-btn p {
    position: relative;
    background: #85b5b0;
    color: #fff;
    border-radius: 3em;
    padding: 0.2em 2.5em 0.2em;
    display: inline-block;
    line-height: 1.4;
    letter-spacing: 0.12em;
    margin: 0.4em auto 0.4em;
    font-size: 85%;
    font-family: "Lato", sans-serif;
    font-weight: 600;
}
.items_fg a:hover {
  text-decoration: none;
}
@media (hover: hover) {
 .items_fg a {
    transition: all 0.3s;
  }
 .items_fg a:hover {
    opacity: 0.7;
  }
  .items_fg a:hover p::after{
        transform: translateX(0.3em);
    }
    
}

/* item01 lesson01 */
.item01_less01_wrap .item_link_wrap li:nth-child(3) {
    margin-top: 0.4em;
}

#item01 .item01_less02_wrap .items_fg ul.item_link_wrap {
    margin: 2.5em auto;
}
/*------------------------------------
商品
------------------------------------*/


/*------------------------------------
着回しやすいシャツをチェック！
------------------------------------*/
.jump_btn {
    margin: 1.5em auto;
    text-align: center;
    padding-bottom: 4em;
    background-color: #fff;
    padding: 2.5em 0 2em;
}

/*------------------------------------
アニメーション
------------------------------------*/
.fade_fg {
opacity: 0;
will-change: opacity, transform; /* ブラウザに「これからアニメーションするよ」と事前教え込む */
backface-visibility: hidden;    /* 3D描画のちらつきを抑える */
-webkit-backface-visibility: hidden;
transform: translateZ(0);         /* 強制的にGPUレイヤーに昇格させる */
-webkit-transform: translateZ(0);

   }

   .fade_fg.fadeIn_fg {
    animation: fadeIn_fg 0.8s forwards 0s;
   }
   @keyframes fade_fg {
    0% {
     opacity: 0;
    }
    100% {
     opacity: 1;
    }
   }
   @keyframes fadeIn_fg {
    0% {
     transform: translateY(15px);
     opacity: 0;
    }
    100% {
     transform: translateY(0px);
     opacity: 1;
    }
   }
   @keyframes fadeIn02_lv {
    0% {
     transform: translateY(15px);
     opacity: 0;
    }
    100% {
     transform: translateY(0px);
     opacity: 1;
    }
   }

   @keyframes fade_left_fg {
       0% {
        transform: translateX(-25px);
        opacity: 0;
       }
       100% {
        transform: translateX(0px);
        opacity: 1;
       }
      }
      
      @keyframes fade_right_lv {
       0% {
         transform: translate(55px,-15px);
         opacity: 0;
       }
       100% {
         transform: translate(0,0);
       }
       20%,100% {
         opacity: 1;
       }
     }
     .bounce-img {
        animation: bounce 2s ease-in-out infinite;
      }
      
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { 
          transform: translateY(0);
        }
        40% { 
          transform: translateY(-30px);
        }
        60% {
          transform: translateY(0px);
        }
      }

.wrap_inner_fg a:hover {
	text-decoration: none;
	opacity: 0.7 ;
}
.wrap_inner_fg a {
	transition: all 0.3s;
}


/************ SP ************/
@media (max-width: 910px) {
    .ttl_photo img.icon_ttl01_fg {
        top: 24vw;
    }
}

@media (max-width: 768px) {
 .pc_fg {
  display: none !important;
 }
 .sp_fg {
  display: block !important;
 }
 .sr_page-shopping-result__free .fca_container__in {
  padding: 0 0 0em;
 }
 #contents_fg img {}
 #contents_fg a {}
 #contents_fg {
  background-size: 121%;
  padding-bottom: 0em;
  padding-top: 4em;
  font-size: 3.5vw;
 }
 #contents_wrap_fg {
    width: 100%;
    margin: 0 auto;
    padding: 0em 0 3em;
    background-size: 17px 17px;
}
 #contents_fg ul {}
 #contents_fg li {}
 #wrapper {
    background: #fff;
}
 /*------------------------------------
title
------------------------------------*/
 .ttl_fg {
    background-image: url(../images/title_bk_sp.webp);
    background-size: contain;
    height: 102vw;
    background-position: top;
    margin: 0 auto 6.5em;
 }

 .ttl_photo img.main_ttl_fg {
    width: 85%;
    top: -7%;
    left: 7.5%;
}
.ttl_photo img.icon_ttl01_fg {
    width: 92%;
    top: 62%;
    left: 4%;
}

  /*------------------------------------
メイン
------------------------------------*/
.wrap_inner_fg {
    width: 100%;
    padding-bottom: 0em;
    padding-top: 0em;
    margin: 2em auto 0;
}

 /*------------------------------------
リード
------------------------------------*/
 .lead_fg {
    margin: 2em auto;
 }
.lead_fg img {
width: 5%;
}
.lead_fg p.lead_text_fg {
    width: 100%;
    margin: 0 auto 1em;
    letter-spacing: 1.3px;
    line-height: 2em;
}

 /*------------------------------------
商品詳細
------------------------------------*/
/* item ttl */
#item01 .item_ttl_sub {
    width: 47vw;
    margin-bottom: 0.2em;
}
#item02 .item_ttl_sub {
    width: 44vw;
    margin-bottom: 0.2em;
}
#item01 .item_ttl_wrap .ttl_img {
    margin-left: -5em;
    width: 50%;
}
.item_ttl_wrap .item_ttl p:nth-child(3) {
    font-size: 3.3vw;
}
.item_ttl_wrap .item_ttl p.item_name_fg {
    margin-bottom: 0.3em;
    margin-top: -0.4em;
    line-height: 1.2;
    font-size: 6.6vw;
}
.item_ttl_wrap .item_ttl {
    margin-top: 1em;
        z-index: 1;
}
/* new item */
.item_link_wrap li {
    display: flex;
    vertical-align: top;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 0em;
    margin: 0 auto;
    width: 100%;
}
.items_fg a ul.item_link_wrap {
    padding: 1.8em 0.4em 0.7em 0em;
    border-radius: 10px;
    border: 2px solid #000000;
    width: 95%;
    margin: 0 auto;
}


.item_link_wrap .item_price_fg {
    font-size: 4vw;
    margin-top: -0.2em;
    letter-spacing: 0.2px;
} 

.item_link_wrap .item_name_fg {
    font-size: 4vw;
    line-height: 1.6em;
}
.item_link_wrap .item_price_fg_red {
    letter-spacing: 0.4px;
    font-size: 3.7vw;
    line-height: 1.1;
    margin-top: 0.1em;
}

.item_link_wrap .item_link_box {
    margin-left: -0.6em;
    /* margin-right: -0.8em; */
}
.top-link-btn p {
    font-size: 3.4vw;
}
.item_spec_fg {
    font-size: 4.5vw;
}
.item_link_wrap .item_price_fg_red::before {
    margin: 0.5em auto;
}
.item_link_wrap .item_num_lv {
}
.items_fg {
    text-align: center;
}
.item_link_wrap li a {
    gap: 1em;
}
.point_box .lesson_ttl {
    width: 80%;
}
#item01 .item_ttl_wrap .item_ttl {
    margin-left: -0.2em;
    margin-top: 0.8em;
}
/* item02 */
#item02 .item_ttl_wrap .ttl_img {
    margin-right: -6.3em;
    width: 50%;
}
#item02 .item_ttl_wrap .item_ttl {
    margin-right: -0.3em;
    z-index: 1;
}

 /*------------------------------------
スライド
------------------------------------*/
.slick-slide img {
    display: block;
    margin: 0 auto;
}
.slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0em auto;
    list-style: none;
    text-align: center;
    opacity: 1;
}

.slide-arrow {
    /* top: calc(10% - 50px);
    width:9vw;
    height: 100%; */
}
/* next prev */
.prev-arrow {
    left: 0%;
}
.next-arrow {
    right: 0%;
}

.slick-dots li {
    margin: 0 0.3em;
}
.coordinate_wrap #item01_fg, .coordinate_wrap #item02_fg {
    width: 95%;
    margin: 0 auto;
}
.slick-slide { 
	transform:scale(0.9);
	transition: all 0.5s;
}
.slick-center {
    transform: scale(1);
}
.slide-arrow:hover {
    transform: none; 
}

#item01_fg, #item02_fg {
    margin: 0.5em auto 3em;
}

#item01_fg ul li .point_box .point_inner, #item02_fg ul li .point_box .point_inner {
    padding: 1.2em ;
}

/* コラボアイテムを見る */
.jump_btn {
    width: 50%;
    padding: 2em 0 0.5em;
}


}


@media (max-width:475px) {
    .slide-arrow {
        width: 11%;
        height: 11%;
        background-color: transparent;
        background-image: url(../images/slider_arrow_prev_sp.svg);
    }
    /* next prev */
    .prev-arrow {
        left: -1%;
    }
    .next-arrow {
        right: -1%;
        background-image: url(../images/slider_arrow_next_sp.svg);
    }
    
}




/*------------------------------------

ページトップへ戻る

------------------------------------*/
.pageTop_fg {
	position: relative;
	height: 0;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	z-index: 10000;
    display: none;
}
.pageTop_fg a {
	position: fixed;
    bottom: 15px;
    right: 20px;
	left: auto;
	display: block;
	width: 80px;
	height: 80px;
	padding-bottom: 10px;
	background-image: url(../images/pagetop.webp);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 10000;
    transition: all 0.3s;

}
.pageTop a:hover {
    bottom: 20px;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
	.pageTop_fg a:hover {
		bottom: 20px;
		opacity: 1.0;
	}
}
@media (max-width: 768px) {
	.pageTop_fg a {
		right: 10px;
		bottom: 25px;
		width: 13vw;
		height: 13vw;
	}
}


.fca_page-shop-category__body {
    margin-top: 0;
    /* position: relative; */
    background-color: #fff;
}
#footercontent {
    /* position: relative; */

}