@charset "utf-8";
/*
 * appruns.com 静的版
 * 旧 WordPress テーマ（dp-clarity-business）の表示を、実際の画面から測った値で再現している。
 * 768px 未満はスマホ用テーマ（mb-theme）の見た目、768px 以上は PC 用テーマの見た目に合わせる。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #000;
  background-color: #fff;
  /* 旧テーマと同じフォント指定（Webフォントは使っていなかった） */
  font-family: "Century Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

h1,
h2,
p,
dl,
dd,
address {
  margin: 0;
}

address {
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #000;
}

/* ---------- ヘッダー（スマホ: 上部固定・中央寄せ） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  background-color: #fff;
  border-top: 2px solid #00b0ba;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.24);
  text-align: center;
}

.h_group {
  padding-top: 15px;
}

.hd_title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.33px;
}

.hd_title a {
  color: #3c3c3c;
  text-decoration: none;
}

.caption {
  display: none;
}

/* ---------- メインビジュアル ---------- */
.hero {
  position: relative;
  /* 旧テーマは余白・高さを「画面の高さ」に対する割合で取っていた（スマホ: 余白 8%・最低 24%） */
  min-height: 24vh;
  padding: 8vh 10px;
  /* スマホ版は写真の上端 30px が固定ヘッダーの裏に潜り込む作りだった */
  margin-top: -30px;
  background: #00b0ba url("../images/28446684_s.jpg") center / cover no-repeat;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

/* 写真の上に重ねる暗い膜（旧テーマと同じ濃さ） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.44);
}

.hero-title {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- 事業概要 ---------- */
.business {
  margin-bottom: 30px;
  padding: 20px 6px;
  color: #000;
  text-align: center;
}

.business-title {
  margin: 12px 0 16px;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.business-title span::after {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  margin: 24px auto 0;
  background-color: #00b0ba;
}

.business-body {
  /* 見出しとの間は「見出しの下 16px ＋ 本文の上 20px」。余白どうしが重ならないよう padding で取る */
  padding-top: 20px;
}

.business-lead {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
}

.business-lead a {
  color: #000;
  font-weight: 400;
  text-decoration: underline;
}

.business-logo {
  width: 250px;
  margin-top: 40px;
  vertical-align: bottom;
}

/* ---------- 見出し（メッセージ・会社概要） ---------- */
.h2_front {
  margin: 20px 0 15px;
  padding: 4px 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.wrap_section {
  max-width: 940px;
  margin: auto;
}

/* ---------- メッセージ ---------- */
.section_message {
  margin-bottom: 40px;
}

.section_message .wrap_section {
  padding: 5px 30px 40px;
  border-radius: 5px;
  background-color: #fff;
}

/* ---------- 会社概要 ---------- */
.section_company {
  padding: 30px 0 60px;
  background-color: #f5fcfc;
}

.wrap_company {
  margin: 0 10px;
  padding: 20px 10px;
  border-radius: 5px;
  background-color: #fff;
}

.company-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.wrap_company address {
  margin-bottom: 10px;
  padding: 10px 0;
}

.dl_company {
  margin: 15px 0 30px;
}

.dl_company dt {
  padding: 6px 8px;
  border-bottom: 1px solid #b0b0b0;
}

.dl_company dd {
  padding: 8px 18px 12px;
}

/* ---------- フッター ---------- */
.footer {
  padding-top: 60px;
  background-color: #efefef;
  color: #545454;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.14);
  text-align: center;
}

.copyright {
  padding: 15px 10px;
  background-color: rgba(84, 84, 84, 0.1);
  font-size: 10px;
  line-height: 1.3;
}

.copyright a {
  color: #000;
  text-decoration: none;
}

.copyright small {
  font-size: 10px;
}

/* ========== 768px 以上（PC 用テーマの見た目） ========== */
@media screen and (min-width: 768px) {
  .sp_br {
    display: none;
  }

  .site-header {
    position: relative;
    display: flow-root; /* 子の余白が外へはみ出してヘッダーごと下がるのを防ぐ */
    height: 80px;
    padding: 0 30px;
    border-top: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
    text-align: left;
  }

  .h_group {
    display: flow-root;
    max-width: 300px;
    margin: 15px 15px 0 0;
    padding-top: 0;
    color: #3c3c3c;
  }

  .hd_title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 400;
  }

  .caption {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.33px;
  }

  .hero {
    /* PC は上 16%・下 6%・最低 22%（いずれも画面の高さに対する割合） */
    min-height: 22vh;
    margin-top: 0;
    padding: 16vh 10px 6vh;
    background-attachment: fixed;
  }

  .hero-title {
    font-size: 25px;
    font-weight: 400;
  }

  .business {
    margin: 40px 0;
    padding: 20px 0;
    color: #333; /* PC 版だけ文字色が少し薄い（旧テーマのとおり） */
  }

  .business-title,
  .business-body {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .business-title {
    /* 左右は上の auto（中央寄せ）を残すため、上下だけ指定する */
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 24px;
  }

  .business-lead {
    margin-bottom: 12px;
  }

  .section_message {
    margin-bottom: 0;
    padding: 140px 0;
    background: url("../images/28465787_s.jpg") no-repeat;
    background-size: cover;
  }

  .wrap_company {
    margin: 0;
    padding: 20px 40px;
  }

  .dl_company {
    display: flex;
    flex-wrap: wrap;
  }

  .dl_company dt {
    width: 15%;
    border-bottom: none;
  }

  .dl_company dd {
    width: 85%;
  }

  .copyright {
    padding: 30px 20px;
  }
}