﻿/*******************************************************/
/*                                                     */
/* 全体スキンの編集(共通）　　　　　　　　　　                */
/*                                                     */
/*******************************************************/


/* ボディ */
body
{
	margin: 0 ;			/* スペース */
	padding: 0 ;			/* 余白 */
	line-height: 1.5em;
	font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*	background:  url(../images/bkskin.jpg);				/* 背景色(確認用) */
	color: #fff;
	overflow-x: hidden;
}
/*******************************************************/
/*                                                     */
/* ヘッダ部分の編集                                    */
/*                                                     */
/*******************************************************/
header
{
/*
	margin: 0 auto;
	color: #000;
	padding: 0;
	border-bottom: 3px solid #0d52b1;			
	text-align: right ;
*/
	max-width: 100%;
	border-bottom: 3px solid #0d52b1;
}
nav
{
	clear both;
	text-align: center;
}

@media screen and (min-width: 769px)
{ 
	.hamburger,
	.global-nav
	{
		display: none;
	}

	.header-inner
	{
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 10px;   /* ← 左右の余白 */
		text-align: center ;				/* テキスト、画像の真ん中寄せ */
	}
	.title-pc
	{
		max-width: 1100px;
		height: 130;
	/*	border-bottom: 5px solid #23c3a4 ;			/* 枠線 */
		margin-top: 3px ;				/* 他のブロックとのスペース */
		margin-bottom: 0;
	/*	background:  #23c3a4;				/* 背景色(確認用) */
		display: grid;
		grid-template-columns: 700px 380px;
		grid-template-rows: auto 1fr;
	}
	.title-left
	{
		grid-column: 1;
		grid-row: 1;
	}
	.title-right
	{
		grid-column: 2;
		grid-row: 1;
		padding-right: 10px;
	}

	.contact-tel-box
	{
		display: flex;
		flex-direction: column;
		gap: 0;
		text-align: center; /* 全体を中央寄せしたい場合 */
		margin-top: 5px;
		margin-left: auto;   /* 箱そのものを右寄せ */
		text-align: right;   /* 中のテキストを右揃え */
		align-items: flex-end;
}

	/* 1行目 */
	.tel-lead
	{
		margin: 0;
		font-size: 12px;
		line-height: 1.2;
		color: #000;
	}

	/* 2行目（画像＋電話番号） */
	.mail-main
	{
		display: flex;
		justify-content: center; /* 中央配置 */
		align-items: center;
		line-height: 1;
		margin-top: 0px;
		margin-bottom: 5px; 
	}

	.mail-main img
	{
		width: 30px;
		height: auto;
	}
	/* メールフォーム */
	.mail-form
	{
		font-size: 18px;
		font-weight: bold;
		color: #000;
		text-decoration: none;
		padding-left: 10px;
		margin-top: 10px;
	}
	.mail-note
	{
		margin: 0; 
		font-size: 12px;
		color: #555;
		line-height: 1.2;
	}

	.tel-main
	{
		display: flex;
		justify-content: center; /* 中央配置 */
		align-items: center;
		margin-top: 0;
		padding-top: 5px;
		border-top: 1px solid #000;
	}

	.tel-main img
	{
		width: 30px;
		height: auto;
	}

	/* 電話番号 */
	.tel-number
	{
		font-size: 26px;
		font-weight: bold;
		color: ##0d5211;
		text-decoration: none;
		padding-left: 10px;
	}

	/* 3行目 */
	.tel-note
	{
		margin: 0; 
		font-size: 12px;
		color: #555;
		line-height: 1.2;

	}

	.title-sm
	{
		display: none;
	}

	#main-menu
	{
		display: flex;               /* ← 横並びはこれ */
		justify-content: flex-end;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#main-menu ul
	{
	}

	#main-menu > li
	{
		position: relative;          /* ← サブメニューの基準点 */
	}
	#main-menu > li > a
	{
		display: block;
		padding: 10px 18px;
		color: #0d52b1;
		font-weight: bold;
		text-decoration: none;
	}

	#main-menu > li > a:hover
	{
		background: #eaf6ff;
	}

	#main-menu > li.has-sub
	{
		position: relative;
		padding-bottom: 10px; /* ← hoverの橋渡し */
	}

	.sub-menu
	{
		display: none;
		position: absolute;          /* ← 必須 */
		top: calc(100% - 6px);                   /* 親の真下 */
		left: 0;
		background: #fff;
		min-width: 220px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		border-radius: 8px;
		z-index: 1000;
	}

	.sub-menu li
	{
		display: block;
	}

	.sub-menu a
	{
		padding: 10px 16px;
		display: block;
		color: #234766;
		white-space: nowrap;
	}

	.sub-menu a:hover
	{
		background: #f0f7ff;
	}

	.has-sub:hover > .sub-menu
	{
		display: block;
	}
}


@media screen and (max-width: 768px)
{
	#main-menu
	{
		display: none;
	}

	.header-inner
	{
		/*position: relative;*/
		margin: 0 auto;
		padding: 0 10px;   /* ← 左右の余白 */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title-pc
	{
		display: none;
	}

	.title-sm img
	{
		display: block; 
		max-width: 100%;
		height: auto;
	/*	border-bottom: 5px solid #23c3a4 ;			/* 枠線 */
		text-align: center ;				/* テキスト、画像の真ん中寄せ */
		margin-top: 3px ;				/* 他のブロックとのスペース */
	/*	background:  #23c3a4;				/* 背景色(確認用) */
	}
	.hamburger
	{
		display: block;
	}

	.hamburger
	{
	/*
		display: block;
		position: absolute;
		top: 16px;
		right: 16px;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 3000;
	*/
		position: fixed;
		top: 15px;
		right: 20px;
		max-width: 40px;
		height: 40px;
		background: #234766;
		color: #0d52b1;
		border: none;
		cursor: pointer;
		z-index: 1001;
	}

	.hamburger span
	{
		display: block;
		max-width: 100%;
		height: 5px;
		background: #fff;
		border-radius: 2px;
		transition: all 0.3s ease;
		margin: 3px 0; 
	}

	/* 各線の位置 */
	.hamburger span:nth-child(1)
	{
		transform: translateY(0);
	}
	.hamburger span:nth-child(2)
	{
		margin: 7px 0;
	}
	.hamburger span:nth-child(3)
	{
		transform: translateY(0);
	}

	.global-nav
	{
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background: #1f2933;
		transition: .3s ease;
		padding-top: 40px;
		z-index: 2000;
	}

	.global-nav.open
	{
		right: 0;
	}

	.hamburger.hide
	{
		display: none;
	}
	.global-nav ul
	{
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.global-nav a
	{
		display: block;
		padding: 10px 15px;
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid #374151;
	}

	/* サブメニュー（アニメーション） */
	.global-nav .sub-menu
	{
		display: block;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height .35s ease, opacity .25s ease;
		background: #243545;
		padding: 0;
		margin: 0;
	}

	.has-sub.open .sub-menu {
		max-height: 500px;
		opacity: 1;
		padding: 5px 0;
		pointer-events: auto;
	}

	.sub-toggle::after {
		content: "▼";
		float: right;
		transition: transform .3s;
	}

	.has-sub.open .sub-toggle::after {
		transform: rotate(180deg);
	}

	.close-btn
	{
		position: absolute;
		top: 16px;
		right: 16px;
		font-size: 32px;
		color: #eaf2f8;
		background: none;
		border: none;
		cursor: pointer;
		line-height: 1;
	}
/* ===== スマホ用：ハンバーガーメニュー最下部の問い合わせ ===== */
	.sp-contact-fixed
	{	
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #111827;
		border-top: 1px solid #374151;
	}

	.sp-contact-fixed a
	{
		display: block;
		text-align: center;
		padding: 14px 16px;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 16px;
	}

	.sp-contact-fixed .sp-tel
	{
		background: #2563eb; /* 電話：目立たせる */
	}

	.sp-contact-fixed .sp-mail
	{
		background: #1f2933;
		border-top: 1px solid #374151;
	}

	/* メニュー項目が下に隠れないよう余白確保 */
	.global-nav ul
	{
		padding-bottom: 120px;
	}

}

/*******************************************************/
/*                                                     */
/* コンテンツの編集                                    */
/*                                                     */
/*******************************************************/
.main-wrapper
{
/*	width: 1100px;*/
	margin: 0 auto;
	padding: 20px 0 0;
}
/*******************************************************/
/*                                                     */
/* フッダ部分の編集                                    */
/*                                                     */
/*******************************************************/
/* フッター */
footer
{
/* 	background: #076eb1;  深い濃紺 */
	background: #234766;  /* 深い濃紺 */
	color: #e8eef2;       /* 白みのある青白 */
	padding: 20px 0 30px;
	font-size: 14px;
	font-family :"Noto Sans JP", sans-serif;
}

.footer-container
{
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 80px;
	padding: 0 20px;
}

.footer-item
{
	flex: 1;
	line-height: 2.1;
}

/* anchoring color */
.footer-item h3
 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.09em;
	margin-bottom: 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(165,195,225,.5); /* 淡い青ライン */
	color: #fcf8b1; /* 淡いブルー */
}

/* company name bold */
.name
{
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 20px;
}

.menu ul
{
	list-style: none;
	padding: 0;
}

.menu li
{
	margin-bottom: 10px;
}

.menu a
{
	text-decoration :none;
	color: #e8eef2;
	transition: 0.3s;
}

.menu a:hover
{
	color: #fcf8b1;
	padding-right: 6px;
}

.sub-menu
{
  display: none;
  margin-top: 6px;
  padding-left: 14px;
}

.menu .sub-menu li a
{
	 font-size: 14px;
	color: #cbd5e1;
}

.menu .has-sub:hover > .sub-menu
{
	display: block;
}

.footer-nav .arrow
{
	display: none;
}

/* map */
.map-area iframe
{
	width: 100%;
	height: 200px;
	border- radius:6px;
	border: 1px solid rgba(120,150,180,.3);
}

/* bottom */
.footer-bottom
{
	margin-top: 55px;
	text-align: center;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.15);
	font-size: 13px;
	color: #e8eef2;       /* 白みのある青白 */
}

/* SNS */
.sns-area
{
	margin-top: 16px;
}

.sns-area a
{
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #e8eef2;
	font-weight: 600;
	transition: 0.3s;
}

.sns-area a:hover
{
	color: #fcf8b1;
}

.sns-area img
{
	width: 30px;
	height: 30px;
}

/* responsive */
@media screen and ( max-width:768px )
{
	.footer-container
	{
		flex-direction: column;
		padding: 0 16px;
		gap: 30px;
	}
}
