@charset "UTF-8";

.header {
  position: relative;           /* 要素の配置を相対座標に指定 */
  width: 100%;                  /* 要素の幅を100% */
  height: 400px;                    /* 要素の高さを0% */
  padding-bottom: 0;         /* 内余白の下部分を100% */
  background: url(../img/top/hero_top3.jpg) no-repeat center center/cover; /* 背景画像を領域を埋めるように、中央に配置 */
}

.logo {
  width: 160px;                  /* 要素の幅を60pxに */
  padding: 0px;                /* 要素の内余白を10pxに */
  background: ;             /* 背景色を白色に */
  position: absolute;           /* 要素の配置を絶対座標に指定 */
  top: 10px;                       /* 上部分を基準点から0の位置に */
  left: 10px;                   /* 左部分を基準点から20pxの位置に */
}

.logo2 {
  width: 160px;                  /* 要素の幅を60pxに */
  padding: 0px;                /* 要素の内余白を10pxに */
  background: ;             /* 背景色を白色に */
  position: absolute;           /* 要素の配置を絶対座標に指定 */
  top: 10px;                       /* 上部分を基準点から0の位置に */
  right: 10px;                   /* 左部分を基準点から20pxの位置に */
}


.catch-copy, .page-title {
  text-align: center;           /* 文字を中央揃えに */
  width: 100%;                  /* 要素の幅を画面いっぱいに */
  color: #ffffff;                  /* 文字色を白色に */


  text-shadow: 0px 0px 5px #ffffff , 
        0px 0px 20px #c89932, 
        0px 0px 40px #ffffe0, 
        0px 0px 60px #ffffed,
        0px 0px 80px #ffff7f; 


  font-family: "font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; /* フォントの種類を指定 */
  font-size: 6vw;               /* フォントをビューポートの6%に */
  font-weight: ;            /* 文字を太字に */
  position: absolute;           /* 要素の配置位置を絶対座標に指定 */
  top: 75%;                     /* 上部分を基準点からxx50%の位置に */
  left: 0;                      /* 左部分を基準点から0の位置に */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
}

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


@media print, screen and (min-width: 768px) {
.catch-copy, .page-title {
    font-size: 40px;             /* 文字サイズを50pxに */
  }
}

.heading02 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 24px;               /* 文字サイズを16pxに */
  font-weight: normal;             /* 文字を太字に */
  color: #000;                   /* 文字色を黒に */
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
  margin-bottom: 30px;           /* 下部分の余白を 10pxに  */
}

.heading03 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 14px;               /* 文字サイズを16pxに */
  color: #000;                   /* 文字色を黒に */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}  /* フォントの種類を指定 */
  margin-bottom: 30px;           /* 下部分の余白を 10pxに  */
}


.lead {
  font-size: 16px;               /* 文字サイズを16pxに */
  line-height: 2.0;              /* 行の高さをフォントサイズの2.0倍に */
}

.btn {
  display: block;                /* 表示形式をブロックに */
  text-align: center;            /* 文字を中央揃えに */
  width: 200px;                  /* 要素の横幅を200pxに */
  margin: 0 auto 20px;           /* 要素の外余白を上0、左右自動、下60pxに */
  background-color: #ffffcc;
  border: 2px solid #000;        /* 下部分の罫線を 2px、実線、黒色に */
  text-decoration: none;         /* 文字の装飾を無しに */
  padding: 10px 0 12px;          /* 要素の内余白を上10px、左右0、下10pxに */
  font-weight: ;             /* 文字を太字に */
}


.btn:hover { 
  background-color: #ff003f; 
  color: #fff;
  }

@media print, screen and (min-width: 768px) {
  .btn {
    width: 400px;                /* 要素の横幅を400pxに */
    padding: 20px 0;             /* 要素の内余白を上下20、左右0に */
    font-size: 14px;             /* 文字サイズを14pxに */
  }
}

.footer {
  padding: 15px 10px;            /* 内余白を上下15px、左右10pxに */
}


.copy {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 1.0rem;             /* 文字サイズを1remに */
}

.globalnav {
  position: relative;            /* 表示位置を相対座標に */
  padding: 0 10px;               /* 内余白を上下0、左右10pxに */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
}

.globalnav li {
  display: table-cell;           /* 表示形式をテーブルセル形式に */
  text-align: center;            /* 文字を中央揃えに */
}

.globalnav li:not(:first-child) {
  border-left: 1px solid #000;   /* 罫線左を1px、実線、黒色に */
}

.globalnav li a {
  font-size: 1.3rem;             /* 文字サイズを1.3remに */
  display: block;                /* 表示形式をブロック形式に */
  background: #fffff9;              /* 背景色を白色に */
  text-decoration: none;         /* 文字装飾を無しに */
  padding: 15px 0;               /* 内余白を上下15px、左右0px */
}

.globalnav li a:hover {
  opacity: 1;                    /* 不透明度を1に */
}

  .globalnav li a:hover {
    background: #ffaf60;            /* 背景色を黒色に */
    color: #fff;                 /* 文字色を白色に */
  }


.globalnav-list {
  width: 100%;                   /* 要素の幅を100%に */
  max-width: 1920px;              /* 要素の最大幅を800pxに */
  margin: 0 auto;                /* 外余白の上下を0、左右を自動に */
  display: table;                /* 表示形式をテーブル形式に */
  table-layout: fixed;           /* テーブルレイアウトを固定に */
  border: 0.5px  solid #000;        /* 罫線を1px、実線、黒色に */
}

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

.wrapper2 {
  max-width: ;               /* 最大の画面幅を pxに */
  margin: 0 auto;                 /* 外余白を上下0、左右自動に */
  padding: 0 ;                  /* 内余白を上下0、左右 %に */
}

.lead {
  padding: 10px 0;                /* 内余白を上下30px、左右0に */
}

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

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

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

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

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

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


.img-link a img {
  display: block;                /* 表示形式をブロックに */
}



.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}