@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 {
    font-size: 62.5%;
}
h1, h2, h3, h4, h5{
  font-family: YakuHanJPs, "FOT-筑紫Aオールド明朝 Pr6 D", serif;
  letter-spacing: 0.1em;
  color: #383737;
}
span{
  color: #6C6C6C;
}
body, p{
  font-family: YakuHanJPs, "FOT-筑紫ゴシック Pr5 D", serif;
  color: #212121;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  line-height: 1.8;
}
body{
  position: relative;
  font-optical-sizing: auto;
  margin: auto;
  text-align: left;
  height: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f4f0;

  /* 細かいノイズ＋繊維っぽいライン */
  background-image:
    /* 微細ノイズ */
    radial-gradient(rgba(0,0,0,0.015) 1px, transparent 1px),
    /* 縦方向の薄い繊維ライン */
    repeating-linear-gradient(0deg, rgba(0,0,0,0.008) 0, rgba(0,0,0,0.008) 1px, transparent 1px, transparent 3px),
    /* 横方向の薄い繊維ライン */
    repeating-linear-gradient(90deg, rgba(0,0,0,0.008) 0, rgba(0,0,0,0.008) 1px, transparent 1px, transparent 3px);

  /* パターンの細かさ */
  background-size: 3px 3px, 4px 4px, 4px 4px;

  /* 繰り返し */
  background-repeat: repeat, repeat, repeat;

  /* 滑らかな描画（高解像度ディスプレイでも綺麗） */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.font-en{
  font-family: "Cardo", serif;
  font-weight: 400;
  font-style: normal;
}
.kakurei{
  font-family: "FOT-角隷 Std EB", serif;
}
.rodin{
  font-family: "FOT-ロダンNTLG Pro UB", serif;
}
.tsukushi-maru{
  font-family: "FOT-筑紫A丸ゴシック Std E", serif;
}
.tsukushi-gothic{
  font-family: "FOT-筑紫ゴシック Pr5 D", serif;
}
.iwata{
  font-family: "I-OTF教科書Pro B", serif;
}
.tsukushi-old{
  font-family: "FOT-筑紫Aオールド明朝 Pr6 D", serif;
}
.tsukushi-antique{
  font-family: "TsukuAntiqueSGoStd-B-PalatinoSansLTPro-Medium", serif;
}
.dot-gothic{
  font-family: "HGドット_NewゴシックB12-11", serif;
}
a {
  cursor: pointer;
  color: inherit;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
}


/*ヘッダー*/
.l-header{
  height: 72px;
}
.l-header__inner{
  width: 100vw;
  max-width: 100vw;
}


/*共通*/
.l-content, .l-article{
  width: 100vw;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
}
.l-container{
  padding: 0;
}
.l-mainContent__inner>.post_content{
  margin: 0;
  padding: 0;
}
.main__wrapper{
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}
.message__content, .service__content, .info__content{
  margin-bottom: 200px;
}


/*top*/
/*top-fv*/
.fv__wrapper{
  height: calc(100dvh - 72px);
  margin-bottom: 150px;
}
.fv__inner{
  height: calc(100dvh - 72px);
  position: relative;
}
.fv__message{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin-bottom: 0;
}
.fv__message h1, .fv__message p{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.fv__m__left, .fv__m__right{
  font-size: 8rem !important;
}
.fv__m__left{
  position: relative;
  top: 50px;
}
.fv__m__right{
  position: relative;
  top: -50px;
}
.fv__m__center{
  font-size: 5rem;
  position: relative;
  top: 25px;
}
.fv__m__right, .fv__m__center, .fv__m__left{
  font-family: "FOT-筑紫Aオールド明朝 Pr6 D", "FOT-筑紫ゴシック Pr5 D", "TsukuAntiqueSGoStd-B-PalatinoSansLTPro-Medium", "FOT-ロダンNTLG Pro UB", "I-OTF教科書Pro B", "FOT-筑紫A丸ゴシック Std E", "HGドット_NewゴシックB12-11", "FOT-角隷 Std EB", serif;
  transition: color 0.8s ease, font-family 0.8s ease;
}
.fv__shuffle{
  position: absolute;
  bottom: 50px;
  left: 50px;
  margin: 0;
}
.fv__Introduction{
  position: absolute;
  bottom: 50px;
  right: 50px;
  margin: 0;
}
.fv__s__title {
  font-family: "FOT-筑紫ゴシック Pro E", serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #333; /* 通常色 */
  letter-spacing: 0.05em;
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  transition: color 0.4s ease; /* ここで色変化を滑らかに */
}

/* 疑似要素で “ズレ文字” を重ねる */
.fv__s__title::before,
.fv__s__title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.4s ease; /* ほんのり消えるように */
}

/* ゆるグリッチの色ズレ */
.fv__s__title::before {
  color: #ff7aa2; /* ピンク系 */
  animation: glitch 3s infinite ease-in-out;
}

.fv__s__title::after {
  color: #7ab8ff; /* 水色系 */
  animation: glitch 2.5s infinite ease-in-out;
}

/* ゆらぎアニメーション（控えめ） */
@keyframes glitch {
  0%   { transform: translate(0,0); opacity: 0.4; }
  25%  { transform: translate(-0.5px, 0.3px); opacity: 0.3; }
  50%  { transform: translate(0.5px, -0.4px); opacity: 0.5; }
  75%  { transform: translate(-0.3px, -0.3px); opacity: 0.3; }
  100% { transform: translate(0,0); opacity: 0.4; }
}

/* hoverすると → グリッチ停止＋ほんのり色変化 */
.fv__s__title:hover {
  color: #d63384; /* ほんのりピンクに */
}

.fv__s__title:hover::before,
.fv__s__title:hover::after {
  animation-play-state: paused;
  opacity: 0.1; /* ズレ文字もほんのり残す */
}

/*top-message*/
.message__title__inner{
  justify-content: center;
  gap: 20px;
  margin-bottom: 0 !important;
}
.m__title__right, .m__title__left{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 5rem !important;
}
.message__body__inner{
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
.message__body__inner .wp-block-group__inner-container{
  display: inline-block;
  padding-left: 160px;
}
.m__body__text{
  margin-bottom: 50px;
  font-size: 2rem;
}
.m__body__text:last-child{
  margin-bottom: 0;
}