@charset "utf-8";

h1 {
  font-size: 48px;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.3;
  margin-top: 10px;
  background: linear-gradient(transparent 84%, #c8e0ec 0%);
  width: fit-content;
}

.title h2 {
  font-size: 30px;
  font-family: 'Noto Serif JP', serif;
  margin-top: 20px;
}

h3 span {
  color: #116fa1;
  vertical-align: -3%;
  font-family: 'Noto Serif JP', serif;
}

h3 {
  margin-top: 20px;
  font-size: 20px;
  background-color: #ffffff;
  padding: 5px 15px;
  border-bottom: 1px solid #222222;
  border-left: 1px solid #222222;
  width: 100%;
}

h3 span {
  color: #116fa1;
  vertical-align: -3%;
}

/* エリア指定 */
.area-01,
.commentary {
  width: 1300px;
  max-width: 97%;
  margin-left: auto;
  margin-right: auto;
}

.area-01,
.commentary {
  display: flex;
}

.top {
  width: 54%;
  margin-left: 20px;
  margin-right: 10px;
}

.top img {
  width: 95%;
  margin-top: 15px;
}


.sub {
  width: 45%;
  margin-top: 70px;
  margin-left: 20px;

}

.sub-photo {
  width: 86%;
  margin-left: 20px;
}

.sub p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.commentary-area-01 img,
.commentary-area-02 img,
.commentary-area-03 img,
.commentary-area-04 img {
  margin-top: 20px;
}

.commentary-area-01 p,
.commentary-area-02 p,
.commentary-area-03 p,
.commentary-area-04 p {
  margin-top: 10px;
  margin-right: 10px;
  font-size: 13px;
  line-height: 1.5;
}


.commentary-area-01 {
  width: 40%;
  margin-left: 10px;
  margin-right: 10px;
}

.contents-01 img {
  width: 95%;
}


.commentary-area-02 {
  width: 36%;
  margin-left: 10px;
  margin-right: 10px;
}

.contents-02 img {
  width: 83%;
}

.commentary-area-03 {
  width: 35%;
  margin-left: 10px;
  margin-right: 10px;
}

.contents-03 img {
  width: 90%;
}

.commentary-area-04 {
  width: 28%;
  margin-left: 10px;
}




@media screen and (max-width: 1300px) {

  /* 1300PXから一括VWここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

  h1 {
    font-size: 3.692vw;
    font-family: 'Noto Serif JP', serif;
    line-height: 1.3;
    margin-top: 0.769vw;
    background: linear-gradient(transparent 84%, #c8e0ec 0%);
    width: fit-content;
  }

  .title h2 {
    font-size: 2.308vw;
    font-family: 'Noto Serif JP', serif;
    margin-top: 1.538vw;
  }


  /* 1300PXから一括VWここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

}

@media screen and (max-width: 1260px) {

  /* 1300で一括 */

  h3 {
    margin-top: 1.538vw;
    font-size: 1.385vw;
    background-color: #ffffff;
    padding: 0.385vw 1.154vw;
    border-bottom: 1px solid #222222;
    border-left: 1px solid #222222;
    width: 100%;
  }


}


@media screen and (max-width: 1120px) {

  .sub p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
  }

  .commentary-area-01 p,
  .commentary-area-02 p,
  .commentary-area-03 p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
  }


  .commentary-area-01 img,
  .commentary-area-02 img,
  .commentary-area-03 img,
  .commentary-area-04 img {
    margin-top: 10px;
  }





}