@charset "utf-8";

:root {
	--commonSidePadding: clamp(20px, 9.6vw, 36px);
}

/*  ===============================
			global
===============================  */

/* Gheader
===============================
.Ghdr
*/

.Ghdr {
}

.Ghdr_ttl {
	position: absolute;
	align-items: flex-start;
	writing-mode: horizontal-tb;
	top: 12px;
	right: 0;
	width: 100%;
	font-size: 11px;
}

/* menu
===============================
Gnavi
*/

/* footer
===============================
Gftr
*/

.Gftr {
	background-image: url(../images/bg_footer_sp.jpg);
}

.Gftr_inr {
	padding: 40px 0;
}

.Gftr_sns {
}

.Gftr_anchor {
	font-size: clamp(16px, 4.5vw, 17px);
}

.Gftr_link {
	margin-top: 40px;
}

.Gftr_copy {
	font-size: clamp(11px, 3.7vw, 14px);
}

/* main */
.Gmain {
}

/* sec , subSec
===============================
*/

.sec {
	padding: 70px 0;
}

/*  ===============================
		  component
===============================*/

/* btn
===============================
*/

.btn {
	padding-left: 2em;
	padding-right: 2em;
	width: 100%;
}

.btn--entry {
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	font-size: clamp(13px, 5vw, 17px);
}

.btn--campaign {
	padding: 15px 0;
	font-size: clamp(13px, 5vw, 20px);
}

.btn--fetch {
	width: auto;
}

/* label
===============================
*/

.label {
	padding: 10px 20px;
}

/* hamburger
===============================
*/

.hamburger,
.hamburger::before,
.hamburger::after {
	width: 33px;
	height: 1.5px;
	background-color: var(--textColor);
	transition: 0.5s;
}

.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	--offset: 9px;
	left: 0;
}

.hamburger {
	position: relative;
}

.hamburger::before {
	top: calc(var(--offset) * 1);
}
.hamburger::after {
	top: calc(var(--offset) * 2);
}

.is-active .hamburger {
	background-color: transparent;
}

.is-active .hamburger,
.is-active .hamburger::before,
.is-active .hamburger::after {
}
.is-active .hamburger::before,
.is-active .hamburger::after {
	top: var(--offset);
	--rotate: 24deg;
}

.is-active .hamburger::before {
	rotate: calc(var(--rotate) * 1);
}

.is-active .hamburger::after {
	rotate: calc(var(--rotate) * -1);
}

/* marker
===============================
*/

/* texts
===============================
*/

/* notes
===============================
*/

/* sns_list
===============================
*/

/* scrollGuide
===============================
*/
.scrollGuide {
	display: none;
}

/*  ===============================
		  project
===============================*/

/* hero
===============================
*/
@media screen and (max-width: 481px) {
	.hero {
		background-image: url(../images/hero_sp.jpg);
	}
}

.hero_image {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	height: 50vh;
}

.hero_image img {
	width: 100vw;
	height: auto;
	max-width: none;
	object-fit: cover;
}

.hero_ttl {
	top: 38px;
	left: calc(50% + 8px);
	transform: translateX(-50%);
	gap: 8px;
	width: calc(95% - 20px);
}

.hero_lead {
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}

.hero_leadRow {
	margin-top: -8px;
}

/* release
===============================
*/

.release {
	padding-bottom: 40px;
}

.releaseGrid {
	display: grid;
	grid-template-columns: 1fr;
}

.releaseGrid_item {
	padding-top: 30px;
}

.releaseGrid_item--ttl {
	grid-row: 1;
	grid-column: 1;
}

.releaseGrid_item--thumb {
	grid-row: 2;
	grid-column: 1;
}

.releaseGrid_item--jktTtl {
	grid-row: 3;
	grid-column: 1;
}

.release_thumb {
	max-width: none;
	margin-left: 0;
}

/* lyric
===============================
*/

.lyric_texts {
	padding: 40px 0 20px;
	font-size: clamp(9px, 3vw, 16px);
}

/* campaign
===============================
*/

.campaign_texts {
	font-size: clamp(10px, 3.4vw, 17px);
	line-height: 1.6em;
}

.campaign_btns {
	flex-direction: column;
	gap: 25px;
	max-width: 300px;
	width: 100%;
	margin: 20px auto;
}

/* entry
===============================
*/

.entry {
	margin: 0 -20px 15px;
	padding: 20px 0;
	border-top: solid rgba(255, 255, 255, 0.7) 50px;
	border-right: solid rgba(255, 255, 255, 0.7) 20px;
	border-bottom: solid rgba(255, 255, 255, 0.7) 50px;
	border-left: solid rgba(255, 255, 255, 0.7) 20px;
	border-image-source: url(../images/campaign_border-image_sp.png);
	border-image-slice: 100 40 fill;
}

/*term */
.entry_term {
	--text-divider-gap: 10px;
	padding: 50px 0 20px;
}

.entry_term::before,
.entry_term::after {
	height: 10px;
	background-image: url(../images/campaign_border_sp.png);
}

.entry_term--short::before,
.entry_term--short::after {
	background-image: url(../images/campaign_border--short_sp.png);
}

/* texts */
.entry_texts--ttl {
	font-size: 18px;
}

.entry_text--number {
	margin: 10px auto;
	background-image: url(../images/campaign_wavyLine_sp.png);
}

.entry_texts--strong {
	font-size: clamp(13px, 4.2vw, 22px);
}

.entry_texts--sp {
	text-align: left;
}

/* notes */
.entry_notes {
	margin-top: 1rem;
	font-size: clamp(10px, 3vw, 12px);
}

.entry_btns {
	margin-top: 1rem;
}

/* prize
===============================
*/

.prize_texts {
	font-size: clamp(10px, 4.2vw, 21px);
}

.prize_notes {
	padding-bottom: 0;
}

/* postType
===============================
*/

.postType_item {
	margin-left: 0;
}

.postType_texts {
	text-align: left;
}

/* step
===============================
*/

.step_list {
	padding: 0;
	font-size: clamp(10px, 3.6vw, 16px);
}

.step_item {
	display: block;
}

.step_item:last-child {
	padding: 40px 0 0;
}

/* num */
.step_num {
	margin: 0 auto;
	width: 25%;
	min-width: 72px;
	text-align: center;
}

/* texts */
.step_texts {
	margin-top: 2rem;
}

.step_texts--share-step01 {
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 20px;
}

.step_text {
	padding: 0 10px;
}

.step_anchor {
	margin-top: 2rem;
}

/* grid */
.stepGrid {
	display: grid;
	grid-template-columns: 1fr;
}

.stepGrid_item--text {
	grid-row: 1;
	grid-column: 1;
}

.stepGrid_item--btn {
	grid-row: 3;
	grid-column: 1;
	margin-top: 30px;
}

.stepGrid_item--note {
	grid-row: 2;
	grid-column: 1;
}

/* notes */
.step_notes {
	padding-right: 10px;
	padding-left: calc(1.3rem + 10px);
	font-size: clamp(10px, 3vw, 12px);
}

.step_notes--btnNote {
	padding-top: 20px;
	text-align: center;
}

/* contact
===============================
*/
.contact {
	margin: 0 -15px;
}

.contact_anchor {
	padding: 10px 0 30px;
	font-size: clamp(10px, 3.2vw, 17px);
	word-break: break-all;
}

/* term */
.contact_term {
	padding: 20px 0;
}

.contact_notes {
	font-size: clamp(8px, 2.7vw, 12px);
}

/* comment
===============================
*/

.comment {
	margin-top: 30px;
}

.comment_texts p {
	font-size: clamp(10px, 3.3vw, 16px);
}

.comment_ftr {
	margin-top: 30px;
}

/* input
===============================
*/

.input_pic {
	max-width: 300px; /**/
	margin-right: auto; /**/
}

.input_texts {
	text-align: center; /**/
	font-size: clamp(10px, 3vw, 16px);
}

/* form
===============================
*/

.form {
}

.form_ttl {
	font-size: clamp(12px, 3.2vw, 14px);
}

.form_list {
}

.form_flex {
	display: block;
}

.form_term:not(.form_term--long),
.form_desc:not(.form_desc--long) {
	width: 100%;
}

.form_desc:not(.form_desc--long) {
	padding-left: 0;
}

.form_term {
	margin-bottom: 0.5em;
}

.form_term,
.form_desc {
	font-size: clamp(13px, 3.8vw, 15px);
}

.form_term--long {
	margin-top: 40px;
}

.form_btns {
	margin-top: 3em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
	--padding-y: 0.5em;
}

/* confirm時 */

.entry--confirm .form_term,
.entry--confirm .form_desc {
	text-align: center;
}

/* finish画面 */

.finish_text--email {
	font-size: 1.2em;
}