@charset "Shift_JIS";

/* -----------------------------------------
	/otona/guide/ディレクトリ用CSS
----------------------------------------- */


/* -----------------------------------------
	/otona/guide/index.html
----------------------------------------- */
.contentsWrapper .guide_box,
.contentsWrapper .guide_box01 {
	overflow: hidden;
	margin-bottom: 50px;
}

.contentsWrapper .guide_box .img {
	float: right;
	width: 45%;
	max-width: 400px;
	margin-right: 20px;
}

.contentsWrapper .guide_box .text,
.contentsWrapper .guide_box .guide_box_h {
	float: left;
	width: 50%;
	max-width: 450px;
}

.contentsWrapper .guide_box01 .img {
	float: left;
	width: 45%;
	max-width: 400px;
}

.contentsWrapper .guide_box01 .text,
.contentsWrapper .guide_box01 .guide_box_h {
	float: right;
	width: 50%;
	max-width: 450px;
}

.contentsWrapper .guide02 .img {
	max-width: 375px;
	position: relative;
}

.contentsWrapper .guide02 .img .card {
	position: absolute;
	max-width: 247px;
	width: 50%;
}

.contentsWrapper .guide02 .img .card img {
	position: absolute;
	max-width: 147px;
	width: 80%;
}

.contentsWrapper .guide02 .img .card img.middle {
	top: 20px;
}

.contentsWrapper .guide02 .img .card img.zipang {
	top: 90px;
	left: 100px;
}

.contentsWrapper .guide03 .img {
	max-width: 302px;
}

.contentsWrapper .guide04 .img {
	max-width: 384px;
}

.contentsWrapper .guide05 .img {
	max-width: 384px;
}

.contentsWrapper #guide_middle {
	margin-bottom: 90px;
}

.contentsWrapper #guide_middle .s_heading,
.contentsWrapper #guide_zipang .s_heading{
	margin-bottom: 20px;
}

.contentsWrapper #guide_middle .card_info_content,
.contentsWrapper #guide_zipang .card_info_content{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 10px;
}

.contentsWrapper #guide_middle .card_info_content .cardImg,
.contentsWrapper #guide_zipang .card_info_content .cardImg {
	width: 211px;
	margin-right: 20px;
}
.contentsWrapper #guide_middle .card_info_content .card_info_txt,
.contentsWrapper #guide_zipang .card_info_content .card_info_txt {
	width: calc(100% - 231px);
}

.contentsWrapper #guide_middle .card_info_content .card_info_txt .card_info_txt_age,
.contentsWrapper #guide_zipang .card_info_content .card_info_txt .card_info_txt_age {
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 140%;
}

.contentsWrapper #guide_middle .card_info_content .card_info_txt .card_info_txt_age {
	color: #00804a;
}
.contentsWrapper #guide_zipang .card_info_content .card_info_txt .card_info_txt_age {
	color: #0040a6;
}


.contentsWrapper #guide_middle .card_info_content .card_info_txt01,
.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 {
	margin-bottom: 5px;
	font-size: 120%;
}

.contentsWrapper #guide_middle .card_info_content .card_info_txt01 .card_info_txtinn > span,
.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 .card_info_txtinn > span {
	font-size: 130%;
	line-height: 0.7;
	position: relative;
	margin-left: 5px;
}

.contentsWrapper #guide_middle .card_info_content .card_info_txt01 .card_info_txtinn > span:before,
.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 .card_info_txtinn > span:before {
	content: "";
	display: block;
	background: url(../img/ico_biccri.png) no-repeat;
	background-size: contain;
	width: 12px;
	height: 7px;
	position: absolute;
	top: -2px;
	left: -4px;
}


.contentsWrapper #guide_middle .middleText01,
.contentsWrapper #guide_zipang .zipangText01 {
	font-weight: bold;
	font-size: 130%;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.contentsWrapper #guide_middle .middleText01:before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #00924f;
	margin-right: 5px;
}

.contentsWrapper #guide_middle .middleBtn {
	background: #00924f;
}

.contentsWrapper #guide_middle .middleBtn02,
.contentsWrapper #middle .middleBtn02 {
	background: url(../img/bg_middlebtn.jpg) no-repeat 0 50% #00924f;
	background-size: 75%;
}

.contentsWrapper #middle .middleBtn03 {
	border: 2px solid #00924f;
	background: #fff;
}

.contentsWrapper #middle .middleBtn03::before,
.contentsWrapper #middle .middleBtn03::after {
	background: #00924f;
	opacity: 1;
}

.contentsWrapper #zipang .zipangBtn03 {
	border: 2px solid #0011B3;
	background: #fff;
}

.contentsWrapper #zipang .zipangBtn03::before,
.contentsWrapper #zipang .zipangBtn03::after {
	background: #0011B3;
	opacity: 1;
}

.contentsWrapper #guide_zipang .zipangText01:before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #2c30b3;
	margin-right: 5px;
}

.contentsWrapper #guide_zipang .zipangBtn {
	background: #2c30b3;
}

.contentsWrapper #guide_middle .middleBtn a,
.contentsWrapper #guide_zipang .zipangBtn a,
.contentsWrapper #zipang .zipangBtn02 a {
	padding: 10px 20px 10px 25px;
}

.contentsWrapper #guide_middle .middleBtn02 a,
.contentsWrapper #middle .middleBtn02 a {
	padding: 10px 20px 10px 25px;
	text-shadow: 0 2px 2px rgba(145,100,30,0.5);
}

.contentsWrapper #middle .middleBtn03 a{
	padding: 10px 20px 10px 25px;
	color: #00924f;
}

.contentsWrapper #zipang .zipangBtn03 a{
	padding: 10px 20px 10px 25px;
	color: #0011B3;
}

.contentsWrapper .btnList li + li {
	margin-top: 20px;
}

@media screen and (max-width: 640px) {
	/* -----------------------------------------
		/otona/guide/index.html
	----------------------------------------- */
	.contentsWrapper .guide_box,
	.contentsWrapper .guide_box01 {
		overflow: hidden;
		margin-bottom: 10%;
	}

	.contentsWrapper .guide_box .img,
	.contentsWrapper .guide_box01 .img {
		float: none;
		width: 80%;
		max-width: 100%;
		margin:0 auto 5%;
	}

	.contentsWrapper .guide_box .text,
	.contentsWrapper .guide_box .guide_box_h,
	.contentsWrapper .guide_box01 .text,
	.contentsWrapper .guide_box01 .guide_box_h {
		float: none;
		width: 100%;
		max-width: 100%;
		margin:0 auto 5%;
	}

	.contentsWrapper .guide02 .img,
	.contentsWrapper .guide03 .img,
	.contentsWrapper .guide04 .img,
	.contentsWrapper .guide05 .img {
		max-width: 100%;
	}

	.contentsWrapper .guide02 .img .card {
		position: absolute;
		max-width: 100%;
		width: 40%;
	}

	.contentsWrapper .guide02 .img .card img {
		position: absolute;
		max-width: 100%;
		width: 30%;
	}

	.contentsWrapper .guide02 .img .card img.middle {
		top: 7vw;
	}

	.contentsWrapper .guide02 .img .card img.zipang {
		top: 20vw;
		left: 18vw;
	}

	.contentsWrapper #guide_middle {
		margin-bottom: 15%;
	}

	.contentsWrapper #guide_middle .s_heading,
	.contentsWrapper #guide_zipang .s_heading{
		margin-bottom: 5%;
	}

	.contentsWrapper #guide_middle .card_info_content,
	.contentsWrapper #guide_zipang .card_info_content{
		display: block;
	}
	.contentsWrapper #guide_middle .card_info_content .cardImg,
	.contentsWrapper #guide_zipang .card_info_content .cardImg {
		max-width: 100%;
		width: 60%;
		margin: 0 auto;
	}

	.contentsWrapper #guide_middle .card_info_content .card_info_txt,
	.contentsWrapper #guide_zipang .card_info_content .card_info_txt {
		width: 100%;
		margin-top: 5%;
		text-align: center;
	}

	.contentsWrapper #guide_middle .card_info_content .card_info_txt01,
	.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 {
		width: 100%;
		font-size: 120%;
		display: flex;
		align-items: flex-end;
		margin-bottom: 5%;
	}

	.contentsWrapper #guide_middle .card_info_content .card_info_txt01 > span:first-child,
	.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 > span:first-child {
		width: 55%;
		text-align: right;
		margin-right: 4%;
		font-size: 4.3vw;
		}

	.contentsWrapper #guide_middle .card_info_content .card_info_txt01 .card_info_txtinn > span,
	.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 .card_info_txtinn > span {
		font-size: 9vw;
		line-height: 0.7;
		position: relative;
	}

	.contentsWrapper #guide_middle .card_info_content .card_info_txt01 .card_info_txtinn > span:before,
	.contentsWrapper #guide_zipang .card_info_content .card_info_txt01 .card_info_txtinn > span:before {
		content: "";
		display: block;
		background: url(../img/ico_biccri.png) no-repeat;
		background-size: contain;
		width: 20px;
		height: 10px;
		position: absolute;
		top: -1.5vw;
		left: -2vw;
	}

	.contentsWrapper #guide_middle .middleText01,
	.contentsWrapper #guide_zipang .zipangText01 {
		margin-bottom: 3%;
		padding-top: 5%;
	}


	.contentsWrapper #guide_middle .middleBtn02,
	.contentsWrapper #middle .middleBtn02 {
		background-size: contain;
	}

	.contentsWrapper #guide_middle .middleBtn a,
	.contentsWrapper #guide_zipang .zipangBtn a,
	.contentsWrapper #middle .middleBtn03 a,
	.contentsWrapper #zipang .zipangBtn02 a,
	.contentsWrapper #zipang .zipangBtn03 a {
		padding: 3% 6% 3% 8%;
		font-weight: normal;
	}

	.contentsWrapper #guide_middle .middleBtn02 a,
	.contentsWrapper #middle .middleBtn02 a {
		padding: 3% 6% 3% 8%;
		font-weight: normal;
		text-shadow: 0 2px 1px rgba(145,100,30,0.8);
	}

	.contentsWrapper .btnList li + li {
		margin-top: 4%;
	}
}

/* -----------------------------------------
	/otona/guide/middlezipang.html
----------------------------------------- */

.contentsWrapper #middle .s_heading,
.contentsWrapper #zipang .s_heading{
	margin-bottom: 20px;
}

.contentsWrapper #middle .card_info_content,
.contentsWrapper #zipang .card_info_content{
	display: flex;
	margin-bottom: 10px;
}

.contentsWrapper #middle .card_info_content .cardImg,
.contentsWrapper #zipang .card_info_content .cardImg {
	width: 280px;
	margin-right: 20px;
}

.contentsWrapper #middle .card_info_content .card_info_txt,
.contentsWrapper #zipang .card_info_content .card_info_txt {
	width: 100%;
}

.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txt01,
.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txt01 {
	margin-bottom: 5px;
	font-size: 120%;
}

.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txtinn > span,
.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txtinn > span {
	font-size: 130%;
	line-height: 0.7;
	position: relative;
	margin-left: 5px;
}

.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txtinn > span:before,
.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txtinn > span:before {
	content: "";
	display: block;
	background: url(../img/ico_biccri.png) no-repeat;
	background-size: contain;
	width: 12px;
	height: 7px;
	position: absolute;
	top: -2px;
	left: -4px;
}

.contentsWrapper #middle .card_info_content .card_info_txt .card_info_link,
.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link,
.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link01{
	text-align: right;
}

.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link01 {
	margin-top: 20px;
}

.contentsWrapper #middle .heading03:before {
	border-color: #00804a;
}

.contentsWrapper #middle .tbl-basic01 tr th {
	background: #f0f9f5;
	color: #00804a;
	font-weight: bold;
	text-align: center;
	width: 30%;
	font-size: 115%;
}

.contentsWrapper #middle .tbl-basic01 tr th,
.contentsWrapper #middle .tbl-basic01 tr td,
.contentsWrapper #zipang .tbl-basic01 tr th,
.contentsWrapper #zipang .tbl-basic01 tr td {
	padding: 20px;
}

.contentsWrapper #middle .tbl-basic01 .fontN,
.contentsWrapper #zipang .tbl-basic01 .fontN{
	font-weight: normal;
	color: #333333;
	font-size: 90%;
}

.contentsWrapper #zipang .heading03:before {
	border-color: #1b20c3;
}

.contentsWrapper #zipang .tbl-basic01 tr th {
	background: #f2f2fb;
	color: #3b3d7d;
	font-weight: bold;
	text-align: center;
	width: 30%;
	font-size: 115%;
}

/*「大人の休日倶楽部ジパング」と「JR東日本ジパング倶楽部」のサービス比較表*/
.contentsWrapper #zipang .zipang-tokuten_table tr td {
	text-align: center;
}

.contentsWrapper #zipang .zipang-tokuten_table tr .rb {
	background: #fffcf7;
}

.contentsWrapper #zipang .zipang-tokuten_table tr .bgW {
	background: #fff;
}

.contentsWrapper #zipang .zipang-tokuten_table tr .card02 {
	display: flex;
	justify-content: space-between;
	width: 115px;
	margin: 0 auto 10px;
}
.contentsWrapper #zipang .zipang-tokuten_table tr .card01 {
	width: 27%;
	max-width: 30px;
	margin: 0 auto 10px;
}
.contentsWrapper #zipang .zipang-tokuten_table tr .card02 li:first-child {
	width: 27%;
	max-width: 30px;
}

.contentsWrapper #zipang .zipang-tokuten_table tr .card02 li:last-child {
	width: 72%;
	max-width: 73px;
}


.contentsWrapper #zipang .zipang-tokuten_table .icon01,
.contentsWrapper #zipang .zipang-tokuten_table .icon02,
.contentsWrapper #zipang .zipang-tokuten_table .icon03{
	position: relative;
}

.contentsWrapper #zipang .zipang-tokuten_table .icon01 > span,
.contentsWrapper #zipang .zipang-tokuten_table .icon02 > span,
.contentsWrapper #zipang .zipang-tokuten_table .icon03 > span {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	display: inline-block;
	width: 13px;
}

.contentsWrapper #zipang .zipang-tokuten_table .icon01:after {
	content: "○";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.contentsWrapper #zipang .zipang-tokuten_table .icon02:after {
	content: "△";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.contentsWrapper #zipang .zipang-tokuten_table .icon03:after {
	content: "×";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}



/*大人の休日倶楽部ミドル会員の方*/
#baseContainer .middleForzipang {
	background-image: linear-gradient(#f4f4fa 50%, #e1e1f2 50%, #e1e1f2);
	background-size: 4px 4px;
	padding: 20px;
}
#baseContainer .middleForzipang .middleForzipang_box {
	max-width: 620px;
	margin: 0 auto;
}
#baseContainer .middleForzipang .middleForzipang_box a {
	background: #fff;
	display: flex;
	align-items: center;
	padding: 30px;
	color: #333333;
	text-decoration: none;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

#baseContainer .middleForzipang .middleForzipang_box a:before {
	content: "";
	display: block;
	width: 3px;
	height: 7px;
	background: #3438ca;
	transform: skewX(45deg);
	position: absolute;
	top: -7px;
	bottom: 0;
	margin: auto;
	right: 10px;
}

#baseContainer .middleForzipang .middleForzipang_box a:after {
	content: "";
	display: block;
	width: 3px;
	height: 7px;
	background: #3438ca;
	transform: skewX(-45deg);
	position: absolute;
	top: 7px;
	bottom: 0;
	margin: auto;
	right: 10px;
}

#baseContainer .middleForzipang .middleForzipang_box a .card {
	width: 173px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
}

#baseContainer .middleForzipang .middleForzipang_box a .text {
	width: calc(100% - 203px);
	margin-left: 30px;
	margin-bottom: 0;
	font-weight: bold;
	font-size: 120%;
}

#baseContainer .middleForzipang .middleForzipang_box a .card li {
	max-width: 73px;
	position: relative;
}

#baseContainer .middleForzipang .middleForzipang_box a .card li:first-child:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-left: 10px solid #d20202;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: -30px;
}
#baseContainer .middleForzipang .middleForzipang_box a:hover {
	opacity: 0.7;
	background: #fff;
}
#baseContainer .middleForzipang .middleForzipang_box a:hover img {
	opacity: 1;
}


@media screen and (max-width: 640px) {
	/* -----------------------------------------
		/otona/guide/middlezipang.html
	----------------------------------------- */
	.contentsWrapper #middle .s_heading,
	.contentsWrapper #zipang .s_heading{
		margin-bottom: 10%;
	}

	.contentsWrapper #middle .card_info_content,
	.contentsWrapper #zipang .card_info_content{
		display: block;
		margin-bottom: 5%;
	}

	.contentsWrapper #middle .card_info_content .cardImg,
	.contentsWrapper #zipang .card_info_content .cardImg {
		width: 60%;
		margin: 0 auto 1em;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt,
	.contentsWrapper #zipang .card_info_content .card_info_txt {
		width: 100%;
		margin-bottom: 10%;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txt01,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txt01 {
		display: flex;
		align-items: flex-end;
		margin-bottom: 5%;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txt01 > span:first-child,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txt01 > span:first-child {
		width: 55%;
		text-align: right;
		margin-right: 4%;
		font-size: 4.3vw;
	}
	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txtinn > span,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txtinn > span {
		font-size: 9vw;
		line-height: 0.7;
		position: relative;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_txtinn > span:before,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_txtinn > span:before {
		content: "";
		display: block;
		background: url(../img/ico_biccri.png) no-repeat;
		background-size: contain;
		width: 20px;
		height: 10px;
		position: absolute;
		top: -1.5vw;
		left: -2vw;
	}
	
	.contentsWrapper .card_info_content .card_info_txt .sp_ta {
		text-align: center;
	}
	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_link,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link {
		text-align: center;
	}
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link01 {
		text-align: left;
		width: 90%;
		margin: 0 auto 5%;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_link a {
		background: #00924f;
	}

	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link a {
		background: #2c30b3;
	}
	
	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_link a,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link a{
		width: 90%;
		margin: 0 auto;
		display: block;
		padding: 5% 5% 5% 8%;
		font-size: 100%;
		text-decoration: none;
		color: #fff;
		border-radius: 8px;
	}

	.contentsWrapper #middle .card_info_content .card_info_txt .card_info_link a:before,
	.contentsWrapper #zipang .card_info_content .card_info_txt .card_info_link a:before {
		content: "";
		display: block;
		background: url(/otona/common/img/ico-window_w.png) no-repeat;
		background-size: contain;
		width: 18px;
		height: 12px;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 10px;
	}
	
	

	.contentsWrapper #middle .tbl-basic01 tr th {
		width: 40%;
		font-size: 115%;
	}

	.contentsWrapper #middle .tbl-basic01 tr th,
	.contentsWrapper #middle .tbl-basic01 tr td,
	.contentsWrapper #zipang .tbl-basic01 tr th,
	.contentsWrapper #zipang .tbl-basic01 tr td {
		padding: 5%;
	}

	.contentsWrapper #middle .tbl-basic01 .fontN,
	.contentsWrapper #zipang .tbl-basic01 .fontN{
		font-weight: normal;
		color: #333333;
		font-size: 90%;
	}

	.contentsWrapper #zipang .tbl-basic01 tr th {
		background: #f2f2fb;
		font-weight: bold;
		text-align: center;
		width: 40%;
		font-size: 115%;
	}

/*「大人の休日倶楽部ジパング」と「JR東日本ジパング倶楽部」のサービス比較表*/
	.contentsWrapper #zipang .zipang-tokuten_table tr {
		display: flex;
		flex-wrap: wrap;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr th {
		width: 100%;
	}
	.contentsWrapper #zipang .zipang-tokuten_table tr td {
		width: 50%;
	}
	.contentsWrapper #zipang .tbl-basic01.zipang-tokuten_table tr td:nth-of-type(1) {
		border-right: none;
		border-top: none;
		border-bottom: none;
	}

	.contentsWrapper #zipang .tbl-basic01.zipang-tokuten_table tr td:nth-of-type(2) {
		border-top: none;
		border-bottom: none;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr:first-child th:first-child {
		display: none;
	}
	.contentsWrapper #zipang .zipang-tokuten_table tr:first-child th {
		width: 50%;
	}

	/*「大人の休日倶楽部ジパング」と「JR東日本ジパング倶楽部」のサービス比較表*/
	.contentsWrapper #zipang .zipang-tokuten_table tr td {
		text-align: center;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr .rb {
		background: #fffcf7;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr .bgW {
		background: #fff;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr .card02 {
		display: flex;
		justify-content: space-between;
		width: 115px;
		margin: 0 auto 10px;
	}
	.contentsWrapper #zipang .zipang-tokuten_table tr .card01 {
		width: 27%;
		max-width: 30px;
		margin: 0 auto 10px;
	}
	.contentsWrapper #zipang .zipang-tokuten_table tr .card02 li:first-child {
		width: 27%;
		max-width: 30px;
	}

	.contentsWrapper #zipang .zipang-tokuten_table tr .card02 li:last-child {
		width: 72%;
		max-width: 73px;
	}




/*大人の休日倶楽部ミドル会員の方*/
	#baseContainer .middleForzipang {
		padding: 8% 3%;
	}
	#baseContainer .middleForzipang .middleForzipang_box {
		max-width: 100%;
		margin: 0 auto;
	}
	#baseContainer .middleForzipang .middleForzipang_box a {
		padding: 3% 8% 3% 3%;
		color: #333333;
		text-decoration: none;
		position: relative;
		border-radius: 8px;
	}

	#baseContainer .middleForzipang .middleForzipang_box a:before {
		right: 3%;
	}

	#baseContainer .middleForzipang .middleForzipang_box a:after {
		right: 3%;
	}

	#baseContainer .middleForzipang .middleForzipang_box a .card {
		width: 18%;
		display: block;
		margin-bottom: 0;
	}

	#baseContainer .middleForzipang .middleForzipang_box a .text {
		width: 80%;
		margin-left: 5%;
		margin-bottom: 0;
		font-weight: bold;
		font-size: 120%;
	}

	#baseContainer .middleForzipang .middleForzipang_box a .card li {
		max-width: 100%;
		position: relative;
	}

	#baseContainer .middleForzipang .middleForzipang_box a .card li:first-child {
		margin-bottom: 30%;
	}

	#baseContainer .middleForzipang .middleForzipang_box a .card li:first-child:after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-top: 2.1vw solid #d20202;
		border-right: 2.1vw solid transparent;
		border-left: 2.1vw solid transparent;
		border-bottom: 2.1vw solid transparent;
		position: absolute;
		top: auto;
		margin: auto;
		right: 0;
		left: 0;
		bottom: -5.3vw;
	}
}

/* -----------------------------------------
	/otona/guide/ticket.html
----------------------------------------- */
#otona_wari01 .otona_wari_img {
	display: flex;
	justify-content: space-around;
}

#otona_wari01 .otona_wari_img li {
	max-width: 400px;
	width: 44%;
}
#otona_wari02 h2 {
	background: #0011B3;
	color: #fff;
	padding: 15px;
	font-size: 145%;
	margin-bottom: 30px;
}

#otona_wari02 .tbl-basic01.wari02 tr th {
	background: #0011B3;
}


#otona_wari04 .tbl-basic01.wari04 tr th {
	background: #008D3E;
}


#otona_wari04 .otona_wari04_bnr {
	max-width: 688px;
	margin: 0 auto 25px;
}

@media screen and (max-width: 640px) {
/* -----------------------------------------
	/otona/guide/ticket.html
----------------------------------------- */
	#otona_wari01 .otona_wari_img {
		display: block;
	}

	#otona_wari01 .otona_wari_img li {
		max-width: 100%;
		width: 100%;
	}


	#otona_wari02 h2 {
		background: #0011B3;
		color: #fff;
		padding: 3%;
		font-size: 145%;
		margin-bottom: 5%;
	}

	#otona_wari04 .otona_wari04_bnr {
		max-width: 688px;
		margin: 0 auto 5%;
	}
}

/* -----------------------------------------
	/otona/guide/point.html
----------------------------------------- */
.contentsWrapper .pointList li > a {
	border: 1px solid #e2e2e2;
	display: flex;
	align-items: center;
	padding: 40px 30px;
	position: relative;
	margin-bottom: 30px;
}

.contentsWrapper .pointList li > a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 6px solid #d6d6d6;
	border-right: 6px solid #d6d6d6;
	border-left: 6px solid transparent;
	border-bottom: 6px solid transparent;
	position: absolute;
	right: 5px;
	top: 5px;
}
.contentsWrapper .pointList li.blank:after {
	content: none;
}
.contentsWrapper .pointList li.blank > a:after {
	content: "";
	display: block;
	background: url(/otona/common/img/ico-window.png) no-repeat;
	background-size: contain;
	opacity: 0.4;
	width: 18px;
	height: 12px;
	border:none;
	position: absolute;
	right: 5px;
	top: 5px;
}

.contentsWrapper .pointList li > .text h3 {
	font-size: 120%;
	margin-bottom: 15px;
}
.contentsWrapper .pointList li > .text .link02 a:before {
	top: 6px;
}

.contentsWrapper .pointList li > .text .link02 a:after {
	top: 12px;
}

.contentsWrapper .thankspoint_heading {
	color: #008cd0;
	font-size: 130%;
	margin-bottom: 15px;
	display: flex;
}

.contentsWrapper .thankspoint_heading:before {
	content: "";
	background: url(/otona/guide/img/point/ico_point_thankspoint.png) no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	margin-right: 5px;
}

.contentsWrapper .ekinet_heading {
	color: #007a52;
	font-size: 130%;
	margin-bottom: 15px;
	display: flex;
}

.contentsWrapper .ekinet_heading:before {
	content: "";
	display: block;
	background: url(/otona/guide/img/point/ico_point_ekinet.png) no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	margin-right: 5px;
}

.contentsWrapper .ekinet_img {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.contentsWrapper .ekinet_img > img{
	width: 50%;
}


/*大休カード2枚重ね*/
.card_overlap {
	position: relative;
	width: 45%;
}

.card_overlap img {
	position: absolute;
	display: block;
}
.card_overlap img:first-child {
	width: 85px;
	top: 10px;
	right: 0;
	z-index: 2;
}

.card_overlap img:last-child {
	width: 85px;
	top: 35px;
	left: 0;
	z-index: 1;
}

.contentsWrapper .ot9_heading {
	color: #7a6f38;
	font-size: 130%;
	margin-bottom: 15px;
	display: flex;
}

.contentsWrapper .ot9_heading:before {
	content: "";
	display: block;
	background: url(/otona/guide/img/point/ico_point_ot9.png) no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	margin-right: 5px;
}

/* 18.10.19 追加・修正 */
.contentsWrapper .pointDescription {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.contentsWrapper .pointDescription > div:first-child { flex-basis: 640px; }
.contentsWrapper .pointDescription > div:last-child {
	flex-basis: 290px;
	padding: 10px 19px 15px;
	border: 1px #d2d2d2 solid;
	border-radius: 6px;
}
_:-ms-lang(x), .contentsWrapper .pointDescription > div:last-child {
	/* IE10+（Edgeも全て含む）*/
	flex-basis: 250px;
}
.contentsWrapper .pointDescription section > h3 {
	margin-bottom: 5px;
	padding-left: 55px;
	padding-top: calc((34px - 1.29em) / 2);
	min-height: 34px;
	background: url(/otona/guide/img/point/ico_creditcard.png) no-repeat left top / 44px 34px;
}
.contentsWrapper .pointDescription section.suica > h3 { background-image: url(/otona/guide/img/point/ico_suica.png); }
.contentsWrapper .pointDescription section.jrepoint> h3 { background-image: url(/otona/guide/img/point/ico_jrepoint.png); }
.contentsWrapper .pointDescription section.travel > h3 { background-image: url(/otona/guide/img/point/ico_travel.png); }

.contentsWrapper .pointDescription .jrepoint h4 {
	font-size: 112%;
	margin-top: 1em;
	margin-bottom: 5px;
	padding-left: 45px;
	padding-top: calc((34px - 1.29em) / 2);
	min-height: 34px;
	background: url(/otona/guide/img/point/ico_jrep-card.png) no-repeat left top / 34px 34px;
}
.contentsWrapper .pointDescription .jrepoint h4.ttl-jrep-suica { background-image: url(/otona/guide/img/point/ico_jrep-suica.png); }

.contentsWrapper .pointDescription section + section { margin-top: 2em; }
.contentsWrapper .pointDescription .pointDescriptionInner {
	display: flex;
	justify-content: space-between;
}
.contentsWrapper .pointDescription .pointDescriptionInner > .text { flex-basis: 60%; }
.contentsWrapper .pointDescription .pointDescriptionInner > .image { flex-basis: 37%; }

.contentsWrapper .ot9pointDescription {
	margin-top: 2em;
	padding: 40px 20px 23px;
	background: #faf8ed url(/otona/guide/img/point/bg_point01.png) no-repeat left top;
}
.contentsWrapper .ot9pointDescription > h3 {
	color: #7a6f38;
	font-size: 1.9em;
	letter-spacing: .05em;
}
.contentsWrapper .ot9pointDescriptionBlock {
	display: flex;
	justify-content: space-between;
}
.contentsWrapper .ot9pointDescriptionBlock > * {
	flex-basis: 49%;
	border: 1px #dcd1c6 solid;
	border-radius: 6px;
	background: #fff;
	margin-bottom: 20px;
	padding: 15px 20px;
}
_:-ms-lang(x), .contentsWrapper .ot9pointDescriptionBlock > * {
	/* IE10+（Edgeも全て含む）*/
	flex-basis: calc(49% - 40px);
}
.contentsWrapper .ot9pointDescriptionBlock > dl > dt {
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 1em;
	padding-bottom: 0.8em;
	border-bottom: 1px #7a6f38 solid;
}
.contentsWrapper .ot9pointDescriptionBlock > dl > dd > ul { margin-bottom: 0; }
.contentsWrapper .ot9pointDescriptionBlock > dl > dd > ul > li {
	padding-left: 18px;
	background: url(/otona/common/img/disk.gif) no-repeat 3px 0.5em;
}


.contentsWrapper .storePoint .ttlBlock,
.contentsWrapper .usePoint .ttlBlock {
	display: flex;
	align-items: center;
	margin: 60px 0 0;
	padding: 10px 0;
	background: #f5ebf1;
}
.contentsWrapper .storePoint .ttlBlock > *,
.contentsWrapper .usePoint .ttlBlock > * { margin-bottom: 0; }
.contentsWrapper .storePoint .ttlBlock > h3,
.contentsWrapper .usePoint .ttlBlock > h3 {
	font-size: 2.4em;
	flex-basis: 7em;
}
.contentsWrapper .storePoint .ttlBlock > ul,
.contentsWrapper .usePoint .ttlBlock > ul {
	flex-basis: calc(100% - 16em)\9; /* IE */
	display: flex;
	flex-wrap: wrap;
	font-size: 1.1em;
}
.contentsWrapper .storePoint .ttlBlock > ul > li,
.contentsWrapper .usePoint .ttlBlock > ul > li {
	margin-right: 30px;
	padding: 0.2em 0;
}

.contentsWrapper .storeList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contentsWrapper .storeList > * {
	flex-basis: 450px;
	margin-top: 40px;
}
.contentsWrapper .storeList > dl > dt { margin-bottom: 20px; }
.contentsWrapper .storeList h4 {
	font-weight: bold;
	font-size: 1.15em;
	padding-left: 20px;
	position: relative;
}
.contentsWrapper .storeList h4:before {
	content: "";
	display: block;
	width: 6px;
	height: 1.5em;
	border-radius: 3px;
	background: #a0988f;
	position: absolute;
	left: 0;
	top: 0;
}

.contentsWrapper .useList {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.contentsWrapper .useList > * {
	margin-top: 40px;
}
.contentsWrapper .useList > *:nth-child(odd) { display: flex; flex-wrap: wrap; }
.contentsWrapper .useList > *:nth-child(odd) .image { order: 1; }
.contentsWrapper .useList > *:nth-child(odd) .text { order: 2; }
.contentsWrapper .useList h4 {
	font-weight: bold;
	font-size: 1.15em;
	margin-bottom: 0.8em;
}
.contentsWrapper .useList .image { margin-right: 40px; }
.contentsWrapper .useList .text,
.contentsWrapper .useList .image > img { width: 300px\9 !important; /* IE */ }


@media screen and (max-width: 950px) {
/* -----------------------------------------
	/otona/guide/point.html
----------------------------------------- */

	.contentsWrapper .pointDescription > div:first-child { flex-basis: 65%; }
	.contentsWrapper .pointDescription > div:last-child { flex-basis: 32%; }
	_:-ms-lang(x), .contentsWrapper .pointDescription > div:last-child {
		/* IE10+（Edgeも全て含む）*/
		flex-basis: calc(32% - 40px);
	}
	.contentsWrapper .storeList > * { flex-basis: 48%; }
}

@media screen and (max-width: 640px) {
/* -----------------------------------------
	/otona/guide/point.html
----------------------------------------- */
	.contentsWrapper .pointList li > a {
		width: 80%;
		margin: 0 auto 5%;
		padding: 10% 7%;
	}

	.contentsWrapper .pointList li > a:after {
		right: 3%;
		top: 5%;
	}

	.contentsWrapper .pointList li.blank > a:after {
		right: 2%;
		top: 5%;
	}

	.contentsWrapper .pointList li > .text h3 {
		font-size: 120%;
		margin-bottom: 3%;
	}

	.contentsWrapper .ekinet_img {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 80% !important;
	}
	.contentsWrapper .ekinet_img > img{
		width: 50% !important;
	}


	/*大休カード2枚重ね*/
	.card_overlap {
		position: relative;
		width: 45%;
	}

	.card_overlap img {
		position: absolute;
		display: block;
		width: 80% !important;
	}


	.contentsWrapper .thankspoint_heading,
	.contentsWrapper .ekinet_heading,
	.contentsWrapper .ot9_heading{
		margin-bottom: 5%;
		justify-content: center;
	}
	
	.contentsWrapper .point_img {
		width: 60%;
		margin: 0 auto;
	}
	
	
	
	/* 18.10.19 追加・修正 */
	.contentsWrapper .pointDescription,
	.contentsWrapper .pointDescription .pointDescriptionInner,
	.contentsWrapper .ot9pointDescriptionBlock,
	.contentsWrapper .storePoint .ttlBlock,
	.contentsWrapper .usePoint .ttlBlock,
	.contentsWrapper .storePoint .ttlBlock > ul,
	.contentsWrapper .usePoint .ttlBlock > ul,
	.contentsWrapper .storeList,
	.contentsWrapper .useList { display: block; }
	.contentsWrapper .ot9pointDescription { margin-left: -2%; margin-right: -2%; }
	.contentsWrapper .ot9pointDescription > h3 { margin-bottom: 15px; }
	.contentsWrapper .storePoint .ttlBlock > ul > li,
	.contentsWrapper .usePoint .ttlBlock > ul > li {
		margin-right: 0;
		padding: 0.2em 1em;
	}
	.contentsWrapper .useList {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.contentsWrapper .useList .text { flex-basis: 52%; order: 1 !important; }
	.contentsWrapper .useList .image { flex-basis: 45%; order: 2 !important; margin-right: 0; }
	.contentsWrapper .useList h4 { margin-bottom: 0.4em; }
	
}

/* -----------------------------------------
	/otona/guide/service.html
----------------------------------------- */

.contentsWrapper .tokuten_guide {
	background: #eeeeee;
	padding: 20px;
	display: flex;
	max-width: 700px;
	margin: 20px auto 0;
}

.contentsWrapper .tokuten_guide .tokuten_guide_img {
	background: #F7F7F7;
	text-align: center;
	width: 30%;
	margin-right: 3%;
	margin-bottom: 0;
}

.contentsWrapper .tokuten_guide .tokuten_guide_img img {
	width: 100%;
}

.contentsWrapper .tokuten_guide .tokuten_guide_img > img {
	width: 50%;
}

.contentsWrapper .tokuten_guide .right {
	width: 67%;
}

.contentsWrapper .tokuten_guide .right h3 {
	font-size: 120%;
	margin-bottom: 15px;
}


.contentsWrapper .tokuten_guide .right .tokuten_guide_btn a {
	width: 300px;
	margin: 0 auto;
	display: block;
	background: #8E8456;
	position: relative;
	padding: 18px 50px 18px 50px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.contentsWrapper .tokuten_guide .right .tokuten_guide_btn a:hover {
	opacity: 0.5;
}
.contentsWrapper .tokuten_guide .right .tokuten_guide_btn a:before {
	content: "";
	display: inline-block;
	background: url(/otona/common/img/ico-window_white.png) no-repeat;
	background-size: contain;
	width: 24px;
	height: 18px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 20px;
}


.contentsWrapper .serviceList {
	display: flex;
	flex-wrap: wrap;
	margin: 40px 0 0 ;
}

.contentsWrapper .serviceList > li {
	max-width: 300px;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 40px;
}

.contentsWrapper .serviceList > li:nth-child(3n){
	margin-right: 0;
}

.contentsWrapper .serviceList > li .serviceList_title {
	display: flex;
	align-items: center;
	min-height: 62px;
	font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
	font-size: 147%;
	margin-bottom: 15px;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1, 1.01);
	-moz-transform-origin: 0 0;
	-moz-transform: scale(1, 1.01);
	-ms-transform-origin: 0 0;
	-ms-transform: scale(1, 1.02);
	-o-transform-origin: 0 0;
	-o-transform: scale(1, 1.01);
}

.contentsWrapper .serviceList > li .serviceList_title .iconNumber {
	display: flex;
	color: #7e733d;
	align-items: center;
	font-size: 134%;
	justify-content: center;
	border: 1px solid #7e733d;
	border-radius: 50%;
	padding: 10px;
	width: 57px;
	height: 57px;
}

.contentsWrapper .serviceList > li .serviceList_title p {
	width: calc(100% - 57px);
	margin-left: 10px;
	margin-bottom: 0;
}

/*検索窓*/

.tokuten-searchKeyword-box .searchKeyword{
	display: flex;
	width: 688px;
	justify-content: space-between;
	position: relative;
}

.tokuten-searchKeyword-box .searchKeyword input{
	min-height: 44px;
	font-size: 129%;
	box-sizing: border-box;
	border-radius: 6px;
	
}

.tokuten-searchKeyword-box .searchKeyword input::placeholder {
 color: #b3b3b3;
}

.tokuten-searchKeyword-box .searchKeyword input[type=text]{
	width: 400px;
	padding: 0 0 0 5px;
	border: #333 solid 1px;
}

.tokuten-searchKeyword-box .searchKeyword input[type=submit]{
	width: 271px;
	padding: 0;
	border:#8e8456 1px solid;
	background: #8e8456 url(/otona/common/img/arrow_wh.png) no-repeat 98% 48%;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.tokuten-searchKeyword-box .searchKeyword input[type=submit]:hover{
	opacity: 0.8;
	cursor: pointer;
}

.benefits .link02 a:before{
	top: 7px;
}

.benefits .link02 a:after{
	top:13px;
}

.pc-disnone{
	display: none;
}

@media screen and (max-width: 640px) {
/* -----------------------------------------
	/otona/guide/service.html
----------------------------------------- */
	.contentsWrapper .serviceList {
		display: block;
		flex-wrap: wrap;
		margin: 10% 0 0;
	}

	.contentsWrapper .serviceList > li {
		max-width: 100%;
		width: 100%;
		margin-right: 0;
		margin-bottom: 7%;
		padding-bottom: 3%;
		border-bottom: 1px dotted #d9d9d9;
	}

	.contentsWrapper .serviceList > li:last-child{
		border-bottom: none;
	}

	.contentsWrapper .serviceList > li .serviceList_title {
		margin-bottom: 5%;
		min-height: auto;
	}

	.contentsWrapper .serviceList > li .serviceList_title .iconNumber {
		padding: 3%;
		width: 57px;
		height: 57px;
	}

	.contentsWrapper .serviceList > li .serviceList_title p {
		width: calc(100% - 57px);
		margin-left: 3%;
		margin-bottom: 0;
	}

	.contentsWrapper .tokuten_guide {
		padding: 5%;
		display: block;
		max-width: 100%;
		margin: 8% auto 0;
	}

	.contentsWrapper .tokuten_guide .tokuten_guide_img {
		background: #F7F7F7;
		text-align: center;
		width: 100%;
		margin-right: 0;
		margin-bottom: 5%;
	}

	#baseContainer .contentsWrapper .tokuten_guide .tokuten_guide_img > img {
		width: 50%;
	}

	.contentsWrapper .tokuten_guide .right {
		width: 100%;
	}

	.contentsWrapper .tokuten_guide .right h3 {
		font-size: 120%;
		margin-bottom: 5%;
	}


	.contentsWrapper .tokuten_guide .right .tokuten_guide_btn a {
		width: 100%;
		padding: 8%;
	}
	.contentsWrapper .tokuten_guide .right .tokuten_guide_btn a:before {
		left: 5%;
	}
	
	.tokuten-searchKeyword-box .searchKeyword{
	display: block;
	width: 100%;
	}
	.tokuten-searchKeyword-box .searchKeyword input[type=text],.tokuten-searchKeyword-box .searchKeyword input[type=submit]{
	width: 100%;
	}
	
	.tokuten-searchKeyword-box .searchKeyword input[type=submit]:hover{
	opacity: 1;
}
	
	.pc-disnone{
	display: block;
}

	.contentsWrapper .serviceList > li .fl-img {/* 幅いっぱいの中でPCのみ左右振り分け（取手駅） */
		max-width: 100%;
		width: 100%;
	}


}


/* -----------------------------------------
	ジパングweb入会対応
----------------------------------------- */
/* 黄色いボタン */
.btn_yellow {
	border-bottom: 1px solid #614c00;
	background-image: linear-gradient(to bottom, #ffe79d, #f6c007);
}

.btn_yellow a {
	display: flex;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #000;
	text-shadow: 0 1px 1px #fff;
	justify-content: center;
	align-items: center;
}

/* ご入会方法について */
.j_method-web {
	display: flex;
	align-items: center;
}

.j_method-web .j_method_link {
	width: 50%;
}

.contentsWrapper .j_method-web .j_method_link > .web a {
	padding: 30px;
}

.j_method-web .j_method_linkText {
	margin-bottom: 0;
	margin-left: 40px;
}

.j_method-web .j_method_linkText > li:last-child p {
	margin-bottom: 0;
}

@media screen and (max-width: 640px) {
	.j_method-web {
		flex-direction: column;
	}
	
	.j_method-web .j_method_link {
		width: 100%;
	}
	
	.contentsWrapper .j_method-web .j_method_link > .web a {
		padding: 8% 5%;
	}
	
	.j_method-web .j_method_linkText {
		margin-top: 6%;
		margin-left: 0;
		text-align: center;
	}
}


/*--------------------------
2023/06/13追記 販促動画
---------------------------*/
.blockInner_06 > .image p {
	position: relative;
}
.btn_watch-movie > a {
	display: inline-block;
	width: 200px;
	padding: 10px;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	background: #8E8456;
	border-radius: 6px;
	position: relative;
	text-align: center;
	font-size: 115.4%;
	transition: .3s ease background;
}
.btn_watch-movie > a:hover { opacity: 0.8; }
.btn_watch-movie > a:before {
	display: inline-block;
	content: "";
	width: 20px;
	height: 18px;
	margin-right: 10px;
	background: url(/otona/tvcm/img/icon_tvcm.png) no-repeat center / contain;
	vertical-align: middle;
	transform: translateY(-0.1em);
}
@media screen and (max-width: 640px) {
	.btn_watch-movie > a {
		width: 100%;
	}
}
.ico_watch-movie::after {
	display: block;
	position: absolute;
	content: "";
	width: 60%;
	height: 60%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(/otona/guide/img/ticket/btn_start_plusmovie.png) no-repeat center / contain;
}

/* --- modal --- */
#modal {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#modalBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 99999;
}
#modalBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.50);
	z-index: 1;
}
#modalBoxContents {
	padding: 50px 20px 20px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

#modalBoxContents iframe { vertical-align: bottom; }
#modalBoxContents .modalClose {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	position: absolute;
	top: 10px;
	right: 20px;
}
#modalBoxContents .modalClose:hover { cursor: pointer; }
#modalBoxContents .modalClose:before,
#modalBoxContents .modalClose:after {
	display: block;
	content: "";
	width: 0px;
	height: 100%;
	border-right: 3px #000 solid;
	position: absolute;
	right: 12px;
	top: 0;
	transition: .3s ease border;
}

#modalBoxContents .modalClose:before { transform: rotate(45deg); }
#modalBoxContents .modalClose:after { transform: rotate(-45deg); }
#modalBoxContents .modalClose:hover:before,
#modalBoxContents .modalClose:hover:after { border-color: #666; }


@media screen and (max-width: 640px) {

	#modalBoxContents {
		width: 100%;
		padding: calc(4vw + 30px) 2vw 6vw;
	}
	#modalBoxContents .modalClose {
		right: 2vw;
		top: 2vw;
	}

	#modalBoxContents iframe {
		width: 100%;
		height: 54vw; /* borderが無い場合は56.25vw */
	}
}
@media all and (min-width: 641px) {
	#modalBoxContents iframe {
		/* 640x360 */
		width: 640px;
		height: 360px;
	}
	/* 低解像度の動画の場合 */
	#modalBox.low #modalBoxContents iframe {
		/* 480x270 */
		width: 480px;
		height: 270px;
	}
}