@charset "UTF-8";

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

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

.home .entry-content h2>span::before {}
/*h2タイトルの数字を非表示 */
.home .entry-content h2>span::before{display: none!important; }
/*h2タイトルの調整 */
.home .entry-content h2{padding-left:15px}

.article h3 {
  border-left: 2px solid #83a1bf;
}

.yohakubottom{
	margin-bottom:0.2em;
}



input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  padding: 10px;
  background-color: #83a1bf;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}


.slidertop{
	margin-top: -2em!important;
}
.slidertop2{
	margin-top: -1.5em!important;
}

.my-cover-wide2{
margin-right: -30px;
margin-left: -30px;
width: auto;
}

.cat-label {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  border: 1px solid #eee;
  font-size: 11px;
  color: var(--cocoon-white-color);
  background-color: rgba(51, 51, 51, 0.2);
  padding: 1px 5px;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.littlehouse_gallery1{
	margin-bottom: 1.3em!important;
}

.ten{
	font-family: "ten-mincho", serif!important;
}

.navi {
  background-color: var(--cocoon-white-color);
font-family: "ten-mincho", serif!important;
}
.navi-footer-in{
	font-family: "ten-mincho", serif!important;
}

.linkmore{
  margin-top: -1.2em!important;
}
.entry-content h1 {
  line-height: 1.6;
}


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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.yohakutop{
	padding-top: 0.5em;	
	margin-bottom: 0.2em!important;
	font-size: 25px!important;

}
.my-cover-wide{
margin-right: -30px;
margin-left: -30px;
width: auto;
}

.sliderhead{
		font-size: 25px!important;
		
}
.slidercontent{
		font-size: 16px!important;
		
}	
	
}

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

/************************************
** Typography Base（2026）
************************************/

html {
  font-size: 16px;
}

/* 本文エリアを基準にする（Cocoonと相性良い） */
.entry-content {
  font-size: 1.125rem; /* PC: 18px */
  line-height: 1.8;
}

/* 段落は基準に従う */
.entry-content p {
  font-size: 1em;
  line-height: inherit;
}

/* 見出し */
.entry-content h2 {
  font-size: 2rem; /* 32px */
  line-height: 1.4;
}

/* 強調文・注釈（本文内だけに効かせる） */
.entry-content .text-emphasis {
  font-size: 1.3125rem; /* 21px */
  line-height: 1.6;
  font-weight: 600;
}

.entry-content .text-note {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
}

/* Cocoon S/M/L リセット（本文内だけ） */
.entry-content .has-small-font-size,
.entry-content .has-medium-font-size,
.entry-content .has-large-font-size {
  font-size: inherit !important;
}

/* ブロック親のfont-size暴走止め（本文内） */
.entry-content .wp-block-group,
.entry-content .wp-block-columns,
.entry-content .wp-block-column,
.entry-content .wp-block-cover,
.entry-content .wp-block-cover__inner-container {
  font-size: inherit;
}
/* このテーブルだけ整える */
.entry-content table.olto-flow-table{
  width: 100%;
  table-layout: fixed;          /* これが効く：列幅を固定して折り返させる */
  border-collapse: collapse;
}

.entry-content table.olto-flow-table th,
.entry-content table.olto-flow-table td{
  padding: 12px 12px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;      /* 長い文字列も強制的に折り返す */
}

.entry-content table.olto-flow-table th{
  width: 7.5em;                 /* 左列の幅（好みで 6.5〜9em くらいで調整） */
  white-space: normal;          /* thがnowrapだと横に広がるので解除 */
}

/* SP */
@media screen and (max-width: 834px){
  .entry-content {
    font-size: 1rem; /* SP: 16px */
  }

  .entry-content h2 {
    font-size: 1.5rem; /* 24px */
  }

  .entry-content .text-emphasis {
    font-size: 1.125rem; /* 18px */
  }

  .entry-content .text-note {
    font-size: 0.8125rem; /* 13px（読みやすさ優先） */
  }

  /* メインビジュアルのテキスト幅だけ例外で広げる */
  .mv-text-wrap{
    width: 100% !important;
    max-width: none !important;
  }
  /* スライダー全体を本文基準に戻す（SPだけ） */
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    font-size: 1rem !important;   /* SP本文基準：16px */
    line-height: 1.8 !important;
  }

  /* スライダー内テキストの暴走止め */
  .sliderhead,
  .slidercontent,
  .sliderhead p,
  .slidercontent p {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .entry-content table.olto-flow-table th,
  .entry-content table.olto-flow-table td{
    padding: 10px 10px;
  }
  .entry-content table.olto-flow-table th{
    width: 6.5em;
  }
}
/* ================================
   PCのみ：本文幅を狭めて左寄せ
================================ */
@media (min-width: 1024px){
  .entry-content .is-narrow-pc p{
    max-width: 480px;
  }
  .entry-content .is-narrow-pc ul,
  .entry-content .is-narrow-pc ol{
    max-width: 480px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
}

/************************************
 * OLTO Steps 2026 (rebuild v2)
 * line: comes out from CARD border, aligned under ICON center
 ************************************/

/* --- Card --- */
.entry-content .olto-step{
  position: relative;
  background: #fff !important;

  border: 1px solid rgba(0,0,0,.45) !important;
  border-radius: 28px !important;

  max-width: 720px;
  margin: 0 auto 32px !important;
  padding: 26px 34px !important;

  box-sizing: border-box !important;
}

/* --- 2 columns --- */
.entry-content .olto-step .olto-step-row{
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
}

/* --- Icon --- */
.entry-content .olto-step .step-icon{
  flex: 0 0 150px !important;     /* PC */
}
.entry-content .olto-step .step-icon img{
  display: block !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* --- Text (kill block gap) --- */
.entry-content .olto-step .step-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
}
.entry-content .olto-step .step-text > *{
  margin: 0 !important;
}
.entry-content .olto-step .step-text h1,
.entry-content .olto-step .step-text h2,
.entry-content .olto-step .step-text h3{
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}
.entry-content .olto-step .step-text p:first-of-type{
  line-height: 1.55 !important;
  margin-bottom: 10px !important;
}
.entry-content .olto-step .step-text p{
  line-height: 1.6 !important;
}

/* --- Connector line: FROM CARD BORDER, aligned to icon center --- */
/* PC: left = padding-left(34) + iconWidth/2(75) = 109 */
.entry-content .olto-step::after{
  content: "";
  position: absolute;

  left: 109px !important;
  top: 100% !important;           /* ← 枠線（カード下端）から出す */
  margin-top: 2px !important;     /* 枠線に“ぴったり”寄せる（0〜4px） */

  width: 1px;
  height: 32px;                   /* ステップ間の線の長さ */
  background: rgba(0,0,0,.35);
}

.entry-content .olto-step.last::after{
  display: none !important;
}

/* --- SP --- */
@media (max-width: 834px){

  .entry-content .olto-step{
    max-width: 100%;
    padding: 20px 20px !important;
    border-radius: 22px !important;
    margin-bottom: 22px !important;
  }

  .entry-content .olto-step .olto-step-row{
    gap: 16px !important;
  }

  .entry-content .olto-step .step-icon{
    flex: 0 0 92px !important;     /* SP */
  }
  .entry-content .olto-step .step-icon img{
    width: 92px !important;
    height: 92px !important;
  }

  /* SP text: minimal */
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 1.0rem !important;
    margin-bottom: 8px !important;
  }
  .entry-content .olto-step .step-text p:first-of-type{
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }
  .entry-content .olto-step .step-text p{
    font-size: 0.94rem !important;
  }

  /* SP: left = padding-left(20) + iconWidth/2(46) = 66 */
  .entry-content .olto-step::after{
    left: 66px !important;
    top: 100% !important;         /* ← SPも枠線から */
    margin-top: 2px !important;
    height: 26px;
  }
}
/* --- OLTO steps 微調整（PC）--- */
.entry-content .olto-step{
  max-width: 640px !important;      /* 720 → 640（理想に近い幅） */
  padding: 22px 30px !important;    /* 26/34 → 少し詰める */
  margin-bottom: 28px !important;   /* 32 → 28 */
}

/* 2カラム間の余白 */
.entry-content .olto-step .olto-step-row{
  gap: 30px !important;             /* 36 → 30 */
}

/* 丸アイコン（少しだけ小さく） */
.entry-content .olto-step .step-icon{
  flex-basis: 138px !important;     /* 150 → 138 */
}
.entry-content .olto-step .step-icon img{
  width: 138px !important;
  height: 138px !important;
}

/* 縦線の位置（padding-left 30 + 138/2=69 → 99） */
.entry-content .olto-step::after{
  left: 99px !important;
}

/* テキスト塊の“間延び”を少しだけ締める */
.entry-content .olto-step .step-text h1,
.entry-content .olto-step .step-text h2,
.entry-content .olto-step .step-text h3{
  margin-bottom: 8px !important;    /* 10 → 8 */
}
.entry-content .olto-step .step-text p:first-of-type{
  margin-bottom: 8px !important;    /* 10 → 8 */
}
/* 右カラムを縦中央に */
.entry-content .olto-step .wp-block-column:last-child{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
/* PC：全体を一回り小さくして、右カラムを確保 */
.entry-content .olto-step{
  max-width: 600px !important;      /* 640→600（まずここ） */
  padding: 18px 26px !important;    /* 22/30→小さく */
  border-radius: 26px !important;
  margin-bottom: 26px !important;
}

.entry-content .olto-step .wp-block-columns{
  gap: 24px !important;             /* 30前後→24 */
  align-items: center !important;
}

/* アイコン（少し縮める＝右カラムが広がる） */
.entry-content .olto-step .step-icon{
  flex: 0 0 120px !important;       /* 138/150→120 */
}
.entry-content .olto-step .step-icon img{
  width: 120px !important;
  height: 120px !important;
}

/* 縦線位置：left = padding-left(26) + 120/2(60) = 86 */
.entry-content .olto-step::after{
  left: 86px !important;
}
@media (max-width: 834px){
  .entry-content .olto-step .step-icon img{
    width: 70px !important;
    height: 70px !important;
  }
  .entry-content .olto-step .step-text h1,
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 0.9rem !important;
  }

  .entry-content .olto-step .step-text p{
    font-size: 0.82rem !important;
  }
}
@media (max-width: 834px){
  .entry-content .olto-step .step-icon{
    flex: 0 0 92px !important;   /* ←まず92固定（好みで80〜96） */
  }
  .entry-content .olto-step .step-icon img{
    width: 92px !important;
    height: 92px !important;
  }
}
@media (max-width: 834px){
  .entry-content .olto-step .wp-block-columns{
    transform: scale(.75) !important;         /* 0.6は効きすぎ。まず0.75 */
    transform-origin: center center !important;
  }

  /* 縮小で切れないように最低高だけ確保 */
  .entry-content .olto-step{
    min-height: 170px;
  }
}
@media (max-width: 834px){
  .entry-content .olto-step::after{
    left: 60px !important;  /* ←ズレるなら 56〜66 で微調整 */
  }
}
@media (max-width: 834px){
  /* 見出し */
  .entry-content .olto-step .step-text h1,
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 0.95rem !important;   /* 0.9〜1.0で調整 */
    line-height: 1.35 !important;
  }

  /* 英文（1つ目の段落） */
  .entry-content .olto-step .step-text p:first-of-type{
    font-size: 0.82rem !important;   /* 0.78〜0.85 */
    line-height: 1.5 !important;
  }

  /* 本文（2つ目以降） */
  .entry-content .olto-step .step-text p{
    font-size: 0.88rem !important;   /* 0.84〜0.92 */
    line-height: 1.6 !important;
  }
}
@media (max-width: 834px){
  .entry-content .olto-step{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .entry-content .olto-step .wp-block-columns{
    gap: 14px !important;
  }
}
@media (max-width: 834px){

  /* 見出し：もう一段小さく */
  .entry-content .olto-step .step-text h1,
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 0.86rem !important;  /* ←ここが効く */
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  /* 英文：気持ち小さく＆詰める */
  .entry-content .olto-step .step-text p:first-of-type{
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  /* 本文：読みやすさを保ったまま下げる */
  .entry-content .olto-step .step-text p{
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  /* 余白も締める（全体の“デカさ”を減らす） */
  .entry-content .olto-step{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .entry-content .olto-step .wp-block-columns{
    gap: 12px !important;
  }
}

/* PC：中身だけを少し右へ（棒もアイコン直下維持） */
@media (min-width: 835px){
  .entry-content .olto-step-row{
    padding-left: 12px !important; /* ← まず12px（8〜18で好み調整） */
  }
  .entry-content .olto-step::after{
    left: calc(109px + 12px) !important; /* ←同量だけ右へ */
  }
}
@media (min-width: 835px){
  .entry-content .olto-step::after{
    left: 109px !important;
  }
}
/* PC：中身（row/columnsどっちが本体でも）を右へ */
@media (min-width: 835px){
  /* まずは 12px。8〜18で調整 */
  body .entry-content .olto-step .olto-step-row,
  body .entry-content .olto-step .wp-block-columns{
    margin-left: 12px !important;
  }

  /* 棒も同量だけ右へ（アイコン直下維持） */
  body .entry-content .olto-step::after{
    left: calc(109px + 12px) !important;
  }
}
@media (min-width: 835px){
  body .entry-content .olto-step{
    padding-left: 46px !important;  /* 34 + 12 */
    padding-right: 34px !important; /* 右は維持 */
  }
  body .entry-content .olto-step::after{
    left: 121px !important;         /* 109 + 12 */
  }
}
/* PC：アイコンだけ少し左へ戻す */
@media (min-width: 835px){
  body .entry-content .olto-step .step-icon{
    margin-left: -8px !important;   /* -6〜-12 で微調整 */
  }
}
/* =========================
   OLTO Steps – SP tune (diff)
========================= */
@media (max-width: 834px){

  /* カード幅を85%くらいにして中央寄せ */
  .entry-content .olto-step{
    width: 100% !important;
    max-width: 100% !important; /* 既存max-width:100%を潰す */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 上下左右の余白を均等寄りに */
    padding: 18px 18px !important;  /* 20/20より少し締める。16〜20で調整 */
    margin-bottom: 22px !important;
  }

  /* アイコン：現状維持 or 少し小さく（どっちでもOK） */
  .entry-content .olto-step .step-icon{
    flex: 0 0 88px !important;      /* 現状92 → 88（そのままなら92に戻してOK） */
  }
  .entry-content .olto-step .step-icon img{
    width: 88px !important;
    height: 88px !important;
  }

  /* rowの詰め：左右の“間延び”を抑える */
  .entry-content .olto-step .olto-step-row{
    gap: 14px !important;           /* 16 → 14（好みで12〜16） */
    align-items: center !important;
  }

  /* 見出し：少し大きく（理想の“主役感”に） */
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 1.05rem !important;  /* 現状1.0より少し上げる */
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  /* 英文（1つ目の段落） */
  .entry-content .olto-step .step-text p:first-of-type{
    font-size: 0.86rem !important;
    margin-bottom: 8px !important;
  }

  /* 本文 */
  .entry-content .olto-step .step-text p{
    font-size: 0.92rem !important;  /* 0.94→少し締めてもOK。0.90〜0.94 */
    line-height: 1.55 !important;
  }

  /* 棒：アイコン中心に合わせ直す
     left = padding-left(18) + icon(88)/2(44) = 62 */
  .entry-content .olto-step::after{
    left: 62px !important;          /* もしアイコン92に戻すなら 18+46=64 */
    height: 26px !important;
  }
}
/* =========================
   OLTO Steps – SP final tweak (diff only)
========================= */
@media (max-width: 834px){

  /* 見出し：もう一段だけ大きく */
  .entry-content .olto-step .step-text h1,
  .entry-content .olto-step .step-text h2,
  .entry-content .olto-step .step-text h3{
    font-size: 1.1rem !important;     /* 1.05 → 1.1 */
    line-height: 1.25 !important;
  }

  /* 本文：少しだけ小さく */
  .entry-content .olto-step .step-text p{
    font-size: 0.88rem !important;    /* 0.92 → 0.88 */
    line-height: 1.55 !important;
  }

  /* 英文（1つ目の段落）は気持ちだけ下げる */
  .entry-content .olto-step .step-text p:first-of-type{
    font-size: 0.84rem !important;    /* 0.86 → 0.84 */
  }

  /* カード内・下余白だけ詰める */
  .entry-content .olto-step{
    padding-bottom: 14px !important;  /* 18 → 14 */
  }
}
/* SP：高さ固定のまま、中身を縦中央に */
@media (max-width: 834px){
  .entry-content .olto-step{
    display: flex !important;
    align-items: center !important;   /* ← 縦中央 */
  }

  /* 中身が横幅いっぱい使えるように */
  .entry-content .olto-step .olto-step-row{
    width: 100%;
  }
}