/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 100%;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  /* [変更] モバイル向けにフォントサイズと文字色を調整 */
  /* font-size:1.4em; */
  font-size: 1rem;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color: #3d3536;
  background-color: white;
  height: 100%;
}

body, html {
  /* important */
  height: 100%;
  /* [追記] モバイル時の横スクロール発生を防止 */
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  color: #b4d7a8;
  text-decoration: none;
  /* [追記] モバイルタッチ領域（44px以上）の確保 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* [追記] レスポンシブ用画像設定 */
img {
  max-width: 100%;
  height: auto;
}


/* -------------------------------- 

Modules - reusable parts of our design
カラーページ設定

-------------------------------- */

/*カラーページの配置設定*/
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 80%;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */

/*上部パーツ設定*/
.cd-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 100; /* [変更] 重なり順を前面に（2 -> 100） */
}
.cd-header:after {
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

ロゴポジション設定

-------------------------------- */

.cd-header #cd-logo {
  float: left;
  /* margin: 5px 0 0 5%; */
  margin: 8px 0 0 16px; /* [変更] スマホ用の余白調整 */
}
.cd-header #cd-logo img {
  display: block;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 70px;
  }
  .cd-header #cd-logo {
    margin: 15px 0 0 5%;
  }
}


/* -------------------------------- 

メニュー設定

-------------------------------- */

/*ナビポジション*/
.cd-main-nav {
  float: right;
  /* margin-right: 5%; */
  margin-right: 16px; /* [変更] スマホ用の余白調整 */
  width: 44px;
  /* height: 100%; */
  height: 50px; /* [変更] ヘッダー高さに合わせる */
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
  /* background-size: 44px 44px; */
  background-size: 30px 30px; /* [変更] アイコンサイズ調整 */
  cursor: pointer;
}

/*縮小メニュー*/
.cd-main-nav ul {
  position: absolute;
  /* top: 0; */
  top: 50px; /* [変更] ヘッダー下に配置 */
  left: 0;
  width: 100%;
  /* [変更] 初期状態は画面外上に隠す */
  /* -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%); */
  background: #2f292a;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-transform: translateY(-150%);
  -moz-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  -o-transform: translateY(-150%);
  transform: translateY(-150%);
  transition: transform 0.3s ease;
}

/*縮小メニューの選択時表示*/
/* -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px); */
.cd-main-nav ul.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/*たぶんメニューリンクフォーム*/
.cd-main-nav a {
  display: block;
  /* height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: #2f292a;
  border-top: 1px solid #453c3d;
  color: #8e7d7f; */
  height: 44px; 
  line-height: 44px;
  padding-left: 20px;
  background: #2f292a;
  border-top: 1px solid #453c3d;
  color: #fff; /* [変更] 視認性向上のため白文字化 */
}

@media only screen and (min-width: 768px) {
/*ナビの横並び設定*/
  .cd-main-nav {
    width: auto;
    height: auto;
    background: none;
    cursor: auto;
  }
  
/*ナビの位置設定*/
  .cd-main-nav ul {
    position: static;
    width: auto;
    background: transparent;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 70px;
  }
/**/
  .cd-main-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
 /*ナビの横並び設定？*/
  .cd-main-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  /*ナビ背景設定*/
  .cd-main-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
    padding: .6em 1em;
    border-top: none;
    color: #3d3536;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.875rem;
  }
  /*ナビホバー設定*/
  .no-touch .cd-main-nav a:hover {
    color: #99a478;
  }
}

.cd-main-content {
 /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}
 /**/
.cd-fixed-bg {
  position: relative;
  min-height: 100vh; /* [変更] モバイル画面全面に対応（100% -> 100vh） */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

/* -------------------------------- 

ヘッダーフォント設定

-------------------------------- */

.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  /*text-align: center; 停止中*/
  
  font-size: 1.5rem; /* [変更] モバイル向けフォントサイズ調整 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
  margin: 0;
}

/* -------------------------------- 

背景画像設定

-------------------------------- */

.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-0.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}

/* -------------------------------- 

スケール時のフォント設定

-------------------------------- */

@media only screen and (min-width: 768px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;/* [変更]font-size: 36px */
  }
}

@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}





.cd-scrolling-bg {
  position: relative;
  min-height: 100%;
  padding: 3em 16px; /* [変更] スマホ用余白に調整 */
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
  box-sizing: border-box;
}

/* -------------------------------- 

ベタ背景カラー設定

-------------------------------- */

.cd-scrolling-bg.cd-color-1 {
  background-color: #324E4F;
  color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #9CAAC7;
  color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #8C8F70;
  color: #3d3536;
}


/* -------------------------------- 

スケール時のフォント設定

-------------------------------- */

@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}

/* -------------------------------- 

トップページ設定

-------------------------------- */

.message {
  /* [変更] モバイル表示時は中央配置 */
  /* width:80%;
	height:100%;
	margin:0 auto;
	text-align:right;
	position:absolute;
	top:50%;
	right:50px; */
  width: 90%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

@media only screen and (min-width: 768px) {
  .message {
    width: 80%;
    left: auto;
    right: 50px;
    top: 55%;
    transform: translateY(-50%);
    text-align: right;
  }
}

/* -------------------------------- 

ＢＧ付きページ設定

-------------------------------- */

.photo_page {
  width: 100%; /* [変更] モバイル全幅対応（90% -> 100%） */
  height: auto; /* [変更] 固定高さ解消（1000px -> auto） */
  /* position:absolute; top:70px; left:100px; margin:0 auto; padding:100px; */
  padding: 70px 16px 20px;
  position: relative;
}

/* -------------------------------- 

共通設定（スマホ時1列化、PC時2列化）

-------------------------------- */

/* [変更] スマホでは1列・100%幅に */
.left_box {
  width: 100%;
  float: none;
  padding: 10px 0;
}

.right_box {
  width: 100%; /* [変更] px固定解除（1000px -> 100%） */
  height: auto;
  float: none;
  color: #3d3536;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) {
  .left_box {
    width: 25% !important;
    float: left !important;
    padding-top: 100px !important;
  }
  .right_box {
    width: 70% !important;
    float: left !important;
    padding-top: 100px !important;
    padding-left: 30px !important;
  }
}

/* -------------------------------- 

メニュー追加設定

-------------------------------- */

.cd-main-nav img {
  width: 25px;
}

/* -------------------------------- 

企業概要設定

-------------------------------- */

.left_img img {
  /* width:80%; */
  width: 100%; /* [変更] スマホ画面フィット */
  max-width: 400px;
  border-radius: 15px;
}

.right_box_txt_a {
  /* float:left; padding-right:50px; */
  display: inline-block;
  width: 30%;
  min-width: 80px;
  font-weight: bold;
  vertical-align: top;
  margin-bottom: 8px;
}

.right_box_txt_b {
  display: inline-block;
  width: 65%;
  overflow-wrap: break-word;
  vertical-align: top;
  margin-bottom: 8px;
}

/* -------------------------------- 

開発実績ページ設定

-------------------------------- */

.text_box_a {
  /* width:1000px; */
  width: 100%; /* [変更] px固定解除 */
  height: auto;
  min-height: 50px;
  /*background-color:#9dbfc9;*/
  border-bottom: 1px solid #FFFFFF;
  
  margin-top: 10px;
  /* padding-top:15px; */
  padding: 10px 0;
  color: #FFFFFF;
  font-weight: bold;
  text-shadow: 0.02em 0.02em 2px #000000;
  /* [追記] モバイル崩れ防止用 Flexbox */
  display: flex;
  flex-wrap: wrap;
}

.text_box_b {
  /* width:15%; float:left; */
  width: 30%;
  min-width: 90px;
  padding-left: 5px;
  font-size: 14px;
}

.text_box_c {
  /* width:85%; float:left; */
  width: 70%;
  flex: 1;
  font-size: 14px;
  overflow-wrap: break-word;
}

/* -------------------------------- 

採用情報

-------------------------------- */

.right_box2 {
  /* width:1000px; height:100%; float:left; padding-top:30px; padding-left:100px; */
  width: 100%; /* [変更] スマホ全幅化 */
  height: auto;
  float: none;
  color: #3d3536;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) {
  .right_box2 {
    width: 70% !important;
    float: left !important;
    padding-top: 100px !important;
    padding-left: 30px !important;
  }
}

.recruit {
  width: 100%; /* [変更] 80% -> 100% */
  height: auto;
  font-size: 16px;
  display: block;
  clear: both;
  margin: 0 auto;
  border-bottom: 1px #3d3536 solid;
  padding-bottom: 15px;
}

.recruit_title {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 2px #3d3536 solid;
  width: 100%;
  margin: 0 auto;
}

.recruit_a {
  /* width:45%; float:left; padding-right:100px; display:inline-block; padding-top:50px; */
  width: 100%;
  float: none;
  font-weight: bold;
  padding-top: 15px;
}

.recruit_b {
  /* height:100%; float:left; padding-top:20px; */
  width: 100%;
  float: none;
  padding-top: 10px;
}

/* -------------------------------- 

アクセス設定

-------------------------------- */

.right_box4 {
  /* width:1000px; float:left; padding-top:50px; padding-left:50px; */
  width: 100%; /* [変更] px固定解除 */
  float: none;
  color: #FFFFFF;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) {
  .right_box4 {
    width: 70% !important;
    float: left !important;
    padding-top: 100px !important;
    padding-left: 30px !important;
  }
}

.address_b {
  line-height: 1.8;
  font-size: 16px;
}

/* -------------------------------- 

お問い合わせ設定

-------------------------------- */

.left_box2 {
/* width:30%; float:left; */
  width: 100%;
  float: none;
  display: block;
}

.right_box3 {
  /* width:1000px; padding-top:30px; padding-left:100px; */
  width: 100%; /* [変更] px固定解除 */
  color: #3d3536;
  padding: 10px 16px;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .right_box3 {
    width: 70% !important;
    float: left !important;
    padding-top: 100px !important;
    padding-left: 30px !important;
  }
}

.contact {
  color: #FFFFFF;
}

/* [追記] 問い合わせフォーム用（スマホ時縦並び・タップ領域確保） */
.right_box3 table, 
.right_box3 tbody, 
.right_box3 tr, 
.right_box3 th, 
.right_box3 td {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 0;
}

.right_box3 th, .right_box3 label {
  color: #FFFFFF;
  font-weight: bold;
  padding-top: 12px;
  padding-bottom: 4px;
}

.right_box3 input[type="text"],
.right_box3 input[type="email"],
.right_box3 textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.right_box3 textarea {
  min-height: 100px;
}

.right_box3 input[type="submit"],
.right_box3 input[type="reset"],
.right_box3 button {
  min-height: 44px;
  min-width: 100px;
  margin-top: 10px;
  margin-right: 8px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .right_box3 table, 
  .right_box3 tbody, 
  .right_box3 tr, 
  .right_box3 th, 
  .right_box3 td {
    display: table-cell !important;
  }
  .right_box3 tr { display: table-row !important; }
  .right_box3 table { display: table !important; }
}

/* -------------------------------- 

テスト設定

-------------------------------- */

.test {
  width: 90%;
  height: 1000px;
  background-color: aquamarine;
  position: absolute;
  top: 70px;
  left: 100px;
  margin: 0 auto;
  padding: 100px;
}

.test2 {
  width: 70%;
  height: 100%;
  background-color: deeppink;
  float: left;
}

/* -------------------------------- 

図形テスト設定

-------------------------------- */

.el {
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}

.larger {
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: scale(2);
  transform: scale(2);
}

.smaller {
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}

/* -------------------------------- 

フッター部分～コピーライト

-------------------------------- */

.footer {
  position: fixed !important;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  width: 100%;  
  height: 25px;  
  background-color: #FFFFFF;  
  z-index: 5;
}

.copyright {
  text-align: center;
  margin-top: 7px;
  font-size: 12px; /* [変更] 読めるサイズへ調整（2px -> 12px） */
  color: #868686;
}

/* -------------------------------- 

スクロール文字アニメーション処理部分

-------------------------------- */

#field01 {
  /* font-size:3.0rem; */
  font-size: 1.8rem; /* [変更] スマホサイズへ調整 */
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0.02em 0.02em 2px #000000;
}

.scrEvent {
  padding: 20px;
  text-align: left;
  display: none;
}

/* ==================================================
   アクセス（マップ）の可変・縮小対応
================================================= */

/* 1. マップ埋め込み枠（iframe）の高さと幅を画面サイズに追従 */
#google-map iframe,
.cd-fixed-bg iframe,
iframe[src*="google.com/maps"] {
  width: 100% !important;
  /* 最小200px 〜 画面幅の35vw 〜 最大400px に自動調整 */
  height: clamp(200px, 35vw, 400px) !important;
  max-width: 100% !important;
}

/* 2. マップを囲む親要素の余白調整 */
.cd-fixed-bg.cd-bg-3 .cd-container,
#google-map {
  width: 90% !important;        /* 画面端に密着しないよう90%に設定 */
  max-width: 800px !important;    /* PCなどの大画面での広がりすぎ防止 */
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ==================================================
   全ページのテキスト・タイトルレスポンシブ（自動縮小）対応
================================================= */

/* 1. 各セクションの大きな見出し（企業概要、開発実績、採用情報など） */
#field01 {
  font-size: clamp(1.4rem, 4.5vw, 3rem) !important;
}

/* 2. 企業概要の項目名と内容テキスト */
.right_box_txt_a,
.right_box_txt_b,
.right_box_txt_c {
  font-size: clamp(11px, 2.2vw, 20px) !important;
}

/* 3. 開発実績の年号と詳細テキスト */
.text_box_b,
.text_box_c {
  font-size: clamp(11px, 2vw, 15px) !important;
}

/* 4. 採用情報のテキスト全般 */
.recruit_title {
  font-size: clamp(16px, 3.5vw, 25px) !important;
}
.recruit_a,
.recruit_b {
  font-size: clamp(11px, 2.2vw, 19px) !important;
}

/* 5. アクセス・問い合わせのテキスト */
.address_b,
.contact {
  font-size: clamp(11px, 2.2vw, 20px) !important;
}

/* ==================================================
   お問い合わせフォームの中央配置・モバイル最適化
================================================= */

/* 1. HTMLで指定されている固定の左余白(100px)を取り除く */
.contact div[style*="MARGIN-LEFT"],
.contact div[style*="margin-left"] {
  margin-left: 0 !important;
  width: 100% !important;
}

/* 2. フォーム全体を中央寄りに調整し、余白を均等にする */
.right_box3 {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

.contact {
  max-width: 600px; /* PCなど大画面で広がりすぎるのを防止 */
  margin: 0 auto !important; /* 全体を中央寄せ */
}

/* 3. 送信・リセットボタンの配置を綺麗に中央揃え */
.right_box3 input[type="submit"],
.right_box3 input[type="reset"] {
  display: inline-block;
  margin: 10px 8px 0 0 !important;
}

/* ==================================================
   ハンバーガーメニューをロゴ（ヘッダー）の下から出す修正
================================================= */

/* 1. ヘッダー本体を一番手前に固定 */
.cd-header {
  z-index: 1000 !important;
}

/* 2. メニューを開いたときの黒いリスト部分 */
.cd-main-nav ul {
  top: 50px !important; /* ヘッダーの高さ分下げる */
  z-index: 999 !important; /* ヘッダー(1000)より裏側に配置 */
}

/* 3. PC・タブレット表示時 */
@media only screen and (min-width: 768px) {
  .cd-main-nav ul {
    top: 70px !important; /* PC版ヘッダー高さに合わせる */
  }
}