@charset "utf-8";
/*
Theme Name: My LP Theme
Description: オリジナルのLP用テーマ
*/

/*-----------------------------------------------------
大見出し
-------------------------------------------------------*/

/* 中見出し
------------------------------------------------*/

/* 小見出し/コメント */

/* 1400px以下 */
@media only screen and (max-width: 1399px) {
}

/* 1200px以下 */
@media only screen and (max-width: 1199px) {
}

/* タブレット以下 */
@media only screen and (max-width: 991px) {
}

/* スマホ */
@media only screen and (max-width: 767px) {
}

/*-----------------------------------------------------
共通
-------------------------------------------------------*/
section {
  padding: 8rem 0;
}
a {
  text-decoration-line: none;
  color: #333;
}

@media only screen and (max-width: 767px){
section {
  padding: 5rem 0;
}}

/*-----------------------------------------------------
フォント・色
-------------------------------------------------------*/
.text-bold{
  font-weight: bold;
}
.text-bold02{
  font-weight: 900;
}
.text-blue{
  color: #589a8d;
}
.text-white{
  color: #fff;
}
.text-red{
  color: #ff000c;
}
.text-orange{
  color: #ff6c00;
}
.text-yellow{
  color: #ffcc00;
}
.text-grey{
  color: #777777;
}
.bg-white{
  background-color: #fff;
}
.bg-blue{
  background-color: #589a8d;
}
.text-indent{
  text-indent: -1em;
  padding-left: 1em;
}
/*-----------------------------------------------------
タイトル
-------------------------------------------------------*/
.ttl {
    color: #333333;
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    padding-bottom: 2rem;
    line-height: 1.8;
}
.ttl::before {
    display: block;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: .5rem;
    content: attr(data-label);
}
@media only screen and (max-width: 767px){
 .ttl::before {
    font-size: 2.5rem;
}}

/*-----------------------------------------------------
CTA
-------------------------------------------------------*/
.cta{
  padding: 0;
}
.bg_cta{
  background-color: #77a99f;
  border-bottom: 2rem solid #88d4c5;
  border-top:  2rem solid #88d4c5;
}
.cta_box{
  display: flex;
  justify-content: center;
  padding: 1rem 0 2rem 0;
}
@media only screen and (max-width: 767px){
  .cta_box{
    flex-direction: column;
}
.cta_btn{
  margin: 0.5rem 0;
}}

/* ボタンのスタイル */
    .cta_btn {
        /* サイズと配置 */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 20rem;
        padding: 1rem 0;
        text-decoration: none;
        
        /* 色の設定 */
        --main-color: #52A696; /* 緑色（ティール） */
        --bg-color: #ffffff;   /* 背景色（白） */
        
        background-color: var(--bg-color);
        color: var(--main-color);
        
        /* 枠線のデザイン */
        border: 4px solid var(--bg-color); /* 外側の白い太枠 */
        border-radius: 10px; /* 角丸 */
        box-shadow: 0 0 0 1px var(--main-color) inset; /* 内側の緑の細い線 */
        
        /* アニメーション用設定 */
        position: relative;
        overflow: hidden; /* はみ出した背景を隠す */
        isolation: isolate; /* z-indexの重なり順を制御 */
        transition: color 0.4s ease; /* 文字色の変化速度 */
    }

/* 左上の三角形（兼 ホバー時の背景） */
    .cta_btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--main-color);
        
        /* 三角形の形を作る (左上から40pxの範囲) */
        clip-path: polygon(0 0, 30px 0, 0 30px);
        
        /* 重なり順をテキストの後ろにする */
        z-index: -1;
        
        /* アニメーション設定 */
        transition: clip-path 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* --- ホバー時の動作 --- */
    
    /* 文字の色を白にする */
    .cta_btn:hover {
        color: #fff;
    }

    /* 三角形を広げて全体を塗りつぶす */
    .cta_btn:hover::before {
        /* 右下に向かって大きく広げる（300%あれば全体を覆えます） */
        clip-path: polygon(0 0, 300% 0, 0 300%);
    }

/*-----------------------------------------------------
header
-------------------------------------------------------*/
#Header {
  background-color: #88d4c5;
  
  /* 固定表示の必須設定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 他の要素より絶対に上にする */

  /* アニメーション設定 */
  transition: transform 0.3s ease;
  transform: translateY(0); /* 通常は定位置 */
}

/* ▼【重要】隠すためのクラス▼ */
/* !important をつけて強制力を最大にします */
#Header.hide-header {
  transform: translateY(-5rem) !important;
}

/* --- 以下、デザイン調整（そのままでOK） --- */
#Header p { margin-bottom: 0; }
.h-logo { max-width: 20rem; padding-left: 3em; }

@media only screen and (max-width: 1199px) { .h-logo { max-width: 15rem; padding-left: 1em; padding-right: 1em; } }
@media only screen and (max-width: 991px) { .h-logo { max-width: 15rem; padding-left: 0.5em; } }
@media only screen and (max-width: 767px) { .h-logo { max-width: 12rem; padding-left: 0; } }

/* Bootstrap上書き */
.navbar { background-color: #88d4c5; color: #fff; }
.nav-link { color: #fff !important; }
.navbar-toggler { border-color: rgba(255,255,255,0.5); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/*-----------------------------------------------------
FV
-------------------------------------------------------*/
.fv{
  padding: 0;
}
/* --- 全体の枠組み --- */
.fv-wrapper {
  /* 全体の比率（横 / 縦） */
  /* 21:9 や 2:1 など、お好みの比率に調整してください */
  aspect-ratio: 21 / 9; 
  width: 100%;
  background-color: var(--border-color);
}
.fv_right{
  padding: 0.3rem 0 0.3rem 0;
}
        
/* 画像を枠いっぱいにトリミングして表示 */
.img-cover {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 比率を維持して隙間なく埋める */
   display: block;
}
@media (max-width: 767px) {
  .fv-wrapper { 
     aspect-ratio: auto;
     height: auto; 
  }
  /* 左側（上段）の設定 */
  .fv-left-col { 
     height: 400px;
     border-right: none;
     border-bottom: var(--border-width) solid var(--border-color);
  }
}

/*------------FVテキスト-------------*/
.fv-left-col{
  position: relative;
}
.fv_text{
  position: absolute;
  top: 4rem;
  z-index: 1;
  left: 2rem;
  width: 16rem;
}
.fv_main-text{
  position: absolute;
  bottom: 2rem;
  left: 1rem;
  z-index: 2;
}
@media only screen and (max-width: 1399px) {
 .fv_text{
  width: 13rem;
}
.fv_main-text{
  width: 25rem;
}}

@media only screen and (max-width: 1199px) {
 .fv_text{
  width: 10rem;
}
.fv_main-text{
  width: 25rem;
}}
@media only screen and (max-width: 991px) {
 .fv_text{
  width: 8rem;
}
.fv_main-text{
  width: 15rem;
}}
@media only screen and (max-width: 768px) {
 .fv_text{
  width: 6rem;
}
.fv_main-text{
  position: absolute;
  bottom: 0;
}}
/*-----------------------------------------------------
ABOUT
-------------------------------------------------------*/
.about{
  background-color: #e6f4f1;
  padding-bottom: 0;
}
.about_text{
  line-height: 2.25rem;
  color: #4f4f4f;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 991px){
  .service_point_icon{
    width: 18rem;
}}

/*アニメーションの設定
-------------------------------------------------------*/
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    /* 画像を2枚入れているので、全体の幅は「画像2枚分」になります。
    その「半分（画像1枚分）」動いたところでリセットすることで、継ぎ目がなくなります。*/
    transform: translateX(-50%);
  }}
.slide-wrapper {
  display: flex;
  width: fit-content; /* 中身の幅に合わせる */
  animation: loop-slide 60s linear infinite; /* 秒数はお好みで調整 */
}
.slide-image {
  /*画像の高さは指定し、幅は自動にします。
  max-width: none がないとBootstrapの影響で縮んでしまうので必須です。*/
  height: 200px; 
  width: auto;
  max-width: none; 
}

/*-----------------------------------------------------
サービス紹介
-------------------------------------------------------*/
.service01{
  background-color: #fff9f4;
  padding: 5rem 0;
}
.service02{
  background-color: #fcf1ff;
  padding: 5rem 0;
}

.service_textbox{
  margin: 0 auto;
  background-color: #fff;
  padding: 3rem 5rem;
}
.service_textbox h3{
  font-size: 1.25rem;
  padding-bottom: 1.5rem;
}
.service_btn{
  background-color: #fec69c;
  border-radius: 50vw;
  display: inline-block;
  padding: 1rem 3rem;
  font-size: 1rem;
}
.service_textbox a:hover{
  opacity: 0.7;
}
.service03_ttl{
  background-color: #88d4c5;
  font-size: 1.5rem;
  padding: 0.8rem 2rem;
}
@media only screen and (max-width: 767px){
  .service_textbox{
  padding: 3rem 1rem;
}}

/*スライド
-------------------------------------------------------*/
 /* --- スライダー全体のカスタムCSS --- */
.slider-container {
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* メイン画像エリア */
.swiper.main-slider {
  width: 100%;
  height: auto; /* 画像のアスペクト比に合わせる */
}

.swiper.main-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネイルエリア */
.swiper.thumb-slider {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0;
}

.swiper.thumb-slider .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4; /* 選択されていない画像は薄くする */
  cursor: pointer;
  transition: 0.3s;
}

.swiper.thumb-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid transparent;
}

/* アクティブなサムネイルのスタイル（ご提示画像の茶色の枠線を再現） */
.swiper.thumb-slider .swiper-slide-thumb-active {
  opacity: 1;
}
        
.swiper.thumb-slider .swiper-slide-thumb-active img {
  border: 2px solid #a68b6a; 
}

/* 矢印（ナビゲーション）のカスタマイズ */
.swiper-button-next, .swiper-button-prev {
   color: #888888 !important; /* 矢印の色 */
   width: 40px;
   height: 40px;
  border-radius: 50%;
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 18px;
  font-weight: bold;
}
.swiper-button-next-2, .swiper-button-prev-2 {
   color: #888888 !important; /* 矢印の色 */
   width: 40px;
   height: 40px;
  border-radius: 50%;
}
.swiper-button-next-2:after, .swiper-button-prev-2:after {
  font-size: 18px;
  font-weight: bold;
}
/*-----------------------------------------------------
料金案内
-------------------------------------------------------*/
.price {
  background-color: #efefef;
}
.price_textbox{
  background-color:#fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price_text_bg{
  background-color: #589a8d;
  border-radius: 50vw;
  color: #fff;
  padding: 0.2rem 0.8rem;
  margin-bottom: 0;
  font-weight: bold;
}
.price02_subttl{
  background-color: #fff79e;
  padding: 0.2rem 0.8rem;
  color: #333;
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .price_box figure {
    height: 100%;
  }
  
  .price_box figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を保ちつつ、枠いっぱいに広げてトリミングする */
  }
}
/*-----------------------------------------------------
フォトグッズ
-------------------------------------------------------*/
.photogoods{
  background-color: #edfbff;
}
.photogoods_contents{
}
.photogoods_contents .row img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.goodsname{
  background-color: #589a8d;
  padding: 0.3rem 0.5rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
}
.goodsname02{
  font-size: 1.5rem;
}
.price_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 右側の価格1つの場合は上下中央に配置されます */
}
.good_circle {
    background-color: #fff79e;
    border-radius: 50vw;
    width: 4rem;
    height: 4rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    color: #696969;
}
.price_num{
  font-size: 3rem;
}
.goods_subttl{
  position: relative;
  display: block;
  padding: 10px 55px;
  font-size: 1.2rem;
}
.goods_subttl:before, .goods_subttl:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40%;
  height: 3px;
  background-color: #589a8d;
}
.goods_subttl:before {
  left:0;
}
.goods_subttl:after {
  right: 0;
}
@media only screen and (max-width: 767px){
  .price_wrap {
  min-height: auto; /* 左側の価格2つ分がすっぽり入る高さを確保 */
  display: block;
}}

/*--------------どれがいいか迷ったら-----------------*/
.goods_box02{
  border-radius: 20px;
}
.goods_box02_text {
  font-size: 1.5rem;
}
.goods_box02_text02 {
  font-size: 1.5rem;
}
.goods_triangle{
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 2rem;
  width: 4rem;
  background-color: #589a8d;
  text-align: center;
}

@media only screen and (max-width: 767px){
  .goods_box02_text {
  font-size: 1rem;
}
.goods_triangle{
  height: 1.5rem;
  width: 3rem;
}
.goods_box02_text02 {
  font-size: 1.2rem;
}}


/*--------------その他-----------------*/
.goods_box03_ttl{
  padding: 0.5em 0;/*上下の余白*/
  border-top: dotted 3px #92b8b0;
  border-bottom: dotted 3px #92b8b0;
  display: inline-block;
}
.goods_box03_ul{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
}
.goods_box03_li{
  background-color: #92b8b0;
  border-radius: 20px;
  padding: 1rem 0.5rem;
  width: 12rem;
  height: 12rem;
  margin: 1rem;
  font-size: 1.5rem;
  line-height: 1.5em;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media only screen and (max-width: 991px){
  .goods_box03_li{
    width: 10rem;
  height: 10rem;
}}
@media only screen and (max-width: 767px){
  .goods_box03_ul{
  flex-direction: column;
}
  .goods_box03_li{
    width: 18rem;
  height: 5rem;
}}

/*-----------------------------------------------------
交通費・出張費
-------------------------------------------------------*/
.expenses_box{
  border-radius: 30px;
  border: 3px solid #589a8d;
}
.expenses_ttl{
  background-color: #589a8d;
  border-radius: 22px 22px 0 0;
}
.expenses_text_big{
  font-size: 4rem;
}
.expenses_textbox{
  width: 75%;
}
@media only screen and (max-width: 767px){
.expenses_textbox {
    width: 100%;
}}
/*-----------------------------------------------------
選ばれる理由
-------------------------------------------------------*/
.reason_point{
  background-color: #77a99f;
  border-radius: 50vw;
  width: 5rem;
  height: 5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reason .row{
 padding: 1.5rem 0;
}
@media only screen and (max-width: 1199px){
  .reason h3{
    font-size: 1.6rem;
}}
@media only screen and (max-width: 991px){
  .reason h3{
    font-size: 1.3rem;
}}

/*-----------------------------------------------------
口コミ
-------------------------------------------------------*/
.voice{
  background-image: url(../images/voice_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.voice_btn{
  background-color: #fffded;
  border: 3px solid #ffb05b;
  padding: 0.8rem 0;
  width: 30rem;
  margin: 3rem auto 0;
}
.voice_btn:hover{
  border: 3px solid #fffded;
  background-color: #ffb05b;
  color: #fffded;
}
@media only screen and (max-width: 767px){
  .voice_btn{
  width: 18rem;
  margin: 3rem auto 0;
}}
/*-----------------------------------------------------
撮影までの流れ
-------------------------------------------------------*/
.flow_li{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 767px){
  .flow_li{
  width: 40%;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
}}

/*-----------------------------------------------------
主な対応可能エリア
-------------------------------------------------------*/
.area{
  background-color: #efefef;
}
/*-----------------------------------------------------
よくある質問
-------------------------------------------------------*/
.question{
  background-color: #fff9f4;
}

/* --- テキスト設定 --- */
/* QとAの共通設定 */
.q_text,.a_text {
  font-size: 1.3rem;
}
/* Qだけの追加設定 */
.q_text {
  font-weight: bold;
  margin-bottom: 0;
}

/* --- アイコン設定（円） --- */
/* QとAの共通設定 */
.q_icon,
.a_icon {
  display: flex;            /* Flexboxで配置 */
  justify-content: center;  /* 左右中央揃え */
  align-items: center;      /* 上下中央揃え */
  flex-shrink: 0;           /* 横並び時に円が潰れないように固定 */
  
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  
  font-size: 1.15rem;
  font-weight: bold;
  color: #fff;
}

/* 色の設定（ここだけ別々にする） */
.q_icon {
  background-color: #729e9a;
}
.a_icon {
  background-color: #ac9773;
}

/* --- FontAwesome設定（中身の文字） --- */
.fa-q,
.fa-a {
  padding-left: 0; /* 以前の余白設定をリセット */
  color: #fff;
}

/* --- その他 --- */
.accordion-button:not(.collapsed) {
  color: #333;
}

/* スマホ用のサイズ調整（最初のコードにあったものを維持・整理） */
@media only screen and (max-width: 991px) {
  .q_text,
  .a_text {
    font-size: 1rem;
  }
  
  .q_icon,
  .a_icon {
    width: 2em; 
    height: 2em; 
    font-size: 1rem; 
  }
}

.accordion {
  --bs-accordion-border-color: none;
  --bs-accordion-btn-focus-border-color: none;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-bg: #fff;
  --bs-accordion-active-bg: none;
  --bs-accordion-btn-padding-y: 1.5rem;
}

.accordion-item {
  border: 2px solid #00969b !important;
}
.accordion-body {
    padding-bottom: 1.5rem;

}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-radius: 20px;
}
.accordion-flush .accordion-item {
    border-radius: 20px;
}

.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300969b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300969b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media only screen and (max-width: 991px){
.accordion-header {
    padding-left: 0em;
}
.accordion {
--bs-accordion-body-padding-x: 1.4rem;
}}




/*-----------------------------------------------------
footer
-------------------------------------------------------*/
#Footer{
  color: #fff;
  background-color: #88d4c5;
  padding: 3em 2em 7em;
}


/*-----------------------------------------------------
 追従 
-------------------------------------------------------*/
.fix-navi{
  position: fixed;
  z-index: 9999;
  top: 5rem;
  right: 0;
  width: 4rem;
  height: 12rem;
  transition: opacity 0.3s ease; 
  background-color: #bd8f8f;
  writing-mode: vertical-rl; /*縦書き*/
  padding: 1.5rem 0.5rem;
  border-radius: 20px 0 0 20px;
  line-height: 0;
  }
.fix_text{
  font-size: 1.5rem;
}
.fix-navi:hover {
  opacity: 0.6; /* 半透明 */
}
.fix-navi_line{
  position: fixed;
  z-index: 9999;
  top: 18rem;
  right: 0;
  width: 4rem;
  height: 12rem;
  transition: opacity 0.3s ease; 
  background-color: #79d1a5;
  writing-mode: vertical-rl; /*縦書き*/
  text-orientation: upright; /*英字縦書き*/
  padding: 1.5rem 0.5rem;
  border-radius: 20px 0 0 20px;
  line-height: 0;
  }
.fix-navi_line:hover {
  opacity: 0.6; /* 半透明 */
}

@media only screen and (max-width: 767px){
  .scroll-up{
    bottom: 125px;
}
.fix-navi_sp{
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s ease; 
}
.fix-navi_sp:hover {
  opacity: 0.6; /* 半透明 */
}
.fix-navi_sp li{
  width: 50%;
  padding: 0.5rem;
}
.fix-navi_sp li p {
  font-size: 1.5rem;
  border: 1.5px solid;
  border-radius: 4px;
}
.fix-navi_bg01 {
  background-color: #bd8f8f;
}
.fix-navi_bg01 p {
  background-color: #d38d8d;
}
.fix-navi_bg02 {
  background-color: #79d1a5;
}
.fix-navi_bg02 p {
  background-color: #7bab8a;
}}


/* =========================================
   ブログ詳細ページ (single.php) 用スタイル
========================================= */
.single-page {
  /* LPと差別化するため、少し背景に色をつける（任意） */
  background-color: #f8f9fa;
  min-height: 80vh;
}

/* タイトルの下線 */
.single-title {
  font-size: 1.8rem;
  line-height: 1.4;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 15px;
}
@media (min-width: 768px) {
  .single-title {
    font-size: 2.2rem;
  }
}

/* 本文内のスタイル調整 */
.single-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
}

/* 段落（テキスト）の余白 */
.single-content p {
  margin-bottom: 1.5em;
}

/* WordPressから追加した見出し（H2）の装飾 */
.single-content h2 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  margin-top: 2.5em;
  margin-bottom: 1em;
  padding: 10px 15px;
  background-color: #f1f6fa; /* 薄いブルー */
  border-left: 5px solid #6b99c3; /* LPのテキストブルーに近い色 */
}

/* WordPressから追加した見出し（H3）の装飾 */
.single-content h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 1em;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 5px;
}

/* 記事内の画像を画面幅からはみ出させない＆角丸に */
.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 1em;
  margin-bottom: 1.5em;
}

/* スマホ表示の微調整 */
@media (max-width: 767px) {
  .single-content h2 {
    font-size: 1.2rem;
  }
}

/* =========================================
  ContactForm7カスタマイズ
========================================= */
.form{
	background-color:#d7fdf6;
}
.form-box{
	background-color:#fff;
	padding:2rem 0.5rem;
	border-radius:30px;
}
.form-box textarea{
	width:100% !important;
}
.text-bg-danger{
  background-color: #12a39a !important;
  border: 2px solid #12a39a !important;
  font-size: 0.8rem;
}
.text-bg-light{
  background-color: #fff !important;
  color: #12a39a !important;
  border: 2px solid #12a39a !important;
  font-size: 0.8rem;
}
.form-text{
	padding:0.5rem;
}
.form_btn .wpcf7-form-control{
    background: #12a39a;
    border-radius: 50px;
    width: 15rem;
    color: #fff;
    padding: 0.5rem;
    border: 2px solid #2ecdc3;
    font-size: 1.2rem;
    font-weight: bold;
}
.form_btn .wpcf7-form-control:hover{
	background: #2ecdc3;
}
.wpcf7-spinner {
    display: none !important;
}
@media only screen and (max-width: 991px){
	.form-box{
	padding:1rem 2rem;
	}}
@media only screen and (max-width: 767px){
	.form-box{
	padding:1rem;
	}
	.form-text{
		width:100%;
	}}

/* 確認画面・送信ボタンのデザイン */
.form-btn-wrap {
    text-align: center;
    margin-top: 30px;
}
.form-btn-wrap input[type="button"],
.form-btn-wrap input[type="submit"] {
    background-color: #55b2b2; /* サイトに合わせたブルーグリーン */
    color: #fff;
    border: none;
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    margin: 0 10px;
    transition: opacity 0.3s;
}
.form-btn-wrap input[type="button"]:hover,
.form-btn-wrap input[type="submit"]:hover {
    opacity: 0.8;
}

/* 戻るボタンだけグレーにする */
.form-btn-wrap input.wpcf7-back {
    background-color: #999;
}

/* =========================================
  サンクスページ
========================================= */
.thanks-ttl{
	color: #88d4c5;
    font-size: 2rem;
}
.thanks-btn{
	background-color: #88d4c5;
	color:#fff;
	border-radius:50vw;
	padding:1rem 2rem;
	text-align:center;
	margin:3rem auto 0rem;
	width:20rem;
}