@charset "utf-8";

/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/
body {color: #000;}
.clearfix {display: block;}
.sp {display: none;}

#container{
	width:100%!important;
	margin:0 auto;
	text-align:left;
    overflow: hidden;/*追加*/
}
.inner{
	width: 980px;
	margin: 0 auto;
	text-align: left;
  box-sizing: border-box;
}
.bg-fit {
    position: relative;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
ul.indent li {
	text-indent: -1em;
	padding-left: 1em;
}
.fwb {font-weight: bold;}
.flex {display: flex;flex-wrap: wrap;}
img {-webkit-backface-visibility: hidden;}

/* 改行のスタイル */
.br980_hide {display: block;}
.sp900,.br850,.br770,.br400 {display: none;}

/*-----------------------------------------------------*/
/* パンくずエリアのスタイル
/*-----------------------------------------------------*/

div#breadSns{width:980px;margin:5px auto 0;padding:0;height:32px;}
div#bread{float:left;margin:6px 0 0 5px;}
div#bread p.crumbs{font-size:10px;}

/*    IE用　　*/
div#bread{margin/*\**/: 0 0 0 5px\9;}

/*     SNSボタン用
------------------------------------------*/

#snsBox{
/*	width:400px;*/
	float:right;
    margin: 5px 0px 0px 0;
	vertical-align: top;
}
/*    IE用　　*/
#snsBox{margin/*\**/: 0 0 7px 0\9;}
#snsBox ul li{float: left;padding: 0px;display: inline;}
#snsBox ul li.fb{margin: 0px 10px 5px 0px;}
#snsBox ul li.fb div{width:110px!important;}
#snsBox ul li.gg{margin: 0px 10px 5px -10px;}
#snsBox ul li.tw{margin: 0px 10px 5px -10px;}

/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

.mainvisual{
	background:url(images/bg_mainvisual.png) no-repeat;
	padding: 0;
	margin: 0 auto;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
}
.mainvisual h1{
	margin: 0 auto;
	padding: 0;
}

/*-----------------------------------------------------*/
/* リードタイトルとリード
/*-----------------------------------------------------*/

.lead_title {
  margin: 40px 0;
}

p.lead {
  margin: 0 auto;
  font-size: 18px;
  max-width: 1260px;
  padding-bottom: 50px;
  text-align: left;
}

h2.lead_title{padding: 0px 10px;}
p.lead{padding: 0px 10px 50px 10px;}

/*-----------------------------------------------------*/
/* ボタンエリアのスタイル
/*-----------------------------------------------------*/
/*キャンペーン詳細を確認する*/
div.btnArea_wrap{width: 880px;text-align: center;margin: 30px auto 40px;}
ul.btnArea_top{vertical-align: top;margin: 30px 0;}
ul.btnArea_top li{width:450px;margin:15px auto 0;}
ul.btnArea_top li a:hover{filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}

/*応募・予約ボタン共通 btn_area*/
.btn_area{
    margin: 40px auto;
    width: 980px;
    text-align: center;
    font-size: 26px;
    font-family: 'メイリオ','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
    transition:.5s all;
}

.btn_area ul li{
    padding: 20px;
    transition:.5s all;
    }
.btn_area ul li .pc{
    display: inline-block;
    width: 100%;
    position: relative;
 }
 .btn_area ul li .sp{display: none;}
.btn_area ul li 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;
}
/* .btn_area ul li a:hover{opacity: 1;} */
.btn_area ul li 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: 1em;
}

.btn_area .booking {
    width: 392px;
    margin: 0 auto;
}
.btn_area a.btn_booking{background-color: #ff7700;}

/* ページ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: 30px;bottom: 20px;font-size:16px;}
#pagetop a{display: inline-block;transition:all 0.3s;color: #fff;width: 100px;height:100px;border-radius:100px;box-sizing:border-box;text-decoration: none;padding: 3em 0;position:relative;text-align: center;background-color:rgba(33%,33%,33%,0.85);}
#pagetop a span{position: absolute;top: 25px;left: 50%;width: 20px;height: 20px;margin-left: -10px;border-left: 1px solid #fff;border-bottom: 1px 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(130px);}}
  @-webkit-keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
  @keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}


/*-----------------------------------------------------*/
/* クーポン詳細
/*-----------------------------------------------------*/

.prize_ttl {
    color: #fff;
    background: #1977b3;
    font-size: 29px;
    text-align: center;
    padding: 5px 0 6px;
    font-family: Times New Roman, "ＭＳ Ｐゴシック";
    letter-spacing: 8px;
}

.prize_dtl {
    display: inline-block;
    padding: 35px 0 30px;
}

.prize_text {
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: bold;
    margin: 0 0 20px;
	text-align: center;
}

.prize_text span {
    margin-top: 12px;
    display: inline-block;
}

.prize_text small {
    font-weight: normal;
}

.prize_couponpc {
    justify-content: space-between;
    display: flex;
    position: relative;
    height: auto;
    align-items: flex-start;
}

.sp {
    display: none;
}

.prizeArea{
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.prize_dtl {
    max-width: 980px;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
}

#prize_pluspc {
    position: absolute;
    top: 50%;
    left: 49%;
}

.ud2 small {
    font-weight: normal;
    margin-top: 22px;
    display: block;
}

.agree_text p {
    line-height: 1.5;
}

.agree {
    margin: 10px auto;
    padding: 20px 10px 20px 20px;
    background-color: #F6F6F6;
    border: 1px solid #DDDDDD;
    font-size: 108%;
    font-weight: bold;
    text-align: left;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex
;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    box-sizing: border-box;
}

.agreeSec .agree input {
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
    border: 1px solid #999;
}

.agreeSec li.agree_button {
    margin-top: 10px;
    text-align: left !important;
    margin: 0;
}

#coupon_dtl {
        padding-top: 120px;
        margin-top: -120px;
        display: inline-block;
    }

@media screen and (max-width: 980px) {
    .prize_couponpc img {width: 45%;}
    #prize_pluspc {width: 9%; top: 47%; left: 47%;}
	.prize_dtl {width: 90%;}
	.prize_text {font-size: 1.2em;}
}

@media screen and (max-width: 640px) {
    .sp {display: block;}
	.pc {display: none;}
	.prize_couponsp img {
        width: 100%;
        margin-left: -4%;
    }
	#prize_plussp {
        width: 25%;
        margin: 15px auto -12px;
		display: block;
    }
	
	#coupon_dtl {
        padding-top: 70px;
        margin-top: -70px;
    }
	
	.prize_ttl {
        letter-spacing: 4px;
    }
	
	.prize_text {
        font-size: 1.2em;
    }
}

#outline th {padding: 10px 5px!important;}
section h3 {
    color: #fff;
    width: 100%;
    display: block;
    font-size: 30px;
    text-align: center;
    padding: 0.3em 0;
    margin-bottom: 0px!important;/* media.cssの打消し */
}

/*-----------------------------------------------------*/
/* 承諾事項
/*-----------------------------------------------------*/
.agree_wrap {
    background: #fff;
    padding: 0;
	margin: 80px 0px;
    font-size: 16px;
}

.agreeBlock {
	border: 10px solid #da0404;
	padding: 30px 37px 10px;
}

.agree_ttl {
    font-size: 1.5em;
    letter-spacing: 0.4em;
    margin-bottom: 15px;
    font-weight: bold;
	text-align: center;
}

.attention {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
	text-align: center;
}

.agree_text {
    margin: 0 auto 20px;
    text-align: left;
    background-color: #fff;
    font-weight: bold;
    font-size: 1.3em;
}

.agree_text span {
    color: #ff2222;
    font-weight: bold;
}

@media screen and (max-width: 640px) {
    .agree_ttl {
        font-size: 5vw;
    }
	
	.attention {
        font-size: 4.5vw;
        margin-bottom: 14px;
        line-height: 1.5;
    }
	
	.agree_text {
        font-size: 4.5vw;
    }
	
	.agreeBlock {
    padding: 20px 5px 10px;
	border: 6px solid #da0404;
	}
	
	label {
        font-size: 4vw;
    }
	
	.campaignBtn_2022 a, .bookingBtn_2022 a{
		font-size: 5.0vw;
	}
}
/*-----------------------------------------------------*/
/* キャンペーン概要エリアのスタイル
/*-----------------------------------------------------*/
#cp-gc, #cp-detail {
	padding-top: 0px;
}
	
.campaignBtn_2022, .bookingBtn_2022 {
  display: block;
  text-align: center;
  width: 65%;
  position: relative;
  padding: 0px;
}
@media screen and (max-width: 640px) {
    .bookingBtn_2022 {
        width: 80%!important;
		margin-top: 20px;
    }
}
	
@media screen and (max-width: 340px) {
	.campaignBtn_2022 a::after, .bookingBtn_2022 a::after {
    right: 20px;
	}
}
	
#cp-detail{
  margin-bottom: 0!important;
}
/* PCでのhoverアニメーション */
@media (hover: hover) and (pointer: fine) {

	/* ボタンのhoverアニメーション */
	.btnAnimation_2022 a:hover, figure a img: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;
	}
}
/* IE11でのアニメーションのカクツキ対応 */
@media (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.btnAnimation_2022 a:hover {
		box-shadow: 8px 8px 5px 0 rgb(224, 222, 222);
		transform: scale(1.05, 1.05) translate(0, -2px);
	}

	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
@keyframes arrowyoko {
	0% {
		right: 25px;
	}
	100% {
		right: 10px;
		opacity: 0;
	}

}

/*--------------------------------------------------------------------*/
/* レスポンシブル対応
/*--------------------------------------------------------------------*/

@font-face {
    font-family: 'WebSymbolsgfeditRegular';
    src: url('/css/font/websymbols_gf-edit-webfont.eot');
    src: url('/css/font/websymbols_gf-edit-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/font/websymbols_gf-edit-webfont.woff') format('woff'),
         url('/css/font/websymbols_gf-edit-webfont.ttf') format('truetype'),
         url('/css/font/websymbols_gf-edit-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* max-width:1000px */
@media screen and (max-width:1260px) {
	#container{
		width: 100%;
		margin: 18px auto 0;
	}
	div#breadSns{
	  	width:100%;
	}
	.inner{
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}
	dl.display_terms {
		width: 100% !important;
		padding: 0;
	}
  p.lead {margin: 15px 0;}
  .img_finish img {width: 100%;}
  .btn_area {width: 100%;}

	
	/* メインビジュアル */
	.mainvisual h1{width: 100%;padding: 0 2%;box-sizing: border-box;}
	#term p.term{width: 98%;margin: 0 1%;}
	.mainvisual h1 img,
	#term p.term img{width: 100%;}
}

/* max-width:900px */
@media screen and (max-width:56.3em) {
	.sp900{display: block;}
}

/* max-width:850px */
@media screen and (max-width:53em) {
    .br850 {display: inline;}
 
	.pritext_lead {padding: 10px 0px;}
}

/* max-width:770px */
@media screen and (max-width:48em) {
    .br770 {display: inline;}
	
      /* activに置き換え */
      .tab-kanto a:active, .tab-kansai a:active {
        transform: translateY(-0.2em);
        height: 1.7em;
        margin-bottom: -0.2em;
        filter:alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
      }

    #pagetop a:active {text-decoration: none;background: #929292;}

}

/* max-width:640px */
@media screen and (max-width:40em) {
    .sp {display: block;}
    .pc {display: none;}

    #footer {display: none;}
    #breadSns {display: none;}
    header.common .logo {float: left;width: 275px;}
    header.common .navi li { float: right;padding-top: 15px;}

    .br770 {display: none;}

    #container{
      width:100% !important;
      position:relative;
      margin: 0;
    }	

    .img_finish img {width: 90%;margin: 4% 5%;text-align: center;}
    .img_finish img {width: 90%;margin: 4% 5%;text-align: center;}
	
	.br850{display: none;}
	
/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/
	.mainvisual{background: none;}
	.mainvisual h1 {padding: 0;}	
/*-----------------------------------------------------*/
/* 各種期間表示エリアのスタイル
/*-----------------------------------------------------*/
	#term {margin-bottom: 10px;padding:10px;color:#000;height: auto;text-align: center; }
	#term dt {color: #830c0c;text-align: center;font-weight: bold;}
	#term p.pc{display: none;}
	#term dl.sp{display: block;}
	#term dl{letter-spacing:-0.4em;text-align:left;text-align: center;font-weight: bold;}
	#term dt,#term dd{*display:inline;*zoom:1;letter-spacing:normal;font-size: 4.2vw;line-height: 130%;font-weight:bold;font-family: "Crimson Text", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif
	}
/* -------------------------------------------------------------- */
/* ボタンエリアのスタイル
/* -------------------------------------------------------------- */

	/*キャンペーン詳細を確認する*/
	
	dl.display_terms dt {
        width: 32%;
	}
	ul.btnArea_top{margin: 30px 0;}
	ul.btnArea_top li {width: 100%;padding: 3px 0;box-sizing: border-box;}
	
	ul.btnArea_top{float: none;width:100%;display: block!important;padding-bottom: 0;}
	/* p.agree {margin-bottom: 20px;} */
	/* .toTop {margin: -10 2% 10px 0;font-size: 3vw;} */

    .btn_area ul li .pc{display: none;}
    .btn_area ul li .sp{
      display: inline-block;
      width: 100%;
      padding: 0.8em 1.8em 0.7em 0.5em;
      margin: 8px 0;
    }
    .btn_area ul li a {
      border-radius: 8px;
      border: 2px solid #fff;
    }

    .btn_area .booking {
        width: 100%;
        margin: 0 auto;
        font-size: 5vw;
        padding: 2% 0;
    }
	
	.btn_common {width: 90%!important;}
	
    .btn_area ul.booking li a::after {right: 1em;}

    /* リード */

    .mn .lead_title {
      font-size: 20px;
    }
    .mn .lead {
      text-align:left ;
      margin: 0 10px 35px!important;
      font-size: 16px;
    }
  
/*-----------------------------------------------------*/
/* キャンペーン概要エリア */
/*-----------------------------------------------------*/
	
	#outline {padding-top: 0;margin-top: 0;}
	#outline .inner {margin: 0;}
	#outline h2 {margin: 20px 0 0 0!important;padding: 7px;border-left: 10px solid #2ca6e0;border-bottom: none;font-size: 18px;font-weight: bold;text-align: left;}
	#outline th {white-space: normal;}
	#outline table.cp_attentiontable th, #outline table.cp_attentiontable td {border-right: 0;}
	#outline th {padding: 10px 5px;display: block;width: auto;text-align: left;}
	#outline td {display: block;width: auto;text-align: left;}
	#outline table.cp_pointtable {width: 100%;}
	#outline table.cp_pointtable th,
	#outline table.cp_pointtable td {display: table-cell;}
	#outline table.course_detail th.courseName {width: 40%;white-space: normal;}
	#outline table.course_detail th.exemptPlay {width: 60%;white-space: normal;}
	#outline table.cp_attentiontable td {border-bottom: none;padding: 10px;}
	#outline th {white-space: normal;}

}

/* max-width:400px */
@media screen and (max-width:25em) {
    .br400 {display: inline;}
}
	
/* タッチディバイスでの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;
	}
}