@charset "utf-8";

@import '/ginza-square/common/css/all.css';
@import '/ginza-square/common/css/styles.css';

/* 3Fファンケルショップ ------------------------------------------*/
 #p_3f  .btn a {
	background-color: #6182B5;
}

#p_3f h4{
    margin: 0 0 30px 0px;
    font-size: 1.8rem;
}

#p_3f .section{
    margin: 0px auto 60px;
}
#p_3f .m-c{
    margin: 60px auto;
}

/*サブナビ*/
#subnav .subnav_wrap {
    width: 100%;
    margin: 0 auto;
}

#subnav .subnav_lists {
    display: flex;
}

#subnav .subnav_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 0.5%;
   padding: .8em 1.5em 0.6em;
    border: none;
    background-color: #AFA99E;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.2em;
}

#subnav .subnav_list:first-child {
    margin-left: 0px;
}

#subnav .subnav_list:last-child {
    margin-right: 0px;
}

#subnav .subnav_list:before {
    position: absolute;
   right: calc(1.5em + 5px);
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    pointer-events: none;
}

#subnav .subnav_list::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
    position: absolute;
    right: 1.5em;
    top:40%;
     pointer-events: none;
}


#subnav .subnav_list:hover {
    background-color: #CECBC6;
}

#subnav .subnav_list:hover::before {
   position: absolute;
   right: calc(1.5em + 5px);
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    pointer-events: none;
}

#subnav .subnav_list:hover::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
     position: absolute;
    right: 1.5em;
    top:40%;
    pointer-events: none;
}

#subnav .subnav_list a {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
}

#subnav a .subnav_list:hover {
    color: #fff;
}



/* --- 修正版：ここから差し替え --- */
#subnav .subnav_list .dropdown_lists {
    position: absolute;
    top: 40%; /* 親要素のすぐ下に配置 */
    left: 0;
    width: 100%;
    z-index: 9;
    box-sizing: border-box;

    /* アニメーションで開閉する設定 */
    visibility: hidden;         /* 通常時は非表示（クリック等も無効化） */
    opacity: 0;                 /* 透明にする */
    transform: scaleY(0);       /* 縦幅をゼロに */
    transform-origin: center top;/* 上端を基準に変形 */
    transition: all .3s;        /* 0.3秒かけて変化 */
}

/* 親（.subnav_list）にホバーしたらドロップダウンを表示 */
#subnav .subnav_list:hover .dropdown_lists {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);       /* 縦幅を100%に伸ばす */
}

#subnav .dropdown_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: .8em 1.5em 0.6em;
    border: none;
    background-color: #AFA99E;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.2em;
    transition: all .3s;
    text-align: center;
    left: auto;
    transform: none;
    box-sizing: border-box; /* 余白を含めたサイズ計算にする */
}

#subnav .dropdown_list:first-child {
    margin-bottom: 2px;
}

#subnav .dropdown_list:hover {
    background-color: #CECBC6;
}

#subnav .dropdown_list a {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
}

#subnav .dropdown_list:before {
    position: absolute;
   right: calc(1.5em + 5px);
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    pointer-events: none;
}

#subnav .dropdown_list::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
    position: absolute;
    right: 1.5em;
    top:44%;
     pointer-events: none;
}




/*ショッピング*/
#pickup-item,
#pickup-service,
#GiftWrapping,
#counseling,
#limiservice,
#limishopping,
#shopping {
    text-align: center;
    margin-top: -120px;
    padding-top: 120px;
}

#GiftWrapping p,
#counseling p,
#shopping p{
    font-size: 2.0rem;
    color: #333333;
}

#shopping .shop_pic{
    position: relative;
    width: 960px;
    text-align: center;
    margin: 60px auto;
}

.shop_pic_00 img {
    border-radius: 16px;
}
#shopping .shop_pic .shop_pic_01{
    position: absolute;
    top: -60px;
    left: -90px;
    width: 280px;
}

#shopping .shop_pic .shop_pic_02{
    position: absolute;
    width: 280px;
    bottom: -40px;
    right: -100px;
}


.bg {
  background-image: url("../img/3f_bg_01.png");
  background-size: cover;
    padding: 10px 0;
}


#limishopping  article{
display: block;
text-align: center;
margin: 100px auto 0 auto;
position: relative;
width: 1170px;
background-color: #FFF;
padding: 60px 20px 30px;
border-radius: 20px;
}

#limishopping  article .icon{
    width: 9.5%;
    position: absolute;
    top:-50px;
    left:50%;
    transform: translate(-50%,0%);
}

#limishopping  article .item {
    display: flex;
padding: 45px 110px;
    justify-content: space-around;
}

#limishopping  article .item >dl{
    width: 360px;
    margin: 0 20px;
}


#limishopping  article .item >dl dt img{
    border-radius: 10px;
}

#limishopping  article .item >dl dd.ttl{
 font-size: 180%;
    color: #80746D;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 20px;
}
#limishopping  article .item >dl dd.price{
 font-size: 150%;
    color: #80746D;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 10px;
    margin-bottom: 15px;
}

#limishopping  article .item >dl dd.discri{
    line-height: 1.4em;
    font-size: 150%;
    text-align: left;
}


.dotline_thin{
 border-bottom: dotted 3px;
    color: #80746d;
    padding: 5px;
}


#limishopping  article .item .s-pic{
    position: relative
}

#limishopping  article .item .s-pic .substance{
    position: absolute;
    bottom:-60px;
    right: -70px;
    border-radius: 0px;
}

#limishopping  article >dl dt.ttl{
font-size: 170%;
    color: #80746D;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 20px;
}

.dotline{
    border-bottom: dotted 5px;
    color: #D7D4CF;
    padding: 40px;
}

#limiservice article{
    display: block;
    position: relative;
    min-width: 70px;
    margin: 55px auto;
    width: 950px;
  } 

#limiservice article .inner{
    margin: 30px 0;
}
#limiservice article .icon{
    width: 12%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    float: left;
}

#limiservice article .discri{
    width: 86%;
    display: inline-block;
    vertical-align: top;
    float: left;
    text-align: left;
}

#limiservice article .discri h5{
    color: #80746D;
    font-size: 2.6rem;
    line-height: 1.2em;
}
#limiservice article .discri h5 .size-xsmall{
    color: #80746D;
}


#limiservice #present .pic-00{
    position: relative;
}

#limiservice #present .pic-03{
    position: absolute;
    right: -80px;
    bottom: 220px;
}

#limiservice #present  ul.etc{
    padding-top: 20px;
}
#limiservice #present  ul.etc li{
    text-align: left;
   color: #75BCA0;
    font-size: 1.8rem;
}

#limiservice #present ul.atten li {
    text-align: left;
    font-size: 1.4rem;
    float: left;
}

/*ラッピング*/
#GiftWrapping .item{
    text-align: center;
    margin: 55px auto 20px;
}

#GiftWrapping .gift-item{
    margin: 0 15px;
    display: inline-block;
    width: 360px;
}

#GiftWrapping .item img{
    border-radius: 10px;
}

/*カウンセリング*/
#counseling .check{
    background-image: url("../img/3f_bg_02.png");
    background-size: cover;
    padding: 60px 20px;
    height: 1010px;
    margin: 60px 0;
    border-radius: 20px;
}

#counseling .check .discri{
    position: relative;
}

#counseling .check .discri .free_icn{
    position: absolute;
    left:340px;
    top:-25px;
}

#counseling .check .atten{
    text-align: left;
    margin-left: 80px;
}


.heading {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
}
.heading::before {
  background-color: #B3ADA1; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -8px; /* 線の位置 */
  content: "";
  height: 2px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 112px; /* 線の長さ */
}

#beauty-check{
        /*background-color: #E6F0F6;*/
        padding: 40px 10px 10px 10px;
    } 

#beauty-check .swiper-area {
        position: relative;
        width: 90%;
        margin: 0 auto 10px;
 }

#health-check{
        /*background-color: #E7F5F7;*/
        padding: 20px 10px 30px 10px;
    } 

#health-check .swiper-area {
         position: relative;
        width: 90%;
        margin: 0 auto 10px;
 }
    
    
.swiper-area img{
        width: 100%;
}

#beauty-check .swiper-area .slidesPerView{
    width: 304px;
}


/*スライド→*/    
#health-check .swiper-button-next,    
#health-check .swiper-button-prev,
#beauty-check .swiper-button-next,    
#beauty-check .swiper-button-prev{
width: calc(var(--swiper-navigation-size)/ 20 * 27);
}


#health-check .swiper-button-prev,.swiper-rtl .swiper-button-next,
#beauty-check .swiper-button-prev,.swiper-rtl .swiper-button-next {
    left: -70px;
    right: auto
}

#health-check .swiper-button-next,.swiper-rtl .swiper-button-prev,
#beauty-check .swiper-button-next,.swiper-rtl .swiper-button-prev {
    right: -70px;
    left: auto
}


#health-check .swiper-button-prev::after,
#beauty-check .swiper-button-prev::after {
		content: "";
}


#health-check .swiper-button-next::after, 
#beauty-check .swiper-button-next::after {
		content: "";
} 


#beauty-check .swiper-button-prev {
		background: url("../img/3f_beauty_yaji.png") no-repeat center center / contain;
        z-index: 98;
}

#beauty-check .swiper-button-next {
	background: url("../img/3f_beauty_yaji.png") no-repeat center center / contain;
    transform:rotate(180deg); 
    z-index: 98;
}  
    
#health-check .swiper-button-prev {
		background: url("../img/3f_health_yaji.png") no-repeat center center / contain;
        z-index: 98;
}

#health-check .swiper-button-next {
	background: url("../img/3f_health_yaji.png") no-repeat center center / contain;
    transform:rotate(180deg); 
    z-index: 98;
}  


#health-check .swiper-area .swiper-pagination,
#beauty-check .swiper-area .swiper-pagination {
position: absolute;
bottom: -30px;
    display: none;
}


#limiservice #mybottle .bt{
    clear: both;
}

/****ボタン*****/
.inter-b {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 30px auto 0;
    padding: .5em 2em .5em 2em;
    border: none;
    border-radius: 25px;
    background-color: #73BDC4;
    color: #fff;
    font-weight: 500;
    text-align: center;
    width: 50%;
    font-size: 1.6rem;
}

.inter-b::after {
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 2em;
}

.inter-b:hover{
    background-color: #B5E0E2;
    text-decoration: none;
}

#limiservice a, a:link, a:visited .inter-b{
    text-decoration: none;
}


@media (max-width: 580px) {
/*サブナビ*/
#subnav .subnav_wrap {
    width: 100%;
    margin: 0 auto;
}

#subnav .subnav_lists {
   display: flow-root;
}

#subnav .subnav_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 85%;
    margin: 2px 0 0px;
   padding: 0.8em 1.5em 0.8em;
    border: none;
    background-color: #AFA99E;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.2em;
}

#subnav .subnav_list:first-child {
    margin-left: 0px;
    margin-top: 0px;
}

#subnav .subnav_list:last-child {
    margin-right: 0px;
}

#subnav .subnav_list:before {
    position: absolute;
   right: calc(1.5em + 5px);
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    pointer-events: none;
}

#subnav .subnav_list::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
    position: absolute;
    right: 1.5em;
    top:36%;
    pointer-events: none;
}

#subnav .subnav_list:nth-child(2)::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
    position: absolute;
    right: 1.5em;
    top:40%;
    pointer-events: none;
}


#subnav .subnav_list:hover {
    background-color: #CECBC6;
}

#subnav .subnav_list:hover::before {
   position: absolute;
   right: calc(1.5em + 5px);
    transform: translateX(50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    pointer-events: none;
}

#subnav .subnav_list:hover::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
     position: absolute;
    right: 1.5em;
    top:36%;
    pointer-events: none;
}

#subnav .subnav_list:nth-child(2):hover::after {
    transform: rotate(134deg);
    width: 6px;
    height: 6px;
    border-top: 3px solid #AFA99E;
    border-right: 3px solid #AFA99E;
    content: '';
    position: absolute;
    right: 1.5em;
    top:40%;
    pointer-events: none;
}


#subnav .subnav_list a {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
}

#subnav a .subnav_list:hover {
    color: #fff;
}
    
#subnav .subnav_list:first-child {
        display: none;
    }  
}  

@media (max-width: 580px) {
#pickup-item,
#pickup-service,
#GiftWrapping,
#counseling,
#limiservice,
#limishopping,
#shopping {
margin-top: -30px;
padding-top: 30px;
}
#p_3f .section{
margin: 00px auto 30px;
}
#p_3f .m-c{
margin: 00px auto 30px;
}
#p_3f h4{
font-size: 1.4rem;
}

#pickup-item h3,  
#pickup-service h3,  
#limishopping h3,  
#limiservice h3,
#counseling h3,
#shopping h3{
width: 80%;
text-align: center;
margin: 0 auto;
} 
    
#GiftWrapping p,
#limiservice p,
  #counseling p,
  #shopping p{
  font-size: 1.4rem;
  }
#GiftWrapping p,    
#counseling p,
 #shopping p{
     text-align: left;
    }
  #shopping .pic {
  /*width: 90%;*/
  margin: 20px auto;
  }
#pickup-service,
#counseling, 
#limiservice, 
#limishopping, 
#shopping {
text-align: center;
margin-top: 40px;
}
  .bg {
  background-image: url(../img/3f_bg_01.png);
  background-size: contain;
  padding: 10px 0;
  margin: 0 -2rem;    
  }

/*追加 */
#shopping .shop_pic{
    position: relative;
    width:100%;
    text-align: center;
    margin: 30px auto;
}

.shop_pic_00 img {
    border-radius: 16px;
}
#shopping .shop_pic .shop_pic_01{
    position: absolute;
    top: -40px;
    left: -20px;
    width: 40%;
}

#shopping .shop_pic .shop_pic_02{
    position: absolute;
    width: 40%;
    bottom: -20px;
    right: -20px;
}    
    
  #limishopping  article{
  display: block;
  text-align: center;
  margin: 60px auto 0 auto;
  position: relative;
  width: 80%;
  height: auto;
  background-color: #FFF;
  padding: 30px 15px;
  border-radius: 16px;
  }
    
#limishopping  article .item{
display: block;
padding: 20px 0px;
}

#limishopping article .icon {
    width: 26%;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0%);
}    
    
    
#limishopping  article .item >dl{
    width: 100%;
    margin: 40px 0 0 0;
}    
    
    
/*    
  #limishopping article >dl dt.icon {
  width: 80px;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0%);
  }
  #limishopping article >dl {
  margin-top: 30px;
  }
  #limishopping article >dl dd.discri-01 {
  font-size: 1.4rem;
  line-height: 1.8em;
  margin-top: 0px;
  }
    
    
/*限定サービス*/
#limiservice article{
    display: block;
    position: relative;
    min-width: 70px;
    width: 80%;
    height: auto;
    padding: 15px 0px;
    border-radius: 16px;
    margin: 55px auto;
  } 

#limiservice article:nth-child(4) {
    margin: 80px auto 100px;
}
#limiservice article dl.discri{
    width: 100%;
  } 
#limiservice article dl.discri dt{
    width: 18%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    float: left;
}
#limiservice article dl.discri dd.mybottle{
    width: 80%;
    display: inline-block;
    text-align: left;
    float: left;
    margin-bottom: 20px;
}

#limiservice article dl.discri-02 p,
#limiservice article dl.discri p{
    color: #80746D;
    font-size:1.6rem;
    line-height: 1.6em;
    white-space: nowrap;
}
#limiservice article dl.discri p .small{
    font-size:1.4rem;
    line-height: 1.2em;
}
    
#limiservice article dl.discri dt img{
    width: 100%;
}

#limiservice article dl.discri dd.cp{
    width: 100%;
    margin-inline-start: 0px;
    text-align: left;
    display: inline-block;
}
#limiservice #mybottle .bt{
    clear: both;
    margin-top: 60px;
}
#limiservice article .pic{
    position: absolute;
    right: -20px;
    bottom: -30px;
    width: 45%;
}
#limiservice article .pic-02{
    position: absolute;
    right: -18px;
    bottom: -60px;
    width: 45%;
    display: none;
}

#limiservice article .pic-03{
    position: absolute;
    right: 80px;
    top: 180px;
    width: 30%;    
} 
    #limiservice article dl.discri-02 p{
    margin-top: 5px;
}

#limiservice article dl.discri-02{
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

#limiservice article dl.discri-02 dt{
    font-size:180%;
}

#limiservice article dl.discri-02 dt img{
    width: 100%;
}

#limiservice article dl.discri-02 dt{
    width: 18%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    float: left;
}

#limiservice article dl.discri-02 dd.gacha{
    width: 78%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

#limiservice article dl.discri-02 dd.cp{
    width: 100%;
    margin-inline-start: 0px;
    text-align: left;
    margin-top: 20px;
    display: inline-block;
    font-size: 1.4rem;
}

#limiservice article dl.discri-02 dd.etc{
   margin-inline-start: 0px;
    margin-top: 10px;
}

#limiservice article dl.discri-02 dd.etc ul li{
    text-align: left;
   color: #75BCA0;
    font-size: 1.2rem;
    line-height: 1.6em;
}

#limiservice article dl.discri-02 dd.atten{
   margin-inline-start: 0px;
    margin-top: 20px;
}

#limiservice article dl.discri-02 dd.atten ul li{
    text-align: left;
    font-size: 1.0rem;
}
    
#limiservice #present  ul.etc{
    padding-top: 0px;
}    
    /*スマホボタン*/
    .inter-b {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 30px auto 0;
    padding: .5em 2em .5em 2em;
    border: none;
    border-radius: 25px;
    background-color: #73BDC4;
    color: #fff;
    font-weight: 500;
    text-align: center;
    line-height: 1.2em;
}

.inter-b::after {
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 2em;
}

.inter-b:hover{
    background-color: #B5E0E2;
    text-decoration: none;
}

#limiservice a, a:link, a:visited .inter-b{
    text-decoration: none;
}
  }

/* View Port サイズに応じたコンテンツ表示/非表示
--------------------------------------------------------------*/
@media screen and (max-width:580px){/**/
/* ===========================================================
 html
=========================================================== */	
#limiservice article{
    display: block;
    min-width: 70px;
    width: 90%;
    /*max-height: 410px;
    background-color: #FFF;
    padding: 30px 25px;
    border-radius: 16px;*/
    margin: 0px auto;
  } 

#limiservice article .icon{
    width: 27%;
    display:block;
    vertical-align: top;
    margin-right: 0%;
    float: none;
    text-align: center;
    margin: 0 auto;
}

#limiservice article .discri{
    width: 100%;
    display: block;
    vertical-align: top;
    float: none;
    text-align: left;
}
#limiservice #mybottle h5{
    color: #80746D;
    font-size: 2.4rem;
    padding: 0px 0 15px;
}
#limiservice #present h5{
    color: #80746D;
    font-size: 2.4rem;
    padding: 15px 0;
    line-height: 1.4em;
}    
 #limiservice #mybottle h6{
    color: #80746D;
    font-size: 1.8rem;
    padding: 15px 0 0;
     line-height: 1.2em;
}   

#limiservice article .inner{
    margin: 15px 0;
} 

#limiservice #present .shop_pic_00{
        position: relative;
}   
    
#limiservice #present .pic-04{
    position: absolute;
    left: -20px;
    bottom: -15px;
    width: 55%;
}    
    
#GiftWrapping .item{
    display: flex;
    margin: 30px auto;
}  
#GiftWrapping .gift-item{
     margin: 0px 5px;
}    
.dotline{
    padding: 20px;
}
/*    
#limiservice article dl.discri-02 p,
#limiservice article dl.discri p{
    color: #80746D;
    font-size:1.6rem;
    line-height: 1.6em;
    white-space: nowrap;
}
#limiservice article dl.discri p .small{
    font-size:1.4rem;
    line-height: 1.2em;
}

#limiservice article dl.discri dt img{
    width: 100%;
}

#limiservice article dl.discri dd.cp{
    width: 100%;
    margin-inline-start: 0px;
    text-align: left;
}


#limiservice article dl.discri dd.bt{
    width: 55%;
    margin-inline-start: 0px;
    text-align: left;
    margin-top: 10px;
}

#limiservice article .pic{
    position: absolute;
    right: -10px;
    bottom: -30px;
    width: 45%;
}


#limiservice article .pic-02{
    position: absolute;
    right: -10px;
    bottom: -75px;
    width: 45%;
}

#limiservice article .pic-03{
    position: absolute;
    right: 15px;
    top: 170px;
    width: 32%;    
}


#limiservice article dl.discri-02 p{
    margin-top: 5px;
}

#limiservice article dl.discri-02{
    width: 100%;
    margin-left: 0px;
}

#limiservice article dl.discri-02 dt{
    font-size:180%;
}

#limiservice article dl.discri-02 dt img{
    width: 100%;
}

#limiservice article dl.discri-02 dt{
    width: 18%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    float: left;
}

#limiservice article dl.discri-02 dd.gacha{
    width: 78%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}


#limiservice article dl.discri-02 dd.cp{
    width: 100%;
    margin-inline-start: 0px;
    text-align: left;
    margin-top: 20px;
}


#limiservice article dl.discri-02 dd.etc{
   margin-inline-start: 0px;
    margin-top: 10px;
}

#limiservice article dl.discri-02 dd.etc ul li{
    text-align: left;
   color: #75BCA0;
}

#limiservice article dl.discri-02 dd.atten{
   margin-inline-start: 0px;
    margin-top: 20px;
}

#limiservice article dl.discri-02 dd.atten ul li{
    text-align: left;
    font-size: 90%;
}
    */
#limiservice #present  ul.etc li{
    font-size: 1.6rem;
}    
    
.inter-b {
width: 80%;
font-size: 1.4rem;
margin: 0px auto 0;
padding: 1.2em 2em 1.2em 2em;
} 
#limiservice #mybottle .bt{
    margin-top: 0px;
}    
}

@media (max-width: 580px) {
/*カウンセリング*/
#counseling .check{
    background-image: url("../img/3f_bg_02.png");
    padding: 50px 10px;
    margin: 60px 0;
    background-size: cover;
    border-radius: 16px;
    height: auto;
}

#counseling .check .discri{
    position: relative;
}
#counseling .check .discri p{
    margin-top: 10px;
    text-align: center;
}

#counseling .check .discri .free_icn{
    position: absolute;
    left:5px;
    top:-25px;
    width: 80px;
}

#counseling .check .atten{
    text-align: left;
    margin-left: 10px;
    font-size: 0.8rem;
}


.heading {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
    display: inline-block;
}
.heading::before {
  background-color: #B3ADA1; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -8px; /* 線の位置 */
  content: "";
  height: 2px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 112px; /* 線の長さ */
}



.icon_free::before {
    position: absolute;
    content: url("../img/3f_counseling_icon_01.png");
    left:-40%;
transform: translate(-50%,0%);
    width: 10%;
    top: -25px;
    
}


#beauty-check{
        /*background-color: #E6F0F6;*/
        padding: 40px 10px 10px 10px;
    } 

#beauty-check .swiper-area {
        position: relative;
        width: 70%;
        margin: 0 auto 10px;
 }

#health-check{
        /*background-color: #E7F5F7;*/
        padding: 10px 10px 20px 10px;
    } 

#health-check .swiper-area {
         position: relative;
        width: 70%;
        margin: 0 auto 10px;
 }
    
.swiper-area img{
        width: 100%;
}

/*スライド→*/    
#health-check .swiper-button-next,    
#health-check .swiper-button-prev,
#beauty-check .swiper-button-next,    
#beauty-check .swiper-button-prev{
width: calc(var(--swiper-navigation-size)/ 20 * 27);
}


#health-check .swiper-button-prev,.swiper-rtl .swiper-button-next,
#beauty-check .swiper-button-prev,.swiper-rtl .swiper-button-next {
    left: -70px;
    right: auto
}

#health-check .swiper-button-next,.swiper-rtl .swiper-button-prev,
#beauty-check .swiper-button-next,.swiper-rtl .swiper-button-prev {
    right: -70px;
    left: auto
}


#health-check .swiper-button-prev::after,
#beauty-check .swiper-button-prev::after {
		content: "";
}


#health-check .swiper-button-next::after, 
#beauty-check .swiper-button-next::after {
		content: "";
} 


#beauty-check .swiper-button-prev {
		background: url("../img/3f_beauty_yaji.png") no-repeat center center / contain;
        z-index: 98;
}

#beauty-check .swiper-button-next {
	background: url("../img/3f_beauty_yaji.png") no-repeat center center / contain;
    transform:rotate(180deg); 
    z-index: 98;
}  
    
#health-check .swiper-button-prev {
		background: url("../img/3f_health_yaji.png") no-repeat center center / contain;
        z-index: 98;
}

#health-check .swiper-button-next {
	background: url("../img/3f_health_yaji.png") no-repeat center center / contain;
    transform:rotate(180deg); 
    z-index: 98;
}  


#health-check .swiper-area .swiper-pagination,
#beauty-check .swiper-area .swiper-pagination {
position: absolute;
bottom: -30px;
    display: none;
}
}

/*ピックアップサービス*/
#pickup-service h5{
    font-size: 2.8rem;
    margin-top: 0px;
    line-height: 1.0em;
    margin-bottom: 20px;
    color: #333333;
}
#pickup-service .leadcp p {
    color:  #004ea2;
    margin-top: 0px;
     font-size: 2.0rem;
}

#pickup-service .container-tag{
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}

#pickup-service .container-tag p{
    font-size: 1.4rem;
}

#pickup-service .container-tag .tag_reservation{
    background-color:  #004ea2;
    color: #FFF;
    border-radius: 6px;
    padding:  0 30px;
}

#pickup-service .container-tag .tag_time{
    background-color:  #ccdcec;
    color: #004ea2;
    border-radius: 6px;
    padding:  0 30px;
}

#pickup-service .container-tag .tag_fee{
    background-color:  #ccdcec;
    color: #004ea2;
border-radius: 6px;
    padding:  0 30px;
}

#pickup-service .inter-b {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 10px auto 0;
    padding: .5em 2em .5em 2em;
    border: none;
    border-radius: 25px;
    background-color: #004ea2;
    color: #fff;
    font-weight: 500;
    text-align: center;
    width: 80%;
    font-size: 1.6rem;
}

#pickup-service .inter-b::after {
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    position: absolute;
    right: 2em;
}

#pickup-service .inter-b:hover{
    background-color: #9db7ce;
    text-decoration: none;
}


#pickup-service  a, a:link, a:visited .inter-b{
    text-decoration: none;
}

#pickup-service .applicp{
    margin-top: 30px;
    text-align: center;
     color: #004ea2;
}

#pickup-service .about_skinpatch{
    margin: 80px 0;
}

#pickup-service .about_skinpatch h6{
    font-size: 1.8rem;
    text-align: center;
    margin-top: 15px;
    color: #004ea2;
}
#pickup-service .about_skinpatch p,
#pickup-service .about_skinpatch h5{
    color: #004ea2;
}

#pickup-service .about_skinpatch p{
    margin-top: 10px;
}

#pickup-service .pickup-skinpatch-container{
    margin: 40px auto;
width:960px; 
display: flex;
 justify-content: space-between;
    gap:40px;
}
.pickup-skinpatch-container .pickup-inner_skinpatch{
    border: solid 2px #004ea2;
    border-radius: 30px;
    padding: 30px;
    width: 50%;
    text-align: left;
    background-color: #FFF;
}

 .pic-r{
    border-radius: 26px;
}

.pickup-service-container{
margin: 0px auto;
width:960px; 
display: flex;
justify-content: flex-start;
text-align: left;
gap: 36px;
}
.pickup-service-container .pic{
    width: 360px;
}






/*ピクアップアイテム*/
#pickup-item .pickup-item-container{
    margin: 40px auto;
width:960px; 
display: flex;
    justify-content: space-between;
    text-align: left;
}
#pickup-item .pickup-item-container .box{
    width: 29%;
}

#pickup-item .pickup-item-container .box .spec{
    text-align: center;
    margin-top: 20px;
}
#pickup-item .pickup-item-container .box .spec p.price{
    margin-top: 0px;
}

#pickup-item .pickup-item-container .box .spec .c-pink{
    color: #ec3292;
}
#pickup-item .pickup-item-container .box ul li{
    text-indent: -1rem;
    padding-left: 1rem;
}

#pickup-item .price-original {
  text-decoration: line-through;
    text-decoration-color: #ec3292;
    text-decoration-thickness: 2px; 
}

#pickup-item .kakomi{
    border: solid 1px #222222;
    padding: 2px 5px;
    font-size: 74%;
}

@media (max-width: 580px) {
    #pickup-item,
    #pickup-service{
        width: 100%;
    }
    #pickup-item .pickup-item-container,
    #pickup-service .pickup-skinpatch-container,
    #pickup-service .pickup-service-container{
        flex-flow: column;
        width: 100%;
    }
    #pickup-service .pickup-service-container .discription{
        width: 100%;
    }
     #pickup-service .pickup-service-container .pic{
        width: 90%;
         margin: 0 auto;
    }
#pickup-service .about_skinpatch{
    margin: 60px 0 0;
}    
    #pickup-service .pickup-skinpatch-container .pickup-inner_skinpatch{
        width: 70%;
        margin: 0 auto;
    }
#pickup-item .pickup-item-container .box{
    width: 80%;
    margin: 20px auto;
    padding-bottom: 40px;
}    

#pickup-service .inter-b {
width: 80%;
font-size: 1.4rem;
margin: 10px auto 0;
padding: 1.2em 2em 1.2em 2em;
}    
    
    
#pickup-item .sp-lf{
        text-align: left;
    }
#pickup-service h5{
    font-size: 2.0rem;
            text-align: center;
}    
#pickup-service .leadcp p {
     font-size: 1.6rem;
            text-align: center;    
}  
    #pickup-service .container-tag{
       justify-content: center;
    }    
#pickup-service .container-tag p{
    font-size: 1.2rem;
}

#pickup-service .container-tag .tag_reservation{
    border-radius: 6px;
    padding:  0 10px;
}

#pickup-service .container-tag .tag_time{
    border-radius: 6px;
    padding:  0 10px;
}

#pickup-service .container-tag .tag_fee{
border-radius: 6px;
    padding:  0 10px;
}    
    #pickup-service .about_skinpatch h5{
        font-size: 2.0rem;
    }
}