html{height:100%;}
body{margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;height:100%;background-color:#33495d;
font-family:"Helvetica Neue",Helvetica,Arial,Verdana,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","HiraKakuProN-W3","メイリオ",Meiryo,sans-serif;
color:#000000;font-size:13px;font-weight:normal;line-height:180%;text-rendering:optimizeLegibility;-webkit-font-smoothing:subpixel-antialiased; !important;}

/* スクロールバー */
/* Bar width */
::-webkit-scrollbar{width:0.625em;}
/* Track */
::-webkit-scrollbar-track{-webkit-border-radius:0.625em;border-radius:0.625em;}
/* Handle */
::-webkit-scrollbar-thumb{-webkit-border-radius:0.625em;border-radius:0.625em;background:#ddd9d7;}

/* 記号文字用フォント強制指定 */
.font_sp{font-family:Verdana,"Helvetica Neue",Helvetica,Arial,"HiraKakuProN-W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
text-rendering:optimizeLegibility;-webkit-font-smoothing:subpixel-antialiased;}

/* 強制色指定 */
.orange{color:#f08036;}
.white{color:#ffffff;}
#logo a{color:inherit;text-decoration:none;transition:color 0.2s ease;}
#logo a:hover span.white{color: #ff9900; !important;}

.f8px{font-size:0.8em;color:#ffffff;line-height:180%; style="text-align:left; display:block;"}
.f10px{font-size:1em;color:#ffffff;line-height:180%; style="text-align:left; display:block;"}
.f12px{font-size:1.2em;color:#ffffff;line-height:140%; style="text-align:left; display:block;"}
.f14px{font-size:1.6em;color:#ffffff;line-height:140%; style="text-align:left; display:block;"}
.f16px{font-size:2em;color:#ffcc66;line-height:140%; style="text-align:left; display:block;"}
.textdeco1,
.f12px {
    text-shadow:
        -0.05em -0.05em 0 #000,
         0.05em -0.05em 0 #000,
        -0.05em  0.05em 0 #000,
         0.05em  0.05em 0 #000;
}

/* iOS iPhone iPod touch iPad用タイトル専用太字優先 */
h1,h2,h3,h4,h5,h6{font-family:"AvenirNext-Heavy","Arial Black","Arial Bold","HiraKakuProN-W6","ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro W6","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
text-rendering:optimizeLegibility;-webkit-font-smoothing:subpixel-antialiased;font-weight:900;color:#ffffff;text-shadow:0px 0px 1px #666666,0px 0px 5px #666666,0px 0px 6px #666666;}

/* 個別イメージリンク 半透明と解除 */
a.op_opacity:hover img{opacity:1;filter:alpha(opacity=100);transition:0.5s;}
a.op_opacity img{opacity:0.8;filter:alpha(opacity=80);transition:0.5s;}

/* float解除 */
.floatclear{clear:both;}

/* リンク文字下線削除 */
a{text-decoration:none; !important;}
a:hover,
a:focus,
a:active {color:#ff9900;text-decoration:none;}

br.br {line-height:0;margin:0;padding:0;display: block;}
/* アイコン行は上下中央揃え＋行間ゼロ＋アイコン間の隙間はgapで */
.sns-row{
  display:flex;
  justify-content:center; /* ← 横方向を中央寄せ */
  align-items:center;      /* 縦方向を中央寄せ（高さがある場合） */
  gap:8px;                 /* アイコン間の余白 */
  line-height:0;           /* 画像下の隙間を消す */
  margin-bottom:8px;       /* 下にだけ余白 */
}
.sns-row img{
  display:block;
}

.copy{ line-height:1; } /* 通常テキストの行間は適度に */

.one_footer_orange a{ text-decoration:none; } /* 体裁整え */



/* 角丸枠1 */
div.kadomaru{border-width:1px;border-style:solid;border-color:#e6caaa;padding:0.625em;-webkit-border-radius:6px;-moz-border-radius:6px;}
div.kadomaru2 {border-width:0px;/*border-style:solid;border-color:#e6caaa;*/padding:0.4em; -webkit-border-radius:6px; -moz-border-radius:6px;border-radius:6px;
    background-color: blue; /* 通常時の背景 */ 
	color:white;font-size:1em;width:150px;text-decoration:none;display:flex;align-items:center;justify-content:center;line-height:1; margin: 0 auto;}
div.kadomaru2:hover{background-color:#66ccff;text-decoration:none; margin: 0 auto;}


/* カラーストレート線 */
hr.grayline{border-width:1px 0px 0px 0px;border-style:solid;border-color:#e0e0e0;height:1px;}
hr.orangeline{border-width:1px 0px 0px 0px;border-style:solid;border-color:#ff9900;height:1px;}
hr.pinkline{border-width:1px 0px 0px 0px;border-style:solid;border-color:#ff8ab0;height:1px;}
hr.whiteline{border-width:1px 0px 0px 0px;border-style:solid;border-color:#ffffff;height:1px;}

/* Intro */
div.one_footer_orange{
  position: static !important;  /* ← fixed をやめる */
  bottom: auto;
  width: 100%;
  height: auto;
  background-color:#f08036;
  padding-top:10px;
}
/* Latest article of blog  */
#divex{width:100%;margin-top:4px; !important;}
#divexample2{border:solid 1px #faeab0;width:100%;height:600px;background-color:#ffffff;padding-left:15px;padding-right:15px;
-webkit-border-radius:6px;-moz-border-radius:6px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
#divexample2 a{color:#f08636;}
.d-box{font-size:0.9em;color:#ffffff;line-height:0;}

/* RSSフィード用 */
.feedEkList{list-style:none outside none;padding:0.8em 0.5em;}
.rssDiv{float:left;width:100%;height:600px;font-size:0.875em;color:#000000;text-align:left;}
.rssDiv ul img{width:100%;height:auto;}
/* Kokoromochi, POS2専用 table td内画像サイズリセットと文字位置の強制 */
.rssDiv ul td img{width:initial;height:auto;}
.rssDiv ul td{vertical-align:top;}

/* Works */
/* フィルター非表示状態 */
[data-hkfilter-card].is-hkfilter-hidden {display: none;}
/* クリックされたボタンのスタイル（任意） */
[data-hkfilter-btn][aria-pressed="true"] {background-color: #ff9900; color: white;}

.hkfilter-btn {display: inline-block;background-color: transparent;width: 140px;padding: 0.625em;border: 2px solid #FF9900;border-radius: 20px;color: #FF9900;text-align: center;text-decoration: none;cursor: pointer;transition: background-color 0.3s, color 0.3s;margin:2px;font-size:1em;}
.hkfilter-btn:hover { background-color: #ffcc66;}
.hkfilter-btn[aria-pressed="true"] {background-color:#ff9900;}

.hkfilter-btn2 {display: inline-block;background-color:#ffee99; transparent;width: 140px;padding: 0.625em;border: 2px solid #FF9900;border-radius: 20px;color: #000000;text-align: center;text-decoration: none;cursor: pointer;transition: background-color 0.3s, color 0.3s;margin:2px;font-size:1em;}
.hkfilter-btn2:hover { background-color: #ffcc66;}
.hkfilter-btn2[aria-pressed="true"] {background-color:#ff9900;}

a.rounded-box{display: inline-block;background-color: transparent;width: 200px;padding: 0.625em;border: 2px solid #FF9900;border-radius: 20px;color: #FF9900;font-size: 0.75em;text-align: center;text-decoration: none;cursor: pointer;transition: background-color 0.3s, color 0.3s;}
a.rounded-box:hover{background-color: #FF9900;color: white;}

div.two_box_wi{width:100%;height:600px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;margin-left:0;text-align:left !important;}
div.two_box_re{float:left;width:260px;height:280px;line-height:1.12em;margin-right:0.625em;margin-bottom:0.625em;background-color:#303030;
color:#ffffff;font-size:0.9em;padding:5px;text-align:left;max-width:100%;
  box-sizing: border-box;}
div.two_box_re{float:left;width:260px;height:280px;line-height:1.12em;margin-right:0.625em;margin-bottom:0.625em;background-color:#303030;
color:#ffffff;font-size:0.9em;padding:5px;text-align:left;}


div.box_height {
    height: 75px;
}

div.box_height2 {
    height: 100px; !important
}

/* モーダル全体 */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダルの中身（80%幅・中央寄せ） */
.modal-content {
  position: relative;
  margin: 5% auto;
  width: 80%;
  max-width: 960px;
}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: -30px;
  right: 0;
  color: white;
  font-size: 1.875em;
  font-weight: bold;
  cursor: pointer;
}

/* iframe（動画） */
.modal-content iframe {
  width: 100%;
  height: 60vh; /* 画面高さの60% */
}



/* My Favorite Photos  */
#divexample3{width:100%;height:600px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.js-masonry { width: 100%; height: 600px; }

/* Contact article */
#divexample3{border:none;width:100%;height:480px;overflow:auto;}
div.four_box_wi{position:relative;width:100%;height:100%;margin:0 auto;text-align:left;
font-size:0.875em;color:#ffffff;line-height:180%;font-weight:normal;text-shadow:0px 0px 1px #666666,0px 0px 5px #666666,0px 0px 6px #666666;-webkit-overflow-scrolling:touch;}

#b-box{float:left;width:50%;text-align:left;padding:0.625em;position:absolute;left:0em;top:0px;}
#b-box dl dt{color:#ffffa0;}
#b-box dl dd{margin-left:0.625em;}
#b-box dl dd a{color:#ff9900;}
#b-box dl dd a:hover{color:#ffffff;}
#c-box{width:50%;text-align:right;padding:0.625em;position:absolute;right:0em;top:0px;}
#c-box dl dd a{color:#ff9900;}
#c-box dl dd a:hover{color:#ffffff;}

/* イメージマウスオーバーで透明アニメ―ション */
.fade:hover img{opacity:0;filter:alpha(opacity=8);transition:1s;}
.fade img{opacity:1;filter:alpha(opacity=100);transition:1s;}

/* ブラウザリサイズ対応強制 */
.main.style2 .content { width: 100% !important; }
@media screen and (min-width: 768px){ .main.style2 .content{ width:100% !important; } }
@media screen and (max-width: 767px){ .main.style2 .content{ width:100% !important; } }
@media screen and (min-width:737px) {.main.style2 .content{width:660px; !important}.stbase{zoom:100%;-moz-transform:scale(1,1)translate(0px,0px);}}
@media screen and (min-width:1281px) {.main.style2 .content{width:707px; !important}}

/* submit送信ボタン */
button[type="submit"] {background-color: #f08036;color: #fff;border: none;border-radius: 20px;padding: 8px 20px;font-size: 1rem;cursor: pointer;}
input[type="text"],input[type="email"],textarea {font-size: 1em;}
/* ホバー時（マウス重ねた時）の色変化 */
button[type="submit"]:hover {background-color: #e0702e;}

/* intro内だけに出したい：画面固定ではなく intro の底に張り付ける */
#intro { position: relative; }
#intro .one_footer_orange {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
}

/* Price（ほか全セクション）では通常フローに戻す = コンテンツを覆わない */
section#price .one_footer_orange,
footer .one_footer_orange {
  position: static !important;
  height: auto;
  padding-top: 10px; /* 見た目調整 */
}

/* フッターにあるオレンジ帯は普通のブロックに戻す（かぶり防止） */
footer .one_footer_orange {
  position: static !important;
  height: auto;
  padding-top: 10px;
}

/* スムーズアニメーション互換性維持 */
.anim-smooth {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);          /* GPUキック */
  contain: layout paint style;       /* 影響範囲を要素内に閉じる */
}

/* 左右分割レイアウト */
.price-flow-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* 左カラム（料金表） */
.price-column {
  flex: 1 1 58%;
  min-width: 300px;
}

.price-column2 {
  flex: 1 1 48%;
  min-width: 300px;
}

/* 右カラム（制作の流れ） */
.flow-column {
  flex: 1 1 38%;
  min-width: 280px;
  color: #fff; /* 背景に合わせて文字色 */
  line-height: 1.8;
}

.flow-column2 {
  flex: 1 1 48%;
  min-width: 300px;
  color: #fff; /* 背景に合わせて文字色 */
  line-height: 1.8;
}

/* Equipment 左カラム（料金表） */

.price-column3 {
  flex: 1 1 48%;
  min-width: 300px;
}

/* 右カラム（制作の流れ） */
.flow-column3 {
  flex: 1 1 48%;
  min-width: 300px;
}


  .equipment-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    font-size:1.2em;
  }
  .equipment-table caption {
    text-align: left;
    font-weight: 600;
    margin: 0 0 .5rem;
  }
  .equipment-table th, .equipment-table td {
    padding: .6rem .5rem;
    text-align: left;
    border: none;
  }
  /* 奇数行：濃いくすんだ青、偶数行：少し明るいくすんだ青 */
  .equipment-table tbody tr:nth-child(odd) {
    background-color: #2b3e50; /* 濃いくすんだ青 */
  }
  .equipment-table tbody tr:nth-child(even) {
    background-color: #3d556b; /* 少し明るいくすんだ青 */
  }
  
   .equipment-table2 {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    font-size:1.2em;
  }
  .equipment-table2 caption {
    text-align: left;
    font-weight: 600;
    margin: 0 0 .5rem;
  }
  .equipment-table2 th, .equipment-table2 td {
    padding: .6rem .5rem;
    text-align: left;
    border: none;
  }
  /* 奇数行：濃いくすんだ青、偶数行：少し明るいくすんだ青 */
  .equipment-table2 tbody tr:nth-child(odd) {
    background-color: #2b3e50; /* 濃いくすんだ青 */
  }
  .equipment-table2 tbody tr:nth-child(even) {
    background-color: #3d556b; /* 少し明るいくすんだ青 */
  }
  
.equipment-table2 td {font-size:1.2em; !important}

/* スマホは縦並び */
@media screen and (max-width: 768px) {
  .price-flow-container {
    flex-direction: column;
  }
  .price-column, .flow-column {
    flex-basis: 100%;
    min-width: 0;
  }
}


/* Price セクションのスクロール箱：常に縦スクロール優先 */
#price .two_box_wi {
  height: auto !important;
  max-height: 80vh;
  overflow-y: auto !important;
  padding-bottom: 100px; /* 下部かぶり回避の余白 */
}

/* 帯の下に潜らないための余白（逃がし） */
#price .two_box_wi,
#price .flow-column {
  padding-bottom: 120px; /* 帯の実高に合わせて 100–140px で調整 */
}

/* スマホ幅：右カラムだけでスクロールできる口を確保（svhで安定） */
@media (max-width: 768px) {
  #price .flow-column {
    max-height: calc(100svh - 140px); /* 画面と帯の分を差し引く */
    overflow-y: auto;                  /* ここに縦スクロールを出す */
  }
}


/* WORKS は1画面固定を解除し、はみ出しも隠さない */
#works.main.fullscreen { height: auto !important; }
#works { overflow: visible !important; }

/* 念のため、内側の content も高さ固定を解除 */
#works .content.box.style2 { height: auto !important; overflow: visible; }

/* スクロール口：ギャラリー箱に縦スクロールを必ず出す */
#works .two_box_wi3{
  max-height: calc(100svh - 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}




/* WORKS は常に1画面固定にしてフルスクリーン表示 */
#works.main.fullscreen { height: 100% !important; }
#works { overflow: hidden !important; }
#works .content.box.style2 { height: 100% !important; overflow: hidden; }

/* Equipment セクションのスクロール範囲をリード文からに */
#equipment .two_box_wi {
  height: auto !important;
  max-height: 80vh;
  overflow-y: auto !important;
  padding-bottom: 100px;
}


/* ===== 小さい縦寸法端末向け：Intro / Contact の内側スクロール ===== */
@media (max-height: 700px) {
  /* 1) セクション自体は画面高に合わせる（svhはiOSのアドレスバー対策） */
  #intro.main.fullscreen,
  #contact.main.fullscreen {
    height: 100svh !important;
    display: block;
  }

  /* 2) 親が overflow: hidden のため、Contact の制約を解除 */
  #contact.main.style2 {
    overflow: visible !important;
  }

  /* 3) コンテンツ内側にスクロール口を作る */
  #intro .content,
  #contact .content {
    /* Introのオレンジ帯や余白ぶんを差し引いて、内側を縦スクロール */
    max-height: calc(100svh - 140px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 4) Intro のみスクロールバーを非表示（中身はスクロール可） */
  #intro .content {
    scrollbar-width: none;                /* Firefox */
    -ms-overflow-style: none;             /* old Edge/IE */
    padding-bottom: 120px;                /* 下のオレンジ帯に潜らない逃がし */
  }
  #intro .content::-webkit-scrollbar {    /* WebKit(iOS/Safari/Chrome) */
    display: none;
    width: 0;
    height: 0;
  }

  /* 5) Contact はバー表示OKなので “見切れ防止” だけ薄く余白 */
  #contact .content {
    padding-bottom: 24px;
  }
}

/* 念のため：Intro のオレンジ帯をセクション底に固定（既存と整合） */
#intro { position: relative; }
#intro .one_footer_orange {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
}

/* Intro 用フッター（既存と同じ扱い） */
#intro .one_footer_orange {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
}

/* Contact 用フッター */
#contact .one_footer_contact {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 1;
}


/* Contact セクションの“内側フッター”を絶対配置 */
#contact { position: relative; min-height: 100svh; }  /* 画面高にフィット */
#contact .one_footer_contact {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 80px;             /* 既存デザインに合わせる */
  z-index: 1;
}

/* 中身がフッターに隠れないよう、内側スクロール口を確保 */
#contact .content.box.style2 {
  height: auto !important;
  max-height: calc(100svh - 80px); /* フッター分を差し引く */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* モバイル縦短端末では“ページ共通フッター(#footer)”は非表示にして二重表示と余白を防ぐ */
@media (max-height: 700px) {
  #footer { display: none !important; }
}

/* Contact セクション全体を基準にする */
#contact {
  position: relative;
  min-height: 100svh; /* iOSアドレスバーにも対応したviewport高さ */
}

/* Contact 内のフッターを最下部に固定 */
#contact .contact-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 80px;  /* 既存デザインに合わせる */
  background: #f08036; /* 既存のオレンジ帯用 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* コンテンツはフッター分を差し引いてスクロール */
#contact .content {
  max-height: calc(100svh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px; /* 少し逃がし */
}

/* Contact セクションを基準にしてフッターを絶対配置 */
#contact { position: relative; min-height: 100svh; }

#contact .one_footer_contact {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 80px;           /* 既存のオレンジ帯の高さに合わせる */
  z-index: 1;
}

/* フッターに隠れないよう、内側をスクロール可能にする */
@media (max-height: 700px) {
  #contact .content {
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
}
/* Contact は内側に固定フッターを持つので、下パディングは不要 */
#contact.main.style2 { padding-bottom: 0 !important; }


/* ==== iPhoneでも“濃い青の余白”を出さない最終パッチ ==== */

/* 1) Contactの直後に来る共通フッターは出さない（端末問わず確実に） */
#contact + #footer { display: none !important; }

/* 予防線：#footerがどこかで残っても高さを作らせない */
#footer {
  display: none !important;
  margin-top: 0 !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0 !important;
}

/* 2) Contact内フッターは“絶対配置”を最優先で適用（fixedの上書き） */
#contact .one_footer_orange.one_footer_contact {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 80px;
  z-index: 1;
}

/* 3) Contactの中身はフッター分だけ内側スクロールにして被り無し */
#contact .content.box.style2 {
  height: auto !important;
  max-height: calc(100svh - 80px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* Intro のオレンジ帯をセクション底に固定 */
#intro { position: relative; }
#intro .one_footer_orange{
  position: absolute !important;
  left:0; right:0; bottom:0; width:100%; z-index:1;
}

/* Contact のオレンジ帯をセクション底に固定 */
#contact{ position: relative; min-height:100svh; }  /* 画面高にフィット */
#contact .one_footer_contact{
  position: absolute !important;
  left:0; right:0; bottom:0; width:100%; height:80px; z-index:1;
}


/* ===== Contact のスクロール連鎖を止める＆フッターでのスワイプ無効化 ===== */

/* セクション自体でページへのスクロール連鎖を遮断 */
#contact {
  overflow: hidden;                 /* ← これで body へバウンスしない */
  overscroll-behavior: contain;     /* 対応ブラウザ向けの保険 */
}

/* 中身は内側スクロールだけ許可（あなたが入れてる指定そのまま＋保険） */
#contact .content,
#contact .content.box.style2 {
  max-height: calc(100svh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* スクロールが親へ連鎖しない */
}

/* フッター上でのスワイプでスクロールを開始させない */
#contact .one_footer_contact {
  touch-action: none;               /* スワイプのパン操作を無効化 */
  pointer-events: none;             /* 背景部分ではイベントを拾わない */
}

/* ただしリンクはクリックできるように再有効化 */
#contact .one_footer_contact .sns-row a,
#contact .one_footer_contact .copy a {
  pointer-events: auto;
}

/* Version 20250816-01 */