@charset "UTF-8";
@import url(./html5reset.css);
@import url(./cssreset.css);
@import url(./basic.css?ver=251103.2);
@import url(./animation.css);
@import url(./snippet.css);

/*============================================================

    BASIC

============================================================*/

/*--------------------------------
	色設定
--------------------------------*/

:root {
  /* 基本色 */
  --color-primary: #fff;
  --color-link: #fff;
  --color-hover: #ddd;
  --bgcolor-primary: #000;

  /* ハイライト色 */
  --color-highlight: #000;
  --color-highlight-link: #000;
  --color-highlight-hover: #ddd;

  /* リンクボタン */
  --linkbtn-color: #fff;
  --linkbtn-bgcolor: transparent;
  --linkbtn-bordercolor: #fff;
  --linkbtn-color-hover: #000;
  --linkbtn-bgcolor-hover: #fff;
  --linkbtn-bordercolor-hover: #fff;

  /* ローダー */
  --bgcolor-loader: #fff;
  --bordercolor-loader-primary: rgba(0, 0, 0, 0.8);
  --bordercolor-loader-secondary: rgba(0, 0, 0, 0.2);

  /* ヘッダー */
  --bgcolor-header: #fff;
  --bgcolor-nav: #ccc;

  /* ハンバーガー */
  --color-navbtn: #000;
  --color-navbtn-hover: #ccc;

  /* フッター */
  --bgcolor-footer: #ccc;

  /* アイコン */
  --color-icon: #666;
  --color-icon-hover: #000;

  /* ボーダー */
  --bordercolor-primary: #ccc;

  /* テーブル */
  --bordercolor-table: #ccc;
  --bgcolor-table: #eee;
}

/* 基本 */
body {
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--color-primary);
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
    "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3",
    "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: normal;
  background-color: var(--bgcolor-primary);
}

/* ページ遷移のトランジション + ローディング */
body #loader-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: var(--bgcolor-loader);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  will-change: opacity;
}

body.transition #loader-wrapper {
  opacity: 1;
}

body #loader-wrapper #loader {
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  border-top: 3px solid var(--bordercolor-loader-primary);
  border-right: 3px solid var(--bordercolor-loader-primary);
  border-bottom: 3px solid var(--bordercolor-loader-primary);
  border-left: 3px solid var(--bordercolor-loader-secondary);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loader 1.1s infinite linear;
  animation: loader 1.1s infinite linear;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*============================================================

    LINK

============================================================*/
/*--------------------------------
    リンク基本スタイル
--------------------------------*/
a:link,
a:visited {
  color: var(--color-link);
  text-decoration: none;
}

@media only screen and (min-width: 813px) {
  a:hover,
  a:active {
    color: var(--color-hover);
    text-decoration: none;
  }
}

a svg {
  fill: var(--color-link);
}

@media only screen and (min-width: 813px) {
  a:hover svg {
    fill: var(--color-hover);
  }
}

/*--------------------------------
    リンクボタン
--------------------------------*/

.link_btn {
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.link_btn a {
  width: 100%;
  min-height: 150px;
  padding: 1rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.link_btn a:link,
.link_btn a:visited {
  color: var(--linkbtn-color);
  background-color: var(--linkbtn-bgcolor);
  border: 1px solid var(--linkbtn-bordercolor);
}

@media only screen and (min-width: 813px) {
  .link_btn a:hover,
  .link_btn a:active {
    color: var(--linkbtn-color-hover);
    background-color: var(--linkbtn-bgcolor-hover);
    border: 1px solid var(--linkbtn-bordercolor-hover);
  }
}

@media only screen and (max-width: 812px) {
  .link_btn {
    width: 90%;
  }

  .link_btn a {
    min-height: 120px;
  }
}

/*--------------------------------
    SNSアイコン
--------------------------------*/
a .icon_sns_insta,
a .icon_sns_fb,
a .icon_sns_tw,
a .icon_sns_note {
  fill: var(--color-icon);
}

@media only screen and (min-width: 813px) {
  a:hover .icon_sns_insta,
  a:hover .icon_sns_fb,
  a:hover .icon_sns_tw,
  a:hover .icon_sns_note {
    fill: var(--color-icon-hover);
  }
}

/*============================================================

    LAYOUT

============================================================*/

/*--------------------------------
    MAIN
--------------------------------*/

main {
  margin: 0 auto;
  /* ヘッダーの高さ依存 */
  padding-top: 80px;
}

main section {
  margin: 0 auto;
  padding: 12rem 0;
}

main section#second_title {
  padding-bottom: 0;
}

@media only screen and (max-width: 812px) {
  main {
    /* ヘッダーの高さ依存 */
    padding-top: 60px;
  }

  main section {
    padding: 7.5rem 0;
  }
}

/*--------------------------------
    汎用コンテナ
--------------------------------*/

.container {
  max-width: 1280px;
  min-width: 990px;
  margin: 0 auto;
  padding-left: 3%;
  padding-right: 3%;
}

@media only screen and (min-width: 1280px) {
  .container {
    padding-left: 38px;
    padding-right: 38px;
  }
}

@media only screen and (max-width: 990px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 812px) {
  .container {
    max-width: none;
    min-width: 0;
    padding-left: 6%;
    padding-right: 6%;
  }
}

.container.wide {
  max-width: none;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.container.narrow {
  max-width: 800px;
  min-width: 0;
}

/*--------------------------------
    汎用インナー
--------------------------------*/

.inner {
  margin: 0 auto;
  padding-left: 3%;
  padding-right: 3%;
}

@media only screen and (max-width: 812px) {
  .inner {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/*--------------------------------
    汎用ボックス
--------------------------------*/

.box {
  margin: 0 auto 3em;
}

.box:last-child {
  margin: 0 auto;
}

@media only screen and (max-width: 812px) {
}

/*============================================================

    HEADER

============================================================*/

/*--------------------------------
    基本設定
--------------------------------*/
header {
  z-index: 9990;
  display: block;
  width: 100%;
  height: auto;
}

header.hide {
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

header .container {
  max-width: none;
  height: 100%;
  padding-top: 4rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media only screen and (max-width: 812px) {
  header {
  }
}

/*--------------------------------
   ロゴマーク
--------------------------------*/

header .container #header_logo {
  width: 20%;
  max-width: 350px;
  min-width: 240px;
  margin: 0 auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 10001;
}

header .container #header_logo a img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  transition: 0.6s;
}

header .container #header_logo strong {
  font-weight: normal !important;
}

@media only screen and (min-width: 813px) {
  header .container #header_logo a:hover img {
    opacity: 0.6;
  }
}

@media only screen and (max-width: 812px) {
  header .container #header_logo {
    width: 150px;
  }
}

/*============================================================

    FOOTER

============================================================*/

/*--------------------------------
   基本設定
--------------------------------*/

footer {
  text-align: center;
  padding-top: 15rem;
  padding-bottom: 7rem;
}

@media only screen and (max-width: 812px) {
  footer {
    padding-top: 10rem;
    padding-bottom: 4rem;
  }
}

/*--------------------------------
   フッターリンク
--------------------------------*/

footer .container .link_btn a {
  font-size: 2.4rem;
}

footer .container .link_btn a em {
  display: block;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
    "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3",
    "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 2rem;
}

@media only screen and (max-width: 812px) {
  footer .container .link_btn a {
    font-size: 1.8rem;
  }

  footer .container .link_btn a em {
    font-size: 1.2rem;
    margin-top: 1.5rem;
  }
}

/*--------------------------------
   フッターロゴ
--------------------------------*/

footer .container .footer_logo {
  width: 25%;
  max-width: 350px;
  min-width: 200px;
  margin: 15rem auto 0;
}

footer .container .footer_logo a img {
  width: 100%;
  height: auto;
  transition: 0.6s;
}

@media only screen and (min-width: 813px) {
  footer .container .footer_logo a:hover img {
    opacity: 0.6;
  }
}

@media only screen and (max-width: 812px) {
  footer .container .footer_logo {
    width: 150px;
    margin: 8rem auto 0;
  }
}

/*--------------------------------
   コピーライト
--------------------------------*/

footer .container .footer_copyright {
  font-size: 1.1rem;
  margin: 10rem auto 0;
}

@media only screen and (max-width: 812px) {
  footer .container .footer_copyright {
    font-size: 1rem;
    margin: 8rem auto 0;
  }
}

/*============================================================

    HEADING

============================================================*/

/*--------------------------------
    見出し
--------------------------------*/

.heading_1 {
  display: block;
  margin: 0 auto 8rem;
  font-size: 2.8rem;
  /* font-size: min(2.4rem, 24px); */
  /* font-size: clamp(20px, 2.4rem, 24px); */
  letter-spacing: 0.03em;
  text-align: center;
}

.heading_1 em {
  display: block;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
    "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3",
    "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 0.75em;
}

/* .heading_2 {
  display: block;
  margin: 1.6em auto 0.8em;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
}

.heading_3 {
  display: block;
  margin: 1.4em auto 0.7em;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
}

.heading_4 {
  display: block;
  margin: 1.4em auto 0.7em;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
} */

@media only screen and (max-width: 812px) {
  .heading_1 {
    font-size: 1.9rem;
    margin: 0 auto 6rem;
  }

  .heading_1 em {
    font-size: 1.2rem;
  }

  /* .heading_2 {
    font-size: 1.6rem;
  }
  .heading_3 {
    font-size: 1.5rem;
  }
  .heading_4 {
    font-size: 1.5rem;
  } */
}