@charset "UTF-8";

body {background: white ;
     font-family: MyWebFont;
     
     }
@font-face {
   font-family: MyWebFont;
   src: url('Hannari.otf') format("opentype");
}

h2{color:palevioletred}
h2 { font-size: 2em; }
p { line-height: 1.3em; }
em.osusume{font-size: 0.7em; color: black;}
em {
  font-style: normal; 
  font-weight: bold; 
  color: palevioletred; 
}

strong {
  font-style: normal; 
  font-weight: bold; 
  color: black; }
a { text-decoration: none;}
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: palevioletred; }



img {
    max-width: 100%;
    height: auto;
}


ul{
  padding-left:0;
}

li{
  list-style:none;
}



p.infobox {
    height:7em;
    overflow: auto;
    border: #DB7093 1px dashed;
    width:60%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    text-align: left;
}
   
 
@media screen and (min-width:481px) {

.boxA, .boxB, .box7, .box8, .shop, .copyright
    {width: 900px;
    text-align:center;
    margin-left: auto;
    margin-right: auto;}

.boxA     {display:flex;
               justify-content: center;
               padding: 0px 20px;
          }

.kokichi-ya mark  {
                    width: 60%;
                    margin-right: 20px;}

.boxA1          {
                  width: 40%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

}

.boxB {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.main.syasin {
  width: 70%;
  text-align: right;
}

.boxB1 {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.box5,
.box6 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.share ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

 


}


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

img[alt="????"], img[alt="2023"], img[alt="kokichi-yashop"]
{
   width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
}
 
.box6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.share ul {
  display: flex; 
  list-style-type: none;
}

.share li {
  margin-right: 10px; 
}


p.infobox {
    height:7em;
    overflow: auto;
    border: #DB7093 1px dashed;
    width:100%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    text-align: left;}
}