@charset "UTF-8";

@media (prefers-reduced-motion: no-preference) {
	:root {
	  scroll-behavior: auto;
	}
}
body{
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: #000000;
}

html,body,h1,h2,h3,h4,ul,ol,li,p,span,iframe,footer,address,h1,h2,h3,h4,h5,dl,dt,dd{
  margin: 0;
  padding:0;
}
*:focus {
	outline: none;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.table{
	border-color: #CCC;
}
p{
	line-height: 1.8;
}
/* font
------------------------------*/
.min-font{
	font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
/* link
------------------------------*/
a{
	color: #000000;
	transition : color 0.5s ease 0s;
	text-decoration: none;
}
a:focus {
    outline: none;
}
a:hover{
	text-decoration: none;
	color: #000000;
	/* opacity: .6; */
}
.underline_link{
	text-decoration: underline!important;
}
.hover_u_link:hover{
	text-decoration: underline!important;
}
.hover_u_link2{
	color:#FFF;
}
.hover_u_link2:hover{
	color:#FFF;
	text-decoration: underline!important;
}
iframe{
	vertical-align: bottom;
}

figure {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure {
	margin: 0;
}
figure:hover {
	opacity: 0.7;
}
/* hr
------------------------------*/
hr{
	border-top: 2px dashed #4493d0;
}
hr.border_gray{
	border-top: 1px solid #e2e2e2;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.border_dotted{
	border-top: 2px dotted #424242;
	/* margin-bottom: 3rem; */
}

/* Breadcrumb
------------------------------*/

/* header
------------------------------*/
header{
	/*background-color: #d81918;*/
	/*padding: 30px 0 30px;*/
}

/* slick
------------------------------*/



/* list
------------------------------*/
li{list-style-type: none;}
ul.circle_list,ul.common_list{
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.circle_list li::before{
	content: "● ";
}
ul.circle_list.font-l{
	font-size: 18px;
}
.circle_list li:not(:last-child){
	margin-bottom: 10px;
}


ul.double-circle_list,ul.common_list{
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.double-circle_list li::before{
	content: "◎ ";
}
ul.double-circle_list.font-l{
	font-size: 16px;
}
.double-circle_list li:not(:last-child){
	margin-bottom: 10px;
}


ol {
	position: relative;
	margin: 0;
	padding: 0
}
ol li {
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding-left: 1.25em
}
ol li span {
	position: absolute;
	left: 0;
	margin: 0
}
.common_list li:not(:last-child){
	margin-bottom: .5rem;
}
.common_list li::before{
	content: "・";
}
.triangle_list li{
	position: relative;
	padding: 0 0 0 10px;
	margin: 0;
}
.triangle_list li:not(:last-child){
	margin-bottom: .5rem;
}
.triangle_list li::before{
    position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0da';
    color: #0070b7;
}

/* table */
.vote_list .table{
	border-color: #00adba;
	font-size: 14px;
}
.vote_list .table th{
	vertical-align: middle;
}
.vote_list .table-bordered > :not(caption) > * > * {
    border-width: 0 2px;
}
.vote_list .table-bordered > :not(caption) > * {
    border-width: 2px 0;
}
/* color
------------------------------*/
.white{
	color: #FFF;
}
.orange{
	color: #e95412;
}
.red{
	color: #E91818;
}
.blue{
	color: #0070b7;
}
.green{
	color: #04af7a;
}
.grey{
	color: #585858;
}
/* space
------------------------------*/
section{
	/*padding-top: 40px;*/
}
.color_inner{
	padding-top: 40px;
	padding-bottom: 20px;
}
.contents_space{
	padding-top: 30px;
}
.contents_space_l{
	padding-top: 50px;
}
.contents_space_l.cp-first{
	padding-top: 200px;
}
.map_space{
	padding-top: 60px;
}
.button_inner{
	padding-top: 70px;
}
.contents_space_border{
    border-top: 1px solid #CCC;
    padding-top: 40px;
    margin-top: 40px;
}
.contents_space_s_border{
	border-top: 1px solid #CCC;
}
.color_inner02{
	padding-top: 40px;
	padding-bottom: 40px;
}
/* title
------------------------------*/
.tit{
	/* font-size: 20px; */
	font-size: 1.25rem;
	line-height: 1.8;
}
.tit_sub{
	/* font-size: 16px; */
	font-size: 1rem;
}
.tit06 {
	text-align: center;
	padding-top: 30px;
}
.tit06 img{
	max-width: 413px;
	width: 100%;
}
.tit_l_border{
    padding: 0.5rem 1rem;
    border-left: 4px solid #000;
    margin-bottom: 0.8rem;
    background-color: #FFF;
    font-weight: 600;
	font-size: 18px;
	letter-spacing: .3em;
}
.tit_border{
	border-left: 3px solid #000;
	border-bottom: 3px solid #000;
	padding: 15px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
}
.tit_bg{
	background-color: #f15a24;
	color: #FFF;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	padding: 15px;
}
.tit_bg2{
	width:100%;
	background-color: #b2e0ed;
	color: #0595c7;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	padding: 15px;
}
.tit_u_border{
	border-bottom: 2px solid #00adba;
	color: #00adba;
	font-size: 18px;
}
.tit_bg_blue{
	color: #FFF;
	background-color: #00adba;
	font-weight: 600;
	padding: 15px;
	border-radius: 20px;
	text-align: center;
	font-size: 18px;
}
.tit_bg_blue span{
	font-size: 80%;
}
.tit_bg_blue2{
	color: #FFF;
	background-color: #0099c3;
	font-weight: 600;
	padding: 15px;
	border-radius: 20px;
	text-align: center;
	/*font-size: 18px;*/
}
.tit_bg_blue2 span{
	/*font-size: 80%;*/
}
/* box
------------------------------*/
.main_area{
	background-color: #f2f2f3;
	padding-top: 30px;
}
.main_text{
	font-size: 16px;
	font-weight: 600;
	padding: 20px 0;
}
.comment_area{
	padding-top: 30px;
}
.comment_box{
	background-color: #FFF;
	border-radius: 10px;
	padding: 40px 20px 20px;
	font-size: 16px;
	line-height: 1.8;
	position: relative;
}
.comment_box .re{
	position: absolute;
	left: 20px;
	top: -19px;
}
.comment_box .re img{
	width: 80px;
}

.balloon_area{
text-align: center;
}

.balloon-left {
	position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 20px 20px 120px;
    width: 100%;
    /* color: #555; */
    background: #FFF;
    border: solid 3px #000;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.8;
	text-align: left;
}



.balloon-left p {
  margin: 0;
  padding: 0;
}



.sankou img{
	max-width: 66px;
	width: 100%;
}
.sankou_list{
	font-size: 16px;
	font-weight: 600;
}
.box_border_g{
	border: 2px solid #04af7a;
	padding: 5px;
}
.sankou_list li a{
	text-decoration: underline;
}
.mokuji_box{
    border: 3px solid #000;
    padding: 15px;
    border-radius: 10px;
	background-color: #FFF;
}
.mokuji_box h4{
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
}
.mokuji_box ul li{
    position: relative;
    padding: 0 0 0 15px;
    margin: 0 0 10px;
    font-size: 16px;
}
.mokuji_box ul li::before{
    position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0da';
    color: #000000;
}
.mokuji_box ul li a{
	text-decoration: underline;
}
.mokuji_box ul li a:hover{
	text-decoration: underline;
}
.toiawase_box h4{
	font-size: 16px;
    font-weight: 600;
    padding: .3rem 0.5rem;
    border-left: 4px solid #c40000;
    margin-bottom: 15px;
}
.toiawase_box{
    border: 2px solid #ffd6d6;
    margin: 20px auto 0;
    padding: 15px;
	font-size: 16px;
}
.toiawase_box a{
	text-decoration: underline;
	color: #e60000;
}
/* text
------------------------------*/
.lead_text{
	/* font-size: 16px; */
	font-size: 1rem;
}
.bold{
	font-weight: 600;
}
.normal-text{
	font-size: 1rem;
}
.normal{
	font-weight: 500;
}
.l-h15{
	line-height: 1.5;
}
.l-h18{
	line-height: 1.8;
}
.l-h2{
	line-height: 2;
}
.l-spacec_c1{
	letter-spacing: .08em;
	text-indent: .08em;
}
.l-spacec_c2{
	letter-spacing: .2em;
	text-indent: .2em;
}
.l-spacec_1{
	letter-spacing: .1em;
}

/* bg
------------------------------*/
.bg_grey{
	background-color: #f2f2f3;
}
.bg_red{
	background-color: #d81918;
}
.bg_gray02{
	background-color: #d3d3d4;

}
.bg_pink{
	    background-color: #fbdfdf;
}
/* footer
------------------------------*/
#foote{
	position: relative;
}
footer{
	/*padding-top: 60px;
	padding-bottom: 60px;*/
	font-size: 0.9375rem;
}
.copy{
	font-size: 16px;
	font-weight: 600;
}
.icon-twitter{
	text-align: center;
	margin-bottom: 15px;
}
.icon-twitter img{
	width: 50px;
}

.logo-box{
	max-width: 69px;
	position: absolute; 
	top: 16px; 
	left: 16px;
}

.sp{
	display: none !important;
}

.pc{
	display: flex;
	margin: 0 auto;
}

.vote-area{
	background-color: transparent !important;
}

.vote-area {
    /* マージンをマイナスにして画面全幅に広げる */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 102%;

	padding: 1rem;
    
	margin: auto;
	margin-left: -8px;
    
    /* 背景画像の設定はそのまま */
    background-image: url(../images/vote-bg.webp);
    background-repeat: repeat-y;
    background-size: 100% auto;
}


.background-a{
	background-image: url('images/A-bg.webp');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.background-b{
	background-image: url('images/B-bg.webp');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.background-n{
	background-image: url('images/n-bg.webp');
background-size: 100% auto; /* 横幅を画面いっぱいに広げ、縦横比を維持 */
    background-repeat: repeat-y; /* 縦方向のみ繰り返す */
    background-attachment: scroll; 
	background-position: center;
}

.background-mc{
	background-image: url('./mc/images/mc-bg.webp');
background-size: 100% auto; /* 横幅を画面いっぱいに広げ、縦横比を維持 */
    background-repeat: repeat-y; /* 縦方向のみ繰り返す */
    background-attachment: scroll; 
	background-position: center;
}

.filter{
	background-color: #fff;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	filter: drop-shadow(0px 0px 20px #666);

}


/* 全体を囲むコンテナ */
.top-button-container {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 10px;    /* スマホ等での画面端の余白 */
justify-content: flex-start; 

}

/* 各ボタンの共通スタイル */
.top-btn {      
 /* パソコンなどの広い画面では4等分（隙間分を引く） */
  flex: 1 1 calc(25% - 12px) !important; 
  text-align: center;

  display: flex !important;       /* ★インラインからFlexboxに変更 */
  align-items: center;            /* ★文字の縦位置（上下）を中央揃えにする */
  justify-content: center;        /* ★文字の横位置（左右）を中央揃えにする */
  
  /* 見た目の装飾（Figmaの値を参考に調整してください） */
  border: 1px solid #1979C0; /* Figmaの線色 */
  background-color: #FFFFFF; /* 背景色 */
  color: #1979C0;            /* 文字色 */
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  border-radius: 4px;        /* 角丸（デザインに合わせて変更してください） */
  transition: all 0.3s ease;
  height: 54px;
  margin: 0.5rem;

}

/* ホバーエフェクト（お好みで） */
.top-btn:hover {
  background-color: #1979C0;
  color: #FFFFFF;
}

.top-btn-none{
	background-color: #eee;
	color:#CCC;
	border:1px solid #CCC;
}
/* ホバーエフェクト（お好みで） */
.top-btn-none:hover {
  background-color: #eee;
  color: #ccc;
}

.bg-white{
	background-color: #fff;
	max-width: 1000px;
}

.img-800{
	max-width: 800px;
	margin-bottom: 2rem;
}

.img-first{
	margin-top: 2rem;
}


.d-flex{
	display: flex;
}

.mc-h3{
	font-size: 1.2rem;
	font-weight: bold;
	text-align: left;
	border-left: #0070b7 4px solid;
}

.bg-rightblue{
	background-color: rgba(184, 213, 225, 0.3);
	padding: 3rem !important;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.section{
		margin-top: 2rem;
	margin-bottom: 2rem;

}

.bg-none{
	padding: 1rem 2rem !important;
}

.h3-pink{
	background-color: #E37979;
	color: #fff;
	display: inline-block;
	padding: 1rem auto;
	font-size: 1.1rem;
	margin: 1rem 0;
	display: flex;
    height: 36px;
    justify-content: center;
    align-items: center;
}

.next-pink{
	width: 100px;
	height: auto;
}

.footer-iwatekeiba{
	width: 200px;
	margin: 2rem auto;
}

.under-box{
	display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え（必要に応じて） */
  flex-direction: column;  /* 中の要素を縦並びにして中央揃えにしたい場合 */
  width: 100%;
  box-sizing: border-box;
}

.white-box{
	background-color: #ddd;
	margin: 12px;
	text-align: left;
	padding: 1rem;
}

.first-box{
		margin-top: 0;
	}

.c-bnr{
  filter: grayscale(100%);

	}

.btn-240{
	width: 240px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
}














/* topBtn
------------------------ */
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition:all 0.3s;
}

#page-top {
	position: fixed;
	right: 15px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}
#page-top a:hover{
	opacity: .8;
}
/*　上に上がる動き　*/

/* .vote-area .row .col-3 a img{
	box-shadow: 0px 0px 1px 5px #EEE;
}  */

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
	from {
	opacity: 0;
	transform: translateY(100px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
	from {
		opacity: 1;
	transform: translateY(0);
	}
	to {
		opacity: 1;
	transform: translateY(100px);
	}
}
@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none!important;
	}
	/* list
	------------------------------*/
	ul.double-circle_list.font-l{
		font-size: 18px;
	}

	/* space
	------------------------------*/


	/* text
	------------------------------*/
	.lead_text{
		/* font-size: 18px; */
		font-size: 1.125rem;
	}

	/* bg
	------------------------------*/
	
	/* title
	------------------------------*/



	/* button
	------------------------------*/
	/* footer
	------------------------------*/

	/* box
	------------------------------*/
	.main_area{
		background-color: #f2f2f3;
		padding-top: 40px;
	}
	.balloon-left:before {
		content: "";
		position: absolute;
		top: 50%;
		left: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-right: 12px solid #FFF;
		z-index: 2;
	}
	.balloon-left:after {
		content: "";
		position: absolute;
		top: 50%;
		left: -30px;
		margin-top: -14px;
		border: 14px solid transparent;
		border-right: 14px solid #000;
		z-index: 1;
	}
	.character{
		display: none;
	}
	.character_pc{
		position: relative;
	}
	.character_pc img{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 90%;
		margin: 0 auto;
	}
	.sankou_list li a{
		text-decoration: none;
	}
	.sankou_list li a:hover{
		text-decoration: underline;
	}
	.mokuji_box{
		padding: 30px;
		border-radius: 20px;
	}
	.mokuji_box ul li{
		font-size: 18px;
		padding: 0 0 0 20px;
	}
	.mokuji_box h4{
		font-size: 24px;
	}
	.mokuji_box ul li a{
		text-decoration: none;
	}
	.toiawase_box h4{
		font-size: 18px;
	}
	.toiawase_box{
		padding: 20px;
	}
	/* topBtn
	------------------------ */
	#page-top a{
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 767px){

	/* box
	------------------------------*/
	/* header
	------------------------------*/
	.day{
		text-align: center;
	}
	.day img{
		max-width: 60%;
		width: 100%;
	}

	.image-container {
  		width: 100%;          /* 表示させたい幅 */
  		height: 550px;        /* 表示させたい高さ（任意で調整） */
  		overflow: hidden;     /* はみ出た部分を隠す */
	}

	.image-container img {
  		height: 100%;         
  		object-fit: cover;    /* 縦横比を保ったまま枠いっぱいに拡大/縮小 */
  		object-position: center; /* 画像の中心を基準に表示する */
	}

	.logo-box{
		max-width: 52px;
	}

	.bnr-now{
		padding: 1rem;
		padding-bottom: 0;
	}

	.sp-video{
		margin-bottom: 1rem;
	}

	.pc{
		display: none !important;
	}

	.sp{
		display: block !important;
	}

	.sp-bnr{
    	margin: 3rem auto;
    	text-align: center;
    	padding: 0 auto;
    	display: flex;
    	justify-content: center;
	}

	.img-800{
		width: 100vw;
	}
	
	.bg-rightblue{
		padding: 1rem !important;
	}
	
	.mc-h3{
		margin: 1rem;
		font-size: 1rem;
	}

	.bg-none{
		padding: 1rem !important;
	}

	.backbtn{
		margin-bottom: 3rem;
	}

	.sp-block{
		display: block !important;
	}

	.first-box{
		margin-top: 3rem;
	}

	.h3-pink{
		height: 60px;
	}

	.top-button-container{
		/*display: none;*/
	}










}
@media (min-width: 992px){

	/* header
	------------------------------*/
	header{
		/*padding: 100px 0 40px;*/
	}


	/* title
	------------------------------*/
	.tit{
		font-size: 28px;
		font-size: 1.75rem;
	}
	.tit_sub{
		font-size: 22px;
		font-size: 1.375rem;
	}
	.tit06 {
		padding-top: 60px;
	}
	.tit_border{
		font-size: 26px;
	}
	.tit_bg{
		font-size: 26px;
	}
	.tit_bg2{
		font-size: 26px;
	}
	.tit_bg_blue{
		font-size: 30px;
	}
	.tit_u_border{
		font-size: 24px;
	}
	.tit06 img{
		max-width: 613px;
		width: 100%;
	}
	/* text
	------------------------------*/


	/* bg
	------------------------------*/

	/* box
	------------------------------*/
	.comment_area{
		padding-top: 90px;
	}
	.comment_box{
		font-size: 20px;
		padding: 60px 40px 40px;
	}
	.balloon-left {
		font-size: 20px;
	}
	.comment_box .re img{
		width: 123px;
	}
	.comment_box .re{
		left: 40px;
		top: -33px;
	}
	.balloon-left {
	    padding: 40px 40px;
		margin-bottom: 65px;
	}

	.sankou img{
		max-width: 125px;
		width: 100%;
	}
	.sankou_list{
		font-size:26px;
	}

	/* footer
	------------------------------*/
	.copy{
		font-size: 24px;
	}
	.icon-twitter img{
		width: 68px;
	}
	.icon-twitter{
		margin-bottom: 30px;
	}
	/* space
	------------------------------*/
	section{
		/*padding-top: 60px;*/
	}
	.color_inner{
		padding-top: 60px;
		padding-bottom: 40px;
	}
	.contents_space{
		padding-top: 60px;
	}
	.color_inner02{
		padding-top: 60px;
		padding-bottom: 60px;
	}
}
@media (max-width: 991px){
.character img{
	width: 120px;
	position: absolute;
	right: 0;
	bottom: 0;
}

}
@media (min-width: 1400px){

}
@media (min-width: 992px) and (max-width: 1399px) {

}
@media (min-width: 768px) and (max-width: 991px) {
	/* header
	------------------------------*/
	/* header{
		padding: 70px 0 40px;
	} */
	/* box
	------------------------------*/
	.comment_area{
		padding-top: 70px;
	}
	.comment_box{
		font-size: 18px;
		padding: 50px 30px 30px;
	}
	.comment_box .re{
		left: 30px;
		top: -21px;
	}
	.balloon-left {
		font-size: 18px;
		padding: 20px 30px;
		position: relative;
	}
	.sankou_list{
		font-size:21px;
	}
	/* title
	------------------------------*/
	.tit06 {
		padding-top: 40px;
	}
	.tit_border{
		font-size: 22px;
	}
	.tit_bg{
		font-size: 22px;
	}
	.tit_bg2{
		font-size: 22px;
	}
	.tit_u_border{
		font-size: 21px;
	}
	.tit_bg_blue{
		font-size: 24px;
	}
	/* footer
	------------------------------*/
	.copy{
		font-size: 18px;
	}
	/* space
	------------------------------*/
	section{
		/*padding-top: 50px;*/
	}
	.contents_space{
		padding-top: 50px;
	}


}
@media (min-width: 1200px){
	/* header
	------------------------------*/

	/* bg 
	------------------------------*/

	/* slick
	------------------------------*/


	/* title
	------------------------------*/


	/* space
	------------------------------*/

	/* box
	------------------------------*/
	.main_text{
		font-size: 26px;
		padding: 40px 0;
	}
}
@media (max-width: 1199px){


}
@media (min-width: 576px){
	/* box
	------------------------------*/
	.main_text{
		text-align: center;
	}
	/* footer
	------------------------------*/

}
@media (max-width: 575px){

	/* footer
	------------------------------*/

	/* title
	------------------------------*/
	/* box
	------------------------------*/

	/* footer
	------------------------------*/

}

@media (min-width: 992px) and (max-width: 1199px) {

	/* title
	------------------------------*/


	/* box
	------------------------------*/
	.main_text{
		font-size: 21px;
	}

	/* space
	------------------------------*/

}

@media (min-width: 768px) and (max-width: 991px) {
	.tit{
		/* font-size: 28px; */
		font-size: 1.75rem;
	}
	.tit_sub{
		/* font-size: 20px; */
		font-size: 1.25rem;
	}
	/* text
	------------------------------*/

	/* title
	------------------------------*/
	/* space
	------------------------------*/
	/* box
	------------------------------*/
	.main_text{
		font-size: 18px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.tit{
		font-size: 24px; 
		font-size: 1.5rem;
	}
	.tit_sub{
		/* font-size: 18px; */
		font-size: 1.125rem;
	}


}
@media (max-width: 450px){

}


@media print{
}




@media (min-width: 1400px){
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1124px;
	}
}
@media (min-width: 1200px){
	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1124px;
	}
}

.header-box {
	background-color: #0799c5;
	margin-top: 0;
	padding: 20px 0;;
}

.header-box p {
	color:#FFF;
	word-break: break-all;
	font-weight: 600;
	line-height: 1.4;
	margin-right: 20px;;
}
p.houhosha {
	width:100%;
	border-bottom: 2px dotted #424242;
	padding: 10px 0;
}
.tvcm-box {
	width:100%;
	text-align: center;
	padding-top: 30px;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9の場合 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-bg-01 {
	background-color: #3c210e;
	background-image: url(./images/section_bg01.jpg);
	background-repeat: repeat-y;
	background-size: 100% auto;
	/*padding-bottom: 20px;*/
	padding-bottom: 20px 0;
}

.content-bg-02 {
	background-color: #3c210e;
	background-image: url(./images/section_bg02.jpg);
	background-repeat: repeat-y;
	background-size: 100% auto;
	padding-bottom: 20px;
	border-top: 3px solid #bf7c1b;
	border-bottom: 3px solid #bf7c1b;
}

.content-bg-03 {
	background-color: #241100;
	background-image: url(./images/section_bg03.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-bottom: 20px;
}
#strategy {
	color: #FFF;
}
#strategy table tr td {
	color: #FFF;
}
#strategy table {
	width:60%;
	margin: 10px auto 30px;
}
#strategy h3 {
	color: #FFF;
	padding: 40px 0 20px;
	font-weight: 800;
}
#strategy p {
	text-align: left;
	color: #FFF;
	padding-bottom: 20px;
}

.content-box {
	text-align: center;
	padding: 10px 100px;
}

.content-box h2 {
	padding: 50px 0 20px;
}

.playback-area {
	padding: 10px 50px 50px;
}
.playback-area h3 {
	padding: 15px 0;
	text-align: left;
}
.playback-area p {
	color: #FFF;
	text-align: left;
}
.vote-area {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #3c210e;
	background-image: url(./images/vote-bg.webp);
	background-repeat: repeat-y;
	background-size: 100% auto;
}

.footer-area {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #3c210e;
}

.footer-area p {
	text-align: center;
	color: #FFF;
}
.footer-area a,a:hover {
	color: #FFF;
}

main {
	padding-top: 60px;
}

nav {
    position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color:#1e791d;
    z-index: 5;
    width: 100%;
    height: 60px;
}

.kokuchi-box {
	width:100%;
	background-color: #bca200;
	padding:3%;
	border-radius: 12px 12px 12px 12px;
}
.kokuchi-box p{
	font-size: 140%;
	font-weight: 800;
	color: #FFF;
	text-shadow: rgb(61, 50, 6) 1px 0 10px;
}

strong {
	font-weight: 900;
	font-style: italic;
}

.xcp-box {
	width:80%;
	background-color: #bca200;
	padding:3%;
	border-radius: 12px 12px 12px 12px;
	margin: 10px auto;
}
.xcp-box p{
	font-size: 140%;
	font-weight: 800;
	color: #FFF;
	text-shadow: rgb(61, 50, 6) 1px 0 10px;
}

.powerful-horse-header {
	font-size: 1.2rem;
	width: 100%;
	border-top: 2px solid #B28900;
	border-bottom: 2px solid #B28900;
	padding: 10px 0;
	margin-top: 35px;
	margin-bottom: 20px;
}

.powerful-horse-box {
	border-radius: 20px 20px 20px 20px;
	background: #BDA300;
	background: linear-gradient(180deg, rgba(189, 163, 0, 0.8) 0%, rgba(178, 137, 0, 0.5) 100%);
	padding:20px;
}

.powerful-horse-box h4 {
	font-weight: 600;
	text-align: left;
	margin-bottom: 10px;
}

.powerful-horse-box p {
	padding-bottom: 6px!important;
	line-height: 1.4;
}

.powerful-horse-box span {
	font-weight: 600;
}

.global-nav {
	margin: 0 auto;
	text-align: center;
}
.global-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 重なった部分が切れないように */
  overflow: visible;
}

.global-nav .nav-item {
  position: relative;
  margin-left: -16px;
}  

.global-nav .nav-item:first-child {
  margin-left: 0;          /* 最初だけは重ねない */
}

.global-nav .nav-item a {
  display: block;
  position: relative;
}

/* 左側ほど上に重なるように z-index を指定 */
.global-nav .nav-item:nth-child(1) a { z-index: 4; }
.global-nav .nav-item:nth-child(2) a { z-index: 3; }
.global-nav .nav-item:nth-child(3) a { z-index: 2; }
.global-nav .nav-item:nth-child(4) a { z-index: 1; }

.data-title {
            font-weight: bold;
            text-align: center;
            color: #333333;
            margin: 15px 0 10px 0;
        }

        /* テーブル全体のスタイル */
        .data-table {
            width: calc(100% - 180px); /* 左右に16pxずつの余白 */
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 12px;
        }

        /* テーブルのヘッダー行 */
        .data-table th {
            background-color: #eff5ff;
            font-weight: bold;
            padding: 6px 4px;
            border-top: 1px solid #222;
            border-bottom: 1px solid #222;
            text-align: center;
        }

        /* テーブルのデータセル */
        .data-table td {
            padding: 8px 4px;
            text-align: center;
            border-bottom: 1px dashed #cccccc; /* 破線のボーダー */
        }

        /* 1列目（「1番人気」など）の強調 */
        .data-table td:first-child {
            font-weight: bold;
            color: #333333;
        }

        /* 下部の本文・解説テキスト */
        .data-description {
            padding: 12px 16px 0 16px;
            font-size: 1rem;
            line-height: 1.6;
			text-align: left;
			margin: 1rem 0 2rem;
        }

		.data-h4 {
    /* 背景色：Figmaの指定（1973B3 の 15%）をrgbaで再現 */
    background-color: rgba(25, 115, 179, 0.15);

	display: block;
    
    /* 文字のスタイル */
    color: #000000;
    font-size: 14px; /* 全体とのバランスを合わせたサイズ */
    font-weight: bold;
    text-align: center;
    
    /* 形状と余白 */
    padding: 10px 20px;
    border-radius: 4px; /* 緩やかな角丸 */
    
    /* 配置の調整 */
    width: 100%; /* 文字の長さに背景を合わせる場合 */
    box-sizing: border-box; /* paddingを含めて100%にする */
    margin: 20px auto;  /* 中央寄せにしつつ、前後に余白を作る */
}

.data-white-h4{
	background-color: #eee;
}

.gray-box{
	background-color: #fff !important;
	border: #ccc 4px solid !important;
	padding: 1rem;
}





@media (max-width: 575px){
.content-box {
	text-align: center;
	padding: 0 0 10px;
}
.playback-area {
	padding: 10px 0 50px;
}
.footer-area p {
	text-align: left;
}
#strategy table {
	width:100%;
	margin: 10px auto 30px;
}
#strategy h3 {
	color: #FFF;
	padding: 40px 0 20px;
	font-weight: 800;
	text-align: left;
}

        .data-table {
            width: 100%; /* 左右に16pxずつの余白 */
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 12px;
        }


	/* footer
	------------------------------*/

	/* title
	------------------------------*/
	/* box
	------------------------------*/

	/* footer
	------------------------------*/

}

@media (max-width: 767px) {
    /* -------------------------------------------
     * ページ内リンクメニューのスマホ最適化（リスト風2カラム）
     * ------------------------------------------- */
    .top-button-container {
        padding: 0 !important; /* 画面端の隙間をなくして横幅いっぱいに */
        margin-bottom: 20px;
    }
    
    .top-button-container .d-flex {
        flex-wrap: wrap !important; /* 横並びを折り返す設定 */
        margin: 0 !important;
    }

    /* ▼【修正】影響範囲を .top-button-container 内の .top-btn に限定 */
    .top-button-container .top-btn {
        flex: 0 0 50% !important;    /* 強制的に横幅50%（2カラム）にする */
        max-width: 50% !important;
        margin: 0 !important;        /* ボタン間の隙間を消す */
        border: none !important;     /* 青い枠線を消す */
        border-radius: 0 !important; /* 角丸を消す */
        height: 38px !important;     /* スッキリした高さに調整 */
        font-size: 13px !important;  /* スマホ向けに少し文字を小さく */
        color: #333 !important;      /* 画像2に合わせて文字色をダークグレーに統一 */
        background-color: transparent !important;
        border-bottom: 1px solid #fff !important; /* 白い区切り線（横） */
        border-right: 1px solid #fff !important;  /* 白い区切り線（縦） */
    }

    /* ▼【修正】未リンクの文字色も影響範囲を限定 */
    .top-button-container .top-btn-none {
        color: #999 !important;
    }

    /* ▼【修正】右端にくる項目の右枠線を消す指定も限定 */
    .top-button-container .top-btn:nth-child(even) {
        border-right: none !important;
    }

    /* 背景色を交互にする（1段目） */
    .top-button-container .d-flex .top-btn:nth-child(1),
    .top-button-container .d-flex .top-btn:nth-child(2) {
        background-color: #f2f2f3 !important; /* 薄いグレー */
    }

    /* 背景色を交互にする（2段目） */
    .top-button-container .d-flex .top-btn:nth-child(3),
    .top-button-container .d-flex .top-btn:nth-child(4) {
        background-color: #e5e5e5 !important; /* 少し濃いグレー */
    }
}

/*スマホでは非表示*/
@media (max-width: 575px){
.sp-none {
	display: none;
}
}
/*PCでは非表示*/
@media (min-width: 576px) {
.pc-none {
	display: none;
}
}

/*スマホ用スタイル追記*/
@media (max-width: 575px){
/* -------------------------------------------
 * CSSで作るリボン見出し
 * ------------------------------------------- */
.css-title-ribbon {
    background-color: #1a73b3; /* リボンの青色（適宜調整してください） */
    color: #fff;
    text-align: center;
    padding: 12px 10px;
    margin-bottom: 20px;
    
    /* ▼ここがリボンの形に切り抜く魔法のコードです */
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
    
    /* 中の文字を縦並び中央にするための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* メインタイトル（キャンペーン情報）のスタイル */
.css-title-ribbon .ribbon-main {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

/* サブタイトル（CAMPAIGN）のスタイル */
.css-title-ribbon .ribbon-sub {
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.15em;
    line-height: 1.2;
    margin-top: 2px;
}

/* スマホ表示時の微調整（必要に応じて） */
@media (max-width: 767px) {
    .css-title-ribbon .ribbon-main {
        font-size: 20px; /* スマホでは少し文字を小さく */
    }
    .css-title-ribbon {
        /* スマホの時に切れ込みを浅くしたい場合は 20px を 15px などに変更 */
        clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%, 15px 50%);
    }
}
.vote-area {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #3c210e;
	background-image: url(./images/vote-bg.webp);
	background-repeat: repeat-y;
	background-size: 105% auto;
}




}