@charset "utf-8";
/* ------------- header , css init , sp-menu -------------- */

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Shippori Mincho", serif;
  min-height: 100dvh;
  row-gap: 64px;
  /* 改行 */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  position: relative;
}

footer {
  /* footerを最下部へ */
  position: sticky;
  top: 100%;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
p,
a,
figure,
img,
ul,
ol,
li,
dl,
dt,
dd {
  padding: 0;
  margin: 0;
}

.inlineBlockSpan {
  display: inline-block;
}

/* -------------------- ヘッダー ---------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 11; /* swiper z-index 10 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  > h1 {
    width: 20%;
  }
  > .headerRight {
    width: 30%;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
  }
}

/* ///////////////// スマホメニュー ////////////////// */
/* //////////////////////////////////////// */

/* --------------------- マウスホバー ---------------------- */
/* transition */
header {
  > figure {
    > .hoverScale {
      transition: scale 0.3s;
    }
    > .hoverOpacity {
      transition: opacity 0.3s;
    }
  }
}
/*  */
@media (any-hover: hover) {
  header {
    > figure {
      > .hoverScale:hover {
        scale: 1.1;
      }
      > .hoverOpacity:hover {
        opacity: 0.6;
      }
    }
  }
}

/* メディアクエリ ///////////////////////////////// */

@media (width <= 520px) {
  header {
    height: 60px;
    > h1 {
      width: 30%;
      > a {
        display: grid;
        align-items: center;
      }
    }
    > .headerRight {
      justify-content: center;
      width: 65%;
      gap: 0 6px;
      > a {
        display: grid;
        align-items: center;
      }
    }
  }
}

/*  ///////////////////////////////// */