@import url("global.css");

.mainvisual {
  background: url(../catalog/img/main.jpg) no-repeat center center;
  background-size: cover;
}

.mainarea {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  height: 680px;
  background: #83766f url(../catalog/img/pamphlet.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding-top: 120px;
  z-index: 1;
}
.mainarea .catch {
  background-color: rgba(140, 32, 72, 0.6);
  padding: 40px 0;
  color: #fff;
  font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Meiryo, Verdana, Arial, sans-serif;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 100px;
}
.pamphlet {
  border: rgba(0, 0, 0, 0.1) 3px solid;
  padding: 30px 20px;
  background-color: rgba(255, 255, 255, 0.6);
  margin: -90px auto 0;
  box-sizing: border-box;
  width: 1000px;
  position: relative;
  z-index: 2;
  border-radius: 5px;
}
.pamphlet ul {
  overflow: hidden;
}
.pamphlet ul li {
  width: 33.33%;
  float: left;
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 18px;
  font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Meiryo, Verdana, Arial, sans-serif;
  text-align: center;
  font-weight: 700;
}
.pamphlet ul li span {
  display: block;
  font-size: 14px;
  color: #fff;
  font-weight: 900;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.pamphlet ul li:nth-of-type(1) span {
  background: #a7713e;
}
.pamphlet ul li:nth-of-type(2) span {
  background: #b25232;
}
.pamphlet ul li:nth-of-type(3) span {
  background: #8c2048;
}

.contents .text {
  text-align: center;
  margin: 50px 0;
}
.contents .text p {
  margin: 1em 0;
}

.contents .text p.notes {
  font-size: 13px;
  color: #333;
  font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Meiryo, Verdana, Arial, sans-serif;
}
.contents .text p.notes a {
  color: #8c2048;
  font-weight: 700;
}

.formarea {
  width: 900px;
  margin: 0 auto;
}

table.inputform input[type="text"].input-name {
  width: 40%;
}

.btn-submit {
  border: none;
  border-radius: 4px;
  background: #a7713e;
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  padding: 0;
  text-shadow: none;
  vertical-align: middle;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  cursor: pointer;
}
.btn-submit:hover {
  border: none;
  background-color: #8c2048;
  text-shadow: 0 0 8px #fff;
  box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1200px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
  .pamphlet {
    width: auto;
    margin: -90px 10px 0;
  }
  .pamphlet ul li {
    width: 33.33%;
    padding: 0 10px;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .mainarea {
    height: 480px;
    padding-top: 100px;
  }
  .mainarea .catch {
    padding: 30px 0;
  }

  .contents .text {
    text-align: center;
    margin: 50px 0;
  }

  .pamphlet {
    padding: 30px 10px;
    margin: -80px 10px 0;
  }
  .pamphlet ul li {
    font-size: 18px;
    padding: 0 8px;
    letter-spacing: 1px;
    line-height: 1.5;
  }
  .pamphlet ul li span {
    padding: 10px;
    line-height: 40px;
    margin-bottom: 8px;
  }
  .pamphlet ul li:nth-of-type(1) span {
    line-height: 20px;
  }

  .formarea {
    width: auto;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 645px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .mainarea {
    height: 320px;
    padding-top: 20px;
  }
  .mainarea .catch {
    padding: 22px 10px;
    font-size: 21px;
    line-height: 1.4;
  }

  .contents .text {
    text-align: left;
    margin: 30px 0;
  }

  .pamphlet {
    padding: 10px 10px;
    margin: -40px 10px 0;
  }
  .pamphlet ul li {
    width: auto;
    float: none;
    font-size: 17px;
    padding: 0 8px;
    margin: 15px 0;
  }
  .pamphlet ul li span {
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .pamphlet ul li:nth-of-type(1) span {
    line-height: 1.4;
  }

  table.inputform input[type="text"].input-name {
    width: 100%;
  }
}