@charset "UTF-8";

#concept, #buisiness, #member, #working, #recrute, #cta {
	padding: 40px 0 56px 0;
  }

  .section-inner {
	/* コンテンツの最大幅を960pxに */
	max-width: 1000px;
	
	/* 中央に寄せに */
	margin: 0 auto; ;
	}

  .business-content-pc {
    display: block; /* PC版はデフォルトで表示 */
  }
  
  .business-content-sp {
    display: none; /* 初期設定ではSP版は非表示 */
  }


 
#header {
	background-color: #c4c4c4;
	height: 60px;
  padding: 20px 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; /* 他の要素より前面に */
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え（高さがある場合） */
  text-align: center; /* テキストを中央揃え */
  }
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* ロゴ */
  .logo img {
    height: 20px; /* ロゴのサイズ調整 */
  }
  
  /* ナビゲーションメニュー */
  .nav-menu {
    display: flex;
    gap: 30px; /* メニュー間の余白 */
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1200px; /* 最大幅を1200pxに設定 */
    width: 100%; /* 画面サイズが小さい場合でも調整 */
    margin: 0 auto; /* 中央揃え */
    padding: 20px; /* 内側の余白を追加 */
    font-weight: bold; /* 文字を太字に */
  }
  
  /* 各メニュー項目 */
  .nav-menu li {
    display: inline-block;
  }
  
  /* リンクのデザイン */
  .nav-menu a {
    text-decoration: none;
    color: #64525e;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 15px;
    transition: 0.3s ease-in-out;
  }
  
  /* ホバー時 */
  .nav-menu a:hover {
    color: #b08473;
  }
  
  /* CTAボタン（エントリー） */
  .nav-menu .cta-link {
    background-color: #b08473;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
  }
  
  .nav-menu .cta-link:hover {
    background-color: #8f6357;
  }

  /* ハンバーガーメニューのスタイル */
.hamburger-menu {
  display: none; /* デフォルトでは非表示 */
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #64525e;
  transition: 0.3s;
}

/* スマホ時（幅768px以下） */
@media screen and (max-width: 768px) {
  .nav-menu {
    display: none; /* 初期状態では非表示 */
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .nav-menu li {
    padding: 10px 0;
  }

  .nav-menu a {
    font-size: 18px;
    color: #64525e;
    text-decoration: none;
  }

  /* ハンバーガーメニューの表示 */
  .hamburger-menu {
    display: flex;
    position: absolute;
    top: 15px;
    right: 20px;
  }

  /* メニュー表示時のスタイル */
  .nav-menu.active {
    display: flex;
  }
}

  #mainvisual {
    margin-top: 100px; 
    width: 100vw;
    min-height: 100vh; 
    position: relative; /* 子要素の絶対配置用 */
    overflow: hidden;   /* はみ出した部分を非表示 */
  }

  .mainvisual { 
    position: absolute;
    bottom: 30px; /* 下からの距離（調整可能） */
    left: px; /* 左からの距離（調整可能） */
    max-width: none; /* PC版は元のサイズを維持 */
  }
  
  .maincopy {
    position: absolute;
    bottom: 120px; /* 下からの距離（調整可能） */
    left: 60px; /* 左からの距離（調整可能） */
    max-width: none;
  }

  
  
  #concept {
	background-color: #fff;
  width: 100%; /* 横スクロール防止 */
  background-image: url(../images/background_concept.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* 画面いっぱいに背景を広げるなら追加 */
  }
  
     h2 {
	    text-align: center;
      font-family: 'Glacial Indifference', sans-serif;
      color: #b08473;
      font-size: 60px;
      font-weight: 300;
      letter-spacing: 2px;
     }

     img {
       display: block;
       margin: 10px auto; /* 画像を中央揃え＆余白を調整 */
      }
  
    .highlight {
       color: #b08473; /* ここで特定の色を設定 */
       font-size: 30px;
       margin-bottom: 40px; 
      }
    p {
       text-align: center;
       font-size: 18px;
       line-height: 1.8;
       margin-bottom: 15px; /* 段落ごとの余白を確保 */
      }

      .cta-button {
        display: inline-block; /* インライン要素をブロック要素のように扱う */
        padding: 15px 30px; /* 上下・左右の余白 */
        background-color: #b08473; /* ボタンの背景色 */
        color: #fff; /* 文字色 */
        font-size: 18px; /* フォントサイズ */
        font-weight: bold; /* フォントの太さ */
        text-decoration: none; /* リンクの下線を消す */
        border-radius: 50px; /* ボタンの角を丸く */
        transition: 0.3s ease-in-out; /* ホバー時のアニメーション */
        text-align: center;
      }
      .cta-container {
        text-align: center; /* 中央揃え */
      }
      
      /* ホバー時のエフェクト */
      .cta-button:hover {
        background-color: #8f6357; /* ホバー時に色を変更 */
        transform: scale(1.05); /* 少し大きく */
      }
  
   
      #buisiness p {
	   text-align: center;
     }
    h2 {
	     text-align: center;
       font-family: 'Glacial Indifference', sans-serif;
       color: #b08473;
       font-size: 60px;
       font-weight: 300;
       letter-spacing: 2px;
     }
     img {
       display: block;
       margin: 10px auto; /* 画像を中央揃え＆余白を調整 */
      }
  
    .highlight {
       color: #b08473; /* ここで特定の色を設定 */
       font-size: 30px;
       margin-bottom: 40px; 
      }

      .business-title {
        background-image: url("../images/line_buisiness.png");
        background-repeat: no-repeat;  /* 画像を繰り返さない */
        background-size: contain; /* 画像サイズを適切に調整 */
        background-position: center; /* 画像を中央配置 */
        height: 10px; /* 画像の高さに合わせて調整 */
        width: 100%; /* 横幅いっぱいに */
        display: block;
      }
      .container {
        display: flex;
        gap: 40px; /* カラム間の余白 */
      }
      
      .left-column, .right-column {
        display: flex;
        flex-direction: column; /* 中の要素を縦に並べる */
        justify-content: center; /* 縦方向の中央揃え */
        align-items: flex-start; /* 子要素を左寄せにする */
      }
      
      .left-column p, .left-column h3, .right-column p, .right-column h3 {
        text-align: left; /* 各テキストを左揃え */
      }
      
      h3 {
        font-family: 'Noto Sans JP', sans-serif; /* フォントをNoto Sans JPに設定 */
      }

  #member p {
	     text-align: center;
      }
    
    img {
       display: block;
       margin: 10px auto; /* 画像を中央揃え＆余白を調整 */
     }
  
    .highlight {
       color: #b08473; /* ここで特定の色を設定 */
       font-size: 30px;
       margin-bottom: 40px; 
      }
    
      .container {
        display: flex;  /* 横並びにする */
        justify-content: space-between; /* 各カラムの間隔を均等に */
        gap: 20px; /* カラム間の余白 */
      }
      
      .column {
        flex: 1; /* 各カラムの幅を均等に */
        padding: 10px; /* カラム内に余白を追加 */
      }

      .column p:first-of-type {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 24px;
        font-weight: 700; /* 太字（お好みで調整） */
      }
      
      /* 肩書（Zen Maru Gothic、サイズ16px） */
      .column p:last-of-type {
        font-family: 'Zen Maru Gothic', sans-serif;
        font-size: 12px;
      }

#working p {
	     text-align: center;
       }
     
    
     img {
       display: block;
       margin: 10px auto; /* 画像を中央揃え＆余白を調整 */
      } 
  
  .highlight {
       color: #b08473; /* ここで特定の色を設定 */
       font-size: 30px;
       margin-bottom: 40px; 
  }

  .three-column-container {
    display: flex; /* 横並び */
    justify-content: space-between; /* 均等配置 */
    gap: 30px; /* カラム間の余白 */
    max-width: 1200px; /* コンテンツの最大幅 */
    margin: 0 auto; /* 中央配置 */
  }
  
  .column {
    flex: 1; /* 各カラムを均等幅に */
    text-align: center; /* テキストを中央揃え */
    padding: 20px;
  }
  
  .column img {
    width: 100%; /* 画像をカラムいっぱいに */
    height: auto;
    margin-bottom: 15px; /* 画像とテキストの間に余白 */
  }
  
  .column h3 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .column p {
    font-size: 16px;
  }

 #recruit {
       background-color: #cfd6db;
       width: 100vw;
       height: 100vh;
	     background-image: url(" ../images/background_recruit.jpg");
	     background-size: cover;
	     background-position: center;
	     background-repeat: no-repeat;
       padding: 0;
      }
	   p {
	 	    text-align: center;
	     }
  
     
  img {
    display: block;
    margin: 10px auto; /* 画像を中央揃え＆余白を調整 */
  }
  
  .highlight {
    color: #b08473; /* ここで特定の色を設定 */
    font-size: 30px;
    margin-bottom: 40px; 
  }
  /* 3カラム × 2段 レイアウト */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列レイアウト */
  gap: 20px; /* ボックスの間隔 */
  max-width: 1200px; /* 最大幅 */
  margin: 0 auto; /* 中央揃え */
  padding: 40px 20px; /* 余白 */
}
.grid-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* CTAボタン */

.recruit-cta-button, .special-button {
  display: block; /* ブロック要素にして幅を統一 */
  width: 70%; /* グリッド内でボタンの幅を統一 */
  padding: 15px 0; /* 上下の余白だけを指定 */
  background-color: #cfb3ab;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  transition: 0.3s ease-in-out;
  text-align: center;
}

.recruit-cta-button:hover, .special-button:hover {
  background-color: #8f6357;
  transform: scale(1.05);
}

/* もっと見るボタンだけ色を変える */
.special-button {
  background-color: #b08473;
}

#cta {
  width: 100vw;
  height: 100vh;
  background-image: url(" ../images/background_entry.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: 0;
  display: flex; /* 中央揃えのためにフレックスボックスを使用 */
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 水平方向の中央揃え */
  justify-content: center; /* 垂直方向の中央揃え */
  gap: 40px; 
}

/* H2のスタイル */
#cta h2 {
  color: #fff;
  font-family: "Zen Maru Gothic", serif;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* H2の一部カラー変更 */
#cta h2 span {
  color: #dbdacf;
}
.entry-button {
  display: inline-block; /* インライン要素をブロック要素のように扱う */
  padding: 15px 30px; /* 上下・左右の余白 */
  background-color: #8f6357; /* ボタンの背景色 */
  color: #fff; /* 文字色 */
  font-size: 24px; /* フォントサイズ */
  font-weight: bold; /* フォントの太さ */
  text-decoration: none; /* リンクの下線を消す */
  border-radius: 60px; /* ボタンの角を丸く */
  transition: 0.3s ease-in-out; /* ホバー時のアニメーション */
  text-align: center;
}
.cta-container {
  text-align: center; /* 中央揃え */
  padding-top: 50px; 
  position: static;
}

/* ホバー時のエフェクト */
.entry-button:hover {
  background-color: #cfb3ab; /* ホバー時に色を変更 */
  transform: scale(1.05); /* 少し大きく */
}

#cta h2 {
  margin-bottom: 40px; 
}

#cta p {
  margin-bottom: 40px; /* Pの下に余白を追加 */
  font-size: 24px;
}

  
footer {
  background-color: #c4c4c4; /* 背景色 */
  padding: 40px 0; /* 上下の余白 */
  text-align: center; /* テキストを中央揃え */
}

.footer-inner {
  max-width: 800px;
  margin: 0 auto;
}

.footer-logo-container {
  display: flex; /* 横並び */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 全体を中央に配置 */
  gap: 10px; /* ロゴとテキストの間隔 */
  flex-wrap: nowrap; /* 折り返しなしにする */
}

.footer-logo {
  width: 150px; /* ロゴサイズ */
  height: auto; /* 縦横比を保持 */
  margin: 0; /* 余白をリセット */
  padding: 0;
  display: block; /* 画像の余白を消す */
}

.recruiting-text {
  font-size: 20px;
  font-weight: bold;
  font-family: 'Glacial Indifference';
  color: #b08473;
  margin: 0; /* 余白をリセット */
  padding: 0;
  white-space: nowrap; /* 改行されないようにする */
}




.footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-nav a {
  text-decoration: none;
  color: #64525e;
  font-weight: bold;
  font-size: 16px;
}

.copyright {
  font-size: 14px;
  color: #777;
}

  
/** -----------------------------------------------
  共通
------------------------------------------------**/
/* zen-maru-gothic-regular クラスの定義 */
.zen-maru-gothic-regular {
	font-family: "Zen Maru Gothic", serif;
	font-weight: 400;
	font-style: normal;
  }
  
  /* Glacial Indifference フォント定義 */
  @font-face {
	font-family: 'Glacial Indifference';
	src: url('assets/fonts/glacial_indifference.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
  }
  
  /* bodyのスタイル */
  body {
	font-size: 20px;
	line-height: 1.6;
	color: #64525e;
	background-color: #f4f1f1;
	font-family: 'Zen Maru Gothic', 'Glacial Indifference', sans-serif; /* ゼン丸ゴシックを優先 */
  }

  html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  
  /* 見出し（h2）にはGlacial Indifferenceを適用 */
h2 {
	font-family: 'Glacial Indifference', sans-serif;
  }
  
  /* 本文（p）にはZen Maru Gothicを適用 */
  p {
	font-family: 'Zen Maru Gothic', serif;
  }
  
  /* bodyなど他の部分のスタイル */
  body {
	font-size: 20px;
	line-height: 1.6;
	color: #64525e;
	background-color: #f4f1f1;
	font-family: 'Zen Maru Gothic', serif; /* 本文はZen Maru Gothicがデフォルト */
  }
  
#concept,
#business,
#member,
#working,
#recruit,
#cta {
  margin: 40px 0; /* 上下40pxずつ余白をつける */
}
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#recruit, #cta {
  width: 100vw;
  min-height: 100vh; /* 変更 */
  padding: 0;
  margin: 0;
  background-size: cover; /* 変更 */
  background-position: center;
  background-repeat: no-repeat;
}

#cta h2, #cta p, .cta-container {
  margin: 0;
  padding: 0;
}

/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/
/* 769px以上の画面サイズ */
@media (min-width: 769px) {
  .business-content-pc {
    display: block ; /* PC版を表示 */
  }

  .business-content-sp {
    display: none ; /* PC版ではSP版を非表示 */
  }
}



/*ここからメディアクエリで各デバイスサイズに書き分けます。
今回の課題で考慮するのはPCとスマホのみでOKですが、タブレットサイズでのスタイルを書いてもOK！
また、CSSは上から下に継承されるので、変化させたいところだけ書けばOKです*/


/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/


@media screen and (max-width: 768px) {
  .section-inner{
    padding: 0 24px;
    max-width: 550px;
  
}

@media (max-width: 768px) {
  #mainvisual {
    margin-top: 50px;
    min-height: 80vh; /* 高さを少し縮める */
    padding: 0 20px;  /* 左右に余白 */
  }

  .mainvisual img {
    position: relative; /* 絶対配置を解除 */
    transform: scale(2.2)translateY(-45%);/* 画像を10%拡大 */
    width: 100%;         /* 画面幅にフィット */
    max-width: 120%; /* 最大幅を120%に設定 */
    height: auto;        /* 縦横比を維持 */
    bottom: 0;           /* 不要な位置指定をリセット */
    left: 0;
  }

  .maincopy {
    position: absolute;
    bottom: 10px;
    left: 15px;
    z-index: 10;
  }
  
  .maincopy img {
    width: 80%;
    height: auto;
    display: block;
  }
  
}

@media (max-width: 768px) {
  #concept {
    background-image: url(../images/background_concept_sp.jpg); /* スマホ用の背景画像 */
    background-size: cover; /* 背景画像を要素にフィットさせる */
    background-position: center; /* 画像の位置を中央に設定 */
  }
}

 
/* 768px以下の画面サイズ */
@media (max-width: 768px) {
  .business-content-pc {
    display: none; /* スマホ版ではPC版を非表示 */
  }

  .business-content-sp {
    display: block; /* スマホ版ではSP版を表示 */
    padding: 0 20px; /* 左右に余白 */
  }

  .business-content-sp .container {
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 16px; /* テキストと画像の間の余白 */
    align-items: flex-start; /* 左寄せ */
  }

  .business-content-sp p {
    text-align: left; /* 左寄せ */
  }

  .business-content-sp h3,
  .business-content-sp p {
    text-align: left; /* テキストを左揃え */
    margin: 0; /* 不要な余白をリセット */
  }

  .business-content-sp img {
    width: 80%; /* 画像を横幅80%に */
    height: auto;
    align-self: center; /* 画像だけ中央寄せ */
  }
}


@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px; /* 縦並び用の余白を調整 */
  }

  .column {
    width: 100%; /* 各カラムを画面幅いっぱいに */
  }
}

@media (max-width: 768px) {
  .three-column-container {
    flex-direction: column; /* スマホ版で縦並びにする */
    gap: 20px; /* 縦並び用の余白に調整 */
  }

  .column img {
    width: 80%; /* 画像が大きすぎないよう調整 */
    margin: 0 auto 15px; /* 画像を中央寄せ */
  }
}
@media (max-width: 768px) {
  #recruit {
    background-image: url(../images/background_recruit_sp.jpg); /* スマホ用の背景画像 */
    background-size: cover; /* 背景画像を要素にフィットさせる */
    background-position: center; /* 画像の位置を中央に設定 */
  }
}

/* スマホ版：2カラム × 3段 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウトに変更 */
    gap: 15px; /* スマホでは少し小さめの間隔でもOK */
    .recruit-cta-button, .special-button {
      font-size: 14px; /* スマホでは少し小さめに */
      width: 90%; /* ボタンの幅も広めに */
      padding: 12px 0; /* 上下の余白も少しコンパクトに */
    }
  }

  .recruit-cta-button, .special-button {
    width: 90%; /* スマホではボタンを少し広げる */
  }
}
@media (max-width: 768px) {
  #cta {
    background-image: url(../images/background_entry_sp.jpg); /* スマホ用の背景画像 */
    background-size: cover; /* 背景画像を要素にフィットさせる */
    background-position: center; /* 画像の位置を中央に設定 */
  }
}

@media (max-width: 768px) {
  #footer {
    padding: 40px 0 20px 0;
  }
  .footer-nav{
   margin-bottom: 70px;
  }
   .footer-nav{
    display: block;
}


display: block;
} 

pc-only{
  display: block;

} 

.sp-only{
  display: none;

} 

pc-only{
  display: none;

} 

.sp-only{
  display: block;

}