/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.29.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2024 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/

.page-header,  /* タイトルエリア */
#breadcrumb {  /* パンくずリスト */
    display: none;  /* 要素を非表示 */
    height: 0;      /* 高さを0に */
    margin: 0;      /* 余白をなくす */
    padding: 0;     /* 内側の余白もなくす */
}

a {
    pointer-events: auto; /* リンクがクリック可能になるように */
}

img {
    pointer-events: auto;
}

.site-footer,
.widget-area {
    display: none !important;
}

.site-header,
.widget-area {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

/* Contact Form 7の送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
    background: linear-gradient(to right, #00C9FF, #1371ff);
    color: white;
    padding: 12px 24px;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.wpcf7 input[type="submit"]:hover {
  background: linear-gradient(to right, #feb47b, #ff7e5f); /* ホバー時のグラデーション反転 */
}

/* 必須ラベルのスタイル */
.required {
    background-color: #ff0000; /* 背景色を赤に設定 */
    color: #ffffff; /* 文字色を白に設定 */
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 10px;
}

/* 任意ラベルのスタイル */
.optional {
    background-color: #abb8c3; /* 背景色を赤に設定 */
    color: #ffffff; /* 文字色を白に設定 */
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 10px;
}

/* 固定ボタン */
#floating-btn1,
#floating-btn2 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0; /* 初期状態で透明 */
    visibility: hidden; /* 初期状態で非表示 */
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* 透明度の変化と表示切替の遅延 */
}

#floating-btn1 .pc-img,
#floating-btn2 .pc-img {
    width: 250px;
    height: auto;
    display: block;
}


#floating-btn1 .sp-img,
#floating-btn2 .sp-img {
	display: none;
}

#floating-btn1 img:hover,
#floating-btn2 img:hover,{
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* カスタムヘッダー */
#custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明 */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 横方向の余白 */
}

.custom-header-content {
    display: flex;
    width: 100%;
    align-items: center;
}

/* 左側の画像をまとめるコンテナ */
.left-container {
    display: flex;
    align-items: center;
    gap: 50px; /* left1-image と left2-image の間隔 */
}

/* 左側の画像 */
.left-image {
    height: 60px;
    display: block;
}

#custom-header.scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* スクロール時に背景色を濃くする */
}

/* モバイル用のスタイルをここに記述 */
@media (max-width: 768px) {
	.vk-mobile-nav-menu-btn {
		display: none;
	}
	.top-image {
		width: 70%;
	}
	.top-space1 .vk_block-margin-xl--margin-top {
      height: 70px !important;
	  margin: 0 !important;
	}
	.top-space2 .vk_block-margin-xs--margin-top,
    .top-space4 .vk_block-margin-xs--margin-top {
      height: 5px !important;
	  margin: 0 !important;
	}
	.top-space3 .vk_block-margin-md--margin-top{
      height: 10px !important;
	  margin: 0 !important;
	}
    .top-space5 .vk_block-margin-lg--margin-top {
      height: 50px !important;
	  margin: 0 !important;
	}
	.vision-heading {
	    font-size: 15px;
	}
	.vision-heading {
	    font-size: 30px;
	}
    .vision-space3 .vk_block-margin-lg--margin-top {
      height: 3px !important;
	  margin: 0 !important;
	}
    .relief-space1 .vk_block-margin-lg--margin-top,
    .relief-space2 .vk_block-margin-lg--margin-top {
      height: 30px !important;
	  margin: 0 !important;
    }
    .relief-space3 .vk_block-margin-lg--margin-top,
    .relief-space4 .vk_block-margin-lg--margin-top {
      height: 20px !important;
	  margin: 0 !important;
    }
	.content-heading h1 {
		line-height: 1.5;
	}
    .content-heading span[data-fontsize="55px"] {
        font-size: 40px !important; /* 55px → 40px */
    }	
    .content-heading span[data-fontsize="30px"] {
        font-size: 20px !important; /* 30px → 20px */
    }
	.content-image1-1,
	.content-image2-1,
	.content-image3-1 {
		width: 40px;
	}
    /* 見出しのフォントサイズを小さくする */
    .wp-block-vk-blocks-heading .vk_heading_title {
        font-size: 22px; /* 全体のフォントサイズを調整 */
    }
    .wp-block-vk-blocks-heading .vk_inline-font-size {
        font-size: 30px !important; /* インライン要素のフォントサイズを変更 */
    }
    /* モバイル表示で見出しのフォントサイズを小さく調整 */
	.end-heading h1 {
		line-height: 1.5;
	}
    .end-heading h1 {
        font-size: 22px; /* 見出し全体のフォントサイズを調整 */
    }
    .end-heading .vk_inline-font-size,
    .end-heading .vk_highlighter {
        font-size: 30px !important; /* インライン要素のフォントサイズを調整 */
    }
    /* モバイル表示でパラグラフ内の文字サイズを小さく調整 */
    .vk_block-margin-0--margin-top .vk_inline-font-size {
        font-size: 18px !important; /* インライン要素のフォントサイズを小さくする */
    }
   .end-space2 .vk_block-margin-xl--margin-top,
    .end-space4 .vk_block-margin-xl--margin-top {
      height: 30px !important;
	  margin: 0 !important;
	}
    .price-
    .information-cover {
        height: 300px;	
    }
	.confirmation-text1 span,
	.confirmation-text2 span {
        font-size: 25px !important;
        font-weight: bold !important;
    }
	.confirmation-space2 .vk_block-margin-md--margin-top
	.confirmation-space3 .vk_block-margin-md--margin-top {
      height: 10px !important;
	  margin: 0 !important;		
	}
    .information-cover {
        position: relative;
        min-height: 50px;
    }
	.information-space1,
	.information-space2,
	.information-space3 {
        height: 10px;	
	} 
	.information-text1,
	.information-text2,
	.information-text3,
	.information-text4 {
		font-size: 15px;
	}
	#floating-btn {
	bottom: 0;
    left: 0;
	width: 100vw;
    }
    #floating-btn .pc-img {
	    display: none;
    }
	.sp-img {
        display: block;
		width: 100%;
        height: auto;
    }	
	#custom-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明 */
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0　20px; 
    }
    .custom-header-content {
       display: flex;
        width: 100%;
        align-items: center;
    }
    /* 左側の画像をまとめるコンテナ */
    .left-container {
        display: flex;
        align-items: center;
        gap: 20px; /* left1-image と left2-image の間隔 */
    }
    /* 左側の画像 */
    .left-image {
        height: 40px;
		width: auto;
        display: block;
    }
    #custom-header.scrolled {
        background-color: rgba(255, 255, 255, 0.9); /* スクロール時に背景色を濃くする */
    }
}
/* 表示切替 */
.top-cover-pc-image {
    display: block;
}
.top-cover-sp-image {
    display: none;
}
/* モバイル表示時 */
@media (max-width: 768px) {
    .top-cover-pc-image {
        display: none;
    }
    .top-cover-sp-image {
        display: block;
    }
}
.top-image2 img {
    content: url('https://i-major.jp/Iunyou/lp/wp-content/uploads/2025/03/edc5934ee9adb28c3dbe0a7a0f08b29f-1024x356.png');
}
@media (max-width: 768px) {
    .top-image2 img {
        content: url('https://i-major.jp/Iunyou/lp/wp-content/uploads/2025/03/7a85307ed8ac33698a685d5f6b179bf0.png');
    }
}
.top-heading-pc-text,
.relief-heading-pc-text,
.end-heading-pc-text,
.warranty-text-pc-text,
.price-text3-pc-text {
    display: block;
}
.top-heading-sp-text,
.relief-heading-sp-text,
.end-heading-sp-text,
.warranty-text-sp-text,
.price-text3-sp-text {
    display: none;
}
.end-heading-pc-text {
	line-height:1.5;
}
/* モバイル表示時 */
@media (max-width: 768px) {
    .top-heading-pc-text,
    .relief-heading-pc-text,
    .end-heading-pc-text,
    .warranty-text-pc-text,
    .price-text3-pc-text {
        display: none;
    }	
	.top-heading-sp-text,
    .relief-heading-sp-text,
    .end-heading-sp-text,
    .warranty-text-sp-text,
    .price-text3-sp-text {
        display: block;
    }
}
/* モバイル向けフォントサイズ調整 */
@media screen and (max-width: 768px) {
    /* モバイル表示時のタイトル全体のサイズ */
    .top-heading-sp-text h1 {
        font-size: 36px; /* モバイルで全体のタイトルフォントを大きく */
    }
    /* モバイル表示時の個別のフォントサイズ調整 */
    .top-heading-sp-text span[data-fontsize="55px"] {
        font-size: 40px !important; /* 55px → 40px */
    }
    .top-heading-sp-text span[data-fontsize="90px"] {
        font-size: 65px !important; /* 90px → 65px */
    }
    .top-heading-sp-text span {
        font-size: 100% !important; /* モバイルでは基本フォントサイズを100%に */
    }
    .top-heading-sp-text .vk_inline-font-size {
        font-size: 100% !important; /* モバイルではフォントサイズを100%に */
    }
    .top-heading-sp-text {
        line-height: 1;
		text-align: left;
    }
}