@charset "UTF-8";

/* iPhone や Androidの縦向き横向きの文字サイズ自動調整をOFF */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%

}

/* クリアフィックス */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix:before {
content: "";
display: block;
clear: both;
}
.clearfix {
  display: block;
}

/* 非表示 */
.none {
  display: none;
}
/* 表示しないがスペースは確保 */
.hidden {
  visibility:hidden;
}

/* はみ出した分を表示させない・float親要素の高さを認識 */
.overflowh {
  overflow: hidden
}

/* floatによる左揃え */
.left{float:left}

/* floatによる右揃え */
.right{float:right}

/* ***************************************************************************************************************** */

body {
  font-family:  'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','游ゴシック', 'Yu Gothic','メイリオ', 'Meiryo','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  color:#333;
 
}
/* Safariにのみ適用させるCSSハック */
_::-webkit-full-page-media, _:future, :root body {
  letter-spacing: -.02em;
  font-weight:500;
  font-size:1rem;
}
img {width:100%}

a:hover {opacity:0.9; transition : opacity .1s ease-in-out 0s; }
a {opacity:1; transition : opacity .2s ease-in-out 0s; }

h1 img{width:180px;margin:1rem 0 0 1rem;float:left}
h2 {
   font-size:28px;font-weight:bold;color:#0044cc;margin:2.5rem 0 3rem;
}
.cont {
  width:100%;text-align:center;padding:1rem;
}

.mail {float:right;margin:1.5rem}
.mailimg {width:32px;margin-left:.5rem;margin-bottom:-.1rem;}

#main {width:100%;text-align:center;background-image:url(../img/as457162436.jpg);background-size:cover;padding:10vw 0;}
#main img {width:100%;max-width:600px;margin:0 auto; filter: drop-shadow(0px 0px 8px rgba(255,255,255,1)) drop-shadow(0px 0px 8px rgba(211,211,211,1)) drop-shadow(0px 0px 8px rgba(211,211,211,1))" alt="コンクリートの気泡にお困りではないですか？"  class="animate__animated animate__zoomIn animate__slow}

img.safebantitle {width:100%;max-width:260px;padding:0 1rem}
img.sefban_subtitle {width:50%;max-width:260px;padding:.5rem}

.btn a {
  display:block ;
  background-color: #344394;
  padding:1.5rem 0;
  width:25rem;
  margin:4rem auto;
  color:white;
}

.cap {line-height:1.2rem}
.ic,.ex{width:49%;padding:2rem 1rem;text-align:center;}
.ic {float:left}
.ex {float:right}
.safeban p.spec {font-size:.8rem;margin:1rem;line-height:1.5rem;}
.safeban p.cap {margin-top:-2vw}
.sekou {color:#333}
.sekou-item { display:flex;justify-content:space-between;width:100%;max-width:900px;margin:0 auto}
.sekou-item .item {width:100%; box-flex: 1;}
.sekou-item .item p {width:100%; text-align: center;padding:1rem 0 3rem;}
.sekou-item .item img {width:92%}

.movie {width:100%;max-width: 900px;margin:0 auto;padding:2rem 0;}
.youtube {  position: relative;padding-top: 56.25%;}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.pdf {display: flex;border:1px solid #ddd ;width:100%;max-width:900px;padding:1rem;margin:1rem auto 5rem; text-align: left;}
.pdf .txt {font-size: .8rem;line-height:1.5rem;width:100%;}
.pdf h3 {font-size: 1.1rem;font-weight: bold; border-bottom:1px solid #ccc;padding-bottom:.5rem;margin-bottom:1rem}
.pdf .img{padding:0 1.5rem 0 .5rem;}
.pdf img { width:178px;height:253px}
.pdf dl {margin:.6rem 0 0}
.pdf dt {float: left;margin-right:1rem}
.pdf dd {font-weight:bold;}
.pdf .dl a {border:1px solid #ccc;padding:.5rem 5rem;float: right;} 

#mailform {background-color: #f0f2f6;width:100%;}
#mailform .cont {width:100%;max-width:900px;padding:0;margin:0 auto}
#mailform .cont iframe {
  width: 100%;
   height: 58rem;
}

#footer {background-color: #333;padding:1rem}
#footer div{margin:0 auto;width:100%;max-width:900px;}
#footer img {border:1px solod red;margin:1.5rem 0 1rem;}
#footer p {line-height:1.7rem;margin:1rem 0 2rem;color:white;font-size:.9rem}
#footer p.copy{font-size:.8rem}

.arrow2{
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid;
  border-color: #999 #999 transparent transparent;
  transform: rotate(-45deg);
  
  right:3rem;
  bottom: 3rem;
  position: fixed;
}

.l-section {
  opacity: 0;
  transition: opacity 1.5s, transform 1.5s;
}
.js-scrollAnimation {
  opacity: 1;
  transition: opacity 1.5s, transform 1.5s;
}

@media only screen and (max-width:600px) {
  h2 {font-size:18px;}
  .ic,.ex {width:100%; clear:both;}
  p.cap {font-size:.9rem;}
  .btn a {width:100%}
  .pdf .dl a {width:100%;margin:1rem auto;text-align: center;padding:.5rem}
  .pdf {display: block;}
  .pdf .txt,.pdf .img {display: block;width:100%}
  .pdf .img {margin-bottom:2rem;width:100%;text-align: center;}
  .arrow2{right:2rem;bottom:2rem;}
}
@media only screen and (max-width:414px) {
  .sekou-item {display: block;}
  .sekou-item .item img {width:100%}
  .arrow2{right:1rem;bottom:1rem;}
  #mailform .cont iframe {height: 70rem;}
  .section__ttl {padding: 1rem; }
  .safeban p.cap {margin-top:-4vw}
}
@media only screen and (max-width:375px) {
  .mail span {display: none;}
}