@charset "UTF-8";

/* ============================================
    パララックス
============================================ */
.parallax {/* パララックス表示する範囲 */
    height: 50vh;
}

/* ============================================
    Home-TOP
============================================ */
.top_area {
    position: relative;/* スクロールダウンエフェクトとロゴ用 */
    display: flex;
    align-items: center;
    width: 100%;
}

/* 画像上にある縦書きロゴ */
h1 .logo_top_img {
    height: 50vh;
    filter: drop-shadow(0 0 60px rgba(12,12,12,0.8));
}

/* スライドショー */
.slide_list {/* ul */
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.slide_item-01,
.slide_item-02,
.slide_item-03 {/* li */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.slide_item-01 {/* 画像1 */
    animation: slide-anim 24s 0s infinite;
}
.slide_item-02 {/* 画像2 */
    animation: slide-anim 24s 8s infinite;
}
.slide_item-03 {/* 画像3 */
    animation: slide-anim 24s 16s infinite;
}
@keyframes slide-anim {/* スライドショーアニメーション */
    0% {/* 開始から0秒後 */
		opacity: 0;
        transform: scale(1.2);
	}
    10% {/* 開始から2.4秒後（2.4秒÷0.24=10） */
		opacity: 1;
	}
    30% {/* 開始から7.2秒後（7.2秒÷0.24=30） */
        opacity: 1;
    }
    40% {/* 開始から9.6秒後（9.6秒÷0.24=40） */
        opacity: 0;
        transform: scale(1);
    }
	100% {/* 開始から24秒後 */
		opacity: 0;
	}
}
.top_img {/* TOP画像 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スクロールダウンエフェクト */
.top_scroll-down {
    position: absolute;
    bottom: 10px;
    left: 50%;
    height: 50px;
}
.top_scroll-down span {/* SCROLLテキスト */
    position: absolute;
    top: -10px;
    transform: translate(-50%, -50%);/* translate(X軸方向の距離, Y軸方向の距離) */
    color: #fff;
    font-size: max(12px, 0.8em);
    letter-spacing: .05em;
}
.top_scroll-down::after {/* 縦線の描画 */
    position: absolute;
    top: 0;
    opacity: 0;
    width: 1px;
    height: 40px;
    background-color: #fff;
    content: "";/* 疑似要素に必須 */
    animation: scroll-effect 2s ease-in-out infinite;
}
@keyframes scroll-effect {/* 線が上から下に流れるように動く */
    0% {/* 開始から0秒後 */
        top: 0;
        opacity: 0;
        height: 0;
    }
    30% {/* 開始から0.6秒後（0.6秒÷0.02=30） */
        opacity: 1;
        height: 40px;
    }
    100% {/* 開始から2秒後 */
        top: 50px;
        opacity: 0;
        height: 0;
    }
}

/* ============================================
    私たちの思い
============================================ */
.welcome_area {
    width: 100%;
    padding: 100px 0;
}
.welcome_inner {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.welcome_content {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
}

/* 画像と挨拶文 */
.greeting_image {/* 画像 */
    width: 55%;/* => height: autoになっている */
    background: url(../img/img_about-us.jpg) center / cover;/* position / sizeの順必須 */
}
.greeting_text {/* 挨拶文 */
    width: 45%;
}
.text_wrap {/* h3とpを内包 */
    width: 100%;
    writing-mode: vertical-rl;/* テキストを縦書きに配置 */
    text-orientation: upright;/* 英字や数字を縦向きに配置 */
    line-height: 3;
}

/* 1024px以下では以下を適用する */
@media (max-width: 1024px) {
    .welcome_content {
        flex-direction: column;/* 縦並び */
    }
    .greeting_image {/* 画像 */
        width: 100%;
        height: 350px;
        background-position: bottom;
    }
    .greeting_text {/* 挨拶文 */
        position: relative;
        bottom: 40px;
        width: 90%;
        margin: 0 auto;
        padding: 2em 2em 0 2em;
        box-sizing: border-box;
        background-color: #fffffc;
        text-align: center;/* text_wrapを中央寄せ */
    }
    .text_wrap {/* h3とpを内包 */
        display: inline-block;
        width: auto;
        text-align: justify;
    }
}
/* 767px以下では以下を適用する */
@media (max-width: 767px) {
    .text_wrap {/* h3とpを内包 */
        writing-mode: horizontal-tb;
        line-height: 2;
    }
    .text_wrap h3 {/* 伝統の技が織りなすほっとするひととき */
        text-align: center;
        word-break: keep-all; /* wbrタグと合わせて使用 */
    }
    br {/* pタグ内のbrタグ */
        display: none;
    }
}

/* ============================================
    川口堂の菓子
============================================ */
.sweets_area {
    width: 100%;
    padding: 100px 0;
}
.sweets_inner {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.sweets_content {
    padding: 50px 0;
}

/* ループアニメーション */
.loop_wrap {/* ulを内包 */
    display: flex;/* 子要素(ul)を横に並べる */
    overflow: hidden;/* はみ出た部分は表示しない */
    height: 300px;
}
.loop_list {/* ul */
    display: flex;/* 子要素(li)を横に並べる */
    animation: loop-left 50s linear infinite;
}
@keyframes loop-left {/* 画像を右から左へ無限ループ表示 */
    from {/* 開始から0秒後(=0%) */
        transform: translateX(0);
    }
    to {/* 開始から50秒後(=100%) */
        transform: translateX(-100%);
    }
}
.loop_item {/* li */
    width: calc(100vw / 7);/* 一度に表示する画像は7枚 */
    max-width: 450px;
}
.loop_img {/* 商品画像 */
    width: 100%;
    height: 100%;
    object-fit: cover;/* 横幅と高さが必要 */
}

/* 1279px以下では以下を適用する */
@media (max-width: 1279px) {
    .sweets_inner {
        width: 100%;
        max-width: none;/* max-width:1000pxを解除 */
        margin: 0;
    }
    .loop_item {/* li */
        width: calc(100vw / 3);/* 一度に表示する画像は3枚 */
        min-width: 250px;
    }
}

/* ============================================
    お問い合わせ
============================================ */
.contact_area {
    width: 100%;
    padding: 100px 0;
}
.contact_inner {
    width: 90%;
    margin: 0 auto;
}
.contact_content {
    height: 50vh;
}

/* お問い合わせの画像 */
.contact_image {
    position: relative;/* タイトルと文章の配置で必要 */
    height: 100%;
    overflow: hidden;
}
.contact_image::before {
    display: block;
    transform: scale(1.01);/* 淵のぼかしを解消するため拡大 */
    width: 100%;
    height: 100%;
    background: url(../img/img_contact.jpg) center / cover;/* position / sizeの順必須 */
    filter: blur(2px) brightness(0.65);
    content: "";/* 疑似要素に必須 */
    transition-duration: 0.2s;
}
@media (any-hover: hover) {/* タッチデバイスでホバーしない */
    .contact_image:hover::before {/* contact_imageにホバーした時の疑似要素のスタイル */
        transform: scale(1.05);
        filter: brightness(0.8);
    }
}

/* タイトルと文章の配置 */
.center_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/* translate(X軸方向の距離, Y軸方向の距離) */
    color: #fff;
    word-break: keep-all;
}

/* 767px以下では以下を適用する */
@media (max-width: 767px) {
    .contact_content {
        height: 60vh;
    }
    .center_text {
        text-align: center;
    }
}

/* ============================================
    スローガン
============================================ */
.slogan_area {
    background-color: #fffffc;
}

/* スローガン-日本語 */
.slogan_text {
    margin: 0;
    padding-bottom: 1em;
    text-align: center;
    font-weight: bold;
}

/* ループアニメーション */
.looptxt_wrap {/* ulを内包 */
    overflow: hidden;/* はみ出た部分は表示しない */
}
.looptxt_list {/* ul */
    display: flex;/* liを横並び */
    width: 100vw;/* 画面の横幅いっぱいに表示する */
}
.looptxt_item {/* li */
    margin-bottom: 1em;
    padding-right: 1em;
    background-image: linear-gradient(-225deg, #a59aca, #d9ded8);/* 背景を線形グラデーション */
    -webkit-background-clip: text;
    background-clip: text;/* 背景をテキストの中に切り取って表示 */
    color: transparent;/* 文字色を透明にする */
    font-size: 8vw;
    font-weight: bold;
    white-space: nowrap;/* 行は折り返さない */
    animation: looptxt-left 50s linear infinite;
}
@keyframes looptxt-left {/* 川口堂の菓子で使用したものと同じ */
    from {/* 開始から0秒後(=0%) */
        transform: translateX(0);
    }
    to {/* 開始から50秒後(=100%) */
        transform: translateX(-100%);
    }
}

/* 767px以下では以下を適用する */
@media (max-width: 767px) {
    .looptxt_item {/* li */
        font-size: 5em;
    }
}

/* ============================================
    お知らせ
============================================ */
.news_area {
    width: 100%;
    padding: 100px 0;
    background-color: #f8fbf8;
}
.news_inner {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.news_content {
    width: 80%;
    padding: 50px 0;
}

/* h2タイトル */
.news_title {
    width: 20%;/* h2の100% => 20%に変更 */
    text-align: left;/* h2のcenter => leftに変更 */
}

/* お知らせ情報 */
.info_wrap a {/* dlを内包 */
    color: #25292f;
}
.info_wrap dl {/* dtとddを内包 */
    display: flex;
    margin: 0;
    padding: 1em 2em;
    border-bottom: 1px solid #d0d0d0;
}
@media (any-hover: hover) {/* タッチデバイスでホバーしない */
    .info_wrap dl:hover {
        color: #a59aca;
    }
}
.info_wrap dt {/* 日時とラベルを内包 */
    display: flex;
    align-items: center;
}
.info_wrap dt span {/* ラベル */
    width: 50px;
    margin: 0 1em;
    padding: 3px;
    background-color: #a59aca;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    letter-spacing: .05em;
}

/* 767px以下では以下を適用する */
@media (max-width: 767px) {
    .news_title {/* h2タイトル */
        width: 100%;/* news_titleの20% => 100%に戻す */
        text-align: center;/* news_titleのleft => centerに戻す */
    }
    .news_inner,
    .info_wrap dl {/* news_titleとnews_content、dtとddを縦並び */
        flex-direction: column;/* 縦並びにする */
    }
    .news_content {
        width: 100%;
    }
    .info_wrap dd {
        margin: 1em 0 0 0;
    }
}