@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Shippori+Mincho:wght@400;600&display=swap");
/* line 9, gallery1.scss */
header { position: relative; scroll-snap-type: y mandatory; }

/* line 16, gallery1.scss */
header::before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background-image: url("../images/pc/iPad01A.jpg"); background-repeat: no-repeat; background-position: 50% 100%; background-size: cover; }

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
/* line 7, _splash_updown.scss */
#splash { /*fixedで全面に固定*/ position: fixed; width: 100%; height: 100%; z-index: 999; text-align: center; color: #fff; }

/* Loading画像中央配置　*/
/* line 18, _splash_updown.scss */
#splash_text { position: absolute; top: 50%; left: 50%; z-index: 999; transform: translate(-50%, -50%); color: #fff; width: 100%; }

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
/* line 29, _splash_updown.scss */
#splash_text svg { height: 2px; }

/*割れる画面のアニメーション*/
/* line 34, _splash_updown.scss */
.loader_cover { width: 100%; height: 50%; background-color: #333; transition: all 2s cubic-bezier(0.04, 0.435, 0.315, 0.9); transform: scaleY(1); }

/*上の画面*/
/* line 42, _splash_updown.scss */
.loader_cover-up { transform-origin: center top; }

/*下の画面*/
/* line 47, _splash_updown.scss */
.loader_cover-down { position: absolute; bottom: 0; transform-origin: center bottom; }

/*クラス名がついたらY軸方向に0*/
/* line 53, _splash_updown.scss */
.coveranime { transform: scaleY(0); }

/*=======================
	2nd イメージ
========================= */
/* line 6, _mainImage2.scss */
.mainImage-02 { position: relative; height: 100vh; }
/* line 9, _mainImage2.scss */
.mainImage-02 .wrapper { position: absolute; z-index: 2; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); }
/* line 16, _mainImage2.scss */
.mainImage-02 .wrapper > h2 { display: block; width: 55%; max-width: 400px; margin: 0 auto 2vh; }
/* line 21, _mainImage2.scss */
.mainImage-02 .wrapper > h2 img { width: 100%; }
/* line 25, _mainImage2.scss */
.mainImage-02 .wrapper .row { display: flex; flex-wrap: wrap; justify-content: space-between; width: 95%; margin: 0 auto; max-width: 700px; }
/* line 32, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col { flex: 0 0 48%; }
/* line 35, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxA { background: url("../images/pc/iPad01.jpg"); }
/* line 36, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxB { background: url("../images/pc/iPhone02.jpg"); }
/* line 37, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxC { background: url("../images/pc/iphone12.jpg"); }
/* line 38, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxD { background: url("../images/pc/iPhone13.jpg"); }
/* line 39, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxE { background: url("../images/pc/iPad02.jpg"); }
/* line 40, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col .inboxF { background: url("../images/pc/macbook06.jpg"); }
/* line 41, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] { display: flex; position: relative; align-items: center; width: 100%; height: 25vh; margin: 10px 0; color: #333; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; box-shadow: 1px 1px 10px 5px rgba(255, 255, 255, 0.4); }
/* line 54, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] p { width: 100%; font-size: 100%; text-align: center; }
/* line 59, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] a { display: block; position: absolute; bottom: 5%; left: 10%; width: 80%; margin: 0 auto; color: #fff; line-height: 140%; font-size: 80%; text-align: center; background-color: rgba(66, 66, 66, 0.54); border-radius: 10px; box-shadow: 0px 0px 3px 1px #fff; }
/* line 73, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] a span.u { display: block; font-size: 70%; line-height: 120%; }
/* line 80, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] a:hover { background-color: #ddd; }
/* line 83, _mainImage2.scss */
.mainImage-02 .wrapper .row > .col [class*="inbox"] i { display: block; line-height: 110%; }
/* line 92, _mainImage2.scss */
.mainImage-02 ul.slider { margin: 0; padding: 0; height: 100vh; list-style: none; }

@media (min-width: 414px) { /* line 106, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a { font-size: 100%; } }
@media (min-width: 576px) { /* line 120, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a { width: 70%; font-size: 120%; } }
@media (min-width: 768px) { /* line 135, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a { width: 80%; font-size: 130%; } }
@media (min-width: 992px) { /* line 147, _mainImage2.scss */
  .mainImage-02 .wrapper .row { justify-content: space-around; max-width: 1200px; }
  /* line 150, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col { flex: 0 0 31%; }
  /* line 152, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col [class*="inbox"] { height: 30vh; }
  /* line 154, _mainImage2.scss */
  .mainImage-02 .wrapper .row > .col [class*="inbox"] a { font-size: 160%; } }

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