@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* ----------------------------------------
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

　style.css　　：全体の設定


　０．各部門のエリア確認用（ → 詳細は「area.css」）

　１．共通部分・全体レイアウト

　２．共通部分・装飾

　３．ヘッダーエリア

　４．フッターエリア

　５．ナビゲーション


　※色参考：原色大辞典　http://www.colordic.org/y/

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
---------------------------------------- */


/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　０．各部門のエリア確認用（ → 詳細は「area.css」）
＊＊＊＊＊＊＊＊
---------------------------------------- */
/* ★確認用
　　　各エリアの表示範囲を確認するためには、作業時に以下をコピペして使用する。
　　　なお、手前3つは“RBG色”、最後の「0」は“透過率”なので、数値を上げて使用する
　　　background-color: rgba( 230, 126, 34, 0);
　　　※使用例に『#TopPage」にのみ残している
*/

#TopPage { /* ※area.css：① */
	background-color: rgba( 231, 76, 60, 0); /* ★確認用 */
}
#INFORMATION { /* ※area.css：② */
}
#WORKS { /* ※area.css：③ */
}
#PROFILE { /* ※area.css：④ */
}
#BusinessCONTENTS { /* ※area.css：⑤ */
}
#CONTACT { /* ※area.css：⑥ */
}



/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　１．共通部分・全体レイアウト
　　　　　　　　　　　※ヘッダー、フッターのレイアウトは別
＊＊＊＊＊＊＊＊
---------------------------------------- */

#wrapper { /* ※「width」については、個別で設定 */
	position: relative;
	background-color: none; /* ★確認用 */
}

/* ：：： ヘッダーエリア ：：： */
#headerContainer { /* ※「height」については、個別で設定 */
  position: fixed;
  top: 8px;
  left: 8px;
  width: 99%;
  z-index: 1000;
  text-align: right;
  background-color: none; /* ★確認用 */
}

/* ：：： コンテンツエリア ：：： */
#contentContainer {
  margin: 0 0 0 8px;
  padding: 32px 0 0;
  height: 80%;
  border-bottom:  solid  1px  #677f7e;
  background-color: none; /* ★確認用 */
}
div.column,
section.column { /* ※「width」については、個別で設定 */
  float: left;
  height: 100%;
}

/* ：：： ナビゲーションエリア ：：： */
#subContainer {
  position: fixed;
  margin: 4px 0 0 8px;
  padding: 0;
  width: 99%;
  background-color: none; /* ★確認用 */
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  behavior: url(../css/PIE.htc);
}

/* ：：： フッターエリア ：：： */
#footerContainer {
  position: fixed;
  margin: 44px 0 0 8px;
  padding: 0 0 40px;
  width: 99%;
  background-color: none; /* ★確認用 */
}



/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　２．共通部分・装飾
＊＊＊＊＊＊＊＊
---------------------------------------- */

/* ページ全体 */
html {
  font-size: 12px; /* ：：：基本文字サイズ：：：← スマホにおける一般的な適切サイズ「16px」より小さい */
}

body {
	color: #2e2930; /* 紫黒（しこく） */
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , 'Noto Sans Japanese', "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 1rem; /* ：：：12px＝上記「html」で設定：：： */
	font-weight: 400; /* ：：：標準文字ウェイト：：： */
	font-style: normal;
	line-height:1.8; /* ：：：基本行間設定：：： */
}

/* 共通装飾 */
.column h1 { /* ：：：部門タイトル：：： */
	margin: 8px 0 0 16px;
	padding: 0 0 0 12px;
	height: 24px;
	font-size: 1.5rem; /* ：：：18px：：： */
	font-weight: 600;
	letter-spacing: 0.2em;
	border-left: 8px solid #677f7e;
	color: #677f7e; /* ：：：基本色（装飾用→文字色は「html」で設定）：：： */
	background-color: none; /* ★確認用 */
}
.column h2 { /* ：：：部門内見出し：：： */
  font-size: 1.25rem; /* ：：：15px：：： */
  font-weight: 600;
  letter-spacing: 0.15em;
}

.F_small { /* ：：：小文字：補足 等：：： */
	font-size: 0.667rem; /* ：：：約8.004px：：： */
}

.char2 { /* ：：：２文字：：： */
	letter-spacing: 2em;
}
.char3 { /* ：：：３文字：：： */
	letter-spacing: 0.5em;
}

.column_mainContent .toLINK { /* ：：：リンク先：：： */
	position: absolute;
	right: 8px;
	margin: 16px 0 0 0;
	font-size: 0.917rem; /* ：：：約11.004px：：： */
	text-align: right;
	display: inline-block;
	background: linear-gradient(transparent 60%, #e6fffe 60%);
	background-color: none; /* ★確認用 */
}

/* ページ全体のリンク色 */
a {color:#2e2930;text-decoration:underline;}  /* 紫黒（しこく） */
a:hover {color:#942343;text-decoration:none;}  /* ガーネット */
a:active {color:#942343;text-decoration:none;}  /* ガーネット */

/* リンク共通アニメーション */
a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

/* 画像の伸縮設定 */
img {
	max-width: 100%;
	height: auto;
	width /***/:auto;
}


/* お問い合せフォーム ▶ labelタグを視覚的に非表示にしてスクリーンリーダーでのみ読ませたいとき
　　2025.06.10_実装：ChatGPTからの提案を採用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　３．ヘッダーエリア
　　　　　　　　　　　※ヘッダーナビゲーション は、個別設定
＊＊＊＊＊＊＊＊
---------------------------------------- */

/* 事務所英字 */
#siteID {
  font-size: 1.083rem; /* ：：：約12.996px：：： ▼ フッター「#copyright」と同じサイズにする */
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #677f7e;
}
#siteID a {
  color: #677f7e;
}



/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　４．フッターエリア
＊＊＊＊＊＊＊＊
---------------------------------------- */

/* コピーライト */
#copyright {
  margin: 0;
  font-size: 1.083rem; /* ：：：約12.996px：：： ▲ ヘッダー「#siteID」と同じサイズにする */
  letter-spacing: 0.15em;
}
#copyright strong {
	font-weight: 400;
}

/* 事務所アドレス */
#footerINFO {
	margin: 8px 0 0;
	padding: 0;
	font-size: 0.917rem; /* ：：：約11.004px：：： */
}
#footerINFO h1 {
	font-size: 1.083rem; /* ：：：約12.996px：：： */
	font-weight: 600;
	letter-spacing: 0.3em;
}
#footerINFO h2 {
	margin: 0;
	font-size: 0.917rem; /* ：：：約11.004px：：： */
	font-weight: 400;
	letter-spacing: 0.15em;
}
#footerINFO ul {
	margin: 0;
}
#footerINFO li {
	float: left;
	margin: 0 16px 0 0;
	padding: 0;
	font-size: 0.833rem; /* ：：：約9.996px：：： */
	letter-spacing: 0.15em;
}
#HOMEyasugi h2 { /* 「▲ #footerINFO li」の「float:left」をリセット */
	clear: left;
}

#HOMEyonago {
	position: relative;
	margin: 4px 0 0;
}
#HOMEyasugi {
	position: relative;
	margin: 24px 0 0;
}



/* ---------------------------------------- 
＊＊＊＊＊＊＊＊
　　　　　　　　　５．ナビゲーション
＊＊＊＊＊＊＊＊
---------------------------------------- */
#mainNavigation {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
#mainNavigation li {
  float: left;
  margin: 1px 0;
  text-align: center;
  border-bottom: 3px solid #677f7e;
}
#mainNavigation a {
  display: block;
  font-size: 1rem; /* ：：：12px：：： */
  letter-spacing: 0.15em;
  padding: 8px 28px 0;
  overflow: hidden;
  color: #677f7e;

  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#mainNavigation a:hover,
#mainNavigation li.current a {
  color: #ffffff;
  background-color: rgba( 103, 127, 126, 1.0); /* ：：：基本色：#677f7e：：： */
}

.NavBlog {
	font-size: 0.667rem; /* ：：：約8.004px：：： */
}

#mainNavigation .subnav {
	border-bottom: none;
}
#mainNavigation .subnav a {
	font-size: 0.833rem; /* ：：：約9.996px：：： */
	padding: 10px 20px 4px;
}