/* ==========================================
	https://as-lab.co.jp	CSS Ver1.1
	2026/10/13	㈱エーエスラボ
	Coding by Phantom All rights reserved.
   ========================================== */

html {  }
@media screen and (min-width: 350px) { body { overflow-x: hidden; } }			/* 横幅350px以上で横スクロールは絶対に許さない */
body.Element {
    margin: 0px; position: relative;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	text-align:center; min-width: 335px; width: 100%;
}
body.Element::before {
  	content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  	background-image: url('../images/body_BG2.jpg'); background-size: cover; background-position: left 50% top 10%;
  	/* バックグラウンド アニメーション設定 */
  	opacity: 0; transform: translateY(30px); animation: fuwattoUp 1.5s ease-out forwards; animation-delay: 1.2s;	/* 一番最後にふわっと出す */
}
/* ==========================================
   スクロール時に動かす要素用の設定（JSと連動）
   ========================================== */
.scroll-fade-up { opacity: 0; transform: translateY(50px); transition: opacity 1.0s ease-out, transform 1.0s ease-out; }
	.scroll-fade-up.is-active { opacity: 1; transform: translateY(0); }		/* JSで画面内に入った（is-activeクラスがついた）瞬間の動き */
/* ==========================================
   共通のアニメーションキーフレーム
   ========================================== */
@keyframes fuwattoUp {
  	0% { opacity: 0; transform: translateY(40px); }
  	100% { opacity: 1; transform: translateY(0); }
}
/* インフォメーション専用のアニメーション定義 */
@keyframes fuwattoUpInfo {
  	0% { opacity: 0; transform: translateY(40px); }
  	100% { opacity: 0.85; transform: translateY(0); }
}

/***************************************各エリア共通設定**********************************/
div.Space_S  { height: 10px; width: 100%; margin: 0; }
div.Space_MS { height: 20px; width: 100%; margin: 0; }
div.Space_M  { height: 30px; width: 100%; margin: 0; }
div.Space_L  { height: 50px; width: 100%; margin: 0; }
h2.Area_Heading {
	background:url('../images/under_line.png') no-repeat left bottom/100% scroll;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif;
	display: block; font-size:28px; width:250px; height:58px; white-space: nowrap;
}
h3.Area_Heading {
	background:url('../images/under_line2.png') repeat-x left bottom/contain scroll;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif;
	display: block; font-size:22px; width:250px; height:40px; white-space: nowrap;
}
.Left_Position { margin: 0px; position: relative; top: 10px; left:30px; }
.Mid_Position { margin: 0px auto; position: relative; top: 10px; }
.Right_Position { margin: 0px; position: absolute; top: 10px; right: 30px; }
.Item_List { display: block; width: 90%; max-width: 1000px; list-style: none; padding: 0; margin: 25px auto 0px; }
.Item_List li { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #CCC; height: auto; }
.Item_List li a,
.no_post { position: static; color: #0080FF; text-decoration: none; text-align: left; flex-grow: 1; padding-left: 10px; }
.list_date { display: flex; flex-direction: column; width: 80px; flex-shrink: 0; }
.list_date p { text-align: right; margin: 0; line-height: 1.2; font-size: clamp(12px, 1.2vw, 14px); }
.package { position: relative; text-align: right; height: 25px; margin-top: 30px; }
.post_date { position: absolute; top: 0; left: 0; margin-left: 10px; font-size: 14px; background: #D7FDF8; padding: 2px 5px; }
.post_tag { width: 80px; text-align: center; flex-shrink: 0; border-radius: 3px; padding: 2px 5px; }
.post_title { text-align: left; margin: 0; padding: 0 15px 15px; font-size: clamp(0.875rem, 0.515rem + 1.65vw, 1.75rem); }
.post_text img { max-width: 750px; padding: 0 20px; }
.post_text { text-align: left; padding: 10px 20px; margin-bottom: 20px; }
.notice { background-color: #BFFFFF; }
.update { background-color: #FFFFBF; }
.event { background-color: #FFBFBF; }

@media screen and (max-width: 600px) {
    .Item_List li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .date { width: 100%; text-align: left; }							/* ？なぜか右寄りに？ */
	.post_text img { width: 65%; height: 65%; }
}
/* ============================================================
   画像タイル：60%の5角形に変形＋オーバーレイ＆2px枠（全周対応）
   ============================================================ */
.tile-link { display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }	/* リンク用のタグ（a）自体がレイアウトを崩さないようにする設定 */
/* 5角形タイルに設定するセレクタ */
.tile_div { width: 100%; position: relative; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%); 			/* 頂点数を5つに揃え */
	container-type: inline-size; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.tile-link:hover .tile_div { clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%); }							/* 60%の尖り */
.tile_div::before {																							/* 【下層の膜】これが「2pxの枠線」 */
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 				/* 写真より手前、モヤより後ろ */
	background-color: rgba(255, 255, 255, 0); 																/* 【枠線の色指定】最初は透明、ホバーすると「指定色」に変えられる */
	clip-path: inherit; 																					/* 親の変形と100%連動 */
	transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile_div::after {																							/* 【上層の膜】これが「内側の写真」と「ホバー時のモヤ」 */
	content: ""; position: absolute; top: 2px; left: 2px;													/* 【超重要】上下左右を「2px内側」に引っ込め下の「::before」の色を2px分だけフチのようにハミ出させる */
	width: calc(100% - 4px); height: calc(100% - 4px); z-index: 2; 											/* 一番手前 */
	border-radius: inherit; background: center / cover no-repeat;											/* 背景画像は親ではなく、この内側の膜に貼る */
	background-color: rgba(255, 255, 255, 0);																/* 最初はただの写真、ホバーすると薄白いモヤがかかる */
	background-blend-mode: overlay; 																		/* 写真とモヤを綺麗に馴染ませる設定 */
	clip-path: inherit; 																					/* これも親の変形と100%連動 */
	transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile-link:hover .tile_div::before { background-color: rgba(255, 255, 255, 1); }
.tile-link:hover .tile_div::after  { background-color: rgba(255, 255, 255, 0.4); }
.tile_div span {																							/* 【最前面の文字】の設定 */
	position: absolute; z-index: 3;																			/* ::after（z-index: 2）よりもさらに手前に出す */
	top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; font-weight: 700;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); 															/* 写真上で文字がボヤけないように影をオン */
	white-space: nowrap; 																					/* 文字の意図しない改行を防ぐ */
	transition: font-size 0.6s ease-out, letter-spacing 0.6s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile-link:hover span { transform: translate(-65%, -50%); }

/*********************************************************************************/
/***********************************ヘッダー部分**********************************/
/*********************************************************************************/
#Header{ background-color: #fff; height:82px; width:100%; display: block; position: sticky; top: 0; z-index: 10; }
.Header-Inner {
	height:100%; width:1000px; padding: 0; margin: 0px auto;
	display: flex; justify-content: space-between; align-items: center;
}
#Logo { position: relative; width: 200px; height: 78px; margin: 2px 0px; float: left; }
#Logo a {
	background:url(../images/header_logo.jpg) no-repeat; background-size:contain;
	display:block; text-indent:-9999px; width: 200px; height: 78px; transition: opacity 0.5s ease;
}
#Logo a:hover { opacity: 0.7; }
#HeadNaviCon { width:580px; height:82px; margin: 0px 0px 0px 80px; float: left; }
#Inquiry_Horizontal {
	width: 140px; height: 44px; margin: 0px 0px auto 0px; float: left; position: relative;
	background-image:url(../images/inquiry_H.png) ; background-repeat: no-repeat; background-size:contain;	/* 横型タブ */
}
#Inquiry_Horizontal a { display:block; text-indent:-9999px; height: 44px; position: relative; z-index: 2; }
#Inquiry_Horizontal::after {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background-image:url(../images/inquiry_H_hover.png); background-repeat: no-repeat; background-size:contain;
	opacity: 0; transition: opacity 0.8s ease;
}
#Inquiry_Horizontal:hover::after { opacity: 1; }				/* マウスが乗ったら、上の画像を100%表示（不透明）にする */
#Inquiry_Vertical {
	display: none; width: 44px; height: 140px; position: fixed; top: max(82px, 20%); right: 0;
	background-image:url(../images/inquiry_V.png); background-repeat: no-repeat; background-size:contain;	/* 縦型タブ */
}
#Inquiry_Vertical a { display: none; text-indent:-9999px; height: 140px; position: relative; z-index: 2; }
#Inquiry_Vertical::after {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	background-image:url(../images/inquiry_V_hover.png); background-repeat: no-repeat; background-size:contain;
	opacity: 0; transition: opacity 0.8s ease;
}
#Inquiry_Vertical:hover::after { opacity: 1; }					/* マウスが乗ったら、上の画像を100%表示（不透明）にする */
/* 「ホームへ戻る」吹き出し */
.top-guide-bubble {
    position: absolute; top: 60px; left: 210px; background: #333; color: #ff0; font-size: 11px; font-family: sans-serif; padding: 4px 8px;
    border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-4px); z-index: 999;
}
/* 吹き出しの小さな左向き三角 */
.top-guide-bubble::before {
    content: ""; display: inline-block; position: absolute; top: -4px; left: -19px;
	border: 8px solid transparent; border-right: 18px solid #333; transform: rotate(35deg);
}
/* 表示用クラス（JSで付与されると発火） */
.top-guide-bubble.is-show { opacity: 1; animation: popBoyonBound 0.8s cubic-bezier(0.25, 0.46, 0.45, 1.4) forwards; }
/* --- 退場アニメーション（ふんわりキーフレーム） --- */
.top-guide-bubble.is-hide { animation: fadeOutSlow 1.5s ease forwards; }
/* ぼよ〜んと3回バウンドして高さを徐々に小さくするアニメーション定義 */
@keyframes popBoyonBound {
	0% { opacity: 0; transform: translateY(-20px) scale(0.8); }		/* スタートは少し上から、小さく */
    /* 1回目のバウンド（一番大きく） */
	30% { opacity: 1; transform: translateY(5px) scale(1.05); }		/* 基準より少し下に沈む */
    /* 2回目のバウンド */
	50% { transform: translateY(-8px) scale(1); }					/* 基準より少し上に上がる（高さダウン） */
    /* 3回目のバウンド */
	70% { transform: translateY(3px) scale(1.02); }					/* 基準より少し下に沈む（高さダウン） */
    /* 最終着地点 */
	100% { opacity: 1; transform: translateY(0) scale(1); }			/* 基準位置でピタッと止まる */
}
/* ふんわり消えるkeyframes */
@keyframes fadeOutSlow {
    0% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-5px) scale(0.95); }	/* 少し上にスッと消える */
}
@media screen and (max-width: 1024px) {
	#Inquiry_Horizontal { display: none; }						/* 横型タブをOFF */
	#Inquiry_Vertical { display: block; }						/* 縦型タブをON */
	#Inquiry_Vertical a { display: block; }						/* 縦型タブのリンク先をON */
	.Header-Inner {	width:100%; }
}
@media screen and (max-width: 796px) {
	#HeadNaviCon { width:100%; margin-left: auto; }
}
@media screen and (max-width: 716px) {
	#HeadNaviCon { min-width:100px; margin: 0; }
	#Inquiry_Vertical.is-active { display: none; }				/* メニューが開いたら縦型タブをOFF */
	#Inquiry_Vertical.is-active a { display: none; }			/* メニューが開いたら縦型タブのリンク先をOFF */
}
@media screen and (max-width: 480px) {
    .top-guide-bubble {  } /* スマホではスッキリさせるため */
}
/*********************************************************************************/
/************************************グローバルナビ*******************************/
/*********************************************************************************/
#Hamburger_Btn, #Mobile_Menu { display: none; }					/* 初期は回路遮断 */
#Globalnavi { width:502px; height:70px; font-size:1em; padding: 0; margin: 12px 0px 0px 0px; float: right; }
#Globalnavi li { list-style-type: none; width:120px; margin-right:3px; float: left; }
#Globalnavi li a  { display:block; line-height:70px; color: #333; text-decoration: none; }
#menu-item-1 a:hover { color: #AAA; transition: 0.5s; }
#menu-item-2 a:hover { color: #AAA; transition: 0.5s; }
#menu-item-3 a:hover { color: #AAA; transition: 0.5s; }
#menu-item-4 a:hover { color: #AAA; transition: 0.5s; }

/******************************スマホメニュー*****************************/
@media screen and (max-width: 716px) {
	#Globalnavi { display: none; }								/* PC用ナビを物理的に切断 */
	/* バーガーショップ開店 */
	#Hamburger_Btn { display: block; position: absolute; top:10px; right:10px; width: 62px; height: 58px; }
	.Hamburger_eat_it {
        display: block; width: 100%; height: 100%; padding: 10px; box-sizing: border-box;
		transition: transform 0.6s ease; transform-origin: center center;
    }
	.Hamburger_eat_it span { 
		display: block; width: 42px; height: 2px; background-color: #005EAC;
    	border-radius: 4px; margin-bottom:16px; transition: all 0.4s ease;
	}
	.Hamburger_eat_it span:nth-child(2) { width: 40px; margin-left:1px;	}									/* 二本目だけ微妙に短く */
	/* --- 変形後の回路（is-activeが付いた時） --- */
	.Hamburger_eat_it.is-active { transform: rotate(360deg) scale(1); }
	.Hamburger_eat_it.is-active span:nth-child(1) {	transform: translateY(17.4px) rotate(45deg); }			/* 上の線を下に下げて回転 */
	.Hamburger_eat_it.is-active span:nth-child(2) {	opacity: 0;	}											/* 中の線を消す */
	.Hamburger_eat_it.is-active span:nth-child(3) { transform: translateY(-17.4px) rotate(-45deg); }		/* 下の線を上に上げて回転 */
	/* モバイル用メニュー本体 */
	#Mobile_Menu {
		display: block; position: absolute; top:82px; left:0px; overflow: hidden; height: 0px; width: 100%;
	    transition: height 0.4s ease; 																		/* 展開の滑らかさ */
    	background: #f8f8f8; z-index: 5; border-bottom: 2px solid #005EAC; box-sizing: border-box;
	}
	#Mobile_Menu.is-active { height: 250px; }																/* メニュー展開時の状態 */
	div.Space_MS,
	#Content_Area,
	#Eye-Catching_Image { margin-top: 0; transition: margin-top 0.4s ease; }								/* 戻る時もアニメーションさせる */
	#Header.is-active + div.Space_MS,
	#Header.is-active + #Content_Area,
	#Header.is-active + #Eye-Catching_Image { margin-top: 250px; transition: margin-top 0.7s ease; }		/* メニューの高さ分だけ押し出す */
	#Mobile_Menu ul { padding: 0; margin:8px 30px 0px; }
	#Mobile_Menu ul li {																					/* 1項目ずつ出現させるための設定 */
		list-style-type: none; opacity: 0; transform: translateY(-10px); transition: all 0.5s ease;
		border-bottom: 1px solid #EEE; box-sizing: border-box;
	}
	#Mobile_Menu li a {	display:block; text-decoration: none; color: #333;	line-height:40px; }
	#Mobile_Menu li a:hover { color: #AAA; transition: 0.5s; }
	/* アクティブ時にディレイをかけて順次表示 */
	#Mobile_Menu.is-active ul li { opacity: 1; transform: translateY(0); }
	#Mobile_Menu.is-active ul li:nth-child(1) { transition-delay: 0.2s; }
	#Mobile_Menu.is-active ul li:nth-child(2) { transition-delay: 0.3s; }
	#Mobile_Menu.is-active ul li:nth-child(3) { transition-delay: 0.4s; }
	#Mobile_Menu.is-active ul li:nth-child(4) { transition-delay: 0.5s; }
	#Mobile_Menu.is-active ul li:nth-child(5) { transition-delay: 0.6s; }
	.telephone {
		display:block; position: relative; width: 120px; height: 33px; margin-left: 30px; margin-top: 2px;
		position: relative; text-decoration: none; color: #005EAC; line-height: 34px;
		background-image: url('../images/telephone_hover.png'); background-repeat: no-repeat; background-size: contain;/* 通常時隠しておく画像 */
	}
	.telephone::after {
	    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	    background-image: url('../images/telephone.png'); background-repeat: no-repeat; background-size: contain;	/* opacityで消す画像（重なり順に注意） */
	    opacity: 1; transition: opacity 0.8s ease;
	}
	.telephone:hover::after { opacity: 0; }											/* hoverで上の画像が消え透過画像から下が見える */
}

/*********************************************************************************/
/**********************************アイキャッチ画像*******************************/
/*********************************************************************************/
#Eye-Catching_Image {																/* 動画を表示するエリア全体の枠 */
	position: relative; width: 100%; margin: 0 auto; height: auto; background-color: #000; overflow: hidden;
}
#Eye-Catching_Image video { display: block; width: 100%; height: auto; }			/* ビデオ要素の配置（コンテナにフィットさせる） */
#Eye-Catching_Image::after {														/* ★シネマティック効果を高めるオーバーレイマスク(周辺減光効果) */
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
	background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%); background-color: rgba(0, 0, 0, 0.15);
}
.Video-Text {																		/* 動画の上に重ねるテキストの位置調整 */
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	color: #fff; left: 10%; text-align: left; width: auto;
}
.Video-Text h1 {
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif;	/* ── 1. 書体を明朝体にする ── */
	font-weight: 500; font-size: 3.5rem; letter-spacing: 0.2em;								/* ── 2. 文字の大きさを調整する ── */
	color: #fff; line-height: 1.4; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);			/* ── 3. その他の見栄え調整 ── */
}
@media screen and (max-width: 768px) {
	.Video-Text h1 { font-size: 2.5rem;	letter-spacing: 0.1em; }					/* スマホで見るときは自動的にこの大きさに縮む */
}
@media screen and (max-width: 480px) {
	.Video-Text h1 { font-size: 1.7rem; }
}
/*********************************************************************************/
/***********************************新着エリア************************************/
/*********************************************************************************/
#Info_Area {
	display: block; height: auto; min-height: 450px; width: 95%;
	background-color: #FFF; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
	position: relative; padding-bottom: 30px; opacity: 0; transform: translateY(40px);
  	animation: fuwattoUpInfo 1.0s ease-out forwards; animation-delay: 0.5s;
}
.Circle_Mark {
	position: absolute; right: 30px; bottom: 20px;
	background:url(../images/circle.png) no-repeat center/contain;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif;
	font-size:26px; width:73px; height:58px; z-index: 10;
}
.Circle_Mark a { display:block; line-height:58px; color: #333; text-decoration: none; }
.Circle_Mark:hover { opacity:0.5; transition: opacity 0.5s ease; }
@media screen and (max-width: 600px) {
	#Info_Area { height: 800px; }
	.Circle_Mark { bottom: 50px; }
}

/*********************************************************************************/
/*********************************コンテンツエリア********************************/
/*********************************************************************************/
#Content_Area,
#Message_Area,
#Extra_Area { box-sizing: border-box; width: 100%; }
.heading_img {
	position: relative;	top: 0; left: 0; width: 300px; height: 56px; background-repeat: no-repeat; background-size: contain;
	border-radius: 0px 15px 0px 15px; corner-shape: bevel;
}
.heading_img span {
	position: absolute; top: 5px; left: 23px; color: #FFF; font-weight: 700;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); white-space: nowrap; font-size: 32px;
}
.bottom_link {
	position: absolute; bottom: 50px; right: 30px; width: 200px;
	background-repeat: no-repeat; background-size: cover;
	clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);
}
.bottom_link span { position: relative; right: 30px; color:#FFF; font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
@media screen and (max-width: 600px) {
	.heading_img { width: 200px; height: 38px; }
	.heading_img span { font-size: 26px; }
}
#Content_Area.not-found {
	padding: 50px 30px; position: relative; min-height: 300px;
	background:url(../images/404_BG.png) repeat-x; background-size:contain;
}
.neko {
	width: 100px; height: 115px;position: absolute; right: 50px; bottom: 30px; 
	background:url(../images/neko.png) no-repeat; background-size:contain;
}

/*#################################################*/
/*################　トップページ　#################*/
/*#################################################*/
#Content_Area.topPage {
	padding: 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));		/* 最低350pxを維持しつつ、画面幅に合わせて自動で1～2～3列へ可変 */
	gap: 80px 50px; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 80%);
}
/* 画像タイル：5角形へ変形＋オーバーレイ＆2px枠 */
#Content_Area .tile_div {
	width: 100%; height: clamp(200px, 35cqw, 250px);    /* 最小200px～画面幅の35%（可変）～最大250pxで滑らかに伸縮 */
	position: relative; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);	
	container-type: inline-size; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
#Content_Area .tile-link:hover .tile_div { clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%); }
#Content_Area .tile_div span { letter-spacing: 0.8em; text-indent: 0.8em; font-size: clamp(28px, 6cqw, 56px); }
/* --- エリア固有設定 --- */
.com_info::after { background-image: url(../images/com_info.jpg); }					/* タイルの背景画像設定 */
.com_prof::after { background-image: url(../images/com_prof.jpg); }
.results::after  { background-image: url(../images/results.jpg); }
.recruit::after  { background-image: url(../images/recruit.jpg); }
.blog::after  	 { background-image: url(../images/blog.jpg); }
.blog2::after  	 { background-image: url(../images/blog2.jpg); }
.staff::after  	 { background-image: url(../images/staff.jpg); }
/*.question::after { background-image: url(../images/question.jpg); }*/
#Content_Area .blog span { letter-spacing: 0.5em; text-indent: 0.5em; }				/* 文字数により文字間を設定 */
#Content_Area .blog2 span { letter-spacing: 0.3em; text-indent: 0.3em; }			/* 文字数により文字間を設定 */
#Content_Area .staff span,
#Content_Area .question span { letter-spacing: 0.4em; text-indent: 0.4em; }			/* 文字数により文字間を設定 */
@media screen and (max-width: 400px) {												/* スマホ対応：文字数により文字間を設定 */
	#Content_Area .tile_div span { letter-spacing: 0.5em; text-indent: 0.5em; }
	#Content_Area .blog span { letter-spacing: 0.2em; text-indent: 0.2em; }
	#Content_Area .blog2 span { letter-spacing: 0em; text-indent: 0em; font-size: 1.5em; }
	#Content_Area .staff span, #Content_Area .question span { letter-spacing: 0em; text-indent: 0em; }
}

/*#################################################*/
/*##################　会社案内　###################*/
/*#################################################*/
#Content_Area.infoPage {
	padding: 50px 30px; position: relative; background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 70%);
}
/*######################　インフォメーション（方針）　#######################*/
.infoPage .heading_img { background-image: url(../images/information/page_img.jpg); }
.infoPage .heading_img  span { letter-spacing: 0.8em; text-indent: 0.8em; }
.info_list {																	/* 項目リスト表示の設定 */
	display:block; list-style-type: upper-roman; margin: 40px auto 0; width: 80%; height: 100%; container-type: inline-size;
}
.info_list li::marker {
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif; color: #BBB; letter-spacing: 0em;
}
.info_list li { text-align: left; padding-left: 30px; font-weight: 700; font-size: clamp(22px, 5cqw, 36px); color: #333; }
.info_list li:nth-of-type(-n+3) { letter-spacing: 0.6em; }
.info_list li .info_exp,
.info_list li .info_iso { letter-spacing: normal; }
.info_exp { margin: 10px 0 30px 16%; }												/* 定義リスト表示の設定 */
.info_exp dt { font-weight: 600; font-size: clamp(16px, 3cqw, 20px); color: #555; }
.info_exp dt:nth-child(1) { margin-left: 0px; }
.info_exp dt:nth-child(2) { margin-left: clamp(10px, 5cqw, 40px); }
.info_exp dd { margin-left: clamp(20px, 8cqw, 60px); }
.info_iso { margin: 10px 0 30px 16%; }
.info_iso dt { font-weight: 600; font-size: clamp(16px, 3cqw, 20px); color: #555; }
.info_iso dd { margin-left: clamp(10px, 4cqw, 30px);; }
.info_exp dd,
.info_iso dd { font-weight: 400; font-size: clamp(11px, 3cqw, 16px); color: #000; margin-top: 15px; }
.info_iso dd span { font-weight: 600; }
@media screen and (max-width: 600px) {
	#Content_Area.infoPage { padding: 30px 10px; }
	.infoPage .heading_img span { top: 2px; left: 25px; letter-spacing: 0.6em; text-indent: 0em; }
	.info_list { margin-top: 30px; margin-left: 10px;}
}
@media screen and (max-width: 460px) {
	#Content_Area.infoPage { padding: 15px 5px; }
	.info_list { margin-top: 15px; margin-left: 0px; }
}
@media screen and (max-width: 430px) {
	.info_list { width: 75%; }
}
/*######################　社長メッセージ　#######################*/
#Message_Area.commentPage {
	padding: 50px 30px; position: relative; background-color: #FDFDFD;
	background: linear-gradient(180deg, rgba(253, 253, 253, 1) 5%, rgba(87, 136, 199, 1) 92%, rgba(255, 241, 115, 0.77) 100%);
}

/* ベースの要素（1枚目の画像） */
.amano0 {
	display: inline-block; width: 40%; height: calc(40cqw * 0.8); background-repeat: no-repeat; background-size: cover;
	transition-delay: 0.5s; transition-duration: 1.5s; transform: scale(0.9) translateY(80px); background-image: url(../images/information/amano_0.jpg);
	/* 擬似要素の位置基準と描画設定 */
	position: relative; overflow: hidden;border-radius: 15px; corner-shape: bevel; /* 枠外のアニメーションはみ出し防止 */
}
#Message_Area.is-active .amano0 { transform: scale(1) translateY(0); }
/* 2枚目の画像（hover時に重ねる画像）を擬似要素で配置 */
.amano0::after {
	content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/information/amano_1.jpg); /* ★2枚目の画像パスを指定 */
	background-repeat: no-repeat; background-size: cover; background-position: center; 
	/* 初期状態は透明にしておく、変化を10秒かけてアニメーション（イージングはお好みで調整可） */
	opacity: 0; transition: opacity 15s ease-in-out;
}
/* hoverされた時に2枚目の画像を10秒かけて浮き上がらせる（クロスフェード） */
.amano0:hover::after { opacity: 1; }

.message { text-align: left; width: 70%; margin: 40px auto 20px; font-size: clamp(12px, 1.4vw, 16px); }
.signature { margin-right: 25px; margin-bottom: 25px; text-align: right; font-size: clamp(14px, 1.5vw, 16px);}
.signature span { margin-left: 15px; font-weight: 600; letter-spacing: 0.1em; font-size: clamp(16px, 1.6vw, 20px); }

/*###############################################　建 設 部　#############################################*/
#Content_Area.architectPage {
	padding: 50px 30px; position: relative; min-height: 500px;
	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 70%);
}
.architectPage .heading_img { background-image: url(../images/information/architect/page_img.jpg); }
.architectPage .heading_img span { letter-spacing: 1.2em; text-indent: 1.2em; }
.ar_pack { min-height: 300px; }
.ar_pack::after { content: ""; display: block; clear: both; }
.alignleft { float: left; margin:20px 20px 10px 10px; width: 30%; height: 30%; max-width: 350px; }
.ar_comment { text-align: left; font-size: clamp(12px, 1.4vw, 16px); }
.ar_comment span { margin-left: 0px; font-weight: 600; }

@media screen and (max-width: 600px) {
	#Content_Area.architectPage { padding: 30px 10px; }
	.architectPage .heading_img span { top: 1px; left: 28px; letter-spacing: 0.7em; text-indent: 0.5em; }
}
.architectPage .bottom_link { background-image: url(../images/information/sports/page_img.jpg); }

/*############################################　スポーツ事業部　##########################################*/
#Content_Area.sportsPage {
	padding: 30px 30px; position: relative; min-height: 500px;
	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 70%);
}
.sportsPage .heading_img { background-image: url(../images/information/sports/page_img.jpg); }
.sportsPage .heading_img span { letter-spacing: 0.0em; text-indent: 0.3em; }

@media screen and (max-width: 600px) {
	#Content_Area.sportsPage { padding: 30px 10px; }
	.sportsPage .heading_img span { top: 2px; left: 16px; text-indent: 0.0em; font-size: 24px; }
}
.sportsPage .bottom_link { background-image: url(../images/information/architect/page_img.jpg); }
.sportsPage .bottom_link span { letter-spacing: 0.3em; text-indent: 0.3em; }

/*############################################　ブログ　##########################################*/
#Content_Area.blogPage {
	padding: 0px 0px 20px; position: relative; min-height: 700px;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.blogPage .blog_img {
	position: relative; max-width: 1024px; margin:0 auto; width: 100%; aspect-ratio: 1408 / 627;
	background-image: url(../images/information/architect/blog/blog_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.blogPage .blog_img2 {
	position: relative; max-width: 1024px; margin:0 auto; width: 100%; aspect-ratio: 1408 / 627;
	background-image: url(../images/information/sports/blog/blog_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.blogPage .blog_img span, .blogPage .blog_img2 span {
	position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
	color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: 32px; letter-spacing: 0.5em; text-indent: 0.5em;
	background: linear-gradient(150deg, rgba(187, 255, 239, 1),
	rgba(236, 237, 203, 1) 34%, rgba(248, 227, 183, 1) 72%, rgba(255, 155, 252, 1) 97%);
	border-radius: 10px 0px 10px 0px; corner-shape: bevel; white-space: nowrap;
}
.blog_post {
	position: relative; box-sizing: border-box; padding: 10px 10px 10px; margin: 50px auto 0px; width: 90%; min-height: 120px;
	background: #FFF; font-size: clamp(12px, 1.5vw, 16px); box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3);
	border-radius: 15px 0px 15px 0px; corner-shape: bevel;
}

@media screen and (max-width: 600px) {
	.blogPage .blog_img span, .blogPage .blog_img2 span { font-size: 28px; letter-spacing: 0.4em; text-indent: 0.4em; }
	.blog_post { width: 85%; }
}

/*############################################　スタッフ紹介　##########################################*/
#Content_Area.staffPage {
	padding: 0px 0px 50px; position: relative; min-height: 800px;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.staffPage .staff_img {
	position: relative; max-width: 1024px; margin:0 auto; width: 100%; aspect-ratio: 1210 / 720;
	background-image: url(../images/information/staff/staff_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.staffPage .staff_img span {
	position: absolute; top: 55%; left: 50%; transform: translateX(-50%);
	color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: 32px; letter-spacing: 0.3em; text-indent: 0.3em;
	background: linear-gradient(150deg, rgba(187, 255, 239, 1),
	rgba(236, 237, 203, 1) 34%, rgba(248, 227, 183, 1) 72%, rgba(255, 155, 252, 1) 97%);
	border-radius: 10px 0px 10px 0px; corner-shape: bevel; white-space: nowrap;
}
.staff_list {
	box-sizing: border-box; padding: 30px 10px; margin: 50px auto 0px; width: 90%; min-height: 500px;
	background: #FFF; font-size: clamp(12px, 1.5vw, 16px);
	box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3); border-radius: 0px 15px 0px 15px; corner-shape: bevel;
}
.grid_container {
	display: grid; list-style: none; gap: 20px; padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.grid_item { *border:1px solid #0F0; }

@media screen and (max-width: 600px) {
	.staffPage .staff_img span { font-size: 28px; letter-spacing: 0.2em; text-indent: 0.2em; }
}

/*############################################　よくある質問　##########################################*/
#Content_Area.questionPage {
	padding: 2% 2% 50px; position: relative; min-height: 600px;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.questionPage .upper_container { display: flex; flex-wrap: wrap; justify-content: space-around; }
.questionPage .question_img {
	position: relative; margin: 0 0 20px 0; box-sizing: border-box; width: clamp(170px, 30vw, 400px); aspect-ratio: 700 / 400;
	background-image: url(../images/inquiry/question/question_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.questionPage .question_img span {
	position: absolute; bottom: clamp(5px, 0.5vw, 20px); left: 50%; transform: translateX(-50%);
	color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: clamp(18px, 3vw, 32px); letter-spacing: 0.3em; text-indent: 0.3em; white-space: nowrap;
}
.question_search p { font-size: clamp(10px, 1.8vw, 16px); }

#searchform { position: relative; margin-bottom: 50px; }
#searchform button {
	position: relative; top: 4px; left: -1px; padding: 0; background-image: url(../images/inquiry/question/search.png);
	background-repeat: no-repeat; background-size: contain; width: 22px; height: 22px; border-radius: 3px;
}

.search {
	margin: 40px auto 0px; width: 90%; padding-bottom:30px; background: #FFF; border-radius: 0px 20px 0px 20px; corner-shape: bevel;
}
.search span {
	position: relative; top: 15px; left: 0px; color: #555; font-size: clamp(14px, 1.5vw, 18px);
	white-space: nowrap; display: inline-block; margin-bottom: 20px;
}

/*############################################　個人情報の保護　##########################################*/
#Content_Area.protectionPage {
	padding: 2% 2% 50px; position: relative; min-height: 600px;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.protection_img,
.terms_img { margin: 40px auto 0px; width: 95%; padding-bottom:30px; background: #FFF; border-radius: 0px 20px 0px 20px; corner-shape: bevel; }
.protection_img p,
.terms_img p { text-align: left; color: #AAA; font-size: clamp(11px, 2vw, 18px); padding: 0 30px; }
.protect, .terms { text-align: left; padding: 0 20px; }
.protect dt, .terms dt { font-size: clamp(11px, 2vw, 18px); font-weight: 600; color: #777; margin-top: clamp(0.125rem, -0.21rem + 1.53vw, 0.938rem); }
.protect dd, .terms dd { font-size: clamp(9px, 1.2vw, 13px); color: #888; margin-left: clamp(35px, 6vw, 55px); }
.protect dd.ddd { display: list-item; list-style: disc; margin-left: clamp(50px, 8vw, 75px);  }

/*#################################################*/
/*###################　会社概要　##################*/
/*#################################################*/
#Content_Area.profPage {
	padding: 50px 30px; position: relative; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.profPage .heading_img { background-image: url(../images/profile/page_img.jpg); }
.profPage .heading_img  span { letter-spacing: 0.8em; text-indent: 0.8em; }
.design_box1, .design_box2 { position: absolute; width:100%; height:35%; background-color: #85ffff; opacity: 0.4; z-index: 7; }
.design_box1 { bottom: 48%; right: 0px; clip-path: polygon(5% 70%, 100% 10%, 100% 100%, 20% 20%); }
.design_box2 { bottom: 5%; left: 0px; clip-path: polygon(95% 70%, 0% 10%, 0% 100%, 80% 20%); }
.prof_list, .hist_list, .affi_list {
	position: relative; width: 58%; margin: 50px auto 10px; padding: 20px 70px 15px; background-color: #FFF; z-index: 8;
	box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3); border-radius: 10px; corner-shape: bevel; opacity: 0.9;
}
.prof_list span,
.hist_list span,
.affi_list span { display: block; font-size:24px; margin:15px; letter-spacing: 0.8em; text-indent: 0.8em; font-weight:600; color: #999 ; }
.prof_list .prof_step,
.hist_list .hist_step,
.affi_list .affi_step { display: flex; align-items: center; border-bottom:1px solid #000; margin-bottom: 20px; font-size: clamp(11px, 1.2vw, 18px); }
.prof_list dt, .hist_list dt, .affi_list dt { width:125px; margin-bottom: 20px; font-weight:600; }
.prof_list dd, .hist_list dd, .affi_list dd { width:100%; margin-bottom: 20px; text-align: left; }
.prof_list p, .hist_list p, .affi_list p { font-size: clamp(9px, 1.2vw, 12px); margin:0; text-align: right; }
@media screen and (max-width: 400px) {
	.prof_list dd, .hist_list dd, .affi_list dd { margin-left: 5px; }
}
/*######################　追加エリア　#######################*/
#Extra_Area.extraPage {
	padding: 40px 30px 50px; position: relative; background-color: #EEE;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.9) 0%, rgba(238, 238, 238, 1) 35%);
}
.iso_img {
	display: block; width: 45%; aspect-ratio: 1337 / 1258;
	background-image: url(../images/profile/iso.jpg); background-repeat: no-repeat; background-size: contain;
	margin: 0px auto 80px; transition-delay: 0.5s; transition-duration: 1.5s; transform: scale(0.9) translateY(80px);
}
.Certification_img {
	display: block; width: 45%; aspect-ratio: 596 / 842;
	background-image: url(../images/profile/Certification_pdf.png); background-repeat: no-repeat; background-size: contain;
	margin: 0px auto 80px; transition-delay: 0.5s; transition-duration: 1.5s; transform: scale(0.9) translateY(80px);
}
.access { width: 60%; margin: 0px auto; position: relative; border-top: solid 1px #005EAC; border-bottom: solid 1px #005EAC; margin-bottom: 30px; }
.access:before, .access:after { content: ""; position: absolute; top: -8px; width: 1px; height: calc(100% + 16px); background-color: #005EAC; }
.access:before { left: 15px; }
.access:after { right: 15px; }
.access span { display: inline-block; padding: 10px 0px; width: calc(100% - ((15px + 1px) * 2)); height: 100%; background-color: #FFF; font-size: 18px; }
p.map { width: 70%; text-align: left; margin: 10px auto; }
.googlemap { width: 70%; height: 450px; margin-bottom: 30px; }
@media screen and (max-width: 600px) {
	#Content_Area.profPage { padding: 30px 10px; }
	.profPage .heading_img span { top: 2px; left: 25px; letter-spacing: 0.6em; text-indent: 0em; }
	.prof_list, .hist_list, .affi_list { padding: 20px 10px 15px; width: 75%; }
	.googlemap { width: 90%; height: 350px; }
}

/*#################################################*/
/*###################　施工実績　##################*/
/*#################################################*/
#Content_Area.perforPage {
	padding: 50px 30px; position: relative; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.perforPage .heading_img { background-image: url(../images/performance/page_img.jpg); }
.perforPage .heading_img  span { letter-spacing: 0.8em; text-indent: 0.8em; }
.perfor_list {
	position: relative; width: 75%; margin: 50px auto 10px; padding: 20px 70px 15px; background-color: #FFF;
	box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3); border-radius: 10px; corner-shape: bevel; opacity: 0.9;
}
.perfor_list span.sp,
.perfor_list span.ar { display: block; font-size:20px; margin:15px 15px 0px; font-weight:600; color: #999 ; }
.perfor_list span.ar { letter-spacing: 0.8em; text-indent: 0.8em; margin-top: 50px; }
.listbox { list-style: none; text-align: left; padding: 0; margin:0px 0px 20px; }
.listbox li {
	color: #2d8fdd; border-left: solid 5px #2d8fdd; background: #f1f8ff;
	margin-bottom: 2px; font-size: clamp(12px, 1.2vw, 16px); padding: 0.5em;
}
.listbox li.ti {
	color: #888; border-left: 0; background: #FFF; margin-bottom: 2px;
	font-size: clamp(12px, 1.2vw, 16px); font-weight:600; padding: 0 0.5em 0;
}
@media screen and (max-width: 600px) {
	#Content_Area.perforPage { padding: 30px 10px; }
	.perforPage .heading_img span { top: 2px; left: 25px; letter-spacing: 0.6em; text-indent: 0em; }
	.perfor_list { padding: 20px 10px 15px; }
}

/*###################　3Dカードエリア　##################*/
#Card_Area.cardPage {
	padding: 40px 30px 50px; position: relative; background-color: #EEE;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.9) 0%, rgba(238, 238, 238, 1) 35%);
}

/*#################################################*/
/*###################　採用情報　##################*/
/*#################################################*/
#Content_Area.recruitPage {
	padding: 0px 0px 50px; position: relative; min-height: 800px;
	background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.recruitPage .recruit_img {
	position: relative; max-width: 1485px; max-height: 720px;margin:0 auto; width: 100%; aspect-ratio: 1485 / 580;
	background-image: url(../images/recruitment/recruit_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.recruitPage .recruit_img span {
	position: absolute; top: 55%; left: 50%; transform: translateX(-50%); color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: 32px; letter-spacing: 0.8em; text-indent: 0.8em; background: linear-gradient(150deg, rgba(247, 166, 12, 0.7) 10%, rgba(255, 34, 87, 0.7) 40%,
	 rgba(154, 39, 238, 0.7) 68%, rgba(35, 102, 247, 0.8) 90%); border-radius: 0px 10px 0px 10px; corner-shape: bevel; white-space: nowrap;
}
.rec_comment {
	box-sizing: border-box; padding: 10px; margin: 40px auto 0px; width: 70%; min-height: 120px; background: #FFF;
	font-size: clamp(12px, 1.5vw, 16px); border-radius: 0px 20px 0px 20px; corner-shape: bevel;
}
.introduction {
	box-sizing: border-box; padding: 10px; margin: 30px auto 0px; width: 80%; min-height: 120px; background: #FFF;
	font-size: clamp(12px, 1.5vw, 16px); border-radius: 0px 20px 0px 20px; corner-shape: bevel;
}
.rec_comment span,
.introduction span { font-weight: 600; }
.FAQ { margin: 40px auto 0px; width: 90%; padding-bottom:30px; background: #FFF; border-radius: 0px 20px 0px 20px; corner-shape: bevel; }
.FAQ span {
	position: relative; top: 15px; left: 0px; color: #555; font-weight: 700; font-size: clamp(16px, 2.5vw, 24px);
	white-space: nowrap; display: inline-block; margin-bottom:30px;
}
.faq_list { width: 93%; margin:0 auto 0; }
.faq_list dt {
	display: flex; align-items: center; position: relative; background: #BFEFFF; width: 100%; height: 60px; margin: 4px 0 1px;
	border-radius: 10px 0px 10px 0px; corner-shape: bevel; cursor: pointer; transition: box-shadow 0.4s ease; 
}
.faq_list dt span {
	position: absolute; margin:0; top: 20px; left: 20px; width: 20px; height: 20px;
	background-image: url(../images/indent.png); background-repeat: no-repeat; background-size: contain; transition: transform 0.4s ease;
}
.faq_list dt:hover { box-shadow: 2px 6px 15px rgba(0, 0, 0, 0.2); }
.faq_list dt.is-open span { transform: rotate(90deg); }
.faq_list dd {
	box-sizing: border-box; background: #BFEFFF; width: 100%; margin: 0; opacity: 0; padding: 0 20px 0 55px;
	border-radius: 0px 10px 0px 10px; corner-shape: bevel; display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows 0.7s ease, opacity 0.7s ease, margin 0.7s ease, padding 0.7s ease;
}
.faq_list dd > div { overflow: hidden; text-align: left; }
.faq_list dd.is-open { padding: 20px 20px 20px 55px; grid-template-rows: 1fr; opacity: 0.7; margin-bottom: 15px; }
.faq_list dt p,
.faq_list dd p { display: inline-block; margin: 0; font-size: clamp(12px, 1.5vw, 16px); text-align: left; }
.faq_list dt p { padding: 0 20px 0 55px; }
.faq_list dd p { padding: 0; }
.inquiry_link {
	position: relative; margin: 50px auto 0px; width: 98%; height: 100px; border-radius: 5px;
	background-image: linear-gradient(122deg, rgba(171, 176, 255, 1), rgba(255, 137, 179, 1) 19%, rgba(224, 216, 239, 1) 31%, rgba(14, 244, 255, 1) 61%);
}
.inquiry_link a { display:block; text-decoration: none; width: 100%; height: 100%; transition: opacity 0.8s ease; }
.inquiry_link a:hover { background: #666; opacity: 0.5; border-radius: 5px; }
.inquiry_link span {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: 28px; letter-spacing: 0.1em; text-indent: 0.1em; line-height: 28px; white-space: nowrap;
}
@media screen and (max-width: 600px) {
	#Content_Area.recruitPage { padding: 30px 10px; }
	.recruitPage .heading_img span { top: 2px; left: 25px; letter-spacing: 0.6em; text-indent: 0em; }
}
@media screen and (max-width: 400px) {
	.faq_list dd.is-open { padding: 20px; }
}

/*#################################################*/
/*#################　お問い合わせ　################*/
/*#################################################*/
fieldset { border: 0; padding: 0; margin: 0; }
#Content_Area.inquiryPage {
	padding: 2% 2% 50px; position: relative; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.inquiryPage .upper_container { display: flex; flex-wrap: wrap; justify-content: space-around; }
.inquiryPage .inquiry_img {
	position: relative; margin: 0 0 20px 0; box-sizing: border-box; width: clamp(170px, 30vw, 400px); aspect-ratio: 1408 / 768;
	background-image: url(../images/inquiry/inquiry_img.jpg); background-repeat: no-repeat; background-size: contain;
}
.inquiryPage .inquiry_img span {
	position: absolute; bottom: clamp(5px, 0.5vw, 20px); left: 50%; transform: translateX(-50%); color: #FFF; font-weight: 700; 
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); font-size: clamp(18px, 3vw, 32px); letter-spacing: 0.3em; text-indent: 0.3em; white-space: nowrap;
}
.inquiry_tel,
.inquiry_fax { padding-top: 35px; box-sizing: border-box; }
.inquiry_tel h3,
.inquiry_fax h3 { margin: 0 0 10px 0; padding: 3px 10px; background: #DBF4FF; color: #FF4000; font-size: clamp(14px, 2vw, 18px); }
.inquiry_tel p,
.inquiry_fax p { text-align: left; margin: 3px 10px; }
.inquiry_tel .time,
.inquiry_fax .time { font-size: clamp(8px, 1.3vw, 12px); color: #666; }
.inquiry_tel .phone,
.inquiry_fax .phone { font-size: clamp(10px, 1.8vw, 16px); }
.question_link { margin-top: 20px; }
.question_link a { padding: 10px; text-decoration: none; border: 1px solid #CCC; background: #FFFF73; border-radius: 5px; }
.question_link p { font-size: 0.9em; }
.return_link a { padding: 10px; text-decoration: none; border: 1px solid #CCC; background: #FFFF73; border-radius: 5px; }
.return_link p { font-size: 0.9em; }
.inquiryPage .middle_container { margin-top: 30px; }
.inquiryPage .under_container { margin-top: 30px; display: none; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.middle_container.fade-out { opacity: 0; transform: translateY(-30px); transition: opacity 0.5s ease-in, transform 0.5s ease-in; }
.under_container.fade-in { opacity: 1; transform: translateY(0); }
.middle_container h3,
.under_container h3 { display: inline; margin: 0; padding: 3px 10px; background: #DBF4FF; color: #FF4000; font-size: clamp(14px, 2vw, 18px); }
.thanks_container { margin-top: 30px; }
.thanks_container h3 { color: #0040FF; font-size: clamp(11px, 2vw, 20px); }

.form_title { margin: 0 0 15px; color: #007BFF; font-size: clamp(0.688rem, 0.507rem + 0.82vw, 1.125rem); font-weight: 600; }
.inquiry_mail,
.recruit_mail {
	width: 75%; margin: 10px auto 10px; padding:20px 30px 30px; background-color: #FFF; z-index: 8;
	box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3); border-radius: 10px; corner-shape: bevel; opacity: 1;
}
.inquiry_mail .form_step,
.recruit_mail .form_step {
	display: flex; align-items: flex-start; width: 100%; min-height: 50px; border:1px solid #DDD;
	padding: 15px; box-sizing: border-box; margin-bottom: 20px; font-size: clamp(11px, 1.2vw, 18px);
}
.form_step dt { width: 30%; text-align: left; font-size: clamp(10px, 1.8vw, 16px); }
.form_step dd { width: 70%; text-align: left; }
.form_step dd label { display: block; font-size: clamp(10px, 1.8vw, 16px); }
.form_step dt span { float: right; padding: 2px 4px; margin-left: 15px; color: #FFF; background: red; font-size: 11px; }
.in_select { width: 80%; height: 26px; }
.in_text { width: 80%; height: 20px; }
.in_file { width: 80%; height: 26px; }
.in_area { width: 80%; }
.in_select:focus,
.in_text:focus,
.in_area:focus { border-color: #007BFF; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); outline: none; }

.inquiry_mail .form_step_end,
.recruit_mail .form_step_end {
	display: block; text-align: left; width: 80%; min-height: 50px; border:1px solid #DDD;
	padding: 20px; box-sizing: border-box; margin: 0 auto 20px; font-size: clamp(11px, 1.2vw, 16px);
}
.form_step_end span { color: red; font-weight: 600; }
.protection { color: #AAA; margin: 0 0 0 20px; font-size: clamp(9px, 1.2vw, 12px); }
.personal { margin: 10px; }
.personal dt {
	display: list-item; list-style: square; list-style-position: inside;
	font-size: clamp(8px, 1.2vw, 13px); font-weight: 600; margin-top: clamp(0.125rem, -0.21rem + 1.53vw, 0.938rem);
}
.personal dd { display: list-item; font-size: clamp(9px, 1.2vw, 13px); color: #AAA; margin-left: 18px; }
.personal dd::marker { content: "・"; }
.personal dt .protection { display: inline; }

.inquiry_mail button,
.recruit_mail button {
	display: flex; justify-content: center; align-items: center; position: relative; width: 250px; margin: 0 auto;
    padding: .9em 2em; border: none; z-index: 1; background-color: transparent; color: #FFF; font-size: 1em;
	cursor: pointer; transition: opacity 0.3s ease;
}
.inquiry_mail button::before,
.recruit_mail button::before {
    position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%;
    background-color: #005EAC; content: ''; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.inquiry_mail button:hover,
.recruit_mail button:hover { opacity: 0.9; }
.inquiry_mail button:hover::before,
.recruit_mail button:hover::before { box-shadow: 3px 4px 10px rgba(0, 94, 172, 0.64); background-color: #004783; }

/* Contact Form 7 のエラーメッセージ整形（チップ）を改行して表示 */
.screen-reader-response { display: none; }		/* 上部メッセージを非表示 */
.wpcf7-response-output { margin-bottom: 10px; color: #dc3232; font-size: 0.85em; font-weight: 700; background: #DBF4FF; }
.wpcf7-not-valid-tip { display: block; margin-top: 5px; color: #dc3232; font-size: 0.85em; }

@media screen and (max-width: 600px) {
	.form_step span { font-size: 9px; }
	.in_select { height: 18px; }
	.in_text { height: 16px; }
	.personal { margin: 5px; }
	.question_link a,
	.return_link a { padding: 5px; font-size: clamp(10px, 1.8vw, 16px); }
	.question_link p,
	.return_link p { font-size: clamp(9px, 1.8vw, 14px); }
}

/*#################################################*/
/*#################　お知らせ一覧　################*/
/*#################################################*/
#Content_Area.noticePage {
	padding: 2% 2% 50px; position: relative; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.noticePage .notice_img {
	position: relative; margin: 0; width: clamp(170px, 30vw, 400px); aspect-ratio: 400 / 200; border-radius: 15px;
	background-image: repeating-radial-gradient(circle at 30% 72%, rgba(178, 254, 255, 1), rgba(137, 219, 248, 1) 12%, rgba(178, 254, 255, 1) 24%);
}
.noticePage .notice_img span {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; font-weight: 700; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	font-size: clamp(18px, 3vw, 32px); letter-spacing: 0.3em; text-indent: 0.3em; white-space: nowrap;
}
.notice_post {
	position: relative; box-sizing: border-box; padding: 20px 10px; margin: 50px auto 0px; width: 90%; min-height: 120px;
	background: #FFF; font-size: clamp(12px, 1.5vw, 16px); box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3);
	border-radius: 15px 0px 15px 0px; corner-shape: bevel;
}
.Circle_Mark2 {
	position: absolute; right: 10px; bottom: 10px; background:url(../images/circle.png) no-repeat center/contain;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS PMincho", "MS 明朝", serif;
	font-size:26px; width:73px; height:58px; z-index: 10; margin: 0;
}
.Circle_Mark2 a { display:block; line-height:58px; color: #333; text-decoration: none; }
.Circle_Mark2:hover { opacity:0.5; transition: opacity 0.5s ease; }
@media screen and (max-width: 600px) {
	.notice_post { margin-top: 30px; }
}

/*********************************************************************************/
/************************************バナーエリア*********************************/
/*********************************************************************************/
#Banner_Area {
	display: block; height: 300px; max-width: 1100px; background-color: #FFFFF0; margin-left: auto;
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 10% 100%, 0 60%); position: relative;
	background: linear-gradient(to bottom right, rgba(255, 255, 240, 1) 50%, rgba(255, 255, 240, 0.3) 100%);
}
/* 画像タイル：5角形へ変形＋オーバーレイ＆2px枠 */
#Banner_Area .tile-link { position: absolute; width: 300px; height: 150px; top: 80px; }
#Banner_Area .tile-link:nth-of-type(1) { left: 20%; } /* 1番目のaタイル（建築部） */
#Banner_Area .tile-link:nth-of-type(2) { left: 60%; } /* 2番目のaタイル（スポーツ） */
.architect, .sports {
	width: 100%; height: 100%; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%); transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#Banner_Area .tile-link:hover .architect,
#Banner_Area .tile-link:hover .sports {	clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%);	background: #YOUR_HOVER_COLOR; }
/* --- エリア固有設定 --- */
.architect::after { background-image: url(../images/architect.jpg); }	/* タイルの背景画像 */
.sports::after	  { background-image: url(../images/sports.jpg); }		/* タイルの背景画像 */
.architect span { letter-spacing: 0.8em; text-indent: 0.8em; }			/* 文字間隔の個別調整 */
#Banner_Area .tile_div span { font-size: 26px; }						/* バナーエリアの文字は26px固定 */

@media screen and (max-width: 769px) {
	#Banner_Area { height: 450px; }
	#Banner_Area .tile-link { position: absolute; width: 300px; height: 150px; }
	#Banner_Area .tile-link:nth-of-type(1),
	#Banner_Area .tile-link:nth-of-type(2) { left: 30%; }		/* 元の「.architect, .sports { left: 30%; }」をaタグで再現 */
	#Banner_Area .tile-link:nth-of-type(1) { top: 80px; }
	#Banner_Area .tile-link:nth-of-type(2) { top: 260px; }
}
@media screen and (max-width: 559px) {
	#Banner_Area .tile-link:nth-of-type(1),
	#Banner_Area .tile-link:nth-of-type(2) { left: 20%; }		/* 左位置（20%）をaタグに適用 */
}
@media screen and (max-width: 399px) {
	#Banner_Area .tile-link:nth-of-type(1),
	#Banner_Area .tile-link:nth-of-type(2) { left: 10%; }		/* 左位置（10%）をaタグに適用 */
}
/*********************************************************************************/
/**************************************SNSナビ************************************/
/*********************************************************************************/
#SNS_Navi {
	display: block; height: 100px; width: 100%; position: relative; background-color: #DFF;
	/* 円形グラデーションの中心位置：center（中央）グラデーションの形：circle（正円、指定しない場合は要素に合わせて楕円）rgba(赤, 緑, 青, 不透明度) */
	background: radial-gradient( at center, rgba(221, 255, 255, 1) 0%, rgba(220, 255, 255, 0.5) 100% );
}
.SNS_List { width: 100%; height: 80px; list-style: none; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
@media screen and (max-width: 432px) {
	#SNS_Navi { height: 100px; }
	.SNS_List { height: 80px; }
}
@media screen and (max-width: 263px) {
	#SNS_Navi { height: 100px; }
	.SNS_List { height: 80px; }
}
.SNS_List li { display: inline-block; width: 80px; height: 80px; }
.SNS_List li a { text-indent:-9999px; display: block; height: 56px; width: 56px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.SNS_List li::after {								/* 通常時は「透明な白い膜」をボタンと同じサイズで裏に仕込んでおく */
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); opacity: 0;
	transition: opacity 0.5s ease; pointer-events: none; border-radius: 50%;
}
.SNS_List li:hover::after { opacity: 1; }			/* 不透明度を1にして白膜を表示 */

.Facebook { background:url('../images/SNS/Facebook.png') no-repeat; background-size: 70%; background-position: center; position: relative; }
.Instagram { background:url('../images/SNS/Instagram.png') no-repeat; background-size: 70%; background-position: center; position: relative; }
.LINE { background:url('../images/SNS/LINE.png') no-repeat; background-size: 70%; background-position: center; position: relative; }
.X { background:url('../images/SNS/X.png') no-repeat; background-size: 70%; background-position: center; position: relative; }
.Youtube { background:url('../images/SNS/Youtube.png') no-repeat; background-size: 70%; background-position: center; position: relative; }

/*********************************************************************************/
/************************************フッター*************************************/
/*********************************************************************************/
#Footer { height: 350px; width: 100%; background-color: #FFF; position: relative; }
#FooterMenu { width: 60%; height: 120px; position: absolute; top: 40px; left: 6%; }
.Sub_Menu { list-style: none; padding: 0; margin: 0; display: flex; height: 100%; align-items: center; gap: 10px; }
.Sub_Menu li { flex: 1; text-align: center; border: 1px solid #DDD; border-radius: 3px; padding: 2px; }
.Sub_Menu li a { display:block; width: 100%; height: 100%; color: #333; text-decoration: none; }
.Sub_Menu li a:hover { color: #AAA; transition: 0.5s; }
#FooterLink {
	background: url("../images/Recruit_BG.jpg") no-repeat; background-size: cover; width: 25%; height: 130px; position: absolute; top: 30px; left: 70%;
	border-radius: 15px 0px 15px 0px; corner-shape: bevel; transition: transform 0.4s ease, box-shadow 0.4s ease; 
}
#FooterLink a {							/* リンクをタイルの端まで広げ、文字を真ん中に集める設定 */
	display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;
	text-decoration: none; text-align: center; background-color: rgba(0, 0, 0, 0.15); 
	transition: background-color 0.4s ease; border-radius: 15px 0px 15px 0px; corner-shape: bevel;
}
#FooterLink:hover,
#FooterLink:active { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
#FooterLink:hover a { background-color: rgba(0, 0, 0, 0.05); }
#FooterLink p { color: #FFF; font-weight: 600; margin: 0; }
#FooterLink p span { background: #8C008C; }
.Recruit_1 { font-size: 20px; }
.Recruit_2 { font-size: 30px; margin-top: 5px; margin-bottom: 5px; }
.Recruit_3 { font-size: 12px; }
#Footerlogo { width: 78px; height: 87px; position: absolute; bottom: 70px; right: 360px; }
#Footerlogo a {
	background:url(../images/footer_logo.jpg) no-repeat; background-size:contain;
	display: block; text-indent:-9999px; width: 78px; height: 87px; transition: opacity 0.5s ease;
}
#Footerlogo a:hover { opacity: 0.7; }
#Name_Address { display: inline-block; width: 300px; height: 87px; position: absolute; bottom: 70px; right: 50px; text-align: left;	}
.name_1 {
	font-family: "HG丸ｺﾞｼｯｸM-PRO", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", sans-serif;
	display: inline-block; font-size: 18px; vertical-align: baseline; line-height: 28px; margin-left: 3px; margin-right: 7px; font-weight:500;
}
.name_2 {
	font-family: "HG丸ｺﾞｼｯｸM-PRO", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", sans-serif;
	display: inline-block; font-size: 30px; vertical-align: baseline; line-height: 30px; font-weight:500; 
}
.address { display: block; font-size: 14px; line-height: 16px; text-align: right; }
@media screen and (max-width: 829px) {
	#FooterLink { width: 205px; height: 130px; top: 30px; left: 70%; }
}
@media screen and (max-width: 704px) {
	#Footer { height: 450px; padding-top:20px; }
	#FooterMenu { position: static; margin:0px 20px; }
	#FooterLink { width: 205px; height: 130px; position: static; margin: 20px auto 0; }
}
@media screen and (max-width: 446px) {
	#Footer { height: 480px; }
	#FooterMenu { height: 150px; }
	#FooterLink { margin-top: 30px; }
	#Footerlogo { display: block; position: absolute; top: 350px; left:4%; bottom: 0; right: 0; }
	#Name_Address { display: block; position: absolute; top: 335px; left:26%; width: 230px; height: auto; bottom: 0; right: 0; }
}
#Copyright { height: 24px; width: 100%; position: absolute; bottom: 5px; }
#Copyright p { font-size: 12px; margin: 0px; }

/*############################################　サイトマップ　##########################################*/
#Content_Area.sitemapPage {
	padding: 2% 2% 50px; position: relative; background: linear-gradient(to bottom right, rgba(238, 238, 238, 0.5) 0%, rgba(238, 238, 238, 1) 70%);
}
.sitemapPage .sitemap_img {
	position: relative; margin: 0; width: clamp(170px, 30vw, 400px); aspect-ratio: 400 / 200; border-radius: 15px; corner-shape: bevel;
	 background-image: linear-gradient(90deg, rgba(61, 200, 194, 1), rgba(61, 156, 194, 1) 50%, rgba(197, 125, 233, 1));
}
.sitemapPage .sitemap_img span {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF; font-weight: 700;
	 text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); font-size: clamp(18px, 3vw, 32px); letter-spacing: 0.3em; text-indent: 0.3em; white-space: nowrap;
}
/* ====================　ツリー表示　====================== */
/*　{ transform: rotate(180deg); transform-origin: 50%; }←①を.treeに表記で系統樹に変化　*/
.tree { margin-top: 30px; background: #FFF; box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3); border-radius: 15px 0px 15px 0px; corner-shape: bevel; }
.tree ul { position: relative; padding: 2em 0; white-space: nowrap; margin: 0 auto; text-align: center; }
.tree ul::after { content: ''; display: table; clear: both; }
.tree li { display: inline-block; vertical-align: top; text-align: center; list-style-type: none; position: relative; padding: 2em .5em 0 .5em; }
.tree li::before,
.tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #AAA; width: 50%; height: 2em; }
.tree li::after { right: auto; left: 50%; border-left: 1px solid #AAA; }
.tree li:only-child::after,
.tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before,
.tree li:last-child::after { border: 0 none; }
.tree li:last-child::before{ border-right: 1px solid #AAA; border-radius: 0 5px 0 0; }
.tree li:first-child::after{ border-radius: 5px 0 0 0; }
.tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #AAA; width: 0; height: 2.1em; }
.tree li a {
	border: 1px solid #AAA; padding: .5em .75em; text-decoration: none; display: inline-block; border-radius: 5px; color: #333; position: relative; top: 1px; 
}	/*　{ transform: rotate(180deg); }←②を①と同時に.tree li aに表記で系統樹に変化　*/
.tree li a:hover,
.tree li a:hover+ul li a { background: #e9453f; color: #FFF; border: 1px solid #e9453f; }
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before{ border-color:  #e9453f; }

/* --- 1. 3段目のul（縦並びエリア全体） --- */
ul.v-tree { display: block; text-align: left; padding: 1.5em 0 0 0; position: relative; background: none; }
ul.v-tree::before {
	content: '' !important; display: block; position: absolute !important; top: 0 !important; left: 50% !important;
	 width: 0 !important; height: calc(100% - 2.5em) !important; 
}
/* --- 2. 3段目の各li（建設部、スポーツ事業部など） --- */
li.v-tree { display: block; text-align: left; padding: 0.6em 0 0.6em calc(50% + 30px); position: relative; }
li.v-tree::before,
li.v-tree::after { display: block; border: none; border-radius: 0; width: auto; height: auto; }
li.v-tree > a { position: relative; background: none; }
li.v-tree::before { content: ''; position: absolute; top: 2em; left: 50%; width: 30px; height: 0px; border-top: 1px solid #AAA; }
li.v-tree:first-child::before { border-top: 1px solid #AAA; }
li.v-tree:last-child::before {
	content: ''; position: absolute; top: 0; left: 50%; width: 30px; height: 2em;
	border-top: none; border-right: none; border-left: 1px solid #AAA; border-bottom: 1px solid #AAA; border-bottom-left-radius: 5px;
}
/* --- 3. 4段目（現場ブログ）のL字接続＆自動押し下げ --- */
li.v-tree > ul { display: block; text-align: left; padding: 1.5em 0 0; position: relative; }
li.v-tree > ul::before { height: 2.75em; width: 0.9em; border-bottom: 1px solid #AAA; border-bottom-left-radius: 5px; }
/* 4段目のli（現場ブログを囲む要素） */
li.v-tree > ul > li { display: block; text-align: left; padding: 0 0 0 55px; position: relative; }
li.v-tree > ul > li::before,
li.v-tree > ul > li::after { display: block; border: none; border-radius: 0; }

@media screen and (max-width: 770px) {
	.tree li a { padding: 0.4em 0.2em; white-space: normal; }
	ul.v-tree::before { height: calc(100% - 3.3em) !important; }
	ul.v-tree_sp::before { height: calc(100% - 4.3em) !important; }
	li.v-tree > ul::before { width: 1.2em; }
}
@media screen and (max-width: 695px) {
	li.h-tree a { writing-mode: vertical-lr; text-orientation: upright; }
	ul.v-tree,ul.v-tree_sp { top: -3px; }
	li.v-tree > ul { top: -3px; }
	li.v-tree > ul::before { height: 2.75em; width: 2.5em; }
	ul.v-tree::before { height: calc(100% - 7em) !important; }
	ul.v-tree_sp::before { height: calc(100% - 9.1em) !important; }
}
@media screen and (max-width: 405px) {
	.tree { font-size: 12px; }
	li.v-tree > ul::before { width: 3.6em; }
	ul.v-tree::before { height: calc(100% - 7em) !important; }
}

/***************************　PageTopボタン　****************************/
#PageTop {
	display: none; background-color: rgba(50,50,50,0.5); border-radius:5px; color:#FFF; font-size:12px; text-decoration:none; padding:10px 15px;
    position:fixed; bottom:20px; right:20px; z-index: 13; transition: background-color 0.5s ease, color 0.5s ease;
}
#PageTop:hover { color:#000; background-color: rgba(153,255,255,0.5); }