* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
}

img {
  width: 100%; 
  height: auto;
}

/* header */
.header {
  position: relative;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
 box-sizing: border-box;
}

.header_inner {
  padding: 0; /* 余白をリセット */
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  z-index: 1;
  box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
  height: 80px;
}


@media screen and (max-width: 834px) {
  .header_inner {
   padding: 0 20px;
  }
 }

.header_title {
  color: #fff;
  font-family: 'Cormorant Garamond', 'Noto Sans JP', serif;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}

.header_title:hover,
.header_title:focus-visible {
  color: #8ecfd8;
  text-decoration: none;
}

.nav_list {
 display:  flex;
 justify-content: space-between;
 align-items: center;
 gap: 4px;
 padding: 20px 0;
 z-index: 9999;
}

.nav_item {
 font-size: 1.6rem;
 color: #fff;
 padding:  5px 15px 5px 15px;
}

.nav_item a:hover {
 text-decoration: underline;
}

.nav_item:last-of-type {
 padding-right: 0;
}

/* ナビゲーションメニュー */

.hamburger {
  display: none;
}

@media screen and (max-width: 834px) {
 .archive .header_inner {
  padding: 0 20px;
 }
}

/* メディアクエリで786px以下の時にハンバーガーメニューを表示 */
@media screen and (max-width: 768px) {
  .hamburger {
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    /* position: absolute; */
    top: 20px;
    right: 25px;
    z-index: 9999;
  }

  .hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: #f0f0f0;
    transition: 0.3s;
  }

  .header_inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header_inner.show {
    background-color: #333;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .header_title a:hover {
    color: #1a8b9d; /* 通常ホバー時の文字色 */
  }

  .header_inner.show.header_title a:hover {
    color: #1a8b9d; /* ハンバーガーメニューがshowのときのホバー文字色 */
  }
  
  #nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #333;
    z-index: 9998;
    align-items: center;
    justify-content: center;
  }

  #nav.active {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    z-index: 9998;
  }

  .nav_list {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 1;
  }

  .nav_item {
    width: 60%; /* 各ナビゲーションアイテムの幅を100%に設定 */
    text-align: center;
    padding: 20px 0;
    font-size: 1.4rem;
    border-bottom: 2px solid #f0f0f0;
    pointer-events: auto;
  }

  .nav_item a:hover {
    text-decoration: none;
    color: #1a8b9d;
     /* ホバー時の文字色を設定 */
  }

  body.noscroll {
    overflow: hidden;
  }
}

/* 425px以下のレスポンシブデザイン */
@media screen and (max-width: 425px) {
  nav {
      display: none; /* デフォルトでは非表示 */
  }

  nav.active {
      display: flex;
      height: 100%;
      width: 100%;
  }
  
  .header_inner.show {
    width: 100%;
  }
 }

/* ハンバーガーメニューのアニメーション */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 10px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -10px);
}

/* hidden クラスのスタイル */
.hidden {
  display: none;
}
/* //header */

/* fv */
.fv {
  background: #2b2b2b;
}

.fv-layout {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 40px 40px 40px;
  max-width: 960px;
  margin: 0 auto;
}

.fv-layout .description {
  flex: 0.9; /* 1.1から変更。テキスト:画像=45:55にするため */
  position: static;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 385px; /* main_imgの高さに合わせる */
}

.fv-layout__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.0rem;
  font-weight: 700; /* 小さい文字の視認性を補う。Noto Sans JPは400/700のみ読込のため600は700に解決される→実値で記述
                       色(#8ecfd8)はコントラスト8.14:1でAAA達成のため変更なし */
  letter-spacing: 0.12em;
  color: #8ecfd8;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.fv-layout__heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3; /* 1.5から変更。2行の見出しを一つの塊として見せる */
  color: #fff;
  margin-bottom: 20px;
}

.fv-layout .des_copy {
  transform: translateX(0);
  opacity: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.8);
}

/* スマートフォン(〜767px)
   ※このテーマは html{font-size:62.5%} のため 1rem = 10px
     ご指定の label 0.85rem は 8.5px、des_copy 0.9rem は 9px になり
     現状より小さくなるため、実寸で読める値に換算しています。
   ※ .fv-layout .des_copy と同詳細度のため、必ずベース規則の後ろに置くこと */
@media screen and (max-width: 767px) {
  .fv-layout__heading {
    font-size: 2.0rem; /* 26px → 20px */
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .fv-layout__label {
    font-size: 1.0rem; /* 10px（据え置き） */
    letter-spacing: 0.08em; /* 狭い画面では字間を詰めて2行化を防ぐ */
    margin-bottom: 8px;
  }

  .fv-layout .des_copy {
    font-size: 1.6rem; /* 16px → 15px */
    line-height: 1.8;
  }

  /* PC用の固定改行がスマホで不自然な折り返しを生むため解除 */
  .fv-layout .des_copy br {
    display: none;
  }
}

.fv-layout .main_fv {
  flex: 1.1; /* 1から変更。画像側を55%に */
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fv-layout .main_img {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 385px; /* 355→385。比率変更で画像が大きくなり下に19px超過していたため */
  margin-top: 0;
}

.fv-layout .pc_img {
  position: absolute;
  width: 75%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.fv-layout .pc_img:nth-child(1) {
  top: 0;
  left: 0;
  transform: rotate(-3deg);
  z-index: 1;
}

.fv-layout .pc_img:nth-child(2) {
  top: 180px;
  left: 45px;
  transform: rotate(3deg);
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .fv-layout {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
  }
  .fv-layout .description {
    min-height: auto;
    order: 1;
  }
  .fv-layout .main_fv {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  .fv-layout .main_img {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .fv-layout .pc_img {
    position: static;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }

  /* nth-child(詳細度0,3,0)が transform:none に勝つため、同じ詳細度で打ち消す */
  .fv-layout .pc_img:nth-child(1),
  .fv-layout .pc_img:nth-child(2) {
    top: auto;
    left: auto;
    transform: none;
  }
}

.main_fv {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.section_inner {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .section_inner {
    max-width: 960px;
  }
}

@media (max-width: 834px) {
  .section_inner {
    max-width: 700px;
  }
}


/* main_copyのスタイル */
.main_copy {
  font-weight: bold;
  color: #858585;
  position: absolute;
  margin-top: 250px;
  margin-left: 90px;
  z-index: 3;
}

/* .en_copy, .jp_copyのアニメーション初期状態 */
.en_copy, .jp_copy {
  font-size: 10rem;
  font-family: 'Dancing Script', serif;
  font-style: italic;
  opacity: 0;
  transform: translateX(-150%); /* 初期位置 */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

@media (max-width: 1024px) {
  .main_copy {
    margin-top: 300px;
    margin-left: 50px;
  }
  .en_copy, .jp_copy {
    font-size: 8rem;
  }
}

/* スクロール時に画面内に表示 */
.fadeLeft .en_copy {
  opacity: 1;
  transform: translateX(0);
}

.fadeLeft .jp_copy {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s; 
}

.description {
  font-weight: bold;
  color: #f0f0f0;
  position: absolute;
  margin-top: 500px;
  margin-left: 100px;
  z-index: 1;
}

/* .des_mainの初期状態 */
.des_copy {
  font-size: 1.4rem;
  line-height: 1.75;
  transform: translateX(-150%);
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* スクロール時にdes_mainが表示 */
.fadeLeft .des_copy {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}
 

.main_img {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 30px;
  width: 35%;
  margin-top: -50px;
}

.pc_img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  z-index: 0;
}

.pc_img:nth-child(1) { transform: rotate(-5deg) translateX(-100px); }
.pc_img:nth-child(2) { transform: rotate(10deg) translateX(-20px); }

/* フェードイン用のCSS */
.fade-in-element {
  opacity: 0;
  transition: opacity 5s ease; /* ゆっくりフェードイン */
}

@media (max-width: 1024px) {
  .description {
    margin-left: 60px;
  }
  .des_copy {
  font-size: 1.4rem;
  line-height: 1.75;
  transform: translateX(-150%);
  opacity: 0;
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
  .main_img {
    margin-right: -30px;
    margin-top: 30px;
  }
}

@media (max-width: 834px) {
  .main_fv {
    padding-top: 200px;
    padding-bottom: 80px;
    padding-right: 135px;
  }
  .en_copy, .jp_copy {
    font-size: 6rem;

  }
  .main_copy {
    margin-top: 100px;
    margin-left: 10px;
    text-align: center;
    width: 90%;
  }
  .main_copy.hidden {
    display: none;
  }
  .description {
    margin-top: 260px;
    /* margin-left: 85px; */
    margin-right: 85px;
  }
  .des_copy {
    z-index: 0;
  }
  .main_img {
    display: grid;
    align-items: center;
    margin-top: 190px;
    width: 60%;
    margin-right: calc(20px + ((100vw - 834px) * 0.5));
    gap: 20px;
  }
}

@media (max-width: 769px) {
  .description {
    z-index: 0;
  }
}

@media screen and (max-width: 430px) {
  .en_copy, .jp_copy {
    font-size: 5rem;
  }
  .description {
    position: absolute;
    margin-top: 300px;
    margin-left: 30px;
    margin-right: 20px;
  }
  .main_fv {
    padding-top: 200px;
    padding-bottom: 80px;
    padding-right: 0px;
  }
  .main_img {
    max-width: 250px;
    margin-top: 250px;
    margin-right: calc(-25px + ((100vw - 375px) * 1.0846));
    gap: 20px;
  }
  .pc_img {
   width: 100%;
    /* margin-left: 100px; */
  }
}

/* @media screen and (max-width: 414px) {
  .pc_img {
    margin-left: 120px;
    width: 100%;
  }
  .main_img {
    margin-right: 0px;
    gap: 20px;
  }
} */

  @media screen and (max-width: 375px) {
    .en_copy, .jp_copy {
    font-size: 4.5rem;
    
  }
    .main_img {
    /* margin-right: -52px; */
    margin-right: calc(5px + ((100vw - 375px) * 1.0846));
    gap: 20px;
  }
}

@media screen and (max-width: 320px) {
    .main_img {
    /* margin-right: -52px; */
    margin-right: calc(62px + ((100vw - 375px) * 1.0846));
  }
  .description {
    margin-left: 20px;
    margin-right: 20px;
  }
  .main_img {
    margin-top: 300px;
  }
}

 /* //fv */

/* page header */
.page .header_inner {
 color: #Ffff;
}

@media screen and (max-width: 834px) {
  .page .header_inner {
    padding: 0 20px;
    }
  }

.page .nav_item {
  color: #fff;
}

.sec_title {
 font-size: 2rem;
}

.about_txt {
  font-size: 1.7rem;
  line-height: 1.8; /* 1.75→1.9。長文化したため行間を広げて可読性を確保 */
  color: #f0f0f0;
  margin: 0 auto;
  max-width: 42em; /* 1行を約42字に。日本語の可読性は35〜45字/行が目安 */
  word-break: normal; /* 単語途中では折り返さない（既定値の明示） */
  line-break: strict; /* 日本語の禁則処理を厳格に適用*/
}

/* destyleでpのmarginが消えているため、段落の区切りを付ける */
/* .about_txt p + p {
  margin-top: 1.2em;
} */

/* スマートフォン(〜768px) */
@media screen and (max-width: 768px) {
  .about_txt {
    font-size: 1.6rem;
    line-height: 1.9;
/*     padding-left: 20px; */
/*     padding-right: 20px; */
    /* body の word-break:auto-phrase(480px以下)を .about_txt 側で打ち消さないよう明示。
       未対応ブラウザでは normal にフォールバックする */
/*     word-break: auto-phrase; */
  }
}
@media screen and (max-width: 834px) {
  .page .about_txt {
    margin: 0 20px;
  }
}

.page {
  background-color: #f0f0f0;
  background-image:
      radial-gradient(290px 300px , rgba(123, 222, 217, 0.502) 20%, transparent 20%),
      radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123, 222, 217, 0.5) 20%, transparent 20%),
      radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%);
  background-size: 
      1230px 1280px,
      /* 810px 910px, */
      1470px 990px,
      1200px 1700px,
      1520px 1200px,
      1100px 1300px,
      810px 910px,
      900px 150px,
      1160px 1000px,
      1230px 1280px,
      1100px 2500px;
  background-position: 
      -300px -550px,
      -150px 100px,
      50px 510px,
      -200px -550px,
      -180px -250px,
      130px -150px,
      50px 510px,
      -440px -250px,
      -550px -100px; 
  /* background-attachment: fixed; */
   /* 背景を固定する */
}

.page .header {
  background-color: #2b2b2b;
  z-index: 999;
}

.page_mv {
  margin-top: 30px;
}

.section_item {
  max-width: 970px;
  margin: 0 auto;
  display: grid;
  /* row-gap: 100px;  */
  /* padding-bottom: 80px; */
  align-items: center;
  padding-top: 60px;
}

.blog_section {
  margin: 0 auto;
/*   padding-bottom: 60px; */
  align-items: center;
	 padding-top: 60px;
}


@media screen and (max-width: 834px) {
  .section_item {
    width: 100%;
  }
}

/* front-page.php skills */
.skills_section {
  /* margin: 0 auto; */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
  /* 最小200px幅のカラムを自動的に埋める */
  row-gap: 50px; 
  /* グリッドアイテム間の縦方向のギャップ */
  column-gap: 50px;
   /* グリッドアイテム間の横方向のギャップ */
  padding-top: 60px;
  padding-bottom: 100px;
}

.skills_item {
  height: 350px;
  /* display: flex; */
  /* align-items: center; */
  background-color: #f0f0f0;
  padding: 30px 30px;
  border-radius: 8px; /* 角丸 */ 
}

.skills_img_top {
  /* display: flex;  */
  /* 横並びにする */
  text-align: center;
  
}

.skills_img {
  width: 80px;
  height: 75px;
}

.skills_content {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.skills_title {
  font-size: 2.4rem;
  font-weight: bold;
  color: #333;
  margin: 15px 0;
  text-align: center;
  
}

.skills_txt {
  font-size: 1.7rem;
  color: #666;
  text-align: left;
  line-height: 1.5;
}

@media screen and (max-width: 834px) {
  .skills_item {
    /* width: 100%; */
    margin: 0 20px;
    height: auto;
  }
 
 }

@media screen and (max-width: 425px) {
  .skills_item {
    margin: 0 10px;
    width: 95%;
    height: auto;
  }
 }

 @media screen and (max-width: 375px) {
  .skills_item {
    margin: 0 10px;
    width: 88%;
    height: auto;
  }
}

  @media screen and (max-width: 320px) {
    .skills_item {
      width: 70%;
    }
 
 }

.wp-block-group {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-left: 20px;
} 

/* .wp-block-media-text__media {
  width: 50%;
} */

.wp-block-media-text {
  grid-template-columns: 50% 1fr;
  margin-top: 50px;
  margin-bottom: 50px;
}

 .about_img1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  border-radius: 50%;    /* 77% → 50% に */
  width: 300px;          /* 245 → 240 */
  height: 300px;         /* 239 → 240（widthと同じ数字に）*/
}

.about_img_top {
  margin: 0 auto;
}

.about_section {
  display: grid;
  row-gap: 15px; /* 100px → 50px に調整 */
  padding-top: 60px;
}

@media screen and (max-width: 834px) {
  .about_img1 {
    display: block;
    margin: 0 auto;
    width: 250px;   
    height: 250px;
  }

}

@media screen and (max-width: 425px) {
  .about_img1 {
    width: 200px;
    height: 200px;
    }
  }

.section-mv__inner {
  display: flex; /* Flexbox を使用して要素を横並びに配置 */
  justify-content: space-between; /* 左右に均等に配置 */
  align-items: center; /* 上下中央に配置 */
}

.title {
  font-size: 30px; /* タイトルのフォントサイズを設定 */
  margin: 20px;
   /* 下の余白を設定 */
  
}

.title-lead {
  font-size: 24px; /* サブタイトルのフォントサイズを設定 */
  color: #666; /* サブタイトルの色を設定 */
}

.flex-right {
  flex: 1; /* 右側のコンテンツが右に寄るように配置 */
}

.text-bg {
  background-color: #333; /* 背景色を設定 */
  color: #fff; /* テキストの色を設定 */
  padding: 10px 20px; /* 上下左右の余白を設定 */
  border-radius: 5px; /* 角丸を設定 */
}

/* h2{
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 2em;
  line-height: 1.2;
} */


/* Masts */
.mast {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100%;
  color: #fff;
  margin-bottom: 5em;
}

.mast_inner {
  align-items: center; /* 垂直方向に中央揃え */
  max-width: 1100px;
  margin: 0 auto;
  
}


.mast__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100vw;
  margin: 0 auto;
  padding: 0;

}

.bg_img {
  height: 100%;
  width: 100%;
}

.mast__header {
  z-index: 0;
  
  width: 100%;
  top: 50%; 
  /* 画面の中央に固定 */
  transform: translateY(-50%); 
  /* テキストを縦方向に中央揃え */
  text-align: center;
}

.mast__pretitle {
    z-index: 9; /* 他の要素よりも上位に表示 */
    margin-bottom: 0.5em;
    font-size: 1em;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.15em;
}

.wp-block-heading {
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

.hero-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;

}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  color: #fff;
}

.hero-content__sub {
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: #7bded9;
  margin-bottom: 16px;
}

.hero-content__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  white-space: nowrap;
}

.hero-content__catch {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 768px) {
  .hero-content__title {
    font-size: 3.6rem;
  }
  .hero-content__catch {
    font-size: 1.3rem;
  }
}

#particles-js canvas.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/* マウスストーカーのタイル */
.stalker {
  background-color: rgba(28, 180, 211, 0.5); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* 円の幅の半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* 円の高さの半分 */
  transition: all .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
}
/* リンクにホバーした時のスタイル */
.stalker.js-hover {
  background-color: rgba(255, 99, 71, .5); /* カーソルがリンク上に乗ったときの背景色 */
  height: 50px; /* カーソルがリンク上に乗ったときの高さ */
  left: -25px; /* 円の幅の半分 */
  top: -25px; /* 円の高さの半分 */
  width: 50px; /* カーソルがリンク上に乗ったときの幅 */
	z-index: 999; /* 一番上に来るように */
}

/* works */
.section_wrapper {
  margin-top: 100px;
  background: linear-gradient(
    to bottom,
    rgba(123, 222, 217, 0.08),
    #1d1d1d 35%
  );
  position: relative;
}

@media screen and (max-width: 834px) {
  .section_wrapper {
    margin-top: 150px;
  }
 
 }
@media screen and (max-width: 425px) {
  .section_wrapper {
    margin-top: 80px;
  }
}

.section_head {
  font-size: 6rem;
  color: #fff;
  text-align: center;
}

.sec_sub {
  font-size: 1rem;
  color: #fff;
  text-align: center;
}

.section_content {
  max-width: 1200px; 
  width: 100%;
  margin: 0 auto;
  /* padding-top: 100px; */
  /* background-color: #2b2b2b; */
  position: relative;
}

@media screen and (max-width: 1024px) {
  .section_content {
  max-width: 980px;
  }
}

@media screen and (max-width: 834px) {
  .section_content {
  max-width: 740px;
  }
}

/* @media screen and (max-width: 425px) {
  .section_content {
  max-width: 400px;
  }
} */

/* @media screen and (max-width: 375px) {
  .section_content {
  max-width: 320px;
  }
} */

.content-container {
  max-width: 1200px;
}



.works_list {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Grid with minimum 300px width columns */
  grid-gap: 30px; /* Gap between grid items */
  list-style: none;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .works_list {
    margin: 0 20px;
  }
}

.works_item {
  margin-bottom: 30px;
}

.works_item .thumb {
  width: 100%;
}

.works_item img {
  width: 100%;
  height: auto;
}

.works-intro {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
}

.works-intro__lead-text {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1.8;
  color: #fff;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.outline {
  background-color: #fff;
    width: 100%;
    height: 150px;
    padding: 10px;
  }
  
/* カテゴリーリスト */
  /* .cat_list {
    display: flex;
    justify-content: center;
    padding: 30px 0;
} */

/* .cat-item {
    margin: 5px 10px;
} */



/* @media screen and (max-width: 768px) {
  .cat_list {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }

  .cat-item {
    margin: 5px 5px;
  }
 } */

 /* @media screen and (max-width: 480px) {
  .cat_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
  }

  .cat-item {
    margin: 5px 0;
  } 
 } */

/* .post-categories {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  margin-bottom: 30px;
  align-items: center;
} */

/* .post-categories li {
  position: relative;
  background-color: #f0f0f0;
  border: solid 2px #1a8b9d;
  border-radius: 40px;
  width: 120px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 auto;
  padding: 5px 0px;
} */

/* .post-categories li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #1a8b9d;
  transition: height cubic-bezier(0.68, -0.55, 0.265, 1.55) .2s;
  border-radius: 40px;
} */

/* .post-categories li:hover::before {
  height: 100%; 
  border-radius:40px;
} */

/* .post-categories li a {
  position: relative;
  color: #333;
} */

/* .post-categories li:hover a {
  color: #fff;
} */

/* .post-categories li:hover::before,
.post-categories li:focus-within::before {
  height: 100%;
  border-radius: 40px;
} */

/* .post-categories li a {
  position: relative;
  color: #333;
  z-index: 1;
  text-decoration: none;
} */

/* .post-categories li:hover a,
.post-categories li:focus-within a {
  color: #fff;
} */

/* .post-categories li a:focus {
  outline: none; 
} */

/* .post-categories li:focus-within {
  outline: 2px solid #1a8b9d;
  outline-offset: 4px;
} */

.works_list_text {
  height: 50px;
  margin: 5px;
  font-size: 1.4rem;
}

.btn_content {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 60px;
  padding-bottom: 80px;
}

.btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
background-color: #f0f0f0;
border-radius: 40px;
width: 200px;
text-align: center;
padding: 14px 36px;
z-index: 1;
  /*アニメーションの指定*/   
  transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
  font-size: 2rem;
}

.btn:hover span {
  color: #fff;
}

/*== 背景が流れる（上から下） */
.bgtop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 0;
  background-color: transparent;
  border-radius: 40px;
  transition: height 0.3s cubic-bezier(0.8, 0, 0.2, 1);
}

/*hoverした際の形状*/
.bgtop:hover::before {
  height: 100%;
  background-color: #1a8b9d;
}

/* ホバー時・フォーカス時の背景色 */
.cat-item.btn:hover,
.cat-item.btn:focus-within {
  background-color: #1a8b9d; /* ホバー時/フォーカス時の背景色 */
}

.cat-item.btn a:focus span {
  color: #fff; /* リンク内のテキストの色 */
}

/* ホバー時のスタイル */
.cat-item.btn:hover {
  background-color: #1a8b9d;
}

.cat-item.btn:hover span {
  color: #fff;
}


/* フォーカス時のボタンスタイル（キーボードでのフォーカス） */
.btn-link:focus .btn {
  background-color: #1a8b9d; /* フォーカス時の背景色 */
  border-radius: 40px;
}

.btn-link:focus .btn span {
  color: #fff; /* フォーカス時の文字色 */
}

/* クリック時のボタンスタイル */
.btn:active {
  background-color: #146a7a; /* クリック時の背景色 */
  border-radius: 40px;
}

.btn:active span {
  color: #fff; /* クリック時の文字色 */
}

/* 背景アニメーション */
.bgtop:focus::before {
  height: 100%;
  background-color: #1a8b9d;
  border-radius: 40px;
}

/* archive */
.archive {
  background-color: #f0f0f0;
  background-image:
      radial-gradient(290px 300px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%);
  background-size: 
      1230px 1280px,
      810px 910px,
      1470px 990px,
      1200px 1700px,
      1520px 1200px,
      1100px 1300px,
      810px 910px,
      1160px 1000px,
      1230px 1280px,
      1100px 2500px;
  background-position: 
      -300px -550px,
      -150px 100px,
      50px 510px,
      -200px -550px,
      -180px -250px,
      130px -150px,
      50px 510px,
      -440px -250px,
      -550px -100px; 
  /* background-attachment: fixed; */
   /* 背景を固定する */
}

/* archive */
.archive .section_content {
  background-color: #2b2b2b;
  max-width: 1000px;
  margin: 0 auto;
}

.section-mv {
  background-color: #7e7e7e;
  background-image:
      radial-gradient(290px 300px , #7bded98c 20%, transparent 20%),
      radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
      radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%);
  background-size: 
      1230px 1280px,
      810px 910px,
      1470px 990px,
      1200px 1700px,
      1520px 1200px,
      1100px 1300px,
      810px 910px,
      1160px 1000px,
      1230px 1280px,
      1100px 2500px;
  background-position: 
      -300px -550px,
      -150px 100px,
      50px 510px,
      -200px -550px,
      -180px -250px,
      130px -150px,
      50px 510px,
      -440px -250px,
      -550px -100px;
  /* background-attachment: fixed;  */
  /* 背景を固定する */
}

.section-mv {
  width: 100vw;
  background-color: #f0f0f0;
  padding: 0 150px;
  height: 300px;
  box-sizing: border-box;
  display: flex;
  /* margin-top: 80px; */
  /* Flexboxを使用 */
}

.archive > .fade-in-element {
  opacity: 1;
  transition: none;
}

.archive .header {
  background-color: #2b2b2b;
  
}

.archive .section_inner {
  max-width: 0;
  margin: 0;
  padding: 0;
}

.archive .title {
  font-size: 2.4rem; /* タイトルのフォントサイズを設定 */
  margin: 20px;
   /* 下の余白を設定 */
}

.archive .outline {
  background-color: #fff;
  width: 100%;
  height: 130px;
  padding: 10px;
  text-align: center;
}

.archive_intro {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.archive_lead-text {
  display: inline-block;
  margin-top: 60px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #fff;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .archive .header_inner {
    display: flex;
    justify-content: space-between;
    
  }
 }



/* アーカイブ投稿ページネーション */
.pagination {
  text-align: center;
}

/* ページタブの共通スタイル */
.page-numbers {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  align-items: center;
}

.nav-links a.page-numbers,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {
  text-align: center;
  line-height: 30px;
  background: #fff;
  color: #0f0a0a;
  border-radius: 50%;
  margin-right: 20px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #fff;
  
}

.nav-links a.page-numbers:hover {
  color: #fff;
  background-color: #7bded980;
  border-color: #fff;
  padding: 1px 10px;
}

.nav-links .current {
  background: #7bded980;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 20px;
}

.nav-links .next::before,
.nav-links .prev::after {
  content: "";
  display: inline-block;
  width: 0.5px;
  height: 30px;
  background-color: rgb(240, 238, 238);
  position: relative;
  top: 50%;
  transform: translateY(32%);
}

.nav-links .next::before {
  left: -20px;
  top: -10px;
}

.nav-links .prev::after {
  right: -20px;
  top: -10px;
}

.nav-links .dots {
  background: transparent;
  border: none;
}

.nav-links .prev.page-numbers {
  margin-left: 20px; 
}

.nav-links a.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
}

.nav-links a.page-numbers:focus {
  background-color: #7bded980;
  color: #fff;
  border-radius: 50%;
}

.nav-links .prev:focus,
.nav-links .next:focus {
  outline: none;
}

 .page .section-mv {
  background-color: #f0f0f0;
  padding: 0 150px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.page > .fade-in-element {
  opacity: 1;
  transition: none;
}

.content {
  background-color: #2b2b2b;
  max-width: 1000px;
}

.section-heading__title {
  font-size: 10rem; /* タイトルのフォントサイズを設定 */
  font-family: 'Dancing Script', serif;
  font-style: italic; /* ここでitalicを指定 */
}

.section-heading__lead {
  font-size: 2rem; /* タイトルのフォントサイズを設定 */
  margin-left: 50px; /* 下の余白を設定 */ 
}

.archive_title {
  font-size: 6rem; /* タイトルのフォントサイズを設定 */
  color: #f0f0f0;
}

.archive_lead {
  color: #fff;
  font-size: 2rem;
  margin-top: 20px;
}

.section-heading {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 834px) {
  .archive .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center; 
  }
  .archive .section-mv {
   padding: 0 220px;
  }
}

@media screen and (max-width: 480px) {
  .archive .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

  .section-heading__title {
    font-size: 7rem;
  }

  .section-heading__lead {
    /* font-size: 2rem; */
    margin-left: 0;
  }

  .archive .section-mv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    padding: 0;
  }
}

@media screen and (max-width: 320px) {
  .section-heading__lead {
    font-size: 1.2rem;
  }
}

.section_title {
  color: #fff;
  font-size: 4rem; /* タイトルのフォントサイズを設定 */
}

.section_lead {
  color: #fff;
  font-size: 2rem; /* タイトルのフォントサイズを設定 */
}

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

@media screen and (max-width: 834px) {
  .flex-center {
    padding-top: 80px;
  }
}


.archive .works_list {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding-top: 60px;
  padding-bottom: 100px;
}

.archive .works_item {
  border-radius: 24px 0 24px 0;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.archive .works_item:hover {
  transform: translateY(-4px);
}

@media screen and (max-width: 834px) {
  .archive .works_list {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.archive .btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
/* background-color: #f0f0f0;
border-radius: 40px; */
width: 150px;
text-align: center;
padding: 5px 15px;
margin-top: 30px;
z-index: 1;

}

.page_head {
  font-size: 3rem;
  color: red;
  margin-bottom: 50px;
  margin-top: 30px;
}

.img_wrap {
  margin: 0 auto;
}


/* 初期状態: 非表示 */  
.fadeUp-trigger {
  opacity: 0;
  transform: translateY(100px); /* 初期状態：下に移動 */
  transition: opacity 1s ease-out, transform 1s ease-out; /* アニメーション設定 */
}

.fadeUp {
  opacity: 1;
  transform: translateY(0); /* スクロールで元の位置に戻る */
} 


/* contact */
.page .section_container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 60px;
}

@media screen and (max-width: 1024px) {
  .page .section_container {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 834px) {
  .page .section-heading {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    padding: 0 100px;
  }

  .page .section_container {
    padding-bottom: 60px;
  }

  .page .flex-center {
    padding-top: 150px;
  }

  /* .page .section-heading__title {
    font-size: 6rem;
  } */

  /* .page .section-heading__lead {
    font-size: 1.7rem;
    
 } */

  /* .page .section-mv {
    padding: 0 20px;
  } */

}

@media screen and (max-width: 425px) {
  .page .section-heading {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    padding: 0 20px;
  }

  .page .section-heading__title {
    font-size: 7rem;
  }

  .page .section-mv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 100px;
  }
}

/* @media screen and (max-width: 425px) {
 .page .section_container {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
 }
} */

.wpcf7 {
  margin-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
}

.wpcf7-form {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.wpcf7-form p {
  text-align: left;
  color: #000000; /* 文字色を黒に設定 */
}

.wpcf7-form label {
  font-size: 1.7rem;
  display: block;
  color: #f0f0f0; /* 文字色を黒に設定 */
  align-items: center;
}

.wpcf7-form .required {
  color: #f0f0f0; /* 文字色を白に設定 */
  background-color: #b91c1c; /* 背景色を設定 */
  padding: 4px 5px;
  border-radius: 3px;
  margin-left: 10px;
  font-size: 1.4rem; 
  display: inline-flex;  /* インライン要素のまま、flexboxを適用 */
  align-items: center;  /* 垂直中央揃え */
  justify-content: center;  /* 水平中央揃え（必要なら） */
  line-height: 1.2; /* テキストの高さを調整 */
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
    background-color: #f0f0f0;
    color: #000;
    font-size: 20px; /* フォントサイズを大きく設定 */
    line-height: 1.6;
}

.wpcf7-form textarea {
    min-height: 200px;
}

.wpcf7-form input[type="submit"] {
  font-size: 2rem;
  position: relative; /* 相対位置を設定 */
  overflow: hidden; /* オーバーフローを隠す */
  background: #f0f0f0;
  color: #000; 
  padding: 20px 50px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 1; /* 文字を前面に配置 */
  transition: .2s cubic-bezier(0.8, 0, 0.2, 1); /* アニメーションのトランジションを設定 */
}

.wpcf7-form input[type="submit"]::before {
  content: '';
  position: absolute;
  top: -100%; /* 初期位置をボタンの上に設定 */
  left: 0;
  width: 100%;
  height: 100%;
  background: #7bded980; /* ホバー時の色を設定 */
  transition: top 3s cubic-bezier(0.1, 0, 0.2, 1); /* アニメーションのトランジションを設定 */
  z-index: 0; /* 背景を後ろに配置 */
}

.wpcf7-form input[type="submit"]:hover::before {
  top: 100%; /* ホバー時に背景を下に移動 */
  
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #7bded980;
  color: #f0f0f0; /* ホバー時の色を設定 */
  
}

/* フォーカス時のスタイル */
.wpcf7-form input[type="submit"]:focus {
  background-color: #7bded980; /* フォーカス時の背景色 */
  color: #f0f0f0; /* フォーカス時の文字色 */
  outline-offset: 5px;  
}

.wpcf7-form input[type="submit"]:focus::before {
  display: none; /* フォーカス時にアニメーション背景を非表示 */
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  outline: 2px solid #1a8b9d;
  outline-offset: 2px;
}

/* 入力エラー時のメッセージ */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 16px 20px;
  border: 2px solid #b91c1c;
  border-radius: 4px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
  background-color: #b91c1c;
}

/* 各入力欄のエラーメッセージ */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: -28px;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: #ff8a8a;
}

/* service */
.service__content {
  max-width: 1200px; 
  margin: 0 auto;
  /* padding-top: 100px; */
  /* background-color: #2b2b2b; */
  position: relative;
}

.service__wrapper {
  margin-top: 100px;
  /* background: linear-gradient(to bottom, rgba(123, 222, 217, 0.1), #1d1d1d); */
  background-color: #1d1d1d;
  position: relative;
}


.services_img_top {
  display: flex;
  margin-top: 50px;
}

.service__card-img {
  margin: 30px 0;
}

.services_img {
  width: 250px;
  object-fit: contain;
  display: block;
  margin: 0px auto;
}

.service__card {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center; /* 中央揃えにする（必要に応じて調整） */
  width: 90%; /* 親要素の幅を100%に設定 */
  max-width: 1000px;
  margin: 0 auto;
  height: auto;
  background-color: #f0f0f0;
  padding: 25px 0px;
  border-radius: 8px; /* 角丸 */
  margin-bottom: 30px;
  
}

@media screen and (max-width: 1024px) {
  .service__card {
    max-width: 950px;
    width: 100%;
  }
}

@media screen and (max-width: 834px) {
  .service__card {
    padding: 30px 20px;
    width: 95%;
  }
}

@media screen and (max-width: 425px) {
  .service__card {
    padding: 20px 20px;
  }

  .services_img {
    width: 250px;
    object-fit: contain;
    display: block;
    margin: 50px auto;
  }
}


@media screen and (max-width: 834px) {
  .service_section {
   margin: 0 10px;
  }
}

.service__card-body {
  display: flex;
  flex-direction: row; /* 横並びにする */
  
  justify-content: space-between; /* 子要素の間にスペースを作る */
  align-items: center; /* これを追加 */
}


.service__card-title {
  width: 100%; /* タイトルの幅を親要素に合わせる */
  text-align: center; /* タイトルを中央揃えにする（必要に応じて調整） */
  margin-bottom: 10px; 
  font-size: 3rem;
  font-weight: bold;
  color: #333;
}

.service__card-text {
  font-size: 1.7rem;
  color: #666;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.06rem;
  margin-right: 20px; /* 画像との間にスペースを作る */
}

@media screen and (max-width: 834px) {
  .services_content {
    padding: 20px 20px;
    /* width: 90%; */
  }

  .service__card-body {
    align-items: center; /* 中央揃えにする */
    flex-direction: column-reverse; /* 順序を逆にする */
    width: 100%;
  }

  .service__card-text {
    margin-right: 0; /* マージンをリセット */
    margin-bottom: 20px; /* 下にスペースを追加 */
    
}

 }

 /* .service */
.service_section {
  color: #fff;
  max-width: 1000px;
  margin:0 auto;
  padding-top: 60px;
  align-items: center;
}

 /* about.php */
  .about_box {
    max-width: 1000px;
    width: 65%;
    margin: 0 auto;
    display: grid;
    row-gap: 50px;
    padding-top: 60px;
    justify-content: center;
}

@media screen and (max-width: 834px) {
  .page .about_box {
    width: 100%;
  }
}

@media screen and (max-width: 425px) {
  .about_box {
    width: 100%;
  }
}

/* about.php: Aboutのデスク画像（services_imgから独立させたもの） */
.about_desk {
  width: 500px;
  max-width: 100%;
  height: auto; /* width/height属性の比率を保つ */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 834px) {
  .about_desk {
    width: 400px;
  }
}

@media screen and (max-width: 425px) {
  .about_desk {
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
  }
}

.about_section-title {
  color: #fff;
}

.about_item {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  gap: 15px; /* 間隔を調整 */
}

.about_main {
    display: grid;
    grid-template-columns: 200px auto;
    align-items: center;
    width: 35%;
    max-width: 1000px;
    padding: 20px 0;
}

@media screen and (max-width: 1024px) {
  .page .about_main {
    width: 43%;
  }
}

@media screen and (max-width: 834px) {
  .page .about_main {
    width: 60%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 425px) {
  .about_main {
    grid-template-columns: 180px auto;
  }
 .about .about_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 2;
 }
}

.about_list {
  background: linear-gradient(135deg, #1a8b9d, #5a6b7a);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* リスト全体を中央寄せ */
  padding-top: 40px;
  padding-bottom: 40px;
  width: 100%; /* 🔹 背景部分を1200px幅にしたい場合は100%にする */
  max-width: 1200px; /* 🔹 背景は1200pxのまま */
  margin: 60px auto;
}

@media screen and (max-width: 834px) {
  .about .about_list {
    width: 95%;
    margin: 0 auto;
    display: block;
  }
}

/* @media screen and (max-width: 425px) {
  .about_list {
    align-items: flex-start;
  }
} */

.about_title {
  text-align:left; /* 🔹 テキストを右寄せに */
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  white-space: nowrap; /* タイトルが折り返されないようにする */
  /* margin-right: 20px; */
}

@media screen and (max-width: 425px) {
  .about_title {
    font-size: 1.7rem;
    color: #fff;
    margin-right: 0px;
    margin-left: 0;
  }
}

.about_title::before {
  content: "（";
}

.about_title::after {
  content: "）";
}

.about_text {
  font-size: 2rem;
  color: #fff;
  text-align: left;
  white-space: nowrap;
}

@media screen and (max-width: 425px) {
  .about_text{
    font-size: 1.7rem;
    color: #fff;
  }
  
}

 /* page-service */
 
.service_section-title {
  font-size: 3rem;
  font-weight: bold;
  /* margin-top: 60px; */
  text-align: center;
}

.service .section_container {
    padding-bottom: 60px;
}

.page .service_list {
  background: linear-gradient(135deg, #1a8b9d, #5a6b7a);
  display: flex;
  flex-direction: column; /* サービスアイテムを縦に並べる */
  list-style: none;
  border-radius: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin: 0 auto;
}

.service_list {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 2rem;
}

.service_header {
  display: flex; /* 番号と見出しだけ横並び */
  align-items: center; /* 垂直方向の中央揃え */
  gap: 20px; /* 余白を調整 */
  /* justify-content: center; */
}

.service_item {
  position: relative; 
  padding: 30px 70px;
  display: block;
  color: #fff;
  box-sizing: border-box;
  word-wrap: break-word; 
  white-space: normal;
  justify-content: center;
  width: 100%;
  max-width: 800px; /* 中央寄せで幅を固定 */
  text-align: left; /* 左寄せで読みやすく */
}

.service_item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transform: scaleX(1.1);
  transform-origin: center;
}

@media (max-width: 834px) {
  .service_item::after {
      transform: scaleX(1);
      left: 0px;
    }
}

/* 最後の要素の border を消す */
.service_item:last-child::after {
  display: none;
}

.services_img_cms1 {
  margin: 50px auto;
  width: 700px;
}

@media (max-width: 834px) {
  .services_img_cms1 {
    margin: 50px auto;
  }
}

@media (max-width: 480px) {
  .services_img_cms1 {
    width: 350px;
  }
}

@media (max-width: 320px) {
  .services_img_cms1 {
    width: 300px;
  }
}

.services_img_cms2 {
  margin: 50px auto;
  width: 400px;
}

.service_list-title {
  margin-top: 0;
  font-size: 2.4rem;
  color: #fff;
  font-weight: bold;
}

.service_icon {
  width: 100px;
  height: 100px;
  fill: #555;  
  margin: 16px 50px;
  display: block;
}

.service_item-list {
  list-style: none;      /* デフォルトのドットを消す */
  padding-left: 0;       /* 左のインデントをなくす */
  line-height: 1.6;      /* 行間はpのときと同じく */
  font-size: 1.7rem;     /* テキストの大きさも維持 */
  
}

.service_item-list-item {
  position: relative;
  padding-left: 3em;   /* アイコン（ドット）の位置を確保 */
  line-height: 1.6;
}

.service_item-list-item::before {
  content: "・";
  position: absolute;
  left: 0;
  
  color: #fff;
  font-weight: bold;
  padding-left: 2em;
}


.service_section-text {
  font-size: 1.7rem;
  line-height: 1.7;
  max-width: 1000px;
  width: 80%;
  margin: 0 auto 40px auto; 
  text-align: left;
}

@media (max-width: 834px) {
  .service_section-text {
    width: 95%;
  }
}

.service_number {
  background-color: #fff;
  color: #1a8b9d;
  border-radius: 50%;
  display: inline-block;
  padding: 10px 14px;
  font-weight: bold;
  /* margin-bottom: 15px; */
  font-size: 2rem;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .service_list {
    width: 95%;
  }
}
@media (max-width: 768px) {
  .service_item {
    padding: 20px 20px;
  }
}
/* @media (max-width: 480px) {
  .service_item {
    padding: 30px 20px;
  }
} */

/* priceデザイン */
.price_table_wrapper {
  padding: 50px 10px;
}

 /* カード表示 */
 .price_list {
    background: linear-gradient(135deg, #1a8b9d, #5a6b7a);
    display: flex;
    flex-direction: column;
    list-style: none;
    border-radius: 20px;
    padding-top: 80px;
    padding-bottom: 40px;
    margin: 50px 0;
    max-width: 1000px;
  }
  @media (max-width: 1024px) {
    .price_list {
      width: 100%;
      margin: 50px auto;
    }
  }

  @media (max-width: 768px) {
    .price_list {
      width: 95%;
    }
  }

  .price_item {
    position: relative;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
    margin: 0 auto;
}

.price_header {
  display: flex; /* 番号と見出しだけ横並び */
  justify-content: center;
  align-items: center; /* 垂直方向の中央揃え */
  gap: 20px; /* 余白を調整 */
  margin-bottom: 50px;
}

 .price_card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto; 
}


.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.card_title {
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #333;
}

.card_subtitle {
  font-size: 2rem;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #333;
  font-weight: bold;
  text-align: center;
}

.card-description {
  margin-bottom: 0;
  line-height: 1.6;  
  list-style: none;
  font-size: 2rem;
  text-align: center;
  color: #333;
  line-height: 1.6;
}

.card_item {
  color: #333;
  margin: 0; /* デフォルトでpタグにマージンつくので消す */
  font-size: 2rem;
}

.card_title span {
  display: block; /* インライン→ブロック要素に変える */
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
}

.price {
  /* font-size: 2rem;
  font-size: clamp(1rem, 10vw, 2rem); */
  /* font-size: clamp(2.4rem, 6vw, 4rem); 中央値(6vw)を大きめに */
  font-size: 2.4rem; /* fallback（保険） */
  font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
  color: #e67e22;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.price_detail-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: left; 
  display: table;
}

.price_detail-item {
  font-size: 1.7rem;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.4;
  padding-left: 10px;
  text-indent: 0;
  word-break: break-word; 
  text-indent: -1.3em;
  margin-bottom: 0.5em;
}

.price_detail-item::before {
  content: "・";
  color: #333;
  padding-right: 5px;
  flex-shrink: 0;
}

.card-note {
  text-align: center;  /* これで中のspanが中央寄せになります */
  font-size: 1.4rem;
  color: #333;
  margin-top: 0px;
  margin-bottom: 5px;
}

.card.option {
  background-color: #fde2e2; /* ベージュ色 */
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .price_card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* スマホでは読みやすさを優先して1列にする */
@media (max-width: 600px) {
  .price_card {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .card {
    width: 100%; /* カードを縦に並べるため100%の幅に */
  }
}

@media (max-width: 638px) {
  .description {
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭い時は折り返して縦に並べる */
    justify-content: flex-start; /* 横並びを維持 */
  }

  .description span {
    font-size: 1.6rem; /* サイズ調整（必要に応じて） */
    width: 100%; /* 横並びでも幅を100%にして調整 */
  }
}

/* blog */
.blog__link {
  display: inline-block;
  padding: 12px 30px;
  background-color: #1a8b9d;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.6rem;
  transition: background-color 0.3s;
}

.blog__link:hover {
  background-color: #166e7a;
}

.blog__txt {
  font-size: 1.6rem;
  color: #f0f0f0; /* テキストカラーを変更 */
  text-align: center;
  max-width: 800px; /* 必要に応じて調整 */
  margin: 0 auto; /* センターに配置 */
  line-height: 1.8;
}

@media screen and (max-width: 425px) {
  .contact_txt {
/*     padding: 20px 10px; */
    width: 100%;
    text-align: left;
  }

}

/* contact */
/* .contact_section {
  display: flex;
  flex-direction: column;
  align-items: center;
} */

.contact_txt {
  font-size: 1.6rem;
  color: #f0f0f0; /* テキストカラーを変更 */
/*   text-align: center; */
  max-width: 800px; /* 必要に応じて調整 */
  margin: 0 auto; /* センターに配置 */
  line-height: 1.8;
}

@media screen and (max-width: 425px) {
  .contact_txt {
/*     padding: 20px 10px; */
    width: 100%;
    text-align: left;
  }

}

.footer_content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

.archive .footer_content {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}



.archive .fv {
  background-color: #2b2b2b;
}


.page .footer_content {
  margin-top: 100px;
  padding-top: 50px;
}


.privacy-policy .fv {
  background-color: #2b2b2b;
}

.privacy-policy .header_title:hover{
  text-decoration: none;
}

.privacy-policy .footer_title:hover{
  text-decoration: none;
}

.privacy-policy .footer_content {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top: 50px; */
}

@media screen and (max-width: 1240px) {
  .privacy-policy .section-heading {
    flex-direction: column;
    align-items: center;
    padding: 0 100px;
  }

  .privacy-policy .section-heading__lead {
    padding: 20px 0;
    margin: 0;
  }

}

@media screen and (max-width: 834px) {
  .privacy-policy #privacy-policy-content {
    padding: 20px;
  }

  .privacy-policy .section-mv {
    display: flex;
    justify-content: center;
  }

  .privacy-policy .section-heading__title {
    font-size: 6rem;
  }

  .privacy-policy .section-heading__lead {
    font-size: 1.7rem;
    padding: 20px 0;
    margin: 0; 
  }

  .privacy-policy .section-heading {
    padding: 0;
  }

  .privacy-policy-template .wp-block-heading {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 600px) {
    .privacy-policy #privacy-policy-content {
        padding: 16px;
    }
    .privacy-policy .section-heading__title {
    font-size: 4rem;
  }
}

/* single */
.single .section_inner {
  margin: 0;
}

.single {
    background-image:
        radial-gradient(290px 300px , #7bded98c 20%, transparent 20%),
        radial-gradient(800px 780px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(1000px 990px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(750px 750px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(100px 100px , rgba(123,222,217, 0.5) 20%, transparent 20%),
        radial-gradient(400px 380px , rgba(123,222,217, 0.5) 20%, transparent 20%);
    background-size: 
        810px 910px,
        1470px 990px,
        1200px 1700px,
        1100px 1300px,
        810px 910px,
        1160px 1000px,
        1230px 1280px,
        1100px 2500px;
    background-position: 
        -300px -550px,
        -150px 100px,
        50px 510px,
        -200px -550px,
        -180px -250px,
        130px -150px,
        50px 510px,
        -440px -250px,
        -550px -100px;
}

.project-section-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.project-section-wrap {
  display: flex;
  flex-direction: column; /* ← 縦並びにする！ */
  align-items: center;     /* ← 要素全体を左右中央寄せ */
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between; */
  margin-top: 100px;
  margin-bottom: 100px;
}

.project-detail__title {
  font-size: 4rem;
  color: #fff;
  margin-top: 80px;
  margin-bottom: 50px;
}

.project-link {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
}

.project-link::before {
  font-family: "Font Awesome 5 Free"; /* ← 5系の場合 */
  content: "\f35d"; /* ← fa-external-link-alt の Unicode */
  font-weight: 900; /* ← solidアイコンは 900（bold） */
  margin-right: 6px;
  font-size: 0.9em; /* ← サイズ調整 */
  vertical-align: middle;
}


.project-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 80px;
}

.project-detail__intro {
  margin: 0 auto;
  text-align: center;
  
}

.project-detail__intro-text {
  display: inline-block;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  color: #dddddd; /* 落ち着いたトーンで可読性も◎ */
}

/* single.php: 制作のポイント */
.project-point {
  max-width: 800px;
  margin: 60px auto 0;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.project-point__title {
  font-size: 20px;
  color: #fff;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #7bded9;
}

.project-point__text {
  font-size: 16px;
  line-height: 1.8;
  color: #dddddd;
}

.project-point__text p {
  margin-bottom: 1em;
}

.project-point__text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 834px) {
  .project-point {
    margin: 40px 20px 0;
    padding: 24px 20px;
  }
}

.project-media__list {
  /* display: grid; */
  width: 100%;
  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  */
  /* Grid with minimum 300px width columns */
  /* grid-gap: 30px; Gap between grid items */
  list-style: none;
  /* margin-top: 100px; */
}

.project-media__item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 画像＋キャプションを中央揃え */
  margin-bottom: 40px;
  text-align: center;
}


.project-detail__meta-item {
  color: #ffffff; /* 白文字 */
  font-size: 1.6rem;
  line-height: 2;
  text-align: left;
  display: flex; /* ラベルと値を横並びにして、値の開始位置を揃える */
  align-items: baseline;
}

.project-detail__meta-item strong {
  flex: 0 0 7em; /* ラベルの幅を固定（一番長い「対応デバイス：」に合わせる） */
  text-align-last: justify; /* 均等割り付け。「：」の位置が縦に揃う */
}

@media screen and (max-width: 480px) {
  .project-detail__meta-item {
    display: block; /* 狭い画面ではラベルを上、値を下に */
  }

  .project-detail__meta-item strong {
    text-align-last: auto;
  }
}

.project-media__img {
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ちょっとおしゃれな影 */
}

.project-media__img-caption {
  margin-top: 12px;
  font-size: 14px;
  color: #f0f0f0;
  line-height: 1.6;
  text-align: center;
}


.project-detail__meta-item a:hover {
  color: #cccccc; /* ホバー時に少しグレーにして見やすく */
}

@media screen and (max-width: 1240px) {
    .single .section-heading {
      flex-direction: column;
      align-items: center;
      padding: 0 100px;
    }
}
@media screen and (max-width: 834px) {
  .single .section-heading__title {
    font-size: 6rem;
  }
  .single .section-mv {
  padding: 0 20px;
  }
}
@media screen and (max-width: 375px) {
  .single .section-heading__title {
    font-size: 5rem;
  }
}

@media screen and (max-width: 375px) {
  .single .archive_title {
    font-size: 5rem;
  }
}

.back-btn .btn {
  position: relative;
    background-color: #f0f0f0;
    border-radius: 40px;
    width: 260px;
    text-align: center;
    padding: 14px 36px;
    z-index: 1;
    transition: ease .2s;
}

/* .back-btn .btn:hover {
  background: #555;
} */


/* footer */
.footer_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer_head {
  font-family: 'Dancing Script', serif;
  font-style: italic; /* ここでitalicを指定 */
  /* 左寄せにする */
  margin-bottom: 0; /* マージンをリセット */
  /* 高さを固定するか、最小高さを設定 */
  height: 100%;
  /* display: flex; */
  align-items: center; /* タイトルのテキストを中央揃えにする */
}

.footer_title {
  margin-bottom: 20px;
  font-size: 3rem;
  /* 以下は .header_title に合わせて追加 */
  font-family: 'Cormorant Garamond', 'Noto Sans JP', serif;
  font-weight: 700;
  font-style: normal; /* .footer_head の italic を打ち消すため必要 */
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}

.footer_title:hover,
.footer_title:focus-visible {
  color: #8ecfd8;
  text-decoration: none;
}

.footer_nav_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  list-style: none;
  margin: 0;
}

.footer_nav_item {
  font-size: 2rem;
  color: #fff;
  padding: 10px 0;
}

.footer_nav_item a:hover {
text-decoration: underline;
}

.copy {
  color : #f0f0f0;
}

.footer_bottom {
  margin: 50px;
  text-align: center;
}

.copy {
  padding-top: 20px;
  font-size: 1.55rem;
}

.footer_privacy-policy {
  font-size: 1.4rem;
  color: #f0f0f0;
  /* padding-bottom: 20px; */
}

/* .privacy-policy a:hover {
  text-decoration: underline;
  
  } */

#privacy-policy-content {
  padding: 52px;
  max-width: 1000px;
  margin: 0 auto;
}

.privacy-policy .footer_privacy-policy {
  color: #f0f0f0;
  /* font-size: 1.55rem; */
}

.privacy-policy a:hover {
  text-decoration: underline;
  } 

.privacy-policy-template .wp-block-heading {
  position: relative;
  color: #f0f0f0;
}

.wp-block-heading {
  margin-top: 50px;
  margin-bottom: 50px;
}

.privacy-policy-template .wp-block-heading::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 50px; /* 文字の高さと揃える */
  background: #f0f0f0;
  vertical-align: middle; /* 文字と四角形を垂直に揃える */
  margin-right: 20px; /* 四角形と文字の間のスペース */
  margin-top: -3px;
  align-items: center;
}

.privacy-policy-template .privacy-policy-text {
  max-width: 42em;
  margin: 0 auto;
  font-size: 1.8rem;
  line-height: 1.9;
  color: #f0f0f0;
}


.privacy-policy-template .privacy-policy-text p { 
/*   margin-top: 2.5em; */
  margin-bottom: 1.8em;
 }

.wp-block-paragraph {
	margin-bottom: 0;
}

.privacy-policy-template .privacy-policy-text h4 {
  margin-top: 2.5em;
  margin-bottom: 0.8em;
  font-size: 2.2rem;
  font-weight: bold;
}

.privacy-policy-template .privacy-policy-text .wp-block-list {
  list-style-type: disc !important;
  margin-left: 24px;
}

/* 404 */

.error-404 {
  text-align: center;
  padding: 50px;
}

.error-404 h1 {
  font-size: 2rem;
  color: #333;
}

.error-404 p {
  font-size: 3rem;
  color: #fff;
  line-height: 1.6;
}

.error-404 .btn {
  display: inline-block;
  padding: 15px 30px; /* ちょっと大きめにする */
  margin-top: 20px;
  background: #f0f0f0;
  color: #000; 
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.4rem;
}

.error-404 .btn:hover {
  background-color: #1a8b9d;
  color: #f0f0f0;
}

/* ===== SP responsive fixes (375-430px) ===== */

/* Hero title: prevent overflow on small screens */
@media screen and (max-width: 425px) {
  .hero-content__title {
    font-size: 3rem;
  }
}

/* About / Contact: add horizontal padding for readability */
@media screen and (max-width: 480px) {
  .about_txt {
    padding-left: 20px;
    padding-right: 20px;
  }
  .contact_txt {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Japanese text: break at natural phrase boundaries */
@media screen and (max-width: 480px) {
  body {
    word-break: auto-phrase;
  }
}

/* ===== ページトップボタン ===== */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 100;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover,
.page-top:focus-visible {
  background-color:  #1a8b9d;
}

.page-top__arrow {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-top: 2px solid #1a1a1a;
  border-right: 2px solid #1a1a1a;
  transform: rotate(-45deg);
}

.page-top:hover .page-top__arrow,
.page-top:focus-visible .page-top__arrow {
  border-top-color: #f0f0f0;
  border-right-color: #f0f0f0;
}

@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: none;
  }
}

/*お問い合わせフォーム 送信結果メッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
  background-color: #7bded980;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: none;
}