/*
Theme Name: LINQWEB
Theme URI: 
Template: lightning
Description: 
Author: YUKARI HIRAMATSU BY LINQWEB
Tags: 
Version: 0.6.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Sawarabi+Mincho&display=swap');

h1.entry-title
 {color: #e87a89!important;
}/*投稿シングルタイトル*/

h2,
h3 {
    font-family: "Sawarabi Mincho", serif;
    color: #e87a89;
    font-weight: normal;   /* 太字解除 */
    letter-spacing: 0.05em; /* 文字間隔 */
    line-height: 1.6;      /* 読みやすい行間 */
    word-wrap: break-word; /* 長い単語は折り返す */
}

/* --- サイズの個別設定--- */
h2 {
    /* 最小20px 〜 画面の6% 〜 最大36px */
    font-size: clamp(20px, 6vw, 36px);
    
    /* h2だけ少し上の余白を広げたい場合はここに追加 */
    /* margin-top: 40px; */
}

/* h3：h2より少し控えめにする設定 */
h3 {
    /* 最小16px 〜 画面の4.5% 〜 最大24px */
    font-size: clamp(16px, 4.5vw, 24px);
}

/* 3. 本文（p）の設定 */
p {
    font-family: "Noto Sans JP", sans-serif;
    color: #e87a89;
    line-height: 1.8;
}

/* 投稿一覧(blog) および アーカイブページ(archive) のH1のみ色を変更 */
body.blog h1,
body.archive h1 {
    color: #E98F9B;
}

/********************************************/
/*ヘッダーグローバルナビカスタマイズ　*/
/********************************************/

/*ナビメニュー色*/
strong.global-nav-name {
    color: #ffffff;
}
/*問い合わせリンクをボタン風に*/
body:not(.header_scrolled) li#menu-item-399 {
  background: #ffffff;
  border-radius: 50px;
	padding-top: 0px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom: 0px;
}

/* お問い合わせメニュー項目の文字色を変更 */
#menu-item-399 a {
  color: #e98f9b !important;
	padding:0px!important;
}

/* もし上記で変わらない場合、中のstrongタグも強制的に変える指定 */
#menu-item-399 a strong {
    color: #e98f9b !important;
		padding:0px!important;
}

/*ヘッダーロゴサイズ*/
site-header-logo img {
    max-height: 100px!important;
}

/*スクロール時のヘッダーメニュー*/
@media (min-width: 992px) {
    .header_scrolled.admin-bar .site-header {
        min-height: 80px !important;
			padding-top:20px;
    }
/* スクロール時の問い合わせボタン*/
body.header_scrolled li#menu-item-399 {
    background: #ffffff;
    border-radius: 20px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
	margin-bottom:10px;
}	
}

/********************************************/
/*TOPページカスタマイズ　*/
/********************************************/

/********** トウジュールが選ばれる理由 **********/

/* =========================================
   Point 1, Point 3 (左：写真 / 右：文章)
   ========================================= */

/* --- 左カラム（写真）の設定 --- */
.overlap-img-col {
    position: relative;
    z-index: 2; /* 写真を一番手前に表示 */
    display: flex;
    justify-content: flex-end; /* 写真を右（文章側）に寄せる */
    margin-top: -150px; 
    margin-right: -30px; 
}

/* 画像自体の調整 */
.overlap-img-col figure {
    margin: 0;
    width: 100%;
}
.overlap-img-col img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1); 
}

/* --- 右側の全体枠（point-wrapper） --- */
.point-wrapper {
    position: relative;
    z-index: 1; /* 写真より奥にする */
    margin-left: -120px; /* 横の重なり */
 　　margin-top: 30px !important; /*写真の上位置 */
    padding-top: 40px; /* Point文字のための上部スペース */
}

/* --- 「Point」の文字 --- */
.point-label {
    position: absolute;
    top: -15px;
    left: 120px;
    z-index: 10;
    margin: 0 !important;
    padding-bottom: 20px;
    font-family: "Sawarabi Mincho", serif;
    font-size: 24px;
    color: #8c7875;
}

/* --- ピンクの箱 --- */
.point-box {
    background-color: #fbf0f8;
    border-image: linear-gradient(135deg, #f8cc01, #cb9b0c) 1 !important;
    border-style: solid !important;
    /* 左側の余白を多くして、写真被りを防ぐ */
    padding: 40px 30px 30px 130px !important; 
    border-radius: 0;
}


/* =========================================
   Point 2, Point 4 (左：文章 / 右：写真)
   ========================================= */

/* --- 右カラム（写真）の設定 --- */
.overlap-img-col-reverse {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start; /* 写真を左（文章側）に寄せる */
    margin-top: 0px; 
    margin-left: -30px; 
}

/* 画像の調整 */
.overlap-img-col-reverse figure {
    margin: 0;
    width: 100%;
}
.overlap-img-col-reverse img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
}

/* --- 左側の全体枠（point-wrapper-reverse） --- */
.point-wrapper-reverse {
    position: relative;
    z-index: 1;
    margin-right: -120px; /* 右側（写真側）に深く潜り込ませる */
    margin-top: 0px;
 padding-top: 20px;/*写真の上位置*/
 text-align: left;
}

/* --- 「Point 2」の文字 --- */
.point-label-reverse {
    position: absolute;
    top: -15px;
    left: 0;
    z-index: 10;
    margin: 0 !important;
    padding-bottom: 30px !important;
    font-family: "Sawarabi Mincho", serif;
    font-size: 26px;
    color: #8c7875;
}

/* --- ピンクの箱（Reverse） --- */
.point-box-reverse {
    background-color: #fbf0f8;
    border-image: linear-gradient(135deg, #f8cc01, #cb9b0c) 1 !important;
    border-style: solid !important;
    padding: 40px 130px 30px 30px !important; 
    border-radius: 0;
}


/* =========================================
   スマホ表示（900px以下）リセット
   ========================================= */
@media (max-width: 900px) {
    
    /* === Point 2（逆レイアウト）のリセット === */
    .overlap-img-col-reverse {
        display: block !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
    }
    .point-wrapper-reverse {
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: auto !important;
    }
    .point-label-reverse {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 10px !important;
    }
    .point-box-reverse {
        padding: 25px 20px !important; 
    }

   /* === Point 1（正レイアウト）のリセット === */
    .overlap-img-col {
        display: block !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    .point-wrapper {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: auto !important;
        transform: none !important;
    }
    .point-box {
        padding: 30px 20px !important;
    }
    .point-label {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 5px !important;
        margin-left: 0 !important;
    }
}


/*top newsの日付とカテゴリーの位置を入替*/
.postListText_singleTermLabel {
    min-width: 100px;
    margin-right: 1em;
	margin-top: 2px;}

a.postListText_singleTermLabel_inner {
    background-color: #E98F9B !important;
    padding-bottom: 5px;
    padding-top: 5px;
}

/* 投稿リスト（テキスト表示）のFlexボックス化 */
.vk_posts-layout-postListText .vk_post {
    display: flex;
    flex-wrap: wrap;     /* スマホなどで折り返しを許可 */
    align-items: center; /* 上下中央揃え */
}

/* 1番目：カテゴリーラベル */
.vk_posts-layout-postListText .postListText_singleTermLabel {
    order: 1;
    margin-right: 0.8em; /* 日付との間の余白 */
}

/* 2番目：日付 */
.vk_posts-layout-postListText .postListText_date {
    order: 2;
    margin-right: 0.8em; /* タイトルとの間の余白 */
}

/* 3番目：タイトル */
.vk_posts-layout-postListText .postListText_title {
    order: 3;
    margin: 0; /* タイトルの余計な余白をリセット */
    flex: 1;   /* 残りのスペースを埋める（必要に応じて削除可） */
}

/* スマホ表示時の調整（任意） */
@media (max-width: 576px) {
    .vk_posts-layout-postListText .vk_post {
        align-items: flex-start; /* スマホでは上揃えの方が綺麗な場合があります */
    }
}

/********************************************/
/*よくある質問カスタマイズ　*/
/********************************************/
/*背景色*/
.wp-block-vk-blocks-faq2.vk_faq {
    background-color: #F9E8FA;
    border: none !important;
    padding-left:30px
}

/*Q　タイトル*/
 .vk_faq .vk_faq_title {
        color: #E98F9B;
        font-size: 1.4rem;
        font-weight: normal;
    }

/*Qの文字色*/
.vk_faq .vk_faq_title:before {
    content: "Q";
    color: #e98f9b;
}


/*Aの内容文字色*/

dd.wp-block-vk-blocks-faq2-a.vk_faq_content {
    color: #966772;
}

/*Aの色*/
.vk_faq .vk_faq_content:before
 {
    content: "A";
    color: #e98f9b;
}


/********************************************/
/*各撮影ページ　　　　　　　　　　　　　　　　*/
/********************************************/

/*---------------/*
/*ロケ撮影プラン　*/
/*---------------/*

/* --- 外側のピンクの箱 --- */
.plan-box {
    position: relative; /* バッジの基準点にする */
    margin-top: 40px;   /* 上のブロックとの間隔（バッジが被らないように） */
    overflow: visible !important; /* バッジが枠外にはみ出しても消えないようにする */
}

/* --- 右上のバッジ画像 --- */
.plan-badge {
    position: absolute;/* 浮遊させる */
    top: -6px;         /* 箱の上端より突き出す */
    right: 63px;       /* 箱の右端より右に突き出す */
    z-index: 10;       /* 一番手前に */
    width: 178px;
    max-width: none;
}
    
.plan-badge img {
    box-shadow: none !important; /* 影などがついていれば消す */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .plan-box {
        margin-top: 30px;
    }
    .plan-badge {
        width: 100px;
        top: 10px;
        right: 16px;
    }
}

/********************************************/
/*右側追従ボタン　　　　　　　　　　　　　　　　　*/
/********************************************/
/* pc時の右端固定追従ボタン */
.fixed-side-btns {
  position: fixed;
  top: 10%;
  right: 0;
  z-index: 9999;
}

.fixed-side-btns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fixed-side-btns li {
  /* ここを 0 にすると間隔がなくなります */
  margin-bottom: 0; 
  text-align: right;
  line-height: 0; 
}

.fixed-side-btns img {
  display: block;
  width: 80px;
  height: auto;
  transition: opacity 0.3s ease;
}

.fixed-side-btns a:hover img {
  opacity: 0.8;
}

/* 以下、メディアクエリはそのまま */
@media (max-width: 768px) {
  .fixed-side-btns {
    display: none;
  }
}

@media (max-width: 768px) {
  .footerFloatingMenu {
    display: flex !important;
  }
}

/********************************************/
/*モバイルフッターボタン*/
/********************************************/

.footerFloatingMenu ul {
    display: flex;       /* 横並びにする */
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
   font-size: 0;
   line-height: 0;   
}

.footerFloatingMenu li {
    width: 50%;          /* 画面の半分（50%）に設定 */
    margin: 0;
    padding: 0;
    border: none;
}

.footerFloatingMenu li a {
    display: block;      /* リンクをブロック要素にしてクリック範囲を広げる */
    margin: 0;
    padding: 0;   
}

.footerFloatingMenu li img {
    width: 100%;         /* 画像をliの幅いっぱいに広げる */
    height: auto;        /* 高さは自動調整 */
    display: block;      /* 画像下の隙間を消す */
    vertical-align: bottom;
    border: none;
    margin:0;
}
.footerFloatingMenu {
    position: fixed;  /* 画面に固定する */
    bottom: 0;        /* 一番下に配置 */
    left: 0;          /* 左端から開始 */
    width: 100%;      /* 横幅いっぱい */
    z-index: 9999;    /* 他の要素より手前に表示 */
    padding: 0;
    margin: 0;  
}

/* スマホサイズ（767px以下）の時だけ適用 上の戻るボタン*/
@media screen and (max-width: 767px) {
    .page_top_btn {
        /* フッターメニューの高さ分 + 元々の余白分 だけ上に上げる */
 bottom: 95px !important; 
    }
}
/* 画面幅が768px以上（PCやタブレット）のときは非表示にする */
@media screen and (min-width: 768px) {
    .footerFloatingMenu {
        display: none;
    }
}

/*-------------------------------------------
投稿　次へ　前へカスタマイズ
----------------------------------------*/
.next-prev-prev.card-horizontal .card-body {
display: flex;
padding: 0;
align-items: center;
justify-content: flex-start;
}

.next-prev-prev.card-horizontal .card-body:before {
font-family: "Font Awesome 5 Free";
content: "\f053";
font-weight: bold;
position: absolute;
font-size: 3rem;
color: rgba(0,0,0,0.1);
top: calc(50% - 1.5rem);
left: 1rem;
}

.next-prev-prev.card-horizontal.vk_post .card-body .vk_post_title a {
display: block;
padding: 1.5rem 1.0rem 1.5rem 3.5rem;
}

.next-prev-next.card-horizontal .card-body {
display: flex;
padding: 0;
align-items: center;
justify-content: flex-end;
}

.next-prev-next.card-horizontal .card-body:before {
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: bold;
position: absolute;
font-size: 3rem;
color: rgba(0,0,0,0.1);
top: calc(50% - 1.5rem);
right: 1rem;
}

.next-prev-next.card-horizontal.vk_post .card-body .vk_post_title a {
display: block;
padding: 1.5rem 3.5rem 1.5rem 1.0rem;
}