@charset "utf-8";
.tab_wrap {
		padding: 0 70px;
		position: relative;
}
@media(min-width: 768px) {
		.tab_wrap::before {
				content: '';
				display: block;
				position: absolute;
				top: -42px;
				left: -105px;
				width: 145px;
				height: 145px;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
				background-image: url(../images/oubo_sakura-1.png);
				pointer-events: none;
				z-index: 1000;
		}
}
.tab {
		max-width: 930px;
		margin: 0 auto -60px;
		display: flex;
		justify-content: space-between;
		background: #fff;
		border-radius: 20px;
		border: 3px solid #E60012;
		overflow: hidden;
		position: relative;
		z-index: 200;
}
@media(max-width: 767px) {
		.tab_wrap {
				padding: 0
		}
		.tab {
				margin: 0 0 25px;
				overflow: visible;
				border: 2px solid #E60012;
		}
		.tab > div.product, .tab > div.product img {
				border-radius: 18px 0 0 18px;
		}
		.tab > div.postal, .tab > div.postal img {
				border-radius: 0 18px 18px 0;
		}
}
.tab > div {
		width: 310px;
		display: flex;
		align-items: center;
		cursor: pointer;
		box-sizing: border-box;
		position: relative;
		z-index: 50;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
}
.tab > div.product {
		background-image: url("../images/tab1_pc_off.png")
}
.tab > div.download {
		background-image: url("../images/tab2_pc_off.png")
}
.tab > div.postal {
		background-image: url("../images/tab3_pc_off.png")
}
@media(max-width: 767px) {
		.tab > div.product {
				background-image: url("../images/tab1_sp_off.png")
		}
		.tab > div.download {
				background-image: url("../images/tab2_sp_off.png")
		}
		.tab > div.postal {
				background-image: url("../images/tab3_sp_off.png")
		}
		.tab div.active span {
				position: relative;
		}
		.tab div.active span::after {
				content: '';
				display: block;
				position: absolute;
				bottom: -10px;
				left: calc(50% - 6px);
				width: 0;
				height: 0;
				border-style: solid;
				border-right: 6px solid transparent;
				border-left: 6px solid transparent;
				border-top: 8px solid #E60012;
				border-bottom: 0;
				z-index: 100
		}
}
.tab > div.download::before {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 35px);
		left: 0px;
		width: 2px;
		height: 70px;
		background: #E60012;
}
.tab > div.postal::before {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 35px);
		left: 0px;
		width: 2px;
		height: 70px;
		background: #E60012;
}
@media(max-width: 767px) {
		.tab > div.download::before, .tab > div.postal::before {
				top: calc(50% - 30px);
				height: 60px;
		}
}
.tab > div.product.active + div.download::before, .tab > div.download.active + div.postal::before {
		opacity: 0;
}
.tab > div img {
		opacity: 0;
		transition: opacity 0.4s;
		display: block;
}
.tab > div.active img {
		opacity: 1;
}
@media (hover: hover) {
		.tab > div:hover {
				opacity: 1;
		}
}
@media(max-width: 1060px) {
		.tab > div {
				width: calc(100% / 3)
		}
}
.tab_body_wrap {
		max-width: 1090px;
		margin: 0 auto 60px;
}
@media(max-width: 767px) {
		.tab_body_wrap {
				margin-bottom: 20px;
		}
}
.panel_contents {
		box-sizing: border-box;
		background: #fff;
		padding: 115px 60px 40px;
		border: 3px solid #E60012;
		border-radius: 20px;
		position: relative;
		margin-top: 0;
		font-weight: 700;
}
@media(max-width: 1100px) {
		.panel_contents {
				padding: 90px 30px 30px;
		}
}
@media(max-width: 767px) {
		.panel_contents {
				padding: 20px;
				border: 2px solid #E60012;
		}
}
.tab1_flex {
		max-width: 820px;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
}
.tab1_flex_figure {
		width: 375px;
		margin-left: 20px;
}
.tab1_flex_caption {
		flex: 1
}
.tab1_name {
		font-size: 22px;
		font-weight: 900;
		line-height: 1.6;
}
.tab1_name strong {
		font-size: 150%;
		font-weight: 900;
		position: relative;
		display: inline-block;
}
.tab1_name strong.extra::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 5px;
		left: 0;
		width: 100%;
		height: 16px;
		background: #FFF100;
		mix-blend-mode: multiply;
		pointer-events: none;
}
@media(max-width: 767px) {
		.tab1_name strong.extra::after {
				bottom: 3px;
				width: 100%;
				height: 10px;
		}
}
.reg {
		font-size: 60%;
		margin: 0 2px;
}
.tab1_figure_notes_wrap {
		max-width: 820px;
		margin: 0 auto;
}
.tab1_figure_notes {
		display: flex;
		padding: 60px;
		font-size: 16px;
		margin: 0 auto;
		position: relative;
}
.tab1_figure_notes_bg {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20px;
		background: #fce5e7;
		z-index: 0;
		filter: blur(6px);
		pointer-events: none;
}
.tab1_figure_notes::before, .tab1_figure_notes::after {
		content: '';
		display: block;
		position: absolute;
		pointer-events: none;
		z-index: 5;
}
.tab1_figure_notes::before {
		top: -40px;
		left: -20px;
		width: 105px;
		height: 115px;
		background: url("../images/tab1_figure_notes_sakura-1.png") no-repeat 0 0;
		background-size: 100%;
}
@media(max-width: 1060px) {
		.tab1_figure_notes::before {
				top: -25px;
				left: -25px;
				width: 74px;
				height: 84px;
		}
}
@media(max-width: 767px) {
		.tab1_figure_notes::before {
				top: -5px;
				left: -5px;
		}
}
.tab1_figure_notes::after {
		bottom: -15px;
		right: -15px;
		width: 55px;
		height: 55px;
		background: url("../images/tab1_figure_notes_sakura-2.png") no-repeat 0 0;
		background-size: 100%;
}
.tab1_figure_notes p {
		line-height: 1.8;
		font-size: 16px;
		font-weight: 900;
		position: relative;
		z-index: 1;
		transform: rotate(0.03deg)
}
.tab1_figure_notes strong {
		font-size: 135%;
		font-weight: 900;
}
.tab1_figure_notes span.underLine {
		position: relative;
}
.tab1_figure_notes span.underLine::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 2px;
		left: 0;
		width: 100%;
		height: 10px;
		background: #FFF100;
		mix-blend-mode: multiply;
		pointer-events: none;
		transform-origin: left center;
}
.tab1_figure_notes_inner_left {
		flex: 1;
		position: relative;
		z-index: 1
}
.tab1_figure_notes_inner_right {
		width: 370px;
		margin-left: 15px;
		position: relative;
		z-index: 1
}
.tab1_figure_notes_inner_right img {
		width: 100%;
		height: auto;
}
.oubo_sb {
		width: 140px;
		margin: 0 0 20px;
}
.oubo_sb img {
		width: 100%;
		height: auto;
}
.alert {
		position: relative;
		margin-left: 1em;
		margin-top: 1em;
		line-height: 1.6;
}
.alert span {
		display: block;
		position: absolute;
		top: 0;
		left: -1em;
}
.aligncenter {
		text-align: center;
		font-size: clamp(1.125rem, 0.889vw + 0.917rem, 1.75rem);
		font-weight: 900;
		margin: 0 0 35px;
		color: #E60012;
		padding-bottom: 15px;
		border-bottom: 2px solid #E60012;
}
.downloadbtn {
		max-width: 540px;
		margin: 0 auto;
}
.downloadbtn img {
		width: 100%;
		height: auto;
		transition: opacity 0.3s;
}
@media (hover: hover) {
		.downloadbtn a:hover img {
				opacity: 0.7;
		}
}
.download_lead {
		text-align: center;
		line-height: 1.6;
		margin: 0 0 30px;
		font-weight: 900;
		transform: rotate(0.03deg)
}
.download_lead.download_lead_PC {
		margin-bottom: 0;
}
.download_lead span.underLine {
		position: relative;
}
.download_lead span.underLine::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 2px;
		left: 0;
		width: 100%;
		height: 10px;
		background: #FFF100;
		mix-blend-mode: multiply;
		pointer-events: none;
		transform-origin: left center;
}
.download_lead strong {
		font-size: 135%;
		font-weight: 900;
}
@media(min-width: 768px) {
		.download_lead_SP {
				display: none;
		}
}
@media(max-width: 767px) {
		.download_lead_PC {
				display: none;
		}
}
.download_inner {
		padding: 10px 0;
		position: relative;
}
.download_inner::before, .download_inner::after {
		content: '';
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
}
.download_inner::before {
		background-image: url("../images/tab2_sakura-1_pc.png");
		top: 0;
		left: 0;
		width: 115px;
		height: 115px;
}
.download_inner::after {
		background-image: url("../images/tab2_sakura-2_pc.png");
		width: 140px;
		height: 110px;
		bottom: 0;
		right: 0;
}
@media(max-width: 1060px) {
		.download_inner::before {
				width: 80px;
				height: 80px;
		}
		.download_inner::after {
				width: 100px;
				height: 80px;
		}
}
.hagaki_figure {
		max-width: 960px;
		margin: 0 auto;
}
.hagaki_figure img {
		width: 100%;
		height: auto;
}
/* ================ */
@media(max-width: 1060px) {
		.tab1_figure_notes {
				display: flex;
				align-items: center;
		}
		.tab1_figure_notes {
				padding: 35px 35px;
				font-size: 16px;
		}
		.tab1_figure_notes_inner_right {
				width: 45%;
				margin-left: 10px;
		}
		.tab1_figure_notes_wrap {}
		.tab1_name {
				font-size: 20px;
		}
		.tab1_flex_figure {
				width: 40%;
				margin-left: 5px;
		}
}
@media(max-width: 767px) {
		.tab1_name {
				font-size: 19px;
		}
		.tab1_name strong {
				font-size: 130%;
		}
		.tab1_figure_notes_inner_right {
				width: 40%;
				margin-left: 10px;
		}
		.download_inner {
				background: url(../images/download_bg_pc.png) no-repeat center center;
				background-size: 100%;
		}
		.download_inner::before, .download_inner::after {
				display: none;
		}
}
@media(max-width: 767px) {
		.aligncenter {
				text-align: center;
				font-size: 18px;
				margin: 0 0 20px;
		}
		.tab1_flex {
				display: block;
		}
		.oubo_sb_wrap {
				display: flex;
				justify-content: center;
				margin-bottom: 15px;
		}
		.oubo_sb {
				width: 110px;
				margin: 0 auto 20px;
		}
		.tab1_name {
				text-align: center;
				margin-bottom: 20px;
		}
		.tab1_flex_figure {
				width: 100%;
				margin: 0 auto 35px;
		}
		.tab1_figure_notes_wrap {
				padding: 0;
		}
		.tab1_figure_notes {
				padding: 20px;
				font-size: 16px;
		}
		.tab1_figure_notes {
				display: block;
		}
		.tab1_figure_notes_inner_right {
				width: 100%;
				margin: 0;
		}
		.tab1_figure_notes p {
				text-align: center;
		}
		.tab1_name {
				font-size: 16px;
		}
		.tab1_figure_notes::after {
				display: none;
		}
		.alert {
				text-align: left !important;
				font-size: 13px !important;
				margin: 10px 0 20px;
		}
		.download_inner {
				background: none;
		}
		.download_lead.hagaki {
				background: url("../images/download_bg_sp.png") no-repeat center center;
				background-size: 100%;
		}
}