@charset "UTF-8";
/*
 * custom_fix.css
 * 出典: downloaded_pages_202606/01_top/page.html (Wayback 2026-06-16) 145-298行
 *       = 当時のテーマオプション「カスタムCSS」相当の出力。内容は無改変で抽出。
 * 目的: PC/スマホ用の要素切替 (.videopc/.videosp, .saiyobn/.saiyobnsp, .thbnpc/.thbnsp, .h2hlpc/.h2hlsp, .descpc/.descsp, img.sdgspc/sdgssp)
 *       と、トップ用カスタムレイアウト (.flex-container, .three, .douga 等) の復元。
 */
/*↓↓TOPテキスト↓↓*/
.h2hlpc { display: block !important; }
.h2hlsp { display: none !important; }
@media only screen and (max-width: 750px) {
    .h2hlpc { display: none !important; }
    .h2hlsp { display: block !important; }
}

/*↓↓TOPテキスト↓↓*/
.descpc { display: block !important; }
.descsp { display: none !important; }
@media only screen and (max-width: 750px) {
    .descpc { display: none !important; }
    .descsp { display: block !important; }
}

/*↓↓採用TOPバナー↓↓*/
.saiyobn { display: block !important; }
.saiyobnsp { display: none !important; }
@media only screen and (max-width: 750px) {
    .saiyobn { display: none !important; }
    .saiyobnsp { display: block !important; }
}

.saiyobnsp {
    width: 100%;
    height: auto;
    margin-top: 57px;
}

/*↓↓TOPお客様の～上間隔↓↓*/
div#header_content {
    margin: 0 auto 0px;
}
/*↓↓動画↓↓*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.videopc { display: block !important; }
.videosp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .videopc { display: none !important; }
    .videosp { display: block !important; }
}
 .videosp {
margin-top:57px;
    margin-top: -10px;
    margin-bottom: -40px;
}
audio, canvas, video {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
/*↓↓3カラム↓↓*/
@media screen and (max-width:480px){
.flex-container{flex-direction:column;}
.flex-item{margin: 0 1em 1em;}
}
section {
    width: 90%;
    padding-top: 20px;
    padding-bottom: 40px;
    margin: 40px auto 0;
    /* border: 1px dashed #ccc; */
    text-align: center;
}
.flex-container {
    display: flex;
    justify-content: space-around;
}
.flex-item {
    background: #1659CC;
    color: #fff;
    padding: 1em;
    flex-basis: 15%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-item p {
    font-size: 1.5em;
    line-height: 40px;
color: white;
}
/*↑↑3カラム↑↑*/
ol.index_box_list.clearfix {
    display: none;
}
.rich_font {
    font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-weight: bold;
}
.three{
  display: flex;
justify-content: center;
}
.threeitem {
    margin: 20px;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.thbnpc { display: block !important; }
.thbnsp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .thbnpc { display: none !important; }
    .thbnsp { display: block !important; }
}
.thbnpc {
    margin-top: 100px;
    margin-bottom: 50px;
} 
.thbnsp {
    margin-top: 50px;
    margin-bottom: 20px;
} 
.douga {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    margin-bottom: -3rem;
    bottom: 47px;
}
.douga iframe {
    position: absolute;
    top: -109px;
    left: 0;
    width: 100%;
    height: 129%;
}
.topsdgs {
display: flex;
justify-content: flex-end;
}
img.sdgspc {
width : 35% !important;
height : auto !important;
}
img.sdgssp {
width : 100% !important;
height : auto !important;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
img.sdgspc { display: block !important; }
img.sdgssp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
   img.sdgspc { display: none !important; }
   img.sdgssp { display: block !important; }
}

/* 施工実績ページ: 本文内の絞り込みメニュー（#project_catgory_sort）のリストマーカーを消す
   design-plus.css の .post_content ul { list-style:circle } を打ち消す */
#project_catgory_sort { list-style:none; padding-left:0; margin-left:0; }
#project_catgory_sort li { list-style-type:none; }

/* ===================================================================
   スマホ表示の保護（2026-10 追加）
   ・境界はテーマ既存の responsive.css と同じ max-width:770px
   ・デザインは変えず、「はみ出し」と「横スクロール」だけを止める
   =================================================================== */
@media screen and (max-width:770px) {

  /* [2] 横スクロール（横揺れ）の防止
     clip はスクロール領域を作らないため、固定ヘッダー等への副作用が少ない。未対応ブラウザは hidden */
  body { overflow-x: hidden; }
  @supports (overflow-x: clip) {
    body { overflow-x: clip; }
  }

  /* [3] 固定幅の解除
     実測で全下層ページの横スクロール原因だったパンくず。
     style.css の min-width:1200px を、テーマ本来の responsive.css（現在コメントアウト）と同じく 0 に戻す */
  #bread_crumb { min-width: 0; }
  #bread_crumb ul { width: auto; }

  /* [1] 本文内のメディア・表のはみ出し防止（本文 .post_content 内に限定） */
  .post_content img,
  .post_content video,
  .post_content iframe,
  .post_content embed,
  .post_content object,
  .post_content table {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 縦横比を保つ（Smart Slider の画像はスライダー側の指定が優先されるため対象外になる） */
  .post_content img { height: auto; }
}