@charset "UTF-8";
.wrapper {
  max-width: 960px;               /* 最大の画面幅を960pxに */
  margin: 0 auto;                 /* 外余白を上下0、左右自動に */
  padding: 0 4%;                  /* 内余白を上下0、左右4%に */
}

.lead {
  padding: 50px 0;                /* 内余白を上下30px、左右0に */
  font-size: 22px;               /* 文字サイズを16pxに */
  line-height: 2.0;              /* 行の高さをフォントサイズの2.0倍に */
}

.catch-copy, .page-title {
  text-align: center;           /* 文字を中央揃えに */
  width: 100%;                  /* 要素の幅を画面いっぱいに */
  color: #F3F781;                  /* 文字色を白色に */
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
  font-size: 7vw;               /* フォントをビューポートの6%に */
  font-weight: bold;            /* 文字を太字に */
  position: absolute;           /* 要素の配置位置を絶対座標に指定 */
  top: 60%;                     /* 上部分を基準点から50%の位置に */
  left: 0;                      /* 左部分を基準点から0の位置に */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
}

.catch-copy span, .page-title span {
  border-bottom: 3px solid #F3F781; /* 下部分の罫線を 3px、実線、白色に */
  padding-bottom: 4px;           /* 下部分の余白を 4pxに */
}

@media print, screen and (min-width: 768px) {
  .lead {
    width: 800px;                 /* 要素幅を800pxに */
    margin: 0 auto;               /* 外余白を上下0、左右自動に */
    text-align: center;           /* 文字を中央揃えに */
  }
}

.img-link-wrap {
  margin-bottom: 40px;            /* 下外余白を40pxに */
}

@media print, screen and (min-width: 768px) {
  .img-link-wrap {
    display: -webkit-flex;        /* 子要素を並列に */
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 80px;          /* 外余白の下部を80pxに */
  }
  .img-link {
    width: 50%;                   /* 要素幅を50%に */
  }
}

.img-link a {
  display: block;                /* 表示形式をブロックに */
  position: relative;            /* 要素の配置を相対座標に指定 */
  z-index: 1;                    /* 要素を重ねて表示する際の優先順度を1に */
}

.img-link a .heading02 {
  color: #FBF8EF;                   /* 文字色を白色に */
  z-index: 2;                    /* 要素を重ねて表示する際の優先順度を2に */
    font-size: 30px;               /* 文字サイズを16pxに */
  position: absolute;            /* 要素の配置を絶対座標に */
  width: 100%;                   /* 要素の幅を100%に */
  top: 70%;                      /* 上部分を基準点から50%の位置に */
  left: 0;                       /* 左部分を基準点から0の位置に */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
  margin-bottom: 0;
}

.img-link a .heading02 span {
  border-color: #FBF8EF;            /* 罫線を白色に */
}

.img-link a img {
  display: block;                /* 表示形式をブロックに */
}
.lead-title {
  font-size: 30px;                /* 文字サイズを25pxに */
  margin-bottom: 10px;            /* 外余白の下部を10pxに */
  font-weight: bold;              /* 文字を太字に */
  line-height: 1.2;               /* 行の高さをフォントサイズの1.2倍に */
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
}

.lead-title-2 {
  font-size: 19px;                /* 文字サイズを25pxに */
  margin-bottom: 10px;            /* 外余白の下部を10pxに */
  font-weight: bold;              /* 文字を太字に */
  line-height: 1.2;               /* 行の高さをフォントサイズの1.2倍に */
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
}