/*=============================================
 * <section>
 *=============================================*/

section {
}

.pc_view{
	display:none;
}
.sp_view{
	display:block;
}


@media screen and (min-width: 769px) {
    #contents{
            margin-top: -137px;
    }
.pc_view{
	display:block;
}
.sp_view{
	display:none;
}
}

#contents h2{
    font-size: 31px;
}



#lead .txt{
    padding: 40px 25px;
    text-align: center;
}
@media (max-width: 768px){
    .container{
                padding: 0 0 !important;
    }
    #contents {
        padding: 0;
    }
    #side{
        margin-left: 10px;
        margin-right: 10px;
                width: calc(100% - 20px);
    }
#lead .txt{
            padding: 4% 18px;
        text-align: justify;
}
    #lead .txt br{
        display: none;
    }
    #sec2 .sec2-1 .txt, #sec2 .sec2-2 .txt, #sec2 .sec2-3 .txt{
        padding-left: 10px;
        padding-right: 10px;
    }
}

#top_slide .bx-wrapper .bx-viewport{
    -moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border:  none;
	left: 0;
	background: #fff;
}

#top_slide .bx-wrapper .bx-pager.bx-default-pager a {
	background: #fff;
    border: 1px solid #e60012;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#top_slide .bx-wrapper .bx-pager.bx-default-pager a:hover,
#top_slide .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #e60012;
}

#top_slide {
    padding-bottom: 70px;
}

@media (max-width: 768px){
 #top_slide {
    padding-bottom: 7%;
}
}



/*=============================================
 * sec2
 *=============================================*/

#sec2{
	width: auto;
	
    padding: 2vw 0;
	position:relative;
}
#sec2 h3{
	text-align: center;
	font-size: 7.5vw;
	margin: 0 auto 1em;
	line-height: 1.2em;
	color:#183d6a;
	letter-spacing: 0.1em;
	
	font-weight: 500;
}

#sec2 h3 span{
	display: block;
	font-size: 4vw;
    letter-spacing: 0.2em;
}

#sec2 h4{
    font-size: 6vw;
    font-weight: 100;
    margin: 4vw auto;
    text-align: center;
    letter-spacing: 0.1em;
}

#sec2 .p-link + .p-link{
        margin-top: -20px;
}
#sec2 .p-link a{
	    font-size: 16px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    display: block;
    padding: 3vw 0;
    position: relative;
    margin: auto;
    color: #fff;
    border-radius: 200px;
}

#sec2 .p-link a:after{
 display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#sec2  .p-link a{
    background: url("https://img21.shop-pro.jp/PA01521/549/etc_base64/YnRuX2Jn.jpg?cmsp_timestamp=20260416111601") repeat !important;
    }
#sec2 .p-link:hover{
	opacity:0.8;
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
}

#sec2 .sec2-1 .txt,#sec2 .sec2-2 .txt,#sec2 .sec2-3 .txt{
	margin-top:3vw;
}

#sec2 .txt{
    padding: 10px 0;
}

#sec2  .txt p{
	text-align:justify;
	font-size: 3.6vw;
	line-height: 2em;
	margin-bottom: 1.3em;
}
#sec2 .sec2-1{
    background: url(https://img21.shop-pro.jp/PA01521/549/etc_base64/Ymcy.jpg?cmsp_timestamp=20260416102230) repeat;
}
#sec2 .sec2-1:nth-of-type(even) {
    background: #fff;
  }
  #sec2 .last_btn{
      display: flex;
      justify-content: center;
      margin-top: 50px;
  }
  
  #sec2 .last_btn .p-link{
      width: 400px;
  }
  @media screen and (max-width: 769px) {
    #sec2 .last_btn{
        margin-top: 10vw;
    }
      #sec2 .sec2-1{
          padding-bottom: 3vw;
        }
        #sec2 .last_btn .p-link{
            width: 96% !important;
        }
}

@media screen and (min-width: 769px) {
#sec2 .sec2-1{
    margin: 30px 0 0 0;
    padding: 10px;
    height: 440px;
    align-items: center;
}
}




@media (max-width: 768px){
#sec2 .p-link {        
      margin-bottom: 0 !important;
    padding-bottom: 6vw;
}
#sec2 .p-link + .p-link{
        margin-top: -3vw;
}
/* #sec2  .sec2-1 {
	    border-top: solid #77b45b 8px;
    }
    #sec2  .sec2-2 {
	    border-top: solid #221715 8px;
    }
    #sec2  .sec2-3 {
	    border-top: solid #da2227 8px;
    } */
}

 /*--------------------
PC
---------------------------------*/
@media screen and (min-width: 769px) {
	#sec2{
    padding: 0 0 80px;
}
#sec2 h3{font-size: 35px;}
#sec2 h3 span{font-size: 20px;}
#sec2 h4{
        margin: 10px auto 40px auto;
        font-size: 24px;
        font-weight: 200;
    }
    #sec2  .txt p{font-size: 14px;}

#sec2 .p-link {        
    margin-bottom: 31px !important;
}

#sec2 .p-link a{
	        font-size: 17px;
        padding: 12px 0;
}
	
#sec2  .sec2-1 ,#sec2  .sec2-2 ,#sec2  .sec2-3 {
	position:relative;
    display: flex;
    justify-content: space-between;
}
/* #sec2  .sec2-1 {
	    border-bottom: solid #77b45b 13px;
    }
    #sec2  .sec2-2 {
	    border-bottom: solid #221715 13px;
    }
    #sec2  .sec2-3 {
	    border-bottom: solid #da2227 13px;
    } */
#sec2  .sec2-2{
flex-flow: row-reverse;
}

#sec2  .sec2-1 .img1,#sec2  .sec2-2 .img1,#sec2  .sec2-3 .img1{
    width: 61%;
    height: 437px;
}
    #sec2  .sec2-1 .img1 img , #sec2  .sec2-3 .img1 img{
        object-fit: cover;
    height: 100%;
}
#sec2  .sec2-1 .txt,#sec2  .sec2-2 .txt,#sec2  .sec2-3 .txt{
    width: 33%;
    height: 100%;
    margin: auto 3%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
}




#top_recommend{
    position: relative;
    padding: 40px 0;
}
@media (max-width: 768px){
#top_recommend{
    padding: 4% 0;
}
}




#contents h2{
	border:none !important;
	text-align: center;
    margin-bottom: 0.4em;
	width:100%;
}

@media (max-width: 768px){
.recommend-unit{
	width:49%;
	padding:1%;
	margin:0 auto;
}
.seller-unit{
	width:49%;
	padding:1%;
	margin:0 auto;
}
    #sec2  .sec2-2 .img1{
        height: 52vw;
    }

}

/*li.recommend-unit,li.seller-unit{
	max-width:320px;
}*/


body {
  counter-reset: number 0;           /* number のカウンタを 0 にセット */
}

li.top_ranking{
	position: relative;
}
li.top_ranking a.top_ranking_a:before {
    counter-increment: number 1;
    content: counter(number) " ";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    background: #fff;
    padding: 5px 20px 10px 10px;
    border-radius: 0 0 10em;
    font-size: 22px;
	box-shadow: 4px 4px 7px rgba(0,0,0,0.2);
}






    /* スライダーの枠組み */
    .slider2{
          position: absolute;
    right: 0;
    top: 0;
    width: 61%;
    height: 100%;
    }

    /* スライダー内の画像の設定 */
.slider2 img {
      position: absolute; /* 画像を同じ場所に重ねる */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* 枠に合わせて画像をトリミング */
      opacity: 0; /* デフォルトは透明（見えない状態）にしておく */
      
      /* アニメーションの設定: 名前(fade) 時間(8s) 繰り返し(infinite) */
      animation: fade 8s infinite;
    }

    /* 1枚目の画像はそのままスタート */
    .slider2 img:nth-child(1) {
      animation-delay: 0s;
    }

    /* 2枚目の画像は4秒ずらしてスタート（マイナスを指定して最初から同期させる） */
    .slider2 img:nth-child(2) {
      animation-delay: -4s;
    }

    /* アニメーションの動き（8秒間の中での変化） */
    @keyframes fade {
      0% { opacity: 1; }      /* 0秒: 表示 */
      37.5% { opacity: 1; }   /* 3秒: ここまで表示をキープ (3秒 ÷ 8秒 = 37.5%) */
      50% { opacity: 0; }     /* 4秒: 1秒かけて透明になる (4秒 ÷ 8秒 = 50%) */
      87.5% { opacity: 0; }   /* 7秒: ここまで透明をキープ (7秒 ÷ 8秒 = 87.5%) */
      100% { opacity: 1; }    /* 8秒: 1秒かけて再び表示される */
    }

@media (max-width: 768px){
    .slider2{
    width: 100%;
    height: 52vw;
    }
}

@media (min-width: 768px){
#sec1 .img1{
    width: 1080px;
    height: 600px;
}
}

@media (max-width: 768px){
    #sec2 h3{
        width: 70%;
    }
}
@media (max-width: 768px){
    #contents h2{
        font-size: 7vw;
        margin-bottom: 15vw !important;
}
#contents h2 span{
    font-size: 2vw;
}
}

#contents h2{
    position: relative;
    letter-spacing: 0.2em;
    margin-bottom: 55px;
}
#contents h2 span{
    color: #8d7a6a;
    font-size: 17px;
    font-family: "Old Standard TT";
    letter-spacing: 0.1em;
}
#contents h2::after{
    content: "";
    display: block;
    width: 10%;
    height: 1px;
    background: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -25px;
    opacity: 0.4;
}

#sec2 h4{
    position: relative;
}

#sec2 h4::after{
    content: "";
    display: block;
    width: 273px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
    opacity: 0.4;
}

@media (max-width: 768px){
    #sec2 h4{
        margin-bottom: 10vw;
    }
    #sec2 h4::after{
        width: 90%;
        bottom: -5vw;
    }
}