@charset "utf-8";
/* =============================



   points CSS 



==============================*/
@import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap);
@import url(https://use.fontawesome.com/releases/v5.9.0/css/all.css);
/*------------------- base */
body {
  font-family: "????", Meiryo, "???????? Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "??? ???????????", "MS PGothic", sans-serif;
  position: relative;
  margin: 0;
  padding-top: 4.5rem;
}
li {
  list-style-type: none;
}
p {
  text-align: center;
}
a {
  text-decoration: none;
  color: #333;
  vertical-align: top;
}
img {
  max-width: 100%;
  vertical-align: top;
}
a:hover img {
  transition: .3s;
  opacity: .7;
}
/*------------------- header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
}
.header p {
  margin: 0;
  line-height: 1;
}
.header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  position: relative;
}
.shop-logo {
  margin: 0;
}
.shop-logo a {
  font-size: 0;
  display: block;
}
.shop-logo img {
  display: block;
}
.header-right ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
.header-right li {
  margin-left: 1rem;
}
.store-code {
  order: 3;
  font-size: .75rem;
  padding: .5rem 1rem;
  color: #fff;
  background: #7a920b;
  line-height: 1;
}
.store-code span {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 200%;
}
.store-code span:before {
  content: ":";
}
.contact i, .phone-number i {
  vertical-align: baseline;
  margin-right: .5rem;
}
.contact a {
  display: block;
  font-size: 1.2rem;
  transition: .3s;
  color: #555;
  font-weight: bold;
}
.contact a:hover {
  opacity: .7;
}
.contact i {
  font-size: 160%;
}
.phone-number a {
  color: #7a9309;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 2rem;
}
.phone-number i {
  position: relative;
  top: 4px;
}
/*------------------- reusefull */
.inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.article {
  margin: 0 0 4rem;
}
.visible-phone {
  display: none;
}
.red {
  color: #c9120e;
}
/*------------------- bg */
.bg-pattern01 {
  background: repeating-linear-gradient(90deg, #F1E9E1, #F1E9E1 10px, #EEE4D9 0, #EEE4D9 20px);
}
.bg-pattern02 {
  background: repeating-linear-gradient(90deg, #f2ede3, #f2ede3 10px, #f7f5ee 0, #f7f5ee 20px);
}
.bg-pattern03 {
  background: repeating-linear-gradient(90deg, #f4fbf9, #f4fbf9 10px, #e8f2ef 0, #e8f2ef 20px);
}
.bg-pattern04 {
  background: repeating-linear-gradient(90deg, #fcfcfc, #fcfcfc 10px, #f6f6f6 0, #f6f6f6 20px);
}
.bg-pattern05 {
  background: repeating-linear-gradient(90deg, #fdb3a0, #fdb3a0 10px, #ffae99 0, #ffae99 20px);
}
.bg-gry {
  background: #eee;
}
.bg-lgry {
  background: #fcfcfc;
}
/*------------------- mv */
.mv {
  position: relative;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.mv_container {
  width: 100%;
  height: 500px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 0 16px;
  box-sizing: border-box;
}
.mv_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  margin: 0 auto;
  max-width: 840px;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  padding: 1.25rem 1.25rem 2rem; /* margin-top: 1rem; */
}
.mv img {
  width: 160px;
  display: block;
  margin: 0 auto 1rem;
}
.mv_title {
  font-weight: bold;
  font-size: 4.2rem;
  line-height: 1.2;
  margin: 0 0 .25em;
}
.mv_title_grn {
  color: #7a9408;
}
.mv_title_org {
  color: #e7491d;
  display: block;
}
.mv_text {
  font-size: 1.25rem;
}
/*------------------- intro */
.intro {
  border: 0 !important;
}
.intro .contents-title {
  margin-bottom: .5em;
}
.intro p {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0 0 2rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
/*------------------- contents */
.contents-wrapper {
  padding: 3rem 0;
  border-top: 8px solid #eee;
}
.contents-wrapper .contents-wrapper {
  border: none;
}
.contents-submenu {
  margin: 0 0 32px;
  text-align: center;
}
.contents-submenu li {
  display: inline-block;
  padding: 4px 2px;
}
.contents-submenu.col-3 li {
  width: 31%;
  margin-right: 2%;
}
.contents-submenu.col-3 li:last-child {
  margin-right: 0;
}
.contents-submenu a {
  display: block;
  padding: .5em 1em;
  border-radius: 12px;
  background: #ffd44c;
  color: #333;
  font-size: 1.25rem;
  text-align: center;
}
.contents-submenu a.is-active, .contents-submenu a:hover {
  background-color: #7A9508;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.contents-title {
  font-size: 2.5rem;
  font-weight: normal;
  text-align: center;
  margin: 0 0 1em;
  line-height: 1.6;
  color: #333;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.contents-title.has-border {
  border-bottom: 2px solid #333;
}
.contents-sub-title {
  color: #333;
  font-size: 2rem;
  margin: 0 0 1em;
  border-radius: 8px;
  line-height: 1.2;
  font-weight: normal;
  text-align: center;
}
.item-wrapper {
  margin: 0 0 4rem;
}
. .list {
  width: 100%;
  max-width: 960px;
  margin: 5rem auto;
  padding-left: 2rem;
  box-sizing: border-box;
}
.list li {
  list-style-type: disc;
  text-align: left;
  font-size: 1.25rem;
  padding: 4px 0;
}
.contents-menu-wrapper {
  margin: 0 0 4rem;
}
.contents-menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.contents-menu-item {
  width: 50%;
  position: relative;
}
.contents-menu-item a {
  padding: 1rem 0;
  font-size: 1.5rem;
  background: #eee;
  color: #999;
  text-align: center;
  display: block;
}
.contents-menu-item a:hover {
  cursor: pointer;
}
.contents-menu-item.is-active a {
  background: #7a9408;
  color: #fff;
  position: relative;
}
.contents-menu-item.is-active:after {
  content: "";
  border: 24px solid transparent;
  border-top-color: #7a9408;
  position: absolute;
  bottom: -48px;
  left: calc(50% + 12px);
  transform: translateX(-50%);
}
.banner img {
  width: 100%;
  max-width: 480px;
}
.about-desc {
  background: #eee;
  margin: 2rem auto;
  padding: 1.5rem 1.5rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 840px;
  box-sizing: border-box;
}
.about-desc img {
  display: block;
  width: 90%;
  max-width: 360px;
  margin: 0 auto 1rem;
}
.about-desc p {
  margin-bottom: 0;
}
.about-point-items {
  text-align: center;
  padding: 0;
  max-width: 840px;
  margin: 0 auto;
}
.about-point-items li {
  display: inline-block;
  font-size: 1.25rem;
  background: rgba(51, 100, 173, 0.24);
  padding: 1rem 1.5rem;
  margin: 0 .25rem 1rem;
  border-radius: 3rem;
}
/* ---------------------------- fixed-menu */
.fixed-menu {
  position: absolute;
  right: 16px;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 5;
  transform: translateY(100%);
  display: flex;
  transition: .3s;
  opacity: 0;
}
.fixed-menu.is-active {
  opacity: 1;
  display: flex;
}
.fixed-menu-item {
  margin-left: 8px;
}
.fixed-menu-item a {
  display: block;
  font-size: 1rem;
  line-height: 1;
  min-width: 120px;
  text-align: center;
  padding: 8px 24px;
  background: rgba(122, 149, 8, 0.8);
  color: #fff !Important;
  transition: .3s;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.12);
}
.fixed-menu-item a:hover {
  background: rgba(122, 149, 8, 1);
  cursor: pointer;
}
@media screen and (max-width: 1199px) {
  .inner, .contents-menu-wrapper {
    padding: 0 16px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1080px) {
  .header-right li {
    margin-left: .5rem;
  }
  .store-code span {
    font-size: 160%;
  }
  .store-code {
    padding: .5rem .75rem;
    font-size: .7rem;
  }
  .phone-number a {
    font-size: 1.2rem;
  }
  .contact a {
    font-size: .875rem;
  }
  .contents-submenu a {
    padding: .5em 1em;
  }
  .list {
    margin: 2rem auto;
  }
}
@media screen and (min-width: 769px) {
  .phone-number a {
    pointer-events: none;
  }
}
@media screen and (max-width: 768px) {
  html {
    width: 100%;
    overflow-x: hidden;
  }
  body {
    padding-top: 85px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  iframe {
    width: 1px;
    min-width: 100%;
  }
  .shop-logo img {
    height: 32px;
  }
  .header .inner {
    padding: 0;
  }
  .header-left, .header-right {
    width: 100%;
    justify-content: center;
  }
  .header-left {
    padding: 8px 8px;
    box-sizing: border-box;
  }
  .header-right {
    background: rgba(0, 0, 0, 0.08);
    padding: 4px 8px;
  }
  .fixed-menu {
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1;
    transform: none;
    justify-content: center;
  }
  .fixed-menu-item {
    margin: 0 4px;
  }
  .contact i, .phone-number i {
    margin-right: .25rem;
  }
  .phone-number a {
    font-size: 1.2rem;
  }
  .contact a {
    font-size: .75rem;
  }
  .store-code {
    font-size: .5rem;
    padding: .25rem .5rem;
  }
  .mv_container {
    height: auto;
    padding: 32px 24px;
  }
  .mv_box {
    position: inherit;
    transform: none;
    top: 0;
    margin: 0;
  }
  .mv img {
    width: 120px;
    margin: 0 auto .5rem;
  }
  .mv_title {
    font-size: 2.4rem;
  }
  .mv_text {
    font-size: .75rem;
	 padding: 3px;/*追加*/
  }
  .contents-title {
    font-size: 1.5rem;
  }
  .contents-sub-title {
    font-size: 1.2rem;
  }
  .intro p {
    font-size: .75rem;
    margin: 0 0 1rem;
  }
  .contents-wrapper {
    padding: 24px 0;
  }
  .contents-submenu {
    margin: 0 0 24px;
  }
  .contents-submenu a {
    font-size: .75rem;
    border-radius: 8px;
  }
  .contents-menu-wrapper {
    margin: 0 0 2rem;
  }
  .contents-menu-item a {
    font-size: 1rem;
  }
  .contents-menu-item.is-active:after {
    border-width: 16px;
    bottom: -32px;
    left: calc(50% + 8px);
  }
  .list li {
    font-size: 1rem;
  }
  .article {
    margin: 0 0 3rem;
  }
  .about-point-items li {
    font-size: 1rem;
  }
}
@media screen and (max-width: 480px) {
  body {
    /*padding-top: 80px;*/
	  padding-top: 50px;
  }
  .header-right ul {
    justify-content: center;
  }
  .header-right li {
    margin: 0;
  }
  .store-code {
    position: absolute;
    right: 8px;
    top: 14px;
    padding: .25rem .5rem;
  }
  .phone-number a {
    font-size: 1rem;
    padding: 0 .5rem;
  }
  .phone-number i {
    margin-right: 0.2rem;
    top: 0;
  }
  .contact a {
    font-size: .65rem;
  }
  .contact i {
    margin-right: .2rem;
  }
  .visible-phone {
    display: block;
  }
  .hidden-phone {
    display: none;
  }
  .inner, .contents-menu-wrapper {
    padding: 0 8px;
  }
  .mv_box {
    /*padding: 1rem 1rem;*/
	  padding: 3px
  }
  .mv img {
    width: 84px;
  }
  .mv_title {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .mv_title_grn { /* display:block; */
  }
  .intro p {
    font-size: .65rem;
  }
  .contents-title {
    font-size: 18px;
    margin: 20px 0 20px;
  }
  .contents-submenu li {
    padding: 2px 1px;
  }
  .contents-submenu a {
    padding: .5em .5em;
    font-size: .65rem;
  }
  .contents-menu-item a {
    font-size: .75rem;
  }
  .item-wrapper {
    margin: 0 0 3rem;
  }
  .list li {
    font-size: .75rem;
  }
  .about-point-items li {
    font-size: 1rem;
    padding: .5rem;
    margin: 0 0.01rem .5rem;
  }
}