#mv-wrap{
    display: none;
}

/* common */
html{
    font-size: 62.5%;
    overflow-x: hidden;
    /*
    1rem = 10px;
    1.6rem =16px;
    */
}
img{
    width: 100%;
}
body{
    font-family: source-han-sans-japanese, sans-serif;
    /* border:4px solid green; */
    overflow-x: hidden;
}
/* common終了 */

/* slider */
.slick-slide {
    position: relative;
}
.slide-arrow{
    width: 25px;
    position: absolute;
    top:50%;
    z-index: 999;
}
.prev-arrow{
    left:-20px;
    transform: rotateY( 180deg );
}
.next-arrow{
    right:-20px;
}
.i-con{
    vertical-align: middle;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
}
/* slider終了 */

/* header */
header{
    width: 100%;
    background-color: #173892;
    padding:30px 10px;  
}

#header-wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
    font-weight: 200;
}
h1{
    color: #ffffff;
    font-size: 18px;
    font-family: source-han-sans-japanese, sans-serif;
}
h2{
    font-family: source-han-sans-japanese, sans-serif;
}
nav{
    z-index: 999;
}
#header-wrap ul li{
    color: #ffffff;
    padding-top: 10px;
    font-weight: 500;
}
/* header 終了*/

/* 調整 */
#sp-menu{
display: none;
}
html.noscroll{
  overflow: hidden;
}
/* 調整終了*/

/* ハンバーガーボタン */
.nav-item{
    /* メニューの右側に余白 */
    margin-right: 55px;
}
/* 1 */
.burger-btn{
    display: block;      
  width: 39px;      
  height: 39px;      
  position: relative;      
  z-index: 666;
  border:none;   
  position: absolute;
  right: 10px;
  top:22px;
}

.bar{      
    width: 20px;      
    height: 1.2px;        
    display: block;      
    position: absolute;      
    left: 50%;      
    transform: translateX(-50%);      
    background-color: #fff;    
  }    
.bar_top{   
    top: 10px;
  }
.bar_mid{    
    top: 50%;
    transform: translate(-50%,-50%);
  }
.bar_bottom{
    bottom: 10px;
  }
/* 1 終了*/
/* 2 */
.burger-btn.close .bar_top{      
    transform: translate(-50%,10px) rotate(45deg);      
    transition: transform .3s;  
    background-color: #173892;  
  }    
.burger-btn.close .bar_mid{      
    opacity: 0;       
    transition: opacity .3s;
    background-color: #173892;      
  }    
.burger-btn.close .bar_bottom{      
  transform: translate(-50%,-8px) rotate(-45deg);      
  transition: transform .3s;  
  background-color: #173892;    
  }
  /* 2 終了*/
  /* 3 */
.nav-wrapper{      
    position: absolute;
    top:0px;
    right: -100%;
    width: 100%;
    height: 100%;
    display: none;
  }     
.nav-wrapper.active{
    position: absolute;
    top:0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 555;   
    /* display: block;↓追加*/
    display: block;
    background-color:#ffffff; 
    animation: anime 1.5s 0s forwards;
  }
    /* メニューアニメーション */
  @keyframes anime {
    0% {
         right:-100%;
    }
    /* 幅を大きくして文字をスライドさせている */
    50%{
    background-color:#8b0c0c;
    width: 100%;
    /* height: 70%; */
    }
    100% {
    width: 100%;
    }
    }
.header-nav.nav-list{        
    display: block;        
    position: absolute;        
    top: 50%;        
    left: 50%;        
    transform: translate(-50%,-50%);        
    text-align: center;      
  }      
.header-nav.nav-item{        
    margin-right: 0;        
    margin-bottom: 40px;      
  }
.header-nav{
      padding-top: 50px;
  }
.nav-list li{
    padding: 20px;
  }
li.click{
    text-align: center;
}
.click a{
      font-size: 28px;
  }
  /* ↓.nav-wrapper.active　どこのクラスに対してのactiveか記入すること */
  .nav-wrapper.active li:nth-of-type(even) a{
    color: #173892;
    animation: blue-changeColor 3s 0s forwards;
    }
    @keyframes blue-changeColor{
        0% {
            color: #fff;
       }
       /* 幅を大きくして文字をスライドさせている */
    
       100% {
        color: #173892;
       }
    }
.nav-wrapper.active li:nth-of-type(even) :hover{
        color: #122866;
    }
.nav-wrapper.active li:nth-of-type(odd) a{
    color: #b51e1e;
    animation: red-changeColor 3s 0s forwards;
 
    }
    @keyframes red-changeColor{
        0% {
            color: #fff;
       }
       /* 幅を大きくして文字をスライドさせている */

       100% {
        color: #b51e1e;
       }
    }
.nav-wrapper.activ:nth-of-type(odd) :hover{
        color: #7c1212;
    }
/* 3終了 */
/* メニューアニメーション終了*/
/* ハンバーガーボタン終了 */

/* main */
.line-top-{
    border-bottom: 2px dashed #ffffff;
    max-width: 600px;
    position: relative;
    top: -12px;
}
.line-under-{
    border-bottom: 2px dashed #ffffff;
    max-width: 600px;
    position: relative;
    top: 12px;
}
#contents{
    display: flex;
    max-width:559px;
}
.hana-top{
    height: 30px;
    background-image: url("../img/hana-iphone-sid - top.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: contain;
    z-index:1;
}
.hana-under{
    height: 30px;
    background-image: url("../img/hana-iphone-sid - under.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: contain;
    z-index:1000;
}
main{
    max-width:559px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#mv{
    width: 100%;
    padding:85px 30px;
}
#mv-left{
    display: none;
}
#mv-right{
    display: none;
}
#mv-up{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    width: 80%;
    
    }
#mv-under{
    position: relative;
    left: 50%;
    width: 80%;
    transform:  translateX(-50%);

}

#mv-wrap-sp{
    position: relative;
    width: 100%;

}
.mv-height{
 position: relative;
 padding: 70px 0;

}

#top-about-wrap{
    display: flex;
    flex-direction: column;
}
.waku{
    background-color:#173892;
}
#top-about-left{
    background-color:#173892;
    padding:20px 0px;
    z-index:1;
}
#top-about-A{
    display: flex;
}
#top-white-star{
 display: none;
}
#top-blue-star{
display: none;
}
#top-about-img{
    width: 70px;
    margin-left: auto;
    margin-right:auto;
}
#line-top-id{
    border-bottom: 2px dashed#ffffff;
    width: 100%;
    position: relative;
    top: -12px;
    z-index:1000;
}
#line-under-id{
    border-bottom: 2px dashed#ffffff;
    width: 100%;
    position: relative;
    top: 12px;
    z-index:1000;
}
#top-about-left h2{
    color: #ffffff;
    text-align:center;
    font-size: 24px;
    padding: 20px 0px 30px 0px;
    font-family: source-han-sans-japanese, sans-serif;
}

#top-about-left p{
    color: #ffffff;
    line-height:2;
    text-align: left;
    font-family: source-han-sans-japanese, sans-serif;
    font-size: 13px;
}
#i-phone-about{
    padding:40px
}
#i-phone-about p{
    color: #173892;
    line-height:2;
    text-align: left;
    font-family: source-han-sans-japanese, sans-serif;
    font-size: 13px;
}
.i-phone-no{
    display: none;
}
#about-e{
display: none;
}
#me-ue{
    padding: 40px 30px 0px 30px;
    z-index: 1;
}
#me-shita{
  display: none;
}
#dot-shita-left-2{
    display: none;
}
#---1{
display: none;
}
/* main終了*/
/* -------- illustration--------------*/
.picture-word{
    display: none;
}
#top-illustration-wrap{
    background-color:#173892;
    padding:20px 0;
    z-index:1;
}
.h2-p{
        padding-left:30px;
        padding-right: 30px;
    }
#sen{
    background-color:#173892;
    border-width: 2px;
    border-style: dashed none dashed none;
    border-color: #ffffff;
    height: 400px;
    width:100%;
    z-index: 1;
    position: relative;
    top: 25px;
    left: 40px;
}

#top-illustration-img{
    width: 70px;
    margin-left: auto;
    margin-right: auto;

}
#top-illustration-wrap h2{
    color: #ffffff;
    text-align:center;
    font-size: 24px;
    padding: 20px 0px 30px 0px;
    font-family: source-han-sans-japanese, sans-serif;
}

#top-illustration-wrap p{
     color: #ffffff;
    line-height:2;
    text-align: left;
    font-family: source-han-sans-japanese, sans-serif;
    font-size: 13px;
}
#illustration-stars{
 display: none;
}
#illustration-bi-zu{
  display: none;
}
#illustration-turip{
   display: none;
}
#illusutration-clock{
display: none;
}
#illustration-kazari{
    display: none;
}
#illustration-paper{
    display: none;
}
#nimai{
    display: none;
}
#illustration-cup{
    display: none;
}
#picture{
    display: none;
}
.changeBtn-class{
    font-size: 16px;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
    font-weight: 200;
    text-align: center;
    width: 50px;
    height: 50px;
    color: #173892;
    border-radius: 3px;
    margin: 0px 0px 20px 0px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 2px #173892;
    padding-top:16px;
   }
   #changeBtn-id:hover{
       color: #122763;
   }
 .img-illust{
     padding: 30px 20px;
 }
.slide2{
    width: 100%;
}
/* illust-slick */
.slider-1{
    width: 70%;
    height: 70%;
    margin: 40px auto;
    position: relative;
    top: -10px;
    }
/* illust-slick終了*/    
/* -------- illustration終了--------------*/


/* --------quilt---------- */
.img-quilt{
    padding: 30px 70px;
}
#screen-quilt{
    display: none;
}
#top-quilt-wrap{
    background-color: #173892;
    padding:20px 0;
}
#top-quilt-img{
    width: 70px;
    margin-left: auto;
    margin-right: auto;
}
#top-quilt-wrap h2{
    color: #ffffff;
    text-align:center;
    font-size: 24px;
    padding: 20px 0px 30px 0px;
    font-family: source-han-sans-japanese, sans-serif;
}
#top-quilt-wrap p{
    color: #ffffff;
    line-height:2;
    text-align: left;
    font-family: source-han-sans-japanese, sans-serif;
    font-size: 13px;
}
/* --------quilt終了---------- */
/* コンタクト */
#matome{
    background-color: #173892;
    height: 260px;
    position:relative;
    margin: 0 auto;
    padding: 20px 0px;

}
#top-contact-wrap{
    background-color: #173892;
    position: relative;
    display: flex;
}

.h2-pp h2{
    color: #ffffff;
    margin: 0 auto;
    padding: 25px;
    font-size: 24px;
    font-family: yusei-magic, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
#top-contact-left h2{
    font-family: yusei-magic, sans-serif;
    font-weight: 400;
    font-style: normal;
}

#quilt-p{
    color: #fff;
    line-height: 2;
    text-align: left;
    font-family: source-han-sans-japanese, sans-serif;
    font-size: 13px;
    padding: 0 30px;
}

#top-contact-left h2{
    font-family: yusei-magic, sans-serif;
}
#top-Twitter-img{
    width: 70px;
    position: absolute;
    right: 114px;
 
}
#top-Instagram-img{
    width: 70px;
    position: relative;
    left: 114px;
 
}
#top-contact-img{
display: none;
}
#top-contact-right{
    width: 100%;
    padding:0 30px;
}
.mark{
    width: 24px;
    padding: 90px 0px 80px 0px;
}
#h2-set-mark{
    display: flex;
   }
#mark-left{
    position: relative;
    left: 44px;
    top: 5px;
}
#mark-right{
    position: relative;
    right: 44px;
    top: 5px;
}
#top-contact-right h2{
    color: #b51e1e;
    text-align: center;
    padding: 90px 0px 80px 0px;
    font-size: 40px;
    font-family: yusei-magic, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-left: auto;
    margin-right: auto;
}
#form-input li{
    margin-bottom: 20px;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
    font-weight: 200;
}
#form-input li:nth-of-type(5){
    text-align: center;
    margin: 60px 0px;
}
label {
    font-size:16px;
    margin-bottom: 10px;
    display: block;
    color: #b51e1e;
}
input[type="text"],
textarea {
    border: 1px #b51e1e solid;
    border-radius: 2px;
    padding: 10px;
    font-size: 1rem;
    width:100%;
}
textarea{
    background: #ffffff;
    border: 1px rgba(214, 212, 212, 0.) solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    height: 10rem;
    width:100%;
}
#button {
    font-size: 1.2rem;
    background:#b51e1e;
    color: #ffffff;
    border-radius: 5px;
    padding: 30px 90px;
    box-shadow: 0 0 0 5px #a81b1b;
    border: 2px dashed #ffffff;
    text-align: center;
}
#button:hover {
    background: #7c1313;
}
.announcement{
    color: #7c1313;
    font-size:12px;
    text-align: center;
    position: relative;
    top: -40px;
}
#h2-In{
    color:#b51e1e;
    margin-left: auto;
    margin-right: auto;
    padding: 70px 0px 20px 0px;
    font-size: 40px;
    font-family: yusei-magic, sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    left: -30px;
}
#h2-tw{
    color:#173892;
    margin-left: auto;
    margin-right: auto;
    padding: 70px 0px 20px 0px;
    font-size: 40px;
    font-family: yusei-magic, sans-serif;
    font-weight: 400;
    font-style: normal;
}
#In-wrap-sp{
    width: 80%;
    margin: 0 auto;
}
#tw-wrap-sp{
    width: 80%;
    margin: 0 auto;
}
#top-Instagram-wrap{
    width: 130px;
    margin-left: auto;
    margin-right: auto;
}
#top-Twitter-wrap{
    width: 130px;
    margin-left: auto;
    margin-right: auto;
   }
#top-contact-left{
color: #b51e1e;
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-family: yusei-magic, sans-serif;
font-weight: 400;
font-style: normal;
}
#In-wrap{
    width: 50%;
    padding: 0px 50px;
    margin-left: auto;
    margin-right: auto;
}
#tw-wrap{
    width: 50%;
    padding: 0px 50px;
    margin-left: auto;
    margin-right: auto;
}
#line-top-{
    border-bottom: 2px dashed#ffffff;
    width: 100%;
    position: relative;
    top: -13px;
    z-index:1000;
}
#line-under-{
    border-top: 2px dashed #ffffff;
    width: 100%;
    position: relative;
    top:21px;
}
#modoru {
    font-size: 20px;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
    font-weight: 200;
    text-align: center;
    width: 50px;
    height: 50px;
    color: #173892;
    border-radius: 3px;
    margin: 100px 0px 60px 0px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 2px #173892;
   }
#modoru:hover{
       color: #122763;
   }
#modoru a{
       text-align: center;
       position: relative;
       top: 12px;
   }
#pen-red{
    width: 120%;
    position: relative;
    top:-36px;
    left:30px;
    }
#pen-blue{
    width: 100%;
    position: relative;
    top:-42px;
    left:30px;
}
/* コンタクト終了 */
/* 画像fadein(画面にスクロールしたら表示) */
.fadein {
    opacity : 0;
    transform : translate(0, 20px);
    transition : all 1.2s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
/* フェードイン */
.fade-in01{
    opacity:0;
    animation-name: sample01;
    animation-delay: 0.3s;
    animation-duration: 4.2s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
  }
  @keyframes sample01 {


   100% {
    opacity: 1;

  }
  }
  /* mv2枚目フェードインhtml */
  .MV-in{
    opacity:0;
    animation-name: sample03;
    animation-delay: 3.8s;
    animation-duration: 4.2s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
  }
  @keyframes sample03{


   100% {
    opacity: 1;

  }
  }
/* フェードアウト（MV) */
.fade-out01{
    opacity:0;
    animation-name: sample02;
    animation-delay:3.7s;
    animation-duration: 1.5s;
    animation-iteration-count:1;
    animation-fill-mode: backwards;
  }
  @keyframes sample02 {
        0% {
          opacity: 1;
        }

         100% {
          opacity: 0;

        }
        }
/* 画像fadein(画面にスクロールしたら表示)終了 */
/* footer */
footer{
    width: 100%;
    height:100px;
    background-color: #173892;
}
#copyright-mark p{
    padding-top:40px ;
    color:#ffffff;
    text-align: center;
    font-family: source-han-sans-japanese, sans-serif;
    font-style: normal;
    font-weight: 200;
}
/* sns表示・非表示 */
#In-wrap{
 display: none;
}
#tw-wrap{
    display: none;
}
#In-wrap-tb{
    display: none;
}
#main-wrap{
    width: 100%;
}

#main-left{
    display: none;
}

#main-right{
    display: none;
}