@charset "UTF-8";

body {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  background-color: #FFFCF7;
  color: #5D5654;
  overflow-x: hidden;
  line-height: 250%;
  letter-spacing: 0.05em;
}
@media screen and (max-width:500px){
  body {
    line-height: 220%;
    font-size: 14px;
  }
}
@media screen and (max-width:390px){
  body {
    font-size: 13px;
  }
}


.subPage .main .bottun_illust{
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
  padding: 0 5%;
}

.main .bottun_illust p{
  text-align: center;
  color: #5D5654;
}

.main .bottun_illust img {
  width: 60%;
  min-width: 150px;
}

.subPage .main .bottun_illust h2{
  padding: 20px 0;
  font-size: 18px;
}
@media screen and (max-width:800px){
  .subPage .main .bottun_illust {
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 0px;
  }
  .subPage .main .bottun_illust .illust1,
  .subPage .main .bottun_illust .illust2,
  .subPage .main .bottun_illust .illust3,
  .subPage .main .bottun_illust .illust4{
    width: 49%;
    max-width: 250px;
    padding-bottom: 50px;
  }
  .subPage .main .bottun_illust h2{
    padding: 10px;
    font-size: 14px;
  }

  .main .bottun_illust img {
  width: 50%;
  min-width: 100px;
}

}

@media screen and (max-width:390px){
  .subPage .main .bottun_illust .illust1,
  .subPage .main .bottun_illust .illust2,
  .subPage .main .bottun_illust .illust3,
  .subPage .main .bottun_illust .illust4{
    width: 45%;
    padding-bottom: 30px;
  }

}

/****** ホバー ******/
.switch_image1 {
  position: relative;
}

.switch_image1 img {
  transition: opacity 0.5s;
}
.switch_image1:hover img:first-of-type {
  opacity: 0;
  
}
.switch_image1 img:last-of-type {
  position: absolute;
  top: 0%;
  left: 25%;
  opacity: 0;
}
.switch_image1:hover img:last-of-type {
  opacity: 1;
}

.main .tax_text{
  text-align: right;
  margin: 50px 50px 200px;
}
@media screen and (max-width:800px){
  .main .tax_text{
  text-align: center;
  margin: 0px 50px 150px;
}
}

@media screen and (max-width:500px){
  .main .tax_text{
  margin: 20px 0px 100px;
  font-size: 13px;
}
}



/* メニューリストのフォントサイズ */
.listText2{
  font-size: 90%;
}

.listText2 .space{
  line-height: 1.5em;
}


@media screen and (max-width:800px){
  .listText{
    font-size: 70%;
  }
  .listText2{
    font-size: 70%;
  }
  .space{
    line-height: 1.5em;
  }
  }
  @media screen and (max-width:515px){
    .listText{
      font-size: 80%;
    }
    .listText2{
      font-size: 80%;
    }
    }
  @media screen and (max-width:390px){
      .listText{
        font-size: 80%;
      }
      }




/****** クレープ *******/

.main .crepe h1{
  text-align: center;
  margin-bottom: 5%;
}

.main .crepe h1 img{
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.main .crepe {
  background: url(../images/dot1.png) no-repeat left top/contain;
  background-size: 30%;
}

.main .crepe .crepe_ichioshi{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.main .crepe .crepe_ichioshi2{
  width: 50%;
  padding: 10px;
}
/*---------------------  ↓↓↓↓↓ポップアップ ↓↓↓↓↓---------------------------*/
#popup,
#popup2,
#popup3 {
  display: none; /* label でコントロールするので input は非表示に */
}

.crepe .popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  display: block;
  aspect-ratio: 24 / 29;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  background-image: url(../images/crepe/crepe_ichioshi.png);
  transition: .3s;
}
.crepe .popup-open:hover{
  background-image: url(../images/crepe/crepe_pic_ichioshi.png);
}
.crepe .popup-overlay {
  display: none;
}
#popup:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.crepe .popup-window1{
    width: 90vw;
    max-width: 560px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.crepe .popup-text {
  margin: 0;
}

.crepe .popup-text:not(:last-of-type) {
  margin-bottom: 1em
}

.popup-close {
  cursor: pointer;
}
/*---------------------  ↑↑↑↑↑↑↑ポップアップ ↑↑↑↑↑↑↑
---------------------------*/

.crepe .crepe_responsive{
  display: none;
}/* レスポンシブ画像非表示 */


.main .crepe .crepe_ichioshi .blure_text{
  width: 50%;
  padding: 10px;
  line-height: 300%;
  letter-spacing: 0.1em;
  font-size: 14px;
  text-align: center;
}

.main .crepe h3{
  font-size: 24px;
  text-align: center;
  padding-bottom: 30px;
}

.main .crepe .crepe_menulist{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto ;
  text-align: center;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 33% 33% 33%;
  list-style-type: none;
  align-items: baseline;
  padding: 0 5% 200px;
  background: url(../images/dot2.png) no-repeat right bottom/30%;
}
.main .crepe .crepe_menulist li{
  padding: 10px 5%;
}
.main .crepe .crepe_menulist img{
  width: 60%;
  max-width: 150px;
  padding-bottom: 20px;
}

/* ホットクレープ */
.main .crepe  h2{
  text-align: center;
}
.main .crepe  h2 img{
  width: 100%;
  max-width: 350px;
  margin-bottom: 50px;
}
.main .crepe .wrap_hotcrepe{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 100px;
}
.main .crepe .wrap_hotcrepe img{
  width: 50%;
  max-width: 300px;
}
.main .crepe .wrap_hotcrepe .hotcrepe_list{
  margin: auto 3%;
}
.main .crepe .wrap_hotcrepe .hotcrepe_listWrap{
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 5%;
}
.main .crepe .wrap_hotcrepe .hotcrepe_listWrap dt{
  width: 15rem;
}
/* ホットクレープ 
*/

/* トッピング */
.main .crepe h4{
  font-family: "Mochiy Pop One", sans-serif;
  color: #f29e3b;
  margin: 0 auto;
  padding: 30px 0 10px;
  text-align: center;
}
.main .crepe .crepe_topping{
  background-color: #f29e3b33;
  border-radius: 20px;
  text-align: left;
  padding-bottom: 30px;
  width: 60%;
  margin: 0 auto;
}
.main .crepe .topping_listWrap{
  display: flex;
  justify-content: center;
}
.main .crepe .topping_listWrap dt{
  width: 12rem;
  padding-right: 1rem;
}
.main .crepe .crepe_toppingWrap{
  padding: 0 0 250px;
  background: url(../images/mimoza_taba.png) no-repeat 15% 50% / 15%;
}
/* トッピング 
*/


@media screen and (max-width:900px){
  .main .crepe .crepe_menulist{
    width: 100%;
    padding: 0 0 200px;
  }
  .main .crepe .wrap_hotcrepe{
    display: block;
    text-align: center;
  }
  .main .crepe .wrap_hotcrepe img {
    width: 100%;
    min-width: 100px;
    max-width: 230px;
    margin-bottom: 50px;
  }
  .main .crepe .wrap_hotcrepe .hotcrepe_list{
    margin: auto 0;
    line-height: 1.5em;
  }
  .main .crepe .wrap_hotcrepe .hotcrepe_listWrap dt{
    width: 80%;
    max-width: 60%;
  }
  .main .crepe .wrap_hotcrepe .hotcrepe_listWrap dd{
    width: 80%;
    max-width: 40%;
  }
}

@media screen and (max-width:800px){
.main .crepe .crepe_ichioshi {
    display: block;
    padding: 0;
}
.main .crepe .crepe_ichioshi2{
  display: none;
}
.main .crepe .crepe_responsive{
  display: block;
}
.main .crepe .crepe_responsive_flex{
  display: flex;
  justify-content: space-evenly
}
.main .crepe .crepe_responsive img{
  width: 50%;
  margin: 20px auto;
}
.main .crepe h3{
  font-size: 24px;
}
.main .crepe .crepe_ichioshi .blure_text{
  width: 80%;
  margin: 20px auto;
}
}

@media screen and (max-width:500px){
  .main .crepe .wrap_hotcrepe img{
    max-width: 200px;
  }
  .main .crepe .crepe_topping{
    width: 90%;
  }
  .main .crepe .crepe_toppingWrap{
    background-position: 0% 50%  ;
}
}
@media screen and (max-width:390px){
  .main .crepe h3{
    font-size: 20px;
  }
  .main .crepe .blure_text{
    padding-bottom: 50px;
    font-size: 13px;
  }
  .main .crepe .wrap_hotcrepe{
    display: block;
  }
  .main .crepe .wrap_hotcrepe img{
    width: 50%;
    max-width: 250px;
  }
}

/******* アサイー *******/


.main .acai h1{
  text-align: center;
  margin-bottom: 5%;
}
.main .acai h1 img{
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
/***** ポップアップ ******/
.main .acai .acai_ichioshi2{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.acai .acai_ichioshi2_inner{
  width: 50%;
  padding: 10px;
}
.main .acai .soft_ichioshi2_inner{
  width: 40%;
}
.acai .popup-open2 {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  display: block;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  background-image: url(../images/acai/acai_ichioshi.png);
  transition: .3s;
}
.acai .popup-open2:hover{
  background-image: url(../images/acai/acai_pic_ichioshi.png);
}
.acai .popup-overlay2 {
  display: none;
}
#popup2:checked ~ .popup-overlay2 {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.acai .popup-window2{
    width: 90vw;
    max-width: 560px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/***** ポップアップ 
******/

.acai .acai_responsive{
  display: none;
}/* レスポンシブ画像非表示 */

.main .acai .acai_text{
  width: 50%;
  padding: 10px 10px 50px 10px;
  line-height: 300%;
  letter-spacing: 0.1em;
  font-size: 14px;
  text-align: center;
}

/* トッピング */
.main .acai h3{
  font-size: 24px;
  padding-bottom: 30px;
  text-align: center;
  margin: 0 auto;
}
.main .acai .acai_toppingWrap{
  background-color: #f29e3b33;
  border-radius: 20px;
  padding: 30px 0;
  width: 95%;
  margin: 0 auto 250px;
  text-align: center;
}
.main .acai .acai_toppingWrap h5{
  font-family: "Mochiy Pop One", sans-serif;
  color: #f29e3b;
  text-align: center;
  padding-left: 5%;
  padding-bottom: 3%;
}
.main .acai .acai_topping{
  display: flex;
  line-height: 1.5;
  justify-content: space-evenly;
}
.main .acai .acai_topping div{
  width: 25rem;
}
.main .acai .acai_topping .acaitpgWrap{
  display: flex;
  justify-content: center;
  
}
.main .acai .acai_topping .acaitpgWrap dt{
  width: 15rem;
  padding-bottom: 15px;
  text-align: left;
}
.main .acai .acai_topping .acaitpgWrap dd{
  text-align: left;
  width: 6rem;
  padding-bottom: 15px;
}
/* トッピング 
*/

.acai .acaiWrap{
  background: url(../images/dot3.png) no-repeat left top / 30%;
}

@media screen and (max-width:800px){
.main .acai .acai_ichioshi2 {
  display: block;
  padding: 0;
}
.acai .acai_ichioshi2_inner{
  display: none;
}
.main .acai .acai_responsive{
  display: block;
}
.main .acai .acai_responsive_flex{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}
.main .acai .acai_responsive_flex img{
  width: 50%;
}
.main .acai .acai_responsive .responsive1{
  margin-right: 30%;
  position: relative;
}
.main .acai .acai_responsive .responsive2{
  position: relative;
  text-align: left;
  margin-left: 30%;
  top: -80px;
}
.main .acai h3{
  font-size: 24px;
}
.main .acai .acai_ichioshi2 .acai_text{
  width: 80%;
  margin: 20px auto;
}
.main .acai .acai_toppingWrap h5{
  text-align: center;
  font-size: 20px;
}
.main .acai .acai_toppingWrap h5{
  padding-left: 0%;
  padding-bottom: 5%;
}
.main .acai .acai_topping{
  font-size: 13px;
  display: block;
}
.main .acai .acai_topping .acaitpgWrap dt{
  width: 12rem;
  text-align: left;
  padding-right: 1rem;
}
.main .acai .acai_topping .acaitpgWrap dd{
  text-align: left;
  width: 4rem;
  padding-bottom: 15px;
}
.main .acai .acai_toppingWrap {
  width: 80%;
}
.main .acai .acai_topping div{
  padding: 0 3%;
  width: 100%;
}
}

@media screen and (max-width:500px){
  .main .acai .acai_ichioshi2 {
    padding: 0 0%;
    width: 100%;
    overflow-x: hidden;
}
.main .acai .acai_responsive .responsive1{
  margin-right: 30%;
  position: relative;
}
.main .acai .acai_responsive .responsive2{
  position: relative;
  text-align: left;
  margin-left: 30%;
  top: -40px;
  
}
.main .acai .acai_ichioshi2 .acai_text {
  width: 80%;
  margin: 0 auto;
}
.main .acai h3{
    font-size: 22px;
    padding-bottom: 10px;
  }
  .main .acai .acai_topping div{
    padding: 0 3%;
    width: 100%;
  }
}
@media screen and (max-width:390px){
  .main .acai .acai_topping div{
    width: 100%;
}
.main .acai h3{
  font-size: 20px;
}
}



/******* ソフト *******/
.main .softcream h1{
  text-align: center;
  margin-bottom: 5%;
}
.main .softcream h1 img{
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.main .softcream .soft_ichioshi2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.main .softcream .soft_ichioshi2_inner{
  width: 50%;
  padding: 10px;
}

/******* ポップアップ *******/
.softcream .popup-open3 {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  display: block;
  aspect-ratio: 620 / 877;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  background-image: url(../images/soft/soft_ichioshi.png);
  transition: .3s;
}
.softcream .popup-open3:hover{
  background-image: url(../images/soft/soft_pic_ichioshi.png);
}
.softcream .popup-overlay3 {
  display: none;
}
#popup3:checked ~ .popup-overlay3 {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.softcream .popup-window3{
    width: 90vw;
    max-width: 560px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.softcream .popup-overlay3 .popup-window3 .soft_pic1{
  width: 100%;
}
/******* ポップアップ 
*******/

.softcream .soft_responsive{
  display: none;
}/* レスポンシブ画像非表示 */

.main .softcream .soft_text{
  margin: auto 0;
  width: 50%;
  line-height: 300%;
  letter-spacing: 0.1em;
  font-size: 14px;
  text-align: center;
}
.main .softcream .softback{
  background-image: url(../images/dot4.png),url(../images/dot5.png);
  background-repeat: no-repeat;
  background-position: left 10% ,right 70%;
  background-size: 25%;
}


.main .softcream h3{
  padding-bottom: 30px;
  font-size: 30px;
  text-align: center;
}

.main .softcream .soft_menulist{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto ;
  text-align: center;
  display: grid;
  grid-template-rows: 33% 33% 33%;
  grid-template-columns: 25% 25% 25% 25%;
  list-style-type: none;
  align-items: baseline;
  padding: 0 8% 100px;
  }
  .main .softcream .softback3{
    background: url(../images/dot6.png) no-repeat left bottom / 20%;
  }
  .main .softcream .soft_menulist li{
    padding: 10px 5% ;
    width: 90%;
  }
  .main .softcream .soft_menulist li img{
   padding: 0 15% 20px;
  }
.main .softcream .wrap_softothers{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  }

.main .softcream .title_softothers{
  width: 100%;
  max-width: 350px;
  text-align: center;
  margin: 0 auto;
  }

.main .softcream .title_softothers img{
  width: 100%;
  max-width: 220px;
  }
.main .softcream .soft_others{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 100px;
}

.main .softcream .koaice{
  width: 100%;
  max-width: 400px;
  padding-right: 5%;
}
.main .softcream .soft_others div{
  display: flex;
  padding-left: 5%;
}
.main .softcream .soft_others dl{
margin: auto 0;
text-align: center;

}

.main .softcream .soft_others dt{
  width: 100%;
  min-width: 8rem;
  padding-bottom: 1rem;
}
.main .softcream .soft_others dd{
  width: 100%;
  min-width: 5rem;
}
.main .softcream h4{
  font-family: "Mochiy Pop One", sans-serif;
  color: #f29e3b;
  margin: 0 auto;
  padding: 30px 0 10px;
  text-align: center;
}
.main .softcream .soft_topping {
  background-color: #f29e3b33;
  border-radius: 20px;
  text-align: center;
  padding-bottom: 30px;
  width: 60%;
  margin: 0 auto;
}
.main .softcream .soft_listWrap{
  display: flex;
  justify-content: center;
  line-height: 1.5;
}
.main .softcream .soft_list dt{
  width: 12rem;
  padding-right: 1rem;
  text-align: left;
  padding-bottom: 15px;
}

.main .softcream .soft_toppingWrap{
  padding: 0 0 300px;
  background: url(../images/mimoza_taba.png) no-repeat 15% 50% / 15%;
}


@media screen and (max-width:800px){
  .main .softcream .soft_ichioshi2 {
    display: block;
    padding: 0;
  }
  .main .softcream .soft_ichioshi2_inner{
    display: none;
  }
  .main .softcream .soft_responsive{
    display: block;
  }
  .main .softcream .soft_responsive_flex{
    display: flex;
    justify-content: space-evenly
  }
  .main .softcream .soft_responsive_flex img{
    width: 50%;
    margin: 20px auto;
  }
  .main .softcream .soft_text h3{
    font-size: 24px;
  }
  .main .softcream .soft_ichioshi .soft_text{
    width: 80%;
    margin: 0 auto;
  }
  .main .softcream .soft_menulist li{
    width: 100%;
  }
  .main .softcream .soft_menulist{
    padding: 0 0%;
  }
  .main .softcream .soft_others dt{
    width: 100%;
    padding-bottom: 1rem;
  }
  .main .softcream .soft_ichioshi {
    display: block;
    padding: 50px 0;
  }
  .main .softcream .soft_ichioshi a{
    display: flex;
    width: 100%;
  }
  .main .softcream .soft_ichioshi a img{
    width: 50%;
    min-width: 0;
  }
  .main .softcream .soft_ichioshi .soft_text{
    padding: 10px 10px 50px;
  }
}

@media screen and (max-width:500px){
  .main .softcream .soft_ichioshi {
    padding: 0;
  }
  .soft_ichioshi2{
    padding: 0 0%;
    width: 100%;
    overflow-x: hidden;
}
main .softcream .soft_ichioshi a {
  width: 100%;
  min-width: 500px;
  margin: 0 auto;
}
.main .softcream h3{
  font-size: 22px;
  text-align: center;
}

main .softcream .soft_ichioshi .soft_pic2{
  margin-left: -15%;
}
  .main .softcream .soft_menulist {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 33% 33% 33% ;
    list-style-type: none;
    align-items: baseline;
    padding: 0 8% 100px;
}
.main .softcream .soft_menulist{
  padding: 0 0% 50px;
}
.main .softcream .soft_others {
  padding: 50px 5% 0;
display: block;
}
.main .softcream .soft_others div {
  padding-left: 0%;
}
.main .softcream .koaice {
  padding-right: 0%;
  width: 80%;
  margin: 0 auto;
}
.main .softcream .soft_topping{
  width: 90%;
  
}
.main .softcream .soft_toppingWrap{
  background-position: 0% 50%  ;
}
}
@media screen and (max-width:390px){
  main .softcream .soft_ichioshi .soft_pic2{
    margin-left: -20%;
  }

}

/******* 季節限定・ドリンク *******/
.main .seasonal h1{
  text-align: center;
  margin-bottom: 10%;
}
.main .seasonal h1 img{
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}


.main .seasonal .ringoTitle{
  width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.main .seasonal .ringoame_dot{
  background: url(../images/dot7.png) no-repeat 5% 40% / 40%;
}

.main .seasonal .title_ringoame img{
  width: 100%;
  max-width: 350px;
  margin-bottom: 50px;
}

.main .seasonal .ringoame{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 5% 200px;
    align-items: center;
}
.main .seasonal .ringoame div{
  display: flex;
}
.main .seasonal .ringoame dt{
  width: 20rem;
  padding-bottom: 1rem;
}
.main .seasonal .ringoame dd{
  width: 5rem;
}

.main .seasonal .title_drink{
  width: 100%;
  max-width: 250px;
  margin: 0 auto 50px;
}
.main .seasonal .title_drink img{
  width: 100%;
  max-width: 400px;
}
.main .seasonal .drink{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 3% 200px;
}
.main .seasonal .drink .seasonal_pic{
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  background: url(../images/dot8.png) no-repeat top right / 60%;
}

.main .seasonal .drink dl div{
  display: flex;
  justify-content: center;
}
.main .seasonal .drink dt{
  width: 25rem;
  padding-bottom: 1rem;
}
.main .seasonal .drink dd{
  width: 5rem;
}
.main .seasonal .drink .juice_text{
  font-size: 15px;
  text-align: center;
  padding-bottom: 15px;
}
.main .seasonal .drink .applejuice div{
  display: flex;
  text-align: left;
}
.main .seasonal .drink .applejuice dt{
  width: 25rem;
}

.main .seasonal .fruitcalendar p{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
}
.main .seasonal .fruitcalendar .pc{
  display: block;
  padding:0 1em;
}
.main .seasonal .fruitcalendar .sp{
  display: none;
}

.main .seasonal .title_fruit{
  margin: 0 auto 20px;
  text-align: center;
}

.main .seasonal .title_fruit img{
  width: 100%;
  max-width: 400px;
}
.main .seasonal .fruit_text{
  text-align: center;
  margin: 0 5% 50px;
}


.main .seasonal .seasonal_menulist{
  width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 25% 25% 25% 25%;
    list-style-type: none;
    align-items: baseline;
    padding: 0 8% 20px;
}
.main .seasonal .seasonal_menulist li{
  width: 80%;
  padding: 10px;
}

.main .seasonal .seasonal_menulist li img{
  padding-bottom: 20px;
}

.main .seasonal .etc{
  text-align: center;
  padding-bottom: 150px;
}

.main  .message{
  width: 100%;
  max-width: 1200px;
  padding: 200px 15%;
  letter-spacing: 30%;
  line-height: 250%;
  text-align: center;
  
  }

  .main .messageWrap{
    background-image: url(../images/pic_acai_menu2.png),url(../images/pic_crmbrure_menu2.png),url(../images/pic_spft_menu2.png),url(../images/pic_ringo_menu2.png);
  background-repeat: no-repeat;
  background-position: 50% 10%,20% center,80% center,60% bottom;
  background-size: 150px;
  }

.main  .message .message1{
  width: 20rem;
  padding-bottom: 100px;
  transform: translateX(15vw)
}



.main  .message .message2{
  width: 18rem;
  transform: translateX(30vw);
}

.main .clender_dot{
  background: url(../images/dot9.png) no-repeat left 28% / 20%;
}

.main .seasonal_dot{
  background: url(../images/dot10.png) no-repeat right bottom / 30%;
}

@media screen and (max-width:800px){
  .main .seasonal .ringoame {
    display: block;
    text-align: center;
  }
  .main .seasonal .ringoame div {
    justify-content: center;
  }
  .main .seasonal .ringoame dt {
    text-align: left;
  }
  .main .seasonal .ringoame_dot{
    background-position:  10% 30%;
  }

  .main .seasonal .drink{
    display: block;
    margin: 0 auto;
  }
  .main .seasonal .fruitcalendar p{
    width: 100%;
    margin: 0 0% 100px;
    
  }
  .main  .message{
    width: 100%;
    max-width: 800px;
    padding: 250px 0 200px;
    letter-spacing: 30%;
    line-height: 250%;
    text-align: center;
    }
    .main  .message .message1{
      width: 50%;
      padding-bottom: 100px;
      transform: translateX(0);
      margin: 0 auto;

    }
    .main  .message .message2{
      width: 50%;
      transform: none;
      margin: 0 auto;
    }
    .main .messageWrap{
      background-position: 50% 10%,10% 50%,90% 50%,70% bottom;
      background-size: 100px;
    }
  }

@media screen and (max-width:500px){
  
  .main .seasonal .ringoame {
    display: block;
    text-align: center;
  }
  .main .seasonal .title_ringoame img {
    max-width: 280px;
  }
  .main .seasonal .ringoame_dot{
    background-position:  15% 25%;
    background-size: 50%;
  }
  .main .seasonal .drink {
    padding: 0px 3% 200px;
}
.main .seasonal .drink dt{
  width: 100%;
  max-width: 250px;
}
.main .seasonal .drink dd{
  width: 100%;
  max-width: 70px;
}
.main .seasonal .drink .juice_text {
  max-width: 300px;
  margin: 0 auto;
  font-size: 12px;
  text-align: center;
}
.main .seasonal .drink .applejuice dt {
  width:100%;
  font-size: 14px;
}

.main .seasonal .drink .seasonal_pic{
  max-width: 200px;
}

.main .seasonal .fruitcalendar .pc{
  display: none;
}
.main .seasonal .fruitcalendar .sp{
  display: block;
}
.main .seasonal .seasonal_menulist{
  
  grid-template-rows: 33% 33% 33%;
  grid-template-columns: 33% 33% 33% ;
  padding: 0 0% 50px;
}
.main .seasonal .seasonal_menulist li{
  width: 100%;
}
.main .messageWrap{
background-position: 50% 10%,left 50%,right 55%,70% bottom;
background-size: 100px;
}
.main  .message .message1{
  transform: translateX(0)
}
.main  .message .message2{
  transform: translateX(0);
}
.main  .message .message1{
  width: 60%;

}
.main  .message .message2{
  width: 60%;
}
.main .clender_dot{
  background: url(../images/dot9.png) no-repeat left 25% / 20%;
}
}

@media screen and (max-width:390px){
  
  .main  .message .message2{
    /* width: 15rem; */
    transform: translateX(0);
  }
  
  .main .seasonal .drink{
    font-size: 14px;
  }
  .main .seasonal .drink dt{
    width: 15rem;
    padding-bottom: 1rem;
  }
  .main .seasonal .drink .juice_text{
    font-size: 12px;
}
  .main .seasonal .drink .applejuice dt{
    width: 15rem;
  }
  .main  .message .message1{
    width: 60%;
  }
  .main  .message .message2{
    width: 60%;
  }
}