@charset "utf-8";

html {
    font-size: 100%;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.75rem;
  color: #2A2A2A;
  padding-top: 80px; /* ヘッダー高さぶん下げる */
}

/* header PC */

header {
  display: flex;
  justify-content: space-between;
  padding: 20px 48px;
  /* ヘッダー固定する場合↓表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff; /* 背景を付けて下の要素が透けないように */
}

header .site-title a {
  font-family: "theodosia", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  color: #2A2A2A;
}

header .menu ul {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
}

header .menu ul a {
  font-family: 'Aboreto', sans-serif;
  font-size: 1rem;
  text-decoration: none;
  color: #2A2A2A;
  /* 文字色（color）が変化する際に、0.3秒かけて滑らかなアニメーション（トランジション）を適用する */
  transition: color 0.3s;
}

header .menu a:hover {
  color: #7a9e9f; /* アクセントカラー */
}

/* ============================= */
/* header SPハンバーガーボタン    */
/* ============================= */
.hamburger {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1100; /* メニューより上 */
  transition: 0.4s;
}

.hamburger span {
  display: block;
  height: 1px;
  background: #555555;
  transition: 0.4s;
}

/* active状態で × に変形 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================= */
/* header SPオーバーレイメニュー   */
/* ============================= */
.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 1000;
}

.overlay-menu.active {
  opacity: 1;
  visibility: visible;
}

.overlay-menu .menu-logo {
  font-family: "theodosia", sans-serif;
  font-weight: 400;
  font-size: 1.875rem;
  margin-bottom: 40px;
  color: #555555;
}

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

.overlay-menu ul li {
  margin: 20px 0;
}

.overlay-menu ul a {
  text-decoration: none;
  font-family: "Aboreto", sans-serif;
  font-size: 1.25rem;
  color: #7a9e9f;
  display: block;
  transition: color 0.3s;
}

.overlay-menu ul a:hover {
  color: #555;
}

.overlay-menu ul a span {
  font-size: 0.75rem;
  color: #555;
  font-family: "fot-tsukubrdgothic-std", sans-serif;
  line-height:0.16rem
}


/* main visual PC */
.main-visual {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  /* height: 100vh; */　/* 画面いっぱい */
  padding: 120px 0; /* ← 上下に余白を足すとさらに安心 */
  display: flex;
  align-items: center; /* 縦方向中央 */
}

.mv-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.mv-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 175px; /* PCでの左余白 */
  gap: 14px; /* テキスト間の余白 */
  
}

.mv-title {
  font-family: "theodosia-condensed", sans-serif;
  font-size: 4.25rem;  /* 68px */
  font-weight: 400;
  color: #2A2A2A;
  line-height: 160%;
  letter-spacing: 0.05rem;
}

.mv-sub {
  font-size: 1.25rem;  /* 20px */
  color: #7a9e9f;
  font-family: "fot-tsukubrdgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 160%;
  letter-spacing: 0.15rem;
}

.mv-desc {
  font-size: 0.875rem;
  line-height: 160%;
}

.mv-image img {
  max-height: 913px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* main visual SP */
.main-visual-sp {
  display: none; /* デフォルトは非表示 */
}

.mv-inner-sp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mv-image-sp {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-height: 405px;
}

.mv-image-sp img {
  max-height: 405px;
  width: auto;
  display: block;
}

.mv-sub-sp {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1rem;
  font-family: "fot-tsukubrdgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.15rem;
  color: #9CB3BA;
}


.mv-text-sp {
  width: 100%;
  padding-left: 20px;
  margin-top: 20px;
  position: static;
}

.mv-title-sp {
  font-size: 2rem;
  margin: 0;
  text-align: left;
  font-family: "theodosia", sans-serif;
  font-size: 1.875rem;
  font-weight: 400;
}

.mv-desc-sp {
  font-size: 0.75rem;
  margin: 10px 0 0 0;
  text-align: left;
}

/* work section PC */

.works {
  max-width: 980px;
  margin: 0 auto;
  padding: 120px 20px;
  overflow: hidden; /* ←追加 */
}

.section-header {
  max-width: 980px;
  margin: 0 auto 80px; /* 中央に配置しつつ、下余白80px */
  text-align: left;    /* ← 左揃え */
}

.section-title-en {
  font-family: 'Aboreto', sans-serif;
  font-size: 2rem; /* 32px */
  color: #2a2a2a;
  margin: 0;
}

.section-title-jp {
  font-family: 'FOT-TsukuBRdGothic Std', sans-serif;
  font-size: 1rem; /* 16px */
  color: #555555;
  margin: 10px 0;
}

.section-line {
  width: 980px;
  max-width: 100%;  /* ← スマホ時に画面幅にフィット */
  height: 1px;
  background-color: #2a2a2a;
  margin: 0 auto 80px;
}

/* 2列グリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 40px; /* 上下0px / 横40px */
}

.work-item img {
  width: 100%;
  /* height: auto; */
  aspect-ratio: 16 / 9; /* 比率を指定 */
  object-fit: cover; /* 中央を切り抜いて収める */
  margin-bottom: 10px;
  border-radius: 8px;
}

/* メタ情報（種類＋制作区分） */
.work-meta {
  display: flex;
  gap: 10px;
  justify-content: start;
  margin-bottom: 5px;
}

.work-item {
  text-align: left; /* ← サムネイル内は左揃え */
}

.work-type {
  background-color: #9CB3BA;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem; /* 15px */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 30px;
}

.work-category {
  border: 1px solid #9CB3BA;
  border-radius: 20px;
  color: #2a2a2a;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 30px;
}

/* タイトル＆作業内容 */
.work-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1.125rem; /* 18px */
  color: #2a2a2a;
  margin: 5px 0;
}

.work-role {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem; /* 16px */
  color: #555555;
  margin: 0 0 80px 0; /* 下余白80px */
}

/* すべて見るボタン */
.works-button {
  margin-top: 40px;
}

.works-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto ;
  background-color: #2a2a2a;
  border-radius: 50%;
  font-family: 'Aboreto', sans-serif;
  font-size: 1.125rem; /* 18px */
  color: #fff;
  text-decoration: none;
}

/* thougt section PC */

/* 全体 */
.thought-section {
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: center;     /* 垂直方向中央 */
  padding: 80px 0;
  width: 100%;
  box-sizing: border-box;
  height: 100vh; /* 画面高さいっぱい */
  background-image: url('../img/thought-PC.png'); /* 背景画像 */
  background-size: cover; /* 横幅いっぱいに表示 */
  background-position: center;
  background-repeat: no-repeat;
}

/* 内側コンテナ */
.thought-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.thought-title {
  margin-bottom: 30px;
}

/* セクションタイトル */
.thought-title-en {
  font-family: 'Aboreto', sans-serif;
  font-size: 2rem; /* 32px */
  color: #2a2a2a;
  margin: 0;
}

.thought-title-ja {
  font-family: 'FOT-TsukuBRdGothic Std', sans-serif;
  font-size: 1rem; /* 16px */
  color: #555555;
  line-height: 0.16rem; 
}

/* コピー */
.thought-copy-en {
  font-family: 'Theodosia Condensed', serif;
  font-size: 1.5rem; /* 24px */
  color: #2a2a2a;
  margin: 0;
}

.thought-copy-ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1.125rem; /* 18px */
  color: #9CB3BA;
  margin-bottom: 30px;
}

/* テキスト */
.thought-text p {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem; /* 16px */
  color: #2a2a2a;
  line-height: 1.8rem; /* 0.18remだと極端に狭いのでpx換算 */
  text-align: left;
  max-width: 480px;
  margin-bottom: 20px;
}

/* ABOUT section PC */
.about-section {
  padding: 80px 20px;
  box-sizing: border-box;
}

/* プロフィール＋テキスト */
.about-content {
  display: flex;
  justify-content: center; /* 中央揃え */
  align-items: center;
  gap: 40px; /* 画像とテキストの間隔 */
  flex-wrap: wrap; /* 小さい画面で縦並びになる */
  max-width: 980px;
  margin: 0 auto;
  margin-bottom: 80px; /* ②③下余白 */
}

/* プロフィールテキスト */
.about-text {
  text-align: left;
}

.about-name-en {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem; /* 16px */
  color: #555555;
  line-height: 1.6rem;
  letter-spacing: 0.18rem;
  margin: 0;
}

.about-name-ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1.25rem; /* 20px */
  color: #2a2a2a;
  line-height: 1.6rem;
  margin-bottom: 45px;
}

.about-text {
  max-width: 435px;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6rem;
  margin-bottom: 15px;
  color: #2a2a2a;
}

/* skills section PC */

.skills-section {
  max-width: 980px;
  margin: 0 auto 120px;
  padding: 0 20px;
}

.skills-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.skill-box {
  flex: 1;
  border: 1px solid #2a2a2a;
  border-radius: 25px;
  padding: 30px;
  position: relative;
}

/* 見出し */
.skill-title {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  background: #fff;
  padding: 0 10px;
  font-family: 'Aboreto', sans-serif;
  font-size: 1.125rem; /* 18px */
  color: #2a2a2a;
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.skill-list li {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem; /* 15px */
  color: #2a2a2a;
  margin-bottom: 10px;
  list-style: disc;
  list-style-position: inside;
}

.skill-list li::marker {
  font-size: 0.5em; /* デフォルトより小さく */
  color: #2a2a2a;  /* 色も変更可能 */
}

/* ツールボタン */
.skill-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tools span {
  display: inline-block;
  padding: 6px 12px;
  background-color: #9CB3BA;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.875rem;
}

/* contact section PC */

.contact-section {
  max-width: 980px;
  margin: 120px auto;
  padding: 0 20px;
}

.contact-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 60px;
  gap: 40px;
}

.contact-text {
  flex: 1;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem;
  color: #2a2a2a;
  line-height: 2;
}

.contact-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 290px;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: #2a2a2a;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1rem;
  transition: background 0.3s;
}

.contact-link:hover {
  background: #f5f5f5;
}

.img-x {
  width: 30px;
  height: 31px;
}

.img-mail {
  width: 38px;
  height: 36px;
}

/* footer */
.copyright {
  font-size: 0.75rem; 
  text-align: center;
  margin: 50px auto;
}

/* ============================= */
/* WORKSページ "works-list-page" */
/* ============================= */

/* TOPに戻るボタン */
.works-list-page .works-button a {
  background-color: #ffffff;
  border: solid 1px #2a2a2a;
  color: #2a2a2a;
  text-decoration: none;
  text-align: center;
}

/* ================================== */
/* WORKS詳細ページ "works-detail-page" */
/* URLあり                            */
/* ================================== */

/* works detail ページ全体 */
.works-detail-inner {
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
}

/* タイトル */
.work-detail-title {
  font-size: 1.5rem;
  line-height: 1.6rem;
  margin-bottom: 15px;
  color: #2a2a2a;
  text-align: left;
}

/* 種類と制作区分 */
.work-detail-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.work-type {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #9CB3BA;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  width: 130px;
  height: 30px;
}

.work-category {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #9CB3BA;
  border-radius: 20px;
  color: #2a2a2a;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  width: 176px;
  height: 30px;
}

.work-role {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  color: #555;
  margin: 0 0 5px 0; /* 下にだけ5pxの余白 */
}

/* ============================= */
/* バナー複数サイズある場合 　　　　*/
/* ============================= */

/* 画像サイズ表記 */
.work-size {
  display: flex;
  align-items: center; /* 縦中央揃え */
  gap: 5px;
  padding: 0 0;
}

.work-size .size-icon {
  width: 20px; /* アイコンのサイズ調整 */
  height: auto;
}

.work-size-text {
  font-size: 0.9375rem;
  color: #2a2a2a;
}

/* バナー複数サイズある場合　スライダー */
.banner-slider {
  --w: min(100%, 880px);
  --h: clamp(220px, 60vw, 640px); /* 高さは画面幅に応じて変動 */
  position: relative;
  width: var(--w);
  height: var(--h);      /* 固定比率ではなく高さを可変に */
  margin: 45px auto;
  overflow: hidden;
  border-radius: 16px;
  background-color: #fff; /* 縦横比に余白が出たときの背景色 */
  display: flex;          /* 子要素を中央に */
  align-items: center;    /* 縦方向中央 */
  justify-content: center;/* 横方向中央 */
}

/* ラジオを隠す */
.banner-slider input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* スライド */
.banner-slider .slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  display: flex;
  align-items: center;   /* 縦中央揃え */
  justify-content: center; /* 横中央揃え */
}
.banner-slider .slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 比率を保持して縮小 */
  border-radius: 4px;
}

/* 表示切替 */
#s1:checked ~ .slides .slide:nth-child(1),
#s2:checked ~ .slides .slide:nth-child(2),
#s3:checked ~ .slides .slide:nth-child(3) {
  opacity: 1;
}

/* ドット */
.banner-slider .dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.banner-slider .dots label {
  width: 10px;
  height: 10px;
  border: 1px solid #9aa7b4;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  transition: background .2s;
}

/* アクティブなドットを塗る */
#s1:checked ~ .dots label:nth-child(1),
#s2:checked ~ .dots label:nth-child(2),
#s3:checked ~ .dots label:nth-child(3) {
  background: #9aa7b4;
  border-color: #9aa7b4;
}

/* ============================= */

/* 制作物画像 */

.work-detail-image img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
  margin: 45px auto 30px;
  border-radius: 4px;
  
}
/* URLボタン */
.work-url {
  text-align: center;
  margin-bottom: 30px;
}

.work-url-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 300px;
  height: 45px;
  border: 1px solid #9CB3BA;
  border-radius: 20px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  color: #9CB3BA;
  text-decoration: none;
}

.url-icon {
  width: 15px;
  height: 15px;
  transform: rotate(-30deg);
}

/* 概要欄 */
.work-overview {
  max-width: 800px;
  margin: 0 auto;
}

.overview-item {
  display: flex;
  gap: 45px;
  padding: 45px 0;
  border-top: 1px solid #2a2a2a;
}

.overview-item:last-child {
  border-bottom: 1px solid #2a2a2a;
}

.overview-label {
  width: 110px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  color: #9CB3BA;
  margin-left: 20px;
  flex-shrink: 0;
}

.overview-text {
  max-width: 515px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 0.9375rem;
  color: #2a2a2a;
  line-height: 1.6rem;
}

/* 配色用 */
.overview-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 600px;
}

.color-item {
  text-align: center;
}

.color-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 10px;
}

.color-code {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: #2a2a2a;
  line-height: 1.6rem;
}

/* WORKSに戻るボタン */
.works-detail .works-button a {
  background-color: #ffffff;
  border: solid 1px #2a2a2a;
  color: #2a2a2a;
  text-decoration: none;
  text-align: center;
}

/* ============================= */
/* LPデザインのみの場合 　　　　*/
/* ============================= */

.work-detail-image-LP {
  margin: 45px auto 60px;
}



/* ============================= */
/* PC対応（幅769px以上）          */
/* ============================= */
@media (min-width: 769px) {
.hamburger {
  display: none; /* PCではハンバーガー非表示 */
}

.overlay-menu {
  display: none; /* PCではオーバーレイメニュー無効化 */
}

header .menu {
  display: block; /* PCでは通常ナビ表示 */
}
}


/* ============================= */
/* SP対応（幅768px以下）          */
/* ============================= */

@media (max-width: 768px) {

/* header-SP */
header {
  padding: 20px;
}

/* PC版メニュー非表示 */
.menu {
  display: none;
}

/* ハンバーガー表示 */
.hamburger {
  display: flex;
}

.menu.active {
  display: flex; /* ハンバーガークリックで表示 */
}

/* MV-SP */
.main-visual {
  display: none;  /* PC版非表示 */
}
.main-visual-sp {
  display: block; /* SP版表示 */
}

/* WORKS-SP */
.works {
  padding: 60px 20px;
}

.work-role {
  margin: 0 0 35px 0; /* 下余白80px */
}

/* タイトルサイズ調整 */
.section-title-en {
  font-size: 1.5rem; /* 24px */
}

.section-title-jp {
  font-size: 0.875rem; /* 14px */
}

/* タイトル下余白調整 */
.section-line {
  margin: 0 auto 60px;
}

/* WORKS: 1カラム表示 */
.works-grid {
  grid-template-columns: 1fr;
  gap: 40px;
}

/* ABOUT テキスト配置 */
.about-name-en, .about-name-ja {
  text-align: center;
}

/* SKILLS: 縦並び */
.skills-inner {
  flex-direction: column;
  gap: 40px;
}

/* CONTACT: 縦並びに変更 */
.contact-content {
  flex-direction: column;
  gap: 20px;
}

.contact-links {
  margin: 0 auto;
}

/* ============================= */
/* WORKSページ "works-list-page" */
/* ============================= */

/* 制作物タイトルサイズ調整 */
.works-detail .work-detail-title {
  font-size: 1.25rem; /* 20px */
}

.work-role {
    margin-bottom: 5px; /* SPは余白を小さく */
  }


/* 概要欄 */
.overview-item {
  display: block;          /* 横並び → 縦並び */
  padding: 20px 0;
}

.overview-label {
  display: block;
  width: auto;             /* 固定幅を解除 */
  margin: 0 0 10px 0px; 
}


/* 配色 */
.overview-colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
  gap: 10px;
  margin-left: 15px;       /* ラベルとそろえる */
}

.color-item {
  text-align: center;
}

.color-circle {
  width: 90px;   /* 少し小さめに調整（必要なら変更） */
  height: 90px;
}

}