@charset "utf-8";

*, ::before, ::after {
    box-sizing: inherit;
}
.l-wrapper {
	position: relative;
	margin: 0 auto;
}
.l-wrapper img {
	vertical-align: middle;
	max-width: 100%;
}
@media (max-width: 1024px) {
	.l-wrapper {
		margin: 18px auto 0;
	}
}

@media (max-width: 640px) {
	.l-wrapper {
		margin: 0 auto;
	}
}

.inner {
    margin: 0 auto;
    max-width: 1260px;
}
@media screen and (max-width: 980px) {
	.inner {
		width: auto;
		margin: 0 10px;
	}
}
/*-----------------------------------------------------*/
/* キャンペーン応募条件（必要条件と対象）エリアのスタイル
/*-----------------------------------------------------*/
#cp-conditions {
	margin: 0 auto min(10vw, 100px);
	padding-left: min(3vw, 30px);
	padding-right: min(3vw, 30px);
	max-width: 1260px;
	text-align: left;
	font-size: 16px;
	margin-bottom: -100px;
}
@media screen and (min-width:641px) {
	dl.display_terms {
		width: 99%;
		margin: 5px 0;
		padding: 0 20px;
		letter-spacing: -.4em;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}
	dl.display_terms dt {
		position: relative;
		padding: 3px 20px 0 0;
		font-weight: bold;
		display: inline-block;
		letter-spacing: normal;
		width: 110px;
	}
	dl.display_terms dt::before {
		position: absolute;
		width: 7px;
		height: 7px;
		right: 10px;
		top: 6px;
		border-top: 2px solid #333333;
		border-right: 2px solid #333333;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		vertical-align: middle;
		content: "";
	}
	dl.display_terms dd {
		vertical-align: top;
		display: inline-block;
		letter-spacing: normal;
		width: 85%;
	}
	dl.display_terms dd ul.term_item {
		text-align: left;
		letter-spacing: -.4em;
		width: auto;
	}
	dl.display_terms dd ul.term_item li {
		background-color: #0086CD;
		border: 1px solid #0086CD;
		border-radius: 4px;
		padding: 2px 4px;
		margin: 0 5px 5px 0;
		color: #FFFFFF;
		font-weight: bold;
		display: inline-block;
		letter-spacing: normal;
	}
}
@media screen and (max-width: 980px) {
    #cp-conditions {
        margin-bottom: -18%;
    }
	dl.display_terms {
		width: 100%;
		padding: 0;
		letter-spacing: -.4em;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}
	dl.display_terms dt {
		padding-left: 10px;
        width: 15%;
	}
	dl.display_terms dd {
		width: 85%;
	}
}
@media screen and (max-width: 640px) {
    #cp-conditions {
        margin-bottom: 0;
    }
	dl.display_terms {
		margin: 5px 0;
		padding: 0;
		letter-spacing: -.4em;
		text-align: left;
	}
	dl.display_terms dt {
		position: relative;
		padding-right: 0;
		padding: 3px 10% 0 10px;
		font-weight: bold;
		display: inline-block;
		letter-spacing: normal;
		width: 30%;
	}
	dl.display_terms dt::before {
		position: absolute;
		width: 7px;
		height: 7px;
		right: 10px;
		top: 5px;
		border-top: 2px solid #333333;
		border-right: 2px solid #333333;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		vertical-align: middle;
		content: "";
	}
	dl.display_terms dd {
		width: 93%;
		vertical-align: top;
		display: inline-block;
		letter-spacing: normal;
	}
	dl.display_terms dd ul.term_item {
		text-align: left;
		letter-spacing: -.4em;
	}
	dl.display_terms dd ul.term_item li {
		background-color: #0086CD;
		border: 1px solid #0086CD;
		border-radius: 4px;
		padding: 2px 4px;
		margin: 0 5px 5px 0;
		color: #FFFFFF;
		font-weight: bold;
		display: inline-block;
		letter-spacing: normal;
		margin-left: 10px;
	}
}
/*-----------------------------------------------------*/
/* 「キャンペーン詳細を確認する」ボタンのスタイル
/*-----------------------------------------------------*/
ul.btnArea_top li {
	max-width: 450px;
	margin: min(2vw, 20px) auto;
	color: #cc0000;
	font-weight: bold;
}
ul.btnArea_top li a:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
@media (max-width: 768px) {
	ul.btnArea_top {
		margin: 10px 0;
	}
}
@media (max-width: 640px) {
	ul.btnArea_top li {
		font-size: 14px!important;
	}
}
/*-----------------------------------------------------*/
/* キャンペーン詳細のスタイル
/*-----------------------------------------------------*/
#cp-detail {
	max-width: 1260px;
	margin: 0 auto min(10vw, 100px);
	padding: 140px min(3vw, 30px) 0;
	text-align: left;
}
#outline {
	padding-top: 110px;
	margin-top: -110px;
}
#outline h2 {
	margin-top: 50px;
	padding: 7px;
	border-left: 10px solid #2ca6e0;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}
#outline .inner p.details_note {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 20px;
}
#outline table {
	border-collapse: collapse;
	font-size: 16px;
	border-top: 1px solid #dedede;
}
#outline th {
	width: 150px;
	padding: 0 5px;
	text-align: left;
	vertical-align: middle;
	color: #565656;
	border-bottom: 1px solid #dedede;
}
#outline td {
	width: 1080px;
	padding: 10px 5px;
	line-height: 1.3;
	border-bottom: 1px solid #dedede;
}
#outline dt {
	margin-bottom: 5px;
	font-weight: bold;
}
#outline ol li {
	text-indent: -1em;
	padding-left: 1em;
}
#outline ul li {
	text-indent: -1em;
	padding-left: 1em;
}
#outline .txtBold {
	font-weight: bold;
}
#outline table.cp_attentiontable {
	background: #eee;
	border: 1px dotted #666666;
}
#outline table.cp_attentiontable th {
	background: #eee;
	font-weight: bold;
	color: #333;
	border-right: 1px dotted #666666;
	border-bottom: 1px dotted #666666;
	text-align: center;
}
#outline table.cp_attentiontable td {
	padding: 2px;
	text-align: center;
	background: #ffffff;
	border-bottom: 1px dotted #666666;
	border-right: 1px dotted #666666;
}
#outline dl.inde dd {
	text-indent: -1em;
	padding-left: 1em;
}
#outline .details_note {
    margin-left: 30px;
}

@media screen and (min-width: 641px) {
	#outline .cp_pointtable {
		width: 500px;
	}
	#outline .cp_pointtable th {
		padding: 7px;
		background-color :#0085CD;
		border: 1px solid #CCCCCC;
		color: #FFFFFF;
	}
	#outline .cp_pointtable td {
		padding: 5px;
		border: 1px solid #CCCCCC;
		box-sizing: border-box;
		text-align: right;
		white-space: nowrap;
	}
	#outline li.no_indent {
		text-indent: 0 !important;
		padding-left: 0 !important;
		margin: 5px 0 10px;
	}
	#outline dd.no_indent {
		text-indent: 0 !important;
		padding-left: 0 !important;
		margin: 5px 0 10px;
	}
	#outline table.course_detail {
		width: 100%;
		border-collapse: collapse;
	}
	#outline table.course_detail th {
		background-color: #008CD0 !important;
		border: 1px solid #008CD0;
		color: #FFFFFF;
		padding: 5px;
		text-align: center;
	}
	#outline table.course_detail th.courseName {
		width: 40%;
		border-right-color: #FFFFFF;
	}
	#outline table.course_detail th.exemptPlay {
		width: 60%;
	}
	#outline table.course_detail td {
		border: 1px solid #008CD0;
		padding: 5px;
	}
}

@media screen and (max-width:640px) {
	#cp-detail {
        margin-bottom: 0;
		padding-top: 0;
    }
	#outline {
		margin: 0 auto;
		padding: 0;
	}
	#outline table.cp_attentiontable th {
		border-right: 0;
	}
	#outline table.cp_attentiontable td {
		border-right: 0;
		border-bottom: 0;
	}
	#outline th {
		display: block;
		width: auto;
		padding: 15px 5px 10px 5px;
		font-size: 16px;
		color: #333333;
		border-bottom: 1px dotted #dedede;
	}
	#outline td {
		display: block;
		width: auto;
		padding: 10px 5px 15px 5px;
		font-size: 16px;
		line-height: 1.5;
		border-bottom: 1px solid #dedede;
	}
    #outline .details_note {
        font-size: 3.6vw;
        margin: 0 0 5px;
    }
	#outline li.no_indent {
		text-indent: 0 !important;
		padding-left: 0 !important;
		margin: 5px 0 10px;
	}
	#outline dd.no_indent {
		text-indent: 0 !important;
		padding-left: 0 !important;
		margin: 5px 0 10px;
	}
	#outline table.course_detail {
		width: 100%;
		border-collapse: collapse;
	}
	#outline table.course_detail th {
		background-color: #008CD0 !important;
		border: 1px solid #008CD0;
		color: #FFFFFF;
		display: table-cell;
		padding: 5px;
		text-align: center;
	}
	#outline table.course_detail th.courseName {
		width: 40%;
		border-right-color: #FFFFFF;
	}
	#outline table.course_detail th.exemptPlay {
		width: 60%;
	}
	#outline table.course_detail td {
		border: 1px solid #008CD0;
		display: table-cell;
		padding: 5px;
	}
}
/*-------------------------------------------*/
/* 応募・予約ボタン .btnArea_2022 202208追加
/* campaignBtn_2022が「キャンペーンに応募する」ボタン（ブルー）
/* bookingBtn_2022が「予約する」ボタン（オレンジ）
/*-------------------------------------------*/
.btnArea_2022 {
	margin: 20px auto 20px;
	width: 980px;
	text-align: center;
	font-size: 28px;
	line-height: normal;
}
.campaignBtn_2022 {
	display: inline-block;
	text-align: center;
	width: 40%;
	position: relative;
	padding: 18px 20px 20px;
}
.bookingBtn_2022 {
	display: inline-block;
	text-align: center;
	width: 40%;
	position: relative;
	padding: 18px 20px 20px;
}
.campaignBtn_2022 a {
	position: relative;
	display: inline-block;
	font-weight: bold;
	border-radius: 7px;
	color: #fff;
	border: 3px solid #fff;
	box-shadow: 5px 6px 0px -2px rgba(0, 0, 0, 0.3);
	padding: 0.4em 1.2em 0.3em 0.5em;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	width: 100%;
	transition: .5s;
	background-color: #0086CD;
}
.bookingBtn_2022 a {
	position: relative;
	display: inline-block;
	font-weight: bold;
	border-radius: 7px;
	color: #fff;
	border: 3px solid #fff;
	box-shadow: 5px 6px 0px -2px rgba(0, 0, 0, 0.3);
	padding: 0.4em 1.2em 0.3em 0.5em;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	width: 100%;
	transition: .5s;
	background-color: #ff7700;
}
.campaignBtn_2022 a.pc {
	display: block;
}
.campaignBtn_2022 a.sp {
	display: none;
}
.bookingBtn_2022 a.pc {
	display: block;
}
.bookingBtn_2022 a.sp {
	display: none;
}
.campaignBtn_2022 a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: .4em;
	height: .4em;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background: none;
	right: 25px;
}
.bookingBtn_2022 a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: .4em;
	height: .4em;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background: none;
	right: 25px;
}

@media screen and (max-width:980px) {
	.btnArea_2022 {
		font-size: 28px;
		margin: 38px auto 30px;
		width: 100%;
	}
	.campaignBtn_2022 {
		width: 90%;
		display: block;
		margin: auto;
		padding:0 0 15px;
	}
	.bookingBtn_2022 {
		width: 90%;
		display: block;
		margin: auto;
		padding:0 0 15px;
	}
	.campaignBtn_2022 a {
		padding: 0.4em 1.1em 0.4em 0.5em;
	}
	.bookingBtn_2022 a {
		padding: 0.4em 1.1em 0.4em 0.5em;
	}
	.btnAnimation_2022 a:active {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: .2s;
		opacity: 1;
	}
}

@media screen and (max-width:640px) {
	.btnArea_2022 {
		width: 90%;
		margin-top: 10px;
		margin-bottom: 40px;
	}
	.campaignBtn_2022 {
		margin-bottom: 10px;
		padding: 0 0 10px;
		display: block;
		margin: auto;
		font-size: 20px;
		width: 100%;
	}
	.bookingBtn_2022 {
		padding: 0 0 10px;
		display: block;
		margin: auto;
		font-size: 20px;
		width: 100%;
	}
	.campaignBtn_2022 a {
		padding: 0.9em 1em 0.7em 0.5em;
		border-radius: 7px;
	}
	.bookingBtn_2022 a {
		padding: 0.9em 1em 0.7em 0.5em;
		border-radius: 7px;
	}
	.campaignBtn_2022 a.pc {
		display: none;
	}
	.campaignBtn_2022 a.sp {
		display: block;
	}
	.bookingBtn_2022 a.pc {
		display: none;
	}
	.bookingBtn_2022 a.sp {
		display: block;
	}
}
/*-------------------------------------------*/
/* PCでのhoverアニメーションとタッチディバイスでのactiveアニメーション
/*-------------------------------------------*/
/* PCでのhoverアニメーション */
@media (hover: hover) and (pointer: fine) {
	.btnAnimation_2022 a:hover {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
/* タッチディバイスでのactiveアニメーション */
@media (hover: none) and (pointer: none) {
	.btnAnimation_2022 a:active {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
}

@media screen and (max-width: 980px) {
	@media (pointer: none) and (hover: none) {
		.btnAnimation_2022 a:hover {
			transform: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			transition: none;
			opacity: 1;
		}
		.btnAnimation_2022 a:active {
			-webkit-transform: translate(0, -2px);
			transform: translate(0, -2px)scale(1.05, 1.05);
			color: #fff;
			-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
			box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
			transition: .2s;
			opacity: 1;
		}
	}
}

/*-----------------------------------------------------*/
/* ページTOPへ戻るボタン */
/*-----------------------------------------------------*/
#pagetop_btn {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
#pagetop {
	position: fixed;
	z-index: 20;
	opacity: 0;
	transform: translateX(100px);
	display: block;
	cursor: pointer;
	right: 1%;
	bottom: 2%;
	font-size:0.9vw;
}
#pagetop a {
	display: inline-block;
	transition:all 0.3s;
	color: #fff;
	width: 60px;
	height:60px;
	box-sizing:border-box;
	text-decoration: none;
	position:relative;
	text-align: center;
	background-color:#555555;
	border-radius: 4px;
}
#pagetop a span {
	position: absolute;
	top: 43%;
	left: 50%;
	width: 32%;
	height: 32%;
	margin-left: -15%;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
#pagetop a:hover {
	text-decoration: none;
	background: #929292;
}
/*　左の動き　*/
#pagetop.LeftMove {
	animation: LeftAnime 0.5s forwards;
}
	@keyframes LeftAnime {
		from {
			opacity: 0;
			transform: translateX(130px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
/*　右の動き　*/
#pagetop.RightMove {
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(300px);
	}
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}