@charset "UTF-8";
/* $wrapperwidth: 950px;
$pc: 1024;
$tablet: 768;
$smartphone: 640;
$iphone: 320;

@mixin media($mediaSize){
    @if $mediaSize == tablet{
        @media all and (max-width: ($tablet + px)) {@content}
    }
    @else if $mediaSize == smartphone{
        @media all and (max-width: ($smartphone + px)) {@content}
    }
    @else if $mediaSize == oversmartphone{
        @media all and (min-width: ($smartphone + px)) {@content}
    }
    @else if $mediaSize == iPhone{
        @media all and (max-width: ($iphone + px)){@content}
    }
    @else if $mediaSize == pc{
        @media all and (min-width: ($tablet + px)){@content}
    }
    @else if $mediaSize == ie{
        @media all and (-ms-high-contrast: none) {@content}
    }
} */
/* メディアクエリ用ブレイクポイント定義 _mixin.scssのみにて使用 */
img[src$=".svg"] {
  width: 100%;
}

/*def end*/
/*share*/
::-moz-selection {
  background: rgba(3, 22, 40, 0.6); /* Safari */
  color: white;
}
::selection {
  background: rgba(3, 22, 40, 0.6); /* Safari */
  color: white;
}

::-moz-selection {
  background: rgba(3, 22, 40, 0.6); /* Firefox */
  color: white;
}

html, body {
  height: 100%;
}

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

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

li {
  list-style-type: none;
}

dl, dt, dd, ul, li, figure {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p {
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

em, i {
  font-style: normal;
}

i.fa {
  margin-right: 0.25em;
}

@media screen and (max-width: 768px) {
  ._pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  ._sp {
    display: none !important;
  }
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

html {
  font-size: 12px;
}

body {
  font-family: "Open Sans", "Noto Sans JP", "Roboto Condensed", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Meiryo UI", "Meiryo", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  letter-spacing: 0.025em;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

.temporary {
  padding: 50px;
  font-size: 1.5em;
}

.main .keyvisual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 200px 0;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
  .main .keyvisual {
    padding: 75px 0 50px;
  }
}
.main .keyvisual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(../photo/keyvisual.jpg) center center;
  background-size: cover;
}
.main .keyvisual__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 1200px;
}
@media screen and (max-width: 768px) {
  .main .keyvisual__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.main .keyvisual__text {
  color: white;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .main .keyvisual__text {
    width: 100%;
    margin-top: 30px;
    padding: 0 30px;
  }
}
.main .keyvisual__catch {
  font-size: 5rem;
  line-height: 130%;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .main .keyvisual__catch {
    font-size: 2rem;
    text-align: center;
  }
}
.main .keyvisual__paragraph {
  margin-top: 10px;
  font-size: 1.75rem;
  line-height: 160%;
}
@media screen and (max-width: 768px) {
  .main .keyvisual__paragraph {
    font-size: 1rem;
    text-align: center;
  }
}
.main .keyvisual__logo {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.main .keyvisual__logo img {
  margin-left: auto;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .main .keyvisual__logo {
    width: 100%;
  }
  .main .keyvisual__logo img {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
  }
}

.product {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(252, 250, 247, 0)), color-stop(55%, #FCFAF7));
  background-image: linear-gradient(90deg, rgba(252, 250, 247, 0) 15%, #FCFAF7 55%);
}
@media screen and (max-width: 768px) {
  .product {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(252, 250, 247, 0)), color-stop(95%, #FCFAF7));
    background-image: linear-gradient(90deg, rgba(252, 250, 247, 0) 15%, #FCFAF7 95%);
  }
}
.product__content {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.product__content::before {
  left: -10%;
  background: url(../photo/mission.jpg) center center;
}
@media screen and (max-width: 768px) {
  .product__content::before {
    left: 0;
  }
}
.product__text {
  color: black;
}

.technology {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(15%, rgba(136, 190, 183, 0.2)), color-stop(65%, #88BEB7));
  background-image: linear-gradient(270deg, rgba(136, 190, 183, 0.2) 15%, #88BEB7 65%);
}
@media screen and (max-width: 768px) {
  .technology {
    background-image: -webkit-gradient(linear, right top, left top, color-stop(15%, rgba(136, 190, 183, 0.2)), color-stop(95%, #88BEB7));
    background-image: linear-gradient(270deg, rgba(136, 190, 183, 0.2) 15%, #88BEB7 95%);
  }
}
.technology__text {
  color: white;
}
.technology__content {
  position: relative;
}
.technology__content::before {
  right: -10%;
  background: url(../photo/technology.jpg) center center;
}
@media screen and (max-width: 768px) {
  .technology__content::before {
    right: 0;
  }
}

.progress {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(252, 250, 247, 0)), color-stop(65%, #FCFAF7));
  background-image: linear-gradient(90deg, rgba(252, 250, 247, 0) 15%, #FCFAF7 65%);
}
@media screen and (max-width: 768px) {
  .progress {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(5%, rgba(252, 250, 247, 0)), to(rgba(252, 250, 247, 0.5)));
    background-image: linear-gradient(90deg, rgba(252, 250, 247, 0) 5%, rgba(252, 250, 247, 0.5) 100%);
  }
}
.progress__content {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.progress__content::before {
  left: -10%;
  background: url(../photo/progress.jpg) center center;
}
@media screen and (max-width: 768px) {
  .progress__content::before {
    left: 0;
  }
}
.progress__text {
  color: black;
}
@media screen and (max-width: 768px) {
  .progress__text {
    color: white;
  }
}

.product, .mission, .technology, .progress {
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 130px 0;
}
@media screen and (max-width: 768px) {
  .product, .mission, .technology, .progress {
    padding: 0;
  }
}
.product__content, .mission__content, .technology__content, .progress__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 1100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .product__content, .mission__content, .technology__content, .progress__content {
    padding: 75px 0;
  }
}
.product__content::before, .mission__content::before, .technology__content::before, .progress__content::before {
  content: "";
  position: absolute;
  top: -75px;
  width: 80%;
  height: calc(100% + 150px);
  background-size: cover;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .product__content::before, .mission__content::before, .technology__content::before, .progress__content::before {
    height: 100%;
    top: 0;
    width: 100%;
  }
}
.product__text, .mission__text, .technology__text, .progress__text {
  width: 45%;
}
@media screen and (max-width: 768px) {
  .product__text, .mission__text, .technology__text, .progress__text {
    width: 100%;
    padding: 0 30px;
  }
}
.product__catch, .mission__catch, .technology__catch, .progress__catch {
  margin-top: 5px;
  font-size: 4rem;
  line-height: 125%;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .product__catch, .mission__catch, .technology__catch, .progress__catch {
    font-size: 2rem;
  }
}
.product__paragraph, .mission__paragraph, .technology__paragraph, .progress__paragraph {
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 160%;
}
@media screen and (max-width: 768px) {
  .product__paragraph, .mission__paragraph, .technology__paragraph, .progress__paragraph {
    font-size: 1.25rem;
  }
}
.product__logo, .mission__logo, .technology__logo, .progress__logo {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.product__logo img, .mission__logo img, .technology__logo img, .progress__logo img {
  width: 40%;
}
.product__title, .mission__title, .technology__title, .progress__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  padding-left: 0.25em;
  font-family: "PT Serif", "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: normal;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .product__title, .mission__title, .technology__title, .progress__title {
    padding-left: 0;
    font-size: 1.1rem;
  }
}

@media screen and (min-width: 768px) {
  .link__underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .link__underline::before {
    position: absolute;
    bottom: -5px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: rgb(3, 22, 40);
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .link__underline:hover::before {
    -webkit-transform-origin: left top;
            transform-origin: left top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.footer {
  padding: 30px 100px;
  text-align: center;
  font-size: 1.5rem;
  background: #FCFAF7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 20px 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.footer__logo img {
  width: 200px;
}
@media screen and (max-width: 768px) {
  .footer__logo img {
    width: 65%;
  }
}
.footer__text {
  font-weight: bold;
  font-size: 75%;
  text-align: right;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  .footer__text {
    margin-top: 5px;
    font-size: 50%;
    text-align: center;
  }
}

.form {
  /* 
  //オリジナルの矢印を使う場合
  .select__outer {
      position: relative;
      display: table;
      &::before {
          content: "";
          position: absolute;
          top: 50%;
          right: 15px;
          width: 8px;
          height: 8px;
          border-top: 1px $black solid;
          border-right: 1px $black solid;
          transform: translateY(-50%) rotate(135deg);
          pointer-events: none;
      }
      select {
          appearance: none;
      }
  } 
  //オリジナルの矢印を使う場合
  */
}
.form input[type=text], .form input[type=date], .form input[type=email], .form textarea, .form select {
  background: #F1F1F1;
  width: 100%;
  font-size: 12px;
  margin: 0 auto;
  border: none;
  padding: 10px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.form input[type=text]:focus, .form input[type=date]:focus, .form input[type=email]:focus, .form textarea:focus, .form select:focus {
  outline: none;
  color: black;
  background: lightgray;
}
.form textarea {
  min-height: 100px;
}
.form button, .form input[type=submit] {
  width: 70%;
  padding: 15px;
  margin: 0 auto;
  background: black;
  color: white;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border: none;
  cursor: pointer;
}
.form button:hover, .form input[type=submit]:hover {
  background: white;
  color: #333;
}

.menubutton {
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 0;
  width: 25px;
  height: 30px;
  cursor: pointer;
}
.menubutton span, .menubutton::before, .menubutton::after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 1em;
  height: 1px;
  z-index: 2;
  margin: auto;
  background: #000;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  content: "";
}
.menubutton span {
  overflow: hidden;
  z-index: 1;
  color: #000;
  content: none;
}
.menubutton::before {
  -webkit-transform: translate(0, -0.7px);
          transform: translate(0, -0.7px);
}
.menubutton::after {
  -webkit-transform: translate(0, 0.7px);
          transform: translate(0, 0.7px);
}
.menubutton._clicked span {
  opacity: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
.menubutton._clicked::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menubutton._clicked::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.pagetopbutton {
  position: fixed;
  z-index: 1000;
  cursor: pointer;
  right: 25px;
  bottom: -20px;
  opacity: 0;
  visibility: hidden;
}
.pagetopbutton._visible {
  visibility: visible;
  opacity: 1;
  bottom: 20px;
}
/*# sourceMappingURL=base.css.map */