@charset "utf-8";

/*-------------------------------------
全端末（PC・タブレット・スマホ）共通設定
--------------------------------------*/

/*------------------------------------
全体の設定
--------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.w100p {
  width: 100%;
}

.w95p {
  width: 95%;
  margin: 0 auto;
  max-width: 1000px;
}

.w90p {
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
}

.w85p {
  width: 85%;
  margin: 0 auto;
  max-width: 1000px;
}

.w80p {
  width: 80%;
  margin: 0 auto;
  max-width: 1000px;
}

.w60p {
  width: 60%;
}

.w50p {
  width: 50%;
}

.p2p {
  padding: 2%;
}

.p5p {
  padding: 5%;
}

.flex {
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  gap: 10px;
}


html,
body,
#container {
  height: 100%;
  font-size: 100%;
}

body {
  color: #333;
  font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 2;
  background: #e0d4c7;
  -webkit-text-size-adjust: none;
}

/* 主要カラーの設定 */
:root {
  --mainColor: #9f3c4c;
  --mainColorAlpha: #9f3c4cb3;
  --subColor: #e0d4c7;
  --subColorAlpha: #e0d4c7b3;
  --accentColor: #25264a;
  --accentColorAlpha: #25264ab3;
  --textColor: #333;
  --textColorAlpha: #333333b3;
}


/*--------------------------------------
画面サイズによる制御
-----------------------------------------*/
.pc_disp {
  display: block;
}

.sp_disp {
  display: none;
}



h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
form {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style-type: none;
}

ol {
  padding-left: 40px;
  padding-bottom: 15px;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  width: 100%;
}

/*---------------------------------------------------
リンク（全般）設定
-----------------------------------------------------*/
a {
  color: #333;
  /*リンクテキストの色*/
  transition: 0.2s;
  /*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}

a:hover {
  text-decoration: none;
  /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*---------------------------------------------------
基本ボタン
-----------------------------------------------------*/
a.btn_link {
  text-decoration: none;
  display: flex;
  justify-content: center;
  margin: 25px auto;
  width: 18em;
  font-size: 1rem;
}

a .btn {
  background: var(--accentColor);
  color: rgb(235, 239, 242);
  padding: 2% 5%;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #999;
}

/*---------------------------------------------------
inner
-----------------------------------------------------*/
.inner {
  /*サイトの最大幅*/
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 2% !important;
  padding-right: 2% !important;

}


/*----------------------------------------------------
2カラムレイアウト用のクラス
------------------------------------------------------*/
.w_columns {
  display: flex;
  justify-content: center;
  gap: 10px;
}


/*-------------------------------------------------
トップページ２カラム横並びにからむ詳細設定
---------------------------------------------------*/

.w_columns .main {
  width: 95%;
  margin: 0 auto;
}

.sub ul.flex {
  flex-direction: column;
  /* width: 95%; */
  margin: 0 auto;
}

.sub ul.flex li {
  width: 100%;
}

.sub nav ul li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub .flex {
  flex-direction: column;
}

.sub .flex section.box {
  width: 100%;
}


/*-------------------------------------------------------
ヘッダー設定（PC)
---------------------------------------------------------*/

/* トップページのヘッダー */
#top header {
  min-height: 100%;
  margin-bottom: -90px;
  /*メニューの高さを設定する*/
}

/*トップページのロゴ画像*/
#top #logo img {
  background-color: #e0d4c74d;
  /* ロゴ背景透過率70% */
  border-radius: 10%;
  position: fixed;
  /*スクロールしても固定表示させる設定。*/
  z-index: 1;
  left: 5%;
  /*デフォルト：左から30%の場所に配置*/
  top: 5%;
  /*デフォルト：上から25%の場所に配置*/
  width: 10%;
  /*画像の幅*/
  filter: drop-shadow(2px 2px 1px var(--subColor));
}

/*トップ以外のページのヘッダーブロック*/
.s-n header {
  height: 70px;
  /*高さ*/
  background: rgba(255, 255, 255, .5) !important;
  /* background: url(../img/img05.jpg); */
  /*背景色*/
  position: relative;
}

/*トップページ以外のロゴ画像*/
.s-n header #logo {
  width: 50%;
  /*画像幅*/
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-33%, 0);
}


/*---------------------------------------------
メインメニューのブロック
-----------------------------------------------*/
/*メニューブロック*/
#menubar {
  overflow: hidden;
  position: relative;
  z-index: 10;
  text-align: center;
  /*文字を中央に*/
  background: rgba(235, 239, 242, .4);
  /*背景色*/
  border-bottom: 1px solid #eee;
  /*下線の幅、線種、色*/
}

/*メニュー１個あたりの設定*/
#menubar ul li {
  float: left;
  /*左に回り込み*/
  width: 20%;
  /*幅。今回は５個メニューがあるので100÷5=20%*/
  font-size: 18px;
  font-weight: bold;
}

#menubar ul li a {
  text-decoration: none;
  display: block;
  border-bottom: 3px solid transparent;
  /*下線の設定。ここではtransparentを使って透明にしています。*/
  height: 75px;
  /*メニューブロックの高さ。※※※ここの「75」と、下の行の「15」を合計した「90」の数字と、下のfixmenu設定に２箇所ある「margin-top」の数字を合わせて下さい。*/
  padding-top: 15px;
  /*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。※変更の際は、上の行の注意書きもしっかり読んで下さい。*/
}

/*飾り文字*/
#menubar ul li span {
  display: block;
  font-size: 10px;
  /*文字サイズ*/
  color: rgb(235, 239, 242);
  /*文字色*/
  letter-spacing: 0.2em;
  /*文字間隔を少し広くとる設定*/
}

/*マウスオン時と、現在表示中メニューの設定*/
#menubar ul li a:hover,
#menubar ul li.current a {
  border-bottom: 3px solid var(--mainColor);
  /*下線の幅、線種、色*/
}

/*スマホ用メニューを表示させない*/
#menubar-s {
  display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {
  display: none;
}

/*--------------------------------------------------
fixmenu設定（メニューが画面上部に到達した際のスタイル）
----------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos {
  position: fixed;
  width: 100%;
  top: 0px;
  background: rgb(235, 239, 242);
  /*背景色。255,255,255は白の事で0.95は透明度。*/
}

body.is-fixed-menu #contents {
  margin-top: 90px;
  /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}

/*※以下の２ブロックのスタイルの「中身」は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed #menubar.nav-fix-pos {
  position: fixed;
  width: 100%;
  top: 0px;
  background: rgb(235, 239, 242);
  /*背景色（古いブラウザ用）*/
  background: rgb(235, 239, 242);
  /*背景色。
}
body.is-fixed #contents {
  margin-top: 90px; /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: rgb(235, 239, 242);

}

/*contentsの中にあるinner*/
#contents .inner {
  padding: 20px 0px;
  /*上下、左右へのブロック内の余白*/
}

/*-------------------------------------------------
h2タグ
---------------------------------------------------*/
#contents h2 {
  color: #fff;
  background: var(--mainColor);
  padding: 5px 20px;
  /*上下、左右へのボックス内の余白*/
  font-size: 1.25rem;
  /*文字サイズ*/
  border-radius: 3px;
  margin-bottom: 5px;
}

/*h2タグの１文字目*/
#contents h2::first-letter {
  border-left: 3px solid var(--accentColor);
  /*左の線の幅、線種、色*/
  padding-left: 20px;
  /*線と文字との余白*/
}


/*---------------------------------------------------
トップページのメインの特大バナーの詳細
-----------------------------------------------------*/
#contents .inner .main section.main_banner .article {
  /* display: block; */
  margin: 0 auto 50px;
  width: 100%;
  height: auto;
  /* text-shadow: 2px 2px 10px rgb(0, 0, 0, .3); */
  position: relative;
  z-index: 20;
}

#contents .inner .main section.main_banner .article a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.main_banner_btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-decoration: none;
  width: 15em;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  text-align: center;
  opacity: .6;
  color: #000;
  font-weight: bold;
  z-index: 25;
}

p.main_banner_text {
  position: absolute;
  bottom: 10%;
  left: 10px;
  text-align: center;
  color: #fff;
  z-index: 25;
  font-size: 1.2rem;
  font-weight: bold;
}

/*--------------------------------------------------------
h3タグ
----------------------------------------------------------*/
#contents h3 {
  clear: both;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 20px;
  /*文字サイズ*/
  border-bottom: 1px solid rgb(235, 239, 242);
  /*下線の幅、線種、色*/
  padding-left: 20px;
  /*左側に空ける余白*/
}

/*h3タグの１文字目*/
#contents h3::first-letter {
  border-left: 3px solid var(--accentColor);
  /*左側の線の幅、線種、色*/
  padding-left: 20px;
  /*線と文字との余白*/
}

/*----------------------------------------------------
pタグ
------------------------------------------------------*/
#contents p {
  padding: 0 20px 20px;
  /*上、左右、下への余白*/
}

#contents h2+p,
#contents h3+p {
  margin-top: -5px;
}

#contents p+p {
  margin-top: -10px;
}

/*---------------------------------------------------------
mainコンテンツ
-----------------------------------------------------------*/
/*mainブロック*/
.main {
  width: 70%;
}

/*section同士の余白*/
.main section+section {
  margin-top: 40px;
  padding-top: 0;
  /*.linkのpadding-topをリセットしておく*/
}

/* トップぺージメインバナーの装飾 */
.main_banner .article {
  width: 100%;
  margin: 0 auto 5%;
}


/*-----------------------------------------------
施工事例の目次ページのcss（PCサイズ画面）
-------------------------------------------------*/
#case .case_index {
  position: relative;
  margin-top: 20px;
  /* margin-bottom: 20px; */
  width: 50%;
}

#case .case_index p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1.3rem;
  font-weight: bold;
  background-color: rgba(125, 125, 125, .5);
  color: #fff;
  border-radius: 10px;
  align-items: center;
  padding: 2% 10%;
}

/*-------------------------------------------------
施工事例ページの装飾（PCサイズ画面）
---------------------------------------------------*/
.jirei {
  margin-top: 50px;
  margin-bottom: 50px;
}

#case {
  width: 100%;
}

.jirei #case ,.flex{
  flex-direction: row;
}

.jirei ,.flex {
  flex-direction: row;
}


.flex_item {
  width: 30%;
}

.case_text {
  display: flex;
  justify-content: center;
  align-items: top;
  /* box-shadow: #999 -1px -1px 5px, #000 3px 3px 10px; */
  /* border-radius: 15px 15px 15px 15px; */
  /* border: 1px solid #333; */
}

/*-----------------------------------------------
豆知識のページの装飾
-------------------------------------------------*/
#entrance article {
  margin-bottom: 50px;
}

#entrance article .flex {
  flex-direction: row;
}

#entrance article .flex figure,
#entrance article .flex p {
  width: 50%;
  font-size: 1rem;
}


/*-----------------------------------------------
Q&Aページの装飾
-------------------------------------------------*/
#qa .inner article img {
  width: 80%;
  object-fit: cover;
  display: block;
  margin: 10% auto;
}



/*--------------------------------------------------
subコンテンツ(トップページの右側のブロック）
----------------------------------------------------*/
/*subブロック*/
.sub {
  width: 25%;
  height: 100%;
}

/*----------------------------------------------------
.subの　h2タグ
------------------------------------------------------*/
#contents .sub h2 {
  color: var(--accentColor);
  background: var(--subColor);
  padding: 5px 20px;
  /*上下、左右へのボックス内の余白*/
  font-size: 1.25rem;
  /*文字サイズ*/
  border-radius: 3px;
  /*角丸のサイズ*/
  text-align: center;
}

/*h2タグの１文字目への設定*/
#contents .sub h2::first-letter {
  border-left: none;
  padding-left: 0px;
}

/*--------------------------------------------------------
subコンテンツ内のpタグ設定
----------------------------------------------------------*/
#contents .sub p {
  margin: 0;
  padding: 10px;
}


/*メニュー１個ごとの設定*/
ul.submenu li {
  box-shadow: 2px 2px 10px rgb(0, 0, 0, .5);
  border-radius: 3px;
}

ul.submenu li a {
  text-decoration: none;
  display: block;
  width: 100%;
}

ul.submenu li a img {
  border-radius: 3px;
  width: 100%;
  height: 100%;

  /*メニュー内の余白。上下、左右への設定。*/
}

/*------------------------------------------------------
.subのbox
---------------------------------------------------------*/
#contents .sub .box {
  /* padding: 15px; */
  /*ボックス内の余白*/
  margin-bottom: 50px;
  /*ボックスの下に空けるスペース*/
  background: rgb(235, 239, 242);
  /*背景色（古いブラウザ用）*/
  background: #fff;
  /*背景色。0,0,0は黒で0.05は透明度。*/
  /* border: solid 2px var(--subColor); */
  /*線の線種、幅、色*/
  box-shadow: 2px 2px 10px rgb(0, 0, 0, .3);
  /*ボックスの影。内側に白のラインを入れる。*/
  border-radius: 3px 3px 0 0;
  /*角丸のサイズ*/
}

#contents .sub nav.sub_box {
  margin-bottom: 50px;
}

.sub section.box h2 {
  font-size: 1rem !important;
}

/*box1内のメニューの設定*/
#contents .sub .box ul.submenu {
  margin-bottom: 0px;
}

/*box1内のメニューの設定*/
#contents .sub .box ul.submenu img {
  object-fit: contain;
  height: 100%;
}

/*---------------------------------------------------------
フッター設定
-----------------------------------------------------------*/
footer {
  clear: both;
  position: relative;
  z-index: 1;
  font-size: 12px;
  /*文字サイズ*/
  background: var(--accentColor);
  /*背景色*/
  color: rgb(235, 239, 242);
  /*文字色*/
  text-align: center;
}

footer a {
  color: rgb(235, 239, 242);
}

footer a:hover {
  color: rgb(235, 239, 242);
}

footer .pr {
  display: block;
  font-size: 80%;
}

#copyright {
  clear: both;
  text-align: center;
  background: var(--accentColor);
}

#copyright a {
  text-decoration: none;
}

#copyright a:hover {
  color: #666;
}

/*--------------------------------------------------
コンタクトページのLINEブロック設定
----------------------------------------------------*/
body#contact .flex {
  display: flex;
  justify-content: center;
  text-align: center;
}

body#contact .contact_text {
  margin: 30px 0;
}

.line_banner {
  width: 40%;
}

.line_flex a {
  display: block;
  width: 30%;
}

.line_flex img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

/*------------------------------------------------
会社概要ページの装飾
--------------------------------------------------*/

.company_detail {
  width: 80%;
  height: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.company_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
}

.company_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company_text {
  width: 80%;
  height: auto;
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(125, 125, 125, .3);
  padding: 15% 5%;
  border-radius: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*-------------------------------------------------------------------------
ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link {
  display: block;
  margin-top: -120px;
  padding-top: 120px;
}

/*その他
---------------------------------------------------------------------------*/
.mt20 {
  margin-top: 20px;
}



.mb15,
.mb1em {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.tac {
  text-align: center !important;
}


/*-----------------------------------------------------
画面を横向きにした場合の高さが500px以下の場合の設定
------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height: 500px) {

  /*メインメニュー
-------------------------------------------------------*/
  /*メニュー１個あたりの設定*/
  #menubar-s ul li a {
    /* padding: 10px; */
    /*メニュー内の余白*/
    float: left;
    /*左に回り込み*/
    width: 40%;
    /*幅*/
    margin-left: 4%;
    /*メニューの左側に空けるスペース*/
  }
}

/*-------------------------------------------------
画面幅800px以下の設定
---------------------------------------------------*/
@media screen and (max-width: 800px) {

  /*-----------------------------------------------------
ヘッダー(800px以下設定）
-------------------------------------------------------*/
  /*トップページのロゴ画像*/
  #top #logo img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
  }

  #top .inner {
    flex-direction: column;
  }


  /*ロゴ画像（※トップページ以外）*/
  .s-n header #logo {
    width: 40%;
    /*画像幅*/
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }


  /*-------------------------------------------------
トップページ２カラム横並びを、800px以下では縦並びに
それにカラム詳細設定
---------------------------------------------------*/
  .w_columns {
    flex-direction: column;
  }

  .inner .main {
    width: 95%;
    margin: 0 auto;
  }

  .sub {
    width: 95%;
    margin: 0 auto;
  }

  .sub ul.submenu.flex {
    flex-direction: row;
    width: 95%;
    margin: 20px auto;
    flex-wrap: wrap;
  }

  .sub ul.flex li {
    width: 30%;
  }

  .sub nav ul li a {
    width: 100%;
    height: 120px;
  }

  .sub nav ul li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sub .flex.subbox {
    flex-direction: row;
  }

  .sub .flex section.box {
    width: 49%;
  }


  /*メインメニュー
---------------------------------------------------------------------------*/
  /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
  @keyframes menu1 {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /*スマホ用メニューブロック*/
  #menubar-s {
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: 100;
    top: 0px;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    /*背景色*/
    border-top: 1px solid #fff;
    /*上の線の幅、線種、色*/
    animation-name: menu1;
    /*上のkeyframesの名前*/
    animation-duration: 1.5s;
    /*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both;
    /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
  }

  /*メニュー１個あたりの設定*/
  #menubar-s ul li a {
    display: block;
    text-decoration: none;
    padding: 10px 15px;
    /*上下、左右へのメニュー内の余白*/
    border-bottom: 1px solid #20323f;
    /*下の線の幅、線種、色*/
    color: rgb(235, 239, 242);
    /*文字色*/
    font-size: 16px;
    /*文字サイズ*/
  }

  /*飾り文字*/
  #menubar-s ul li span {
    display: block;
    font-size: 10px;
    /*文字サイズ*/
    color: #999;
    /*文字色*/
  }

  /*PC用メニューを非表示にする*/
  #menubar {
    display: none;
  }

  /*３本バーアイコン設定
---------------------------------------------------------------------------*/
  /*３本バーブロック*/
  #menubar_hdr {
    display: block;
    position: fixed;
    z-index: 100;
    top: 8px;
    /*上から8pxの場所に配置*/
    right: 10px;
    /*右から10pxの場所に配置*/
    border-radius: 50%;
    /*円形にする*/
    border: 1px solid rgb(235, 239, 242);
  }

  /*アイコン共通設定*/
  #menubar_hdr.close,
  #menubar_hdr.open {
    width: 50px;
    /*幅*/
    height: 50px;
    /*高さ*/
  }

  /*三本バーアイコン*/
  #menubar_hdr.close {
    background: var(--mainColor) url(../img/icon_menu.png) no-repeat center top/50px;
    /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
  }

  /*閉じるアイコン*/
  #menubar_hdr.open {
    background: var(--mainColor) url(../img/icon_menu.png) no-repeat center bottom/50px;
    /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
  }

  /*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
  /*fixmenuから折りたたみメニューになるのでリセット。*/
  body.is-fixed-menu #contents {
    margin-top: 0px;
  }

  /*ヘッダーメニューが固定されなくなるので、再設定。
---------------------------------------------------------------------------*/
  .link {
    margin-top: -30px;
    padding-top: 30px;
  }


  /*-------------------------------------------------
施工事例の装飾（タブレットサイズ画面）
---------------------------------------------------*/
  .jirei {
    margin-bottom: 100px;
  }

  #case {
    width: 100%;
  }

  .jirei section#case .flex {
    flex-direction: row;
  }

  .jirei .flex {
    flex-direction: row;
  }


  .flex_item {
    width: 30%;
  }

  .case_text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* box-shadow: #999 -1px -1px 5px, #000 3px 3px 10px; */
    /* align-items: center; */
    /* border-radius: 15px 15px 15px 15px; */
    /* border: 1px solid #333; */
  }




}



/*-----------------------------------------------------
画面幅600px以下の設定
-------------------------------------------------------*/
@media screen and (max-width: 600px) {

  /*-----------------------------------------------------
ヘッダー(600px以下)
-------------------------------------------------------*/

  /*h2タグ*/
  #contents h2 {
    padding: 5px 20px;
    font-size: 1rem;
    border-radius: 3px;
    margin-bottom: 5px;
  }

  /*h2タグの１文字目*/
  #contents h2::first-letter {
    padding-left: 10px;
    /*線と文字との余白*/
  }

  /*トップページのロゴ画像*/
  #top #logo img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }

  /*-------------------------------------------------
施工事例の装飾（スマホサイズ画面）
---------------------------------------------------*/
  .jirei {
    margin-bottom: 100px;
  }

  #case {
    width: 95%;
    margin: 0 auto;
  }

  .jirei section#case .flex {
    flex-direction: column;
  }

  .jirei #case .case_img {
    width: 100%;
  }

  .jirei #case .case_text {
    width: 100%;
  }



  .jirei .flex {
    flex-direction: column;
  }


  .flex_item {
    width: 95%;
    margin: 0 auto;
  }

  .case_text {
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: #999 -1px -1px 5px, #000 3px 3px 10px; */
    /* border: 1px solid #333; */
    /* border-radius: 15px 15px 15px 15px; */
  }




}

/*-----------------------------------------------------
画面幅480px以下の設定
-------------------------------------------------------*/
@media screen and (max-width: 480px) {

  /*h2タグ*/
  #contents h2 {
    padding: 5px 15px;
    font-size: .9rem;
    border-radius: 3px;
    margin-bottom: 5px;
  }

  /*h2タグの１文字目*/
  #contents h2::first-letter {
    padding-left: 10px;
    /*線と文字との余白*/
  }


  body {
    font-size: 12px;
    line-height: 1.5;
  }

  .pc_disp {
    display: none;
  }

  .sp_disp {
    display: block;
  }

  /*-----------------------------------------------------
ヘッダー(480px以下)
-------------------------------------------------------*/
  /*トップページのロゴ画像*/
  #top #logo img {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 50%;
  }

  /*ロゴ画像（※トップページ以外）*/
  .s-n header {
    /* position: fixed; */
    z-index: 50;
    background-color: var(--subColorAlpha);
  }

  .s-n header #logo {
    width: 60%;
    /*画像幅*/
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translate(-60%, 0);
    z-index: 60;
  }


  /*-------------------------------------------------
トップページ２カラム横並びを、800px以下では縦並びに
それにカラム詳細設定
---------------------------------------------------*/

  .sub ul.submenu.flex {
    flex-direction: column;
    width: 95%;
    margin: 20px auto;
    /* flex-wrap: wrap; */
  }

  .sub ul.flex li {
    width: 100%;
  }


  .sub .flex.subbox {
    flex-direction: column;
  }

  .sub .flex section.box {
    width: 100%;
  }


  /*---------------------------------------------------
トップページのメインの特大バナーの詳細（スマホ）
-----------------------------------------------------*/
  #contents .inner .main section.main_banner .article {
    margin: 0 auto 50px;
    width: 100%;
    height: auto;
  }

  #contents .inner .main section.main_banner .article a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  a.main_banner_btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-decoration: none;
    width: 15em;
    background: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    opacity: .6;
    color: #000;
    font-weight: bold;
    z-index: 25;
  }

  p.main_banner_text {
    position: absolute;
    bottom: 0;
    left: 10px;
    text-align: center;
    color: #fff;
    z-index: 25;
    font-size: 1rem;
    font-weight: bold;
  }



  /*-----------------------------------------------
施工事例の目次ページのcss（スマホ画面）
-------------------------------------------------*/
  #case .case_index {
    position: relative;
    margin-top: 20px;
    /* margin-bottom: 20px; */
    width: 100%;
    margin: 10px auto;
  }

  #case .case_index a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    white-space: nowrap;
    font-weight: normal;
    background-color: rgba(125, 125, 125, .5);
    color: #fff;
    border-radius: 10px;
    align-items: center;
    padding: 2% 10%;
  }


  /*-------------------------------------------------
施工事例の装飾（スマホサイズ画面）
---------------------------------------------------*/
  .jirei {
    margin-bottom: 100px;
  }

  #case {
    width: 95%;
    margin: 0 auto;
  }

  .jirei #case .flex {
    flex-direction: column;
  }

  .jirei #case .case_img {
    width: 100%;
  }

  .jirei #case .case_text {
    width: 100%;
  }

  .jirei .flex {
    width: 90%;
    flex-direction: column;
    margin: 0 auto;
  }

  .jirei .flex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .jirei .ta1 {
    width: 95%;
    margin: 0 auto;
  }

  .flex_item {
    width: 95%;
    margin: 0 auto;
  }

  .case_text {
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: #999 -1px -1px 5px, #000 3px 3px 10px; */
    /* border-radius: 15px 15px 15px 15px;*/
    /* border: 1px solid #333; */
  }

  .case_text p {
    /* font-size: 5rem; */
  }


  /*-----------------------------------------------
豆知識のページの装飾
-------------------------------------------------*/
  #entrance article {
    margin-bottom: 50px;
  }

  #entrance article .flex {
    flex-direction: column;
  }

  #entrance article .flex figure,
  #entrance article .flex p {
    width: 100%;
    font-size: 1rem;
  }

  #entrance article p {
    width: 100%;
    font-size: 1rem;
  }

  /*------------------------------------------------
会社概要ページの装飾
--------------------------------------------------*/

  .company_detail {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }

  .company_img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
  }

  .company_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .company_text {
    width: 90%;
    height: auto;
    position: absolute;
    z-index: 20;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0%);
    background: rgba(125, 125, 125, .3);
    padding: 15% 5%;
    border-radius: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*--------------------------------------------------
コンタクトページのLINEブロック設定
----------------------------------------------------*/
  body#contact .flex {
    flex-direction: column;
  }

  .line_banner {
    width: 80%;
    margin: 0 auto;
  }

}