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

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

.textmin{
	font-family: "Crimson Text", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}
.textyuu {
	font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
    font-weight: 600;
}


/* 改行のスタイル */
.br980_hide {display: block;}
.br1000,
.br850,
.br770,
.br640,
.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/campaign/pgmpoint/202209/bg_mainvisual.png) no-repeat;
	padding: 0;
	margin: 0 auto;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
	position: relative;
}
.mainvisual h1{
	width: 980px;
	margin: 0 auto;
	padding: 0;

}



/*-----------------------------------------------------*/
/* 各種期間表示エリアのスタイル
/*-----------------------------------------------------*/

#term{
  background: rgb(237,185,23);
  background: linear-gradient(122deg, rgba(237,185,23,1) 0%, rgba(255,220,70,1) 26%, rgba(255,249,189,1) 52%, rgba(237,221,116,1) 82%, rgba(227,168,11,1) 100%);
}

#term p.term {width: 980px;margin: 0 auto;padding: 5px 0;}
p.lead{margin: 15px 15px;}
.img_finish img {width: 980px;margin: 1% 0;}


/*-----------------------------------------------------*/
/* ボタンエリアのスタイル
/*-----------------------------------------------------*/
/*キャンペーン詳細を確認する*/
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:20px auto; color: red;font-weight: bold;font-size: 108%;}
ul.btnArea_top li a:hover{filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}


/*-----------------------------------------------------*/
/*賞品説明エリア
/*-----------------------------------------------------*/

section.parallax{
  display: block;
  width: 100%;
  text-align: center;
  margin: 1em auto 0px;
  font-size: 18px;
  color: #fff;
  background:url('/images/campaign/pgmpoint/202209/parallax_1000-1400.png') #0188d9;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  padding: 10px 0 30px;
}

.text_u {
	color: #fff;
	background-color: #2ca6e0;
	height: 3em;
}
section.parallax .text {
  width: 980px;
  margin: 0 auto;
  padding: 3em 0;
  font-size: 22px;
  line-height: 1.7em;
  letter-spacing: .1em;
  text-shadow: 3px 3px 6px #0176d1;
}
section.parallax .text .ylw {
	color: #fde069;
	display: block;
	font-size: 120%;
	margin: 1em auto -.3em;
	position: relative;
	
}
section.parallax .text .ylw::before {
	position: absolute;
    content: "";
    background: url(/images/campaign/pgmpoint/202209/icon.png) no-repeat top center/contain;
    background-size: cover;
    display: inline-block;
    width: 1em;
    height: 1.5em;
    left: -12px;
    transition: .5s ease-out;
    top: 0;
    bottom: 0;
    margin: auto;
}
section.parallax .text .ylw::after {
	position: absolute;
    content: "";
    background: url(/images/campaign/pgmpoint/202209/icon.png) no-repeat top center/contain;
    background-size: cover;
    display: inline-block;
	transform: scale(-1, 1);
    width: 1em;
    height: 1.5em;
    right: -12px;
    transition: .5s ease-out;
    top: 0;
    bottom: 0;
    margin: auto;
}
section.parallax .text .text_b {
	font-size: 150%;
	vertical-align: -0.07em;
}

section.parallax figure {
	display: block;
	width: 750px;
	margin: 0 auto;
	background-color: #fff;
	padding: 4em 0 3em;
	outline: 3px solid #d7ba5b;
	outline-offset: -16px;
	position: relative;
}
section.parallax figure .ribon1,section.parallax figure .ribon2 {
	position: absolute;
	width: 160px;
	height: 160px;
	background-image: url(/images/campaign/pgmpoint/202209/ribon.png);
	background-repeat: no-repeat;
	/* background-size: cover; */
}
section.parallax figure .ribon1 {
	top: -9px;
	left: -9px;
}
section.parallax figure .ribon2 {
	transform: rotate( -180deg );
	bottom: -9px;
	right: -9px;
}

section.parallax figure img {
	width: 500px; 
	height: auto;
}






/* 要素の順番表示 */

 #order li {
    opacity: 0;
    transform: translateY(20px);
	transition: opacity .7s, transform .7s;
	color: #000;
	font-size: 18px;
	margin-bottom: 1em;
}

/*スクロールした時に追加されるクラス*/
#order li.fadein{
    opacity: 1;
	transform: translateY(0); 
}






/*-----------------------------------------------------*/
/* キャンペーン概要エリアのスタイル
/*-----------------------------------------------------*/
#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: 13px;}
#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;}

/* ------------------------------------- */
/* PGMポイント番号の注意事項 */
.pgmpoint_area {max-width: 920px;margin: 3% auto 0;box-sizing: border-box;text-align: center;border: solid 2px;border-color: #ec0000;position: relative;}
.pgmpoint_area h3 {display: block;color: #fff;font-size: 24px;background-color: #ec0000;padding: 1% 0 1% 3em;}
.icon_note {position: absolute;top: -4%;left: 5%;}
.pgmpoint_area ul {display: flex;box-sizing: border-box;align-items: center;padding: 1.5%;}
.pgmpoint_area ul .pgmpoint_area_left {width: 70%;}
.pgmpoint_area ul .pgmpoint_area_left p {text-align: left;margin: 1em 1em 0.5em 4em;font-size: 19px;font-weight: bold;line-height: 1.5;color: #000;}
.pgmpoint_area ul .pgmpoint_area_right {width: 30%;}
.pgmpoint_area .sp {display: none;}
.pgmpoint_area a {color: #000;display: inline-block;margin-top: 0.5em;}

/* tカード番号について */
.pointnote_t {max-width: 920px;margin: 0 auto;box-sizing: border-box;text-align: center;padding: 2em 2% 1%;}
.pointnote_t h4 {color: #ec0000;font-size: 22px;}
.pointnote_t ul {display: flex;box-sizing: border-box;justify-content: center;}
.pointnote_t .pointnote_t_left {width: 62%;text-align: left;padding: 0 1% 0;}
.pointnote_t .pointnote_t_left p {margin-top: 1em;font-size: 16px;color: #000;}
.pointnote_t .pointnote_t_right {width: 30%;}
.pointnote_t .pointnote_t_right img {width: 100%;}

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

@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:1400px */
@media screen and (min-width:87em) {

	section.parallax{
		background:url('/images/campaign/pgmpoint/202209/parallax_min1400.png') #0188d9;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	  }

}

/* max-width:1000px */
@media screen and (max-width:63em) {
	
	/* 改行のスタイル */
	.br1000 {display: inline;}
	.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: 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%;}
    

	
	section.parallax .text {
		width: 100%;
		font-size: 2.5vw;
	}
	section.parallax .text .ylw::before {
		width: 1.5em;
		height: 2.3em;
		left: 3em;
	  }
	  section.parallax .text .ylw::after {
		width: 1.5em;
		height: 2.3em;
		right: 3em;
	  }



}	

/* max-width:980px */
@media screen and (max-width:61em) {
	/* PGMポイント番号の注意事項の注意事項 */
.pgmpoint_area {width: 95%;}
.icon_note {top: -2%;left: 1%;}
.pgmpoint_area h3 {padding: 1% 0 1% 4em;}
.pgmpoint_area ul .pgmpoint_area_left p {margin: 1em 1em 0.5em 2em;}
.pgmpoint_area img {width: 100%;}

}


/* max-width:900px */
@media screen and (max-width:56.3em) {
 
}
/* max-width:850px */
@media screen and (max-width:53em) {
	/* 改行のスタイル */
    .br850 {display: inline;}

	section.parallax figure {
		width: 90%;
	}
}

/* max-width:770px */
@media screen and (max-width:48em) {
	/* 改行のスタイル */
    .br770 {display: inline;}


}

/* 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;}
	.br640{display: inline;}

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

    .img_finish img {width: 90%;margin: 4% 5%;text-align: center;}


/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/
	.mainvisual{background: none;}
	.mainvisual h1 {padding: 0;}	
/*-----------------------------------------------------*/
/* 各種期間表示エリアのスタイル
/*-----------------------------------------------------*/
	#term {margin-bottom: 10px;padding:10px;color:#000;height: auto;text-align: center; }
	#term dt {color: #0188d9;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
	}
/* -------------------------------------------------------------- */
/* ボタンエリアのスタイル
/* -------------------------------------------------------------- */

	/*キャンペーン詳細を確認する*/
	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;}

	section.parallax{
		display: block;
		width: 100%;
		text-align: center;
		margin: 1em auto 0px;
		font-size: 18px;
		color: #fff;
		background:url('/images/campaign/pgmpoint/202209/no_parallax_sp.png') #0188d9;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: auto;
		padding: 10px 0 30px;
	  }

 
	section.parallax .text {
		width: 95%;
		font-size: 3.8vw;
		padding: 3em 0 2em;
	}
	section.parallax .text .ylw::before {
		left: .5em;
	  }
	section.parallax .text .ylw::after {
		right: .5em;
	  }

	section.parallax figure {
		width: 95%;
		padding: 2.5em 0 1em;
		outline: 3px solid #d7ba5b;
		outline-offset: -10px;
	}
	section.parallax figure p {
		font-size: 3vw;
	}
	section.parallax figure .ribon1, section.parallax figure .ribon2 {
		width: 22vw;
		height: 22vw;
		background-size: cover;
	  }
	  section.parallax figure .ribon1 {
		top: -.8%;
		left: -1.4%;
	  }
	  section.parallax figure .ribon2 {
		bottom: -.8%;
		right: -1.4%;
	  }
	section.parallax figure img {
		width: 90%;
	}


/*-----------------------------------------------------*/
/* キャンペーン概要エリア */
/*-----------------------------------------------------*/
	
	#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;}

/* --------------------------------------------------------------  */
 /* PGMポイント番号の注意事項 */
 .pgmpoint_area .sp {display: block;}
 .pgmpoint_area .pc {display: none;}
 .icon_note {width: 16vw;}
 .pgmpoint_area h3 {font-size: 4vw;}
 .pgmpoint_area ul {padding: 3%;}
 .pgmpoint_area .sp p{font-size: 3.5vw;text-align: left;margin-bottom: 3%;}
 .pointnote_t {margin: 0 auto;width: 100%;padding: 1em 2% 1%;}
 .pointnote_t ul {display: block;padding: 3%;}
 .pointnote_t h4 {font-size: 4vw;}
 .pointnote_t .pointnote_t_left {width: 95%;text-align: center;}
 .pointnote_t .pointnote_t_left p {margin-bottom: 1em;font-size: 3.2vw;}
 .pointnote_t .pointnote_t_right {width: 95%;}
 .pointnote_t .pointnote_t_right img {width: 60%;margin-bottom: 6%;}
 
}


@media screen and (max-width:25em) {

}


/* max-width:400px */
@media screen and (max-width:25em) {
	/* 改行のスタイル */
  .br400 {display: inline;}

}