@charset "utf-8";

@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------------- header --------------- */


/* --------------- footer --------------- */
footer {margin-top: 0;}


/* --------------- nav --------------- */


/* --------------- common --------------- */
section + section {}

h2 {}
h2 span {}



@media (min-width:641px) {}
@media (max-width:640px) {}


/* --------- pagetitle → pgtitle --------- */

@media (min-width:641px) {}
@media (max-width:640px) {}


/* --------- section：main --------- */
.main > h3 + .rrk {margin-top: 2em;}

.main > .btn-kwsk {
	display: block;
	width: 16em;
	text-align: center;
	margin-left: auto;}

.main dl + .pager {margin-top: 2em;}
.main dl + .btn-kwsk {margin-top: 2.667em;}

.main .pager + .btn-kwsk {margin-top: 4em;}

/* --- rireki → rrk --- */
.rrk {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	width: 100%;}

.rrk dt,
.rrk dd {
	padding: 0.584em 0.714em;
	border-bottom: dashed 1px #a9a6b4;}

.rrk dt {width: 45%;}
.rrk dd {width: 55%;}
.rrk dd {text-align: right;}


/* --- stts-ordID ioriro --- */
.rrk .stts-ordID,
.rrk .stts-ordID + dd {
	padding-top: 0.715em;
	padding-bottom: 0.715em;
	background-color: #f4f1fc;}

.rrk .stts-ordID + dd {text-align: left;}
.rrk .stts-ordID + dd a {
	display: flex; flex-wrap: wrap; justify-content: flex-start;}
.rrk .stts-ordID + dd span {
	display: block;
	padding: 0 1em;}
.rrk dd .status {
	background-color: #fff;
	border-radius: 3em;
	border: solid 1px #a9a6b4;}

.rrk .stts-ordID + dd a:hover {color: #a788ff;}


/* --- status ioriro --- */
.cancel02 .stts-ordID,
.cancel02 .stts-ordID + dd {background-color: #f0f0f0;}

	.cancel01 a .status,
	.cancel02 a .status {border: none;}
	.cancel01 a .status {
		color: #fff;
		background-color: #e56b55;}
	.cancel02 a .status {
		color: #fff;
		background-color: #a0a0a0;}
	.complete a .status {
		background-color: #f4f1fc;}

.cancel01 .stts-ordID + dd a:hover {color: #e56b55;}
	.cancel01 a:hover .status {
		color: #e56b55;
		background-color: #fff;}

.cancel02 .stts-ordID + dd a:hover {color: #a0a0a0;}
	.cancel02 a:hover .status {
		color: #a0a0a0;
		background-color: #fff;}


/* --- change ioriro --- */
.rrk dd .change {
	background-color: #fff;}


/* --- date ioriro --- */
.date + dd span {
	display: inline-block;
	margin-right: 2em;}

.date + dd .day-hitt {position: relative;}
.date + dd .day-hitt::before {
	position: absolute;
	top: 0; left: -1.5em;
	content: '／';
	display: block;}

.rrk .date + dd {text-align: left;}


/* --- item ioriro --- */
.rrk .item p {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: flex-start;}
.rrk .item span {
	display: block;
	width: calc(100% - 13em);}
.rrk .item .kind,
.rrk .item .kosu {
	width: 6em;
text-align: right;}
.rrk .item .kind + .kosu {margin-left: 1em;}


/* --- kingaku → kngk ioriro --- */
.rrk .kngk + dd {letter-spacing: 0;}
.rrk .kngk + dd span {
	display: inline-block;
	font-size: 0.8em;
	letter-spacing: 0.0834em;
	margin-left: 0.417em;}

/* --------- section：sub --------- */

@media (min-width:641px) {
	
	/* --- rireki → rrk --- */
	.rrk dt,
	.rrk dd {padding: 0.584em 1em;}
	.rrk dt {width: 30%;}
	.rrk dd {width: calc(100% - 30%);}
	
	/* --- stts-ordID ioriro --- */
	.rrk .stts-ordID,
	.rrk .stts-ordID + dd {
		padding-top: 0.917em;
		padding-bottom: 0.917em;}
}
@media (max-width:640px) {
	
	/* --- order-detail ioriro --- */
	.rrk .order-detail,
	.rrk .order-detail + dd {width: 100%;}
	
	.rrk .order-detail {
		padding-bottom: 0;
		border-bottom: none;}
	
		.rrk .item p {
			position: relative;
			padding-left: 0.857em;}
		.rrk .item p::before {
			position: absolute;
			top: calc(50% - 0.30955em); left: 0;
			content: '';
			display: block;
			width: 0.6191em; height: 0.6191em;
			background-color: #5a248a;
			border-radius: 50%;}
}

/* --------- section：sub --------- */

.sub > div + h3 {margin-top: 1.084em;}
.sub > div > small {
	display: block;
	font-size: 1em;}
.sub small + p {margin-top: 0.542em;}
.sub p + .btn-kwsk {
	width: 10em;
	display: block;
	text-align: center;
	margin: 1em 0 0 auto;}

/* --- seikyu → siky --- */
	.sub .month {
		position: relative;
		display: inline-block;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		padding-right: 1em;}
	.sub .month::after {
		position: absolute;
		bottom: 0.125em; left: calc(100% - 1.2494em);
		content: '月';
		display: block;
		font-size: 0.667em;}

	.sub .kngk {line-height: 1.334;}
	.sub .kngk > * {display: inline-block;}
	.sub .kngk b {
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0;}
	.sub .kngk span small {font-size: 0.8em;}
	
/* --- seikyu → info --- */

.sub .info p {
	position: relative;
	font-size: 1.2rem;
	margin-top: 0.556em;
	padding-left: 0.857em;}

	.sub .info p::before {
		position: absolute;
		top: calc(50% - 0.30955em); left: 0;
		content: '';
		display: block;
		width: 0.6191em; height: 0.6191em;
		background-color: #5a248a;
		border-radius: 50%;}

.sub .info p + p {margin-top: 0.334em;}



/* --------------- body：myp-top --------------- */

@media (min-width:1281px) {
	.myp-top .main {
		width: 50%;
		margin: 0 3.75% 0 7.5%;}
	.myp-top .sub {
		width: 31.25%;
		padding: 0 2em;}
}
@media (max-width:1280px) {
	.myp-top .main {
		width: 75%;
		padding: 0 2.34375% 0 4.6875%;}
	.myp-top .sub {
		width: 25%;
		padding: 0 2.34375%;}
}
@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------------- body：myp-page --------------- */

/* --------- container：order --------- */

/* --- contents：list --- */

/*  section：main  */

.list .main p + .btn_wk {
	justify-content: flex-end;
	margin-top: 0.75em;}
.list .main .btn_wk + h3 {margin-top: 2.417em;}

.list .month {}
.list .month span {
	position: relative;
	display: inline-block;
	font-size: 1.524em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	padding-right: 1em;}
.list .month span::after {
	position: absolute;
	bottom: 0.125em; left: calc(100% - 1.2494em);
	content: '月';
	display: block;
	font-size: 0.667em;}

.list .kngk {line-height: 1.334;}
.list .kngk > * {display: inline-block;}
.list .kngk b {
	font-size: 1.857em;
	font-weight: 700;
	letter-spacing: 0;}
.list .kngk span small {font-size: 0.8em;}

@media (min-width:641px) {
	.list .month span {font-size: 2em;}
	.list .kngk b {font-size: 2em;}
}
@media (max-width:640px) {}


/* --- contents：detail --- */

.detail dl + h3 {}

/*  section：main  */


@media (min-width:641px) {}
@media (max-width:640px) {}



/* --------- container：tyumon-gaku → tym-gk --------- */

.tym-gk .btn_wk + h3 {letter-spacing: 0;}
.tym-gk section dl {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items:stretch;}

.tym-gk section dt,
.tym-gk section dd {
	padding: 2em 0 0.267em 0;
	border-bottom: dashed 1px #a9a6b4;}
.tym-gk section dt {width: 120px;}
.tym-gk section dd {
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center;
	width: calc(100% - 120px);}

/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:641px) {
	.tym-gk section dl {align-items:flex-end;}
}
@media (max-width:640px) {
	.tym-gk dd .kngk {justify-content: flex-start;}
	.tym-gk dd .kngk + a {margin: 0.715em 0 0 auto;}
	
	.tym-gk section dd {padding-bottom: 0.905em;}
}


/* --------------- container：user --------------- */

.user .input .mail + dd {padding: 0.49961em 0.875em 0.366em;}
/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}


/* --------------- container：●●● --------------- */
/* --------- contents：●●● --------- */
/* --- section：●●● --- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}