@charset "UTF-8";

/* define */

:root {
	--slider-thumb-width: 26px;
	--slider-thumb-height: 26px;
	--slider-thumb-height-diff: 8px;
	--slider-thumb-border-radius: 50%;
	--slider-thumb-background: #F98071;
	--slider-thumb-background2: #3EA5C6;
	--slider-thumb-border: 0 !important;
	--slider-thumb-appearance: none;

	--color-primary: #383838;
	--color-secondary: #646464;
	--color-tertiary: #8d8d8d;
	--color-gray: #bfbfbf;
	--color-grayLight: #f8f8f8;
	--color-line: #e9e9e9;
	--color-key: #F87F70;
	--color-key2: #6C8FDA;
	--color-white: #fff;
}

/* tags */
html {
	margin-top: env(safe-area-inset-top);
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #5F5C5C;
	-webkit-font-smoothing: antialiased;
}

body {
	position: relative;
}

body:before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: env(safe-area-inset-top);
	background: #000;
	z-index: 999;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: bottom;
}

small {
	font-size: 80%;
}

input[type=text],
input[type=password],
textarea,
select {
	width: 100%;
	padding: 0.15em 0.25em;
	color: #F87F70;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

textarea,
input[name=twitter],
.associationbox input[type=text],
main.login input[name=email],
main.login input[type=password],
main.forgotpass input[name=email],
main.forgotpass select,
main.mail input[name=email],
main.register input[name=email],
main.register input[type=password],
main.register input[name=inviter],
main.help input[name=s] {
	color: #5F5C5C;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
	vertical-align: text-top;
}

::placeholder {
	color: #D9D9D9;
	font-weight: bold;
	opacity: 1;
}

/* styles */
.text-bold {
	font-weight: bold;
}

.text-black {
	color: #5F5C5C;
}

.text-red {
	color: #F87F70;
}

.text-blue {
	color: #609af2;
}

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

.text-underline {
	text-decoration: underline;
}

.mt-0 { margin-top:0 !important }
.mt-1 { margin-top:.25rem !important }
.mt-2 { margin-top:.5rem !important }
.mt-3 { margin-top:1rem !important }
.mt-4 { margin-top:1.5rem !important }
.mt-5 { margin-top:3rem !important }
.mb-0 { margin-bottom:0 !important }
.mb-1 { margin-bottom:.25rem !important }
.mb-2 { margin-bottom:.5rem !important }
.mb-3 { margin-bottom:1rem !important }
.mb-4 { margin-bottom:1.5rem !important }
.mb-5 { margin-bottom:3rem !important }
.ml-0 { margin-left:0 !important }
.ml-1 { margin-left:.25rem !important }
.ml-2 { margin-left:.5rem !important }
.ml-3 { margin-left:1rem !important }
.ml-4 { margin-left:1.5rem !important }
.ml-5 { margin-left:3rem !important }
.mr-0 { margin-right:0 !important }
.mr-1 { margin-right:.25rem !important }
.mr-2 { margin-right:.5rem !important }
.mr-3 { margin-right:1rem !important }
.mr-4 { margin-right:1.5rem !important }
.mr-5 { margin-right:3rem !important }
.pt-0 { padding-top:0 !important }
.pt-1 { padding-top:.25rem !important }
.pt-2 { padding-top:.5rem !important }
.pt-3 { padding-top:1rem !important }
.pt-4 { padding-top:1.5rem !important }
.pt-5 { padding-top:3rem !important }
.pb-0 { padding-bottom:0 !important }
.pb-1 { padding-bottom:.25rem !important }
.pb-2 { padding-bottom:.5rem !important }
.pb-3 { padding-bottom:1rem !important }
.pb-4 { padding-bottom:1.5rem !important }
.pb-5 { padding-bottom:3rem !important }
.pl-0 { padding-left:0 !important }
.pl-1 { padding-left:.25rem !important }
.pl-2 { padding-left:.5rem !important }
.pl-3 { padding-left:1rem !important }
.pl-4 { padding-left:1.5rem !important }
.pl-5 { padding-left:3rem !important }
.pr-0 { padding-right:0 !important }
.pr-1 { padding-right:.25rem !important }
.pr-2 { padding-right:.5rem !important }
.pr-3 { padding-right:1rem !important }
.pr-4 { padding-right:1.5rem !important }
.pr-5 { padding-right:3rem !important }

/* header */
header {
	display: flex;
	position: fixed;
	top: calc(0 + env(safe-area-inset-top));
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 12vw;
	min-height: 45px;
	max-height: 96px;
	margin: auto;
	padding: 0 2.5em;
	align-items: center;
	justify-content: center;
	background: #fff;
	z-index: 90;
}

header.specialheader {
	background: #FEF2EB;
}

header:before,
header:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	background: #fff;
	z-index: 91;
}
header:before {
	left: -5px;
}
header:after {
	right: -5px;
}

header .arrow_back {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0.75em;
	width: 1.5em;
	height: 1.5em;
	margin: auto;
	text-align: center;
}

header .arrow_back:before {
	content: "\f053";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	font-size: 150%;
	color: #9F9F9F;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 1em;
	pointer-events: none;
}

header .arrow_back a {
	display: block;
	width: 100%;
	height: 100%;
}

header h2 {
	font-size: 100%;
}

header h2 img {
	height: calc(12vw - 2px);
	min-height: 43px;
	max-height: 94px;
}

/* main */
main {
	position: relative;
	width: 100%;
	max-width: 800px;
	height: 100%;
	min-height: calc(100vh - 110px);
	margin: auto;
	padding: 48px 0 70px 0;
	word-break: break-all;
	box-shadow: 0 -5px 5px #ccc;
	inset: 0;
	box-sizing: border-box;
}
main:before,
main:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	background: #fff;
	z-index: 91;
}
main:before {
	left: -5px;
}
main:after {
	right: -5px;
}

.nologin main {
	padding-bottom: 1px;
}

main h3,
main > * {
	width: 88%;
	max-width: 480px;
	margin: 0 auto 1rem auto;
}

main h3 {
	margin-top: 1rem;
	text-align: center;
	font-size: 135%;
}

.nologin main h3 {
	font-size: 120%;
}

main form {
	display: block;
}

main p.errMsg {
	color: #e87888 !important;
}

main .description {
	margin: 0.25em auto 1em auto;
	color: #9F9F9F;
	font-size: 80%;
}

main ul.payments {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}

main ul.payments li {
	margin-left: 0;
	list-style: none;
}

main ul.payments li a {
	display: flex;
	min-height: 99px;
	padding: 0.5em;
	border-radius: 1em;
	color: #413B3B;
	font-size: 135%;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
	flex-direction: column;
	justify-content: center;
}

main ul.payments li.paidy a {
	font-size: 105%;
}

main ul.payments li img {
	max-width: 90%;
	vertical-align: middle;
}

/* common objects */

/* proclivity edit */
main .proclivityeditbox dt {
	position: relative;
	margin-top: 1em;
	padding: 0.7em;
	border: 2px solid #F4F4F4;
	background: #fff;
	border-radius: 0.5em;
	color: #F98071;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	cursor: pointer;
}

main .proclivityeditbox dt:before {
	content: "";
	display: inline-block;
	width: 1.35em;
	height: 1.35em;
	margin-right: 0.25em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	vertical-align: bottom;
}
main .proclivityeditbox dt.ln-1:before {
	background-image: url(../image/profile_detail/icon_proclivity1.png);
}
main .proclivityeditbox dt.ln-2:before {
	background-image: url(../image/profile_detail/icon_proclivity2.png);
}
main .proclivityeditbox dt.ln-3:before {
	background-image: url(../image/profile_detail/icon_proclivity3.png);
}
main .proclivityeditbox dt.ln-4:before {
	background-image: url(../image/profile_detail/icon_proclivity4.png);
}
main .proclivityeditbox dt.ln-5:before {
	background-image: url(../image/profile_detail/icon_proclivity5.png);
}

main .proclivityeditbox dt:after {
	content: "\f078";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0.5em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #F98071;
	transition: transform 0.3s;
	pointer-events: none;
}

main .proclivityeditbox dt.open {
	border-radius: 0.5em 0.5em 0 0;
}

main .proclivityeditbox dt.open:after {
	transform: rotate(180deg);
}

main .proclivityeditbox dd {
	padding: 1px 0.5em 1em 0.5em;
	background: #F3F3F3;
	border-radius: 0 0 0.5em 0.5em;
	color: #C4BABA;
	display: none;
}

main .proclivityeditbox dd h4 {
	margin: 1em 0 0.5em 0;
	color: #917e7e;
	text-align: center;
}

main .proclivityeditbox dd .lbl {
	display: block;
	margin-bottom: 1em;
	padding-left: 1em;
	font-size: 66%;
	font-weight: bold;
}

main .proclivityeditbox dd .bar {
	position: relative;
	width: 100%;
	height: 6px;
	margin-bottom: 2em;
	background: #C4BABA;
	border-radius: 0.5em;
}

main .proclivityeditbox dd .bar2 {
	margin-bottom: 3em;
}

main .proclivityeditbox dd input[type=range] {
	position: absolute;
	top: calc((var(--slider-thumb-height) - var(--slider-thumb-height-diff) - 6px) / 2 * -1);
	left: 0;
	width: 100%;
	height: calc((var(--slider-thumb-height) - var(--slider-thumb-height-diff)));
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	z-index: 2;
}

main .proclivityeditbox dd input[type=range]::-webkit-slider-thumb {
	width: var(--slider-thumb-width);
	height: var(--slider-thumb-height);
	border-radius: var(--slider-thumb-border-radius);
	background: var(--slider-thumb-background);
	border: var(--slider-thumb-border);
	appearance: var(--slider-thumb-appearance);
	-webkit-appearance: var(--slider-thumb-appearance);
}
main .proclivityeditbox dd .bar2 input[type=range]::-webkit-slider-thumb {
	background: var(--slider-thumb-background2);
}
main .proclivityeditbox dd input[type=range]::-moz-range-thumb {
	width: var(--slider-thumb-width);
	height: var(--slider-thumb-height);
	border-radius: var(--slider-thumb-border-radius);
	background: var(--slider-thumb-background);
	border: var(--slider-thumb-border);
	appearance: var(--slider-thumb-appearance);
	-webkit-appearance: var(--slider-thumb-appearance);
}
main .proclivityeditbox dd .bar2 input[type=range]::-moz-range-thumb {
	background: var(--slider-thumb-background2);
}
main .proclivityeditbox dd input[type=range]::-ms-thumb {
	width: var(--slider-thumb-width);
	height: var(--slider-thumb-height);
	border-radius: var(--slider-thumb-border-radius);
	background: var(--slider-thumb-background);
	border: var(--slider-thumb-border);
	appearance: var(--slider-thumb-appearance);
	-webkit-appearance: var(--slider-thumb-appearance);
}
main .proclivityeditbox dd .bar2 input[type=range]::-ms-thumb {
	background: var(--slider-thumb-background2);
}

main .proclivityeditbox dd .lbl1 {
	color: var(--slider-thumb-background);
}

main .proclivityeditbox dd .lbl2 {
	color: var(--slider-thumb-background2);
}

main .proclivityeditbox .labels {
	position: absolute;
	top: calc(var(--slider-thumb-height-diff) * -1);
	left: 0;
	width: 100%;
	padding-top: calc(var(--slider-thumb-height) / 2 + var(--slider-thumb-height-diff));
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}

main .proclivityeditbox .labels label {
	position: relative;
	display: block;
	width: calc((var(--slider-thumb-height) - var(--slider-thumb-height-diff)));
	text-align: center;
	cursor: pointer;
}

main .proclivityeditbox .labels label:before {
	content: "";
	display: block;
	position: absolute;
	top: calc((var(--slider-thumb-height) - var(--slider-thumb-height-diff) / 2 - var(--slider-thumb-height-diff) / 4) * -1);
	left: 0;
	width: calc(var(--slider-thumb-width) - var(--slider-thumb-height-diff));
	height: calc(var(--slider-thumb-height) - var(--slider-thumb-height-diff));
	background: #C4BABA;
	border-radius: var(--slider-thumb-border-radius);
	z-index: 1;
}

main .proclivityeditbox .labels label.act:after {
	content: "";
	display: block;
	position: absolute;
	top: calc((var(--slider-thumb-height) - var(--slider-thumb-height-diff) * 2 + 3px) * -1);
	left: -88vw;
	width: 88vw;
	height: 6px;
}

main .proclivityeditbox .bar1 .labels label.cur {
	color: var(--slider-thumb-background);
	font-weight: bold;
}
main .proclivityeditbox .bar1 .labels label.act:before {
	background: var(--slider-thumb-background);
}
main .proclivityeditbox .bar1 .labels label.act:after {
	background: var(--slider-thumb-background);
}
main .proclivityeditbox .bar2 .labels label.cur {
	color: var(--slider-thumb-background2);
	font-weight: bold;
}
main .proclivityeditbox .bar2 .labels label.act:before {
	background: var(--slider-thumb-background2);
}
main .proclivityeditbox .bar2 .labels label.act:after {
	background: var(--slider-thumb-background2);
}
/* proclivity edit end */

/* proclivity */
main .proclivitybox {
	padding: 0.5em;
	background: #fcfcfc;
}

main .proclivitybox .icons {
	display: flex;
	font-size: 75%;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

main .proclivitybox .icons .img {
	width: 3em;
}

main .proclivitybox .icons .img img {
	width: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
	aspect-ratio: 1 / 1;
}

main .proclivitybox .icons .txt1 {
	color: #fc766d;
}
main .proclivitybox .icons .img1 img {
	border: 1px solid #fc766d;
}
main .proclivitybox .icons .txt2 {
	color: #2589d0;
}
main .proclivitybox .icons .img2 img {
	border: 1px solid #2589d0;
}

main .proclivitybox .chart {
	position: relative;
	margin: 1em 0;
	padding: 1.25em 4em 0 4em;
}

main .proclivitybox .chart ul {
	font-size: 65%;
	color: #5a5555;
}

main .proclivitybox .chart li {
	position: absolute;
	display: flex;
	width: 6.5em;
	height: 2.5em;
	line-height: 1.25em;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
main .proclivitybox .chart li:nth-of-type(1) {
	top: -1em;
	left: 0;
	right: 0;
	margin: auto;
}
main .proclivitybox .chart li:nth-of-type(2) {
	top: 32%;
	right: 0;
}
main .proclivitybox .chart li:nth-of-type(3) {
	bottom: 0;
	right: 17.5%;
}
main .proclivitybox .chart li:nth-of-type(4) {
	bottom: 0;
	left: 12.5%;
}
main .proclivitybox .chart li:nth-of-type(5) {
	top: 32%;
	left: 2.5%;
}

main .proclivitybox .list_ttl {
	display: flex;
	font-size: 65%;
	color: #5a5555;
	justify-content: space-between;
}

main .proclivitybox .list_ttl .val1,
main .proclivitybox .list_ttl .val2 {
	padding: 0 0.25em;
}

main .proclivitybox .list_ttl .val1 {
	color: #F98071;
}
main .proclivitybox .list_ttl .val2 {
	color: #3EA5C6;
}

main .proclivitybox .list {
	font-size: 65%;
	color: #5a5555;
}

main .proclivitybox .list li {
	position: relative;
	display: grid;
	margin-bottom: 0.25em;
	grid-template-columns: 1fr 11.5em 1fr;
	align-items: center;
	box-sizing: border-box;
	z-index: 0;
}

main .proclivitybox .list li > span {
	display: block;
	line-height: 1.5;
}

main .proclivitybox .list .ttl {
	text-align: center;
}

main .proclivitybox .list .val1,
main .proclivitybox .list .val2 {
	position: relative;
	height: 1.5em;
	font-weight: bold;
	line-height: 1.5;
}

main .proclivitybox .list .val1 {
	text-align: right;
}

main .proclivitybox .list .v1,
main .proclivitybox .list .v2,
main .proclivitybox .list .v3,
main .proclivitybox .list .v4,
main .proclivitybox .list .v5 {
	color: #fff;
}

main .proclivitybox .list .val1.v0,
main .proclivitybox .list .val1.v1 {
	padding-right: calc(10% - 0.3em);
}
main .proclivitybox .list .val1.v2 {
	padding-right: calc(20% - 0.3em);
}
main .proclivitybox .list .val1.v3 {
	padding-right: calc(30% - 0.3em);
}
main .proclivitybox .list .val1.v4 {
	padding-right: calc(40% - 0.3em);
}
main .proclivitybox .list .val1.v5 {
	padding-right: calc(50% - 0.3em);
}
main .proclivitybox .list .val2.v0,
main .proclivitybox .list .val2.v1 {
	padding-left: calc(10% - 0.3em);
}
main .proclivitybox .list .val2.v2 {
	padding-left: calc(20% - 0.3em);
}
main .proclivitybox .list .val2.v3 {
	padding-left: calc(30% - 0.3em);
}
main .proclivitybox .list .val2.v4 {
	padding-left: calc(40% - 0.3em);
}
main .proclivitybox .list .val2.v5 {
	padding-left: calc(50% - 0.3em);
}

main .proclivitybox .list .val1:before,
main .proclivitybox .list .val2:before {
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	z-index: -1;
}
main .proclivitybox .list .val1:before {
	right: 0;
	background: #F98071;
	border-radius: 0.75em;
}
main .proclivitybox .list .val2:before {
	left: 0;
	background: #3EA5C6;
	border-radius: 0.75em;
}
main .proclivitybox .list .val1.v1:before,
main .proclivitybox .list .val2.v1:before {
	width: calc(100% / 5);
}
main .proclivitybox .list .val1.v2:before,
main .proclivitybox .list .val2.v2:before {
	width: calc(100% / 5 * 2);
}
main .proclivitybox .list .val1.v3:before,
main .proclivitybox .list .val2.v3:before {
	width: calc(100% / 5 * 3);
}
main .proclivitybox .list .val1.v4:before,
main .proclivitybox .list .val2.v4:before {
	width: calc(100% / 5 * 4);
}
main .proclivitybox .list .val1.v5:before,
main .proclivitybox .list .val2.v5:before {
	width: 100%;
}
/* proclivity end */

/* fetish, association */
main .fetishbox dt,
main .associationbox dt {
	margin-top: 1em;
	background: #FEF2EB;
	border-radius: 0.5em 0.5em 0 0;
}

main .fetishbox dd,
main .associationbox dd {
	padding: 1px;
	border: 1px solid #f4f4f4;
}

main .fetishbox .select_wrap,
main .associationbox .select_wrap {
	margin: 0;
	border: 0;
}

main .fetishbox select,
main .associationbox select {
	padding: 0.5em 0.25em;
	color: #5f5c5c;
	text-align: center;
}

main .fetishbox textarea {
	width: 100%;
	height: 4.5em;
	padding: 0.5em;
	box-sizing: border-box;
}

main .associationbox input[type=text] {
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
}
/* fetish end */

/* tag */
main .tagsbox input[type=checkbox] {
	display: none;
}

main .tagsbox {
	display: grid;
	max-width: 320px;
	margin: auto;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

main .tagsbox label {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 1em 0;
	background: #fff;
	border: 1px solid #E8E6EA;
	border-radius: 1em;
	justify-content: center;
	align-items: center;
	font-size: 85%;
	line-height: 1.1;
	box-sizing: border-box;
	cursor: pointer;
}

main .tagsbox input[type="checkbox"]:checked + label {
	background: #FA574D;
	border-color: #FA574D;
	color: #fff;
	font-weight: bold;
	box-shadow: 0px 4px 4px 0px #FA574D69;
}
/* tags */

/* aboutme */
main .aboutmebox {
	padding: 0.5em;
	background: #FFEADE;
	border-radius: 1em;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

main .aboutmebox li {
	display: flex;
	margin: 0.5em 0;
	padding: 0.5em 0;
	justify-content: space-between;
	align-items: center;
	border-radius: 0.75em;
	box-sizing: border-box;
}

main .aboutmebox li:nth-of-type(2n+1) {
	background: #FEF2EB;
}

main .aboutmebox .q {
	display: flex;
	width: 28%;
	padding: 0 3px;
	align-items: center;
	justify-content: center;
}

main .aboutmebox .q img {
	width: 100%;
}

main .aboutmebox .a input[type="radio"] {
	display: none;
}

main .aboutmebox .a {
	display: grid;
	width: 44%;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
	gap: 4%;
}

main .aboutmebox .a label {
	cursor: pointer;
}

main .aboutmebox .a span {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
	background: #fff;
	border-radius: 50%;
}

main .aboutmebox .a1 > span:nth-of-type(5n+1):after,
main .aboutmebox .a2 > span:nth-of-type(5n+2):after,
main .aboutmebox .a3 > span:nth-of-type(5n+3):after,
main .aboutmebox .a4 > span:nth-of-type(5n+4):after,
main .aboutmebox .a5 > span:nth-of-type(5n+5):after,
main .aboutmebox .a input[type="radio"]:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 100%;
	background: #F87F70;
	border-radius: 50%;
	box-shadow: 0px 0px 3.5px 0px #F87F70;
}
/* aboutme end */

/* bgcodes */
main .bgCodes label {
	display: block;
	margin-bottom: 0.5em;
	font-size: 115%;
	color: #fff;
	text-shadow: -1px -1px 1px #888, -1px 1px 1px #888, 1px -1px 1px #888, 1px 1px 1px #888;
	cursor: pointer;
}

main .bgCodes input[type=radio] {
	display: none;
}

main .bgCodes label span {
	position: relative;
	display: block;
	min-height: 4.5em;
	padding: 0.5em 1em;
}

main .bgCodes label span:after {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 2px solid transparent;
	box-shadow: -1px -1px 1px transparent, -1px 1px 1px transparent, 1px -1px 1px transparent, 1px 1px 1px transparent;
}

main .bgCodes label input:checked + span:after {
	border: 2px solid blue;
	box-shadow: -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, 1px 1px 1px #fff;
}
/* bgcodes end */

/* board */
main .boardbox {
	width: 95%;
	margin-bottom: 4em;
}

main .boardbox .item {
	margin-bottom: 1em;
}

main .boardbox .item {
	position: relative;
	display: grid;
	background: #fff;
	border-radius: 1em;
	box-shadow: 0px 0px 6px 0px rgba(95, 92, 92, 0.25);
	grid-template-columns: 1fr 1.5fr;
}

main .boardbox .item .icon {
	position: absolute;
	top: -0.25em;
	left: 0.25em;
	width: 3em;
	z-index: 1;
}

main .boardbox .item > a {
	display: block;
}

main .boardbox .end a,
main .boardbox a.closed {
	cursor: default;
}

main .boardbox .item .photo {
	position: relative;
	border-radius: 1em 0 0 1em;
}

main .boardbox .item .photo .img {
	width: 100%;
	aspect-ratio: 148 / 214;
}
main .boardbox .item .photo .img img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1em 0 0 1em;
	object-fit: cover;
	object-position: center center;
}

main .boardbox .item .photo .name {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0.25em;
	font-size: 85%;
	color: #fff;
	text-shadow: 0 0 3px #5F5C5C;
	box-sizing: border-box;
}

main .boardbox .item .txt {
	position: relative;
	aspect-ratio: 280 / 270;
	overflow-y: scroll;
}

main .boardbox .item .txt h3 {
	display: flex;
	height: 3em;
	margin: 0 0.75em;
	font-size: 85%;
	color: #E87888;
	text-align: left;
	align-items: center;
}
main .boardbox .item2 .txt h3,
main .boardbox .item3 .txt h3 {
	height: 2em;
}

main .boardbox .item .tags {
	display: flex;
	margin: 0 0.25em;
	padding: 0 1em;
	font-size: 70%;
	gap: 0.45em;
	justify-content: start;
}
main .boardbox .item2 .tags {
	flex-wrap: wrap;
}

main .boardbox .item .tags li {
	padding: 0 0.25em;
	background: #DADADA;
	border-radius: 1em;
	color: #717171;
}
main .boardbox .item2 .tags li {
	background: #E87888;
	color: #fff;
}
main .boardbox .item3 .tags li:first-of-type {
	background: #E87888;
	color: #fff;
}

main .boardbox .item .description {
	position: relative;
	margin: 0.5em 0.5em 0 0.5em;
	padding: 0.5em;
	height: 7.25em;
	background: #f0f0f0;
	border-radius: 1em;
	color: #5F5C5C;
	line-height: 1.5;
	overflow: hidden;
}
main .boardbox .item3 .description,
main .boardbox .item2 .description {
	height: 10.5em;
}

main .boardbox .item .description:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.5em;
	background: #f0f0f0;
}

main .boardbox .open .description {
	height: auto;
	min-height: 6em;
}

main .boardbox .item .more {
	position: absolute;
	display: none;
	bottom: 0.5em;
	right: 0.75em;
	width: 2em;
	height: 2em;
	background: #f0f0f0;
	font-size: 70%;
	font-weight: 300;
	color: #5F5C5C;
	text-align: right;
	z-index: 1;
}


main .boardbox .item .hasMore .more {
	display: flex;
	background: #f0f0f0;
	color: transparent;
	align-items: center;
	justify-content: center;
}

main .boardbox .item .hasMore .more:after {
	content: "...";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	font-weight: 900;
	color: #5F5C5C;
	line-height: 1;
}

main .boardbox .item .period {
	margin-top: 0.25em;
	padding: 0 0.5em 0.5em 0;
	font-size: 70%;
	color: #5F5C5C;
	text-align: right;
}

/* board end */

/* maintenance */
main.maintenance {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1px 0;
	height: 100vh;
	background: linear-gradient(349.37deg, #FFDEDE 2.69%, #FFE0C9 28.46%, #FFEBE2 56.89%, #FFFAFA 97.65%);
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 150%;
	color: #93827A;
	text-decoration: none;
	box-sizing: border-box;
}

main.maintenance > * {
	margin : 0;
}
main.maintenance > h3 {
	margin-bottom: 1rem;
}

/* sent */
main.sent {
	padding-bottom: 75px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

main.sent h3 {
	font-size: 125%;
	font-weight: 500;
}

main.sent form {
	width: 88%;
	max-width: 480px;
	margin: 0 auto 1rem auto;
	padding: 1.25em 10.5% 0 10.5%;
}

main.sent .description {
	font-size: 75%;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

main.sent .btns {
	margin-top: 5em;
}

/* ready */
main.ready {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

main.ready > * {
	width: 88%;
	max-width: 480px;
}

main.ready h3 {
	color: #dadada;
	margin-bottom: 1em;
}

main.ready h3 img {
	width: 8rem;
}

main.ready .help {
	width: 17.5rem;
	margin: -5.5rem auto 4rem auto;
}

main.ready .help .btnQuestion {
	margin: 0 0 0 auto;
	z-index: 1;
}

main.ready a.btnHint,
main.unready a.btnHint {
	position: relative;
	display: inline-block;
	width: 19.5rem;
	max-width: 100%;
	margin-top: 0.5em;
	padding-right: 1em;
	border: 1px solid #F87F70;
	background: #fee4e7;
	border-radius: 1em;
	line-height: 3;
	font-size: 95%;
	color: #F87F70;
	text-align: center;
	box-sizing: border-box;
}
main.unready a.btnHint {
	margin-top: 1.5em;
	color: #5F5C5C;
	border-color: #5F5C5C;
	background: #fff;
}

main.ready a.btnHint:after,
main.unready a.btnHint:after {
	content: "\f054";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0.5em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

/* special */
main.special {
	background: #FEF2EB;
}

main.special > h3 {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 29.8vw;
	max-height: 238px;
	margin: 0;
}

main.special > h3:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: url(../image/message/impressive_bg.jpg) top center no-repeat;
	background-size: cover;
	aspect-ratio: 800 / 360;
	z-index: 1;
}

main.special > form {
	position: relative;
	z-index: 2;
}

main.special .box {
	margin-bottom: 1em;
	padding: 1em;
	background: #fff;
	border-radius: 1em;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

main.special .box h3 {
	width: 100%;
	font-size: 120%;
}

main.special .box p {
	margin-bottom: 1em;
	font-size: 85%;
	font-weight: bold;
}


main.special .errMsg {
	margin: 0.5em auto;
	font-size: 85%;
}

main.special .btns {
	margin: 2em auto;
}

/* profile */
main.profile .frame {
	position: fixed;
	height: calc(100% - 180px);
	overflow-y: scroll;
	border-radius: 1em;
	width: 96%;
	margin: 0 auto;
	padding: 0;
	left: 0;
	right: 0;
	background: #FEF2EB;
}
main.profile .frame > div {
	padding: 1px 1rem 1rem 1rem;
}

main.profile h3 {
	margin: 0 0 0.75em 0;
	padding: 0;
	font-size: 85%;
	font-weight: 350;
	text-align: left;
}

main.profile .frame .profile_image {
	position: relative;
	padding: 0;
	background: transparent;
}

main.profile .frame .profile_image .icon {
	position: absolute;
	top: 0;
	left: 0.5em;
	width: 20vw;
	max-width: 100px;
	aspect-ratio: 76 / 88;
	z-index: 1;
}

main.profile .frame .profile_image .icon img {
	width: 100%;
}

main.profile .profile_image .img {
	border-radius: 1em 1em 0 0;
	overflow: hidden;
}

main.profile .profile_image .img img {
	width: 100%;
	min-height: 8rem;
	max-height: calc(100vh - 185px);
	object-fit: cover;
}

main.profile .profile_image .name {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: calc(55% - 1rem);
	min-width: 10rem;
	margin: 0;
	font-size: 175%;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 3px #5F5C5C;
	overflow: hidden;
}

main.profile .profile_image .icons {
	position: absolute;
	display: grid;
	right: 1rem;
	bottom: 1rem;
	width: calc(45% - 1.5rem);
	max-width: calc(100% - 2rem - 11rem);
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

main.profile .profile_image .icons a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0.5em;
	overflow: hidden;
}

main.profile .letter {
	padding-top: 1rem;
}

main.profile .letter .box {
	padding: 0.5em 1em;
	background: #FFFFFF;
	border-radius: 1em;
	box-shadow: 0px 0px 9px 0px rgba(44, 44, 44, 0.25);
}

main.profile .letter h3 {
	margin-bottom: 0;
	color: #E87888;
	font-weight: bold;
}

main.profile .letter p {
	color: #8D8D8D;
	font-size: 85%;
	font-weight: 350;
}

main.profile .infos {
	padding-top: 1rem;
}
main.profile .letter + .infos {
	padding-top: 0;
}

main.profile .infos ul {
	display: block;
}

main.profile .infos li {
	display: inline-block;
	margin: 0 0.25em 0.5em 0;
	padding: 0.35em 0.5em;
	background: #FFD7C0;
	border-radius: 1em;
	font-weight: 500;
	line-height: 1.1;
}

main.profile .text > div {
	font-size: 85%;
	font-weight: 500;
}

main.profile .frame .proclivity {
	padding: 1px 0.5rem 1rem 0.5rem;
}

main.profile .score dl {
	color: var(--color-secondary);
	font-size: 90%;
}

main.profile .score dt {
	margin-top: 0.5em;
	padding: 1.5em 1em 0 1em;
}
main.profile .score dt:first-child {
	margin-top: 0;
	padding-top: 0;
}

main.profile .score dt .num1,
main.profile .score dt .num2,
main.profile .score dt .num3,
main.profile .score dt .num4,
main.profile .score dt .num5 {
	margin-left: 0.75em;
	font-size: 1rem;
	font-weight: bold;
}
main.profile .score dt .num1 {
	color: #48C9A8;
}
main.profile .score dt .num2 {
	color: #FFA452;
}
main.profile .score dt .num3 {
	color: #39C9EE;
}
main.profile .score dt .num4 {
	color: var(--color-key);
}
main.profile .score dt .num5 {
	color: #7F5EBB;
}

main.profile .score dd {
	position: relative;
	padding: 0.75em 1em 1em 1em;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0.5em;
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

main.profile .score .bar {
	width: calc(100% - 6em);
	height: 0.85em;
	margin-left: 2.5em;
	border-radius: 0.425em;
	line-height: 1;
}
main.profile .score .bar span {
	display: block;
	height: 100%;
	border-radius: 0.425em;
}
main.profile .score .bar1 .bar {
	background: #D0F1E8;
}
main.profile .score .bar1 .bar span {
	background: #48C9A8;
	box-shadow: 0px 0px 4px #48C9A8;
}
main.profile .score .bar2 .bar {
	background: #FFE7D3;
}
main.profile .score .bar2 .bar span {
	background: #FFA452;
	box-shadow: 0px 0px 4px #FFA452;
}
main.profile .score .bar3 .bar {
	background: #CCF1FB;
}
main.profile .score .bar3 .bar span {
	background: #39C9EE;
	box-shadow: 0px 0px 4px #39C9EE;
}
main.profile .score .bar4 .bar {
	background: #FFD8DA;
}
main.profile .score .bar4 .bar span {
	background: var(--color-key);
	box-shadow: 0px 0px 4px var(--color-key);
}
main.profile .score .bar5 .bar {
	background: #DED6ED;
}
main.profile .score .bar5 .bar span {
	background: #7F5EBB;
	box-shadow: 0px 0px 4px #7F5EBB;
}
main.profile .score .bar-0 span { width: 2%; }
main.profile .score .bar-1 span { width: 10%; }
main.profile .score .bar-2 span { width: 20%; }
main.profile .score .bar-3 span { width: 30%; }
main.profile .score .bar-4 span { width: 40%; }
main.profile .score .bar-5 span { width: 50%; }
main.profile .score .bar-6 span { width: 60%; }
main.profile .score .bar-7 span { width: 70%; }
main.profile .score .bar-8 span { width: 80%; }
main.profile .score .bar-9 span { width: 90%; }
main.profile .score .bar-10 span { width: 100%; }

main.profile .score .lbl {
	display: flex;
	position: absolute;
	bottom: 1em;
	left: 1em;
	width: calc(100% - 2em);
	color: var(--color-tertiary);
	font-weight: bold;
	line-height: 0.85em;
	justify-content: space-between;
}

main.profile .proclivity h3 {
	padding-left: 0.5rem;
}

main.profile .proclivitybox {
	border-radius: 1em;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

main.profile .proclivitybox h3 {
	width: 100%;
	padding: 0;
	color: #5a5555;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

main.profile .trend h3 .btnQuestion {
	display: inline-block;
	width: 1em;
	height: 1em;
}

main.profile .trend .box,
.trendHelpBox .box {
	display: grid;
	font-size: 60%;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	grid-template-columns: 1fr 1fr 1fr;
}

main.profile .trend .box img,
.trendHelpBox .box img {
	width: 80%;
}

main.profile .trend .box p span {
	font-size: 0.75rem;
}

main.profile .trend .s_talk,
.trendHelpBox .s_talk {
	color: #92C36C;
}
main.profile .trend .s_freq,
.trendHelpBox .s_freq {
	color: #F58A8C;
}
main.profile .trend .s_9_12,
.trendHelpBox .s_9_12 {
	color: #fbc10b;
}
main.profile .trend .s_13_16,
.trendHelpBox .s_13_16 {
	color: #ff914d;
}
main.profile .trend .s_17_20,
.trendHelpBox .s_17_20 {
	color: #994133;
}
main.profile .trend .s_21_24,
.trendHelpBox .s_21_24 {
	color: #013F92;
}

main.profile .trend .unopen {
	position: relative;
	display: block;
}

main.profile .trend .unopen:after {
	content: "ポイントを消費して閲覧する";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	margin: auto;
	color: #fff;
	font-size: 85%;
	text-shadow: 0 0 3px #000, 0 0 4px #000, 0 0 5px #000;
	text-align: center;
}

main.profile .frame .aboutme {
	padding: 1px 0.5rem 1rem 0.5rem;
}

main.profile .aboutme h3 {
	padding-left: 0.5rem;
}

main.profile .frame .profiles {
	padding: 1px 0.5rem;
}

main.profile .profiles > .box {
	padding: 0.5em;
	background: #FFEADE;
	border-radius: 1em;
}

main.profile .profiles dt {
	display: inline-block;
	margin: 0;
	padding: 0.35em 0.5em;
	background: #FFD7C0;
	border-radius: 1em;
	font-size: 85%;
	font-weight: 350;
	line-height: 1.1;
}

main.profile .profiles dd {
	padding: 0.25em 0.5em;
	font-size: 85%;
	font-weight: 500;
}

main.profile .frame .sub_images {
	padding: 1.25rem 2px 1px 2px;
}

main.profile .sub_images .img {
	margin-bottom: 1.25rem;
	border-radius: 1em;
	overflow: hidden;
}

main.profile .sub_images .img img {
	width: 100%;
}

main.profile .sub_images h3:first-of-type {
	margin-top: 0;
}

main.profile .sub_images .q,
main.profile .sub_images .a {
	width: 100%;
	padding: 0 1rem;
}

main.profile .sub_images .q {
	margin: 1.25rem 0 0.35rem 0;
	font-size: 1rem;
}

main.profile .sub_images .a {
	margin-bottom: 1.25rem;
	font-size: 105%;
	font-weight: 500;
}

main.profile + .recommendBtns {
	position: fixed;
	display: flex;
	left: 0;
	right: 0;
	bottom: 70px;
	width: 100%;
	max-width: 480px;
	margin: auto;
	padding: 1rem 1rem 0 1rem;
	background: transparent;
	flex-wrap: wrap;
	gap: 1em;
}

main.profile + .recommendBtns a.btn,
main.profile + .recommendBtns a.btn2 {
	width: calc(50% - 1em);
	font-size: 85%;
}

main.profile + .recommendBtns a.btn {
	background: #fff;
	color: #ED7979;
}

main.profile + .recommendBtns a.btn2 {
	background: #679BFF;
	color: #fff;
}

main.profile + .recommendBtns a.btn:before {
	content: "\f004";
	display: inline-block;
	font-size: 150%;
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	color: #fe5b51;
	vertical-align: top;
}

main.profile + .recommendBtns a.btn2:before {
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../image/profile_detail/icon_skip.png) center no-repeat;
	background-size: contain;
	vertical-align: middle;
}

main.profile + .recommendBtns form {
	width: 100%;
	height: 1px;
}

.confirmBox,
.alertBox,
.loadingBox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 100vh;
	margin: auto;
	background: rgba(0, 0, 0, 0.75);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.confirmBox > div,
.alertBox > div,
.loadingBox > div {
	width: 92%;
	max-width: 480px;
	height: fit-content;
	padding: 2rem 1rem;
	background: #fff;
	border-radius: 2em;
}
.loadingBox > div {
	background: transparent;
	text-align: center;
}

.confirmBox h3,
.alertBox h3 {
	position: relative;
	margin-bottom: 1rem;
	text-align: center;
}

.alertBox h3 {
	color: #fab005;
	font-size: 150%;
	text-align: center;
}

.confirmBox p,
.alertBox p {
	font-size: 85%;
	line-height: 1.25;
	margin-bottom: 1em;
	text-align: center;
}

.confirmBox p small {
	font-size: 85%;
	color: #F87F70;
}

.confirmBox .btns,
.alertBox .btns {
	display: flex;
}

.confirmBox .btns a.btn,
.confirmBox .btns a.btn3,
.alertBox .btns a.btn3 {
	width: 7.5rem;
}

.confirmBox .closeBtn,
.alertBox .closeBtn {
	width: 1em;
	height: 1em;
	margin: 1rem 0 2rem 0;
	font-size: 250%;
	text-align: center;
}

.confirmBox .closeBtn a,
.alertBox .closeBtn a {
	color: #fff;
}

.verifiedBox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 100vh;
	margin: auto;
	background: #fff;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.verifiedBox header h2 {
	position: relative;
}

.verifiedBox header h2:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 4.25em);
	width: 0.5em;
	height: 1.25em;
	margin: auto;
	background: #05B8D9;
}

.verifiedBox > div {
	width: calc(100% - 2px);
	height: calc(100vh - 110px);
	margin: 0 auto;
	padding: 45px 0 45px 0;
	background: #fff;
	word-break: break-all;
	overflow-y: scroll;
	box-sizing: border-box;
}

.verifiedBox .dates {
	display: grid;
	width: 13em;
	margin: 1em auto;
	font-weight: bold;
	grid-template-columns: 1fr 1fr;
}

.verifiedBox .dates dt {
	text-align: right;
}

.verifiedBox .list {
	margin: 0 1em;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
}

.verifiedBox .list li {
	padding: 0.75em;
	line-height: 2;
}

.verifiedBox .list li:nth-of-type(2n+2) {
	background: #F1F1F1;
}

.verifiedBox .list .ttl {
	font-weight: bold;
}

.verifiedBox .list .ok,
.verifiedBox .list .ng,
.verifiedBox .list .pass {
	float: right;
	display: block;
	width: 6.5em;
	text-align: center;
}
.verifiedBox .list .ok {
	background: #DAF9FE;
	color: #05B8D9;
}
.verifiedBox .list .ng {
	background: #FFDADA;
	color: #F13535;
}
.verifiedBox .list .pass {
	color: #5f5c5c;
	font-weight: bold;
	text-align: right;
}

.verifiedBox .description {
	margin: 1em 1.5em;
	font-size: 75%;
	font-weight: bold;
}

.trendHelpBox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 100vh;
	margin: auto;
	background: rgba(0, 0, 0, 0.75);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.trendHelpBox .closeBtn {
	width: 1em;
	height: 1em;
	margin: 1rem 0 2rem 0;
	font-size: 250%;
	text-align: center;
}

.trendHelpBox .closeBtn a {
	color: #fff;
}

.trendHelpBox > div {
	width: 92%;
	max-width: 480px;
	height: fit-content;
	padding: 2rem 1rem;
	background: #fff;
	border-radius: 2em;
}

.trendHelpBox h3 {
	position: relative;
	margin-bottom: 1rem;
	text-align: center;
}

.trendHelpBox h3 a {
	position: absolute;
	top: -1em;
	right: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	font-size: 1rem;
	line-height: 1;
	text-align: center;
	color: #888;
	text-decoration: none;
}

.trendHelpBox .box {
	margin-bottom: 0.5em;
}

.trendHelpBox .box2 p {
	margin-bottom: 1em;
	padding: 0 0 0 1em;
	font-size: 70%;
	font-weight: 500;
}

.fuki {
	position: fixed;
	width: 8em;
	height: 2.5em;
	max-width: 800px;
	margin: auto;
}

.fuki span {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	width: 12em;
	margin: auto;
	padding: 0.5em;
	background: #fff;
	border: 1px solid #000;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-radius: 1em;
	font-size: 60%;
	text-align: center;
}
.fuki span.u {
	top: 0.75em;
}
.fuki span.d {
	bottom: 0.75em;
}

.fuki span:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	width: 2em;
	height: 0.75em;
	margin: auto;
	background: #fff;
	z-index: 2;
}
.fuki span.u:before {
	bottom: calc(100% - 0.75em);
}
.fuki span.d:before {
	top: calc(100% - 0.75em);
}

.fuki span:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	background: #fff;
	border: 1px solid #000;
	border-right-width: 3px;
	box-sizing: border-box;
	transform: rotate(45deg);
	z-index: 1;
}
.fuki span.u:after {
	bottom: calc(100% - 0.5em);
}
.fuki span.d:after {
	top: calc(100% - 0.5em);
}

/* container */
.animation-container {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
.kyun-container:before,
.pien-container:before,
.matching-container:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: -1;
}
.kyun-container:before {
	background: linear-gradient(165.11deg, #FF8181 6.55%, #FF0000 98.04%);
}
.pien-container:before {
	background: linear-gradient(165.11deg, #A9D5FF 6.55%, #5484FF 98.04%);
}
.matching-container::before {
	background: linear-gradient(165.11deg, #FFF281 6.55%, #FF9900 98.04%);
}
.animation-container img {
	width: auto;
	height: 128px;
	margin-bottom: 20px;
}
.animation-container p {
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	color: #fff;
}

.banner-container {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 100vh;
	margin: auto;
	background: rgba(0, 0, 0, 0.8);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 998;
}

.banner-container .closeBtn {
	width: 1em;
	height: 1em;
	margin: 0.5rem 0 2rem 0;
	font-size: 250%;
	text-align: center;
	line-height: 1;
}

.banner-container .closeBtn a {
	color: #fff;
}

.banner-container > div {
	width: calc(100% - 2rem);
	max-width: 480px;
	height: fit-content;
	margin-top: 1rem;
	padding: 1rem 0.5rem;
	overflow-y: scroll;
}

.banner-container img {
	width: auto;
	height: auto;
}

.point-container {
	position: fixed;
	display: none;
	top: auto;
	bottom: 50px;
	left: 0;
	right: 0;
	width: calc(100% - 20px);
	max-width: 790px;
	height: 6.5rem;
	margin: 10px auto;
	background: linear-gradient(#eee, #fff 30%, #eee 60%, #e0e0e0);
	border-radius: 1rem;
	box-shadow: 0 0 5px #888;
	z-index: 999;
}

.point-container h2 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.point-container p {
	position: relative;
	width: 4rem;
	height: 4rem;
	padding-top: 1.75rem;
	background: url(../image/icon_daily_get.png) center center no-repeat;
	background-size: contain;
	font-size: 1rem;
	line-height: 2rem;
}

.point-container p:before,
.point-container p:after {
	content: "\f141";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1em;
	height: 1em;
	margin: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #ccc;
	font-size: 2rem;
}
.point-container p:before {
	left: -1.25em;
}
.point-container p:after {
	right: -1.25em;
}

/* footer */
footer {
	display: flex;
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 800px;
	height: 70px;
	margin: auto;
	text-align: center;
	background: #fff linear-gradient(rgba(246, 247, 249, 0) 0%, rgb(246, 247, 249) 100%);
	justify-content: center;
	align-items: center;
	z-index: 100;
}
footer:before,
footer:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	background: #fff;
	z-index: 91;
}
footer:before {
	left: -5px;
}
footer:after {
	right: -5px;
}

footer .container {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	max-width: 800px;
	width: 100%;
}

footer .container ul {
	display: flex;
	justify-content: space-between;
	width: 72%;
	height: 100%;
	margin: 0 auto 32px auto;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

footer .container li {
	position: relative;
	width: 25%;
	height: 100%;
}

footer .container li.badge-1:after,
footer .container li.badge-2:after,
footer .container li.badge-3:after,
footer .container li.badge-4:after,
footer .container li.badge-5:after,
footer .container li.badge-6:after,
footer .container li.badge-7:after,
footer .container li.badge-8:after,
footer .container li.badge-9:after,
footer .container li.badge-more:after {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: calc(1.25em + 1px);
	height: calc(1.25em + 1px);
	background-color: #FF0000;
	border-radius: 100px;
	color: #fff;
	font-size: 0.65rem;
	line-height: 1.25em; 
	transform: translate(50%, -50%);
}

footer .container li.badge-1:after { content: "1"; }
footer .container li.badge-2:after { content: "2"; }
footer .container li.badge-3:after { content: "3"; }
footer .container li.badge-4:after { content: "4"; }
footer .container li.badge-5:after { content: "5"; }
footer .container li.badge-6:after { content: "6"; }
footer .container li.badge-7:after { content: "7"; }
footer .container li.badge-8:after { content: "8"; }
footer .container li.badge-9:after { content: "9"; }
footer .container li.badge-more:after {content: "9+"; }

@media (max-width: 810px) {
main {
	overflow: hidden;
}
main.profile .frame {
	height: calc(100% - 120px);
}
}

@media (min-width: 481px) {
.sp {
	display: none;
}
main {
	padding: 96px 0 90px 0;
}
footer .container ul {
	padding: 8px 0;
}
}

@media (max-width: 480px) {
.no-sp {
	display: none;
}

main {
	min-height: calc(100vh - 70px);
}

.trendHelpBox > div {
	max-width: 320px;
}

footer .container ul {
	width: 88%;
	padding: 0.5rem 0 1rem 0;
}

}

@media all and (display-mode: standalone) {
main {
	min-height: calc(100vh + env(safe-area-inset-top));
}
}

/* parts */

.input_wrap,
.textarea_wrap,
.select_wrap,
.radio_wrap,
.checkbox_wrap,
.date_wrap {
	position: relative;
	display: block;
	width: 100%;
	margin: 2em auto 2.5em auto;
	border-bottom: 1px solid #C4BABA;
}

.textarea_wrap {
	padding-top: 1em;
	border-bottom: 0;
}

.radio_wrap {
	border-bottom: 0;
}

.checkbox_wrap {
	margin: 0 auto;
	border-bottom: 0;
}

.textarea_wrap textarea {
	width: 100%;
	height: 6em;
	border: 1px solid #C4BABA;
	border-radius: 0.75em;
}

.input_wrap label,
.textarea_wrap label {
	position: absolute;
	top: -1.25em;
	left: 0;
	bottom: auto;
	font-size: 66%;
	line-height: 1em;
	color: #C4BABA;
	font-weight: bold;
	opacity: 0;
}

.textarea_wrap label {
	top: -0.125em;
}

.input_wrap input:disabled ~ label,
.input_wrap input:valid ~ label,
.textarea_wrap textarea:valid ~ label {
	opacity: 1;
}

.select_wrap > label {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.25em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	color: #D9D9D9;
	font-weight: bold;
	pointer-events: none;
}

.select_wrap select:valid ~ label {
	top: -1.25em;
	left: 0;
	bottom: auto;
	font-size: 66%;
	color: #C4BABA;
}

.select_wrap select:valid ~ label .nottl {
	display: none;
}

.select_wrap::after {
	content: "\f078";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0.25em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #C4BABA;
	pointer-events: none;
}

.radio_wrap input[type=radio] {
	display: none;
}

.radio_wrap label {
	display: inline-flex;
	width: calc(50% - 1em);
	height: 2.25em;
	border: 1px solid #D4D4D4;
	border-radius: 0.75em;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: #C0C0C0;
	font-weight: bold;
	line-height: 2.25em;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
}

.radio_wrap input[type=radio]:first-of-type + label {
	margin-right: 1.5em;
}

.radio_wrap input[type=radio]:checked + label {
	background: linear-gradient(90deg, #FF4646 0%, #FF8181 105.63%);
	color: #FFFFFF;
	border: 0;
}

.checkbox_wrap input[type=checkbox] {
	display: none;
}

.checkbox_wrap input[type=checkbox] + label {
	display: block;
	position: relative;
	padding-left: 1.5rem;
	cursor: pointer;
}

.checkbox_wrap input[type=checkbox] + label:before {
	content: "\f0c8";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	font-family: "Font Awesome 5 Free";
	font-size: 1.25rem;
	font-weight: normal;
	color: #ababab;
}
.checkbox_wrap input[type=checkbox]:checked + label:before {
	content: "\f14a";
	color: #F87F70;
	font-weight: 900;
}

.input_wrap .errMsg,
.textarea_wrap .errMsg,
.select_wrap .errMsg,
.radio_wrap .errMsg,
.date_wrap .errMsg {
	position: absolute;
	top: 100%;
	width: 100%;
	border-top: 1px solid #e87888;
	font-size: 60%;
}

.textarea_wrap .errMsg,
.radio_wrap .errMsg {
	border-top: 0;
}

.date_wrap > *:first-child {
	margin: 0;
	border-bottom: 0;
	width: 33%;
}
.date_wrap > *:nth-child(2) {
	position: absolute;
	top: 0;
	left: 33.5%;
	width: 33%;
	margin: 0;
}
.date_wrap > *:nth-child(3) {
	position: absolute;
	top: 0;
	left: 67%;
	width: 33%;
	margin: 0;
}

.upload_wrap {
	position: relative;
	display: block;
	max-width: 500px;
	width: 100%;
	margin: 1em auto;
	padding: 0.5em;
	background-color: #F0F2F4;
	border-radius: 0.5em;
	aspect-ratio: 16 / 9;
	z-index: 1;
	cursor: pointer;
}

.upload_wrap input[type=file] {
	display: none;
}

.upload_wrap label {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

.upload_wrap label > span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.upload_wrap label > span:after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34.5px;
	height: 30.67px;
	background: url(../image/plus.png) center center no-repeat;
	background-size: contain;
	z-index: -1;
}

.btns {
	margin-top: 1em;
}

.btns a.btn,
.btns a.btn2,
.btns a.btn3,
.btns a.btn4 {
	position: relative;
	display: block;
	width: 21rem;
	max-width: 100%;
	height: 3rem;
	margin: auto;
	line-height: 3rem;
	background: #F87F70;
	border-radius: 1.5rem;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

.btns a.btn2 {
	background: #679BFF;
}

.btns a.btn3 {
	background: #FBFBFB;
	color: #5F5C5C;
}

.btns a.btn4 {
	background: #5F5C5C;
	color: #FBFBFB;
	pointer-events: none;
	cursor: normal;
}

.btnQuestion {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1;
}

main .btns .morePt {
	position: absolute;
	right: 1.5em;
	bottom: 0;
	font-size: 60%;
	line-height: 1.5;
}

.btnQuestion img { 
	vertical-align: bottom;
}

.btns input[type=submit] {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
}