@charset "UTF-8";
/* WEB限定話売り説明LP (GANMA-42593) ------------------------------------ */

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: #E7EBEF;
}

#web_only_unlimited {
	--orange: #FF9900;
	--orange-light: #FFB400;
	--ink: #222;
	--ink-sub: #414141;
	--ink-mute: #8E8E93;
	--bg-tint: #F3F6F9;
	--border: rgba(34, 34, 34, .12);
	--premium-gradient: linear-gradient(135deg, #FFC700 0%, #FF9900 100%);

	font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN", sans-serif;
	font-feature-settings: "palt";
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
}

#web_only_unlimited * {
	box-sizing: border-box;
}

#web_only_unlimited .page {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
}

#web_only_unlimited a {
	color: #045BF0;
	text-decoration: none;
	transition: opacity 120ms cubic-bezier(.4, 0, .2, 1);
}

#web_only_unlimited a:hover {
	opacity: .8;
}

/* タッチ端末ではhoverが自然に行えず、タップ後に薄いままになるので、
   同じフィードバックを:activeに移す */
@media (hover: none) {
	#web_only_unlimited a:hover {
		opacity: initial;
	}

	#web_only_unlimited a:active {
		opacity: .8;
	}
}

#web_only_unlimited h1,
#web_only_unlimited h2,
#web_only_unlimited h3,
#web_only_unlimited p,
#web_only_unlimited ul,
#web_only_unlimited ol {
	margin: 0;
	padding: 0;
}

#web_only_unlimited li {
	list-style: none;
}

/* セクション共通の見出し --------------------------------------------- */
#web_only_unlimited .section_eyebrow {
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--orange-light);
	text-align: center;
}

#web_only_unlimited .section_title {
	margin-top: 6px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
}

/* ボタン ------------------------------------------------------------- */
#web_only_unlimited .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	border-radius: 4px;
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
}

#web_only_unlimited .btn:active {
	opacity: .6;
	transform: scale(.98);
}

#web_only_unlimited .btn-dark {
	background: var(--ink);
}

#web_only_unlimited .btn-premium {
	background: var(--premium-gradient);
}

#web_only_unlimited .btn_icon {
	flex: none;
	color: #fff;
}

/* お知らせ ----------------------------------------------------------- */
#web_only_unlimited .hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 30px 20px 28px;
	/* 素材画像は premium/trial/bw-01 と共通のもの。下端は続く状況別ナビの
	   背景色(--bg-tint)に溶け込ませて、セクションの境目を出さない */
	background:
		linear-gradient(180deg, rgba(243, 246, 249, 0) 50%, rgba(243, 246, 249, .6) 80%, #F3F6F9 100%),
		url(../img/bw_bg.webp) center top / cover no-repeat,
		var(--orange-light);
	text-align: center;
}

#web_only_unlimited .hero_badge {
	padding: 6px 12px;
	border-radius: 9999px;
	background: var(--ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}

#web_only_unlimited .hero_title {
	font-size: 29px;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .01em;
	color: #fff;
	/* オレンジの背景に白抜きの文字を置くため、グローで縁を作って可読性を確保する */
	text-shadow:
		0 0 6px rgba(232, 106, 0, .95),
		0 0 16px rgba(232, 106, 0, .85),
		0 0 30px rgba(232, 106, 0, .55);
}

/* 訴求したい語だけを大きく、助詞と語尾は小さく組む */
#web_only_unlimited .hero_title_main {
	font-size: 36px;
}

#web_only_unlimited .hero_title_key {
	font-size: 38px;
}

#web_only_unlimited .hero_title_sub {
	font-size: 24px;
}

/* 上の文字サイズはデザイン(390px幅)前提の値。それより狭い端末では
   「GANMA!プレミアム」が単語の途中で折り返ってしまうので、幅に比例させて縮める */
@media (max-width: 389px) {
	#web_only_unlimited .hero_title_main {
		font-size: 9.2vw;
	}

	#web_only_unlimited .hero_title_key {
		font-size: 9.7vw;
	}

	#web_only_unlimited .hero_title_sub {
		font-size: 6.1vw;
	}
}

#web_only_unlimited .hero_lead {
	font-size: 14px;
	line-height: 1.9;
	color: var(--ink-sub);
}

#web_only_unlimited .hero_lead strong {
	font-weight: 700;
	color: var(--ink);
}

/* 作品サムネイルのループスクロール。中身は js/script.js が生成する */
#web_only_unlimited .hero_thumbs {
	width: calc(100% + 40px);
	margin: 6px -20px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

#web_only_unlimited .hero_thumbs_track {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: wou_marquee 40s linear infinite;
}

/* トラックには同じ並びが2周分入っている。その半分(+継ぎ目のgap半分)を動かすと
   ちょうど1周分の移動になり、繋ぎ目が見えないままループする */
@keyframes wou_marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 5px)); }
}

/* アニメーションを避ける設定なら、自分でスクロールできる静止した一覧にする */
@media (prefers-reduced-motion: reduce) {
	#web_only_unlimited .hero_thumbs {
		overflow-x: auto;
		overflow-y: hidden;
	}

	#web_only_unlimited .hero_thumbs_track {
		padding: 0 20px;
		animation: none;
	}

	/* 2周目は継ぎ目を隠すための複製。動かないなら同じ並びが二度続くだけなので出さない */
	#web_only_unlimited .hero_thumb-clone {
		display: none;
	}
}

#web_only_unlimited .hero_thumb {
	flex: none;
	width: 92px;
	aspect-ratio: 2 / 3;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg-tint);
	overflow: hidden;
}

#web_only_unlimited .hero_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 状況別ナビ --------------------------------------------------------- */
#web_only_unlimited .guide {
	padding: 34px 20px 36px;
	background: var(--bg-tint);
}

#web_only_unlimited .guide_title {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
}

#web_only_unlimited .guide_cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 18px;
}

#web_only_unlimited .card {
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

#web_only_unlimited .card-member {
	border: 4px solid var(--ink);
}

/* 枠をborderで描くと、flatな枠色とグラデーションのヘッダーが境目で食い違って
   別パーツに見えてしまう。paddingを枠に見立ててカード全体に1枚のグラデーションを敷き、
   枠とヘッダーを地続きに描く */
#web_only_unlimited .card-guest {
	padding: 4px;
	background: var(--premium-gradient);
}

#web_only_unlimited .card_label {
	padding: 10px 16px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
}

#web_only_unlimited .card-member .card_label {
	background: var(--ink);
}

/* カード側のグラデーションをそのまま透かす */
#web_only_unlimited .card-guest .card_label {
	background: none;
}

/* 枠(padding 4px)と同心になるよう、カードの角丸8pxから枠幅を引いた値にする */
#web_only_unlimited .card-guest .card_body {
	border-radius: 0 0 4px 4px;
	background: #fff;
}

#web_only_unlimited .card_body {
	padding: 18px 16px;
}

#web_only_unlimited .card_catch {
	font-size: 19px;
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

#web_only_unlimited .card-member .card_catch {
	color: var(--orange);
}

#web_only_unlimited .card_catch .num {
	font-family: Inter, sans-serif;
	font-size: 26px;
}

#web_only_unlimited .card_text {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ink-sub);
}

#web_only_unlimited .card_text strong {
	font-weight: 700;
	color: var(--ink);
}

#web_only_unlimited .card_cautions {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 12px;
}

#web_only_unlimited .card_cautions li {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 10px;
	line-height: 1.55;
	color: var(--ink-mute);
}

#web_only_unlimited .card_text + .btn {
	margin-top: 14px;
}

#web_only_unlimited .card_cautions + .btn {
	margin-top: 12px;
}


#web_only_unlimited .card_sublink {
	margin-top: 10px;
	text-align: center;
}

#web_only_unlimited .card_sublink a {
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 読む方法 3ステップ -------------------------------------------------- */
#web_only_unlimited .steps {
	padding: 34px 20px 38px;
	background: #fff;
}

#web_only_unlimited .steps_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

#web_only_unlimited .steps_item {
	display: flex;
	gap: 14px;
	padding: 16px;
	border-radius: 8px;
	background: var(--bg-tint);
}

#web_only_unlimited .steps_item-goal {
	background: #FFFBF0;
	border: 1px solid var(--orange-light);
}

#web_only_unlimited .steps_help {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
	padding: 16px;
	border-radius: 8px;
	background: var(--bg-tint);
}

#web_only_unlimited .steps_help_head {
	display: flex;
	gap: 14px;
}

#web_only_unlimited .steps_help_head h3 {
	font-size: 15px;
	font-weight: 900;
	line-height: 1.5;
}

#web_only_unlimited .steps_help_text {
	font-size: 13px;
	line-height: 1.85;
	color: var(--ink-sub);
	text-align: center;
}

#web_only_unlimited .steps_help_text a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#web_only_unlimited .steps_num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: var(--ink);
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 800;
}

#web_only_unlimited .steps_num-goal {
	background: var(--orange-light);
	color: var(--ink);
}

#web_only_unlimited .steps_num-help {
	background: var(--ink-mute);
	font-size: 16px;
}

#web_only_unlimited .steps_body h3 {
	font-size: 15px;
	font-weight: 900;
	line-height: 1.5;
}

#web_only_unlimited .steps_body p {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--ink-sub);
}

#web_only_unlimited .steps_body a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* よくある質問 ------------------------------------------------------- */
#web_only_unlimited .faq {
	padding: 34px 20px 38px;
	background: var(--bg-tint);
}

#web_only_unlimited .faq_title {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
}

#web_only_unlimited .faq_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
}

#web_only_unlimited .faq_item {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
	/* #faq-login-guide で着地したときに上端へ張り付かないようにする */
	scroll-margin-top: 16px;
}

#web_only_unlimited .faq_item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	list-style: none;
	cursor: pointer;
}

#web_only_unlimited .faq_item > summary::-webkit-details-marker {
	display: none;
}

#web_only_unlimited .faq_caret {
	flex: none;
	transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

#web_only_unlimited .faq_item[open] .faq_caret {
	transform: rotate(180deg);
}

#web_only_unlimited .faq_answer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 16px 16px;
}

#web_only_unlimited .faq_answer p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--ink-sub);
}

#web_only_unlimited .faq_answer a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#web_only_unlimited .faq_contacts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 1.2em;
}

#web_only_unlimited .faq_contacts li {
	list-style: disc;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ink-sub);
}

/* ご注意事項 --------------------------------------------------------- */
#web_only_unlimited .notes {
	padding: 28px 20px 32px;
	background: #fff;
	border-top: 1px solid var(--border);
}

#web_only_unlimited .notes_title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-sub);
}

#web_only_unlimited .notes_icon {
	flex: none;
}

#web_only_unlimited .notes_list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
	padding-left: 1.1em;
}

#web_only_unlimited .notes_list li {
	list-style: disc;
	font-size: 11px;
	line-height: 1.9;
	color: var(--ink-mute);
}

#web_only_unlimited .notes_copyright {
	margin-top: 20px;
	font-size: 11px;
	color: var(--ink-mute);
	text-align: center;
}