/* CSS Document 深川珈琲園*/

body {
	background-image: url('https://www.fukagawa-coffee.tokyo/fukagawasc-wp/wp-content/uploads/2026/01/bg2.jpg');
    background-repeat: repeat;    /* 画像を繰り返す */
    background-position: top left; /* 左上を起点にする */
    background-attachment: fixed;  /* スクロールしても背景を固定（必要に応じて） */
	color: #4A1F0B; 
	font-family: "Zen Kaku Gothic New", serif;
    font-weight: 500;
    font-style: normal;
    width:100%;
    margin: auto;
}


@media (max-width: 639px) {
.title1 {
	 font-size: 2rem!important;
	 font-weight: 700!important;
}	
}

.font-min {
	font-family: serif ;
}

@media (max-width: 639px) {
.read {
	font-size: 1rem!important;
}
}
/*-------comingsoon用のCSSここから↓----------
------------------------------------------*/
/* カミングスーンページ（ID:10）だけに背景色を適用 */
.page-id-10 {
    background-color: #004222; /* ここに好きな色を入力 */
}




/*-------comingsoon用のCSSここまで↑----------
------------------------------------------*/

/*---------------------------------------
見出し設定
-----------------------------------------*/

.h1-title{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
}

.h2-title{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
}

.h3-title{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"
}

.h3-title-undline{
	border-bottom: 2px solid #4A1F0B;
}


/*---------------------------------------
グロナビ・ヘッダー・フッター周り
-----------------------------------------*/
/****ヘッダーナビ半透明↓****/
/* 1. 通常時（ページ最上部）のヘッダー */
.l-header {
    background-color: rgba(39, 0, 0, 0.8) !important;
}

/* 2. スクロール時に「しゅっ」と出てくるドロップナビの背景 */
/* .l-header__drop-nav そのものではなく、中身の .p-drop-nav を指定します */
.l-header__drop-nav .p-drop-nav {
    background-color: rgba(39, 0, 0, 0.8) !important;
}

/* 3. 背景が透過した際に、後ろのコンテンツが透けすぎるのを防ぐための調整（任意） */
.l-header__drop-nav {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 境目を少し出すとお洒落です */
}
/* ドロップナビ（スクロールヘッダー）のレイアウト修正 */

/* 1. ドロップナビ内のコンテナをロゴとナビが並ぶように設定 */
.l-header__drop-nav .p-drop-nav .c-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. ドロップナビ内に擬似的にロゴ（深川珈琲園）を表示させる */
.l-header__drop-nav .p-drop-nav .c-container::before {
    content: "深川珈琲園"; /* 表示したいテキスト */
    font-weight: bold;
    font-size: 32px;     /* 通常時（2026-01-31 17.28.19.jpg）のサイズ感に調整 */
    color: #fff;
    white-space: nowrap;
    margin-right: auto;  /* ロゴを左端に固定 */
}

/* 3. ナビゲーションを右側に寄せる */
.l-header__drop-nav .p-drop-nav .p-global-nav {
    margin-left: auto;
}

/* 4. ドロップナビ自体の余白調整（ロゴの高さに合わせる） */
.l-header__drop-nav .p-drop-nav {
    padding: 5px 0;
}
/****ヘッダーナビ半透明↑****/



/****グロナビ　リンク文字を白にしてアンダーラインを引く↓****/
/* 1. 現在のページとホバー時の文字色を白（または元の色）に固定 */
.p-global-nav .c-navbar__item > a,
.p-global-nav .c-navbar__item:hover > a,
.p-global-nav .c-navbar__item[data-active-menu="true"] > a {
    color: #fff !important; /* 文字色を強制的に白にします */
}

/* 2. 下線の共通設定（位置と太さ） */
.p-global-nav .c-navbar__item > a > span {
    position: relative;
    padding-bottom: 5px; /* 文字と線の間の距離 */
}

.p-global-nav .c-navbar__item > a > span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* 最初は幅を0にする */
    height: 2px; /* 下線の太さ */
    background-color: #ffffff; /* 緑色の下線（スクショの色に近い値） */
    transition: width 0.3s ease; /* アニメーション（ふわっと出る） */
}

/* 3. ホバー時、および現在のページの時に下線を表示 */
.p-global-nav .c-navbar__item:hover > a > span::after,
.p-global-nav .c-navbar__item[data-active-menu="true"] > a > span::after {
    width: 100%; /* 幅を100%に広げる */
}

/* インスタグラムのアイコンなど、下線を出したくない項目がある場合（任意） */
#menu-item-180 a > span::after {
    display: none !important;
}
/****グロナビ　リンク文字を白にしてアンダーラインを引く↑****/

/*フッターコピーライト背景色*/
.l-footer .c-copyright {
	background-color: #4A1F0B;
	color:#ffffff;
}


/*--------------------------------------
共通設定
----------------------------------------*/
/***リンクボタン↓***/
/* ボタンの外枠と基本設定 */
.custom-lab-btn .smb-btn {
    background-color: #4a1f0b !important;
    border-radius: 64px !important;
    color: #fff !important;
    padding: 0.8rem 2.2rem !important; /* 右側に余裕を持たせる */
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

/* ラベル部分に背景画像としてアイコンを表示 */
.custom-lab-btn .smb-btn__label {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    /* アイコンの分だけ右にパディングを空ける */
    padding-right: 28px; 
    
    /* 背景画像の設定（遅延対策） */
    background-image: url('https://www.fukagawa-coffee.tokyo/fukagawasc-wp/wp-content/uploads/2026/01/arow.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px auto; /* アイコンの大きさを調整 */
}

/* ホバー時の演出（お好みで） */
.custom-lab-btn .smb-btn:hover {
    opacity: 0.8;
}

.btn-shadow .smb-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; /* 影の広がりと濃さ */
    transition: all 0.3s ease !important; /* 動きを滑らかに */
    position: relative;
    top: 0;
}

/* マウスを乗せた時（ホバー）の動き */
.btn-shadow .smb-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; /* 影を少し弱める */
    top: 2px !important; /* ボタンが少し沈む演出 */
}
/***リンクボタン↑***/

/***区切り線を縦線にする↓**/
.vertical-line {
    width: 1px;      /* 線の太さ */
    height: 100px;   /* 線の長さ */
    background-color: #4a1f0b; /* 茶色 */
    border: none;
    margin: 0 auto;  /* 中央寄せ */
}
/***区切り線を縦線にする↑**/


/*スマホサイズの画像小さく↓*/
@media (max-width: 639px) {
  .sp-half-img img {
    width: 50% !important;
    margin: 0 auto !important;
    display: block !important;
  }
}


/*---------------------------------------
TOPページ
-----------------------------------------*/

/**3列ボックス↓**/

/* 1. 親要素の設定（余白と配置の調整） */
.cs-feature-grid {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* インラインスタイルで指定されているgap:0を補完 */
    gap: 0 !important; 
}

/* 2. 直下のpタグをカラムとして扱う */
.cs-feature-grid > p {
    flex: 1;
    min-width: 250px; /* HTMLの指定に合わせる */
    margin: 0 !important;
    padding: 1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 3. PC幅（1025px以上）の時の縦の区切り線 */
@media (min-width: 824px) {
    /* 3つ並んでいる時の1番目と2番目のpタグの右側に線を引く */
    .cs-feature-grid > p:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 2px; /* 線の太さ */
        height: 2.5rem; /* 線の長さ */
        background-color: #4a1f0b; /* HTMLのborder-colorに合わせました */
        z-index: 1;
    }
}

/* 4. スマホ幅（639px以下）の時の調整 */
@media (max-width: 823px) {
    .cs-feature-grid {
        /* 縦並びにする */
        flex-direction: column !important;
        padding: 1.5rem 1rem !important;
		width:70%;
    }

    .cs-feature-grid > p {
        width: 100% !important;
        min-width: 100% !important;
        padding: 1.5rem 0 !important; /* 上下に余白を持たせる */
    }

    /* 1番目と2番目の文章の下に水平線を引く */
    .cs-feature-grid > p:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;      /* 下端に配置 */
        left: 50%;      /* 中央から */
        transform: translateX(-50%); /* 中央寄せ */
        width: 60%;     /* 線の長さ（お好みで調整してください） */
        height: 2px;  /* 線の太さ */
        background-color: #4a1f0b; /* 枠線と同じ色 */
        opacity: 0.8;
    }
}

/**3列ボックス↑**/

/*------------------------------------------
LABOページ
--------------------------------------------*/
/* googleマップ埋め込み↓ */
.map-frame {
    position: relative;
    padding-top: 56.25%; /* スマホでは16:9の比率を維持 */
    border-radius: 6px;
    overflow: hidden;
}

/* PC版（1025px以上）の設定 */
@media (min-width: 1025px) {
    .map-frame {
        padding-top: 0; /* 比率設定を解除 */
        height: 380px;  /* 高さを350pxに固定 */
    }
}

/* iframeの共通設定 */
.map-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/* googleマップ埋め込み↑ */



/*-----------------------------------------------
お問い合わせページ
-------------------------------------------------*/
/**問い合わせボタン↓**/

/* 各フォームパーツのデザインをリセット */
.smf-button-control__control,
.smf-text-control__control,
.smf-textarea-control__control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-size: 100% !important;
  font-weight: 600;
  font-family: inherit !important;
}

/* フォームボタンをデザイン */
.smf-button-control__control {
  background: var(--accent-color,#cd162c) !important;
  color: #fff !important;
  border: none !important;
  transition: background-color 0.3s ease !important;
  width: 250px;
}

/* 「戻る」フォームボタンを個別にデザイン */
.smf-button-control__control[data-action="back"] {
  background: transparent !important;
  color: #333 !important;
  text-decoration: underline !important;
}

/* 「戻る」以外のフォームボタンのホバー＆フォーカス色 */
.smf-button-control__control:not([data-action="back"]):hover,
.smf-button-control__control:not([data-action="back"]):focus {
  background: var(--dark-accent-color,#710c18) !important;
}

/**問い合わせボタン↑**/

/* 確認画面で注意書きのtextareaを非表示 */
.snow-monkey-form[data-screen="confirm"] textarea[name="textarea-1jdkj9qbh"] {
    display: none !important;
}

/* 念のため親要素ごと非表示 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="textarea-1jdkj9qbh"] {
    display: none !important;
}

/* loadingが終わって確認画面になった後も非表示 */
.snow-monkey-form:not([data-screen="input"]) textarea[name="textarea-1jdkj9qbh"] {
    display: none !important;
}

.snow-monkey-form:not([data-screen="input"]) .smf-placeholder[data-name="textarea-1jdkj9qbh"] {
    display: none !important;
}

/* フォームボタンのデザイン（共通設定）幅狭いデバイスでBOXからはみ出る防止 */
/* 1. 入力欄・ボタン・テキストエリアの共通リセット */
.smf-button-control__control,
.smf-text-control__control,
.smf-textarea-control__control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-size: 100% !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

/* 2. 入力欄（テキストボックス・エリア）の文字を普通の太さにする */
.smf-text-control__control,
.smf-textarea-control__control {
    font-weight: 500 !important; /* 極太を解消し、標準的な太さに設定 */
    color: #4A1F0B !important;  /* 文字色をサイトカラーに統一 */
}

/* 3. ボタンの基本デザイン（PCでは250pxを維持） */
.smf-button-control__control {
    background: #4A1F0B !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important; /* ボタンは目立つように太字を維持 */
    border-radius: 8px !important;
    padding: 15px 20px !important;
    width: 250px !important;     /* PCでの固定幅 */
    max-width: 100% !important;  /* 親要素を突き破らない設定 */
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

/* 4. 「戻る」ボタンのデザイン（PC・スマホ共通） */
.smf-button-control__control[data-action="back"] {
    background: transparent !important;
    color: #4A1F0B !important;
    text-decoration: underline !important;
    width: auto !important;
    font-weight: 500 !important; /* 戻るボタンは少し控えめに */
}

@media screen and (max-width: 600px) {
    /* 親要素がボタンを押し潰さないように、縦並びにする */
    .smf-action {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .smf-button-control {
        width: 100% !important;
        text-align: center !important;
    }

    /* スマホ時は「横幅いっぱい」に近いサイズで、BOX内に収める */
    .smf-button-control__control {
        width: 90% !important; /* 左右に少し隙間を作る */
    }

    /* 「戻る」ボタンのスマホ用余白調整 */
    .smf-button-control__control[data-action="back"] {
        width: auto !important;
        margin-top: 15px !important;
        padding: 10px !important;
    }
}