@charset "utf-8";
/*-----------------------------------------------------------------------------
augusta2025_skin_sansan.css
----------------------------------------------------------------------------- */
:root {
  --white: #fff;
  --black: #000;
  --gray: #333;
  --navy: #005ead;
	--yellow: #fff000;
}


/* body
---------------------------------------------------------- */

body {
	background: var(--white);
	text-align: center;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
	color: var(--navy);
	font-size: 1.4rem;
}
img {
	height: auto;
}
a {
	color: inherit;
}
@media only screen and (min-width: 751px) {
	body {
		background: var(--white) url("../img/sansan/hero-bg-pc.webp?250819") no-repeat center 74px;
		background-size: 100vw auto;
		font-size: 1.6rem;
	}
}

/*共通
---------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.txt-black {
	color: var(--black) !important;
}
.txt-white {
	color: var(--white) !important;
}
.txt-navy {
	color: var(--navy) !important;
}
.txt-kerning {
	margin-inline: -0.4em;
}
.font-roboto {
	font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.font-roboto-b {
	font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.headline-lv2 {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.2em;
	margin-bottom: 6vw;
	padding: 0 4vw;
	color: var(--navy);
	font-size: clamp(20px,4vw,48px);
	font-weight: 900;
	text-align: left;
	z-index: 5;
}
.headline-lv2::before {
	content: "";
	position: absolute;
	top: 0;
	left: -50vw;
	width: calc(96% + 50vw);
	height: 100%;
	transform: skewX(-20deg);
	background-color: var(--yellow);
	z-index: -1;
}
.headline-lv2-number {
	position: relative;
	font-size: 1.2em;
	padding-inline: 0.4em;
}
.headline-lv2-number::after {
	content: "";
	position: absolute;
	top: 22%;
	left: 0;
	width: 100%;
	height: 62%;
	border-right: 2px solid var(--navy);
	transform: skewX(-20deg);
	z-index: -1;
}
.headline-lv2-txt {
	padding-left: 0.5em;
}
.headline-lv3 {
	margin-inline: auto;
	border-bottom: 3px solid var(--navy);
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--navy);
}
.catch {
	margin-bottom: 8vw;
	font-weight: 900;
}
.catch .txt-s {
	display: block;
	font-size: clamp(10px,4.5vw,30px);
	line-height: 1.3;
	letter-spacing: -0.05em;
}
.catch .txt-l {
	display: inline-block;
	margin-top: 0.3em;
	padding-inline: 0.2em;
	background: linear-gradient(transparent 68%, var(--yellow) 68%);
	font-size: clamp(12px,6.2vw,60px);
}
.catch .txt-nega {
	display: inline-block;
	margin-inline: -0.2em;
}
@media only screen and (max-width: 370px) {
	.headline-lv2 {
		font-size: clamp(14px,4vw,48px);
	}
}
@media only screen and (max-width: 750px) {
	.headline-lv3 {
		width: 84vw;
	}
}
@media only screen and (min-width: 751px) {
	.content {
		width: 100%;
		max-width: 1080px;
		margin-inline: auto;
		padding-inline: 10px;
	}
	.wd1050 {
		max-width: 1050px;
	}
	.wd1040 {
		max-width: 1040px;
	}
	.wd960 {
		max-width: 960px;
	}
	.wd820 {
		max-width: 820px;
	}
	.mgi-auto {
		margin-inline: auto;
	}
	.flx-pc {
		display: flex;
		flex-wrap: wrap;
	}
	.flx-pc li {
		width: 50%;
	}
	.headline-lv2 {
		height: 2.4em;
		margin-bottom: 40px;
		padding: 0 1em;
	}
	.headline-lv2::before {
		width: calc(100% + 50vw);
	}
	.headline-lv3 {
		max-width: 880px;
		margin: 40px auto;
		font-size: 2.4rem;
	}
	.catch {
		margin-bottom: 0;
	}
	.catch .txt-l {
		margin-top: 0;
	}
		.link-img {
		transition: all 0.3s cubic-bezier(0.19, 0.64, 0.4, 0.89);
	}
	.link-img:hover {
		transform: scale(1.025);
	}
}

/*header
---------------------------------------------------------- */
.header-logo {
	width: 100%;
	text-align: left;
	background-color: var(--white);
}
.header-inner img {
	max-width: initial;
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 750px) {	
	header {
		margin-bottom: 6.6vw;
	}
	.header-logo {
		height: 13.3vw;
		padding: 0.6vw;
	}
	.header-logo img {
		height: 12vw;
	}
	.header-campaign {
		width: 85.06vw;
		margin: -16.6vw auto 0;
	}
}
@media only screen and (min-width: 751px) {
	header {
		margin-bottom: 5.5vw;
	}
	.header-logo {
		height: 74px;
	}	
	.header-inner {
		width: 67.79vw;
		margin-inline: auto;
		padding-top: 0.338vw;
	}
}

/*main
---------------------------------------------------------- */
main {
	overflow: hidden;
}
.bg-01 {
	position: relative;
	z-index: 5;
	margin: 26vw 0 18vw;
	padding: 26vw 3.3vw;
	color: var(--white);
}
.bg-01::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: var(--navy);
	transform: skewY(13.5deg);
	z-index: -1;
}
.bg-02 {
	padding: 10vw 8vw;
	background: url("../img/sansan/content-bg-sp.webp") no-repeat center top;
	background-size: cover;
}
@media only screen and (min-width: 751px) {
	.bg-01 {
		margin: 180px 0;
		padding: 194px 0;
	}
	.bg-02 {
		padding: 150px 0 90px;
		background: url("../img/sansan/content-bg-pc.webp?250819") no-repeat center top;
		background-size: cover;
	}
}
/*応募方法
---------------------------------------------- */
.limited-goods-txt {
	color: var(--black);
	line-height: 1.2;
	font-weight: 800;
}
.limited-goods-txt .txt-s {
	display: block;
	margin-top: 0.4em;
	font-size: 0.8em;
}
.method-pic {
	margin: 0 auto 10px;
}
.method-txt {
	width: 100%;
	color: var(--black);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1.3;
}
.term {
	margin-inline: auto;
	text-align: center;
	font-weight: 900;
}
.term dt {
	color: var(--white);
}
.term dd {
	color: var(--navy);
}
@media only screen and (max-width: 750px) {
	.limited-goods {
		display: flex;
		margin: 0 3.3vw 8vw;
		align-items: center;
		justify-content: center;
	}
	.limited-goods-pht {
		width: 50%;
	}
	.limited-goods-txt {
		width: fit-content;
		text-align: left;
	}
	.method-list ol {
		padding-top: 12vw;
	}
	.method-list li {
		width: 59.7vw;
		margin-inline: auto;
		padding: 0 0 12vw;
	}	
	.term {
		width: 65.33vw;
	}
	.term dt {
		background: var(--navy);
		line-height: 2;
	}
	.term dd {
		padding: 0.8em 0.2em;
		background: var(--white);
		border-bottom: 2px solid var(--navy);
		border-left: 2px solid var(--navy);
		border-right: 2px solid var(--navy);
		line-height: 1.4;
		font-size: 1.2em;
	}
}
@media only screen and (min-width: 460px) {
	.term dd .pc_none {
		display: none;
	}
}
@media only screen and (min-width: 751px) {
	.limited-goods-pht {
		width: 474px;
		margin-inline: auto;
		padding: 0.5em 0;
	}
	.limited-goods-txt {
		width: fit-content;
		margin-inline: auto;
		font-size: 2rem;
	}
	.limited-goods-txt .txt-s {
		text-align: right;
		font-size: 0.6em;
	}
	.method-list ol {
		background: url("../img/sansan/arrows.svg") no-repeat center 48%;
		background-size: 53% auto;
	}
	.method-list li {
		width: 25%;
	}
	.method-list a {
		text-decoration: none;
		pointer-events: none;
	}
	.method-pic img {
		width: 177px;
	}
	.method-txt {
		height: 5em;
	}
	.term {
		position: relative;
		display: flex;
		width: 734px;
		height: 70px;
		margin: 50px auto 0;
		line-height: 70px;
	}
	.cp02 .term {
		margin-top: 64px;
	}
	.term::before,
	.term dt::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.term::before {
		box-sizing: border-box;
		background-color: var(--white);
		border: 3px solid var(--navy);
		transform: skewX(-20deg);
	}
	.term dt {
		position: absolute;
		top: 0;
		left: 0;
		width: 174px;
		height: 100%;
		font-size: 2.2rem;
		letter-spacing: 0.05em;
		z-index: 5;
	}
	.term dt::before {
		background-color: var(--navy);
		transform: skewX(-20deg);
		z-index: -1;
	}
	.term dd {
		width: 100%;
		padding-inline: 180px 10px;
		font-size: 3rem;
		z-index: 5;
	}
	.term dd .pc_none {
		display: block;
	}
}
@media only screen and (min-width: 751px) and (max-width: 930px) {
	.method-txt {
		font-size: 1.3rem;
	}
}

/*アプリダウンロード
---------------------------------------------- */
.app-headline {
	margin-bottom: 9.3vw;
	font-size: clamp(12px, 4.2vw, 30px);
	font-weight: 900;
	line-height: 1.4;
}
.app-catch {
	margin-bottom: 8vw;
	font-size: clamp(10px,3.6vw,24px);
	font-weight: 900;
}
.app-catch span {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
	margin-top: 0.2em;
}
.app-catch span::before,
.app-catch span::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 96%;
	top: 2%;
}
.app-catch span::before {
	left: -1.4em;
	border-left: 4px solid var(--white);
	transform: skewX(24deg);
}
.app-catch span::after {
	right: -1.4em;
	border-right: 4px solid var(--white);
	transform: skewX(-24deg);
}
.app-link {
	margin-bottom: 4vw;
}
.app-link2 li {
	padding: 0.5em;
}
@media only screen and (max-width: 750px) {
	.marker-sp {	
		background: linear-gradient(transparent 88%, var(--yellow) 88%);
	}
	.app-link img {
		width: 37.3vw;
		min-width: 140px;
	}
	.app-link2 li img {
		width: 44vw;
		min-width: 165px;
	}
}
@media only screen and (min-width: 751px) {
	.app-headline {
		margin-bottom: 56px;
		font-size: clamp(12px,3vw,30px);
	}
	.app-catch,
	.app-link {
		margin-bottom: 36px;
	}
	.app-link img {
		width: 338px;
	}
	.marker-pc {
		padding-bottom: 0.05em;
		font-size: 1.2em;
		border-bottom: 5px solid var(--yellow);
	}
	.app-link2 li {
		display: inline-block;
		width: 253px;
	}
}
/*選手リスト
---------------------------------------------- */
@media only screen and (max-width: 750px) {
	.players {
		margin-top: 12vw;
	}
	.players h3 {
		width: 29.73vw;
		margin: 0 auto 5.33vw;
	}
	.player-list li {
		width: 65.3vw;
		margin-bottom: 4vw;
		margin-inline: auto;
	}
	.precaution {
		margin-top: 9.33vw;
		padding-left: 1em;
		text-indent: -1em;
		font-size: clamp(6px, 2vw, 12px);
	}
}
@media only screen and (min-width: 751px) {
	.players {
		margin-top: 66px;
	}
	.players h3 {
		margin-bottom: 35px;
	}
	.player-list {
		justify-content: space-between;
		gap: 30px;
	}
	.player-list li {
		width: calc(50% - 15px);
	}
	.precaution {
		margin-top: 45px;
		font-size: 1.2rem;
	}
}

/*モーダル設定
---------------------------------------------- */
li:has(.modal_btn) {
	position: relative;
}
.modal_btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 200 / 121;
	cursor: pointer;
}

/*優勝スコア予想キャンペーン
---------------------------------------------- */
.winner-list {
	width: 86%;
	max-width: 634px;
	margin: 7vw auto;
}
.cp02-goods h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 18.93vw;
	background-color: var(--navy);
	color: var(--white);
	font-size: clamp(12px, 4.2vw, 40px);
	font-weight: 900;
}
.button {
	margin-top: 8vw;
}
.button a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60vw;
	max-width: 556px;
	aspect-ratio: 139 / 34;
	margin-inline: auto;
	padding-left: 0.05em;
	background-color: var(--yellow);
	-webkit-box-shadow: 0 3px 0 0 var(--black);
	box-shadow: 0 3px 0 0 var(--black);
	border-radius: 1.5em;
	font-size: 6vw;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--navy);	
}
@media only screen and (max-width: 750px) {
	.cp02-goods {
		width: 84vw;
		margin-inline: auto;
	}
}
@media only screen and (min-width: 751px) {
	.winner-list {
		margin: 40px auto;
	}
	.cp02-goods h4 {
		height: 152px;
	}
	.button {
		margin-top: 80px;
	}
	.button a {
		font-size: 6rem;
		-webkit-box-shadow: 0 8px 0 0 var(--black);
		box-shadow: 0 8px 0 0 var(--black);
		transition: all 0.3s cubic-bezier(0.19, 0.64, 0.4, 0.89);
	}
	.button a:hover {
		-webkit-box-shadow: 0 0 0 0;
		box-shadow: 0 0 0 0;
		translate: 0 8px;
		filter: brightness(1.2);
	}
}

/*footer
---------------------------------------------------------- */
.l-footer {
	background-color: var(--navy);
	line-height: 9.7vw;
	color: var(--white);
	font-size: 1.2rem;
}
@media only screen and (min-width: 751px) {
	.l-footer {
		line-height: 60px;
		font-size: 1.4rem;
	}
}