@charset "utf-8";


@font-face {
	font-family: 'LINE';
	src: url('../webfonts/LINESeedJP_OTF_Eb.woff') format('woff'),
			 url('../webfonts/LINESeedJP_OTF_Eb.ptf') format('opentype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'LINE';
	src: url('../webfonts/LINESeedJP_OTF_Rg.woff') format('woff'),
			 url('../webfonts/LINESeedJP_OTF_Rg.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
}



/*=========================================================

	Application all

==========================================================*/

html,body{
	margin: 0;
	padding: 0;
}
html{-webkit-text-size-adjust: 100%;}

body{
	text-align: center;
	font-family: 'LINE';
	font-weight: 400;
	line-height: 1.5;
	font-size: 15px;
	color: #142346;
	width: 100%;
}

a{
	transition: all .3s;
	text-decoration: none;
	position: relative;
	display: inline-block;
	-webkit-tap-highlight-color: rgba(0,172,193,0.5);
	color: #00acc1;
}

img{
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	border: 0;
}

h1,h2,h3,h4,h5,h6{
	font-weight: 700;
	font-size: 15px;
	margin: 0;
}

table{
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}
th,td{
	box-sizing: border-box;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

ul,ol{
	list-style-position: outside;
	padding: 0;
	margin: 0 0 0 20px;
}

form,fieldset,p,dl,dd{
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
}

input:not([type=file]),
select,textarea{
	box-sizing: border-box;
	font-family: 'LINE';
	font-weight: 500;
	font-size: 15px;
	color: #142346;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ccc;
}
input,button{
	line-height: 1;
	transition: all .3s;
}
button{
	display: inline-block;
	line-height: 40px;
	font-size: 15px;
	color: #fff;
	padding: 0 15px;
	border: 0;
	border-radius: 25px;
	background: #227aff;
	font-size:80%;
}
button:hover{
	cursor: pointer;
	opacity: 0.7;
}

select {
	position: relative;
	color: #142346;
	height: 40px;
	padding: 0 16px 0 10px;
	border: none;
	border-radius: 10px;
	border: 1px solid #ccc;
	background: #fff;
}

hr{
	display: none;
	clear: both;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
}

strong,b{
	font-weight: 700;
}

address,em{
	font-style: normal;
}

::selection {
	color:#fff;
	background: #3949ab;
}
::-moz-selection {
	color:#fff;
	background: #3949ab;
}


@media screen and (min-width: 737px){ /* PC */
	body{
		background: #ccc;
	}
	
	.brsp,
	.space-sp{
		display: none;
	}
	
	a[href^="tel:"]{
		pointer-events: none;
		text-decoration: none;
	}
}
@media screen and (max-width: 736px){ /* SP */
	.brpc,
	.space-pc{
		display: none;
	}
}


/*=========================================================

	Login

==========================================================*/

#login{
	width: 100%;
	height: 100dvh;
	background: #fff5f4;
}

#login-logo{
	padding: 80px 0 30px 0;
}
#login-logo img{
	width: auto;
	height: 60px;
	max-width: none;
}

#login-form{
	padding: 50px;
	margin: 0 15px;
	border-radius: 20px;
	box-shadow: 0 0 7px #ead8d6;
	background: #fff;
}

#login-form form div{
	margin-bottom: 15px;
}
#login-form form div input{
	width: 100%;
}

#login-form .button button{
	font-size: 110%;
	background: #fc5c6c;
}


@media screen and (min-width: 737px){ /* PC */
	#login-form{
		width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	#login-form form div input{
		width: 300px;
	}

}

@media screen and (max-width: 736px){ /* SP */
	
}



/*=========================================================

	Layout & Decoration

==========================================================*/

/*	Header
***********************************************************/

#header{
	display: flex;
	flex-wrap: wrap;
}
#header .rogo{
	width: 70px;
	padding: 15px 0 0 15px;
	display: flex;
}

#header .rogo2{
	width: 200px;
	padding: 31px 0 0 15px;
	display: flex;
	font-weight:normal;
	font-size: 80%;
}

#header .logout{
	font-size: 80%;
	padding: 15px 15px 0 0;
	margin-left: auto;
}
#header .logout a{
	color: #555;
}
#header .name a{
	color: #ffffff;
	text-decoration: underline;
}
#header dl.user-description{
	box-sizing: border-box;
	display: flex;
	font-size: 80%;
	color: #fff;
	width: 100%;
	padding: 15px;
	margin-top: 5px;
	background: #fc5c6c;
}
#header dl.user-description dt{
	width: 60px;
}
#header dl.user-description dt a{
	overflow: hidden;
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #fff;
}
#header dl.user-description dt a img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}
#header dl.user-description dd{
	text-align: left;
	margin-left: 10px;
}

#header dl.user-description dd span.point::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	background: url('../picture/icon_point.png') no-repeat;
	background-size: cover;
}

#header dl.user-description dd ul.my-button{
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 10px 0 0 0;
}
#header dl.user-description dd ul.my-button a{
	display: inline-block;
	line-height: 24px;
	color: #fc5c6c;
	padding: 0 10px;
	border-radius: 12px;
	background: #fff;
	font-size:80%;
}

@media screen and (min-width: 737px){ /* PC */
	
}

@media screen and (max-width: 736px){ /* SP */
	
}



/*	Contents
***********************************************************/

#container{
	width: 100%;
	padding-bottom: 91px;
}

.open{
	cursor: pointer;
}
#pop-up,
.overlay{
	display: none;
	transition: all .3s;
	opacity: 0;
}

#pop-up:checked + .overlay{
	display: block;
	opacity: 1;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100dvh;
}

.window {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
	border-radius: 10px;
	background: #fff;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 10px;
	right: 10px;
	line-height: 1;
	font-size: 25px;
	color: #777;
}


@media screen and (min-width: 737px){ /* PC */
	#container{
		width: 640px;
		margin: auto;
		background: #fff;
	}
}

@media screen and (max-width: 736px){ /* SP */
	
}



/*	Footer
***********************************************************/

#footer{
	position: fixed;
	z-index: 9999;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
}
#footer ul{
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	padding: 15px;
	margin: 0;
	border-top: 1px solid #ccc;
}
#footer ul li{
	width: 25%;
}
#footer ul li a{
	position: relative;
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-size: 10px;
	color: #777;
}
#footer ul li a i{
	font-size: 20px;
	margin-bottom: 5px;
}
#footer ul li a .notice-num{
	position: absolute;
	top: -5px;
	right: 0;
	display: block;
	line-height: 18px;
	width: 18px;
	color: #fff;
	border-radius: 9px;
	background: #fc5c6c;
}

#recommend-event3{
	position: fixed;
	right: 0;
	bottom: 291px;
	writing-mode: vertical-rl;
}
#recommend-event3 img{
	display: inline-block;
}
.recommend-event-close3{
	cursor: pointer;
	line-height: 1;
	font-size: 25px;
	color: #777;
}
#ad-close3{
	display: none;
	transition: all .3s;
}

#recommend-event2{
	position: fixed;
	right: 0;
	bottom: 141px;
	writing-mode: vertical-rl;
}
#recommend-event2 a{
	display: inline-block;
	color: #fff;
	padding: 10px 5px 10px 5px;
	border-radius: 10px 0 0 10px;
	background: #28a594;
}
.recommend-event-close2{
	cursor: pointer;
	line-height: 1;
	font-size: 25px;
	color: #777;
}
#ad-close2{
	display: none;
	transition: all .3s;
}
#ad-close:checked ~ a,
#ad-close:checked ~ label,
#ad-close:checked ~ span{
	opacity: 0;
	display: none;
}
#recommend-event2 span.recommend-event-num{
	position: absolute;
	left: -5px;
	bottom: -5px;
	display: block;
	writing-mode: horizontal-tb;
	line-height: 18px;
	font-size: 10px;
	width: 18px;
	color: #fff;
	border-radius: 9px;
	background: #fc5c6c;
}

#recommend-event{
	position: fixed;
	right: 0;
	bottom: 75px;
	writing-mode: vertical-rl;
}
#recommend-event a{
	display: inline-block;
	color: #fff;
	padding: 10px 5px 10px 5px;
	border-radius: 10px 0 0 10px;
	background: #777777;
}

.recommend-event-close{
	cursor: pointer;
	line-height: 1;
	font-size: 25px;
	color: #777;
}
#ad-close{
	display: none;
	transition: all .3s;
}
#ad-close:checked ~ a,
#ad-close:checked ~ label,
#ad-close:checked ~ span{
	opacity: 0;
	display: none;
}

#recommend-event span.recommend-event-num{
	position: absolute;
	left: -5px;
	bottom: -5px;
	display: block;
	writing-mode: horizontal-tb;
	line-height: 18px;
	font-size: 10px;
	width: 18px;
	color: #fff;
	border-radius: 9px;
	background: #fc5c6c;
}


@media screen and (min-width: 737px){ /* PC */
	#footer{
		right: 0;
		width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width: 736px){ /* SP */
	
}



/*=========================================================

	profile

==========================================================*/

.point-get{
	animation-name: fadein;
	animation-duration: 2.5s;
}

#point-get-wrap{
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100dvw;
	height: 100dvh;
	background: rgba(0,0,0,0.5);
}
#point-get-wrap span{
	line-height: 40px;
	font-size: 110%;
	color: #fff;
	padding: 0 30px;
	border-radius: 20px;
	background: #c97200;
}
#point-get-wrap span i::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	background: url('../picture/icon_point.png') no-repeat;
	background-size: cover;
}

.point-get2{
	animation-name: fadein;
	animation-duration: 2.5s;
}

#point-get2-wrap{
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100dvw;
	height: 100dvh;
	background: rgba(0,0,0,0.5);
}
#point-get2-wrap span{
	line-height: 40px;
	font-size: 110%;
	color: #fff;
	padding: 0 30px;
	border-radius: 20px;
	background: #007fd3;
}
#point-get2-wrap span i::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	background: url('../picture/icon_point.png') no-repeat;
	background-size: cover;
}

.point-get3{
	animation-name: fadein;
	animation-duration: 2.5s;
}

#point-get3-wrap{
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100dvw;
	height: 100dvh;
	background: rgba(0,0,0,0.5);
}
#point-get3-wrap span{
	line-height: 40px;
	font-size: 110%;
	color: #fff;
	padding: 0 30px;
	border-radius: 20px;
	background: #ff0040;
}
#point-get3-wrap span i::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	background: url('../picture/icon_point.png') no-repeat;
	background-size: cover;
}



@keyframes fadein{
	0%{
		opacity: 0;
		transform: translatey(20px);
	}
	100%{
		opacity: 1;
		transform: translatey(0);
	}
}



ul.blacklist{
	text-align: right;
	margin-bottom:10px;
}
ul.blacklist li{
	list-style-type: none!important;
}


#search-sort{
	display: flex;
	padding: 15px;
}
#search-sort .sort a{
	display: inline-block;
	line-height: 24px;
	color: #142346;
	padding: 0 15px;
	margin-right: 10px;
	border-radius: 12px;
	background: #ddd;
}

#search-sort .search{
	margin-left: auto;
}
#search-sort .search form{
	box-sizing: border-box;
	text-align: left;
	width: 100%;
	padding: 30px;
}
#search-sort .search form dl dd{
	margin-bottom: 15px;
}
#search-sort .search form dl dd input[type=text]{
	width: 100%;
}

#search-sort .search form .search-button{
	text-align: center;
}
#search-sort .search form .search-button button{
	width: calc(50% - 30px);
	padding: 0;
}
#search-sort .search form .search-button button:first-child{
	margin-right: 10px;
	background: #fc5c6c;
}

#userlist{
	padding: 0 15px;
}
ul.recommend-userlist{
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0;
}
ul.recommend-userlist li{
	overflow: hidden;
	width: calc(33% - 6px);
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
ul.recommend-userlist li a{
	position: relative;
	color: #142346;
}
ul.recommend-userlist li a b.icon-new{
	position: absolute;
	top: 3px;
	right: 3px;
	display: inline-block;
	transform: rotate(15deg);
	line-height: 46px;
	font-size: 90%;
	color: #fff;
	width: 46px;
	border-radius: 23px;
	background: #fc5c6c;
}

ul.recommend-userlist li a .user-thumb{
	overflow: hidden;
	aspect-ratio: 3 / 2.5;
	width: 100%;
}
ul.recommend-userlist li a .user-thumb img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

ul.recommend-userlist li a .user-profile{
	text-align: left;
	font-size: 90%;
	padding: 10px;
}
ul.recommend-userlist li a .last-login{
	font-size: 70%;
	color: #777;
	margin-bottom: 3px;
}



/*=========================================================

	my profile

==========================================================*/

#myprofile{
	text-align: left;
	padding: 30px 15px;
}

#myprofile .referral-code{
	text-align: left;
	color: #fff;
	padding: 15px;
	margin-bottom: 30px;
	border-radius: 10px;
	background: #0055d4;
}
#myprofile .referral-code em{
	color: #db0101;
	padding: 0 7px;
	margin: 0 3px;
	border-radius: 5px;
	background: #fff;
}

#myprofile form dl dt span{
	font-size: 80%;
	color: #f44336;
	margin-left: 10px;
}
#myprofile form dl dd{
	margin-bottom: 15px;
}

#myprofile form input[type=text],
#myprofile form input[type=email],
#myprofile form textarea{
	width: 100%;
}

#myprofile form dl dd img{
	margin-bottom: 5px;
}

#myprofile form .profile-edit-send{
	text-align: center;
	padding-top: 15px;
}
#myprofile form .profile-edit-send button{
	background: #fc5c6c;
}

#referral-list{
	padding: 15px;
	background: #fff5f4;
}
#referral-list h2{
	font-size: 130%;
	margin-bottom: 30px;
}
#referral-list ul{
	overflow-x: scroll;
	display: flex;
	gap: 10px;
	list-style: none;
	width: 100%;
	margin: 0;
}
#referral-list ul li{
	width: 130px;
}
#referral-list ul li a{
	overflow: hidden;
	width: 130px;
	height: 130px;
	border-radius: 50%;
}
#referral-list ul li a img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
	margin-bottom: 5px;
}
#referral-list ul li .referral-name{
	font-size: 80%;
}


/*=========================================================

	time line

==========================================================*/

#timeline{
	padding: 0 15px;
}

.message-form{
	text-align: left;
}
.message-form ul.message-change{
	position: relative;
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 30px 0;
}
.message-form ul.message-change span.message-form-button{
	display: inline-block;
	line-height: 1;
	padding: 10px 15px;
	color: #fff;
	border-radius: 5px;
	background: #009688;
	font-size:80%;
}
.message-form ul.message-change span.message-form-button:hover{
	cursor: pointer;
}
.message-form ul.message-change span.message-form-button.b-image{
	background: #cddc39;
}

.message-form ul.message-change li form{
	position: absolute;
	top: 46px;
	/*bottom: 46px;*/
	left: 0;
	z-index: 1000;
	justify-content: flex-start;
	align-items: flex-end;
	flex-wrap: wrap;
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 0 7px rgba(0,0,0,0.5);
	background: #fff;
}
.message-form ul.message-change li textarea{
	width: 100%;
	height: 5em;
	border: 1px solid #ccc;
}
.message-form ul.message-change li button{
	margin-top: 5px;
	background: #fc5c6c;
}

.message-form ul.message-change li form .stamp-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 5px 4px;
	width: 100%;
	height: 200px;
	overflow-y: scroll;
	margin-bottom: 10px;
}
.message-form ul.message-change li form .stamp-list span{
	box-sizing: border-box;
	width: calc(100% / 3 - 3px);
	padding: 5px;
	border: 1px solid #ccc;
}

.message-wrap{
	margin-top: 30px;
}

#profile-message .message-wrap{
	min-height: 230px;
}



.message-wrap > div{
	margin-bottom: 15px;
}
.message-wrap .message-day{
	position: relative;
	margin-bottom: 15px;
}
.message-wrap .message-day::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 1px;
	background: #ccc;
}
.message-wrap .message-day span{
	padding: 0 15px;
	background: #ffffff;
}
.message-wrap > div{
	margin-bottom: 15px;
}
.message-wrap .message-day2{
	position: relative;
	margin-bottom: 15px;
}
.message-wrap .message-day2::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 1px;
	background: #ccc;
}
.message-wrap .message-day2 span{
	padding: 0 15px;
}


.message-wrap .message-day3{
	position: relative;
}
.message-wrap .message-day3 span{
	display: block;
	line-height: 22px;
	font-size: 80%;
	color: #fff;
	border-radius: 20px;
	background: #aaa;
}


.message-opponent2{
	display: block;
	text-align: left;
	font-size: 90%;
}

.message-wrap .message-opponent{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	font-size: 100%;
}
.message-wrap .message-opponent span{
	overflow: hidden;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: #fff;
}
.message-wrap .message-opponent p,
.message-wrap .message-me p{
	box-sizing: border-box;
	position: relative;
	max-width: calc(100% - 106px);
	font-size: 90%;
	padding: 10px;
	margin-left: 10px;
	border-radius: 5px;
	background: #fff1fd;
	filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5));
}
.message-wrap .message-opponent p::before{
	content: "";
	position: absolute;
	top: 10px;
	left: -8px;
	border-right: 8px solid #fff1fd;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.message-wrap .message-opponent2 p,
.message-wrap .message-me2 p{
	box-sizing: border-box;
	position: relative;
	max-width: calc(100% - 106px);
	font-size: 90%;
	padding: 10px;
	margin-left: 10px;
	border-radius: 5px;
	background: #ffffff;
	filter: drop-shadow( 0 0 1px rgba(0,0,0,0.5));
}

.message-wrap .message-opponent a.timeline-delete{
	margin-left: 10px;
}

.message-wrap .message-opponent div.message-opponent-name{
	font-size: 80%;
	width: calc(100% - 47px);
	margin: 3px 0 0 47px;
	color:#777;
}


.message-wrap .message-me{
	display: flex;
	justify-content: flex-end;
	text-align: right;
}
.message-wrap .message-me span.already-read{
	flex-shrink: 0;
	font-size: 80%;
	color: #777;
}
.message-wrap .message-me.male p,
.message-wrap .message-me.female p{
/*	color: #fff;*/
text-align:left;
	background: #333333;
	margin-right: 10px;
	background: #daffec;
	font-size: 90%;
}
.message-wrap .message-me.female p{
/*	background: #ec407a;*/
	background: #daffec;
}
.message-wrap .message-me p::after{
	content: "";
	position: absolute;
	top: 10px;
	right: -8px;
	border-left: 8px solid #daffec;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
.message-wrap .message-me.female p::after{
	border-left: 8px solid #daffec;
}


/*=========================================================

	opponent profile

==========================================================*/

#profile{
	padding: 30px 15px 0 15px;
}

.profile-photo{
	margin-bottom: 50px;
}
.profile-photo h2{
	font-size: 100%;
}
.profile-photo h2 .main-photo{
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	margin: 0 auto 15px auto;
	border-radius: 75px;
}
.profile-photo h2 .main-photo img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

.profile-photo .other-photo{
	box-sizing: border-box;
	overflow-x: scroll;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin-top: 30px;
}
.profile-photo .other-photo img{
	width: 50%;
}

ul.profile-detail{
	list-style: none;
	text-align: left;
	margin: 0;
}
ul.profile-detail li{
	margin-top: 15px;
}
ul.profile-detail li span{
	color: #fc5c6c;
}

#profile-archive-event,
#profile-timeline{
	padding-top: 50px;
}
#profile-archive-event h2,
#profile-timeline h2{
	text-align: left;
	font-size: 130%;
	padding-bottom: 10px;
	border-bottom: 2px solid #cfd8dc;
}
#profile-archive-event ul{
	list-style: none;
	margin: 30px 0 0 0;
}
#profile-archive-event ul li{
	display: flex;
	gap: 10px;
	text-align: left;
	width: 100%;
}
#profile-archive-event ul li ~ li{
	margin-top: 15px;
}
#profile-archive-event ul li .archive-event-thumb{
	width: calc(30% - 10px);
	height: 60px;
}
#profile-archive-event ul li .archive-event-thumb img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

#profile-archive-event ul li .archive-event-title{
	font-size: 80%;
	color: #777;
	width: 70%;
	margin-left: 10px;
}
#profile-archive-event ul li .archive-event-title em{
	font-size: 120%;
	color: #142346;
	margin-bottom: 10px;
}

#profile-message{
	padding-top: 50px;
}
#profile + #profile-message{/* profile2.php */
	padding-right: 15px;
	padding-left: 15px;
}
#profile-message h2{
	text-align: left;
	font-size: 130%;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 2px solid #cfd8dc;
}

.timeline-more,
.message-more{
	margin-top: 30px;
}
.timeline-more a,
.message-more a{
	display: inline-block;
	line-height: 50px;
	font-size: 15px;
	color: #fff;
	padding: 0 50px;
	border: 0;
	border-radius: 25px;
	background: #fc5c6c;
}


/*=========================================================

	event

==========================================================*/

#event,
#event-single{
	padding: 30px 15px 0 15px;
}
#event h2,
#event-single h2{
	font-size: 130%;
	margin-bottom: 30px;
}

.event-list{
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 0 7px rgba(0,0,0,0.5);
}
.event-list ~ .event-list{
	margin-top: 50px;
}
.event-title{
	display: flex;
	flex-direction: column;
}
.event-title .event-photo{
	order: -1;
	overflow: hidden;
	max-height: 250px;
}
.event-title .event-photo img{
	max-width: none;
	width: 100%;
}

.event-title h3{
	text-align: left;
	font-size: 120%;
	margin: 10px 15px;
}
.event-detail .event-title h3{
	margin-left: 0;
	margin-right: 0;
}

.event-title .event-planner{
	display: grid;
	grid-template-columns: 50px auto;
	grid-column-gap: 10px;
	grid-row-gap: 0px;
	margin: 0 15px 10px 15px;
}
.event-detail .event-title .event-planner{
	margin-left: 0;
	margin-right: 0;
}

.event-title .event-planner a{
	grid-area: 1 / 1 / 3 / 2;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}
.event-title .event-planner a img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}
.event-title .event-planner span:first-of-type{
	grid-area: 1 / 2 / 2 / 3;
	text-align: left;
	font-size: 80%;
	color: #777;
}
.event-title .event-planner span:last-of-type{
	grid-area: 2 / 2 / 3 / 3;
	text-align: left;
}

.event-date{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	text-align: left;
	margin: 0 15px;
}
.event-detail .event-date{
	margin-left: 0;
	margin-right: 0;
}

.event-list .event-link{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
	text-align: left;
	padding-top: 15px;
	margin: 15px;
	border-top: 1px solid #ccc;
	font-size:80%;
}
.event-list .event-link a{
	display: inline-block;
	line-height: 30px;
	color: #fff;
	padding: 0 20px;
	border-radius: 23px;
	border: 1px solid #fc5c6c;
	background: #fc5c6c;
	font-size:90%;
}

.event-list .event-link span.entry-ok{
	color: #fb8c00;
}
.event-list .event-link span.entry-stop{
	color: #78909c;
}
.event-list .event-link span.entry-on{
	color: #4caf50;
}

.event-list b.icon-new{
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
	transform: rotate(17deg);
	line-height: 100px;
	font-size: 200%;
	color: #fff794;
	width: 100px;
	border-radius: 50px;
	background: #fc5c6c;
}


.event-comment{
	text-align: left;
	padding: 15px 0;
	margin-top: 15px;
	border: 1px dotted #ccc;
	border-width: 1px 0;
}

.entry-userlist{
	padding: 15px;
	margin-top: 50px;
	border-radius: 10px;
	background: #fff5f4;
}
.entry-userlist h3{
	font-size: 130%;
	margin-bottom: 30px;
}
.entry-userlist ul{
	list-style: none;
	margin: 0;
}
.entry-userlist ul li ~ li{
	margin-top: 15px;
}

.entry-userlist ul li span.entryc{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
	filter: blur(8px)
}
.entry-userlist ul li span.entryc em{
	overflow: hidden;
	width: 70px;
	height: 70px;
	border-radius: 35px;
}
.entry-userlist ul li span.entryc em img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}
.entry-userlist ul li span.entryc span{
	text-align: left;
	color: #142346;
}
.entry-userlist ul li span.entryc span small{
	font-size: 80%;
	color: #777;
}




.entry-userlist ul li span.entryc2{
	display: flex;
	justify-content: flex-start;
	align-items: left;
	gap: 15px;
}
.entry-userlist ul li span.entryc2 em{
	overflow: hidden;
	width: 70px;
	height: 70px;
	border-radius: 35px;
}
.entry-userlist ul li span.entryc2 em img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}
.entry-userlist ul li span.entryc2 span{
	text-align: left;
	color: #142346;
}
.entry-userlist ul li span.entryc2 span small{
	font-size: 80%;
	color: #777;
}

/*
.entry-userlist ul li a{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
	filter: blur(8px)
}
.entry-userlist ul li a em{
	overflow: hidden;
	width: 70px;
	height: 70px;
	border-radius: 35px;
}
.entry-userlist ul li a em img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}
.entry-userlist ul li a span{
	text-align: left;
	color: #142346;
}
.entry-userlist ul li a span small{
	font-size: 80%;
	color: #777;
}
*/

.entry-status{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 30px;
}

.entry-status div{
	width: 100%;
}

.entry-status a{
	display: inline-block;
	line-height: 46px;
	color: #fff;
	padding: 0 30px;
	border-radius: 23px;
	border: 1px solid #fc5c6c;
	background: #fc5c6c;
}

.entry-status span.entry-ok{
	color: #fb8c00;
}
.entry-status span.entry-stop{
	color: #78909c;
}
.entry-status span.entry-on{
	color: #4caf50;
}


/*=========================================================

	message user list

==========================================================*/

#message-userlist{
	padding: 30px 15px 0 15px;
}
#message-userlist h2{
	font-size: 130%;
	margin-bottom: 30px;
}

#message-userlist ul{
	list-style: none;
	margin: 0;
}
#message-userlist ul li{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
#message-userlist ul li ~ li{
	margin-top: 15px;
}

#message-userlist ul li > a.message-list-icon{
	overflow: hidden;
	width: 70px;
	height: 70px;
	border-radius: 35px;
}
#message-userlist ul li > a.message-list-icon img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

#message-userlist ul li .message-list-name{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
}
#message-userlist ul li .message-list-name a{
	color: #142346;
}
#message-userlist ul li .message-list-name a.message-delete{
	font-size: 80%;
	color: #fff;
	padding: 3px 7px;
	border-radius: 5px;
	background: #e53935;
}
#message-userlist ul li .message-list-name small{
	font-size: 80%;
	color: #777;
	margin-right: 5px;
	margin-left: auto;
}

#message-userlist ul li span.message-num{
	position: absolute;
	top: 0;
	left: 61px;
	display: inline-block;
	line-height: 18px;
	font-size: 10px;
	width: 18px;
	color: #fff;
	border-radius: 9px;
	background: #fc5c6c;
}


/*=========================================================

	message

==========================================================*/

#message{
	padding: 30px 15px 0 15px;
}
#message .profile-photo{
	margin-bottom: 0;
}


/*=========================================================

	group talk

==========================================================*/

#group-talk-list,
#group-talk{
	padding: 30px 15px 0 15px;
}
#group-talk-list h2,
#group-talk h2{
	font-size: 130%;
	margin-bottom: 30px;
}
#group-talk h2{
	margin-bottom: 15px;
}

p.group-comment{
	margin-bottom: 15px;
}

.group-create{
	margin-bottom: 30px;
}
.group-create a{
	display: inline-block;
	line-height: 46px;
	color: #fff;
	padding: 0 30px;
	border-radius: 23px;
	background: #fc5c6c;
	font-size:80%;
}

#group-talk .group-participationlist{
	margin-top: 50px;
}

ul.group-list{
	list-style: none;
	text-align: left;
	margin: 0;
}
ul.group-list li{
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	font-size: 90%;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
ul.group-list li ~ li{
	margin-top: 10px;
}
ul.group-list li a.group-list-icon{
	width: 80px;
	height: 100px;
	margin-right: 10px;
}
ul.group-list li a.group-list-icon img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

ul.group-list li .group-name{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: calc(100% - 100px);
	padding: 10px 0;
}

ul.group-list li .group-edit{
	text-align: right;
	margin-top: auto;
}
ul.group-list li .group-edit a{
	display: inline-block;
	line-height: 26px;
	font-size: 80%;
	color: #fff;
	padding: 0 10px;
	margin-left: 10px;
	border-radius: 13px;
	background: #00acc1;
}

ul.group-list li span.message-num{
	position: absolute;
	top: 5px;
	left: 58px;
	text-align: center;
	line-height: 18px;
	font-size: 10px;
	width: 18px;
	color: #fff;
	border-radius: 9px;
	background: #fc5c6c;
}

form.group-entry{
	margin-top: 30px;
	text-align: center;
}
form.group-entry button{
	background: #fc5c6c;
}

p.group-create-button{
	text-align: center;
	margin-top: 30px;
}
p.group-create-button button:first-child{
	margin-right: 15px;
	background: #fc5c6c;
}

form.group-create dl dd.event-capacity input{
	width: 100px !important;
	margin-right: 5px;
}

form.group-create dl dd.event-capacity2 input{
	width: 80% !important;
	margin-left: 5px;
}

/*=========================================================

	event control panel

==========================================================*/

#event-control{
	padding: 30px 15px 0 15px;
}
#event-control h2{
	font-size: 130%;
	margin-bottom: 30px;
}

ul.event-sort{
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 30px 0;
}
ul.event-sort li a{
	display: inline-block;
	line-height: 30px;
	padding: 0 15px;
	border-radius: 16px;
	border: 2px solid #00acc1;
	background: #fff;
}
ul.event-sort li.current a{
	color: #fff;
	background: #00acc1;
}

#event-control .event-list{
	padding: 15px;
}

#event-control .event-list .event-status{
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}
#event-control .event-list .event-status span,
#event-control .event-list .event-status a{
	line-height: 30px;
	font-size: 90%;
	color: #fff;
	padding: 0 15px;
	border-radius: 15px;
	background: #e53935;
}
#event-control .event-list .event-status span.publish-on{
	background: #4caf50;
}
#event-control .event-list .event-status span.publish-none{
	background: #78909c;
}

#event-control .event-list .event-title{
	margin-bottom: 10px;
}
#event-control .event-list .event-title h3{
	margin: 10px 0;
}
#event-control .event-list .event-title .event-planner,
#event-control .event-list .event-date{
	margin: 0;
}

.event-entryuser{
	margin-top: 50px;
}
.event-entryuser h4{
	font-size: 130%;
	margin-bottom: 30px;
}

ul.entryuser-list{
	list-style: none;
	padding-top: 5px;
	margin: 5px 0;
	border-top: 1px solid #ccc;
}
ul.entryuser-list li{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 4px;
	border-bottom: 1px solid #ccc;
}
ul.entryuser-list li ~ li{
	margin-top: 5px;
}

ul.entryuser-list li a.list-icon{
	overflow: hidden;
	width: 50px;
	height: 50px;
	margin: 0 5px;
	border-radius: 35px;
}
ul.entryuser-list li a.list-icon img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

ul.entryuser-list li .entry-date{
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	text-align: left;
}
ul.entryuser-list li .entry-date span{
	font-size: 70%;
	color: #777;
}

ul.entryuser-list li p{
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	margin-top: 2px;
	border-radius: 5px;
	background: #eee;
}

.event-entryuser form .event-message{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 15px 0;
}
.event-entryuser form .event-message textarea{
	font-size: 90%;
	width: calc(100% - 100px);
	height: 7em;
}
.event-entryuser form .event-message button{
	line-height: 40px;
	width: 90px;
	padding: 0;
	background: #fc5c6c;
}





.event-entryuser form p.event-message-partner{
	font-size: 90%;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	background: #ffb300;
}

.event-entryuser form .event-button{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin-top: 15px;
}
.event-entryuser form .event-button button{
	line-height: 40px;
/*	width: calc(50% - 5px);*/
	background: #00bcd4;
}
.event-entryuser form .event-button button:nth-child(2){
	background: #607d8b;
}
.event-entryuser form .event-button button:nth-child(3){
	background: #90659b;
}


.evev{
	position: relative;
	font-size: 90%;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	background: #fc5c6c;
	text-align: left;
  }

.evev::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: #fc5c6c transparent transparent transparent;
	border-width: 11px 10px 0 10px;
  }
  
.evev2{
	position: relative;
	font-size: 90%;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	background: #00bcd4;
	text-align: left;
  }

.evev2::after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    border-bottom-color:#00bcd4;
    bottom:100%;
    left:10px;
  }

  .progressbar {
    position: relative;
    margin-bottom: 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.progressbar li {
    position: relative;
    list-style-type: none;
    text-align: center;
    text-transform: uppercase;
    width: 33.333%;
    color: #999999;
    font-weight: normal;
	font-size:90%;
}
.progressbar li:before {
    display: block;
    width: 18px;
    height: 18px;
    margin: 7px auto 20px auto;
    content: '';
    text-align: center;
    border-radius: 50%;
    background-color: #F5F5F5;
}
.progressbar li:after {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #F5F5F5;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active,
.progressbar li.complete{
    color: #fc5c6c;
}
.progressbar li.active:before,
.progressbar li.complete:before {
    background-color: #fc5c6c;
}
.progressbar li.active:after,
.progressbar li.complete:after {
    background-color: #fc5c6c;
}

#user2 ul.registrant-list2{
	list-style: none;
	margin: 0 -15px 0 0;
	display: flex;
}
#user2 ul.registrant-list2 li{
	margin-right: 0px;
	display: inline;
}
#user2 ul.registrant-list2 li .registrant-user-icon2{
	overflow: hidden;
	aspect-ratio: 3 / 3;
	width: 100%;
	border-radius: 50%;
	margin-bottom: 10px;
}
#user2 ul.registrant-list2 li .registrant-user-icon2 img{
	object-fit: cover;
	max-width: none;
	width: 100%;
	height: 100%;
}

#user2 ul.registrant-list2 li .registrant-comment2{
	text-align: center;
}

.responsive {
	width: 100%;
	aspect-ratio: 16/9;
	}

	.box-text-notice {
		position: relative;
		border: 3px solid #da4033;
		background-color: #fff696;
		border-radius: 5px;
		margin: 20px 10px 0 10px;
		padding: 20px 20px 5px 20px;
		text-align: left;
	}
	.box-text-notice::before {
		content: "Daysを利用する上でのルール";
		position: absolute;
		background-color: #ffffff;
		color: #da4033;
		font-weight: bold;
		left: 20px;
		top: -18px;
		padding: 5px;
		margin-top:3px;
	}
	
	.box-text-point {
		position: relative;
		border: 3px solid #00eeee;
		border-radius: 5px;
		margin: 20px 10px 0 10px;
		padding: 20px 20px 5px 20px;
		text-align: left;
	}
	.box-text-point::before {
		content: "Days活用POINT";
		position: absolute;
		background-color: #ffffff;
		color: #033;
		font-weight: bold;
		left: 20px;
		top: -18px;
		padding: 5px;
		margin-top:3px;
	}

	/* アイコンを下に表示 */
	.balloon{
		position: relative;
		padding: 5px;
		background-color: #c2f6ff;
		border-radius: 10px;
		margin:10px;
	  }

.balloon::before{
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 20px;
	bottom: -10px;
	border-top: 10px solid #c2f6ff;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
  }

  .fordays ol li::marker{
    color: #df1616;
	font-weight: bold;
    line-height: 3;
}
.fordays ol li{
    text-align: left;
}
.fordays{
padding: 10px;
background-color: #f1fff3;
border-bottom: 2px solid #139b00;
border-left: 2px solid #139b00;
border-right: 2px solid #139b00;
text-align: left;
}

.fordays2 ol li::marker{
    color: #0561b7;
	font-weight: bold;
    line-height: 3;
}
.fordays2 ol li{
    text-align: left;
}
.fordays2{
padding: 10px;
background-color: #d8edff;
border-bottom: 2px solid #00629b;
border-left: 2px solid #00629b;
border-right: 2px solid #00629b;
text-align: left;
}


.details {
	transition: .3s;
	overflow: hidden;
	margin-top: 0px;
/*	padding-bottom: 20px;*/
	&:last-of-type {
		margin-bottom: 0;
	}
}
.details[open] {
	margin-top: 0;
} 
.details-summary {
	display: block;
	padding: 15px;
    transition: .3s;
/*	transform: translateY(10px);*/
	background-color: #139b00;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	&:hover {
		cursor: pointer;
	}
}
.details-summary::-webkit-details-marker {
	display: none;
}
.details[open] .details-summary {
	transform: translateY(0);
}
.details-content {
	padding: 10px;
	background-color: #d8ffdb;
	border-bottom: 2px solid #139b00;
	border-left: 2px solid #139b00;
	border-right: 2px solid #139b00;
}

.details2 {
	transition: .3s;
	overflow: hidden;
	margin-top: 0px;
	padding-bottom: 20px;
	&:last-of-type {
		margin-bottom: 0;
	}
}
.details2[open] {
	margin-top: 0;
	padding-bottom: 10px;
} 
.details-summary2 {
	display: block;
	padding: 15px;
    transition: .3s;
/*	transform: translateY(10px);*/
	background-color: #0561b7;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	&:hover {
		cursor: pointer;
	}
}
.details-summary2::-webkit-details-marker {
	display: none;
}
.details2[open] .details-summary2 {
	transform: translateY(0);
}
.details-content2 {
	padding: 10px;
	background-color: #d8edff;
	border-bottom: 2px solid #00629b;
	border-left: 2px solid #00629b;
	border-right: 2px solid #00629b;
}

.details3 {
    padding: 1rem;
    background: #e9e9e9;
    border-radius: 5px;
    margin: 10px auto;
}
details3[open] .in-details {
    animation: fadeIn 0.5s ease;
}
.details-summary3 {
	outline: none;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}