@charset "utf-8";
/* --hr-- */
hr{
	border: 1px dashed #8b8b8b;
	border-bottom-style: none;
	width: 100%;
	margin: 1.5rem 0;
	height: 1px;
	justify-self: center;
	background: none;
}

/* --p-- */
p{margin: 1rem 0;}

/* --font-- */
.site-name h1 {
	font-family: 'Megrim','M PLUS Rounded 1c', sans-serif;
}
.megrim-regular {
	font-family: "Megrim", system-ui;
	font-weight: 400;
	font-style: normal;
}
.m-plus-rounded-1c-thin {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 100;
	font-style: normal;
}
.jura-<uniquifier> {
	font-family: "Jura", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
/*-- color --*/
body{
	background-color: #e5e5e5;
	color: #3e3e3e;
	fill: #3e3e3e;
}
a {
	color: #6b68ff;
}
a:hover{
	color: #0070ff;
}
a:visited{
	color: #6b68ff;
}

header a, header a:hover, header a:visited,
p-nav a, p-nav a:hover, p-nav a:visited {
	color: #3e3e3e;
} 

/*-- a --*/
a, a:hover, a:visited {
	text-decoration: none;
	transition: 0.3s;
}


body {
	font-family: Arial, sans-serif;
	letter-spacing: 0.03rem;
	line-height: 1.5;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	min-width: 780px;
	font-size: 11pt;
	overflow-x: hidden;
}
header {
	text-decoration: none;
}
main {
	flex-grow: 1;
}

/* -- footer --  */
footer {
	--footercolor: #c9cad2;
	display: flex;
	flex-flow: column;
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	z-index: 1;
	margin-top: 5rem;
	padding-bottom: 2rem;
	background: var(--footercolor);
	small{
		position: absolute;
		top: 1.5rem;
		background: var(--footercolor);
		color: #7787a7;
		display: inline-block;
		width: 100%;
		padding: 2rem 0;
	}
	button.newiine_btn.newiine_type02 {
		position: absolute;
		left: 0;
		margin: 2rem;
	}
}
.return-top {
	position: relative;
	clip-path: polygon(50% 0%, 100% 50%, 100% 100%, 0 100%, 0 50%);
	background: var(--footercolor);
	width: 5rem;
	height: 5rem;
	justify-self: anchor-center;
	top: -2.5rem;
	z-index: 2;
	align-content: center;
	align-self: center;
	.material-icons{
		position: relative;
		font-size: 3rem;
		color: aliceblue;
	}
}

button#iine, button#mail{
	color: #6b8ad1;
	background: transparent;
	width: 3rem;
	height: 3rem;
	border: 1px solid;
	border-radius: 100%;
	cursor: pointer;
	transition: 0.3s;
}
button#iine:hover, button#mail:hover{
	color: #4580ff;
	background: #ebebeb;
}
.iine-heart {
	display: inline-block;
	position: absolute;
	font-size: 24px;
	color: red;
	opacity: 1;
	pointer-events: none;
	animation: floatUp 1.5s ease-in-out forwards;
	z-index: 5;
}
button.newiine_btn:before{
	background: #7fa0fd;
}

@keyframes floatUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-150px) scale(1.5) rotate(calc(var(--start-rotate)));
		opacity: 0;
	}

}

/* https://zius.speever.jp/blog/web_site_creation/modal-window/ */
/* モーダルウィンドウの基本スタイル */
.modal {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: 0.3s ease;

	position: fixed; /* モーダルがページ全体に固定されるように設定 */
	top: 0; /* ページの最上部からスタート */
	left: 0; /* ページの最左端からスタート */
	width: 100%; /* モーダルが画面全体の幅を占める */
	height: 100%; /* モーダルが画面全体の高さを占める */
	background-color: rgba(39, 39, 39, 0.7); /* 背景を半透明の黒に設定（モーダルの背後が見えるように） */
}
.modal.hidden{
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s ease;
}

.modal-content {
	position: fixed; /* モーダル内容が画面上に固定されるように設定 */
	width: 23rem;
	top: 50%; /* 縦方向の中央に配置 */
	left: 50%; /* 横方向の中央に配置 */
	transform: translate(-50%, -50%); /* 完全に中央に配置するための補正 */
	padding: 2rem; /* モーダル内の余白を設定 */
	background-color: #fefefe; /* モーダルの背景色を白に設定 */
	border: 1px solid #888; /* 境界線の色を薄いグレーに設定 */
	border-radius: 1rem; /* モーダルの角を丸くするための半径 */
}

/* モーダルを閉じるボタン（×）のスタイル */
#closeModal {
	position: absolute; /* モーダル内で絶対位置に配置 */
	display: flex; /* ボタン内のテキストが中央に配置されるようにフレックスボックスを使用 */
	align-items: center; /* ボタン内のテキストを縦方向に中央揃え */
	justify-content: center; /* ボタン内のテキストを横方向に中央揃え */
	top: -1rem; /* モーダル内容の上部から離れた位置に配置 */
	right: -1rem; /* モーダル内容の右端から離れた位置に配置 */
	font-size: 28px; /* 閉じるボタンのフォントサイズ */
	font-weight: bold; /* 閉じるボタンのフォントを太字に設定 */
	cursor: pointer; /* ホバー時にポインタが表示されるように設定 */
	color: #FFF; /* 閉じるボタンのテキストカラーを白に設定 */
	width: 40px; /* ボタンの幅 */
	height: 40px; /* ボタンの高さ */
	background-color: #333; /* ボタンの背景色をダークグレーに設定 */
	border: #333; /* ボタンの境界線を背景と同じ色に設定 */
	border-radius: 50%; /* ボタンを丸くするための半径 */
}

.txtlen{
	display: block;
	text-align: right;
}
textarea#simple-message, textarea#simple-message:focus-visible{
	border: solid 1px #a5a5a5;
	outline: none;
}
.modal-inner{
	width: 100%;
}

button.enterbtn{
	display: block;
	justify-self: center;
	box-sizing: border-box;
	padding: 1rem;
	border-radius: 1rem;

	background: #dfdfdf;
	color: #5d6973;
	transition: 0.3s;
	cursor: pointer;
}
button.enterbtn:hover{
	background: #e7ecff;
	color: #434393;
}
.txt-select-all{
	user-select: all;
	-webkit-user-select: all;
	-moz-user-select: all;
}