@charset "UTF-8";


/* Roboto Mono ローカル読み込み */
@font-face {
  font-family: 'Roboto Mono';
  src: url('../font/RobotoMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
.roboto {
  font-family: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

/* shingo Bold ローカル読み込み */
@font-face {
  font-family: 'shingo';
  src: url('../font/AP-OTF-UDShinGoNTPr6N-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.bold {
  font-family: 'shingo', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  font-weight: 700;
}

/* Helvetica Neue LT Std ローカル読み込み */
@font-face {
  font-family: 'Helvetica Neue LT Std BlkCn';
  src: url('../font/HelveticaNeueLTStd-BlkCn.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
.hlvt {
  font-family: 'Helvetica Neue LT Std BlkCn', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root {
  --font-roboto: "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-hlvt: "Helvetica Neue LT Std BlkCn";
  --font-bold: "shingo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  /* フォントサイズ */
  --fs-xl: clamp(4rem, 3.545rem + 1.455vw, 5rem);
  --fs-lg: clamp(2rem, 1.091rem + 2.909vw, 4rem);
  --fs-md: clamp(1.3rem, 0.982rem + 1.018vw, 2rem);
  --fs-sm: clamp(1.2rem, 1.064rem + 0.436vw, 1.5rem);
  --fs-base: clamp(0.9rem, 0.855rem + 0.145vw, 1rem);
  --fs-mini: clamp(0.7rem, 0.655rem + 0.145vw, 0.8rem);
  
  /* カラー */
  --c_key: #307163;
  --c_mens: #4b9b85;
  --c_mens_light: #dceee9;
  --c_pink: #e76aa3;
  --c_pink_light: #fde5f0;
  --c_tx: #222222;
  --c_white: #fff;
  --c_white_rgb: 255, 255, 255;
  --c_black_rgb: 0, 0, 0;
  --c_grey: #ccc;
}

html {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-size: var(--fs-base);
  color: var(--c_tx);
}

body {
  width: 100%;
  overflow-x: hidden;
}
@media only screen and (max-width: 768px) {
  body {
    min-width: initial;
  }
}
body.fixed {
  height: 100%;
  overflow: hidden;
}

/* --------------------------------------
基本設定
---------------------------------------*/
a {
  text-decoration: none;
  color: var(--c_tx);
  transition: 0.5s;
}
a:hover,a p:hover {
  color: var(--c_key);
  transition: 0.5s;
}
a img:hover {
  opacity: 0.7;
  transition: 0.5s;
}
li {
  list-style: none;
}
img {
  width: 100%;
  height: auto;
}
.none {
  display: none !important;
}

@media screen and (min-width: 768px){
  .sp {
    display: none!important;
  }
}
@media screen and (min-width: 500px) {
  .spsp {
    display: none !important;
  }
}
@media screen and (max-width: 768px){
  .pc {
    display: none!important;
  }
}


/* --------------------------------------
文字
---------------------------------------*/
h1,h2,h3,h4 {
  font-family: var(--font-hlvt), var(--font-bold); 
  font-feature-settings: "palt";
}
h1 {
  font-size: var(--fs-xl);
}
h2 {
  font-size: var(--fs-lg);
}
h3 {
  font-size: var(--fs-md);
}
h4 {
  font-size: var(--fs-sm);
}
p {
  font-size: var(--fs-base);
  font-weight: 400;
  text-align: justify;
  font-feature-settings: "palt";
  line-height: 2;
}
.text_title {
  font-family: var(--font-hlvt),var(--font-bold);
  font-weight: 700;
  font-size: var(--fs-sm);
}
p.indent_text {
  padding-left: 1em;
  text-indent: -1em;
  text-align: justify;
}
.wt {
  color: var(--c_white);
}
.mini {
  font-size: var(--fs-mini);
}


/* --------------------------------------
セクション・文字幅
---------------------------------------*/
section {
  height: auto;
  width: 100%;
  padding: 100px 0;
  overflow: hidden;
}
section._01 {
  height: auto;
  width: 100%;
  padding: 100px 0 0;
  overflow: hidden;
}
section._02 {
  height: auto;
  width: 100%;
  padding: 0 0 100px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  section {
    height: auto;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
  }
  section._01 {
    height: auto;
    width: 100%;
    padding: 80px 0 0;
    overflow: hidden;
  }
  section._02 {
    height: auto;
    width: 100%;
    padding: 0 0 80px;
    overflow: hidden;
  }
}
.bg_wt {
  background-color: var(--c_white);
}
.bg_grey {
  background-color: rgba(var(--c_black_rgb), 0.1);
}
.sec_inner {
  width: 96%;
  max-width: 1100px;
  height: 100%;
  margin: auto;
}
.w800_wrap {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}


/* --------------------------------------
 マージン
---------------------------------------*/
:root {
  --mgn5rem: clamp(3rem, 2.091rem + 2.909vw, 5rem);
  --mgn4rem: clamp(2.5rem, 1.818rem + 2.182vw, 4rem);
  --mgn3rem: clamp(2rem, 1.545rem + 1.455vw, 3rem);
  --mgn2rem: clamp(1.5rem, 1.273rem + 0.727vw, 2rem);
  --mgn1rem: clamp(0.7rem, 0.564rem + 0.436vw, 1rem);
}
.mgn5rem {
  width: 100%;
  height: var(--mgn5rem);
}
.mgn4rem {
  width: 100%;
  height: var(--mgn4rem);
}
.mgn3rem {
  width: 100%;
  height: var(--mgn3rem);
}
.mgn2rem {
  width: 100%;
  height: var(--mgn2rem);
}
.mgn1rem {
  width: 100%;
  height: var(--mgn1rem);
}


/* --------------------------------------
仕切り線
---------------------------------------*/
.partition_bar {
  width: 100%;
  height: 1px;
  background-color: var(--c_grey);
}


/* --------------------------------------
カラム設定リスト
---------------------------------------*/
ul.two_column_list {
  display: flex;
  flex-direction: column;
  gap: var(--mgn5rem);
}
ul.two_column_list li {
  width: 100%;
}
/* 仕切り線 */
ul.two_column_list > li:empty {
  width: 100vw;
  height: 1px;
  margin-left: calc(50% - 50vw);
  background: var(--c_grey);
}

/* --------------------------------------
カラム設定
---------------------------------------*/
.two_column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
  gap: 3rem;
}
.two_column._re {
  flex-direction: row-reverse;
}
.two_column_img {
  flex: 3.5;
}
.two_column_tx {
  flex: 6.5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mgn1rem);
}
.two_column_img img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(var(--c_black_rgb), 0.05);
  border-radius: 1rem;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(var(--c_black_rgb), 0.08);
}

@media screen and (max-width: 768px) {
  .two_column {
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: auto;
  }
}


/* --------------------------------------
カラム設定2
---------------------------------------*/
.two_column._02 {
  --column2-outer: min(100vw, 1600px);
  --column2-inner: min(96vw, 1100px);
  --column2-gap: clamp(2rem, 4vw, 5rem);
  width: var(--column2-outer);
  margin-left: calc(50% - (var(--column2-outer) / 2));
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--column2-gap);
}
.two_column._02 .two_column_img {
  flex: 1 1 auto;
  min-width: 0;
}
.two_column._02 .two_column_tx {
  flex: 0 0 min(45vw, 550px);
  max-width: min(45vw, 550px);
  margin-right: calc((var(--column2-outer) - var(--column2-inner)) / 2);
}
.two_column._02._re {
  flex-direction: row-reverse;
}
.two_column._02._re .two_column_tx {
  margin-right: 0;
  margin-left: calc((var(--column2-outer) - var(--column2-inner)) / 2);
}

@media screen and (max-width: 768px) {
  .two_column._02 {
    width: 100%;
    max-width: 500px;
    margin: auto;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .two_column._02 .two_column_img,
  .two_column._02 .two_column_tx {
    flex: initial;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
  .two_column._02 .two_column_img img {
    border-radius: 1rem;
  }
}



/* --------------------------------------
ヘッダー
---------------------------------------*/
header {
  width: 100%;
  height: 70px;
  background: rgba(var(--c_white_rgb), 0.8);
  /* overflow: hidden; */
  display: flex;
  justify-content: right;
}
.head_inner {
  width: 96%;
  height: 100%;
  margin: auto;
}

.top_header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* --------------------------------------
ヘッダーロゴ
---------------------------------------*/
h1.head_main_logo {
  z-index: 100;
}
h1.head_main_logo a {
  position: relative;
  display: block;
  width: 250px;
  height: 60px;
}
h1.head_main_logo a .head_logo_img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: auto;
  transform: translateY(-50%);
}
h1.head_main_logo a .head_logo_img_black {
  height: 40px;
  animation: headerLogoBlack 10s infinite;
}
h1.head_main_logo a .head_logo_img_pink {
  height: 40px;
  animation: headerLogoPink 10s infinite;
}
@keyframes headerLogoBlack {
  0%, 45% {
    opacity: 1;
  }
  50%, 95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes headerLogoPink {
  0%, 45% {
    opacity: 0;
  }
  50%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width: 1000px) {
  h1.head_main_logo {
    z-index: 1000;
  }
  h1.head_main_logo a {
    width: 210px;
    height: 56px;
  }
  h1.head_main_logo a .head_logo_img_black {
    height: 40px;
  }
  h1.head_main_logo a .head_logo_img_pink {
    height: 40px;
  }
}


/* --------------------------------------
ヘッダー内レイアウト
---------------------------------------*/
nav.head_main_menu {
  height: 100px;
  display: flex;
}
/* ヘッダーメニュー */
.head_menu_wrap ul {
  width: auto;
  height: 100%;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  line-height: 100%;
  gap: 1.5rem;
}

.head_menu_wrap ul li {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  line-height: 100%;
}

.head_menu_wrap ul li a {
  color: var(--c_tx);
  font-family: var(--font-roboto);
  font-size: var(--fs-mini);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.head_menu_wrap ul li a:hover {
  color: var(--c_key);
  transition: 0.5s;
}
.head_menu_wrap ul li.has_sub_menu {
  position: relative;
}
.head_menu_wrap ul.head_sub_menu {
  position: absolute;
  top: 70%;
  left: 50%;
  z-index: 100;
  width: max-content;
  height: auto;
  margin-left: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  background: rgba(var(--c_white_rgb), 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.5rem);
  transition: 0.3s;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(var(--c_black_rgb), 0.1);
}
.head_menu_wrap ul.head_sub_menu li {
  height: auto;
}
.head_menu_wrap ul.head_sub_menu li a {
  white-space: nowrap;
}
.head_menu_wrap ul li.has_sub_menu:hover ul.head_sub_menu,
.head_menu_wrap ul li.has_sub_menu:focus-within ul.head_sub_menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


@media only screen and (max-width:1000px) {
  .head_menu_wrap ul {
    display: none;
  }
}

/* --------------------------------------
ヘッダー固定
---------------------------------------*/

/* スクロール途中でヘッダーが表示＆非表示するためのCSS */
#header {
  /*fixedで上部固定*/
  position: fixed;
  z-index: 999;
  /*最前面へ*/
  top: 0;
}

/*　上に上がる動き　*/
#header.UpMove {
  animation: HeaderUpAnime 0.5s forwards;
}
@keyframes HeaderUpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/
#header.DownMove {
  animation: HeaderDownAnime 0.5s forwards;
}
@keyframes HeaderDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --------------------------------------
ハンバーガーメニュー
---------------------------------------*/
.sp_btn {
  display: none;
}
@media screen and (max-width: 1000px) {
  .sp_btn {
    display: block;
  }
}

/* ナビゲーションのためのCSS */
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background-color: var(--c_white);
  /*動き*/
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/*アクティブクラスがついたら表示*/
#g-nav.panelactive {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  /*表示する高さ*/
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav .g-nav-list_wrap {
  position: relative;
  z-index: 999;
  top: auto;
  left: auto;
  transform: none;
  width: min(80%, 420px);
  min-height: 100%;
  margin: 0 auto;
  padding: 100px 0 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
}


/*リストのレイアウト設定*/
#g-nav .g-nav_menu_group {
  width: 100%;
}
#g-nav .g-nav_menu_title {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--c_black_rgb), 0.3);
  margin-bottom: 1rem;
  color: var(--c_tx);
  font-family: var(--font-bold);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
#g-nav .g-nav_menu_group ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
#g-nav .g-nav_menu_group li {
  list-style: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#g-nav .g-nav_menu_group li a {
  color: var(--c_tx);
  font-family: var(--font-roboto);
  font-size: var(--fs-base);
  line-height: 1.5;
}
#g-nav .g-nav_sns_wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#g-nav .g-nav_sns_wrap a {
  width: 2rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#g-nav .g-nav_sns_wrap img {
  display: block;
  width: 100%;
  height: auto;
}
#g-nav .g-nav_sns_wrap a:nth-child(2) img {
  filter: invert(1);
}


/* --------------------------------------
ハンバーガーメニューボタン
---------------------------------------*/
/* ボタンのためのCSS */
.openbtn1 {
  position: fixed;
  z-index: 9999;
  /*ボタンを最前面に*/
  top: 0;
  right: 0px;
  cursor: pointer;
  width: 70px;
  height: 70px;
}

/*×に変化*/
.openbtn1 span {
    z-index: 9999;
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 18px;
    height: 2px;
    background-color: var(--c_tx);
    width: 50%;
}
.openbtn1 span:nth-of-type(1) {
  top: 20px;
}
.openbtn1 span:nth-of-type(2) {
  top: 32px;
}
.openbtn1 span:nth-of-type(3) {
  top: 45px;
}
.openbtn1.active span:nth-of-type(1) {
  background-color: var(--c_tx);
  top: 26px;
  left: 22px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3) {
  background-color: var(--c_tx);
  top: 38px;
  left: 22px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}



/* --------------------------------------
footer
---------------------------------------*/
footer {
  height: auto;
  width: 100%;
  overflow: hidden;
  padding: 50px 0;
  background-color: var(--c_tx);
}
footer p {
  color: var(--c_white);
}
.foot_wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}
.foot_wrap_left {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.foot_wrap_right {
  width: 60%;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  .foot_wrap_left {
    width: 100%;
  }
  .foot_wrap_right {
    width: 100%;
  }
}

/* sns */
.foot_sns_wrap {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}
.foot_sns_wrap a {
  width: 2rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --------------------------------------
サイトマップ
---------------------------------------*/
.sitemap_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(3rem, 6vw, 6rem);
}
ul.foot_sitemap {
  width: fit-content;
  min-width: max-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
ul.foot_sitemap li {
  width: 100%;
  font-family: var(--font-roboto);
  font-size: var(--fs-mini);
}
ul.foot_sitemap li:first-child {
  color: rgba(var(--c_white_rgb), 0.9);
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}
ul.foot_sitemap li a {
  color: rgba(var(--c_white_rgb), 0.6);
}
ul.foot_sitemap li a:hover {
  color: var(--c_white);
}
@media screen and (max-width: 768px) {
  .sitemap_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  ul.foot_sitemap {
    width: 100%;
    min-width: 0;
  }
  ul.foot_sitemap:last-child li a {
    font-size: var(--fs-mini);
  }
}


/* --------------------------------------
クレジット
---------------------------------------*/
.credit {
  background-color: var(--c_tx);
}
.credit_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(var(--c_white_rgb), 0.3);
  padding: 2rem 0;
}
.credit_inner p {
  color: rgba(var(--c_white_rgb), 0.6);
  font-family: var(--font-roboto);
  font-size: var(--fs-mini);
}
@media screen and (max-width: 768px) {
  .credit_inner {
    justify-content: left;
  }
}


/* --------------------------------------
フッターロゴ
---------------------------------------*/
.foot_main_logo {
  z-index: 100;
}
.foot_main_logo a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.foot_logo_img {
  width: auto;
  display: block;
}
.foot_logo_img_black {
  height: 40px;
}
.foot_logo_img_pink {
  height: 40px;
}
@media screen and (max-width: 768px) {
  h1.foot_main_logo {
    z-index: 1000;
  }
}




/* --------------------------------------
ボタン
---------------------------------------*/
.link_btn_mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0 46px 0 24px;
  border: 1px solid rgba(var(--c_black_rgb), 0.3);
  border-radius: 9999px;
  box-sizing: border-box;
  background: transparent;
  color: rgba(var(--c_black_rgb), 0.3);
  font-family: var(--font-roboto);
  font-size: var(--fs-mini);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.link_btn_mini::before,
.link_btn_mini::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 10px;
  height: 1px;
  background: rgba(var(--c_black_rgb), 0.3);
  transform: translateY(-50%);
  transition: 0.3s;
}
.link_btn_mini::after {
  transform: translateY(-50%) rotate(90deg);
}
.link_btn_mini:hover {
  border-color: rgba(var(--c_black_rgb), 0.6);
  color: rgba(var(--c_black_rgb), 0.6);
}
.link_btn_mini:hover::before {
  background: rgba(var(--c_black_rgb), 0.6);
}
.link_btn_mini:hover::after {
  background: rgba(var(--c_black_rgb), 0.6);
  transform: translateY(-50%) rotate(180deg);
}
.link_btn_mini._02 {
  border-color: var(--c_tx);
  background: var(--c_tx);
  color: var(--c_white);
}
.link_btn_mini._02::before,
.link_btn_mini._02::after {
  background: var(--c_white);
}
.link_btn_mini._02:hover {
  background: var(--c_white);
  color: var(--c_tx);
}
.link_btn_mini._02:hover::before,
.link_btn_mini._02:hover::after {
  background: var(--c_tx);
}

/* --------------------------------------
ボタン２
---------------------------------------*/
a.link_btn {
  font-family: var(--font-roboto);
  font-size: var(--fs-base);
  text-transform: uppercase;
  display: inline-block;
  /* min-width: 200px; */
  line-height: 40px;
  color: var(--c_white);
  position: relative;
  background-color: var(--c_tx);
  border: 1px solid var(--c_tx);
  border-radius: 2rem;
  padding: 0 3rem 0 2rem;
  box-sizing: border-box;
  text-align: center;
  transition: 0.3s;
}
a.link_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid var(--c_white);
  border-right: 1px solid var(--c_white);
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s, border-color 0.3s;
}
a.link_btn:hover {
  color: var(--c_tx);
  background-color: var(--c_white);
}
a.link_btn:hover::before {
  right: 1rem;
  border-color: var(--c_tx);
}


/* --------------------------------------
トップへ戻る
---------------------------------------*/
/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--c_key);
  background: var(--c_key);
  width: 50px;
  height: 50px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}
#page-top a:hover {
  background: var(--c_white);
}

/* 三角 */
.top_arrow {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}
.top_arrow::before,
.top_arrow::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 1rem;
  border-radius: 9999px;
  background-color: var(--c_white);
  transform-origin: 50% 0.5px;
  transition: 0.5s;
}
.top_arrow::before {
  transform: rotate(40deg);
}
.top_arrow::after {
  transform: rotate(-40deg);
}

/* 三角hover */
#page-top a:hover .top_arrow::before,
#page-top a:hover .top_arrow::after {
  background: var(--c_key);
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 13px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove,
.fixed_sns_wrap.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove,
.fixed_sns_wrap.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}




/* --------------------------------------
svg
---------------------------------------*/
@media screen and (max-width: 768px) {
  svg {
    width: 100%;
    height: auto;
  }
}


/* --------------------------------------
リンク画像拡大
---------------------------------------*/
/*　画像の拡大　*/
.zoomIn img {
  transform: scale(1);
  transition: .3s ease-in-out;
  /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img {
  /*hoverした時の変化*/
  transform: scale(1.1) !important;
  /*拡大の値を変更したい場合はこの数値を変更*/
  opacity: 1;
}

/*　画像のマスク　*/
.mask {
  width: 100%;
  height: auto;
  display: block;
  /*行の高さを0にする*/
  overflow: hidden;
  /*拡大してはみ出る要素を隠す*/
}


/* --------------------------------------
reCAPTCHA
---------------------------------------*/
.grecaptcha-badge {
  visibility: hidden;
}


/* --------------------------------------
fadein
---------------------------------------*/
.fadein {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fadein.active {
  opacity: 1;
  transform: none;
}
.fade-up {
  transform: translateY(30px);
}
.fade-down {
  transform: translateY(-30px);
}
.fade-left {
  transform: translateX(-30px);
}
.fade-right {
  transform: translateX(30px);
}
.fade-zoom {
  transform: scale(0.9);
}
.delay-1 {
  transition-delay: 0.2s;
}
.delay-2 {
  transition-delay: 0.4s;
}
.delay-3 {
  transition-delay: 0.6s;
}

/* --------------------------------------
fade-list
---------------------------------------*/
.fade-list {
  --fade-list-y: 30px;
  --fade-list-delay: 0.1s;
}
.fade-list > * {
  opacity: 0;
  transform: translateY(var(--fade-list-y));
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--fade-list-index, 0) * var(--fade-list-delay));
}
.fade-list > *.active {
  opacity: 1;
  transform: none;
}

/* --------------------------------------
追従SNSボタン
---------------------------------------*/
.fixed_sns_wrap {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
  padding: 0 1.2rem;
  border-radius: 1rem;
  background: rgba(var(--c_white_rgb), 0.9);
  box-shadow: 0 8px 24px rgba(var(--c_black_rgb), 0.08);
  opacity: 0;
  transform: translateY(100px);
}
.fixed_sns_wrap a {
  width: 2rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed_sns_wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.fixed_sns_wrap a:nth-child(2) img {
  filter: invert(1);
}
@media screen and (max-width: 768px) {
  .fixed_sns_wrap {
    right: inherit;
    left: 10px;
    bottom: 10px;
    height: 58px;
    gap: 0.9rem;
    padding: 0 1.1rem;
    opacity: 0;
    transform: translateY(200px);
  }
  .fixed_sns_wrap a {
    width: 2rem;
  }
}