*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html{
    font-size: 9px;
	overflow-x: hidden;
}
html.yoko{
    font-size: 9px;
}
@media screen and (min-width:768px) and (max-width:1020px){
	html{
		font-size: 1vw;
	}
	html.yoko{
		font-size: 1vw;
	}
}
@media (max-width: 767px){
	html{
		font-size: 1.5vw;

	}
	html.yoko{
		font-size: 2vh;
	}
}

body{
	width: 100%;
	min-height: 100vh;
	color: #333;
	background-color: #fff;
	font-family: 'GenJyuuGothic';
	font-weight: 600;
}

.main {
	width: 100%;
	max-width: 1020px;
	min-height: 100vh;
	margin: 0 auto;

}
.main.forgot,
.main.complete,
.main.register,
.main.login,
.main.top{
	padding-top: 10rem;
}
.hidden {
	display: none !important;
}

h1.title {
	color: #FF5858;
	font-weight: bold;
	font-size: 4.2rem;
	text-align: center;
}

.title-black {
	color: #333 !important;
}

.simple-text {
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	color: #FF5858;
	font-weight: 600;
}

.simple-text-2 {
	font-size: 18px;
	line-height: 30px;
	text-align: left;
	color: #333;
}


.btn {
	font-size: 2.7rem;
	padding: 2.5rem 6rem 2rem 6rem;
	position: relative;
	background-color: #ffc4c4;
	align-items: center;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
}

.btn::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 10px;
	right: 10px;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 5px;
	opacity: 0.5;
}
.btn:disabled{
	background-color: #B4B4B4;
	color: #fff;
}


.form-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.form-group .wrap {
	flex-wrap: wrap;
}

.form-group	.column {
	flex-direction: column;
}


.form-group	.select-wrapper {
	position: relative;
	width: 100%;

}
.form-group select {
	width: 100%;
	border: 1px solid #ff5858;
	display: block;
}

.form-group .select-wrapper::after {
	content: " ";
	position: absolute;
	right: 1.5rem;
	top: 5rem;
	transform: translateY(-50%);
	border-top: 5px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
}

.form-group	.textarea {
	width: 100%;
	border: 1px solid #ff5858;
	border-radius: 10px;
	display: block;
}

.form-group	.checkbox-wrapper {
	display: flex;

}

.form-group	.checkbox-label {
	cursor: pointer;
	word-break: keep-all;
}

.form-group	.half {
	width: 48%;
}

.form-group	.third {
	width: 32%;
}
.form-group .sex {
	width: 30%;
}

.form-group .toggle-password {
	width: 23%;
	padding: 2.4rem 2.5rem;
}


.form-group .forth {
	width: 24%;
}

.form-group .two-thirds {
		width: 66.67%;
	}
.form-group .password{
	width: 73%;
}

.form-group .note {
	margin-top: 2rem;
	border: 1px solid #FF5858;
	background-color: #FFE5E5;
	border-radius: 10px;
	color: #333;
	line-height: 1.5;
	padding: 5rem;
}
.form-group .note li {
	list-style-position: inside;
	position: relative;
	font-size: 2.8rem;
	line-height: 1.8;
	margin-bottom: 3rem;

}
.form-group .note li::before {
	content: "⚫︎";
	position: absolute;
	transform: translateX(-100%);
}

.form-group .note .error-message {
	width: 100%;

	color: #ff5858;
	display: flex;
	display: flex;
	justify-content: space-around;
}
.form-group input ,
.form-group select{
	position: relative;
	width: 100%;
	border: 1px solid #ff5858;
	padding: 2rem 1.5rem;
	font-size: 2.8rem;
	border-radius: 1.5rem;

	display: block;

}

.form-group select {
	width: 100%;
}

.form-message {
	font-size: 18px;
	color: #ff5858;
	display: flex;
	margin: auto;

}
.form-message.failed {
	color: #333;
}

.preview-container {
	width: 26rem;
	height: 26rem;
	border: 1px solid #ff5858;
	border-radius: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	text-align: center;

}
.preview-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 150px;
}


.pos-center {
	margin-right: auto;
	margin-left: auto;
}

.align-start {
	justify-content: flex-start;
	align-items: flex-start;
}

.align-center {
	justify-content: center;
	align-items: center;
}

.align-end {
	justify-content: flex-end;
	align-items: flex-end;
}

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

.label {
	display: block;
}
.radio+label{
	background-color: #FFEFF0;
}
.radio:checked+label {
	background-color: #ff5858;
	color: #fff;
}

/*
margin
*/
.mb-0 {
	margin-bottom: 0;
}

.mb-1 {
	margin-bottom: 8px;
}

.mb-2 {
	margin-bottom: 16px;
}

.mb-3 {
	margin-bottom: 24px;
}

.mb-4 {
	margin-bottom: 32px;
}

.mb-5 {
	margin-bottom: 40px;
}

.mb-6 {
	margin-bottom: 48px;
}

.mb-8 {
	margin-bottom: 64px;
}

.mx-2 {
	margin-left: 8px;
	margin-right: 8px;
}
.chat-status__label{
	width: 50%;
	font-size: 18px;
	padding:13px 0;
	border: 1px solid #ff5858;
	background-color: #FFE5E5;
	border-radius: 10px;
	text-align: center;
}
.chat-status__text{
	width: 50%;
	text-align: center;
	font-size: 18px;
}

.message-wrapper{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 24px;
}
.message-wrapper-other{
	flex-direction: row-reverse;
}
.message-wrapper-self .message-content{
	background-color: #FFE6E6;
}
.message-content{
	width: 70%;
	padding: 16px;
	background-color: #FFF9B5;
	border-radius: 10px;
	margin:0 16px;
}
.message-user{
	width:20%;
}
.message-user img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.chat-menu{
	position:relative;
	padding: 14px 0;
	text-align: center;
	color:white;
	margin-bottom: 48px;
	&::before{
		content:"";
		position:absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 100%;
		background-color: #B4B4B4;
		z-index: -1;
	}
}
.chat-message-input-wrapper{
	position:relative;
	padding-bottom: 80px;
	&::before{
		content:"";
		position:absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 100%;
		background-color:#EFEFEF;
		z-index: -2;
	}
}
.chat-message-input-title{
	font-size: 18px;
	color: #333;
	margin-bottom: 8px;
}
.chat-message-input-textarea{
	width: 100%;
	height: 365px;
	border: 1px solid #ff5858;
	border-radius: 10px;
	padding: 12px 10px;
	display: block;
	margin-bottom: 32px;
	background-color: #fff;
}
#chat-message-apo, #apo-day-weekday{
	display: none;
}


.apo-day-wrapper{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.apo-day-wrapper.apo-day{
	width: 23%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	height: 200px;
	border: 1px solid #ff5858;
	background-color:#FFE5E5;
}
.apo-day-wrapper.apo-day-time{
	width: 75%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.apo-checkbox{
		width: 32%;
		margin-bottom: 8px;
	}
}

.apo-day-time{
	display: flex;
	flex-wrap: wrap;
}
.apo-day-time-message{
	font-size: 18px;
	color: #333;
	margin-bottom: 8px;
	border: 1px solid #ff5858;
	border-radius: 10px;
	padding: 12px;
	text-align: center;
	&.end{
		background-color: #FF5858;
		color: #fff;
	}
}
a[class*="anchor"] {
	font-size: 20px !important;
	color: #4db0ed !important;
	text-decoration: underline !important;
	word-break: break-all !important;
}

main.top .btn{
	margin: 0 auto;
	margin-top: 5rem;
}
main.top>.btn:first-of-type{
	margin-top: 10rem;
}

main.login{
	margin-top: 10rem;
}
main.login .info-message{
	margin-top: 2rem;
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
}
main.register form,
main.login form{
	margin-top: 8rem;
	padding: 0 3.5rem;
}
main.forgot .selecttype{
	margin: 0 auto;
	margin-top: 7rem;
}
main.forgot .selecttype label>p,
main.register .selecttype label>p,
main.login .selecttype label>p{
	font-size: 2.2rem;
	white-space: nowrap;
}
main.register .confitext{
	margin-top: 6rem;
	font-size: 2.1rem;
	color: #FF4848;
	text-align: center;
}
main.forgot label, main.register label.zip{
	margin-top: 2rem;

}
main.forogot .selecttype label>p:first-of-type,
main.register .selecttype label>p:first-of-type,
main.login .selecttype label>p:first-of-type{
	font-size: 3rem;
}
main.forgot .selecttype label>p:last-of-type{
	font-weight: 500;
}
main.register .selecttype label.btn,
main.login .selecttype label.btn{
	padding: 1rem 2rem;
}
main.forgot .selecttype label.btn{
	padding: 1.3rem 2rem 1rem 2rem;

}
main.login label.password,
main.login label.mail{
	margin-top: 6rem;
	font-size: 2.8rem;
}
main.login .form-group.password,
main.login .form-group.mail{
	margin-top: 1.5rem;
}
main.login [type=submit]{
	margin-top: 4rem;
	padding: 2.5rem 3rem 2.2rem 3rem;
}
main.login .bottomlink{
	display: block;
	text-align: center;
	margin-top: 5rem;
	color: #2BA1EA;
	text-decoration: underline;
	font-size: 2.8rem;

}
main.login .error-message{
	margin-top: .5rem;
	font-size: 2.4rem;
}
.main.register{
	padding-bottom: 20rem;
}
main.forgot label,
main.register label{
	font-size: 2.8rem;
	margin-top: 6rem;
}
main.register .selecttype label.btn{
	margin-top: 2rem;
}
main.register .form-group.sex label{
	margin-top: 1.5rem;
	padding: 2.5rem 2rem;
}

.btn.auth{
	padding: 2.5rem 3rem 2.2rem 3rem;
}
.btn.sendpassword{
	padding: 2.3rem 3rem 2rem 3rem;
	font-size: 3rem;
}
.labelwrap{
	line-height: 1.5;
}
main.register .form-group.password{
	margin-top: 1.5rem;
}
main.register select{
	margin-top: 1.5rem;
	border-radius: 1.5rem;
	padding: 2rem 1.5rem;
	font-size: 2.8rem;
}
main.register select[readonly]{
	background-color: #ccc;
	border: #b4b4b4
}
main.register .show_comprofile .btn{
	padding: 2.5rem 3rem 2.2rem 3rem;
	margin-top: 1.5rem;
}
main.register textarea{
	line-height: 1.5;
	font-size: 2.8rem;
	padding: 5rem 3rem;
}
main.register .course span{
	display: inline-block;
	border: 2px solid #333;
	border-radius: 100vh;
	font-size: 2rem;
	width: 3rem;
	height: 3rem;
	margin-left: 1rem;
	text-align: center;
}
.btn.imgupload{
	padding: 2.5rem 3rem 2.2rem 3rem;
	margin-top: 1.5rem;
}
.w-20{
	width: 20%;
}
.w-20-i{
	width: 20% !important;
}
.w-30{
	width: 30%;
}
.w-30-i{
	width: 30% !important;
}
.w-40{
	width: 40%;
}
.w-40-i{
	width: 40% !important;
}
.w-50{
	width: 50%;
}
.w-50-i{
	width: 50% !important;
}
.w-60{
	width: 60%;
}
.w-60-i{
	width: 60% !important;
}
.w-65{
	width: 65%;
}
.w-65-i{
	width: 65% !important;
}
.w-70{
	width: 70%;
}
.w-70-i{
	width: 70% !important;
}
.w-75{
	width: 75%;
}
.w-75-i{
	width: 75% !important;
}
.w-80{
	width: 80%;
}
.m0a{
	margin: 0 auto;
}
.mt-1_5{
	margin-top: 1.5rem;
}
.mt-1_5_i{
	margin-top: 1.5rem !important;
}
.mt-2{
	margin-top: 2rem;
}
.mt-3{
	margin-top: 3rem;
}
.mt-3_i{
	margin-top: 3rem !important;
}
.mt-4{
	margin-top: 4rem;
}
.mt-5{
	margin-top: 5rem;
}
.mt-6{
	margin-top: 6rem;
}
.mt-8{
	margin-top: 8rem;
}
.mt-10{
	margin-top: 10rem;
}
.license-form-group-remove{
	padding: 2.3rem 4rem 2rem 4rem;

}

.hdn{
	display: none !important;
}
.prearea{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: 2rem;
}
.prelabel{
	display: flex;
	align-items: center;
	width:20%;
	height: 5rem;
	font-size: 2.8rem;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.prelabel.checked{
	font-weight: 900;
}
.prelabel::before{
	content: "◻︎";
	display: inline-block;
	margin-right: .5rem;
	margin-top: -1rem;
	width: 2rem;
	height: 2rem;
	transform: translate(-50%, -50%);
	font-size: 4rem;

}
.prelabel.checked::before{
	content: "☑︎";
	margin-top: -2rem;
	margin-right: .4rem;
}
#course_info_modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	display: flex;
	justify-content: center;
	align-items: center;

}
#course_info_modal>div{
	width: 90%;
	max-width: 1020px;
	background-color: #fff;
	border-radius: 10px;
	padding: 10% 3rem 20% 3rem;
	position: relative;

}

#course_info_modal>div::after {
	content: '';
	position: absolute;
	display: block;
	z-index: 1;
	border-style: solid;
	border-color: #fff transparent;
	border-width: 20px 10px 0 10px;
	bottom: -20px;
	left: 30%;
	margin-left: -10px;

}

#course_info_modal>div>p{
	line-height: 1.5;
	color: #ff5858;
	font-size: 2.9rem;

}
#course_info_modal>div>div{
	width: 100%;
	height: 50vh;
	overflow-y: scroll;
	font-size: 2.8rem;
	margin-top: 2rem;

}
#course_info_modal>div>div>div{
	line-height: 1.5;
	padding-left: 4rem;
	margin-top: 2rem;
}
#course_info_modal>div>div>div>span{
	position: relative;
	left: -4rem;
	text-decoration: underline;
	display: inline-block;
	margin-bottom: 2rem;
	margin-top: 4rem;
}
#course_info_modal .close{
	position: absolute;
	width: 40%;
	display: block;
	margin: 0 auto;
	text-align: center;
	margin-top: 4rem;
	background-color: #B4B4B4;
	color: #fff;
	padding: 2.2rem 0 2rem 0;
	bottom: 3%;
	left: 30%;
}

body.modal-open {
	overflow: hidden;
}
#confirm-email-message{
	white-space: nowrap;

}
.error-message{
	font-size: 2.8rem;
	color: #ff5858;
	text-align: left;
	margin-top: 1rem;
}
main.complete .btn{
	margin-top: 5rem;
	padding: 2.2rem 3rem 2rem 3rem;
	width: 85%;
}
main.contract{
	padding-top: 10rem;
	padding: 10rem 3rem;

}
main.contract .simple-text{
	margin-top: 4rem;
}
main.contract .popupbtn{
	font-weight: 500;
	margin-top: 4rem;
}
main.contract .btn{
	display: block;
	text-align: center;
	margin: 0 auto;
	margin-top: 4rem;
	width: 90%;
}
main.contract .btn.return:last-of-type{
	background-color: #B4B4B4;
	color: #fff;
}
.header .terms-modal,
main.contract .terms-modal,
main.contract .contract-modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
.header .terms-modal{
	z-index: 200;

}
.header .modal-overlay,
main.contract .modal-overlay{

}
.header .terms-modal table,
main.contract .terms-modal table{
	width: 100%;
	border-collapse: collapse;
	margin-top: 2rem;
}

.header .terms-modal table tr th,
.header .terms-modal table tr td,
main.contract .terms-modal table tr th,
main.contract .terms-modal table tr td{
	padding: 1rem 2rem;
	border: 1px solid #363636;
}
@media screen and (min-width: 1020px){
	main.contract .modal-overlay{

	}
}

.header .end-register-modal,
main.contract .end-register-modal{
	position: relative;
	background-color: #fff;
	max-width: 1020px;
	height: 90%;
	width: 90%;
	margin-top: 10%;
	border-radius: 3vw;
	margin: 0 auto;
	padding-top: 4rem;
	padding-bottom: 2rem;
}
.header .end-register-modal>div,
main.contract .end-register-modal>div{
	width: 100%;
	height: 100%;
	position: relative;
}
.header .terms-content,
main.contract .contract-content,
main.contract .terms-content{
	width: 90%;
	height: 80%;
	overflow-y: scroll;
	margin: 0 auto;
	border: 1px solid #ff5858;
	border-radius: 3vw;
	padding: 3rem;
}
.header .terms-content>div,
main.contract .contract-content>div,
main.contract .terms-content>div{
		font-size: 2.5rem;
	font-weight: normal;
	line-height: 1.8;
	margin-top: 2rem;
}
.header .terms-modal .lists,
main.contract .lists{
	list-style: none;
	padding-left: 0;
}
.header .terms-modal .lists>li,
main.contract .lists>li{
	position: relative;
	padding-left: 5rem;
}
.header .terms-modal  .lists>li::before
main.contract .lists>li::before{
	position: absolute;
	left: 0;
}
.header .terms-modal .list1,
main.contract .list1{
	counter-reset: list-counter;
}
.header .terms-modal .list2,
main.contract .list2{
	counter-reset: list-counter2;
}
.header .terms-modal .list3,
main.contract .list3{
	counter-reset: list-counter3;
}
.header .terms-modal .list4,
main.contract .list4{
	counter-reset: list-counter4;
}
.header .terms-modal .list5,
main.contract .list5{
	counter-reset: list-counter5;
}

.header .terms-modal .list6,
main.contract .list6{
	counter-reset: list-counter6;
}
.header .terms-modal .list7,
main.contract .list7{
	counter-reset: list-counter7;
}
.header .terms-modal .list8,
main.contract .list8{
	counter-reset: list-counter8;
}
.header .terms-modal .list9,
main.contract .list9{
	counter-reset: list-counter9;
}
.header .terms-modal .list10,
main.contract .list10{
	counter-reset: list-counter10;
}
.header .terms-modal .list11,
main.contract .list11{
	counter-reset: list-counter11;
}
.header .terms-modal .list12,
main.contract .list12{
	counter-reset: list-counter12;
}
.header .terms-modal .list13,
main.contract .list13{
	counter-reset: list-counter13;
}
.header .terms-modal .list14,
main.contract .list14{
	counter-reset: list-counter14;
}
main.contract .list15{
	counter-reset: list-counter15;
}
main.contract .list16{
	counter-reset: list-counter16;
}
main.contract .list17{
	counter-reset: list-counter17;
}
main.contract .list18{
	counter-reset: list-counter18;
}
main.contract .list19{
	counter-reset: list-counter19;
}
main.contract .list20{
	counter-reset: list-counter20;
}
main.contract .list21{
	counter-reset: list-counter21;
}
main.contract .list22{
	counter-reset: list-counter22;
}
main.contract .list23{
	counter-reset: list-counter23;
}
main.contract .list24{
	counter-reset: list-counter24;
}
main.contract .list25{
	counter-reset: list-counter25;
}
main.contract .list26{
	counter-reset: list-counter26;
}
main.contract .list27{
	counter-reset: list-counter27;
}
main.contract .list28{
	counter-reset: list-counter28;
}
main.contract .list29{
	counter-reset: list-counter29;
}
main.contract .list30{
	counter-reset: list-counter30;
}
main.contract .list31{
	counter-reset: list-counter31;
}

main.contract .lists>li{
	position: relative;

}
.header .terms-modal .list1>li,
main.contract .list1>li{
	counter-increment: list-counter;
	padding-left: 5rem;
}
.header .terms-modal .list1>li::before,
main.contract .list1>li::before{
	content: "(" counter(list-counter) ") ";
}
.header .terms-modal .list2>li,
main.contract .list2>li{
	counter-increment: list-counter2;
	padding-left: 4rem;
}
.header .terms-modal .list2>li::before,
main.contract .list2>li::before{
	content: counter(list-counter2) ".";
}
.header .terms-modal .list3>li,
main.contract .list3>li{
	counter-increment: list-counter3;
	padding-left: 4rem;
}
.header .terms-modal .list3>li::before,
main.contract .list3>li::before{
	content:  counter(list-counter3) ".";
}
.header .terms-modal .list4>li,
main.contract .list4>li{
	counter-increment: list-counter4;
	padding-left: 5rem;
}
.header .terms-modal .list4>li::before,
main.contract .list4>li::before{
	content:  "(" counter(list-counter4) ") ";
}
.header .terms-modal .list5>li,
main.contract .list5>li{
	counter-increment: list-counter5;
	padding-left: 5rem;
}
.header .terms-modal .list5>li::before,
main.contract .list5>li::before{
	content:  "(" counter(list-counter5) ") ";
}

.header .terms-modal .list6>li,
main.contract .list6>li{
	counter-increment: list-counter6;
	padding-left: 5rem;
}
.header .terms-modal .list6>li::before,
main.contract .list6>li::before{
	content:  "(" counter(list-counter6) ") ";
}
.header .terms-modal .list7>li,
main.contract .list7>li{
	counter-increment: list-counter7;
}
.header .terms-modal .list7>li::before,
main.contract .list7>li::before{
	content:  counter(list-counter7) ".";
}
.header .terms-modal .list8>li,
main.contract .list8>li{
	counter-increment: list-counter8;
}
.header .terms-modal .list8>li::before,
main.contract .list8>li::before{
	content:  "(" counter(list-counter8) ")";
}
.header .terms-modal .list9>li,
main.contract .list9>li{
	counter-increment: list-counter9;
}
.header .terms-modal .list9>li::before,
main.contract .list9>li::before{
	content:  "(" counter(list-counter9) ")";
}
.header .terms-modal .list10>li,
main.contract .list10>li{
	counter-increment: list-counter10;
}
.header .terms-modal .list10>li::before,
main.contract .list10>li::before{
	content:  "(" counter(list-counter10) ")";
}
.header .terms-modal .list11>li,
main.contract .list11>li{
	counter-increment: list-counter11;
}
.header .terms-modal .list11>li::before,
main.contract .list11>li::before{
	content:  "(" counter(list-counter11) ")";
}
.header .terms-modal .list12>li,
main.contract .list12>li{
	counter-increment: list-counter12;
}
.header .terms-modal .list12>li::before,
main.contract .list12>li::before{
	content:  "(" counter(list-counter12) ")";
}
.header .terms-modal .list13>li,
main.contract .list13>li{
	counter-increment: list-counter13;
}
.header .terms-modal .list13>li::before,
main.contract .list13>li::before{
	content:  "(" counter(list-counter13) ")";
}
.header .terms-modal .list14>li,
main.contract .list14>li{
	counter-increment: list-counter14;
}
.header .terms-modal .list14>li::before,
main.contract .list14>li::before{
	content:  counter(list-counter14) ".";
}
main.contract .list15>li{
	counter-increment: list-counter15;
}
main.contract .list15>li::before{
	content:  counter(list-counter15) ".";
}
main.contract .list16>li{
	counter-increment: list-counter16;
}
main.contract .list16>li::before{
	content: "(" counter(list-counter16) ")";
}
main.contract .list17>li{
	counter-increment: list-counter17;
}
main.contract .list17>li::before{
	content:  counter(list-counter17) ".";
}
main.contract .list18>li{
	counter-increment: list-counter18;
}
main.contract .list18>li::before{
	content:  counter(list-counter18) ".";
}
main.contract .list19>li{
	counter-increment: list-counter19;
}
main.contract .list19>li::before{
	content:  counter(list-counter19) ".";
}
main.contract .list20>li{
	counter-increment: list-counter20;
}
main.contract .list20>li::before{
	content: "(" counter(list-counter20) ")";
}
main.contract .list21>li{
	counter-increment: list-counter21;
}
main.contract .list21>li::before{
	content: counter(list-counter21) ".";
}

main.contract .list22>li{
	counter-increment: list-counter22;
}
main.contract .list22>li::before{
	content: counter(list-counter22) ".";
}
main.contract .list23>li{
	counter-increment: list-counter23;
}
main.contract .list23>li::before{
	content: "(" counter(list-counter23) ")";
}
main.contract .list24>li{
	counter-increment: list-counter24;
}
main.contract .list24>li::before{
	content: counter(list-counter24) ".";
}
main.contract .list25>li{
	counter-increment: list-counter25;
}
main.contract .list25>li::before{
	content: counter(list-counter25) ".";
}
main.contract .list26>li{
	counter-increment: list-counter26;
}
main.contract .list26>li::before{
	content: counter(list-counter26) ".";
}
main.contract .list27>li{
	counter-increment: list-counter27;
}
main.contract .list27>li::before{
	content: "(" counter(list-counter27) ")";
}
main.contract .list28>li{
	counter-increment: list-counter28;
}
main.contract .list28>li::before{
	content: counter(list-counter28) ".";
}
main.contract .list29>li{
	counter-increment: list-counter29;
}
main.contract .list29>li::before{
	content: counter(list-counter29) ".";
}
main.contract .list30>li{
	counter-increment: list-counter30;
}
main.contract .list30>li::before{
	content: counter(list-counter30) ".";
}
main.contract .list31>li{
	counter-increment: list-counter31;
}
main.contract .list31>li::before{
	content: counter(list-counter31) ".";
}
main.contract .list32>li{
	counter-increment: list-counter32;
}
main.contract .list32>li::before{
	content: counter(list-counter32) ".";
}
main.contract .list33{
}
main.contract .list33>p{
	margin: 0 !important;

}
main.contract .list33>li{
	list-style: none !important;
/*	counter-increment: list-counter33;*/

}
main.contract .list33>li::before{
	content: none;
/*	content: "(" counter(list-counter33) ")";*/
}
main.contract .list34>li{
	list-style: none;
/*	counter-increment: list-counter34;*/
}
main.contract .list34>li::before{
	content: none;
/*	content: "(" counter(list-counter34) ")";*/
}



.header .end-register-modal .btn,
main.contract .end-register-modal .btn{
	width: 40%;
	position: absolute;
	left: 30%;
	bottom: 2%;

}
@media (min-aspect-ratio: 1/1) {
	.header .end-register-modal .btn,
	main.contract .end-register-modal .btn{
		bottom: 0;
	}
}
.header{
	position: relative;
	overflow: hidden;
}
body.noscroll .header{
	overflow: visible;
}
.header>div:first-of-type{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 11rem;
	padding: 2rem;
}
.header>div:first-of-type>div{
	width: 12%;
	height: 100%;
}
@media screen and (min-width: 768px){
	.header>div:first-of-type>div{
		width: 8%;
	}
	
}
.header>div:first-of-type>div img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.header>div:first-of-type>div:nth-of-type(2) img{
	transform: scale(1,2);
}
.header .menuicon{
	padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.header .menuicon>div{
    width: 100%;
    height: .4rem;
    background-color: #333;
    border-radius: 2px;
}
.header .togglemenu{
	position: fixed;
	width: 100%;
	z-index: 102;
	height: 100vh;
	max-width: 1020px;
	top: 0;
	background-color: #fff;
	visibility: hidden;
    transition: transform 1s, opacity 1s, visibility 1s; /* visibilityの遅延を追加 */
	padding-top: 20rem;
	padding: 16rem 5rem 3rem 5rem;
    transform: translateX(100%);
	opacity: 0;


}
.header .togglemenu.active{
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
    transition: transform 1s, opacity 1s; /* visibilityの遅延を削除 */
}
.header .togglemenu>ul{
	max-height: 70vh;
	overflow-y: scroll;
}
.header .togglemenu>ul>li{
	font-size: 2.5rem;
	padding: 5rem 2rem 1rem 2rem;
	border-bottom: .7rem solid #ff5858;
	position: relative;
}
.header .togglemenu>ul>li::after{
	text-align: center;
	padding-top: .6rem;
	color: #fff;
	content: "→";
	position: absolute;
	width: 4rem;
	height: 4rem;
	background-color: #ff5858;
	border-radius: 100vh;
	right: 0;
	top: 50%;
}
.header .togglemenu .close{
	position: absolute;
	top: 5rem;
	right: 2rem;
    width: 8rem;
    height: 8rem;
    background-color: red;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}
.header .togglemenu .close>div{
    position: absolute;
    width: 4rem;
    height: .3rem;
    background-color: #fff;
}
.header .togglemenu .close>div:first-of-type {
    transform: rotate(45deg);
}
.header .togglemenu .close>div:nth-of-type(2){

    transform: rotate(-45deg);
}
html.noscroll body{
	overflow: hidden;
	width: 100%;
	height: 100vh;
    overscroll-behavior: none !important;
	position: fixed;
	top: 0;
	left:0;

}
html.noscroll{
	overscroll-behavior: none !important;
}
#bkpopup{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

main.show-profile .header h1,
main.manage-top .header h1{
	font-size: 4rem;
	color: #ff5858;
	text-align: center;
}
main.show-profile .profbox,
main.manage-top .profbox{
		margin-top: 8rem;
	padding: 0 3rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
main.show-profile .profbox>div,
main.manage-top .profbox>div{
		width: 50%;
}
main.show-profile .profbox>div:first-of-type>div,
main.manage-top .profbox>div:first-of-type>div{
		width: 25rem;
	height: 25rem;
	border-radius: 100vh;
	overflow: hidden;
	margin: 0 auto;
}
main.show-profile .profbox>div:first-of-type>div>img,
main.manage-top .profbox>div:first-of-type>div>img{
		width: 100%;
	height: 100%;
	object-fit: cover;

}
main.show-profile .profbox>div:nth-of-type(2),
main.manage-top .profbox>div:nth-of-type(2){
		background-color: #FFF9B5;
	border-radius: 3rem;
	padding: 2rem 3rem;
	font-size: 2.4rem;
	line-height: 1.5;
    word-break: break-all; /* 単語の途中でも改行を許可 */
    overflow-wrap: break-word; /* 長い単語を改行して表示 */
    white-space: normal; /* 通常の空白処理 */

	
}
main.manage-top .showprofbtn{
	width: 80%;
	margin: 0 auto;
	margin-top: 3rem;
}
main.manage-top .paymentmethodbox,
main.manage-top .enduserbox>div>div,
main.manage-top .planbox{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 3rem;
	font-size: 2.8rem;
	margin-top: 5rem;
}

main.manage-top .enduserbox>div>div:first-of-type{
	margin-top: 2rem;
}
main.manage-top .paymentmethodbox>div:first-of-type,
main.manage-top .enduserbox>div>div>div:first-of-type,
main.manage-top .planbox>div:first-of-type{
	width: 33.5%;
	text-align: center;
	background-color: #FFE5E5;
	border: 1px solid #ff5858;
	padding: 1.5rem;
	border-radius: 2rem;
	line-height: 1.5;

}
main.manage-top .paymentmethodbox>div:first-of-type{
	padding-top: 4rem;
	padding-bottom: 4rem;

}
main.manage-top .enduserbox>div>div>div:nth-of-type(2),
main.manage-top .paymentmethodbox>div:nth-of-type(2),
main.manage-top .planbox>div:nth-of-type(2){
	width: 62%;
}
main.manage-top .linkline{
	font-size: 3rem;
	text-align: center;
	text-decoration: underline;
	margin-top: 5rem;
	color: #35A5EB;
}
main.manage-top .managedatabox,
main.manage-top .enduserbox{
		margin-top: 5rem;
}

main.manage-top .managedatabox>p:first-of-type,
main.manage-top .enduserbox>p:first-of-type{
		padding: 0 3rem;
	font-size: 2.8rem;
}
main.manage-top .enduserbox>p:nth-of-type(2) .btn{
	margin: 0 auto;
	margin-top: 4rem;
	padding: 2.5rem 3.2rem 2.2rem 3.2rem;
}
main.manage-top .managedatabox{
	margin-top: 8rem;
}
main.manage-top .managedatabox>div{
	border-radius: 3rem;
	background-color: #FFF9B5;
	margin: 3rem;
	font-size: 2.8rem;
	padding: 2rem 3rem;

}
main.manage-top .managedatabox>div>div{
	line-height: 1.8;

}
main.manage-top .managedatabox>div>div:nth-of-type(2){
	font-weight: 500;
	font-size: .9em;
    word-break: break-all; /* 単語の途中でも改行を許可 */
    overflow-wrap: break-word; /* 長い単語を改行して表示 */
    white-space: normal; /* 通常の空白処理 */

}
main.manage-top .paymentmethodbox{
	margin-top: 8rem;
}
main.manage-top .btnbox{
	padding: 0 3rem;
	margin-top: 5rem;
}
main.manage-top .btnbox .btn{
	padding: 2.5rem 3rem 2.2rem 3rem;
	width: 100%;
	margin-top: 2rem;

}
main.manage-top .footer{
	margin-top: 10rem;
	background-color: #FF4848;
	color: #fff;

	padding: 8rem 3rem;
}
main.manage-top .footer>div{
	font-size: 2.8rem;
	padding: 2rem 0;
	font-weight: 100;

}
main.manage-top .footer .copy{
	border-top: 1px solid #fff;
	padding-top: 2rem;
	font-size: 2rem;
	text-align: center;
	font-weight: 100;
	margin-top: 5rem;
}
.modal-overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
.end-register-modal h2{
	font-size: 3.5rem;
	color: #ff5858;
	text-align: center;
	margin-bottom: 2rem;

}
#confirm-register{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.5);
}
#confirm-register>div{
	width: 100%;
	height: 100%;
	max-width: 1020px;
	margin: 0 auto;
	background-color: #fff;
	overflow: scroll;
	padding: 8rem 3rem 20rem 3rem;
}
#confirm-register>div>p.title{
	font-size: 4.5rem;
	text-align: center;

}
#confirm-register>div>p.title:nth-of-type(2){
	margin-top: 10rem;
}
#confirm-register>div>div:first-of-type{
	margin-top: 5rem;
}
#confirm-register>div>div.first{
	margin-top: 5rem;
}
#confirm-register>div>div>div{
	width: 100%;
	padding: 1.5rem;
	font-size: 2.8rem;
	line-height: 1.8;

}
#confirm-register>div>div>div:first-of-type{
	background-color: #FFC4C4;
	border-radius: 1rem;


}
#confirm-register>div>div>div>span{
	text-decoration: underline;
	display: inline-block;
	margin-top: 3rem;
}
#confirm-register .btnline{
	width: 100%;
	text-align: center;
	white-space: nowrap;
	margin-top: 3rem;
}
#confirm-register .btnline .btn{
	width: 45%;
	margin: 0 2%;
	padding: 1.3rem 3rem 1rem 3rem;
	display: inline-block;

}
#confirm-register .btnline>.btn:first-of-type{
	background-color: #B4B4B4;
	color: #fff;
}
main.forgot{
	padding: 0 3rem 5rem 3rem;
}
main.forgot .btn.submit{
	background-color: #ff5858;
	color: #fff;
	display: block;
	margin: 0 auto;
	margin-top: 5rem;
	width: 70%;
	text-align: center;
}
main.forgot .btn:disabled{
	background-color: #B4B4B4;
}
.copy-url-modal>div>div{
	position: fixed;
	top: 20%;
	width: 85vw;
	max-width: 900px;
	background-color: #fff;
	border-radius: 2rem;
	padding: 4rem 5rem;
	font-size: 2.5rem;
	line-height: 1.8;
	font-weight: 100;
}
.copy-url-modal>div>div .close{
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 3rem;
	height: 3rem;

	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.copy-url-modal .close>div{
    position: absolute;
    width: 2rem;
    height: .3rem;
    background-color: #333;

}
.copy-url-modal .close>div:first-of-type {
    transform: rotate(45deg);
}
.copy-url-modal .close>div:nth-of-type(2){
    transform: rotate(-45deg);
}

.copy-url-modal .btn{
	padding: 1.5rem 3rem 1.3rem 3rem;
	color: #333;
	font-weight: bold;
	margin: 0 auto;
	margin-top: 5rem;
}
#copyUrlModalMessage{
	font-size: 2.5rem;
	text-align: center;
	margin-top: 3rem;
	color: #ff5858;

}
.main.register.edit .text{
	font-size: 2.8rem;
	margin-top: 1.5rem;
}
main.show-profile{
	padding-bottom: 5rem;
}
main.show-profile .header h1{
	margin-top: 3rem;

}
main.show-profile .profbox{
	margin-top: 5rem;
}
main.show-profile .messagebox,
main.show-profile .areabox,
main.show-profile .companynamebox{
	border-radius: 3rem;
	margin: 0 3rem;
	margin-top: 5rem;
	padding: 2rem;
	font-size: 2.8rem;
	line-height: 1.8;
	background-color: #FFF9B5;
}
main.show-profile .messagebox>div,
main.show-profile .areabox>div,
main.show-profile .companynamebox>div{
	font-size: .8em;
	word-break: break-all; /* 単語の途中でも改行を許可 */
	overflow-wrap: break-word; /* 長い単語を改行して表示 */
	white-space: normal; /* 通常の空白処理 */
	
}
main.show-profile .linkline{
	text-align: center;
}
main.show-profile .linkline .btn{
	margin-top: 5rem;
	padding: 2.5rem 2rem 2.2rem 2rem;
	display: inline-block;
	width: 33%;
	text-align: center;
}
main.show-profile .linkline>.btn:first-of-type{
	margin-right: 5%;
}
main.show-profile .linkline>.btn:nth-of-type(2){
	background-color: #B4B4B4;
	color: #fff;
}

main.leave{
	padding: 10rem 3rem 15rem 3rem;
}
main.leave .infobox{
	margin-top: 10rem;
	line-height: 1.8;
}
main.leave .infobox>p:first-of-type{
	color: #333;
	font-size: 2.8rem;
}
main.leave .infobox>div{
	margin-top: 8rem;
	color: #ff5858;
	font-size: 2.8rem;
}
main.leave form{
	display: inline-block;

}
main.leave .btn{
	display: inline-block;
	width: 32%;
	padding: 1.7rem 0 1.5rem 0;
	text-align: center;
	margin: 0 2%;
	color: #333;
}
main.leave .last_leave_modal .btn{
	background-color: #FF5858;
	color: #fff;
}
main.leave .btns{
	margin-top: 5rem !important;
	text-align: center;
}

main.leave .btn.cancel{
	background-color: #B4B4B4;
	color: #fff;
}
main.leave .last_leave_modal{
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%,0);
	width: 90%;
	max-width: 1020px;
	background-color: #fff;
	border-radius: 2rem;
	z-index: 101;
	padding: 5rem 3rem;

}
main.leave .last_leave_modal .btn{
	width: 40%;
	padding: 2.2rem 3rem 2rem 3rem;
}
main.leave .last_leave_modal>p{
	color: #ff5858;
	font-size: 2.8rem;
}
main.leave .last_leave_modal>p:first-of-type{
	font-size: 4rem;
	color: #ff5858;
	text-align: center;
}
main.leave .last_leave_modal>p:nth-of-type(2){
	margin-top: 5rem;
	line-height: 1.8;
}
main.contact{
	padding: 10rem 3rem 15rem 3rem;
}
main.contact>div{
	line-height: 1.8;
	margin-top: 10rem;
	font-size: 2.8rem;
}
main.contact>div>p{
	margin-top: 5rem;
}
main.contact textarea{
	padding: 3rem;
	font-size: 2.8rem;
	margin-top: 5rem;
	width: 100%;
	height: 70rem;
	border: 1px solid #ff5858;
	border-radius: 2rem;
	font-weight: 500;
	line-height: 1.5;
}
main.contact textarea::placeholder{
	font-size: 2.8rem;
	color: #ccc;
}
main.contact .btn{
	width: 38%;
	display: block;
	text-align: center;
	padding: 2.2rem 3rem 2rem 3rem;
	margin: 0 auto;
	margin-top: 4rem;
}
main.contact .btn.returnbtn{
	background-color: #B4B4B4;
	color: #fff;
}
main.contact .confi-message{
	font-size: 2.8rem;
	margin-top: 2rem;
	color: #ff5858;
}
main.contact .error-message{
	font-size: 2.8rem;
	color: #ff5858;
}
main.search{
	padding-bottom: 10rem;
}
main.search .datearea{
	padding: 2rem 3rem;
	text-align: left;
}
main.search .datearea>p:last-of-type{
	margin-top: 2rem;
}
main.search .total-count{
	font-size: 2.5rem;
	text-align: right;
	margin-top: 2rem;
	padding-right: 3rem;
}
main.search .admincheck{
	width: 100%;
}
main.search .chat_start_users{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-bottom: 2rem;
}
@media screen and (min-width: 768px){
	main.search .chat_start_users{
		justify-content: flex-start;
	}
}
main.search .chat_start_users>span{
	display: block;
	width: 30%;
	text-align: center;
	background-color: #ffe6e6;
	padding: 2rem 0;
	margin: .5%;
}
main.search .btn.back{
	display: block;
	margin: 0 auto;
	width: 45%;
	padding: 2.2rem 3rem 2rem 3rem;
	text-align: center;
	margin-top: 5rem;
	color: #fff;
	background-color: #B4B4B4;

}
main.search .lists>.morebtn{
	padding: 2.4rem 3rem 2rem 3rem;
	display: block;
	text-align: center;
	width: 50%;
	margin: 0 auto;
	margin-top: 4rem;
}
main.searchdetail h1,
main.search h1{
	font-size: 4rem;
	color: #ff5858;
	text-align: center;
	margin-top: 5rem;
}
main.searchdetail .adminbox{
	width: 100%;
}
main.searchdetail .adminbox>div:first-of-type{
}
main.searchdetail .adminbox>div:first-of-type>div{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	font-size: 2.8rem;

}
main.searchdetail .adminbox>div:first-of-type>div>div{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
main.searchdetail .adminbox>div:first-of-type>div>div:first-of-type{
	background-color: #ffe5e5;
	border: 1px solid #ff5858;
	border-radius: 2rem;
	padding: 2rem 2rem;
	text-align: center;
	flex-direction: column;

}
@media screen and (min-width: 768px){
	main.searchdetail .adminbox>div:first-of-type>div>div:first-of-type{
		flex-direction: row;
	}
}

main.searchdetail .adminbox>div:first-of-type>div>div:nth-of-type(2){
	padding: 0 2rem;
}
main.searchdetail .adminbox>div:first-of-type>div>div:nth-of-type(2)>span:first-of-type{
	font-size: 3.5rem;
}
main.searchdetail .adminbox>div:first-of-type>div>div:nth-of-type(2)>span:nth-of-type(2){
	margin-top: 1rem;
	color: #fff;
	padding: 2rem;
	width: 100%;
	text-align: center;
	background-color: #FF4848;
	border-radius: 2rem;
}
main.searchdetail .adminbox>div:first-of-type>div:nth-of-type(2){
	margin-top: 2rem;
}
main.searchdetail .adminbox>div:nth-of-type(2){
	margin-top: 2rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
main.searchdetail .adminbox>div:nth-of-type(2)>.btn{
	padding: 2.5rem 0;
	width: 30%;
	background-color: #ffe6e6;
	margin: 1%;
}
main.search .adminbox,
main.search .infobox{
	margin-top: 0;
	margin-top: 3rem;
	font-size: 2.8rem;
	padding: 0 3rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

}
main.search .adminbox{
	width: 100%;
}
main.search .adminbox .chat-num{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-wrap: wrap;

}
main.search .adminbox .chat-num>.title{
	width: 100%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
main.search .adminbox .chat-num>.btn{
	margin: 1rem;
	max-width: 10%;
}
main.search .adminbox .chat-num>.btn:last-of-type{
	max-width: 20%;
	width: 20%;
}
@media screen and (max-width: 768px){
	main.search .adminbox .chat-num>.btn{
		max-width: 20%;
	}
	main.search .adminbox .chat-num>.btn:last-of-type{
		max-width: 40%;
		width: 40%;
	}
	
}
/*main.search .adminbox>div{
	width: 100%;
}	
main.search .adminbox>div:nth-of-type(2)>div{
	margin-top: 2rem;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2){
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn{
	padding: 2.5rem 1rem 2.2rem 1rem;
	margin: 0 1rem;
}
main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn:last-of-type{
	width: 38%;
}
@media screen and (max-width: 768px){
	main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2){
		flex-wrap: wrap;
	}
	main.search .adminbox>div:nth-of-type(2)>div:nth-of-type(2)>.btn{
		width: 20%;
		margin-bottom: 4rem;
	}
}
*/
main.search .infobox>span:first-of-type{
	display: inline-block;
	border: 1px solid #ff5858;
	border-radius: 1.5rem;
	background-color: #FFE5E5;
	padding: 2rem 0;
	width: 65%;
	text-align: center;
}
main.search .infobox>span:nth-of-type(2){
	text-decoration: underline;
	display: inline-block;
	width: 30%;

	text-align: center;
	margin-left: 2rem;
	font-size: 3.8rem;
}
main.search .detailsearchbox{
	padding: 0 3rem;
	margin-top: 3rem;
	width: 100%;
	overflow: hidden;
	height: 8rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
main.search .detailsearchbox>div{
    display: flex;
    flex-direction: row;
	align-items: center;
    overflow-x: auto; /* 内部コンテナにスクロールを適用 */
	width: 100%;
	height: 12rem;

}
main.search .detailsearchbox .open-search-select{
	width: 7rem;
	height: 7rem;
	border: 1px solid #C5C4C5;
	border-radius: 1rem;
	padding: 1rem;
	flex-shrink: 0;
	cursor: pointer;
}
main.search .detailsearchbox .open-search-select>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
main.search .detailsearchbox .parts{
	padding: 2rem 1rem;
	margin-left: 1rem;
	font-size: 2.5rem;
	flex-shrink: 0;
	border: 1px solid #C5C4C5;
	border-radius: 1rem;
	position: relative;
}
main.search .detailsearchbox .parts::after{
	content: "×";
	display: inline-block;
	right: 0;

}
main.search .searchbox{
	padding: 0 3rem;
}
main.search .searchbox>div{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 4rem;
	font-size: 2.8rem;

}
main.search .searchbox>div>div:first-of-type{
	width: 30%;
	text-align: center;
}
main.search .searchbox>div>div:nth-of-type(2){
	width: 55%;
	padding: 0 1rem;

}
main.search .searchbox>div:nth-of-type(2)>div:nth-of-type(2){
	position: relative;
}
main.search .searchbox>div>div:nth-of-type(3){
	width: 12%;
	padding: 2rem 1.5rem;
}
main.search .searchbox>div>div:nth-of-type(3)>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
main.search .searchbox>div>div>select,
main.search .searchbox>div>div>input{
	width: 100%;
	border: 1px solid #ff5858;
	padding: 2rem;
	height: 8rem;
}
main.search .searchbox>div:nth-of-type(2)>div:nth-of-type(2):after{
	content: " ";
	position: absolute;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	border-top: 5px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	pointer-events: none;
}
main.search .planbox{
	margin: 0 auto;
	margin: 3rem 3rem 0 3rem;
	border-radius: 2rem;
	font-size: 2.8rem;
	overflow: hidden;
}
main.search .planbox>.openbtn{
	background-color: #FFE5E5;
	padding: 2rem;
	border: 1px solid #ff5858;
	border-radius: 2rem;
	position: relative;
}
main.search .planbox.open>.openbtn{
	border-radius: 2rem 2rem 0 0;
}
main.search .planbox>.openbtn::after{
	content: " ";
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	border-top: 5px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;

}
main.search .planbox.open>.openbtn::after{
	top: 50%;
	transform: rotate(180deg);
}
main.search .planbox>.onebox{
	font-size: 2.5rem;
	background-color: #FFF5F5;
	line-height: 2.5;
	padding: 3rem;
}
main.search .liststitle{
	margin: 3rem 3rem 0 3rem;
	background-color: #FFC4C4;
	text-align: center;
	font-size: 2.8rem;
	padding: 2rem 0;

}
main.search .lists{
	margin-top: 3rem;
	padding: 0 3rem;

}

main.search .lists .onebox{
	border: .4rem solid #B4B4B4;
	border-radius: 2rem;
	overflow: hidden;
	background-color: #FFF8F8;
	font-size: 2.8rem;
	padding-bottom: 5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
main.search .lists .onebox .info .info-message{
	font-size: 2rem;
	color: #ff5858;
}
main.search .lists .onebox>.title{
	background-color: #FFE6E6;
	padding: 2rem;
	text-align: center;
	position: relative;
}
main.search .lists .onebox>.title:first-of-type::before{
	position: absolute;
	content: "→";
	color: #fff;
	background-color: #ff5858;
	width: 4rem;
	height: 4rem;
	border-radius: 100vh;
	text-align: center;
	line-height: 4rem;
	font-size: 2.8rem;
	top: 1.5rem;
	right: 2rem;
	padding-top: .2rem;
}
main.search .onebox>.status{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 4rem 3rem;


}
main.search .onebox>.status>span{
	display: block;
	text-align: center;
	font-size: 2.8rem;
}
main.search .onebox>.status>span.chat-in,span.chat-allow{
	width: 40%;
	color: #FF5859;

}
main.search .onebox>.status>span.new-chat,span.advice-wish,span.chat-disable{
	width: 60%;
	color: #fff;
	background-color: #FF5859;
	border-radius: 2rem;
	padding: 2.5rem 2rem;
}
main.search .onebox>.status>span.advice-wish.twoline{
	margin-top: 2rem;

}
main.search .onebox>.status>span.chat-disable{
	background-color: #363636;
}
main.search .onebox>.info{
	padding: 3rem;
}
main.search .onebox>.info>p{
	line-height: 1.7;
}
main.search .onebox>.money,
main.search .onebox>.flgs{
		padding: 3rem 3rem 0 3rem;
}
main.search .onebox>.money>p{
	line-height: 1.7;
}
main.search .onebox>.money>p>span{
	display: inline-block;
	margin-left: 2rem;
}
main.search .onebox>.flgs{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 1rem 3rem 0 3rem;
}

main.search .onebox>.flgs>div{
	width: 32%;
}
main.search .onebox>.flgs>.btn{
	margin-top: 2rem;
	padding: 2.2rem 0 2rem 0;
	background-color: #FFE6E6;
}
main.search .onebox>.flgs>.btn.on{
	background-color: #ff5858;
	color: #fff;
}
main.search .search-select-modal{
	width: 100%;
	max-width: 1020px;
	height: 90vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	overflow: scroll;
	font-size: 2.8rem;

}
main.search .search-select-modal>div{
	padding-bottom: 20vh;

}
main.search .search-select-modal .topbox{
	position: relative;
}

main.search .search-select-modal .topbox>div:first-of-type{
	position:absolute;
	top: 2rem;
	left: 2rem;

}
main.search .search-select-modal .topbox>div:nth-of-type(2){
	text-align: center;
	padding: 2rem 0;
	font-size: 3.5rem;
}
main.search .search-select-footer{
	position: fixed;
	width: 100%;
	max-width: 1020px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;

	height: 13vh;
	min-height: 10rem;

	background-color: #fff;
	z-index: 100;
	font-size: 2.8rem;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
main.search .search-select-footer>span{
	display: block;
	width: 30%;
	padding: 2.2rem 0 2rem 0;
	cursor: pointer;
}
main.search .search-select-footer>span:first-of-type{
	margin-right: 4%;
	background-color: #C5C4C5;
	color: #fff;
}
main.search .search-select-modal>div>div>.title{
	display: block;
	width: 100%;

	padding: 2rem 0;
	text-align: center;
	background-color: #FFE6E6;
}
main.search .moneybox{
	margin-top: 7rem;
	font-size: 2.8rem;
	padding: 0 3rem;
}
main.search .search-select-modal .infobox>div:nth-of-type(2){
	margin-top: 3rem;

}
main.search .search-select-modal .infobox select,
main.search .search-select-modal .infobox input{
	text-align: right;
	width: 10rem;
	border: 1px solid #ff5858;
	padding: 1.5rem;
	margin: 0 2rem;
}
main.search .search-select-modal .infobox select{
	width: 100%;
	text-align: left;



}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2){
	margin-top: 2rem;
}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div{
	width: 40%;
	display: inline-block;
	position: relative;
}
main.search .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div::after{
	content: " ";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border-top: 5px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	pointer-events: none;
}

main.search .search-select-modal .btn{
	display: inline-block;
	text-align: center;
	width: 18rem;
	padding: 2.2rem 0 2rem 0;
	background-color: #FFF4F4;
}
main.search .search-select-modal .btn.on{
	background-color: #ff5858;
	color: #fff;
}
main.search .search-select-modal .child,
main.search .search-select-modal .partner{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 90%;
	margin-top: 3rem;
}
main.search .search-select-modal .child>span,
main.search .search-select-modal .partner>span{
	width: 18rem;
	margin-right: 3.5%;
}
main.search .search-select-modal .child>span:first-of-type,
main.search .search-select-modal .partner>span:first-of-type{
	width: 30%;
}

main.search .search-select-modal .moneybox>p{
	margin-top: 3rem;
}
main.search .search-select-modal .moneybox>div{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
}
main.search .search-select-modal .moneybox>div>div>select{
	width: 100%;
	border: 1px solid #ff5858;
	padding: 1.5rem;
	font-size: 2.5rem;
	font-weight: 500;

}
main.search .search-select-modal .moneybox>div>div{
	width: 20rem;
	position: relative;
}
main.search .search-select-modal .moneybox>div>div::after{
	content: " ";
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	border-top: 5px solid #333;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	pointer-events: none;

}
main.search .search-select-modal .flgbox{
	margin-top: 3rem;
	padding: 0 3rem;
}
main.search .search-select-modal .flgbox>div{
	text-align: left;
	margin-top: 2rem;
}
main.search .search-select-modal .flgbox>div>span:first-of-type{
	display: inline-block;
	margin-top: 2rem;
	width: 30%;
}
main.search .search-select-modal .flgbox>div>span:nth-of-type(2){
	margin-right: 3%;
}
main.search .btn.disabled{
	background-color: #B4B4B4;
	cursor: not-allowed;

}
main.searchdetail{
	padding: 0 1rem;
}
main.searchdetail .returnbtn{
	text-align: left;
	font-size: 2.8rem;
	padding: 0 2rem;
}
main.searchdetail .tabs{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 3rem;
	font-size: 2.8rem;
}
main.searchdetail .tabs>div{
	width: 49%;
	text-align: center;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	border-radius: 2rem 2rem 0 0;


}
main.searchdetail .tabs>div:first-of-type{
	background-color: #FFF5F5;
}
main.searchdetail .tabs>div:last-of-type{
	background-color: #FFF9B5;
}
main.searchdetail .contents>.detail{
	background-color: #FFF9B5;
	padding: 0 2rem;
	min-height: 100vh;
	padding-bottom: 10rem;
}
main.searchdetail .contents>.detail{
	padding-top: 4rem;
}
main.searchdetail .contents>.detail>.title{
	font-size: 2.5rem;
	margin-top: 7rem;
}
main.searchdetail .contents>.detail>.title:first-of-type{
	margin-top: 0;
}
main.searchdetail .contents>.detail>.info_kakeibo{
	margin-top: 2rem;
	font-size: 2.3rem;
	color: #ff5858;
}
main.searchdetail .contents>.detail>.item{
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	font-size: 2.6rem;


}
main.searchdetail .contents .info_children{
	margin-top: 2rem;
	color: #ff5858;
	font-size: 2.3rem;
}
main.searchdetail .contents>.detail>.item>div{
	width: 50%;
	padding: 2rem;

}
main.searchdetail .contents>.detail>.item>div:first-of-type{
	background-color: #FFC4C4;
	border-radius: 2rem 0 0 2rem;
	text-align: center;
}
main.searchdetail .contents>.detail>.item>div:nth-of-type(2){
	background-color: #fff;
	border-radius: 0 2rem 2rem 0;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
main.searchdetail .contents>.kekka{
	background-color: #FFF5F5;
	/* padding: 3rem 2rem; */
	font-size: 2.8rem;
	min-height: 100vh;
}
main.searchdetail .contents .btn.back{
	display: block;
	width: 35%;
	text-align: center;
	margin: 0 auto;
	margin-top: 5rem;
	padding: 2.2rem 0 2rem 0;
	color: #fff;
	background-color: #B4B4B4;
}
main.searchdetail .chatbox>.message{
	text-align: center;
	font-size: 2.8rem;
}
main.searchdetail .chatbox .btn{
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}
main.searchdetail .chatbox .status{
	width: 90%;
	margin: 0 auto;
	margin-top: 2rem;
	border-radius: 1rem;
	background-color: #FF5859;
	color: #fff;
	font-size: 2.8rem;
	font-weight: 600;
	text-align: center;
	padding: 2rem;

}
main.searchdetail .chatbox .status.disabled{
	background-color: #363636;
}
main.searchdetail .chatbox .numbox{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 2.8rem;
	margin-top: 2rem;
}
main.searchdetail .chatbox .numbox>div{
	width: 50%;
	text-align: center;
}
main.searchdetail .chatbox .numbox>div:first-of-type{
	margin: 0 5rem 0 2rem;
	border: 1px solid #ff5858;
	background-color: #FFE5E5;
	padding: 2rem 1rem;
	border-radius: 1rem;
	line-height: 1.5;

}
main.searchdetail .chatbox .numbox>div:nth-of-type(2){
	font-size: 4rem;
}
#confirm-email-message{
	font-size: 2.8rem;

}
.login input[type="password"]{
	width: 71%;
}
main.search.yoko h1{
	text-align: left;
	padding-left: 3rem;
}
main.search.yoko .searchbox{
	display: flex;
	flex-direction: row;
	justify-content: space-between;

}
main.search.yoko .searchbox>div{
	width: 48%;
	font-size: 2rem;
}
main.search.yoko .searchbox>div>div:first-of-type{
	white-space: nowrap;
}
main.search.yoko .lists>.onebox{
	cursor: pointer;
	padding: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;

}
main.search.yoko .datearea{
	width: 65%;
	font-size: 2.3rem;
	margin-bottom: 2rem;
	padding-left: 1rem;
}
main.search.yoko .datearea>p:last-of-type{
	margin-top: 1rem;
}
main.search.yoko .lists>.onebox>.title{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35%;
	margin-bottom: 2rem;
	font-size: 2.3rem;
}
main.search.yoko .lists .onebox>.title:first-of-type::before{
	right: -180%;

}
main.search.yoko .lists .onebox>.moneytitle{
position: relative
}
main.search.yoko .lists .onebox>.moneytitle>span{
	position: absolute;
	bottom: -6.5rem;
	z-index: 1;

}
main.search.yoko .lists>.onebox>.status,
main.search.yoko .lists>.onebox>.info,
main.search.yoko .lists>.onebox>.money{
	margin-bottom: 2rem;
	width: 65%;
}
main.search.yoko .lists>.onebox>.money{
	margin-bottom: 0;
	padding: 0 1rem;
	font-size: 2.3rem;
}

main.search.yoko .lists>.onebox>.flgs{
	padding: 0;
	padding-left: 36%;
	position: relative;
	font-size: 2.3rem;
	justify-content: flex-start;
	width: 100%;
}
main.search.yoko .onebox>.flgs>div{
	width: 28%;
	margin-right: 1%;
}
main.search.yoko .lists>.onebox>.flgs::before{
	content: " ";
	display: block;
	position: absolute;
	top: -2rem;
	left: 0;
	width: 35%;
	height: 115%;
	background-color: #FFE6E6;
	z-index: 0;



}
main.search.yoko .lists>.onebox>.flgs .btn{
	white-space: nowrap;
	font-size: .8em;
}
main.search.yoko .infobox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
main.search.yoko .infobox>div:first-of-type{
	width: 100%;
}
main.search.yoko .infobox>div:nth-of-type(2){
	width: 50%;
}
main.search.yoko .infobox>div:nth-of-type(3){
	width: 50%;
}
main.search.yoko .search-select-modal .infobox>div:nth-of-type(2)>div:nth-of-type(2)>div{
	width: 60%;
}
main.search.yoko .moneybox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
main.search.yoko .moneybox>div:first-of-type{
	width: 100%;
}
main.search.yoko .moneybox>p:nth-of-type(2),
main.search.yoko .moneybox>p:first-of-type{
	position :absolute;
	top: 10rem;
	left: 3%;
}
main.search.yoko .moneybox>p:nth-of-type(2){
	left: 52%;
}
main.search.yoko .moneybox>div:nth-of-type(2),
main.search.yoko .moneybox>div:nth-of-type(3){
	margin-top: 8rem;
	width: 48%;
	font-size: 2rem;
}
main.search.yoko .flgbox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
main.search.yoko .flgbox>div{
	font-size: 2rem;
	width: 48%;
	white-space: nowrap;
}
main.search.yoko .flgbox>div>.btn{
	width: 30%;
	white-space: nowrap;
}
main.search.yoko .search-select-modal .moneybox>div>div{
	width: 16rem;

}
main.search.yoko .search-select-modal{
	padding-bottom: 20rem;

}
main.search.yoko .search-select-modal .flgbox>div>span:first-of-type{
	font-size: 2.8rem;
	width: 35%;
}
main.search.yoko .planbox>.onebox{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
main.search.yoko .planbox>.onebox>p{
	font-size: 2.1rem;
	width: 50%;
}
main.search.yoko .btn.back{
	width: 20%;

}
main.search.yoko .onebox>.status{
	justify-content: start;
	flex-direction: row;
	align-items: center;
	padding: 0 1rem;

}
main.search.yoko .onebox>.status>span{
	width: 30%;
	font-size: 2.3rem;
}
main.search.yoko .onebox>.status>span.chat-in,
main.search.yoko .onebox>.status>span.chat-allow{
	text-align: center;




}
main.search.yoko .onebox>.status>span.new-chat,main.search.yoko .onebox>.status>span.advice-wish,main.search.yoko .onebox>.status>span.chat-disable{
	width: 50%;
	text-align: center;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;

}
main.search.yoko .lists>.onebox>.info>p{
	display: inline-block;
	width: 100%;
	font-size: 2.3rem;
}
main.search.yoko .onebox>.info{
	padding: 0 1rem;
}
main.search.yoko .lists>.onebox>.info>p:nth-of-type(2){
	width: 40%;
}
main.search.yoko .lists>.onebox>.info>p:nth-of-type(3){
	width: 48%;
	white-space: nowrap;


}
main.search .header>div:first-of-type{
	height: 10rem;

}
main.search.yoko .lists{
	padding: 0 8rem;

}

main.search.yoko .moneybox span{
	white-space: nowrap;
}
#expert_notice_icon{
	position:relative;
}
#expert_notice_icon .num{
	position: absolute;
	width: 3rem;
	height: 3rem;
	background-color: #ff5858;
	color: #fff;
	border-radius: 100vh;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	right: 1rem;

}

.no-subscription-logout{
	margin: 0 auto;
	margin-top: 5rem;
	background-color: #B4B4B4;
	color: #fff;
}
.chat-disable-trial{
	margin-top: 2rem;
	font-size: 2.0rem;
	text-align: center;

}
.select-contract{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,.2);
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
}
.select-contract>div{
	width: 80%;
	max-width: 1020px;
	background-color: #fff;
	border-radius: 2rem;
	padding: 5rem 3rem;
	font-size: 2.5rem;
	line-height: 1.8;
	font-weight: 500;
	position: relative;
}
.select-contract>div>span{
	position: absolute;
	display: block;
	right: 1rem;
	top: .5rem;
	width: 3rem;
	height: 3rem;
}
.select-contract>div>span>img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.select-contract>div>div{
	text-align: center;
}
.select-contract .btn{
	display: inline-block;
	width: 45%;
	padding: 1.5rem 3rem 1.3rem 3rem;
	color: #333;
	text-align: center;
	font-weight: 700;
	margin: 3rem 1rem 0 1rem;
}

.main.show-data{
	padding: 10rem 3rem 20rem 3rem;
}
.main.show-data .btn{
	margin-top: 2rem;
	padding: 1.8rem 4rem 1.5rem 4rem;

}
.main.show-data .infobox>div>div:first-of-type,
.main.show-data label{
	font-size: 2.5rem;
	background-color: #ff5050;
	color: #fff;
	padding: 1rem 1rem;

}
.main.show-data .infobox>div>div:first-of-type{
	margin-top: 5rem;

}
.main.show-data .infobox>div.first>div:first-of-type{
	margin-top: 2rem;

}
.main.show-data .title{
	font-size: 3.5rem;
	text-align: center;
	margin-top: 5rem;


}

.main.show-data .infobox>div>div:nth-of-type(2),
.main.show-data .text{
	padding-left: 1.5rem;
}
.main.show-data .infobox>div>div:nth-of-type(2){
	font-size: 2.8rem;
	margin-top: 1.5rem;
}
.main.show-data .text.prefecture{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.main.show-data .text.prefecture>span{
	display: block;

}
.main.show-data .btnline{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin-top: 5rem;

}
.main.show-data .btnline>.top{
	background-color: #ccc;
}
.chatdatabox>.plusone{

	margin: 3rem 3% 0 3% !important;
	font-size: 2rem !important;

	border: .4rem solid #B4B4B4;
	background-color: #ffc4c4;
	border-radius: .2rem;
	padding: 2rem !important;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center !important;
	align-items: center !important;
	position: relative;

}
.search .chatdatabox>.plusone{
	margin: 2rem 0 0 0 !important;
	font-size: 1.7rem !important;
	padding: .5rem !important;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}
.chatdatabox>.plusone::before{

    content: ""; /* content は空にするか、必要に応じてテキストを設定 */
    position: absolute;
    top: -3rem; /* 位置を調整してください */
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* 三角形なので幅は0 */
    height: 0; /* 三角形なので高さは0 */
    border-left: 3rem solid transparent;  /* 三角形の底辺の半分の幅 */
    border-right: 3rem solid transparent; /* 三角形の底辺の半分の幅 */
    border-bottom: 3rem solid #ffc4c4; /* 三角形の高さと色 */	
	z-index: 2;
}
.chatdatabox>.plusone::after{ /* 大きい方の三角形（背面、ボーダー色） */
    content: "";
    position: absolute;
    top: -3.4rem; /* ::before より少し上に配置（ボーダーの太さ分考慮） */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    /* ::before より少し大きいサイズにする */
    border-left: 3.4rem solid transparent; /* 3rem + 0.4rem (ボーダーの太さ) */
    border-right: 3.4rem solid transparent; /* 3rem + 0.4rem (ボーダーの太さ) */
    border-bottom: 3.4rem solid #B4B4B4; /* ボーダーの色（本体のボーダー色と同じ） */
    z-index: 1; /* 背面に表示 */
}
.chatdatabox>.plusone>span{
	color: #ff5858;
	z-index: 3;
}