/* Theme Name: プラスワンLP 2025.06  */

*{
	margin: 0;
	padding: 0;
}
@media (max-width: 750px){
    html, body{ font-size: 4vw; }
}
@media (min-width: 751px){
    html{ font-size: 62.5%; }
    body{ font-size: 3rem; }
}

body{
	position: relative;
	background: #000;
	line-height: 1.2;
	text-align: left;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-weight: 400;
	color: #000;
}
a{
	text-decoration: underline;
	color: #62abd9;
	-webkit-transition: .3s;
	transition: .3s;
}
a:hover{ text-decoration: none; }
a:hover img, a.bt:hover{ opacity: .7; }
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-webkit-transition: .3s;
	transition: .3s;
}
table{
	margin: 1em 0;
	width: 100%;
	background: #fff;
	border-collapse: collapse;
}
th, td{
	padding: 1em 0.5em;
	border: 1px solid #ddd;
	box-sizing: border-box;
	font-size: .8em;
}
th{ background: #f6f6f6; }
ul, ol{ margin-left: 1em; }
ul li, ol li{ margin: 0.4em 0; }
input, textarea, select, button, .pr{
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1em;
}
main{ padding-bottom: 2em; }
h2, h3{
	font-weight: bold;
	font-size: 1.2em;
}
h3, p{ margin: 1em 0; }
p{
	line-height: 1.6;
	color: #fff;
}
p:first-of-type{ margin-top: 0; }
.inner{ padding: 1em 1em 1.5em; }
main .inner{ background: #820000; }
h2.img, h3.img{
	padding: 0;
	background: none;
	text-align: center;
}
@media (min-width: 751px){
	.inner{
		margin: 0 auto;
		max-width: 850px;
		box-sizing: border-box;
	}
}
footer{
	background: #444;
	text-align: center;
	font-size: 0.7em;
	color: #fff;
}
footer a{ color: #fff; }

/* ------------------------------------------------
 styles
------------------------------------------------ */
/* block
-------------------- */
.flex{ display: flex; }
.hide{ display: none; }
svg.icon, img.icon{
	display: inline-block;
	vertical-align: middle;
}
td svg.icon{
	display: block;
	margin: 0 auto 5px;
}

.m0{ margin: 0!important; }
.mt0{ margin-top: 0!important; }
.mr0{ margin-right: 0!important; }
.mb0{ margin-bottom: 0!important; }
.ml0{ margin-left: 0!important; }
.m10{ margin: 10px!important; }
.mt10{ margin-top: 10px!important; }
.mr10{ margin-right: 10px!important; }
.mb10{ margin-bottom: 10px!important; }
.ml10{ margin-left: 10px!important; }
.m20{ margin: 20px!important; }
.mt20{ margin-top: 20px!important; }
.mr20{ margin-right: 20px!important; }
.mb20{ margin-bottom: 20px!important; }
.ml20{ margin-left: 20px!important; }
.m30{ margin: 30px!important; }
.mt30{ margin-top: 30px!important; }
.mr30{ margin-right: 30px!important; }
.mb30{ margin-bottom: 30px!important; }
.ml30{ margin-left: 30px!important; }
.m40{ margin: 40px!important; }
.mt40{ margin-top: 40px!important; }
.mr40{ margin-right: 40px!important; }
.mb40{ margin-bottom: 40px!important; }
.ml40{ margin-left: 40px!important; }
.m50{ margin: 50px!important; }
.mt50{ margin-top: 50px!important; }
.mr50{ margin-right: 50px!important; }
.mb50{ margin-bottom: 50px!important; }
.ml50{ margin-left: 50px!important; }

.p0{ padding: 0!important; }
.pt0{ padding-top: 0!important; }
.pr0{ padding-right: 0!important; }
.pb0{ padding-bottom: 0!important; }
.pl0{ padding-left: 0!important; }
.p10{ padding: 10px!important; }
.pt10{ padding-top: 10px!important; }
.pr10{ padding-right: 10px!important; }
.pb10{ padding-bottom: 10px!important; }
.pl10{ padding-left: 10px!important; }
.p20{ padding: 20px!important; }
.pt20{ padding-top: 20px!important; }
.pr20{ padding-right: 20px!important; }
.pb20{ padding-bottom: 20px!important; }
.pl20{ padding-left: 20px!important; }
.p30{ padding: 30px!important; }
.pt30{ padding-top: 30px!important; }
.pr30{ padding-right: 30px!important; }
.pb30{ padding-bottom: 30px!important; }
.pl30{ padding-left: 30px!important; }
.p40{ padding: 40px!important; }
.pt40{ padding-top: 40px!important; }
.pr40{ padding-right: 40px!important; }
.pb40{ padding-bottom: 40px!important; }
.pl40{ padding-left: 40px!important; }
.p50{ padding: 50px!important; }
.pt50{ padding-top: 50px!important; }
.pr50{ padding-right: 50px!important; }
.pb50{ padding-bottom: 50px!important; }
.pl50{ padding-left: 50px!important; }

.bg_wh{ background: #fff; }
.bg_gr{ background: #f6f6f6; }

.aligncenter{ text-align: center; }
.alignleft{ text-align: left; }
.alignright{ text-align: right; }
img.aligncenter{
	display: block;
	margin: auto;
}
img.alignleft{ float: left; }
img.alignright{ float: right; }

/* accordion
-------------------- */
dl.accordion dt{
	position: relative;
	cursor: pointer;
}
dl.accordion dt .icon{
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
}

/* box
-------------------- */
.box{
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #ddd;
}

/* btn
-------------------- */
a.bt, a.bt_tbl{
	display: block;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
a.bt{
	position: relative;
	padding: 0.8em 0.5em;
	font-size: 1.2em;
}
a.bt .icon{
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
a.bt_tbl{ padding: 1em 5px; }
a.bt_shine{
	position: relative;
	overflow: hidden;
}
a.bt_shine:after{
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: -4.53m;
	width: 12vw;
	height: 100%;
	background: rgba(255, 255, 255, .6);
	-webkit-animation: shine 1.5s ease-in-out infinite;
	animation: shine 1.5s ease-in-out infinite;
}
/* keyframes */
@-webkit-keyframes shine{
    0% { -webkit-transform: translateX(-100%) skewX(-45deg); opacity: 1; }
    30% { -webkit-transform: translateX(100vw) skewX(-45deg); opacity: 1; }
    31% { -webkit-transform: translateX(100vw) skewX(-45deg); opacity: 0; }
    100% { -webkit-transform: translateX(-100%) skewX(-45deg); opacity: 0; }
}
@keyframes shine{
    0% { transform: translateX(-100%) skewX(-45deg); opacity: 1; }
    30% { transform: translateX(100vw) skewX(-45deg); opacity: 1; }
    31% { transform: translateX(100vw) skewX(-45deg); opacity: 0; }
    100% { transform: translateX(-100%) skewX(-45deg); opacity: 0; }
}

/* list
-------------------- */
ul.li_n{ list-style: none; }
ul.check{
	list-style: none;
	margin: 0;
}
ul.check li{
	position: relative;
	padding-left: 24px;
}
ul.check li:before, ul.check li:after{
	position: absolute;
	content: "";
}
ul.check li:before{
	top: 3px;
	left: 0;
	width: 10px;
	height: 10px;
	border: 2px solid #aa946a;
}
ul.check li:after{
	top: -2px;
	left: 6px;
	width: 5px;
	height: 12px;
	border-bottom: 3px solid #aa0101;
	border-right: 3px solid #aa0101;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* font
-------------------- */
.orange{ color: #f60; }
.red{ color: #f00; }
.yellow{ color: #ff0; }
.gray{ color: #999; }
.marker{
	background: -webkit-linear-gradient(transparent 60%, #ff0 60%);
	background: linear-gradient(transparent 60%, #ff0 60%);
}
.b{ font-weight: bold; }
.small{ font-size: 0.8em; }
.big{ font-size: 1.2em; }

@media(min-width: 751px){
	ul.check li{ padding-left: 30px; }
	ul.check li:before{
		top: 7px;
		width: 14px;
		height: 14px;
		border-width: 3px;
	}
	ul.check li:after{
		top: 0;
		left: 8px;
		width: 8px;
		height: 18px;
		border-width: 4px;
	}
}

/* ================================================ */
.pr{ position: relative; }
.pr span{
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 5px;
	border: 1px solid #333;
	line-height: 1;
	font-size: 0.6em;
}
h2{
	padding: 0.4em 0;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	text-align: center;
	font-size: 1.4em;
	color: #fff;
}
h3{
	padding: 0.5em;
	background: #f0ede5;
	border-left: 5px solid #aa8b4b;
	color: #aa8b4b;
}

svg.icon{
	display: inline-block;
	width: 36px;
	height: 36px;
	vertical-align: middle;
}

/* item_box
-------------------- */
.item_box{
	margin: 1em 0;
	padding: 1em 1em 1.5em;
	background: #fff9f0;
	border: 1px solid #aa8b4b;
	border-radius: 5px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.item_box p{ color: #000; }
.item_box .item_header{
	margin: -1em -1em 0;
	padding: 0.8em 1em 1em;
	background: -webkit-linear-gradient(#f3e282, #e5ca36);
	background: linear-gradient(#f3e282, #e5ca36);
	-webkit-text-stroke: 5px #fff;
	text-stroke: 5px #fff;
	paint-order: stroke;
}
.item_box .item_header .item_ttl{
	font-weight: bold;
	font-size: 1.4em;
}
.item_box .item_header .item_ttl a{ color: #502b11; }
.item_box .item_info{
	flex-direction: column;
	padding: 1em 0;
}
.item_box .item_info .item_banner{
	padding-bottom: 1em;
	text-align: center;
}
.item_box .item_info .item_osusume{ flex: 1; }
.item_box .item_info .item_osusume .ttl{
	display: inline-block;
	margin-top: 0;
	padding: 5px 20px;
	background: #aa0101;
	border: 0;
	border-radius: 100px;
	line-height: 1;
	color: #fff;
}
.item_box .ttl{ margin: 1em 0 0.5em; }
.item_box .item_delivery, .item_box .item_pay, .item_box .item_kodawari{
	margin: 1em 0;
	padding: 0 1em 0.5em;
	background: #fff;
	border: 1px solid #502b11;
	border-radius: 5px;
}
.item_box .item_delivery .ttl, .item_box .item_pay .ttl, .item_box .item_kodawari .ttl{
	margin: 0 -1em 0.5em;
	padding: 0.3em;
	background: #502b11;
	border-radius: 3px 3px 0 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
.item_box .item_delivery .ttl span{ position: relative; }
.item_box .item_delivery .ttl span::before{
	position: absolute;
	content: "";
	bottom: 0;
	left: -50px;
	width: 40px;
	height: 27px;
	background: url(images/icon_delivery.png) 0 0 no-repeat;
	background-size: contain;
}
.item_box .item_pay dt .icon{
	top: calc(50% - 10px);
	right: 10px;
	width: 20px;
	height: 20px;
}
.item_box .item_kodawari{
	padding: 0;
	border: 1px solid #aa0101;
}
.item_box .item_kodawari .ttl{
	margin: 0 0 0.5em;
	background: #aa0101;
}
.item_box .item_kodawari ul{ padding: 0 1em; }
.item_box .item_ranking{ margin: 1em -1em 0; }
.item_box .item_ranking.otoku{ margin-top: 0; }
.item_box .item_ranking .ttl{
	margin: 0;
	padding: 0;
	border: 0;
}
.item_box .item_ranking .flex{
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 5px;
	background: #f6f4f1;
}
.item_box .item_ranking figure{
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	width: 48%;
	background: #fff;
	border: 1px solid #aa8b4b;
	border-radius: 3px;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
	color: #333;
}
.item_box .item_ranking figure:nth-of-type(odd):not(:last-of-type){ margin-right: 2%; }
.item_box .item_ranking figure figcaption{
	flex-grow: 1;
	padding: 0.5em;
	background: #aa8b4b;
	color: #fff;
}
.item_box .item_ranking figure img{ padding-bottom: 1em; }
.item_box .item_ranking a.bt{
	position: relative;
	margin: 0 0.5em 0.5em;
	padding: 0.5em 0;
	background: #333;
	border-radius: 0;
	box-shadow: 0 0;
	box-sizing: border-box;
	-webkit-text-stroke: 0;
	text-stroke: 0;
	color: #fff;
}
.item_box .item_ranking a.bt:after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	border-width: 10px;
	border-style: solid;
	border-color: #aa8b4b transparent transparent #aa8b4b;
}
.item_box .item_ranking a.bt .icon{
	width: 24px;
	height: 24px;
	color: #aa8b4b;
}
.item_box .item_ranking .microcopy{
	position: relative;
	display: inline-block;
	margin: -1em 0 6px;
	padding:  5px 10px;
	background: #b90006;
	border-radius: 5px;
	font-size: 0.9em;
	color: #fff;
	z-index: 1;
	-webkit-animation: bounce 1s infinite;
	animation: bounce 1s infinite;
}
.item_box .item_ranking .microcopy:after{
	position: absolute;
	content: "";
	top: 100%;
	left: 50%;
	border: 5px solid transparent;
	border-top-color: #b90006;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ranking_wrap .item_box:first-of-type{
	position: relative;
	background: #fff4f6;
	border-width: 3px 0;
}
.ranking_wrap .item_box:first-of-type:before, .ranking_wrap .item_box:first-of-type:after{
	position: absolute;
	content: "";
	top: 0;
	width: 3px;
	height: 100%;
	background: -webkit-linear-gradient(#aa8b4b, #f9f5b5, #c9b377, #f9f5b5, #aa8b4b);
}
.ranking_wrap .item_box:first-of-type:before{ left: 0; }
.ranking_wrap .item_box:first-of-type:after{ right: 0; }
.ranking_wrap .item_box .item_header{
	display: flex;
	align-items: flex-end;
}
.ranking_wrap .item_box .item_header .item_rank{
	padding: 0 10px 0 5px;
	width: 22px;
	height: 40px;
	background: center 0 no-repeat;
	background-size: contain;
}
.ranking_wrap .item_box .item_header .item_ttl{ flex: 1; }
.ranking_wrap .item_box:nth-of-type(1) .item_header .item_rank{ background-image: url(images/rank_01.png); }
.ranking_wrap .item_box:nth-of-type(2) .item_header .item_rank{ background-image: url(images/rank_02.png); }
.ranking_wrap .item_box:nth-of-type(3) .item_header .item_rank{ background-image: url(images/rank_03.png); }
.ranking_wrap .item_box:nth-of-type(4) .item_header .item_rank{ background-image: url(images/rank_04.png); }
.ranking_wrap .item_box:nth-of-type(5) .item_header .item_rank{ background-image: url(images/rank_05.png); }


.cta{ text-align: center; }
.cta .microcopy{
	position: relative;
	display: inline-block;
	margin-bottom: -5px;
	padding: 5px 10px;
	background: #fff;
	border: 2px solid #ff8a00;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	font-weight: bold;
	font-size: 0.9em;
	z-index: 1;
	-webkit-animation: bounce 1s infinite;
	animation: bounce 1s infinite;
}
@-webkit-keyframes bounce{
	50%{ transform: translateY(0); }
	75%{ transform: translateY(2px); }
}
@keyframes bounce{
	50%{ transform: translateY(0); }
	75%{ transform: translateY(2px); }
}
.cta .microcopy:before, .cta .microcopy:after{
	position: absolute;
	content: "";
	left: 50%;
	border: 10px solid transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.cta .microcopy:before{
	bottom: -22px;
	border-top-color: #ff8a00;
}
.cta .microcopy:after{
	bottom: -19px;
	border-top-color: #fff;
}
.cta a.bt{ z-index: 0; }
a.bt, a.bt_tbl{
	background: -webkit-linear-gradient(#fab046 50%, #ff8a00 50%);
	background: linear-gradient(#fab046 50%, #ff8a00 50%);
	box-shadow: 0 2px 0 #b66100;
	-webkit-text-stroke: 4px #fff;
	text-stroke: 4px #fff;
	paint-order: stroke;
	color: #6f0301;
}
a.bt .icon{ color: #fff; }

table.hikaku thead{
	position: sticky;
	top: 0;
	z-index: 1;
}
table.hikaku thead th, table.hikaku thead td{ position: relative; }
table.hikaku thead th:before, table thead td:before{
	position: absolute;
	content: "";
	top: -1px;
	left: -1px;
	width: 100%;
	height: 100%;
	border: 1px solid #aa946a;
	box-sizing: content-box;
	pointer-events: none;
}
table.hikaku th, table.hikaku td{
	background: #fff;
	border-color: #aa946a;
	text-align: center;
}
table.hikaku th{
	width: 16%;
	background: #ddc27f;
	color: #502b11;
}
table.hikaku td{ width: calc(84% / 3); }
table.hikaku tr td:first-of-type{ background: #fff4f6; }
.rate_star, .rate_star .rate{
	height: 15px;
	background: 0 0 repeat-x;
	background-size: 16px 15px;
}
.rate_star{
	position: relative;
	display: inline-block;
	width: 80px;
	background-image: url(images/star_off.png);
}
.rate_star .rate{ background-image: url(images/star_on.png); }

@media(min-width: 751px){
	svg.icon{
		width: 48px;
		height: 48px;
	}
	.ranking_wrap .item_box .item_header .item_rank{
		width: 46px;
		height: 72px;
	}
	.item_box .item_info{
		flex-direction: revert;
		align-items: flex-start;
	}
	.item_box .item_info .item_banner{
		padding: 0 1em 0 0;
		width: 300px;
	}
	.item_box .item_delivery .ttl span::before{
		left: -60px;
		width: 50px;
		height: 34px;
	}
	.item_box .item_ranking{ margin: 1em 0 0; }
	.item_box .item_ranking .flex{
		margin-bottom: 1em;
		padding: 10px;
		border: 2px solid #ecd13d;
	}
	.item_box .item_ranking figure{ font-size: 0.6em; }
	.item_box .item_ranking figure img{
		padding: 0.5em 0.5em;
		box-sizing: border-box;
	}
	.item_box .item_ranking .microcopy, .item_box .item_ranking a.bt{
		margin: 0 1em 1em;
		font-size: 0.8em;
	}
	.rate_star, .rate_star .rate{
		height: 21px;
		background-size: 22px 21px;
	}
	.rate_star{ width: 110px; }
}