body {
    font-family: 'Arial', sans-serif;
    background-color: #FFEDB3;
    /* 畳柄 */
    background:
        linear-gradient(
          0deg,
          rgba(139, 126, 74, 0.8),
          rgba(168, 157, 95, 0.6) 10%,
          rgba(168, 157, 95, 0.2) 90%,
          rgba(139, 126, 74, 0.8)
        ),
        linear-gradient(
          90deg,
          #f9daa4,
          #f9daa4 25%,
          #cea660 25%,
          #cea660 50%,
          #ddba78 50%,
          #ddba78 75%,
          #c69f5a 75%,
          #c69f5a
        );
    background-size: 4px 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.hero, div#titleCaption:before {
    background-image: url('../image/takoyaki/negi.JPG');
    background-size: cover;
    background-position: center;
    height: 80vh;
    width: 100%;
    color: #222222;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero h1 {
    font-size: max(3.5rem, 6vw);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #EEEEEE;
    padding-inline: 3vw;
    padding-block: 1rem;
    font-family: "Zen Kaku Gothic", serif;
    font-weight: 500;
    line-height: 85%; /* 行間 */
    border-radius: 20px; /* 角丸：適宜変更して下さい */
    backdrop-filter: blur(12px) brightness(40%);
    -webkit-backdrop-filter: blur(12px) brightness(40%);
    /** マスクレイヤーにグラデーションを指定 */
    /** 画像の4辺の縁のぼかし方に段階を設けます **/
    mask-image:
        linear-gradient(to top, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
        linear-gradient(to bottom, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
        linear-gradient(to left, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%),
        linear-gradient(to right, rgb(0 0 0 / 100%) 95%, rgb(0 0 0 / 0%) 100%);

    /** マスクの合成モードを設定 */
    mask-composite: intersect;
}
/* backdrop-filter 非対応ブラウザ用 */
@supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
    .hero h1 {
        background: rgba(100, 148, 185, .9);
    }
}

section.container.py-5 h2.text-center {
    background-color: #800000;
    color: #DDDDDD;
    font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
}
.hero h3 {
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(222, 0, 0, 0.5);
    color: #DD0000;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #222222;
}
.features {
    padding: 50px 0;
}
.cta {
    background-color: #ff6347;
    color: white;
    padding: 30px 0;
    text-align: center;
}
.cta a {
    font-size: 1.5rem;
    padding: 15px 30px;
}
.feature-image.col-md-8 {
    background-image: url('./image/takobo.jfif');
    background-size: cover;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
    font-display: swap;
}
p.scroll_left.on {
    font-size: 1.25rem;
}
ul {
    border-radius: 15px;     /* 角丸 */
    padding: 2px;            /* 内側の余白 */
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
ul > span {
    font-family: "Impact", sans-serif;
    font-size: 100px;
    -webkit-background-clip: text;
    transform:  inherit ;
}
.card {
    /* 木目調 */
    background:
        linear-gradient(
            90deg,
            rgba(248, 177, 102, 0.6),
            rgba(222, 164, 90, 0.6) 60%,
            rgba(248, 177, 102, 0.6)
        ),
        repeating-radial-gradient(
            ellipse at 60% 500%,
            #cca666,
            #cca666 0.2%,
            #dfb382 0.6%,
            #dfb382 1%
        );
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}
/* スマホなどの小さな画面向けの調整 */
@media (max-width: 768px) {
    li {
      font-family: "Impact", sans-serif;
      font-size: 4rem;
    }
}
/* 画面幅が広い場合 (769px以上) */
@media (min-width: 769px) {
    div#features-container {
        > div {
            display: flex !important;
            margin-top: 3rem;
        }
        /* 売り文句コンテナ最後の背景画像のみ */
        /* 要素が変更されたら見直して下さい */
        > div:last-child > div.feature-image.col-md-8 {
            background-position-y: 33%; /* 画像の上端から33%分下がった位置から描画 */
        }
    }
}