@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


.scroll-ad {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 12px);
background-image: linear-gradient(90deg, #10b981, #0d9488);  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10000;
  pointer-events: auto;
}

.scroll-ad.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scroll-ad__link {
  color: inherit;
  text-decoration: underline;
  font-size: 14px;
}




.promo-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #111;
  color: #fff;
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.promo-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.promo-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.promo-banner__close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 8px;
}




.formbox {
  width: 80%;
  /* text-align: center; */
  margin: 0 auto;
}

.textCenter{
  text-align: center;
}

.padding10{
  padding: 10px;
}

.adcontents{
  padding: 20px;
}

.adcontents-adfooter{
  padding: 0px;
  margin: 0px 10px;
}

.overlay {
 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 128, 128, 0.7);
    /* display: flex; */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
}

.connectbox{
background: white;
padding: 45px 20px 20px;
display: flex;
position: relative
}

.connectbox-adfooter{
display: flex;
position: relative;
padding: 23px 0px 0px 0px;
}

.prtext{
  position: absolute;
  top: -5px;
  left: 0px;
  background: black;
  padding:2px 5px;
  font-size: 12px;
  font-weight: bold;

}

.closeButton-design{
  background-color: black;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  padding: 4px;
  width: 50px;
  text-align: center;
  position: absolute;
  top: 10px;
  left: 10px;
}

.textfont14{
  font-size: 14px;
  background: whitesmoke;
}


.linkdiv{
  padding: 50px 0px;
  background-color: ;
}

/* ===== Free相談CTAを1つのボックスでまとめる ===== */
:root{
  --cta-panel-bg: #f5f9ff;   /* 背景（淡ブルー） */
  --cta-panel-bd: #e6efff;   /* 枠線 */
  --cta-radius:   24px;      /* 角丸 */
  --cta-maxw:     880px;     /* 最大幅 */

  --btn-grad-1: #03e8ff;
  --btn-grad-2: #00d6f7;
  --btn-grad-3: #00c4e9;
  --btn-shadow: rgba(0,0,0,.15);
  --btn-base:   #0aa7b7;
}

/* まとめて囲むために中央のブロックを親ボックス化 */
.swell-block-button[data-id="d262fae1"] {
  position: relative;
  z-index: 0;
  max-width: var(--cta-maxw);
  margin: 0px auto;  
  padding: 0px 20px 10px; /* 中の上下余白 */
  /* background: var(--cta-panel-bg);
  border: 1px solid var(--cta-panel-bd); */
  border-radius: var(--cta-radius);
  text-align: center;
}

/* この中に入る上下のpタグも一緒に整列させる */
.swell-block-button[data-id="d262fae1"]::before,
.swell-block-button[data-id="d262fae1"]::after {
  content: none !important; /* 擬似背景は不要 */
}

/* 上段テキスト */
p.has-text-align-center:has(+ .swell-block-button[data-id="d262fae1"]) {
  margin: 0 0 14px !important;
  color: #ff2b2b;
  font-weight: bold;
  line-height: 2;
}

/* 下段テキスト */
.swell-block-button[data-id="d262fae1"] + p.has-text-align-center {
  margin: 16px 0 0 !important;
  color: #2f3a44;
  font-weight: bold;
}

/* === ボタン === */
.swell-block-button[data-id="d262fae1"] .swell-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 18px 48px;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--btn-grad-1), var(--btn-grad-2) 55%, var(--btn-grad-3));
  color: #fff; text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  box-shadow:
    0 12px 0 var(--btn-base),
    0 14px 28px var(--btn-shadow);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* ホバー */
.swell-block-button[data-id="d262fae1"] .swell-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow:
    0 13px 0 var(--btn-base),
    0 18px 36px var(--btn-shadow);
}

/* URL未設定でも薄くしない・クリック不可 */
.swell-block-button[data-id="d262fae1"] .swell-block-button__link[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1;
}




/* ——— フロントページだけ横幅を大きく ——— */
/* style.css 末尾に追加  ─ Cocoon Child */

/*────────────────────────────
  フロントページだけ幅を 1280px
────────────────────────────*/

.content {
  margin-top: 0px;
}

.article h1{
  line-height: 1.25;
  font-weight: bold;
  padding:50px 0px 50px;
  background: linear-gradient(135deg, #f0fdf4, #d1fae5);
  text-align: center;
  font-size: 2.25rem;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.entry-title{
  margin:0;
}


.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #0f172a;
  position: relative;
}

.logo::before {
  content: "";
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url('http://ohisama-everyday.com/wordpress/wp-content/uploads/2025/06/sunbeam.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.site-name-text-link{
  padding:0px ;
}



.header {

  background: white;
}

body.front-top-page .main,
body.front-top-page #container > .wrap,
body.front-top-page .header-in,
body.front-top-page .content-in,
body.front-top-page .footer-in{
  /* ① 親の "width:860px" を打ち消す  */
  width:auto !important;

  /* ② 好きな最大幅  */
  max-width:1280px !important;

  /* ③ 左右に少し余白  */
  padding-left:1rem;
  padding-right:1rem;
}

/* サイドバーを非表示（フロント専用） */
body.front-top-page #sidebar{ display:none !important; }


/* ヘッダー内を左右に分割する */
#header-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ロゴを左寄せ＆余白をゼロに */
.logo-header{margin:0;}

/* メニュー（#navi）を同じ行に乗せる */
#navi{
  flex:1 1 auto;
  order:2;              /* ロゴの後ろに置く */
}
#navi-in{
  display:flex;
  gap:1.5rem;
  justify-content:flex-end;
}






@layer base {
  html { scroll-behavior:smooth; }
  *   { font-family:'Noto Sans JP',sans-serif; }
  body { line-height:1.6; }
}

/* -------- ユーティリティ追加 -------- */
@layer utilities {
  .line-clamp-2 {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .line-clamp-3 {
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* -------- 独自アニメーション -------- */
@keyframes fadeInUp {
  from {opacity:0;transform:translateY(30px);}
  to   {opacity:1;transform:translateY(0);}
}
.animate-fade-in-up { animation:fadeInUp .6s ease-out both; }

/* Cocoon 固有の不要余白を調整（任意） */
.wrap { max-width: 1280px; }


@media (min-width: 1024px) {
  .container {
      max-width: 100% !important;
  }
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

  .container {
    max-width: 100% !important;
}






}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

  .container {
    max-width: 100% !important;
}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

  .container {
    max-width: 100% !important;
}

}


@media (max-width: 640px) {
  .grid span {
    font-size: 1.25rem; /* 約 text-2xl 相当 */
  }
  .grid p {
    font-size: 0.75rem; /* 約 text-xs 相当 */
  }
}



@media (max-width: 768px) {

.connectbox{
background: white;
padding: 45px 20px 20px;
display: flex;
position: relative;
flex-direction: column;
}

.prtext{
  position: absolute;
  top: -6px;
  left: 0px;
  background: black;
  padding:2px;
  font-size: 10px;
  font-weight: bold;

}

.scroll-ad.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    width: 89%;
}



}