@charset "utf-8";



/*共通部分

----------------------------*/

html{

    font-size: 100%;

}

body{

    font-family: sans-serif;

    line-height: 1.7;

    color: #432;

	display: none;

}



.pan{

    margin-bottom:0px 0px 50px;

  }

  

  ol li{

    display: inline;

    font-size: 80%;

    color:#272623;

  }





a{

    text-decoration: none;

}



.slider img{

    max-width:1000px;

}



/* Layout */

.wrapper {

    max-width: 800px;

    width: 100%;

    margin: 0 auto;

    padding: 0 1rem;

}



.wrapper a {

    color:#333;

}



/*

HEADER

================================================ */

header {

    background: #D1D1D1;

    padding: 1rem 0;

    position: fixed;

    width: 100%;

	height:70px;

	top:-2px;

    z-index: 1;

	/*font-family:'Philosopher', sans-serif;*/

    font-family: "Yu Mincho","YuMincho", serif;

	

}

header .wrapper {

    display: flex;

    justify-content: space-between;

}

header a {

    color: var(--white);

    font-size: 1.5rem;

}

.btn-menu {

    position: absolute;

    top: 12px;

    right: 12px;

    border: 1px solid rgba(255,255,255,.5);

    color: #333;

    padding: .5rem 1rem;

}

.main-nav {

    background: rgb(255 255 255 / 70%);

    width: 0;

    position: absolute;

    z-index: 2;

    top: 77px;

    right: 0;

    overflow: hidden;

    transition: .5s;

}

.main-nav li {

    text-align: center;

    margin: 2rem 0;

}

.main-nav a {

    display: block;

    color: rgba(45, 39, 39, 0.712);



}

.main-nav.open-menu {

    width: 100%;

}







/* HOME

----------------------------*/



.home-content{

    text-align: center;

    margin-top: 10%;

}

.home-content p{

    font-size: 1.125rem;

    margin: 10px 0 42px;

}



/* 見出し

----------------------------*/

.page-title{

    font-size: 5rem;

    font-family: "Yu Mincho","YuMincho", serif;

    /*font-family: 'Philosopher',serif;*/

    text-transform: uppercase;

    font-weight: normal;

}



/* ボタン */

.button{

    font-size: 1.375rem;

    background: #0bd;

    color: #fff;

    border-radius: 5px;

    padding: 18px 32px;

}

.button:hover{

    background: #e31199;

}



/* 大きな背景画像 */



#home .page-title{

    text-transform: none;

}



/*News

----------------------------*/

#news{

    background-image:  url(../image/whitewall.png);

   

    margin-bottom:60px;

    object-fit: cover;

}



#news .page-title{

    text-align:center;



}





/* 記事部分 */



article{

    width: 74%;

	margin-top: 100px;

}

article img{

   

    margin-bottom:20px;

}



video{

	 margin-bottom:20px;
	margin-left: 1.25rem;

}

article p{

  font-family: "Yu Mincho","YuMincho", serif;

    margin-bottom:1rem;

}



/* サイドバー */

aside{

    width: 22%;

	margin-top: 200px;

}





.news-contents{

    display:flex;

    justify-content: space-between;

    margin-bottom: 50px;

}



.post-info{

    position:relative;

    padding-top:4px;

    margin-bottom: 40px;

}





.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-family:'Philosopher', sans-serif;*/

    font-size:6mm;

    font-weight:normal;

}

.post-title,

.post-cat{

  

}

.sub-title{

  font-family: "Yu Mincho","YuMincho", serif;

  /*font-family: 'Philosopher',serif;*/

  font-size:1.375rem;

  padding: 0 8px 8px;

  border-bottom: 2px #f5f4f4 solid;

  font-weight:normal;

}

aside p{

  font-family: 'Philosopher',serif;

  padding:12px 10px;

}

.sub-menu{

  margin-bottom:60px;

  list-style:none;

}

.sub-menu li{

  border-bottom:1px solid #ddd;

  line-height: 3rem;

  padding: 0 8px 8px;

}

.sub-menu a{

  color:#432;

  padding:10px;

  display:block;

}

.sub-menu a:hover{

  color:#b22222;

}





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

  .chart-wrap .row {

    padding: 0 40px 0 160px;

  }

  .chart-wrap .label {

    text-align: right;

    padding-left: 10px;

  }

  .chart-wrap .number {

    text-align: left;

    padding-right: 0;

  }

  .chart-wrap .row {

    padding: 0 50px 0 100px;

}

}



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

.chart-wrap .number {

    width: 45px;

    padding-right: 5px;

}





/*menu-grid　開始

----------------------------*/

#grid{

   background-image: url(../../image/CAFE/coffee_0210.png);

    min-height:100vh;

    object-fit: cover;

}

.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;

        grid-gap:26px;

        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

         margin-top: 6%;

         margin-bottom: 50px;  

    }

.item img:hover{

    box-shadow: 20px 20px 20px rgba(0,0,0,0.5);

    transform: translateY(-5px);

    transition-duration: 0.5s;

    margin-top:-25px;

    border-radius:5%;

}





/*fontawesome装飾

----------------------------*/

.pagetop a{

	display:block;

	text-align:center;

	text-decoration:none;

}

.pagetop img{

 	 cursor: pointer;

}

.pagetop:hover{

  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);

  transform: translateY(-10px);

  transition-duration: 0.5s;

}







/*footer

----------------------------*/

footer{

    background: #d1d1d1;

    text-align: center;

    padding:26px 0;

}



footer p{

    color:#fff;

    font-size:0.875rem

}





/* contact

----------------------------*/



#contact{

    background-image:url(../../image/Interior/flower_w600-contact.png);

        min-height:100vh;

}



/* フォーム

----------------------------*/

form div{

    margin-bottom:14px;

}

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;

    font-size:1rem;

}



input[type="text"],

input[type="email"],{

    width:100%;

    max-width:240px;

}



textarea{

    width:100%;

    max-width: 480px;

    height:6rem;

    

}

input[type="submit"]{

    border:none;

    cursor:pointer;

    line-height:1;

}



/* iframe

----------------------------*/



iframe{

    width:100%;

}



/*レスポンシブ開始

----------------------------*/

@media (max-width: 600px){

  .page-title{

    font-size:2.5rem;

  }

	

  /* HOME */

  .home-content{

      margin-top: 20%;

  }



  /* NEWS */

.news-contents{

  flex-direction: column;

}

    

aside,article{

  width:100%

    

 }   

    

    

#news .page-title{

  margin-top:30px;

}

aside{

  margin-top:60px;

    }

.post-info{

  margin-bottom:30px;

  margin-left:-80px;

}

	

.post-date{

  width:70px;

  height:70px;

  font-size:1rem;

}

.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;

    }

      

 /* grid */

 .grid{

        grid-column:auto;

        grid-row:auto;

    }   

    

    .grid img{

        width:94%;

        height:80%;

    }   

    

   

.menu-content{

    margin-top:20%;

} 

    

  /* contact */  

    #contact .page-title{

        margin-top:40px;

}

	

    

  /* フォーム */ 

input[type="text"],

    input[type="email"]

    textarea{

        max-width:100%;

}

}

	

@media (min-width: 600px) {	

	

/* Header */

    .btn-menu {

        display: none;

    }

    .main-nav {

        width: 100%;

        position: static;

        display: flex;

    }

    .main-nav li {

        margin: 0 0 0 1.5rem;

    }

	}