@charset "utf-8";

/* -------------------- CSS Reset -------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,h2,h3,h4,p,
ul[class],ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  /* text-rendering: optimizeSpeed; */
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,button,textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a{
text-decoration: none;
}

a:link {
      color: #000;
      text-decoration: none;
}

a:visited {
      color: #000;
      text-decoration: none;
}

/*font */

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
/* ----------------- CSS Reset end-------------------- */

/* ----------------- 共通 ----------------- */
html {
  font-size: 62.5%;
}


body{
  width: 100%;
  font-size: 1.4em;
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color:#000;
	width: 100%;
	  margin: 0 auto;
}
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
/* ----------------- 共通 end ----------------- */
/* header */
#header{
  width: 100%;
  height: 7rem;
  position: fixed;
  top:0;
  z-index: 900;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  padding-top: 3rem;
  border-bottom: solid 1px #f5f5f5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#header .inner{
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}
.top_rogo{
  float: left;
}
.contact {
  display: inline-block;
  float: right;
}
.contact:after{
  clear: right;
}
.top_rogo:after{
 clear:left;
}
.contact p{
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 0.8rem;
  cursor : pointer;
}
.contact p{
  width: 100px;
  background-color: #000;
  color: #FFF;
  border-radius: 5px;
}
.contact p:hover,.home p:hover{
  opacity: 0.5;
}
/* header end */


/* 共通 */
#bg{
  background-color: #f5f5f5;
  padding: 0 2rem;
}
section{
  padding: 3.5rem 0;
}
section div{
  max-width: 964px;
  width: 100%;
  margin: 0 auto;
  background-color: #FFF;
}
/* 共通 end */


/* ページ内リンク */
#about, #operation_image, #function, #case, #support, #setting {
  margin-top: -7rem;
  padding-top: 7rem;
}
/* ページ内リンク end */


/* nav */
#nav {
  margin-top: 9rem;
}
#nav{
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
}
.nav_content > * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.nav_content {
    width: 100%;
    height: 0;
    /* padding-top: 120%; */
    padding-top: 70%;
    position: relative;
    /* border: solid 1px #000; */
}
.fadeout img{
  filter: blur(1.2px);
}


.nav_bg{
  position: absolute;
  width: 100%;
  height: auto;
  top: 8%;
  /* left: 10%; */
  margin: 0 auto;
    /* z-index: 700; */
}
.hanabi {
  position: absolute;
  width: 17%;
  height: auto;
  border-radius: 50%;
  z-index: 700;
}
.hanabi_img{
  width: 40%;
  height: auto;
  position: absolute;
}
.nav_content .about {
    top:21%;
    left: 18%;
}
.nav_content .about2 {
     z-index: 600;
    top:27.4%;
    left: 22.5%;
}
.nav_content .operation_image {
    top: 35%;
    left: 3%;
}

.nav_content .operation_image2 {
   z-index: 600;
    top: 40.6%;
    left: 7.6%;
}
.nav_content .function {
    top: 57%;
    left: 13%;
}
.nav_content .function2 {
       z-index: 600;
    top:63.5%;
    left: 17.4%;
}
.nav_content .case {
    top: 18%;
    left: 64%;
}
.nav_content .case2 {
    z-index: 600;
    top: 24.5%;
    left: 68.5%;
}

.nav_content .support {
    top: 30%;
    left: 82%;
}
.nav_content .support2 {
    z-index: 600;
    top: 36.5%;
    left: 86.5%;
}

.nav_content .setting {
    top: 56%;
    left: 73%;
}
.nav_content .setting2 {
     z-index: 600;
    top: 62.5%;
    left: 77.4%;
}
.nav_content .hanabi_img {
    top: 33%;
    left: 34%;
}

/* 共通コンテンツ */
.content img{
  padding: 0 3rem 0rem 3rem;
  margin: 0 auto;
}
.content{
  padding-bottom: 4rem;
}





/* hanabi フェードイン表示 */
.fadein {
    opacity: 0;
    animation: fadein 2.4s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}


/* hanabi フェードアウト表示 */
.fadeout {
    opacity: 0;
    animation: fadeout 2.3s ease forwards;
}
@keyframes fadeout {
      60% {  opacity: 1;}
    100% {  opacity: 0;}
}

/*以下遅延の指定*/
.about {animation-delay: 1.1s;}
.operation_image {animation-delay: 1.5s;}
.function {animation-delay: 1.3s;}
.case {animation-delay: 1.5s;}
.support {animation-delay: 1.4s;}
.setting {animation-delay: 1.4s;}

/*以下遅延の指定*/
.about2 {animation-delay: -0.5s;}
.operation_image2 {animation-delay: -0.1s;}
.function2 {animation-delay: 0.1s;}
.case2 {animation-delay: 0.1s;}
.support2 {animation-delay: 0s;}
.setting2 {animation-delay: -0.3s;}

/* Swiper */
.slide img{
  margin: 0 auto;
}
.swiper-pagination{
    background-color: transparent;
}
.swiper-button-next, .swiper-button-black
{
  background-color: transparent;
}



/* Hanabiとは */
#about{
  padding-top: 4rem;
}
#about div h1 img{
  margin: 0 auto;
  padding: 0 1rem;
}

/* 機能紹介 */
.content_box{
  text-align: center;
  margin: 0;
  padding: 0;
}
.content_box img{
  padding: 0;
}
.content_box h2:hover{
 opacity: 0.5;
}
.content_item{
  display: inline-block;
  width: 18%;
}


/* popup modaal */
.modaal-content-container{
  position: relative;
}
.modaal-close {
  position: absolute;
  right: 0;
  top: 0;
}

/* 機能紹介 end */

/* お問い合わせ */
#contact{
  padding-bottom: 6.5rem;
}
#contact div{
  background-color: #f5f5f5;
}
#contact div a p{
    margin: 0 auto;
}
#contact p{
  width: 300px;
  padding: 1.5rem;
  background-color: #0066CC;
  color: #FFF;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 50px;
  text-align: center;
}
#contact p:hover{
opacity: 0.5;
}

/* ----------------- TOPへ ----------------- */
.page-top img{
    border-radius: 50%;
    width: 45px;
    box-shadow: 1px 2px 9px 4px rgba(0, 0, 0, .3);
  }
.page-top a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    z-index: 800;
}
.page-top a:hover {
 opacity: 0.6;
}
/* ----------------- TOPへ end ----------------- */
#footer{
  margin: 5rem;
}
.footer div{
  margin-left: 2rem;
  }
.footer img{
  display: inline-block;
  width: 60px;
}

.footer p{
  display: inline-block;
  font-size: 1rem;
  font-family: "メイリオ",'Meiryo',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", sans-serif;
  padding-left: 0.5rem;
  }


/* 画面900以下 */
@media screen and (max-width: 900px){

.nav_content .about2, .nav_content .operation_image2, .nav_content .function2, .nav_content .case2, .nav_content .support2, .nav_content .setting2{
      display:none;
    }
/* hanabi フェードイン表示 */
.fadein {
    opacity: 0;
    animation: fadein 2s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}

/*以下遅延の指定*/
.about {animation-delay: 0s;}
.operation_image {animation-delay: 0.6s;}
.function {animation-delay: 1.2s;}
.case {animation-delay: 0.3s;}
.support {animation-delay: 0.9s;}
.setting {animation-delay: 1.5s;}


}
/* sp  画面480以下 */
@media screen and (max-width: 480px){

/* header */
#header {
  height: 4.4rem;
  padding-top: 1rem;
}
.menu_box:before{
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
.contact p {
  font-size: 1.1rem;
  padding: 0.5rem;
  margin-right: 0.5rem;
}
/* nav */
#bg{
  padding: 0 1rem;
}
.hanabi {
  width: 18%;
}
.hanabi_img{
  width: 40%;
}
.nav_content .about {
    top:17%;
    left: 18%;
}
.nav_content .operation_image {
    top: 29%;
    left: 1%;
}
.nav_content .function {
    top: 51%;
    left: 13%;
}
.nav_content .case {
    top: 16%;
    left: 64%;
}
.nav_content .support {
    top: 28%;
    left: 80%;
}
.nav_content .setting {
    top: 54%;
    left: 73%;
}
.nav_content .hanabi_img {
    top: 29%;
    left: 34%;
}






/* 共通コンテンツ */
.content img{
  padding: 0 3rem 0rem 3rem;
  margin: 0 auto;
}
.content{
  padding-bottom: 4rem;
}



/* Swiper */
.slide img{
  margin: 0 auto;
}
.swiper-pagination{
    background-color: transparent;
}
.swiper-button-next, .swiper-button-black
{
  background-color: transparent;
}




/* 共通 */

section{
  padding: 2.7rem 0;
}

/* 共通 end */


/* ページ内リンク */
#about, #operation_image, #function, #case, #support, #setting {
  margin-top: -4.4rem;
  padding-top: 4.4rem;
}
/* ページ内リンク end */

#about{
padding-top: 2.7rem;
}

/* 機能紹介 */
.content_box h2{
  margin: 0rem;
}
.content_item{
  display: inline-block;
  width: 18%;
}
.content img{
  padding: 0;
}


/* お問い合わせ */
#contact p{
  width: 200px;
  font-size: 1.5rem;
}
/* footer */
/* #footer{
  margin: 2rem;
}
 */
}