@charset "utf-8";

/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/

.clearfix {
	display: block;
}

.sp {
	display:none;
}

#container{
	width:100%;
	margin:0 auto;
	text-align:left;
}

.inner{
	width: 1280px;
	margin: 0 auto;
}

@media (max-width: 1024px) {
    #container {
        margin: 18px auto 0;
    }
	
	div#breadSns {
        width: 100%;
    }
}

ul#gnavi.menu6 li{width:15%;}

.textmin{
	font-family: "Crimson Text", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

img {
	image-rendering: -webkit-optimize-contrast;
}

.textyuu {
font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
font-weight: 600;
}

#container{
	font-family: tbudmincho-std, sans-serif;
	font-style: normal;
	font-weight: 500;
}

/* フッター調整 */

#footer_link {
    min-width: auto;}

/* ページトップへ */
p.toTop{
	width: 1080px;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: right !important;
}
p.toTop a{
	color: #1d1d1d;
	text-decoration: none;
}
p.toTop a:hover{
	text-decoration: underline;
}

*, ::before, ::after {
    box-sizing: inherit;
}

/* ページTOPへ戻るボタン */
#pagetop {position: fixed;z-index: 20;opacity: 0;transform: translateX(100px);display: block;cursor: pointer;right: 30px;bottom: 20px;font-size:16px;}
#pagetop a{display: inline-block;transition:all 0.3s;color: #fff;width: 100px;height:100px;border-radius:100px;box-sizing:border-box;text-decoration: none;padding: 3em 0;position:relative;text-align: center;background-color:rgba(33%,33%,33%,0.85);}
#pagetop a span{position: absolute;top: 25px;left: 50%;width: 20px;height: 20px;margin-left: -10px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(135deg);transform: rotate(135deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;opacity: 0;box-sizing: border-box;}
#pagetop a:hover {text-decoration: none;background: #929292;}
/*　左の動き　*/
#pagetop.LeftMove{animation: LeftAnime 0.5s forwards;}
 @keyframes LeftAnime{from {opacity: 0;transform: translateX(130px);}to {opacity: 1;transform: translateX(0);}}
  /*　右の動き　*/
  #pagetop.RightMove{animation: RightAnime 0.5s forwards;}
  @keyframes RightAnime{from {opacity: 1;transform: translateX(0);}to{opacity: 1;transform: translateX(130px);}}
  @-webkit-keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
  @keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
/* ページTOPへ戻るボタン */

/*-----------------------------------------------------*/
/* テキスト関係の指定
/*-----------------------------------------------------*/

#container{ 
	font-size: 20px;
	text-align: center;
}
#container div{
	text-align: center;
}

body h3{
	font-size: 27px;
}
.text_pink{
	color: #e21e69;
}

/*-----------------------------------------------------*/
/* パンくず
/*-----------------------------------------------------*/
div#breadSns {
    width: 980px;
    margin: 5px auto 0;
    padding: 0;
    height: 32px;
}

@media screen and (min-width: 641px) {
    div#breadSns {
        width: 980px;
		margin: 5px auto 0;
		padding: 0;
		height: 32px;
    }
	div#bread {
        float: left;
        margin: 6px 0 0 5px;
    }
	#snsBox {
        float: right;
        margin: 5px 0px 0px 0;
        vertical-align: top;
    }
	#snsBox ul li.tw {
        margin: 0 10px 0 -10px !important;
    }
}

@media screen and (max-width: 980px) {
    div#breadSns {
		margin: 30px auto 0;
    }
}

@media (max-width: 1024px) {
    div#breadSns {
        width: 100%;
    }
}

/*-----------------------------------------------------*/
/* 内容間隔（section）
/*-----------------------------------------------------*/

.cont_btn .inquiry{
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 75px;
	line-height: 24px;
	font-weight: bold;
}

/*--------------------------------------------------------------------*/
/* G-Naviのスタイル
/*--------------------------------------------------------------------*/

ul#gnavi{
	display:block;
	margin:15px auto;
	border-right:1px solid #E4E4E4;
}

ul#gnavi li{
	float:left;
	padding:5px 0.7% 0 0.7%;
	text-align:left;
	border-right:1px solid #E4E4E4;
}

ul#gnavi li:first-child{
	border-left:1px solid #E4E4E4;
}

ul#gnavi li:last-child{
	border-right:none;
}

ul#gnavi.menu6 li{width:15%;}
ul#gnavi.menu5 li{width:18.4%;}
ul#gnavi.menu4 li{width:23.4%;}
ul#gnavi.menu3 li{width:31.7%;}
ul#gnavi.menu2 li{width:48.4%;}

ul#gnavi li a{
	display:block;
	width:100%;
	padding-bottom:10px;
	border-bottom:3px solid #CCCCCC;
	text-decoration:none;
}

ul#gnavi li a:link{color:#454545;}
ul#gnavi li a:visited{color:#454545;}
ul#gnavi li a:hover{color:#DD0000;}

ul#gnavi li.selected a{
	border-bottom:5px solid #0086CD;
	color:#0086CD;
}

ul#gnavi li strong{
	display:block;
	margin-top:3px;
	font-size:140%;
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up{
    transition: 0.8s ease-in-out;
    transform: translateY(20px);
    opacity: 0;
  }

  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }

/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

.mainvisual{
	background:url(images/bg_mainvisual.jpg) no-repeat;
	padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
}
.mainvisual h1 {
    width: 1260px;
    margin: 0 auto;
	
}

.mainvisual .mvitem {
    position: absolute;
    top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
    max-width: 1260px;
}

@media screen and (max-width: 1260px) {
    .mainvisual h1 {
        width: 100%;
        padding: 0 2%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 640px) {
    .mainvisual {
        background:url(images/bg_mainvisual_sp.png) no-repeat;
		background-size: cover;
    }
	.mainvisual .mvitem {
    max-width: 640px;
	}
	.mainvisual h1 {
        padding: 0;
    }
}


/*-----------------------------------------------------*/
/* フォントサイズ
/*-----------------------------------------------------*/
:root {
--fz14: calc(14 / 16 * 1rem);
--fz15: calc(15 / 16 * 1rem);
--fz17: calc(17 / 16 * 1rem);
--fz20: calc(20 / 16 * 1rem);
--fz23: calc(23 / 16 * 1rem);
--fz25: calc(25 / 16 * 1rem);
--fz30: calc(30 / 16 * 1rem);
--fz35: calc(35 / 16 * 1rem);
--fz40: calc(40 / 16 * 1rem);
--fz50: calc(50 / 16 * 1rem);
--fz60: calc(60 / 16 * 1rem);
--fz80: calc(80 / 16 * 1rem);
}

.about_txt1 , .list-item_price2{color: #3d3d3d;}

/*-----------------------------------------------------*/
/* 各コンテンツのタイトル（大）
/*-----------------------------------------------------*/
.about , .step , .price{margin: 0 auto;}
.ttl_about_txt{text-align: left; display: inline-block; color: #fff; font-size: var(--fz35); letter-spacing: 0.1em;
	line-height: 1.5; margin-bottom: 20px; text-shadow: 0px 0px 10px rgba(107, 80, 94, 1.0);
}
.ttl_about{
	background:url(images/content_about_bg.jpg) no-repeat;
	padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 455px;
    background-position: center;
    background-size: cover;
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; /* 子要素を縦に並べる */
    text-align: center;
}

/* About部分：楕円のデザイン */
.ttl_about_txt_sub {
    color: #fff;
    font-size: var(--fz25);
    letter-spacing: 0.2em;
    
    /* 楕円の背景設定 */
    background: rgba(255, 255, 255, 0.2); /* 白の半透明 */
    backdrop-filter: blur(4px); /* 背景をぼかす（おしゃれになります） */
    padding: 10px 40px;
    border-radius: 20px;
    display: inline-block;
    position: relative;
	margin: 0 auto;
	
/* 楕円形にするための重要設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 横長にするために幅と高さを指定 */
	width: 90px;
    height: 45px;
    border-radius: 50% / 50%;
    
}

/* 下の矢印（V字） */
.ttl_about_txt_sub::after {
    content: "";
    position: absolute;
    bottom: -15px; 
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateX(-50%) rotate(45deg); 
}

.ttl_step{
	background:url(images/content_step_bg.jpg) no-repeat;
	background-position: top;
    background-size: cover;
}

.ttl_price{
	background:url(images/content_price_bg.jpg) no-repeat;
	background-position: bottom;
    background-size: cover;
}

/* Priceの土台（楕円形が含まれる要素） */
.ttl_about_txt_sub {
    position: relative;
    /* --- ここから追加 --- */
    opacity: 0;            /* 最初は透明 */
    transform: translateY(20px); /* 少し下にずらしておく */
    transition: opacity 1.2s ease, transform 1.2s ease; /* ふわっと動く時間 */
}

/* スクロールして active クラスがついた時 */
.ttl_about_txt_sub.active {
    opacity: 1;            /* 見える状態にする */
    transform: translateY(0);    /* 元の位置に戻る */
}


/* Priceの土台 */
.ttl_about_txt_sub {
    position: relative;
    /* 位置の移動（transform）を削除しました */
    opacity: 0 !important; 
    transition: opacity 1.5s ease !important; /* 透明度だけを1.5秒かけて変化 */
}

/* スクロールして active クラスがついた時 */
.ttl_about_txt_sub.active {
    opacity: 1 !important;
}

@media screen and (max-width: 980px) {
	
	.ttl_about {height: 350px;}
	.ttl_about_txt {font-size: var(--fz30);}
	    .ttl_about_txt_sub {
        font-size: var(--fz17);
        padding: 5px 30px;
    }
}

@media screen and (max-width: 640px) {
	
	.ttl_about_txt {font-size: var(--fz25); line-height: 1.4;}
	    .ttl_about_txt_sub {
        font-size: var(--fz14);
        padding: 3px 10px;
    }
	.ttl_about {height: 300px;}
	.ttl_about img{
		width: 70%;
	} 
}

@media screen and (max-width: 500px) {

	.ttl_about img{
		width: 90%;
	} 
}

/*-----------------------------------------------------*/
/* About
/*-----------------------------------------------------*/
.about , .step , .price{
	background:url("images/bg_content.jpg") repeat;
    width: 100%;
    background-position: center;
    background-size: cover;}

.about_box{max-width: 1260px; margin: 0 auto; padding: 150px 20px 200px;}
.about_txtbox_1{text-align: left!important;}
.about_imgbox_1 img{display: block; margin-right: 50px;}
.about_content1{display: flex; justify-content: center;}
img.img-bottom{padding-left: 120px;}
img.img-top{margin-bottom: 50px;}
h3.about_txt_ttl1{font-size: var(--fz35); color: #c13a7f; display: inline-block;}
.about_txt1{margin: 50px 30px 30px 65px; padding-left: 20px; line-height: 1.8; letter-spacing: 0.05em;}

.about_content2{margin-top: 100px;}
.about_imgbox_2{position: relative; width: 40%;}
.img-pro1 , .img-pro2 , .img-pro3{position: absolute;}
.img-pro1{top: 10%; left: 43%;}
.img-pro2{top: 38%; left: 10%;}
.img-pro3{top: 55%; right: 0%;}
.about_btn{text-align: center; padding-top: 25px;}
.about_btn a{text-decoration: none; padding: 5px 30px; background-color: #c13a7f; color: #fff; border-radius: 20px; -webkit-transition: 0.5s all;
  transition: 0.5s all;}
.about_btn a:hover{color: #c13a7f; background-color: #fff; border: 1px solid #c13a7f;}


.about_txt_ttl3{position: relative; display: inline-block; padding: 20px 40px;
  color: #c13a7f; font-weight: bold; font-size: var(--fz35); line-height: 1.5; text-align: center;}

.about_txt_ttl3::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px;
  bottom: 0; border-top: 1px solid #c13d7b; border-bottom: 1px solid #c13d7b;
}

/* 左右の線 */
.about_txt_ttl3::after {
  content: ""; position: absolute; top: 15px; bottom: 15px; left: 0; right: 0;
  border-left: 1px solid #c13d7b; border-right: 1px solid #c13d7b;
}

.about_content3{
    padding: 80px 50px 100px 50px; background:rgba(255,255,255,0.8); border-radius: 40px; margin-top: 150px;
}

.about_imgbox_3 {display: flex; justify-content: space-evenly;
    flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding-top: 75px;
}

.about_imgbox_3 img {
    max-width: 48%; height: auto; display: block; object-fit: contain; 
}
img.img-ex3{padding-top: 50px;}

.br_ab1 {display: none;}

/* 既存のクラスに擬似要素の設定を追加 */
.about_txt1 {
  position: relative;
  padding-left: 25px; /* 線を表示するための余白（適宜調整してください） */
  margin-left: 10px;  /* 必要に応じて位置調整 */
}

/* 縦線の見た目 */
.about_txt1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;         /* 線の太さ */
  height: 0;          /* 最初は高さ0 */
  background-color: #c13d7b; /* ピンク色 */
  transition: height 1.5s ease-out; /* 伸びる速さ */
}

/* スクロールして表示された時の状態 */
.about_txt1.is-active::before {
  height: 100%;       /* 下まで伸びる */
}


.about_imgbox_3 {
    display: flex;
    justify-content: space-between; /* 余白を均等にするならbetweenがおすすめ */
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 75px;
    gap: 20px 2%; /* 画像間の上下左右の隙間を微調整 */
}

.about_imgbox_3 img {
    /* max-widthではなくwidthを指定することで、小さい画像も引き伸ばして揃えます */
    width: 48%; 
    height: auto;
    display: block;
    /* アスペクト比が違う場合でも歪ませたくないなら、少し高さを指定してcoverにするのもアリです */
}

.about_txt1 , .step_lead {font-size: var(--fz20);}

.br_ab3_1 , .br_ab3_3{display: none;}

@media (max-width: 1260px) {
	.br_ab1{display: block;}
	.ttl_hibi1{padding-bottom: 20px;}
	.img-pro1 {top: 0; right: 100px; width: 30%;}
	.img-pro2 {top: 80px; left: 10px; width: 40%;}
	.img-pro3 {top: 160px;　right: 0%; width: 50%;}
}

@media (max-width: 1200px) {
.about_imgbox_3 img {
	width: 48%;}
.about_imgbox_3 {
	gap: 20px 2%;}
}

@media (max-width: 1060px) {
	.br_ab2{display: none;}	
	.about_imgbox_2{margin-top: 60px;}
	.about_txtbox_2{width: 65%;}
}
@media (max-width: 980px) {
.about_content1 {justify-content: space-between;}
.about_imgbox_1{width: 30%; margin-top: 100px;}
.about_txtbox_1{width: 55%; margin-right: 10px;}
img.img-top{width:100%;}
img.img-bottom { width:80%;}
.ttl_hibi1{ padding: 0px 10px 20px 0px;}
.about_imgbox_2 {margin-top: 150px;}
.img-pro1 {top: -100px; right: 0; width: 35%;}
.img-pro2 {top: -30px; left: 0; width: 45%;}
.img-pro3 {top: 60px; right: 0%; width: 60%;}
.about_txtbox_2{margin-left: 10px;}
}


@media (max-width: 921px) {
.ttl_hibi2{ padding: 0px 10px 20px 0px;}
}

/* スマホでは1枚ずつ縦に並べる場合 */
@media (max-width: 900px) {
	.about_imgbox_3{
    display: block;
	width: 100%;
    }
	
    .about_imgbox_3 img{
    max-width: 100% !important;
    width: auto;
    display: block;
	margin: 0 auto;
    }
	
	img.img-ex1 , img.img-ex3 {padding-bottom: 40px;}
}

@media (max-width: 772px) {
h3.about_txt_ttl1 , .about_txt_ttl3{
    font-size: var(--fz30);
	display: block;
}
}

@media (max-width: 750px) {
.about_box {
	padding: 80px 5% 200px;
}
.about_txt1 , .about_btn a{font-size: var(--fz20);
	margin: 30px 30px;
	}
.about_content1 , .about_content2 {
	flex-direction: column-reverse; /* これでテキスト(後)が上、画像(前)が下に */
	    padding-bottom: 180px;
	}
	
h3.about_txt_ttl1{margin-top: 10px; line-height: 1.5;}
.about_content2 {display: block; margin-top: 150px;}
.about_txtbox_1 {
    width: 100%; /* 横幅いっぱいに広げる */
	}
.ttl_hibi1 , .ttl_hibi2 {
	padding: 0;
	float: left;
    }
	
.ttl_hibi1{margin: 10px 10px 10px 0px;}
.ttl_hibi2{margin: -10px 10px 10px 0px;}
.about_imgbox_1 , .about_imgbox_2{
	width: 90%;
	margin-top: 40px;
	position: relative;
	margin: 0;
	margin: 0 auto;
    }
	
.about_imgbox_2{
	margin-top: 40px;
	}
img.img-top , img.img-bottom{position: absolute; padding: 0; margin: 0; top: 50px;}
img.img-top{width: 50%;}
img.img-bottom{width: 40%; right: 0; top: 10px;}
.about_btn{padding-top: 0px; padding-bottom: 30px;}
.img-pro1 {width: 27%; top: 0; left: 32%;}
.img-pro2 {width: 30%; top: 50px; left: 0;}
.img-pro3 {width: 40%; right: 0; top: 40px;}
}

@media (max-width: 640px) {
.about_txt_ttl3 {
    padding: 10px 0px;
}
	h3.about_txt_ttl1 , .about_txt_ttl3{
    font-size: var(--fz25);
}

    .about_txt1 ,.about_btn a , .step_lead{
        font-size: var(--fz17);
    }
	
	.ttl_hibi1 , .ttl_hibi2 {
	margin-bottom: 10px;
    }
	
	.about_content1, .about_content2 {
        padding-bottom: 140px;
    }
	
	.about_content3{
    padding: 0px 0px 80px 0px;
	}
	
	.about_txtbox_3 {padding: 80px 50px 0px 50px;}
	    .about_imgbox_3 img {
			max-width: 90% !important;}
}

@media (max-width: 530px) {
	.about_txtbox_3 {padding: 60px 20px 0px 20px;}
}

@media (max-width: 500px) {
    .about_box {
        padding: 80px 2% 200px;
    }
    .img-pro1 {
        width: 29%;
        top: 0;
        left: 31%;
    }

}

@media (max-width: 450px) {
	.br_ab3_1 , .br_ab3_3{display: block;}
	.br_ab3_2{display: none;}
	.about_btn a {
        margin: 30px 10px;
    }
}

@media (max-width: 370px) {
    h3.about_txt_ttl1{
        font-size: var(--fz20);
    }
	.about_txtbox_2 {
        margin-left: 0px;
    }
	
	.about_txt1 {
        margin: 30px 15px;
    }
	
	    .about_content1, .about_content2 {
        padding-bottom: 100px;
    }
	
	.about_txt1{font-size: var(--fz15);}
	
	    .ttl_about_txt {
			font-size: var(--fz23);}
}

@media (max-width: 350px) {
.about_btn a {
    padding: 2px 20px;
	}
}
/*-----------------------------------------------------*/
/* Step
/*-----------------------------------------------------*/
.step_leadbox{margin: 0 auto; max-width: 980px; padding: 50px 5% 100px 5%;}
.step_lead{text-align: left; line-height: 1.5; letter-spacing: 0.05em;}

/* 全体のコンテナ：横並びにする */
    .step_content {
      display: flex;
      align-items: center;
      gap: 40px; /* 画像とテキストの間隔 */
      padding: 40px;
      max-width: 1260px;
	  margin: 0 auto;
    }

    /* 左側のテキストエリア */
    .step-list {
      flex: 1;
    }

    .list-item {
      display: flex;
      align-items: center;
      padding: 30px 0;
      background-image : linear-gradient(to right, #c13a7f 4px, transparent 4px);
      background-size: 10px 1px;
      background-repeat: repeat-x; 
      background-position: left bottom;
    }

     .list-item_price {
      display: flex;
      align-items: center;
      padding: 30px 0;
      background-image : linear-gradient(to right, #c13a7f 4px, transparent 4px);
      background-size: 10px 1px;
      background-repeat: repeat-x; 
      background-position: left bottom;
    }

    /* 数字の部分 */
    .number {
      font-size: var(--fz40);
      font-style: italic;
      color: #c13a7f;
      margin-right: 25px;
      font-weight: bold;
	  Opacity: 0.8;
    }

    /* テキスト部分 */
    .text-box {
      color: #c13a7f; /* 濃いピンク系の文字色 */
    }

    .step_txt {
      font-size: var(--fz35);
      font-weight: bold;
      display: block;
	      text-align: left;
    }

.step_txt_sm{font-size: var(--fz30);}

    .step_txt_none {
      font-size: var(--fz20);
      display: block;
      margin-top: 4px;
    }

    .br_step2{display: none;}

    /* 右側の画像エリア */
    .step_img {
      flex: 1;
    }

    .step_img img {
      width: 100%;
      height: auto;
      display: block;
    }

.step{padding-bottom: 150px;}


/* Swiper自体のサイズ調整（必要に応じて） */
.step_img.swiper {
    width: 100%;
    overflow: hidden;
}

/* テキストの基本状態（薄くする） */
.list-item {
    opacity: 0.4; /* 全体を薄くする場合 */
    transition: all 1.0s ease; /* 変化をゆっくりに */
}

/* アクティブ時の状態（濃くする） */
.list-item.active-step {
    opacity: 1;
    color: #c13a7f; /* お好みの濃いピンク色に調整してください */
}

/* 画像がふわっと切り替わるための設定 */
.swiper-slide {
    transition: opacity 1.5s ease-in-out;
}

/* 最初の1枚目以外を最初は非表示にする */
.step_img .swiper-slide:not(:first-child) {
    opacity: 0;
}

/* Swiperの準備ができたら（クラスがついたら）通常表示に戻す */
.step_img.swiper-initialized .swiper-slide {
    opacity: 1;
}

/* フェード時の重なりを綺麗にするための追加設定 */
.swiper-fade .swiper-slide {
    pointer-events: none;
}
.swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

@media (max-width: 1120px) {
.br_step2{display: block;}
}

@media (max-width: 900px) {
	.step_content {
    display: flex;
    flex-direction: column-reverse;}
	.step_img img {width: 80%; margin: 0 auto;}
	.step-list {width: 80%;}
	br.br_step2{display: none;}
	.number {margin-right: 40px;}
}

@media (max-width: 730px) {
	.step-list {
		width: 90%;
    }
}

@media (max-width: 640px) {
	.number {margin-right: 20px;}
	.step_img img , .step-list{width: 90%;}
	.step_content {padding: 40px 10px 40px 10px;}
}

@media (max-width: 560px) {
	br.br_step2{display: block;}
	.step_txt {font-size: var(--fz25);}
}

@media (max-width: 400px) {
    .step_img img, .step-list {
        width: 95%;
    }
}
/*-----------------------------------------------------*/
/* Price
/*-----------------------------------------------------*/

.section_ttl_contact{color: #fff!important;}
.section_ttl_contact::before {background-color: #fff!important;
}

/* 全体のコンテナ：横並びにする */
    .price_content {
      display: flex;
      align-items: center;
      gap: 20px; /* 画像とテキストの間隔 */
      padding: 0px 80px 250px 0px;
      max-width: 1260px;
	  margin: 0 auto;
		justify-content: center;
		position: relative;
    }


    .price_img img {
      display: block;
    }

    .price_txt {
      font-size: var(--fz50);
      font-weight: bold;
      display: block;
	  padding-top: 20px;
	  letter-spacing: 0.1em;
	  padding: 10px 20px;
	  background-color: #ffffe6;
    }

    .price_txt_none {
      font-size: var(--fz25);
      display: block;
      margin-top: 4px;
	  padding-bottom: 20px;
    }

span.price_txt_min{font-size: var(--fz20);}

.list-item_price , .text-box_price , .list-item_price2{text-align: left!important;}
.list-item_price2{padding-top: 30px; line-height: 1.5; font-size: var(--fz17);}

.price_img2{position: absolute; right: 0; top: 30%;}

.br_price{display: none;}

@media (max-width: 1300px) {
.price_img2 img{display: none;}
.price_content{
	padding: 0px 20px 250px 20px;
	}
}
@media (max-width: 1020px) {
	.br_price{display: block;}
	.price-list{width: 65%;}
	.price_img{width: 35%;}
	.price_content {padding: 0px 5% 250px 5%; gap: 10px;}
	.price_img img{max-width: 100%;}
}

@media (max-width: 640px) {
	.price_txt {
    font-size: var(--fz40);
	text-align: center;
	}
	.price_txt_none {
		font-size: var(--fz20);}
	.price_content{
	display: block;
	}
	
	.br_price{display: none;}
	.price-list {width: 100%;}
	
	.price_img{margin: 0 auto; width: 50%; padding-left: 10%;}
	.list-item_price {display: block;}
}
@media (max-width: 630px) {
	.br_price{display: block;}
}
/*-----------------------------------------------------*/
/* Contact
/*-----------------------------------------------------*/

.contact {
  position: relative;
  background-color: #c13a7f; /* メインのピンク色 */
  padding: 0px 20px 100px;
  text-align: center;
}

.contact-content{padding: 50px 30px 0px 30px; position: relative; max-width: 900px; margin: 0 auto;}
img.contact_img1{position: absolute; z-index: 100; bottom: -30px; left: -30px;}
img.contact_img2{position: absolute; z-index: 100; top: -48px; right: -30px;}

/* 波の部分をSVGで表現 */
.contact::before {
	content: "";
    position: absolute;
    top: -129px;
    left: 0;
    width: 100%;
    height: 130px;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none"><path fill="%23c13a7f" d="M0,70 C320,0 420,0 720,40 C1020,90 1099,108 1440,90 V100 H0 Z"/></svg>');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* お問い合わせボタン（白いボックス） */
.contact-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #c13a7f;
  text-decoration: none;
  padding: 60px 120px;
  border-radius: 15px;
  position: relative;
  transition: opacity 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.contact-button:hover , .contact-button:visited{color: #c13a7f; text-decoration: none;}

.contact-button:hover .contact_img1 {
    transform: rotate(-10deg);
	
}

/* 左下の画像（例: -15度回転） */
.contact-button:hover .contact_img2 {
    transform: rotate(10deg);
}

/* テキストスタイル */
.button-sub {
  font-size: var(--fz20);
  margin-bottom: 5px;
  letter-spacing: 0.1em;
}

.button-main {
  font-size: var(--fz40);
  font-weight: bold;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
}



/* 矢印アイコンの擬似要素 */
.button-main::after {
  content: "→";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #c13a7f;;
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 18px;
  margin-left: 15px;
  transition: 0.5s all;
}

.contact-content:hover .button-main::after{
  background-color: #fff;
  color: #c13a7f;
  border: solid 1px #c13a7f;
}

/* 注釈テキスト */
.contact-note {
  color: #ffffff;
  font-size: var(--fz17);
  margin-top: 10px;
}

@media (max-width: 810px) {
    .contact-button {padding: 0;
    width: 95%;
	height: 220px;}
	
	img.contact_img1 {
		bottom: -40px;}
	
	.contact-note {
		margin-top: 50px;
}
}

@media (max-width: 640px) {
    .contact-button {
		width: 100%;}
	
	.button-main {
		font-size: var(--fz30);}
	
	.contact-button:hover .contact_img1 {
		transform: none;}
	
	/* 左下の画像（例: -15度回転） */
	.contact-button:hover .contact_img2 {
		transform: none;}
	
	.button-main::after {margin-left: 10px;}
	
}

@media (max-width: 500px) {
    .contact-button {
        height: 200px;
    }
	
	.button-main {
    display: flex; /* フレックスボックスにする */
    flex-direction: column; /* 中身（文字と矢印）を縦に並べる */
    align-items: center; /* 左右中央に揃える */
    gap: 10px; /* 文字と矢印の間の距離を調整 */
}

.button-main::after {
    content: "→";
    display: inline-flex; /* 矢印単体の中身（→）を中央にするための設定 */
    align-items: center;
    justify-content: center;
    background-color: #c13a7f;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 18px;
    transition: 0.5s all;
    /* margin: 0 auto; は flex-direction: column の中では不要になります */
}
	
	img.contact_img2 {
    top: -30px;
	width: 130px;
}
	img.contact_img1 {
	width: 110px;
}
	.contact {
		padding: 0;}
	.contact-note {
        padding: 0px 2% 50px 5%;
    }
}
@media (max-width: 420px) {
    img.contact_img2 {
		top: -42px;}
}

@media (max-width: 400px) {
	.button-sub {
    letter-spacing: inherit;}
	
	 .button-main {
        font-size: var(--fz25);
		 letter-spacing: inherit;}
	
	.contact-content {
		padding: 50px 10px 0px 10px;
		overflow: hidden;}
	
	.contact-button {
		margin-bottom: 40px;}
}
/*-----------------------------------------------------*/
/* 各セクションのタイトル（-Step　-Price　-Contact）
/*-----------------------------------------------------*/
.section_ttlbox {
  width: 80%;            /* 全体の幅を指定（pxでも%でもOK） */
  margin: 0 auto;        /* 中央に配置しつつ、中身を左寄りに調整しやすくする */
  padding-left: 20px;    /* ★ここで「少し左寄せ」の度合いを調整 */
}

.section_ttl {
  display: flex;         /* 線と文字を横並びにする */
  align-items: center;    /* 垂直方向を中央に揃える */
  font-size: var(--fz80);       /* サイズはお好みで */
  color: #c13a7f;        /* 画像に近いピンク色 */
  letter-spacing: 0.05em;
}

.section_ttl::before {
  content: "";           /* 擬似要素に必須の設定 */
  width: 80px;           /* 線の長さ */
  height: 1px;           /* 線の太さ */
  background-color: #c13a7f; /* 文字と同じ色を適用 */
  margin-right: 15px;    /* 線と文字の間の余白 */
}

.section_ttl_price{padding: 100px 0px 60px 0px;}

@media (max-width: 1600px) {
	.section_ttlbox {width: 90%;}
}

@media (max-width: 980px) {
.contact::before {
	content: "";
    position: absolute;
    top: -80px; /* 高さを少し抑えるとよりなだらかに見えます */
	left: 0;
	width: 100%;
	height: 81px;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23c13a7f" d="M0,70 C320,0 420,0 720,40 C1020,90 1099,108 1440,90 V100 H0 Z"/></svg>');
    background-repeat: no-repeat;
	background-size: cover; 
	background-position: center bottom;
	pointer-events: none;}
}

@media (max-width: 640px) {
	.step_txt {font-size: var(--fz30);}
	.step_txt_sm {font-size: var(--fz25);}
	.section_ttlbox {padding-left: 0px;
}
	
	.section_ttlbox {width: 95%;}
	.section_ttl {font-size: var(--fz50);}
	.section_ttl::before {width: 50px;}
}
	
/*-----------------------------------------------------*/
/* 改行のスタイル
/*-----------------------------------------------------*/
/* フッターの隙間打消し */
#footer.clearfix:after {
    content: "";
}

/*-----------------------------------------------------*/
/* h2とページ内リンクの設定
/*-----------------------------------------------------*/

h2 {
	width: auto;
}


/*--------------------------------------------------------------------*/
/* レスポンシブル対応
/*--------------------------------------------------------------------*/

@font-face {
	font-family: 'WebSymbolsgfeditRegular';
	src: url('/css/font/websymbols_gf-edit-webfont.eot');
	src: url('/css/font/websymbols_gf-edit-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/css/font/websymbols_gf-edit-webfont.woff') format('woff'),
		 url('/css/font/websymbols_gf-edit-webfont.ttf') format('truetype'),
		 url('/css/font/websymbols_gf-edit-webfont.svg#WebSymbolsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@media screen and (max-width:980px) {

.mainvisual h1{
	width: 100%;
}

/* headerの隙間調整 */
#header .com_global_header_heightadjuster{
	height: 81px !important;
}

.inner {
	width: 95%;
}

h2 {
	font-size: 3vw;
}

}


@media screen and (max-width:640px) {

.sp {
	display: block;
}
.pc {
	display: none;
}
#footer {
	display: none;
}
#breadSns {
	display: none;
}
header.common .logo {
	float: left;
	width: 275px;
}
header.common .navi li {
	float: right;
	padding-top: 15px;
}

#container{
	width:100% !important;
	position:relative;
	margin: 0;
}

/* font調整 */
body h3{
	font-size: 24px;
}

.cont_recruit p{
	font-size: 1.5em;
}
body #container {
font-size: 2.6vw;
}

/*-----------------------------------------------------*/
/* メインビジュアル
/*-----------------------------------------------------*/

section{
	margin: 30px auto 40px;
	position: relative;
	text-align: center;
}
section>div>img{
	/* max-width: 100%; */
	width: 95%;
	margin: auto;
}


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

h2{
	font-size: 3.5vw;
}


h3 {
	width: 100%;
	display: inline-block;
	margin: 0;
}
	
	section.contact{margin: 0px auto 40px;}

}

html, body {
  overflow-x: hidden; /* 横スクロールだけを禁止する */
  width: 100%;
}