@charset "UTF-8";
/* Base */
html, body {
  background: rgba(250, 250, 250, 0.2); }

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  color: #3E3A39;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: normal; }
  @media only screen and (max-width: 821px) {
    body {
      font-size: 14px;
      line-height: 1.9; } }

a {
  color: #3E3A39; }

::selection {
  background-color: #eeeeee; }

p {
  margin-bottom: 1.5em; }

h2, h3, h4, h5 {
  color: #3E3A39; }

h2 {
  text-align: center;
  font-size: 2.8em;
  margin-bottom: .8em;
  line-height: 1; }
  @media only screen and (max-width: 821px) {
    h2 {
      font-size: 2em;
      margin-bottom: 0em;
      line-height: 2.4; } }
  h2.hdg {
    font-size: 40px;
    margin-bottom: 80px;
    font-weight: 500;
    letter-spacing: 2px;
    position: relative;
    padding-top: 140px; }
    @media only screen and (max-width: 821px) {
      h2.hdg {
        font-size: 28px;
        padding-top: 112px;
        background: url(_shared/image/mark.svg) 50% 0/30x no-repeat;
        margin-bottom: 1.5em;
        line-height: 1; } }
    h2.hdg::before {
      content: '';
      display: block;
      width: 1px;
      height: 120px;
      border-left: 1px solid #3E3A39;
      position: absolute;
      top: 0;
      left: 50%; }
      @media only screen and (max-width: 821px) {
        h2.hdg::before {
          height: 100px;
          border-left: 0.9px solid #3E3A39; } }
    #introduction h2.hdg {
      margin-bottom: 40px;
      padding-top: 150px; }
      @media only screen and (max-width: 821px) {
        #introduction h2.hdg {
          margin-bottom: 32px;
          padding-top: 124px;
          font-size: 18px;
          line-height: 1.8;
          font-weight: bold; } }
      #introduction h2.hdg img {
        width: 180px; }
        @media only screen and (max-width: 821px) {
          #introduction h2.hdg img {
            width: 150px; } }
    @media only screen and (max-width: 821px) {
      #contact h2.hdg {
        margin-bottom: 20px; } }
  h2 span {
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    display: block;
    letter-spacing: .1em; }
    @media only screen and (max-width: 821px) {
      h2 span {
        font-size: 18px;
        margin-top: 16px; } }
  @media only screen and (max-width: 821px) {
    #privacy-policy h2 {
      font-size: 1.8em; } }

h3 {
  font-size: 1.5em;
  margin-bottom: 1.5em; }
  @media only screen and (max-width: 821px) {
    h3 {
      font-size: 1.3em; } }
  #privacy-policy h3 {
    font-size: 1.1em;
    margin: 2em 0 1em;
    text-align: left; }

.marker {
  background-image: linear-gradient(transparent 70%, rgba(255, 226, 0, 0.9) 70%); }

h4 {
  font-size: 1.3em;
  margin-bottom: 1em; }

h5 {
  font-size: 1em;
  margin-bottom: .5em; }
  @media only screen and (max-width: 821px) {
    h5 {
      margin-bottom: .2em; } }

dl {
  font-weight: bold; }
  dl div {
    grid-template-columns: 4fr 8fr; }
    @media only screen and (max-width: 821px) {
      dl div {
        display: block; } }
    dl div dd {
      padding-left: 0;
      border: none;
      font-weight: normal; }

.box-area {
  border-top: 1px solid #3E3A39;
  border-bottom: 1px solid #3E3A39;
  padding: 36px 0; }

.box {
  position: relative;
  padding: 0 20px;
  background-color: transparent; }
  @media only screen and (max-width: 821px) {
    .box {
      border-bottom: 0.9px solid #3E3A39;
      padding: 0;
      padding-bottom: 40px;
      margin-bottom: 16px; } }
  .box h3 {
    font-size: 20px;
    line-height: 1.52;
    margin-bottom: 6px; }
    @media only screen and (max-width: 821px) {
      .box h3 {
        line-height: 1.615; } }
    .box h3 span {
      display: block;
      font-size: 14px; }
  .box .badge {
    line-height: 1;
    font-size: 10px;
    padding: 4px 8px;
    border: 0.9px solid #3E3A39;
    border-radius: 2em; }
  .box .amount {
    position: absolute;
    top: 6px;
    right: 20px;
    line-height: 1;
    font-size: 12px; }
    @media only screen and (max-width: 821px) {
      .box .amount {
        top: 8px;
        right: 0; } }
  .box .thumbnail {
    margin: 20px 0; }
  .box .text p {
    font-weight: bold; }
    .box .text p sup {
      font-size: 10px; }
    .box .text p.blend {
      font-weight: normal;
      margin-bottom: 0; }
      .box .text p.blend span {
        font-weight: bold;
        margin-bottom: 0;
        display: block; }
  .box .text .hr {
    margin: 24px 0;
    height: 1px;
    border-bottom: 0.9px dotted #3E3A39; }

.box-area .box:nth-child(1),
.box-area .box:nth-child(2),
.box-area .box:nth-child(3) {
  border-bottom: 0.9px solid #3E3A39;
  padding-bottom: 40px;
  margin-bottom: 16px; }
.box-area .box:last-child {
  border: none; }

.button {
  margin-top: 0;
  display: flex;
  justify-content: center; }
  @media only screen and (max-width: 821px) {
    .button {
      display: grid;
      justify-content: center; } }
  .button a {
    font-weight: bold;
    border: 1px solid #3E3A39;
    border-radius: 2em;
    background-color: #eee;
    padding: 1.2em 2em;
    font-size: 1em;
    line-height: 1;
    display: flex;
    justify-content: center; }
    #access .button a {
      line-height: 1.5; }
    .button a i {
      margin-left: .5em;
      opacity: .9; }

.button-border a {
  border-bottom: 1px solid #ffe200; }

/* Layout */
main {
  width: 100%;
  min-width: 100%;
  padding: 0 0 0; }
  @media only screen and (max-width: 821px) {
    main {
      padding: 0 0 0; } }

.container {
  width: 90%;
  max-width: 1080px;
  padding: 0em; }
  @media only screen and (max-width: 821px) {
    .container {
      width: 100%;
      padding: 0 28px 0; } }

.container-sm {
  width: 70%;
  max-width: 1080px;
  margin: 0 auto; }
  @media only screen and (max-width: 821px) {
    .container-sm {
      width: 100%; } }

.row {
  gap: 24p 48px; }
  @media only screen and (max-width: 821px) {
    .row {
      gap: 2em; } }

section {
  padding-top: 120px;
  margin-bottom: 120px; }
  @media only screen and (max-width: 821px) {
    section {
      padding-top: 60px;
      margin-bottom: 60px; } }

/* Contents */
#hero {
  position: relative; }
  @media only screen and (max-width: 821px) {
    #hero {
      margin-top: 42px; } }
  #hero #visual img {
    width: 100%; }
  #hero #copy {
    position: absolute;
    bottom: 40px;
    left: 36px; }
    @media only screen and (max-width: 821px) {
      #hero #copy {
        left: 20px;
        bottom: 28px;
        display: none; } }
    #hero #copy h2 {
      font-size: 18px;
      letter-spacing: px;
      padding-bottom: 8px;
      border-bottom: 1px solid;
      text-align: left;
      display: inline-block; }
      @media only screen and (max-width: 821px) {
        #hero #copy h2 {
          font-size: 14px;
          padding-bottom: 0;
          margin-bottom: 12px; } }
    #hero #copy p {
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 0; }
      @media only screen and (max-width: 821px) {
        #hero #copy p {
          font-size: 13px;
          line-height: 1.6; } }
  #hero #sub-copy {
    position: absolute;
    bottom: 40px;
    right: 36px; }
    @media only screen and (max-width: 821px) {
      #hero #sub-copy {
        right: 0;
        left: 24px;
        bottom: 28px; } }
    #hero #sub-copy img {
      width: 180px; }
      @media only screen and (max-width: 821px) {
        #hero #sub-copy img {
          width: 140px; } }

/* Header, Nav, Footer */
header {
  top: 0;
  z-index: 9999;
  padding: 40px 36px;
  box-sizing: border-box;
  display: flex; }
  @media only screen and (max-width: 821px) {
    header {
      padding: 28px 28px;
      height: 96px;
      display: block; } }
  header h1 img {
    width: 360px;
    height: auto;
    display: block; }
    @media only screen and (max-width: 821px) {
      header h1 img {
        width: 260px; } }
  header #mark {
    margin-left: auto;
    margin-bottom: 0;
    line-height: 1; }
    header #mark img {
      width: 60px; }
      @media only screen and (max-width: 821px) {
        header #mark img {
          width: 44px; } }
    @media only screen and (max-width: 821px) {
      header #mark {
        position: absolute;
        top: 28px;
        right: 24px;
        grid-gap: 6px; } }

@media only screen and (max-width: 821px) {
  #nav-menu {
    display: none !important; } }

footer {
  padding: 120px 40px 160px;
  top: 100%;
  text-align: center;
  position: relative; }
  @media only screen and (max-width: 821px) {
    footer {
      padding: 60px 20px; } }
  footer #page-top {
    position: absolute;
    top: -104px;
    right: 40px;
    z-index: 10000; }
    @media only screen and (max-width: 821px) {
      footer #page-top {
        top: -84px;
        right: 24px; } }
    footer #page-top a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      grid-gap: 6px;
      font-size: 10px; }
      footer #page-top a i {
        font-size: 20px;
        display: grid;
        border: 0.9px solid #3E3A39;
        border-radius: 2em;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center; }
  footer h1 {
    text-align: center;
    margin-bottom: 40px; }
    @media only screen and (max-width: 821px) {
      footer h1 {
        margin: 0 0 16px; } }
    footer h1 img {
      width: 240px;
      height: auto; }
      @media only screen and (max-width: 821px) {
        footer h1 img {
          width: 160px; } }
  footer p {
    font-size: 13px; }
    @media only screen and (max-width: 821px) {
      footer p {
        font-size: 11px; } }
  footer #sns {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 24px;
    margin: 40px 0; }
    footer #sns li#icon-LINE svg {
      width: 20px; }
    footer #sns li a {
      width: 3em;
      height: 3em;
      display: grid;
      justify-content: center;
      align-items: center;
      border: 1px solid #3E3A39;
      border-radius: 2em; }
      @media only screen and (max-width: 821px) {
        footer #sns li a {
          border: 0.9px solid #3E3A39; } }
  footer #copyright {
    text-align: center;
    margin-bottom: 0;
    font-size: 9px; }
  footer #privacy-policy {
    font-size: 9px; }

#item, footer {
  background-color: #fafafa; }

#introduction p {
  text-align: center;
  font-weight: bold;
  line-height: 2.2;
  font-size: 15px; }
  @media only screen and (max-width: 821px) {
    #introduction p {
      font-size: 13px;
      text-align: left;
      text-align: justify; } }
#introduction h3 {
  text-align: center;
  margin-top: 36px; }
  #introduction h3 img {
    width: 280p; }
    @media only screen and (max-width: 821px) {
      #introduction h3 img {
        width: 240px; } }
#introduction ul {
  display: flex;
  justify-content: center;
  grid-gap: 36px; }
  @media only screen and (max-width: 821px) {
    #introduction ul {
      display: grid;
      grid-gap: 0;
      margin-bottom: 0; } }
  #introduction ul li {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 821px) {
      #introduction ul li {
        font-size: 14px; } }
    #introduction ul li span {
      display: inline-block;
      margin-right: 16px;
      padding: 20px 12px;
      line-height: 1;
      background-image: url(_shared/image/hexagon.svg);
      background-repeat: no-repeat;
      background-position: top 50% left 0;
      background-size: 33px; }
      @media only screen and (max-width: 821px) {
        #introduction ul li span {
          margin-right: 14px;
          padding: 20px 10px;
          background-size: 26px;
          font-size: 12px; } }

#item {
  padding-bottom: 90px; }
  @media only screen and (max-width: 821px) {
    #item {
      padding-bottom: 40px; } }

#contact {
  margin-bottom: 160px; }
  @media only screen and (max-width: 821px) {
    #contact {
      padding-top: 20px;
      margin-bottom: 60px; } }
  #contact h3, #contact p {
    text-align: center; }
  #contact p {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 20px; }
    #contact p .circle {
      font-size: 16px;
      width: 40px;
      height: 40px;
      display: grid;
      justify-content: center;
      align-items: center;
      border: 1px solid #3E3A39; }
      #contact p .circle i {
        opacity: 1; }

#title {
  padding: 60px 0 40px;
  margin-bottom: 0; }
  @media only screen and (max-width: 821px) {
    #title {
      padding: 60px 0 40px; } }
  #title h2 {
    margin-bottom: 0; }

.bg {
  background: #fafafa;
  padding: 60px 0; }
  @media only screen and (max-width: 821px) {
    .bg {
      padding: 40px 0; } }

/*  */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100svh;
  background-color: #fff; }
  #splash #splash-logo {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; }
    #splash #splash-logo img {
      width: 60px; }
      @media only screen and (max-width: 821px) {
        #splash #splash-logo img {
          width: 30px; } }

#logo {
  opacity: 0; }

.splash-bg {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100vh;
  background-color: #ccc; }

body.appear .splash-bg {
  transform: scale(1, 0);
  animation: splashAnime .8s ease forwards; }
@keyframes splashAnime {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: top left; }
  50% {
    transform: scale(1.1);
    transform-origin: top left; }
  50.0001% {
    transform-origin: bottom left; }
  100% {
    transform: scale(1, 0);
    transform-origin: bottom left; } }
body.appear #wrapper {
  animation: wrapperAnime .4s ease 1.2s forwards; }
@keyframes wrapperAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.bgImgAnime {
  animation: bgImgAnime  1s ease-in-out forwards; }
@keyframes bgImgAnime {
  0% {
    background-position: 50% 40px; }
  100% {
    background-position: 50% 0px; } }

/*# sourceMappingURL=style.css.map */