@charset "utf-8";
/*--------------------------------------------------------------------

ブレイクpoint　1100px
font-size 320-1300px   1100-1600

--------------------------------------------------------------------*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   font-style: normal; list-style: none; font-weight: 400; 
  font-optical-sizing: auto;}
body{ line-height:1.8; font-size:clamp(1rem, 0.917rem + 0.42vw, 1.063rem)}/*16-17*/
a{text-decoration: none; color:#253440 ; transition: 0.3s}
a:hover{ color:#3b3b3b; }
img{max-width: 100%; height: auto ;vertical-align: bottom; }


body{  font-family: "Noto Sans JP", sans-serif; letter-spacing: 1px;
  font-optical-sizing: auto; color: #253440;
  font-weight:400;
  font-style: normal; background: #f7f7f7;
  font-size: clamp(0.875rem, 0.834rem + 0.2vw, 1rem)}/*14-16*/

.en {
  font-family: 'Cormorant', serif;
}
.min{
  font-family: 'Noto Serif JP', serif;
}
.goshi{font-family: "Noto Sans JP", sans-serif; letter-spacing: 1px;}
.imp{font-weight: 500}
.red{color: #f6213f}

.gs{filter:brightness(40%);}

/* アニメ　*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*--------------------------------------------------------------------

フェードイン
--------------------------------------------------------------------*/
.fade-in {
    animation-name: fadeIn; animation-duration:3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0,-20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
.fadeInUp {
    animation-name: fadeInUp; animation-duration:3s;
}


@keyframes changeColor {
  to {
    background-color: blue; /* 青に変化 */
  }
}

.kijiBox .hh1{margin-bottom: 20px;
 line-height: 1.3;
  padding: 20px 10px 20px;
  min-width: 120px;
  max-width: 100%;
color: #fff;
    background-color: #282828;
}

.kijiBox .hh2{margin-bottom: 15px; padding: .5em .7em; line-height: 1.3; 
    border: 2px solid #282828;
    box-shadow: 5px 5px #282828;
 background: #fff}
    
.kijiBox .well2 {padding:1em 1.5em; line-height:2; border:1px dashed #282828; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); }
.kijiBox .well3{
padding:1em 1.5em;
border:#282828 solid 1px;
	position:relative;
}

.kijiBox a{color:#3e719a }
.kijiBox a.q_button{display: block; box-shadow: 0 0 8px #80747d; padding:15px 20px; border-radius:10px; background:#282828; color:#fff !important} 
.kijiBox a.q_button:hover{ box-shadow: none} 

.kijiBox ul li{list-style: disc; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox ol li{list-style-type: decimal; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox table,.kijiBox td,.kijiBox th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }

.kijiBox strong{font-weight: 800}

.youtube-shorts {
    position: relative;
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
}

.youtube-shorts iframe {
    width: 100%;
    height: 560px;
}
.kijiBox ul li{list-style: disc; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox ol li{list-style-type: decimal; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox table,.kijiBox td,.kijiBox th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }
.kijiBox strong{font-weight: 800}


.subinline{    display: inline-block;
    text-align: center;}

/* ==============================
   HEADER
================================= */
.headerwaku{position: absolute; z-index: 5; width: 100%}
.header {
  padding: 50px 0 60px 6%; 
  position: absolute;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
}
.header__logo a {text-align: center;
  display: block;
  color: #fff;
}
.kasou .header__logo a{color:#061826 }

.header__logo-en {
  font-family: 'Cormorant', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.3;
}
.header__logo-jp {
 display: block;
  font-size: 11px;
  font-weight: 200;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
.header__nav {
  padding:4px 6% 0 0 ;
}
.header__nav-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.header__nav-item a {
  font-family: 'Cormorant', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #fff;
}
.kasou .header__nav-item a{color:#253440 }

/* ==============================
   HAMBURGER (< 980px)
================================= */
.hamburger {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001;
  width: 48px;
  height: 48px;
  background:#9b9b9b;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.35s ease,
              width 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.hamburger span:nth-child(1) {
  top: 16px;
}
.hamburger span:nth-child(2) {
  top: 23px;
  width: 18px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
.hamburger.is-active span:nth-child(1) {
  top: 23px;
  transform: translateX(-50%) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.hamburger.is-active span:nth-child(3) {
  top: 23px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
}
/* Dark curtain backdrop */
.nav-overlay__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.nav-overlay.is-open {
  pointer-events: auto;
}
.nav-overlay.is-open .nav-overlay__bg {
  transform: translateX(0);
}
/* Content wrapper */
.nav-overlay__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
}
/* Decorative line */
.nav-overlay__line {
  width: 1px;
  height: 0;
  background: rgba(255,255,255,0.25);
  margin-bottom: 40px;
  transition: height 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.35s;
}
.nav-overlay.is-open .nav-overlay__line {
  height: 60px;
}
/* Nav list */
.nav-overlay__list {
  text-align: center; width: 100%;
}
.nav-overlay__item {
  margin-bottom: 28px;
  overflow: hidden;
}
.nav-overlay__item a {
  font-family: 'Cormorant', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: #fff;
  display: inline-block;
  position: relative;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.55s ease;
}
/* Underline hover effect */
.nav-overlay__item a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.6);
  transition: width 0.35s ease, left 0.35s ease;
}
.nav-overlay__item a:hover {
  opacity: 1;
}
.nav-overlay__item a:hover::after {
  width: 100%;
  left: 0;
}
/* Staggered entrance for each item */
.nav-overlay.is-open .nav-overlay__item:nth-child(1) a {
  transform: translateY(0); opacity: 1; transition-delay: 0.30s;
}
.nav-overlay.is-open .nav-overlay__item:nth-child(2) a {
  transform: translateY(0); opacity: 1; transition-delay: 0.38s;
}
.nav-overlay.is-open .nav-overlay__item:nth-child(3) a {
  transform: translateY(0); opacity: 1; transition-delay: 0.46s;
}
.nav-overlay.is-open .nav-overlay__item:nth-child(4) a {
  transform: translateY(0); opacity: 1; transition-delay: 0.54s;
}
.nav-overlay.is-open .nav-overlay__item:nth-child(5) a {
  transform: translateY(0); opacity: 1; transition-delay: 0.62s;
}
/* Footer logo in overlay */
.nav-overlay__footer {
  margin-top: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease 0.7s, transform 0.5s ease 0.7s;
}
.nav-overlay.is-open .nav-overlay__footer {
  opacity: 0.4;
  transform: translateY(0);
}
.nav-overlay__footer-logo {
  font-family: 'Cormorant', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #fff;
}
.nav-overlay__footer-sub {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #fff;
}

/* ==============================
 下層ページ
================================= */
.maincont{margin: 50px 6% ; position: relative}
.maincont .titbox {position: absolute; top: -130px;}
.maincont .titbox h2{ font-size:40px; letter-spacing: 5px ; line-height:1; margin-bottom: 10px}
.maincont .titbox p{font-size: 12px; letter-spacing: 3px}
/* ==============================
   CONTACT
================================= */
.contact {
  text-align: center;
  overflow: hidden; /* 横スクロールを完全に防止 */
}

/* リンク要素全体を基準（relative）にする */
.contact a {
  display: block;
  position: relative;
  text-decoration: none;
}

/* 背景となる画像をレスポンシブ対応にする */
.contact a img {
  display: block;
  width: 100%;
  height: auto;
}

/* テキストエリアを絶対配置（absolute）で完全な中央に配置 */
.contact__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  
  /* アニメーションの初期設定 */
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* マウスオーバー時に1.05倍拡大 */
.contact a:hover .contact__inner {
  transform: translate(-50%, -50%) scale(1.05);
}

/* タイトル設定と文字間隔のアニメーション */
.contact__title {
  font-family: 'Cormorant', serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em; /* 初期値 */
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  margin: 0;
  
  /* 変化をなめらかにする設定 */
  transition: letter-spacing 0.3s ease; 
}

/* aにホバーしたとき、タイトルの文字間を広げる */
.contact a:hover .contact__title {
  letter-spacing: 0.3em !important; /* 0.3em から 0.4em へ拡大（!importantで強制適用） */
}

/* サブタイトル設定と文字間隔のアニメーション */
.contact__subtitle {
  margin-top: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.2em; /* 初期値 */
  color: #fff;
  margin-bottom: 0;
  
  /* 変化をなめらかにする設定 */
  transition: letter-spacing 0.3s ease;
}

/* aにホバーしたとき、サブタイトルの文字間を広げる */
.contact a:hover .contact__subtitle {
  letter-spacing: 0.3em !important; /* 0.2em から 0.3em へ拡大（!importantで強制適用） */
}

/* 矢印の位置（文字の右側に配置） */
.contact__inner .btn-view__arrow {
  position: absolute;
  right: calc(50% - 160px);
  top: 55%;
  transform: translateY(-50%);
}

/* 下線の土台設定 */
.contact__inner::after {
  content: "";
  position: absolute;
  bottom: -15px; /* 下線と文字の距離 */
  left: calc(50% - 110px); /* 線の開始位置 */
  right: calc(50% - 110px); /* 線の終了位置 */
  height: 1px;
  background-color: #fff;
  
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

/* マウスオーバー時に下線を左から右へ伸ばす */
.contact a:hover .contact__inner::after {
  transform: scaleX(1);
}

/* ==============================
   FOOTER
================================= */
/* footer ベースの背景色（グレー） */
.wrapperf { color: #fff; text-align: center;
  background-color: #282828;
  transition: background-color 3s ease; /* ふんわり変化させる */
}


/* トリガー用BOXのスタイル（参考） */
.boxF {  padding: 80px 0px 80px; position: relative;
  width: 100%;
  margin: 0 auto;
}


@keyframes changeColor {
  to {
    background-color: blue; /* 青に変化 */
  }
}


.footer {
 position: relative;
  color: #fff;
}
.footer__inner {
  margin: 0 6%; text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__left{text-align: center}
.footer__logo-en {
  font-family: 'Cormorant', serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.3;
}
.footer__logo-jp {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.footer__office {text-align: left;padding: 0 0 0 6%;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 2;
}
.footer__office-label {
  font-weight: 500;
  margin-right: 16px;
}
.footer__right {
  text-align: right;
}
.footer__nav-list {
  display: flex;
  gap: 24px;
  margin-bottom: 10px;
}
.footer__nav-item a {
  font-family: 'Cormorant', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff; position: relative
}
.footer__nav-item a::after {
  position: absolute;
  bottom: -2px;/*テキストからの距離*/
  left: 0;
  content: '';
  width: 100%;/*hover時に表示*/
  height: 1px;/*下線の高さ*/
  background: #fff;/*下線の色*/
  transform: scale(0, 1);/*トランス前の下線*/
  transform-origin: left top;/*トランスフォーム開始位置*/
  transition: transform .3s;/*アニメーション速度*/
}
.footer__nav-item a:hover::after {
  transform: scale(1, 1);/*トランス後の下線*/
}
.footer__privacy a {
  font-family: 'Cormorant', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fff; position: relative
}
.footer__privacy a::after {
  position: absolute;
  bottom: 0px;/*テキストからの距離*/
  left: 0;
  content: '';
  width: 100%;/*hover時に表示*/
  height: 1px;/*下線の高さ*/
  background: #fff;/*下線の色*/
  transform: scale(0, 1);/*トランス前の下線*/
  transform-origin: left top;/*トランスフォーム開始位置*/
  transition: transform .3s;/*アニメーション速度*/
}
.footer__privacy a:hover::after {
  transform: scale(1, 1);/*トランス後の下線*/
}




.footer__bottom {
  margin: 40px 0 0 6%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 20px;
}
.footer__copyright {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
}
.footer__pagetop img{width: 13px; vertical-align: middle;}
.footer__pagetop a {
  font-family: 'Cormorant', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.footer__pagetop{position: absolute; right:6%; bottom: 60px }
.footer__pagetop a{position: relative}
.footer__pagetop a::after {
  position: absolute;
  top: 0;
  left: 0;              /* 左側に配置 */
  content: '';
  width: 1px;           /* 線の太さ（縦線なので幅が太さ） */
  height: 100%;         /* 縦いっぱい */
  background: #fff;
  transform: scale(1, 0);         /* Y方向を0に */
  transform-origin: left bottom;     /* 上から下へ伸びる */
  transition: transform .3s;
}
.footer__pagetop a:hover::after {
  transform: scale(1, 1);/*トランス後の下線*/
}
.footer__office a{color: #fff !important}

/* ==============================
   RESPONSIVE: TABLET (< 980px)
================================= */
@media screen and (max-width: 979px) {
.no979{display: none}
  /* Show hamburger, hide desktop nav */
  .about{padding-bottom: 100px}
  .header__nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* Header */
  .header {
    padding: 30px 30px 40px;
  }

.maincont{margin:0; padding: 150px 6% 50px; position: relative}
.maincont .titbox{position: relative; top: 0; padding-bottom: 50px}
}

@media screen and (min-width: 640px) {
.ipadno{display: none}
}

/* ==============================
   RESPONSIVE: MOBILE (< 640px)
================================= */
@media screen and (max-width: 639px) {
.no640{display: none}
  /* Header */
  .header {width: 200px;
    padding: 24px 0 30px 6%;
  }
  .header__logo-en {
    font-size: 20px;
  }

.contact__title {color: #fff;
    font-size: 40px; 
  }
.footer__logo-en{font-size: 28px}
.footer__logo-jp{font-size: 13.5px}
.footer__left{margin: 0 auto}

  .footer__inner {
    flex-direction: column;
  }
  .footer__right {
    text-align: left;
  }
  .footer__nav-list {
    flex-wrap: wrap; display: block;
  }
  .footer__nav-item a{padding-bottom: 8px; display: block}
  .footer__bottom {
    margin-top: 45px;
    padding-top: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
/* 修正後（absoluteを解除して、モバイル時は相対的に配置する） */
  .footer__pagetop {
    position: static; /* PCの absolute を打ち消す */
    align-self: flex-end;
    margin-right: 6%; /* ここでモバイル用の右余白を確保 */
  }
  
  /* スマホ表示の時にフッター下部に余白がないと窮屈になるため、少し余白を足します */
  .footer__bottom {
    margin-top: 45px;
    padding-top: 15px;
    padding-bottom: 30px; /* ←追加 */
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

.footer__office{padding-top: 40px} 
.footer__office dd{font-size: 13px}
.footer__office dd span{font-size: 11px}

.maincont{margin:0; padding: 100px 6% 50px;}
}

@media screen and (min-width: 640px) {
.no639{display: none}


.header__logo-en{font-size:36px }
.header__logo-jp{font-size:16px; letter-spacing: 4px }
.header__nav-item a{font-size:25px; font-weight: 400 }
}


@media screen and (min-width: 980px) {
.no980{display: none}

.kasou .header{position: relative; width: 100%; padding-top: 40px}
.header{padding-bottom: 0 ; width: 100%}
.headerwaku{position: relative}
.header__nav-item a {
  position: relative;
  display: inline-block;}
.header__nav-item a::after {
  position: absolute;
  bottom: 2px;/*テキストからの距離*/
  left: 0;
  content: '';
  width: 100%;/*hover時に表示*/
  height: 1px;/*下線の高さ*/
  background: #fff;/*下線の色*/
  transform: scale(0, 1);/*トランス前の下線*/
  transform-origin: left top;/*トランスフォーム開始位置*/
  transition: transform .3s;/*アニメーション速度*/
}
.kasou .header__nav-item a::after{background: #253440;}
.header__nav-item a:hover::after {
  transform: scale(1, 1);/*トランス後の下線*/
}

.footer__office dl{display: flex; width: 580px; margin-top: 20px;  line-height: 1;}
.footer__office dt{width: 28%; letter-spacing: 1px}
.footer__office dd span{font-size: 12px}
.footer__office dd p{padding-top: 10px}
.footer__office dd{width: 70%; border-left: 1px solid #fff; padding-left: 2%}
}