@charset "utf-8";

/*
Theme Name: アドダス
Author: アドダス
Author URI: http://addas.jp/
*/

/* ============================================================
**  クラス名の書き方
**  -> 独自クラス名、マージン、パディング、バックグラウンド、フォントサイズ、カラー、テキストアライン
** ============================================================ **/

/* テンプレートタグ wp_list_pages で付与されるクラス list-group-item のスタイルを調整する */
.wp-list-pages .list-group-item {
  display: list-item;
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  border: none;
}

/* コード */
#l-main .syntaxhighlighter table {
  font-size: 12px !important;
}

/* add css 20221130 */
.column {
  display: flex;
  flex-direction: column;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: nowrap;
  align-items: center;
}

.googlemap {
  width: 100%;
  padding: 8px;
  -webkit-box-sizing: border-box; /*webkit系*/
  -moz-box-sizing: border-box; /*Firefox*/
  box-sizing: border-box;
}

.viewmore {
  position: relative;
}

.viewmore::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  display: inline-block;
  transform: rotate(45deg);
  position: absolute;
  top: 39%;
  right: 8%;
}

.bg-craft {
  background: url(https://yakiimo3515.com/wp/wp-content/themes/addas/img/25321357_m.jpg);
}

.rakuten-footerbtn {
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  z-index: 9999;
  width: 356px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  #toPageTop,
  #toPageTop a {
    display: none;
  }
}

/* ==============================
   202511　修正
   ============================== */

/* 固定ヘッダー */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent; /* ← 元の背景を透明に */
  transition: all 0.3s ease;
}

/* 背景だけ乗算させる擬似要素 */
.l-header::before {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply; /* ← これがポイント */
  z-index: 0;
  pointer-events: none; /* クリック操作に影響しない */
  filter: brightness(0.5);
}

@media (min-width: 768px) {
    .l-header::before {
      background-color: rgba(102, 102, 102, 0.8); /* 元の色 */
    }
}

/* 中身（ロゴ・メニュー）を前面に */
.l-header > * {
  position: relative;
  z-index: 1;
}

/* ナビゲーション */
.l-header .navbar {
    padding: 1em 0 .5em 0;
    position: relative;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .l-header .navbar .navbar-brand {
        padding: 0;
        margin-right: auto;
        height: 40px;
        width: 156px;
    }
}
.l-header .navbar .navbar-brand {
    height: 32px;
    width: 120px;
    background: url(./img/SVG/logo-bk.svg) left center / contain no-repeat;
}

@media (min-width: 992px) {
    .l-header .navbar .navbar-brand {
        height: 52px;
        width: 203px;
        background: url(./img/SVG/logo.svg) left center / contain no-repeat;
    }
}

.l-header .navbar-brand .logo {
/*    height: 40px;*/
    width: auto;
    filter: brightness(0) invert(1); /* 白いロゴに変換 */
}

.l-header .navbar-collapse {
    flex-grow: 0;
}

/* ナビゲーションメニュー */
.l-header .navbar-nav,
#l-hero .navbar-nav {
    align-items: center;
    font-family: "Helvetica Neue Condensed Bold", "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    letter-spacing: .12em;

}

.l-header .navbar-nav .nav-item {
    text-align: center;
}

.l-header .navbar-nav .nav-item .menu-item-description,
#l-hero .navbar-nav .nav-item .menu-item-description {
    font-size: .5em;
    font-weight: normal;
    line-height: 0.3em;
}

.l-header .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 0;
    position: relative;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.l-header .navbar-nav .nav-link:hover {
    opacity: 0.7;
}

@media (min-width: 768px) {
    #gnav #menu-global .nav-link {
        font-size: 1.4em;
    }
}
@media (min-width: 992px) {
    #gnav #menu-global .nav-link {
        font-size: 1.6875em;
    }
}
@media (min-width: 768px) {
    #gnav #menu-global .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}
@media (min-width: 992px) {
    #gnav #menu-global .nav-link {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
@media (min-width: 1200px) {
    #gnav #menu-global .nav-link {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
}

/* 日本語サブテキスト */
.l-header .navbar-nav .nav-link small {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: #ffffff !important;
    font-weight: 400;
    line-height: 1.2;
}

/* ハンバーガーメニュー */
.l-header .navbar-toggler {
    border: none;
    padding: 0.5rem;
    position: relative;
}

.l-header .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

/* ハンバーガーアイコン */
.l-header .navbar-toggler .icon-bar,
#l-hero .navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    margin: 4px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* スマホ時：ヘッダーのバーガーメニューは黒 */
@media (max-width: 767px) {
    .l-header .navbar-toggler .icon-bar {
        background-color: #000000;
        opacity: 1;
    }
}

/* ×アイコンへの変形 */
.l-header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1),
#l-hero .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.l-header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2),
#l-hero .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
}

.l-header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3),
#l-hero .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
    opacity: 1;
}

/* ==============================
   レイアウト: ヒーロー
   ============================== */

#l-hero {
    position: relative;
    width: 100%;
/*    height: 100vh;
    min-height: 600px;*/
    overflow: hidden;
}

#l-hero .outer .inner img {
    margin-top: 0 !important;
}

#l-hero .outer {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('./img/hero-bgsp.jpg');
    background-size: cover;
    background-position: center;
}
@media (min-width: 768px) {
    #l-hero .outer {
        background-image: url('./img/hero-bg.jpg');
    }
}

/* オーバーレイ（乗算） */
/*#l-hero .outer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b2b2b2;
    mix-blend-mode: multiply;
    z-index: 2;
}*/

#l-hero .inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 12rem;
}

/* モバイル用の上部小ロゴ */
#l-hero .mobile-logo {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: auto;
    z-index: 10;
}

/* 中央のヒーローコンテンツ */
#l-hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-36vh);
}
@media (min-width: 768px) {
    #l-hero .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(-75vh);
    }
}
@media (min-width: 768px) {
    #l-hero .hero-content {
        transform: translateY(-60vh);
    }
}
@media (min-width: 992px) {
    #l-hero .hero-content {
        transform: translateY(-70vh);
    }
}
@media (min-width: 1200px) {
    #l-hero .hero-content {
        transform: translateY(-60vh);
    }
}
@media (min-width: 1480px) {
    #l-hero .hero-content {
        transform: translateY(-75vh);
    }
}

#l-hero .hero-logo img {
    width: 50vw;
    height: auto;
}

/* モバイルのハンバーガーメニュー */
#l-hero .navbar-toggler {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
/*    border: 2px solid #ffffff;*/
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
}

#l-hero .navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    margin: 4px 0;
    transition: all 0.3s;
}

/* モバイルメニュー */
#l-hero .navbar-collapse {
    position: absolute;
    top: 4rem;
    left: 0;
    right: 0;
    background-color: rgba(38, 20, 15, 0.7);
    padding: 2rem 1rem;
    z-index: 9;
}

#l-hero .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: center;
}

#l-hero .navbar-collapse .nav-item {
    margin-bottom: 1.5rem;
}

#l-hero .navbar-collapse .nav-link {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
}

/* ヒーローのタイトル */
#l-hero .hero-title {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 0;
}


/* ==============================
   レイアウト: メイン
   ============================== */

.l-main {
    margin-top: 0;
}

/* トップページ以外はヘッダー分の余白を追加 */
body:not(.home) .l-main {
    margin-top: 80px;
}


/* ==============================
   ローダー
   ============================== */

.l-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.l-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader {
    font-size: 1.2rem;
    color: #333333;
}
@media (max-width: 767px) {
    #gnav {
        background-color: rgba(0, 0, 0, 0.7);
        margin-top: 62px;
    }
}
/* ==============================
   レスポンシブ
   ============================== */

@media (max-width: 767px) {
    /* ヘッダー */
    .l-header .navbar-brand .logo {
        height: 32px;
    }
    
    .l-header .navbar-nav .nav-item {
        margin-left: 0;
        margin-bottom: 1.5rem;
    }
    
    .l-header .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        padding: 1.5rem;
        margin-top: 1rem;
        border-radius: 4px;
    }
    
    /* ヒーロー */
    #l-hero {
        min-height: 500px;
    }
    
    #l-hero .mobile-logo {
        display: block;
    }
    
    #l-hero .hero-logo img {
        width: 150px;
    }
    
    #l-hero .hero-title {
        font-size: 1.8rem;
    }
    
    /* メイン */
    body:not(.home) .l-main {
        margin-top: 60px;
    }
}

#l-hero .outer::before {
    padding-top: calc((176 / 376) * 100%);
}
@media (min-width: 1200px) {
    #l-hero .outer::before {
        padding-top: calc((9 / 21) * 100%);
    }
}

@media (max-width: 575px) {
    #l-hero .hero-logo img {
        width: 120px;
    }
    
    #l-hero .hero-title {
        font-size: 1.5rem;
    }
    
    #l-hero .mobile-logo {
        width: 100px;
        top: 1rem;
    }
    
    #l-hero .navbar-toggler {
        top: -9.6rem;
        right: 1.6rem;
    }
}

/* タブレット以上 */
@media (min-width: 768px) {
    #l-hero .navbar-toggler,
    #l-hero .navbar-collapse {
        display: none !important;
    }
    
    #l-hero .mobile-logo {
        display: none;
    }
    
    #l-hero .hero-logo img {
        width: 70vw !important;
    }
}
#l-hero .hero-logo img {
    width: 60vw !important;
}
@media (min-width: 992px) {
    #l-hero .hero-logo img {
        width: 60vw !important;
    }
}
@media (min-width: 1200px) {
    #l-hero .hero-logo img {
        width: 50vw !important;
    }
}

/* ==============================
   右側固定ボタン
   ============================== */

.fixed-side-button {
    position: absolute;
    right: 0;
    top: -5%;
    transform: translateY(-65%);
    transition: all 0.3s ease;
}

.fixed-side-button img {
    display: block;
    height: auto;
    width: 392px;
    transition: all 0.3s ease;
}

.fixed-side-button:hover img {
    opacity: 0.8;
}
@media (min-width: 768px) {
    .fixed-side-button {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 900;
        transition: all 0.3s ease;
    }
    
    .fixed-side-button img {
        display: block;
        height: auto;
        width: 90px;
        transition: all 0.3s ease;
    }
    
    .fixed-side-button:hover img {
        opacity: 0.8;
    }
}
/* ==============================
   フロントページ
   ============================== */
.c-about a:hover {
    color: #fff;
    background-color: #000;
}
.fw-nomal {
    font-weight: nomal !important;
}
.helvetica {
    font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', 'Arial Narrow', 'Roboto Condensed', 'Arial', sans-serif;
    font-weight: 700;
    font-stretch: condensed;
    letter-spacing: 0.1rem;
}
.c-news a:hover {
    color: #fff;
    background-color: #000;
}
.tomenu p a:hover {
    color: #fff;
    background-color: #000;
}
#l-home-yakiimo-sweets {
    padding-top: 0;
}
@media (min-width: 992px) {
    #l-home-yakiimo-sweets {
        padding-top: 0px;
    }
}

/*ページネーム*/
.l-page-title {
    padding-top: 138px;
    padding-bottom: 80px;
}
@media (min-width: 768px) {
    .l-page-title {
        padding-top: 252px;
        padding-bottom: 80px;
    }
}

/*about*/
.ttl-number {
    position: relative;
    font-size:  clamp(1.6rem, 8.5vw, 1.9rem);
}
.ttl-number .ttl-subtitle {
    font-size: 0.69rem;
    font-weight: 400;
    margin-bottom: 0.3rem;
    color: #333;
    padding-left: clamp(2.4rem, 6vw, 3rem);
    letter-spacing: 0.1rem;
}
.ttl-number .text-cyan {
    font-weight: 700;
    color: #1d8fa5 !important;
}
.ttl-number .text-brown {
    font-weight: 700;
    color: #9d4332 !important;
}
.ttl-number .text-orange {
    font-weight: 700;
    color: #e69b3b !important;
}
@media (min-width: 768px) {
    .ttl-number {
        font-size: clamp(4.5rem, 8vw, 7.5rem);
    }
    .ttl-number .ttl-subtitle {
        font-size: clamp(1.4rem, 2vw, 2.2rem);
        margin-bottom: 0.5rem;
        padding-left: clamp(5.8rem, 10.5vw, 9.5rem);
    }
    .ttl-number>span {
        transform: none;
    }
}
.border-menu-color {
    border-color: #939393;
}
.ls-1 {
    letter-spacing: 0.1rem;
}
.ls-2 {
    letter-spacing: 0.2rem;
}
.ls-3 {
    letter-spacing: 0.3rem;
}
.ls-4 {
    letter-spacing: 0.4rem;
}
.ls-5 {
    letter-spacing: 0.5rem;
}
.ls-6 {
    letter-spacing: 0.6rem;
}
.lh-1 {
    line-height: 1;
}
.mt-182 {
    margin-top: 182px !important;
}
.mb-182 {
    margin-bottom: 182px !important;
}

#gnav #menu-global {
    padding-bottom: 16px;
    padding-top: 16px;
}
@media (min-width: 768px) {
    #gnav #menu-global {
        padding-bottom: 0;
        padding-top: 0;
    }
}
/* モバイルメニュー */
@media (max-width: 767px) {
    .l-header .navbar-collapse,
    #l-hero .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 3rem 2rem 2rem;
        margin-top: 0;
        border-radius: 0;
        z-index: 9999;
        overflow-y: auto;
    }
    
    .l-header .navbar-collapse .navbar-nav,
    #l-hero .navbar-collapse .navbar-nav {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
    }
    
    .l-header .navbar-nav .nav-item,
    #l-hero .navbar-nav .nav-item {
        display: block;
        width: 90%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #ffffff;
        text-align: center;
    }
    
    /* 最後（Instagram）：下ボーダーなし */
    .nav-item:last-child {
        border-bottom: none !important;
        padding-top: 2rem !important;
    }
    
    /* 最後から2番目（楽天市場）：下ボーダーなし */
    .nav-item:nth-last-child(2) {
        border-bottom: none !important;
    }
    
    .l-header .navbar-collapse .nav-link,
    #l-hero .navbar-collapse .nav-link {
        color: #fff !important;
        font-size: 1.4rem;
        font-weight: 700;
        padding: 2rem 1rem;
        text-align: center;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .l-header .navbar-collapse .nav-link small,
    #l-hero .navbar-collapse .nav-link small {
        font-size: 1rem;
        font-weight: 400;
        color: #666666;
    }
    /* テキストを非表示 */
    .nav-item:last-child .nav-link {
        font-size: 0;
    }
    
    /* アイコン表示 */
    .nav-item:last-child .nav-link::before {
        content: '';
        width: 48px;
        height: 48px;
        background-image: url('./img/SVG/insta_logo_white.svg');
    }
    #gnav #menu-global .nav-link {
        padding-top: .5rem !important;
        line-height: 2rem;
    }
}
@media (max-width: 767px) {
    #l-hero #gnav {
    top: 76px;
}
    #l-hero {
        overflow: visible;  /* hiddenを解除 */
    }
    
    #l-hero .outer {
        overflow: hidden;   /* 背景画像のはみ出しは.outerで制御 */
    }
    #l-hero .navbar-collapse {
        position: fixed !important;
        min-height: 100vh;  /* 最低でも画面全体 */
    }
    #l-hero,
    #l-hero .outer {
        pointer-events: none;  /* ヒーローエリア自体はクリック不可 */
    }
    
    /* 必要な要素だけクリック可能に */
/*    #l-hero .inner,*/
    #l-hero .navbar-toggler,
    #l-hero .navbar-collapse {
        pointer-events: auto;  /* これらはクリック可能 */
    }
}
#l-footer .fa-icon-responsive {
    font-size: 3rem; /* モバイル: fa-3x */
}

@media (min-width: 768px) {
    #l-footer .fa-icon-responsive {
        font-size: 4rem; /* PC: fa-4x */
    }
}