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

/* ロゴセクション */
.logo-area {
  text-align: center;       /* ロゴを中央揃えにする */
  margin-bottom: 150px;     /* 余白 */
  margin-top: 150px;        /* 余白 */
}

/* === worksセクション === */
/* works全体のラッパー。左右に余白を持たせ中央寄せする */
.section-works {
  width: 85%;               /* 全体幅の85%に設定（可変） */
  margin: 0 auto;           /* 中央寄せ */
}

/* タイトル：中央揃えでオレンジの帯状背景を持つデザイン */
.section-title {
  font-family: "ads-strong", sans-serif; /* 太字系フォント */
  font-size: 20px;                       /* フォントサイズ設定 */
  font-weight: bold;                     /* 太字に */
  text-align: center;                    /* 中央揃え */
  padding: 8px 0;                        /* 上下に余白を設定（帯の高さになる） */
  border-radius: 24px;                   /* 丸みのある角 */
  margin: 0 auto 40px;                   /* 上余白なし・下に余白あり・中央寄せ */
  width: 100%;                           /* セクション幅いっぱいに表示 */
  display: block;                        /* ブロック表示（中央揃えが有効に） */
  color: white;                          /* テキストカラー白 */
}

/* works用のタイトルカラーを設定（他セクションとの差別化） */
.section-title--works {
  background-color: #FFB828; /* 明るめのオレンジ */
}

/* 画像グリッド：worksの画像を横並びに整列させるレイアウト */
.works-grid {
  display: flex;                    /* フレックスで横並び */
  justify-content: space-between;  /* 均等に間隔を空ける */
  gap: 20px;                        /* グリッド間の隙間 */
  width: 100%;                      /* 親の幅いっぱいに広げる */
  margin: 0 auto;                   /* 中央寄せ */
  max-width: 1200px;                /* 最大幅は共通の制限に揃える */
}

.work-item {
  flex: 1;
  aspect-ratio: 1 / 1;
  background-color: #F4F4F4;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  max-height: 300px;
  min-width: 0;
}


.work-item img {
  max-height: 60%;
  max-width: 60%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  display: block;
  margin: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 画像に影 */
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0px; /* オプション：角丸があれば調和します */	
}
.work-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* ホバー時はやや濃く */
}

/* moreリンク */
.more-link {
  text-align: right;
  margin-top: 20px;
}

.more-link a {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 900;     
  font-size: 16px;
  text-decoration: none;
  color: #717071;
}

.more-link a:hover {
  color: #FF8E14;
}

/* === serviceセクション === */
.section-service {
  width: 85%;                 /* セクション全体の横幅を画面の85%に設定 */
  margin: 100px auto;         /* 上下に100pxの余白を取り、左右は中央寄せ */
}

/* サービスセクションのタイトル背景色 */
.section-title--service {
  background-color: #FFA31E; 
}

/* サービスの項目を横並びにするグリッドエリア */
.service-grid {
  display: flex;              /* 横並びのフレックスレイアウト */
  justify-content: space-between; /* 要素間を等間隔に配置 */
  flex-wrap: wrap;            /* 幅が足りなければ折り返し */
  gap: 20px;                  /* 要素間の隙間を設定 */
  text-align: center;         /* 中のテキストを中央寄せ */
}

/* サービス項目（アイコン＋ラベルのボックス） */
.service-item {
  flex: 1;                    /* 可変幅（幅が許す限り広がる） */
  min-width: 150px;           /* 最小幅：アイコンが崩れないよう確保 */
  max-width: 200px;           /* 最大幅：横幅を広げすぎないよう制限 */
}

/* サービス項目内の画像 */
.service-item img {
  width: 100%;                /* ボックス幅いっぱいに画像を広げる */
  max-width: 200px;           /* 元画像が大きくても200pxを超えない */
  height: auto;               /* アスペクト比を維持して縮小 */
  margin-bottom: 10px;        /* 画像下に10pxの余白（ラベルとの間） */
}

/* サービス項目内のテキスト（ラベル） */
.service-item p {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 900;               /* 太く */
  font-size: 18px;            /* 少し大きめのサイズで見やすく */
  color: #717071;             /* グレーカラーで視認性確保 */
}


/* === newsセクション === */
.section-news {
  width: 85%;                     /* セクション全体の横幅を画面の85%に */
  margin: 100px auto 60px;        /* 余白 */
}

/* セクションタイトルの背景色 */
.section-title--news {
  background-color: #FF8E14;
}

/* ニュースリスト全体の枠 */
.news-list {
  list-style: none;               /* デフォルトの箇条書きマークを消去 */
  padding: 0;                     /* 内側余白をリセット */
  margin: 0;                      /* 外側余白もリセット */
  border-top: 1px solid #ccc;     /* 上に薄いグレー線を追加（一覧感を出す） */
}

/* 各ニュースの1項目の行設定 */
.news-list li {
  display: flex;                  /* 日付と本文を横並びに */
  gap: 20px;                      /* 日付と本文の間に20pxの間隔 */
  padding: 15px 0;                /* 上下にゆったり余白 */
  border-bottom: 1px solid #ccc;  /* 下にも線で区切る（一覧らしさ） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;                /* 適度な可読サイズ */
  font-weight: 900;               /* 太く */
  font-weight: bold;              /* 強調でしっかり感を出す */
  align-items: center;            /* 行の中身を縦中央揃えにする */
}

/* 日付部分のスタイル */
.news-date {
  color: #F5B32F;                 /* 明るめオレンジで視認性よく */
  min-width: 100px;              /* 幅を固定して整列を保つ */
}

/* ニュース本文リンクのスタイル */
.news-text {
  flex: 1;                        /* 残りのスペースをすべて使う */
  color: #717071;                /* やや薄めのグレーで主張控えめに */
  text-decoration: none;         /* 下線なしでスッキリ表示 */
  transition: color 0.3s, text-decoration 0.3s; /* ホバー時の動きにスムーズ感 */
}

/* リンクのホバー時（マウスオーバー時）のスタイル */
.news-text:hover {
  color: #FF8E14;                 /* タイトル色と合わせたオレンジに */
}

/* === profileセクション === */
.section-profile {
  width: 85%;                    /* 全体幅を画面の85%に制限 */
  margin: 100px auto;            /* 上下に100pxの余白、左右中央寄せ */
  text-align: center;            /* 中央揃えで見出し・画像などを配置 */
}

/* セクションタイトル：背景色 */
.section-title--profile {
  background-color: #FF790A;  
}

/* プロフィールの中身全体を囲うコンテナ */
.profile-content {
  margin: 40px 0 20px;           /* 余白 */
}

/* プロフィール画像設定 */
.profile-image {
  width: 200px;                  /* 横幅200pxに固定（高さは自動） */
  height: auto;
  margin-bottom: 16px;           /* 下に適度な余白をとる */
}

/* 名前（日本語） */
.profile-name-ja {
  font-family: "ads-strong", sans-serif; /* 太めのゴシック体 */
  font-size: 27px;               /* 大きめの文字で印象付ける */
  font-weight: bold;
  color: #FF790A;                /* タイトル色と統一感を持たせる */
  margin: 0;
}

/* 名前（英語） */
.profile-name-en {
  font-family: "ads-strong", sans-serif;
  font-size: 14px;               /* 控えめなサイズで補足的に表示 */
  color: #FFA31E;                /* 明るいオレンジで階層感を演出 */
  margin: 5px 0 20px;            /* 上に少し余白、下はやや広めに */
}

/* 自己紹介文などのテキスト部分 */
.profile-text {
  margin: 40px auto;             /* 余白、中央寄せ */
  padding: 20px 32px;            /* 内側に余白 */
  background-color: #fafafa;     /* 薄いグレーの背景 */
  font-size: 15px;               /* 本文サイズ */
  line-height: 2;                /* 行間を広めに */
  text-align: left;              /* 左揃え */
  color: #333;                   /* 文字色は濃グレー */
  font-family: sans-serif;       /* ゴシック系の読みやすいフォント */
  border-radius: 12px;           /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); /* 立体感 */
  box-sizing: border-box;        /* padding含めた幅制御 */
}

/* 自己紹介文内の区切り線（<hr>）のスタイル */
.profile-text hr {
  border: none;                  /* デフォルトの立体感を削除 */
  border-top: 1px solid #ccc;   /* 単純な実線の区切りに */
  margin: 24px 0;                /* 上下にゆったりしたスペースを取る */
}

/* === contactセクション（お問い合わせ） === */
.section-contact {
  width: 85%;                      /* ページ幅の85%に制限して中央寄せ */
  margin: 100px auto 0;           /* 上に大きな余白、下は詰め気味に */
}

/* セクションタイトルの背景色 */
.section-title--contact {
  background-color: #FF6400;      
  margin-bottom: 25px;            /* 下の余白 */
}

/* 誘導文（リード文） */
.contact-lead {
  font-family: sans-serif;        /* ゴシック体 */
  font-size: 14px;                /* 文字サイズ */
  color: #333;                    /* 濃グレー */
  text-align: center;             /* 中央揃え */
}

/* お問い合わせフォーム全体 */
.contact-form {
  margin: 40px auto 0;            /* 余白、中央寄せ */
  font-family: sans-serif;
}

/* ボタン周りのラッパー：不要な上下余白の制御 */
.contact-form .button-wrap {
  margin-top: 20px;               /* 余白 */
  margin-bottom: 0;               /* 下の余白を消す */
}

/* 各入力ブロックの余白設定 */
.form-group {
  margin-bottom: 25px;            
}

/* ラベル（入力欄の見出し） */
.contact-form label {
  display: block;                 /* ブロック表示で上に固定配置 */
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;             /* 入力欄との間にスペース */
}

/* テキスト入力とテキストエリアの共通デザイン */
.contact-form input,
.contact-form textarea {
  width: 100%;                    /* 横幅いっぱいに広げる */
  padding: 10px;                  /* 内側の余白 */
  margin-top: 0;                  /* ラベルとの距離を詰める */
  border-radius: 6px;             /* 角丸 */
  border: 1px solid #aaa;         /* 薄い枠線 */
  font-size: 14px;
  box-sizing: border-box;         /* paddingを含めたサイズ調整 */
}

/* ボタン用ラッパー：中央寄せ配置 */
.contact-form .button-wrap {
  text-align: center;
  margin-top: 32px;               /* 余白 */
}

/* 送信ボタンの見た目 */
.contact-form button {
  padding: 12px 32px;             
  font-size: 16px;
  font-weight: bold;
  background-color: #B5B5B6;      /* グレー */
  color: #fff;                    /* 白文字 */
  border: none;
  border-radius: 6px;             /* 角丸で親しみやすさUP */
  cursor: pointer;                /* カーソルをポインターに変更 */
  transition: background-color 0.3s; /* ホバー時の変化を滑らかに */
  display: inline-block;
}

/* ホバー時の色変更 */
.contact-form button:hover {
  background-color: #717071;      /* 濃いグレー */
}

@media screen and (max-width: 768px) {
/* --- ロゴ表示エリア（スマホサイズ） --- */
.logo {
  text-align: center;       /* 中央揃え */
  margin: 0 auto;
  font-size: 1.2rem;        /* フォントサイズ調整 */
}

.logo-area {
  padding-top: 10vh;        /* 上余白 */
  padding-bottom: 10vh;     /* 下余白 */
  height: auto;             /* 高さは自動調整 */
}

.logo-area img {
  max-width: 75%;           /* 横幅は最大75%まで */
  height: auto;             /* 高さはアスペクト比維持で自動 */
}


/* --- WORKSセクション（スマホで縦積み） --- */
.section-works {
  width: 100%;               /* セクション幅を90%に縮小 */
  margin: 0 auto;           /* 中央揃え */
}

.works-grid {
  flex-direction: column;   /* 縦並び */
  align-items: center;      /* 子要素を中央寄せ */
}

.work-item {
  width: 100%;              /* 幅100%で親にフィット */
  max-width: 500px;         /* 最大500pxまで */
}

.work-item:not(:last-child) {
  margin-bottom: 10px;      /* 最後以外の項目に下余白 */
}


/* --- SERVICEセクション（2列レイアウト） --- */
.section-service {
  width: 100%;               /* セクション幅を90%に */
}

.service-grid {
  display: flex;            /* フレックスレイアウト */
  flex-wrap: wrap;          /* 折り返し可能 */
  justify-content: space-between; /* 両端揃え */
  gap: 20px;                /* グリッド間の隙間 */
  width: 100%;
  margin: 0 auto;
}

.service-item {
  flex: none !important;    /* 固定幅 */
  width: calc(50% - 10px);  /* 2列（gap考慮） */
  max-width: none;
  min-width: auto;
}

.service-item img {
  max-width: 200px;         /* 最大200px */
  margin: 0 auto 8px;       /* 画像下に余白 */
}

.service-item p {
  font-size: 14px;          /* テキスト小さめ */
}


/* --- NEWSセクション（スマホ縦積み） --- */
.section-news {
  width: 100%;               /* セクション幅を90%に */
}

.news-list li {
  flex-direction: column;   /* 日付＋本文を縦並びに */
  align-items: flex-start;  /* 左寄せ */
  gap: 5px;                 /* 日付と本文の隙間 */
}

.news-date {
  font-size: 14px;          /* スマホ用に少し小さめ */
  min-width: auto;          /* 固定幅を解除 */
}

.news-text {
  font-size: 16px;
  line-height: 1.5;         /* 可読性アップ */
}

/* "more" リンクの位置 */
.more-link {
  text-align: right;        /* 右寄せに戻す */
  margin-top: 20px;
}


/* --- PROFILEセクション（幅調整＋背景削除） --- */
.section-profile {
  width: 100%;               /* セクション幅を90%に */
}

.profile-text {
  margin: 40px auto;                /* 上下余白 */
  padding: 0;                        /* 内余白除去 */
  background-color: transparent;    /* 背景削除 */
  font-size: 15px;
  line-height: 2;                   /* 行間広めで読みやすく */
  text-align: left;
  color: #333;
  font-family: sans-serif;
  border-radius: 0;                 /* 角丸除去 */
  box-shadow: none;                 /* 影除去 */
  max-width: 100%;                  /* 最大限広げる */
}


/* --- CONTACTセクション --- */
.section-contact {
  width: 100%;               /* セクション幅を90%に */
}
	
}