@charset "UTF-8";
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

p, img {
  margin: 0px;
  padding: 0px;
}

.xmas_red {
  color: #A81F24;
}

.clear {
  clear: both;
}

@-ms-viewport {
  width: auto;
}
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4em;
  background: #F9FAFA no-repeat center;
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

nav {
  display: none;
}
@media screen and (max-width: 599px) {
  nav {
    display: block;
  }
}

@media screen and (max-width: 599px) {
  .navbar {
    margin-bottom: 0;
    background-color: #004B2C;
  }
}

.navbar_title {
  padding: 11px 0 12px 15px;
}

.navbar-brand {
  background: url("../webletter/xmas_2017/img/dougukan_logo.png") no-repeat left center;
  background-size: contain;
  height: 37px;
  width: 139px;
}

.h1 {
  margin: 0 auto 30px auto;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  border-bottom: solid 2px;
  clear: both;
}
@media screen and (max-width: 599px) {
  .h1 {
    width: auto;
    padding-bottom: 4px;
    margin: 30px 0;
    font-size: 1.8rem;
  }
  .h1 span {
    background-color: #004B2C;
  }
}

.h1_silver {
  color: #C1C1C1;
  border-bottom-color: #C1C1C1;
}
@media screen and (max-width: 599px) {
  .h1_silver {
    color: white;
    border-bottom-color: white;
  }
}

.h1_red {
  color: #A81F24;
  border-bottom-color: #A81F24;
}

@media screen and (max-width: 599px) {
  .request {
    margin: 0 15px;
  }
}
.request_btn, .t_request_btn, .b_request_btn {
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 8px;
}
@media screen and (max-width: 599px) {
  .request_btn, .t_request_btn, .b_request_btn {
    width: 100%;
    font-size: 2.0rem;
  }
}

.t_request_btn {
  color: white;
  background-color: #115732;
  border-color: #AA8357;
}

.t_request_btn:focus,
.t_request_btn.focus,
.t_request_btn:hover,
.t_request_btn:active,
.t_request_btn.active {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  color: white;
}

.b_request_btn {
  color: white;
  background-color: #A81F24;
  border-color: #AA8357;
}

.b_request_btn:focus,
.b_request_btn.focus,
.b_request_btn:hover,
.b_request_btn:active,
.b_request_btn.active {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  color: white;
}

.back_btn {
  margin: 70px auto 40px auto;
  font-size: 1.4rem;
  color: white;
}
@media screen and (max-width: 599px) {
  .back_btn {
    width: 70%;
    margin: 40px auto 30px auto;
    font-size: 1.8rem;
    border-radius: 20px;
    background-color: #C1C1C1;
  }
}
.back_btn a {
  color: white;
}
.back_btn a:hover {
  color: red;
}
@media screen and (max-width: 599px) {
  .back_btn a:hover {
    color: white;
  }
}

.back_btn:focus,
.back_btn.focus,
.back_btn:hover,
.back_btn:active,
.back_btn.active {
  color: red;
}
@media screen and (max-width: 599px) {
  .back_btn:focus,
  .back_btn.focus,
  .back_btn:hover,
  .back_btn:active,
  .back_btn.active {
    color: white;
    background-color: #808080;
  }
}

.menu {
  width: 700px;
  margin: 50px auto 0 auto;
  padding: 0 5px;
}
@media screen and (max-width: 599px) {
  .menu {
    width: 100%;
    margin: 15px 0;
    padding: 0 15px;
  }
}

.menu_btn {
  width: 100%;
  background-color: #C1C1C1;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  vertical-align: middle;
}
@media screen and (max-width: 599px) {
  .menu_btn {
    border-radius: 8px;
    font-size: 2.0rem;
  }
}

.menu_btn:focus,
.menu_btn.focus,
.menu_btn:hover,
.menu_btn:active,
.menu_btn.active {
  color: white;
  background-color: #808080;
  border-color: #808080;
}

.col_setting {
  margin-bottom: 15px;
}

/* top_frame */
.top_frame {
  background: url("../webletter/xmas_2017/img/bgi_1.jpg") no-repeat center;
  height: 900px;
  margin: 0 auto;
  padding: 340px 0 90px 0;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .top_frame {
    background-image: none;
    height: auto;
    margin: 0 18px;
    padding: 0;
    text-align: center;
  }
}

.top_frame p {
  width: 600px;
  margin: 30px auto 40px auto;
  font-size: 1.4rem;
  line-height: 170%;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .top_frame p {
    width: 100%;
    height: auto;
    padding: auto 20px 45px 20px;
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

.pc {
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 599px) {
  .sp {
    display: block;
  }
}

/* middle_frame */
.middle_frame {
  background: url("../webletter/xmas_2017/img/bgi_2.jpg") repeat-y center;
  height: 2510px;
  padding: 0 auto;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .middle_frame {
    background: url("../webletter/xmas_2017/img/bgi_sp.gif") repeat-y center;
    height: auto;
    padding: 10px 0;
    margin: 0 auto;
  }
}

.content_frame {
  width: 700px;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .content_frame {
    width: 100%;
    padding: 0 40px;
  }
}

.label_color {
  color: white;
  background-color: #115732;
}

.product01 {
  margin: 0 auto 30px auto;
  border: #A81F24 solid 3px;
  background-color: white;
}
@media screen and (max-width: 599px) {
  .product01 {
    width: auto;
    clear: both;
  }
}

.p01_overall {
  width: 314px;
  margin: 23px 10px;
  float: left;
}
@media screen and (max-width: 599px) {
  .p01_overall {
    margin: 0 auto;
    float: none;
  }
}

.p01_contents {
  width: 360px;
  padding: 30px 36px 0 0;
  float: left;
}
@media screen and (max-width: 599px) {
  .p01_contents {
    width: auto;
    height: auto;
    padding: 0 10px 10px 15px;
  }
}

.p01_title {
  margin-bottom: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 170%;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .p01_title {
    font-size: 1.8rem;
  }
}

.p01_caption {
  margin-bottom: 20px;
  font-size: 1.4rem;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .p01_caption {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 599px) {
  .p01_parts {
    padding: 0 15px;
    margin: 0 auto 40px auto;
    float: none;
  }
}
.product02 {
  margin: 0 auto 30px auto;
  border: #A81F24 solid 3px;
  background-color: white;
  padding-bottom: 45px;
}
@media screen and (max-width: 599px) {
  .product02 {
    width: auto;
    clear: both;
  }
}

.p02_overall {
  width: 230px;
  margin: 26px 22px;
  float: left;
}
@media screen and (max-width: 599px) {
  .p02_overall {
    margin: 0 auto;
    float: none;
  }
}

.p02_contents {
  width: 420px;
  padding: 30px 40px 0 0;
  float: left;
}
@media screen and (max-width: 599px) {
  .p02_contents {
    width: auto;
    height: auto;
    padding: 0 10px 10px 15px;
  }
}

.p02_title {
  margin-bottom: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 170%;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .p02_title {
    font-size: 1.8rem;
  }
}

.p02_caption {
  margin-bottom: 20px;
  font-size: 1.4rem;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .p02_caption {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 599px) {
  .p02_parts {
    padding: 0 15px;
    margin: 0 auto 2px auto;
    float: none;
  }
}
.sample_frame {
  width: 700px;
  margin: 0 auto 30px auto;
}
@media screen and (max-width: 599px) {
  .sample_frame {
    width: 100%;
    margin-bottom: 20px;
  }
}

.p0 {
  padding: 0;
}

.product03 img {
  width: 330px;
  height: 240px;
  border: #A81F24 solid 3px;
  background-color: white;
  padding: 2px;
}
@media screen and (max-width: 599px) {
  .product03 img {
    width: 100%;
    height: 100%;
  }
}

.p03_caption {
  width: 330px;
  padding: 5px 0;
  text-align: left;
  color: white;
}
@media screen and (max-width: 599px) {
  .p03_caption {
    width: 100%;
    background-color: #A81F24;
    padding-left: 5px;
    margin-bottom: 20px;
  }
}
.p03_caption a {
  color: white;
}
.p03_caption a:hover {
  color: white;
}

.p03_right {
  margin-left: 5px;
}
@media screen and (max-width: 599px) {
  .p03_right {
    margin-left: 0;
  }
}

.row_setting {
  padding: 0 0 20px 0;
}
@media screen and (max-width: 599px) {
  .row_setting {
    padding: 0;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome, .product03 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome, .p03_right {
    margin-left: 0;
  }
}
_::-webkit-full-page-media, _:future, :root .product03 img {
  width: 100%;
  height: auto;
}

_::-webkit-full-page-media, _:future, :root .p03_right {
  margin-left: 0;
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
@media screen and (max-width: 599px) {
  .movie {
    width: auto;
    margin-bottom: 30px;
    clear: both;
  }
}

.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* bottom_frame */
.bottom_frame {
  background: url("../webletter/xmas_2017/img/bgi_3.jpg") no-repeat center;
  height: 910px;
  padding-top: 90px;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .bottom_frame {
    background: none;
    height: auto;
    padding-top: 0;
  }
}
.bottom_frame img {
  margin: 0 auto;
}
.bottom_frame p {
  width: 600px;
  margin: 0 auto;
  font-size: 1.4rem;
  line-height: 170%;
  text-align: left;
}
@media screen and (max-width: 599px) {
  .bottom_frame p {
    width: 100%;
    margin: 30px auto 40px auto;
    font-size: 1.6rem;
  }
}

.benefits {
  margin-bottom: 40px;
}

.how_to_buy {
  margin-bottom: 30px;
}

.footer {
  width: auto;
}
@media screen and (max-width: 599px) {
  .footer {
    width: 100%;
    background-color: #115732;
    padding: 1px 0;
  }
}
.footer p {
  color: white;
  font-size: 1.2rem;
  text-align: center;
}
.footer p a {
  color: white;
  text-decoration: underline;
}
.footer p a:hover {
  color: red;
  text-decoration: underline;
}

/* END FILE */