@charset "UTF-8";

/***********************-
タイトル : wasc
概要：モードセル

制作日：2026/05
-***********************/


#main #maincontents nav ul { margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap:6px; /* 隙間の広さはここで自由に調整 */
  justify-content: flex-start; /* 左詰めに変更 */}
#main #maincontents nav.top ul li{  width:calc( 50% - 5px);  }
#main #maincontents nav.top ul li.subhome{ display: none;}
#main #maincontents nav.sub ul li{  width:calc( 50% - 5px); }
#main #maincontents nav.sub ul {  margin:2em 0 0 0px; }
#main #maincontents nav.sub.sub2 ul {  margin:6em 0 0 0px;}
#main #maincontents nav ul li a{display: block; position: relative; background: #476898; color: #fff; border-radius: 5px;padding: .5em 25px;font-size: var(--fz8);}
#main #maincontents nav.sub ul li a{padding: .3em 25px;}

#main #maincontents nav ul li a::before{
font-family: "Font Awesome 7 Free";
 font-weight: 900;  
position: absolute; top:50%;  left: 10px;  transform:translateY(-48%); 
 content: "\f105"; }
#main #maincontents nav ul li a:hover,.dev #main #maincontents nav ul li.subdevelopment a,.method #main #maincontents nav ul li.submethod a,
.anchorbolt #main #maincontents nav ul li.subanchorbolt a,.process #main #maincontents nav ul li.subprocess a,
.comparison #main #maincontents nav ul li.subcomparison a,.root #main #maincontents nav ul li.subroot a,.ex #main #maincontents nav ul li.subex a{background: #719fd8;  }
.top #main #maincontents p,.sub  #main #maincontents p{margin: 0em 0 1em; }



p.lead{margin:1em  0!important; padding:0 !important;font-size: var(--fz8);}
	 #main #maincontents .ss {font-size: var(--fz10);}
p.l{font-size: var(--fz10);}

#maincontents p.d {margin: 0.5em 0 1em 3em !important;
      padding: 0px;
    }

#maincontents ul.list1{ margin:0.5em 1em}
#maincontents ul.list1  li {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0 0 0 1em;             /* デフォルト指定上書き */
    padding: 0 0 0 10px;             /* デフォルト指定上書き */
    position: relative;
}

#maincontents  ul.list1  li:before {
    content:  "";     /* 空の要素作成 */
    width:  5px;               /* 幅指定 */
    height:  5px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position: absolute; left:0; 
    top:8px;
    
}
#main #maincontents ul.list li{ margin:0 0 0.5em 2em;position: relative;  padding-left: 1em; }
#main #maincontents  ul.list li:before{
font-family: "Font Awesome 7 Free";
 font-weight: 900;  
position: absolute; top:5px;  left: 0; font-size: 8px;
 content: "\f111"; }


#maincontents dl{   margin: 1em auto; width:95%;}
#maincontents dl dt{  font-weight: 500; font-size: var(--fz12); display:  inline-block;  border-bottom: 1px solid ;}
#maincontents dl dd{  display: block; margin: 1em 0 2em;word-break: break-all; /* 単語の途中で改行を許可 */}

#maincontents h4 {font-size: var(--fz10); margin: 1em auto 0.5em;
  
   position: relative;/*相対位置*/
  line-height: 1.4;/*行高*/
  display: inline-block;
}
#maincontents h4:before, #maincontents h4:after { 
  position: relative;
 font-family: "Font Awesome 7 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 1.0em;
 color: #1a365d;
}
#maincontents h4:before {
  content:"\f053";/*アイコン種類*/
  padding-right: 0.5em
}
#maincontents h4:after {
  content:"\f054";/*アイコン種類*/
  padding-left: 0.5em
}

img.js-modal-open:hover{cursor : pointer;}
.modalwidth,.modalwidth2,.modalwidth3{
    position:relative;
    display:inline-block; cursor:pointer;
}

.modalwidth:before,.modalwidth2:before,.modalwidth3:before{
    font-family:"Font Awesome 7 Free";
    font-weight:900;
    content:"\f00e";

    position:absolute;
    bottom:-0px;
    right:-0px;
    z-index:10;
    font-size:30px;
    color:rgba(0,0,0,.6);

    pointer-events:none; /* ←重要 */
}

.root .modalwidth:before{
    bottom:20px;
    right:-20px; font-size:40px;
}
.modalwidth.modal2:before,.modalwidth2.modal2:before{
    bottom:25px;
}


#maincontents .flex dl.width60,#maincontents .flex div.width60{width:60%; height: auto;}

#maincontents .width35{width:35%; height: auto;}
#maincontents .width35 img.js-modal-open{width:100%; height: auto;  filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.7));}
#maincontents p.chui { position: relative; font-size: var(--fz8); padding-left: 1.2em; margin: 0.5em 0}
#maincontents .chui:before {
    content: "\203B"; /* ※ */
    position: absolute; left:0; 
    top:0;
}
.method #main  #maincontents strong,.method #main sup{color:#cc0000;}
.method #main  #maincontents .main ul.underline{margin:20px 0 0 ; width:50%; }
.method #main  #maincontents .main ul.underline li{ border-bottom:dotted #333333 1px;margin: 5px 0 5px 1em; padding:5px 0; }
img.gazosize{width:50%; height: auto;}

.method #main  #maincontents .main ol{margin:20px auto; list-style:upper-latin;  width:90%;}
.method #main  #maincontents .main ol li{ margin:0 0 8px; border-bottom:solid #333333 1px;margin: 0 0 0 1em }

.anchorbolt #main  #maincontents  img{display: block; margin: 1em auto; width:95%; height: auto;}

#main  #maincontents .kyocho{background:url(../modecell/bolt/arrow.gif) 50% 0 no-repeat; padding:40px 0 ; text-align:center; font-size:110%; font-weight:bold; color:#cc0000;}
#main  #maincontents .kyocho strong{border-bottom:2px solid #ffa400;}
#main  #maincontents  strong,p.lsize b{  color:#cc0000;background-color: #ff9; }
#main  #maincontents  strong.lsize{ display: block; margin: 1em auto; text-align: center;font-size: var(--fz12);}
p.lsize{ font-size: var(--fz12);}
#main  #maincontents  strong{  font-size: var(--fz10);}

dl.process  dd div.setumei {width:calc( 100% - 185px);}
dl.process  dd div.setumei2 { margin: 1em auto 0}
dl.process  dd div.setumei img{ display: block;  margin: 0 auto;width:90%; max-width: 280px; height: auto;}
dl.process  dd div.modalwidth{width:185px;}
dl.process  dd div.modalwidth3{width:210px; margin-left: 1em}
dl.process  dd div.modalwidth2{width:300px; margin-left: 1em}
dl.process  dd div.modalwidth img.js-modal-open,dl.process  dd div.modalwidth2 img.js-modal-open,dl.process  dd div.modalwidth3 img.js-modal-open{border: 1px solid #ddd; border-radius: 10px; width: 100%; height: auto;}

dl.process dd div.modalwidth img.modal-image{width:90%; max-width: 300px;}
dl.process dd div.modalwidth3 img.modal-image{width:90%; max-width: 420px; }
dl.process dd div.modalwidth2 img.modal-image{width:90%; max-width: 600px; }

dl.process  dd div ul.list1 li{ border-bottom: 1px dotted #ddd; margin: 0 1em 0.5em !important; padding-bottom: 0.5em !important;}
dl.process  dd div ul.list1{  padding:0 0 0 1em;}
dl.process  dd div.setumei2 ul.list1{  background: #f0f0f0; padding:1em; margin: 1em auto !important; width:100%;}

#maincontents dl.process  dd div ul.list1 li.chui{ position: relative;padding-left: 1em !important; }
#maincontents dl.process dd div ul.list1 li.chui:before {
    content: "\203B"; /* ※ */
    position: absolute; left:0; 
    top:0;

    width: auto;               /* 幅指定 */
    height:  auto;              /* 高さ指定 */
    display:block;     /* インラインブロックにする */
    background-color:rgba( 0, 0 ,0 ,0);  /* 背景色指定 */
    border-radius:  0;        /* 要素を丸くする */


    
}


dl.process{
    margin:0;
    padding:0;
}
dl.process dt,
dl.process dd{
    margin:0;
    padding:0;
}

/* 1セットを縦並びに */
dl.process dd{
    position:relative;
   margin-bottom:50px !important;
}

/* 横長の下向き三角形 */
.process dd::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-35px;
    transform:translateX(-50%);

    width:0;
    height:0;
    border-left:28px solid transparent;
    border-right:28px solid transparent;
    border-top:24px solid #476898;
}

/* 最後の矢印は非表示 */
.process dd:last-of-type::after{
    display:none;
}


/*動画*/
.mv-video{ text-align: center;}
.mv-video h5{ margin: 0.5em auto; }

/* 最初はスマホ用・PC用どちらの動画も非表示にする、またはベースを決める */
.video-pc, .video-sp {
    display: none;
    width: 100%; /* 必要に応じてサイズ調整 */
}

/* 画面横幅が767px以下のとき（スマホ） */
@media screen and (max-width: 767px) {
    .video-sp {
        display: block; /* スマホ用動画を表示 */
    }
}

/* 画面横幅が768px以上のとき（PC） */
@media screen and (min-width: 768px) {
    .video-pc {
        display: block; /* PC用動画を表示 */
    }
}

/* 従来の修復工法との比較 */

.comparison article {background:#f0f0f0; border-radius: 10px;	
	margin:1em auto;  width:100%;
	padding:1em ; text-align: center;
} 
.comparison article.ue {background:#fff; } 
.comparison article.ue ul { text-align:center; } 

.comparison article h3 { margin:0 0 10px 20px; border-bottom:1px dotted  #666; } 

.comparison article.sub ul{  margin:0 0 0 15px; } 
.comparison article li{ display:inline-block; vertical-align:middle; margin:10px 5px;text-align:center; font-weight:bold;} 
.comparison article li.how{  margin:10px 0 10px 20px;} 
.comparison article li img{ border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefo*/
	  box-shadow: 0 10px 6px -6px #777777; margin:0 0 5px;} 
.comparison article li.arrow img{  box-shadow: none;} 
.comparison table{ border-collapse:collapse; border:1px solid #666;} 

.wrap {
  overflow: auto;
}

.comparison table tr:first-child{ border-bottom:4px double #CCC;} 
.comparison table th{ background:#f0f0f0;}

.comparison table.how{  margin:30px auto; 	min-width:600px; 
} 


.comparison table.how th,.comparison table.how td{ border:1px solid #CCC; padding:5px 3px; font-size:80%; font-weight:normal;text-align:center;} 
.comparison table.how tr:nth-of-type(2) td { text-align:left;} 
.comparison table.how th:nth-child(6),.comparison table.how td.beta{  background:#FC9;font-weight:bold;} 
.comparison table.how .mode{border-left:2px solid #C00;} 
.comparison table.how .mode2{border-right:2px solid #C00;} 

.comparison table.how .ueyo{border-top:2px solid #C00;} 
.comparison table.how .sitayo{border-bottom:2px solid #C00;} 

.comparison table.hikaku{ margin:5px auto 15px ;width:95%; min-width: 600px; } 
.comparison h3{  margin:10px ; text-align:left;} 

.comparison table.hikaku th,.comparison table.hikaku td{ border:1px solid #CCC; padding:5px; font-size:90%; font-weight:normal;} 


#balloon-1-top {
	color: #19283C;
	position: relative;
	display: inline-block;
	padding:0;
	min-width: 115px;
	line-height: 32px;
	text-align: center;
	border: 3px solid #C00;
	z-index: 0;
	margin:0 auto 30px;
}
#balloon-1-top:before {
	content: "";
	position: absolute;
	top: -8px; left: 80%;
	margin-left: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent #fff transparent;
	z-index: 0;
}
#balloon-1-top:after {
	content: "";
	position: absolute;
	top: -12px; left:  80%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #C00 transparent;
	z-index: -1;
}
img.hikaku{ display: block; margin: 2em auto; width:100%; height: auto;}
#maincontents ul.cuhi li{ position: relative;padding-left: 1em !important; font-size: var(--fz8)}
#maincontents ul.cuhi li:before{ content: "※"; position: absolute; left:0;}


.root #maincontents  div.modalwidth{width:90%; max-width: 600px; height: auto; margin: 1em auto;}
.root #maincontents  div.modalwidth img.js-modal-open{width:100%; height: auto;}

.root #main #maincontents .map{margin:20px auto; width:90%; max-width:600px;}

.root #main #maincontents .map p{margin:10px 0 15px!important;}
.root #main #maincontents .dairiten h4{font-size: var(--fz12);}
.root #main #maincontents .dairiten p.close{ text-align:right; margin:-1.5em 0 0em 0;font-size: var(--fz8);  }
.root #main #maincontents .dairiten p.close a{ background:#333; color:#fff; padding:3px;}


.root #main #maincontents .dairiten .nasi{ margin:15px auto; width:572px;}
.root #main #maincontents .dairiten dl{ margin:10px  1em  0  1em !important; }
.root #main #maincontents .dairiten dl span{ margin:0 0 0 1em;}
.root #main #maincontents .dairiten dl dt{ border:none; background:#666; padding:5px 8px;color:#FFF;margin:0 auto 0 !important;font-size: var(--fz10);}
.root #main #maincontents .dairiten dl ul{ margin:10px 0 0 0em; list-style:none; border-left:3px solid #666; padding:0 0 0 8px;}

.root #main #maincontents #no01{ background:#eae7cc; padding:10px 15px !important;}
.root #main #maincontents #no02,.root #main #maincontents #no03,.root #main #maincontents #no04,.root #main #maincontents #no05,.root #main #maincontents #no06,.root #main #maincontents #no07{ background:#e8f6fc; padding:10px 15px !important;}
.root #main #maincontents #no08,.root #main #maincontents #no09,.root #main #maincontents #no10,.root #main #maincontents #no11,.root #main #maincontents #no12,.root #main #maincontents #no13,.root #main #maincontents #no14,.root #main #maincontents #no15{ background:#f2e7d6; padding:10px 15px !important;}
.root #main #maincontents #no16,.root #main #maincontents #no17,.root #main #maincontents #no18,.root #main #maincontents #no19,.root #main #maincontents #no20{ background:#fff3ff; padding:10px 15px !important;}
.root #main #maincontents #no21,.root #main #maincontents #no22,.root #main #maincontents #no23,.root #main #maincontents #no24{ background:#dff4f1; padding:10px 15px !important;}
.root #main #maincontents #no25,.root #main #maincontents #no26,.root #main #maincontents #no27,.root #main #maincontents #no28,.root #main #maincontents #no29,.root #main #maincontents #no30{ background:#fffbca; padding:10px 15px !important;}
.root #main #maincontents #no31,.root #main #maincontents #no32,.root #main #maincontents #no33,.root #main #maincontents #no34,.root #main #maincontents #no35{ background:#f7e4ee; padding:10px 15px !important;}
.root #main #maincontents #no39,.root #main #maincontents #no36,.root #main #maincontents #no37,.root #main #maincontents #no38{ background:#fff5e9; padding:10px 15px !important;}
.root #main #maincontents #no40,.root #main #maincontents #no41,.root #main #maincontents #no42,.root #main #maincontents #no43,.root #main #maincontents #no44,.root #main #maincontents #no45,.root #main #maincontents #no46,.root #main #maincontents #no47{ background:#e7edd9; padding:10px 15px !important;}



/* =========================
   Masonry Gallery
========================= */
.gallery{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
    max-width:1000px;
    margin:0 auto;
}

.gallery-item img{
    width:100%;
    height:auto;
    display:block;
}
/* スマホ */
@media (max-width:600px){
    #maincontents .flex dl.width60,#maincontents .flex div.width60{width:95%;  margin: 0 auto}

#maincontents .width35{width:95%;  margin: 0 auto; text-align: center;}
#maincontents img.width35 { max-width: 250px; display: block; }
 #maincontents .width35 img.js-modal-open{ max-width: 300px; display: block; margin: 0.5em auto }
   
    
#maincontents p.chui { position: relative; font-size: var(--fz8); padding-left: 1.2em; margin: 0.5em 0}
#maincontents .chui:before {
    content: "\203B"; /* ※ */
    position: absolute; left:0; 
    top:0;
}
    
    
dl.process  dd div.setumei {width:95%; margin: 0 auto;}
dl.process  dd div.setumei2 { margin: 1em auto 0}
dl.process  dd div.setumei img{ display: block;  margin: 0 auto;width:90%; max-width: 280px; height: auto;}
dl.process  dd div.modalwidth{ display: block;  margin: 0 auto;}
dl.process  dd div.modalwidth3{ display: block;  margin: 0 auto;}
dl.process  dd div.modalwidth2{ display: block;  margin: 0 auto;}

.wrap{
    position:relative;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.wrap::before{
    content:"⇆ 横スクロール";
    position:absolute;
    top:0px;
    right:5px;
    z-index:10;

    font-size:12px;
    color:#fff;
    background:rgba(0,0,0,.7);
    padding:6px 10px;
    border-radius:20px;

    pointer-events:none;
}
    
}



/* スマホ */
@media (max-width:480px){
   #main #maincontents nav.top ul li{  width:calc( 100% - 5px);  }
#main #maincontents nav.sub ul li {  width:calc(50% - 5px);}
.gazosize{ display: block; margin: 1em auto}

}