.pageTitleBlock{
  background-color: #0079bc;
}

.pageTitle{
  width: 1040px;
  margin: 0 auto;
  padding: 6px 0;
  color: #fff;
  font-size: 1.4em;
}

@media screen and (max-width: 1140px){
  .pageTitle{
    width: 90%;
  }
}

@media screen and  (max-width: 600px){
  .pageTitle{
    font-size: 1.1em;
  }
}

.pageend{
  margin-top: 90px;
}


.contentsListBlock{
  text-align: center;
  padding-top: 30px;
}
.contentsListUnit{
  display: inline-flex;
  font-size: 0.8em;
}

@media screen and  (max-width: 600px){
  .illustList{
    font-size: 0.7em;
  }
}

.contentsListItem{
  margin: 10px 0;
  padding: 0 20px;
  border-left: 1px solid #999999;
  text-align: center;
}

.contentsListUnit > .First{
  border-left:none;
}


.contentsHeading{
  font-size: 1.2em;
  color: #ff7506;
  margin: 60px auto 0;
  width: 1040px;  /* 208px*5個*/
}

@media screen and (max-width: 1140px){
  .contentsHeading{
    width: 90%;
  }
}

.contentsHeadingDotted{
  width: 1040px;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (max-width: 1140px){
  .contentsHeadingDotted{
    width: 90%;
  }
}

svg{
	width:1040px;
	height:20px;
}

svg line{
	fill: none;
	stroke: #ff7506;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 0.5, 15;
}

/* 見出しのカラー */
.purple{
  color: #a261c2;
  stroke: #a261c2;
}



/** BOX SIZE 208px (width:200px 左右margin: 4px) 5列 **/
/* 208ボックス5個の場合 */
.illustContainer{
  display: flex;
  flex-wrap: wrap; /*子要素を枠内に収める*/
  flex-wrap: wrap-reverse; /*行を末尾から表示する*/
  justify-content: start; /*左寄せにする*/
  flex-direction: row-reverse; /*左の数が大きくなるようにする*/
  width: 1040px;  /* 208px*5個*/
  margin: 0 auto;
}

.illustBox{
  /* position: relative; */
  /* width: calc(33.3333% - 68px / 3); */
  /* width: calc(25% - 68px / 4); */
  width: 200px;
  height: 240px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.illustBoxImg{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.illustBoxImg img {
  max-width: 90%;
  max-height: 90%;
}


/* 208ボックス4個の場合 */
@media screen and (max-width: 1140px){ /* ボックス5個分1040px + スライドバー分100px */
  .illustContainer{
    width: 832px;  /* 208px*4 */
  }
}

/* 208ボックス3個の場合 */
@media screen and (max-width: 932px){
  .illustContainer{
    width: 624px;  /* 208px*3 */
  }
}

/* 208ボックス2個の場合 */
@media screen and (max-width: 724px){
  .illustContainer{
    width: 416px;  /* 208px*2 */
  }
}

/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){
  .illustContainer{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .illustBox{
    width: calc(200/516 * 100vw);  
    height: calc(240/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .illustBoxImg{
    height: calc(200/516 * 100vw);  
  }
}


/** POSTCARD 2列 **/
/* 208ボックス5個の場合 */
.illustContainerPostcard{
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap-reverse;
  justify-content: start;
  flex-direction: row-reverse; */
  width: 1040px;
  margin: 0 auto;
}

.illustBoxPostcard{
  width: 512px;
  /* height: 540px; */
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.illustBoxImgPostcard{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 440px;
}

.illustPostHorizontal img{
  width: 420px;
  height: 283px;
}

.illustPostVertical img{
  width: 283px;
  height: 420px;
}

/* 208ボックス4個の場合 */
@media screen and (max-width: 1140px){    /* 208*5+100 */
  .illustContainerPostcard{
    width: 832px;  /* 208px*4 */
  }

  .illustBoxPostcard{
    width: 408px;
  }

  .illustBoxImgPostcard{
    height: calc(440px * 0.9);
  }
  
  .illustPostHorizontal img{
    width: calc(420px * 0.9);
    height: calc(283px * 0.9);
   }
 
   .illustPostVertical img{
    width: calc(283px * 0.9);
    height: calc(420px * 0.9);
   }
 }

 
/* 208ボックス3個の場合 */
@media screen and (max-width: 932px){    /* 208*4+100 */
  .illustContainerPostcard{
    width: 624px;
  }

  .illustBoxPostcard{
    width: 304px;  /* 208px*3/2-8*/
  }

  .illustBoxImgPostcard{
    height: calc(440px * 0.65);
  }

  .illustPostHorizontal img{
    width: calc(420px * 0.65);
    height: calc(283px * 0.65);
   }
 
   .illustPostVertical img{
    width: calc(283px * 0.65);
    height: calc(420px * 0.65);
   }
 }

 
/* 208ボックス2個の場合 */
@media screen and (max-width: 724px){   /* 208*3+100 */
  .illustContainerPostcard{
    width: 416px;
  }

  .illustBoxPostcard{
    width: 408px;  /* 208px*3/2-8*/
  }

  .illustBoxImgPostcard{
    height:auto;
    margin: 10px 0;
  }

  .illustPostHorizontal img{
    width: calc(420px * 0.9);
    height: calc(283px * 0.9);
   }
 
   .illustPostVertical img{
    width: calc(283px * 0.9);
    height: calc(420px * 0.9);
   }
 }

 
/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){ 
  .illustContainerPostcard{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .illustBoxPostcard{
    width: calc(408/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .illustBoxImgPostcard{
    margin: calc(10/516 * 100vw);
  }

  .illustPostHorizontal img{
    width: calc(420*0.9/516 * 100vw);
    height: calc(283*0.9/516 * 100vw);
   }
 
   .illustPostVertical img{
    width: calc(283*0.9/516 * 100vw);
    height: calc(420*0.9/516 * 100vw);
   }
 }


/** others 3列**/
/* 338ボックス3個の場合 */
.illustContainerOthers{
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap-reverse;
  justify-content: start;
  flex-direction: row-reverse; */
  width: 1040px;
  margin: 0 auto;
}

.illustBoxOthers{
  width: 338px;
  /* height: 540px; */
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.illustBoxImgOthers{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1500px;
  /* margin: 10px auto;
  width: 200px; */
}

.illustBoxImgOthers img{
  max-width: 90%;
  max-height: 98%;
  border: 1px solid #ddd;
}


/* 208ボックス4個の場合 */
@media screen and (max-width: 1140px){    /* 208*5+100 */
  .illustContainerOthers{
    width: 832px;  /* 208px*4 */
  }

  .illustBoxOthers{
    width: 269px;
  }

  .illustBoxImgOthers{
    height: calc(1500x * 0.9);
  }
 }

 
/* 208ボックス3個の場合 */
@media screen and (max-width: 932px){    /* 208*4+100 */
  .illustContainerOthers{
    width: 624px;
  }

  .illustBoxOthers{
    width: 200px;  /* 208px*3/2-8*/
  }

  .illustBoxImgOthers{
    height: calc(1500px * 0.8);
  }
 }

 
/* 208ボックス2個の場合 */
@media screen and (max-width: 724px){   /* 208*3+100 */
  .illustContainerOthers{
    width: 416px;
  }

  .illustBoxOthers{
    width: 200px;  /* 208px*2/2-8*/
  }

  .illustBoxImgOthers{
    width: 200px;
    height: auto;
    margin: 10px auto;
  }
 }

 
/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){ 
  .illustContainerOthers{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .illustBoxOthers{
    width: calc(200/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .illustBoxImgOthers{
    width: calc(200/516 * 100vw);  
    margin: calc(10/516 * 100vw) auto;
  }
 }

 

/** material 3列**/
/* 338ボックス3個の場合 */
.illustContainerMaterial{
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap-reverse;
  justify-content: start;
  flex-direction: row-reverse; */
  width: 1040px;
  margin: 0 auto;
}

.illustBoxMaterial{
  width: 338px;
  /* height: 338px; */
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.illustBoxImgMaterial{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  /* margin: 10px auto; */
  /* max-width: 90%; */
}

.illustBoxImgMaterial img{
  max-width: 90%;
  max-height: 98%;
  /* border: 1px solid #ddd; */
}


/* 338ボックス3個の場合 */
@media screen and (max-width: 1140px){
  .illustContainerMaterial{
    width: 832px;
  }

  .illustBoxMaterial{
    width: 269px;
  }

  /* .illustBoxImgMaterial{
    height: calc(1500x * 0.9);
  } */
 }

 
/* 200ボックス3個の場合 */
@media screen and (max-width: 932px){
  .illustContainerMaterial{
    width: 624px;
  }

  .illustBoxMaterial{
    width: 200px;
  }
 }

 
/* 200ボックス2個の場合 */
@media screen and (max-width: 724px){
  .illustContainerMaterial{
    width: 416px;
  }

  .illustBoxMaterial{
    width: 200px; 
  }

  .illustBoxImgMaterial{
    width: 200px;
    /* height: 80%; */
    /* margin: 10px auto; */
  }
 }
 
/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){ 
  .illustContainerMaterial{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .illustBoxMaterial{
    width: calc(200/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .illustBoxImgMaterial{
    width: calc(200/516 * 100vw);  
    /* margin: calc(10/516 * 100vw) auto; */
  }
 }




 /* animation ********************************/

/** gifAnime 3列**/
/* 208ボックス5個の場合 */
.animeContainerGif{
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap-reverse;
  justify-content: start;
  flex-direction: row-reverse; */
  width: 1040px;
  margin: 0 auto;
}

.animeBoxGif{
  width: 338px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.animeBoxImgGif{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.animeBoxImgGif img{
  max-width: 100%;
  max-height: 100%;
  /* border: 1px solid #ddd; */
}


/* 208ボックス4個の場合 */
@media screen and (max-width: 1140px){    /* 208*5+100 */
  .animeContainerGif{
    width: 832px;  /* 208px*4 */
  }

  .animeBoxGif{
    width: 269px;
  }
 }

 
/* 208ボックス3個の場合 */
@media screen and (max-width: 932px){    /* 208*4+100 */
  .animeContainerGif{
    width: 624px;
  }

  .animeBoxGif{
    width: 304px;  /*208px*3/2-8*/
  }
 }

 
/* 208ボックス2個の場合 */
@media screen and (max-width: 724px){   /* 208*3+100 */
  .animeContainerGif{
    width: 416px;
  }

  .animeBoxGif{
    width: 408px;  /* 208px*2/2-8*/
  }

  .animeBoxImgGif{
    width: 200px;
    height: auto;
    margin: 0 auto;
  }
 }

 
/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){ 
  .animeContainerGif{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .animeBoxGif{
    width: calc(408/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .animeBoxImgGif{
    width: calc(200/516 * 100vw);  
    padding: calc(10/516 * 100vw);
  }
 }



/** MOVIE **/
/* 208ボックス5個の場合 2列*/
.animeContainerMovie{
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: wrap-reverse;
  justify-content: start;
  flex-direction: row-reverse; */
  width: 1040px;
  margin: 0 auto;
}

.animeBoxMovie{
  width: 512px;  /* 208px*5/2-8*/
  /* height: 540px; */
  text-align: center;
  border: 1px solid #ddd;
  margin: 4px;
}

.animeBoxImgMovie{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.animeBoxImgMovie img{
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #ddd;

}

/* 208ボックス4個の場合 */
@media screen and (max-width: 1140px){    /* 208*5+100 */
  .animeContainerMovie{
    width: 832px;  /* 208px*4 */
  }

  .animeBoxMovie{
    width: 408px;  /* 208px*4/2-8*/
}

 
/* 208ボックス3個の場合 */
@media screen and (max-width: 932px){    /* 208*4+100 */
  .animeContainerMovie{
    width: 624px;
  }

  .animeBoxMovie{
    width: 616px;  /* 208px*3-8*/
  }
 }
}
 
/* 208ボックス2個の場合 */
@media screen and (max-width: 724px){   /* 208*3+100 */
  .animeContainerMovie{
    width: 416px;
  }

  .animeBoxMovie{
    width: 408px;  /* 208px*3/2-8*/
  }

  .animeBoxImgMovie{
    height:auto;
    /* margin: 10px 0; */
  }
 }

 
/* mobile対応で縮小していく*/
@media screen and (max-width: 516px){ 
  .animeContainerMovie{
    width: calc(416/516 * 100vw);  
    font-size: .9em;
  }

  .animeBoxMovie{
    width: calc(408/516 * 100vw);  
    margin: calc(4/516 * 100vw);  
  }

  .animeBoxImgMovie{
    padding: calc(10/516 * 100vw);
  }
 }