@charset "UTF-8";
/* 
=======================================================================================================
◆◆common.css◆◆
1. 全ページ共通の基本設定
--余計なもののリセット（reset.cssで消しきれなかったもの）
--フォント（種類・サイズ）
--見出し・本文の段落スタイル設定
2. ヘッダー（#header）の設定
3. ナビゲーション（#menu）の設定
4. パンくずリスト（#pankuzu）の設定
5. トップページ以外の画像配置エリア（.img_box）の設定
6. トップへ戻るボタン（#btn_top）の設定
7. フッター（#footer）の設定
=======================================================================================================
*/


/* 
-------------------------------------------------------------------------------------------------------
1. 全ページ共通の基本設定
-------------------------------------------------------------------------------------------------------
*/

/* 余白等を一旦リセット */
* {
	margin: 0;
	padding:0;
	text-decoration: none;
	box-sizing: border-box;
}

/* リンクが貼ってある箇所の色が変わらないようにする */
a,
a:visited,
a:hover,
a:active {
	color: inherit;
}

/* 
フォントをNoto Sans JPにする。
ただしGoogleからダウンロードしたままのデータは重いのでウェイトは2つで軽量化済み。
 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url("../fonts/notosansjp-regular_min.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url("../fonts/notosansjp-bold_min.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}


/* フォントサイズの設定 */
html{
  font-size: 62.5%; /*1rem=10pxにすることでコーディングしやすくする*/
}
body{
  font-family: 'Noto Sans JP', sans-serif;
  font-size:1.6rem;/* 16px*/
  line-height: 1.6;
  color: #eee; /*すべての文字色が真っ白だとまぶしいのでデフォルトでは少し暗めにしておく*/
  letter-spacing: .05rem;
  font-weight: 400;
  background-color: #222;
}

h1 {
font-size: 4rem;
line-height: 1.3;
}
h2 {
font-size: 2rem;
line-height: 1.3;
}
h3 {
  font-size: 1.8rem;
  line-height: 1.6;
}
h4{
  font-size: 1.6rem;
  line-height: 1.3;
}

/* フォントサイズの設定（スマホ） */
@media (max-width: 695px) {/* 690px以下*/
body {
	font-size: 1.2rem;
}
h1{
	font-size: 2.2rem;/* 22px*/
}
h2 {
	font-size: 1.6rem;/* 16px*/
}
h3 {
  font-size:1.4rem; /*14px*/
}
h4 {
  font-size: 1.2rem; /*12px*/
}
}
  
/* 段落スタイル（文字サイズ以外）の設定 */
h1 {
  font-weight: 700;
  color: #fff; /*見出しなので文字色明るめ*/
}
h2 {
  font-weight: 700;
  border-left: #1e8702 solid 10px;
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 1px 6px;
  color: #fff; /*見出しなので文字色明るめ*/
  }
h3 {
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 3px;
  padding: 0 4px;
  color: #fff; /*見出しなので文字色明るめ*/
}
h4 {
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 0 4px;
  color: #fff; /*見出しなので文字色明るめ*/
}
p {
  font-weight: 400;
  padding:0 16px;
  margin-top: 2px;
}



/* 
-------------------------------------------------------------------------------------------------------
2. ヘッダー（#header）の設定（common.htmlと紐付け）
-------------------------------------------------------------------------------------------------------
*/

#header {
  width: 100%; /* ページ全幅をheader要素に*/
  display: flex; /*#header内横並び*/
  justify-content: space-between; /*#header内要素を両端寄せ*/
  height: 50px;
  background-color: #333;
}
/* 
---------------------------------------------------
「JR東日本 東京建設PMO」の設定
---------------------------------------------------
 */
.corp_logo {
  height: 100%;
  background-color: #1e8702;
  padding: 0 20px; /*左右20px外側まで緑色に塗る*/
  display: flex; /*↓と連携して.corp_logo aを縦横方向に中央寄せ*/
  align-items: center;
  justify-content: center;
}


.corp_logo a {
  width: 170px;
  display: flex; 
  align-items: center;
  justify-content: center;
}


/* ホバー時透明度50% */
.corp_logo a:hover {
  opacity: 0.5;
}

.corp_logo img {
  height: 40px;
}

/* 
---------------------------------------------------
Twitter/YouTubeアイコンの設定
---------------------------------------------------
*/
/* 高さを#headerから継承して横並び */
.top_links {
  height: 100%;
  display: flex;
}

.top_link {
  height: 100%; /* 高さを#headerから継承 */
  width: 50px;
  display: flex; /* ↓と連携して.top_link内の要素（.top_link a）を縦横方向中央寄せ */
  align-items: center;
  justify-content: center;
}

.top_link a {
  display: flex; /* ↓と連携してaタグ内の要素（アイコンのimg）を縦方向中央寄せ */
  align-items: center;
}

.top_link img {
  width: 20px;
}

/* ホバー時透明度50% */
.top_link a:hover {
  opacity: 0.5;
}



/* 
-------------------------------------------------------------------------------------------------------
3. ナビゲーションの設定（common.htmlと紐付け）
-------------------------------------------------------------------------------------------------------
*/
/* 
---------------------------------------------------
メインメニュー（第1階層）の設定
---------------------------------------------------
 */
#menu {
  height: 50px;
  background-color: #333;
  top: -1px; /*スクロール時なぜか#menuの上にわずかな隙間ができるのでこれで対応*/
  color:#fff;
}


/* 4要素（組織概要・プロジェクト・業務紹介・採用情報）を横並びに */
#menu ul {
  display: flex;
  height: 100%;
}

/* 4要素を等幅で配置 */
#menu ul li {
  flex:1;
  height: 100%;
}


/* 薄緑アイコンと文字の並べ方・スタイルを指定（スマホ版） */
#menu ul li a {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
#menu ul li a img {
  height: 25px;
  width: 25px; /*heightとwidth両方設定しないとieで表示崩れる*/
}

#menu ul li:nth-child(4) a img {
  width: 42.6px; /*heightとwidthを両方指定しないとieで表示崩れる。採用情報アイコンだけ横幅が異なるので個別指定。*/
}

#menu span {
  font-size: 1rem;
  line-height: 1.4;
}


/* ホバー箇所の薄緑下線（#menu以下では共通） */
#menu a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem; /*ie非対応*/
  text-decoration-color: #A4DAAA; /*ie非対応*/
}


/* 第1階層ホバー時に色を薄くする */
#menu ul li:hover {
  background-color: #444;
}

/* 
---------------------------------------------------
サブメニュー（第2階層）の設定
---------------------------------------------------
*/

/* 第2階層以下はデフォルトでは非表示にしておく */
#menu ul li ul {
  display: none;
}

/* 第1階層ホバー時のみ表示 */
#menu ul li:hover > ul {
  display: block;
}

/* 第2階層の書式設定 */
#menu ul li ul li {
  height: 40px;
  width: 100%;
  background-color: #444;
  border-top: #555 1px solid;
  position: relative; /*第3階層にpositon:absolute;を設定するためには親である第2階層をposition:relative;にしておく必要がある*/
}

/* 第2階層ホバー時に色を薄くする */
#menu ul li ul li:hover {
  background-color: #555;
}

/* 第2階層以下は横方向に並べる（別タブ明示アイコンと「採用ページ」を横並びにするため） */
#menu ul li ul li a {
  flex-flow: row;
}

/* 採用情報の別タブ明示アイコンの設定（SP） */
#menu ul li:nth-child(4) ul li a img {
  height: 1rem;
  width: 1rem; /*これもheightとwidthの両方設定しないとieで表示崩れる。「採用情報」のところで使っているli:nth-child(4)の影響でこのアイコンもli:nth-child(4)を使って設定するしかない（#menu ul li ul li a imgではダメ）。*/
  margin-right: 5px;
}

/* 
---------------------------------------------------
サブサブメニュー（第3階層）の設定
---------------------------------------------------
*/
/* 第2階層ホバー時、第2階層の要素の右隣に第3階層を表示。 */
#menu ul li ul li:hover > ul {
  display: block; /* 表示する */
  position: absolute; /* 第2階層でpositoin:relative;を設定しているのでそこ基準で位置を指定 */
  left: 100%; /* x方向の起点。親である第2階層の左上端から100%（第2階層の横幅の100%）分右にずれたところを起点に配置する */
  top:-1px; /* y方向の起点。親である第2階層の上端から1px上を起点に配置する（「東京駅」の上のわずかな隙間を解消）*/
}

/* 横幅の継承 */
#menu ul li ul li ul {
  width: 100%;
}

/* 第3階層のスタイル */
#menu ul li ul li ul li {
  width: 100%;
  background-color: #555;
  border-top: #666 1px solid;
  text-decoration: none;
}

#menu ul li ul li ul li:hover {
  background-color: #666;
}


/* 
---------------------------------------------------
レスポンシブ対応（ナビゲーション）
（PCで設定を変える箇所）
---------------------------------------------------
*/
@media (min-width: 695px) {
  /* アイコンとタイトルを横並び */
  #menu ul li a {
    display: flex;
    flex-flow: row;
  }
  /* menu文字の調整 */
  #menu span{
    font-size: 1.6rem;
    margin-left: 0.5rem;
  }
  /* 採用情報の別タブ明示アイコンの文字を大きく */
  #menu ul li:nth-child(4) ul li a img {
    height: 1.6rem;
    width: 1.6rem; /*これもheightとwidthの両方設定しないとieで表示崩れる。「採用情報」のところで使っているli:nth-child(4)の影響でこのアイコンもli:nth-child(4)を使って設定するしかない（#menu ul li ul li a imgではダメ）。（SP表示のときと同じ）*/
  }
}


/* 
---------------------------------------------------
スクロールしてもナビゲーションは流さない
---------------------------------------------------
*/
/* 共通要素は各ページにjQueryを使って埋め込んでいる。position:stickyはcommon.htmlにある#menuではなく各ページ.htmlにある#menu-outerに設定しないと効かない。*/

#menu-outer {
  position: relative; /*ieはposition:sticky非対応につき先にrelativeにしておく*/
  z-index: 1000; /*slickのcustom.cssでz-index:100が出てくるので1000にする*/
}

@supports (position: sticky) {
  #menu-outer {
    position: sticky;
    top: -1px; /*上から-1pxのところにくっつかせる（#headerのちょっと上に微妙な隙間ができるので0pxではなく-1px）*/
  }
}




/* 
-------------------------------------------------------------------------------------------------------
4. パンくずリストの設定（commn,index.html【以外】と紐付け）
-------------------------------------------------------------------------------------------------------
*/
/* パンくずリストを配置するエリアの確保 */
#pankuzu {
  margin:0 auto;
  padding: 10px;
  font-size: 1.2rem;
  width: 100%;
  max-width: 1080px;
}
#pankuzu a {
  text-decoration: underline;
}

/* 「トップページ」ホバー時 */
#pankuzu a:hover {
  opacity: 0.5;
}



/* 
-------------------------------------------------------------------------------------------------------
5. トップページ以外の画像配置エリア（.img_box）の設定（commn,index.html【以外】と紐付け）
-------------------------------------------------------------------------------------------------------
*/
.img_box {
  text-align: center; /*画像を中央揃え*/
  background-color: #fff; /*（画像が白背景なので）img_boxも白背景に*/
  margin: 0 auto; /*img_box自体を中央揃え*/
  width: fit-content; /*画像に横幅を合わせる*/
  max-width: 980px; /*width:fit-content;がie非対応のため追加（画像の幅は最大980pxにしているのでこれで同値だがhtmlにもcssにも同じことを書いている）。*/
}
/* ※画像自体の幅はhtmlで設定している（100%が原則だが上限980pxまで） */



/* 
-------------------------------------------------------------------------------------------------------
6. トップへ戻るボタン（#btn_top）の設定（commn.html【以外】と紐付け）
-------------------------------------------------------------------------------------------------------
*/
#page_top{
	width: 40px;
	height: 40px;
	position: fixed; /*いつも同じ位置に表示*/
	right: 20px;
	bottom: 20px;
	z-index: 2000; /*どの要素と重なっても表に表示されるように*/
}

#page_top img {
height: 40px;
width: 40px;
}

  
/* 
-------------------------------------------------------------------------------------------------------
7. フッター（#footer）の設定（commn.htmlと紐付け）
-------------------------------------------------------------------------------------------------------
*/

#footer {
	width: 100%; /*横幅全幅*/
	background: #333;
  margin-top: 30px; /*上部に30pxのmargin（コンテンツとの離隔を確保）*/
	padding: 10px; /*上下左右に10pxのpadding（#333で塗られている内側で上下左右に10pxずつ余白確保）*/
	/* position: relative; このへんいるのか？
	z-index: 200; */
	display: flex; /*↓2行と連携し、要素を縦並べ、中央揃え*/
	flex-direction: column;
	align-items: center;
}

/* 
---------------------------------------------------
フッター内のタイトル・SNSアイコン
（#headerと似ているが扱いが異なるので別idを設定）
---------------------------------------------------
*/
#footer_header {
  margin: 0;
  width: 100%;
  height: 50px;
  max-width: 1080px; /*#header,#menu,#main_visual（スライダー）以外は1080pxより横幅広げない*/
  display: flex; /*headerと同じく横並び*/
  justify-content: space-between; /*.corp_logoと.top_linksを両端揃え*/
  border-bottom: 1px solid #ddd; /*境界線*/
}

/* .corp_logo .top_links .top_link等は原則#headerのところと同じスタイルを使用。#footer内で変えるところだけ以下に記述。 */
#footer_header .corp_logo {
  background: #333; /*緑塗りをグレー塗りに変更*/
  padding: 0 10px; /*#footerに10pxのpaddingが設定されている関係で、横幅が320pxのときは#footer_headerの横幅が不足する（はみ出る）。そこで、.corp_logoの両端のpaddingを20px→10pxに縮小する。*/
}


/* 
---------------------------------------------------
JR内関係ページへのリンク集
---------------------------------------------------
*/
.footer_link {
	max-width: 1080px;
	margin: 10px 0; /*上下のみ10pxのmargin*/
}
  
.footer_link ul{
  display: flex; /*リンクは横並び*/
  flex-wrap: wrap; /*折り返しあり*/
  justify-content: center; /*左右真ん中寄せ*/
}

.footer_link ul li {
  border-radius: 4px; /*角丸*/
  width: 300px;
  display: block;
  margin: 3px;
  background-color: #1e8702;
  text-align: center;
  padding: 4px 5px;
}

.footer_link ul li a {
display: block; /*これを設定しないとimg+spanの幅にしかリンクが設定されない（緑の四角のどこを押してもリンクが飛ぶようにしたい）*/
}

/* リンク箇所ホバー */
.footer_link a:hover {
  opacity: 0.5;
}

.footer_link ul li img {
  height: 1rem;
  margin-right: 5px; /*「別リンクで開く」アイコンと文字の間に5pxの隙間*/
}

.footer_link ul li span {
font-size: 1rem;
color: #fff; /*本当は#dddで収めたかったが、背景色とのコントラスト比がNGになるのでやむを得ず真っ白に*/
}




/* 
---------------------------------------------------
利用規約
---------------------------------------------------
*/
.policy {
max-width: 1080px;
margin: 10px 0; /*上下のみ10pxのmargin*/
}

/*通常のpタグより文字を小さくするのでそれに合わせて行間・段落間スペースの調整*/
.policy p {
text-align: center;
font-size: 1rem;
line-height: 1.3;
margin: 0;
padding: 2px 10px ;
}

.policy img {
height: 1rem;
margin-right: 5px; /*「別リンクで開く」アイコンと文字の間に5pxの隙間*/
}

/* リンクホバー時色変え */
.policy a:hover {
  opacity: 0.5;
}