@charset "utf-8";

 body {
     /* <uniquifier>: Use a unique and descriptive class name  
        <weight>: Use a value from 200 to 900*/
     font-family: "Noto Serif JP", serif;
     font-optical-sizing: auto;
     font-weight: 200;
     font-style: normal;
     font-size: 20px;
     line-height: 1.7;
 }

 .home {
     background-color: #023410;
 }

 .body-bg {
     background-color: rgba(222, 225, 217, 1);
 }


 .text {
     /* <uniquifier>: Use a unique and descriptive class name 
        <weight>: Use a value from 200 to 900*/
     font-family: "Noto Serif JP", serif;
     font-optical-sizing: auto;
     font-weight: 200;
     font-style: normal;
     font-size: 16px;
     line-height: 1.7;
     color: rgb(32, 32, 32);
 }



 /*class名をfont-titleに変更する(googlefontのCSS)*/
 .aref-ruqaa-regular {
     font-family: "Aref Ruqaa", serif;
     font-weight: 400;
     font-style: normal;
 }

 .h1 {
     width: 100%;
     display: block;
     font-family: "Aref Ruqaa", serif;
     font-weight: 700;
     font-style: normal;
     color: #ffffff;
 }


 a {
     text-decoration: none;


 }



 .global-header {
     /* position: relative; */
     position: fixed;
     z-index: 102;
     box-sizing: border-box;
     width: 100%;
     height: 100px;
     background-color: #023410;
     margin: 0 auto;
     display: flex;
     font-family: "Noto Serif JP", serif;
     font-optical-sizing: auto;
     font-weight: 200;
     font-style: normal;


 }

 .site-rogo {
     width: 100px;
     margin: 0 auto 0 auto;
     display: block;
 }



 .gnav {
     width: 42%;
     max-width: 570px;
     margin: 0 auto 15px auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     color: white;

 }


 .nav {
     width: auto;
     display: flex;
     margin: 0 auto;
     color: white;
     justify-content: center;
 }

 .a-nav {
     color: #fff;
 }


 .a-nav:hover {
     color: #b7bdad;


 }

 .filter {
     color: black;
 }

 .filter:hover {
     color: #ffffff;
 }



 .icon-menu {
     position: absolute;
     top: 57px;
     right: -140px;
 }

 .cart-icon-img {
     width: 12%;
     height: auto;

 }


 .btn {
     display: flex;
     margin: 5% auto;
     color: #fff;
     background-color: #39bd8a;
     /* text-align: center; */
     justify-content: center;
     align-items: center;
     text-decoration: none;
     border-radius: 50px;
     width: 230px;
     height: 50px;
     font-family: ヒラギノ丸ゴ ProN;
     font-size: 20px;
      /*transition: all 0.6s;
    box-shadow: 0px 2px 3px 0px #9E9E9E;	*/
 }

 .btn:hover {
     background-color: #ffffff;
     color: #39bd8a;
     border: #39bd8a solid 2px;
 }

.btn:active{
    background-color: #fff;
}


 .global-footer {
     width: 100%;
     padding: 1% 0;
     height: auto;
     margin: 0 auto;
     background-color: #023410;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-family: "Noto Serif JP", serif;
     font-optical-sizing: auto;
     font-weight: 200;
     font-style: normal;

 }

 .global-footer-wrapper {
     width: 65%;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 12px 0;
     border-top: 0.5px solid #b7bdad;
 }

 .footer-rogo {
     width: 100px;
     height: auto;
     display: flex;
     justify-content: center;
     padding:1%;
     margin: 0 auto;

 }

 .footer-rogo-img {
     width: 64%;
     display: flex;

 }


 .fnav {
     display: flex;
     justify-content: center;
     width: 450px;
     font-size: 15px;
     margin: 0 auto;
     color: white;
     align-items: center;
     padding: 1px 0;


 }


 .fnav_solid {

     padding: 0 5%;
     /* border-left: 1px solid white;  */
     border-right: 1px solid white;


 }


 .fnav_end {
     padding: 0 5%;

 }

 .copyright {
     font-size: 10px;
     color: rgb(190, 201, 193);
     display: flex;
     justify-content: center;
     padding: 0;
     margin: 0 auto;
 }

 /*パンくずリスト*/
 .breadcrumb-list {
     width: max-content;
     position: fixed; 
     top: 130px;
     left: 1%;
     box-sizing: border-box;
     padding: 1px; 
     z-index: 101;
     display: flex;
     font-family: sans-serif;
     font-size: 14px;
     font-weight: 400;
     color: #023410;
     background-color:rgba(222, 225, 217, 0.7);
     border-radius:10px;
    
 }


 .link_bread {
     color: #023410;
 }

 .link_bread:hover {
     color: #e8723c;

 }



 .main-container {
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding: 100px 0 0 0;
     background-color: #023410;
     position: relative;
     /* h1 position基点 */


 }

 .main-li {

     background-color: #023410;
 }


 .main-img {
     aspect-ratio: 1100 /550;
     width: 97%;
     height: auto;
     margin: 0 auto;
     object-fit: cover;

 }

 .main-title {
     width: 80%;
     font-family: "Aref Ruqaa", serif;
     font-weight: 400;
     font-style: normal;
     color: #ffffff;
     font-size: 62px;
     position: absolute;
     bottom: 40px;
     left: 62px;
     z-index: 900;
     text-shadow: 1px 2px 8px black;
 }






 .main-text-container {
     width: 100%;
     height: auto;
     padding: 2% 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #023410;

 }

 .main-text {
     font-size: 20px;
     color: white;
     justify-content: center;
     align-items: center;
 }

 .info-conteiner {
     width: 100%;
     height: auto;
     box-sizing: border-box;
     /* background-color: #e7f2f0; */
     background-color: #dee1d9;


 }

 .info-title-wrapper {
     width: 40%;
     margin: 0 auto;
     padding: 10% 0 0 0;
     display: flex;
     justify-content: center;

 }


 .info-title-img {
     width: 100%;
 }




 .info-wrapper {
     width: 70%;
     max-width: 1000px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 5% 0 10% 0;
     margin: 0 auto;


 }


 .info-date {
     width: 25%;
     line-height: 400%;
     text-align: center;
     border-bottom: 1px solid darkgrey;

 }

 .info-text {

     width: 75%;
     line-height: 400%;
     border-bottom: 1px solid darkgray;

 }

 .kashmir-lake {
     width: 100%;

 }

 .info-about-img {
     width: 100%;
     height: 100%;


 }

 .about-title-conteiner {
     width: 100%;
     display: flex;
     flex-direction: column;
     margin: 5% auto;
     justify-content: center;
     background-color: #dee1d9;
   

 }



 .about-titie-img {
     width: 30%;
     margin: 0 auto;
 }


 .index-about-flexbox {
     max-width: 1080px;
     margin: 0 auto;
     width: 70%;
     /*height: 500px; */
     display: flex;
     justify-content: center;
     background-color: rgba(222, 225, 217, 1);
 }



 .handworks-img {
     width: 300px;
     /*height: 350px;*/
 }

 .about-flex-left {
     display: flex;
     flex-direction: column;
     width: 60%;
     padding: 0 0 0 5%; 

 }


 .read-more {
     margin: 5% auto;
     text-align: right;

 }





 .link_readmore {
     color: #023410;
     font-family: sans-serif;
 }

 .link_readmore:hover{
    color: #39bd8a;
 }




 .index-about-flex-right {
     width: 40%;
     display: flex;

     /* min-width: 380px;  
    height: 50%;*/

     padding: 10% 0 20% 4%;


 }



 /*aboutページ::::::::::::::::::::::::::::::::::::::::: */




 .section-about {
     position: relative;
 }

 /* position基点 */
 .about-map-container {
     position: relative;
     box-sizing: border-box;
     max-width: 1200px;
     height: auto;
     padding: 250px 0 0 0;
     background-color: #dee1d9;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin: 0 auto;
     background-image: url(posh-img/about-bg-map.png);
     background-repeat: no-repeat;
     background-position: 50% 400px;
     background-size: 65%;
     background-attachment: scroll;
 }


 .titie-wrapper {
     /* position: fixed; 
     top: 100px;
     left: 0%;
     z-index: 90;*/
     width: 100%;
     padding: 0px 0 40px 0; 
     display: flex;
     justify-content: center;
     background-color: #dee1d9;
    

 }

 .about-titie-img2 {
     width: 30%;

 }


 .about-midashi {
     box-sizing: border-box;
     width: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin: 0 auto;
     padding: 200px 0 50px 0;

 }

 .midashi-img {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
     margin: 0 auto;


 }

 .margin-top {
     margin-top: 700px;
 }

 .about-flex-wrap {
     max-width: 1200px;
     height: auto;
     margin: 0 auto;
     /*height: 500px; */
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     box-sizing: border-box;
     padding: 3% 0;
 }


 .about-text {
     width: 600px;
     display: block;
     box-sizing: border-box;
     padding: 0 3% 3% 0;
     /* background-color: #bbbd39; */
 }

 .about-flex-right {
     max-width: 300px;
     display: flex;
     align-items: end;
     text-align: end;
     box-sizing: border-box;
     /* background-color: #e8723c; */
     height: 250px;

 }


 .contents-imgflame {
     width: 300px;
     height: 250px;
    
 }




 .about-contentsーimg {
   width: 300px;
    height: 250px;
    object-fit: cover;
 }

 /* .about-img-box { 
    display: flex;
   justify-content: right;
    width: 100%;
    height:auto;
    margin: 15% 0;

}*/









 /* shopページ；；；；；；；；；；；；；；；；；；；； */
 .page-bg {
     background-color: #dee1d9;

 }

 .shop-shop-title {
     /* position: fixed; 
     top: 0%;
     left: 0%;
     z-index: 90;*/
     width: 100%;
     padding: 160px 0 50px 0;


 }


 .shop-container {
     max-width: 1000px;
     height: auto;
     padding: 110px 0 0 0;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .h2-title {
     /*background-color: rgb(187, 224, 220);*/
     width: 100%;
     /*height: 50px;*/
     display: flex;
     justify-content: center;
     margin: 15% 0 10% 0;

 }



 .shop-title {
     position: relative;

 }

 .shop-title-img {
     width: 10%;

 }


 .main-container-flex {
     width: 100%;
     margin: 0 auto;
     display: flex;
     background-color: #dee1d9;
     font-family: ヒラギノ明朝 ProN;
 }


  #gallery .mix { 
     display: none;
 }


 /* カテゴリーリスト*/
 .shop_side-bar-left {
     position: sticky;
     height: 550px;
     /*hightがないとsticky効かない */
     top: 150px;
     left: 0%;
     z-index: 80;
     width: 30%;
     display: flex;
     flex-direction: column;
     font-size: 20px;

 }

 .titile-Category {
     display: flex;
     margin: 5% 0 2% 0;
     justify-content: center;
 }

 .category-title-img {
     width: 50%;
     text-align: center;

 }

 .category-list {
     width: 80%;
     height: auto;
     margin: 0 auto;
 }


 .category-btn {
    width: auto;
    height: auto;
     padding: 3%;
     margin: 5% 0;
     font-family: ヒラギノ明朝 ProN;
     font-size: 25px;
     box-shadow: 3px 3px #b7bdad;
     background-color: #cdd1c6;
     border-radius: 3px;
     /* line-height: 1; */

 }

 .category-btn:hover {

     color: white;
     background-color: rgb(161, 183, 183);
     box-shadow: 4px 4px rgb(149, 166, 166);
     background: #39bd8a;
     border-radius: 3px;

 }


 .link_to-item {
    color: #2e2e2e;
}

.link_to-item:hover {
    color:#39bd8a;

}



 /*shopアイテム一覧*/
 .shop-main-right {
     width: 70%;
     /*width: 973px;*/
     margin: 0 auto;
     box-sizing: border-box;
     padding: 0 0 0 5px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-content: flex-start;
     justify-content: space-around;
     font-family: sans-serif;
  

 }


 .img-cap-¥ {
     /* width: 30%; */
     width: 200px;
     height: auto;
     /*margin: 0 0 0 4%;*/
     margin-bottom: 8%;
     display: inline-block;
     flex-wrap: wrap;
     flex-direction: column;
     text-align: center;
 }


.shop-li-imgbox{
  width: 200px;
  height: 200px;
  border-radius: 10px;
  background-color:#ffffff ;
}

 .shop-li-img {
     width: 200px;
     height: 200px;
     object-fit: scale-down;
 }

 .caption_price {
     font-size: 18px;
     line-height: 150%;
     padding: 1%;

 }

 .tiffin-3tiers,
 .tumbler, 
 .tray{
     position: relative;

 }

 .tiffin-3tiers p,
 .tumbler p ,
 .tray p{
     position: absolute;
     top: 36%;
     right:14%;
     color: #39bd8a;
     text-shadow: 2px 2px 0px #ffffff;
     /* font-family: "Caveat", serif; */
     font-family: serif;
     font-optical-sizing: auto;
     font-weight: 600;
     font-style: normal;
     font-size: 40px;
     /* transform: rotate(-10deg); */
     transform: rotate(0deg);

     /* background-color: #bebbba; */

 }




 .shopguide-wrapper {
     width: 100%;
     height: auto;
     background-color: #023410;


 }

 .shopguide-section {

     max-width: 1000px;
     display: flex;
     flex-direction: column;
     height: auto;
     margin: 0 auto;
     padding: 2% 2% 0% 2%;
     background-color: #023410;
     /* border-bottom: 0.75px solid rgb(75, 104, 84); */
     color: white;
     font-family: ヒラギノ明朝 ProN;

 }

 .guide-titile {

     display: flex;
     margin: 0 auto;
     padding-top: 2%;
     justify-content: center;
     font-family: ヒラギノ明朝 ProN;
     font-size: 25px;

 }

 .guide-text-wrapper {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 5% 0%;

 }



 .guide-text {
     width: 50%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
     padding: 3%;
     margin: 0 auto;
     font-size: 15px;
     color: white;
     line-height: 1.7;
 }

 .item-wrapper {
     width: 100%;
     display: flex;
     flex-direction: column;

 }

 .item-title {
     /*background-color: rgb(158, 205, 205);*/
     width: 100%;
     /*height: 60px;*/
     display: flex;
     justify-content: center;
     margin-bottom: 3%;

 }

 .item-title-img {
     width: 10%;
     /*height: 60px;*/
     display: flex;
     justify-content: center;
 }


 .item-flexbox {
     max-width:1300px;
     min-width: 1000px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

 }

 .main-container-item {
     width: 100%;
     display: flex;
     /*background-color: #E4EBE8;*/

 }

 .item-container-left {
     width: 50%;
     height: auto;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     padding: 0;
     align-items: center;

 }

 .item-container-right {
     width: 50%;
     height: auto;
     margin: 0 auto;
     height: auto;
     box-sizing: border-box;
     padding: 0 3% 0 0;
     display: flex;
    

 }

 .item-l {
     width: 400px;
     height:400px;
     display: flex;
     justify-content: center;
     background-color: #ffffff;
     border-radius: 5%;
 }

 .item-l-img {
     object-fit: scale-down;
     width: 400px;
     height:auto;
     object-fit: contain;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 5%;
 }

 .item-s-wrapper {
     width: 400px;
     height: auto;
     /*width: 600px; 
height: 190px; */
     display: flex;
     margin: 5% 0 10% 0;
     border-radius: 5%;
     justify-content: space-between;


 }


 .item-s_li {
     width: 130px;
     height: 130px;
     border-radius: 5%;
     background-color:  #ffffff;
 }


 .item-s-img {
     width: 130px;
     height: 130px;
     object-fit: cover;
     /* padding: 3% 0; */
     /*width: 190px;
    height: 190px;*/
     border-radius: 5%;
     border: none
 }



 .text-item-wrapper {
    width: 90%;
    margin: 0 auto;
    font-family:  sans-serif;
    font-weight: 200;
    font-size: 16px;
 }

 .item-name,.item-price{
     font-size: 24px;
     font-weight: 600;     
 }


 .item-info-midashi{
    
  
    display: flex;
    margin: 12px 0 4px 0;
	align-items: center;
   color: #034717;
   font-weight: 600;
 }



.item-info-midashi:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	display: block;
}

.item-info-midashi:after {
	margin-left: .4em;
	background: #034717;
}

.item-info{
    display: flex;
    flex-direction: column;
}

 .item-price{
    width: max-content;
    width: 100%;
    padding: 10% 0 0 0;
    display: flex;
   justify-content: flex-end;

 }

 .small-font{
    font-size: 14px;
    font-weight: 400;
    padding: 0 0 0 5px ;
    font-family: sans-serif;
 }




 .btn_cart{
    width: 230px;
    height: 50px;
    font-size: 16px;
     background-color: rgb(234, 127, 6);
 }


 .btn_cart:hover{
    width: 230px;
    height: 50px;
    font-size: 16px;
     background-color: rgb(234, 127, 6);
     border:rgb(234, 127, 6) ;
     color: #ffffff;

 }

 .btn_cart:active {
    height: 50px;
     margin: 3% auto; 
     color: #e8723c;
     background-color: #ffffff;
     padding: 1%; 
     text-align: center;
     text-decoration: none;
     border-radius: 50px;
     border: 2px solid  #e8723c;
     font-family: ヒラギノ丸ゴ ProN;

 }

 /* contactページ：：：：：：：：：：：： */

 .contact-titile {

     width: 100%;
     margin-bottom: 5%;

     display: flex;
     justify-content: center;
 }



 .contact-titile-img {
     width: 15%;
     display: flex;
     justify-content: center;

 }

 .main-container-contact {
     width: 70%;
     max-width: 1080px;
     margin: 0 auto;
     font-size: 16px;
     padding: 10% 0;

     font-family: ヒラギノ明朝 ProN;



 }

 .c-text {
     text-align: center;
     margin: 5% auto;
     line-height: 1.7;


 }


 .mailform {
     margin: 5% auto;
     width: 60%;

 }


 .contact-bg-img {
     display: block;

 }



 /*.form{
    margin: 5% auto;
    background-color: #d75fd9;
    width: 55%;
    }*/



 .form-list {
     /*height: 100PX;*/
     padding: 3% 0;
     margin: 10% auto;
     border-radius: 0.3rem;



 }

 .form-flame {

     line-height: 2;
     border: 1px solid #ffffff;
     background-color: #ffffff;
     width: 100%;
 }








 /* PCに適用されるCSS */
 @media screen and (min-width:800px) {

     .nav-wrapper {
         display: none;
     }


     .r-rogo {
         display: none;
     }

     .r-rogo-img {
         display: none;
     }


     /* .r-cart-icon{
        display: none;
    } 
        */


     .r-main-container {
         display: none;
     }


 }




 /* タブレットレスポンシブ::::::::::::::::::::::: */

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

     .shop-container {

         height: auto;

     }
 



 }


 /*↓ここから800px以下に適用されるCSS（スマホ用） */
 @media screen and (max-width: 820px) {

     /* 
hamburger(ハンバーガーアイコン)
=================================== */
     .hamburger {
         position: absolute;
         right: 10px;
         top: 14px;
         width: 35px;
         height: 35px;
         cursor: pointer;
         z-index: 1001;
     }

     .hamburger__line {
         position: absolute;
         width: 35px;
         height: 1px;
         right: 0;
         background-color: #ffffff;
         transition: all 0.5s;
     }

     .hamburger__line--1 {
         top: 4px;
     }

     .hamburger__line--2 {
         top: 16px;
     }

     .hamburger__line--3 {
         top: 28px;
     }

     /*ハンバーガーがクリックされたら*/
     .open .hamburger__line--1 {
         transform: rotate(-45deg);
         top: 12px;
     }

     .open .hamburger__line--2 {
         opacity: 0;
     }

     .open .hamburger__line--3 {
         transform: rotate(45deg);
         top: 12px;
     }



     /* 
  sp-nav(ナビ)
  =================================== */
     .sp-nav {
         position: fixed;
         top: -100%;
         /* ハンバーガーがクリックされる前はWindow右部に隠す↓*/
         right: 0;
         width: 40%;
         /* 出てくるスライドメニューの幅 */
         height: 100vh;
         /*高さは任意で調整*/
         transition: all;
         z-index: 1000;
         overflow-y: auto;

     }

     /*ハンバーガーがクリックされたら右からスライド*/
     .open .sp-nav {

         top: 0;
     }

     /* 
  black-bg(ハンバーガーメニュー解除用bg)
  =================================== */
     .sp-bg {
         position: fixed;
         right: 0;
         top: 0;
         width: 40vw;
         height: 100vh;
         z-index: 5;
         background-color: #023410;
         opacity: 0.7;
         visibility: hidden;
         transition: all 0.5s;
         cursor: pointer;
         z-index: 100;
     }

     /*ハンバーガーメニューが開いたら表示*/
     .open .sp-bg {
         opacity: 0.8;
         visibility: visible;
     }

     .hum-nav_ul {
         width: 100%;
         padding: 40% 10%;
         font-size: 18px;
         font-family: serif;
         line-height: 3;
         color: #ffffff;
     }


     /* humリンク */
     .a-hum-link {
        position: relative;
         text-decoration: none;
         color: #ffffff;
     }

     .a-hum-link::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #ffffff;
        bottom: 1px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        }
        
        .a-hum-link:hover::after {
        visibility: visible;
        bottom: -4px; /*アニメーションが止まる位置*/
        opacity: 1;
        }
     
    
          /*パンくずリスト*/
 .breadcrumb-list {
    width: 100%;
    position: fixed;
    top: 52px;
    left: 0%;
    padding:6px 0 2px 3px; 
    z-index: 101;
    display: flex;
    justify-content:flex-start;
    font-size: 14px;
  font-weight: 400;
    color: #023410;
    border-radius:0;
    background-color:rgba(222, 225, 217, 0.9);

}


     .text {
         font-size: 14px;
     }

    
     .global-header {
         display: none;
     }

 .respnsive-header {
         position: fixed;
         z-index: 103;
         top: 0%;
         left: 0%;
         width: 100%;
         height: 60px;
         background-color: #023410;

     }


     .r-logo {
         width: 90px;
         height: 50px;
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 0 auto;
         text-align: center;
         padding-top: 8px;

     }


     .r-rogo-img {
         width: 60%;

     }



     .r-icon {

         /* position:fixed;*/
         padding-top: 4%;

     }

     .main-img {
         display: none;
     }


     

     .fnav {
         display: none;
     }

     .footer-rogo{
        padding: 0;
     }

     .footer-rogo-img {
        width: 50%;
    }
   

     .main-container {
         display: none;
     }

     .r-main-container {
         width: 100%;
         height: 700px;
         margin: 60px 0 0 0;
         display: flex;
         flex-direction: column;
         background-image: url(posh-img/r-main-img.png);
         background-repeat: no-repeat;
         background-attachment: scroll;
         background-size: cover;
         background-color: transparent;

     }

    

     .r-main-title {
         width: 100%;
         display: flex;
         flex-direction: column;
         margin: 0 auto;
         align-items: center;
         justify-content: center;
         font-family: "Aref Ruqaa", serif;
         font-weight: 400;
         font-style: normal;
         color: #ffffff;
         font-size: 42px;
         padding: 65% 0 0 0;
         text-shadow: 1px 2px 8px black;
     }


     .sub-title{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        font-family: "Aref Ruqaa", serif;
        font-weight: 400;
        font-style: normal;
        color: #ffffff;
        font-size: 20px;
        padding: 0;
        text-shadow: 1px 2px 8px black;
       
     }


     .main-text-container {
         display: none;
     }

     .main-text {
         display: none;
     }

     .info-title {
         width: 50%;
     }

     .info-wrapper {
         width: 90%;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         padding: 0% 5% 10% 5%;


     }




     .about-titie-img {
         width: 55%;
         margin: 5% auto;

     }

     .about-titie {
         width: 100%;
         text-align: center;
         padding-top: 20%;

     }


     .index-about-flexbox {
         display: flex;
         flex-direction: column;
         justify-content: center;
         margin: 0 auto;
         width: 100%;
     }


     .about-flex-left {
        width: 90%;
         margin: 0 auto;
         padding: 5% 0%;
         justify-content: center;



     }

     .flex-left-text {
         width: 100%;

     }





     .index-about-flex-right {
         margin: 0 auto;
         flex-direction: column;
         justify-content: center;
         width: 80%;
         /*width: 360px; 
    height: 360px;*/
         /*background-color: rgb(240, 231, 248);*/

     }


     .handworks-img {
         width: 60%;
         height: auto;
         margin: 10%;
         /*height: 350px;*/
     }


     .text {
         font-size: 16px;
         font-family: "Noto Serif JP", serif;

     }



     /* aboutページ::::::::::::::::::::::*/

     .about-map-container {
         width: 100%;
         height: auto;
         background-position: 50% 250px;
         background-size: 90%;
         padding: 150px 0 0 0;

     }

     /* .about-map-container { 
        position: relative;
         box-sizing: border-box;
         max-width: 1200px;
         height: 1500px;
        padding: 500px 0 0 0;
         background-color: #dee1d9;
      
         display: flex;
         flex-direction: column;
         justify-content: center;
         margin: 0 auto;
       background-image: url(posh-img/about-bg-map.png);
        background-repeat: no-repeat;
        background-position: 50% 80%;
        background-size: 70%;
        background-attachment: scroll; 
     }*/

     .titie-wrapper {
         padding: 0 0 0 0;

     }


     .about-titie-img2 {
         width: 50%;

     }

     .about-midashi {
         width: 70%;
         margin: 0 auto;
         padding: 30% 0 0 0 ;

     }



     .about-flex-wrap {
         max-width: 800px;
         height: auto;
         flex-direction: column;
         padding: 3% 0 0 0 ;
         /* background-color: #a3dcc6; */

     }

    

     .about-text {
         width: 90%;
         height: auto;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
         padding: 3% 0;
        
         /* background-color: #bbbd39; */
     }


     .contents-imgflame {
        width: 100%; 
        height: 330px;
        margin: 5% 0 0 0;
        background-color: #39bd8a;
    }


    .about-contentsーimg{
      width: 100%;
      height: 330px;
      object-fit: cover;
    }

     /* shopページ::::::::::::::::::::::::::: */

  
   
     .shop-container {
         width: 100%;
         padding: 90px 0 0 0;

     }

     .shopguide-section {

         display: block;
         flex-direction: column;
         background-color: #023410;
     }


     .guide-text-wrapper {
         display: flex;
         flex-direction: column;
         justify-content: center;
         /*width: 100%;*/
         padding: 5% 0%;


     }



     .guide-text {
         width: 80%;
         /*display: flex;*/
         /*flex-direction: row;*/
         justify-content: space-around;
         align-items: center;
         margin: 8% auto;
         font-size: 15px;
         color: white;
         line-height: 1.7;

     }

     .img-cap-¥ {
         width: 45%;
         /*width: 280px;*/
         /*margin: 0 0 0 4%;*/
         margin-bottom: 8%;
         display: inline-block;
         flex-wrap: wrap;
         flex-direction: column;
     }


     .main-container-flex {
         display: flex;
         flex-direction: column;

     }

   

     .shop_side-bar-left {
        position: initial;
        display: flex;
        flex-direction: column;
         width: 100%;
         height: auto;
         font-size: 16px;
         margin: 0 auto;
       
      
     }

     .titile-Category {
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }
   

     .category-title-img {
        width:  20%;
    }
     
    
     .category-wrapper {
        width: 100%;
        height: auto;
    }


     .category-list {
        width: 100%;
        margin: 7% auto;
      
    }
   
    
    .category-btn {
        width: 86%;
        padding: 1% 3%;
        margin: 2% auto;
        font-size: 16px;
    }
    

    

     .shop-main-right {
         width: 100%;
         margin: 3% auto;
         padding: 0 ;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         align-content: center;
         font-family: Arial, Helvetica, sans-serif;

     }




.img-cap-¥ {
    /* width: 30%; */
    width: 170px;
    height: auto;
    /*margin: 0 0 0 4%;*/
    margin-bottom: 8%;
    display: inline-block;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}


.shop-li-imgbox{
 width: 170px;
 height: 170px;
 border-radius: 10px;
 background-color:#ffffff ;
}

.shop-li-img {
    width: 170px;
    height: 170px;
    object-fit: scale-down;
}




.caption_price {
    font-size: 14px;
  
}

.tray p, .tiffin-3tiers p,
.tumbler p {
    right:15%;
    font-size: 34px;

}



   

     .main-container-item {
         width: 100%;
         display: flex;
         flex-direction: column;
         /*background-color: #E4EBE8;*/

     }

     .shop-title {
         padding-top: 25%;
     }

     .shop-title-img {
         width: 10%;
     }




 .item-title-img {
    width: 20%;
 }





 .item-flexbox {
    width: 100%;
    min-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;

     }


     .item-container-left {
         width: 100%;
         display: flex;
         margin: 0 auto;
         flex-direction: column;
         /*margin-left:3%;*/
         justify-content: center;
         align-items: center;


     }

     .item-container-right {
         width: 100%;
         padding: 0;
         display: flex;
         /*background-color: #d3d3cf;*/
     }

     .item-l {
        padding:0;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        background-color: #ffffff;
       
    }
   
    .item-l-img {
        object-fit: scale-down;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }


     .item-title {
         width: 100%;
         padding: 30% 0 10% 0;
         align-items: center;
     }




     .main-container-contact {
         width: 90%;
         margin: 0 auto;
         font-size: 14px;
         padding: 5% 0;

         font-family: ヒラギノ明朝 ProN;



     }

 }





 /* ↑ここまで（スマホ用）に適用されるCSS */