@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ StdN", "Hiragino Kaku Gothic StdN", sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-align: left;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style: none;
}

ol {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  text-decoration: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #000;
}

a:focus {
  text-decoration: none;
}

img {
  width: 100%;
  vertical-align: bottom;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

button {
  border-color: transparent;
}

input[type="text"],
input[type="email"],
textarea,
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

address {
  font-style: normal;
}

input[type="text"] {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 10px 15px;
  border-radius: 3px;
  height: 200px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mv__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

/* ==============================
container
============================= */
.m-container {
  padding: 60px 1.25rem;
  margin-right: auto;
  margin-left: auto;
  max-width: 65rem;
}

/* ==============================
mask
============================= */
.m-mask {
  background-color: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.5;
  z-index: 10;
}

/* ==============================
color
============================= */
.m-orange-color {
  color: #f19100;
}

/* ==============================
表示・非表示
============================= */
.m-lg-show-inline {
  display: none;
}

@media screen and (max-width: 991.98px) {
  .m-lg-show-inline {
    display: inline;
  }
}

.m-lg-hide-inline {
  display: inline;
}

@media screen and (max-width: 991.98px) {
  .m-lg-hide-inline {
    display: none;
  }
}

.m-sm-show-inline {
  display: none;
}

@media screen and (max-width: 575.98px) {
  .m-sm-show-inline {
    display: inline;
  }
}

.m-sm-hide-inline {
  display: inline;
}

@media screen and (max-width: 575.98px) {
  .m-sm-hide-inline {
    display: none;
  }
}

/* ==============================
up arrow
============================= */
.m-upArrow {
  width: 3.75rem;
  height: 3.75rem;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 15;
  opacity: 0;
}

@media screen and (max-width: 575.98px) {
  .m-upArrow {
    width: 2.5rem;
    height: 2.5rem;
    bottom: 0.9375rem;
    right: 0.9375rem;
  }
}

/* ===================================
header
=================================== */
.header {
  background-color: #fff;
}

@media screen and (max-width: 575.98px) {
  .header {
    width: 100%;
    position: fixed;
    z-index: 100;
  }
}

.header__wrap {
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  max-width: 85rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo {
  width: 4.75rem;
}

@media screen and (max-width: 575.98px) {
  .header__logo {
    width: 12vw;
  }
}

.header__nav {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__nav nav {
  padding: 0 1.25rem 0 0;
  border-right: 1px solid #000;
}

@media screen and (max-width: 575.98px) {
  .header__nav nav {
    display: none;
  }
}

.header__contact {
  padding: 0 0 0 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
}

@media screen and (max-width: 575.98px) {
  .header__contact {
    padding: 0;
    font-size: 12px;
    font-size: 3.75vw;
  }
}

.header__contact img {
  padding: 0 0.625rem 0 0;
  width: 1.5625rem;
}

@media screen and (max-width: 575.98px) {
  .header__contact img {
    padding: 0 0.3125rem 0 0;
  }
}

.header__contact p {
  height: 2rem;
}

@media screen and (max-width: 575.98px) {
  .header__contact p {
    color: #000;
    line-height: 27px;
    line-height: 8.4375vw;
  }
}

/* ===================================
footer
=================================== */
.footer {
  padding: 4.375rem 0;
  background-color: #000;
}

.footer__wrap {
  text-align: center;
}

.footer__content {
  padding: 0.3125rem 1.875rem;
  background-color: #fff;
  display: inline-block;
}

.footer__contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.25rem;
  -webkit-transition: .6;
  transition: .6;
}

@media screen and (max-width: 575.98px) {
  .footer__contact {
    font-size: 16px;
    font-size: 5vw;
  }
}

.footer__contact:hover {
  opacity: .5;
}

.footer__contact img {
  margin: 0 0.625rem 0 0;
  width: 1.5625rem;
  text-align: center;
}

/* ===================================
home
=================================== */
@media screen and (max-width: 575.98px) {
  main {
    padding: 3.375rem 0 0;
  }
}

/*====== mv ======*/
.mv {
  width: 100%;
  height: 30.625rem;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

@media screen and (min-width: 1900px) {
  .mv {
    height: 42.5rem;
  }
}

@media screen and (max-width: 991.98px) {
  .mv {
    height: 28.75rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv {
    height: 12.5rem;
  }
}

.mv video {
  margin: auto;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  visibility: visible;
  opacity: 1;
  height: auto;
}

.mv__catch {
  width: 100%;
  z-index: 11;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 575.98px) {
  .mv__catch {
    line-height: 2.875rem;
  }
}

.mv__catch span:first-child {
  padding: 0 0 0.625rem;
  font-size: 2.5rem;
  border-bottom: 1px solid #fff;
}

@media screen and (max-width: 991.98px) {
  .mv__catch span:first-child {
    font-size: 2rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv__catch span:first-child {
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.mv__catch span:last-child {
  font-size: 3.875rem;
  font-weight: 700;
}

@media screen and (max-width: 991.98px) {
  .mv__catch span:last-child {
    font-size: 3rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv__catch span:last-child {
    font-size: 22px;
    font-size: 6.875vw;
  }
}

.mv__scroll {
  color: #fff;
  text-align: center;
  width: 3.125rem;
  z-index: 11;
  bottom: 0;
  font-size: 0.75rem;
  position: absolute;
  left: 48%;
  right: 52%;
}

@media screen and (max-width: 575.98px) {
  .mv__scroll {
    font-size: 11px;
    font-size: 3.4375vw;
    left: 45%;
    right: 55%;
  }
}

.mv__scroll:after {
  margin: 0.625rem auto 0;
  display: block;
  width: 0.0625rem;
  height: 2.125rem;
  background-color: #fff;
  content: "";
}

@media screen and (max-width: 575.98px) {
  .mv__scroll:after {
    margin: 0.3125rem auto 0;
    height: 0.875rem;
  }
}

/*====== can ======*/
.can {
  padding: 0 0 3.75rem;
  background: url("../img/section1-bg.jpg") repeat top center;
}

.can__list {
  padding: 5rem 1.25rem;
  margin: 0 auto;
  max-width: 59.6875rem;
}

.can__list__item {
  margin: 0 0 1.25rem;
  padding: 0 1.875rem;
  background-color: #fff;
  font-size: 1.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 7.5rem;
}

@media screen and (max-width: 575.98px) {
  .can__list__item {
    padding: 0.9375rem 0.9375rem;
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.can__list__item img {
  margin: 0 1.25rem 0 0;
  width: 2.5625rem;
}

@media screen and (max-width: 575.98px) {
  .can__list__item img {
    margin: 0 0.625rem 0 0;
    width: 1.25rem;
  }
}

.can__images {
  margin: -5rem auto 0;
  padding: 0 1.25rem;
  max-width: 66.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 575.98px) {
  .can__images {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.can__images__item {
  padding: 0 0.3125rem;
  width: calc(100% / 4 - 10px);
}

@media screen and (max-width: 575.98px) {
  .can__images__item {
    padding: 0 0.3125rem 0.625rem;
    width: calc(100% / 2 - 10px);
  }
}

/*====== point ======*/
.point {
  padding: 5rem 0 0;
}

.point__number {
  margin: 0 auto;
  max-width: 53.75rem;
  font-size: 1.875rem;
  position: relative;
}

.point__number:after {
  margin: 0 auto;
  height: 0.0625rem;
  width: 100%;
  background-color: #000;
  display: block;
  content: "";
  position: absolute;
  top: 2.5625rem;
  z-index: 1;
}

.point__number span {
  margin: 0 auto;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

.point__list__item {
  margin: 0 0 5rem;
}

.point__list__item__title {
  margin: 1.875rem 0 1.25rem;
  font-size: 1.875rem;
  text-align: center;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__title {
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.point__list__item__img1 {
  margin: 0 auto;
  max-width: 27.25rem;
}

.point__list__item__img2 {
  margin: 2.5rem auto 3.75rem;
  padding: 0 1.25rem;
  max-width: 49.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__img2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.point__list__item__img2 p {
  width: 45%;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__img2 p {
    width: 100%;
  }
}

.point__list__item__img2 .arrow {
  padding: 0 1.875rem;
  width: 13%;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__img2 .arrow {
    padding: 1.875rem 0;
    width: 20%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

.point__list__item__text {
  font-size: 1.25rem;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__text {
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.point__list__item__text.border:after {
  margin: 2.5rem auto 0;
  max-width: 6.25rem;
  width: 80%;
  height: 0.0625rem;
  background-color: #a7a7a7;
  display: block;
  content: "";
}

.point__list__item__text span {
  font-size: 0.75rem;
}

.point__list__item__supplement {
  margin: 2.5rem 0 0;
  font-size: 0.875rem;
  text-align: center;
  color: #808080;
}

@media screen and (max-width: 575.98px) {
  .point__list__item__supplement {
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.point__list__item__supplement p:first-child {
  margin: 0 0 20px;
}

.utilizationImage__title {
  text-align: center;
  padding: 0 1.25rem;
}

.utilizationImage__title span {
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  font-size: 1.875rem;
  border: 1px solid #000;
  background-color: #fff;
  display: inline-block;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__title span {
    padding: 1.875rem 1.25rem;
    font-size: 20px;
    font-size: 6.25vw;
  }
}

.utilizationImage__wrap {
  margin: -3.75rem 0 0;
  padding: 0 0 3.75rem;
  background: url("../img/section1-bg.jpg") repeat top center;
}

.utilizationImage__caption {
  padding: 7.5rem 0 3.75rem;
  text-align: center;
  font-size: 1.625rem;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__caption {
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.utilizationImage__list {
  padding: 0 1.25rem;
}

.utilizationImage__list__item {
  margin: 0 auto 2.5rem;
  padding: 1.875rem;
  max-width: 62.5rem;
  background-color: #fff;
  border-radius: 3.75rem;
}

.utilizationImage__list__item__dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.utilizationImage__list__item__dt {
  padding: 0 3.75rem 0 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 1.875rem;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dt {
    padding: 0 0 1.25rem;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.utilizationImage__list__item__dd {
  padding: 0.625rem 0;
  border-left: 1px solid #000;
  font-size: 1.25rem;
  text-indent: -1.3em;
  padding-left: 2em;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dd {
    padding: 1.25rem 0 0;
    border-top: 1px solid #000;
    border-left: none;
    font-size: 0.875rem;
  }
}

.utilizationImage__list__item__dd ul {
  padding: 0 0 0 1.875rem;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dd ul {
    padding: 0 0 0 1rem;
  }
}

.utilizationImage__list__item__dd li {
  margin: 0 0 0.9375rem;
}

.utilizationImage__list__item__dd li:last-child {
  margin: 0;
}

/*# sourceMappingURL=style.css.map */