@charset "UTF-8";
/* クラブミラノ */
.milano {}

/* ==================================================================== */
/* SMARTPHONE
======================================================================= */
@media screen and (max-width: 768px) {
  
	.sys-frame,
	.sys-frame-inner {
		position: relative;
	}
	.sys-frame::before {
		content: '';
		display: block;
    position: absolute;
    top: 12px;
    left: 12px;
		border-top: 10px solid #1a205c;
    border-right: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame::after {
		content: '';
		display: block;
    position: absolute;
    top: 12px;
    right: 12px;
		border-top: 10px solid #1a205c;
    border-left: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame-inner::before {
		content: '';
		display: block;
    position: absolute;
    bottom: 1px;
    left: 1px;
		border-bottom: 10px solid #1a205c;
    border-right: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame-inner::after {
		content: '';
		display: block;
    position: absolute;
    bottom: 1px;
    right: 1px;
		border-bottom: 10px solid #1a205c;
    border-left: 10px solid transparent;
		z-index: 5;
	}
	
	.sys-frame-inner {
		border: 1px solid #1a205c;
	}
	
	.p-time-wrap,
	.p-price-wrap {
		line-height: 1;
		
	}
	.p-time,
	.p-price {
		color: #1a205c;
		font-weight: 500;
	}
	.p-time {
		font-size: 2.1rem;
	}
	.p-price {
		font-size: 3rem;
	}
	.p-tani {
		font-size: 1.8rem;
	}
	.p-base {
		position: relative;
		font-size: 1.3rem;
		text-decoration: line-through;
		padding: 0 30px 0 10px;
	}
	.p-base::after {
		font-family: 'Material Icons';
		font-size: 1.2rem;
		content: "\eac9";
		position: absolute;
		top:  4px;
		right: 10px;
	}
	
	
	#sys-basic .sys-frame-inner {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 15px;
		width: 100%;
		height: 100%;
		background-image: url(../img/system/basic_bg_sp.jpg);
		background-size: cover;
	}
	.sb-copy {
		font-size: 1.8rem;
		text-align: center;
		line-height: 1;
		color: #1a205c;
		margin-bottom: 10px;
	}
	#sys-basic ul {
		position: relative;
		margin-bottom: 10px;
		padding: 0 0 10px;
		border-bottom: 1px solid #CCC;
	}
	#sys-basic li {
		position: relative;
		text-align: right;
		width: max-content;
		margin: 0 0 0 auto;
	}
	#sys-basic li:nth-child(2)::before,
	#sys-basic li:nth-child(3)::before {
		content: '';
		display: block;
		width: 33px;
		height: 20px;
		background-image: url(../img/system/icon_reco1.png);
		background-size: cover;
		position: absolute;
		left: -50px;
		top: 8px;
	}
	#sys-basic li:nth-child(3)::before {
		background-image: url(../img/system/icon_reco2.png);
	}
	.sb-other-p {
		text-align: right;
		margin-bottom: 10px;
	}
	.sb-other-p p {
		line-height: 1.2;
	}
	.sb-other .p-price {
		font-size: 2.1rem;
		color: #c62e8b;
	}
	.sb-other .p-tani {
		font-size: 1.3rem;
	}
	.sb-ot-tup,
	.sb-ot-hon {
		padding-right: 13px;
		margin-bottom: 5px;
	}
	.sb-ot-hon .p-tani:first-child,
	.sb-ot-hup .p-tani:first-child {
		margin-right: 11px;
	}
	.sb-ot-mur {
		font-size: 1.6rem;
		font-weight: 500;
		color: #1a205c;;
	}
	
	
	#sys-date .sys-frame-inner {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 15px;
		width: 100%;
		height: 100%;
		background-image: url(../img/system/date_bg_sp.jpg);
		background-size: cover;
	}
	#sys-date .sd-price {
		margin-bottom: 10px;
		padding: 0 10px 10px;
		border-bottom: 1px solid #CCC;
		text-align: center;
	}
	#sys-date .p-time-wrap {
		margin-right: 30px;
	}
	#sys-date .p-time {
		font-size: 3.6rem;
	}
	#sys-date .p-price {
		font-size: 4rem;
	}
	#sys-date .p-tani {
		font-size: 2rem;
	}
	#sys-date ul {
		color: #1a205c;
	}
	#sys-date ul li {
		font-size: 1.2rem;
		line-height: 1.4;
		text-indent: -1em;
		margin-left: 1em;
	}
	#sys-date ul li + li {
		margin-top: 5px;
	}
	
  
	#sys-basic {
		margin-bottom: 30px;
	}
	
	#sys-date {
		margin-bottom: 30px;
	}
	
	#sys-play {
		margin-bottom: 30px;
	}
	#sys-play .sys-frame-inner {
		padding: 15px;
		background-color: #f7fbfe;
	}
	#sys-play .sp-play {
		font-size: 1.8rem;
		font-weight: 500;
		letter-spacing: -0.05em;
		color: #1a205c;
	}
	#sys-play .sp-play span {
		display: inline-block;
	}
	
	
	#sys-close {
		padding: 0 10px;
	}
	#sys-close h2 {
		font-size: 1.8rem;
		text-align: center;
		margin-bottom: 10px;
	}
	.sc--read1 {
		margin-bottom: 15px;
	}
	.sc--read2 {
		font-size: 1.2rem;
	}
	#sys-close ul {
		list-style: disc;
		list-style-position: inside;
		margin-bottom: 20px;
	}
	#sys-close ul li {
		font-size: 1.2rem;
		text-indent: -1em;
		margin-left: 1em;
	}
  
}

/* ==================================================================== */
/* DESKTOP
======================================================================= */
@media screen and (min-width: 768px), print {
	
	.sys-frame,
	.sys-frame-inner {
		position: relative;
	}
	.sys-frame::before {
		content: '';
		display: block;
    position: absolute;
    top: 12px;
    left: 12px;
		border-top: 10px solid #1a205c;
    border-right: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame::after {
		content: '';
		display: block;
    position: absolute;
    top: 12px;
    right: 12px;
		border-top: 10px solid #1a205c;
    border-left: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame-inner::before {
		content: '';
		display: block;
    position: absolute;
    bottom: 1px;
    left: 1px;
		border-bottom: 10px solid #1a205c;
    border-right: 10px solid transparent;
		z-index: 5;
	}
	.sys-frame-inner::after {
		content: '';
		display: block;
    position: absolute;
    bottom: 1px;
    right: 1px;
		border-bottom: 10px solid #1a205c;
    border-left: 10px solid transparent;
		z-index: 5;
	}
	
	.sys-frame-inner {
		border: 1px solid #1a205c;
	}
	
	.p-time-wrap,
	.p-price-wrap {
		line-height: 1;
		
	}
	.p-time,
	.p-price {
		color: #1a205c;
		font-weight: 500;
	}
	.p-time {
		font-size: 4.2rem;
	}
	.p-price {
		font-size: 5.8rem;
	}
	.p-tani {
		font-size: 2.8rem;
	}
	.p-base {
		position: relative;
		font-size: 2.1rem;
		text-decoration: line-through;
		padding: 0 30px 0 10px;
	}
	.p-base::after {
		font-family: 'Material Icons';
		font-size: 1.8rem;
		content: "\eac9";
		position: absolute;
		top:  4px;
		right: 0;
	}
	
	
	#sys-basic .sys-frame-inner {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 0 50px;
		width: 100%;
		height: 100%;
		aspect-ratio: 1	/	0.417;
		background-image: url(../img/system/basic_bg.jpg);
		background-size: cover;
	}
	.sb-copy {
		font-size: 3.2rem;
		text-align: center;
		line-height: 1;
		color: #1a205c;
		margin-bottom: 20px;
	}
	#sys-basic ul {
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		margin-bottom: 10px;
		padding: 0 10px 20px;
		border-bottom: 1px solid #CCC;
	}
	#sys-basic ul::after {
		content: '';
		display: block;
		height: 100%;
		width: 1px;
		background-color: #CCC;
		position: absolute;
		left: calc(50% + 21px);
		top: 0;
	}
	#sys-basic li {
		position: relative;
		text-align: right;
	}
	#sys-basic li:nth-child(2)::before,
	#sys-basic li:nth-child(3)::before {
		content: '';
		display: block;
		width: 52px;
		height: 31px;
		background-image: url(../img/system/icon_reco1.png);
		background-size: cover;
		position: absolute;
		left: 25px;
		top: 21px;
	}
	#sys-basic li:nth-child(3)::before {
		background-image: url(../img/system/icon_reco2.png);
		left: 15px;
	}
	.sb-other {
		display: flex;
		justify-content: space-between;
		padding: 0 12px;
	}
	.sb-other-p {
		text-align: right;
		order: 2;
	}
	.sb-other-t {
		order: 1;
	}
	.sb-other-p p {
		line-height: 1;
	}
	.sb-other .p-price {
		font-size: 4.2rem;
		color: #c62e8b;
	}
	.sb-ot-tup {
		position: absolute;
		right: 60px;
		top: 264px;
	}
	.sb-ot-hon {
		padding-right: 30px;
		margin-bottom: 5px;
	}
	.sb-ot-hon .p-tani:first-child,
	.sb-ot-hup .p-tani:first-child {
		margin-right: 20px;
	}
	.sb-ot-mur {
		font-size: 2.4rem;
		font-weight: 500;
		color: #1a205c;;
	}
	
	
	#sys-date .sys-frame-inner {
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 0 50px;
		width: 100%;
		height: 100%;
		aspect-ratio: 1	/	0.249;
		background-image: url(../img/system/date_bg.jpg);
		background-size: cover;
	}
	#sys-date .sd-price {
		margin-bottom: 20px;
		padding: 0 20px 20px;
		border-bottom: 1px solid #CCC;
	}
	#sys-date .p-time-wrap {
		margin-right: 30px;
	}
	#sys-date .p-time {
		font-size: 6rem;
	}
	#sys-date .p-price {
		font-size: 7.2rem;
	}
	#sys-date .p-tani {
		font-size: 3.6rem;
	}
	#sys-date ul {
		color: #1a205c;
	}
	
  
	#sys-basic {
		margin-bottom: 50px;
	}
	
	#sys-date {
		margin-bottom: 50px;
	}
	
	#sys-play {
		margin-bottom: 50px;
	}
	#sys-play .sys-frame-inner {
		padding: 20px;
		background-color: #f7fbfe;
	}
	#sys-play .sp-play {
		font-size: 3rem;
		font-weight: 500;
		letter-spacing: -0.05em;
		color: #1a205c;
	}
	#sys-play .sp-play span {
		display: inline-block;
	}
	
	
	#sys-close {
		padding: 0 30px;
	}
	#sys-close h2 {
		font-size: 2.1rem;
		margin-bottom: 10px;
	}
	.sc--read1 {
		margin-bottom: 10px;
	}
	#sys-close ul {
		list-style: disc;
		list-style-position: inside;
		margin-bottom: 32px;
	}
	
}