@charset "UTF-8";

html{
  font-size: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body{
  overflow-x: hidden;
  top: 0;
  margin: 0;
  width: 100%;
  line-height: 1.7;
  color:rgb(1, 1, 70);
  font-family:'Abril Fatface', 'Times New Roman', Times,'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
}


.page-header{
  display: flex;
  justify-content: space-between;
  width: 100%;
  top: 0px;
  width: 100%;
  max-width: 1500px;
}  
/* 左側ロゴ */
  .left-fixed{
    margin: 0;
    background-color:rgb(255, 187, 0);
    margin-left: 4%;
  }
 .main-logo{
  margin:24px 24px 8px 24px;
  width:104px;
 }

/* 右側アイコン */
 .right-fixed{
  right:16px;
  top: 16px;
  position: fixed;
  align-items: center;
  display: flex;
 }

 #sns{
  text-align: center;
  vertical-align: middle;
  padding-left: 10px;
}
.sns:hover{
  transform: scale(1.2,1.2); /*画像の拡大*/
  cursor: pointer; /*カーソルをポインターにする*/
}

  .moji{
    margin-left:8px;
    color: rgb(1, 1, 70);
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }

.menu{
  font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
}
  
  /* ハンバーガーメニュー */


  #checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .menu-01,
    .menu-01 span {
      display: inline-block;
      transition: all 0.4s;
      box-sizing: border-box;
      position: relative;
      z-index: 100;
    }
    .menu-01 {
      margin-left: 16px;
      width: 32px;
      height: 26px;
      background: none;
      border: none;
      appearance: none;
      cursor: pointer;
    }
    .menu-01 span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      background-color:rgb(1, 1, 70);
      border-radius: 4px;
    }
    .menu-01 span:nth-of-type(1) {
      top: 0;
    }
    .menu-01 span:nth-of-type(2) {
      top: 11px;
    }
    .menu-01 span:nth-of-type(3) {
      bottom: 0;
    }

    /*チェックボックスにチェックが入ったら*/
    #checkbox:checked + label span:nth-of-type(1) {
      transform: translateY(11px) rotate(-45deg);
    }
    #checkbox:checked + label span:nth-of-type(2) {
      opacity: 0;
    }
    #checkbox:checked + label span:nth-of-type(3) {
      transform: translateY(-11px) rotate(45deg);
    }
  nav {
    display: none;
  }
  #checkbox:checked + label + nav {
    display: block;
  }


  /* チェックボックス内 */

  nav ul{
    box-sizing: border-box;
    background-color: rgb(1, 1, 70);
    position: absolute;
    right:0;
    left:0;
    top:72px;
    font-size:16px;
    list-style: none;
    margin:0;
    padding:0 ;
    display:flex;
    padding: 8px;
    flex-direction: column;
  }


  nav a{
    margin: 0 auto;
    background-color: white;
    color: rgb(1, 1, 70);
    text-decoration:none;
    width: 100%;
    text-align: center;
    line-height:40px ;
    display: block;
    
  }

  nav a:hover{
    background-color: rgb(1,1,70,0.3);
    color:gold;
  }



  /* 大きな背景画像 */
 .big-bg{
  width: 100%;
  background-size: cover;
  background-position: center top;

  
 }
#homepic{
  background-image:url(../../pcs/web_work/_YONAHP/MAIN.jpg);
  min-height: 100vh;
  position: relative;
}
  /* メイン画像 */
  
  .home-content{
    text-align: center;
    margin-top: 10%;
    align-items: center;
  }
  .sub-pic{
    width: 160px;
  }

  .hitokoto{
  position: absolute;
  left:0;
  right: 0;
  top:40%;
  bottom: 0;

  font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  padding-top: 56px;
  font-size: 16px;
  letter-spacing:2px;
  color: rgb(1, 1, 70);
  text-align: center;

  }

  
  /* メニュータイトル */
  
  #title{
    text-align: center;
    margin-top: 104px;
    margin-bottom: 40px;
  }
  
  /* コンセプト */
  
  .concept{
    margin: 0px 4%;
    display: flex;
    justify-content:center;
    
  }
  
  #funfun{
    width: 400px;
    height: auto;
  }
  
  
  .right-con img{
    width: 300px;
    margin: 0;
    padding: 0;
    vertical-align:middle;
  }
  
  .contents{
    margin-top: 32px;
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }
  
  /* モア */
  
  .view-more{
    text-align: center;
    padding-top: 24px;
    margin: 0;
    left: 0;
  }
  
  .more{
    margin: 0;
    width: 150px;
    font-size:16px;
    text-decoration:none;
    display:block;
    color: rgb(1, 1, 70,0.5);
    /* background-color: aqua; */
  }
  
  .more:hover{
    color: rgb(1, 1, 70);
  }
  
  /* 矢印 */
  .yazirusi {
    margin-top: -10px;
    color :rgb(1, 1, 70);
    display:flex;
    justify-content:left; 
  } 
  .yazirusi::after {
    content: '';
    width: 160px;
    height: 15px;
    border-bottom: solid 1px;
    border-right: solid 1px;
    transform: skew(45deg);
  }

/* 背景１ */

.bg_1{
  background-image: url(../../pcs/web_work/_YONAHP/ye_logo560.png);
  background-position:left -60% bottom 5%;
  background-repeat: no-repeat;
}

.toumei{
  background-color: rgba(255, 255, 255, 0.8);
}




  /* ニュース */
  
  .news{
    line-height: 40px;
    margin: 0px 8%;
    margin-bottom: 120px;
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }
  
  .n-content{
    font-size:16px;
    text-decoration:none;
    display:block;
    color: rgb(1, 1, 70);
  }
  .n-content br{
    display: none;
  }
  .n-content:hover{
    color: rgb(1, 1, 70, 0.5);
    transition-duration: 0.3s;
  }
  
  
  
  /* ３列の部分 */
  
  .container{
    padding: 0;
    display: flex;
    margin: 0px 4%;
    justify-content: space-around;
    width:calc(100% - 8%);
    height:0  auto;
  }
  
  .container p{
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }
  .item{
    margin:0 24px;
    position: relative;
    justify-content: space-between;
    background: #000;
    border-radius: 30px;
    height: auto;
  }
  
  .pic{
    vertical-align: top;
    width: 100%;
    cursor: pointer;
    
  }
  .pic:hover{
    opacity: 1;
    transition-duration: 0.3s;
  }
  
  .pic{
    background: #000;
    opacity: 0.6;
    height: auto;
    width: 360px;
    border-radius: 30px;
    overflow: hidden;
  }
  
  .logo{
    position: absolute;
    left: -24px;
    top: -16px;
    width: 40vh;
  }
  h2{
    margin: 8px 0;
    padding: 0;
    font-size: 2vw;
    
  }
  p{
    margin: 0;
    font-size: 14px;
  }
  
  .text{
    width:240px;
    color: aliceblue;
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%,0);
  }
  
  /* フォローミー */
  .f-content{
    text-align: center;
    margin-bottom: 40px;
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }
  
  .follow-me{
    align-items: center;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    margin: 0 auto;
    width:80%;
    padding: 0px 10%;
  }
  .sns2{
    width:10%;
  }
  
  .sns2:hover{
    transform: scale(1.2,1.2); /*画像の拡大*/
    cursor: pointer; /*カーソルをポインターにする*/
  }
  
  
  /* ショップインフォ */
  
  .Shop-info{
    
    display: flex;
    margin: 104px 4% 104px 4%;
    justify-content: space-around;
    align-items: center;
    
    
  }
  
  .title-info{
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 16px;
    top: 0;
    padding: 0px;
  }
  .map{
    min-width: 200px;
    width:60vh;
  }
  
  .info{
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
  }



/* 背景2 */

.bg_2{
  background-image: url(../../pcs/web_work/_YONAHP/ye_logo560.png);
  background-position:right -60% top 320px;
  background-repeat: no-repeat;
}

.toumei{
  background-color: rgba(255, 255, 255, 0.8);
}









  /* フッター */
  
  
  footer{
    background-color: rgb(1, 1, 70);
    height: 200px;
    font-family: "Tsukushi A Round Gothic","筑紫A丸ゴシック","Toppan Bunkyu Gothic","凸版文久ゴシック";
    
  }
  
  .wrapper{
    margin: 0 4%;
    color: rgb(255, 187, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
  }
  
  .select{
    display: grid;
    grid-template-columns:160px 120px;
    gap: 16px;
  }
  .foot-right{
    text-align: center;
    justify-content: center;
  }

  .foot{
    color: rgb(255, 187, 0);
    font-size: 14px;
    
  }
  
  .foot:hover{
    color: gold;
    transition-duration: 0.3s;
  }
  
  .foot_logo{
    width: 80px;
  }
  
  .toiawase{
    margin: auto;
    text-align: center;
    background-color: rgb(104, 104, 137);
    color:rgb(255, 187, 0);
    padding:16px;
    width:24vh;
    font-size: 14px;
  }
  
 #contact:hover{
    color: gold;
    transition-duration: 0.3s;
    cursor: pointer; /*カーソルをポインターにする*/
  }

  #contact{
    width:24vh;
    color:rgb(255, 187, 0);
    text-align: center;
  }
  
  .copy{
    font-size: 0.2vw;
    bottom: 0;
    padding-top: 24px;
  }
  
  


  
  
  
  /* ★★★★★★★★★★★★★スマホ★★★★★★★★★★★★★ */

  @media (max-width: 599px) {



.sns{
display: none;
}
.moji{
display: none;
}

.concept{
  display: flex;
  flex-direction: column;
}

#title{
  margin:80px 0 16px 0;
}

nav ul{
  width:auto;
  box-sizing: border-box;
  position:fixed;
  left:20vh;
  top:64px;
}


/* コンセプト */

.contents{
  text-align: center;

}
.view-more{
  text-align: center;
  margin: 0 auto;
}
.more{
  margin: auto;
    width: 150px;
    font-size:16px;
    text-decoration:none;
    display:block;
}
.yazirusi {
  margin-top: -10px;
  display:flex;
  justify-content: center; 
}

#funfun{
  padding-top: 40px;
  text-align: center;
  display: block;
  margin: auto;
}

/* ニュース */

.n-content br{
  display:block;
}

.n-content{
  font-size: 14px;
  text-align: center;
}

/* 3つ */


.container{
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap:40px;
  text-align: center;
  width:100%;
}

.pic{
  display: block;
  margin: auto;
  width: 100%;
}
.logo{
  width: 64vh;
  left: -24px;
  top: 40px;
}




h2{
  font-size: 8vw;
}
p{
  margin: 0;
  font-size: 14px;
}

.text{
  width:240px;
  color: aliceblue;
  position: absolute;
  text-align: center;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%,0);
}


/* フォローミー */

.follow-me{
  justify-content: space-around;
  box-sizing: border-box;
  width:70%;
  padding: 0px;
}
.sns2{
  width: 16%;
  
}


/* ショップインフォ */

.Shop-info{
  flex-direction: column;
  margin: 104px 4% 104px 4%;
  justify-content: space-around;
  align-items: center;
}

.title-info{
  text-align: center;
}

.map{
  width: 80vh;
}
.right-info{
  padding-top: 24px;
}

/* 背景 */

.bg_1{
  background-position:left -32vw top 0;
  background-size: 90%;
}
.bg_2{
  background-position:right -40vw top 80%;
  background-size: 90%;
}

/* フッター */

footer{
  height: 440px;
}

.wrapper{

  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;

}


.foot_logo{
  width: 80px;
}
.select{
  grid-template-columns:160px;
  gap:4px;
  text-align: center;
  padding: 0 auto;
  margin-top: 16px;
}

.toiawase{
  width: 30vh;
  margin-top: 16px;

}

.copy{
  font-size: 0.2vw;
  padding: 0px;
  padding-top: 24px;
  padding-bottom: 8px;
}












  
}