@charset "UTF-8";
@media screen and (min-width: 801px) {}
@media screen and (max-width: 800px) {}
/* =====================================
	全体設定
===================================== */
figure {
	margin: 0;
}
.bold {
	font-weight: bold;
	
}

.l-container {
	overflow: visible!important;
}
.mb0 {
	margin-bottom: 0!important;
	
}
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

@media screen and  (min-width: 801px) and (max-width:1200px) {

}
@media screen and (max-height:750px) {

}
@media screen and (max-height:700px) {

}

@media screen and (min-width: 801px) {
.dsp_pc {
	display: block;
}
.inl_pc {
	display: inline;
}
.dsp_sp {
	display: none;
}
.inl_sp {
	display: none;
}

.rewind_bg {
	z-index: 1;
	position: relative;
	background: url(../../../../img/campaign/wester-dl-cp/202511/pc_bg.png) center center no-repeat #fadbdf;
	background-size: cover;               /* 全画面 */
	background-attachment: fixed;         /* 固定 */
	background-position: center calc(50% + 180px);   /* 縦横中央 */
}

.rewind_container {
	display: flex;
	width: 100%;
	/*min-width: 1400px;*/
}

.pc_area_l {
	position: relative;
	width: calc( 50% - 250px);
	
}
.pc_area_l .pc_bg {
	position: sticky;
	top: 180px;
	left: 0;
	width: 100%;
	height: calc( 100vh - 180px);
	background: url( "../../../../img/campaign/wester-dl-cp/202511/pc_bg_l.png") center center no-repeat;
	background-size: cover;
}
.pc_area_l .box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 254px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 8px 8px 0px 0px #008cd3;
	}
.pc_area_l .lnav  {
	position: relative;
	padding: 25px 15px 38px;
	
}
.pc_area_l .lnav ul  {
}
.pc_area_l .lnav ul li  {
	position: relative;
	
}
.pc_area_l .lnav ul li.on  {
	background: #fff33f;
}
.pc_area_l .lnav .ico  {
	position: absolute;
	right: -81px;
	bottom: -120px;
	
}

.pc_area_r {
	position: relative;
	box-sizing: border-box;
	width: calc( 50% - 250px);
}
.pc_area_r .container {
	position: sticky;
	top: 180px;
	left: 0;
	width: 100%;
	height: calc( 100vh - 180px);
	background: url( "../../../../img/campaign/wester-dl-cp/202511/pc_bg_r.png") center center no-repeat;
	background-size: cover;
}
.pc_area_r .r_cont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 368px;
}
.pc_area_r .r_cont img {
	width: inherit;
}
.pc_area_r .r_cont .box {
	box-sizing: border-box;
	width: 351px;
	height: 182px;
	margin-left: 7px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 8px 8px 0px 0px #008cd3;
}
.pc_area_r .r_cont .ttl {
	margin-bottom: 6px;
}
.pc_area_r .r_cont .box01 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 17px;
	padding: 25px 31px 25px 31px;
}
.pc_area_r .r_cont .box01 .icon {
	width: 50px;
	margin-top: 35px;
}
.pc_area_r .r_cont .box01 .ap_btn {
	display: flex;
	justify-content: space-between;
	width: 207px;
}
.pc_area_r .r_cont .box01 .ap_btn li {
	width: 88px;
}
.pc_area_r .r_cont .box01 .ap_btn li .btn {
	margin-bottom: 15px;
}
.pc_area_r .r_cont .box01 .ap_btn li.app .btn {
	width: 77px;
	margin: 0 auto 15px;
}
.pc_area_r .r_cont .box02 {
	display: flex;
	justify-content: space-between;
	padding: 36px 31px 36px 31px;
}
.pc_area_r .r_cont .box02 .icon {
	width: 50px;
	margin-top: 24px;
}

.pc_area_r .r_cont .box02 #my_qr_code_div_id02 {
	width: 207px;
	text-align: center;
}
.pc_area_r .r_cont .box02 #my_qr_code_div_id02 canvas {
	width: 110px;
	height: 110px;
}

.pc_area_r .pc_entry ul li #my_qr_code_div_id02 canvas {
	width: 100%;
	height: auto;
	
}

main {
	z-index: 1;
}

#rewind {
	z-index: 6000;
	position: relative;
	font-size: calc(25 * calc(500 / 750)*1px);
	/*font-feature-settings: "palt";*/
	line-height: 1.5;
	color: #000000;
	width: 500px;
	overflow: visible;
	background: #cbe9ff;
	margin: 0 auto;
}

.cp {
	border-bottom: 2px solid #ddd;
	font-weight: 500;
	color: #000;
}

.navarea {
	padding-top: 180px;
	margin-top: -180px;
}
.navarea02 {
	padding-top: 240px;
	margin-top: -240px;
}

}


@media screen and (max-width: 800px) {
	.dsp_pc {
		display: none;
	}
	.inl_pc {
		display: none;
	}
	.dsp_sp {
		display: block;
	}
	.inl_sp {
		display: inline;
	}

	.pc_area_l {
		display: none;
		
	}
	.pc_area_r {
		display: none;
		
	}

	.rewind_bg {
		z-index: 1;
		position: relative;
		width: 100%;
		background: #ffebf5;
		padding: 0;
	}
	#rewind {
		position: relative;
		width: 100%;
		font-size: calc(25/750*100vw);
		/*font-feature-settings: "palt";*/
		line-height: 1.5;
		color: #000000;
		overflow: visible;
		background: #cbe9ff;
	}
	
	.navarea {
		padding-top: calc(220/750*100%);
		margin-top: calc(-220/750*100%);
	}
	.navarea02 {
		padding-top: calc(250/670*100%);
		margin-top: calc(-250/670*100%);
	}
	.cont01 .pc_qr {
		display: none;
	}

}
/* =====================================
	header
===================================== */

	
	.l-container.-wester-portal .c-topic-path {
	  margin: 0 auto 0;
	}
	.l-container.-wester-portal .c-topic-path p {
		margin-bottom: 16px;
	}
	.cp {
		border-bottom: 1px solid #ddd;
		font-weight: 500;
		color: #000;
	}
	.cp img {
		width: 100%;
		
	}
	.mv {
		position: relative;
		width: 100%;
	}

	#following_area {
		position: relative;
	}

	.entry {
		opacity: 0;
		/*display: none;*/
		z-index: 75;
		position: sticky;
		left: 0;
		bottom: 0;
		transition: 1s all ease 0s;
		pointer-events: none;
	}	
	.entry.active {
		opacity: 1;
		/*display: block;*/
		pointer-events: auto;
	}	
	.entry ul {
		display: flex;
	}	
	
	.entry_start {
		opacity: 0;
		/*display: none;*/
		z-index: 75;
		position: sticky;
		left: 0;
		bottom: 0;
		transition: 1s all ease 0s;
		pointer-events: none;
	}
	.entry_start.active {
		opacity: 1;
		/*display: block;*/
		pointer-events: auto;
	}
	.entry_start.none {
		display: none;
	}
		
	#rewind a {
		color: #004a9e;
		text-decoration: underline;
	}
	.red {
		color: #fa3232;
		font-weight: 500;
		
	}
	

/* =====================================
	content
===================================== */
	.cont01 {
		padding: calc(80/750*100%) 0 calc(100/750*100%);
		background: #ffffff;
	}
	.cont01 .inner {
		padding: calc(85/750*100%) calc(40/750*100%) calc(35/750*100%);
	}
	.cont01 .lead {
		margin-bottom: calc(50/750*100%);
		text-align: center;
		font-size: calc(38 / 25 * 1em);
		letter-spacing: 0;
		color: #00499f;
		line-height: calc(56 / 38);
	}
	.cont01 .txt01 {
		width: calc(524/750*100%);
		margin: 0 auto calc(75/750*100%);
	}
	.cont01 h3 {
		width: calc(639/750*100%);
		margin: 0 auto calc(45/750*100%);
	}
	.cont01 .ap_btn {
		display: flex;
		justify-content: space-between;
		/*column-gap: 10px;*/
		width: calc(614/750*100%);
		margin: 0 auto calc(30/750*100%);
	}
	.cont01 .ap_btn li.app {
		width: calc(275/614*100%);
	}
	.cont01 .ap_btn li.gp {
		width: calc(310/614*100%);
	}
	.cont01 .ap_btn li .qr {
		display: none;
	}
	.cont01 .note {
		margin-bottom: calc(95/750*100%);
		text-align: center;
		font-size: calc(32 / 25 * 1em);
	}
	.cont01 .txt02 {
		width: calc(552/750*100%);
		margin: 0 auto calc(60/750*100%);
	}
	.cont01 .btn01 {
		display: flex;
		justify-content: space-between;
		/*column-gap: 10px;*/
		width: calc(680/750*100%);
		margin: 0 auto calc(30/750*100%);
	}
	.cont01 .obi {
		margin-bottom: calc(90/750*100%);
	}
	.cont01 .ttl03 {
		margin-bottom: calc(25/750*100%);
		text-align: center;
		font-size: calc(42 / 25 * 1em);
		font-weight: bold;
		color: #e84572;
	}
	.cont01 .txt03 {
		text-align: center;
		font-size: calc(36 / 25 * 1em);
		letter-spacing: 0;
		color: #00499f;
		line-height: calc(52 / 36);
	}


	.cont02 {
		padding: 0 calc(40/750*100%) calc(90/750*100%);
		background: #ffffff;
	}
	.cont02 h3 {
		margin-bottom: calc(45/670*100%);
		font-size: calc(60 / 25 * 1em);
		text-align: center;
	}
	.cont02 .kiyaku_cont {
		font-size: calc(28 / 25 * 1em);
		line-height: calc(50 / 28);
	}
	.cont02 h4 {
		font-weight: bold;
		padding-left: 1em;
		text-indent: -1em;
	}
	.cont02 ul {
		margin-bottom: calc(50/670*100%);
	}
	
	.cont02 ul li {
		padding-left: 1em;
		text-indent: -1em;
	}
	.cont02 .txt01 li.br {
		margin-bottom: calc(30/590*100%);
	}
	.cont02 .txt01 li span.blue {
		color: #004a9e;
	}
	.cont02 a {
		color: #004a9e!important;
		text-decoration: underline!important;
	}

	.cont03 {
		padding: calc(70/750*100%) calc(40/750*100%) calc(95/750*100%);
		background: #008cd3;
	}
	.cont03 .ttl01 {
		margin-bottom: calc(30/670*100%);
	}
	.cont03 h4 {
		margin-bottom: calc(40/670*100%);
		line-height: calc(55/40);
		font-size: calc(45 / 25 * 1em);
		font-weight: bold;
		color: #ffffff;
		text-align: center;
	}
	.cont03 .b_box {
		position: relative;
		box-sizing: border-box;
		margin-bottom: calc(40/750*100%);
		padding: calc(20/750*100%) 0 ;
		border: calc(6/750*100vw) solid #c5e9fa;
		border-radius: calc(20/750*100vw);
		background: #fff;
		font-size: calc(30 / 25 * 1em);
		text-align: center;
	}
	.cont03 .b_box .balloon {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: calc(31/738*100%);
		margin-top: calc(-42/738*100%);
	}
	.cont03 .b_box p span {
		color: #e84b5f;
	}
	.cont03 .tab {
		margin-bottom: calc(50/670*100%);
	}
	.cont03 .tab .tabmenu {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0;
	}
	.cont03 .tab .tabmenu li {
		width: calc(324/670*100%);
		padding-bottom: calc(190/670*100%);
		cursor: pointer;
	}
	.cont03 .tab .tabmenu li.tab01 {
		background: url(../../../../img/campaign/wester-dl-cp/202511/tab01.png) center top no-repeat;
		background-size: 100% auto;
	}
	.cont03 .tab .tabmenu li.tab01.active {
		background: url(../../../../img/campaign/wester-dl-cp/202511/tab01_on.png) center top no-repeat;
		background-size: 100% auto;
	}
	.cont03 .tab .tabmenu li.tab02 {
		background: url(../../../../img/campaign/wester-dl-cp/202511/tab02.png) center top no-repeat;
		background-size: 100% auto;
	}
	.cont03 .tab .tabmenu li.tab02.active {
		background: url(../../../../img/campaign/wester-dl-cp/202511/tab02_on.png) center top no-repeat;
		background-size: 100% auto;
	}
	.cont03 .tab .tabcont li {
		display: none;
		box-sizing: border-box;
		padding: calc(60/750*100%) calc(40/750*100%) calc(60/750*100%);
		border: calc(6/750*100vw) solid #c5e9fa;
		border-radius: 0 0 calc(20/750*100vw) calc(20/750*100vw);
		background: #fff;
	}
	.cont03 .tab .tabcont li.active{
		display: block;
	}
	.cont03 .tab .tabcont li h5 {
		margin-bottom: calc(25/590*100%);
		color: #e84572;
		text-align: center;
		font-size: calc(45 / 25 * 1em);
		font-weight: bold;
	}
	.cont03 .tab .tabcont li.tabcont01 .img01 {
		width: calc(200/590*100%);
		margin: 0 auto calc(50/590*100%);
	}
	.cont03 .tab .tabcont li .txt01 {
		text-align: center;
		font-size: calc(30 / 25 * 1em);
		font-weight: 500;
		margin-bottom: calc(30/590*100%);
	}
	.cont03 .tab .tabcont li .txt02 {
		text-align: center;
		font-size: calc(30 / 25 * 1em);
		font-weight: 500;
		margin-bottom: calc(50/590*100%);
	}
	.cont03 .tab .tabcont li .txt03 {
		text-align: center;
		font-size: calc(30 / 25 * 1em);
		font-weight: 500;
	}
	.cont03 .tab .tabcont li p span {
		color: #e84572;
	}
	.cont03 .tab .tabcont li .hr{
		margin-bottom: calc(50/590*100%);
	}
	.cont03 .tab .tabcont li .txtbox {
		padding: calc(25/590*100%) 0;
		background: #ccf2fb;
		border-radius: calc(20/750*100vw) calc(20/750*100vw);
		text-align: center;
		font-size: calc(30 / 25 * 1em);
		font-weight: 500;
		line-height: calc(45 / 30);
	}
	.cont03 .tab .tabcont li .ttl01 {
		margin-bottom: calc(40/590*100%);
		text-align: center;
		font-size: calc(38 / 25 * 1em);
		font-weight: bold;
	}
	.cont03 .tab .tabcont li.tabcont02 .img01 {
		width: calc(550/590*100%);
		margin: 0 auto calc(50/590*100%);
	}
	.cont03 .tab .tabcont li.tabcont02 .img02 {
		width: calc(452/590*100%);
		margin: 0 auto calc(50/590*100%);
	}
	.cont03 .bnr_dl {
	}
	.cont03 .bnr_dl li {
		/*margin-bottom: calc(20/590*100%);*/
	}
/*
	.cont03 .notes {
		width: calc(590/670*100%);
		margin: 0 auto;
		font-size: calc(20 / 25 * 1em);
	}
	.cont03 .notes li {
		padding-left: 1em;
		text-indent: -1em;
	}
	.cont03 h4 + .sign-up {
		margin: calc(-30 / 670* 100%) 0 calc(40 / 670* 100%);
		text-align: center;
	}
*/
	
	
	

@media screen and (min-width: 801px) {
	
	.cont01 .ap_btn {
		display: flex;
		justify-content: space-between;
		/*column-gap: 10px;*/
		width: calc(486/750*100%);
		margin: 0 auto calc(30/750*100%);
	}
	.cont01 .ap_btn li.app {
		width: calc(174/486*100%);
	}
	.cont01 .ap_btn li.app .btn {
		width: calc(154/174*100%);
		margin: 0 auto calc(45/174*100%);
	}
	.cont01 .ap_btn li .btn a {
		pointer-events: none;
	}
	.cont01 .ap_btn li.gp {
		width: calc(174/486*100%);
	}
	.cont01 .ap_btn li.gp .btn {
		margin-bottom: calc(45/174*100%);
	}
	.cont01 .ap_btn li .qr {
		display: block;
	}
	.cont01 .btn01 {
		display: none;
	}
	.cont01 .pc_qr {
		display: flex;
		justify-content: center;
		column-gap: calc(42/750*100%);
		width: 100%;
		/*width: calc(580/750*100%);*/
		margin: 0 auto calc(30/750*100%);
	}
	.cont01 .pc_qr li {
	}
	.cont01 .pc_qr li.icon {
		width: calc(290/750*100%);

	}
	.cont01 .pc_qr li.qr {
		width: calc(245/750*100%);
		/*background: #eeeeee;*/
	}
	.cont01 .pc_qr li.qr #my_qr_code_div_id canvas {
		width: 100%!important;
		height: auto!important;
	}
	
	.cont02 .box {
		border: calc(450/750*6px) solid #004a9e;
		border-radius: calc(450/750*30px);
	}
	.cont02 .box .inner {
		height: calc(450/750*840px);
	}
	.cont03 .b_box {
		border: calc(450/750*6px) solid #c5e9fa;
		border-radius: calc(450/750*20px);
	}
	.cont03 .tab .tabcont li {
		border: calc(450/750*6px) solid #c5e9fa;
		border-radius: 0 0 calc(450/750*30px) calc(450/750*30px);
	}
	.cont03 .tab .tabcont li .txtbox {
		border-radius: calc(450/750*20px) calc(450/750*20px);
	}
	
}

@media screen and (min-width: 801px) {
/*モーダルを開くボタン*/
.modal-open01,
.modal-open02{
	cursor: pointer;
}
.modal-open01 img:hover,
.modal-open02 img:hover{
	/*opacity: 0.8;*/
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(100,100,100,50%);
	/*padding: 40px 20px;*/
	overflow-x: auto;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-container .modal-body{
	overflow-x: auto;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	/*max-width: 620px;*/
	width: 1200px;
	background: #fff;
	/*margin: 20px 0;*/
	box-sizing: border-box;
}
/*モーダルを閉じるボタンの指定*/
.modal-container .modal-close{
	position: absolute;
	top: 30px;
	right: 30px;
	width: 32px;
	height: auto;
	margin: 0 0 0 0;
	cursor: pointer;
}
.beginner {
	width: 841px;
	margin: 0 auto;
	padding: 55px 0;
	
}

.bnr_area {
	width: 1024px;
	margin: 0 auto;
	padding: 55px 0;
	text-align: left;
	
}
.bnr_area a {
	color: #000000!important;
	
}
.bnr_area .ttl01 {
	margin-bottom: 35px;
	font-size: 25px;
	font-weight: bold;
	color: #0074c1;
	line-height: 1.0;
}
.bnr_area .ttl02 {
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.0;
}
.bnr_area ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 1046px;
	margin: 0 0 0 -22px;
}
.bnr_area ul li {
	width: 152px;
	margin: 0 0 20px 22px;
}
.bnr_area ul li p {
	margin-top: 5px;
	background: url(../../../../img/campaign/wester-dl-cp/202511/icon_link01.png) right 5px no-repeat;
	background-size: 12px auto;
	font-size: 12px;
	line-height: 1.4;
}
.bnr_area .column01 {
	margin: 0 0 40px 0;
}
.bnr_area .column01.flex02 {
	display: flex;
	justify-content: flex-start;
	
}
.bnr_area .column01.flex02 .ttl02 {
	margin-right: 18px;
}
.bnr_area .column02 {
	display: flex;
	justify-content: flex-start;
}
.bnr_area .column02 ul {
	width: 544px;
}
/*
.bnr_area .column06 {
	display: flex;
	justify-content: flex-start;
}*/
.bnr_area .column01.item01 ul {
	width: 196px;
}
.bnr_area .column01.item01 .flex03 {
	display: flex;
	justify-content: flex-start;
}
.bnr_area .column01.item01 .flex03 .link {
	margin-top: 22px;
}
.bnr_area .link {
	font-size: 15px;
}
.bnr_area .link a {
	color: #00499f!important;
	text-decoration: underline;
}


.modal-container.modal02 .modal-body{
	width: 710px;
}
.modal-container.modal02 .modal-close{
	position: absolute;
	top: 23px;
	right: 23px;
	width: 19px;
}
.modal02_cont {
	padding: 44px 64px;
	
}

.entry {
	display: none;
}	
.entry_start {
	/*display: none;*/
}	


}

@media screen and (max-width: 800px) {

	/*モーダルを開くボタン*/
	.modal-open01,
	.modal-open02{
		cursor: pointer;
	}
	/*モーダル本体の指定 + モーダル外側の背景の指定*/
	.modal-container{
		z-index: 1200;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(100,100,100,50%);
		/*padding: 40px 20px;*/
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		box-sizing: border-box;
	}
	/*モーダル本体の擬似要素の指定*/
	.modal-container:before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	/*モーダル本体に「active」クラス付与した時のスタイル*/
	.modal-container.active{
		opacity: 1;
		visibility: visible;
	}
	/*モーダル枠の指定*/
	.modal-container .modal-body{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		/*max-width: 620px;*/
		width: calc(596 / 750 * 100%);
	}
	/*モーダルを閉じるボタンの指定*/
	.modal-container .modal-close{
		position: absolute;
		top: 0;
		right: calc(-35 / 596 * 100%);
		width: calc(70 / 596 * 100%);
		margin: calc(-35 / 596 * 100%) 0 0 0;
		height: auto;
		cursor: pointer;
	}
	/*モーダル内のコンテンツの指定*/
	.modal-container .modal-content{
		/*background: #000000;*/
		/*border-radius: calc(40 / 750 * 100vw);*/
		box-sizing: border-box;
		text-align: center;
		padding: calc(60 / 596 * 100%) 0;
		background: #fff;
		border-radius: calc(25 / 750 * 100vw);
	}
	.bnr_area {
		width: calc(400/596*100%);
		margin: 0 auto;
		padding: 0 0;
	}
	.bnr_area ul  {
	}
	.bnr_area ul li:first-child {
		margin-bottom: calc(50/400*100%);
	}
	
}

