*{
    border: red;
}

html {
    height: 100%;
    
}

body{
    font-family: 'Noto Serif JP', serif;
    min-height: 100%;
    max-width: 100%;
}

h1{
    font-family: 'Noto Serif JP', serif;
    font-size: 45px;
    text-shadow: 3px 2px 3px #808080;
}

.header{
    max-width: 100%;
    height: 40px;
    display: flex;
    position: sticky;
    top:0;
    background-color: white;
    z-index: 999;
}


.header .rogo{
    margin: 2.5px;
    width: auto;
    height: 35px;
    text-align: right;
    -webkit-transform: scale(1);
     transform: scale(1);
    
}

.header .rogo:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.nav1{
    width: 100%;
    height: 40px;
    text-align: center;
}

.nav2{
    width: 100%;
    height: 40px;
    text-align: right;
}

 .nav1 ul li {
    list-style: none;
    display: inline-block;
    margin-top: 0px;
    transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.nav2 ul li {
    list-style: none;
    display: inline-block;
    margin-top: 0px;
    transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.nav1 ul li:hover{
    -webkit-transform: scale(1.1);
    transform: rotate(5deg);
}

.image img{
    height: 40px;
    width: auto;
    margin: 3.5px;
    transition: .3s;
    -webkit-transform: scale(1);
     transform: scale(1);
}

.image img:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.nav1 li a{
    text-decoration: none;
    color: black;
}

.nav2 li a{
    text-decoration: none;
    color: black;
}

   .area2 img{
        width: 100%;
        height: auto;
   }


    .img1-3 img{
        margin-left: 40px;
        width: 480px;
        height: 100px;
    }

    .img1-4 img{
        margin-left: 40px;
        width: 480px;
        height:auto;
    }

    /* 画像のデコレーション */
    .box1 img :last-of-type{
        opacity: 0;
        transition: opacity .7s;
    }

    .box1:img{
        opacity: 1;
    }

     /*========= スクロールダウンのためのCSS ===============*/


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  top: 40px;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: black;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 60px;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 0.5px;
    height: 20px;
    background: black;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  top: 30px;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:0.5px;
  height: 50px;
  background:black;
}


/*========= レイアウトのためのCSS ===============*/

/* .box{
z-index: -999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#0a0202;
  text-shadow: 0 0 15px #0c0101;
  text-align: center;
} */


    .area1 h1{
        margin: 0 auto;
/* 文字のデコレーション */
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(238, 45, 123, 1) 50%);
        background-position: 0 0;
        background-size: 200% auto;
        transition: .3s;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .area1 .onayami{
        background-image: linear-gradient(90deg, rgba(49, 80, 195, 1), rgba(61, 134, 155, 1));
        border-radius: 10px;
        
    }
    .area1 .onayami h2{
        font-size: 20px;
        color:white;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .omakase1 h2{padding-top: 30px;}

    .omakase h2 {
        padding-bottom: 30px;}

    .area1 img{
        margin: 0 auto;
    }

    .area1 h1:hover{
        background-position: -100% 0;
        color: #fff;
    }

    .area2 span{
        color: #0076ba;
    }
 
    .area2 img{
        width: 80%;
        height: auto;
        margin: 0;
    }

    .area2{
        margin-top:10% ;
        margin-bottom:10% ;
    }

    
    .area2 p{
        font-size: 25px;
        /* width: fit-content; */
        text-align: center;
        /* margin: 0 auto; */
        /* margin: right 40px ;
        margin-left: 50%;
         */
    }

    .area3 {
        min-height: 100%;
        background-color: #f5f5f5;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        /* z-index: 2; */
        position: relative;
    }

    h1{
        text-align: center;
        
        margin: 0;
    }

    

    .ruby{
        display: block;
        margin: 0 auto;
    }
  
    .area3-1{
        text-align: center;
        width: 100%;
        width: auto;
    }

     .area3 .area3-1 img{
        margin: 0 auto; 
        margin: 40px; 
    } 

    .creation {
        width: 320px;
        height: auto;
    }

    .design {
        width: 300px;
        height: auto;
    }

    .area5{
        margin-top:10% ;
        margin-bottom:10% ;
    }

    .area5 p{
        margin-left: 200px;
    }

    .area5 .phon{
        display: none;
    }

    .area5 .price{
        display: block;
        width: 70%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 20px;
   }

   .area5 .price-rite{
    width: 60%;
    margin: 0 auto;
    margin-bottom: 40px;
   }

   .area6 img{
    display: block;
    margin:0 auto;
    width: 70%;
    height: auto;
}

/* .area6 picture{
    margin: auto;
} */

    .area6_1{
        width: 100%;
        height: 100%;
    }
    
    .area6_1 img{
        width: 100%;
        height: 100%;
    }

    .area6 h1{
       
        margin-bottom: 55px;
    }

    .area6{
        background-image: url(78.png);
    }

  .area7 {
    background-image: url(10-1.png)
  }

  .box {
    background: #fff;
    border-radius: 5px;
    /* padding: 20px; */
    text-align: center;
    position: absolute;
    z-index: 50;
  }

  .area9 .area9_1 {
    box-shadow: 7px 7px 10px #808080;
    box-shadow: -7px 7px 10px #808080;
  }

  .area9_1{
    width: 300px;
    height: auto;
    background-color: #f5f5f5;
    margin : 0 auto;
    padding-top: 4%;
    padding-bottom: 2%;
}


  /* .square {
    width: 80%;
    height: auto;
    margin: 0 auto;
    background: #fff;
  } */

  .table{
    margin: auto;
  }

  .table-half table{
   margin: auto;
  }

  @media screen and (max-width: 550px){
    .area5 .price-rite{width: 85%;}
  }
    

  @media screen and (max-width:899px){
  .table-hull{display: none;}
  .header{display: none;}
  .img-hull{display: none;}
   .area4{
    height: 100%;}
    .area5 .ruby{
        width: 90px;
    }
  .area3 .ruby{
    width: 180px;}
  .area4 .ruby{
    width: 155px;}
  .area6 .ruby{
    width: 300px;}
  .area7 .ruby{
    width: 180px;}
.area9 .ruby{
    width: 350px;}
.area4 h1{
    margin: 0;
}  

.area9_01{display: block;}  
    .area9_1{width: 200px;}
    .box{width: 80%;
        height: auto;}
    .box img{width: 70%;}
    .box h1{font-size: 25px;}
    .background{width: 80%;}
    .area6 img{width: 100%;}
    .area5 .phon{
        display: block;
    }
    
    
    .design{
        width: 260px;
        height: auto;
    }

    .area2 p{
        font-size: 16.5px;
    }

    .area5 .price{
        display: none;
    }

    .area5 h1{
        margin-bottom: 20px;
    }

    .area5 p{
        margin-left: 13%;
    }

    .area5 .price-rite{
        display: block;

    }
    
    /* .area3 .ruby{
    
        width: 160px;
    }
    
    .area4 .ruby{
        width: 115px;
    }

    .area5 p{
        margin-left: 5px;
    }
    
    .area5 .ruby{
        display: block;
        margin: 0 auto;
        width: 85px;
    }
    
    .area6 .ruby{
        width: 300px;
    }

    

    .area6 h1 */
    
    .ruby1{
        width: 120px;
    }

    .area6 h1{
        font-size:26px;
        margin: buttom 5px;
    } 

    .contact h1{
        font-size:200%
    }
    
    .area9 .ruby{
        width: 270px;
    }

    .area9_1{
        width:260px;
        height: auto;
        background-color: f5f5f5;
        margin: 0 auto;
    }

    .area9 h1{
        font-size: 160%;
        margin-bottom:35px ;
    }

    .area9_1 p{
        margin:30px;
        font-size: 13.5pt;
        line-height:2;
    }

    .area9_1 h1{
        font-size:18pt;
        text-align: center;
    }

}

    @media screen and (max-width:1200px){
         .ruby{width: 70%;}
          h1{font-size: 200%;}
    }

    @media screen and (min-width:900px){
    .table-half{display: none;}
    .img-half{display: none;}
    .area9 h1{font-size: 50px;
                margin-bottom: 8%;}
    .openbtn1{display: none;}
    .area3 .ruby{
    
        width: 180px;
    }
    
    .area4 .ruby{
        width: 155px;
    }
    
    .area5 .ruby{
        display: block;
        margin: 0 auto;
        width: 125px;
    }

    .area5 .price-rite{
        display: none;
    }
    
    .area6 .ruby{
        width: 500px;
    }
    
    .area7 .ruby{
        width: 180px;
    }
    
    .area9 .ruby{
        width: 450px;
        margin-top: 10%;
    }

    
    }



 


 .text{
    border: 2px solid darkgray;
    border-radius : 5%;          /* 角丸       */
 }

 .textarea{
    border: 2px solid darkgray;
    border-radius : 5%;          /* 角丸       */
 }

 .tuyomi img{
    width: 100%;
    height: auto;
    margin: 0;
}

.submit{
    background-color: blue;
    color: #fff;
    border-radius : 5%;          /* 角丸       */
 }

 .zisseki1 img{
    width: 100%;
    height: auto;
    margin: 0;
 }

 /* .area9 {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
} */

.area9{
    height: 100%;
    background-image: url(7-1-3.png);
    background-size: 100% 100%;
    /* margin-bottom: 3.5%; */
}

/* .area9 h1{
    font-size: 40px;
    margin-bottom: 10px;
} */

.area9-99{
    height: 10px;
}

.area9_01{
    width: 100%;
    height: auto;
    margin-bottom: 10%;
}

.area9_1{
    margin-bottom: 10%;
}

  @media screen and (min-width:1200px){
    .area9_01{display: block;
              display: flex;
            }  
  }

  @media screen and (min-width:401px){
    .box .heaf2{display: none;}
    .box .heaf3{display: none;}
  }

  @media screen and (max-width:400px){

    /*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  top: -20px;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: black;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: -0.3px;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: black;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  top: -30px;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:1px;
  height: 50px;
  background:black;
}

    .omakase1 h2{padding-top: 15px;}

    .omakase h2 {
        padding-bottom: 15px;}
    .area1 .onayami h2{
        font-size: 10px;
        color:white;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .area9_01{display: block;}  
    .area9_1{width: 200px;}
    .box{width: 80%;
        height: auto;}
    .box .long2{display: none;}
    .box .long3{display:none;}
    

    .box .img1-3 img{ height: 100%;
                      width: 100%;}
    .box .img1-4 img{width: 100%;}
    .box h1{font-size: 25px;}
    .background{width: 80%;}
    .area6 img{width: 100%;}
    .area5 .phon{
        display: block;
    }
    
    
    .design{
        width: 260px;
        height: auto;
    }

    .area2 p{
        font-size: 16.5px;
    }
    
    .area3 .ruby{
    
        width: 160px;
    }
    
    .area4 .ruby{
        width: 115px;
    }

    /* .area5 p{
        margin-left: 5px;
    } */
    
    .area5 .ruby{
        display: block;
        margin: 0 auto;
        width: 85px;
    }
    
    .area6 .ruby{
        width: 300px;
    }

    .area6 h1{
        font-size:160%;
        margin: buttom 5px;
    }

    .area6 h1
    
    .ruby1{
        width: 120px;
    }

    .contact h1{
        font-size:200%
    }
    
    .area9 .ruby{
        width: 270px;
        margin-top: 10%;
    }

    .area9_1{
        width:260px;
        height: auto;
        background-color: f5f5f5;
        margin: 0 auto;
        padding-top: 4%;
        margin-bottom: 20%;
    }

    /* .area9 h1{
        font-size: 160%;
        margin-bottom:35px ;
    } */

    .area9_1 p{
        margin:30px;
        font-size: 13.5pt;
        line-height:2;
    }

    .area9_1 h1{
        font-size:18pt;
        text-align: center;
    }

  }




.area9_1 h1{
    font-size: 18pt;
    text-align: center;
}

.area9_1 p{
    margin: 48px;
    margin-right: 45px;
    margin-left: 45px;
    font-size: 14pt;
    line-height: 1.5;  /* 行間指定 */
   

}

.area9_1 img{
    display: block;
    width: 70%;
    height: auto;
    margin: auto;
    margin : 0 auto 

}

.area9_1 img:hover{
    transform: rotate(360deg);
    transition: all 1s;
}

.table-half textarea{
    resize:vertical;
    width: 80%;
}

.slider img{
    width: 50%;
    height: auto;
    margin : 0 auto
}

.area4{
    height: 100%;
}

/* .area3 .ruby{
    
    width: 180px;
}

.area4 .ruby{
    width: 155px;
}

.area5 .ruby{
    display: block;
    margin: 0 auto;
    width: 125px;
}

.area6 .ruby{
    width: 500px;
}

.area7 .ruby{
    width: 180px;
}

.area9 .ruby{
    width: 450px;
} */

.area4 h1{
    margin: 0;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.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;
}

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

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

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:10px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:15px;/*ドットボタンのサイズ*/
    height:15px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
    margin: 0 auto;
}

.slick-dots .slick-active button{
    background:#004d80;/*ドットボタンの現在地表示の色*/
}


.background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
  }


  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .box {
    background: rgba(0, 118, 186, 0.25);
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    position: absolute;
    /* z-index: 1; */
  }
  a {
    color: #0bd;
  }

  .contact h1{
    margin-bottom: 20px;
  }

/* .area1-5{
    width: 100%;
    height: 100%;
    background-color: #5bc8ac;
} */
 

#header1{
  width:100%;
  height: 700px;
  position: relative;
 
} 

#header1:before{
  content: '';
  position: fixed;
  top:0;
  left:0;
  z-index:-999;
  width:100%;
  height: 100vh;
  background-size:cover;
}

#container2{
    position: relative;
    /* z-index:999; */
    
    
   
  }

@media screen and (max-width:768px){

    #header1,
    #header1:before{
  height: 90vh;    
    }
    
    
}




/* ハンバーガーメニューのためのCSS */
#-nav{
    position:fixed;
   z-index: 999;
   /*ナビのスタート位置と形状*/
 top:0;
   right: -100%;
 width:100%;
   height: 100vh;/*ナビの高さ*/
 background:white;
   /*動き*/
 transition: all 0.6s;
 /* border-radius: 20px; */
 box-shadow: 7px 7px 10px #808080;
}

#-nav.panelactive{
   right:0;
}

#-nav.panelactive #-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
   position: fixed;
   z-index: 999; 
   width: 100%;
   height: 100%;/*表示する高さ*/
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}

hr{
    border-color: #5a68be;
}
.menu{
    position: relative;
    left: 40%;
    color: #5a68be;

}

.nav-1 ul{
    padding: 0%;
}


@media screen and (min-width:550px){

    .close{
        border-left: 3px solid #5a68be;
        height: 30px;
        text-shadow: 3px 2px 3px #808080;
    }

    .icon{
        width: 100px;
        position:absolute;
        top: 500px;
        left: 45%;
    } 

    .sns img{
        width: 50px;
    }

    .sns{
        position: absolute;
        top: 350px;
        left: 35.8%;
    }

    .icon1{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top:500px;
        /* margin: auto; */
    }


     .menu{
        position: relative;
        left: 47%;
        color: #5a68be;
    
    } 

    .Otoiawase{
        position: relative;
        top:80px;
        left: 32%;
    
    }

    .Otoiawase img{
        width: 230px;
        height: auto;
        /* box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); */
    }

    .line{
        position: absolute;
        top: 280px;
        left: 35.5%;
    }

.close1{
    position: relative;
    top:20px;
    left: 5%;
}

.close2{
    position: relative;
    top:20px;
    left: 15%;
}

.close3{
    position: relative;
    top:40px;
    left: 5%;
}

.close4{
    position: relative;
    top:60px;
    left: 15%;
}

.close5{
    position: relative;
    top:60px;
    left: 5%;
}

#-nav li{
    float:left ;
}


#-nav ul{
    list-style: none;
    text-align: center;
}

}

.switch_image {
    position: relative;
}

.switch_image img {
    transition: opacity 0.5s;
}
.switch_image:hover img:first-of-type {
    opacity: 0;
}
.switch_image img:last-of-type {
    margin: 0 auto;
    position: absolute;
    top: 0px;
    left: 25%;
    opacity: 0;
}
.switch_image:hover img:last-of-type {
    opacity: 1;
}

@media screen and (max-width:549px){

    .switch_image img:last-of-type {
        margin: 0 auto;
        position: absolute;
        top: 0px;
        left: 5%;
        opacity: 0;
    }

    .slider img{
        width: 90%;
        height: auto;
        margin : 0 auto
    }

    .icon{
        width: 100px;
        position:absolute;
        top: 680px;
        left: 35%;
    } 

    .line{
        position: absolute;
        top: 430px;
        left: 30%;
    }

    .Otoiawase{
        position: relative;
        top:200px;
        left: 26.8%;
    
    }

    .Otoiawase img{
        width: 165px;
        height: auto;
        /* box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); */
    }

    .sns img{
        width: 65px;
    }

    .sns{
        position: absolute;
        top: 520px;
        left: 25%;
    }

    .icon1{
        display: inline-block;
        position: relative;
        top:180px;
        left:10%
        /* text-align: center; */
    }


     .menu{
        position: relative;
        /* left: 34%; */
        color: #5a68be;
    
    } 

    .menu2{
        position: relative;
        top:70px;
        left: 35%;
        color: #5a68be;
    
    }

    .close{
        border-left: 3px solid #5a68be;
    }

    .close-br{
        display: none;
    }

    .close1{
        position: relative;
        top:25px;
        left: 10%;
        
    }
    
    .close2{
        position: relative;
        top:55px;
        left: 10%;
        
    }
    
    .close3{
        position: relative;
        top:55px;
        left: 10%;
        
    }
    
    .close4{
        position: relative;
        top:115px;
        left: 10%;
        
    }
    
    .close5{
        position: relative;
        top:85px;
        left: 10%;
    }

    #-nav ul{
        list-style: none;
    }
}

footer .sns1{
    width: 50px;
}

.slider li{
    list-style: none;
}

#-nav li a{
    color: #5a68be;
 text-decoration: none;
 padding:10px;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 font-weight: bold;
 font-size: 18.5px;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
 position:fixed;
   z-index: 9999;/*ボタンを最前面に*/
 top:10px;
 right: 15px;
 cursor: pointer;
   width: 80px;
   height:auto;
}

/*×に変化*/  
.openbtn1 span{
   display: inline-block;
   transition: all .4s;
   position: absolute;
   left: 3px;
   height: 3px;
   border-radius: 2px;
 background-color: #5a68be;
   width: 100%;
 }

.openbtn1 span:nth-of-type(1) {
 top:15px; 
}

.openbtn1 span:nth-of-type(2) {
 top:23px;
}

.openbtn1 span:nth-of-type(3) {
 top:31px;
}

.openbtn1.active span:nth-of-type(1) {
   top: 18px;
   left: 18px;
   transform: translateY(6px) rotate(-45deg);
   width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
 opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
   top: 30px;
   left: 18px;
   transform: translateY(-6px) rotate(45deg);
   width: 30%;
}


/* area9のためのCSS */

.Form {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
    padding-bottom: 20px;
    background-color: white;

  }
  @media screen and (max-width: 480px) {
    .Form {
      margin-top: 40px;
      width: 80%;
      /* margin-left: 60px; */
      margin-right: 30px;
    }
  }
  .Form-Item {
    border-top: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 80%;
    display: flex;
    align-items: center;
    padding-left: 60px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item {
      padding-left: 34px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  .Form-Item:nth-child(5) {
    border-bottom: 1px solid #ddd;
  }
  .Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .Form-Item-Label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
      margin-top: 0;
    }
  }
  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #5bc8ac;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .Form-Item-Input {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #5bc8ac;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }
  }

  @media screen and (max-width: 675px) {
    .area1 .onayami h2{
        font-size: 12px;

    }
  }



  @media screen and (orientation: landscape) and (max-width: 900px){
.area2 p{
    margin-top: 190px;
}

.area1 .onayami{
    background-color: #004d80;
    border-radius: 10px;
    margin-bottom: 20px;
    width: 70%;
    margin: 0 auto;
}

.area1 .onayami h2{
    font-size: 12px;
    color:white;
    margin-top: 20px;
    margin-bottom: 20px;
}

.Otoiawase{
    position: relative;
    top:80px;
    left: 3.8%;

}

.Otoiawase img{
    width: 163.3px;
    height: auto;
}

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  top: 90px;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: black;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 110px;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 0.5px;
    height: 20px;
    background: black;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  top: 80px;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:0.5px;
  height: 50px;
  background:black;
}

.sns{
    position: absolute;
    top: 200px;
    left: 34%;
}

.sns img{
    width: 58px;
}

.icon{
    width: 129px;
    position:absolute;
    top: 278px;
    left: 37%;
} 

.line{
    position: absolute;
    top: 280px;
    left: 5%;
}

}