/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Basic Styles */
body {
  font-family: 'Climate Crisis', cursive;
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  visibility: hidden; /* FOUC対策 */
}

header {
  display: flex;
  align-items: center;
  padding: 1rem 60px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left img {
  width: 100px;
  height: auto;
}

.header-right {
  display: flex;
  align-items: left;
  margin-left: 30px;
}

.header-right button {
  margin-left: 1rem;
  background-color: #fff;
  border: none;
  cursor: pointer;
}

.lang-switcher {
  align-items: right;
  margin: 0 0 0 auto;
  display: flex;
}
.lang-switcher button+button {
  margin-left: 16px;
}

.work-item { /* works.html の各実績アイテムの<a>タグ */
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-left: 60px;
  margin-right: 60px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.work-item:hover {
  opacity: 0.8;
}

.work-image { /* works.html の実績アイテム内の画像コンテナ */
  flex-basis: 25%;
  margin-right: 20px;
  min-width: 150px;
}

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

.work-info { /* works.html の実績アイテム内の情報コンテナ */
  flex-basis: 60%;
}

.work-title {
  font-size: 1.2em;
  margin-bottom: 5px;
  margin-left: 12px;
  white-space: nowrap;
}

.work-description {
  margin-bottom: 5px;
  margin-left: 16px;
}

/* Media Queries */
@media screen and (max-width: 800px) { /* works.htmlのアイテム スマホ表示 */
  .work-item {
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
  }
  .work-image {
    margin-bottom: 20px;
    margin-right: 0;
    width: 100%;
    flex-basis: auto;
  }
  .work-image img{
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
  }
  .work-info {
      width:100%;
      margin-left:0;
  }
  .work-title {
      margin-left:0;
      text-align: center;
  }
  .work-description{
      margin-left:0;
      text-align: center;
  }
}
@media screen and (max-width: 1200px) { /* works.htmlのアイテム 中間サイズ */
  .work-image {
    flex-basis: 40%;
  }
  .work-title {
    white-space: inherit;
  }
}

/* ヘッダーのレスポンシブ修正 */
@media screen and (max-width: 1000px) {
  header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 20px;
  }
  .header-left {
    text-align: center;
    margin: 0 0 10px 0;
  }
  .header-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    margin-right: 0 !important;
    width: 100%;
  }
  .header-right .menubutton,
  .header-right .menubutton2 {
    padding: 8px 12px !important;
    margin: 5px;
    font-size: 14px;
  }
  .lang-switcher {
    display: none !important;
  }
  .menubutton2 {
    display: inline-block !important;
  }
}
@media screen and (min-width: 1001px){
  .menubutton {
    background-color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
  }
  .menubutton2{
    display: none;
  }
}

/* Intro image size adjustment - PC */
@media screen and (min-width: 1400px) {
  .intro {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .intro .image {
    width: 450px;
    height: auto;
    margin-top: 0;
    margin-left: 40px;
    padding: 0;
    flex-shrink: 0;
  }
}

/* ===== タブレット表示時のイントロセクション修正 ここから ===== */
@media screen and (max-width: 1399px) and (min-width: 769px) {
  .intro {
    margin-top: 60px;
    margin-bottom: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }

  .intro > div:first-child {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 500px;
    text-align: left;
  }

  .intro .image {
    width: 220px;
    height: auto;
    padding: 0;
    display: block;
    margin: 0;
    flex-shrink: 0;
  }

  #introTxt { font-size: 32px; margin-bottom: 12px; }
  #nomargin { font-size: 15px; line-height: 1.6; margin-bottom: 15px; }
  .contacts { margin-top: 10px; align-items: flex-start; display: block; }
  .contacts p#contacttxt { font-size: 13px; justify-content: flex-start; margin-left:0; width: auto; }
  .contacts p#contacttxt .text_img { width: 18px; height: 18px; margin-right: 8px;}
}
/* ===== タブレット表示時のイントロセクション修正 ここまで ===== */


/* Intro image size adjustment - Mobile & Text Centering */
@media screen and (max-width: 768px) {
  .intro {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .intro > div:first-child {
     width: 100%;
     text-align: center;
     margin-bottom: 30px;
  }
  /* #nomargin のスマホ表示スタイルは、汎用的なものとHSAセクション内のものを別途定義 */
  .intro #nomargin { /* introセクション内のnomarginに限定 */
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 90%;
  }
  .contacts {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .contacts p#contacttxt {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .intro .image {
    width: 80%;
    max-width: 280px;
    height: auto;
    padding: 0;
    display: block;
    margin: 0 auto;
  }
}

iframe { aspect-ratio: 16 / 9; max-width: 1300px; margin-bottom: -50px; }
h1 { font-size: 50px; }
h2 { margin-top: 60px; margin-bottom: 5px; margin-left: 30px; font-size: 30px; }
h3 { margin-left: 30px; font-size: auto; }
p { font-size: 16px; }
#nomargin { margin-left: 4px; font-size: 16px; } /* デスクトップ汎用 */
#contacttxt { margin-left: 4px; font-size: 13px; }
.contacts p#contacttxt { display: flex; align-items: center; margin-bottom: 8px; width: fit-content; }
#title { font-size: 18px; white-space: nowrap; }
.contacts { margin-top: 10px; }
.text_img { width: 20px; height:20px; flex-shrink:0; margin-right: 8px; }
a { color: inherit; text-decoration: none; }
.img { max-width: 100%; height: auto; }

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 60px;
  margin-right: 60px;
}
.portfolio-works-list .container { justify-content: center; }
.portfolio-works-list ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 -10px; justify-content: center; max-width: 1000px; margin-left: auto; margin-right: auto; }
.portfolio-works-list li { width: calc(50% - 20px); margin: 10px; box-sizing: border-box; }
.portfolio-works-list li a { display: block; }
.portfolio-works-list li img { max-width: 100%; height: auto; display: block; margin: 0 auto 5px auto; }

.nav-menu { display: none; }
@media (min-width: 701px) {
  main { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
}
footer { background-color: #ffffff; color: #666; padding: 20px; font-size: 14px; text-align: center; margin-top: 50px; margin-bottom: 20px; }
footer ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: flex-end; }
footer li { margin-left: 20px; }

@media screen and (max-width: 700px) { /* スマホ向け既存スタイル */
  h1 { font-size: 40px; }
  h2 { margin-top: 60px; margin-bottom: 5px; font-size: 25px; }
  p { font-size: 12px; } /* スマホでの汎用pタグのフォントサイズ */
  ul { font-size: 12px; }
  /* #nomargin の汎用スマホスタイル (introセクション外で使われる場合など) */
  body #nomargin:not(.intro #nomargin):not(#HSA .indent p#nomargin) { /* 他の#nomarginと区別 */
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    text-align: center;
  }
  #contacttxt { /* スマホでの連絡先テキスト */
    margin-left: auto;
    margin-right: auto;
    font-size: 10px;
    justify-content: center;
  }
  main { margin: 0 auto; padding: 0 15px; }
  .container { margin-left: 20px; margin-right: 20px; padding:0; }
  .portfolio-works-list .container li { width: calc(100% - 20px); }
  .portfolio-works-list .container li img { margin-left: 0; margin-bottom: 5px; }
  .container img { /* 一般的な .container img スタイル */
    width: 100%;
    margin-bottom: 1.5%;
    margin-left: 1.5%;
  }
  .tab {
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 5px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab::-webkit-scrollbar { display: none; }
  .tab button.tablinks, .tab button {
    font-size: 13px;
    padding: 8px 8px;
    margin: 0 2px;
    white-space: normal;
  }
  .footer-privacy-link { font-size: 12px; margin-top: 10px; }

  /* HSA Entertainment ロゴをスマホ表示で中央揃えにするための修正 */
  #HSA .hsa-logo-img {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* HSAセクションのインデントブロックのモバイル用マージン調整 */
  #HSA .indent {
    margin-left: 20px;
    /* text-align: left; max-width: 600px; margin-right: auto; はデスクトップから継承 */
  }

  /* HSAセクションの説明文(p#nomargin)のスマホ表示での問題を修正 */
  #HSA .indent p#nomargin { /* p#nomarginなので詳細度が高い */
    text-align: left;
    margin-left: 4px; /* インデントブロック内での左マージン */
    margin-right: 0;
    font-size: 12px; /* スマホでのフォントサイズを明示 */
  }
}

.lang-switcher button+button { margin-left: 16px; }
li { margin-left: 40px; margin-right: 40px; }
.works { margin-top: 32px; }
.detail-description { margin-left: 30px; }
.detail-image { max-width: 80%; margin: auto; display: block; margin-top: 20px; }
.skillList { margin-left: 30px; }
.skillList ul { padding-left: 0; list-style: none; display: block; }
.skillList li { margin-left: 0; margin-bottom: 1em; }

.detailButton { display: block; margin: auto; border: none; cursor: pointer; margin-top: 60px; padding: 10px 20px; background-color: #ececec; }
.menubutton:hover { background-color: #f4f4f4; }
.menubutton2:hover { background-color: #f4f4f4; }

/* タブスタイル (works.html用) */
.tab {
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-left: 33px;
  margin-right: 33px;
  text-align: center;
}
.tab button {
  background-color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 16px;
}
.tab button:hover { background-color: #f4f4f4; }
.tab button:focus { outline: none; }
.tab button.active {
  background-color: #e0e0e0;
  border-bottom: 2px solid #333;
  font-weight: bold;
}
.tabcontent { display: none; }

.indent { margin-left: 50px; display: block; } /* グローバルなインデントスタイル */
.underline { text-decoration: underline; }

/* HSA Entertainment ロゴのサイズ調整と中央揃え */
#HSA { text-align: center; margin-bottom: 60px; }
/* 「HSA Entertainment」見出しを左寄せにする修正 */
#HSA h2 {
  text-align: left;
  margin-left: 30px;
  margin-right: 0;
}
/* 「HSA Entertainment」説明文を左寄せにする修正（デスクトップ） */
#HSA .indent {
  text-align: left;
  margin-left: 30px;
  margin-right: auto;
  display: block;
}
#HSA .container { justify-content: center; text-align: center; }
#HSA .container > div { text-align: center; width: 100%; }
.hsa-logo-img {
  max-width: 300px;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
@media screen and (min-width: 769px) {
  .hsa-logo-img {
    max-width: 380px;
  }
}
#HSA .container a.underline {
  display: inline-block;
  font-size: 1.0em;
  font-weight: bold;
  margin-top: 5px;
  padding: 5px 0;
}

/* フッターのプライバシーポリシーリンク中央揃え */
.footer-privacy-link {
  text-align: center;
  font-size: 13px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.footer-privacy-link small { font-size: inherit; }
/* .footer-privacy-link のスマホ表示スタイルは既に @media (max-width: 700px) 内にあります */

/* works.html の実績アイテムの表示制御 (script.js と連携) */
#works-list-items-container {}
.work-item-container { margin-bottom: 30px; }
.work-item-container:last-child { margin-bottom: 0; }
.work-item-container .work-item { margin-left: 0; margin-right: 0; width: 100%; }
/* style.css の中を探してください */