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

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

body{
	position: relative;
	background: #f3f3f3;
	line-height: 1.2;
	text-align: left;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-weight: 400;
	color: #413221;
}
a{
	text-decoration: underline;
	color: #62abd9;
	-webkit-transition: .3s;
	transition: .3s;/* Theme Name: プラスワンLP 2025.06  */
}
.icon.inline {
	display: inline-block !important;
	position: static !important;
	transform: none !important;
}

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

body{
	position: relative;
	background: #f3f3f3;
	line-height: 1.2;
	text-align: left;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-weight: 400;
	color: #413221;
}
a{
	text-decoration: underline;
	color: #62abd9;
	-webkit-transition: .3s;
	transition: .3s;
}
a:hover{ text-decoration: none; }
a:hover img{ 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{
	max-width: 100%;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
	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; }
#wrap{ background: #fff; }
.inner{ padding: 1em 1em 1.5em; }
h2.img, h3.img{
	padding: 0;
	background: none;
	text-align: center;
}
@media (min-width: 751px){
	#wrap{
		margin: 0 auto;
		max-width: 750px;
		background: #fff;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	}
}
footer{
	background: #444;
	text-align: center;
	font-size: 0.7em;
	color: #fff;
}
footer a{ color: #fff; }


.icon-excellent	{ fill: #ff5353; }
.icon-good			{ fill: #ff8484; }
.icon-average		{ fill: #3daeff; }
.icon-poor			{ fill: #999999; }

.for-pc{display:inline}
.for-sp{display:inline}
@media screen and (min-width: 750px){
	.for-pc{display:none}
	.for-sp{display:none}
}

/* ------------------------------------------------
 styles
------------------------------------------------ */
/* block
-------------------- */
.flex{ display: flex; }
.flex.--justify { gap: 5%; }
.flex.--justify > * { width: calc(100% / var(--flex, 2));}
.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; }

.mt0 {margin-top:0px!important;}
.mt10 {margin-top:10px!important;}
.mt20 {margin-top:20px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt60 {margin-top:60px!important;}
.mt70 {margin-top:70px!important;}
.mt80 {margin-top:80px!important;}
.mt90 {margin-top:90px!important;}
.mt100 {margin-top:100px!important;}

.mb0 {margin-bottom:0px!important;}
.mb10 {margin-bottom:10px!important;}
.mb20 {margin-bottom:20px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb60 {margin-bottom:60px!important;}
.mb70 {margin-bottom:70px!important;}
.mb80 {margin-bottom:80px!important;}
.mb90 {margin-bottom:90px!important;}
.mb100 {margin-bottom:100px!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;
}

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

/* btn
-------------------- */
.cta_flex {
	display: flex;
	align-items: flex-end;
	gap: 1%;
}
.cta_flex .cta {
	width: 50%;
}
.cta_flex a.bt {
	font-size: 1em !important;
}
.cta_mc {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1em;
  margin-bottom: 0.5em;
  font-size: 80%;
}
.cta_mc::before,
.cta_mc::after {
  content: '';
  display: block;
  width: 2px;
  height: 1em;
  background: #ff5521;
}
.cta_mc::before {
  transform: rotate(-45deg);
}
.cta_mc::after {
  transform: rotate(45deg);
}
a.bt, a.bt_tbl{
	display: block;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #fff;
	transition: all .4s ease;
}
a.bt_tbl:hover{
	box-shadow: none;
	transform: translateY(3px);
	opacity: .5;
}
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;
}
a.bt_bound {
  animation: bound .5s ease infinite alternate;
}
/* 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; }
}
@keyframes bound{
  50% {transform: translateY(0);}
  75% {transform: translateY(5px);}
}

/* list
-------------------- */
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 #ccc;
}
ul.check li:after{
	top: -2px;
	left: 6px;
	width: 5px;
	height: 12px;
	border-bottom: 3px solid #f60;
	border-right: 3px solid #f60;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* font
-------------------- */
.orange{ color: #f60; }
.red{ color: #f00; }
.yellow{ color: #ff0; }
.gray{ color: #999; }
.blue{ color: #3583cf !important; }
.pink{ color: #ee34cd !important; }
.navy{ color: #373f70 !important; }
.green{ color: #339966 !important; }
.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; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* ================================================ */
header .inner{ padding: 0 0.5em; }
header #logo{
	height: 40px;
	background: url(../images/kaitori_logo.png) 0 center no-repeat;
	background-size: contain;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
@media(min-width: 751px){
	header #logo{ height: 50px; }
}
h2{
	padding: 0.8em 1em;
	background: var(--h2bg,#ecd8bb);
}
h3{
	padding-bottom: 5px;
	border-bottom: 4px double var(--h3bg,#ecd8bb);
}
.ttl_bubble {
	padding: .2em .5em;
	background: #fff;
	border-radius: 100px;
	border: 2px solid var(--ttl-bubble,#ecd8bb);
	font-size: .8em;
	position: absolute;
	top: -.8em;
	left: 1em;
}
.ttl_bubble::before,
.ttl_bubble::after {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	left: 1.2em;
}
.ttl_bubble::before {
	background: var(--ttl-bubble,#ecd8bb);
	z-index: 2;
	bottom: -.5em;
}
.ttl_bubble::after {
	background: #fff;
	z-index: 3;
	bottom: -.4em;
}
h2:has(.ttl_bubble),
h3:has(.ttl_bubble) {
	padding-top: 1.2em;
}

/* hikaku
-------------------- */
table.hikaku{
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}
table.hikaku th, table.hikaku td{ text-align: center; }
table.hikaku th{ background: #fff; }
table.hikaku thead{
    position: sticky;
    top: 0;
    z-index: 1;
}
table.hikaku tbody th{
	position: relative;
	padding: 10px 5px 0;
	background: none;
	border-bottom: 0;
	color: #fff;
	z-index: 0;
}
table.hikaku tbody th:before{
	position: absolute;
	content: "";
	top: 5px;
	left: 5%;
	width: 90%;
	height: 100%;
	background: var(--tablettl,#6c5c48);
	border-radius: 5px;
	z-index: -1;
}
table.hikaku tbody td{ border-top: 0; }

table.hikaku thead th:first-child, table.hikaku tr td:first-child{
	border-right: 2px solid #ff5353;
	border-left: 2px solid #ff5353;
	background: #fffadf;
}
table.hikaku thead tr:first-child th:not(.is-colspan):first-child { border-top: 2px solid #ff5353; }
table.hikaku tbody:last-child tr:last-child td:first-child{ border-bottom: 2px solid #ff5353;}
table.hikaku th.icon{ padding: 5px; }

img.rank{ width: 50px; }

.rate{
	margin: 0 auto 5px;
	width: 24vw;
	height: 4.2vw;
	background: url(/wp-content/uploads/2025/06/icon_star_off.png) 0 0 repeat-x;
	background-size: contain;
}
.rate .star{
	height: 4.2vw;
	background: url(/wp-content/uploads/2025/06/icon_star.png) 0 0 repeat-x;
	background-size: contain;
}

/* box
-------------------- */
.point .box{
	background: #fffadf;
	border-color: var(--boxborder,#6c5c48);
}
.point .ttl{
	position: relative;
	display: inline-block;
	margin-top: 1em;
	padding: 10px 1em 0.5em 30px;
	background: var(--boxbg,#6c5c48);
	border-radius: 5px 5px 0 0;
	font-weight: bold;
	color: #fff;
}
.point .ttl:before{
	position: absolute;
	content: "";
	top: 5px;
	left: 5px;
	width: 24px;
	height: 24px;
	background: url(/wp-content/uploads/2025/06/icon_feature.png) 0 0 no-repeat;
	background-size: cover;
}
.point ul.check li{
	padding-left: 20px;
	font-size: 0.9em;
}
.point ul.check li:before{
	top: 0;
	width: 1em;
	height: 1em;
	border: 0;
	background: var(--check,#d8a400);
	border-radius: 2px;
}
.point ul.check li:after{
	top: .1em;
	left: .38em;
	width: .3em;
	height: .6em;
	border-width: 2px;
	border-color: #fff;
}
.comment{ margin: 1em 0; }
.comment .img{ width: 80px; }
.comment .txt{
	flex: 1;
	position: relative;
	margin-left: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.comment .txt:before, .comment .txt:after{
	position: absolute;
	content: "";
	border-width: 6px 9px;
	border-style: solid;
}
.comment .txt:before{
	top: 40px;
	right: 100%;
	border-color: #ddd #ddd transparent transparent;
}
.comment .txt:after{
	top: 41px;
	right: calc(100% - 4px);
	border-color: #fff #fff transparent transparent;
}
.comment .txt p{
	margin: 0.5em;
	font-size: 0.9em;
}

dl.step{
	margin-bottom: 1em;
	border: 1px solid #78a4ff;
}
dl.step dt{
	padding: 10px;
	background: #78a4ff;
	font-weight: bold;
	color: #fff;
}
dl.step dt span{
	margin-right: 5px;
	padding: 1px 10px;
	background: #fff;
	border-radius: 100px;
	font-size: 0.8em;
	color: #78a4ff;
}
dl.step dd{
	padding: 0.5em;
	background: #fff4df;
}
dl.step dd .flex .img{ width: 40%; }
dl.step dd .flex .txt{
	flex: 1;
	padding-left: 0.5em;
	font-size: 0.8em;
}
dl.step dd ul{ margin-left: 2em; }
dl.step dd .ttl_sub{
	display: inline-block;
	padding: 2px 10px;
	background: #fff;
	border: 1px solid #78a4ff;
	color: #455b89;
}
dl.step dd ul.sub{
	list-style: square;
	color: #455b89;
}

ul.tab{
	list-style: none;
	margin: 0;
	justify-content: space-around;
}
ul.tab li{
	flex: 1;
	margin-bottom: 0;
	padding: 10px 1px;
	background: #c8c8c8;
	border: 1px solid #c2bfbf;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
	color: #fff;
	cursor: pointer;
}
ul.tab li.select{
	background: #455b89;
	border-color: #455b89;
}
.tab_cnt.box{
	margin-top: 0;
	border-color: #455b89;
}

/* accordion
-------------------- */
dl.accordion dt:not(.accordion dd dt){
	position: relative;
	margin: 1em 0;
	padding: 0.8em;
	background: var(--accordion,#6c5c48);
	border-radius: 100px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
dl.accordion dt .icon{
	position: absolute;
	top: 50%;
	right: 5px;
	color: var(--accordion-arrow,#6c5c48);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
dl.step dt .icon{ display: none; }

.bg_be{ background: #f3ede8; }

/* btn
-------------------- */
.cta_mc {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1em;
  margin-bottom: 0.5em;
  font-size: 80%;
}
.cta_mc::before,
.cta_mc::after {
  content: '';
  display: block;
  width: 2px;
  height: 1em;
  background: #ff5521;
}
.cta_mc::before {
  transform: rotate(-45deg);
}
.cta_mc::after {
  transform: rotate(45deg);
}
a.bt_more{
	display: block;
	margin: 0.5em auto;
	padding: 1em 0.8em;
	width: 90%;
	background: #f3f3f3;
	border: 1px solid var(--more,#cba373);
	border-radius: 100px;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: var(--more,#cba373);
	transition: all .4s ease;
}
a.bt_more:hover {
	background: var(--more,#cba373);
	color: #fff;
}
a.bt, a.bt_tbl{
	border-radius: 100px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
a.bt_gr{ background: #3eb959; }
a.bt_or{ background: #ff5521; }
a.bt_cstm{ background: var(--bg,#ff5521); }

@media(min-width: 751px){
	img.rank{ width: 60px; }
	.rate{
		width: 180px;
		height: 32px;
	}
	.rate .star{ height: 32px; }
	dl.accordion dt .icon{ width: 64px; }
	.point .ttl{ padding: 13px 30px 10px 50px; }
	.point .ttl:before{
		top: 10px;
		left: 10px;
		width: 36px;
		height: 36px;
	}
	.point ul.check li{ padding-left: 40px; }
	.point ul.check li:before{
		width: 1.2em;
		height: 1.2em;
		border-radius: 4px;
	}
	.point ul.check li:after{
		top: 3px;
		left: 9px;
		width: 7px;
		height: 16px;
		border-width: 4px;
	}
}

/* review
-------------------- */
.review_box {
	padding: .5em;
	background: #FFF9E5;
	box-sizing: border-box;
}
.review_box_inner {
	display: flex !important;
	gap: 1em;
	padding: 1em;
	background: #fff;
	border-radius: 5px;
	box-sizing: border-box;
}
.review_icon_img {
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: 50%;
	background: #F5CBCB;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.review_icon_name {
	display: block;
	text-align: center;
	font-size: 70%;
}
.review_body p {
	margin-top: 0;
}



/* slick
-------------------- */
.slick-dots {
	display: flex;
	justify-content: center;
	gap: .5em;
	list-style-type: none;
}
.slick-dots li {
	margin: 0;
}
.slick-dots li button {
	width: .5em;
	height: .5em;
	line-height: .5em;
	text-indent: 100%;
	overflow: hidden;
	background: #666;
	border-radius: 50%;
	border: none;
	outline: none;
	opacity: .5;
	transition: all .4s ease;
}
.slick-dots li.slick-active button {
	opacity: 1;
}
a:hover{ text-decoration: none; }
a:hover img{ 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;
}
table.table-fixed{
	table-layout: fixed;
}
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{
	max-width: 100%;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
	font-size: 1em;
}
main{ padding-bottom: 2em; }
h2, h3{
	font-weight: bold;
	font-size: 1.2em;
	position: relative;
}
h3, p{ margin: 1em 0; }
p{ line-height: 1.6; }
#wrap{ background: #fff; }
.inner{ padding: 1em 1em 1.5em; }
h2.img, h3.img{
	padding: 0;
	background: none;
	text-align: center;
}
footer{
	background: #444;
	text-align: center;
	font-size: 0.7em;
	color: #fff;
}
footer a{
	text-decoration: none;
	color: #fff;
}
@media (min-width: 751px){
	#wrap{
		margin: 0 auto;
		max-width: 750px;
		background: #fff;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	}
	footer{ font-size: 0.5em; }
}

/* ------------------------------------------------
 styles
------------------------------------------------ */
/* block
-------------------- */
.flex{ display: flex; }
.flex.--justify { gap: 5%; }
.flex.--justify > * { width: calc(100% / var(--flex, 2));}
.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;
}

/* box
-------------------- */
.box{
	margin: 1em 0;
	padding: 1em;
	border: 1px solid var(--border,#ddd);
	background: var(--bg,#fff);
}

/* btn
-------------------- */
a.bt, a.bt_tbl{
	display: block;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #fff;
	transition: all .4s ease;
}
a.bt_tbl:hover{
	box-shadow: none;
	transform: translateY(3px);
	opacity: .5;
}
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;
}
a.bt_bound {
  animation: bound .5s ease infinite alternate;
}
/* 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; }
}
@keyframes bound{
  50% {transform: translateY(0);}
  75% {transform: translateY(5px);}
}

/* list
-------------------- */
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 #ccc;
}
ul.check li:after{
	top: -2px;
	left: 6px;
	width: 5px;
	height: 12px;
	border-bottom: 3px solid #f60;
	border-right: 3px solid #f60;
	-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; }

/* ================================================ */
header .inner{
	justify-content: space-between;
	align-items: center;
	padding: 0 0.5em;
}
header #logo{
	flex: 1;
	height: 40px;
	background: url(../images/kaitori_logo.png) 0 center no-repeat;
	background-size: contain;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
header .pr{
	padding: 3px 4px 1px;
	border: 1px solid #666;
	line-height: 1;
	font-size: 0.7em;
}
@media(min-width: 751px){
	header #logo{ height: 50px; }
	header .pr{ font-size: 0.4em; }
}
h2{
	padding: 0.8em 1em;
	background: var(--h2bg,#ecd8bb);
}
h3{
	padding-bottom: 5px;
	border-bottom: 4px double var(--h3bg,#ecd8bb);
}

/* table
-------------------- */
table.table th, table.table td{ text-align: center; }
table.table th{
	padding: 10px 5px;
	background: var(--table,#6c5c48);
	color: #fff;
}

table.hikaku tr th.is-colspan::after {
	content: '';
	display: block;
	width: calc(33.3333% - 4px);
	height: 37px;
	border-left: 2px solid #ff5353;
	border-right: 2px solid #ff5353;
	background: #fffadf;
	position: absolute;
	left: -1px;
	top: 0;
	z-index: -2;
}
@media(min-width: 751px){
	table.hikaku tr th.is-colspan::after {
		content: '';
		display: block;
		width: calc(33.3333% - 3px);
		height: 50px;
		border-left: 2px solid #ff5353;
		border-right: 2px solid #ff5353;
		background: #fffadf;
		position: absolute;
		left: -1px;
		top: 0;
		z-index: -2;
	}
}

/* box
-------------------- */
.point .box{
	background: #fffadf;
	border-color: var(--boxborder,#6c5c48);
}
.point .ttl{
	position: relative;
	display: inline-block;
	margin-top: 1em;
	padding: 10px 1em 0.5em 30px;
	background: var(--boxbg,#6c5c48);
	border-radius: 5px 5px 0 0;
	font-weight: bold;
	color: #fff;
}
.point .ttl:before{
	position: absolute;
	content: "";
	top: 5px;
	left: 5px;
	width: 24px;
	height: 24px;
	background: url(/wp-content/uploads/2025/06/icon_feature.png) 0 0 no-repeat;
	background-size: cover;
}
.point ul.check li{
	padding-left: 1.2em;
	font-size: 0.9em;
}
.point ul.check li:before{
	top: 0;
	width: 1em;
	height: 1em;
	border: 0;
	background: var(--check,#d8a400);
	border-radius: 2px;
}
.point ul.check li:after{
	top: .1em;
	left: .3em;
	width: .25em;
	height: .4em;
	border-width: 2px;
	border-color: #fff;
}
.comment{ margin: 1em 0; }
.comment .img{ width: 50px; }
.comment .txt{
	flex: 1;
	position: relative;
	margin-left: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.comment .txt:before, .comment .txt:after{
	position: absolute;
	content: "";
	border-width: 6px 9px;
	border-style: solid;
}
.comment .txt:before{
	top: 40px;
	right: 100%;
	border-color: #ddd #ddd transparent transparent;
}
.comment .txt:after{
	top: 41px;
	right: calc(100% - 4px);
	border-color: #fff #fff transparent transparent;
}
.comment .txt p{
	margin: 0.5em;
	font-size: 0.9em;
}

dl.step{
	margin-bottom: 1em;
	border: 1px solid #78a4ff;
}
dl.step dt{
	padding: 10px;
	background: #78a4ff;
	font-weight: bold;
	color: #fff;
}
dl.step dt span{
	margin-right: 5px;
	padding: 1px 10px;
	background: #fff;
	border-radius: 100px;
	font-size: 0.8em;
	color: #78a4ff;
}
dl.step dd{
	padding: 0.5em;
	background: #fff4df;
}
dl.step dd .flex .img{ width: 40%; }
dl.step dd .flex .txt{
	flex: 1;
	padding-left: 0.5em;
	font-size: 0.8em;
}
dl.step dd ul{ margin-left: 2em; }
dl.step dd .ttl_sub{
	display: inline-block;
	padding: 2px 10px;
	background: #fff;
	border: 1px solid #78a4ff;
	color: #455b89;
}
dl.step dd ul.sub{
	list-style: square;
	color: #455b89;
}

ul.tab{
	list-style: none;
	margin: 0;
	justify-content: space-around;
}
ul.tab li{
	flex: 1;
	margin-bottom: 0;
	padding: 10px 1px;
	background: #c8c8c8;
	border: 1px solid #c2bfbf;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
	color: #fff;
	cursor: pointer;
}
ul.tab li.select{
	background: #455b89;
	border-color: #455b89;
}
.tab_cnt.box{
	margin-top: 0;
	border-color: #455b89;
}

/* accordion
-------------------- */
dl.accordion dt:not(.accordion dd dt){
	position: relative;
	margin: 1em 0;
	padding: 0.8em;
	background: var(--accordion,#6c5c48);
	border-bottom: .2em solid color-mix(in srgb, var(--accordion, #6c5c48) 60%, black);
	border-radius: 100px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}
dl.accordion dt .icon{
	position: absolute;
	top: 50%;
	right: 5px;
	color: var(--accordion-arrow,#e0ca68);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
dl.step dt .icon{ display: none; }

.bg_be{ background: #f3ede8; }

/* btn
-------------------- */
a.bt_more{
	display: block;
	margin: 0.5em auto;
	padding: 1em 0.8em;
	width: 90%;
	background: #f3f3f3;
	border: 1px solid #cba373;
	border-radius: 100px;
	box-shadow: 0 3px 5px rgba(0,0,0,0.2);
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: #cba373;
	transition: all .4s ease;
}
a.bt_more:hover {
	background: var(--more,#cba373);
	color: #fff;
}
a.bt, a.bt_tbl{
	border-radius: 100px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
a.bt_gr{ background: #3eb959; }
a.bt_or{ background: #ff5521; }
a.bt_rd{ background: #FF0505; }

@media(min-width: 751px){
	img.rank{ width: 60px; }
	.rate{
		width: 180px;
		height: 32px;
	}
	.rate .star{ height: 32px; }
	dl.accordion dt .icon{ width: 64px; }
	.point .ttl{ padding: 13px 30px 10px 50px; }
	.point .ttl:before{
		top: 10px;
		left: 10px;
		width: 36px;
		height: 36px;
	}
	.point ul.check li{ padding-left: 1.4em; }
	.point ul.check li:before{
		width: 1.2em;
		height: 1.2em;
		border-radius: 4px;
	}
	.point ul.check li:after{
		top: .1em;
		left: .38em;
		width: .3em;
		height: .6em;
		border-width: 4px;
	}
}

/* review
-------------------- */
.review_box {
	padding: .5em;
	background: #FFF9E5;
	box-sizing: border-box;
}
.review_box_inner {
	display: flex !important;
	gap: 1em;
	padding: 1em;
	background: #fff;
	border-radius: 5px;
	box-sizing: border-box;
}
.review_icon_img {
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: 50%;
	background: #F5CBCB;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.review_icon_name {
	display: block;
	text-align: center;
	font-size: 70%;
}
.review_body p {
	margin-top: 0;
}



/* slick
-------------------- */
.slick-dots {
	display: flex;
	justify-content: center;
	gap: .5em;
	list-style-type: none;
}
.slick-dots li {
	margin: 0;
}
.slick-dots li button {
	width: .5em;
	height: .5em;
	line-height: .5em;
	text-indent: 100%;
	overflow: hidden;
	background: #666;
	border-radius: 50%;
	border: none;
	outline: none;
	opacity: .5;
	transition: all .4s ease;
}
.slick-dots li.slick-active button {
	opacity: 1;
}


.cta_mc {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1em;
  margin-bottom: 0.5em;
  font-size: 80%;
	font-weight: bold;
	color: var(--mc, #ff5521);
}
.cta_mc::before,
.cta_mc::after {
  content: '';
  display: block;
  width: 2px;
  height: 1em;
  background: var(--mc, #ff5521);
}
.cta_mc::before {
  transform: rotate(-45deg);
}
.cta_mc::after {
  transform: rotate(45deg);
}




.lp-inner .search {
	margin: 1em auto;
}
.lp-inner .searchbox {
	margin-bottom: 1em;
	padding: 1em;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.lp-inner .searchbox dl {
	border-bottom: 1px solid #eee;
}
.lp-inner .searchbox dl:last-child {
	border-bottom: 0;
}
.lp-inner .searchbox dl dt {
	font-weight: bold;
}
.lp-inner .searchbox dl dd {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	padding: .5em 0;
}
.lp-inner .searchbox dl dd button {
	padding: .5em;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	line-height: 1;
}
.lp-inner .search .sort-btn.active {
	background: #F4F754;
}
.lp-inner .serchlist {
	display: flex;
}
.lp-inner .searchlist_head {
	width: 12%;
}
@media screen and (min-width: 750px) {
	.lp-inner .searchlist_head {
			width: 20%;
	}
}
.lp-inner .searchlist_head-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #f8f8f8;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	font-size: 80%;
	box-sizing: border-box;
}
.lp-inner .searchlist_body {
	width: 88%;
	display: flex;
		overflow-x: scroll;
}
@media screen and (min-width: 750px) {
	.lp-inner .searchlist_body {
		width: 80%;
		overflow-x: auto;
	}
}
.lp-inner .searchlist_body-cell {
	display: flex;
	align-items: center;
	/* justify-content: center; */
	flex-direction: column;
	padding: .5em;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.lp-inner .searchlist_body-cell .btn {
	width: 100%;
}
.lp-inner .sitem {
	width: 145px;
	flex-shrink: 0;
	text-align: center;
}
@media screen and (min-width: 750px) {
	.lp-inner .sitem {
			width: 33.333%;
	}
}
.lp-inner .sitem .btn a {
	font-size: .95em;
	padding: .5em;
}
.lp-inner .searchlist_body-cell.name a {
	font-weight: bold;
	color: #0099f9;
}
.lp-inner .searchlist_body-cell.bubble {
	border: 1px solid transparent;
}
.lp-inner .searchlist_bubble {
	padding: .5em;
	background: #FCB53B;
	border-radius: 5px;
	position: relative;
}
.lp-inner .searchlist_bubble::before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	background: #FCB53B;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	position: absolute;
	left: 50%;
	top: -.5em;
	z-index: 2;
	transform: translateX(-50%);
}


@keyframes bound {
	50% {
			transform: translateY(0);
	}
	75% {
			transform: translateY(5px);
	}
}
@keyframes bound2 {
	50% {
			transform: translateY(0);
			box-shadow: 0 5px 0 color-mix(in srgb, var(--btn, #FF3F33) 80%, black);
	}
	75% {
			transform: translateY(5px);
			box-shadow: 0 0 0 color-mix(in srgb, var(--btn, #FF3F33) 80%, black);
	}
}
@keyframes shiny {
	0% {
			transform: scale(0) rotate(45deg);
			opacity: 0;
	}
	80% {
			transform: scale(0) rotate(45deg);
			opacity: 0.5;
	}
	81% {
			transform: scale(4) rotate(45deg);
			opacity: 1;
	}
	100% {
			transform: scale(50) rotate(45deg);
			opacity: 0;
	}
}
.bound {
  animation: bound 1s infinite linear alternate;
}
.bound2 {
  animation: bound2 .5s ease infinite alternate;
}
.shiny {
	position: relative;
	overflow: hidden;
}
.shiny::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #fbfbfb;
	animation: shiny 2.5s ease-in-out infinite;
	z-index: 2;
}
.btn {
	margin: 15px auto;
	border: 0;
	border-radius: 10px;
	font-weight: bold;
	text-decoration: none;
	transition: all .4s ease;
	position: relative;
	text-align: center;
	&, * {
		box-sizing: border-box;
	}
}
.btn_mc {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	padding: .5em;
	color: color-mix(in srgb, var(--btn, #FF3F33) 80%, black 20%);
	font-weight: bold;
	font-size: 1em;
	position: relative;
	z-index: 2;
}
.btn_mc::before, .btn_mc::after {
	content: '';
	display: block;
	width: 3px;
	height: 1.2em;
	background: color-mix(in srgb, var(--btn, #FF3F33) 80%, black 20%);
}
.btn_mc::before {
	transform: rotate(-20deg);
}
.btn_mc::after {
	transform: rotate(20deg);
}
.btn a, .btn button {
	display: block;
	width: 100%;
	border-radius: var(--round, 10px);
	padding: 1em;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	background: var(--btn, #FF3F33);
	border: 1px solid color-mix(in srgb, var(--btn, #FF3F33) 80%, black);
	box-shadow: 0 5px 0 color-mix(in srgb, var(--btn, #FF3F33) 80%, black);
	text-decoration: none;
	transition: all 0.4s ease;
}
@media screen and (min-width: 750px) {
	.btn a, .btn button {
			padding: 1em;
	}
}
.btn a:hover, .btn button:hover {
	opacity: .5;
}
.btn_bottom {
	font-size: 90%;
	color: #797979;
	margin: 1.2em auto 0;
	text-align: center;
}
.btn--arrow {
	transform: rotate(90deg);
}


.ttlbox {
	margin: 1em auto;
}
.ttlbox .ttl {
	position: relative;
	padding: .5em;
	background: var(--border, #6c5c48);
	border-radius: 5px 5px 0 0;
	font-weight: bold;
	color: #fff;
}
.ttlbox .content {
	padding: 1em;
	background: var(--bg, #fffadf);
	border: 1px solid var(--border, #6c5c48);
}


#pop{
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	z-index: 99;
}
.pop_wrap{
	position: absolute;
	top: 50%;
	left: 0;
	padding: 0 15px;
	width: 100%;
	box-sizing: border-box;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#ranking.pop_wrap{
	top: 15px;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.pop_close{
	position: relative;
	margin: 0 auto 20px;
	width: 50%;
	max-width: 600px;
	border: 2px solid #fff;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.pop_close:after{
	position: absolute;
	content: "×";
	top: 50%;
	right: 10px;
	font-weight: bold;
	font-size: 2rem;
	color: #fff;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.card_box {
	margin-bottom: 1em;
}
.card_bubble {
	text-align: center;
}
.card_bubble-body {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: .5em;
	padding: .5em 1em;
	background: var(--bubble-bg,#e04870);
	color: var(--bubble-color,#fff);
	border-radius: 5px;
	position: relative;
	margin: 1em .5em 0;
	font-weight: bold;
}
.card_bubble-body::before {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	background: var(--bubble,#e04870);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	left: 50%;
	bottom: -0.48em;
	z-index: 2;
	transform: translateX(-50%);
}
.card_wrap {
	display: flex;
	flex-direction: column;
	flex-shrink: 1;
	border: 2px solid var(--border,#e04870);
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}
.card_box {
	display: flex;
}
.card_logo {
	display: block;
	width: 90%;
	margin: 0 auto .5em;
	text-align: center;
}
.card_wrap .cta {
	margin: .5em .5em 1em;
}
.card_wrap .point .box {
	border: none;
	background: none;
}
.card_thumb + * {
	flex-grow: 1;
}
.card.--ranking .card_box:first-child .card_wrap {
	background: #fcffcc;
}