@charset "utf-8";
html, body {
    margin: 0px;
    padding: 0px;
   }
   
 body {
        font-family: "Noto Serif JP", serif;
        font-size: 1em;
        color: #745858;
        line-height:1.8em;
        background-color: #000000;
       }
     
        a{text-decoration: none;}
        a:link {color: #333333;}
         

   #container{
            background-color: #745858;
            margin: 0 auto;
            width: 100%;
            max-width :390px;
            background-image: url(img/chocopattern.png);
            background-size: contain;
            text-align: left;
             }

/*keyvisual*/
         .keyvisual{
            width: 100%;
            height: 390px;
            background-image: url(img/chocolate.top.jpg);
            background-size:cover;
            display: flex;
            align-items: flex-end;
         }

         .toptitle{
            width: 100%;
            text-align: center;
            padding-bottom: 0%;
            margin: 0 auto;
         }

/*nexttitle*/      
         .nexttitle{
            width: 390px;
            height: 159px;
            margin: 0 auto;
            background-size:cover;
            text-align: center;
            padding-bottom: 0%;
            display: block;
            position: relative;
            background-image: url(img/next.png);
         }

         .title{
             display: flex;
            justify-content: center;
            gap: 50px;
            color: #f6f7d6;
            font-size: 20px;
            /*position: absolute;
            top: 330px;*/
            padding: 28px 0 0 0;
            margin: 0 auto;
         }

         .title1 p,
         .title2 {
            margin: 0;
         }
      
         .line{
            /*margin: 50px 300px 100px 80px;
            position: absolute;
            top: 330px;*/
            padding: 20px;
         }
         
/*btn_area_kakikomi*/
         .btn_area_kakikomi{
            display: flex;
            align-items: flex-end;
            width: 347px;
            height: 148px;
            margin: 0 auto;
            background-size:cover;
            text-align: center;
            padding-bottom: 0%;
            display: block;
            position: relative;
         }

         .btn_photo{
            width: 352px;
            margin: 0 auto;
            position: relative;
         }

         .kakikomi1_midashi{
            color: #745858;
            justify-content: center;
            font-size: 15px;
            position: absolute;
            top: 5px;
            left: 20px;
            padding: 10px;
            margin: 0 auto;

         }

         .kakimomi{
            justify-content: center;
            color: #f6f7d6;
            font-size: 17px;
            position: absolute;
            top: 50px;
            left: 40px;
            padding: 20px;
            margin: 0 auto;
         }

 /*btn_area_kakikomi2*/        
         .btn_area_kakikomi2{
            display: flex;
            align-items: flex-end;
            width: 347px;
            height: 225px;
            margin: 0 auto;
            background-size:cover;
            text-align: center;
            padding-bottom: 0%;
            display: block;
            position: relative;
         }

         .btn_photo2{
            width: 347px;
            margin: 0 auto;
            position: relative;
         }

         .kakikomi2-midashi{
            color: #745858;
            justify-content: center;
            font-size: 15px;
            position: absolute;
            top: 10px;
            padding: 10px;
            top: 5px;
            left: 20px;
            margin: 0 auto;
         }

         .kakikomi2{
            display: flex;
            justify-content: center;
            gap: 65px;
            color: #f6f7d6;
            font-size: 17px;
            position: absolute;
            top: 60px;
            left: 55px;
            margin: 0 auto;
         }
         
        .kakikomi3{
            display: flex;
            justify-content: center;
            gap: 70px;
            color: #f6f7d6;
            font-size: 17px;
            position: absolute;
            top: 123px;
            left: 50px;
            margin: 0 auto;
         }

         
 
/*btn_area_kakikomi4*/
.btn_area_kakikomi4{
   display: flex;
   align-items: flex-end;
   width: 345px;
   height: 175px;
   margin: 0 auto;
   background-size:cover;
   text-align: left;
   padding-bottom: 0%;
   display: block;
   position: relative;
}

.btn_photo4{
   width: 352px;
   margin: 0 auto;
   position: relative;
}

.kakikomi4_midashi{
   color: #745858;
   justify-content: center;
   font-size: 15px;
   position: absolute;
   padding: 10px;
   top: 5px;
   left: 20px;
   margin: 0 auto;
}

.kakimomi4{
   justify-content: left;
  color: #f6f7d6;
 font-size: 17px;
 position: absolute;
 top: 50px;
 left: 25px;
 padding: 20px;
 margin: 0 auto;
}

/*footer*/
.footer{
   margin: 0;
   padding: 15px 20px 15px 20px;
   background-color: #745858
}

.mark{
   display: flex;
   justify-content: space-between;
}
.fa-solid{
   color: #fff;

}