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


/* -------------------------------
 Default Styling
------------------------------- */

*, *::before, *::after {
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	background: #fff;
	color: #333;
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 100%;
}

body, ul, li, dl, dt, dd, h1, h2, h3, h4, p, span, div, figure, select, button{
	margin:0;
	padding:0;
}


select{
	background: #fff;
	color: #333;
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 100%;
}


ul{
	list-style: none;
}
/*line-height*/
p{
	line-height: 1.4;
}
/*img*/
img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

/* -------------------------------
 Reusable Classes
------------------------------- */
.wrapper{
	min-height: 100vh;
	position: relative;
    padding-bottom: 80px;/*←footerの高さ*/
}
.header_inner{
    height: 36px;
	display: flex;
	align-items: center;
	padding: 0 0 0 2vw;
	max-width: 1280px;
	margin: 0 auto;	
}

.nextLogo{
	width: 100%;
	max-width: 140px;
}
a.back_KobeNextTop{
	font-size: 0.875rem;/*14px*/
}
a.back_KobeNextTop:hover{
	opacity: 0.8;		
	}	

.container{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 4vw 0 4vw;
}

.coupon_border{
	border: #211A75 2px solid;
	box-shadow: rgba(33, 26, 90, 0.24) 2px 3px 8px;/*#5*/
}	

/*リストページから詳細ページへリンク「クーポンGET」ボタン、
詳細ページからリストページへリンク「使っ得クーポンTOPへ戻る」ボタンの共通設定*/
.coupon_link_btn{
	display: block;
	text-align: center;
	padding: 6px 15px;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s ease;
}

.icon_svg{
	width: 12px;
	margin-right: 4px;
}

/*「クーポンGET」ボタン*/
.coupon_get_btn{
	color: #333;
	background: #FBE736;
}

/*ボタンのhoverアニメーション(拡大)*/
.coupon_link_btn:hover{
  transform: scale(1.02);
}

/*ボタンのhoverアニメーション(文字ウェーブ)*/
@keyframes wave {
  100% {
    transform: translate3d(0, -3px, 0);
  }
}

.wave span {
  display: inline-block;
}

.wave:hover span {
  animation-name: wave;
  animation-duration: .2s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

.wave:hover span:nth-child(2) {
  animation-delay: .1s;
}

.wave:hover span:nth-child(3n) {
  animation-delay: .2s;
}

.wave:hover span:nth-child(3n+1) {
  animation-delay: .3s;
}

.wave:hover span:nth-child(3n+2) {
  animation-delay: .4s;
}

/*フッター*/

footer{
    width: 100%;
    text-align: center;
    padding: 30px 0;
 	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/*TOPへ戻るボタン*/
#page_top {
  z-index: 1;
  position: fixed;
  width: 50px;
  height: 50px;
  right: 10px;
  bottom: 10px;
}

#page_top a {
  border-radius: 4px;
  background: rgba(52,113,214,0.8);
  position: fixed;
  width: 50px;
  height: 50px;	
  right: 10px;
  bottom: 10px;
  box-shadow: rgba(33, 26, 90, 0.24) 0px 3px 8px;/*#5*/
}


#page_top a:hover {
  opacity: 0.8;
  transition: opacity .5s;
}
#page_top a img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  width: 32px;
  height: 32px;
}

/*汎用*/

.mb_common{
	margin-bottom: 16px;
}


.pc{
	display: none;
}

/* -------------------------------
 クーポンリストページ
------------------------------- */

/* ----------キービジュアル---------- */
.keyVisual{
	width: 100%;
    max-width:320px;/*2024.6.21*/
    margin: 0 auto 1rem;/*2024.6.21*/
	position: relative;
	overflow: hidden;
}
.KeyVisual_parts{
	width: 100%;
	max-width: 50px;
	position: absolute;
}

@media screen and (min-width:321px){
.KeyVisual_parts{
	max-width: 60px;
}
}

/* ----------キービジュアル動き---------- */

/* 左から */
.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-30px);
  }

  to {
    opacity: 1;
	transform: translateX(0) rotate(-15deg);
  }
}
/* 右から */
.fadeRight28{
animation-name:fadeRight28Anime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRight28Anime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0) rotate(28deg);
  }
}
.fadeRight-55{
animation-name:fadeRight-55Anime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRight-55Anime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0) rotate(-55deg);
  }
}
.fadeRight-25{
animation-name:fadeRight-25Anime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRight-25Anime{
  from {
    opacity: 0;
	transform: translateX(50px);
  }

  to {
    opacity: 1;
	transform: translateX(0) rotate(-25deg);
  }
}

.fadeRight14{
animation-name:fadeRight14Anime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRight14Anime{
  from {
    opacity: 0;
	transform: translateX(20px);
  }

  to {
    opacity: 1;
	transform: translateX(0) rotate(14deg);
  }
}

.KeyVisual_parts:nth-of-type(1){
	top: 5%;
	left: 0;
}
.KeyVisual_parts:nth-of-type(2){
	bottom: 8%;
	left: 0;
}
.KeyVisual_parts:nth-of-type(3){
	top: 30%;
	left: 18%;
}
.KeyVisual_parts:nth-of-type(4){
	top: 16%;
	left: 45%;
}
.KeyVisual_parts:nth-of-type(5){
	top: 4%;
	right: 0;
}

.delay-time03{
animation-delay: 0.3s;
}
.delay-time06{
animation-delay: 0.6s;
}
.delay-time09{
animation-delay: 0.9s;
}
.delay-time12{
animation-delay: 1.2s;
}

/* ----------クーポンリスト---------- */
.coupon_list{
	margin-bottom: 36px;
	display: grid;/*リスト全体、縦の中央揃え*/
	justify-items: center;
}

.coupon_list_gridlayout{
	display: grid;/*カードの幅、列数の調整*/
	grid-template-columns: 1fr;
	grid-gap: 16px;
}
.coupon_listItem{
    position: relative;
}
/*リストページのNEWタグ、Pick Upタグ*/
.coupon_listItem.new:before,.coupon_listItem.pickup:before{
    position: absolute;
    bottom: -2px;
    left: -2px;
    content: "";
    display: block;
    width: clamp(45px,15.8%,64px);
    aspect-ratio:1;
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}
    @media screen and (min-width:1000px){
        .coupon_listItem.new:before,.coupon_listItem.pickup:before{
            width: clamp(58px,15.8%,64px);
        }
    }

.coupon_listItem.new:after,.coupon_listItem.pickup:after{
    position: absolute;
    transform: rotate(45deg);
    display: block;
    color: #fff;
    font-weight: bold;
}
/*NEWタグ*/
.coupon_listItem.new:before{
    background: #FF3240;
}
.coupon_listItem.new:after{
    bottom: 7px;/*0.416em;*//*5-10*/
    left: 2px;/*0.166em;*//*2-7*/
    content: "NEW";
    font-size: clamp(12px,3.81vw,16px);
}                       
/*Pick Upタグ*/
.coupon_listItem.pickup:before{
    background: #E3B12B;
}
.coupon_listItem.pickup:after{
    bottom: -1px;
    left: -1px;
    content: "PICK\AUP";/*スペース入れる場合は「\00a0」を挿入*/
    text-align: center;
    white-space: pre-wrap;
    line-height: 1.0;
    font-size: clamp(12px,3.81vw,15px);/*clamp(12px,90%,16px)*/
}


.coupon_listItem_header_flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.coupon_area_tag{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 6px;
	background: #211A75;
	font-size: 0.8125rem;/*13px*/
	font-weight: 600;
	color: #fff;
}
.coupon_genre_tag{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 6px;
	padding: 1px 7px;
	background: none;/*反転ならFF3240*/
	border: 1px solid #FF3240;
	font-size: 0.625rem;/*10px*/
	font-weight: 600;
	color: #FF3240;/*反転なら#fff*/
	border-radius: 9999px;
}



.coupon_listItem_main{
	padding: 8px 16px 16px;
}

.coupon_copy_short{
	margin-bottom: 0.5rem;
	font-size: 1rem;/*16px*/
	line-height: 1.2;
	font-weight: 800;
	color: #211A75;
	height: 3.625rem;/*58px*/
}

/*クーポンリストのキャッチコピーと店舗名、長い場合の処理*/
.ellipsis{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.simplebar-track.simplebar-vertical {
  max-width: 6px;
  background: pink;/*#B5B5B5*/
  border-radius: 4px;
}
.simplebar-scrollbar {
  width: 6px;
  background: yellow;
  border-radius: 4px;
  top: 0;
}



.coupon_listItem_main_inner_wrap{
	display: flex;
	justify-content: space-between;
	gap:16px;
}

.coupon_listItem_main_inner_left{
	width:100%;
	max-width: 100px;
	max-height: 100px;
	overflow: hidden;
}
.thumbNail_coupon_photo{
	width: 100px;
	height: 100px;
	/*object-fit: cover;*/
    object-fit: contain;
    background: #eee;
}

.coupon_listItem_main_inner_right{
	width: 100%;
	max-width: calc(100% - (100px + 16px));
	min-height: 6.25rem;/*100px*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon_listItem_main_inner_right_contents .coupon_facilityName{
	min-height: 1.375rem;/*22px*/
	line-height: 1;
	font-size: 0.875rem;/*14px*/
	font-weight: 700;
	color: #5e5d5d;
  /* ブラウザがサポートしていない場合のフェールセーフ */
	max-height: 3rem;/*48px*/
}
.coupon_period{
	display: flex;
	font-size: 0.75rem;/*12px*/
	font-weight: 700;
	color: #FF3240;
}

.coupon_link_wrap{
	text-align: center;
}
.coupon_footer_inner{
	text-align: center;
}


/* -------------------------------
 クーポン詳細ページ
------------------------------- */
.coupon_detail_main{
	padding: 16px 0;
}

.coupon_copy{
	font-size: 1.375rem;/*22px*/
	font-weight: 700;
	color: #211A75;
}

.photo_wrap{
	width:100%;
	text-align: center;
}

.detail_coupon_photo{
	max-width: 400px;
    max-height: 400px;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/*object-fit: cover;*/
    object-fit: contain;
    background: #eee;
}

.coupon_detail_wrap.coupon_border{
	border: none;
	box-shadow: none;
}	

.coupon_howToUse{
	width: 100%;
	height: 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #211A75;
	font-size: 1.125rem;/*18px*/
	color: #fff;
}
.coupon_detail_tags{
	margin-bottom: 8px;
	display: flex;
	gap:16px;
	align-items: center;
}

.coupon_detail_tags .coupon_area_tag{
    padding: 0;
    background: none;
	font-size: 0.75rem;
	color: #211A75;
}
.coupon_new_tag,.coupon_pickup_tag{
    display: none;/*デフォルトは非表示*/
    text-align: center;
    color: #fff;
    min-width: 6em;
    margin-bottom: 1.25rem;
    padding: 0 0.5em;
    font-size: 0.75rem;
    font-weight: bold;
}

.coupon_new_tag.display{
    display: inline-block;
    background: #FF3240;
}
.coupon_pickup_tag.display{
    display: inline-block;
    background: #E3B12B;
}

.coupon_detail_main .coupon_facilityName{
	margin-bottom: 8px;
	font-size: 1.25rem;/*20px*/
	font-weight: 600;
}
.coupon_detail_inner_flex{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.detail_inner_primary{
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.detail_inner_primary .coupon_description{
	text-align: justify;
    word-break: break-all;
	font-size: 0.875rem;/*14px*/
	line-height: 1.6;
}

/*「クーポン内容」リボン付きカード風レイアウト*/
.coupon_detail_card{
	position: relative;
	width: 100%;
	padding: 1rem;
	background: rgba(251, 231, 54, 0.4);
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 2px 2px 5px 0px rgba(84, 27, 27, 0.25);
	overflow: hidden;
}

.coupon_detail_card::before,.coupon_detail_card::after{
	content: "";
	position: absolute;
	width: 50px;
	height: 8px;
	transform: rotate(-45deg);
	border-bottom: #ff3240 10px solid;
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
}
.coupon_detail_card::before{
	left: -12px;
	top: 8px;
}

.coupon_detail_card::after{
	right: -12px;
	bottom: 8px;	
}


.coupon_discount_detail dt,.coupon_discount_detail dd{
	line-height: 1.6;
}
.coupon_discount_detail > dt{
	display: block;
	font-size: 1rem;
	margin-bottom: 8px;
	border-bottom: 2px dashed #333;
}
.coupon_discount_detail > dd{
	color: #211A75;
	margin-bottom: 8px;
}
/*テーブル風リスト*/
.coupon_detail_list dl{
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 1px solid #ccc;
	font-size: 0.8125rem;/*13px*/
}
.coupon_detail_list dl dt{
	display: grid;
	place-items:center;
	background: #D8EDF8;
	padding: 8px;
	width: 5rem;
	font-weight: 700;
	color: #5e5d5d;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	min-height: 3rem;
}
.coupon_detail_list dl dd{
	display: grid;
	align-items: center;
	background: #fff;
	padding: 8px 16px;
	width: calc(100% - 5rem);
	border-bottom: 1px solid #ccc;
	min-height: 3rem;
    word-break: break-all;/*2024.6.21 追加*/
}
.coupon_detail_list dl dt:last-of-type,.coupon_detail_list dl dd:last-of-type{
	border-bottom: none;
}


/*使っ得クーポンTOPへ戻るボタン*/
.coupon_detail_btn{
	width: 92%;
	max-width: 360px;
	margin: 0 auto 16px;
	color: #fff;
	background: #211A75;
}