@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/*
 * PC スマホ共用CSS
 */

/* フォント */
body {
  /* font-family: "Noto Sans JP", sans-serif; */
  font-family: "Zen Maru Gothic", sans-serif;
}


/* ロード画面 */
#progress {
  z-index: 999999 !important;
}
#progress .progress_image_wrap #progress_image {
  width: fit-content;
  left: 0;
  right: 0;
  margin-inline: auto;
}


/* EASYS
---------------------------------------------------------------------------------------------------- */
.facebook_banner {
  margin: 20px 0;
}
.facebook_banner img {
  width: 100%;
  height: auto;
}
.facebook_banner a img:hover {
         opacity: 0.75;
  -ms-filter: "alpha(opacity=75)";  /* ie 8 */
      filter: alpha(opacity=75);        /* ie lt 8 */

    -moz-opacity: 0.75;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.75;              /* Safari 1.x */
}
/*Googleカレンダー*/
.cal_wrapper {
  margin: 2.0833% auto;
  min-width: 300px; /* 最小幅 */
  max-width: 960px; /* 最大幅 */
}
.googlecal {
  position: relative;
  padding-bottom: 180%; /* 縦横比 */
  height: 0;
}
.googlecal iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
  .googlecal {
    padding-bottom: 75%;
  }
}
/*Youtube*/
.youtube_wrap {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 56.25%;
  height: 0;
}
.youtube_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*「reCAPTCHAで保護されています」を非表示*/
.grecaptcha-badge {
  visibility: hidden;
}
/*「メディアを追加＞URL から挿入」を使用した際に作られる要素*/
iframe.wp-embedded-content {
  width: 100%;
}


/* デザインブロックのテンプレートパターン6種(PC/SP共通)
---------------------------------------------------------------------------------------------------- */
/* ----- 変数 ----- */
.template_db {
  --template_db-bg: #1e2021;/*背景*/
  --template_db-font-color: #e8e8e8;/*文字色*/
  --template_db-edge-color: #ffeb3b;/*パターン②の縁色*/
  --template_db-text-align-y: end;/*テキスト上下アライン*/
  --template_db-text-align-x: left;/*テキスト左右アライン*/
  --template_db-wh: max(100vw,100vh);
}
/* PCのみ */
html.pc .template_db {
  --template_db-image-padding: 5% 5% 10% 10%;/*イメージエリア余白*/
  --template_db-text-padding: 2% 10% 5% 5%;/*テキストエリア余白*/
  --template_db-text-bg: rgba(0,0,0,0.3);/*テキストエリア背景*/
  --template_db-margin: calc(clamp(1300px,100vw,2000px)*(10/2000));
}
/* SPのみ */
html.sp .template_db {
  --template_db-image-padding: 10% 0 0 0;/*イメージエリア余白*/
  --template_db-text-padding: 2% 5% 10% 5%;/*テキストエリア余白*/
  --template_db-margin: calc(100vw*(10/640));
}
/* ----- 親 ----- */
.template_db {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--template_db-bg);
}
html.pc .template_db {
  display: flex;
  align-items: var(--template_db-text-align-y);
  max-height: clamp(1300px,100vw,2000px);
  height: 100vh;
}
html.sp .template_db {
  padding: 0 !important;
  height: auto;
}
/* ----- 子 ----- */
/* 画像 */
.template_db .db_image {
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: var(--template_db-image-padding);
  width: 100%;
  opacity: 1;
}
html.pc .template_db .db_image {
  position: absolute;
  height: 100%;
}
html.sp .template_db .db_image {
  position: relative;
  max-height: 100vw;
  height: 100vh;
}
.template_db .db_image > div {
  position: relative;
  width: 100%;
  height: 100%;
}
.template_db .db_image > div img {
  position: absolute;

  object-fit: cover;
}
/* テキスト */
.template_db .db_text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: var(--template_db-text-padding);
  width: 100%;
  text-align: var(--template_db-text-align-x);
}
html.pc .template_db .db_text {
  background: var(--template_db-text-bg);
}
.template_db .db_text > div {
  color: var(--template_db-font-color);
  line-height: normal;
}
/* ----- 孫 ----- */
/* タイトル */
.template_db .db_text .db_title {
  font-weight: bold;
  font-size: clamp(40px,4.0vw,60px);
}
/* コメント */
.template_db .db_text .db_comment {
  font-size: clamp(14px,1.2vw,18px);
}
.template_db .db_text .db_comment p:not(:last-of-type) {
  margin-bottom: 1%;
}
/* ボタン */
.template_db .db_text .db_button {
  font-weight: bold;
  font-size: clamp(14px,1.2vw,18px);
}
/* タイトル,コメント,ボタン間のマージン */
.template_db .db_text > div:nth-last-of-type(1),
.template_db .db_text > div:nth-last-of-type(2) {
  margin-top: 1%;
}
/* ----- パターン① ----- */
.template_db.pattern1 .db_image > div img {
  width: calc(50% - var(--template_db-margin));
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23,1,0.32,1) 0ms, transform 700ms cubic-bezier(0.23,1,0.32,1) 0ms;
}
.template_db.pattern1 .db_image > div img:nth-of-type(1) {
  top: 0;
  left: 0;
  height: 100%;
  transition-delay: calc(80ms*0);
  transform: translateX(100vw) rotateZ(10deg);
}
.template_db.pattern1 .db_image > div img:nth-of-type(2) {
  top: 0;
  right: 0;
  height: calc(50% - var(--template_db-margin));
  transition-delay: calc(80ms*1);
  transform: translateX(100vw) rotateZ(15deg);
}
.template_db.pattern1 .db_image > div img:nth-of-type(3) {
  right: 0;
  bottom: 0;
  height: calc(50% - var(--template_db-margin));
  transition-delay: calc(80ms*2);
  transform: translateX(100vw) rotateZ(20deg);
}
.template_db.pattern1.on_screen .db_image > div img {
  opacity: 1;
  transform: translateX(0vw) rotateZ(0deg);
}
/* ----- パターン② ----- */
.template_db.pattern2 .db_image > div img {
  width: 50%;
  height: 70%;
  border: var(--template_db-margin) solid var(--template_db-edge-color);
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.19,1,0.22,1) 0ms, transform 900ms cubic-bezier(0.19,1,0.22,1) 0ms;
}
.template_db.pattern2 .db_image > div img:nth-of-type(1) {
  top: -5%;
  left: -5%;
  transition-delay: calc(30ms*0);
  transform: translate(50vw,-50vh) scale(0.8) rotate(15deg);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(1) {
  transform: translate(0vw,0vh) scale(0.8) rotate(-15deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(2) {
  top: -5%;
  right: -5%;
  transition-delay: calc(30ms*1);
  transform: translate(50vw,0vh) scale(0.78) rotate(39deg);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(2) {
  transform: translate(0vw,0vh) scale(0.78) rotate(13deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(3) {
  bottom: 0;
  left: -3%;
  transition-delay: calc(30ms*2);
  transform: translate(50vw,50vh) scale(0.78) rotate(30deg);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(3) {
  transform: translate(0vw,0vh) scale(0.78) rotate(10deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(4) {
  right: 0;
  bottom: -5%;
  transition-delay: calc(30ms*3);
  transform: translate(50vw,25vh) scale(0.76) rotate(15deg);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(4) {
  transform: translate(0vw,0vh) scale(0.76) rotate(-15deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(5) {
  top: 40%;
  left: 50%;
  transition-delay: calc(30ms*4);
  transform: translate(100%,0%) rotate(30deg);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(5) {
  transform: translate(-50%,-50%) rotate(0deg);
}
.template_db.pattern2.on_screen .db_image > div img {
  opacity: 1;
}
/* ----- パターン③ ----- */
.template_db.pattern3 .db_image > div img {
  top: 5%;
  left: 25%;
  width: 50%;
  height: 70%;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.25,1,0.5,1) 0ms, transform 1200ms cubic-bezier(0.25,1,0.5,1) 0ms;
  transform: rotateZ(-40deg);
  transform-origin: 50% 200%;
}
.template_db.pattern3.on_screen .db_image[data-img_cnt="3"] {
  --pattern3-data-img_cnt: 3;
}
.template_db.pattern3.on_screen .db_image[data-img_cnt="4"] {
  --pattern3-data-img_cnt: 4;
}
.template_db.pattern3.on_screen .db_image[data-img_cnt="5"] {
  --pattern3-data-img_cnt: 5;
}
.template_db.pattern3.on_screen .db_image[data-img_cnt="6"] {
  --pattern3-data-img_cnt: 6;
}
.template_db.pattern3.on_screen .db_image[data-img_cnt="7"] {
  --pattern3-data-img_cnt: 7;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(1) {
  --index: 1;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(2) {
  --index: 2;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(3) {
  --index: 3;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(4) {
  --index: 4;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(5) {
  --index: 5;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(6) {
  --index: 6;
}
.template_db.pattern3.on_screen .db_image > div img:nth-of-type(7) {
  --index: 7;
}
.template_db.pattern3.on_screen .db_image > div img {
  transform: rotateZ(calc(-30deg + (60deg/(var(--pattern3-data-img_cnt) - 1)*var(--n))));

  --n: calc(var(--index) - 1);
}
.template_db.pattern3.on_screen .db_image > div img {
  opacity: 1;
}
/* ----- パターン④ ----- */
.template_db.pattern4 .db_image > div img {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23,1,0.32,1) 0ms, transform 700ms cubic-bezier(0.23,1,0.32,1) 0ms;
  transform: translateY(-100%);
}
.template_db.pattern4 .db_image > div img:nth-of-type(1) {
  bottom: 0;
  left: 5%;
  width: 80%;
  height: 70%;
  transition-delay: calc(50ms*0);
}
.template_db.pattern4 .db_image > div img:nth-of-type(2) {
  top: 15%;
  left: 25%;
  width: 30%;
  height: 50%;
  transition-delay: calc(50ms*1);
}
.template_db.pattern4 .db_image > div img:nth-of-type(3) {
  top: 0;
  right: 20%;
  width: 30%;
  height: 60%;
  transition-delay: calc(50ms*2);
}
.template_db.pattern4 .db_image > div img:nth-of-type(4) {
  right: 5%;
  bottom: 10%;
  width: 20%;
  height: 50%;
  transition-delay: calc(50ms*3);
}
.template_db.pattern4.on_screen .db_image > div img {
  opacity: 1;
  transform: translateY(0%);
}
/* ----- パターン⑤ ----- */
.template_db.pattern5 .db_image > div img {
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.5);
}
.template_db.pattern5 .db_image > div img:nth-of-type(1) {
  top: calc(50% + 0.07*var(--template_db-wh));
  left: calc(50% + 0.26*var(--template_db-wh));
  width: calc(0.25*var(--template_db-wh));
  height: calc(0.25*var(--template_db-wh));
  animation-delay: calc(50ms*0) !important;
}
.template_db.pattern5 .db_image > div img:nth-of-type(2) {
  top: calc(50% - 0*var(--template_db-wh));
  left: calc(50% + 0.03*var(--template_db-wh));
  width: calc(0.35*var(--template_db-wh));
  height: calc(0.35*var(--template_db-wh));
  animation-delay: calc(50ms*1) !important;
}
.template_db.pattern5 .db_image > div img:nth-of-type(3) {
  top: calc(50% - 0.05*var(--template_db-wh));
  left: calc(50% - 0.23*var(--template_db-wh));
  width: calc(0.3*var(--template_db-wh));
  height: calc(0.3*var(--template_db-wh));
  animation-delay: calc(50ms*2) !important;
}
.template_db.pattern5.on_screen .db_image > div img {
  animation: scale-easeOutElastic 1000ms ease-out 0ms forwards;
}
@keyframes scale-easeOutElastic {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.25);
  }
  80% {
    transform: translate(-50%,-50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
}
/* ----- パターン⑥ ----- */
.template_db.pattern6 .db_image > div img {
  top: 0;
  width: 40%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23,1,0.32,1) 0ms, transform 700ms cubic-bezier(0.23,1,0.32,1) 0ms;
  transform: translateX(100vw) rotateZ(25deg);

  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
          clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
}
.template_db.pattern6 .db_image > div img:nth-of-type(1) {
  left: 0;
  transition-delay: calc(40ms*0);
}
.template_db.pattern6 .db_image > div img:nth-of-type(2) {
  left: calc(50% - 20%);
  transition-delay: calc(40ms*1);
}
.template_db.pattern6 .db_image > div img:nth-of-type(3) {
  right: 0;
  transition-delay: calc(40ms*2);
}
.template_db.pattern6.on_screen .db_image > div img {
  opacity: 1;
  transform: translateX(0vw) rotateZ(0deg);
}


/*  フォント
---------------------------------------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", sans-serif;
}


/*  全体にフェードインアニメーション
---------------------------------------------------------------------------------------------------- 
#outer_block .easys_content_inner,
#outer_block .post_data,
#outer_block .read_more_btn,
#outer_block .entry_title,
#outer_block .table_area,
#outer_block .html_post,
#outer_block .entry_post,
#outer_block .main_btn {
  opacity: 0;
  transition: transform 1.0s ease 0s, opacity 1.0s ease 0s;
  transform: translateY(30px);
}
#outer_block .moved:not(.design_block) {
  opacity: 1;
  transform: translateY(0);
}
*/

/* ============================== oki専用CSS ============================== */
/* html.okieasys はoki版の場合のみ<html>に付与されるクラス */
/*  全体にフェードインアニメーション（oki専用）
---------------------------------------------------------------------------------------------------- */
html.okieasys #outer_block .easys_content_inner,
html.okieasys #outer_block .post_data,
html.okieasys #outer_block .read_more_btn,
html.okieasys #outer_block .entry_title,
html.okieasys #outer_block .table_area,
html.okieasys #outer_block .html_post,
html.okieasys #outer_block .entry_post,
html.okieasys #outer_block .main_btn {
  opacity: 0;
  transition: transform 1.0s ease 0s, opacity 1.0s ease 0s;
  transform: translateY(30px);
}
html.okieasys #outer_block .moved:not(.design_block) {
  opacity: 1;
  transform: translateY(0);
}

/* フェードイン除外 */
html.okieasys #outer_block .easys_content.nd_01.no_margin div:not(.design_block),
html.okieasys #outer_block #z48jozlomaq0g9k09qhm div:not(.design_block) {
  opacity: 1;
  filter: none !important;
  transition: none;
  transform: none !important;
}

/* トップ＆ティザーの簡易デザインブロック化カスタマイズ：ティザーブロックのアニメーション・フィルターを無効化 */
html.okieasys #od4a6curaddfejzin1sg .easys_content_inner,
html.okieasys #eg173hsqjyn64ycxkgbp .easys_content_inner,
html.okieasys #s5cyix273fa9omefdzo8 .easys_content_inner,
html.okieasys #fyys2q27qgxb3deo66yv .easys_content_inner,
html.okieasys #vn0r9qqlo5pn8nlda6km .easys_content_inner,
html.okieasys #od4a6curaddfejzin1sg .easys_content_inner .entry_post,
html.okieasys #eg173hsqjyn64ycxkgbp .easys_content_inner .entry_post,
html.okieasys #s5cyix273fa9omefdzo8 .easys_content_inner .entry_post,
html.okieasys #fyys2q27qgxb3deo66yv .easys_content_inner .entry_post,
html.okieasys #vn0r9qqlo5pn8nlda6km .easys_content_inner .entry_post {
  opacity: 1;
  filter: none !important;
  transition: none;
  transform: none !important;
}

/* 中ページでリンクボタン削除 */
html.okieasys body:not(#page_6) #n3mi3ai8ifsnctrxioue .design_id_63-btn {
  display: none;
}

/* ===== START カスタマイズ処理 ====================================================================== */
/* ===================================================================== */
/* ブログ カテゴリーフィルター（トップページ）                              */
/* 全て / スタッフブログ / お知らせ / コラム のボタンで記事を絞り込む         */
/* ===================================================================== */
/* カテゴリー別カラー（必要に応じて調整してください） */
:root {
  --category1-color: #fff100; /* スタッフブログ */
  --category2-color: #709f5b; /* お知らせ */
  --category3-color: #60b6b8; /* コラム */
}

#wrap_parent {
  position: relative;
  padding-right: var(--easys_padding);
  padding-left: var(--easys_padding);
  padding-bottom: 50px;
}
#piy6qatyrnlqtjxlw4ok + #qx12dg61ar6h5yhs6uni {
  margin-top: 0 !important;
}

/* ボタンメニュー */
#category_filter_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto 40px;
}
#wrap_parent .category_filter_btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  border: 2px solid #d8d5d2;
  background-color: #fff;
  color: #4f361c;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 13px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
#wrap_parent .category_filter_btn:hover {
  background-color: #f3f2ea;
  border-color: #beba9c;
  color: #4f361c;
}
#wrap_parent .category_filter_btn.active {
  color: #fff;
  background-color: #e88300;
  border-color: #f3f2ea;
}
#wrap_parent .category_filter_btn[data-category="category1"].active {
  background-color: var(--category1-color);
  border-color: var(--category1-color);
  color: #4f361c;
}
#wrap_parent .category_filter_btn[data-category="category2"].active {
  background-color: var(--category2-color);
  border-color: var(--category2-color);
}
#wrap_parent .category_filter_btn[data-category="category3"].active {
  background-color: var(--category3-color);
  border-color: var(--category3-color);
}

/* カテゴリーラベルの入れ物（選択されたカテゴリーを全て並べる／複数カテゴリー対応） */
#wrap_parent .category_area_list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

/* 各記事のカテゴリーラベル */
#wrap_parent .category_area {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.8;
  color: #fff;
  background-color: #999;
  white-space: nowrap;
}
#wrap_parent .category_area.category1 {
  background-color: var(--category1-color);
  color: #4f361c;
}
#wrap_parent .category_area.category2 { background-color: var(--category2-color); }
#wrap_parent .category_area.category3 { background-color: var(--category3-color); }


/* 記事の切替（フェード） */
#wrap_parent .blog_post,
#wrap_parent .content_area {
  transition: opacity 0.3s ease;
}

/* ===================================================================== */
/* H-01 詳細記事ブロック：worksimage風の「配置」カスタム（PC/SP共通）        */
/* ※配置(レイアウト)のみ。色・背景・フォント・角丸は対象外                    */
/* ※.nh_01（H-01ブロック）配下に限定 → 他ブロック種別には影響しません         */
/* ===================================================================== */
/* 見出し（サブ見出し）：カラム内で折り返して全文表示（テーマの見出しバー装飾＝固定幅550px/nowrap/overflow:hiddenを解除） */
.nh_01 .entry_post [class*="entry_title"] {
  width: auto;
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow: visible;
  background: none;
  border: none;          /* テーマの見出しバー枠線を解除 */
  color: inherit;        /* テーマの白文字だと背景無しで見えなくなるため継承色に（可読性確保） */
  margin: 0 0 20px;
  padding-left: 0;
  padding-right: 0;
}

/* 情報テーブル（家族構成／延床面積）：ラベルを上・値を下に積む配置 */
.nh_01 .entry_post .table_area table,
.nh_01 .entry_post .table_area tbody,
.nh_01 .entry_post .table_area tr,
.nh_01 .entry_post table[border],
.nh_01 .entry_post table[border] tbody,
.nh_01 .entry_post table[border] tr {
  display: block;
  width: 100%;
}
.nh_01 .entry_post td.td_name,
.nh_01 .entry_post td.td_value {
  display: block;
  box-sizing: border-box; /* paddingを幅100%の内側に含める＝親(text_boxはoverflow:hidden)をはみ出して切れるのを防ぐ */
  width: 100%;
  text-align: center;
  white-space: normal;      /* 長文でも折り返す */
  overflow-wrap: break-word; /* 長い単語・URL等も折り返してはみ出さない */
}
/* ラベル（td_name）に背景色を付与（テーマ変数 --td_background_color）。文字色は可読性のため --th_character_color */
.nh_01 .entry_post td.td_name {
  background-color: var(--td_background_color);
  color: var(--th_character_color);
  padding: 6px 10px;
}
/* 項目名・内容が空でも潰れず、1文字分の高さを維持する（文字を1つ打った感覚の高さ） */
.nh_01 .entry_post td.td_name:empty::before,
.nh_01 .entry_post td.td_value:empty::before {
  content: "\00a0"; /* ノーブレークスペース＝1文字分の高さを確保 */
}
/* 項目が2つ以上あるとき、項目（行）の間に余白を空ける（2つ目以降の行の上に余白） */
.nh_01 .entry_post .table_area tr + tr,
.nh_01 .entry_post table[border] tr + tr {
  margin-top: 10px;
}

.nh_01 .entry_post td.td_value {
  margin-top: -1px;
}