@charset"UTF-8";


/*共通部分*/
html {
   font-size: 100%;
}
body{
   font-family: 'Noto Serif JP', sans-serif;
   line-height: 1.7;
   color: #432;
  
}
a {
   text-decoration: none;
}
img {
   max-width: 100%;
}

 /*HEADER*/
 .logo {
   width: 210px;
   margin-top: 18px;
}
.main-nav {
   display: flex;
   font-size: 1.25rem;
   text-transform: uppercase;
   margin-top: 40px;
   list-style: none;
}
.main-nav li {
   margin-left: 36px;
}
.main-nav a {
   color: #432;
}
.main-nav a:hover {
   color: rgb(225, 167, 138);
}
.page-header {
   display: flex;
   justify-content: space-between;
}

.wrapper {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 4%;
}
/*HOME*/
.page-title{
-webkit-text-stroke: 1px #a5a5a5;
font-size:100px;
font-family:serif;
}
.home-content {
   text-align: center;
   margin-top: 10%;
}
.home-content p {
   font-size: 1.5rem;
   margin-bottom:30px;
   color: #432;
   background-color: rgba(255, 255, 255, 0.7);
   margin:0 180px 100px}
   
}

/*見出し*/
.page-title {
   font-size: 5rem;
   font-family: 'Philosopher',serif;
   text-transform: uppercase;
   font-weight: normal;
}
/*ボタン*/
.botton{
   font-size: 1.375rem;
   background: rgb(249, 144, 112);
   color: #fff;
   border-radius: 32px;
   padding: 18px 32px;
   margin-top: 20px;
   margin-bottom: 100px;
}
.botton:hover{
   background: rgb(117, 90, 64);
}
/*大きな背景画像*/
.big-bg{
   background-size: cover;
   background-position: center top;
}
#home {
   background-image:url(main-bg.png);
   min-height:100vh;
}
#home .page-title{
   text-transform: none;
}
/*news*/
#news {
   background-image: url("https://github.com/erikotajiri196/cafehruits/blob/main/news-bg.jpg?raw=true");
   height: 440px;
   margin-bottom: 40px;
}
#news .page-title {
   text-align: center;
}
/*フッター*/
footer{
   background: rgb(255, 190, 125);
   text-align: center;
   padding: 26px 0;
}
footer p {
   color: #fff;
   font-size: 0.875rem;
}
/*記事部分*/
article{
   width: 74%;
}
.news-contents{
   display: flex;
   justify-content: space-between;
   margin-bottom: 50px;
}
.post-info{
   position:relative;
   padding-top: 4px;
   margin-bottom: 40px;
}
.post-date {
   background: rgb(174, 135, 111);
   border-radius: 50%;
   color: #fff;
   width: 113px;
   height: 110px;
   font-size: 1.625rem;
   text-align: center;
   position: absolute;
   top: 0;
   padding-top: 14px;
}
.post-title,
.post-cat{
   margin-left: 120px;
}
article img{
   margin-bottom: 20px;
}
article p{
   margin-bottom: 1rem;
}
.post-date span {
   font-size: 1rem;
   border-top: 1px rgba(255,255,255,.5) solid;
   padding-top: 6px;
   display: block;
   width: 60%;
   margin: 0 auto;
}
.post-title {
   font-family: "Yu Mincho","YuMincho",serif;
   font-size: 2rem;
   font-weight: normal;
}
article{
   width: 70%;
   order: 1;
}
/*サイドバー*/
aside{
   width: 22%;
   order: 2;
}


.sub-title{
   font-size: 1.375rem;
   padding: 0 8px 8px;
   border-bottom: 2px rgb(126, 113, 100) solid;
   font-weight: normal;
}
aside p{
   padding: 12px 10px;
}
.sub-menu{
   padding: 5px 5px;
   margin-bottom: 60px;
   list-style:none;
}
.sub-menu li{
   border-bottom: 1px #ddd solid;
}
.sub-menu a{
   color: #432;
   padding: 10px;
   display: block;
}
.su-menu a:hover{
   color: #obd
   ;
   
}
.ad{
   order: 1;
}




 /*MENU*/
 #menu{
   background-image: url(menu-bg.png);
   min-height: 70vh;
 }
 .menu-content{
   max-width: 560px;
   margin-top: 10%;
 }
 .menu-content .page-title{
   text-align: center;
 }
 .menu-content p{
   font-size: 1.125rem;
   margin: 10px 0 0;
 }
 .grid{
   display: grid;
   gap: 26px;
   grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
   margin-top: 6%;
   margin-bottom: 50px;
 }
 .big-box {
   grid-column: 1 / 3;
   grid-row: 1 / 3;
}
.big-box img {
   height: 92%;
   width: 100%;
   object-fit: cover;
}
/*CONTACT*/

#contact{
   background-image: url(contact-bg.jpg);
   min-height: 100vh ;
}

/*フォーム*/
form div{
   margin-bottom: 14px;
}
label{
   font-size: 1.125rem;
}
label{
   font-size: 1.125rem;
   margin-bottom: 10px;
   display:block;
}
input[type="text"],
input[type="email"],
textarea {
   background: rgba(255,255,255,.5);
   border: 1px #fff solid;
   border-radius: 5px;
   padding: 10px;
   font-size: 1rem;
}
input[type="text"],
input[type="email"]{
   width: 90%;
   max-width: 240px;
}
textarea {
   width: 100%;
   max-width: 480px;
   height: 6rem;
}
input[type="submit"]{
   border:none;
   cursor:pointer;
   line-height: 1;
}
/*店舗情報・地図*/
#location {
   padding: 4% 0;
}
#location .wrapper {
   display: flex;
   justify-content: space-between;
}
.location-info {
   width: 22%;
}
.location-info p {
   padding: 12px 10px;
}
.location-map {
   width: 74%;
}

/*iframe*/
iframe {
   width: 100%;
}
/*SNS*/
#sns {
   background: #FAF7F0;
   padding: 4% 0;
}
#sns .wrapper {
   display: flex;
   justify-content: space-between;
}
#sns .sub-title {
   margin-bottom: 30px;
}
.sns-box {
   width: 30%;
}



/*-------モバイル版---------------------*/
@media (max-width: 600px ) {
   .page-title {
      font-size: 2.5rem;
   }
   /*HEADER*/
   .main-nav{
      font-size:1rem;
      margin-top:10px;
   }
   .main-nav li{
      margin: 0 20px;
   }
   .page-header{
      flex-direction: column;
      align-items:center;
   }
   

   /*HOME*/
   .home-content{
      margin-top:20%;
   }
   .home-content p{
      margin: 0 45px 50px;
      font-size:large;
   }
   /*NEWS*/
   .news-contents{
      flex-direction: column;
   }
   article,
   aside{
      width: 100%;
   }
   #news .page-title{
      margin-top: 30px;
   }
   aside{
      margin-top: 60px;
   }
   .post-info{
      margin-bottom: 30px;
   }
   .post-date{
      width: 70px;
      height: 70px;
      font-size: 1rem;
      padding-top: 10px;
   }
   .post-date span{
      font-size: 0.875rem;
      padding-top: 2px;
   }
   .post-title {
      font-size: 1.375rem;
   }
   .post-cat{
      font-size:0.875rem;
      margin-top: 10px;
   }
   .post-title,
   .post-cat{
      margin-left: 80px;
   }
   /*MENU*/
   .menu-content{
      margin-top: 20%;
   }
   .big-box {
      grid-column: auto;
      grid-row: auto;
   }
   .big-box img {
      height: auto;
   }

   /*CONTACT*/
   #contact .page-title {
      margin-top: 40px;
  }

  /* フォーム */
  input[type="text"],
  input[type="email"],
  textarea {
      max-width: 90%;
  }
  /* 店舗情報・地図・SNS */
 #location .wrapper,
 #sns .wrapper{
   flex-direction: column;
 }
 .location-info,
 .location-map,
 .sns-box {
   width: 100%;
 }
 .sns-box {
   margin-bottom: 30px;
 }
}