@charset "UTF-8";
/* CSS Document */

padding: 0;
margin: 0;

:root{
  scroll-behavior: smooth; /*スムーススクロール*/
　font-family:"ＭＳ ゴシック", "MS Gothic", "メイリオ";
　line-height: 1.5;　/*行間のスペース幅*/
}

@media screen and (max-width: 700px) {
  .pc-onlyF{
    font-size: 0.8rem;
  }
  header .gnav .menu img + li {
    margin-left: 1rem; /* 間隔をあけるため */
  }
  #company table{
    width: 80%; /* テーブル全体の幅 */
  }
  #map table{
    width: 80%; /* テーブル全体の幅 */
  }
  .gglmap {
    width: 80%;
    height: 80%;
  }

}

@media screen and (max-width: 640px) {
  .pc-only{
    display: none; /* スマホではPC用画像を非表示 */
  }
  .pc-onlyF{
    font-size: 0.8rem;
  }
  #company table{
    width: 100%; /* テーブル全体の幅 */
  }
  #map table{
    width: 100%; /* テーブル全体の幅 */
  }
  .gglmap {
    width: 100%;
    height: 100%;
  }

}

@media screen and (min-width: 701px) {
  header .gnav .menu img + li {
    margin-left: 40px; /* 間隔をあけるため */
  }
  #company table{
    width: 60%; /* テーブル全体の幅 */
  }
  #map table{
    width: 60%; /* テーブル全体の幅 */
  }
  .gglmap {
    width: 60%;
    height: 60%;
  }

}

/* メンテ用 */
/*
    border: 2px solid #333;  太さ、実線、色 
/*


/* 1画面に1コンテンツの設定 */
.full-screen {
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 100vh; /* ビューポートの高さ100% */
    width: 100%;
    display: flex;
}

/* Link
---------------------------------*/
a { text-decoration: none; }
a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:hover{ color: #00ff00; }

/* header
---------------------------------*/
header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 50px; /* 高さを50pxに指定 */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    z-index: 100; /* z-indexはpositionとセット 数値が大きければ手前 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */ 
}

header .gnav {
}

header .gnav .menu {
    display: flex; /* 中の要素を横並びにする */
    padding: 0;
}

header .gnav .menu li {
    list-style: none; /* リストの[・]を消す */
    margin-top: auto;
    margin-bottom: auto;
    /*justify-content: center; */ /*上下中央配置 */
    /* vertical-align: middle; */ /* 上下中央揃え */
}

header .gnav .menu li + li {
    margin-left: 2rem; /* メニューそれぞれに間隔をあけるため */
}


header p{
  color: #fef9fb; /* ピンクホワイト */
}

.menu_link {
    color: #fef9fb; /* ピンクホワイト */
}

/* logo */
header img {
  height: 35px; /* 高さを指定 */
  width: auto; /* 横は同比率で自動 */
}

/* 背景色グラデ */
.gradient {
  background-image : linear-gradient(to right, #87cefa 10%, #0000cd 50%, #87cefa 100%);
}

/* 影付き白文字 */
#fontcolor_white {
  color: #FFFFFF;
  /* 見やすいシャドウ: 薄くぼかして文字を浮き上がらせる */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  filter: drop-shadow(2px 2px 4px #00053a); /* #00053a 黒に近い非常に深い青色 */
}

#top h1,#top h2,#top h3,#top h4,#top h5,#top h6 {
  color: #FFFFFF;
  /* 見やすいシャドウ: 薄くぼかして文字を浮き上がらせる */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  filter: drop-shadow(2px 2px 4px #00053a); /* #00053a 黒に近い非常に深い青色 */
}

#it h1,#it h2,#it h3,#it h4,#it h5,#it h6 {
  color: navy;
  /* 見やすいシャドウ: 薄くぼかして文字を浮き上がらせる */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  filter: drop-shadow(2px 2px 4px #FFFFFF); /*  */
  line-height: 1.6; /* 単位なし（文字サイズの1.6倍） */

}

#it span{
  font-size: 0.7rem;
}

#it li{
  margin-left: 1rem;}

#company{
  color: navy;
/*  font-size: 0.83rem;*/
  /* 見やすいシャドウ: 薄くぼかして文字を浮き上がらせる */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  filter: drop-shadow(2px 2px 4px #FFFFFF); /*  */
  line-height: 1.6; /* 単位なし（文字サイズの1.6倍） */
}

#company table{
  table-layout: fixed; /* 列幅を固定・均等にするおまじない */
  border-bottom: 2px Black;
  margin: 0 auto;
}

#company th{
  width: 30%;
  border-bottom: 1px dotted black;
  text-align: center;
}

#company .enkaku th{
  font-variant-numeric: tabular-nums; /* 数字を等幅（表形式）にする */
  word-spacing: 0.25ch; /* 半角スペースを数字1文字分の幅に固定 */
}

#company td{
  color: navy;
  width: 70%;
  border-bottom: 1px dotted black;
  text-align: left;
}

#indent{
  text-indent: 1rem;
}

#indent2{
  text-indent: 2rem;
}

.indent{
  text-indent: 1rem;
}

.indent2{
  text-indent: 2rem;
}

.between{
  line-height: 1.2; /* 数字を小さくして行間を詰める（初期値は約1.5前後） */
  margin-top: 0.2rem;    /* 上の余白を詰める */
  margin-bottom: 0.2rem; /* 下の余白を詰める */
}


#company caption {
  /*margin: 0;*/
  text-indent: 1rem;
  /*height: calc(1lh + 4px);  1行分の高さに、上下のパディング等（例: 16px）を足す */
  line-height: 0;
  text-align: left;
  border-top: 10px double white;
  border-bottom: 10px double white;
  color: #FFF; /* 文字色 */
  background: #305aa7; /* 背景色 */
}

#company a {
  text-decoration-line: underline;
  text-decoration-color: Blue;
}
#company a:link { color: Blue; }
#company a:visited { color: Blue; }
#company a:hover{ color: Blue; }

#privacy a {
  text-decoration-line: underline;
  text-decoration-color: Blue;
}
#privacy a:link { color: Blue; }
#privacy a:visited { color: Blue; }
#privacy a:hover{ color: Blue; }



#map table{
  table-layout: fixed; /* 列幅を固定・均等にするおまじない */
  border-bottom: 2px Black;
  margin: 0 auto;
}

#map caption {
  /*margin: 0;*/
  text-indent: 1rem;
  /*height: calc(1lh + 4px);  1行分の高さに、上下のパディング等（例: 16px）を足す */
  line-height: 0;
  text-align: left;
  border-top: 10px double white;
  border-bottom: 10px double white;
  color: #FFF; /* 文字色 */
  background: #305aa7; /* 背景色 */
}


#map h4 {
  color: navy;
  /* color: #fff5ee;*/
  /* 見やすいシャドウ: 薄くぼかして文字を浮き上がらせる */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  /*filter: drop-shadow(2px 2px 4px #00053a); */
  /* #00053a 黒に近い非常に深い青色 */
}

#privacy p{
  max-width: 40em; /* 文字分の幅 */
  overflow-wrap: break-word; /* 長い英単語などの折り返し */
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
}

#privacy table{
  margin-left: 2rem;
}

#privacy table,#privacy th,#privacy td{
  border-collapse: collapse; /* 隣り合う枠線を重ねて1本にする */
  border: 1px solid Black;
  vertical-align: top; /* 上下の位置を揃える（※基本） */
  text-align: left;
  padding-left: 1rem;
}

.space {
  padding-left: 1rem; /* 全体(段落)を文字数分右に下げる */
}

.space2 {
  padding-left: 2rem; /* 全体(段落)を文字数分右に下げる */
}

.space23 {
  padding-left: 29rem; /* 全体(段落)を文字数分右に下げる */
}

.mid {
  vertical-align: middle;
}

.right {
  display: block;
  text-align: right !important;
}

ul {
  list-style: none; /* リストの[・]を消す */
  text-align: left;
}

ul ul {
  font-size: 1rem;
}

a[href$=".pdf"] {
  color: navy;
  filter: drop-shadow(2px 2px 4px #FFFFFF); /*  */
  text-decoration: underline;
}


/* body、main
---------------------------------*/
body, .main {
  margin: 0;
  padding: 0;
}

/*　TOP　背景　*/
.img-half-bg1{
  position: absolute /* 子要素 */
  display: flex;
  z-index: -1; /* z-indexはpositionとセット 数値が大きければ手前 */
  background-image: url('img-top.jpg');
  /* 4. 画像をトリミングして領域全体を埋める */
  background-size: cover;
  /* 下部に合わせて表示 */ 
  background-position: bottom center;
  /* 5. 画像を繰り返さない */
  background-repeat: no-repeat;
  width: 100%;
  min-height: 100vh; /* 最低でも100vh */
  height: auto;       /* コンテンツに合わせて表示領域を伸ばす */
  text-align:center;
  scroll-margin-top: 50px; /* ヘッダーの高さ + アルファ 　50+30*/
  scroll-snap-align: start;

}

/*　IT　背景　*/
.img-half-bg2 {
  z-index: 5; /* 数値が大きければ手前 */
  display: flex;
  height: 100vh; 
  /* 2. 背景画像の設定 */
  background-image: url('img-tokyo.jpg');
  /* 3. 画像を中央上部に配置 */
  background-position: 50% 70%; 
  /* 4. 画像をトリミングして領域全体を埋める */
  background-size: cover; 
  /* 5. 画像を繰り返さない */
  background-repeat: no-repeat;
  width: 100%;
}

/*　不動産　背景　*/
.img-half-bg3 {
  position: absolute
  display: flex;

  z-index: 10; /* 数値が大きければ手前 */
  /* 2. 背景画像の設定 */
  background-image: url('img-estate.jpg');
  background-position: top; 
  background-size: cover; 
/*  background-size:contain; /*
  /* 5. 画像を繰り返さない */
  background-repeat: no-repeat;
  width: 100%;

  min-height: 100vh; /* 最低でも100vh */
  height: auto;       /* コンテンツに合わせて表示領域を伸ばす */
  text-align:center;
  scroll-margin-top: 50px; /* ヘッダーの高さ + アルファ 　50+30*/
  scroll-snap-align: start;

}


/*　IT　ぼかし　*/
.blurred-box {
  /*width: 50%;*/
  /* おさまらない場合にスクロールバー表示 */
  overflow-y: auto;  
  height: 95vh;
  padding-right: 3rem; /* 文字の右側をあける */
  width: 56ch; /* 全角56文字分の幅を指定 */
  overflow-wrap: break-word;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5vh;
  align-items: left;
  /* ぼかし効果 */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); /* Safari用 */
  background-color: rgba(255, 255, 255, 0.3); /* 半透明の白 */
}



/* contents
---------------------------------*/
.contents{
  position: relative;/* 親要素 */
/*  position: absolute*/　/* 子要素 */
  background: #f2f2f2;
  display: flex;
  text-align:center;
  flex-direction: column; /* 縦向き */
  scroll-margin-top: 50px; /* ヘッダーの高さ + アルファ 　50+30*/
  scroll-snap-align: start;
  min-height: 100vh; /* 最低でも100vh */
  height: auto;       /* コンテンツに合わせて表示領域を伸ばす */
}


/* top */
.contents:first-of-type{
  justify-content: center;
}

/* it */
.contents:nth-of-type(2n){
  justify-content: center;
}

/* estate */
.contents:nth-of-type(3n){
  justify-content: center;
}

/* company */
.contents:nth-of-type(4n){
  background-color: #e1eafb;
  text-align: left;

/*
  border: 2px solid red; /* 太さ、実線、色 */
  margin:0;
  padding:0
*/
}

/* map */
.contents:nth-of-type(5n){
  margin: 0;
  padding: 0;
  align-items: center;
  background-color: #e1eafb;
/*  background-color: #354961; 灰紺色*/
  min-height: 50dvh;
}

.gglmap {
  position: relative;
  padding-top: 56.25%;
} 

iframe {
  z-index: 1; /* z-indexはpositionとセット 数値が大きければ手前 */
  /* 1. 高さを画面の半分に設定 */
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;

  border-radius: 20px;         /* 角の丸み（お好みで） */
  border: 4px solid #3498db; /* 枠線の太さと色 */
  box-sizing: border-box;     /* 枠線を含めて幅を計算 */
  overflow: hidden;           /* 角丸からはみ出ないようにする */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* （任意）立体感を出したい場合の影 */
}

#privacy {
  position: relative;/* 親要素 */
  background-color: #e1eafb;
  scroll-margin-top: 50px; /* ヘッダーの高さ + アルファ 　50+30*/
  scroll-snap-align: start;
  height: auto;       /* コンテンツに合わせて表示領域を伸ばす */
  padding: 2rem;

}


/* footer
---------------------------------*/
footer {
  background: navy; /*  */
  position: fixed; /* ウィンドウを基準に画面に固定 */
  z-index: 100; /* z-indexはpositionとセット 数値が大きければ手前 */
  bottom: 0; 
  width: 100%; /* 幅いっぱいを指定 */
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  left: 0; /* 左右の固定位置を左から0pxにする */
  display: grid; /* grid指定し、 */
  place-items: center; /* 上下中央に配置 */
  color: #fff9f5;
}