@charset "utf-8";

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

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

.catch-copy, .page-title {
    text-align: center; /* 文字を中央揃えに */
    width: 100%; /* 要素の幅を画面いっぱいに*/
    color: #fff; /* 文字色を白色に*/
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "serif";       
    /* フォントの種類の指定*/
    font-size: 6vw;  /* フォントをビューポートの6%*/
    flex-wrap: bold; /* 文字を太字*/
}

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

.heading02 span {
    border-bottom: 3px solid #000; /* 下部分の罫線を3px、実線　黒色に　*/
    padding-bottom: 4px;
}

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

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

.footer {                   /* class="footer" の要素のスタイル指定*/
    padding: 15px 10px;     /* 内余白を上下15px,左右10px*/
}

.copy {                     /* class="copy"の要素のスタイルを指定*/
    text-align: center;     /* 文字を中央揃えに*/
    font-size: 1.0rem;      /* 文字サイスを1remに*/
}