html {
  scroll-behavior: smooth; }

body {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  color: #000;
  letter-spacing: .05em;
  background-color: #ffd2d5;
  margin: 0; }

main {
  position: relative; }

a {
  transition: .3s; }

a:hover {
  opacity: 0.8; }

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

@media (min-width: 768px) {
  body {
    font-size: 14px; }

  .pcnone {
    display: none !important; } }
@media (max-width: 767.98px) {
  body {
    font-size: 12px; }

  .spnone {
    display: none !important; } }
.container {
  padding: 0;
  position: relative;
  background-color: #ffcdc3; }

@media (min-width: 768px) {
  .container {
    width: 500px;
    margin: 0 11vw 0 auto;
    border-left: 1px solid #000;
    border-right: 1px solid #000; }

  .inner_wrap {
    padding: 0 30px 20px; } }
@media (max-width: 767.98px) {
  .container {
    width: 100%; }

  .inner_wrap {
    padding: 0 25px 20px; } }
.topimg {
  width: 100%;
  display: block;
  margin: auto;
  position: relative;
  padding: 5% 9% 32% 9%;
  background-image: url(../img/main/main_back.jpg);
  background-size: cover;
  background-position: center; }
  .topimg .kumamoto_logo {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 12%;
    height: auto; }
  .topimg .main_img1 {
    position: absolute;
    top: 9%;
    right: calc(50% - 33%);
    width: 14%;
    height: auto;
    transform-origin: bottom center;
    animation: swing1 1.6s steps(1) infinite; }
  .topimg .main_img2 {
    position: absolute;
    top: 18%;
    right: calc(50% - 45%);
    width: 16%;
    height: auto;
    transform-origin: bottom center;
    animation: swing2 1.6s steps(1) infinite; }
  .topimg .main_img3 {
    position: absolute;
    top: 54%;
    right: calc(50% - 47%);
    width: 23%;
    height: auto;
    transform-origin: bottom center;
    animation: swing2 1.6s steps(1) infinite; }
  .topimg .main_img4 {
    position: absolute;
    top: 65%;
    right: calc(50% - 10%);
    width: 20%;
    height: auto;
    transform-origin: bottom center;
    animation: swing1 1.6s steps(1) infinite; }
  .topimg .main_img5 {
    position: absolute;
    top: 46%;
    right: calc(50% + 30%);
    width: 16%;
    height: auto;
    transform-origin: bottom center;
    animation: swing2 1.6s steps(1) infinite; }
  .topimg .main_img6 {
    position: absolute;
    top: 18%;
    right: calc(50% - -26%);
    width: 16%;
    height: auto;
    transform-origin: bottom center;
    animation: swing1 1.6s steps(1) infinite; }

@keyframes swing1 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-3deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform: rotate(3deg); }
  100% {
    transform: rotate(0deg); } }
@keyframes swing2 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(3deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform: rotate(-3deg); }
  100% {
    transform: rotate(0deg); } }
@media (min-width: 768px) {
  .pc_menu {
    width: calc(100vw - 500px - 11vw);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0; }
    .pc_menu .pc_menu_box {
      width: 55.5%;
      min-width: 290px;
      max-width: 310px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: absolute;
      top: max(300px, 50%);
      left: 50%;
      transform: translate(-50%, -50%); }
      .pc_menu .pc_menu_box > a {
        width: 100%;
        margin: 0 auto;
        max-height: 350px; }
        .pc_menu .pc_menu_box > a > img {
          width: auto;
          max-height: 350px;
          margin: 0 auto;
          display: block; }
      .pc_menu .pc_menu_box > ul {
        list-style: none;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0;
        margin: 30px auto 0;
        width: 300px; }
        .pc_menu .pc_menu_box > ul > li {
          width: 100%;
          position: relative;
          margin: 0; }
          .pc_menu .pc_menu_box > ul > li:last-child {
            width: 100%;
            margin: 0; }
          .pc_menu .pc_menu_box > ul > li > a, .pc_menu .pc_menu_box > ul > li > button {
            color: #000;
            padding: 0;
            display: flex;
            justify-content: center;
            font-size: 18px;
            font-weight: 500; }
            .pc_menu .pc_menu_box > ul > li > a:hover, .pc_menu .pc_menu_box > ul > li > button:hover {
              text-decoration: none; }
            .pc_menu .pc_menu_box > ul > li > a:focus, .pc_menu .pc_menu_box > ul > li > button:focus {
              outline: none; }
            .pc_menu .pc_menu_box > ul > li > a .plus_minus, .pc_menu .pc_menu_box > ul > li > button .plus_minus {
              position: absolute;
              top: 50%;
              right: 5%;
              width: 14px;
              height: 14px;
              transform: translateY(-50%);
              pointer-events: none; }
              .pc_menu .pc_menu_box > ul > li > a .plus_minus::before, .pc_menu .pc_menu_box > ul > li > a .plus_minus::after, .pc_menu .pc_menu_box > ul > li > button .plus_minus::before, .pc_menu .pc_menu_box > ul > li > button .plus_minus::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                background: #fff;
                transform: translate(-50%, -50%); }
              .pc_menu .pc_menu_box > ul > li > a .plus_minus::before, .pc_menu .pc_menu_box > ul > li > button .plus_minus::before {
                width: 14px;
                height: 2px; }
              .pc_menu .pc_menu_box > ul > li > a .plus_minus::after, .pc_menu .pc_menu_box > ul > li > button .plus_minus::after {
                width: 2px;
                height: 14px; }
            .pc_menu .pc_menu_box > ul > li > a[aria-expanded="true"] .plus_minus::after, .pc_menu .pc_menu_box > ul > li > button[aria-expanded="true"] .plus_minus::after {
              display: none; } }
@media (max-width: 900px) {
  .pc_menu {
    display: none; } }
/*#menu-icon{ display: inline-block; cursor: pointer; transition: .3s ease-in-out; width: 50px; height: 50px; z-index: 102;
    >div{ position: relative; width: 50px; height: 50px; background-color: #fed600; border: 1px solid #000;
        >span{ display: block; position: absolute; background: #000; transition: .3s ease-in-out; height: 1px; right: 0; left: 0; margin: 0 auto;
            &:nth-child(1){ top: calc(50% - 11px); width: 70%;}
            &:nth-child(2){ top: calc(50%); width: 70%;}
            &:nth-child(3){ top: calc(50% + 10px); width: 70%;}
        }
    }
}
.navbar{ padding: 0!important;
    #menu-icon.active{
        >div{
            >span{
                &:nth-child(1){ transform: rotate(45deg); top: calc(50% - 2px);}
                &:nth-child(2){ width: 0; right: 50%;}
                &:nth-child(3){ transform: rotate(-45deg); top: calc(50% - 2px);}
            }
        }
    }
}
.menu-icon { display: block; position: fixed; top: 0px; right: 0px;}
.menu-list{ display: none; flex-direction: column; justify-content: center; position: fixed; top: 0; height: 100vh; width: 100%; text-align: center; z-index: 20; padding: 50px; background: #fed600; background-repeat: no-repeat; background-size: cover;
    >a{ text-decoration: none; color: #000; font-size: 20px; border-bottom: 1px solid #000; padding: 18px 0; font-weight: bold; z-index: 10; position: relative;}
    >.menu_bnr{ margin-top: 10px;
        >a{ margin: 0 0 10px 0; display: block; padding: 0; border: 0;}
    }
}
.menu-list.show { display: flex;}
@media (min-width: 768px) {
	.menu-list{ width: 500px; right: 11vw; padding: 50px 100px; border-right: 1px solid #000; border-left: 1px solid #000;}
	.menu-icon{ right: 11vw;}
}
@media (max-width: 767.98px) {
	.menu-list{ left: 0;}
	.menu-icon{ right: 0;}
}*/
.page-top {
  position: fixed;
  transition: 0.5s;
  z-index: 9;
  opacity: 0;
  visibility: hidden; }

.page-top > .page-top_link {
  position: relative;
  border-radius: 100px;
  background-color: #e60012;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center; }

.page-top.show_btn {
  opacity: 1;
  visibility: visible; }

@media (min-width: 768px) {
  .page-top {
    bottom: 20px;
    right: 20px;
    margin: 0 30px 20px auto;
    width: 70px; }

  .page-top > .page-top_link {
    width: 70px;
    height: 70px;
    font-size: 15px; }

  .page-top > .page-top_link > img {
    width: 35px; } }
@media (max-width: 767.98px) {
  .page-top {
    bottom: 20px;
    right: 10px;
    width: 40px; }

  .page-top > .page-top_link {
    width: 40px;
    height: 40px;
    font-size: 12px; }

  .page-top > .page-top_link > img {
    width: 20px; } }
.kaso_inner {
  margin: -80px 0 0 0;
  z-index: 2;
  position: relative; }

@media (max-width: 767.98px) {
  .kaso_inner {
    margin: -70px 0 0 0; } }
.fixed_menu > div {
  display: flex;
  flex-wrap: wrap; }
  .fixed_menu > div a, .fixed_menu > div span {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #000;
    border-left: none; }
  .fixed_menu > div a:hover {
    text-decoration: none; }

.kaso_bnr {
  display: block; }

.tab_inner {
  padding: 0;
  margin: 0 0 60px 0; }
  .tab_inner .close_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    margin: -20px -10px 0 auto;
    border: 1px solid #000;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 2;
    position: relative; }
    .tab_inner .close_btn span {
      position: relative;
      display: block;
      width: 20px;
      height: 20px; }
      .tab_inner .close_btn span::before, .tab_inner .close_btn span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background: #000;
        transform-origin: center; }
      .tab_inner .close_btn span::before {
        transform: translate(-50%, -50%) rotate(45deg); }
      .tab_inner .close_btn span::after {
        transform: translate(-50%, -50%) rotate(-45deg); }

@media (min-width: 768px) {
  .fixed_menu {
    width: 100%;
    margin: 0 auto 50px;
    padding: 0 10px 0 15px; }
    .fixed_menu > div a, .fixed_menu > div span {
      width: 50%;
      height: auto;
      letter-spacing: -1px; } }
@media (max-width: 767.98px) {
  .fixed_menu {
    width: 100%;
    margin: 0 auto 50px;
    padding: 0 5px 0 15px; }
    .fixed_menu > div {
      width: 100%;
      max-width: 540px; }
      .fixed_menu > div a, .fixed_menu > div span {
        width: 50%;
        letter-spacing: -1px; } }
/*.menu_link{ width: 100%; padding: 0 8%;
	a, button{ display: block; width: 100%; margin: 0 0 10% 0; padding: 0; border: none; background: none; cursor: pointer; text-align: left;
		&:focus{ outline: none;}
	}
	.tab_btn{ display: block; width: 100%; margin: 0; padding: 0; border: none; background: none; cursor: pointer; text-align: left;
		&:focus{ outline: none;}
	}
	a:last-child{ margin: 0;}
	a img, button img{ display: block; width: 100%; height: auto;}
	.click{ position: relative;
		&.is-open{ .plus_minus::after{ display: none;}}
	}
	.plus_minus{ position: absolute; top: 50%; right: 3.5%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none;
		&::before, &::after{ content: ""; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%);}
		&::before{ width: 18px; height: 2px;}
		&::after{ width: 2px; height: 18px;}
	}
	.tab_inner{ display: none;
		&.is-open{ display: block;}
		.fixed_menu{ width: 100%;
			.tab_btns{ display: flex; width: 100%;
				.tab_btn{ width: 50%;
					&.is-active{}
					img{}
				}
			}
		}
		.tab_panel{ display: none;
			&.is-show{ display: block;}
			img{ display: block; width: 100%; height: auto;}
		}
	}
}
@media (max-width: 767.98px) {
.menu_link{ 
	.plus_minus{ width: 14px; height: 14px; right: 3.6%;
		&::before{ width: 14px; height: 2px;}
		&::after{ width: 2px; height: 14px;}
	}
}
}*/
@keyframes leafSwing1 {
  0%,100% {
    transform: translateY(0) rotate(0deg); }
  25% {
    transform: translateY(-4px) rotate(-4deg); }
  50% {
    transform: translateY(2px) rotate(5deg); }
  75% {
    transform: translateY(-2px) rotate(-4deg); } }
.contents_back {
  padding: 0 20px 70px;
  margin: 0;
  position: relative; }
  .contents_back.makeup {
    background: linear-gradient(to bottom, #ffcdc3 0, #ffcdc3 112px, #eebbd2 112px, #eebbd2 100%); }
  .contents_back.skincare {
    background: linear-gradient(to bottom, #eebbd2 0, #eebbd2 112px, #f5e1d7 112px, #f5e1d7 100%); }
  .contents_back.event {
    background: linear-gradient(to bottom, #f5e1d7 0, #f5e1d7 112px, #ffcdc3 112px, #ffcdc3 100%);
    padding: 0 20px; }
  .contents_back .contents {
    background-color: #fff;
    border-radius: 300px 300px 0 0;
    padding: 0 0 30px 0; }
  .contents_back .contents_ttl {
    text-align: center;
    position: relative;
    top: -20px; }
    .contents_back .contents_ttl::before {
      content: "";
      background-image: url("../img/deco1.svg");
      display: block;
      width: 14%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 42%;
      left: 6%;
      transform-origin: center;
      animation: leafSwing1 3.2s ease-in-out infinite; }
    .contents_back .contents_ttl::after {
      content: "";
      background-image: url("../img/deco2.svg");
      display: block;
      width: 10%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 12%;
      right: 9%;
      transform-origin: center;
      animation: leafSwing1 3.6s ease-in-out infinite; }
    .contents_back .contents_ttl > span::before {
      content: "";
      background-image: url("../img/deco3.svg");
      display: block;
      width: 5%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 66%;
      right: 13%;
      transform-origin: center;
      animation: leafSwing1 3.2s ease-in-out infinite; }
    .contents_back .contents_ttl img {
      width: 56%; }
  .contents_back .contents_ttl2 {
    text-align: center;
    position: relative;
    top: -10px; }
    .contents_back .contents_ttl2 img {
      width: 62%; }
  .contents_back .btn_flex {
    display: flex;
    flex-wrap: wrap;
    padding: 0 17px;
    gap: 0 4.0%;
    margin: 10px 0 20px 0; }
    .contents_back .btn_flex > button {
      width: 48%;
      margin: 0 0 15px 0;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      outline: none; }
      .contents_back .btn_flex > button img {
        display: block;
        width: 100%;
        height: auto; }
      .contents_back .btn_flex > button .img_on {
        display: none; }
      .contents_back .btn_flex > button.is-active .img_off {
        display: none; }
      .contents_back .btn_flex > button.is-active .img_on {
        display: block; }
  .contents_back.pickup .contents_ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .contents_back.pickup .contents_ul li {
      margin: 0 0 20px 0; }
    .contents_back.pickup .contents_ul li:nth-child(odd) {
      position: relative;
      left: 20px; }
    .contents_back.pickup .contents_ul li:nth-child(even) {
      position: relative;
      right: 20px; }
    .contents_back.pickup .contents_ul li:last-child {
      margin: 0; }
  .contents_back.makeup .contents_ul {
    margin: 0;
    padding: 0 17px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 5.5%; }
    .contents_back.makeup .contents_ul li {
      width: 47%;
      margin: 0 0 25px 0; }
    .contents_back.makeup .contents_ul li:last-child, .contents_back.makeup .contents_ul li:nth-last-child(2) {
      margin: 0; }
  .contents_back.skincare .contents_ul {
    margin: 0;
    padding: 0 17px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 5.5%; }
    .contents_back.skincare .contents_ul li {
      width: 47%;
      margin: 0 0 25px 0; }
    .contents_back.skincare .contents_ul li:last-child, .contents_back.skincare .contents_ul li:nth-last-child(2) {
      margin: 0; }
  .contents_back .beauty_btn {
    margin: 30px auto 0;
    display: block;
    text-align: center; }
    .contents_back .beauty_btn img {
      width: 94%; }
  .contents_back .t1 {
    transform: translateY(-1%); }
  .contents_back .t2 {
    transform: translateY(-7%); }
  .contents_back .t3 {
    transform: translateY(-3%); }
  .contents_back .t4 {
    transform: translateY(4%); }

.tab_area {
  padding: 0 25px; }
  .tab_area > input {
    display: none; }
  .tab_area .tab_btns {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    top: 2px;
    position: relative; }
    .tab_area .tab_btns label {
      width: calc((100% - 14px) / 2);
      cursor: pointer;
      margin: 0; }
      .tab_area .tab_btns label img {
        display: block;
        width: 100%;
        height: auto; }
      .tab_area .tab_btns label .img_on {
        display: none; }
  .tab_area .tab_contents {
    border: 2px solid #a72037; }
    .tab_area .tab_contents .tab_content {
      display: none; }
  @media (max-width: 767.98px) {
    .tab_area .tab_btns {
      top: 1px; }
    .tab_area .tab_contents {
      border: 1px solid #a72037; } }
  .tab_area #tab1:checked ~ .tab_btns label[for="tab1"] .img_off,
  .tab_area #tab2:checked ~ .tab_btns label[for="tab2"] .img_off {
    display: none; }
  .tab_area #tab1:checked ~ .tab_btns label[for="tab1"] .img_on,
  .tab_area #tab2:checked ~ .tab_btns label[for="tab2"] .img_on {
    display: block; }
  .tab_area #tab1:checked ~ .tab_contents .tab_content01 {
    display: block; }
  .tab_area #tab2:checked ~ .tab_contents .tab_content02 {
    display: block;
    background-color: #ffd2d5; }
  .tab_area .event_btn {
    display: block;
    text-align: center;
    margin: 30px auto 0;
    padding: 0 0 30px 0; }
    .tab_area .event_btn img {
      width: 70%;
      position: relative;
      left: 10px; }

footer small {
  display: block;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0em; }

@media (min-width: 768px) {
  footer small {
    font-size: 12px;
    margin-top: 30px;
    padding: 0 20px; }
  footer .top_back {
    display: block;
    width: 210px;
    margin: 0 auto; }
  footer .footer_memo {
    margin: 40px 9% 30px;
    color: #a72037;
    text-align: center; }
    footer .footer_memo p {
      font-size: 12px;
      margin: 0;
      text-indent: -1em;
      padding-left: 1em; }
  footer .footer_logo {
    text-align: center;
    margin: 30px auto 0;
    padding: 0 0 60px 0; }
    footer .footer_logo img {
      width: 100px;
      margin: 0 auto; } }
@media (max-width: 767.98px) {
  footer small {
    font-size: 10px;
    margin-top: 30px;
    padding: 0 15px; }
  footer .top_back {
    display: block;
    width: 42%;
    margin: 0 auto; }
  footer .footer_memo {
    margin: 65px 20px 30px;
    color: #a72037;
    text-align: center; }
    footer .footer_memo p {
      font-size: 12px;
      margin: 0;
      text-indent: -1em;
      padding-left: 1em; }
  footer .footer_logo {
    text-align: center;
    margin: 30px auto 0;
    padding: 0 0 60px 0; }
    footer .footer_logo img {
      width: 100px;
      margin: 0 auto; } }
.top_btn {
  position: absolute;
  right: 50px;
  width: 60px; }

.fade_up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease; }
  .fade_up.is-show {
    opacity: 1;
    transform: translateY(0); }