@charset "utf-8";
/* CSS Document */

p,h1,h2,h3,h4{
    font-family: "Kiwi Maru", serif;
    color: #EEC678;
    font-size: 16px;
}
a{
    text-decoration:none;
}
img{
    max-width: 100%;
    height: auto;
}
.top{
    overflow: hidden;
}
.top h2{
    font-size: 36px;
    text-align: center;
}
.top h4{
    font-size: 20px;
}
.top .mv{
    background-color: #187FC4;
    width: 100%;
    /* height: 100; */
    padding-right:5%;
    padding-bottom: 5%;
    padding-left: 5%;
    margin-top: 6.25rem;
}
.top .check{
    padding: 5%;
	background-size: 20px 20px;
	background-position: 50% 50%;
	background-image:
	repeating-linear-gradient(
	  90deg,
	  #187FC4 ,
	  #187FC4 1px,
	  transparent 1px,
	  transparent 32px
	),
	repeating-linear-gradient(
	  0deg,
	  #187FC4 ,
	  #187FC4 1px,
	  #fff 1px,
	  #fff 32px
	);
    padding:5%;
}
.top .check img{
    width: 100%;
}
/* セクション１ */
.top main .section1{
    padding: 10%;
    overflow: hidden;
}
.top main .section1 .box1{
   display: flex;
   justify-content: center;
   margin-bottom: 5%;
}
.top main .section1 .box2{
   display: flex;
   flex-direction: column;
   align-items: center;
}
.top main .section1 .box2 img{
    margin-bottom: 20px;
}
.top main .section1 .box2 h2{
    margin-bottom: 10%;
}
.top .section1 .box3 .box3-1{
    margin-left: 45%;
}
.top .section1 .box3 .box3-1 img{
    position: absolute;
}
.top .section1 .box3 .box3-1 h4{
    writing-mode: vertical-rl;
}
.top .section1 .box3 .box3-1 .top-h4{
    display: flex;
    position: relative;
    left:225px;
    top:50px;
}
.top .section1 .box3 .box3-1 .top-h4 h4{
    font-size: 24px;
    color: #187FC4;
    letter-spacing:1rem;
}
.top .section1 .box3 .box3-1 .top-h4 .top-h4-indent{
    text-indent: 1.5em;
    margin-right: 10px;
}

.top .section1 .box3 .box3-1 img{
    position: absolute;
}
.top .section1 .box3 .box3-2{
    left:17%;
    top:-100px;
    position: relative;

}
.top .section1 .box3 .box3-2 h4{
    position: absolute;
    text-align: center;
    width: 380px;
    top: 170px;
    left: 70px;
}
/* --------------------------フェードイン--------------------- */
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* ---------------------------------------------------------------------- */
/* .bg{
    background-image: url(../img/top-check.png);
    background-repeat: repeat-x;
    height:50vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin-bottom: 10%;
} */
.bg2{
    display: block;
    height: 500px;
    position: relative;
    clip-path: inset(0);
    margin-bottom: 10%;
}

.bg2 img{
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/* セクション２ */


.top main .section2{
    background-color: #187FC4;
    margin-bottom: 10%;
}
.top main .section2 .box1{
    background-color: #187FC4;
    width: 100%;
    padding: 5%;
}
.top main .section2 .box1 .check img{
    width: 604px;
    height: 530px;
}
.top main .section2 .box1 .box1-1{
    display: flex;
    margin-bottom: 5%;
}
.top main .section2 .box1 .box1-1 .box1-1-1{
    background-color: #fff;
    border-radius: 50%;
    width: 530px;
    height: 530px;
    margin-left: 10%;
    aspect-ratio: 1 / 1;
}
.top main .section2 .box1 .box1-2 .box1-1-1{
    background-color: #fff;
    border-radius: 50%;
    width: 530px;
    height: 530px;
    margin-right: 10%;
    aspect-ratio: 1 / 1;
}
.top main .section2 .box1 .box1-1 .box1-1-1 .indent{
    display: flex;
    margin-left: 60%;
    margin-top: 5%;
}
.top main .section2 .box1 .box1-1 .box1-1-1 p{
    width: 270px;
    font-size: 20px;
    margin-top: -250px;
    margin-left: 7%;
}
.top main .section2 .box1 .box1-1 .box1-1-1 .indent h4{
    text-indent: 1.5em;
    margin-right: 10px;
    letter-spacing:1rem;
    writing-mode: vertical-rl;
    font-size: 36px;
}
.top main .section2 .box1 .box1-2{
    display: flex;
    flex-direction: row-reverse;
}
.top main .section2 .box1 .box1-2 .box1-1-1 .indent{
    display: flex;
    margin-left: 18%;
    margin-top: 7%;
}
.top main .section2 .box1 .box1-2 .box1-1-1 p{
    width: 270px;
    font-size: 20px;
    margin-top: -200px;
    margin-left: 43%;
}
.top main .section2 .box1 .box1-2 .box1-1-1 .indent h4{
    text-indent: 1.5em;
    margin-right: 10px;
    letter-spacing:1rem;
    writing-mode: vertical-rl;
    font-size: 36px;
}
/* .top main .bgimg{
    background-image:url(../img/top-bgimg.png) ;
    background-repeat: repeat-x;
    height:50vh;
    background-attachment: fixed;
    background-size: cover;
    background-position:bottom;
    margin-bottom: 10%;
} */
.top main .bgimg2{
    display: block;
    height: 500px;
    position: relative;
    clip-path: inset(0);
    margin-bottom: 10%;
}

.top main .bgimg2 img{
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* セクション３ */

.top main .section3 .box1{
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}
.top main .section3 .box2{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .top main .section3 .box2 img{
     margin-bottom: 20px;
 }
 .top main .section3 .box2 h2{
     margin-bottom: 10%;
 }
 .top main .section3 .box3{
    background-color: #187FC4;
    padding: 5%;
    z-index: 1;
 }
 .top main .section3 .box3 .box3-1 img{
    width: 580px;
    position: relative;
 }
 .top main .section3 .box3 .box3-1{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
    
 }
 .top main .section3 .box3 .btn{
    width: 200px;
    height: 80px;
    border: 2px solid #187FC4;
    border-radius: 50px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding-top: 28px;
 }
 .top main .section3 .box3 .btn:hover{
    background-color: #187FC4;
    border: 2px solid #187FC4;
    transition: 0.5s;
    color: #fff;
 }
 .top main .section3 .box3 .btn p:hover{
    color: #fff;
 }
 .top main .section3 .box3 .btn p{
    color: #187FC4;
 }
 .top main .section3 .box3 h3{
    font-size: 36px;
    color: #fff;
 }
/* .top main .section3 .box3 .lineup-1{
    position: absolute;
    z-index: 2;
    width: 235px;
    height: 80px;
    border: 4px solid #fff;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    border-radius: 83px;
    left: 28%;
    top: 300px;
}
.top main .section3 .box3 .lineup-2{
    position: absolute;
    z-index: 2;
    left: 1080px;
    top: 300px;
}
.top main .section3 .box3 .lineup-3{
    position: absolute;
    z-index: 2;
    left: 28%;
    top: 940px;
}
.top main .section3 .box3 .lineup-4{
    position: absolute;
    z-index: 2;
    left: 1080px;
    top: 940px;
} */

 /* セクション４ */

 .top main .section4 .box1{
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
    margin-top: 10%;
}
.top main .section4 .box2{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .top main .section4 .box2 img{
     margin-bottom: 20px;
 }
 .top main .section4 .box2 h2{
     margin-bottom: 10%;
 }
 .top main .section4 .box3{
    background-color: #187FC4;
    padding: 5%;
 }
 .top main .section4 .box3 .box3-1{
    display: flex;
    justify-content: space-between;
 }
 .top main .section4 .box3 .box3-2{
    width: 487px;
    height: 580px;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    background-color: #fff;
    margin-top: 12px;
    padding:5%;
 }
 .top main .section4 .box3 .box3-2 img{
    width: 105px;
    height: 93px;
    position: relative;
    left: 35%;
    margin-bottom: 30px;
 }
 .top main .section4 .box3 .box3-2 p{
    margin-top: 5%;
 }
 .top main .section4 .box3 .box3-2 .google{
    border: 2px solid #EEC678;
    width: 90px;
    height: 35px;
    padding: 4px;
    margin-top: 3%;
 }
 .top main .section4 .box3 .box3-2 .google p{
    margin-top: -1px;
 }
 .top main .section4 .box3 .box3-2 .google p{
    margin-left: 10px;
 }
/* ブレイクポイント1500px */
@media only screen and (width<1500px){
    .top main .section2 .box1 .check img{
        width: 50%;
        height: 40%;
    }
    .top main .section2 .box1 .check .box1-1 .box1-1-1 h4{
        font-size: 30px;
        margin-top: 30px;
    }
    .top main .section2 .box1 .check .box1-1 .box1-1-1{
        /* width: 500px;
        height: 500px; */
        margin-left: 5%;
        aspect-ratio: 1 / 1;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1{
        /* width: 500px;
        height: 500px; */
        margin-right: 5%;
        aspect-ratio: 1 / 1;
    }
    .top main .section2 .box1 .box1-1 .box1-1-1 p{
        width: 200px;
        font-size: 19px;
        margin-top: -250px;
        margin-left: 10%;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1 h4{
        font-size: 30px;
        margin-top: 30px;
    }
    .top main .section2 .box1 .box1-2 .box1-1-1 p{
        width: 200px;
        font-size: 19px;
        margin-top: -190px;
        margin-left: 50%;
    }
    .top main .section3 .box3 .btn {
        width: 150px;
        height: 50px;
        padding-top: 11px;

    }
    .top main .section3 .box3 .btn p{
        font-size: 16px;
    }
}
/* ブレイクポイント1400px */
@media only screen and (width<1400px){
    .top main .section4 .box3 .box3-1{
       flex-direction: column;
       align-items: center;
    }
    .top main .section4 .box3 .box3-2{
        aspect-ratio: 1 / 1;
    }
}
/* ブレイクポイント1250px */
@media only screen and (width<1250px){
    .top main .section2 .box1 .check .box1-1 .box1-1-1{
        width: 400px;
        height: 400px;
        margin-left: 5%;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1{
        width: 400px;
        height: 400px;
        margin-right: 5%;
    }
    .top main .section2 .box1 .box1-1 .box1-1-1 p{
        width: 200px;
        font-size: 16px;
        margin-top: -220px;
        margin-left: 7%;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1 h4{
        font-size: 24px;
        margin-top: 25px;
    }
    .top main .section2 .box1 .check .box1-1 .box1-1-1 h4{
        font-size: 24px;
        margin-top: 30px;
    }
    .top main .section2 .box1 .box1-2 .box1-1-1 p{
        width: 200px;
        font-size: 16px;
        margin-top: -190px;
        margin-left: 45%;
    }
    
}
 /* ブレイクポイント1100px */
 @media only screen and (width<1100px){
    .top main .section1 .box1 img{
        height:330px;
        width: 73px;
    }
    .top main .section3 .box1 img{
        height: 225px;
        width: 73px;
    }
    .top main .section4 .box1 img{
        height: 172px;
        width: 73px;
    }
    .top main .section1 .box3 .box3-1 img{
        width: 352px;
        height: 352px;
    }
    .top main .section1 .box3 .box3-1 .top-h4 h4{
        font-size: 18px;
    }
    .top main .section1 .box3 .box3-2 img{
        width: 339px;
        height: 339px;
    }
    .top main .section1 .box3 .box3-2 h4{
        font-size: 16px;
    }
    .top .section1 .box3 .box3-2{
        left:13%;
    }
    .top .section1 .box3 .box3-1 .top-h4{
        left:140px;
        top:35px;
    }
    .top .section1 .box3 .box3-1 .top-h4 h4{
        letter-spacing:0.5rem;
    }
    .top .section1 .box3 .box3-2 h4{
        position: absolute;
        text-align: center;
        width: 270px;
        top: 100px;
        left: 40px;
    }
    .top main .section2 .box1 .check .box1-1-1{
        width: 400px;
        height: 400px;
        margin: 20px;
    }
    

    .top main .section2 .box1 .check .box1-1 .box1-1-1{
        width: 350px;
        height: 350px;
        margin-left: 5%;
        aspect-ratio: 1 / 1;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1{
        width: 350px;
        height: 350px;
        margin-right: 5%;
        aspect-ratio: 1 / 1;
    }
    .top main .section2 .box1 .box1-1 .box1-1-1 p{
        width: 150px;
        font-size: 15px;
        margin-top: -220px;
        margin-left: 13%;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1 h4{
        font-size: 20px;
        margin-top: 25px;
    }
    .top main .section2 .box1 .check .box1-1 .box1-1-1 h4{
        font-size: 20px;
        margin-top: 30px;
    }
    .top main .section2 .box1 .box1-2 .box1-1-1 p{
        width: 150px;
        font-size: 15px;
        margin-top: -190px;
        margin-left: 45%;
    }
    .news_haikei .news_catch img{
        width:73px ;
        height: 199px;
        margin-top: 20%;
    }
}
 
     /* ブレイクポイント1000px */
 @media only screen and (width<1000px){
    .top main .section2 .box1 .check .box1-1{
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin-left: 3%;
    }
    .top main .section2 .box1 .check .box1-1 img{
        width: 100%;
        margin-right: 5%;
    }
    .top main .section2 .box1 .check .box1-2 img{
        width: 100%;
        margin-right: 5%;
    }
    .top main .section2 .box1 .check .box1-2{
        
        flex-direction: column;
        align-items: center;
        margin-left: 5%;
    }
    .top main .section2 .box1 .box1-1 .box1-1-1{
    background-color: #fff;
    border-radius: 50%;
    width: 530px;
    height: 530px;
    margin-left: 10%;
    }
    .top main .section2 .box1 .box1-1 .box1-1-1 p{
        width: 160px;
        font-size: 16px;
        margin-top: -220px;
        margin-left: 13%;
    }
    .top main .section2 .box1 .check .box1-2 .box1-1-1 h4{
        font-size: 20px;
        margin-top: 25px;
    }
    .top main .section2 .box1 .check .box1-1 .box1-1-1 h4{
        font-size: 20px;
        margin-top: 30px;
    }
    .top main .section2 .box1 .box1-2 .box1-1-1 p{
        width: 150px;
        font-size: 16px;
        margin-top: -190px;
        margin-left: 45%;
    }
}
     /* ブレイクポイント700px */
     @media only screen and (width<700px){
        /* .top main .section1 .box3{
           
        } */
        .top main .section1 .box3 .box3-1 img {
            width: 270px;
            height: 270px;
            right: 10%;
            z-index: 0;
            margin-bottom: 0;
        }
        .top main .section1 .box3 .box3-1 h4{
            z-index: 5;
        }
        .top main .section1 .box3 .box3-2 img {
            width: 250px;
            height: 250px;
            z-index: 0;
            margin-top: -250px;
            margin-bottom: 100px;
        }
        .top main .section1 .box3 .box3-2 h4{
            top:150px;
        }
        .top main .section1 .box3 .box3-1 .top-h4 {
            justify-content: center;
            left: -35%;
        }
        .top main .section1 .box3 .box3-1 .top-h4 h4{
            font-size: 36px;
         }
       






        .top main .section4 .box3 .box3-2{
            width: 325px;
            height: 420px;
        }
        .top main .section4 .box3 .box3-2 img{
            position: relative;
            left: 33%;
            margin-bottom: 0;
        }
        .top main .section4 .box3 .box3-2 p{
            font-size: 15px;
            margin-top:0;
        }
     }
      /* ブレイクポイント500px */
      @media only screen and (width<500px){
         .top main .section2 .box1 .check .box1-1 .box1-1-1 {
            width: 330px;
            height: 330px;
            margin-left: 0;
         }
         .top main .section1 .box3 .box3-1 img {
            width: 264px;
            height: 264px;
            right: 10%;
        }
        .top main .section1 .box3 .box3-1 .top-h4 h4{
            font-size: 35px;
        }
        .top main .section1 .box3 .box3-2 img{
            margin-top: -150px;
            margin-bottom: 100px;
            margin-right: 50px;
            width: 230px;
            height: 230px;
        }
         .top .section1 .box3 .box3-2 h4{
            font-size: 16px;
            width: 300px;
            top: 250px;
            left:-30px;
         }
         .top main .section2 .box1 .check .box1-2 .box1-1-1 {
            width: 330px;
            height: 330px;
            margin-left: 0;
         }

        .top main .section2 .box1 .check .box1-1 .box1-1-1 h4 {
            font-size: 20px;
            margin-top: 20px;
            margin-left: 8%;
            letter-spacing: 0.5rem;
        }
        .top main .section2 .box1 .check .box1-2 .box1-1-1 h4 {
            font-size: 20px;
            margin-top: 20px;
            letter-spacing: 0.5rem;
        }
        .top main .section2 .box1 .check .box1-1 .box1-1-1 p{
            margin-top: -180px;
        }
        .top main .section2 .box1 .check .box1-2 .box1-1-1 p{
            margin-top: -160px;
        }
        .top main .section1 .box3 .box3-1 img {
            right: 3%;
        }
        .top main .section1 .box3 .box3-2 img {
            top:3%;
            right: 3%;
        }
     
        }

        /* 銀屋　css */

/* CSS Document */

h1{
    font-size: clamp(2.5rem, 2.2222rem + 0.8889vw, 3rem);
    color: #EEC678;
    font-weight: 500;
    line-height: 3rem;
}

h2{
    font-size: 2.25rem;
    /*font-size: clamp(1.875rem, 1.6667rem + 0.6667vw, 2.25rem);*/
    color: #EEC678;
    font-weight: 500;
}

P{
   font-size: 1rem;
   color: #EEC678;
}
a{
    color: #EEC678;
    text-decoration: none;
}

/***********************************************************
　おしらせ(NEWS)ページ
************************************************************/
.news_haikei{
    background-image: url(../img/top-check.png);
    background-repeat:repeat-x;
    padding-top: 10%;
    height: 350px;
    margin-bottom: 30%;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.news_catch{
    text-align: center;
}

.news_catch h2{
    border-top: 3px solid #EEC678;
    max-width: 180px;
    padding-top: 1%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
    margin-bottom: 10%;
}

.news_zabuton{
    background-color: #187FC4;
    padding: 3.5%;
}
.news_zabuton1{
    background-color: #187FC4;
    padding: 3.5%;
}
.news_zabuton2{
    background-color: #fff;
    padding: 3.5%;
}

.news_box1{
    display: flex;
    margin-bottom: 5%;
}

.news_box1 h3{
    /*font-size: clamp(1.125rem, 0.9167rem + 0.6667vw, 1.5rem);*/
    font-size: 1.5rem;
    color: #187FC4;
    margin-left: 2%;
    font-weight: 500;
    line-height: 2rem;
}

.news_box2{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3%;
}

.news_btn{
    display: flex;
}

.news_more{
    margin-left: 40%;
}


.news-topic, .news-topic2{
    max-width: 375px;
    flex: 1 1 33%;
    margin: 0 auto;
    border-radius: 20px;
    padding: 0 1%;
    margin-bottom: 3%;
}

.news-topic:hover{
    background-color: #187FC4;
   /* background-color:rgba(24, 127, 196, 0.87)*/
}

.news-data{
    margin-top: 3%;
    margin-left: 3%;
}

.news-topic p, .news-topic2 P{
    margin-bottom: 3%;
}

.news-topic img, .news-topic2 img{
    margin-bottom: 3%;
}

.news_btn2 a button{
    background-color: #fff;
    border-radius: 47px;
    border: 2px solid #EEC678;
    font-family: "Kiwi Maru", serif;
    color: #EEC678;
    width: 200px;
    height: 70px;
}
.news_btn2 a button:hover{
    background-color: #EEC678;
    border: 2px solid #EEC678;
    font-family: "Kiwi Maru", serif;
    color: #fff;
    transition:0.5s
}

.news_btn2{
    display: flex;
    justify-content: center;
}
.news_btn2 a{
    font-size: 16px
}
button:hover{
    background-color: #187FC4;
    border: 2px solid #187FC4;
    transition: 1s;
}

/***********************************************************
　おしらせ(NEWS)LPページ
************************************************************/
.lp_box1{
    display: flex;
    justify-content: space-between;
}
.news_lp{
    margin-top:6.25rem;
}
.lp_btn button{
    background-color: #fff;
    border-radius: 47px;
    border: 2px solid #187FC4;
    font-family: "Kiwi Maru", serif;
    padding-top: 3%;
    padding-bottom: 3%;
    font-size: 16px;
    color: #187FC4;
}

.lp_btn button a{
    color: #187FC4;
    padding: auto;
}

.lp_btn button:hover{
    background-color: #187FC4;
    border: 2px solid #187FC4;
    transition: 0.5s;
    color: #fff;
}
.lp_btn button a:hover{
    color: #fff;
}

.lp_btn{
    display: flex;
    justify-content: center;
    width: 200px;
    height: 80px;
}

.lp_box2{
    max-width: 600px;
    margin-bottom: 10%;
    margin-right: 10%;
}

.lp_box2 p{
    margin-bottom: 2%;
}

.news_lp h1{
    text-align: center;
    margin-bottom: 5%;
    font-size: 48px;
    margin-top: 10%;
}

.lp_box3{
    margin-bottom: 5%;
}
.lp_box3 img{
    width: 100%;
}
/***********************************************************
　contactページ  
************************************************************/
.contact_page{
    margin-top: 10%;
}

.contact_page h1{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 2%;
}

.contact_page h4{
    font-family: "Kiwi Maru", serif;
    color: #EEC678;
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 10%;
}

.contact_zabuton{
    background-color: #187FC4;
    padding: 3.5%;
}
.contact_zabuton2{
    background-color: #fff;
    padding: 3.5%;
}


.contact_page ul{
    list-style: none;
    max-width: 100%;
}

.contact_page li{
    display: flex;
    margin-bottom: 5%;
}

.contact_page li p{
    font-family: ""Kiwi Maru"", serif;
    color: #187FC4;
}

.contact_page .title span{
    background-color: #EEC678;
    color: #fff;
    font-size: 0.75rem;
    margin: 5%;
    padding: 2%;
    border-radius: 5px;
}

.box_det{
    margin-left: 5%;
    margin-right:10%;
}

input{
    border:2px solid #187FC4;
    border-radius: 5px;
    width:100%;
    height: 3em;
    padding: .5em;
}

textarea{
    border:2px solid #187FC4;
    border-radius: 5px;
    width: 100%;
    height: 25em;
    padding: .5em;
}

.title{
    position: relative;
    width: 30%;
    font-weight: normal;
}

input:focus, textarea:focus{
    outline: none;
    border:2px solid #EEC678;
}

.contact_btn input{
    background-color: #EEC678;
    border-radius: 47px;
    border: 2px solid #EEC678;
    font-family: "Kiwi Maru", serif;
    color: #fff;
    /* padding: .8em 2em 2.3em 2em; */
    font-size: 16px;
    width: 200px;
    height: 70px;
}

.contact_btn{
    display: flex;
    justify-content: center;
}

.contact_btn input:hover {
        /* background-color: #fff(200deg 62% 75%); */
        /* box-shadow: 0 3px 0 #187FC4, 0 6px 0 rgba(0,0,0,.2);
        transform: translateY(3px); */
        background-color: #fff;
        border: 2px solid #EEC678;
        color:#EEC678;
        transition: 0.5s;
  }

/***********************************************************
　おしらせ(NEWS)ページ  1000未満
************************************************************/
@media only screen and (width<1000px){
    .news-topic{
        flex: 1 1 100%;
        margin: 2.5% auto;
    }
    .contact_page li{
        flex-direction: column;
    }
}

/***********************************************************
　contactページ  1000未満
************************************************************/
@media only screen and (width<1000px){
    .contact_page{
        margin-top:6.25rem;
    }
   
    .contact_page h1{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 2%;
        font-size: 24px;
    }
    
    .contact_page h4{
        /* font-size: 1.25rem; */
        text-align: center;
        margin-bottom: 10%;
        font-size: 14px;
    }
    
    .contact_zabuton{
        background-color: #187FC4;
        padding: 3.5%;
    }
    .contact_zabuton2{
        background-color: #fff;
        padding: 3.5%;
    }
    
    
    .contact_page ul{
        list-style: none;
        max-width: 100%;
    }
    
    .contact_page li{
        display: block;
        margin-bottom: 5%;
    }
    
    .contact_page .contact_zabuton .contact_zabuton2 li p{
        font-family:"Kiwi Maru", serif;
        color: #187FC4;
        margin-bottom: 5%;
    }
    
    .contact_page .title span{
        background-color: #EEC678;
        color: #fff;
        font-size: 0.75rem;
        margin: 5%;
        padding: 1%;
        border-radius: 5px;
    }
    
    .box_det{
        margin-left: 5%;
    }
    
    input{
        border:2px solid #187FC4;
        border-radius: 5px;
        width: 100%;
        height: 3em;
        padding: .5em;
    }
    
    textarea{
        border:2px solid #187FC4;
        border-radius: 5px;
        width: 100%;
        height: 25em;
        padding: .5em;
    }
    
    .title{
        position: relative;
        width: 100%;
        font-weight: normal;
    }
    
    input:focus, textarea:focus{
        outline: none;
        border:2px solid #EEC678;
    }
    
    .contact_btn input{
        background-color: #EEC678;
        border-radius: 47px;
        border: 2px solid #EEC678;
        color: #fff;
        padding: .8em 2em 2.3em 2em;
    }
    
    .contact_btn{
        display: flex;
        justify-content: center;
    }
    
    .contact_btn input:hover {
        color: #fff;
        background: #EEC678(200deg 62% 75%);
        box-shadow: 0 3px 0 #187FC4, 0 6px 0 rgba(0,0,0,.2);
        transform: translateY(3px);
      }
}


/***********************************************************
　おしらせ(NEWS)ページ  500未満
************************************************************/
@media only screen and (width<500px){
    .news_haikei{
        padding-top: 30%;
    }
  
    .news_catch h2{
        border-top: 3px solid #EEC678;
        max-width: 180px;
        padding-top: 5%;
        text-align: center;
        margin: 0 auto;
        margin-top: 5%;
        margin-bottom: 10%;
        font-size: 22px;
        /* font-weight: normal; */
    }
    
    .news_box1{
        justify-content: center;
    }
    
    .news_box2{
        display: block;
        margin-bottom: 5%;
    }
    
    .news_btn{
        display: flex;
    }
    
    .news_more{
        margin-left: 40%;
    }
    
    .news-topic{
        margin-bottom: 5%;
    }
  
    .news-topic p, .news-topic2 P{
        margin-bottom: 5%;
    }
    
    .news-topic img, .news-topic2 img{
        margin-bottom: 5%;
    }
    
    button{
        padding-top: 4%;
        padding-bottom: 4%;
        padding-left: 6%;
        padding-right: 2%;
    }
    
    .news_btn{
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
    }
    
}

/***********************************************************
　おしらせ(NEWS)LPページ 500未満
************************************************************/
@media only screen and (width<500px){
    
    .lp_box1{
        display: block;
    }
    
    .lp_btn button{
        padding-top: 4%;
        padding-bottom: 4%;
        padding-left: 2%;
        padding-right: 6%;
    }
    
    .lp_btn{
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
    }
    
    .lp_box2{
        max-width: 100%;
        margin-bottom: 10%;
        margin-right: 0%;
    }
    
    .lp_box2 p{
        margin-bottom: 5%;
    }
    
    .news_lp h1{
        text-align: center;
        margin-bottom: 5%;
        font-size: 36px;
    }
    
    .lp_box3{
        margin-bottom: 5%;
    }
}

button{
    background-color: #fff;
    border-radius: 47px;
    border: 2px solid #EEC678;
    font-family: "Kiwi Maru", serif;
    color: #EEC678;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    padding-left: 5%;
    padding-right: 1%;
}

.news_btn{
    display: flex;
    justify-content: center;
}


/***********************************************************
　おしらせ(NEWS)ページ  1400未満
************************************************************/
@media only screen and (width<1400px){
    /* .news-topic{
        flex: 1 1 50%;
    } */
    .news_box2{
       padding-left: 10%;
       padding-right: 10%;
    }
}
@media only screen and (width<1100px){
    .news_box2{
        padding-left: 5%;
        padding-right: 5%;
     }
}
/***********************************************************
　おしらせ(NEWS)ページ  500未満
************************************************************/
@media only screen and (width<500px){
    .news_haikei{
        padding-top: 30%;
    }
  
    .news_catch h2{
        border-top: 3px solid #EEC678;
        max-width: 180px;
        padding-top: 5%;
        text-align: center;
        margin: 0 auto;
        margin-top: 5%;
        margin-bottom: 10%;
    }
    .news_zabuton{
        margin-top: 40%;
    }
    .news_zabuton1{
        margin-top: 10%;
    }
    .news_box1{
        justify-content: center;
    }
    
    .news_box2{
        display: block;
        margin-bottom: 5%;
    }
    
    .news_btn{
        display: flex;
    }
    
    .news_more{
        margin-left: 40%;
    }
    
    .news-topic{
        margin-bottom: 5%;
    }

    .news-topic2{
        margin-left: 0%;
        margin-bottom: 5%;
    }
    
    .news-topic p, .news-topic2 P{
        margin-bottom: 5%;
    }
    
    .news-topic img, .news-topic2 img{
        margin-bottom: 5%;
    }
    
    button{
        padding-top: 4%;
        padding-bottom: 4%;
        padding-left: 6%;
        padding-right: 2%;
    }
    
    .news_btn{
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
    }
    
}

/***********************************************************
　おしらせ(NEWS)LPページ 500未満
************************************************************/
@media only screen and (width<500px){
    
    .lp_box1{
        display: block;
    }
    
    .lp_btn button{
        padding-top: 4%;
        padding-bottom: 4%;
        padding-left: 2%;
        padding-right: 6%;
    }
    
    .lp_btn{
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
    }
    
    .lp_box2{
        max-width: 100%;
        margin-bottom: 10%;
        margin-right: 0%;
    }
    
    .lp_box2 p{
        margin-bottom: 5%;
    }
    
    .news_lp h1{
        text-align: center;
        margin-bottom: 5%;
    }
    
    .lp_box3{
        margin-bottom: 5%;
    }
}

/* 佐さんcss */

body{
    background-color: #ffffff;
    font-family: "Kiwi Maru", serif;
    font-size: 1rem;
	font-weight: 800;  
    color: #EEC678;
    overflow-x: hidden;
    }

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

h4{
    font-size: 1.25rem;
}

p{
    font-size: 1rem;
	
}

a {
    text-decoration: none;
}


/*----------------‐‐------------------
　　　　　　　ヘッダー(pc)
------------------------------------ */

header {
	height: 6.25rem;
    display: flex;
    justify-content: space-between;
	position: fixed;
	z-index: 10;	
	right: 0;
    top: 0;	
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    background-color: #187FC4;
    padding: 1.5%;
}

 /*nav */

header nav ul {
    display: flex;
    justify-content: center;
    color: #fff;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}

header nav li {
    list-style-type: none;
}

header nav ul p {
    margin: 30px;
    color: #fff;
}
header nav ul p:hover{
    color: #659fc5;
    transition: 0.5s;
}
/*----------------‐‐------------------
　　　　　　　ドロワー
------------------------------------ */

#drawer {
	display: none;
}

label {
	cursor: pointer;
	position: fixed;
}

.open {
	z-index: 15;
	top: 0.625rem;
	right: 0.625rem;
	width: 3.75rem;
	height: 3.75rem;
    background-color:#187FC4;
    border: #fff 3px solid;
	border-radius: 10vw;
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 3px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.open::before {
	transform: translateY(-8px);
}

.open::after {
	transform: translateY(8px);
}

.close {
	z-index: 12;
	inset: 0;
	pointer-events: none;
	transition: background .6s;
}

#drawer:checked + .open {
	transform: translateX(-280px);
}

#drawer:checked + .open span {
	transform: scaleX(0);
}

#drawer:checked + .open::before {
	transform: rotate(135deg) scaleX(1.2);
}

#drawer:checked + .open::after {
	transform: rotate(-135deg) scaleX(1.2);
}

#drawer:checked ~ .close {
	pointer-events: auto;
	background: rgba(255, 255, 255, 0.412);
}

/* ドロワーメニュー */
.menu {
	z-index: 15;
	position: fixed;
	overflow: auto;
	top: 0;
	right: 0;
	width: 17.5rem;
	height: 100%;
	margin: 0;
	padding: 1.5%;
	box-sizing: border-box;
	background: #187FC4;
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.menu li {
	line-height:2em;
	list-style-type: none;
}

.menu a {
	display: block;
	text-align: center;
	padding: 1em 2em;
	color: white;
	transition: background .6s;
}
.menu a:hover{
    color: #659fc5;
    transition: 0.5s;
}

.menu .logo{
    text-align: center;
    margin:10% 0;
}

.menu .insta-icon{
    text-align: center;
    margin:10% 0;
}


#drawer:checked ~ .menu {
	transform: none;
}


/*----------------‐‐------------------
　　　　　　ドロワー(1100以下)
------------------------------------ */

@media (min-width:1100px) {
	.open {
		display: none;
	}
    .top #header {
        display: block;
}
}
@media (max-width: 1100px) {
	header nav {
		display: none;}
         #header {
        display: none;}

    header .insta-icon{
            display: none;
        }           
	}
/*----------------‐‐------------------
　　　　　　フッター(pc)
------------------------------------ */

footer{
	margin-top: 7.14%;
}

footer .box{
	text-align: center;
}

footer .box p{
	text-align: center;
	margin-bottom: 1.78%;
}
footer .box p:hover{
	color: #edd5a5;
    transition: 0.5s;
}

footer .box .insta-icon{
	margin-bottom: 7.14%;
}

footer .box .logo{
	margin-bottom:1.78%;
}

footer a:visited{
    color:#187FC4;
}


/*----------------‐‐------------------
　　　　　　ラインナップ(pc)
------------------------------------ */

#lineup .main-img img{
	width: 100%;
}

#lineup .main-img{
	margin-top:6.25rem;;
}

#lineup .midashi{
	text-align: center;
	padding: 15%;
}

#lineup .midashi  h2{
    border-top: 3px solid #EEC678;
    max-width: 180px;
    padding-top: 1%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
}

#lineup .midashi .box01{
	margin:7.14% 0 3.57% 0;
}

#lineup .box03{
	margin-top:1.42%;
}

#lineup .box03 h2{

	text-align: center;
	
}

/* ザブトン */

#lineup .midashi01{
	width: 100%;
	height: auto;	
	display: flex;
	align-items: center;
	background-color: #187FC4;
	padding: 1.5%;		
}

#lineup .midashi01 h3{
	color: #fff;
    margin-bottom: 3%;
}

#lineup .midashi01 .txt03{
	margin-left:1.5%;
}

#lineup .midashi01 .txt03 h4{
	color: #fff;
}

/* ラインナップ商品 */
/* 背景 */
#lineup .midashi01-box{
	padding: 5%;
	background-size: 20px 20px;
	background-position: 50% 50%;
	background-image:
	repeating-linear-gradient(
	  90deg,
	  #187FC4 ,
	  #187FC4 1px,
	  transparent 1px,
	  transparent 32px
	),
	repeating-linear-gradient(
	  0deg,
	  #187FC4 ,
	  #187FC4 1px,
	  #fff 1px,
	  #fff 32px
	);
  }

#lineup .midashi01-box .box01{
	margin-bottom: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#lineup .midashi01-box .box02{
	display: flex;
	margin-bottom: 0;
}

/* 左 */

#lineup .left-box{
	width: 50%;
	position: relative;	
}	

#lineup .left-box .image01 img{
	border-radius: 50vw;	
}

#lineup .left-box .txt{
	position: absolute;
	overflow:hidden;
	top: 25%;
    right: 20%;    
}

#lineup .left-box .txt p{
	color: #fff;
	text-shadow: 1px 1px 0.2px #3a3623;
}

#lineup .left-box .txt02 h2{
	padding:10px 20px;
	border-radius: 10vw;
	color: #fff;
	border: #fff 2px solid;
	box-shadow: 1.5px 1.5px 0.2px #3a3623;
	text-shadow: 2px 1px 0.2px #3a3623;	
}

#lineup .left-box .txt02{
	position: absolute;
	aspect-ratio: 2/1;
	top: 30%;
    right: 15%;
}

/* 右*/

#lineup .right-box{
	width: 50%;
	margin-left: 4.16%;	
	aspect-ratio: 1/1;
	background-color: #fff;
	border-radius: 50vw;
	position:relative;	
}

#lineup .right-box .txt{
	width: 100%;
	padding: 20%;
	position: absolute;
	overflow:hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);	
}

#lineup .right-box .txt p{
	text-align: center;
	line-height: 1.5em;
}

#lineup .right-box .txt .txt01  p{
	text-align: start;
}


#lineup  .right-box .txt .txt02{
	margin-bottom: 5%;
}

#lineup .right-box .txt-box{
	width: 100%;
	padding: 20%;
	position: absolute;
	overflow:hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#lineup .right-box .txt-box p{
	text-align: center;
	line-height: 1.5em;
}

#lineup .right-box .txt-box .txt02 p{
	text-align: start;
}

#lineup  .right-box .txt .txt03{
	margin-bottom: 5%;
}

#lineup  .right-box .txt02 p{
	margin-top: 10%;	
}

#lineup .right-box .txt02{
	margin-bottom: 5%;	
}

#lineup  .right-box span{
	font-size: 0.75rem;
}

/* モックアップ */

/* #lineup .mockup{
	width: 100%;	
    background-image: url(../img/lineup-mockup.png);	
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 50vh;
} */
#lineup .mockup2{
    display: block;
    height: 500px;
    position: relative;
    clip-path: inset(0);
}

#lineup .mockup2 img{
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/*---------------‐‐------------------
　　　　＠ラインナップ(1000以下)
------------------------------------ */
@media only screen and (width<1000px){
#lineup .midashi01{
	display: block;
}

#lineup .midashi01-box .box01{
	display: block;
	margin-bottom: 10%;
}

#lineup .midashi01-box .box02{
	display: block;
	margin-bottom: 0%;
}

#lineup .midashi01-box{
	padding:10%;
}

#lineup .left-box{
	width: 100%;
	margin-bottom: 5%;
}

#lineup .right-box{
    border-radius: 5vw;
    width: 65%;
    margin-left:18%;
}

#lineup .right-box .txt{
    padding:5%;
}
#lineup .right-box .txt-box{
	padding: 5%;
}
}

/*----------------‐‐------------------
　　　　　＠ラインナップ(850以下)
------------------------------------ */
@media only screen and (width<850px){
    #lineup .midashi h2{
        font-size:30px;
        }
    
        #lineup .midashi img{
        width: 20%;
        }
    
    
    
    #lineup .left-box .txt02 h2{
        font-size: 1.85rem;
        padding:5px 10px;
    }
    
    #lineup .midashi01 .txt03 h4{
        font-size: 1rem;
    }
    
    #lineup .right-box{
        width: 80%;
        margin-left:10%;
    }
    
    
    #lineup .right-box .txt{
        padding:5%;
    }
    
    #lineup .right-box .txt-box {
        padding: 5%;
    }
    
    

}

/*----------------‐‐------------------
　　　　　＠ラインナップ(550以下)
------------------------------------ */
@media only screen and (width<550px){
	#lineup .midashi h2{
        border-top: 3px solid #EEC678;
        max-width: 180px;
        padding-top: 5%;
        text-align: center;
        margin: 0 auto;
        margin-top: 5%;
        margin-bottom: 10%;
		font-size: 20px;
    }

	#lineup .midashi01 .txt01 h2{
		font-size:1.5rem;
	}

	#lineup .midashi01 .txt03 h3{
		font-size:1rem;
	}

	#lineup .midashi01-box{
		padding:10% 5%;
	}

    #lineup .right-box{
        width: 100%;
        margin-left: 0;
    }



	#lineup .right-box p{
		font-size: 14px;
	}
	
	#lineup .right-box .txt{
		padding:5%;
	}

	#lineup .right-box .txt-box {
		padding: 5%;
	}

	#lineup .left-box{
		margin-bottom: 2.5%;
	}

	#lineup .left-box .txt{
		top:22%;
		right: 10%;
	}
	

	#lineup .left-box .txt02 h2{
		font-size: 1.5rem;
		padding:2.5px 5px;
	}

}
/*----------------‐‐------------------
　　　　プライバシーポリシー(pc)
------------------------------------ */

#privacypolicy{
	padding: 0 10%;
    font-weight: normal;
}

#privacypolicy .midashi{
	margin-top: 6.25rem;
	
}

#privacypolicy .midashi h1{
	margin-top:0.625rem;;
    text-align: center;    
    padding:10% 0 2% 0;
}

#privacypolicy .midashi h4{  
    font-size: 1.25rem;
    text-align: center;
    margin-bottom:10%;
}


#privacypolicy .box02{
	padding:5%;
	border: #EEC678 2px solid;
	border-radius: 5vw;
	margin-top: 5%;
}

#privacypolicy li{
	list-style-type: none;
    
}

#privacypolicy .box02-1{
	margin-bottom: 5%;
}

#privacypolicy .box02-1 p{
	margin: 2% 0;
}

#privacypolicy .box02 .txt02{
	margin: 2% 0;
}

#privacypolicy .txt03 li{
	list-style-type:dotted-decimal;
	margin-left: 2%;
}

#privacypolicy .txt04 li{
	list-style-type: disc;
	margin-left: 5%;
}




#privacypolicy .box02-1 h4{
	margin-bottom: 2%;
}




/*----------------‐‐------------------
　　　　プライバシーポリシー(1000以下)
------------------------------------ */

@media only screen and (width<1000px){
#privacypolicy .midashi h1{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 2%;
        font-size: 36px;
    }
    
#privacypolicy .midashi h4{
        font-family: "Kiwi Maru", serif;
        color: #EEC678;
        /* font-size: 1.25rem; */
        text-align: center;
        margin-bottom: 10%;
    font-size: 16px;
    }
}

/*----------------‐‐------------------
　　　　プライバシーポリシー(500以下)
------------------------------------ */

@media only screen and (width<500px){
	#privacypolicy{
		padding: 0 5%;
	}
} 


/* -----------------------------フェードイン----------------------- */

  .box {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateY(100px);
  }
  .is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }


/* ---------------スライドショー-------------------------------- */
#slideshow {
    position: relative;
    max-width:  1400px; /* 画像の横幅に合わせて記述 */
    aspect-ratio: 2/1; /* 画像の高さに合わせて記述 */   
    }
 #slideshow img{
        width: 100%;
        border-radius: 20vw;
 }
#slideshow img {
    position: absolute;
    top: 0;
    left:0;
    z-index: 3;
    border: #fff 1px solid;
     }
    
#slideshow img.active {
    z-index: 5;
     }
    
#slideshow img.last-active {
    z-index: 4;
     }