@charset "utf-8";
/* CSS Document */

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* ==============================
   ブランドカラー（愛の里）
============================== */
:root{
	--brand-pink:#ff4f86;
	--brand-green:#23b26b;
	--brand-ink:#111;
	--brand-bg:#f7f8fb;

	--footer-h:55px; /* 黒帯フッター */
	--dock-h:100px;  /* ドック */
}

/* 全体の設定
--------------------*/
header, footer, nav, section { display:block; }
body, p, h1, h2, h3, h4, h5, h6, ul, li, img { margin:0; padding:0; font-size:100%; line-height:140%; font-weight:normal; }
.clearfix { zoom:1; }
.clearfix:after { content:""; clear:both; display:block; }
body{
	width:100%;
	min-height:100vh;
	font-size:13px;
	-webkit-text-size-adjust:none;
	overflow-x:hidden;
	font-family:"Rounded Mplus 1c","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic Rounded","Meiryo",sans-serif;
	font-weight:400;
	color:#333;
	letter-spacing:0.03em;
	line-height:1.6;
	background:var(--brand-bg);
}
img{ border:none; }
li{ list-style:none; }
a{ color:#232323; }

/* ==============================
   ページタイトルバー
============================== */
.page-title{
	position:relative;
	width:100%;
	text-align:center;
	font-size:20px;
	font-weight:700;
	letter-spacing:0.05em;
	color:#fff;
	padding:18px 0;
	background:linear-gradient(135deg,var(--brand-pink),var(--brand-green));
	border-bottom:3px solid rgba(0,0,0,.15);
	box-shadow:0 3px 8px rgba(0,0,0,.08);
	z-index:10;
}
.page-title::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:4px;
	background:linear-gradient(to right, rgba(0,0,0,.10), transparent);
}
@media (max-width:768px){
	.page-title{ font-size:17px; padding:14px 0; }
}

/*----------------------------------------
 トップページここから
----------------------------------------*/

/* ヘッダ部分
--------------------*/
h1{
	background:url(../img/line_t.gif) repeat-x bottom center #000;
	color:#fff;
	font-size:12px;
	padding:2px 0 2px 10px;
	text-align:center;
}
h2#top{
	font-size:18px;
	font-weight:bold;
	padding-top:20px;
	color:#232323;
	text-shadow:0 1px 0 #fff;
}
#top_txt{
	font-size:120%;
	text-align:center;
	margin:25px 0;
	font-weight:bold;
}
#result{
	text-align:center;
	font-size:120%;
	font-weight:bold;
	margin-top:15px;
	margin-bottom:20px;
}

/* ==============================
   ヘッダー右端アイコンボタン
============================== */
#box_t{
	position:relative;
	height:71px;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}
#box_t .background{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/bg_t.gif) repeat-x;
	opacity:0.2;
	z-index:0;
}
.header-inner{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	z-index:1;
}
.logo-area{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto;
}
.header-icons{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	display:flex;
	gap:8px;
}
.icon-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 2px 5px rgba(0,0,0,.12);
	text-decoration:none;
	transition:all .25s ease;
	font-size:16px;
}
.icon-btn.line i{ color:#06C755; }
.icon-btn.tel i{
	background:linear-gradient(135deg,var(--brand-pink),var(--brand-green));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.icon-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* フッタ部分
--------------------*/
#footer{
	text-align:center;
	background:url(../img/line_b.gif) repeat-x top center #000;
	color:#fff;
	font-size:9px;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:10px 0;
	box-shadow:0 -2px 5px rgba(0,0,0,.1);
	z-index:1000;
}
#footer a{ color:#fff; text-decoration:none; }
#footer_notice{
	position:fixed;
	bottom:45px;
	left:0;
	width:100%;
	background-color:#e0e0e0;
	color:red;
	text-align:center;
	padding:15px 0;
	font-weight:bold;
	font-size:21px;
	z-index:1001;
	box-shadow:0 -1px 3px rgba(0,0,0,.1);
}
#footer_notice.green{ color:green; }

/* 
ログイン
--------------------*/
.login_box{
	width:80%;
	margin-top:100px;
	margin-left:auto;
	margin-right:auto;
}
.login-toggle-btn{
	display:block;
	width:90%;
	max-width:300px;
	margin:20px auto;
	padding:14px 20px;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	background:linear-gradient(135deg,var(--brand-green),#81C784);
	border:none;
	border-radius:10px;
	box-shadow:0 4px 6px rgba(0,0,0,.1);
	cursor:pointer;
	transition:all .3s ease;
	text-align:center;
}
.login-toggle-btn:hover{
	background:linear-gradient(135deg,#1f985b,#66BB6A);
	transform:translateY(-1px);
	box-shadow:0 6px 10px rgba(0,0,0,.15);
}
.login_tbl{ width:100%; margin:0 auto; text-align:left; }
.co-ime-disabled{ ime-mode:disabled; }
.co-mt15{ margin-top:15px !important; }
#user_id, #user_password{
	width:92%;
	font-size:18px;
	margin-bottom:25px;
	padding:15px 10px;
}

/* 既存ボタン系 */
.co-btn{ display:table; margin:0 auto; white-space:nowrap; }
.co-btn-m{ min-width:110px; line-height:36px; font-size:32px; }
.co-btn-grn span{ border-color:#8ec70e #7dac14 #7dac14; border-width:1px; border-style:solid; }
.co-btn span{
	display:block;
	text-align:center;
	border-radius:5px;
	box-shadow:0 1px 1px rgba(0,0,0,0.15);
	position:relative;
}
.co-btn-grn a, .co-btn-grn input{
	color:#ffffff;
	background-color:#8ec70e;
	background-image:-moz-linear-gradient(center top, #8ecd02, #7dac14);
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #7dac14), color-stop(1, #8ecd02));
	background:-ms-linear-gradient(top, #8ecd02 0%, #7dac14 100%);
	background:linear-gradient(top, #8ecd02 0%, #7dac14 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8ecd02', endColorstr='#7dac14');
	display:block;
	border-radius:3px;
	position:relative;
}
.co-btn-m input{ min-width:150px; padding:0 20px; height:56px; font-size:18px; }
.co-btn input{ border:none; cursor:pointer; }
#err_txt{ font-weight:bold; color:#FF0000; }
#new_add_link{ width:100%; margin-top:100px; text-align:center; }


/* ==============================
   ログインスタッフ表示
============================== */
.login-staff{
	width:92%;
	max-width:720px;
	margin:14px auto 10px;
	padding:10px 14px;
	border-radius:14px;
	background:rgba(255, 232, 160, .45);
	border:1px solid rgba(230, 190, 80, .45);
	color:#111;
	font-size:14px;
	font-weight:800;
	letter-spacing:.03em;
	box-shadow:0 3px 10px rgba(0,0,0,.06);
	text-align: center;
}

/* 名前部分だけ少し強調したい場合 */
.login-staff span,
.login-staff strong{
	color:#eb2c92;
	font-weight:900;
}

/* スマホ最適化（細い端末向け） */
@media (max-width:520px){
	.t_service{
		white-space:normal;
		text-align:left;
	}
	
	.login-staff{
		font-size:13px;
		padding:9px 12px;
	}
}

/* 
メイン
--------------------*/
#user_info_box{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	padding:10px 15px;
	background:#fff;
	border-bottom:1px solid #e6e6ea;
	font-family:"Segoe UI", sans-serif;
	font-size:14px;
	color:#333;
	box-shadow:0 1px 4px rgba(0,0,0,0.05);
}
#home_link{ margin-right:12px; display:inline-flex; align-items:center; }
.home_icon{ width:24px; height:24px; transition:transform .2s ease; }
.home_icon:hover{ transform:scale(1.1); opacity:.85; }
.user_info{
	font-weight:500;
	color:#555;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	margin-left:25px;
}

/* インストールボタン用スタイル */
#install-container{
	position:fixed;
	bottom:60px;
	left:0;
	width:100%;
	text-align:center;
	padding:15px 10px;
	background:rgba(255,255,255,.95);
	box-shadow:0 -2px 5px rgba(0,0,0,.1);
	z-index:999;
}
#install_btn{
	padding:10px 20px;
	font-size:16px;
	background:linear-gradient(135deg,var(--brand-pink),var(--brand-green));
	color:#fff;
	border:none;
	border-radius:10px;
	cursor:pointer;
	transition:filter .2s ease;
}
#install_btn:hover{ filter:brightness(.95); }
#install-container p{ font-size:12px; color:#666; margin-top:10px; line-height:1.6; }

/* iOS向けヒント */
#ios_add_hint{
	display:none;
	text-align:center;
	margin-top:10px;
	margin-bottom:15px;
	font-size:0.95rem;
	color:#555;
	font-weight:bold;
}

/* ==============================
   下部リンクドック（固定・大きめボタン）
============================== */
#main{
	padding-bottom:calc(var(--footer-h) + var(--dock-h) + 16px + env(safe-area-inset-bottom));
}
.app-dock{
	position:fixed;
	left:0;
	right:0;
	bottom:calc(var(--footer-h) + env(safe-area-inset-bottom));
	z-index:2001;
	display:flex;
	justify-content:space-around;
	align-items:center;
	background:#fff;
	border-top:1px solid #ccc;
	padding:15px 0 5px;
	box-shadow:0 -2px 8px rgba(0,0,0,.08);
}
.app-dock__btn{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:#333;
	width:32%;
	max-width:140px;
	padding:10px 0;
	border-radius:14px;
	border:1px solid var(--brand-ink);
	background:#fff;
	box-shadow:0 4px 10px rgba(0,0,0,.06);
	transition:all .25s ease;
}
.app-dock__btn:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.app-dock__btn:active{ transform:translateY(1px); }

/* SVGアイコン（線・アニメのみ） */
.app-dock__btn svg{ width:28px; height:28px; margin-bottom:5px; }
.app-dock__btn svg path,
.app-dock__btn svg rect,
.app-dock__btn svg circle{
	fill:none;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-opacity:.85;
	transition:stroke-opacity .2s ease, transform .2s ease, filter .2s ease;
}
.app-dock__btn:hover svg *,
.app-dock__btn:focus svg *,
.app-dock__btn.active svg *{
	stroke-opacity:1;
	transform:scale(1.05);
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* ラベル */
.app-dock__label{
	display:inline-block;
	font-size:13px;
	font-weight:600;
	color:#000;
	transition:all .3s ease;
}
.app-dock__btn.active .app-dock__label{
	background-image:linear-gradient(135deg,var(--brand-pink),var(--brand-green));
	background-size:100%;
	background-repeat:repeat;
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}

/* 非表示クラス */
.hidden{ display:none !important; }
.fc_red{ color:#FF0000; }
.fc_blk{ color:#000; }
.fs_80{ font-size:80%; }