@charset "UTF-8";

/*--------------------------------------------------------
  共通レイアウトパーツ設定
--------------------------------------------------------*/
/* パーツBOX */
#partsbox{
position: relative;
border:solid 1px;/* 段落のブロック枠 */
z-index:58 ;
}

#pdpartsbox{
  position: relative;
  border:solid 1px;/* 段落のブロック枠 */
  z-index:58 ;
}



/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
  カスタムパーツデザイン設定
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/

/*--------------------------------------------------------
  ロールスライド画像[]----
--------------------------------------------------------*/

#imgslider a{
  text-decoration: none;
}
#imgslidebox{
  position: relative;
  border:solid 1px;/* 段落のブロック枠 */
  z-index:58 ;
  width:325px;
  height:325px;
}
#imgslider{
  width:100%;
  position:absolute;
  text-align: center;
  margin-top: 300px;
  z-index:99 ;
}
#imgslideTable{ /*左右の画像をカラム化しているテーブル*/
  position:absolute;
  margin-left: 0px;
  margin-top: 50px;
  border:0px;
  /*z-index:99 ;*/
}
#imgslideTable td{
  border-right:0px;
  border-bottom:0px;
}
#aimgl,#aimgr{
  border-radius: 5%;
}
#imgslideTable #aimgl:hover,#aimgr:hover{
  background-color: #eeeeee;
}s
#imgslideTable td:nth-child(1):hover{background-color: #ff0000;}

  #imgarea0{
    background-image : url(https://88888ds.com/img/service-s01.jpg);
    background-repeat:  no-repeat;
    width:325px;
    height:325px;
    background-position:center center;
    background-size:contain;
    display:block;
  }
  #imgarea1{
    background-image : url(https://88888ds.com/img/service-s02.jpg);
    background-repeat:  no-repeat;
    width:325px;
    height:325px;
    background-position:center center;
    background-size:contain;
    display: none;
  }
  #imgarea2{
    background-image : url(https://88888ds.com/img/service-p01.jpg);
    background-repeat:  no-repeat;
    width:325px;
    height:325px;
    background-position:center center;
    background-size:contain;
    display: none;
  }
  #imgarea3{
    background-image : url(https://88888ds.com/img/service-p02.jpg);
    background-repeat:  no-repeat;
    width:325px;
    height:325px;
    background-position:center center;
    background-size:contain;
    display: none;
  }


/*--------------------------------------------------------
  プルダウンメニュー[label for]----
--------------------------------------------------------*/

#pptag1,#pptag2,#pptag3{
  background-image : url(../../img/pull.png);
    background-repeat:  no-repeat;
    background-size:20px;  
    width:300px;
    padding-top: 2px;
}
#label1,#label2,#label3{
  display: none;
}
#pdpartsbox a{
font-size:15px;
}
#pdsubmenu001,#pdsubmenu002,#pdsubmenu003{
  display: none;
}
#label1:checked ~ #pdsubmenu001 {
  display:block;
}
#label2:checked ~ #pdsubmenu002 {
  display:block;
}
#label3:checked ~ #pdsubmenu003 {
  display:block;
}

/*--------------------------------------------------------
  ホバーによるメニュー001を動的操作　hover----
--------------------------------------------------------*/
#hoverimg001{/**/
  position: relative;
  margin-top: 20px;
  background-color:#2e3848;
  border-radius: 0ps 5px 5px 0px;
  z-index:60 ;
}
#hovermenu001{
  width:250px;
  border:solid 1px;/* 段落のブロック枠 */
  border-radius: 0px 10px 10px 0px;
  position: relative;
  margin-top: -80px;
  margin-left: 0px;
  color:#ffffff;
  font-size: 15px;
  z-index:51 ;
  display: none;
}
#hoverimg001, #hovermenu001{
  background-color:#ffffff;
}
#hoverimg001:hover ~ #hovermenu001{
  background: #2e3848;
  display:block;
  z-index:90 ;
}
#hovermenu001:hover{
  background: #2e3848;
  display:block;
  z-index:90 ;
}
/*--------------------------------------------------------
  ホバーによるメニュー002を動的操作
--------------------------------------------------------*/
#hoverimg002{/**/
  position: relative;
  margin-top: 10px;
  background-color:#2e3848;
  border-radius: 0ps 5px 5px 0px;
  z-index:60 ;
  transition: all 0.5s 0.1s ease;/* 段落のブロック内すべてに対してアニメーション化 */
}
#hovermenu002{
  animation-name: menu002;/*キーフレーム（keyframes）の名前は必須 */
  width:250px;
  border:solid 1px;/* 段落のブロック枠 */
  border-radius: 0px 10px 10px 0px;
  position: relative;
  margin-top: -80px;
  margin-left: 100px;
  color:#ffffff;
  font-size: 15px;
  z-index:51 ;
  /*display: none;*/
  visibility:hidden;
  transition: all 1.0s 0.01s ease;/* 段落のブロック内すべてに対してアニメーション化 */
}
#hoverimg002, #hovermenu002{
  background-color:#ffffff;
}
#hoverimg002:hover ~ #hovermenu002{
  margin-top: -80px;
  background: #2e3848;
  /*display:block;*/
  margin-left: 0px;
  z-index:90 ;
  visibility:visible;
}
#hovermenu002:hover{
  margin-top: -80px;
  background: #2e3848;
  /*display:block;*/
  visibility:visible;
  margin-left: 0px;
  z-index:90 ;
}

/*--------------------------------------------------------
  ホバーによるメニュー003を動的操作
--------------------------------------------------------*/
#hoverimg003{/**/
  position: relative;
  margin-top: 10px;
  background-color:#2e3848;
  border-radius: 0ps 5px 5px 0px;
  z-index:60 ;
  transition: all 0.5s 0.1s ease;/* 段落のブロック内すべてに対してアニメーション化 */
}
#hovermenu003{
  animation-name: menu003;/*キーフレーム（keyframes）の名前は必須 */
  width:250px;
  border:solid 1px;/* 段落のブロック枠 */
  border-radius: 0px 10px 10px 0px;
  position: relative;
  margin-top: 10px;
  margin-left: 100px;
  color:#ffffff;
  font-size: 15px;
  z-index:51 ;
  /*display: none;*/
  visibility:hidden;
  transition: all 1.0s 0.01s ease;/* 段落のブロック内すべてに対してアニメーション化 */
}
#hoverimg003, #hovermenu003{
  background-color:#ffffff;
}
#hoverimg003:hover ~ #hovermenu003{
  margin-top: -80px;
  background: #2e3848;
  /*display:block;*/
  visibility:visible;
  margin-left: 0px;
  z-index:90 ;
}
#hovermenu003:hover{
  margin-top: -80px;
  background: #2e3848;
  /*display:block;*/
  visibility:visible;
  margin-left: 0px;
  z-index:90 ;
}

/*--------------------------------------------------------
  ホバーによる表示を動的操作
--------------------------------------------------------*/
 /* HTML ▼▼▼
 <p id="cursorhover">ここにカソールを合わせる</p>

 /* CSS スタイル ▼▼▼
 画像のurlはcss配置位置に依存するので合わせて変更が必要 */
#cursorhover {
    border:solid 1px;/* 段落のブロック枠 */
    width:400px;/* 段落のブロック幅 */
    height:35px;/* 段落のブロック高さ */
    margin: 20px;/* 段落のブロック外スペース */
    margin-top: 0px;/* 段落のブロック外スペース */
    padding-left: 15px;/* 段落のブロック内左スペース */
    padding-top: 20px;/* 段落のブロック内上スペース */
    font-size: 1em;/* 段落のブロック内フォントサイズ */
    color:#2b374e;/* 段落のブロック内フォントカラー */
    text-align: center;/* 段落のブロック内配置 */
    /*background: #fff;/* 段落のブロック内バックカラー */
    background-image : url(../../img/arrow.png);/* 段落のブロック内バックグラウンド初期イメージ */
    background-size: 38px;/* 段落のブロック内バックグラウンド初期イメージのサイズ */
    background-position: 20px 10px;/* 段落のブロック内バックグラウンド初期イメージの位置 */
    background-repeat: no-repeat;/* 段落のブロック内バックグラウンド初期イメージはリピートさせない。 */
    transition: all 0.5s 0.1s ease;/* 段落のブロック内すべてに対してアニメーション化 */
      /*transition: font-size 0.5s;/* 段落のブロック内フォントサイズに対してアニメーション化 */
  }
  #cursorhover:hover {
    background-image : url(../../img/caution.png);/* ホバー後の段落のブロック内バックグラウンドイメージ */
    background-position: 20px 5px;/* ホバー後の段落のブロック内バックグラウンドイメージの位置 */
    background-size: 3.2em;/* ホバー後の段落のブロック内フォントサイズ */
    /*background-repeat: no-repeat;/* ホバー後の段落のブロックやフォントカラー */
    font-size: 15px;/* ホバー後の段落のブロック内フォントサイズ */
    font-weight: bold;/* ホバー後の段落のブロック内フォントWeight */
    height:35px;/* ホバー後の段落のブロック高さ */
    color:#ff0000;/* ホバー後の段落のブロックやフォントカラー */
  }

/*--------------------------------------------------------
  monoボックスによる画像スライド操作(@keyframes)
--------------------------------------------------------*/
 /* HTML ▼▼▼　slide0は初期表示、slide1からslide3へそして初期slide0へ
<aside id="mainimg">
<img src="./img/service-p01.jpg" alt="" class="slide0" height="110ox">
<img src="./img/service-p02.jpg" alt="" class="slide1" height="110ox">
<img src="./img/service-s01.jpg" alt="" class="slide2" height="110ox">
<img src="./img/service-s02x.jpg" alt="" class="slide3" height="110ox">
</aside>

 /* CSS スタイル ▼▼▼ */

/*１枚目 slide1 */
@keyframes slide1 {
	0% {opacity: 0; transform: scale(1);}
	10% {opacity: 1;}
	40% {transform: scale(1.95);}/* 切り替わるまでの画像表示倍率を設定 */
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目 slide2 */
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0; transform: scale(1);}
	35% {opacity: 1;}
	65% {transform: scale(1.95);}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目 slide3 */
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0; transform: scale(1);}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0; transform: scale(1.95);}
	100% {opacity: 0;}
}

/*表示させる画像ブロック設定*/
#mainimg {
	clear: both;
	/*max-width: 1500px;　上位タグのブロックのスタイルと設定と合わせる*/
	width: 50%;	/* 上位タグのブロックの50％幅を設定 */
	overflow: hidden;
    /*position: absolute;/*表示させる画像ブロック位置基準を上位タグの左上部を基準とする */
    position: relative;	/*表示させる画像ブロック位置基準を元いた位置を基準とする */
	/*margin: 0 auto;/* 表示させる画像ブロック位置 */
    margin-left: 50px;/* 表示させる画像ブロックの左側に50pxのスペース */
}

/*３枚画像の共通の設定*/
.slide1,.slide2,.slide3 {
	animation-duration: 10s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 1s;
}

/*初期イメージのクラスでスタイルを設定（slide0）*/
.slide0 {position: relative;width: 100%;height: auto;}
/*各イメージのクラスを使って、キーフレーム（keyframes）の名前を付ける（slide1～slide3）*/
/*１枚目 slide1 */
.slide1 {animation-name: slide1;}/* 上で設定しているキーフレーム（keyframes）の名前は必須 */
/*２枚目 slide2 */
.slide2 {animation-name: slide2;}/* 上で設定しているキーフレーム（keyframes）の名前は必須 */
/*３枚目 slide3 */
.slide3 {animation-name: slide3;}/* 上で設定しているキーフレーム（keyframes）の名前は必須 */







/* ▼-プルダウンメニュー-------------------------*/



/* ------------------------------------------ */