@media screen and (max-width: 1024px) { body { background-size: 70%; background-position: right top 65vh; }
  .pc-display { display: none; }
  .sp-display { display: inherit; }
  .pc-flex { display: block; }
  .container { width: 96%; min-width: 96%; height: auto; margin: 0 auto; padding: 5rem 2%; position: relative; }
  .contents_box { width: 100%; height: auto; margin: 0 auto; }
  .arrangement_l { width: 25%; height: auto; position: absolute; z-index: 1; left: 10%; top: -10vh; }
  .arrangement_l img { width: 100%; height: auto; }
  .arrangement_r { width: 25%; height: auto; position: absolute; z-index: 1; right: 0; bottom: 0; }
  .arrangement_r img { width: 100%; height: auto; }
  header { width: 100%; height: auto; margin: 0; padding: 0; position: relative; z-index: 100; align-items: center; }
  header .header_contents { width: 100%; height: auto; margin: 0 auto; display: flex; }
  header .header_contents h1 { display: inline-block; width: auto; height: auto; margin: 0; padding: 0; }
  header .header_contents h1 img { width: auto; height: 100px; }
  .openbtn { display: block; position: fixed; cursor: pointer; width: 30px; height: 30px; top: 20px; right: 20px; z-index: 1000; }
  .openbtn span { display: inline-block; transition: all .2s; position: absolute; left: 0; height: 3px; border-radius: 2px; background: #06283d; width: 100%; }
  .openbtn span:nth-of-type(1) { top: 0; width: 100%; }
  .openbtn span:nth-of-type(2) { top: 10px; width: 100%; }
  .openbtn span:nth-of-type(3) { top: 20px; width: 100%; }
  .openbtn.active span:nth-of-type(1) { top: 10px; transform: rotate(-45deg); width: 100%; }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) { top: 10px; transform: rotate(45deg); width: 100%; }
  #g-nav { display: none; width: 100%; height: 100vh; margin: 0; padding: 0; background: white; z-index: 999; position: fixed; top: 0; left: 0; font-weight: 400; overflow: hidden; text-align: center; }
  #g-nav-list { width: 100%; height: auto; margin: 0 auto; padding: 0; z-index: 100; top: 50%; transform: translateY(-50%); position: absolute; text-align: center; font-size: 1.4rem; color: #06283d; }
  #g-nav-list img { width: 60%; height: auto; margin: 0 auto 1rem auto; }
  #g-nav-list ul { width: 80%; height: auto; margin: 0 auto 3rem auto; padding: 0; }
  #g-nav-list ul li { border-bottom: solid thin #ccc; padding: 0 0 20px 0; margin: 0 0 20px 0; list-style: none; }
  #g-nav-list ul li a { text-decoration: none; padding: 10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; transition: all .5s; cursor: pointer; }
  #g-nav-list ul li::after { display: none; }
  #g-nav-list .navicon { display: inline-block; width: 40px !important; height: 40px !important; margin-right: 10px; }
  #g-nav-list .navicon img { width: 100%; height: 100%; }
  .sub_title { font-size: 4.0rem; font-weight: 900; margin: 0 0 2rem 4%; color: #ffffff; letter-spacing: 2px; text-shadow: 3px  1px 0px #06283d, -1px  1px 0px #06283d, 3px -1px 0px #06283d, -1px -1px 0px #06283d, 3px  0px 0px #06283d, 0px  1px 0px #06283d, -1px  0px 0px #06283d, 0px -1px 0px #06283d; position: relative; z-index: 3; } }
@media screen and (max-width: 699px) { body { background-size: 90%; background-position: right top 55vh; }
  .mb_5 { margin-bottom: 2rem; }
  .pb_5 { padding-bottom: 2rem; }
  .m_y5 { margin: 2rem 0; }
  .w_60 { width: 89%; }
  .topic { display: inline-block; padding: 5px 20px; margin: 0 auto 1rem auto; background-color: #fcee64; font-size: 1.0rem; font-weight: 700; position: relative; left: 50%; transform: translateX(-50%); }
  header { width: 100%; height: auto; margin: 0; padding: 0; position: fixed; z-index: 100; align-items: center; }
  header .header_contents { width: 100%; height: auto; margin: 0 auto; display: flex; }
  header .header_contents h1 { display: inline-block; width: auto; height: auto; margin: 0; padding: 0; }
  header .header_contents h1 img { width: auto; height: 80px; }
  /*-------------------------------------------HERO*/
  .hero { width: 90%; height: 54vh; position: relative; top: 0; left: 0; background-image: url("../images/sp/hero_bg.png"); background-repeat: no-repeat; background-size: auto 100%; background-position: bottom right; z-index: 0; }
  .hero h2 { writing-mode: vertical-rl; font-size: 1.6rem; white-space: nowrap; color: #fff; text-shadow: 0 0 3px #666; position: absolute; top: 12%; right: -5%; transform: translate(-50%, 0); z-index: 4; }
  .hero .hero-photo { width: calc(100% - 20px); height: 49vh; position: absolute; top: 0; left: 0; z-index: 1; }
  .hero .hero-photo img { width: 100%; height: 49vh; object-fit: cover; border-radius: 0 0 40px 0; }
  .hero .swiper { width: 100%; height: auto; object-fit: cover; border-radius: 0 0 40px 0; }
  .hero .swiper-slide { width: 100% !important; height: 100% !important; text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; object-fit: cover !important; }
  .hero .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .hero_arrangement { position: absolute; width: 25%; height: auto; right: -10%; bottom: -10%; z-index: 2; }
  .hero_arrangement img { width: 100%; height: auto; }
  /*-------------------------------------------INDEX*/
  #index_menu { margin: -5vh auto 0; display: block; align-items: center; position: relative; z-index: 2; }
  #index_menu h3 { font-size: 1.8rem; font-weight: 900; color: #06283d; width: 90%; height: auto; white-space: nowrap; text-align: center; position: relative; z-index: 4; margin: 0 auto; padding: 0; }
  #index_menu #index_catch { width: 60%; height: auto; position: relative; z-index: 1; margin: auto; }
  #index_menu #index_catch img { width: 100%; height: auto; }
  .index_bana { width: 96%; height: auto; margin: -20px auto 20px auto; display: flex; justify-content: space-between; position: relative; }
  .index_bana div { width: 46%; height: auto; margin: 0 auto 10px auto; position: relative; }
  .index_bana div span { font-size: 1.6rem; font-weight: 700; color: #06283d; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap; }
  .index_bana div img { position: relative; z-index: 2; width: 100%; height: auto; }
  #blog_box { width: 96%; height: auto; margin: 0 auto; }
  #blog_box iframe { height: 600px; }
  .blogtopics_box { width: 100%; height: auto; overflow: hidden; font-size: 1.0rem; margin-bottom: 1rem; }
  .blogtopics_box .blogtopics_entry { font-size: 1.0em; font-weight: 700; margin-bottom: 1rem; }
  .blogtopics_box .blogtopics_time { font-size: 0.8rem; margin-bottom: 1rem; }
  .blogtopics_box p { margin: 0 0 2rem 0; padding: 0; font-size: 0.8rem; }
  /*-------------------------------------------INDEXSHOPINFO*/
  .shop_info_copy { display: inline-block; position: absolute; z-index: 5; margin: -300px 0 0 auto; right: 5%; }
  .shop_info_title { writing-mode: vertical-rl; display: inline; margin: 0 10px auto auto; padding: 20px 2px; background-color: #06283d; color: #fff; font-size: 1.0rem; font-weight: 700; text-align: start; vertical-align: top; }
  #shop_info { width: 100%; height: auto; background-color: #7dc3b2; color: #fff; padding: 3rem 4%; box-sizing: border-box; margin: 1rem 0; }
  #shop_info #shop_range { width: 100%; min-width: 100%; height: auto; margin: 0 auto; padding: 0; display: block; position: relative; }
  #shop_info #shop_range #shop_guide { width: 100%; height: auto; display: block; margin: 0; padding: 0; justify-content: center; }
  #shop_info #shop_range #shop_guide h3 { font-size: 1.4rem; display: block; margin: 0 0 1rem 0; padding: 0; }
  #shop_info #shop_range #shop_photo { width: 100%; height: auto; position: relative; top: 60%; right: 0; }
  #shop_info #shop_range #shop_photo img { width: 100%; height: auto; }
  #g-map { margin: -5rem 0 0 0; padding: 0; border: none; line-height: 0; }
  .sub_title { font-size: 3.0rem; font-weight: 900; margin: 0 0 1rem 4%; color: #ffffff; letter-spacing: 2px; text-shadow: 3px  1px 0px #06283d, -1px  1px 0px #06283d, 3px -1px 0px #06283d, -1px -1px 0px #06283d, 3px  0px 0px #06283d, 0px  1px 0px #06283d, -1px  0px 0px #06283d, 0px -1px 0px #06283d; position: relative; z-index: 3; }
  /*-------------------------------------------FOOTER*/
  #footer_box { padding: 1rem 0; text-align: center; color: #fff; }
  #footer_box #footer_info { font-size: 0.8rem; margin: 3rem 0; }
  #footer_box #footer_tel { font-size: 2.0rem; font-style: italic; font-weight: 300; margin-bottom: 3rem; }
  #footer_box #footer_tel img { width: auto; height: 1.4rem; margin-right: 10px; }
  #footer_box #footer_icon { text-align: center; justify-content: center; margin-bottom: 3rem; }
  #footer_box #footer_icon img { width: 40px; height: auto; margin: 0 10px; }
  #footer_box p { font-size: 0.8rem; }
  #footer_box #copyright { font-size: 0.6rem; text-align: center; margin: 0 0 1rem 0; }
  /*-------------------------------------------SHOPINFO*/
  #shopinfo_photo { width: 90%; height: auto; margin: 0 auto 3rem auto; }
  #shopinfo_photo div { display: flex; justify-content: space-between; flex-wrap: wrap; }
  #shopinfo_photo div img { width: 49%; height: 180px; object-fit: cover; margin-bottom: 3px; }
  .center_title { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
  .shop_page_title { font-size: 1.4rem; font-weight: 700; padding-bottom: 40px; background-size: 50px; }
  .list_box { width: 100%; height: auto; margin: 0 auto 1rem auto; display: flex; flex-wrap: wrap; background-color: #fff; padding: 1rem; box-sizing: border-box; font-size: 0.8rem; font-weight: 300; }
  .list_box .list_box_l { width: 20%; height: auto; padding: 10px 5px; box-sizing: border-box; border-bottom: solid 2px #06283d; align-content: center; font-weight: 700; }
  .list_box .list_box_r { width: 80%; height: auto; padding: 10px 5px; box-sizing: border-box; border-bottom: solid 2px #ccc; }
  .product_title { font-size: 2.4rem; text-align: center; margin: 1rem auto; padding: 0; color: #06283d; letter-spacing: 2px; text-shadow: 3px 1px 0px #fcee64, -1px 1px 0px #fcee64, 3px -1px 0px #fcee64, -1px -1px 0px #fcee64, 3px 0px 0px #fcee64, 0px 1px 0px #fcee64, -1px 0px 0px #fcee64, 0px -1px 0px #fcee64; position: relative; }
  /*-------------------------------------------SCHOOLITEM*/
  .item_img { width: 100%; height: auto; margin: 0 auto 2rem; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
  .item_img div { width: 50%; height: auto; padding: 0 5px; margin-bottom: 1rem; box-sizing: border-box; }
  .item_img div img { width: 100%; height: auto; }
  .item_img_3 { width: 100%; height: auto; margin: 0 auto 2rem; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
  .item_img_3 div { width: calc(100% / 3); height: auto; padding: 0 5px; margin-bottom: 1rem; box-sizing: border-box; }
  .item_img_3 div img { width: 100%; height: auto; }
  .item_title { display: inline-block; justify-content: center; width: auto; height: auto; color: #fff; font-size: 1.2rem; font-weight: 700; background-color: #06283d; padding: 3px 30px; margin: 0 auto 1rem auto; border-radius: 20px; }
  .item_title_sub { font-size: 1.2rem; padding: 0 1rem 5px 1rem; }
  #junior_bg { background-size: 100px; }
  #highschool_bg { background-size: 100px; }
  #primary_bg { background-size: 100px; }
  #pre_bg { background-size: 100px; }
  #form { width: 100%; height: auto; margin: 2rem auto; font-size: 0.8rem; }
  #form .form_box { display: flex; flex-wrap: wrap; }
  #form .form_box .form_box_l { width: 30%; height: auto; padding: 10px; box-sizing: border-box; border-bottom: solid 2px #06283d; align-content: center; font-weight: 700; }
  #form .form_box .form_box_r { width: 70%; height: auto; padding: 10px; box-sizing: border-box; border-bottom: solid 2px #ccc; }
  #policy_list { background-color: rgba(255, 255, 255, 0.9); padding: 2rem 1rem; margin: 0 auto 3rem auto; }
  #policy_list li { font-size: 0.9rem; font-weight: 700; margin: 2rem 0 1rem 1rem; }
  #policy_list p { font-size: 0.8rem; } }