@charset "UTF-8";

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


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

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


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


@media print, screen and (min-width: 768px) {
   .header {
     height: 400px;            /* 要素の高さを400pxに */
     padding-bottom: 0;        /* 内余白の下部を0pxに */
   }
}

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

@media print, screen and (min-width: 768px) {
  .footer {
    padding: 30px 10px;          /* 内余白を上下30px、左右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: #ffffcc;              /* 背景色を白色に */
  text-decoration: none;         /* 文字装飾を無しに */
  padding: 15px 0;               /* 内余白を上下15px、左右0px */
}

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

@media print, screen and (min-width: 768px) {
  .globalnav li a:hover {
    background: #ff6565;            /* 背景色を黒色に */
    color: #fff;                 /* 文字色を白色に */
  }
}

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

.menu-category {
  margin-bottom: 20px;            /* 外余白の下部を60pxに */
}

@media print, screen and (min-width: 768px) {
  .menu-category {
    margin: 0 -30px 60px;         /* 外余白の上0, 左右-30px、下60pxに */
  }
}






@media print, screen and (min-width: 768px) {
  .section-access {
    padding: 60px 0 100px;         /* 内余白を上60px、左右0、下100pxに */
    max-width: 700px;              /* 最大幅を700pxに */
    margin: 0 auto;                /* 外余白を上下0、左右自動に */
  }
}

.access-img {
  margin-bottom: 15px;            /* 外余白の下部を15pxに */
}

@media print, screen and (min-width: 768px) {
  .access-img {
    width: 50%;                   /* 要素の幅を50%に */
    max-width: 300px;             /* 要素の最大幅を300pxに */
    padding-right: 20px;          /* 内余白の右部を20pxに */
  }
}

.address {
  margin-bottom: 20px;            /* 外余白の下部を20pxに */
}

.address dt {
  font-size: 12px;                /* 文字サイズを12pxに */
  margin-bottom: 10px;            /* 外余白の下部を10pxに */
}

.access-name {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
  font-size: 20px;             /* 文字サイズを20pxに */
  font-weight: bold;           /* 文字を太字に */
  margin-bottom: 15px;         /* 外余白の下部を15pxに */
}

.address-text {
  font-size: 14px;             /* 文字サイズを14pxに */
  line-height: 1.67;           /* 行の高さをフォントサイズの1.67倍に */
  margin-bottom: 10px;         /* 外余白の下部を10pxに */
}

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

@media print, screen and (min-width: 768px) {
  .access-block {
    display: -webkit-flex;        /* 子要素を並列に */
    display: -ms-flexbox;
    display: flex;
    justify-content: center;      /* 並列になった要素の幅を均等に */
    margin-bottom: 40px;          /* 外余白の下部を40pxに */
  }
}

.map {
  position: relative;          /* 要素の配置を相対座標に指定 */
  width: 100%;                 /* 要素の幅を100%に */
  height: 0;                   /* 要素の高さ0に */
  padding-bottom: 75%;         /* 内余白の下部を75%に */
}

.map iframe {
  width: 100%;                 /* 要素の幅を100%に */
  height: 100%;                /* 要素の高さ0に */
  position: absolute;          /* 要素の配置を絶対座標に指定 */
  top: 0;                      /* 上部分を基準点から0の位置に */
  left: 0;                     /* 左部分を基準点から0の位置に */
  bottom: 0;                   /* 下部分を基準点から0の位置に */
  right: 0;                    /* 右部分を基準点から0の位置に */
}