*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

A {
  text-decoration: none;
}

/*
 * ヘッダ
 */
.site-header {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  background-color: rgba(0, 0, 0, .75);
}

.header-inner {
  width: 80vw;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  line-height: 16px;
}

.site-header LI {
  display:inline-block;
  background: none;
  list-style-type: none;
}

.site-header LI A {
  display: block;
  color: #FFF;
  transition: ease-in-out color .15s;
  opacity: .75;
}

.site-header LI A:hover {
  color: #FFF;
  text-decoration: none;
  opacity: 1;
}

/*
 * メイン
 */

.section {
  height: 100vh;
  padding: 0;
  margin: 0;
}

.section1 {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-size : cover;
}

.section1 H1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 60vh;
  background-image: url(../img/main-logo.svg);
  background-repeat: no-repeat;
  background-size: 50vw;
  background-position: center;
}

.section1 H1 SPAN {
  display: none;
}

.section1 .menu {
  display: flex;
  width: 100vw;
  align-items: center;
  flex-direction: column;
}

.section1 .menu H2 {
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: rgba(0 ,0 ,0, .5);
  border: solid 1px #FFF;
  border-radius: 0.5em;
  color: #FFF;
  font-weight: normal;
  font-size: 1.2em;
  text-align: center;
  background-image: url("../img/arrow.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  width: 50vw;
  max-width: 400px;
}

.section1 .menu H2 A {
  display: block;
  color: #FFF;
  opacity: .85;
  text-decoration: none;
}

.section1 .menu H2 A:hover {
  opacity: 1;
}

.small {
  font-size: 0.8em;
}

.section2,
.section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10vw;
  color: #FFF;
}

.section2 H2,
.section3 H2 {
  font-weight: normal;
  font-size: 1.25em;
}

.section2 {
  background: #922424;
}

.section3 {
  background: #C37800;
}

.section2 TABLE,
.section3 TABLE {
  margin: auto 0;
  width: 100%;
  border-collapse: collapse;
}

.section2 TABLE TH,
.section3 TABLE TH,
.section2 TABLE TD,
.section3 TABLE TD  {
  border-spacing: 0;
  border-bottom: solid 1px #FFF;
  padding: 1em;
}

.section2 TABLE TH,
.section3 TABLE TH {
  width: 40%;
  font-weight: normal;
  text-align: center;
}

.section2 TABLE TBODY TD.sec2 {
  text-align: center;
}

.section2 TABLE TD A,
.section3 TABLE TD A {
  color: #FFF;
  text-decoration: none;
}

.message {
  padding: 0 10vw;
  padding-top: 60px;
  padding-bottom: 20px;
  background: #246292;
  color: #FFF;
  min-height: 100vh;
}

.message .text {
  margin-bottom: 25px;
}

.message .text P {
  text-indent: 1em;
  margin-bottom: 0.5em;
}

.message .photo {
  height: 20vw;
  background-image: url(../img/photo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.message .photo SPAN {
  display: none;
}

.message TABLE {
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  border-collapse: collapse;
  border-bottom: solid 1px #FFF;
}

.message TABLE TH {
  font-weight: normal;
  width: 40%;
}

.message TABLE TH,
.message TABLE TD {
  border-spacing: 0;
  border-top: solid 1px #FFF;
  padding: 2vw;
}

/*
 * 画面幅の狭いスマホ対応
 */

@media screen and (max-width: 440px) {
  .header-inner {
    width: 100%;
  }

  .section1 .menu H2 {
    width: 80vw;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }

  .section2,
  .section3 {
    padding: 0 2vw;
  }

  .section2 TABLE,
  .section3 TABLE,
  .message TABLE {
    width: 100%;
    border-collapse: collapse;
  }

  .section2 TABLE TBODY TR,
  .section3 TABLE TBODY TR,
  .message TABLE TBODY TR {
    display: block;
    float: left;
  }

  .section2 TABLE TBODY TH,
  .section3 TABLE TBODY TH,
  .section2 TABLE TBODY TD,
  .section3 TABLE TBODY TD {
    display: block;
    width: 96vw;
    text-align: center;
    padding: 0;
  }

  .section2 TABLE TBODY TH,
  .section3 TABLE TBODY TH,
  .message TABLE TBODY TH {
    border: 0;
    padding-top: 1.5vw;
  }

  .section2 TABLE TBODY TD,
  .section3 TABLE TBODY TD {
    padding-bottom: 1.5vw;
  }

  .section2 TABLE TBODY TD.sec2 {
    padding-top: 1.5vw;
  }

  .message TABLE {
    border: 0;
    border-bottom: 1px solid #FFF;
  }

  .message TABLE TBODY TH,
  .message TABLE TBODY TD {
    display: block;
    width: 80vw;
    padding: 1vw;
    border: 0;
   }

  .message TABLE TBODY TH {
    padding-bottom: 0;
    border-top: 1px solid #FFF;
  }

  .message TABLE TBODY TD:last-child {
  }

  .message .photo {
    height: 50vw;
    background-image: url(../img/photo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

}

/*
 * タブレット対応
 */
@media screen and (min-width: 768px) and ( max-width:1024px) {
  .message {
    padding: 0 10vw;
    padding-top: 60px;
  }
}

/*
 * PC対応
 */
@media (min-width: 1024px) {
  .message {
    padding: 0 20vw;
    padding-top: 60px;
  }
}
