@charset "utf-8";
/* CSS Document */

 /*********************************
              全体
*********************************/

#wrapper {
  overflow: hidden;
  width: 100%;
  display: block;
	}
#wrapper img {
    width: 100%;
    height: auto;
}


#wrapper p,#wrapper h4 {
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  text-align: center;
}


#wrapper h1,
#wrapper h2,  
#wrapper h3, 
#wrapper h5, 
#wrapper h6 {
  font-family: "yu-gothic-pr6n", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  text-align: center;
}

#wrapper span.br {
    display: block;
}


/* リンク */

html { scroll-behavior: smooth;}


:root {

  /* ============================================
     ベース設定
  ============================================ */
   --ms-vw: 100vw;   
   --ms-rem: clamp(10px, calc(var(--ms-vw) / 40), 18px); 
   --ms-line-height: clamp(1.5, calc(1.3 + (var(--ms-vw) / 2000)), 1.8);
   --ratio: 1;
   --sp-width: 750;
   --variable: calc(100vw / var(--sp-width));
	
  /* ============================================
     フォント
  ============================================ */

  --ms-font-size-xl2:   calc(var(--ms-rem) * 2);
  --ms-font-size-xl:   calc(var(--ms-rem) * 1.65);   
  --ms-font-size-lg:   calc(var(--ms-rem) * 1.79);  
  --ms-font-size-md:   calc(var(--ms-rem) * 1.5);  
  --ms-font-size-sm:   calc(var(--ms-rem) * 1.3);   
  --ms-font-size-xs:   calc(var(--ms-rem) * 1.2); 
  --ms-font-size-xxs:   calc(var(--ms-rem) * 1);


  /* ============================================
     カラー
  ============================================ */
  --ms-color-text:       #c30d17;  
  --ms-color-accent-dark:#fde6bd;   
  --ms-color-on-accent:  #ffffff;    
	
  --ms-color-bt:     #bc1e3f; 
  --ms-color-bt2:     #4f6853; 	
  --ms-color-sec2-2:     #a57a75;
  --ms-color-sec3:     #5f6778; 
  --ms-color-sec3-2:     #404b5f;
  --ms-color-sec3-3:     #66979e;
  --ms-color-sec4:     #4f4d41; 
  --ms-color-sec4-2:     #4f2c26;
  --ms-color-sec4-3:     #d4ada8;


  /* ============================================
     テキストスタイル
  ============================================ */
  --ms-letter-spacing:   0.11em;
  --ms-letter-spacing-s: 0.10em;

  --ms-line-height:      3rem;
  --ms-line-height-s:     calc(2.5rem + 1vw);
  --ms-line-height-xs:    1.5rem;
	
/* catchphrase */
--ms-color-catchphrase: #58a5a8;
--ms-font-size-catch:   calc(var(--ms-rem) * 3.1);  
--ms-font-size-catch-hl: calc(var(--ms-rem) * 6);    
--ms-line-height-catch: 0.2em;
--ms-letter-spacing-catch:    0.08em;
--ms-letter-spacing-catch-hl: 0.05em;

}

img:hover {
  opacity: 1 !important;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}


.fade-blur {
    opacity: 0;
    filter: blur(8px);
 transition: opacity 1.3s ease-out, filter 1.3s ease-out;
}

.fade-blur.visible {
    opacity: 1;
    filter: blur(0);
}

.huwarin {
    display: block; 
    overflow: hidden;
}

.huwarin img {
    display: block;
    opacity: 1;
    clip-path: inset(0 100% 0 0); 
    transition: clip-path 2s ease-out;
}


.huwarin.show img {
    clip-path: inset(0 0 0 0); 
}

#wrapper .kaw {
    position: relative;
}

#wrapper .kaw > a {
    display: block;
}

#wrapper .kaw > a:first-child {
    position: relative;
}

#wrapper .kaw > a:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#wrapper .kaw img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1.2s ease;
}

#wrapper .kaw img.show {
    opacity: 1;
}

.huwarin {
    display: block; 
    overflow: hidden;
}

.huwarin img {
    display: block;
    opacity: 1;
    clip-path: inset(0 100% 0 0); 
    transition: clip-path 2s ease-out;
}


.huwarin.show img {
    clip-path: inset(0 0 0 0); 
}


.scroll-follow {
  will-change: transform;
  transform: translateY(0);
}



	
/*********************************
         　　  共有
*********************************/		
/*テキスト*/


#wrapper .title {
	color: var(--ms-color-text);
	font-size: var(--ms-font-size-xs);
	letter-spacing: var(--ms-letter-spacing-catch-hl);
	line-height: var(--ms-line-height);
	border-style: none;
}



#wrapper .sec1-t {
	width: 80%;
    margin: 0 auto;
    padding: 10% 0 8%;
}





/*配置*/
#wrapper .topview, #wrapper .r-box {
	position: relative;
}


#wrapper .chapter{
	font-family: "linotype-didot", serif;
    font-weight: 100;
    font-style: italic;
    color: #ca8ea8;
    letter-spacing: 0.1rem;
    font-size: 8vw;
    margin: 4% 0;
}

/*動画*/

.hacobune-app-container {
      width: 97%!important;
      margin: 0 auto;
        padding: 0;
    }  


.hacobune-unit-video-wrap {
    width: 80%;!important;
}

.hacobune-app-container  {
    background: transparent !important;
}

.hacobune-app-container {
    background: transparent !important;
}

.hacobune-video-js.videojs-default-skin {
    background-color: transparent !important;
}

.hacobune-app-container {
  background: transparent !important;;
}
	
		
.hacobune-unit-video .hacobune-unit-video-wrap .hacobune-unit-video-outline {
    padding: 0;
}

.hacobune-readmore {
    position: relative;
    overflow: hidden;
    margin-bottom: -4%;
    text-align: left;
}
	
.hacobune-univideo .hacobune-app-container {
    background: transparent;
    padding: 0;
}
.hacobune-univideo .hacobune-video-js.videojs-default-skin {
    background: transparent;
}





#wrapper .more_btn {
  background-color: var(--ms-color-on-accent);
  padding: 3%;
  width: 50%;
  color: var(--ms-color-bt);
  font-size: var(--ms-font-size-xl);
  margin: 5% auto;
  text-decoration: none;
  text-align: center;
  border-radius: 7vw;
}

#wrapper .wrapper2 .more_btn a{
    color: var(--ms-color-bt2) !important;
}

#wrapper .more_btn a {
  color: var(--ms-color-bt);
}

#wrapper .more_btn--christmas {
    padding: 3%;
    width: 75%;
    color: #fff;
    font-size: var(--ms-font-size-md);
	margin: -8% auto 15%;
    text-decoration: none;
    text-align: center;
    border-radius: 7vw;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 220, 170, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    display: block;
}
#wrapper .more_btn--christmas a {
    color: var(--ms-color-on-accent);
}


#wrapper .space, #wrapper2 .space {
  margin-bottom: 20%;
}

.block-goods-item--price.block-goods-item--price__session,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--default-price,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--price,
.block-goods-item--price.block-goods-item--price__session .price__sale,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--pricedown_per {
    color: var(--ms-color-accent-dark)!important;
	font-size: var(  --ms-font-size-xl2)!important;
}

.block-goods-item--price--price.price__sale.price.js-enhanced-ecommerce-goods-price {
  font-size: 1.6rem; 
}

.block-goods-item--price--pricedown_per {
  font-size: 1.4rem;
}


.block-goods-item--price.block-goods-item--price__session {
  display: flex;               
  justify-content: center;    
  align-items: center;       
}


.block-goods-item--price--default-price.default-price::after {
  content: "→";
  margin: 0 0.4em; 
  font-weight: bold;
  color: var(--ms-color-accent-dark);
  display: inline-block;
  transform: translateY(1px);
}


#wrapper2 .block-goods-item--price--default-price.default-price::after {
  content: "→";
  margin: 0 0.4em; 
  font-weight: bold;
  color: var(--ms-color-btn-sec2);
  display: inline-block;
  transform: translateY(1px); 
}

.block-goods-item--price--default-price.default-price {
  	font-size: var(--ms-font-size-base);
}




#wrapper .item_dt {
color: var(--ms-color-accent-dark);
    font-size: var(--ms-font-size-md);
letter-spacing: var(--ms-letter-spacing-catch-hl);
    line-height: var(--ms-line-height-xs);
    padding: 5% 0 4%;
}

#wrapper .xmas-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2%;
    margin: 0 0 4%;
    justify-content: center;
}

#wrapper .xmas-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: var(--ms-font-size-sm);
    line-height: var(--ms-line-height-xs);
    white-space: nowrap;
}

#wrapper .xmas-badge--point {
      background-color: var(--ms-color-bt);
}

#wrapper .xmas-badge--shipping {
   background-color: var(--ms-color-bt);

}

#wrapper .wrapper2 .xmas-badge--point {
   background-color: var(--ms-color-bt2);
}

#wrapper .wrapper2 .xmas-badge--shipping {

      background-color: var(--ms-color-bt2);

}




/*********************************
           メインエリア
*********************************/	
/*topview*/

#wrapper  {
	width: 100%;
	display: block;
}


#wrapper .wrapper1 {
  padding: 0 0 1%;
  background-image: url("https://shop.aimerfeel.jp/img_visu/page/2026/other/20_contents12/bg.png"); 
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;                     
}

#wrapper .headline_m {
}

#wrapper .headline2_t {
	margin: -26% auto 0;
    width: 97%;
}

#wrapper .logo {
    width: 27%;
    margin: 5% auto;
}

#wrapper .intr {
    color: var(--ms-color-on-accent);
    margin: 0;
    font-size: var(--ms-font-size-xs);
    letter-spacing: var(--ms-line-height-catch);
    line-height: var(--ms-line-height);
    font-weight: bold;
}

#wrapper .mv {
    width: 20%;
    margin: 15% auto 0;
}


#wrapper .ad {
  padding: 35% 0 8%;
  background-image: url("https://shop.aimerfeel.jp/img_visu/page/2026/other/20_contents12/ad.png"); 
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat; 
  margin-bottom: 16%;
}

#wrapper .closet {
    width: 57%;
    margin: 21% auto 0;
}


#wrapper .menu_t {
    color: var(--ms-color-text);
    text-align: center;
    margin-top: 1%;
    font-size: var(--ms-font-size-md);
	font-weight: bold;
}

#wrapper .item-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2% 2%;
    width: 82%;
    margin: 5% auto 0;
}

#wrapper .item {
  grid-column: span 2;
}

#wrapper .item img {
  display: block;
  width: 100%;
  height: auto;
}

#wrapper .ex {
    width: 80%;
    margin: 15% auto 0;
}


/*SEC1*/

#wrapper .g_1 {
    width: 50%;
    position: absolute;
    top: -10%;
    left: -25%;
    rotate: -35deg;
}

#wrapper .s_1 {
    width: 15%;
    position: absolute;
    bottom: 2%;
    left: 7%;
    rotate: 200deg;
}

#wrapper .sec_tl {
    width: 64%;
    margin: 0 auto;
    padding: 3% 0 2%;
}

#wrapper .sec_tl_txt {
    color: var(--ms-color-on-accent);
    margin-top: 3%;
    font-size: var(--ms-font-size-xl);
    font-weight: bold;
    line-height: var(--ms-line-height-s);
    letter-spacing: var(--ms-letter-spacing-catch);
}

#wrapper .m_1-1 {
    margin: 5% auto 0;
    width: 85%;
}

#wrapper .m_1-2 {
    margin: 0 0 0 -6.5%;
    width: 113%;
}

#wrapper .m_1-3 {
    width: 88%;
    margin: 0 auto;
}


/*SEC2*/

#wrapper .g_2 {
    width: 50%;
    position: absolute;
    top: -80%;
    right: -20%;
    rotate: -40deg;
}

#wrapper .s_2 {
    width: 14%;
    position: absolute;
    top: -10%;
    left: 5%;
}

#wrapper .m_2-1 {
 margin: 8% auto 0;
}

#wrapper .m_2-2 {
    width: 85%;
    margin: 15% 0 0 0;
}

#wrapper .m_2-3 {
    width: 85%;
    margin: 15% 0 0 15%;
}

/*SEC3*/

#wrapper .s_3 {
    width: 14%;
    position: absolute;
    top: -6%;
    left: 10%;
    rotate: 120deg;
}

#wrapper .s_3-1 {
    width: 14%;
    position: absolute;
    bottom: 2%;
    right: 5%;
}

#wrapper .g_3-1 {
    width: 44%;
    position: absolute;
    bottom: -3%;
    left: -2%;
}


#wrapper .g_3-2 {
    width: 54%;
    position: absolute;
    top: 20%;
    right: -3%;
    rotate: -90deg;
}



#wrapper .m_3-1 {
 margin: 8% auto 0;
 width: 80%;
 z-index: 1;
 position: relative;
}

#wrapper .m_3-2 {
    margin: 0 0 0 -6.5%;
    width: 113%;
}

/*SEC4*/

#wrapper .g_4 {
    width: 44%;
    position: absolute;
    top: -82%;
    right: -15%;
    rotate: -15deg;
}

#wrapper .s_4 {
    width: 13%;
    position: absolute;
    bottom: 72%;
    left: 7%;
    rotate: -90deg;
}


#wrapper .s_4-2 {
    width: 14%;
    position: absolute;
    top: -3%;
    right: 9%;
    rotate: -90deg;
}

#wrapper .s_4-3 {
    width: 11%;
    position: absolute;
    bottom: 1%;
    left: 7.5%;
    rotate: 100deg;
}




#wrapper .m_4-1 {
margin: 8% auto 15%;
}

#wrapper .m_4-2 {
    width: 80%;
    margin-bottom: 3%;
}


#wrapper .m_4-3 {
    width: 85%;
    margin: 0 auto;
}


/*SEC5*/

#wrapper .s_5 {
    width: 13%;
    position: absolute;
    top: -22%;
    left: 7%;
    rotate: -90deg;
}

#wrapper .m_5-1 {
    margin: 10% auto 15%;
}

#wrapper .m_5-2 {
    width: 85%;
    margin: 0 auto;
}


/*SEC6*/

#wrapper .g_6 {
    width: 50%;
    position: absolute;
    top: -80%;
    left: -19%;
    rotate: -35deg;
}

#wrapper .s_6 {
    width: 15%;
    position: absolute;
    top: -12%;
    right: 7%;
    rotate: 210deg;
}

#wrapper .s_6-2 {
    width: 15%;
    position: absolute;
    top: -12%;
    left: 6%;
    rotate: 210deg;
}

#wrapper .m_6-1 {
    width: 93%;
    margin: 10% auto 18%;
}

#wrapper .m_6-2 {
    width: 83%;
    margin-bottom: 18%;
}

#wrapper .m_6-3 {
	width: 88%;
    margin: 0 0 0 12%;
}

#wrapper .m_6-4 {
    width: 83%;
    margin: 0 auto;
}


#wrapper .wrapper2 {
  padding: 18% 0 28%;
  background-image: url("https://shop.aimerfeel.jp/img_visu/page/2026/other/20_contents12/bg2.png"); 
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;
	padding-bottom: 15%;                      
}

/*SEC7*/

#wrapper .g_7 {
    width: 50%;
    position: absolute;
    top: 17%;
    left: -13%;
    rotate: -35deg;
}

#wrapper .s_7 {
    width: 15%;
    position: absolute;
    top: -5%;
    right: 7%;
    rotate: 210deg;
}

#wrapper .m_7-1 {
    width: 82%;
    margin: 10% auto 15%;
	position: relative;
    z-index: 1;
}

#wrapper .m_7-2 {
    width: 82%;
    margin: 0 auto;
}

/*SEC8*/

#wrapper .s_8-1 {
    width: 14%;
    position: absolute;
    top: -4%;
    left: 10%;
    rotate: -55deg;
}

#wrapper .s_8-2 {
    width: 10%;
    position: absolute;
    top: -12%;
    right: 8%;
}

#wrapper .g_8-1 {
    width: 44%;
    position: absolute;
    bottom: -3%;
    left: -2%;
}


#wrapper .g_8-2 {
    width: 54%;
    position: absolute;
    top: 20%;
    right: -3%;
    rotate: -90deg;
}




#wrapper .m_8-1 {
    width: 80%;
    margin: 10% auto 12%;
    position: relative;
    z-index: 1;
}

#wrapper .m_8-2 {
    width: 80%;
    margin: 0 auto;
}

#wrapper .m_8-3 {
    width: 80%;
    margin: 7% auto 0;
}

/*SEC9*/

#wrapper .s_9-1 {
    width: 14%;
    position: absolute;
    top: -4%;
    right: 12%;
    rotate: 210deg;
}

#wrapper .s_9-2 {
    width: 10%;
    position: absolute;
    bottom: 2%;
    left: 11%;
}

#wrapper .s_9-3 {
    width: 15%;
    position: absolute;
    bottom: -10%;
    right: 8%;
}

#wrapper .g_9 {
    width: 55%;
    position: absolute;
    bottom: 25%;
    left: -14%;
}

#wrapper .m_9-1 {
    width: 85%;
    margin: 10% auto 12%;
}


#wrapper .m_9-2 {
    margin: 0 0 0 -6.5%;
    width: 113%;
    position: relative;
    z-index: 1;
}

/*SEC10*/

#wrapper .s_10 {
    width: 15%;
    position: absolute;
    bottom: -13%;
    left: 6%;
}

#wrapper .g_10 {
    width: 55%;
    position: absolute;
    top: -15%;
    right: -24%;
}

#wrapper .m_10-1 {
	margin: 8% auto 13%;
}


#wrapper .m_10-2 {
    width: 80%;
    margin: 0 auto;
}


#wrapper .m_10-3 {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}



#wrapper .m_11 {
    margin: 10% auto 0;
}

#wrapper .s_12 {
    width: 15%;
    position: absolute;
    top: -18%;
    right: 8%;
    rotate: -150deg;
}

#wrapper .g_12 {
    width: 55%;
    position: absolute;
    top: -85%;
    left: -24%;
}



#wrapper .m_12 {
    width: 87%;
    margin: 5% auto 0;
}

#wrapper .m_ex-1 {
    width: 87%;
    margin: 5% auto 0;
}

#wrapper .s_r-1 {
    width: 14%;
    position: absolute;
    top: -4%;
    right: 12%;
    rotate: 210deg;
}

#wrapper .s_r-2 {
    width: 10%;
    position: absolute;
    bottom: 2%;
    left: 11%;
}

#wrapper .g_r {
    width: 55%;
    position: absolute;
    bottom: -9%;
    left: -12%;
}

#wrapper .m_ex-2 {
    margin: 0 0 0 -6.5%;
    width: 113%;
    position: relative;
    z-index: 1;
}

#wrapper .sh_tl {
	width: 50%;
    margin: 0 auto;
}

#wrapper .s_sh-1 {
    width: 15%;
    position: absolute;
    bottom: 2%;
    right: 16%;
    rotate: 15deg;
}

#wrapper .s_sh-2 {
    width: 10%;
    position: absolute;
    top: -6%;
    left: 9%;
}

 
#wrapper .att {
	color: var(--ms-color-on-accent);
    font-size: var(--ms-font-size-xxs);
    text-align: right;
    margin: -6% 5% 5% 0;
}


#wrapper .shorts {
    width: 80%;
    margin: 0 auto;
}







































/*********************************
           pc用指示
*********************************/	

@media (min-width: 768px){
	
  :root {
    --ms-line-height: 3.0; 
	--ms-line-height-xs: 2.0; 
    --ms-font-size-md:   calc(var(--ms-rem) * 1.2);    
    --ms-font-size-xs:   calc(var(--ms-rem) * 1); 
    --ms-font-size-lg:   calc(var(--ms-rem) * 1.3);  

  }
	
.hacobune-unit-video-wrap {
    width: 70%!important;
}
	
	
#bg_wrapper {
background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/20_contents12/pc-bg2.png);
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
  }


  #wrapper {
    max-width: 650px;
    margin: 0 auto;
    display: block;
box-shadow: 0 0 80px rgba(0, 0, 0, 0.45);
  }
	
  .pc-side-left,
  .pc-side-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;

    opacity: 0;
     transition: opacity 0.5s ease;
    pointer-events: none;
  }


  .pc-side-left {
    left: 0;
    width: calc((100% - 650px) / 2);
    display: flex;
    justify-content: center;
  }

  .pc-side-right {
    right: 0;
    width: calc((100% - 650px) / 2);
    display: flex;
    justify-content: center;
  }

  .pc-side-left img,
  .pc-side-right img {
    display: block;
    width: 390px;
    height: auto;
  }
	
#wrapper p {
    font-size: 2.5rem;
	letter-spacing: 0.01rem;
}
	

	
#wrapper .sec_tl_txt {
  font-size: 2.3rem;
  letter-spacing: 0.3rem;
    }
	
.block-goods-item--price.block-goods-item--price__session,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--default-price,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--price,
.block-goods-item--price.block-goods-item--price__session .price__sale,
.block-goods-item--price.block-goods-item--price__session .block-goods-item--price--pricedown_per {
	font-size: 2.4rem!important;
}
	
#wrapper .more_btn {
    width: 40%;
    font-size: 2rem;
}
	
#wrapper .xmas-badge {
    font-size: 1.55rem;
}
	
#wrapper .more_btn--christmas {
    width: 65%;
}
	




}

@media (max-width: 767px) {
  .pc-side-left,
  .pc-side-right {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .pc-side-left,
  .pc-side-right {
    display: none !important;
  }
}