@charset "utf-8";

body {
  font-family: "FOT-TsukuARdGothic Std", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #333;
  line-height: 1.8;
  letter-spacing: 0.1em;
  background-color: #fcdb75;
  padding-top: 50px;
}


/* =========================
   ヘッダー全体
========================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* 白の不透明度50% */
  background-color: rgba(255, 255, 255, 0.5);

  /* 背景を少しぼかす */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   ヘッダー内側
========================= */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: 10px 60px;
  box-sizing: border-box;
}

/* =========================
   左側：サイト名
========================= */
.header-logo {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}

/* =========================
   右側：ナビゲーション
========================= */
.header-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 45px;

  margin: 0;
  padding: 0;
  list-style: none;
}

/* リンク文字 */
.header-nav a {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;

  transition: opacity 0.3s ease;
}

/* マウスを乗せた時 */
.header-nav a:hover {
  opacity: 0.5;
}

/* ページ内リンクをなめらかに移動 */
html {
  scroll-behavior: smooth;
}

/* 固定ヘッダーとリンク先の間隔 */
#top,
#about,
#clientwork,
#work {
  scroll-margin-top: 110px;
}

html {
  scrollbar-color: #f7931e #fffdf5;
  scrollbar-width: thin;
}

/* =========================
   TOP画像 ふわふわアニメーション
========================= */

.portfolio-image {
  width: 70%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.portfolio-image {
  animation:
    fadeInUp 1.5s ease-out both,
    floating 4s ease-in-out 1.5s infinite;
}

/* ① 下からふわっとフェードイン */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ② フェードイン後に上下に動く */
@keyframes floating {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .portfolio-image {
    animation: none;
  }
}

.profile-box {
  width: min(85%, 880px);
  margin: 60px auto;
  padding: 40px 28px 56px;
  background-color: #fffdf5;
  border-radius: 24px;
}

.about {
  padding-top: 8px;
}

.about,
.skill {
  background-color: transparent;
}

.skill {
  margin-top: 48px;
}

.story-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 18px;
}

.story-heading__title {
  margin: 0;
  color: #660033;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1;
  letter-spacing: 0.04em;
  font-family: "FOT-TsukuARdGothic Std", sans-serif;
  white-space: nowrap;
}

.story-heading__deco {
  position: relative;
  width: 110px;
  height: 30px;
  flex-shrink: 0;
}

.story-heading__wing,
.story-heading__line {
  position: absolute;
  display: block;
  background-color: #f26522;
}

/* 左右共通：羽の形 */
.story-heading__wing--top {
  top: 4px;
  width: 34px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 18% 100%);
}

.story-heading__wing--bottom {
  bottom: 4px;
  width: 34px;
  height: 10px;
  clip-path: polygon(18% 0, 78% 0, 100% 100%, 0 100%);
}

/* 左の飾り */
.story-heading__deco--left .story-heading__wing--top,
.story-heading__deco--left .story-heading__wing--bottom {
  left: 0;
}

.story-heading__deco--left .story-heading__line {
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  width: 82px;
  height: 4px;
}

/* 右の飾り */
.story-heading__deco--right .story-heading__wing--top,
.story-heading__deco--right .story-heading__wing--bottom {
  right: 0;
  transform: scaleX(-1);
}

.story-heading__deco--right .story-heading__line {
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 82px;
  height: 4px;
}

.about__image {

  padding-top: 24px;
  display: block;
  width: 95%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
}


.skill {
  padding-top: 24px;
  padding-bottom: 8px;
  background-color: #fffdf5;
}


.skill-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 18px;
}

.skill-heading__title {
  margin: 0;
  color: #660033;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1;
  letter-spacing: 0.04em;
  font-family: "FOT-TsukuARdGothic Std", sans-serif;
  white-space: nowrap;
}

.skill-heading__deco {
  position: relative;
  width: 110px;
  height: 30px;
  flex-shrink: 0;
}

.skill-heading__wing,
.skill-heading__line {
  position: absolute;
  display: block;
  background-color: #f26522;
}

.skill-heading__wing--top {
  top: 4px;
  width: 34px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 18% 100%);
}

.skill-heading__wing--bottom {
  bottom: 4px;
  width: 34px;
  height: 10px;
  clip-path: polygon(18% 0, 78% 0, 100% 100%, 0 100%);
}

.skill-heading__deco--left .skill-heading__wing--top,
.skill-heading__deco--left .skill-heading__wing--bottom {
  left: 0;
}

.skill-heading__deco--left .skill-heading__line {
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  width: 82px;
  height: 4px;
}

.skill-heading__deco--right .skill-heading__wing--top,
.skill-heading__deco--right .skill-heading__wing--bottom {
  right: 0;
  transform: scaleX(-1);
}

.skill-heading__deco--right .skill-heading__line {
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 82px;
  height: 4px;
}

.skill-cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.skill-card {
  width: 275px;
  background-color: #f7931e;
  border-radius: 28px;
  padding: 8px;
  box-sizing: border-box;
}

.skill-card__head {
  background-color: #f4a037;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 20px 10px;
  border-radius: 20px 20px 0 0;
  font-family: "Hiragino Maru Gothic Pro W4", sans-serif;
}

.skill-card__body {
  background-color: #f7f4e8;
  border-radius: 0 0 20px 20px;
  padding: 20px 16px 24px;
  box-sizing: border-box;
  font-family: "Hiragino Maru Gothic Pro W4", sans-serif;
}

.skill-card__image {
  width: 100%;
  max-width: 150px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 20px;
}

.skill-card__text {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: -0.01em;
  font-family: "Hiragino Maru Gothic Pro W4", sans-serif;
}


/* =========================
   Client Work 全体
========================= */

.work-table {
  position: relative;
  width: min(85%, 960px);
  margin: 60px auto;
  padding: 60px 24px 24px;
  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* タイトル */
.work-title {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  z-index: 10;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* =========================
   画像を並べる白い背景
========================= */

.work-spot,
.work-cafe {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
}

/* 4枚を横一列に配置 */
.work-spot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* =========================
   左側2枚の画像
========================= */

.work-spot>a:not(.card-group) {
  flex: 1;
  min-width: 0;
}

/* =========================
   右側2枚の名刺グループ
========================= */

.card-group {
  display: flex;
  flex: 2;
  min-width: 0;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

/* =========================
   画像共通の設定
========================= */

.work-spot .spot-image {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;

  transition: transform 0.3s ease;
  cursor: pointer;
}

/* 名刺2枚を横並び */
.card-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 名刺2枚の横幅 */
.card-group .spot-image {
  width: calc((100% - 2px) / 2);
  min-width: 0;
  flex-shrink: 0;
}

/* 名刺のサイズ */
.business-card img {
  width: 150px;
  height: auto;
}

.work-spot .spot-image01 {
  width: 100%;
  height: 260px;
}

.work-spot .spot-image02 {
  width: 100%;
  height: 260px;
}

/* =========================
   ホバーアニメーション
========================= */

/* 左2枚：それぞれ単独で浮く */
.work-spot>a:not(.card-group):hover .spot-image,
.work-spot>a:not(.card-group):focus-visible .spot-image {
  transform: translateY(-8px);
}

/* 右2枚：同時に浮く */
.card-group:hover .spot-image,
.card-group:focus-visible .spot-image {
  transform: translateY(-8px);
}



/* =========================
   CAFEWORK 全体のテーブル
========================= */
.cafework-table {
  position: relative;
  width: min(85%, 960px);
  margin: 60px auto;
  padding: 60px 24px 24px;
  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* CAFEWORK 見出し */
.cafework-title {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 14px 42px;
  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* CAFEWORK 白いカード */
.work-cafe {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
}

/* CAFEWORK 画像 */
.cafe-image {
  width: 200px;
  height: 300px;
  object-fit: contain;
  display: block;
}

.cafe-card-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;

  width: 200px;
  height: 280px;
  flex-shrink: 0;
}

/* ショップカード2枚のサイズ */
.work-cafe .cafe-card-group .cafe-image {
  width: 100%;
  height: calc((300px - 12px) / 2);
  object-fit: contain;
}

/* =========================
   WORK 2つのテーブルを横並び
========================= */

.work-flex-container {
  display: flex;
  align-items: stretch;
  gap: 16px;

  width: 92%;
  max-width: 960px;
  margin: 60px auto;
  box-sizing: border-box;
}

/* 左：CAFE WORK */
.work-flex-container .cafework-table {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* 右：SCHOOL WORKS */
.school-works {
  position: relative;

  flex: 1 1 0;
  width: 0;
  min-width: 0;

  padding: 40px 8px 8px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* SCHOOL WORKS 見出し */
.school-works-title {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  padding: 14px 42px;

  background-color: #f7931e;
  color: #ffffff;

  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* SCHOOL WORKS 内側の白いエリア */
.school-works-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;

  width: 100%;
  min-height: 350px;
  padding: 20px;

  background-color: #ffffff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* SCHOOL WORKS 画像 */
.school-works-image {
  display: block;
  width: calc(50% - 10px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   スマホ対応
========================= */

@media (max-width: 768px) {

  .work-flex-container {
    flex-direction: column;
    gap: 50px;
    width: 92%;
  }

  .work-flex-container .cafework-table,
  .school-works {
    width: 100%;
    flex: none;
  }

  .school-works-images {
    flex-direction: column;
  }

  .school-works-image {
    width: 100%;
    max-width: 350px;
  }
}

/* 左：CAFE WORK */
.work-flex-container .cafework-table {
  flex: 1.4 1 0;
}

/* 右：SCHOOL WORKS */
.work-flex-container .school-works {
  flex: 0.8 1 0;
}


.work-detail {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 80%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 60px 24px 24px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* 見出し */
.work-text h1 {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  margin: 0;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* 画像カード */
.work-image {
  flex: 0 0 50%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.work-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストカード */
.work-text {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 見出し以外の文章 */
.work-text p {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.work-text p:last-child {
  margin-bottom: 0;
}


/* spot02mockupのページ */
.work-detail02 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 80%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 60px 24px 24px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* 見出し */
.work-text02 h1 {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  margin: 0;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* 画像カード */
.work-image02 {
  flex: 0 0 50%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.work-image02 img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストカード */
.work-text02 {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 見出し以外の文章 */
.work-text02 p {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.work-text02 p:last-child {
  margin-bottom: 0;
}

/* spot02mockupのページ */
.work-detail02 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 80%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 60px 24px 24px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* 見出し */
.work-text02 h1 {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  margin: 0;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* 画像カード */
.work-image02 {
  flex: 0 0 50%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.work-image02 img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストカード */
.work-text02 {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 見出し以外の文章 */
.work-text02 p {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.work-text02 p:last-child {
  margin-bottom: 0;
}

/* =========================
   spot05mockupのページ
========================= */
.work-detail05 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 80%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 60px 24px 24px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* 見出し */
.work-text05 h1 {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  margin: 0;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* 画像カード */
.work-image05 {
  flex: 0 0 50%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.work-image05 img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストカード */
.work-text05 {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 見出し以外の文章 */
.work-text05 p {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.work-text05 p:last-child {
  margin-bottom: 0;
}

/* spot0304mockupのページ */
.work-detail03 {
  position: relative;
  align-items: flex-start;
  gap: 8px;
  width: 80%;
  max-width: 1100px;
  margin: 70px auto;
  padding: 60px 24px 24px;

  background-color: #fffdf5;
  border-radius: 24px;
  box-sizing: border-box;
}

/* 見出し */
.work-text03 h1 {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-block;
  margin: 0;
  padding: 14px 42px;

  background-color: #f7931e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  clip-path: polygon(0 0,
      100% 0,
      calc(100% - 16px) 50%,
      100% 100%,
      0 100%,
      16px 50%);
}

/* 画像カード */
.work-image03 {
  flex: 0 0 50%;
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

.work-image03 img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストカード */
.work-text03 {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 見出し以外の文章 */
.work-text03 p {
  margin: 0 0 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.work-text03 p:last-child {
  margin-bottom: 0;
}

/* =========================
   Client Work 詳細ページ
   3ページ共通固定ヘッダー
========================= */

/* ヘッダー全体 */
.sub-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;

  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 1000;
  box-sizing: border-box;
}

/* ナビゲーションの並び */
.sub-header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

/* リンク文字 */
.sub-header-nav a {
  color: #3b3028;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;

  transition: color 0.3s ease;
}

/* マウスを乗せたとき */
.sub-header-nav a:hover {
  color: #f7931e;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .sub-header {
    height: 60px;
  }

  .sub-header-nav {
    gap: 25px;
  }

  .sub-header-nav a {
    font-size: 15px;
  }
}


/* =========================
   フッター全体
========================= */
.footer {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* =========================
   フッター 半透明テーブル
========================= */
.footer-table {
  width: 85%;
  max-width: 960px;
  margin: 0 auto;
  padding: 50px 30px;

  /* 白の不透明度50% */
  background-color: rgba(255, 255, 255, 0.5);

  border-radius: 24px;
  text-align: center;
  box-sizing: border-box;
}

/* 英語タイトル */
.footer-table h2 {
  font-size: 32px;
  font-weight: 700;
  color: #3b3028;
  margin: 0 0 25px;
}

/* 感謝メッセージ */
.footer-message {
  font-size: 18px;
  color: #3b3028;
  margin: 0 0 20px;
  line-height: 1.8;
}

/* デザインへの想い */
.footer-description {
  font-size: 16px;
  color: #3b3028;
  line-height: 2;
  margin: 0 0 30px;
}

/* メールアドレス */
.footer-mail {
  font-size: 16px;
  color: #3b3028;
  margin: 0;
}

/* メールリンク */
.footer-mail a {
  color: #3b3028;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ホバー時 */
.footer-mail a:hover {
  color: #f7931e;
}