/* 流れる文字専用 */
.loop_text_wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: -10px;
}
.loop_text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 620%;
  overflow: hidden;
  padding-left: 20px;
  color: rgba(254, 247, 234, 0.2);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.0;
}
.loop_text:nth-child(odd) {
  animation: loop 120s -60s linear infinite;
}
.loop_text:nth-child(even) {
  animation: loop2 120s linear infinite;
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
/* 流れる文字専用 */


.cta_wrap_outside{background: linear-gradient(145deg, #ff914d, #ffb93e);
padding-top: 90px;
padding-bottom: 100px;
position: relative;}


.cta_lead{text-align: center;
color: #ffffff;
font-size: 150%;
font-weight: 700;
margin-bottom: 30px;}

.cta_wrap{
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 850px;
}

.cta_wrap_top{
margin-left: 0;
margin-right: auto;
padding-left: 30px;}

.cta_copy{text-align: center;
color: var(--orange);
font-weight: 700;
font-size: 140%;
margin-bottom: 25px;
}


.cta_flex {
 display: flex;
justify-content: space-around;
align-items: stretch; /* 高さを揃える */
	gap: 10px; /* liの間隔を10pxに */
}

.cta_flex_top {
margin-bottom: 35px;
}

.cta_flex li {
  display: flex;
	 align-items: center;
border-radius: 9999px;
}

.cta_flex li a {
	padding-top: 10px;
	padding-right: 35px;
	padding-left: 35px;
	padding-bottom: 10px;
	flex: 1; /* liの高さに合わせて伸びる */
	box-sizing: border-box;
	position: relative; /* 擬似要素をa内に配置するために必要 */
}

.cta_flex li:first-child {
  width: 44%;
	background-color: #ffffff;
}

.cta_flex_tel {
    font-size: 188%;
    font-weight: 700;
    line-height: 1.4;
    position: relative; /* 疑似要素の配置用 */
	text-align: center;
}

.cta_flex_tel::before {
content: "\f2a0"; /* 電話アイコン */
    font-family: "Font Awesome 6 Free";
    transform: rotate(-45deg); /* 左上に傾ける */
    font-weight: 900; 
    margin-right: 0.5em;
    display: inline-block;
	font-size: 150%;
	
}

.cta_flex_txt{font-size: 82%;
text-align: center;}

.cta_flex li:first-child a {
color: var(--navy);
}

.cta_flex li:nth-child(2){
  width: 30%;
	background-color: var(--navy);
	font-size: 125%;
	line-height: 1.4;
}

.cta_flex li:nth-child(2) a{
color: #ffffff;
}

.cta_flex li:last-child{
  width: 22%;
	background-color: #00c300;
font-size: 125%;
	line-height: 1.4;
}

.cta_flex li:last-child a{
color: #ffffff;
}


/* 擬似要素（矢印）を a に付ける */
.cta_flex > li a::after {
  content: "\f105";  
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  position: absolute;
  right: 25px; 
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none;                /* クリックの邪魔をしない */
}

.cta_flex > li:first-child a::after {
  content: "";  
}

/* タブレット横向き以上、PC未満 */
@media (min-width: 1024px) and (max-width: 1280px) {
.cta_wrap_top{
	width: 90%;
margin-left: 0;
margin-right: auto;
padding-left: 30px;
}
	

	
	}


/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
	.cta_flex_top {
margin-bottom: 15px;
}
	
.cta_wrap{
width:  90%;
font-size: 78%;
margin-left: auto;
margin-right: auto;
	}
.cta_wrap_top{
width: 90%;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
font-size: 78%;
}

}
/* -------------end------------- */

/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:1024px){
.cta_wrap_outside{padding-top: 50px;}
}
/* -------------end------------- */
/* タブレット・スマホ画面用の設定-------------- */
@media (max-width:767px){
.cta_wrap_outside{padding-top: 45px;}
.cta_wrap{
width:  90%;
}
	
.cta_wrap_top{
width: 90%;
margin-left: auto;
margin-right: auto;
	padding-left: 0px;
}
	
.cta_copy{	
margin-bottom: 15px;
text-align: left;
	line-height: 1.4;
}
	

	
.cta_flex {
  flex-wrap: wrap; /* 折り返しを有効に */
  gap: 15px; /* liの間隔を維持 */
margin-bottom: 0px;
}

.cta_flex li:first-child {
  width: 100%; /* 1行目は幅100% */
}

.cta_flex li:nth-child(2){
  width: calc(58% - 7.5px); 
	font-size: 100%;
}


.cta_flex li:last-child {
width: calc(42% - 7.5px); 
font-size: 100%;
}


.cta_flex li:first-child a {
	padding-right: 25px;
	padding-left: 35px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.cta_flex  li:nth-child(2) a,
.cta_flex  li:last-child a
{
	padding-right: 25px;
	padding-left: 25px;
		
	padding-top: 10px;
	padding-bottom: 10px;
}
}
/* -------------end------------- */

@media (max-width:350px){
.cta_wrap{
font-size: 90%;
}
	}
	
/* cta_flex_footer用のスタイル */
.cta_flex.cta_flex_footer {
  flex-wrap: wrap; /* 折り返しを有効に */
  gap: 10px; /* liの間隔を維持 */
margin-bottom: 0px;
}

.cta_flex.cta_flex_footer li:first-child {
  width: 100%; /* 1行目は幅100% */
	margin-bottom: 12px;
}

.cta_flex.cta_flex_footer li:nth-child(2){
  width: calc(58% - 5.5px); 
	font-size: 100%;
}


.cta_flex.cta_flex_footer li:last-child {
  width: calc(42% - 5.5px); 
font-size: 100%;
}


.cta_flex.cta_flex_footer li:first-child a {
	padding-right: 25px;
	padding-left: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.cta_flex.cta_flex_footer  li:nth-child(2) a,
.cta_flex.cta_flex_footer  li:last-child a
{
	padding-right: 25px;
	padding-left: 25px;
		
	padding-top: 10px;
	padding-bottom: 10px;
}


.cta_flex_footer .cta_flex_tel::before {
font-size: 125%; /* 少し大きく */
}


/* 擬似要素（矢印）を a に付ける */
.cta_flex.cta_flex_footer > li a::after {
  content: "";  }

/* ▼ 2番目と3番目のアイコン追加 */
.cta_flex.cta_flex_footer li:nth-child(2) a::before {
content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../img/common_img/mail_icon.png");
  background-size: contain; /* or 20px 20px */
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  transform: translateY(3px); /* ← アイコンだけ上に */
}

.cta_flex.cta_flex_footer li:last-child a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../img/common_img/line_icon.png");
  background-size: contain; /* or 20px 20px */
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  transform: translateY(3px); /* ← アイコンだけ上に */
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.cta_flex.cta_flex_footer  li:nth-child(2) a,
.cta_flex.cta_flex_footer  li:last-child a
{
	padding-right: 15px;
	padding-left: 15px;

}
	
	/* ▼ 2番目と3番目のアイコン追加 */
.cta_flex.cta_flex_footer li:nth-child(2) a::before {
  width: 18px;
  height: 18px;
  transform: translateY(3px); /* ← アイコンだけ上に */
}

.cta_flex.cta_flex_footer li:last-child a::before {

  width: 18px;
  height: 18px;
  transform: translateY(3px); /* ← アイコンだけ上に */
}
}
/* -------------end------------- */


/* ---- Medium: タブレット用 (768～1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
.cta_flex.cta_flex_footer {
width: 60%;
margin-left: auto;
margin-right: auto;
}
}
/* -------------end------------- */

/* ---- Small: スマホ用 (～767px) ---- */
@media (max-width: 767px) {
	 .cta_flex_top_pc {
    display: none;
}
	}
/* -------------end------------- */