/* 全体初期化 */
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	/* ←これがあると横スクロールが無効になります */
}

.max-area {
	width: 100%;
	text-align: left;
	margin: 0 auto;
	padding: 0;
}

.greeting_area {
	width: 100%;
	max-width: 750px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 3;
}

.greeting_area2 {
	width: 100%;
	max-width: 1200px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 3;
	background: #fff2e4;
}

.greeting_area::before,
.greeting_area2::before {
	z-index: -1;
	content: "";
	position: absolute;
	left: 50%;
	top: -16vw;
	transform: translateX(-50%);
	width: 100vw;
	height: 18vw;
	background: url('images/wave_top.svg') center bottom no-repeat;
	background-size: 100vw;
	pointer-events: none;
}

.greeting_area::after,
.greeting_area2::after {
	z-index: -1;
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5vw;
	transform: translateX(-50%);
	width: 100vw;
	height: 18vw;
	background: url('images/wave_bottom.svg') center bottom no-repeat;
	background-size: 100vw;
	pointer-events: none;
}

.greeting_area p {
	font-size: 1.1rem;
	line-height: 1.75em;
	/*padding: 0 20px;*/
}

/* PC表示（グリッド4カラム） */
.member_box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 4カラム */
	gap: 16px;
	/* 任意：間隔を整える */
	margin: 0;
	padding: 0 16px;
	/* 任意：スクロールバーとの重なり防止 */
	box-sizing: border-box;
	max-width: 100vw;
}

.member_box>* {
	flex: 0 0 auto;
	/* 子要素を折り返さず、横並びに */
}

/* PC表示（グリッド2カラム） */
.how_box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2カラム */
	gap: 25px;
	/* 任意：間隔を整える */
	margin: 0;
	padding: 0 16px;
	/* 任意：スクロールバーとの重なり防止 */
	box-sizing: border-box;
	max-width: 100vw;
}


/* ボックススタイル */
.box {
	border: 1px solid #CCC;
	padding: 20px;
	text-align: center;
	font-size: 16px;
	border-radius: 5px;
	background: #FFF;
}

.member_box .box a {
	text-decoration: none;
}

.member_box .box img {
	width: 100%;
	max-width: 233px;
	height: auto;
}

.member_box .box h2 {
	font-size: .8rem;
	font-weight: normal;
	margin: 5px 0 1px;
	padding: 0;
	border: none;
}

.member_box .box h3 {
	color: #444;
	font-size: 1.15rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 10px;
	padding: 0 0 5px;
	background: none;
	border-bottom: 1px solid #CCC;
}

.member_box .box h4 {
	color: #444;
	font-size: rem;
	font-weight: bold;
	text-align: center;
	margin: 5px 0 10px;
	padding: 0 0 5px;
	background: none;
	border-bottom: 1px solid #CCC;
}

.member_box .box p {
	font-size: .85rem;
	margin: 0;
	padding: 0;
	text-align: left;
}

h3.comment {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	/* ← ここで「2行以内」に指定 */
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: calc(1.5em * 4);
	/* 2行分の高さに制限 */
}

h4.comment {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	/* ← ここで「2行以内」に指定 */
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: calc(1.5em * 4);
	/* 2行分の高さに制限 */
	line-height: 1.6rem;
}

p.comment {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* ← ここで「2行以内」に指定 */
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: calc(1.5em * 4);
	/* 2行分の高さに制限 */
}

.how_box .box_2 p {
	text-align: left;
	margin: .8rem;
}

.content img.left {
	width: 150px;
	float: left;
	margin: 0 10px 20px 0;
}

.how_box img.left {
	width: 300px;
	float: left;
	margin: 0 10px 20px 0;
}


.right_photo {
	float: left;
	width: 45% !important;
	margin: 0 20px 0 0;
}

.product_box img {
	float: left;
	width: 47% !important;
	margin: 5px;
}

.floatend {
	clear: both;
}

body {
	color: 444;
	font-size: 100%;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", "Osaka",
		Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0 auto;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	/* ←高さを必ず指定 */
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.8);
	/* 白背景で80%の不透明度 */
}

.wrap {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

#header .wrap {
	position: relative;
	z-index: 1001;
}

#header .wrap img.logo {
	position: absolute;
	top: 5px;
	left: 10px;
	width: 400px;
}

#header .wrap img.menu {
	position: absolute;
	top: 35px;
	right: 30px;
	width: 95px;
}

#head_area {
	padding: 80px 0 50px;
	background: none;
}

.content img {
	width: 100%;
	border: none;
}

section {
	margin-bottom: 75px;
}

.content {
	width: 100%;
	max-width: 750px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
}

.entry {
	width: 100%;
	max-width: 1200px;
	margin: 10px auto;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	z-index: 5;
	box-sizing: border-box;
}

a {
	color: #444;
}

b {
	color: #B28651;
}

hr {
	margin: 50px 0 35px;
}

.logo_box {
	width: 80%;
	max-width: 500px;
	margin: 250px auto;
	padding: 0 0 0 18px;
}

h2 {
	color: #666;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #CCC;
}

h3 {
	clear: both;
	color: #FFF;
	font-size: .9rem;
	font-weight: normal;
	text-align: left;
	margin-bottom: 10px;
	padding: 7px 10px;
	background: #B28651;
}

h4 {
	color: #444;
	font-size: .9rem;
	font-weight: normal;
	text-align: left;
	line-height: 1.35em;
	margin: 5px 0;
	padding: 0 0 7px;
	border-bottom: 1px solid #CCC;
}

.name {
	font-size: .75rem;
	margin: 0 0 15px;
	padding: 0;
}

p {
	color: #444;
	font-size: 1rem;
	line-height: 1.8em;
	margin-bottom: 35px;
}

p.mini {
	color: #FFF;
	font-size: .85rem;
	line-height: 1.75em;
}

.caption_box {
	text-align: center;
	margin: 0 0 30px;
	padding: 0;
}

.caption {
	font-size: .75rem;
	text-align: left;
	padding-bottom: 5px;
	border-bottom: 1px solid #CCC;
}

.sponsorbox {
	text-align: left;
	font-size: .75rem;
	margin: 10px 0 30px;
	padding: 15px 30px;
	background: #FFF;
	border: 1px solid #CCC;
}

.sponsorbox p {
	margin: 50px 0;
}

.normal_flex {
	display: flex;
	justify-content: space-between;
}

.normal_item {
	width: 50%;
	font-size: .85rem;
	text-align: center;
	margin: 0 0 10px;
	padding: 0;
}

.normal_item img {
	border: 1px solid #CCC !important;
}

.sponsor_flex {
	display: flex;
	justify-content: space-between;
}

.sponsor_item {
	width: 50%;
	font-size: .85rem;
	text-align: center;
	margin: 0 0 10px;
	padding: 35px 15px;
	background: #FFF;
	border: 1px solid #CCC;
}

p a {
	color: #444;
}

img.naviphto {
	width: 600px;
}

ul {
	margin: 0 0 30px;
	padding: 0 0 0 25px;
}

ul li {
	font-size: 1rem;
	line-height: 1.8em;
	text-decoration: underline dotted #CCC;
}

ul.simple_text {
	margin: 0;
	padding: 0 0 0 25px;
}

ul.simple_text li {
	font-size: .85rem;
	line-height: 1.7em;
	text-decoration: none;
	padding: 0 0 15px;
}

ul.simple_text li:last-child {
	padding: 0;
}

.btn_box {
	font-size: 1rem;
	text-align: center;
	padding: 15px 30px;
	border-radius: 100vh;
	background: #eb6100;
	margin-bottom: 30px;
}

.btn_box a {
	color: #FFF;
}

.tel_sp {
	display: block;
	background: -moz-linear-gradient(top, #FFC959 0%, #FF9900);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFC959), to(#FF9900));
	border: 1px solid #DDD;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	width: 100%;
	text-align: center;
	margin: 0 auto 15px;
	padding: 0;
}

.tel_sp a {
	color: #FFF;
	font-size: .95rem;
	display: block;
	text-decoration: none;
	padding: 15px 0;
	border: none;
}

.tel_sp a:hover {
	color: #FFF;
	background: -moz-linear-gradient(top, #FFD275 0%, #FFAE35);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFD275), to(#FFAE35));
}


/*table
--------------------------------------------------------*/
table.online {
	width: 100%;
	font-size: 0.85rem;
	line-height: 1.5em;
	font-weight: normal;
	margin: 0 0 30px 0;
	padding: 0;
	border-collapse: collapse;
}

table.online th {
	width: 25%;
	font-size: 0.75rem;
	font-weight: normal;
	text-align: center;
	padding: 10px;
	border: 1px solid #CCC;
	background: #EEE;
}

table.online td {
	text-align: left;
	padding: 10px;
	background: #FFF;
	border: 1px solid #CCC;
}

table.online td a {
	color: #000;
}

.yellow_box {
	color: #333;
	font-size: 0.9em;
	line-height: 1.7em;
	margin: 0 20px 15px;
	padding: 20px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 10px;
}

.yellow_box li {
	font-size: 0.75rem;
	line-height: 1.5em;
	text-decoration: none;
	margin: 0 0 15px;
	padding: 0;
}

.info_box {
	color: #333;
	font-size: .85em;
	line-height: 1.5em;
	text-align: center;
	margin: 0 0 20px 0;
	padding: 20px;
	background: none;
	border: 1px solid #CCC;
}

.info_box2 {
	color: #333;
	font-size: .85em;
	line-height: 1.5em;
	text-align: center;
	margin: 40px 0 20px 0;
	padding: 10px;
	background: none;
	border: 1px solid #CCC;
}

.info_box3 {
	color: #333;
	font-size: .85em;
	line-height: 1.5em;
	text-align: center;
	margin: 0 0 0px 0;
	padding: 10px;
	background: none;
	border: 1px solid #CCC;
	vertical-align: -webkit-baseline-middle;
}

.info_box3.active {
	background: #B28651;
	color: #FFF;
	text-decoration: none !important;
}

.parent a .active {
	color: #FFF;
	text-decoration: none !important;
}

.info_box3 a {
	display: -webkit-inline-box;
	font-weight: normal;
	vertical-align: -webkit-baseline-middle;
}


.info_box a {
	display: block;
}

.info_box2 a {
	display: block;
	font-weight: normal;
}

.white_box {
	color: #333;
	font-size: .85em;
	line-height: 1.75em;
	margin: 0 0 20px 0;
	padding: 20px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 5px;
}

/*ご予約エリア
--------------------------------------------------------*/
.contact_box {
	text-align: center;
	margin: 0 0 25px;
	padding: 10px 20px;
	background: #f7f7f7;
	border: 1px solid #AAA;
}

.click_button {
	display: block;
	background: -moz-linear-gradient(top, #FFC959 0%, #FF9900);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFC959), to(#FF9900));
	border: 1px solid #DDD;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	width: 100%;
	text-align: center;
	margin: 0 auto 20px;
	padding: 0;
}

.click_button a {
	color: #FFF;
	font-size: .95rem;
	display: block;
	text-decoration: none;
	padding: 15px 0;
	border: none;
}

.click_button a:hover {
	color: #FFF;
	background: -moz-linear-gradient(top, #FFD275 0%, #FFAE35);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFD275), to(#FFAE35));
}


/*google map
--------------------------------------------------------*/
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#floatingmenu {
	display: none;
}


/* 続きを読む */
.cp_box *,
.cp_box *:before,
.cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.cp_box {
	width: auto;
	margin: 0;
}

.cp_box label {
	position: relative;
	display: block;
	font-size: .75rem;
	margin: 0 0 15px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	border: 1px solid #CCC;
}

.cp_box label:hover {
	transition: all 0.3s;
}

.cp_box input:checked~label:hover::after {
	color: #ffffff;
}

.cp_box input {
	display: none;
}

.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.cp_box input:checked~div {
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}

/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked~div.cp_container {
	height: auto;
}


/*モーダルメニュー
--------------------------------------------------------*/

#modal_menu {
	position: fixed;
	top: 0;
	right: -340px;
	/* メニューのwidth + padding */
	width: 250px;
	/* メニューのwidth */
	height: 100%;
	padding: 35px;
	transition: left .5s, right .5s;
	/* アニメーション */
	background-color: #fff;
	z-index: 999;
}

.toggle {
	font-size: 50px;
	cursor: pointer;
}

.toggle:hover {
	text-decoration: underline;
}

#open {
	display: none;
}

/* :checked 擬似クラスを使って、#openがチェック状態になった時に、#menuが「right: 0;」になります。 */
#open:checked+#modal_menu {
	right: 0;
}

/* 初期状態ではcloseアイコンを隠す */
.close-icon {
	display: none;
}

/* open:checked の状態で、画像を切り替える */
#open:checked~#header .open-icon {
	display: none;
}

#open:checked~#header .close-icon {
	display: inline;
}

/* オーバーレイ背景 */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	/* 半透明のグレー */
	z-index: 998;
	/* メニュー(999)の下にする */
	display: none;
}

/* モーダルメニュー表示時にオーバーレイを表示 */
#open:checked~#overlay {
	display: block;
}



/* メニューの中身 */
#modal_menu ul {
	margin: 90px 0 0;
	padding-left: 0;
}

#modal_menu li {
	list-style: none;
	margin-bottom: 1.3rem;
	text-decoration: none !important;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: left;
}

#modal_menu li span {
	font-size: .8rem;
	margin-left: 1rem;
	font-weight: lighter;
}

#modal_menu a {
	text-decoration: none !important;
	color: #444;
}

/*ページ内ジャンプ
-----------------------------------------------------*/
/** ハッシュリンクの高さ調節 **/
/*
[id]:not(#max-area)::before {
  content: "";
  display: block;
  height: 100px;   */
/* ← #header の高さと同じ */
/*
  margin-top: -100px;
}
*/

/*トップ　サロンメンバー　アイコン丸
--------------------------------------------------------*/
img.maru {
	width: 100%;
	height: auto;
	border-radius: 50%;
	/* 丸くする */
	display: block;
	margin: 0 auto;
	/* 中央寄せ */
}



/*メンバープロフィール　ページ
--------------------------------------------------------*/
.profile_box {
	max-width: 750px;
	display: flex;
	margin-top: 20px;
	gap: 20px;
	justify-content: space-between;
	width: 100%;
	/*max-width: 1200px;*/
	margin: 30px auto;
	padding: 0 10px 40px 10px;
	position: relative;
	z-index: 5;
	box-sizing: border-box;
	border-bottom: 1px solid #CCC;
}

.profile_img {
	width: 100%;
	height: fit-content;
	max-width: 450px;
	padding: 0;
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	/*flex-grow: 4;
	flex-shrink: 1;*/
	flex-basis: 25%;
}

.profile_img::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.profile_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.profile_text {
	width: 100%;
	max-width: 730px;
	padding: 0 20px;
	/*flex-grow: 6;
	flex-shrink: 1;*/
	flex-basis: 70%;
}

.entry hr {
	margin: 0;
	border: none;
}

.profile_box h2 {
	color: #000;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}

.profile_box h3 {
	color: #000;
	font-size: .8rem;
	font-weight: normal;
	text-align: left;
	/*border-bottom: 1px solid #CCC;
	margin: 0 0 10px;*/
	margin: 0;
	padding: 0 0 10px;
	background: none;
	border-bottom: 1px solid #CCC;
}

.profile_box h4 {
	color: #000;
	font-size: 1.1rem;
	line-height: 1.3;
	font-weight: normal;
	text-align: left;
	margin: 5px 0 15px;
	padding: 0 0 10px;
	border-bottom: 1px solid #CCC;
	/*padding: .5em .7em;
    border-left: 5px solid #B28651;*/
}

.profile_box p.branch {
	color: #000;
	font-size: 0.8rem;
	line-height: normal;
	text-align: left;
	margin: 0;
	padding: 0;
}

.profile_box p.profile {
	color: #000;
	font-size: 1rem;
	line-height: 1.8em;
	margin-bottom: 35px;
	text-align: left;
}

.profile_box ul {
	margin: 0 0 30px;
	padding: 0 0 0 20px;
	text-align: left;
	color: #000;
}

.profile_box ul li {
	font-size: .95rem;
	line-height: 1.35em;
	text-decoration: none;
	padding: 0 0 8px;
}


/*記事　ページ
--------------------------------------------------------*/
.article-wrapper img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 50px;
	aspect-ratio: 16 / 9;
	object-fit: cover;

}

.writer_profile {
	margin-bottom: 40px;
	display: flex;
}

img.writer_profile_left {
	margin: 0 10px 0 0 !important;
	width: 75px;
	height: 75px;
}

.writer_profile_right p {
	font-size: .7rem !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}

.writer_profile_right p.date {
	font-size: .7rem !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}

.writer_profile_right h2 {
	font-size: 1rem !important;
	line-height: 1.5em;
	margin: 0 !important;
	padding: 0 !important;
}

.writer_profile_right h3 {
	font-size: .8rem !important;
	line-height: 1.5em;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}

.article h2 {
	color: #000;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0 0 20px;
	padding: 0;
	border: none;
	text-align: left;
}

.article p {
	color: #000;
	font-size: 1rem;
	line-height: 1.8em;
	margin-bottom: 35px;
	text-align: left;
}

.article h3 {
	color: #000;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: left;
	margin: 0 0 10px;
	padding: 0 0 5px;
	background: none;
}





/*レスポンシブデザイン
--------------------------------------------------------*/
@media screen and (max-width:944px) {
	section {
		margin-bottom: 30px;
	}

	.content {
		width: auto;
	}

	h2 {
		font-size: 1.2rem;
	}

	.contact_box {
		text-align: center;
		margin: 0 0 25px;
		padding: 10px 20px;
		background: #f7f7f7;
		border: 1px solid #AAA;
	}

	.click_button {
		width: 100%;
	}

	img.sp_image {
		width: 90%;
	}

	.pc_phone {
		display: none;
	}

	#floatingmenu {
		display: block;
		width: 100%;
		position: fixed;
		left: 0px;
		bottom: 0px;
		z-index: 9999;
		text-align: center;
		margin: 0;
		padding: 0 auto;
		background-color: #FFF;
		border-top: 1px solid #CCC;
	}

	#floatingmenu img {
		float: left;
		margin: 0;
		padding: 0;
	}

	.how_box img.left {
		width: 150px;
		float: left;
		margin: 0 10px 20px 0;
	}

}



/* スマホ用（横スクロール＆2個表示） */
@media (max-width: 768px) {
	#header .wrap img.logo {
		height: 50px;
		width: auto;
		position: absolute;
		top: 20px;
		left: 10px;
	}

	#header .wrap img.menu {
		width: 70px;
	}

	.member_box {
		max-width: 100%;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 10px;
		padding: 10px;
	}

	h3.comment {
		-webkit-line-clamp: 1;
		/* ← ここで「2行以内」に指定 */
		max-height: calc(1.5em * 2);
		/* 2行分の高さに制限 */
	}

	p.comment {
		-webkit-line-clamp: 2;
		/* ← ここで「2行以内」に指定 */
		max-height: calc(1.5em * 4);
		/* 2行分の高さに制限 */
	}

	.box {
		flex: 0 0 calc(50% - 10px);
		/* 横2個表示（gap考慮） */
		scroll-snap-align: start;
	}

	.how_box {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px;
		flex-direction: column;
	}

	/*メンバープロフィール　ページ
--------------------------------------------------------*/
	/*	#profile {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.profile_img {
		width: 60vw;
		max-width: 300px;
		margin-bottom: 20px;
	}

	.profile_text {
		width: 100%;
		max-width: 450px;
		padding: 0 20px;
	}

	#profile h2,
	#profile h3,
	#profile p.branch {
		text-align: center;
	}*/

	#profile {
		gap: 10px;
		padding-left: 0;
		padding-right: 0;
	}

	#profile hr {
		margin: 0 0 10px 0 !important;
	}

	.profile_text h2 {
		font-size: 1.2rem !important;
		line-height: 1.3 !important;
		margin-bottom: 3px !important;
	}

	.profile_text h3 {
		margin: 0px 0 5px !important;
		padding: 0 !important;
		line-height: 1.3 !important;
		padding-bottom: 10px !important;
	}

	.profile_text p.profile {
		font-size: 1rem !important;
	}

	.profile_text ul li {
		font-size: 0.95rem !important;
	}


	.profile_img {
		/*max-width: 100%;
		min-width: 50px;*/
		margin: 0 5px;
		margin-bottom: 20px;
		flex-basis: 50px;
	}

	.profile_text {
		padding: 0;
		flex-basis: 85%;
	}

	#profile p.branch {
		color: #000;
		font-size: 0.8rem;
		line-height: normal;
		text-align: left;
		margin: 0;
		padding: 0;
	}

}

/* タイトルアニメーション */

.title {
	display: flex;
	overflow: hidden;
	justify-content: center;
}

.title span {
	display: block;
	transform: translate(0, 130%);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.title.-visible span {
	transform: translate(0, 0);
}

.title span:nth-child(2) {
	transition-delay: 0.06s;
}

.title span:nth-child(3) {
	transition-delay: 0.12s;
}

.title span:nth-child(4) {
	transition-delay: 0.18s;
}

.title span:nth-child(5) {
	transition-delay: 0.24s;
}

.title span:nth-child(6) {
	transition-delay: 0.30s;
}

.title span:nth-child(7) {
	transition-delay: 0.36s;
}

.title span:nth-child(8) {
	transition-delay: 0.42s;
}

.title span:nth-child(9) {
	transition-delay: 0.48s;
}

.title span:nth-child(10) {
	transition-delay: 0.54s;
}

.title span:nth-child(11) {
	transition-delay: 0.6s;
}

.title span:nth-child(12) {
	transition-delay: 0.66s;
}

.title span:nth-child(13) {
	transition-delay: 0.72s;
}

.title span:nth-child(14) {
	transition-delay: 0.78s;
}

.fuwafuwa01 {
	animation: fuwafuwa 2.5s ease-in-out infinite alternate;
	background: url(images/illust_01.png) no-repeat center center / 130px auto;
	display: block;
	transition: 1.5s ease-in-out;
	width: 70px;
	height: 70px;
	margin-top: 15px;
	justify-items: center;
	margin: 0 auto;
}

.fuwafuwa02 {
	animation: fuwafuwa 3s ease-in-out infinite alternate;
	background: url(images/illust_02.png) no-repeat center center / 300px auto;
	display: block;
	transition: 1.5s ease-in-out;
	width: 300px;
	height: 300px;
	margin-top: 15px;
	justify-items: center;
	margin: 0 auto;
}

@keyframes fuwafuwa {
	0% {
		transform: translate(0, 0) rotate(-7deg);
	}

	50% {
		transform: translate(0, -7px) rotate(0deg);
	}

	100% {
		transform: translate(0, 0) rotate(7deg);
	}
}


/* ▼ 文章隠し（グラデーション） */
#hiddenContent {
	position: relative;
	max-height: 100px;
	/* ここで見える範囲を調整 */
	overflow: hidden;
}

#hiddenContent::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
}

/* ▼ ポップアップ */
#popup {
	display: flex;
	/* ✅ 最初から flex (JSで display 切り替えはしない) */
	opacity: 0;
	/* ✅ 初期は透明 */
	pointer-events: none;
	/* ✅ クリックできないように */
	transition: opacity 0.5s ease;
	/* ✅ 0.5秒かけて透明→不透明 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#popup.show {
	/* ✅ 表示状態 */
	opacity: 1;
	pointer-events: auto;
}

#popup .popup-inner {
	background: white;
	padding: 30px;
	text-align: center;
	border-radius: 10px;
	max-width: 300px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	transform: translateY(-20px);
	/* ✅ ちょっと上から */
	transition: transform 0.5s ease;
}

#popup.show .popup-inner {
	transform: translateY(0);
	/* ✅ 元の位置にフワッと降りてくる */
}

.popup-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 20px;
	background: #eb6100;
	color: #fff;
	border-radius: 5px;
	text-decoration: none;
}

[id]:not(#max-area)::before {
	content: "";
	display: block;
	height: 90px;
	/* ← #header の高さと同じ */
	margin-top: -90px;
}


.parent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 5px;
}

.info p {
	margin-bottom: 15px;
}

.info img {
	width: 100%;
	max-width: 600px;
	margin-bottom: 20px;
	border: 1px solid #aaaaaa;
}

#entry.entry .parent a {
	text-decoration: none !important;
}