@charset "UTF-8";

body {
    font-family: "Montserrat", "Josefin Sans", "メイリオ",
        "Hiragino Kaku Gothic Pro", sans-serif;

    margin: 0;
}

p {
    line-height: 1.8;
}

/* 基本 */
.post * {
    margin: 0;
}

.post img {
    width: 100%;
    height: auto;

    vertical-align: bottom;
}

.post-series img {
    max-width: 30px;
}

.shop img {
    max-width: 100px;
}

/* グリッド */
.post {
    display: -ms-grid;
    display: grid;

    --side: 20px;
    -ms-grid-columns: var(--side) 1fr 50px 1fr var(--side);
    grid-template-columns: var(--side) 1fr 50px 1fr var(--side);
    -ms-grid-rows: auto 30px auto 40px auto 30px auto;
    grid-template-rows: auto 30px auto 40px auto 30px auto;
}

.post > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.post > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.post > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.post > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}

.post > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.post > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.post > *:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.post > *:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
}

.post > *:nth-child(9) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
}

.post > *:nth-child(10) {
    -ms-grid-row: 2;
    -ms-grid-column: 5;
}

.post > *:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.post > *:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.post > *:nth-child(13) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.post > *:nth-child(14) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
}

.post > *:nth-child(15) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
}

.post > *:nth-child(16) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}

.post > *:nth-child(17) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}

.post > *:nth-child(18) {
    -ms-grid-row: 4;
    -ms-grid-column: 3;
}

.post > *:nth-child(19) {
    -ms-grid-row: 4;
    -ms-grid-column: 4;
}

.post > *:nth-child(20) {
    -ms-grid-row: 4;
    -ms-grid-column: 5;
}

.post > *:nth-child(21) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.post > *:nth-child(22) {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
}

.post > *:nth-child(23) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

.post > *:nth-child(24) {
    -ms-grid-row: 5;
    -ms-grid-column: 4;
}

.post > *:nth-child(25) {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
}

.post > *:nth-child(26) {
    -ms-grid-row: 6;
    -ms-grid-column: 1;
}

.post > *:nth-child(27) {
    -ms-grid-row: 6;
    -ms-grid-column: 2;
}

.post > *:nth-child(28) {
    -ms-grid-row: 6;
    -ms-grid-column: 3;
}

.post > *:nth-child(29) {
    -ms-grid-row: 6;
    -ms-grid-column: 4;
}

.post > *:nth-child(30) {
    -ms-grid-row: 6;
    -ms-grid-column: 5;
}

.post > *:nth-child(31) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}

.post > *:nth-child(32) {
    -ms-grid-row: 7;
    -ms-grid-column: 2;
}

.post > *:nth-child(33) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
}

.post > *:nth-child(34) {
    -ms-grid-row: 7;
    -ms-grid-column: 4;
}

.post > *:nth-child(35) {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
}

/* ヘッダー */
.post-head {
    /* ヘッダーのグリッド */
    display: -ms-grid;
    display: grid;

    grid-column: 2 / -2;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-columns: 75px 24px 1fr 24px 140px;
    grid-template-columns: 75px 1fr 140px;
    -ms-grid-rows: 45px 12px auto 12px auto 12px auto;
    grid-template-rows: 45px repeat(3, auto);
    grid-column-gap: 24px;
    grid-row-gap: 12px;
}

.post-head > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.post-head > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.post-head > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.post-head > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.post-head > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.post-head > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
}

.post-head > *:nth-child(7) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.post-head > *:nth-child(8) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

.post-head > *:nth-child(9) {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
}

.post-head > *:nth-child(10) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}

.post-head > *:nth-child(11) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
}

.post-head > *:nth-child(12) {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
}

/* ヘッダー: タイトル */
.post-title {
    font-family: "Mplus 1p", sans-serif;
    /*font-size: 35px;*/
    font-weight: 900;
    line-height: 1.2;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 3;
    grid-row: 3;
}

/* ヘッダー: リード文 */
.post-lead {
    font-size: 13px;
    line-height: 1.8;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 4;
    grid-row: 4;
}

/* ヘッダー: シリーズ名 */
.post-series {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 700;

    display: -ms-grid;
    display: grid;

    margin-bottom: -12px;

    text-align: center;

    color: #fff;
    background-color: #000;

    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1 / 4;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    grid-row-gap: 8px;
}

/* ヘッダー: 日付 */
.post-date {
    /*font-family: "Source Sans Pro", sans-serif;*/
    font-size: 14px;

    padding: 3px 0;

    text-align: center;

    color: #fff;
    background-color: #222;

    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
    align-self: end;
}

/* ヘッダー： メニューの基本設定 */
.post-head ol,
.post-head ul {
    display: -ms-grid;
    display: grid;

    margin: 0;
    padding: 0;

    list-style: none;

    grid-auto-flow: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

.post-head a,
.post-head a {
    text-decoration: none;

    color: #000;
}

/* ヘッダー: パンくずリスト */
.post-bread {
    font-size: 10px;
    line-height: 2;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
    align-self: end;
}

.post-bread li:not(:last-child)::after {
    margin: 0 5px;

    content: ">";

    color: #aaa;
}

/* ヘッダー: カテゴリー */
.post-category {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
}

.post-category ul {
    grid-column-gap: 5px;
}

.post-category a {
    font-size: 10px;

    display: block;

    padding: 3px 10px;

    border-radius: 5px;
    background-color: #ccc;
}

/* ヘッダー: SNSメニュー */
.post-sns {
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 3;
    grid-row: 3;
}

.post-sns ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.post-sns a {
    font-size: 14px;
    line-height: 35px;

    display: block;

    width: 40px;

    text-align: center;

    color: #fff;
    border-radius: 5px;
}

.post-sns li:nth-child(1) a {
    background-color: #55acee;
}

.post-sns li:nth-child(2) a {
    background-color: #3b5998;
}

.post-sns li:nth-child(3) a {
    overflow: hidden;
    /*はみ出た部分を隠す*/
    /*background-color: #dd4b39;*/

    background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    /*グラデーション①*/
}

/* ヘッダー： 区切り線 */
.post-head::before {
    height: 2px;
    margin: 0 calc(var(--side) * -1) -4px;

    content: "";

    border-top: solid 4px #222;
    border-bottom: solid 2px #222;

    grid-column: 1 / -1;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
    align-self: end;
}

/* ヘッダー： 装飾画像 */
.post-head::after {
    width: 80%;

    content: url("../img/old/gourmet.svg");

    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-column-align: center;
    justify-self: center;
    -ms-grid-row-align: center;
    align-self: center;
}

/* セクション（共通） */
.sec h2 {
    /*font-family: "Mplus 1p", sans-serif;*/
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.sec .spot {
    /*font-family: "Josefin Sans", "Source Sans Pro", sans-serif;*/
    font-size: 16px;
    font-weight: 700;
    line-height: 5em;

    display: block;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 5em;
    height: 5em;

    text-align: center;

    color: white;
    border: solid 1px #aaa;
    border-radius: 50%;
    text-shadow: 2px 2px 2px black;
}

.sec .num {
    /*font-family: "Source Sans Pro", sans-serif;*/
    font-size: 78px;
    font-weight: 300;
    line-height: 1;
}

.sec p {
    font-size: 14px;

    text-align: justify;
    text-justify: inter-ideograph;
}

/* セクション01 */
.sec01 {
    /* セクション01のグリッド */
    display: -ms-grid;
    display: grid;

    grid-column: 2 / -2;
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-columns: 50% 25px 1fr;
    grid-template-columns: 50% 1fr;
    -ms-grid-rows: auto 15px 1fr 15px auto;
    grid-template-rows: auto 1fr auto;
    grid-column-gap: 25px;
    grid-row-gap: 15px;
}

.sec01 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec01 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.sec01 > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.sec01 > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.sec01 > *:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.sec01 > *:nth-child(6) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

/* セクション01: 小見出し */
.sec01 h2 {
    z-index: 1;
    /* 小見出しのグリッド */

    display: -ms-grid;
    display: grid;

    margin-left: -70px;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-columns: auto auto 1fr;
    grid-template-columns: auto auto 1fr;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto auto;
    grid-row-gap: 10px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}

.sec01 h2 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec01 h2 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.sec01 h2 > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.sec01 h2 > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.sec01 h2 > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.sec01 h2 > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.sec01 h2::after {
    display: block;

    content: "";
    /*border: solid 4px gold;*/

    border: solid 5px;
    -o-border-image: -o-linear-gradient(left,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;
    border-image: -webkit-gradient(linear,
            left top,
            right top,
            from(rgba(0, 0, 0, 0)),
            to(rgba(0, 25, 255, 1))) 1;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 25, 255, 1)) 1;

    grid-column: 1 / -1;
}

.sec01 .spot {
    margin-top: -8px;

    -ms-flex-item-align: start;
    -ms-grid-row-align: start;
    align-self: start;
}

.sec01 .num {
    margin-right: 5px;
    margin-bottom: -5px;
}

/* セクション01: 画像 */
.sec01 figure {
    -ms-grid-column: 1;
    grid-column: 1;
    grid-row: 1 / -1;
}

.sec01 figure img {
    height: 100%;

    -o-object-fit: cover;
    object-fit: cover;
}

/* セクション01: 文章 */
.sec01 p {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
}

/* セクション01: ショップ情報 */
.sec01 .shop {
    -webkit-box-shadow: 10px 10px 0 #c167ff;
    box-shadow: 10px 10px 0 #c167ff;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 3;
    grid-row: 3;
}

/* セクション02 */
.sec02 {
    /* セクション02のグリッド */
    display: -ms-grid;
    display: grid;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-columns: 4fr 15px 5fr;
    grid-template-columns: 4fr 5fr;
    -ms-grid-rows: auto 15px 1fr 15px auto 15px auto;
    grid-template-rows: auto 1fr auto auto;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.sec02 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec02 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.sec02 > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.sec02 > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.sec02 > *:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.sec02 > *:nth-child(6) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

.sec02 > *:nth-child(7) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}

.sec02 > *:nth-child(8) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
}

/* セクション02: 小見出し */
.sec02 h2 {
    /* 小見出しのグリッド */
    display: -ms-grid;
    display: grid;

    grid-column: 1 / -1;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-columns: auto auto auto 1fr;
    grid-template-columns: auto auto auto 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}

.sec02 h2 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec02 h2 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.sec02 h2 > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.sec02 h2 > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}

.sec02 h2::after {
    z-index: 1;

    display: block;

    margin-right: 5px;
    margin-bottom: -45px;

    content: "";
    /*border: solid 4px gold;*/

    border: solid 5px;
    -o-border-image: -o-linear-gradient(top,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;
    border-image: -webkit-gradient(linear,
            left top,
            left bottom,
            from(rgba(0, 0, 0, 0)),
            to(rgba(0, 25, 255, 1))) 1;
    border-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;

    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: stretch;
    align-self: stretch;
}

.sec02 .spot {
    z-index: 1;
    /*margin-right: -10px;*/

    margin-right: 5px;
    margin-bottom: -20px;
    margin-left: -20px;
}

.sec02 .num {
    margin-right: 5px;
    margin-bottom: -5px;
}

/* セクション02: 画像01 */
.sec02 .fig01 {
    margin-bottom: 40px;

    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / 4;
}

.sec02 .fig01 img {
    height: 100%;

    -o-object-fit: cover;
    object-fit: cover;
}

/* セクション02: 画像02 */
.sec02 .fig02 {
    margin-left: -50px;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 3;
    grid-row: 3;
}

/* セクション02: 文章 */
.sec02 p {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
}

/* セクション02: ショップ情報 */
.sec02 .shop {
    -webkit-box-shadow: 10px 10px 0 #c167ff;
    box-shadow: 10px 10px 0 #c167ff;

    grid-column: 1 / -1;
    -ms-grid-row: 4;
    grid-row: 4;
}

/* セクション03 */
.sec03 {
    /* セクション03のグリッド */
    display: -ms-grid;
    display: grid;

    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 15px auto 15px 1fr 15px auto;
    grid-template-rows: auto auto 1fr auto;
    grid-row-gap: 15px;
}

.sec03 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec03 > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.sec03 > *:nth-child(3) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.sec03 > *:nth-child(4) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}

/* セクション03: 小見出し */
.sec03 h2 {
    /* 小見出しのグリッド */
    display: -ms-grid;
    display: grid;

    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-columns: auto auto 1fr auto;
    grid-template-columns: auto auto 1fr auto;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto auto;
    grid-row-gap: 10px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}

.sec03 h2 > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.sec03 h2 > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.sec03 h2 > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.sec03 h2 > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
}

.sec03 h2 > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.sec03 h2 > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.sec03 h2 > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.sec03 h2 > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
}

.sec03 h2::before {
    z-index: 1;

    display: block;

    margin-top: -60px;
    margin-bottom: -10px;

    content: "";
    -webkit-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    /*border: solid 4px gold;*/

    border: solid 5px;
    -o-border-image: -o-linear-gradient(top,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;
    border-image: -webkit-gradient(linear,
            left top,
            left bottom,
            from(rgba(0, 0, 0, 0)),
            to(rgba(0, 25, 255, 1))) 1;
    border-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;

    -ms-grid-column: 4;
    grid-column: 4;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: stretch;
    align-self: stretch;
}

.sec03 h2::after {
    display: block;

    content: "";
    /*border: solid 4px gold;*/

    border: solid 5px;
    -o-border-image: -o-linear-gradient(left,
            rgba(0, 0, 0, 0),
            rgba(0, 25, 255, 1)) 1;
    border-image: -webkit-gradient(linear,
            left top,
            right top,
            from(rgba(0, 0, 0, 0)),
            to(rgba(0, 25, 255, 1))) 1;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 25, 255, 1)) 1;

    grid-column: 1 / -1;
}

.sec03 .spot {
    margin-left: -15px;
}

.sec03 .num {
    margin-right: 5px;
    margin-bottom: -5px;
}

/* セクション03: 画像 */
.sec03 figure {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
}

/* セクション03: 文章 */
.sec03 p {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
}

/* セクション03: ショップ情報 */
.sec03 .shop {
    -webkit-box-shadow: 10px 10px 0 #c167ff;
    box-shadow: 10px 10px 0 #c167ff;

    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 4;
    grid-row: 4;
}

/* ショップ情報 */
.shop {
    display: -ms-grid;
    display: grid;

    border: solid 1px #222;

    -ms-grid-columns: 100px 10px 1fr;
    grid-template-columns: 100px 1fr;
    -ms-grid-rows: auto 5px auto;
    grid-template-rows: auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
}

.shop > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.shop > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.shop > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.shop > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.shop img {
    -ms-grid-column: 1;
    grid-column: 1;
    grid-row: 1 / -1;
}

.shop h3 {
    font-size: 12px;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-row-align: end;
    align-self: end;
}

.shop p {
    font-size: 10px;
    line-height: 1.5;

    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
}

.shop span {
    padding: 0 5px;

    border-radius: 10px;
    background-color: #ddd;
}

/* セクションを区切る点線 */
.post::before {
    content: "";

    border-top: dotted 6px #ddd;

    grid-column: 2 / -2;
    -ms-grid-row: 4;
    grid-row: 4;
    -ms-grid-row-align: center;
    align-self: center;
}

.post::after {
    content: "";

    border-left: dotted 6px #ddd;

    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 5;
    grid-row: 5;
    -ms-grid-column-align: center;
    justify-self: center;
}

/* フッター */
.post-foot {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 700;

    padding: 30px 0;

    text-align: center;

    color: #fff;
    background-color: #222;

    grid-column: 1 / -1;
    grid-row: -2;
}

/* ##### 画面の横幅1000ピクセル以上 ##### */
@media (min-width: 1000px) {
    .post {
        --side: calc((100vw - 960px) / 2);
    }

    .post-title {
        /*font-size: 40px;*/
        font-size: clamp(1.5rem, 1.375rem + 0.63vw, 2rem) !important;
    }

    .sec h2 {
        font-size: 24px;
    }
}

/* ##### 画面の横幅767ピクセル以下 ##### */
@media (max-width: 767px) {

    /* グリッド */
    .post {
        --side: 20px;
        -ms-grid-columns: var(--side) 1fr var(--side);
        grid-template-columns: var(--side) 1fr var(--side);
        -ms-grid-rows: auto 40px auto 50px auto 50px auto 40px auto;
        grid-template-rows: auto 40px auto 50px auto 50px auto 40px auto;
    }

    .post > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(5) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(6) {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(7) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(8) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(9) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(10) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(11) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(12) {
        -ms-grid-row: 4;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(13) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(14) {
        -ms-grid-row: 5;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(15) {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(16) {
        -ms-grid-row: 6;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(17) {
        -ms-grid-row: 6;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(18) {
        -ms-grid-row: 6;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(19) {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(20) {
        -ms-grid-row: 7;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(21) {
        -ms-grid-row: 7;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(22) {
        -ms-grid-row: 8;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(23) {
        -ms-grid-row: 8;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(24) {
        -ms-grid-row: 8;
        -ms-grid-column: 3;
    }

    .post > *:nth-child(25) {
        -ms-grid-row: 9;
        -ms-grid-column: 1;
    }

    .post > *:nth-child(26) {
        -ms-grid-row: 9;
        -ms-grid-column: 2;
    }

    .post > *:nth-child(27) {
        -ms-grid-row: 9;
        -ms-grid-column: 3;
    }

    /* ヘッダー */
    .post-head {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
        -ms-grid-row: 1;
        grid-row: 1;
        /* ヘッダーのグリッド */
        -ms-grid-columns: var(--side) 12px 1fr 12px 100px;
        grid-template-columns: var(--side) 1fr 100px;
        grid-column-gap: 12px;
    }

    /* ヘッダー: シリーズ名 */
    .post-series {
        display: block;

        width: var(--side);
        /* Safari 10.x用 */

        -ms-writing-mode: tb-rl;

        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .post-series img {
        width: 12px;
        height: 12px;

        vertical-align: baseline;
    }

    /* ヘッダー: タイトル */
    .post-title {
        grid-column: 2 / -1;
        -ms-grid-row: 2;
        grid-row: 2;
    }

    /* ヘッダー: カテゴリー */
    .post-category {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
    }

    /* ヘッダー: リード文 */
    .post-lead {
        grid-column: 2 / -1;
        -ms-grid-row: 4;
        grid-row: 4;
    }

    /* ヘッダー: SNSメニュー */
    .post-sns a {
        line-height: 30px;

        width: 30px;
    }

    /* ヘッダー： 装飾画像 */
    .post-head::after {
        content: none;
    }

    /* セクション: 小見出し */
    .sec h2 {
        font-size: 19px;

        margin: 0;
    }

    .sec .spot {
        font-size: 12px;
        /*margin: 0 0 0 calc((var(--side) + 5px) * -1);*/

        -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
    }

    .sec .num {
        font-size: 60px;
    }

    /* セクション01 */
    .sec01 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        /* セクション01のグリッド */
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: auto 15px auto 15px auto 15px auto;
        grid-template-rows: repeat(4, auto);
        grid-row-gap: 15px;
    }

    .sec01 > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .sec01 > *:nth-child(2) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .sec01 > *:nth-child(3) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .sec01 > *:nth-child(4) {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
    }

    .sec01.sec > * {
        grid-column: auto;
        grid-row: auto;
    }

    .sec01 h2::after {
        margin: 0 calc(var(--side) * -1);
    }

    /* セクション02 */
    .sec02 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 5;
        grid-row: 5;
    }

    /* セクション03 */
    .sec03 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 7;
        grid-row: 7;
    }

    .sec03.sec > * {
        grid-column: auto;
        grid-row: auto;
    }

    .sec03 h2::before {
        content: none;
    }

    /* フッター */
    .post-foot {
        grid-column: 1 / -1;
        grid-row: -2 / -1;
    }

    /* セクションを区切る点線 */
    .post::before {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 4;
        grid-row: 4;
    }

    .post::after {
        border-top: dotted 6px #ddd;

        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 6;
        grid-row: 6;
        -ms-grid-column-align: stretch;
        justify-self: stretch;
        -ms-grid-row-align: center;
        align-self: center;
    }
}

/*===========================================================*/
/* シャッ（左から）*/
/*===========================================================*/

/*背景色が伸びて出現 共通*/
.bgextend {
    position: relative;

    overflow: hidden;
    /*　はみ出た色要素を隠す　*/

    -webkit-animation-name: bgextendAnimeBase;
    animation-name: bgextendAnimeBase;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*中の要素*/
.bgappear {
    -webkit-animation-name: bgextendAnimeSecond;
    animation-name: bgextendAnimeSecond;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*--------- 左から --------*/
.bgLRextend::before {
    position: absolute;

    width: 100%;
    height: 100%;

    content: "";
    -webkit-animation-name: bgLRextendAnime;
    animation-name: bgLRextendAnime;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    /*伸びる背景色の設定*/
    /*background-color: rgb(0, 0, 0);*/

    background: -webkit-gradient(linear,
            left top,
            right top,
            from(rgba(0, 0, 0, 0)),
            to(rgba(0, 25, 255, 1)));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 25, 255, 1));
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 25, 255, 1));

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bgLRextendAnime {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    50% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    50.001% {
        -webkit-transform-origin: right;
        transform-origin: right;
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}

@keyframes bgLRextendAnime {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    50% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    50.001% {
        -webkit-transform-origin: right;
        transform-origin: right;
    }

    100% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}

.bgextend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}