@charset "UTF-8";
body {
  /*font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;*/
  font-family: "Hannari", serif;
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  position: relative;
  color: #232323;
  letter-spacing: -0.01rem;
  overflow-x: hidden;
  background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #fff;
    color: #232323;
  }
}
a {
  color: #232323;
  text-decoration: none;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h3 {
  font-size: min(calc(24 / 1440 * 100vw), 24px);
}

p {
  line-height: 2;
}

img {
  line-height: 1;
  width: 100%;
  height: auto;
  display: block;
}

section {
  display: block;
}

@media screen and (max-width: 768px) {
  body {
    font-size: calc(12 / 390 * 100vw);
  }

  h3 {
    font-size: calc(20 / 390 * 100vw);
  }
}
/************************************
マージン
/************************************/
.mt10 {
  margin-top: 2.564vw;
}

.mt20 {
  margin-top: 5.128vw;
}

.mt30 {
  margin-top: 7.692vw;
}

.mt40 {
  margin-top: 10.256vw;
}

.mt50 {
  margin-top: 12.821vw;
}

@media screen and (min-width: 769px) {
  .mt10 {
    margin-top: 0.694vw;
  }

  .mt20 {
    margin-top: 1.389vw;
  }

  .mt30 {
    margin-top: 2.083vw;
  }

  .mt40 {
    margin-top: 2.778vw;
  }

  .mt50 {
    margin-top: 3.472vw;
  }
}
/************************************
クラス名
/************************************/
.hannari {
  font-family: "Hannari", serif;
}

.anchor {
  padding-top: 50px;
  margin-top: -50px;
  display: block;
}

.ttlBox {
  margin-bottom: 15.385vw;
}
.ttlBox--ttl h2 {
  /*font-family: "Hannari", serif;*/
  font-size: calc(28 / 390 * 100vw);
  margin-bottom: 1.282vw;
  letter-spacing: -0.01rem;
}
.ttlBox--ttl p {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  /*font-family: 'Roboto', sans-serif;*/
  font-size: calc(14 / 390 * 100vw);
  color: #193595;
  letter-spacing: 0.1rem;
}
.ttlBox--ttl--big {
  margin-bottom: 4.167vw;
}
.ttlBox--ttl--big h2 {
  font-size: calc(30 / 390 * 100vw);
}
.ttlBox--ttl--big p {
  font-size: calc(16 / 390 * 100vw);
}
.ttlBox--flex--ttl {
  margin-bottom: 7.692vw;
}
@media screen and (min-width: 769px) {
  .ttlBox {
    margin-bottom: 4.167vw;
  }
  .ttlBox--ttl h2 {
    font-size: min(calc(38 / 1440 * 100vw), 38px);
    margin-bottom: 5px;
  }
  .ttlBox--ttl p {
    font-size: min(calc(18 / 1440 * 100vw), 18px);
  }
  .ttlBox--ttl--big h2 {
    font-size: min(calc(40 / 1440 * 100vw), 40px);
    margin-bottom: 5px;
  }
  .ttlBox--ttl--big p {
    font-size: min(calc(16 / 1440 * 100vw), 16px);
  }
  .ttlBox--flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ttlBox--flex--ttl {
    margin-bottom: 0;
  }
  .ttlBox--flex--text {
    width: 62%;
    text-align: justify;
  }
}

.js-fadeIn {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  /*transform: translate(0, 50px);*/
}
.js-fadeIn:nth-of-type(2) {
  transition-duration: 1000ms;
}
.js-fadeIn:nth-of-type(3) {
  transition-duration: 1500ms;
}

.is-scrollIn {
  opacity: 1;
  animation: fadein 6s ease forwards;
  transform: translate(0, 0);
}

.scrollIn-01 {
  animation-delay: 2s;
}

.scrollIn-02 {
  animation-delay: 3s;
}

.scrollIn-03 {
  animation-delay: 4s;
}

.scrollIn-04 {
  animation-delay: 5s;
}

.scrollIn-05 {
  animation-delay: 6s;
}

.btnArrow {
  position: relative;
  /*font-family: "Hannari", serif;*/
  transition: .5s;
  padding: 0 2.564vw 3.846vw 0;
  margin-top: 4.167vw;
  width: 43.077vw;
}
.btnArrow--right {
  margin: 50px 0 0 auto;
}
.btnArrow:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4.359vw;
  background-image: url("../img/common/icon-arrow.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: none;
}
.btnArrow:hover {
  color: #193595;
}

.link--border {
  display: inline-block;
  border-bottom: 1px solid #232323;
}

.btn--insta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.btn--insta a {
  margin-left: 30px;
  width: 20px;
}
.btn--insta svg path {
  fill: #232323;
}

@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  .inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6.944vw;
  }

  .btnArrow {
    padding: 0 0.694vw 1.389vw 0;
    margin-top: 4.167vw;
    width: 13.889vw;
  }
  .btnArrow--right {
    margin: 4.167vw 0 0 auto;
  }
  .btnArrow:before {
    height: 1.389vw;
    background-image: url("../img/common/icon-arrow.svg");
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .inner {
    width: 100%;
    padding: 0 7.692vw;
  }
}
/************************************
header
/************************************/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: none;
  z-index: 8000;
  overflow-x: hidden;	
}
header a {
  color: #fff;
  font-family: "Hannari", serif;
}
header svg path {
  fill: #fff;
}
@media screen and (min-width: 769px) {
  header {
    padding: 0 2.083vw;
    height: 5.556vw;
    font-size: min(calc(13 / 1440 * 100vw), 13px);
  }
  header h1 {
    width: 2vw;
  }
  header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  header nav:last-of-type {
    margin-left: 2.083vw;
  }
  header nav .menu--list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  header nav .menu--list:last-child {
    margin-left: 2.083vw;
  }
  header nav .menu--list li:nth-child(n+2) {
    margin-left: 2.083vw;
  }
  header nav .menu--list li:nth-child(n+6) {
    /*margin-left: 0;
    display: none;*/
  }
	.gnav{
		display: flex;
	}
}
@media screen and (max-width: 768px) {
  header {
    /*padding: 0 5.128vw;*/
    height: 60px;
	justify-content: center;  
    /*height: 15.385vw;*/
  }
  header h1 {
    width: 20px;
    /*order: 2;*/
  }
  header .header--cart {
    order: 3;
    width: 28px;
    height: 30px;
  }
  header .hamburger {
    /*order: 1;*/
    width: 30px;
    height: 22px;
    cursor: pointer;
    text-align: center;
    /*position: relative;*/
	position: absolute;
    right: 20px;  
    z-index: 3;
  }
  header .hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
    background: #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  header .hamburger span:nth-child(1) {
    top: 0;
  }
  header .hamburger span:nth-child(2) {
    top: 50%;
    margin-top: -1px;
  }
  header .hamburger span:nth-child(3) {
    bottom: 0;
  }
  header .hamburger.active span:nth-child(1) {
    top: 16px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header .hamburger.active span:nth-child(2) {
    display: none;
  }
  header .hamburger.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  header nav.menu {
    position: fixed;
    z-index: 2;
    top: 60px;
    left: 0;
    color: #fff;
    background: #32343C;
    width: 100%;
    height: calc(100vh - 60px);
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
  }
  header nav.menu ul li a {
    padding: 40px 30px 0 30px;
    color: #fff;
  }
  header nav.menu.active {
    opacity: 100;
    display: block;
  }
}

.change-color {
  background: #fff;
}
.change-color a {
  color: #232323;
}
.change-color svg path {
  fill: #232323;
}
.change-color .hamburger span {
  background: #232323;
}

/************************************
footer
/************************************/
footer {
  background: #32343C;
  position: relative;
}
footer p, footer a {
  color: #fff;
  font-size: min(calc(13 / 1440 * 100vw), 13px);
}
@media screen and (min-width: 769px) {
  footer {
    margin-top: 25vw;
    padding: 5.556vw 6.944vw 6vw 2.083vw;
  }
  footer .footer--box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  footer .footer--box--left {
    margin-right: 5.556vw;
  }
  footer .footer--box--left h2 {
    width: 6.25vw;
    margin-bottom: 1.736vw;
  }
  footer .footer--box--left--tel {
    margin-top: 0.694vw;
  }
  footer .footer--box--left--tel a {
    display: flex;
  }
  footer .footer--box--left--tel img {
    width: 15px;
    margin-right: 0.694vw;
  }
  footer .footer--box--middle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  footer .footer--box--middle ul {
    margin-right: 5.556vw;
  }
  footer .footer--box--middle ul li:nth-child(n+2) {
    margin-top: 1.778vw;
  }
  footer .footer--box--right p {
    margin-bottom: 0.694vw;
    font-family: 'Roboto', sans-serif;
  }
  footer .footer--box--right ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  footer .footer--box--right ul li {
    width: 25px;
    margin-right: 2.083vw;
  }
  footer .footer--copyright {
    position: absolute;
    top: 14.583vw;
    right: -6vw;
    transform: rotate(90deg);
    font-size: min(calc(10 / 1440 * 100vw), 10px);
    letter-spacing: 0.08rem;
  }
}
@media screen and (max-width: 768px) {
  footer {
    margin-top: 38.462vw;
    padding: 20.513vw 7.692vw 7.692vw;
  }
  footer .footer--box--left {
    text-align: center;
  }
  footer .footer--box--left h2 {
    width: 17.692vw;
    margin: 0 auto 30px;
  }
  footer .footer--box--left--tel {
    margin-top: 2.564vw;
  }
  footer .footer--box--left--tel a {
    display: flex;
    justify-content: center;
  }
  footer .footer--box--left--tel img {
    width: 3.846vw;
    margin-right: 2.564vw;
  }
  footer .footer--box--middle {
    margin-top: 20.513vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  footer .footer--box--middle ul {
    width: 48%;
  }
  footer .footer--box--middle ul li:nth-child(n+2) {
    margin-top: 7.692vw;
  }
  footer .footer--box--right {
    margin: 17.436vw auto 12.821vw;
    text-align: center;
  }
  footer .footer--box--right p {
    margin-bottom: 7.692vw;
    font-family: 'Roboto', sans-serif;
    font-size: calc(13 / 390 * 100vw);
  }
  footer .footer--box--right ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  footer .footer--box--right ul li {
    width: 5.128vw;
    margin-right: 7.692vw;
  }
  footer .footer--copyright {
    font-size: calc(10 / 390 * 100vw);
    letter-spacing: 0.08rem;
    text-align: center;
  }
}

/************************************
商品ループ
/************************************/
.item-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
@media screen and (min-width: 769px) {
  .item-list:before, .item-list:after {
    content: "";
    display: block;
    width: 23%;
  }
  .item-list:before {
    order: 1;
  }
  .item-list:after {
    right: 0;
    bottom: 0;
  }
  .item-list li {
    width: 23%;
  }
  .item-list .item-name {
    margin-top: min(calc(10 / 1440 * 100vw), 10px);
    line-height: 1.5;
  }
  .item-list .price {
    font-size: min(calc(13 / 1440 * 100vw), 13px);
  }
}
@media screen and (max-width: 768px) {
  .item-list li {
    width: 48%;
  }
  .item-list li:nth-child(n+3) {
    margin-top: calc(50 / 390 * 100vw);
  }
  .item-list .item-name {
    margin-top: calc(10 / 390 * 100vw);
    line-height: 1.5;
  }
  .item-list .price {
    font-size: calc(12 / 390 * 100vw);
  }
}