@charset "UTF-8";


/* =====================================================
 * トップのメイン画像
 * ===================================================== */
.main_image {
  position: relative;
  width: 100%;
  height: auto;
}


/* =====================================================
 * 各カラム 背景画像
 * ===================================================== */
.inner-bg { /* 共通 */
  width: 100%;
  background-size: contain; /* 画像の縦横比を保つ */
  background-repeat: no-repeat; /* 画像が繰り返すのを防ぐ */
  background-size: cover;
  background-position: center;
}


.inner-bg::before { /* 共通 */
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


.bg-01 { /* 白半透明の背景画像 */
  background-image: url(../img/visual-2-1920x785.png);
}


.bg-01::before {
  background-color: rgba(255,255,255,0.7); /* opacityだとロゴまで半透明になってしまう */
}


.bg-02 { /* 黒半透明の背景画像 */
  background-image: url(../img/visual-3-1920x785.png);
}


.bg-02::before {
  background-color: rgba(0,0,0,0.7); /* opacityだとロゴまで半透明になってしまう */
}


/* =====================================================
 * PR
* ===================================================== */
.pr-wrap {
  position: relative;
  width: 100%;
}


.pr-left {
  position: relative;
  margin-bottom: 30px;
}


.pr-right {
  position: relative;
  padding: 10px;
  border: 1px solid #c7c7c7;
}


/* tablet・PC */
@media screen AND (min-width:768.1px) {
  .pr-wrap {
    display: flex;
    align-items: center;
  }

  .pr-left {
    width: 30%;
  }

  .pr-right {
    width: 70%;
    margin-bottom: 0;
  }
}


/* =====================================================
 * 事業PRコンテンツ
* ===================================================== */


/* 上部のPR文 */
.pr-info {
  margin: 50px 0 0;
  font-size: 120%;
  font-weight: bold;
}


/* 全体枠 */
.pr-wrap {
  position: relative;
  margin-top: 50px;
}


.pr-circle {
  padding: 3px 10px;
  text-align: center;
  background: #008080;
  border-radius: 5px;
}


.pr-circle p {
  color: #fff;
  white-space: nowrap;
  font-size: 85%;
}


.pr-text {
  margin: 0;
}


.text_01 {
  font-family: 'ＭＳ 明朝', monospace;
  font-size: 120%;
  font-weight: 800;
  color: navy;
}


.pr-text-inner {
  display: block;
  text-align: center;
}


.pr-text-inner img {
  width: 100%;
}


/* -------------------------
 * “ご挨拶”内のコンテンツ
 * ------------------------- */
.wrap_items { /* 共通 */
  position: relative;
  width: 100%;
  margin: 50px 0;
  padding: 20px 40px;
  border-radius: 20px;
  background-color: #f0f8ff;
}


.ttl { /* コンテンツ内のタイトル */
  position: relative;
  margin: 0 0 20px;
  border-left: 5px solid navy;
  padding-left: 10px;
  color: #000000;
  font-size: 150%;
  font-weight: bold;
}


.txt { /* タイトル下のテキスト */
  margin: 0;
  line-height: 180%;
}


.arrow { /* 矢印 */
  display: block;
  margin: 30px 0 0;
  text-align: right;
}


a.arrow {
  text-decoration: none;
}


.arrow::before {
  font-family: "Font Awesome 6 Free";
  content: "\f138";
  font-weight: 900;
  margin-right: 0.5em;
}


/* =====================================================
 * サービス一覧（画像3カラム）
* ===================================================== */
.grid-wrap {
  position: relative;
  width: 100%;
}


.grid {
  width: 100%;
  list-style-type: none;
  font-size: 0;
}


.grid li {
  width: 100%;
  padding: 50px 30px;
}


.grid li a { /* 枠全体をリンクにする */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}


.grid li a:hover {
  background-color: rgba(255,255,255,0.3); /* opacityだと文字まで半透明になってしまう */
}


/* 背景画像の共通スタイル */
.img-base {
  position: relative;
  width: 100%;
  object-fit: cover;
  background-size: contain; /* 画像の縦横比を保つ */
  background-repeat: no-repeat; /* 画像が繰り返すのを防ぐ */
  background-size: cover;
  background-position: center;
}


.img-base::before { /* 共通半透明 */
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7); /* opacityだとロゴまで半透明になってしまう */
  pointer-events: none; /* 疑似要素でクリックできなくなった場合の対処法 */
}


.img-01 { /* 背景画像01 */
  background-image: url(../img/c_01.jpg);
}


.img-02 { /* 背景画像02 */
  background-image: url(../img/c_02.jpg);
}


.img-03 { /* 背景画像03 */
  background-image: url(../img/c_03.jpg);
}


/* tablet・PC */
@media screen AND (min-width:768.1px) {
  .grid  {
    display: flex;
    justify-content: space-between;　/* <li>を両端に配置 */
    align-items: stretch; /* 初期値なので、指定しなくてもstretchとなる */
  }
  .grid li {
    width : calc(100% / 3);
    padding: 50px 30px;
  }
}


/* -------------------------
 * 画像上のコンテンツ
 * ------------------------- */
.cat { /* 共通部分 */
  position: relative;
  width: 100%;
}


.cat h2 {
  font-size: 110%;
  color: #fff;
}


.cat > div {
  margin: 20px 0 0;
  color: #fff;
}


.cat-info {
  text-align: right;
  margin: 20px 0 0;
  font-size: 85%;
  color: #fff;
}


.cat-info::before {
  font-family: "Font Awesome 6 Free";
  content: "\f138";
  font-weight: 900;
  margin-right: 0.5em;
  color: #fff;
}