html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
em,
i,
b,
s,
input,
button,
select,
option,
a,
header,
nav,
section,
article,
footer {
	/*font-family: 'Hiragino Kaku Gothic', 'ヒラギノ角ゴ Pro', sans-serif;*/
	font-family: Noto Sans JP, sans-serif;
}

html,
body {
	font-size: 3.5mm;
	color: #666;
	width: 100%;
	height: 100%;
}

body.no-scroll {
	height: 100%;
	overflow: hidden;
}

.kyoto-bg {
	background: #fff !important;
	/*padding-top: 20px;*/
}

.kBank-text {
	/*color: #21A954 !important;*/
	color: #FF8540 !important;
}

.resona-text-my-coupon {
	color: #909090 !important;
	margin-bottom: 0.8rem;
}

body > .container {
	/*padding-top: 80px;*/
	padding: 56px 0 0;
	min-height: 100%;
	background: #F3F7FA;
}

header {
	z-index: 2000;
	position: fixed;
	width: 100%;
	/*height: 80px;*/
	top: 0;
	margin: 0;
	padding: 0;
	font-size: 5mm;
	font-weight: 500;
	text-align: center;
	line-height: 60px;
	height: 56px;
}

header .page-title {
	/*margin: auto;*/
	flex: 1;
	color: #4F4F4F;
	font-size: 15px;
	line-height: 21px;
	font-weight: bold;
	padding: 0 124px;
}

header #title_name{
	/*background: url(../img/header_logo.png) no-repeat center;*/
  /*background-size: 130px;*/
  /*padding: 0px 60px;*/
  /*margin: -5px auto;*/
	/*height: 80px;*/
}

.head_area {
	z-index: 2000;
	display: flex;
	width: 100%;
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	padding-top: 20px;
	padding-top: constant(safe-area-inset-top);/* iOS 11.2未満用 */
  padding-top: env(safe-area-inset-top);/* iOS 11.2以上用 */
	align-items: center;
	height: 56px;
	background: #FFFFFF;
	box-shadow: 0 0 10px #D2E0ED40;
	position: relative;
}
.head_area_left, .head_area_right {
    flex: 0;
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    top: 0;
}
.head_area_left {
    left: 20px;
}
.head_area_right {
    right: 20px;
}
.menu_home{
	/*height: 40px;*/
  /*width: 20%;*/
  /*margin-top: 20px;*/
}
.head_area .menu-icon {
	/*height: 40px;*/
  /*width: 20%;*/
  /*margin-top: 20px;*/
}

.head_area .menu_home,
.head_area .back-icon,
.head_area .coupon-top-icon,
.head_area .menu-icon {
	opacity: 0.8;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.head_area .menu_home {
	opacity: 0.8;
	margin-right: 16px;
}
.head_area .menu_home:after{
	content: "";
	display: block;
	background: url(../img/home.svg) no-repeat center;
	width: 36px;
	height: 36px;
}
.head_area .back-icon {
	opacity: 0.8;
	margin-right: 24px;
}
.head_area .back-icon:after{
	content: "";
	display: block;
	background: url(../img/arrow_left.svg) no-repeat center;
	width: 11px;
	height: 20px;
}
.head_area .coupon-top-icon{
	opacity: 0.8;
	width: 44px;
	height: 36px;
	display: flex;
	border: 1px solid #FF8540;
	border-radius: 8px;
}
.head_area .coupon-top-icon span {
	font-size: 8px;
	font-weight: bold;
	color: #FF8540;
	line-height: 10px;
	padding: 0 3px;
}
.head_area .favorite-icon {
	margin-right: 24px;
}
.head_area .favorite-icon:after {
	content: "";
	display: block;
	background: url(../img/favorite_active.svg) no-repeat center;
	width: 24px;
	height: 23px;
	cursor: pointer;
}
.head_area .menu-icon:after {
	content: "";
	display: block;
	background: url(../img/menu.svg) no-repeat center;
	width: 24px;
	height: 18px;
}
.head_area .back-icon:active {
	opacity: 0.8;
}
#menu-to-home{
	/*background: url(../img/home_icn.svg) no-repeat center;*/
  /*background-size: 30px;*/
}
#menu-to-top1{
	background: url(../img/btn_coupon_top.svg) no-repeat center;
  background-size: 4.5rem;
}
#menu-to-top2{
	background: url(../img/btn_coupon_top.svg) no-repeat center;
  background-size: 4.5rem;
}
#menu-to-history{
	background: url(../img/ic_history.png) no-repeat center;
  background-size: 30px;
}
#menu-to-back{
	background: url(../img/back_arrow.png) no-repeat center;
  background-size: 30px;
}
.head_area .menu-icon i.fas {
	line-height: 40px;
	font-size: 25px;
}

.head_area .menu-icon span {
	line-height: 20px;
	font-size: 10px;
}

#go-back-form {
	display: none;
}

footer {
	z-index: 2000;
	display: flex;
	position: fixed;
	width: 100%;
	bottom: 0;
	margin: 0;
	padding: 10px 20px 20px;
	background: white;
	font-size: 3mm;
	font-weight: 500;
	text-align: center;
}

span.go-back{
	position: relative;
  display: inline-block;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
}

span.go-back::before{
	content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: solid 2px black;
  border-left: solid 2px black;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 30%;
  left: 0;
}

#menu-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: visibility 400ms ease;
}

#menu-container.active {
    visibility: visible;
}

#menu-container .backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    content: "";
    display: block;
}

ul#menu-content {
    margin: 0;
    width: 300px;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    grid-gap: 0;
    user-select: none;
    right: -300px;
    transition: right 400ms ease;
}

#menu-container.active ul#menu-content {
    right: 0;
}

ul#menu-content li {
    list-style: none;
    height: 54px;
    position: relative;
    display: flex;
    align-items: center;
}

ul#menu-content li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4F4F4F;
    font-size: 15px;
    font-weight: bold;
    line-height: 21px;
}

ul#menu-content li:not(.menu-head) {
    box-sizing: content-box;
    border-bottom: 1px solid #CCCCCC;
}

ul#menu-content li:not(.menu-head):hover {
    cursor: pointer;
}

ul#menu-content li:not(.menu-head):after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: right;
}

ul#menu-content li.menu-head {
    height: 56px;
    background: transparent linear-gradient(90deg, #FF9040 0%, #FFA740 100%);
}

ul#menu-content li.menu-head a {
    color: #FFFFFF;
    font-size: 16px;
    cursor: default;
}

ul#menu-content li.menu-head .menu-close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: right;
}

ul#menu-content li.menu-head .menu-close:after {
    background: url(/img/close.svg) no-repeat right;
    width: 18px;
    height: 18px;
    content: "";
    display: block;
}

ul#menu-content li.menu-external:after {
    background-image: url(/img/link.svg);
    width: 16px;
    height: 16px;
}

ul#menu-content li.menu-internal:after {
    background-image: url(/img/arrow_right.svg);
    width: 8px;
    height: 14px;
}

.pseudo-link {
	display: inline-block;
	position: relative;
}

.pseudo-link input {
	display: inline;
	position: relative;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	text-align: left;
}

#main_les{
	/*background: #F5F0E8;*/
	/*padding-bottom: 50px;*/
	padding: 24px 20px 40px;
}

#main {
	width: 100%;
    padding: 10px;
}

.modalContainer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 2001;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    visibility: hidden;
}

.modalContainer.active {
    visibility: visible;
}

.modalContainer .backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
}

.modalContainer .alertBox {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 24px 26px 32px;
    z-index: 2002;
    opacity: 0;
}

.modalContainer.active .alertBox {
    transition: opacity 400ms ease;
    opacity: 1;
}

.modalContainer .alertBox h2{
    font-weight: bold;
    text-align: center;
    margin: 0 auto 16px;
    font-size: 18px;
    line-height: 24px;
    color: #4F4F4F;
    width: 60%;
}

.modalContainer .alertBox .info{
    font-size: 14px;
    line-height: 24px;
    margin: 0;
    color: #4F4F4F;
}

#modal-confirm-external .alertBox .info {
    line-height: 20px;
}

.modalContainer .alertBox .info.important{
    color: #FF0000;
}

.modalContainer .alertBox .info.center {
    text-align: center;
}

.modalContainer .buttons{
    display: flex;
    column-gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

.modalContainer .alertBox .submitBtn, .modalContainer .submitBtn_del  {
    border-radius: 8px;
    text-decoration: none;
    outline: 0 !important;
    font-size: 15px;
    line-height: 21px;
    background: transparent linear-gradient(90deg, #FF9040 0%, #FFA740 100%);
    box-shadow: 0 2px 1px #746D4829;;
    color: #FFFFFF;
    font-weight: 500;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1 1 50%;
    max-width: 50%;
}
.modalContainer .alertBox .closeBtn, .modalContainer .closeBtn_del{
    border-radius: 8px;
    text-decoration: none;
    outline: 0 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: #A5A5A5;
    background-color: #EEF0F2;
    box-shadow: 0 2px 1px #746D4829;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1 1 50%;
    max-width: 50%;
}

.modalContainer .alertBox .appstoreBtn{
    margin: -64px 32px -32px 0;
    content: "";
    display: block;
    background: url(/img/download-app-store.svg) no-repeat center;
    width: 120px;
    height: 100px;
}

.modalContainer .alertBox .androidBtn{
    margin: -64px 32px -32px 0;
    content: "";
    display: block;
    background: url(/img/download-google-play.svg) no-repeat center;
    width: 120px;
    height: 100px;
}

.modalContainer .alertBox .circle-arrow-right {
    content: "";
    display: block;
    background: url(/img/circle_arrow_right.svg) no-repeat center;
    width: 40px;
    height: 40px;
}

/* modal-confirm-app styles */
#modal-confirm-app .modal-app-heading {
    font-weight: bold;
    text-align: left;
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 24px;
    color: #E25B00;
    width: 100%;
}

#modal-confirm-app .modal-app-body {
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    color: #4F4F4F;
    text-align: left;
}

#modal-confirm-app .text-blue {
    color: #007AFF;
}

#modal-confirm-app .modal-app-buttons {
    margin-top: 20px;
}

.coupon_ttl{
	/*padding:0 10px;*/
}
.coupon-full-width {
	display: flex;
	width: 100%;
	height: 30mm;
	margin: 0 0 3mm 0;
	padding: 2mm;
	box-shadow: 0.5mm 1.5mm 1.5mm rgba(0, 0, 0, .2);
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}

.coupon-full-width .coupon-image {
	width: 34%;
	height: 100%;
	background: #666 scroll no-repeat center center;
	background-size: cover;
}

.coupon-full-width .coupon-text {
	position: relative;
	width: 66%;
	height: 100%;
	padding: 0 2.5mm;
}

.coupon-btn {
  width: 10%;
  text-align:center;
  background-color:#888;
  color: #ffffff;
}

.coupon-full-width .coupon-text .coupon-period {
	position: absolute;
	bottom: 0;
	left: 2.5mm;
}

/* .favorite {
	color: #999;
} */

.favorite-active {
	color: #ffbe3d;
}
.my_coupon_ttl{
	background: url(../img/arrow_right.png) no-repeat right 20px bottom 5px;
    background-size: 18px;
    padding: 10px 10px 0;
}
.pdt20{
	padding-top: 20px;
}

.font-bold-400 {
    font-weight: 400;
}

.font-bold-600 {
    font-weight: 600;
}
.color-dark-gray {
    color: #4F4F4F;
}

.ellipsis-single-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-double-line{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-min-height{
    min-height: 75px;
}

.pr-18 {
    padding-right: 18px;
}
@media screen and (min-width: 501px) {
	body {
		background-color: #ccc;
	}

	.container {
		max-width: 500px;
		margin: 0 auto;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		min-height: 100vh;
		background: #F3F7FA;
	}

	header,
	footer {
		max-width: 500px;
		left: 50% !important;
		transform: translateX(-50%);
	}

	.modalContainer {
		max-width: none !important;
		left: 0 !important;
		transform: none;
		align-items: center;
	}

	.modalContainer .alertBox {
		max-width: 468px; /* 500px - 32px padding */
		width: 100%;
	}

    .modalContainer .alertBox .contact-comment {
        padding: 24px 0 0 0;
    }

	.modalContainer .alertBox .appstoreBtn,
	.modalContainer .alertBox .androidBtn {
		margin: 0 0 0 10px; /* Reset aggressive negative margins for PC */
	}

	.modalContainer .buttons {
		justify-content: center !important;
		margin-top: -12px;
	}

	#menu-container {
		max-width: 500px !important;
		left: 50% !important;
		transform: translateX(-50%);
	}

	#menu-content {
		/* Adjust if needed, but it's usually inside menu-container */
	}

	.head_area {
		max-width: 500px;
		margin: 0 auto;
	}
}