@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/*----------------------------------------------
 reset styles
----------------------------------------------*/
main { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; display:block; } 

/*----------------------------------------------
 formatting styles
----------------------------------------------*/
:root {
	--green: #8ACE36;
	--orange: #FFAA00;
	--red: #E73828;
	--gray: #F3F3F3;
	--gray2: #9A9A9A;
	--blue: #0084CF;
	--baseCol: #2D2D2D;
}
html { font-size: 62.5%; } 
body {
  font-family: "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.5em;
	font-weight: bold;
	color: var(--baseCol);
	background-color: var(--gray);
	height: 100%;
  overflow: auto;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body main {
	padding-top: 50px;
	padding-bottom: 60px;
}
body .container {
	width: 100%;
	max-width: 767px;
	margin: auto;
	position: relative;
	height: 100%;
}
body .modalNoScrol {
  width: 100%; 
  height: 100%;
  overflow: hidden;
  position: fixed;
}
body .modalNoScrol::after {
	content: "";
	display: block;
	position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
	z-index: 200;
}

a {
  color: inherit;
  transition-duration: 0.3s;
	text-decoration: none;
}
ul {
  list-style: none;
}
em {
  font-style: normal;
  font-weight: bold;
}
img, svg {
  border-style: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.fxd {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.hidden {
  display: none !important;
}

.colRed {
	color: var(--red);
}
.colGreen {
	color: var(--green);
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.textSty {
	font-weight: normal;
	line-height: 1.6;
	margin: 10px 20px 40px;
}
.textSty2 {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	padding: 40px 20px;
}

/*----------------------------------------------
 clearfix
----------------------------------------------*/
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

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

/* ----------------------------------------------
header styles
----------------------------------------------*/
header {
	background-color: var(--green);
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
header .line {
  position: absolute;
  width: 20px;  /* 幅 */
  height: 30px; /* 総高さ (3本の線の間隔も考慮) */
	left: 20px;
	top: 16px;
	cursor: pointer;
}
header .line span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 0;
	border-radius: 1px;
}
header .line span::before,
header .line span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;  /* 線の太さ */
	background-color: #fff;
	border-radius: 1px;
}
header .line span::before {
  top: 8px;  /* 一番上の線 */
}
header .line span::after {
  top: 16px;  /* 一番下の線 */
}

header .logo1 {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
header .logo1 img {
	height: 36px;
	width: auto;
}
header .logo2 {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: #fff url("../img/logo-icon.svg") no-repeat 50% 50%;
	background-size: auto 22px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
header .logo2.on {
	background: var(--green) url("../img/logo-icon-w.svg") no-repeat 50% 50%;
	background-size: auto 22px;
}

/* ----------------------------------------------
nav styles
----------------------------------------------*/
nav {
	background-color: #fff;
	z-index: 500;
	position: fixed;
	width: 100%;
	height: 100%; /* 画面いっぱいの高さ */
  overflow-y: auto; /* 縦スクロールを許可 */
	top: 0;
	left: 0;
	font-weight: normal;
	display: none;
	padding-top: 50px;
}
nav.open {
	display: block;
}
nav .navHd {
	width: 100%;
	height: 50px;
	background-color: var(--gray);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 600;
}
nav .navHd .close {
	position: absolute;
	top: 12px;
	right: 10px;
}
.close {
	width: 26px;
	height: 26px;
	cursor: pointer;
	position: absolute;
	right: 20px;
	z-index: 90;
}
.close::before,
.close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--green);
	transform: translateY(-50%) rotate(45deg);
}
.close::after {
	transform: translateY(-50%) rotate(-45deg);
}
nav .navBd p a {
	display: flex;
	width: 100%;
	align-items: center;
	height: 55px;
	padding: 0 30px 0 20px;
	border-bottom: 1px solid var(--gray);
	position: relative;
}
nav .navBd p a::after {
	content: '';
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 20px;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 1px solid var(--gray2);
  border-right: 1px solid var(--gray2);
  transform: rotate(45deg);
}
nav .navBd p a span.icon {
	width: 25px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}
nav .navBd p a em {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background-color: var(--red);
	font-size: 1.1rem;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin-left: 5px;
}
nav .navBd p.midashi {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	color: var(--green);
	background-color: var(--gray);
	padding-left: 20px;
}

/* ----------------------------------------------
footer styles
----------------------------------------------*/
footer {
	width: 100%;
	height: 60px;
	z-index: 100;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--gray);
}
footer .nav {
	display: flex;
	width: 100%;
	max-width: 767px;
	height: 60px;
	margin: auto;
}
footer .nav div {
	width: 20%;
	height: 100%;
}
footer .nav div a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
	font-size: 1.1rem;
}
footer .nav div a span:first-of-type {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
}
footer .nav div a span:first-of-type img {
	filter: brightness(0) saturate(100%) invert(64%) sepia(45%) saturate(0%) hue-rotate(198deg) brightness(87%) contrast(90%);
}
footer .nav div.on a span:first-of-type img {
	filter: none;
}
footer .nav div a span:first-of-type em {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 5px;
	right: calc(50% - 25px);
	color: #fff;
	background-color: var(--red);
	font-size: 1.0rem;
	border-radius: 50%;
	width: 18px;
	height: 18px;
}
footer .nav div a span:last-of-type {
	width: 100%;
}
footer .nav div.on a span:last-of-type {
	color: var(--green);
}

/* ----------------------------------------------
common styles
----------------------------------------------*/
main {
	width: 100%;
}
main h1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 70px;
	font-size: 1.8rem;
	line-height: 1.3;
	padding: 0 20px;
}
main h1.bgGray {
	background-color: var(--gray);
}

/* form styles */
form {
	width: 100%;
}
::placeholder {
  color: var(--gray2);
}
input,
textarea,
select {
	font-family: "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 100%;
	outline: none;
	appearance: none;
	color: inherit;
}
input {
	width: 100%;
	height: 50px;
	border-radius: 4px;
	padding: 15px;
	border: 1px solid var(--gray2);
}
input[type=checkbox],input[type=radio] {
	display: none;
}
select {
	background: #fff url("../img/select-arrow.svg") no-repeat calc(100% - 10px) center;
	background-size: 14px auto;
	padding: 0 32px 0 10px;
	border-radius: 4px;
	height: 50px;
	border: 1px solid var(--gray2);
}
.checkbox input + span {
	padding-left: 27px;
	background: url("../img/check.svg") no-repeat left top;
	background-size: 22px 22px;
	display: inline-flex;
	min-height: 25px;
	line-height: 1.5;
	margin: 0 20px 10px 0;
}
.checkbox input:checked + span {
	background: url("../img/check-on.svg") no-repeat left top;
	background-size: 22px 22px;
}
.radio input + span {
	padding-left: 27px;
	background: url("../img/radio.svg") no-repeat left top;
	background-size: 22px 22px;
	display: inline-flex;
	min-height: 25px;
	line-height: 1.5;
	margin: 0 20px 10px 0;
}
.radio input:checked + span {
	background: url("../img/radio-on.svg") no-repeat left top;
	background-size: 22px 22px;
}
button {
	display: block;
	height: 50px;
	border-radius: 25px;
	border: none;
	font-size: 1.6rem;
	font-weight: bold;
	cursor: pointer;
	width: calc(100% - 40px);
	margin: auto;
}
button.bgOrange {
	color: #fff;
	background-color: var(--orange);
}
button.bgGreen {
	color: #fff;
	background-color: var(--green);
}
button.bgRed {
	color: #fff;
	background-color: var(--red);
}

.passwordInput {
	position: relative;
}
.passwordInput > input {
	padding-right: 40px;
}
.passwordInput .togglePassword {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
	background: url("../img/icon-eye.svg") no-repeat;
  cursor: pointer;
	z-index: 10;
	filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(462%) hue-rotate(336deg) brightness(82%) contrast(98%);
}
.passwordInput.on .togglePassword {
	background: url("../img/icon-eye-on.svg") no-repeat;
}

input.error {
	background-color: #FDEDEB;
	border-color: var(--red);
}
select.error {
	background-color: #FDEDEB;
	border-color: var(--red);
}
.radio.error input + span {
	color: var(--red);
}
.checkbox.error input + span {
	color: var(--red);
}
.errorText {
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--red);
	margin-top: 5px;
}
.errorBox {
	width: 100%;
	height: 50px;
	border-radius: 4px;
	padding: 0 15px 0 40px;
	border: 1px solid var(--red);
	color: var(--red);
	background: #FDEDEB url("../img/icon-error.svg") no-repeat 10px 50%;
	background-size: 24px auto;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}
.importantBox {
	width: 100%;
	border-radius: 4px;
	padding: 10px;
	border: 2px solid #e4007f;
	color: #e4007f;
	background-color: #FFE7F4;
	margin-bottom: 10px;
	line-height: 1.5;
}
.importantBox em img {
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 5px;
}
.formArea .errorBox {
	font-weight: bold;
	width: calc(100% - 40px);
	margin: 0 auto 20px;
}
.formArea .importantBox {
	width: calc(100% - 40px);
	margin: 0 auto 20px;
}
.formSty .container {
	font-weight: normal;
	background-color: #fff;
	min-height: calc(100vh - 50px);
	padding-bottom: 40px;
}
.formSty .container h2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 55px;
	font-size: 1.6rem;
	line-height: 1.3;
	padding: 0 20px;
	border-top: 1px solid var(--gray);
}
.formArea dl dt {
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--gray2);
	background-color: var(--gray);
	padding: 10px 20px;
	position: relative;
}
.formArea dl dt span.hissu {
	display: block;
	color: #fff;
	background-color: var(--red);
	width: 35px;
	padding: 3px;
	font-size: 1.1rem;
	text-align: center;
	border-radius: 2px;
	position: absolute;
	right: 20px;
	top: 8px;
}
.formArea dl dd {
	padding: 10px 20px;
}
.formSty.kakunin .container h2 {
	border-top: none;
	background-color: var(--gray);
}
.formSty.kakunin dl dt {
	color: var(--gray2);
	background-color: transparent;
	padding: 20px 20px 0;
}
.formSty.kakunin dl dd {
	line-height: 1.5;
	border-bottom: 1px solid var(--gray);
	padding: 5px 20px 17px;
}
.birthDate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.birthDate span {
	margin: 0 15px 0 5px;
}
.formArea .douiBox {
	margin: 20px;
}
.formArea .douiBox .errorText {
	text-align: left;
}
.formArea .douiBox a {
	color: var(--blue);
	text-decoration: underline;
}
.thanks .text {
	line-height: 1.6;
	margin: 10px 20px 40px;
}
.introText {
	line-height: 1.6;
	margin-bottom: 20px;
}
.formArea .introText {
	width: calc(100% - 40px);
	margin: auto auto 20px;
}

.formBox {
	width: calc(100% - 40px);
	margin: auto;
}
.formBox button {
	width: 100%;
}
.formBox .inputWr {
	margin-bottom: 20px;
}
.formBox .addressBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 20px;
	background-color: #fff;
	border: 2px solid var(--green);
	border-radius: 10px;
	word-break: break-all;
}
.formBox .addressBox p:first-of-type {
	font-weight: normal;
	margin-bottom: 15px;
	width: 100%;
	text-align: center;
}

/* ----------------------------------------------
modal styles
----------------------------------------------*/
.modalBox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100% - 40px);
	max-width: 727px;
	height: auto;
	max-height: 400px;
  background-color: #fff;
	z-index: 500;
}
.modalBox.mh250 {
	max-height: 250px;
}
.modalBox .boxHd {
	padding: 20px;
	text-align: left;
	line-height: 1.5;
	position: relative;
	border-bottom: 1px solid var(--gray2);
}
.modalBox .boxHd .batsu {
  display: block;
  position: absolute;
	top: 20px;
	right: 20px;
  width: 26px;
  height: 26px;
	cursor: pointer;
	background-color: transparent;
	margin: 0 !important;
}
.modalBox .boxHd .batsu a {
	display: block;
	width: 100%;
	height: 100%;
	z-index: 500;
}
.modalBox .boxHd .batsu::before,
.modalBox .boxHd .batsu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 26px;
  background: var(--baseCol);
	border-radius: 2px;
}
.modalBox .boxHd .batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.modalBox .boxHd .batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.modalBox .main {
	width: 100%;
	height: calc(100% - 120px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
	padding: 0 15px;
	line-height: 1.6;
}
.modalBox .main em {
	display: block;
	width: 100%;
	font-size: 2.0rem;
	margin-bottom: 20px;
}
.modalBox .main em span {
	display: inline-block;
}
.modalBox .main p {
	font-weight: normal;
	width: 100%;
}
.modalBox .main p span {
	display: inline-block;
}
.modalBox .main p + p {
	margin-top: 10px;
}
.modalBox .main .chui {
	text-align: left;
	font-size: 1.1rem;
}
.modalBox .btnArea {
  display: flex;
	width: 100%;
	height: 55px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.modalBox .btnArea button {
  width: 50%;
  height: 100%;
  border-radius: 0;
	color: white;
	cursor: pointer;
}
.modalBox .btnArea .reset {
	color: var(--baseCol);
	background-color: var(--gray2);
}
.modalBox .btnArea .submit {
	background-color: var(--orange);
}

.modalBox.qr {
	height: 320px;
	border-radius: 15px;
}
.modalBox.qr .boxHd {
	border-radius: 15px 15px 0 0;
	padding: 20px;
	text-align: center;
	color: #fff;
	background-color: var(--green);
	border-bottom: none;
}
.modalBox.qr .boxHd .batsu::before,
.modalBox.qr .boxHd .batsu::after {
  background: #fff;
}
.modalBox.qr .boxBd {
	padding: 25px;
}
.modalBox.qr .boxBd .id {
	width: calc(100% - 40px);
	height: 30px;
	margin: auto auto 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	color: #fff;
	background-color: var(--green);
	border-radius: 15px;
}
.modalBox.qr .boxBd .qr img {
	display: block;
	margin: auto;
}
.modalBox.qr.stamp {
	height: 430px;
	max-height: 430px;
}
.modalBox.qr.stamp .boxBd {
	padding: 15px 25px;
}
.modalBox.qr.stamp .date {
	text-align: center;
	color: var(--green);
	background-color: #E8F5D8;
	padding: 8px;
	border: 2px solid;
	border-radius: 4px;
	letter-spacing: 0.05em;
	max-width: 320px;
	margin: auto auto 10px;
}
.modalBox.qr.stamp .text1 {
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.5;
	max-width: 320px;
	margin: auto auto 10px;
}
.modalBox.qr.stamp .textBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 320px;
	margin: 10px auto 30px;
}
.modalBox.qr.stamp .textBox p:first-of-type {
	font-size: 1.4rem;
	color: #fff;
	background-color: var(--red);
	padding: 5px 10px;
	border-radius: 15px;
}
.modalBox.qr.stamp .textBox p:last-of-type {
	color: var(--red);
	line-height: 1;
	display: flex;
	align-items: center;
}
.modalBox.qr.stamp .textBox p:last-of-type em {
	font-size: 3.0rem;
	margin-right: 5px;
	margin-bottom: 7px;
}
.modalBox.codeForm {
	max-height: 420px;
}
.modalBox.codeForm .codeError {
	color: var(--red);
	border: 1px solid;
	border-radius: 3px;
	padding: 3px;
	margin-top: 10px;
}
.modalBox.codeForm input {
	font-size: 3.0rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
	margin-top: 10px;
	padding: 5px;
}

.modalInfo {
  position: fixed;
  top: 0;
  width: 100%;
  color: #fff;
	background-color: var(--red);
	z-index: 500;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
	padding: 10px;
}
.modalInfo a {
	text-decoration: underline;
}

/* ----------------------------------------------
login styles
----------------------------------------------*/
.login .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.login .logo img {
	display: block;
	margin: 50px auto 30px;
}
.login .inputWr {
	margin-bottom: 10px;
}
.login input {
	border: none;
}
.login input.error {
	border: 1px solid var(--red);
}
.login .loginCheck .checkbox input + span {
	font-size: 1.2rem;
	line-height: 2;
	color: var(--green);
}
.login button {
	width: 100%;
	margin-top: 10px;
}
.login .linkWr {
	font-size: 1.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}
.login .linkWr a {
	color: var(--green);
}
.login .linkWr a + a {
	border-left: 1px solid;
	padding-left: 10px;
	margin-left: 10px;
}

/* ----------------------------------------------
mypage styles
----------------------------------------------*/
.stampArea {
	padding: 20px;
	color: var(--green);
}
.stampArea .info {
	background-color: #fff;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 36px;
	border-radius: 18px;
	font-size: 1.4rem;
}
.stampArea .info a {
	color: var(--green);
	text-decoration: underline;
}
.stampArea .stampBox {
	padding: 20px 0;
	background-color: #fff;
	border-radius: 15px;
}
.stampArea .stampBox .text1 {
	text-align: center;
	margin-bottom: 15px;
	font-weight: normal;
}
.stampSlideArea {
	width: 320px;
	height: 340px;
	margin: auto;
	overflow: hidden;
}
.stampSlide {
	display: flex;
	width: 9999px;
	height: 340px;
	overflow: hidden;
}
.stampArea .stampBox .stamp {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 320px;
	height: 340px;
}
.stampArea .stampBox .stamp li {
	width: 64px;
	height: 85px;
}
.stampArea .stampBox .stamp li span.date {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: url("../img/stamp.svg") no-repeat 50% 50%;
	background-size: 54px 54px;
	width: 64px;
	height: 54px;
	font-size: 1.4rem;
	color: #fff;
}
.stampArea .stampBox .stamp li.on span.date {
	background: url("../img/stamp-on.svg") no-repeat 50% 50%;
	background-size: 54px 54px;
}
.stampArea .stampBox .stamp li span.tenpo {
	display: block;
	font-size: 1.0rem;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	margin-top: 2px;
	height: 25px;
	overflow: hidden;
}
.stampSlideNav {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: center;
	padding: 5px 0 0 7px;
}
.stampSlideNav li {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #ccc;
	margin-right: 7px;
}
.stampSlideNav li.on {
	background-color: var(--green);
}
.stampArea .stampBox .textBox {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 20px);
	margin: auto;
}
.stampArea .stampBox .textBox .id {
	width: calc(100% - 150px);
	display: flex;
	align-items: flex-start;
}
.stampArea .stampBox .textBox .id p {
	display: inline-flex;
	align-items: center;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
}
.stampArea .stampBox .textBox .id em {
	display: inline-flex;
	align-items: center;
	font-size: 1.3rem;
	color: #fff;
	background-color: var(--green);
	padding: 3px 5PX;
	border-radius: 10px;
	margin-right: 5px;
}
.stampArea .stampBox .textBox div:not(:first-of-type) {
	width: 80px;
	height: 45px;
	text-align: center;
	padding: 0 5px;
	border-left: 1px solid #ccc;
	font-size: 1.2rem;
}
.stampArea .stampBox .textBox div:not(:first-of-type) em {
	display: block;
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 5px;
}
.stampArea .stampBox .textBox div:nth-of-type(2) {
	width: 70px;
}
.stampArea .stampBox .barcode {
	color: #fff;
	background-color: var(--orange);
	height: 40px;
	width: calc(100% - 20px);
	margin: 10px auto auto;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.stampArea .stampBox .barcode img {
	width: 18px;
	height: auto;
	margin-right: 10px;
}
.stampArea .text2 {
	font-size: 1.3rem;
	text-align: right;
	margin-top: 5px;
	margin-right: 5px;
}
.donqMenuArea .bnrBox {
	padding: 15px 20px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.donqMenuArea .bnrBox div {
	width: calc(50% - 5px);
	height: 100px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}
.donqMenuArea .bnrBox div a {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	background-color: #fff;
}
.donqMenuArea .bnrBox .donq a {
	background-color: #00437e;
}
.donqMenuArea .bnrBox .minione a {
	background-color: #da0050;
}
.donqMenuArea .bnrBox .marie a {
	background-color: #803235;
}
.donqMenuArea .bnrBox .matsuzo a {
	background-color: #000000;
}
.donqMenuArea .bnrBox div a img {
	width: auto;
	max-width: 100px;
	height: auto;
	max-height: 100px;
}
.donqMenuArea {
	background-color: #fff;
}
.donqMenuArea .donqMenu li {
	width: 100%;
	height: 55px;
	border-bottom: 1px solid var(--gray);
	font-size: 1.4rem;
}
.donqMenuArea .donqMenu li a {
	display: flex;
	align-items: center;
	padding: 0 20px;
	width: 100%;
	height: 100%;
	font-weight: normal;
}
.donqMenuArea .snsLink {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 80px;
}
.donqMenuArea .snsLink div + div {
	margin-left: 30px;
}

/* ----------------------------------------------
stamp-history styles
----------------------------------------------*/
.stamp-history {
	background-color: #fff;
}
.stampBox1 {
	overflow: hidden;
	width: 100%;
	max-width: 767px;
  height: 0;
	padding: 0 20px 0;
	background-color: var(--green);
	transition: height 0.3s ease, padding 0.5s ease;
	z-index: 100;
	position: fixed;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
}
.stampBox1.open {
	padding: 20px 20px 10px;
  height: 170px;
}
.stampBox1 .boxIn {
	border-radius: 15px;
	background-color: #fff;
	width: 100%;
}
.stampBox1 .boxIn .loginNon {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border-bottom: 1px solid var(--gray);
	font-weight: bold;
	color: var(--green);
	font-size: 1.8rem;
}
.stampBox1 .boxIn .loginNon em {
	font-size: 1.3rem;
	white-space: nowrap;
	height: 20px;
	width: 7em;
	padding: 0 10px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: var(--green);
	border-radius: 10px;
	margin-right: 10px;
}
.stampBox1 .boxIn .loginNon span {
	display: flex;
	word-break: break-all;
}
.stampBox1 .boxIn .dlWr {
	display: flex;
	justify-content: space-between;
}
.stampBox1 .boxIn dl {
	text-align: center;
	padding: 15px;
	width: 50%;
}
.stampBox1 .boxIn dl + dl {
	border-left: 1px solid var(--gray);
}
.stampBox1 .boxIn dl dt {
	font-size: 1.3rem;
	height: 20px;
	width: 8em;
	padding: 0 10px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: var(--green);
	border-radius: 10px;
	margin: 0 auto 10px;
}
.stampBox1 .boxIn dl dd {
	color: var(--green);
	font-size: 1.6rem;
	padding: 0 !important;
	line-height: 1 !important;
	border: none !important;
}
.stampBox1 .boxIn dl dd em {
	font-size: 3.0rem;
	margin-right: 2px;
}
.stampBox2 {
	padding: 0 20px 10px;
	background-color: var(--green);
}
.stampBox2 .boxIn {
	border-radius: 15px;
	background-color: #fff;
	width: 100%;
	padding: 5px 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.stampBox2 .boxIn dl {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
}
.stampBox2 .boxIn dl:not(:last-of-type) {
	border-bottom: 1px solid var(--gray);
}
.stampBox2 .boxIn dl dt {
	color: var(--green);
}
.stampBox2 .boxIn dl dd {
	font-size: 1.6rem;
}
.stampBox2 .boxIn dl dd em {
	font-size: 1.8rem;
	margin-right: 2px;
}
.stampBox2 + .stampBox2 {
	padding-bottom: 20px;
}
.listArea .boxHd {
	padding: 20px 20px 15px;
	background-color: var(--gray);
}
.listArea .boxHd .midashi {
	margin-bottom: 15px;
}
.listArea .boxHd select {
	width: 100%;
	border: none;
	height: 40px;
	font-size: 1.4rem;
	padding: 0 10px;
	border-radius: 2px;
}
.listArea .boxBd {
	padding-bottom: 30px;
}
.listArea .boxBd ul li {
	font-size: 1.4rem;
	line-height: 1.3;
	padding: 10px 20px;
	border-bottom: 1px solid #DFDFDF;
}
.listArea .boxBd ul li > div {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
}
.listArea .boxBd ul li .date {
	color: var(--gray2);
}
.listArea .boxBd ul li .leftBox {
	width: calc(100% - 6em);
}
.listArea .boxBd ul li .leftBox p:last-child {
	font-weight: normal;
}
.listArea .boxBd button {
	margin: 20px auto 0;
}
.listArea .boxBd ul li .rightBox {
	font-size: 1.5rem;
	text-align: right;
	width: 6em;
}
.listArea .boxBd ul li .rightBox span {
	display: block;
	color: var(--green);
}

/* ----------------------------------------------
goods-list styles
----------------------------------------------*/
.goods-list .linkHd {
	width: 100%;
	height: 40px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
}
.goods-list .linkHd p {
	width: 30%;
}
.goods-list .linkHd p:nth-of-type(2) {
	width: 40%;
}
.goods-list .linkHd p a {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: var(--gray2);
	border-bottom: 1px solid #DFDFDF;
}
.goods-list .linkHd p.on a {
	color: var(--green);
	border-bottom: 3px solid;
}
.goodsArea {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 30px 20px 0;
}
.goodsArea .goods {
	width: calc(50% - 7.5px);
	margin-bottom: 30px;
}
.goodsArea .goods:nth-of-type(odd) {
	margin-right: 15px;
}
.goodsArea .goods .imgBox {
	width: 100%;
	height: 150px;
	background-color: #fff;
	border-radius: 15px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	margin-bottom: 10px;
}
.goodsArea .goods .imgBox img {
	width: auto;
	max-width: 80%;
	height: auto;
	max-height: 80%;
}
.goodsArea .goods .imgBox .icon {
	position: absolute;
	top: -7px;
	left: -7px;
	width: 100px;
	height: 38px;
	background: url("../img/goods-icon01.svg") no-repeat 0 0;
	background-size: 100px auto;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 1.2rem;
	border-radius: 0 0 4px 4px;
	padding-right: 4px;
	padding-bottom: 11px;
	color: #fff;
}
.goodsArea .goods.noChange .imgBox .icon {
	background: url("../img/goods-icon02.svg") no-repeat 0 0;
	background-size: 100px auto;
}
.goodsArea .goods .imgBox .icon em {
	font-size: 1.6rem;
	margin-right: 2px;
}
.goodsArea .goods .text {
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
}
.tentou {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 10px;
	border-radius: 10px;
	color: #fff;
	margin-bottom: 3px;
	background-color: var(--orange);
}
.jitaku {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 10px;
	border-radius: 10px;
	color: #fff;
	margin-bottom: 3px;
	background-color: #0084CF;
}
.goodsArea .goods.noChange .text span.tentou,
.goodsArea .goods.noChange .text span.jitaku {
	background-color: #8D8B84 !important;
}
.ticket.noChange .tentou,
.ticket.noChange .jitaku,
.ticket.noChange .goods .textBox p:first-child {
	background-color: #8D8B84 !important;
}
.ticket.noChange .goods .textBox p:last-child {
	color: #8D8B84 !important;
}

/* ----------------------------------------------
stamp-form styles
----------------------------------------------*/
.stamp-form .formBox .text {
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 20px;
}
.stamp-form .formBox input {
	border: none;
}
.stamp-form .formBox input.error {
	border: 1px solid var(--red);
}
.stamp-form .formBox button {
	margin-top: 40px;
}

/* ----------------------------------------------
ticket styles
----------------------------------------------*/
.ticket {
	padding-bottom: 96px;
	background-color: #fff;
}
.ticket .container {
	max-width: 100%;
}
.ticket .goodsWr {
	width: 100%;
	max-width: 100%;
	background-color: var(--gray);
	padding-bottom: 20px;
}
.ticket .goods {
	width: calc(100% - 40px);
	max-width: 767px;
	padding: 15px;
	border-radius: 15px;
	background-color: #fff;
	margin: auto;
	line-height: 1.5;
}
.ticket .goods .imgBox {
	width: 100%;
	height: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ticket .goods .imgBox img {
	width: auto;
	height: auto;
	max-width: 90%;
	max-height: 90%;
}
.ticket .goods .text1 {
	font-size: 2.0rem;
	text-align: center;
	margin-bottom: 10px;
}
.ticket .goods .textBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.ticket .goods .textBox p:first-of-type {
	font-size: 1.4rem;
	color: #fff;
	background-color: var(--red);
	padding: 5px 10px;
	border-radius: 15px;
}
.ticket .goods .textBox p:last-of-type {
	color: var(--red);
	line-height: 1;
	display: flex;
	align-items: center;
}
.ticket .goods .textBox p:last-of-type em {
	font-size: 3.0rem;
	margin-right: 5px;
	margin-bottom: 7px;
}
.ticket .goods .text2 {
	font-size: 1.1rem;
	font-weight: normal;
	margin-bottom: 15px;
}
.ticket .goods .date {
	font-size: 1.3rem;
	text-align: center;
	padding-top: 15px;
	border-top: 1px solid var(--gray);
}
@media screen and (max-width:360px) {
	.ticket .goods .date {
		font-size: 1.1rem;
	}
}
.ticket .container .chui {
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.5;
	width: calc(100% - 40px);
	max-width: 767px;
	margin: 20px auto 0;
}
.fxdBtm {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 76px;
  background-color: #f3f3f3;
  display: flex;
	flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.btnSlide {
  width: 284px;
  height: 56px;
  border-radius: 56px;
  background-color: #9d9b9e;
  position: relative;
  padding: 3px 3px 3px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.btnUse {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: none;
  background-color: #d70012;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: inherit;
  font-weight: bold;
  transition-duration: 0.3s;
}
.btnUse span {
  display: block;
  flex: 0 0 50px;
  text-align: center;
}
.fxdBtm button {
	width: 284px;
}

.ticket.thanks {
	padding-bottom: 100px;
	background-color: var(--gray);
}
.ticket.thanks .goods {
	background: #fff url("../img/line-dot.svg") no-repeat -5px 130px;
	background-size: 800px auto;
	position: relative;
	padding-top: 20px;
}
.ticket.thanks .goods::after {
	content: "";
	width: 200px;
	height: 200px;
	display: block;
	background: url("../img/thanks.svg") no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -100px;
}
.ticket.thanks .goods .id {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.ticket.thanks .goods .id span {
	display: inline-flex;
	justify-content: center;
	padding: 3px 20px;
	border-radius: 15px;
	color: #fff;
	background-color: var(--baseCol);
}
.ticket.thanks .goods .usedDay {
	font-size: 1.7rem;
	text-align: center;
	margin-bottom: 5px;
}
.ticket.thanks .goods .usedNo {
	font-size: 1.7rem;
	text-align: center;
	color: var(--red);
	background-color: #fff;
	width: 200px;
	margin: 0 auto;
	padding-bottom: 10px;
}
.ticket.thanks .goods .usedNo em {
	font-size: 3.0rem;
	margin-left: 10px;
}
.ticket.thanks .goods .textBox p:last-of-type {
	color: var(--baseCol);
}
.ticket.thanks button {
	max-width: 767px;
	margin-top: 20px;
}

.ticket.thanks.timeOut h1,
.ticket.thanks.completed h1 {
	height: 80px;
}
.ticket.thanks.timeOut h1 em,
.ticket.thanks.completed h1 em {
	display: block;
	text-align: center;
	width: 100%;
	font-size: 1.7rem;
	color: var(--red);
	margin-top: 3px;
}
.ticket.thanks.timeOut .goods *,
.ticket.thanks.completed .goods * {
	color: #636766;
}
.ticket.thanks.timeOut .goods .id span,
.ticket.thanks.completed .goods .id span {
	background-color: #636766;
}
.ticket.thanks.timeOut .goods .textBox p:first-of-type,
.ticket.thanks.completed .goods .textBox p:first-of-type {
	background-color: #636766;
}
.ticket.thanks.timeOut .goods .textBox p:last-of-type,
.ticket.thanks.completed .goods .textBox p:last-of-type {
	color: #636766;
}
.ticket.thanks.completed .goods {
	position: relative;
}
.ticket.thanks.completed .goods::before {
	content: "";
	display: block;
	width: 180px;
	height: 180px;
	background: url("../img/completed.svg") no-repeat 50% 50%;
	background-size: 100% auto;
	position: absolute;
	top: 130px;
	left: 50%;
	margin-left: -90px;
}

/* ----------------------------------------------
delivery styles
----------------------------------------------*/
.goodsDetail {
	display: flex;
	width: 100%;
	padding: 10px 15px;
	background-color: #fff;
}
.goodsDetail .imgBox {
	width: 130px;
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}
.goodsDetail .imgBox img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}
.goodsDetail .textBox {
	width: calc(100% - 140px);
	padding-top: 5px;
}
.goodsDetail .textBox .text1 {
	font-size: 1.4rem;
	line-height: 1.5;
}

.ticketUsed {
	width: calc(100% - 40px);
	max-width: 767px;
	margin: auto;
}
.ticketUsed .usedDay {
	text-align: center;
	margin-bottom: 20px;
}
.oritatami {
	background-color: #fff;
	border-radius: 10px;
	margin-bottom: 10px;
}
.oritatami .boxHd {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 55px;
	cursor: pointer;
	position: relative;
}
.oritatami .boxHd .icon {
	position: absolute;
	top: 18px;
	left: 15px;
}
.icon.step1 {
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.5;
	color: #fff;
	background-color: #00B900;
	padding: 2px 10px;
	border-radius: 10px;
}
.icon.step2 {
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.5;
	color: #fff;
	background-color: var(--gray2);
	padding: 2px 10px;
	border-radius: 10px;
}
.oritatami .boxHd .arrow {
	position: absolute;
	top: 18px;
	right: 15px;
	border-bottom: solid 2px var(--gray2);
  border-right: solid 2px var(--gray2);
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
}
.oritatami.open .boxHd .arrow {
  transform: rotate(-135deg);
}
.oritatami .boxBd {
	display: none;
	font-size: 1.3rem;
	padding: 15px;
}
.oritatami.open .boxBd {
	display: block;
}
.oritatami .boxBd dl dt {
	color: var(--gray2);
}
.oritatami .boxBd dl dd {
	font-weight: normal;
	padding: 5px 0 15px;
}
.ticketUsed .orderNo {
	background-color: #fff;
	padding: 15px;
	border-radius: 10px;
	margin-bottom: 10px;
}
.ticketUsed .orderNo em {
	margin-left: 10px;
}

/* ----------------------------------------------
ticket-history styles
----------------------------------------------*/
.changeDetail a {
	display: flex;
	width: 100%;
	background-color: #fff;
	padding: 15px;
	border-bottom: 1px solid #DFDFDF;
}
.changeDetail a .leftBox {
	width: 120px;
	margin-right: 10px;
}
.changeDetail a .leftBox .imgBox {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5px;
}
.changeDetail a .leftBox .imgBox img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}
.changeDetail a .rightBox {
	width: calc(100% - 130px);
}
.changeDetail a .rightBox .usedDay {
	color: var(--gray2);
	margin-bottom: 5px;
}
.changeDetail a .rightBox .usedDay span {
	margin-right: 5px;
}
.changeDetail a .rightBox .text {
	font-weight: normal;
	line-height: 1.5;
}

/* ----------------------------------------------
news styles
----------------------------------------------*/
.newsList .boxHd {
	font-size: 1.3rem;
	color: var(--green);
	text-align: right;
	cursor: pointer;
	padding: 0 20px 10px;
}
.newsList .boxBd {
	background-color: #fff;
}
.newsList .boxBd li a {
	display: flex;
	width: 100%;
	height: auto;
	padding: 10px 30px 10px 20px;
	border-bottom: 1px solid #DFDFDF;
	position: relative;
	font-weight: normal;
	line-height: 1.5;
}
.newsList .boxBd li a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	border-top: solid 1px var(--gray2);
  border-right: solid 1px var(--gray2);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
	margin-top: -7px;
}
.newsList .boxBd li a p {
	width: calc(100% - 20px);
}
.newsList .boxBd li a p span {
	display: block;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--gray2);
}
.newsList .boxBd li a .checkbox {
	display: flex;
	align-items: center;
	width: 20px;
	height: auto;
}
.newsList .boxBd li a .checkbox span {
	padding: 0;
	margin: 0;
	background: none;
	min-height: auto;
	position: relative;
}
.newsList .boxBd li a .checkbox input:checked + span::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: var(--green);
}
.news button {
	margin: 20px auto 40px;
}

.newsArea {
	padding: 0 20px;
	margin: auto;
}
.newsArea h1 {
	line-height: 1.5;
	justify-content: flex-start;
	text-align: left;
	height: auto;
	padding: 20px 0 15px;
}
.newsArea .date {
	font-size: 1.3rem;
	color: var(--gray2);
	margin-bottom: 15px;
}
.newsArea .imgBox {
	background-color: #fff;
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
}
.newsArea .imgBox img {
	width: auto;
	height: auto;
	max-width: 90%;
	max-height: 90%;
}
.newsArea .text {
	font-weight: normal;
	line-height: 1.5;
}

/* ----------------------------------------------
coupon styles
----------------------------------------------*/
.couponList {
	background-color: #fff;
	padding: 0 20px;
}
.couponList .info {
	font-weight: normal;
	line-height: 1.5;
	padding: 20px 0 10px;
}
.couponList .box a {
	display: block;
	padding: 10px 0;
}
.couponList .box .img {
	display: flex;
	width: 100%;
}
.couponList .box .img p {
	width: 80px;
	height: 80px;
	margin-right: 10px;
	border-radius: 10px;
	overflow: hidden;
}
.couponList .box .img p img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.couponList .box .img span {
	display: block;
	width: calc(100% - 90px);
	padding: 5px 0;
	line-height: 1.5;
}
.couponKigen p {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 10px;
	font-size: 1.3rem;
}
.couponKigen p + p {
	margin-top: 5px;
}
.couponKigen .icon {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 10px;
	border-radius: 10px;
	color: #fff;
	margin-bottom: 3px;
	background-color: var(--orange);
	margin-right: 10px;
}
.couponKigen p:last-of-type span {
	font-weight: normal;
	margin-left: 5px;
}

.coupon {
	width: calc(100% - 40px);
	border-radius: 15px;
	background-color: #fff;
	margin: auto;
	line-height: 1.5;
}
.coupon .img {
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-radius: 15px 15px 0 0;
}
.coupon .img img {
	display: block;
	height: 200px;
	object-fit: cover;
	width: 100%;
}
.coupon .textBox {
	padding: 15px;
}
.coupon .textBox .text1 {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 15px;
}
.coupon .textBox .text2 {
	font-weight: normal;
	margin-bottom: 15px;
}
.coupon .couponKigen {
	border-top: 1px dotted var(--gray2);
}
.coupon + .chui {
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.5;
	width: calc(100% - 40px);
	max-width: 767px;
	margin: 20px auto 40px;
}

/* ----------------------------------------------
about styles
----------------------------------------------*/
.aboutSty {
	font-weight: normal;
	background-color: #fff;
}
.aboutSty .text {
	line-height: 1.6;
	margin: 10px 20px 40px;
}
.aboutSty .imgBox {
	text-align: center;
	max-width: 767px;
	margin-bottom: 40px;
}
.aboutSty .imgBox + button {
	margin-bottom: 40px;
}

/* ----------------------------------------------
403error styles
----------------------------------------------*/
.errorSty {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: 100vh;
}
.errorSty p {
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.5;
	width: 100%;
	text-align: center;
}
.errorSty p em {
	font-size: 8.0rem;
}
.errorSty p strong {
	font-size: 2.0rem;
}
.errorSty img {
	display: block;
	width: 80px;
	height: auto;
	margin: 30px auto;
}
.errorSty button {
	margin-top: 20px;
	max-width: 400px;
}