@charset "utf-8";
/* TOPページ */
/*----------------------------------------------------------- 共通 */
section {
  padding: 3% 0;
}
#visualPC {
  display: block;
}
#visualSP {
  display: none;
}
.title {
  position: relative;
}
.copy {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 10%;
  background: #00000063;
  height: 100%;
  writing-mode: vertical-rl;
  font-size: 260%;
  letter-spacing: 15px;
  padding: 70px;
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
.copy sup {
  color: #fff;
}
#S01 {
  background: #f6f6f6;
}
#S01 dl {
  justify-content: center;
}
#S01 dt {}
#S01 dd {
  width: 60%;
  display: flex;
  align-items: center;
}
#S02 {}

#S03 {}
#S03 .contentsDetail {
    max-width: inherit;
    width: auto;
}
#S03 .detailBox {
  display: flex;
  padding: 40px 0;
  justify-content: center;
}
#S03 .detailBox h2 {
  text-align: left;
}
#S03 .detailBox p {
  text-align: left;
}
#S03 .leftBox, #S03 .rightBox {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 50%;
  padding: 0;
}
#S03 .leftBox a, #S03 .rightBox a {
  width: 100%;
}
#S03 .leftBox img, #S03 .rightBox img {
  width: 100%;
}
#S03 .detail {
  position: relative;
}
#S03 .logoMark {
    position: absolute;
    opacity: 0.8;
    bottom: 230px;
    left: 50%;
    transform: translate(-50%, -50%);
}
#S03 .logoMark img {
  width: 160px;
}
#S04 {}
#S04 h4 {
  font-size: 110%;
  text-align: center;
}
#S05 {
  background: #f6f6f6;
}
#S06 {}

/*----------------------------------------------------------- 1380px */
@media screen and (max-width: 1380px) {
.copy {
    font-size: 160%;
    padding: 6%;
}
}

/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
#S01 dl {
    flex-flow: column;
}
#S01 dt {
    border: none;
    padding: 0;
    width: auto;
}
#S01 dd {
    width: auto;
}
#S02 .bnrBox .detail {
    left: 8%;
}
}
/*----------------------------------------------------------- 1024px */
@media screen and (max-width: 1024px) {
#S03 .detailBox {
    flex-flow: column;
}
#S03 .logoMark {
display: none;
}
#S03 .leftBox, #S03 .rightBox {
    width: auto;
}
}
/*----------------------------------------------------------- 900px */
@media screen and (max-width: 900px) {
  #visualPC {
    display: none;
  }
  #visualSP {
    display: block;
  }
}

/*----------------------------------------------------------- 640px  */
@media screen and (max-width: 640px) {
.copy {
    font-size: 120%;
    letter-spacing: 10px;
    left: 0;
}
}