
@charset "UTF-8";
@font-face {
  font-family: 'anzumoji';
  src: url('../files/fonts/APJapanesefont.ttf') format('truetype');/*アンズモジ*/
}
*{
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}
h2{
  font-family: anzumoji;
  font-size:clamp(1.875rem, 1.667rem + 1.04vw, 2.5rem);/*30-40px*/
  color:#dfb1ab;
}
ul{
  list-style-type: none;
}

a{
  color:#007287;
  text-decoration: none;
}

img{
  max-width:calc(100vw - 80px);
  border:none;
}
.link_button{
  padding:5px 10px;
  background:#007287;
  color:#fff;
  display: inline-block;
}
body{
  min-height:100vh;
  color:#2A1410;
  background:#F9F1F0;
  background-image:hsl(6.7,42.9%,95.9%)
  radial-gradient(at 46% 46%, hsla(6.7,42.9%,95.9%,1) 0px, transparent 50%),
  radial-gradient(at 18% 1%, hsla(186,42%,95%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355,0%,100%,1) 0px, transparent 50%),
  radial-gradient(at 76% 62%, hsla(340,0%,100%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(0,100%,99%,1) 0px, transparent 50%),
  radial-gradient(at 80% 100%, hsla(126,42%,95%,1) 0px, transparent 50%),
  radial-gradient(at 74% 9%, hsla(6.7,42.9%,95.9%,1) 0px, transparent 50%);
  font-size:clamp(0.813rem, 0.75rem + 0.31vw, 1rem);
  font-size:clamp(0.813rem, 0.708rem + 0.52vw, 1.125rem);/*13-18px*/
  font-family: sans-serif;
}

header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:0 10px;
  position:fixed;
  z-index:10000;
  width:100%;
  backdrop-filter: blur(12px);
  background:rgba(249,241,240,.4);
}
header a{
  color:#2A1410;
  text-decoration:none;
}
h1{
  display: flex;
  justify-content: center;
  align-items:center;
  width:50px;
  height:40px;
}
h1 a{
  width:100%;
  height:100%;
  font-size:0;
  line-height: 0;
  background-image: url(../img/logo_header.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
}
.pc_nav .menu_list{
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.813rem, 0.792rem + 0.1vw, 0.875rem);
}
.pc_nav .menu_item{
  margin: 0 20px;
}
.header_etc_icon{
  display:flex;
  align-items: center;
}
.sns_list li{
  width: 50px;
  height:50px;
  padding:10px;
}
.sns_list li a{
  width:100%;
  height:100%;
  background-image: url(../img/Instagram.svg);
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  display:block;
}
.sp_menu_button {
  position: relative;
  z-index: 100;
  right: 10px;
  height: 20px;
  width: 25px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display:none;
}

.button-bar {
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background: #333333;
}

.button-bar::before,
.button-bar::after {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: #333333;
  transition: 0.3s ease;
}

.button-bar::before {
  top: 0;
}

.button-bar::after {
  bottom: 0;
}

.sp_menu_button.is-active .button-bar {
  height: 0;
}

/* ボタンをクリックしたときにバツに変える */
.sp_menu_button.is-active .button-bar::before {
  opacity: 1;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  transition: 0.3s ease;
}

.sp_menu_button.is-active .button-bar::after {
  opacity: 1;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: 0.3s ease;
}

.sp_nav{
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0;
}

.sp_nav.is-active {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100vh;
  transition: 0.5s ease;
}

.sp_nav .overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: rgba(124, 124, 124, 1);
}

.sp_nav .menu_list {
    display: flex;
    z-index: 100;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    gap: 24px;
    font-size: 20px;
    flex-direction: column;
    list-style-type: none;
    position: fixed;
    top: 0;
    align-items: center;
    left: calc(50% - 100px);
}
@media (max-width: 820px) {  
  .pc_nav{
    display:none;
  }
  .sp_menu_button {
    display:inline;
  }
}
footer{
  background:#CCA967;
  width:100%;
  margin:0 auto;
  text-align: center;
  padding:10px;
}

.breadcrumb{
  padding:60px 20px 0;
}
.breadcrumb_list{
  display: flex;
}
.breadcrumb_item{
  margin-right:10px;
}
.breadcrumb_item:not(:last-child)::after{
  content: " > ";
}
