@charset "utf-8";
/* CSS Document */

/* 縦に積むテーブルレスポンシブ */
p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  
}
table {
  margin: 1px auto;
}
.tbl-r02 th {
  background: #ffffff;
  border: solid 0px #ccc;
  color: #8aa3d4;
  padding: 5px;
}
.tbl-r02 th2 {
  border: solid 0px #ccc;
  color: #8aa3d4;
  padding: 5px;
}
.tbl-r02 td {
  background: #e8edf6;
　border: solid 0px #ccc;
  color: #8aa3d4;
  padding: 5px;
}
 
@media screen and (max-width: 600px) {
  .last td:last-child {
    border-bottom: solid 0px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}
/* end縦に積むテーブルレスポンシブ */
/* 1-背景を斜めに区切る */
body {
  font: 16px/1.5 sans-serif;
  color: #666;
  background: #ffffff;
  margin:0;
}
.Block1 {
  background-color: #1a1a1a;
  background-image: url(sayoasa/01.png);
}
p {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0;
}

.Block2 {
  /*レイアウト用のCSS*/
  padding: 0 0 40px 0;
  background-color: #d28445;
  color: #ccc;
}
.Block1 {
  position: relative;
  padding: 20px 0 40px 0;
  
}
.Block2 {
  position: relative;
  z-index: 0;
}
.Block2::before{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(-3deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#d28445;
}
.Block2::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(2deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#d28445;
}
/* end1-背景を斜めに区切る */
/* 2-背景を斜めに区切る */
.Block3 {
  background-color: #1a1a1a;
}
p {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0;
}
.Block4 {
  /*レイアウト用のCSS*/
  padding: 0 0 40px 0;
  background-color: #a17aa6;
  color: #ccc;
}
.Block3 {
  position: relative;
  padding: 20px 0 40px 0;
  
}
.Block4 {
  position: relative;
  z-index: 0;
}
.Block4::before{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(-3deg);
  transform-origin: top left;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#a17aa6;
}
.Block4::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(2deg);
  transform-origin: top left;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#a17aa6;
}
/* end2-背景を斜めに区切る */
/* 3-背景を斜めに区切る */
.Block5 {
  background-color: #1a1a1a;
  background-image: url(sayoasa/01.png);
}
p {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0;
}

.Block6 {
  /*レイアウト用のCSS*/
  padding: 0 0 40px 0;
  background-color: #8aa3d4;
  color: #ccc;
}
.Block5 {
  position: relative;
  padding: 20px 0 40px 0;
  
}
.Block6 {
  position: relative;
  z-index: 0;
}
.Block6::before{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(5deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#8aa3d4;
}
.Block6::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(-2deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#8aa3d4;
}
/* end3-背景を斜めに区切る */
/* 4-背景を斜めに区切る */
.Block7 {
  background-color: #1a1a1a;
  background-image: url(sayoasa/01.png);
}
p {
  width: 60%;
  margin: 0 auto;
}

.Block8 {
  /*レイアウト用のCSS*/
  background-color: #8aa3d4;
  color: #000000;
}
.Block7 {
  position: relative;
}
.Block8 {
  position: relative;
  z-index: 0;
}
.Block8::before{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(-3deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#8aa3d4;
}
.Block8::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(3deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#8aa3d4;
}
/* end4-背景を斜めに区切る */




/*以下class名link_buttonのデザイン*/
.link_button1 {
  text-decoration: none;/*下線消す*/
  background: #d28445;/*背景色*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button2 {
  text-decoration: none;/*下線消す*/
  background: #a17aa6;/*背景色*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button3 {
  text-decoration: none;/*下線消す*/
  background: #8aa3d4;/*背景色*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button4 {
  text-decoration: none;/*下線消す*/
  background: #6a85c2;/*背景色*/
  color:#ffffff;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button5 {
  text-decoration: none;/*下線消す*/
  background: #835a89;/*背景色*/
  color:#ffffff;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
.link_button6 {
  text-decoration: none;/*下線消す*/
  background: #bf642c;/*背景色*/
  color:#ffffff;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
/*以下カーソルを当てたとき*/
.link_button:hover {
  background: silver;/*背景色をシルバーに*/
  text-decoration: none;/*下線を消す*/
  font-weight: bold;/*太字に*/
}

/*以下訪問済みのデザイン*/
.link_button:visited {
  color: gray;/*文字をグレイに*/
}
/*end以下class名link_buttonのデザイン*/
/*youtubeサイズ*/
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
/*end youtubeサイズ*/