@charset "UTF-8";

/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

html{
  overflow-y: scroll;
}

.l-content {
  margin: 0 auto 0;
}

@media (min-width: 960px) {
  .front-page .l-content,
  .home .l-content {
    display: block !important;
  }
}

@media (min-width: 960px) {
  .-sidebar-on .l-mainContent {
    width: 100%;
    margin: 5rem 0 10rem;
  }
}

/*---------------------------------------------------------
共通定義
---------------------------------------------------------*/
/* ボタンエフェクト01 */
.btneffect-01 {
  /*矢印の基点とするためrelativeを指定*/
  position: relative;
  border: 1px solid #555;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  color: #333;
  outline: none;
  transition: all .2s linear;
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-weight: 900;
  background-color: #ffffffb8;
}

.btneffect-01:hover {
  background: #4b4f56;
  color: #fff;
}

/*矢印と下線の形状*/
.btneffect-01::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  width: 40px;
  height: 1px;
  background: #333;
  transition: all .2s linear;
}

.btneffect-01::after {
  content: "";
  position: absolute;
  top: 20%;
  right: -19px;
  width: 1px;
  height: 16px;
  background: #333;
  transform: skewX(45deg);
  transition: all .2s linear;
}

/*hoverした際の移動*/
.btneffect-01:hover::before {
  right: -30px;
}

.btneffect-01:hover::after {
  right: -23px;
}

/*---------------------------------------------------------
フェード系
---------------------------------------------------------*/
/* Trigger（初期状態） */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}

/* その場で（ふわっ） */
.fadeIn{
  animation: fadeInAnime .9s ease forwards;
}

@keyframes fadeInAnime{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 上から（控えめ） */
.fadeDown{
  animation: fadeDownAnime .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fadeDownAnime{
  from { opacity: 0; transform: translate3d(0, -18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 下から（控えめ） */
.fadeUp{
  animation: fadeUpAnime .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 左から（“800px”はやめる） */
.fadeLeft{
  animation: fadeLeftAnime .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fadeLeftAnime{
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 右から */
.fadeRight{
  animation: fadeRightAnime .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fadeRightAnime{
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* アクセシビリティ：動きを減らす設定の人 */
@media (prefers-reduced-motion: reduce){
  .fadeInTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger{
    opacity: 1 !important;
    transform: none !important;
  }
  .fadeIn,.fadeUp,.fadeDown,.fadeLeft,.fadeRight{
    animation: none !important;
  }
}

/*---------------------------------------------------------
ヘッダー
---------------------------------------------------------*/
/* =========================
   Header / Fullscreen Menu (Final)
========================= */

.site-header{
  position: relative;
}

/* --- レイヤー管理（事故防止） --- */
.site-header .circle-bg{ z-index: 9000; }
.site-header #g-nav.panelactive,
.site-header #g-nav-list{ z-index: 9100; }
.site-header .openbtn,
.site-header .sns_block,
.site-header .reserve_btn{ z-index: 9200; }

/* =========================
   Hamburger Button
========================= */
.site-header .openbtn{
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: rgba(21,21,21,.82);
  border: 0;
  padding: 0;
}

.site-header .openbtn span{
  display: block;
  position: absolute;
  left: 14px;
  width: 45%;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transition: transform .35s ease, top .35s ease, opacity .25s ease, width .35s ease, left .35s ease;
}

.site-header .openbtn span:nth-of-type(1){ top: 20px; }
.site-header .openbtn span:nth-of-type(2){ top: 28px; }
.site-header .openbtn span:nth-of-type(3){ top: 36px; }

.site-header .openbtn.active span:nth-of-type(1){
  top: 23px;
  left: 16px;
  width: 50%;
  transform: translateY(6px) rotate(-45deg);
}
.site-header .openbtn.active span:nth-of-type(2){
  opacity: 0;
}
.site-header .openbtn.active span:nth-of-type(3){
  top: 35px;
  left: 16px;
  width: 50%;
  transform: translateY(-6px) rotate(45deg);
}

/* =========================
   Background Circle (expand)
========================= */
.site-header .circle-bg{
  position: fixed;
  left: -50px;
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0,0,0,.88);
  transform: translateZ(0) scale(0);
  transition: transform .6s ease;
  will-change: transform;
  pointer-events: none;
}

.site-header .circle-bg.circleactive{
  transform: translateZ(0) scale(50);
}

/* =========================
   Nav Wrapper
========================= */
.site-header #g-nav{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.site-header #g-nav.panelactive{
  pointer-events: auto;
}

/* nav list layer */
.site-header #g-nav-list{
  display: none;
  position: fixed;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header #g-nav.panelactive #g-nav-list{
  display: block;
}

/* =========================
   Menu Content (centered)
========================= */
.site-header #g-nav .header_menu{
  width: min(720px, calc(100% - 40px));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: serif;
  opacity: 0;
  animation: gnaviAnime 1s ease .15s forwards;
}

@keyframes gnaviAnime{
  from{ opacity: 0; transform: translate(-50%, -46%); }
  to  { opacity: 1; transform: translate(-50%, -50%); }
}

/* title */
.site-header #g-nav .header_title{
  text-align: center;
  margin-bottom: 18px;
}

.site-header #g-nav .header_corporate_logo{
  width: min(320px, 70vw);
  height: auto;
  display: inline-block;
}

.site-header #g-nav .header_title hr{
  width: 70%;
  margin: 14px auto 0;
  /* opacity: .35; */
  border: 0;
  border-top: 1px solid #fff;
}

/* list */
.site-header #g-nav ul{
  margin: 0;
  padding: 0;
}

.site-header #g-nav li{
  list-style: none;
  text-align: center;
}

.site-header #g-nav li a{
  display: inline-block;
  padding: 14px 12px;
  color: #fff;
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}

.site-header #g-nav li a:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* =========================
   SNS
========================= */
.site-header .sns_block{
  position: fixed;
  top: 10px;
  right: 190px; /* 必要に応じて調整 */
  display: flex;
  align-items: center;
}

.site-header .sns_block a {
  display: block;
  background-color: #fff;
  border-radius: 25px;
  margin-left: 0.5rem;
}

.site-header .sns_block img{
  width: 45px;
  padding: 5px;
  height: auto;
  display: block;
  opacity: .9;
  transition: opacity .25s ease, transform .25s ease;
}

.site-header .sns_block a:hover img{
  opacity: .6;
  transform: translateY(-1px);
}

/* =========================
   Reserve Button
========================= */
.site-header .reserve_btn{
  position: fixed;
  top: 0;
  right: 0;
  padding: 18px 20px;
  font-family: serif;
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0,.65);
  letter-spacing: .08em;
  transition: background .25s ease, transform .25s ease;
}

.site-header .reserve_btn:hover{
  background: rgba(0,0,0,.8);
  transform: translateY(-1px);
}

/* =========================
   Responsive
========================= */
@media (max-width: 1024px){
  .site-header .sns_block{
    right: 90px;
  }
}

@media (max-width: 768px){
  .site-header .openbtn{
    width: 56px;
    height: 56px;
  }
  .site-header .sns_block{
    right: 78px;
    width: 34px;
    top: 11px;
  }
  .site-header .reserve_btn{
    padding: 16px 16px;
  }
  .site-header #g-nav .header_menu{
    width: min(520px, calc(100% - 36px));
  }
}

/* =========================
   Accessibility
========================= */
@media (prefers-reduced-motion: reduce){
  .site-header .circle-bg,
  .site-header .openbtn span,
  .site-header #g-nav .header_menu{
    transition: none !important;
    animation: none !important;
  }
  .site-header #g-nav .header_menu{
    opacity: 1;
  }
}

/*---------------------------------------------------------
メインビジュアル
---------------------------------------------------------*/
.c-mv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  /* iOS対策 */
  overflow: hidden;
}

.c-mv__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.c-mv__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-mv__overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
}

.c-mv__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, .35); */
  /* 暗幕。不要なら消す */
  z-index: -1;
}

.c-mv__logo {
  max-width: min(70vw, 420px);
  height: auto;
}

/* ===== Full-bleed Main Visual ===== */
.l-front .c-mv {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 念のため、親のpadding影響を切る */
.l-front .c-mv {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.top #content {
  padding-top: 0;
}

/* トップページだけ、コンテナ制限を外す */
/* .home #content.l-container,
.front-page #content.l-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
} */

/* もし内側に更にパディングが残る場合の保険 */
/* .home #content.l-container .l-main,
.front-page #content.l-container .l-main {
  padding-left: 0;
  padding-right: 0;
} */

/*---------------------------------------------------------
投稿記事
---------------------------------------------------------*/
.top-post {
  margin: 10rem auto;
  max-width: 1200px;
}

.top-post .top-post_title {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  font-family: serif;
}

.top-post .top-post_title h3 {
  font-size: 2rem;
}

.top-post .top-post_title p {
  margin-left: 0.5rem;
}

/*---------------------------------------------------------
概要
---------------------------------------------------------*/
.top-about {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.top-about {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /* opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .9s ease,
    transform .9s ease; */
}

/* .top-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--about-overlay, .35));
  z-index: 1;
  transition: background .2s linear;
} */

/* 表示状態 */
/* .top-about.is-visible {
  opacity: 1;
  transform: translateY(0);
} */

/* 固定背景 */
.top-about__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("assets/img/about_bg.webp") center / cover no-repeat;
  transform: translateZ(0);
  /* transform: scale(1);
  transition: transform .2s linear;
  will-change: transform; */
}

.top-about__bg {}

/* コンテンツ */
.top-about__inner {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  padding: clamp(60px, 8vw, 120px) 20px;
  text-align: center;
  color: #fff;
  font-family: serif;
  align-content: center;
}

/* 読みやすさ用オーバーレイ */
.top-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 1;
}

.top-about__inner .top-about__title {
  font-size: 1.5rem;
}

.top-about__inner hr {
  width: 100px;
  margin: 5rem auto;
}

.top-about__inner .top-about__note {
  line-height: 3rem;
}

/* Safari対策（fixedはみ出し防止） */
@supports (clip-path: inset(0)) {
  .top-about {
    clip-path: inset(0);
  }
}

/* ===== モバイル最適化 =====
   fixed背景はモバイルで重いので自動フォールバック */
@media (max-width: 1024px) {
  .top-about__bg {
    position: absolute;
  }
}

/* 動きを減らす設定ユーザー */
@media (prefers-reduced-motion: reduce) {
  .top-about__bg {
    position: absolute;
  }
}

/*---------------------------------------------------------
概要
---------------------------------------------------------*/
.top-experience {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.top-experience_wrap {
  margin: 0 auto;
  padding: 10rem 0;
  background-color: #ffc10717;
  /* background: url(assets/img/background/01.webp) center / cover no-repeat; */
}

.exp-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10rem auto;
  max-width: 1200px;
  /* align-items: center; */
  /* gap: clamp(30px, 6vw, 80px); */
}

.exp-item__content {
  margin: 0 auto;
}

.exp-item--reverse {
  direction: rtl;
}

.exp-item--reverse * {
  direction: ltr;
}

.exp-item__media img {
  width: 100%;
}

.exp-item__title {
  font-size: clamp(24px, 2.4vw, 36px);
  margin-bottom: 20px;
}

.exp-item__title {
  font-family: serif;
  font-weight: 100;
  width: fit-content;
  position: relative;
}

.exp-item__title h2 {
  font-size: 4rem;
  color: #c3c3c361;
  font-weight: 400;
}

.exp-item__title h2 span {
  color: #636262;
  font-size: 2.5rem;
  position: absolute;
  left: 2rem;
  bottom: 0.5rem;
  white-space: nowrap;
}

.exp-item__text h2  {
  line-height: 1.9;
  margin-bottom: 28px;
  opacity: .85;
}

.exp-item__text {
  margin: 2.5rem 0;
  padding: 0 2rem;
}

/*---------------------------------------------------------
フッター
---------------------------------------------------------*/
.footer {
  text-align: center;
  background-color: #000;
  padding: 3rem 0;
}

.footer p {
  color: #fff;
  line-height: 1.8rem;
  font-family: serif;
}

.footer a {
  color: #fff;
}