@charset "utf-8";

/* Google Fonts / FontAwesome */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

:root{
  --base-color:#fff8f1;
  --base-inverse-color:#231815;
  --primary-color:#00a199;
  --primary-inverse-color:#fff;
  --content-space:2rem;
}

@media (min-width:900px){
  :root{ --content-space:4rem; }
}

@keyframes opa1 { from{opacity:0} to{opacity:1} }
@keyframes animation1 { from{left:-200px} to{left:0} }

/* ベース */
*{ box-sizing:border-box; }
html,body{ font-size:13px; }
@media (min-width:900px){
  html,body{ font-size:20px; }
}

body{
  margin:0;
  font-family:"fot-tsukuardgothic-std", sans-serif;
  font-weight:700;
  -webkit-text-size-adjust:none;
  background:var(--base-color);
  color:var(--base-inverse-color);
  line-height:2;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; vertical-align:middle; border:none; }
figure{ margin:0; }
nav,ul,li,ol{ margin:0; padding:0; }
nav ul{ list-style:none; }
iframe{ width:100%; }
section{ padding:var(--content-space) 0; }

a{ color:inherit; transition:.3s; }
a:hover{ filter:brightness(1.1); }

/* レイアウト */
#container{
  position:relative;
  animation:opa1 1s .4s both;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:0 var(--content-space);
}

header{ padding:0; }


#contents{ flex:1; }

/* 余白相殺（フッターなど） */
.margin-lr0{ margin:0 calc(-1 * var(--content-space)); }

/* ヒーロー画像 */
.hero img{
  width:100%;
  height:auto;
  display:block;
}

/* 見出し/テキスト */
main h2{ font-weight:500; font-size:1.8rem; }

.message{
  line-height:3;
  text-align:center;
}

/* ラベル */
.tag{
  display:block;
  width:fit-content;
  margin:0 auto 14px;
  padding:14px 40px;
  border-radius:999px;
  font-weight:700;
  text-align:center;
  line-height:1.4;
}

.tag-blue{ background:#4da0d9; color:#fff; }
.tag-orange{ background:#f4a417; color:#fff; }
.tag-green{ background:#00a199; color:#fff; }

@media (max-width:600px){
  .tag{ padding:10px 18px; }
}
@media (min-width:900px){
  .tag{ padding:14px 64px; }
}

/* 白カード */
.text-card{
  background:#fff;
  border:1px solid #000;
  border-radius:45px;
  padding:10px;
  max-width:640px;
  margin:0 auto 20px;
}
@media (max-width:600px){
  .text-card{
    max-width:80%;
  }
}

/* 各分野紹介（グリッド） */
.list-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
  justify-content:center;
}
@media (min-width:800px){
  .list-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:2rem;
  }
}
.list-grid .list{ position:relative; overflow:visible; }
.list-grid .list h4{ text-align:center; }

/* -----------------------------
   各分野アイコン（絶対ちぎれない版）
   枠はfigure、画像は内側で縮める
------------------------------ */
/* 影が外に出る親 */
.list-grid .list figure{
  position: relative;
  width:clamp(180px, 16vw, 350px);
  max-width:100%;
  aspect-ratio:1/1;
  margin:0 auto;

  overflow: visible;        /* ← ここが重要（影を切らない） */
}

/* 緑の影（ロゴっぽいズレ） */
.list-grid .list figure::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#00a199;
  transform: translate(4px, 4px);  /* 影のズレ量 */
  z-index:0;
}

/* 本体の白い円（切り抜き担当） */
.list-grid .list figure a{
  position:absolute;
  inset:0;
  display:block;

  border:1px solid #000;
  border-radius:50%;
  overflow:hidden;          /* ← 切り抜きはこっちでやる */
  background:#fff;

  z-index:1;                /* ← 緑影より上 */
}

/* 画像 */
.list-grid .list figure img{
  width:98%;
  height:98%;
  display:block;
  object-fit:contain;       /* ちぎれ防止 */
}
/* ----------------------------- */

/* ギャラリー（飛び先ページ） */
.gallery-list-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:24px;
}
@media (max-width:599px){
  .gallery-list-container{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:600px) and (max-width:899px){
  .gallery-list-container{ grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:900px){
  .gallery-list-container{ grid-template-columns:repeat(4, 1fr); }
}
.gallery-item{
  overflow:hidden;
  border-radius:10px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.1);
}
.gallery-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:.5s;
}
.gallery-item img:hover{
  transform:scale(1.1);
  filter:contrast(1.2);
}

/* フッター（←昔のやつに戻す） */
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*ブロック全体*/
footer{
  background:#e1e1e1;
  color:#231815;
  padding:var(--content-space);
}

/*フッター内のロゴ画像*/
footer .logo{ width:300px; }

/*ロゴやSNSアイコンが入ったブロック*/
footer div.footer1{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/*マップが入ったブロック*/
footer div.footer2{
  flex:1;
}

@media (min-width:700px){
  footer{
    display:flex;
    gap:2rem;
  }
  footer div.footer1{
    text-align:left;
    width:40%;
  }
  footer div.footer2{
    /*margin-bottom: 0; 下の余白をなくす*/
  }
}

/*SNSアイコン*/
.sns1{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.sns1 i{ font-size:30px; }

/*Google Map用*/
.iframe-box1{
  width:100%;
  height:0;
  padding-top:56.25% !important;
  position:relative;
  overflow:hidden;
}
.iframe-box1 iframe{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

/* 著作 */
.pr a{
  text-decoration:none;
  display:block;
  background:#555;
  color:#ccc;
  text-align:right;
  padding:.5rem 1rem;
  font-size:.8rem;
}
/* 著作部分のアイコン（Template-Partyの🪄みたいなやつ） */
.pr a::before{
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: 900;      /* ← ここ重要（Free Solid） */
  margin-right: 0.5em;
}

/* ハンバーガー / メニュー（テンプレ main.js が使う前提で残す） */
#menubar_hdr{
  display:none;
  position:fixed;
  z-index:101;
  cursor:pointer;
  right:0;
  top:0;
  width:70px;
  height:70px;
  background:#0e211f;
}
#menubar_hdr.ham{ background:#ff0000; }

#menubar_hdr span{
  position:absolute;
  left:18px;
  width:35px;
  height:2px;
  background:#fff;
  transition:.3s;
}
#menubar_hdr span:nth-of-type(1){ top:24px; }
#menubar_hdr span:nth-of-type(2){ top:34px; }
#menubar_hdr span:nth-of-type(3){ top:44px; }
#menubar_hdr.ham span:nth-of-type(1){ transform:translateY(10px) rotate(-45deg); }
#menubar_hdr.ham span:nth-of-type(2){ opacity:0; }
#menubar_hdr.ham span:nth-of-type(3){ transform:translateY(-10px) rotate(45deg); }

.small-screen #menubar_hdr{ display:flex; }

.small-screen #menubar{
  animation:animation1 .2s both;
  position:fixed;
  overflow:auto;
  z-index:100;
  right:0; top:0;
  width:70%;
  height:100%;
  padding:100px var(--content-space) 50px;
  background:var(--primary-color);
  color:var(--primary-inverse-color);
}
.small-screen #menubar{ display:none; }
.small-screen #menubar a{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid #fff;
  margin-bottom:1rem;
  padding:1rem 2rem;
}

/* PAGE TOP */
.pagetop a{
  display:block;
  text-decoration:none;
  text-align:center;
  z-index:99;
  position:fixed;
  right:20px;
  bottom:50px;
  font-size:1.5rem;
  background:var(--primary-color);
  color:var(--primary-inverse-color);
  width:60px;
  line-height:60px;
  border-radius:50%;
}

/* 便利 */
.c{ text-align:center !important; }

/* サムネイル説明文：スマホだけ1行に収める */
@media (max-width: 430px){
  #gallery .gallery-lead{
    font-size: 0.92rem !important;
    letter-spacing: -0.02em;
    white-space: nowrap;      /* 折り返し禁止 */
  }
}

/* GALLERY 見出しの上下マージンを狭くする */
#gallery h2{
  margin-top: 0;
  margin-bottom: 0em;
}

/* スマホ：飛んだ先ページのヘッダー画像を左右いっぱいに */
@media (max-width: 600px){
  header{
    margin-left: calc(-1 * var(--content-space));
    margin-right: calc(-1 * var(--content-space));
  }

  header img{
    width: 100%;
    display: block;
  }
}

/* =========================
   トップページ 見出しサイズ調整
   ========================= */

/* 東京家政大学 造形表現学科 卒業制作展 */
#top .tag{
  font-size: 0.95rem;   /* 今より少し小さく */
}

/* 開催日時・各分野紹介（色付き見出し） */
#top .tag-blue,
#top .tag-orange,
#top .tag-green{
  font-size: 1rem;
}

/* 見出し下の白カード内テキスト */
#top .text-card{
  font-size: 0.95rem;
}

/* 各分野紹介の見出し文字（アイコン下） */
#top .list-grid h4{
  font-size: 0.9rem;
}

@media (max-width: 600px){
  #top .tag{
    font-size: 0.95rem;
  }

  #top .tag-blue,
  #top .tag-orange,
  #top .tag-green{
    font-size: 1rem;
  }
}