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

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

   Wrap

--------------------------------------------------------------------------------------------- */
.wrap{
    width: 100%;
    overflow: hidden;
}

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

   Contents-wrap

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

/* 0-0
-------------------------------------*/
.contents-wrap{
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* 100-100
-------------------------------------*/
.contents-wrap100-100{
    width: 100%;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap100-100{
    padding: 50px 0;
}
}

/* 150-150
-------------------------------------*/
.contents-wrap150-150{
    width: 100%;
    padding: 150px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap150-150{
    padding: 125px 0;
}
}

/* 100-150
-------------------------------------*/
.contents-wrap100-150{
    width: 100%;
    padding: 100px 0 150px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap100-150{
    padding: 50px 0 100px 0;
}
}

/* 100-75
-------------------------------------*/
.contents-wrap100-75{
    width: 100%;
    padding: 100px 0 75px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap100-75{
    padding: 75px 0 50px 0;
}
}

/* 50-75
-------------------------------------*/
.contents-wrap50-75{
    width: 100%;
    padding: 50px 0 75px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap50-75{
    padding: 25px 0 50px 0;
}
}

/* 75-50
-------------------------------------*/
.contents-wrap75-50{
    width: 100%;
    padding: 75px 0 50px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap75-50{
    padding: 50px 0 25px 0;
}
}

/* 100-0
-------------------------------------*/
.contents-wrap100-0{
    width: 100%;
    padding: 100px 0 0 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap100-0{
    padding: 50px 0 0 0;
}
}

/* 150-0
-------------------------------------*/
.contents-wrap150-0{
    width: 100%;
    padding: 150px 0 0 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap150-0{
    padding: 100px 0 0 0;
}
}

/* 75-150
-------------------------------------*/
.contents-wrap75-150{
    width: 100%;
    padding: 75px 0 150px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap75-150{
    padding: 50px 0 125px 0;
}
}

/* 50-150
-------------------------------------*/
.contents-wrap50-150{
    width: 100%;
    padding: 50px 0 150px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap50-150{
    padding: 35px 0 100px 0;
}
}

/* 50-100
-------------------------------------*/
.contents-wrap50-100{
    width: 100%;
    padding: 50px 0 100px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap50-100{
    padding: 35px 0 125px 0;
}
}

/* 75-100
-------------------------------------*/
.contents-wrap75-100{
    width: 100%;
    padding: 75px 0 100px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap75-100{
    padding: 50px 0 75px 0;
}
}

/* 75-0
-------------------------------------*/
.contents-wrap75-0{
    width: 100%;
    padding: 75px 0 0 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap75-0{
    padding: 50px 0 0 0;
}
}

/* 0-150
-------------------------------------*/
.contents-wrap0-150{
    width: 100%;
    padding: 0 0 150px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap0-150{
    padding: 0 0 125px 0;
}
}

/* 0-50
-------------------------------------*/
.contents-wrap0-50{
    width: 100%;
    padding: 0 0 50px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap0-50{
    padding: 0 0 35px 0;
}
}

/* 0-75
-------------------------------------*/
.contents-wrap0-75{
    width: 100%;
    padding: 0 0 75px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap0-75{
    padding: 0 0 50px 0;
}
}

/* 0-100
-------------------------------------*/
.contents-wrap0-100{
    width: 100%;
    padding: 0 0 100px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:700px) {
    
.contents-wrap0-100{
    padding: 0 0 75px 0;
}
}


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

   Contents

--------------------------------------------------------------------------------------------- */
.contents1400{
    width: 1400px;
    margin: 0 auto;
}

@media screen and (max-width:1400px) {
    
.contents1400{
    width: 90%;
}
}
.contents1200{
    width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width:1200px) {
    
.contents1200{
    width: 90%;
}
}
.contents900{
    width: 900px;
    margin: 0 auto;
}
@media screen and (max-width:900px) {
    
.contents900{
    width: 90%;
}
}
.contents700{
    width: 700px;
    margin: 0 auto;
}
@media screen and (max-width:700px) {
    
.contents700{
    width: 90%;
}
}
.contents500{
    width: 500px;
    margin: 0 auto;
}
@media screen and (max-width:500px) {
    
.contents500{
    width: 90%;
}
}
.contents468{
    width: 468px;
    margin: 0 auto;
}
@media screen and (max-width:500px) {
    
.contents468{
    width: 90%;
}
}

.contents100p{/*width100%*/
    width: 100%;
    margin: 0 auto;
}



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

    英文

--------------------------------------------------------------------------------------------- */
.eg-text{
    font-family: 'Poppins', sans-serif;
}


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

   H2

--------------------------------------------------------------------------------------------- */
h2.main-h2{/*日本語*/
    text-align: center;
    font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 36px;
    line-height: 1.75;
    margin: 0 auto 50px auto;
    width: 95%;
    font-weight: 700;
    position: relative;
        z-index: 20;
}

h2.main-h2 span{/*英語*/
    font-family: "Agu Display", serif;
	font-size: 48px;/*60px*/
    font-weight: normal;
    line-height: 1;
}

h2.main-h2 span span{/*feeling*/
    font-family: 'Zen Maru Gothic', sans-serif;
	font-size: clamp(18px, 3vw, 20px);
    font-weight: normal;
}

@media screen and (max-width:900px) {

h2.main-h2{
	font-size: 30px;
}
h2.main-h2 span{
	font-size: 40px;/*48px*/
}
}
@media screen and (max-width:700px) {

h2.main-h2{
	font-size: 24px;
    margin: 0 auto 35px auto;
}
h2.main-h2 span{
	font-size: 36px;/*40px*/
}
}
@media screen and (max-width:500px) {

h2.main-h2{
	font-size: 22px;
}
h2.main-h2 span{
	font-size: 30px;/*36px*/
}
}

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

   Back-Color指定

--------------------------------------------------------------------------------------------- */
.snow-back{
	background: #f8f5f0;
}
.darksnow-back{
	background: #d6c6af;/*#d6c6af*/
}
.orange-back{
    background: #f60;
}
.white-back{
    background: #fff;
}
.yellow-back{
    background: #ffffe0;
}
.special-feature-back{
    background: url("../images/stripeET1gray256.jpg") repeat 0 0;
}


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

   H2 Color指定

--------------------------------------------------------------------------------------------- */
.black-text{
    color: #000;
}
.white-text{
    color: #fff;
}
.yellow-text{
    color: #fc0;
}
.orange-text{
    color: #f60;
}


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

   Pankuzuリスト

--------------------------------------------------------------------------------------------- */
.pankuzu-wrap{
    width: 1200px;
    margin: 35px auto 0 auto;
    position: relative;
    z-index: 10;
}

.pankuzu-wrap span a{
    display: inline-block;
    width: auto;
    padding: 1% 4%;
    border: 1px solid #000;
    border-radius: 25px;
    text-align: center;
    line-height: 1;
	background: #f8f5f0;
	font-size: clamp(12px, 2vw, 16px);
}
.pankuzu-wrap span a:hover{
    background: #f60;
    color: #fff;
}

.pankuzu-wrap .target-link a{
    background: #f60;
    color: #fff;
}

.pankuzu-wrap .fas{
	font-size: clamp(12px, 2vw, 16px);
}

@media screen and (max-width:1200px) {
    
.pankuzu-wrap{
    width: 90%;
}
}
@media screen and (max-width:900px) {
    
.pankuzu-wrap span a{
    padding: 1.5% 2.5%;
}
}
@media screen and (max-width:700px) {
    
.pankuzu-wrap{
    margin: 25px auto 0 auto;
}
}


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

   NextPageリスト

--------------------------------------------------------------------------------------------- */
.wrap20{/*20% 4個（1個70px）*/
    width: 280px;
}
.wrap20 ul li{
    width: 20%;
}
@media screen and (max-width:700px) {
.wrap20{
    width: 210px;
}
}

.wrap25{/*25% 5個（1個70px）*/
    width: 350px;
}
.wrap25 ul li{
    width: 16.6%;
}
@media screen and (max-width:700px) {
.wrap25{
    width: 280px;
}
}

.wrap30{/*30% 6個（1個70px）*/
    width: 420px;
}
.wrap30 ul li{
    width: 14.2%;
}
@media screen and (max-width:700px) {
.wrap30{
    width: 100%;
}
}

.nextPage-wrap{
    margin: 35px auto 0 auto;
    position: relative;
    z-index: 10;
}
.nextPage-wrap ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.nextPage-wrap ul li{
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(20px, 3vw, 24px);
    border: 1px solid #000;
    text-align: center;
    line-height: 1;
	background: #f8f5f0;
    border-radius: 2.5px;
}
.nextPage-wrap ul li a{
    display: block;
    padding: 30%;
}
/*.nextPage-wrap ul li a:hover{
	background: #f60;
    color: #fff;
}*/

.nextPage-wrap ul li.target-link a{
    background: #f60;
    color: #fff;
}
    
    
/* ---------------------------------------------------------------------------------------------

   横にめくれるリンクボタン指定

--------------------------------------------------------------------------------------------- */
/*== ボタン共通設定 */
.btn{
    position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
    outline: none;
    transition: ease .2s;
	/*background: #f60;*//*元の背景色*/
 	width: 100%;
    border-radius: 25px;
}
.btn span{
	position: relative;
	z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    line-height: 1;
}
.btn span.jump{
	color: #000;
}
.btn:hover span.jump{
	color: #fff;
}

/*== 背景色が流れる（左から右） */
.bgleft:before {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
 	background: #f60;/*hover背景色*/
 	width: 100%;
	height: 100%;
 	transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
    border-radius: 25px;
}
.bgleft:hover:before{
	transform-origin: left top;
	transform:scale(1, 1);
    border-radius: 25px;
}



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

   Page-Top

--------------------------------------------------------------------------------------------- */
#Page-Top {
    position: fixed;
    right: -80px;
    bottom: 100px;
	z-index: 500;
}

#Page-Top a{
    display: flex;
    justify-content: center;
    background: #000;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 100%;
	padding: 20px;
}

#Page-Top .fa-chevron-up{
	line-height: 1;
	font-size: clamp(20px, 2vw, 24px);
}
#Page-Top a .fa-chevron-up{
	color: #ffd700;
}

@media screen and (max-width:1000px) {
    
#Page-Top {
    bottom: 55px;
}
}
@media screen and (max-width:700px) {
    
#Page-Top a{
	padding: 17.5px;
}
}


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

   サブページ掲載店舗募集リンクバナー

--------------------------------------------------------------------------------------------- */
#recruitment-bunner img{
    width: 100%;
    height: auto;
}

#recruitment-bunner a:hover img{
    opacity: 0.75;
}


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

   アフェリエイトリンクバナー

--------------------------------------------------------------------------------------------- */
.affiliates a img{
    width: 100%;
    height: auto;
}
.affiliates a:hover img{
    opacity: 0.75;
}


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

   Fadeアニメーション設定

--------------------------------------------------------------------------------------------- */
 .fade{
  opacity: 0;
   transform: translate3d(0, 0, 0);
  transition: all 3s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -70px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-75px, 0, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .right_fade{
  opacity: 0;
   transform: translate3d(75px, 0, 0);
  transition: all 2s ease;
  &.full {
	  
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 75px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

.fade-content .anm_mod.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}