@charset "UTF-8";
/*------------------------------------
 CSS Information

	Site URL: /ohbo/3million-coin-teaser.html
	File name: sompo_park2022.css (/excludes/css/p/ohbo/3million-coin-teaser.css)
	Summary: コイン山分けCP
	Created: 2026-08-04
	Last update: 2026-08-24
	Author: Ishibashi

	Order of description
------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap&text=CAMPAIGN12");
@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@800&display=swap&text=COUNTDOWN");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@900&display=swap&text=0123456789");
/* contents */
.split {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #533C32;
}
.split img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.split figure {
	margin: 0;
}
.split a {
	color: #1466ba;
}
.split .cvbtn {
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	z-index: 2;
	min-width: 600px;
	padding-right: 0.5em;
	background: #FFE553;
	border: 4px solid #533C32;
	border-radius: 70px;
	box-sizing: border-box;
	box-shadow: 3px 8px 0 #533C32;
	font-size: 30px;
	font-weight: 700;
	line-height: 102px;
	color: #533C32;
	text-decoration: none;
	transition: all .2s;
}
.split .cvbtn:after {
	content: "";
	position: absolute;
	display: block;
	right: 1.2em;
	top: 50%;
	transform: translateY(-50%);
	width: 33px;
	height: 28px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/arrow01.svg) no-repeat center center/contain;
}
.split .cvbtn:hover {
	top: 8px;
	left: 3px;
	box-shadow: 0 0 0 #533C32;
}

.cmgsoon {
	position: relative;
	min-width: 980px;
}
.cmgsoon__ttl {
	position: relative;
}
.cmgsoon__ttl .stage {
	width: 100%;
	height: 444px;
	object-fit: cover;
}
.cmgsoon__ttl:after {
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	bottom: 37px;
	transform: translateX(-50%);
	z-index: 2;
	width: 980px;
	height: 181px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/coming-soon_dusken.png) no-repeat center top;
}
.cmgsoon:before, .cmgsoon:after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	z-index: 1;
	width: 118px;
	height: 407px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/coming-soon_curtain.png) no-repeat center top;
}
.cmgsoon:before {
	left: 0;
}
.cmgsoon:after {
	right: 0;
	transform: rotateY(180deg);
}

.guide {
	position: relative;
	background: #EB4F82 url(/excludes/images/p/ohbo/3million-coin-teaser/guide_bg.png) repeat-x center top;
}
.guide__ttl {
	padding: 0 0 59px;
}
.guide__ft {
	padding: 90px 0 0;
}
.guide__ft .illust {
	width: 100%;
}
      @media screen and (max-width: 1400px) {
.guide__ft .illust {
	height: 229px;
	object-fit: cover;
} 
}

.double {
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 35px;
	overflow: hidden;
}
.double__ttl {
	padding: 5px 0 18px;
	background: #FFE553;
	font-size: 35px;
	font-weight: 700;
	line-height: 1;
}
.double__ttl strong {
	font-size: 60px;
	font-weight: 900;
	color: #EB4F82;
	vertical-align: text-bottom;
}
.double__inner {
	padding: 30px 90px 43px;
}
.double__subttl {
	position: relative;
	margin: 0.6em 0 0.2em;
	font-family: "Barlow", sans-serif;
	font-size: 68px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #EB4F82;
}
.double__subttl small {
	margin-right: 0.3em;
	font-size: 34px;
	vertical-align: middle;
}
.double__subttl:before, .double__subttl:after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	width: 260px;
	height: 2px;
	background: #EB4F82;
}
.double__subttl:before {
	left: 0;
}
.double__subttl:after {
	right: 0;
}
.double__subttl:first-of-type {
	margin: 0.11em 0 0.2em;
}
.double__txt {
	line-height: 32px;
}
.double__txt small {
	display: inline-block;
	position: relative;
	margin-bottom: 0.75em;
	font-size: 28px;
	font-weight: bold;
}
.double__txt small:before, .double__txt small:after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	width: 21px;
	height: 32px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/double_slash.svg) no-repeat center center/contain;
}
.double__txt small:before {
	left: -34px;
	transform: translateY(-40%);
}
.double__txt small:after {
	right: -34px;
	transform: translateY(-40%) rotateY(180deg);
}
.double__detail {
	padding: 34px 0 40px;
	background: #FFE553;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.66;
}
.double__detail strong {
	display: inline-block;
	margin-bottom: 0.6em;
	background: linear-gradient(transparent, transparent 66%, #fff 66%, #fff);
	font-size: 30px;
	font-weight: 900;
	line-height: 1.3;
}

.countdown {
	position: relative;
	max-width: 980px;
	margin: 152px auto 0;
	padding: 50px 0;
	background: #07BFBB;
	outline: 8px solid #fff;
	outline-offset: -10px;
	border: 2px solid #533C32;
	border-radius: 15px;
	box-sizing: border-box;
}
.countdown:before {
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	top: -96px;
	transform: translateX(-50%);
	width: 192px;
	height: 116px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/countdown_illust.png) no-repeat center center/contain;
}
.countdown__ttl {
	margin: 0 0 0.3em;
	font-family: "LINE Seed JP", sans-serif;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.07;
	color: #FFE553;
	text-shadow: 1px 1px 1px #533C32, -1px 1px 1px #533C32, 1px -1px 1px #533C32, -1px -1px 1px #533C32, 1px 0px 1px #533C32, 0px 1px 1px #533C32, -1px 0px 1px #533C32, 0px -1px 1px #533C32;
}
.countdown__txt {
	font-size: 42px;
	font-weight: 700;
	line-height: 2;
	color: #fff;
}
.countdown__txt small {
	display: inline-block;
	position: relative;
	margin-bottom: 0.45em;
	font-size: 36px;
	line-height: 1.5;
}
.countdown__txt small:before, .countdown__txt small:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	width: 3.31px;
	height: 40px;
	background: #fff;
}
.countdown__txt small:before {
	left: -30px;
	transform: rotate(-35deg);
}
.countdown__txt small:after {
	right: -30px;
	transform: rotate(35deg);
}
.countdown__txt b {
	display: inline-block;
	min-width: 130px;
	height: 130px;
	margin: 0 0.1em;
	background: #fff;
	border-radius: 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 88px;
	font-weight: 900;
	line-height: 130px;
	color: #533C32;
	text-align: center;
}

.amount {
	position: relative;
	padding: 129px 0 100px;
	background: #FFE9F0;
	overflow: hidden;
}
.amount:after {
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	top: 38px;
	transform: translateX(-50%);
	z-index: 1;
	width: 1081px;
	height: 531px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/amount_coin.png) no-repeat center center/contain;
}
.amount__inner {
	position: relative;
	max-width: 800px;
	margin: 0px auto;
	padding: 100px 45px 60px;
	background: #fff;
	border: 6px solid #533C32;
	border-radius: 50px;
	box-sizing: border-box;
}
.amount__ttl {
	display: inline-block;
	position: absolute;
	left: -90px;
	top: -129px;
	z-index: 2;
	padding: 35px 50px;
	background: #EB4F82;
	border-radius: 20px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.375;
	color: #fff;
	text-align: left;
}
.amount__ttl:before {
	content: "";
	position: absolute;
	display: block;
	left: 199px;
	bottom: -40px;
	width: 41px;
	height: 41px;
	background: url(/excludes/images/p/ohbo/3million-coin-teaser/amount_balloon.svg) no-repeat center center/contain;
}
.amount__num {
	position: relative;
	z-index: 2;
	margin-bottom: 1em;
	font-size: 45px;
	font-weight: 700;
	line-height: 1;
}
.amount__num strong {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 155px;
	font-weight: 900;
}
.amount__num small {
	font-size: 32px;
	font-weight: 500;
}
.amount .cvbtn {
	min-width: 650px;
	font-size: 34px;
	line-height: 122px;
}

.save {
	padding: 100px 0;
}
.save__ttl {
	margin: 0 0 0.56em;
	font-size: 54px;
	font-weight: 900;
	line-height: 1.55;
	color: #EB4F82;
}
.save__txt {
	margin: 0 0 82px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.75;
}

.camp {
	position: relative;
	max-width: 800px;
	margin: 0 auto 65px;
	padding: 65px 30px 75px;
	background: #EB4F82;
	border: 3px solid #533C32;
	border-radius: 50px;
	box-sizing: border-box;
}
.camp__ttl {
	margin: 0 0 0.6em;
	font-size: 50px;
	font-weight: 900;
	line-height: 1.4;
	color: #FFEB77;
	text-shadow: 2px 2px 1px #533C32, -2px 2px 1px #533C32, 2px -2px 1px #533C32, -2px -2px 1px #533C32, 2px 0px 1px #533C32, 0px 2px 1px #533C32, -2px 0px 1px #533C32, 0px -2px 1px #533C32, 4px 4px 1px #533C32;
}
.camp__ttl .balloon {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	padding: 0.2294em 0.95em;
	background: #533C32;
	border-radius: 34px;
	font-size: 36px;
	font-weight: 700;
	color: #fff;
}
.camp__ttl .balloon:after {
	content: "";
	position: absolute;
	display: block;
	left: 50%;
	bottom: -25px;
	transform: translateX(-50%);
	width: 24px;
	height: 34px;
	background-color: #533c32;
	clip-path: polygon(50% 34px, 0% 0%, 24px 0%);
}
.camp__txt {
	margin: 0 0 1em;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.64;
	color: #FFF;
}
.split .camp__bnr {
	margin: 0 0 30px;
}

.detail {
	max-width: 800px;
	margin: 50px auto 0;
	background: #FFE9F0;
	border-radius: 50px;
	text-align: left;
	overflow: hidden;
}
.detail__ttl {
	width: fit-content;
	margin: 45px 70px 35px;
	padding: 0 0 0.2em;
	border-bottom: 2px solid #EB4F82;
	font-size: 34px;
	font-weight: 700;
	line-height: 74px;
}
.detail__ttl .icon {
	width: auto;
	height: 74px;
	margin-right: 0.7em;
}
.detail__txt {
	margin: 0 70px 30px;
	font-size: 24px;
	line-height: 1.75;
}
.detail .morebtn {
	display: block;
	padding: 25px 38px;
	background: #FFEF96;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.66666;
	color: #533C32;
	text-decoration: none;
	text-align: right;
	transition: .4s all;
}
.detail .morebtn:after {
	display: inline-block;
	content: "";
	transform: rotate(45deg);
	width: 13px;
	height: 13px;
	margin: 0 0 0.08em 0.5em;
	border-top: 4px solid #EB4F82;
	border-right: 4px solid #EB4F82;
}
.detail .morebtn:hover {
	background: #FFE553;
}
.detail__catch {
	display: grid;
	grid-template-columns: 127px 1fr;
	gap: 35px;
	align-items: center;
	margin: 0 70px 50px;
	padding: 17px 45px;
	background: #fff;
	border-radius: 14px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.75;
}

.update {
	padding: 100px 0;
	background: #EB4F82;
}
.update__ttl {
	font-size: 54px;
	font-weight: 900;
	line-height: 1.555;
	color: #fff;
}

.receive {
	position: relative;
	max-width: 800px;
	margin: 110px auto 0;
	padding: 90px 100px 60px;
	background: #fff;
	border-radius: 30px;
	box-sizing: border-box;
}
.receive__icon {
	position: absolute;
	left: 50%;
	top: -60px;
	transform: translateX(-50%);
	width: 120px;
}
.receive__ttl {
	margin: 0 0 0.7373em;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
}
.receive__txt {
	margin: 0 0 1.666em;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.75;
}
.receive__bnr {
	display: flex;
	justify-content: center;
	gap: 40px;
	padding: 40px 0 0;
}

.location {
	display: block;
	padding-top: 10px;
	text-align: left;
	width: 980px;
	margin: 0 auto;
	min-height: 26px;
	}
.location ul li {
	font-size: 13px;
	line-height: 14px;
	display: inline;
	}
.location li a {
	padding-right: 20px;
	background: url(/excludes/images/p/common02/arrow_location.gif) no-repeat right center;
	color: #D71C58;
	}