@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: 1260px;
	margin: 0 auto;
	text-align: left;
  box-sizing: border-box;
}

ul.indent li {
	text-indent: -1em;
	padding-left: 1em;
}
.fwb {font-weight: bold;}
.flex {display: flex;justify-content: center;}
img {-webkit-backface-visibility: hidden;}

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

/* 明朝体の指定 */
.mn {
  font-family: "Crimson Text", "Noto Serif JP","游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
/*-----------------------------------------------------*/
/* パンくずエリアのスタイル
/*-----------------------------------------------------*/

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;}


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

#snsBox{
/*	width:400px;*/
	float:right;
    margin: 5px 0px 0px 0;
	vertical-align: top;
}

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

.mainvisual{
	background:url(/campaign/newyear/images/bg.webp) no-repeat;
	padding: 0;
	margin: 0 auto;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
  position: relative;
}

.mainvisual .item {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 64%;
  max-width: 1260px;
  transform: translate(-50%, -60%) scale(1);  
  z-index: 10;                     /* 手前に配置 */
  transform: translate(-50%, -65%) scale(1.1); /* 少し拡大 */
  animation: pop 0.8s ease-out;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
}

@keyframes pop {
  0% { transform: translate(-50%, -65%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -65%) scale(1.1); opacity: 1; }
}

.mainvisual h1{
	width: 1260px;
	margin: 0 auto;
	padding: 0;
}

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

p.lead {
  margin: 15px 0 50px 0;
  line-height: 1.8em;
  font-size: 18px;
  color: #333;
  text-align: center;
}

/*-----------------------------------------------------*/
/* ボタンエリアのスタイル
/*-----------------------------------------------------*/
/*キャンペーン詳細を確認する*/
div.btnArea_wrap{width: 880px;text-align: center;margin: 30px auto 40px;}
ul.btnArea_top{vertical-align: top;}
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;}


/* 賞品一覧 */

    .prize_content {
      background-image: url("/campaign/newyear/images/prize_bg.webp");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .prize_ttl {
      display: block;
      font-size: 60px;
      color: #fff;
      padding-top: 80px;
      margin-bottom: 50px;
  }

    .prize_lead{
      font-size: 1.7em;
      color: #fff;
      margin-bottom: 30px;
    }

    .prize_content .flex{
      margin-bottom: 40px;
    }

    .prize_content.flex:last-child{
      margin-bottom: 0;
    }

    .prize_4 {
      padding-bottom: 50px;
    }


  /* 年末年始プレー */

  h3 {
    font-size: 30px;
    color:#bb1c00 ;
    margin-bottom: 30px;
  }

  h3 span {
    font-size: 50px;
  }
  .plan_flex{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .area_plan{
    background-image: url("/campaign/newyear/images/plan_bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    scroll-margin-top: 80px;
  }

  /* ボタンデザイン　START */

  .area_btn {
    text-align: center;
    padding: 60px 0 120px 0;
    margin-bottom: 50px;
  }

  .area-buttons{
    display: grid !important; 
    gap: 20px;
    width: 95%;
    margin: 0 auto;    
  }

  .area-buttons a {
    background-color: #ff7700;
    position: relative;
    /* display: inline-block; */
    font-weight: bold;
    border-radius: 7px;
    color: #fff;
    box-shadow: 5px 6px 0px 0px #d0752a;
    padding: 0.7em 1.2em 0.5em 0.5em;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    max-width: 270px;
    transition: .5s;
    font-size: 18px;
  }

  .area-buttons a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .5em;
    height: .5em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 20px;
  }

  .area-buttons 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;
      }

  .area-buttons a:hover::after {
    animation: arrowyoko infinite .7s ease-in;
    }

  .area-buttons span {
    font-size: 24px;
  }

  /* ボタンデザイン　END */

  /* キャンペーン応募ボタン START*/
  .prize_content .campaignBtn_2022, .bookingBtn_2022 {
    display: inline-block;
    text-align: center;
    width: 46%;
    position: relative;
    padding: 18px 20px 20px;
  }
  
   /* キャンペーン応募ボタン END */

  .area_btn .dates {
    background-color: #f3cd3f;
    color: #bb1c00;
    font-size: 26px;
    border-radius: 28px;
    margin: 0 auto;
    width: 65%;
    margin-bottom: 80px;
    padding: 5px 0;
    font-weight: bold;
  }

/* PC（1261px以上）→ 上4つ／下3つ */
@media (min-width: 1261px) {
  .area-buttons {
    grid-template-columns: repeat(auto-fit, minmax(270px, auto));
  }
  .area-buttons a:nth-child(n+5) {
    grid-column: span 1;
  }

    .area-buttons a:nth-child(4) {
    margin-right: -16px; /* gap を相殺 */
    }
}

/* 1260px以下 → 2列で折り返す */
@media (max-width: 1260px) {
  .area-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
}


/*-----------------------------------------------------*/
/* 賞品詳細
/*-----------------------------------------------------*/

/* 詳細を確認する */
.prize_content ul.btnArea_top li{
  margin-bottom: 60px;
}

/* 横スクロール対策 */
.l-wrapper {
  overflow: hidden;
}

/*-----------------------------------------------------*/
/* キャンペーン概要エリアのスタイル
/*-----------------------------------------------------*/
#outline{padding-top: 110px;margin-top: -110px;}
#outline h2 {padding: 7px;border-left: 10px solid #2ca6e0;text-align: left;font-size: 18px;font-weight: bold;margin-top: 40px;}
#outline h3 {padding-left: 0;margin-left: -8px;border: none;font-size: 16px;}
#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:13px;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:800px;padding:10px 5px;border-bottom:1px solid #dedede;
line-height:1.3;}
#outline dt{margin-bottom:5px;font-weight:bold;}
#outline ol li{text-indent:-1.5em;padding-left:1.5em;}
#outline .cp_attentiontable {border:1px dotted #666666;}
#outline .cp_attentiontable th {background:#eee;padding:8px 8px 5px 8px;border-bottom:1px dotted #666666;}
#outline .cp_attentiontable td {border-bottom:none;border-right:1px dotted #666666;padding:5px 30px 8px;text-align:left;}
#outline ul.textIndent li{text-indent: -1em;padding-left: 1em;}
#outline dl.prize_note dt {margin-top: 15px;}

#cp-detail {
  padding-top: 0!important;
}
.prize_content .campaignBtn_2022, .bookingBtn_2022 {
  display: inline-block;
  text-align: center;
  width: 46%;
  position: relative;
  padding: 0px;
}

#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;
	}
}

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

@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) {
  .br980_hide {display: none;}
	#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: 30px;}
  .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%;}

    .prize_content .campaignBtn_2022, .bookingBtn_2022 {
    display: inline-block;
    text-align: center;
    width: 50%;
    position: relative;
    padding: 18px 20px 20px;
  }
}
@media screen and (max-width:1100px) {
    .area-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .area-buttons a {
      max-width: 325px;
    }

    .area_btn .dates {
      width: 90%;
      font-size: 3.25vw;
    }
}

/* max-width:850px */
@media screen and (max-width:850px) {
    .br850 {display: inline;}
    .area-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    .area-buttons a {
      max-width: 380px;
    }

    h3 {
      font-size: 3vw;
    }

    h3 span {
    font-size: 4.8vw;
}
    .plan_flex img {
      width: 55px;
    }
    .prize_content .campaignBtn_2022, .bookingBtn_2022 {
    display: inline-block;
    text-align: center;
    width: 60%;
    position: relative;
    padding: 18px 20px 20px;
  }


}

@media screen and (max-width:800px) {
.prz_place dl {font-size: 15px;}

.prize_lead {
  font-size: 1.6em;
  margin: 0 30px;
}

ul.btnArea_top {
    margin: 0!important;
    }

}
@media screen and (max-width:640px) {
    .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;}

    .lead_ttl {
      font-size: 21px;
    }

    p.lead {
        margin: 30px 10px;
    }

    /* 賞品一覧 */

    .prize_content {
      background-image: url("/campaign/newyear/images/prize_bg_sp.webp");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .prize_content img {
      max-width: 95%!important;
      margin: 0 auto;
    }

    .prize_ttl{
      font-size: 50px;
      margin-bottom: 30px!important;
      width: 58%;
      margin: 0 auto;
    }

    .prize_lead {
      font-size: 20px;
      line-height: 1.6em;
    }

    .flex {
      display: block;
    }

    .prize_content .flex {
      margin: 0;
    }

    .prize_1,.prize_2,.prize_3{
      margin-bottom: 20px;
    }

    /* エリアボタン */

    .area-buttons {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 89%;
    margin: 0 auto;
    }
    .area-buttons a {
      max-width: 600px;
    }

  .area_plan {

  scroll-margin-top: 0;
}

.area_btn {
    padding-bottom: 100px;
}

    .area_btn .dates{
      width: 95%;
      font-size: 4.2vw;
      margin-bottom: 55px;
    }

      h3 {
      font-size: 4.2vw;
      margin-bottom: 20px;
    }

      h3 span {
      font-size: 6.2vw;
    }

        .plan_flex img {
        width: 45px;
    }


/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/
	.mainvisual{background: none;}
	.mainvisual h1 {padding: 0;}	

  .mainvisual .item_sp {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 57%;
    max-width: 73%;
    transform: translate(-50%, -60%) scale(1);
    z-index: 10;
    transform: translate(-50%, -65%) scale(1.1);
    animation: pop 0.8s ease-out;
    animation-delay: 1.2s;
      animation-fill-mode: forwards;
    }

    /* 応募ボタン */
        .btnArea_2022 {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 40px;
    }

    .prize_content .campaignBtn_2022, .bookingBtn_2022 {
    display: inline-block;
    text-align: center;
    width: 100%;
    position: relative;
    padding: 0;
  }

/* -------------------------------------------------------------- */
/* ボタンエリアのスタイル
/* -------------------------------------------------------------- */

	/*キャンペーン詳細を確認する*/
	ul.btnArea_top{margin: 0!important;}
	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;}

    .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_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;}

}

@media screen and (max-width:675px) {
.l-wrapper {
    overflow: visible;
}
}
/* 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;
	}
}