@charset "utf-8";
.article1{
  background:url(/img/about/vsl_sec01.jpg) no-repeat bottom;
  padding-bottom: 290px;
  margin-bottom: 64px;
}
.article1 .grouping{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.article1 section{
  width: 314px;
  display: flex;
  flex-direction: row-reverse;
  height: 400px;
  background: #fbfaf6 no-repeat left bottom;
  margin-bottom: 32px;
  padding-right: 32px;
}
.article1 h2{
  margin-bottom: 16px;
}
.article1 section.sec01{background-image:url(/img/about/thum_top01.png);}
.article1 section.sec02{background-image:url(/img/about/thum_top02.png);}
.article1 section.sec03{background-image:url(/img/about/thum_top03.png);}

.article1 section h3,
.article1 section p,
.article2 section p{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
.article1 section h3{
  text-align: left;
  font-size: 28px;
  font-weight: bold;
  color: #05060d;
  margin-left: 16px;
}
.article1 section h3 span{
  border-right: 1px solid #95260d;
  padding: 24px 4px 8px;
}
.article1 section p{
  line-height: 2.5;
  font-size: 14px;
  letter-spacing: 2px;
  padding-top: 16px;
}

.article2 h3{
  font-size: 22px;
  color: #05060d;
  margin-bottom: 32px;
}
.article2 section div{
  background: no-repeat bottom;
  padding-bottom: 290px;
  margin-bottom: 32px;
  display: flex;
}
.article2 section .prt01{
  background-image:url(/img/about/vsl_sec02.jpg);
}
.article2 section .prt02{
  background-image:url(/img/about/vsl_sec03.jpg);
  margin-bottom: 86px;
}
.article2 section .prt03{
  padding-bottom: 0;
}

.article2 section p{
  height: 490px;
  line-height: 3;
  letter-spacing: 2px;
}
.article2 section p::after{
  content: "";
  background-repeat: no-repeat;
  display: block;
}
.article2 section .prt01 p::after{
  background-image: url(/img/about/thum_sec01.png);
  width:478px;
}
.article2 section .prt02 p::before{
  content: "";
  background-repeat: no-repeat;
  display: block;
  background-image:url(/img/about/thum_sec02.png);
  background-position:100% 0;
  width: 580px;
}
.article2 section .prt03 p::after{
  background-image:url(/img/about/thum_sec03.png);
  width: 460px;
  margin-top: -70px;
}

/* タブレット以下 */
@media only screen and (max-width: 959px){
  .article2 section .prt02 p::before{
    background-position: 0% 0;
  width: 400px;
  }
}/* このとじカッコは消さないこと */

/* タブレット以下微調整 */
@media only screen and (max-width: 880px){
  .article1 section{
    padding-right: 0;
  }
}/* このとじカッコは消さないこと */

/* スマホ以下 */
@media only screen and (max-width: 767px){
  .article1 section{
    width: 100%;
  }
  .article1 section h3,
  .article1 section p,
  .article2 section p{
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  }
  .article1{
    background-position: 15% 0%;
    padding-bottom: 0;
    padding-top: 26%;
    background-size: 120%;
    margin-bottom: 16px;
  }
  .article1 .grouping{
    flex-direction: column;
    padding: 0 8px;
  }
  .article1 section{
    flex-direction: column;
    padding: 16px 0;
    background-image: none !important;
    height: auto;
  }
  .article1 section h3{
    margin: 0;
  }
  .article1 section h3 span{
    border-right: none;
    border-bottom: 1px solid #95260d;
    padding: 0px 0px 0px 16px;
  }
  .article1 section p,
  .article2 section p{
    padding: 16px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 2px;
    margin-bottom: 0;
  }

  .article2 h2,
  .article2 h3{
    margin-bottom: 16px;
  }
  .article2 section{
    padding: 16px;
  }
  .article2 section div{
    background: none !important;
    padding-bottom: 0;
  }
  .article2 section  div.prt02{
    margin-bottom: 32px;
  }
  .article2 section div p{
    background: center 16px /90% no-repeat;
    height: auto;
    background-color: #fff;
    padding-top: 68%;
  }
  .article2 section div p br{
    display: none;
  }
  .article2 section div p span{
    display: block;
    margin-bottom: 16px;
  }
  .article2 section  div.prt01 p{
    background-image: url(/img/about/sp_p01.jpg);
  }
  .article2 section  div.prt02 p{
    background-image: url(/img/about/sp_p02.jpg);
  }
  .article2 section  div.prt03 p{
    background-image: url(/img/about/sp_p03.jpg);
  }
  .article2 section p::before,
  .article2 section p::after{
    content: none;
  }
}