@charset "utf-8";
/* CSS Document */
:root{
	--bg: #FBFBFB;
	--subbg:#FBFBFB;
	--headerbg:#FBFBFB;
	--orange: #C4D9FF;
	--pink: #FDB5CE;
	--lightblue:#C5BAFF;
	--basicbtn:#57595B;
	--chbtn:#452829;
	--black: #000000;
}

body {
	font-family: "SN Pro", sans-serif;
	font-size: 20px;
	background: var(--bg);
	color: var(--black); /*#313131 */
	padding: 0px;
	margin: 0px;
	z-index: 9999;
}
header {
	border-bottom: dotted 5px #555;
	background:var(--subbg);
	display: flex;
	width: 100%;
	height: 100px;
	box-sizing: border-box;
}
.wrapper{
	background-color: var(--bg);
	width: 100%;
	height: 100%;
	margin:0 ;
	padding:0;
}

.inwrapper {
	background-color: var(--subbg);
	width: 80%;
	height: 100%;
	margin: 0 auto;
	padding: 20px; 
	overflow: hidden;
	box-sizing: border-box;

}

/* header.php */

.head_l{
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	}

.head_c{
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.head_r{
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 10px;
}
.mypage_image{
	cursor:pointer;
	display: flex; /* Flexboxを有効化 */
 	flex-direction: column; /* 縦並びに設定 */
	text-align: center;
	padding-left: 5px;
	margin:0;
}

.mypage_image img,
.user-row img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}
/* くるくるくまさん */
.wheel{
	height: 100px;
}
.wheel img {
	width: 50px;
	animation: roll-left-right 10s ease-in-out infinite;
	transform-origin: center;
}
.logo{
	width: 400px;
}

/* コロコロ */
@keyframes roll-left-right {
	0% {
		transform: translateX(-100px) rotate(0deg);
	}
	50% {
	transform: translateX(1500px) rotate(1440deg);
	}
	100%{
		transform: translateX(-100px) rotate(0deg);
	}

}

.pc-only {
	display: flex;
}

.sp-only {
	display: none;
}

/* スマホ */
@media screen and (max-width: 768px) {

	.pc-only {
		display: none;
	}

	.sp-only {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
	}
	.wheel{
		display: none;
	}

}

/* mid_header.php*/
.midinheader{
	background: var(--subbg);
	width: 100%;
	height: 50px;
	margin: 10px;
	padding: auto;
	display: flex;
	justify-content: space-between;
}

.r_midinhd{
	flex-direction: column;
}
.users{
	float: right;
	display: flex;
	justify-content: flex-end;
}
.user{
	margin:3px
}

/* admin.php */

.basic-buttons{
	display: block;
	font-family: "SN Pro", sans-serif; 
	text-decoration: none;
	font-size: 18px;
	background-color: var(--lightblue);
	border: 2px solid var(--lightblue);
	color :#FFFFFF;
	text-align:center;
	padding: 8px 15px;
	border-radius: 80px;
	margin-left: 5px;
	/*box-shadow: 5px 5px 15px #e6e1e1, -5px -5px 15px #ffffff;*/
}
.basic-buttons:hover {
	background: #fff;
	color:var(--lightblue);
}

.logout_buttons{
	display: block;
	text-decoration: none;
	font-size: 18px;
	background-color: var(--pink);
	color :#FFFFFF;
	text-align:center;
	padding: 8px 15px;
	border-radius: 80px;
	border: 2px solid var(--pink);
	margin-left: 5px;
	/*box-shadow: 5px 5px 15px #e6e1e1, -5px -5px 15px #ffffff;*/
}
.logout_buttons:hover {
	background: #fff;
	color:var(--pink);
}
.remove_button{
	border: none; /* ← 枠線を消す */
	outline: none; 
	border-radius: 70%;
	background: var(--orange)
}


.main-contents{
	display: flex;
	width: 100%;
	height: 100%;
}
.l_content {
	width: 40%;
	overflow: hidden; 
	position: relative;
	min-height: 600px; 
}

.r_content{
	width: 60%;

}

#sub-content{
	margin: 30px;
	padding:20px;
}
.inner_content{
	display: flex;
	justify-content: space-between;

}

/* calendar用 */
.calendar_content{
	width:100%;
}

.calendar_form{
	font-family: "SN Pro", sans-serif;
	width: 90%;
	padding: 10px;
}

#calendar{
	font-family: "Kosugi Maru", sans-serif;
	color: black;
	font-size: 18px;
}
#calendar button{
	padding: 5px 5px;
	background-color:var(--lightblue);
}

.fc-day-today {
	background: none !important;
	border-radius: 30px !important;
	border: 5px solid rgb(242, 96, 118,0.5) !important;

} 
.cursoledschedule{
	padding: 5px;
	height: 20px;
}


/* 土曜日*/
.fc-day-sat {
	.fc-daygrid-day-top, .fc-scrollgrid-sync-inner .fc-col-header-cell-cushion, .fc-list-day-cushion {
		color: var(--lightblue);
	}
}

/* 日曜日*/
.fc-day-sun{
	.fc-daygrid-day-top, .fc-scrollgrid-sync-inner .fc-col-header-cell-cushion, .fc-list-day-cushion {
	 	color: var(--pink);
	}
}

.fc-event-main{
	outline: none;
}

.clicked_schedule{
	display: flex;
	align-items: center;
	gap:10px;
	background:var(--lightblue);
	border-radius: 20px;
	padding:10px;
}

.clicked_form{
	font-family: "SN Pro", sans-serif;
	font-size:16px;
	background:var(--bg);
	border:none;
	border-radius:20px;
	padding:8px 3px;
}

.clicked_button{
	font-family: "SN Pro", sans-serif;
	font-size:16px;
	background:var(--lightblue);
	color:#fff;
	border:none;
	border-radius:20px;
	padding:8px 5px;
	cursor:pointer;
}

.clicked_button:hover{
	background:#fff;
	color:var(--lightblue);
}

#edit_date{
	width:140px;
}
/* ひょっこりべあ */

#character{
	position: absolute;
	bottom: 0;
	transform: translateY(300px); /* 初期：下に隠す */
}

#character.show{
	animation: pop 0.9s ease-out forwards;/* forwards重要 */
}

@keyframes pop{
	0% { transform: translateY(300px); }
	70%{ transform: translateY(-100px); } /* ちょい飛び出す */
	100% { transform: translateY(-10px); } /* 定位置 */
}

/* ふきだし */

#balloon {
	font-family: "Kosugi Maru", sans-serif;
	position: relative;
	display: grid;
	place-items: center;
	width: 230px;
	height: 60px;
	border: 2px solid #333333;
	border-radius: 30%;
}
#balloon::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 70px;
	width: 15px;
	height: 15px;
	transform: rotate(135deg);
	box-sizing: border-box;
	background-color: #ffffff;
}
#balloon::after {
	content: "";
	position: absolute;
	top: 108%;
	left: 68px;
	width: 20px;
	height: 2px;
	transform: rotate(50deg);
	box-sizing: border-box;
	background-color: #333333;
}
#balloon > .ornament {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translateX(3px) translateY(3px); 
	border-radius: 30%;
	background-color: var(--orange);
	pointer-events: none; 
	mix-blend-mode: multiply; /* 乗算 */
}


/* login css */

.login_form{
	background: var(--subbg) ;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.neumorphic{
	background: var(--subbg) ; border-radius: 20px;
	box-shadow: 5px 5px 15px #e6e1e1, -5px -5px 15px #ffffff;
	
}
.neumorphic-input{
	background: var(--subbg);
	border: none;
	outline: none;
	border-radius: 20px;
	padding: 10px 15px;
	margin: 10px 0;
	font-size: 16px;

	/* 外側に光と影で浮き出す */
	box-shadow: 5px 5px 10px #e6e1e1,
	-5px -5px 10px #ffffff;
}
.neumorphic-button{
	border: none;
	outline: none; 
	border-radius: 20px;
	padding: 10px 15px;
	margin: 10px 0;
	font-size: 16px;
}
.neumorphic-card{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px; width: 300px;
	text-align: center;
}
.neumorphic-plan{
	display:flex;
	flex-direction: column;
	padding: 10px; width: 100%;
	text-align: center;
}

/* login.php admin.php 共通form用css */

.form{
	font-family: "SN Pro", sans-serif;
	width: 100%;
	display: flex;
	margin: 5px;
	flex-direction: row;
}
.ck_form{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center; /* 垂直方向中央 */
}
.form_submit{
	width: 100%;
}

.form_label{
	background: var(--lightblue);
	border: none; 
	outline: none; 
	border-radius: 20px;
	padding: 10px ;
	margin: 10px;
	font-size: 16px;
}
.form_button{
	background: var(--lightblue);
	border: 2px solid var(--lightblue);
	outline: none; 
	border-radius: 20px;
	padding: 10px 15px;
	margin: 10px 0;
	font-size: 16px;
	float: right;
}
.form_button:hover {
	background: #fff;
	color:var(--lightblue);
}
/* mypage.php */

.mypage_content{
	display: flex;
	flex-direction: column;
	padding: 10px;
}

/* サブメニューはデフォルト非表示 */
ul.submenu {
	display: none;
	margin-left: 1em;
	border-left: 1px solid #ccc;
	padding-left: 0.5em;
	}

/* チェックが入ったらサブメニュー表示 */
input[type="checkbox"]:checked + label + ul.submenu {
	display: block;
	}

 /* チェックボックスは非表示 */
.mypage_content input[type="checkbox"] {
display: none;
}

/* ラベルをクリック可能に */
.mypage_content label {
	cursor: pointer;
	font-weight: bold;
 }

.mypage_content li,ul{
	list-style: none;
	cursor: pointer;
}

.setting-form{
	display: flex;
	flex-direction: column;
}

/* follow-setting.php */

.follow_wraper{
	margin:3px 15px;
}
.group_content{
	display: flex;
	flex-direction: column;
}
.groupname{
	flex: 1;
	display: flex;
	justify-content: flex-end;

	padding: 10px;
}
/* user-setting.php */
.mypage_content{
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.icon-preview {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ccc;
}


/* search-api.php */

.user-row{
	display: flex;
	flex-direction: row;
}
/* =========================
 スマホ用レイアウト
 ========================= */
@media screen and (max-width: 768px) {

	/* 全体 */
	body {
		font-size: 16px;
	}
	.clicked_schedule {
		flex-direction: column;/* ←縦並び */
		align-items: stretch;
	}

	#edit_title {
		width: 100%;
	}

	.clicked_button {
		width: 100%;
	}
	.inwrapper {
		width: 100%;
		padding: 10px;
	}
	.main-contents {
		display: flex;
		flex-direction: column; /* ← これが重要 */
	}

	.l_content,
	.r_content {
		width: 100%;
	}
	.midinheader{
		display: none;
	}
	#character{
		display: none;
	}

	.form{
		font-family: "SN Pro", sans-serif;
		width: 100%;
		display: flex;
		margin: 5px;
		flex-direction: column;
	}
	/* =========================
	 header
	 ========================= */
	 /* headerを横並びに戻す */
	header {
		flex-direction: row;
		align-items: center;
		height: 70px;
		padding: 0 10px;
		z-index: 10000;
	}

	/* ロゴ左寄せ */
	.head_c {
		flex: none;
		justify-content: flex-start;
		align-items: center;
	}
	.logo{
		width: 150px;
	}

	/* =========================
	 メイン左右 → 縦並び
	 ========================= */

	.l_content,
	.r_content {
		width: 100%;
		min-height: auto;
	}

	#sub-content {
		margin: 15px 0;
	}

	/* =========================
	 ひょっこりくま
	 ========================= */
	#character {
		left: 10px;
		transform: translateY(300px);
	}
}
@keyframes pop{
	0% { transform: translateY(300px); }
	70%{ transform: translateY(-60px); }
	100% { transform: translateY(-10px); }
}

/* =========================
 ボタン系
 ========================= */
.basic-buttons,
.logout_buttons {
	width: 100%;
	margin: 5px 0;
	box-sizing: border-box;
	font-size: 16px;
}


/* =========================
 吹き出し
 ========================= */
#balloon {
	width: 200px;
	height: 55px;
	font-size: 14px;
}


@media screen and (min-width: 768px) and (max-width: 1024px) {

	/* 全体 */
	.inwrapper {
		width: 95%;
	}

	/* header */
	header {
		height: auto;
	}

	/* メイン：左右は残す */
	.main-contents {
		flex-direction: row;
	}

	.l_content {
		width: 45%;
		min-height: 500px;
	}

	.r_content {
		width: 55%;
	}

	/* ボタン */
	.basic-buttons,
	.logout_buttons {
		font-size: 16px;
		padding: 6px 12px;
	}

	/* くま */
	.wheel img {
		width: 45px;
	}

	@keyframes roll-left-right {
		0% { transform: translateX(-80px) rotate(0deg); }
		50%{ transform: translateX(700px) rotate(1080deg); }
		100% { transform: translateX(-80px) rotate(0deg); }
	}
}

	/* ======================
 ハンバーガー
====================== */

header {
	position: relative;
}

/* ボタン */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 35px;
	z-index: 10000;
}

.hamburger span {
	height: 3px;
	background: var(--black);
	border-radius: 3px;
}

/* ======================
 スマホ用
====================== */
@media screen and (max-width: 768px) {

	/* ハンバーガー表示 */
	.hamburger {
		display: flex;
	}
	.head_l{
		display: none;
	}
	/* PC用横並びをやめる */
	.head_r {
		position: fixed;
		top: 70px;
		left: 0;
		width: 100%;
		background: var(--subbg);
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
		display: none;
		border-top: 1px solid #ccc;
		z-index: 20000;
	}

	.head_r.active {
		display: flex;
	}

	.head_r a,
	.head_r button {
		width: 90%;
		margin: 8px 0;
		text-align: center;
	}
}
	
	/* followsetting.php */
	.sub_text{
		padding-bottom: 14px;
		border-bottom: 4px solid var(--lightblue);
	}