@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");
/*--------------------------
		1st イメージ
---------------------------*/
/* line 7, _mainImage1.scss */
.mainImage-01 { position: relative; height: 100vh; }
/* line 10, _mainImage1.scss */
.mainImage-01 .webTitle { position: absolute; z-index: 2; top: 45%; left: 50%; transform: translate(-50%, -45%); width: 100%; }
/* line 17, _mainImage1.scss */
.mainImage-01 .webTitle h1 { display: block; width: 75%; max-width: 600px; margin: 0 auto; text-align: center; }
/* line 23, _mainImage1.scss */
.mainImage-01 .webTitle h1 img { width: 100%; }
/* line 28, _mainImage1.scss */
.mainImage-01 .since { margin: 2vh auto 0; }
/* line 30, _mainImage1.scss */
.mainImage-01 .since p { font-size: 80%; line-height: 160%; text-align: center; }
/* line 35, _mainImage1.scss */
.mainImage-01 .since .name { font-size: 100%; }
/* line 40, _mainImage1.scss */
.mainImage-01 ul.slider { margin: 0; padding: 0; height: 100vh; list-style: none; }

@media (min-width: 414px) { /* line 52, _mainImage1.scss */
  .mainImage-01 .since { margin: 3vh auto 0; }
  /* line 54, _mainImage1.scss */
  .mainImage-01 .since p { font-size: 90%; } }
@media (min-width: 576px) { /* line 64, _mainImage1.scss */
  .mainImage-01 .webTitle img { width: 65%; }
  /* line 66, _mainImage1.scss */
  .mainImage-01 .since { margin: 9vh auto 0; } }
@media (min-width: 768px) { /* line 75, _mainImage1.scss */
  .mainImage-01 .since .name { font-size: 120%; font-weight: bold; } }
@media (min-width: 992px) { /* line 85, _mainImage1.scss */
  .mainImage-01 .webTitle { top: 50%; transform: translate(-50%, -50%); }
  /* line 90, _mainImage1.scss */
  .mainImage-01 .since p { font-size: 100%; } }
@media (min-width: 1025px) { /* line 100, _mainImage1.scss */
  .mainImage-01 .since .name { font-size: 150%; } }
/*==================================================
スライダーのためのcss
===================================*/
/* line 6, _slider611.scss */
.slider { position: relative; z-index: 1; /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/ }

/*　背景画像設定　*/
/* line 16, _slider611.scss */
.slider-item01 { background: url("../images/pc/macbook01A.jpg"); }

/* line 17, _slider611.scss */
.slider-item02 { background: url("../images/pc/macbook01B.jpg"); }

/* line 18, _slider611.scss */
.slider-item03 { background: url("../images/pc/macbook01C.jpg"); }

/* line 19, _slider611.scss */
.slider-item04 { background: url("../images/pc/macbook01G.jpg"); }

/* line 20, _slider611.scss */
.slider-item05 { background: url("../images/pc/macbook02A.jpg"); }

/* line 21, _slider611.scss */
.slider-item06 { background: url("../images/pc/macbook03A.jpg"); }

/* line 22, _slider611.scss */
.slider-item07 { background: url("../images/pc/macbook04A.jpg"); }

/* line 23, _slider611.scss */
.slider-item08 { background: url("../images/pc/macbook05A.jpg"); }

/* line 24, _slider611.scss */
.slider-item09 { background: url("../images/pc/iPad01A.jpg"); }

/* line 25, _slider611.scss */
.slider-item10 { background: url("../images/pc/iPad02A.jpg"); }

/* line 26, _slider611.scss */
.slider-item11 { background: url("../images/pc/iPhone01A.jpg"); }

/* line 27, _slider611.scss */
.slider-item12 { background: url("../images/pc/iPhone02A.jpg"); }

/* line 29, _slider611.scss */
.slider-item { width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/ height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/ background-repeat: no-repeat; /*背景画像をリピートしない*/ background-position: center; /*背景画像の位置を中央に*/ background-size: cover; /*背景画像が.slider-item全体を覆い表示*/ }

@media (min-width: 1152px) { /* line 38, _slider611.scss */
  .slider-item { background-attachment: local; } }
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
/* line 46, _slider611.scss */
.slick-prev, .slick-next { position: absolute; /*絶対配置にする*/ z-index: 3; top: 42%; cursor: pointer; /*マウスカーソルを指マークに*/ outline: none; /*クリックをしたら出てくる枠線を消す*/ border-top: 2px solid #ccc; /*矢印の色*/ border-right: 2px solid #ccc; /*矢印の色*/ height: 25px; width: 25px; }

/* line 59, _slider611.scss */
.slick-prev { /*戻る矢印の位置と形状*/ left: 2.5%; transform: rotate(-135deg); }

/* line 64, _slider611.scss */
.slick-next { /*次へ矢印の位置と形状*/ right: 2.5%; transform: rotate(45deg); }

/*ドットナビゲーションの設定*/
/* line 71, _slider611.scss */
.slick-dots { position: relative; z-index: 3; text-align: center; margin: -50px 0 0 0; }

/* line 78, _slider611.scss */
.slick-dots li { display: inline-block; margin: 0 5px; }

/* line 83, _slider611.scss */
.slick-dots button { color: transparent; outline: none; width: 8px; /*ドットボタンのサイズ*/ height: 8px; /*ドットボタンのサイズ*/ display: block; border-radius: 50%; background: #ccc; /*ドットボタンの色*/ }

/* line 93, _slider611.scss */
.slick-dots .slick-active button { background: #333; /*ドットボタンの現在地表示の色*/ }

/*---------------------------------------------
親メニュー ( header > div.mainImage > nav.dropMenu )
----------------------------------------------*/
/* line 6, _dropMenu.scss */
.dropMenu { margin-top: 2vh; }
/* line 8, _dropMenu.scss */
.dropMenu > ul { display: flex; flex-wrap: wrap; width: 85%; margin: 0 auto; padding: 0 20px 20px; list-style-type: none; }
/* line 17, _dropMenu.scss */
.dropMenu > ul > li { flex: 1 1 50%; height: 18vh; position: relative; margin-top: 20px; }
/* line 23, _dropMenu.scss */
.dropMenu > ul > li + li:nth-child(odd) { border-left: none; text-align: left; }
/* line 24, _dropMenu.scss */
.dropMenu > ul > li + li:nth-child(even) { border-left: solid 1px #ccc; text-align: right; }
/* line 25, _dropMenu.scss */
.dropMenu > ul > li > a { display: block; padding: 0 0 10px 0; color: #333; font-family: "Noto Sans JP", sans-serif; font-size: 130%; font-weight: bold; text-decoration: none; }
/* line 37, _dropMenu.scss */
.dropMenu > ul > li > a:hover { color: #ddd; }

@media (min-width: 414px) { /* line 47, _dropMenu.scss */
  .dropMenu { margin-top: 3vh; }
  /* line 50, _dropMenu.scss */
  .dropMenu > ul > li { height: 18vh; } }
@media (min-width: 576px) { /* line 58, _dropMenu.scss */
  .dropMenu { margin-top: 5vh; }
  /* line 60, _dropMenu.scss */
  .dropMenu > ul { width: 65%; }
  /* line 64, _dropMenu.scss */
  .dropMenu > ul > li a { font-size: 130%; padding: 15px 0; } }
@media (min-width: 768px) { /* line 71, _dropMenu.scss */
  .dropMenu { margin-top: 8vh; }
  /* line 73, _dropMenu.scss */
  .dropMenu > ul { width: 90%; }
  /* line 75, _dropMenu.scss */
  .dropMenu > ul > li { flex: 1 1 0; height: 23vh; }
  /* line 78, _dropMenu.scss */
  .dropMenu > ul > li + li:nth-child(3) { border-left: solid 1px #ccc; }
  /* line 79, _dropMenu.scss */
  .dropMenu > ul > li a { text-align: center; font-size: 140%; padding: 12px 0; } }
@media (min-width: 992px) { /* line 87, _dropMenu.scss */
  .dropMenu > ul { max-width: 1100px; margin-top: 40px; }
  /* line 90, _dropMenu.scss */
  .dropMenu > ul > li { height: 25vh; }
  /* line 92, _dropMenu.scss */
  .dropMenu > ul > li a { font-size: 160%; padding: 14px 0; } }
/*----------------------------------------------------
	子メニュー ( header > div.mainImage > nav.dropMenu )
-----------------------------------------------------*/
/* line 103, _dropMenu.scss */
.dropMenu > ul li > ul { display: none; position: absolute; left: 0; width: 100%; white-space: nowrap; animation: fadeIn; animation-duration: 1.0s; }
/* line 113, _dropMenu.scss */
.dropMenu > ul li > ul > li a { display: block; padding: 5px 0; color: #222; font-size: 100%; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 0px solid #fff; border-radius: 7px; transition: 0.5s; }
/* line 122, _dropMenu.scss */
.dropMenu > ul li > ul > li a i { display: none; margin-right: 10px; }
/* line 125, _dropMenu.scss */
.dropMenu > ul li > ul > li a:hover { color: #fff; background-color: rgba(66, 66, 66, 0.3); }
/* line 133, _dropMenu.scss */
.dropMenu > ul li:hover > ul { display: block; }

@media (min-width: 360px) { /* line 140, _dropMenu.scss */
  .dropMenu ul li > ul li a { padding: 7px 0; } }
@media (min-width: 768px) { /* line 156, _dropMenu.scss */
  .dropMenu ul li > ul li a { margin: 0 10px; padding: 14px 0 14px 2vw; font-size: 100%; text-align: left; }
  /* line 161, _dropMenu.scss */
  .dropMenu ul li > ul li a i { display: inline; } }
@media (min-width: 992px) { /* line 166, _dropMenu.scss */
  .dropMenu ul li > ul li a { padding: 14px 0 14px 3.2vw; } }
/* line 12, top3.scss */
header { position: relative; overflow: hidden; }

/* line 24, top3.scss */
[class*="mainImage-"] .webTitle { top: 12%; left: 50%; transform: translate(-50%, 0%); }
/* line 28, top3.scss */
[class*="mainImage-"] .webTitle h1 { color: #666; font-family: "Noto Sans JP", sans-serif; }
/* line 32, top3.scss */
[class*="mainImage-"] .webTitle .dropMenu { margin-top: 11vh; }
/* line 34, top3.scss */
[class*="mainImage-"] .webTitle .dropMenu > ul { width: 80%; }
/* line 43, top3.scss */
[class*="mainImage-"] ul.slider { height: 30vh; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); }
/* line 46, top3.scss */
[class*="mainImage-"] ul.slider .slider-item { height: 30vh; }
/* line 49, top3.scss */
[class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 46%; }
/* line 50, top3.scss */
[class*="mainImage-"] ul.slider .slick-dots li { display: none; }

/* line 57, top3.scss */
.container { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; }
/* line 62, top3.scss */
.container main { margin-top: 0px; }

@media (min-width: 375px) { /* line 70, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu { margin-top: 14vh; }
  /* line 74, top3.scss */
  [class*="mainImage-"] ul.slider { height: 32vh; }
  /* line 76, top3.scss */
  [class*="mainImage-"] ul.slider .slider-item { height: 32vh; }
  /* line 79, top3.scss */
  [class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 44%; } }
@media (min-width: 576px) { /* line 86, top3.scss */
  [class*="mainImage-"] .webTitle { top: 14%; }
  /* line 87, top3.scss */
  [class*="mainImage-"] .webTitle h1 { font-size: 200%; }
  /* line 89, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu { margin-top: 16vh; }
  /* line 91, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu > ul { width: 75%; }
  /* line 95, top3.scss */
  [class*="mainImage-"] .webTitle .since { margin: 2vh auto 0; }
  /* line 99, top3.scss */
  [class*="mainImage-"] ul.slider { height: 35vh; }
  /* line 101, top3.scss */
  [class*="mainImage-"] ul.slider .slider-item { height: 35vh; }
  /* line 104, top3.scss */
  [class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 50%; } }
@media (min-width: 768px) { /* line 111, top3.scss */
  [class*="mainImage-"] .webTitle { top: 15%; }
  /* line 112, top3.scss */
  [class*="mainImage-"] .webTitle h1 { font-size: 250%; }
  /* line 114, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu { margin-top: 16vh; }
  /* line 116, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu > ul { width: 90%; }
  /* line 120, top3.scss */
  [class*="mainImage-"] .webTitle .since { margin: 9vh auto 0; }
  /* line 124, top3.scss */
  [class*="mainImage-"] ul.slider { height: 40vh; }
  /* line 126, top3.scss */
  [class*="mainImage-"] ul.slider .slider-item { height: 40vh; }
  /* line 129, top3.scss */
  [class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 50%; } }
@media (min-width: 992px) { /* line 136, top3.scss */
  [class*="mainImage-"] .webTitle { top: 19%; }
  /* line 137, top3.scss */
  [class*="mainImage-"] .webTitle h1 { font-size: 300%; }
  /* line 139, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu { margin-top: 20vh; }
  /* line 141, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu > ul { width: 90%; }
  /* line 145, top3.scss */
  [class*="mainImage-"] .webTitle .since { margin: 7vh auto 0; }
  /* line 149, top3.scss */
  [class*="mainImage-"] ul.slider { height: 45vh; }
  /* line 151, top3.scss */
  [class*="mainImage-"] ul.slider .slider-item { height: 45vh; }
  /* line 154, top3.scss */
  [class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 50%; } }
@media (min-width: 1025px) { /* line 161, top3.scss */
  [class*="mainImage-"] .webTitle { top: 50%; transform: translate(-50%, -45%); }
  /* line 162, top3.scss */
  [class*="mainImage-"] .webTitle h1 { font-size: 300%; }
  /* line 165, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu { margin-top: 19vh; }
  /* line 167, top3.scss */
  [class*="mainImage-"] .webTitle .dropMenu > ul { width: 90%; }
  /* line 171, top3.scss */
  [class*="mainImage-"] .webTitle .since { margin: 9vh auto 0; }
  /* line 175, top3.scss */
  [class*="mainImage-"] ul.slider { height: 45vh; }
  /* line 177, top3.scss */
  [class*="mainImage-"] ul.slider .slider-item { height: 45vh; }
  /* line 180, top3.scss */
  [class*="mainImage-"] ul.slider .slick-prev, [class*="mainImage-"] ul.slider .slick-next { top: 50%; } }

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