@charset "utf-8";
/* TOPページ */
#visualPC {
  display: block;
}
#visualSP {
  display: none;
}
.attention {
    text-align: left;
}
#S01 {
  background: rgb(237, 237, 237);
  background: linear-gradient(90deg, rgba(237, 237, 237, 1) 0%, rgba(253, 254, 254, 1) 100%);
}
.detail {
  background: #032943;
  padding: 100px 0;
}
#S01 h2 {
    padding: 0;
    text-align: left;
    font-weight: 600;
}
#S01 p {
  text-align: left;
}
#S01 .rightBox {
  width: 640px;
}
#S02 {
  background: #032943;
}
#S02 h3 {
  color: #fff;
  padding: 0;
}
#S02 h4 {
  color: #bca89a;
  font-size: 120%;
  padding: 10px 0 20px;
}
#S02 ul {
  display: flex;
  justify-content: center;
  width: 100%;
}
#S02 ul li {
  background: #958274;
  color: #fff;
  font-size: 100%;
  padding: 10px;
  line-height: 1.4em;
  margin: 0 2px 0;
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#S02 .meritBox {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}
#S02 .meritBox .mDetail {
  margin: 0 10px;
}
#S02 .merit:nth-of-type(1) .mDetail, #S02 .merit:nth-of-type(2) .mDetail {
  border-bottom: 1px solid #fff;
  padding: 0 0 20px;
}
#S02 .merit:nth-of-type(3) .mDetail, #S02 .merit:nth-of-type(4) .mDetail {
  padding: 20px 0 0;
}
#S02 .meritBox .merit {
  width: calc(100% / 2 - 10px);
}
#S02 .merit:nth-of-type(1) {
  border-right: 1px solid #fff;
}
#S02 .merit:nth-of-type(3) {
  border-right: 1px solid #fff;
}
.detail .contents:nth-of-type(1) .contentsDetail {
  max-width: inherit;
}
.detail .image {
  position: relative;
}
.detail .image h2 {
  font-family: "Crimson Text", serif;
  font-size: 230%;
  color: #fff;
  line-height: 2.6em;
  position: absolute;
  width: 100%;
  top: 0;
  margin: 0;
  padding: 0;
}
.detail .image h3 {
  background: #958274;
  color: #fff;
  width: 100%;
  position: absolute;
  top: 75px;
  font-size: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.detail h3 {
  color: #fff;
  font-weight: 500;
  padding: 10px 0 30px;
}
.detail h4 {
  color: #fff;
  font-size: 90%;
}
.detail h4 strong {
  color: #bca89a;
  font-family: "Crimson Text", serif;
  display: block;
  letter-spacing: 0.125em;
  text-indent: 0.125em;
  font-size: 150%;
  padding: 20px 0 10px;
}
.detail .flexBox h4 strong {
  font-size: 200%;
}
.detail h4 strong::before {
  font-family: "Material Icons";
  content: "\e5c5";
  display: block;
  font-size: 200%;
  padding: 0 0 10px;
}
.detail h5 {
  color: #fff;
}
.detail h5 strong {
  color: #fff;
  font-size: 120%;
  font-weight: 500;
}
.detail h5 small {
  color: #fff;
  font-size: 80%;
  display: inline-block;
  margin: 0 7px 0 0;
}
.detail h5 span {
  color: #fff;
  font-size: 130%;
  font-weight: 500;
  letter-spacing: 4px;
  display: inline-block;
  margin: 0 0 0 6px;
}
.detail h5 strong em {
  color: #fff;
  font-size: 60%;
}
.detail .flexBox h5 {
  letter-spacing: 5px;
}
.detail .flexBox h5 strong {
  font-size: 160%;
}
.detail .flexBox h5 span {
  font-size: 170%;
}
.detail p {
  color: #fff;
}
.detail .flexBox {
  padding: 0 0 50px;
}
main .detail .flexBox3 ul {
  justify-content: center;
}
.detail .flexBox3 ul li p {
  text-align: left;
  font-size: 90%;
  line-height: 1.6em;
  padding: 10px 10px 0;
}
#S03 ul li h5 br {display: none;}

#S04 h2 {
  color: #222;
}
#S04 .flexBox h4 {
  font-size: 130%;
  padding: 20px 0 0;
}
#S04 .flexBox3 h4 {
  font-size: 110%;
  padding: 20px 0 0;
}
/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
.attention {
    padding: 15px 15px 40px;
}
#S01 .detailBox {
    flex-flow: column;
    align-items: center;
}
#S01 .rightBox {
    width: 100%;
}
#S01 h2 {
    text-align: center;
}
#S01 p {
    padding: 15px;
}
#S01 p br {display: none;}
#S02 .meritBox .merit {
    width: 100%;
}
#S02 .merit:nth-of-type(1) {
    border-right: none;
}
#S02 .merit:nth-of-type(3) {
    border-right: none;
}
#S02 .merit:nth-of-type(1) .mDetail,
#S02 .merit:nth-of-type(2) .mDetail,
#S02 .merit:nth-of-type(3) .mDetail,
#S02 .merit:nth-of-type(4) .mDetail {
    border-bottom: 1px solid #fff;
    padding: 20px 0 20px;
}
#S02 .merit:nth-of-type(4) .mDetail {border-bottom: none;}
main .detail .flexBox3 ul {
    flex-flow: column;
    align-items: center;
}

.detail h4 strong {
    padding: 0 0 10px;
}
main .flexBox3 > ul > li {
    width: 100%;
    padding: 0 0 50px;
}
.detail p {
    max-width: 800px;
    margin: auto;
}
.detail .image {
    position: static;
}
.detail .image h2 {
    font-size: 200%;
    line-height: 1.4em;
    position: static;
    margin: 0;
    padding: 20px 0 15px;
}
.detail .image h3 {
    position: static;
    font-size: 100%;
}

#S04 h2 {
    color: #fff;
}
#S03, #S04, #S05 {
    border-top: 1px dashed #3b6e91;
    padding: 50px 0;
}
}
/*----------------------------------------------------------- 812px */
@media screen and (max-width: 900px) {
  #visualPC {
    display: none;
  }
  #visualSP {
    display: block;
  }
}
/*----------------------------------------------------------- 812px */
@media screen and (max-width: 812px) {
.detail p {
    font-size: 90%;
}
.detail .image h2 {
    font-size: 160%;
}
.detail h4 strong::before {
    padding: 10px 0 10px;
}
}
/*----------------------------------------------------------- 640px */
@media screen and (max-width: 640px) {
.attention {
    padding: 15px 0 40px;
}
main .flexBox3 > ul > li {
    padding: 0 0 30px;
}
#S01 h2 {
    letter-spacing: 3px;
}
#S01 p {
    padding: 0;
}
#S02 .meritBox {
    padding: 30px 0;
}
#S02 h3 {
    font-size: 90%;
    letter-spacing: 2px;
}
#S02 h4 {
    font-size: 100%;
    padding: 10px 0 10px;
}
#S02 ul {
    flex-flow: column;
}
#S02 ul li {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 3px;
    height: auto;
    font-size: 90%;
}
#S02 ul li br {display: none;}
.detail .image h3 {
    font-size: 80%;
    letter-spacing: 1px;
}

.detail .flexBox h4 strong {
    font-size: 180%;
}

#S04 h2 {
    font-size: 130%;
    letter-spacing: 3px;
}
#S04 .flexBox h4 {
    font-size: 110%;
}
.detail h3 {
    font-size: 110%;
    letter-spacing: 2px;
}

}
/*----------------------------------------------------------- 480px */
@media screen and (max-width: 480px) {
.detail p {
    font-size: 80%;
}
.detail h3 {
    font-size: 90%;
}
.detail h4 {
    font-size: 80%;
}
.detail .image h2 {
    font-size: 120%;
    letter-spacing: 2px;
}
.detail .flexBox3 ul li p {
    font-size: 80%;
}
#S04 .flexBox3 h4 {
    font-size: 100%;
    padding: 10px 0 0;
}
.detail .flexBox h4 strong {
    font-size: 160%;
}
#S03 ul li h5 br {display: block;}
}