@charset "UTF-8";

/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*全体の設定---------------*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');





:root{
--vk-color-text-body: #575768;
}
body, html{
font-family: 'Kosugi Maru', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color: #575768;
}





/* ▼ SWELLのコピーライト帯の背景色・文字色 */
.l-footer__foot{
  background-color:#9C9CC2; /* ←好きな色に */
  color:#fff;
}
.l-footer__foot a{ color:#fff; }

/* ──フッター内のメニューリンクを一括で小さく── */
footer nav a,
footer .wp-block-navigation a,
footer .menu a,
.l-footer nav a,
.l-footer__widgets .wp-block-navigation a,
.l-footer__widgets .menu a,
.l-footer__nav a {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ▼ TOPページのブログ画像のホバー */
.top_blog img {
  transition: transform .4s ease, filter .4s ease;
}
.top_blog img:hover {
  transform: scale(1.05);
  filter: grayscale(30%) ;
}


/* 見出しのタイトル */
h2.is-style-section_ttl {
  position: relative;
  padding-bottom: 0.8rem !important;          /* ← 隙間を強制的に確保 */
  margin-bottom: 1.2rem;
  /* フォント */
  font-family: 'Raleway', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7673A0;
  /* 下線（背景） */
  background-image: linear-gradient(90deg, #f5aeb3 0%, #dfd0ec 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 20% 3px !important;     /* 幅は20%→お好みで */
  background-position: 50% 100% !important;/* 中央寄せ bottom */
  /* 文字グラデ等の副作用を無効化 */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  /* 余計な装飾リセット */
  border: none !important;
}

/* プルダウンの子メニュー（通常時） */
.l-header .sub-menu a {
  display: block;
  padding: 6px 12px;
  color: #333;  /* ← ヘッダーの親メニューと同じ色にする */
  background-color: #F2F2FD; /* ← 背景が白なら指定、透明なら外す */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* プルダウンの子メニュー（hover時） */
.l-header .sub-menu a:hover {
  background-color: #d4d4e8; /* ← ホバー背景色 */
  color: inherit;            /* ← 文字色は親と同じに */
}


/* フッターメニュー小さく */
.w-footer__box .widget_nav_menu .menu a {
  font-size: 14px !important;  /* ← 好きなサイズに調整 */
  line-height: 1.5 !important; /* 行間も調整可能 */
}
/* フッターメニューホバー色 */
.w-footer__box .widget_nav_menu .menu a {
  display: block;              /* ← 背景色を全体に効かせるために必須 */
  padding: 6px 10px;           /* ← 余白を調整すると「板っぽさ」が出る */
  transition: background-color 0.3s ease; /* ← スムーズなアニメーション */
}

.w-footer__box .widget_nav_menu .menu a:hover {
  background-color: #d4d4e8;   /* ← ホバー時の板色 */
  color: inherit;              /* ← 文字色は元のまま */
}


/* フッターロゴ画像ウィジェットの下余白を調整 */
#media_image-2 {
  margin-bottom: 2px !important; /* ← デフォルトより小さく。0でも可 */
}

/* 念のため画像にも直で余白を消す指定 */
#media_image-2 img {
  margin-bottom: 0 !important;
  display: block; /* インラインの余白を消す */
}

/* TOP制作実績カルーセル画像部分 */
.works-grid .swiper-slide {
  margin-right: 20px !important;  /* VKの初期値を上書き */
}


/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}
table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}
.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}
/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}
.CF7_table ::placeholder {
	color:#797979;
}
/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #E9AAAB;/*ピンク*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}
/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}
/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#F2F2FD;/*薄紫*/
	}
}
/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#E9AAAB;/* ピンク*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}
.CF7_btn{
	text-align:center;
	margin-top:20px;
}
.wpcf7-spinner{
	width:0;
	margin:0;
}
/* ラベルだけ非表示（推奨） */
#fix_bottom_menu a > .ttl {
  display: none !important;
}











/* === 追従ボタン　　共通: iOSセーフエリア配慮 === */
/* === 共通: iOSセーフエリア配慮 === */
:root { --safe-bottom: env(safe-area-inset-bottom); }

/* === スマホ：下固定バーの背景＆アイコン微調整 === */
@media (max-width: 959px) {

  /* PC版を非表示（再確認） */
  #fixed-sidebar-menu { display: none !important; }

  /* 背景色を #7673A0 に変更 */
  #fixed-bottom-menu {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    width: 100%;
    background: #7673A0 !important;  /* ← 背景色ここ */
    padding: .3em .4em calc(.3em + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);

    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: stretch;
    gap: 6px;
  }

  /* カラム構成（横4つ並び） */
  #fixed-bottom-menu .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100%;
    margin: 0 !important;
  }
  #fixed-bottom-menu .wp-block-column {
    flex: 1 1 25% !important;
    margin: 0 !important;
  }

  /* ボタンの整列 */
  #fixed-bottom-menu .swell-block-button__link {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
    padding: .8rem 0;
  }

  /* ★ アイコンを右に3pxずらす */
  #fixed-bottom-menu .__icon {
    display: block;
    transform: translateX(3px); /* 右に3px移動 */
  }
	
/* 端末のホームインジケータ分だけ下に余白を確保 */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .p-fixBtnWrap { bottom: 5.5em; } /* SWELLの「上に戻る」回避（必要なら調整） */	
}










/* === PC：右サイド縦型CTA（縦書きタブ） === */
@media (min-width: 960px) {
  #fixed-bottom-menu { display: none; } /* PCではモバイル用を消す */
  #fixed-sidebar-menu {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
  }

  /* 個別ボタン（丸アイコンのみ想定） */
  #fixed-sidebar-menu a {
    display: inline-grid;
    place-items: center;
    width: 55px; height:55px;
  }
	
  #fixed-sidebar-menu a {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;       /* ← 丸くする */
    padding: 0;               /* ← アイコンとの余白を詰める */
  }

  /* hover時のアニメーション（任意） */
  #fixed-sidebar-menu a:hover {
    transform: translateX(-2px);
    opacity: 0.9;
  }
  #fixed-sidebar-menu a.swell-block-button__link .__icon {
    display: block;
    transform: translate(2px, 9px); /* 右3px, 下10px */
  }
}