@charset "UTF-8";

/* ============================================================
   共通部品の CSS。markup は common/components.php の関数から出す。
   common_head.php が common_general.css の直後に全ページで読む。

   ここに置く条件: (1) 3 ページ以上で同じ見た目 (2) クラス名を持つ
   (3) 見た目が違うものに同じ名前を付けない。
   ============================================================ */


/* --- 矢印（.kochira）。.detail1Button と .frameButton の中で使う --- */

.kochira {
  position: relative;
  margin-left: 7px;
  width: 5px;
  height: 5px;
  color: var(--booth);
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
}

.kochira.kochira::before,
.kochira.kochira::after {
  content: "";
  display: block;
  width: 7px;
  height: 1px;
  background-color: var(--themeocean);
  position: absolute;
  left: 0px;
}

.kochira::before {
  transform: rotate(45deg);
  top: 6px;
}

.kochira::after {
  transform: rotate(-45deg);
  bottom: 6px;
}

.kochira.kochira:hover::before,
.kochira.kochira:hover::after,
.detail1Button:hover .kochira::before,
.detail1Button:hover .kochira::after {
  background-color: var(--white);
}


/* --- 枠付きボタン（.detail1Button）。detail1_button() --- */

.detail1Button {
  width: 100%;
  padding: 5px 0;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  border: solid 2px var(--themeocean);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail1Button p {
  text-align: center;
  font-family: "Kiwi Maru", sans;
}

.detail1Button a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.detail1Button:hover {
  background: var(--themeocean);
}

.detail1Button:hover>p {
  color: var(--themewhite);
}


/* --- 枠線だけの角ボタン（.frameButton）。frame_button() ---
   .detail1Button とはまったく別のあしらい（旧 hidaka.css の .moreButton）。
   矢印は共通の .kochira を 13x2px・ボタン色に変える。 */

.frameButton {
  --btn-color: var(--booth);
  /* boothは黄色で視認性が低いため、テキストのみ暗くする */
  --btn-text-color: color-mix(in srgb, var(--booth) 40%, black);
  font-family: "Zen Kaku Gothic New";
  color: var(--btn-text-color);
  border: 1.5px solid var(--btn-color);
  border-radius: 0px;
  background: color-mix(in srgb, var(--btn-color) 10%, transparent);
  box-shadow: 2px 2px 0px #ffffff00;
  position: relative;
  transition: all 0.3s ease 0s;
  padding: 10px 30px;
}

.frameButton_sympo {
  --btn-color: var(--sympo);
  --btn-text-color: var(--sympo);
}

.frameButton_decoration {
  --btn-color: var(--decoration);
  --btn-text-color: var(--decoration);
}

.frameButton:hover {
  background: color-mix(in srgb, var(--btn-color) 25%, transparent);
  border-color: var(--btn-color);
  transition: 0.3s;
}

/* frameButtonを含むdivは .linkwrap div:hover の opacity:0.5 を上書き */
.linkwrap div:has(> .frameButton):hover {
  opacity: 1;
}

.frameButton .kochira {
  margin-left: 8px;
  width: 5px;
  height: 5px;
  font-size: 23px;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

.frameButton .kochira::before,
.frameButton .kochira::after {
  content: "";
  display: block;
  width: 13px;
  height: 2px;
  background-color: var(--btn-color);
  position: absolute;
}

/* ホバーしても矢印をボタン色のままにする */
.frameButton:hover .kochira::before,
.frameButton:hover .kochira::after,
.frameButton .kochira:hover::before,
.frameButton .kochira:hover::after {
  background-color: var(--btn-color);
}

.frameButton .kochira::before {
  transform: rotate(45deg);
  top: -1.4px;
}

.frameButton .kochira::after {
  transform: rotate(-45deg);
  bottom: -4px;
}


/* --- 企画形態別の h2 下線。h2_category() ---
   線の本体（幅・太さ・位置）は common_general.css の h2:after が持つので、
   ここではグラデーションの色だけを差し替える。 */

.h2_booth::after      { border-image: linear-gradient(to right bottom, var(--booth), var(--booth), #deb80980, transparent) 1; }
.h2_field::after      { border-image: linear-gradient(to right bottom, var(--field), var(--field), #e08e3680, transparent) 1; }
.h2_indoor::after     { border-image: linear-gradient(to right bottom, var(--indoor), var(--indoor), #415c7080, transparent) 1; }
.h2_stage::after      { border-image: linear-gradient(to right bottom, var(--stage), var(--stage), #72bfc480, transparent) 1; }
.h2_sympo::after      { border-image: linear-gradient(to right bottom, var(--sympo), var(--sympo), #3f997080, transparent) 1; }
.h2_decoration::after { border-image: linear-gradient(to right bottom, var(--decoration), var(--decoration), #cf4f4f80, transparent) 1; }


/* --- ページ冒頭の灰色の箱（.detail1Top / .detail1Top_left） ---
   .detail1Top      中央揃え。detail1_top_title() / detail1_top_contact()。
                    faq / contact / sitepolicy / 企画形態別 index / application/index / comingsoon
   .detail1Top_left 左揃え。detail1_top_check()。category / procedure / consultation
   2 つは別物（旧 page-form.css と旧 page-guide.css が同じ名前で違う値を持っていた）。 */

.detail1Top,
.detail1Top_left {
  margin: 0 auto;
  background-color: #f2f2f2;
  position: relative;
  padding: 20px 20px 20px 20px;
  margin-top: 3%;
}

.detail1Top {
  text-align: center;
}

.detail1Top div {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail1Top_left div {
  text-align: center;
}

.detail1TopTitle {
  font-size: 20px;
  background: linear-gradient(transparent 90%, var(--themeocean) 80%);
  display: inline-block;
}

/* detail1_top_contact() の中身 */
.in-trouble {
  text-align: center;
}

.link {
  text-align: center;
  margin-top: 2%;
}


/* --- ページ見出し（.pagetitle / .pageTitle）。page_title() ---
   綴りが 2 つあり CSS が別。.pagetitle は pickup 系・committee、
   .pageTitle は category / procedure / consultation / ikkyosai（画像の高さは各ページの CSS）。 */

.pagetitle {
  position: relative;
  text-align: center;
}

.pagetitle img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.pagetitle h1,
.pageTitle h1 {
  font-family: "Kiwi Maru", sans;
  position: absolute;
  display: inline-block;
  z-index: 20;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px;
  background-color: rgba(140, 187, 184, 0.9);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (min-width: 1024px) {

  .pagetitle h1,
  .pageTitle h1 {
    font-size: 22px;
  }

  .pagetitle img {
    height: 180px;
    display: block;
  }
}