@charset "UTF-8";

/***********************-
タイトル : wasc
概要：wscpipe

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

#maincontents h1 b span{ display: block; font-weight: 500;}
#maincontents h1 b{ display: block; line-height: 1.3; padding: 0.3em;}
#maincontents h1 b.blue_b{ color: #fff;line-height: 1.2;}
#maincontents p.lead{ margin: 0 0 0.5em; }
#maincontents  p{ margin: 0 0 1em; }

#maincontents article{ position: relative;}
#maincontents .photo01{ position:  absolute; right:0 ;top:0}
#maincontents .photo02{  float: right; display: block; margin: 0 1em 1em 1em;}
#maincontents #main img{ width:auto; height: auto; max-width: 90%;}
#maincontents  img.photo03{   display: block; margin: 1.5em 0;width:auto; height: auto; max-width: 90%;}


.pipphoto { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
    margin: 1em auto 3em;
    list-style: none;
}

.pipphoto img {
    padding:0px; width:100%; height: auto;
    border-radius: 10px;
}

/* タブレット */
@media (max-width: 768px) {
.pipphoto {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ */
@media (max-width: 480px) {
.pipphoto {
        grid-template-columns: 1fr;
    }
}

.tobe {
  display:block;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #476898; width:90%; margin:3em auto 1em; max-width: 400px;
  border:2px solid #476898;
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;  padding: 0.8em; border-radius: 20px;
}
.tobe span{display: block; margin: 0;padding: 0}
.tobe:hover {
  color: #fff;
  border:2px solid #476898;
  background-color: #476898; -webkit-transition: all .3s;
  transition: all .3s;   border-radius: 20px;
}




#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{
    position:relative;
    display:inline-block; cursor:pointer;
}

.modalwidth: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; /* ←重要 */
}
.modalwidth img.modal-image{width:90%; max-width: 800px; padding: 1em; background: #fff; }


table.kakakuhyo{ 
	margin:15px 0 0 0px;
	 border-collapse: collapse;
max-width:700px; width: 95%;}

table.kakakuhyo th,table.kakakuhyo td{
	vertical-align:middle;
	font-size:85%; 
line-height:1.3;border:  1px solid #666666;}

table.kakakuhyo th{
	padding:3px 4px;
	font-weight:normal;
	background-color:#f0f0f0;
	 text-align:center;
}
table.kakakuhyo td{
	padding:3px 10px 3px;
	text-align:center;
}

table.kakakuhyo th.thleft{
	text-align:left;
}

.hitomoji{
margin-left:1em;}
.chuhibun{
	margin:3px 15px 10px 0;
	font-size:90%;
	text-align:right;
}
table.kakakuhyo span{ display: block; font-size:10px;}

dl.dw dd a { width:45%;  display: inline-block;}





@media (max-width: 643px) {
#destruction #main #maincontents .wasc2{
	margin:25px 0;
	padding:10px; width:90% !important; }
.okonomi table.kakakuhyo{ 
	margin:15px auto;
	 border-collapse: collapse;
max-width:700px; width: 95% ;}
}
@media (max-width: 500px) {
	.pipphoto { text-align: left;}
	.pipphoto img{  width: calc( 100% / 2  - 7px ); height: auto;}
}