@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: """";
}
b{ font-weight: 500;}

a img {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 62.5%;/*初期値16pxの62.5%でルートが10px*/
   scroll-behavior: smooth; 
} 
body {
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #0268b6;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  font-weight: 400;
}
/*全てをクリア*/
.clear {
  clear: both;
}
/* new clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */
/* リンク設定
------------------------------------------------------------*/
a, a:visited {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  color: #0268b6;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
a:hover, a:active {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
  color: #d70c18;
}

/**** Clearfix ****/
/* レイアウト
------------------------------------------------------------*/
.inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 98%;position: relative;
}
.inner2 {
  margin: 0 auto;
  padding:  0; position: relative;
  max-width:1050px;
  width: 95%;
}

.inner3 {
  margin: 0 auto;
  padding: 30px 0; position: relative;
  max-width: 900px;
  width: 90%;
}

#wrapper {
  margin: 0 auto 0px;
   font-size: clamp( 14px, 1.6vw, 16px); 
  padding: 0 0 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
 text-align: justify;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}


/* 共通変更 フォントサイズ　*/
.font12 { font-size: clamp( 10px, 1.2vw, 12px); }/*  10px 最大　2px*/
.font14 { font-size: clamp( 12px, 1.4vw, 14px); }/*  12px 最大　14px*/
.font16 { font-size: clamp( 14px, 1.6vw, 16px); }/*  14px 最大　16px*/
.font17 { font-size: clamp( 14px, 1.8vw, 17px); }/*  14px 最大　17px*/
.font18 { font-size: clamp( 16px, 1.8vw, 18px); }/*  16px 最大　18px*/
.font20{ font-size: clamp( 16px, 2.0vw, 20px); }/*  16px 最大　20px*/
.font22 { font-size: clamp( 18px, 2.2vw, 22px ); }/*  18px 最大　22px*/
.font24{ font-size: clamp( 18px, 2.4vw, 24px); }/*  18px 最大　24px*/
.font26{ font-size: clamp( 18px, 2.6vw, 26px); }/*  20px 最大　26px*/
.font28 { font-size: clamp(20px, 2.8vw, 28px); }/*  20px 最大　28px*/
.font30{ font-size: clamp(24px, 3.0vw, 30px); }/*  24px 最大　30px*/
.font32{ font-size: clamp( 26px, 3.4vw, 32px); }/*  26px 最大　32x*/
.font36{ font-size: clamp( 28px, 3.6vw, 36px); }/*  28px 最大　36px*/
.font40{ font-size: clamp(30px, 4.0vw, 40px ); }/*  30px 最大　40px*/
.font42 { font-size: clamp( 26px, 4.6vw, 42px ); font-weight: 600;}/*  32px 最大　42px*/

/* ヘッダー
----------------------------------*/
#glovalheader { padding: 20px 0 10px ; z-index: 1000;position: fixed; /*← fixedで固定 */ width:100%; }
.sub #glovalheader{  background: #fff; }
#glovalheader h1 { width:80%;  margin: 6px 0 0 0 ; max-width:450px;}
#glovalheader h1 img {  width:100%; height: auto; display: block;}
#glovalheader.smaller{ padding: 10px 0 10px ; border-bottom: 1px solid #ddd; background: #fff; }

/* ナビ
----------------------------------*/
#menu { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin: 0 0;  width:75%; 
}
#menu-inner {width: 100% !important;}
#menu-btn {
  display: none;
}

#menu-content {
  margin: 0; padding:0.8em 0 0;
  list-style-type: none;  text-align: center;
}

#menu-content > li { margin: 0; 
  position: relative; padding:0 5px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;text-align: center;
}

#menu-content > li > a {
  display: block;
  padding: 2px 1.5em;
  color: #0268b6; background: #fff;
  text-decoration: none; 
position: relative;
  cursor: pointer;transition: all 0.5s ease 0s;
    
}
#menu-content >  li > a:hover,.philo #menu-content >  li > a.btnphilosophy,.about #menu-content >  li > a.btnabout,.company #menu-content >  li > a.btncompany,.service #menu-content >  li > a.btnbusiness{
 color: #fff; background: #0268b6; transition: all 0.5s ease 0s;
}



@media screen and (min-width: 1100px) {
.moblogo{ display: none;}
#menu-inner {width: 100% !important; max-width: 550px; }
#menu-content {
  margin: 0; 
  list-style-type: none; display: flex;
 justify-content: flex-end;
} 
.home #menu-content > li > a.btnhome { color: #fff; background: #0268b6; }    
 #menu-content > li.mob  {display: none;}
#glovalheader .inner{  display: flex;  justify-content: space-between;}

#menu-content > li > a {border-radius: 30px;}
.sub #menu-content > li > a { border: 1px solid #0268b6; }

}
@media screen and (max-width: 1100px) {
nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0; background: #fff;
  }
    #glovalheader #navArea{ background: #ddd;}
    .moblogo{ display: block; margin: 1em auto 2em; max-width:150px; height: auto; }
   .open nav {
    left: 0;
    opacity: 1;
  }
 #navArea  nav .inner {
    padding: 1.5em 0; margin: 0  ; 
width: 100% !important;}
 #navArea  nav .inner ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
 #navArea  nav .inner ul li {
    position: relative;
    margin: 0;
  }
 #navArea  nav .inner ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed; background:#0268b6;
    top: 10px;
    right: 20px;
    width: 40px;
    height:40px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 4px;
    width:32px;
    height: 3px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top:10px;
  }
  .toggle_btn span:nth-child(2) {
    top: 18px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 10px;
  }
  .open .toggle_btn span {
    background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(315deg);
    transform: translateY(-8px) rotate(45deg);
  }
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }
    #navArea{ }
  #menu-content > li {
    width: 100%; 
    margin: 0 0 1px;
  }
  #menu-content > li:hover {
    background: none;
  }
  #menu-content > li > a {
    height: 100%;
    padding: 1em 1em 1em 1.5em;
    font-size: 100%;
    background: #fff; 
    text-align: left;
    border-bottom: 1px dotted #005da3;
  }
     #menu-content > li > a:hover {
    background: #005da3; color: #fff !important;
  } 
#menu-content > li > a::before {
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0da"; font-size: 12px;
  position: absolute; 
  left:5px; top:50%; transform:  translateY(-50%);
} 
    
    
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #menu-content > li > ul.second-content > li {
    width: 100%;
    text-align-last: left;
  }
  #menu-content > li > ul.second-content > li > a {
    padding-left: 1.5em;
  }
  #menu-content > li > ul.second-content > li > a:hover {
  background: #0268b6;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li.mob.mob2{  margin: 1em 0 1px;}
 #menu-content > li.mob > a {
    height: 100%;
    padding: 0px 0 0 1em;
    font-size:95% !important;
    background: none; border: none;
  }
    

}
@media screen and (max-width: 600px) {
 nav {
    width: 80%;
  }}

/*# sourceMappingURL=style.css.map */



/* フッター
----------------------------------*/

#footer { margin: -5px auto 0; padding: 4px 0; width:100%;  
  overflow: hidden; color: #fff; background: #0268b6;
  text-align: center;  
}
#footer .inner2{ text-align: left; position: relative; padding: 10px 0 0;}
#footer img{ width:100px; height: auto;}
#footer img,#footer dl{ display: inline-block; vertical-align: middle;}
#footer dl dt,#footer dl dd{ display: inline-block; vertical-align: middle; padding:0 0.5em 0;}
#footer dl dd a{  margin-left: 1em;}
#footer dl dd span,#footer dl dd a{ display: inline-block; vertical-align: middle}
#footer dl dd span{ display:  inline-block; margin-left: 1em}
#footer a{ color: #fff;}
#footer a u{  text-decoration: none;}
#footer a u,#footer a .fa-solid{  display: inline-block; vertical-align: middle}

#footer dl{  padding:0 0 0 1em;}

address{ margin:0.5em auto  ;text-align: center; display: block;}

#page-top1 {
  display: block;
  position: fixed;
  z-index: 9999;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  font-size: 16px;
  font-size: 1.6rem;
  vertical-align: middle;
  background: #0268b6;
  border-radius: 50%;
}
a#page-top1 {
  color: #fff !important;
}
#page-top1 span {
  display: block;
  margin: 10px auto 0;
  font-size: 20px;
  font-size: 2.0rem;
}

.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.center {
  text-align: center;
}
#slider-area  a{ position: relative; display: block; }
#slider-area  a:before {
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f00e"; 
  font-size: 60px; color: rgba(255,255,255,0.7);
  position: absolute;
right:5px; bottom:2px;


} 


/* 共通文字
----------------------------------*/
.blue{color: #0268b6;}
.red{color: #d70c18}
ol {
  list-style: none;
  counter-reset: number; 
}
li {
  position: relative;
  padding-left: 1.5em;
}


.breadcrumb {
     margin:0.5em auto ; 
  padding: 0.3em 0 0.4em;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f105"; margin-left: 0.5em;

} 

.breadcrumb li{
  margin: 0  0 0; padding: 0 0 0 .5em;
}



[id] {
  scroll-margin-top: 20px; /* ヘッダー + 余白の分だけ調整 */
}


/*トップ*/

/* ===== トップページのみ ===== */
#home #contents {
  min-height: calc(100vh - var(--header-h));
}

/* ヘッダー高さをCSS変数で管理（例：80px） */
:root {
  --header-h: 90px;
}

/* メインビジュアルを画面いっぱいに */
#home .main {
  position: relative;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.slide li{ padding: 0; margin: 0;}

/* ===== スライド全体 ===== */
#home ul.slide,
#home ul.slide li {
  height: 100% ;
}

#home ul.slide {
  margin: 0;
  padding: 0;
}

/* slickの中身をフルサイズに */
#home ul.slide li {
  position: relative;
  overflow: hidden;
}
/* 画像を中央トリミング */
#home ul.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.main h2{ position: absolute;  width:95%; max-width: 1200px; top:45%; left:50%; transform: translate(-50%,-45%);text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;  font-weight:400;
}
.main h2 span{ display: block; position: relative; padding-left: 1em; margin: 0.15em 0 ; line-height: 1.4;}
.main h2 span:before{ content:'・';  position: absolute; left:0;}


.sub #contents{ margin: 100px 0 0;background: #e7f0f9; padding: 0px 0 20px;}

.sub .subheader { padding: 40px 0 ; color: #fff; background: #0268b6;}

.sub .subheader h1{  line-height: 1.3;}
.sub .subheader h1 span{ display: block; }

.sub article { padding: 30px 0 90px;   }
.sub article h2 { margin: 0　0　0px; 
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.sub article h2:before, .sub article h2:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.sub article h2:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.sub article h2:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}


.sub article .honbun{margin: 50px 0 0; padding: 0;position: relative;}
.sub article h3{ margin: 1em 0 1em; }
.sub article.rinen h3{ margin: 2em  0 1em; }
.rinen ol { display: flex;
  counter-reset:list;
  list-style-type:none; justify-content: center; /* 左右中央寄せ */
  padding: 0px; margin: 0 auto 5em}
.rinen ol li {  width: calc( 100% / 3 );aspect-ratio: 1 / 1;
  margin:0 10px 0 0px; max-width:150px; border-radius: 50%;
background: #ffd8a9; text-align: center; position: relative; padding: 1em; 
}
.rinen ol li span {  position: absolute; text-align: center; top:50%; left:50%; transform: translate( -50%, -50%); width:95%;
}
.rinen ol.font18 { font-size: clamp( 14px, 1.8vw, 18px); }/*  14px 最大　18px*/

.company dl{ display: flex; flex-wrap: wrap;border-bottom:  1px dotted #0268b6;}
.company dl dt,.company dl dd{ border-top: 1px dotted #0268b6; padding: 1em 0.5em;}
.company dl dt{  width:6em;}
.company dl dd{  width:calc( 100% - 8em);}
a.nandemosarvice{ display: block; margin: 1.5em auto; width:95%; max-width:600px;}
a.nandemosarvice img{ display: block; margin: 0.5em auto 0; width:100%; height: auto; }

img.nandemosarvice{ float: right; width:30%; min-width: 150px; height: auto; margin: -3em 0 1em 1em}

.service ul.nav li{ display: inline-block; vertical-align: middle; margin: 0 1em 0 0; padding: 0.5em 1em ;text-align: center;  background: #fff; border-radius: 30px}
.service ul.font18.nav { font-size: clamp( 12px, 1.8vw, 18px); }/*  14px 最大　18px*/

img.photof{ display: block; margin: 40px auto 40px; width:100% !important;  height: auto;   border-radius: 10px}

.fudosan img.zuhan{float: left; width:30%; min-width: 120px; height: auto; margin:-1em 2em 1em 0;}

.fire{  position: relative;}
.fire .firelogo{  width:40%; height: auto; max-width: 200px; position: absolute; right:0px; top:50px;}
h3.logotitle{ text-align: center !important; padding: 2em 0 0 0;

    display: flex;
    justify-content: center;
  align-items: center;
}
h3.logotitle:before,
h3.logotitle:after {
    content: "";
    height: 1px;
    width:2em;
    background-color: #666;
}
h3.logotitle:before {
    margin-right: 1rem;
}

h3.logotitle:after {
    margin-left: 1rem;
}
p.photo { text-align:center;padding: 0 0　2em; }
p.photo img{ display: inline-block; vertical-align: middle; height: 80px; width:auto; margin: 0.8em;}
p.fire { text-align:center;padding:2em 0  }
p.fire img{ display: inline-block; vertical-align: middle;width:calc( 100% / 3 ); height: auto;}

.fireservice{ margin: 30px auto 0;  padding: 1.5em 2em 0; position: relative; border:2px solid #fe0100; border-radius: 10px; background: #fff;}
.fireservice h3{ font-weight: 500;}
.fireservice dd{ margin: 1em 0 2em; display: flex;align-items: flex-start; }
.fireservice dd p{ margin: 0 1.5em 0 0; }
.fireservice dd p.second{ margin: 0 3em 0 0; }

.fireservice dd img{  width:auto; max-width: 200px; height: auto; display: block;  border-radius: 5px;  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);}
.fireservice .re{flex-direction: row-reverse;}
.fireservice dd.re p{ margin: 0 0 0 1.5em; }


/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/

@media only screen and (max-width:1000px) {
  address{ text-align: center; margin: 0em auto 5px;}
#footer dl dt,#footer dl dd{ display: block;  padding:0 0.5em 0;}
#footer dl{  padding:0 0em 0 1em;}
}
@media only screen and (max-width:900px) {
img.nandemosarvice{  margin: -1em 0 1em 1em}
}
@media only screen and (max-width:800px) {
#footer .privacy{  padding:1em 0em 0 0; display: block;text-align: right;}
#footer img{  display: block; margin: 15px auto 5px;}
#footer dl dt,#footer dl dd{ width:100%;   margin: 0.5em auto !important; padding: 0 !important;}
#footer dl{display: block; padding: 0 ; margin: 1em auto; width:95%; max-width: 400px}
#footer dl dt{ text-align: center;}
#footer dl dd{txt-align: left !important;}
    #footer dl dd span,#footer dl dd a{ display:block; margin-left: 0}
.sub article { padding: 15px 0 40px;   }
/* ===== トップページのみ ===== */
#home #contents {
  min-height: calc(100vh - var(--header-h) - 60px);
}

}@media only screen and (max-width:876px) {
/* ===== トップページのみ ===== */
#home #contents {
  min-height: calc(100vh - var(--header-h) - 60px);
}/* 画像を中央トリミング */
#home ul.slide img {
  width: auto;
  height: 100%;

}
}




@media only screen and (max-width:650px) {

#footer { margin: 0px auto 0; padding: 10px 0;
}
/*トップ*/
.main{ position: relative; margin: 0; padding: 0; width:100%; height: calc(100vh - 130px);   overflow: hidden; }
.slide img{ width:auto; max-height: 950px; height: 100%;}
.sub article .honbun{margin: 25px 0 0; padding: 0;position: relative;}

    
.company dl{ display: block;border-bottom:  1px solid #0268b6; margin: 0;}
.company dl dt,.company dl dd{ border: none; width:calc( 100% - 1em ); margin:0 auto;padding: 0.5em;}
    .company dl dt{  background: #0268b6; color: #fff;}
  .service ul.nav li{  margin: 0 0.3em 0 0; padding: 0.5em 0.8em ;}  
    .fudosan img.zuhan{float:none;display: block;  width: 250px; min-width: 120px; height: auto; margin:1em auto 2em;}
    p.photo img{ height:60px; width:auto; margin: 0.8em 0.2em;}
h3.logotitle{ text-align:left !important; padding: 2em 0 0 0;}
.fireservice dd{ margin: 1em 0 2em; padding: 0; display: block;align-items: flex-start; }
.fireservice dd p,.fireservice dd p.second{ margin: 0 0; padding: 0; }
.fireservice dd img{ width: 200px; height: auto;  margin: 1em auto 0;}
.fireservice dd.re p{ margin: 0 ; }
.main h2{ text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;
}
#footer dl dt.font18 { font-size: clamp( 14px, 1.8vw, 18px); }/*  14px 最大　18px*/
.fireservice{  padding: 1em 1.25em 0; }
#footer dl dd{ align-items: start; text-align: left !important; }
    
.rinen ol { margin: 0 auto 2em}
    
}

@media only screen and (max-width:450px) {
    .main{  height: calc(100vh - 150px);   }

}
@media only screen and (max-width:400px) {
#footer dl dd span{ display: block; margin-left:0em}}
@media print {
}
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}