/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 27 2025 | 02:29:46 */
/* -------------------------------------- */
/* 基本設定 */
/* -------------------------------------- */
body, p, h1, h2, h3, h4, h5, h6, a, li, span, div {
  font-family: "M PLUS 1p", sans-serif !important;
  font-style: normal;
}

h2{font-size:2.8rem; font-weight:800;}
h3{font-size:1.8rem; font-weight:700;}
h4{font-size:1.3rem;}
h5{font-size:1.2rem;}
p{font-size:1.1rem; font-style: normal;}
@media (max-width: 821px) {
  h2{font-size:1.8rem; white-space:nowrap;}
  h3{font-size:1.3rem;}
  h4{font-size:1.2rem;}
  h5{font-size:1.1rem;}
　p{font-size:1rem; line-height:180%; }
}
.nonpc{display: none;}
.pc {display: block !important;}
.clear{
	float:none;
	clear:both;
	padding: 0px;
	margin:0px;
}
@media (max-width: 821px) {
	.nonpc{display:block;}
	.pc {display: none !important;}
}
@media (min-width: 821px) {
	:root {
        --vk-width-container: 1300px;
		    }
}

/* コメント非表示 */
#comments{display:none;}

/* ページ内リンクをなめらかに移動させる */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px  !important;; 
}

/* body全体の背景を透明に　※消しちゃダメ！裏の模様が見えなくなる */
body {
  background: transparent !important;
}

/* サイト全体の基本文字色を上書き */
body, .entry-content, .site-main p, .vk_block { color: #2e2e2d !important; }
.wp-block-cover { color: #2e2e2d !important;}

/* フォント、影 */
.italic-text {font-style: italic;}
.box-shadow {box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.05);}
#post-3 .entry-body,
#post-311 .entry-body,
#post-315 .entry-body,
#post-319 .entry-body{background:rgba(255, 255, 255, 0.7);} 

.is-style-vk-heading-plain, .editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain {color: #2e2e2d;}
.wp-block-list{font-style: 400; color: #ff0000;}

.box:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/*   ヘッダー完全固定＆ページ内リンク時の消失防止*/
@media screen and (min-width: 992px) {
/* 1. ヘッダー本体の強制固定（ジャンプ時も消さない） */
header.site-header,
.header_scrolled header.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; /* 最前面を確保 */
    background-color: #fff !important;

    /* テーマのアニメーションや隠す動きをすべて無効化 */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* 位置をずらす処理を無効化 */
    transition: none !important; /* ふわっと消える処理を無効化 */
    animation: none !important;  /* スライドする処理を無効化 */
    
    /* 影をつけて境界を見やすくする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2. ロゴやメニューなどの中身を常に表示させる */
/* 通常時もスクロール時も、強制的にブロック表示にする */
.site-header-logo,
.site-header-sub,
.header-top,
.vk-campaign-text,
.header_scrolled .site-header-logo,
.header_scrolled .site-header-sub,
.header_scrolled .header-top,
.header_scrolled .vk-campaign-text {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
	body {
        padding-top:70px !important;
    }
}


/* -------------------------------------- */
/* メインビジュアル */
/* -------------------------------------- */
.top-h1{white-space:nowrap;}
.top-icon_area_text{font-size:1.2rem; white-space:nowrap; }
.main-img{ z-index:100; }
@media (max-width: 821px) {
	.top-icon_area_text{font-size:1.0rem; white-space:nowrap;}
}
@media (max-width: 414px) {
	.top-icon_area_text{font-size:0.9rem;white-space:nowrap; font-weight:600;}
	.sp_top_img{margin-top:-80px !important;}
}


/* -------------------------------------- */
/* こんなお悩み、ありませんか？ */
/* -------------------------------------- */
.case-area h4{font-size:1.5rem}
.case_no span{padding:10px;}
.case-img{width:75%; margin:10px auto;}
@media (max-width: 414px) {
	.case-area h4{font-size:1.5rem}
}


/* -------------------------------------- */
/* Youtube動画 */
/* -------------------------------------- */
.youtube-area h2{font-size:2rem}
@media (max-width: 414px) {}
.tablet-frame-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

.tablet-device {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
  border-radius: 40px;
  padding: 25px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  border: 4px solid #c0c0c0;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 0 0 2px #1a1a1a,
    0 0 0 6px linear-gradient(145deg, #e8e8e8, #a8a8a8);
}

.tablet-screen {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.tablet-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .tablet-device {
    border-radius: 30px;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .tablet-frame-container {
    padding: 10px;
  }
  
  .tablet-device {
    border-radius: 25px;
    padding: 12px;
  }
  
  .tablet-screen {
    border-radius: 6px;
  }
}


/* -------------------------------------- */
/* 選べる理由 */
/* -------------------------------------- */
.reason-area p{font-size:1.3rem; font-weight:500;}
.reason-area img{width:150px;}
@media (max-width: 821px) {
	.reason-area p{font-size:1.3rem;}
	.reason-area img{width:100%; padding:0px; margin:0px;}
}


/* -------------------------------------- */
/* ご利用の流れ */
/* -------------------------------------- */
.flow-area{width:80%; margin:0px auto;}
.flow-li{font-size:1.3rem; font-weight:500;}
.flow-sub-title{height:70px; line-height:50px;}
.flow-area img{width:100%;}
@media (max-width: 1181px) {
	.flow-area{width:100%;}
	.flow-li{font-size:1.2rem;}
	.flow-sub-title{height:auto; line-height:1;}
}


/* -------------------------------------- */
/* お問い合わせ */
/* -------------------------------------- */
.contact_form{
	width:75%;
	margin:0px auto;
	padding:1%;
	font-size:1rem;
	border-radius:10px;
}
.contact_form p{padding:0px;margin:0px;}
.contact_table{border:none; margin:2% 0px;}
.contact_table th{ width:30%; padding:2%; border-top:#ececec 1px solid; border-bottom:#ececec 1px solid; border-left:none; border-right:none;}
.contact_table td{ width:65%; padding:2%; border-top:#ececec 1px solid; border-bottom:#ececec 1px solid; border-left:none; border-right:none;}
.contact_table td h3{font-size:1rem;}

.hs{
	background:#ff0000;
	color:#fff;
	border-radius:5px;
	font-size:0.9rem;
	height:0;
	padding:1px 5px 3px;
	margin-left:10px;
}
input[type="text"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
input[type="tel"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
input[type="email"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
textarea {
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
}

@media (max-width: 820px) {
	.contact_form{width:95%;　padding-left:3%;}
	.contact_table th{width:95%; padding-left:3%; display:block; text-align:left;border-bottom:none;}
	.contact_table td{width:95%; padding-left:3%; display:block; border-top:none;}
	input[type="text"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	input[type="tel"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	input[type="email"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	textarea {width:95%;}
}

/* -------------------------------------- */
/* お問い合わせ固定ボタン */
/* -------------------------------------- */
/* 1. アニメーションの定義 (キーフレーム) */
/* ボタンを上下にバウンスさせるアニメーション */
@keyframes bounce-rhythm {
    0%, 100% {
        /* 動きがない時: 原点位置 */
        transform: translateY(0);
        /* 動きの終わりをゆっくりにする */
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    }
    50% {
        /* 一番跳ね上がった時 */
        transform: translateY(-8px);
        /* 跳ね上がる動きを速く、メリハリをつける */
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    }
}

/* 1. 固定ボタンのスタイル設定 */
#fixed-contact-button {
    position: fixed; /* 固定表示の設定 */
    right: 45%;       /* 画面右端からの位置 */
    bottom: 10px;      /* 画面下端からの位置 */
    z-index: 9999;     /* 他の要素より手前に表示 */
    animation: bounce-rhythm 1s infinite;
	animation-delay: 0.5s;
	display: block;   
    /* デザインの調整 */
    background-color: #e73174; /* 例: ボタンの背景色 */
    color: #ffffff;            /* 文字色 */
    font-weight: bold;
	font-size:1.2rem;
    padding: 12px 24px;
	border-radius: 30px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* スムーズな表示/非表示のための準備 */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
}

/* 2. 非表示クラスの定義 */
/* JavaScriptでこのクラスが付与されるとボタンが非表示になります */
#fixed-contact-button.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 非表示時にクリックできないようにする */
}

/* 3. レスポンシブ調整（任意） */
@media (max-width: 768px) {
    #fixed-contact-button {
        padding: 10px 18px;
        font-size: 14px;
		right: 30%; 
    }
}


/* -------------------------------------- */
/* 会社情報 */
/* -------------------------------------- */
.company_table{width:80%; margin:0px auto;}
.company_table td{ padding:2%;}
.company_table strong{padding:0px 20px;}
.company_dl{
	margin:0px; padding:0px; clear:both;
	display:inline-block;
}
.company_dl dt{
	margin:1% 1% 1% 0px;
	padding:1% 2%;
	display:inline-block;
	width:20%;
	text-align:center;
	background-color: #f0f0f0;
	font-weight:normal;
}
.company_dl dd{
	margin:0px; padding:0px;
	display:inline-block;
	width:70%;
}
.company_work_list{
	list-style:none;
	margin:0px; padding:0px;
}
.company_work_list li{
	background:url(https://p-flare.com/processflare/wp-content/uploads/icon_h5.png)  no-repeat left 5px;
	background-size:15px auto;
	padding-left:25px;
}

@media (max-width: 480px) {
	.company_table{width:100%; margin:0px auto;}
	.company_table td{ padding:5px;}
	.company_table strong{padding:0px;}
	.company_dl dt{width:30%;}
	.company_dl dd{width:60%;}
	.company_work_list li{background-size:12px auto; background-position:left 6px; padding-left:20px;}
}