@charset "UTF-8";
/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)){
	all: unset;
	display: revert;
}
*,*::before,*::after{
	box-sizing: border-box;
}
a, button{
	cursor: revert;
}
ol, ul, menu{
	list-style: none;
}
img{
	vertical-align: top;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea{
	-webkit-user-select: auto;
	user-select: auto;
}
textarea{
	white-space: revert;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
::placeholder{
	color: unset;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
	-webkit-user-select: auto;
	user-select: auto;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}
/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
html{
	font-size: 62.5%;
}
body{
	color: #000;
	font-size: 1.5em;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-feature-settings: "palt";
	font-weight: 500;
	letter-spacing: 0.1rem;
	overflow-wrap: break-word;
}
p{
	line-height: 170%;
}
a{
	text-decoration: none;
	transition: all 0.3s;
}
@media (any-hover: hover){
	a:hover{
		text-decoration: none;
	}
}
@media print, screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width: 1200px;
	}
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}
/* 表示切替 */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}
/*
	変数
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--c-blue:   #05A6E9;
	--c-pink:   #E75297;
	--c-green:  #1EAA39;
	--c-orange: #ED7700;
	/* font */
	--f-en: "Oswald", sans-serif;
	/* width */
	--w-base: 1280px;
	--w-900:  960px;
}
/*
	common
-----------------------------------------------------------------------------------------------*/
/* box
============================== */
#wrapper{
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.cts-area{
	margin: 0 auto;
	max-width: var(--w-base);
	padding: 130px 40px;
	position: relative;
	text-align: center;
}
.cts-area.w900{
	width: var(--w-900);
}
/* 見出し
============================== */
[class*="square"]{
	align-items: center;
	color: var(--c-green);
	display: flex;
	font-weight: 900;
	justify-content: center;
}
[class*="square"] span{
	background: #fff;
	display: inline-block;
	line-height: 1.4;
	text-align: center;
}
.square-head{
	font-size: 4.4rem;
	gap: 10px;
}
.square-head span{
	height: 65px;
	width: 65px;
}
.square-tit{
	font-size: 3.6rem;
	gap: 8px;
}
.square-tit span{
	height: 51px;
	width: 51px;
}
/* ふきだし
============================== */
.bubble{
	align-items: center;
	background: #000;
	border-radius: 22px;
	color: #fff;
	display: inline-flex;
	font-size: 1.7rem;
	font-weight: 600;
	height: 44px;
	justify-content: center;
	padding: 0 25px;
	position: relative;
}
.bubble::before{
	background: #000;
	bottom: -13px;
	clip-path: polygon(100% 0, 0 0, 0 100%);
	content: '';
	height: 14px;
	left: 50%;
	position: absolute;
	width: 14px;
}
/* ボタン
============================== */
[class *= "btn-area"]{
	display: flex;
	margin-top: 30px;
}
/* txt-link */
[class *= "txt-link"]{
	color: #000!important;
	text-decoration: underline!important;
	word-break: break-all!important;
}
@media (any-hover: hover){
	[class *= "txt-link"]:hover{
		text-decoration: none!important;
	}
}
/*
	ページタイトル
-----------------------------------------------------------------------------------------------*/
#page-title{
	position: relative;
}
#page-title .cts-area{
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding-block: 30px;
}
/* ロゴ
============================== */
.page-title-logo{
	width: 270px;
}
.page-title-logo img{
	width: 100%;
}
/* 総投票数
============================== */
.count{
	align-items: end;
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-bottom: 10px;
	padding: 0 33px 0 45px;
	position: relative;
}
.count > *{
	font-weight: 700;
}
[class^="count-deco-"]{
	bottom: 2px;
	position: absolute;
}
.count-deco-01{
	left: 0;
}
.count-deco-02{
	right: 0;
}
.count-txt-green{
	color: var(--c-green);
	font-size: 2.7rem;
	line-height: 1.1;
}
.count-num{
	color: var(--c-pink);
	font-family: var(--f-en);
	font-size: 6.6rem;
	font-weight: 400;
	line-height: 1;
}
.count-txt-orange{
	color: var(--c-orange);
	font-size: 3.0rem;
	line-height: 1.2;
}
/* 投票期間
============================== */
.period-tit{
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
}
.period-num{
	align-items: center;
	display: flex;
	font-family: var(--f-en);
	font-size: 4.0rem;
	font-weight: 200;
	justify-content: center;
	letter-spacing: 0.2rem;
	line-height: .6;
	margin: 16px -7px 0 0;
}
.period-en{
	display: inline-block;
	font-size: 1.8rem;
	letter-spacing: .2rem;
	line-height: .8;
	margin: 6px 0 0;
	transform: rotate(90deg);
	transform-origin: inherit;
}
.period-arrow{
	display: flex;
	height: 22px;
	margin: 6px 19px 0 13px;
	width: 22px;
}
.period-arrow svg{
	width: 22px;
}
[class^="page-title-deco-"]{
	bottom: -1px;
	position: absolute;
}
.page-title-deco-01{
	left: 10px;
}
.page-title-deco-02{
	right: 50%;
}
/*
	footer
-----------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:1025px){
	#footerArea{
		margin-top: 0!important;
	}
}
@media screen and (max-width:812px){
	body{
		-webkit-text-size-adjust: 100%;
		font-size: 1.4rem;
	}
	img{
		width: 100%;
	}
	p{
		line-height: 150%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	br.sp{
		display: inline-block;
	}
	/*
		変数
	-----------------------------------------------------------------------------------------------*/
	:root{
		/* width */
		--w-base: 100%;
		--w-900:  100%;
	}
	/*
		common
	-----------------------------------------------------------------------------------------------*/
	/* box
	============================== */
	.cts-area{
		padding: 70px 20px;
	}
	/* 見出し
	============================== */
	.square-head{
		font-size: 2.4rem;
		gap: 3px;
	}
	.square-head span{
		height: 35px;
		width: 35px;
	}
	.square-tit{
		font-size: 2.2rem;
		gap: 3px;
	}
	.square-tit span{
		height: 34px;
		width: 34px;
	}
	/* ふきだし
	============================== */
	.bubble{
		border-radius: 16px;
		font-size: 1.3rem;
		height: 32px;
		padding: 0 20px;
	}
	/* ボタン
	============================== */
	[class *= "btn-area"]{
		display: flex;
		margin-top: 30px;
	}
	/*
		ページタイトル
	-----------------------------------------------------------------------------------------------*/
	#page-title{
		position: relative;
	}
	#page-title .cts-area{
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-block: 25px;
	}
	/* ロゴ
	============================== */
	.page-title-logo{
		width: 120px!important;
	}
	/* 総投票数
	============================== */
	.count{
		gap: 4px!important;
		margin-bottom: 5px!important;
		padding: 0 13px 0 16px!important;
	}
	[class^="count-deco-"]{
		bottom: 2px!important;
		height: auto!important;
	}
	.count-deco-01{
		width: 20px!important;
	}
	.count-deco-02{
		width: 25px!important;
	}
	.count-txt-green{
		font-size: 1.0rem!important;
	}
	.count-num{
		font-size: 2.4rem!important;
	}
	.count-txt-orange{
		font-size: 1.5rem!important;
	}
	/* 投票期間
	============================== */
	#page-title .period-tit{
		border-bottom: 1px solid #000!important;
		border-top: 1px solid #000!important;
		font-size: 1.0rem!important;
		padding: 0!important;
	}
	#page-title .period-num{
		font-size: 1.8rem!important;
		letter-spacing: 0!important;
		line-height: .6!important;
		margin: 7px -3px 0 0!important;
	}
	#page-title .period-en{
		font-size: 1.0rem!important;
		letter-spacing: 0.1rem!important;
		line-height: .8!important;
		margin: 0!important;
	}
	#page-title .period-arrow{
		display: flex!important;
		height: 12px!important;
		margin: 0 5px 0 3px!important;
		width: 12px!important;
	}
	#page-title .period-arrow svg{
		width: 15px!important;
	}
	[class^="page-title-deco-"]{
		bottom: 0!important;
		width: 25px!important;
	}
	#page-title .page-title-deco-01{
		height: 18px!important;
		left: 10px!important;
	}
	#page-title .page-title-deco-02{
		height: 15px!important;
		right: 50%!important;
	}
}