@charset "UTF-8";

/* --------------------------------
 * 基本リセット & 共通スタイル
 * -------------------------------- */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box; /* 念のため追加 (元の動作と変わる可能性あり) */
}

html {
	font-size: 1rem;
	font-family: "HiraKakuStd-W7", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	color: #2C2C2C;
	letter-spacing: .025em;
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
}

body {
        background-image: url("/assets_lp/cnt/daily_payment_02/images/back_img02.webp");
        background-repeat: space repeat;
        background-position: center center;
}

@media (max-width:750px) {
body {
        background-image: url("/assets_lp/cnt/daily_payment_02/images/back_img02.webp");
        background-size: 470px;
}

}



img,
picture {
	display: block;
	width: 100%;
	border-style: none;
	vertical-align: top;
	block-size: auto;
}

iframe {
	border: none;
}

main {

}

/* --------------------------------
 * メインビジュアル (.mainvisual)
 * -------------------------------- */
.mainvisual {
	position: relative;
}

.mainvisual .flaot_Imgs { /* "flaot_Imgs" は元のスペルママ */
	position: absolute;
	bottom: 18%;
	left: 4%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-animation-name: updown;
	animation-name: updown;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.mainvisual .flaot_Imgs img {
	width: 70%;
	height: 100%;
}

@media (max-width:750px) {
	.mainvisual .flaot_Imgs {
		bottom: 16%;
		left: 6%;
	}
	/* PC版と同じ定義だが、明示的に残す */
	.mainvisual .flaot_Imgs img {
		width: 70%;
		height: 100%;
	}
}

/* --------------------------------
 * .complain
 * -------------------------------- */
.complain {
	width: 100%;
	margin: 0; /* 元: margin: 0 contain (無効な値のため修正) */
}

.complain img {
	max-width: 100%;
}

/* --------------------------------
 * .intro
 * -------------------------------- */
.intro {
	/* background-size: 100%; */ /* 下の auto で上書きされるため削除 */
	background-size: auto;
}

.intro h2 img {
	width: 100%;
}

.intro .section_ttl {
	text-align: center;
	font-size: 50px;
	margin-bottom: 40px;
}

.intro .intro_inner .section_ttl {
	text-align: center;
	padding-top: 50px;
}

.intro .intro_inner .section_ttl img {
	width: 635px;
}

.intro .intro_inner .bottom img {
	width: 100%;
	margin-top: 20px;
}

@media (max-width:750px) {
	.intro .section_ttl {
		margin-bottom: 0;
		padding-top: 20px;
	}

	.intro .intro_inner .section_ttl img {
		width: 100%;
	}

	.intro .intro_inner .bottom img {
		margin-top: 10px;
	}
}

/* .intro (スライダー) */
.intro .slider_zone .slider_inner {
	padding: 5px 0 32px 0;
}

.intro .slider_zone .slider_inner .slick-arrow {
	display: none !important;
}

.intro .slider_zone .slider_inner .slider_card {
	width: 625px;
	margin: 20px; /* 上下左右 20px */
	position: relative;
}

.intro .slider_zone .slider_inner .slider_card .work_place_image {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	margin-right: 30px;
}

.intro .slider_zone .slider_inner .slick-dots li {
	width: 30px;
}

.intro .slider_zone .slider_inner .slick-dots li button::before {
	font-size: 20px;
	color: #ffffff;
	opacity: 1;
}

.intro .slider_zone .slider_inner .slick-dots .slick-active button::before {
	color: #fff;
}

@media (max-width:750px) {
	.intro .slider_zone .slider_inner {
		padding: 3vw 0;
	}

	.intro .slider_zone .slider_inner .slider_card {
		margin: 2.67vw;
	}

	.intro .slider_zone .slider_inner .slider_card .work_place_image {
		width: 100%;
		margin-right: 35px; /* 元: width: 100% margin-right:35px (セミコロン抜け修正) */
	}

	.intro .slider_zone .slider_inner .slick-dots li {
		width: 4vw;
	}

	.intro .slider_zone .slider_inner .slick-dots li button::before {
		font-size: 5.33vw;
	}
}

@media (max-width:560px) {
	.intro .slider_zone .slider_inner .slider_card .text-flex .work_place_image {
		margin-right: 15px;
	}
}

/* --------------------------------
 * .work
 * -------------------------------- */
.work {
        background-image: url("/assets_lp/cnt/daily_payment_02/images/work_backimg.webp");
        padding: 210px 0 170px 0;
}

@media (max-width:750px) {
.work {
        background-image: url("/assets_lp/cnt/daily_payment_02/images/work_backimg.webp");
        padding: 95px 0 170px 0;
        background-size: 680px;
}
}
/* --------------------------------
 * .step_background
 * -------------------------------- */
.step_background {
        background-image: url("/assets_lp/cnt/daily_payment_02/images/Q&A_backimg.webp");
        padding: 210px 0 0px 0;
}



/* --------------------------------
 * .ut
 * -------------------------------- */
.ut {
       margin-top: -10rem;
       margin-bottom: -20rem;
}
@media (max-width:750px) {
.ut {
       margin-top: -10rem;
       margin-bottom: -14rem;
}

}

/* --------------------------------
 * .movie
 * -------------------------------- */
.intro.movie {
	background-size: cover;
	width: 100%;
	height: 100%;
}

.movie img {
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 90px 0px 25px 0px;
}

.movie .inner {
	margin: 0 auto;
	max-width: 55%;
	padding: 0px 0px 70px 0px;
	text-align: -webkit-center;
}

.movie .YouTube {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}

@media (max-width:750px) {
	.movie {
		background-repeat: no-repeat;
		background-position: right bottom;
	}

	.movie img {
		padding: 0px 0px 20px 0px;
	}

	.movie .inner {
		padding: 0px 0px 48px 0px;
		max-width: 100%;
		width: calc(690/750 * 100vw); /* 92vw */
	}

	.movie .YouTube {
		width: 83%; /* PCの100%から上書き */
	}

	.movie .movie_title {
		margin: 0 auto calc(30/750 * 100vw); /* 4vw */
		width: calc(540/750 * 100vw); /* 72vw */
	}
}

/* --------------------------------
 * 固定フッター (.fixedbtn_inner)
 * -------------------------------- */
.fixedbtn_inner {
	width: 100%;
	background-color: rgba(255, 255, 255, .8);
	position: fixed;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	padding: 15px 0;
	display: none;
}

.fixedbtn_inner .fixed_btn a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
	-webkit-animation-name: updown;
	animation-name: updown;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.fixedbtn_inner .fixed_btn img {
	width: 350px;
}

@media (max-width:750px) {
	.fixedbtn_inner {
		/* padding: 2vw 0; */ /* 下の padding: 0 で上書きされるため削除 */
		padding: 0;
	}

	.fixedbtn_inner .fixed_btn a {
		padding: 0;
		height: 90px;
	}

	.fixedbtn_inner .fixed_btn img {
		width: 90%;
	}
}

/* --------------------------------
 * Q&A (.qa)
 * -------------------------------- */
.qa {
	max-width: 100%;
	/* background: #fff; */ /* 下の background-color で上書きされるため削除 */
	background-size: cover;
}

.qa .qa_inner {
	width: 900px;
	margin: 0 auto;
	padding: 5vw 0;
}

.qa-wrap {
	margin: 2vw auto 0 auto;
	max-width: 900px;
	display: block;
}

.qa-item {
	padding: 0;
	margin-bottom: 1vw;
}

.qa-item>div {
	border-left: 0px solid #fff;
}

/* .qa-item + .qa-item {} (空のルール) */

.qa-item-inner {
	background: #fff;
	border-radius: 0px 0px 0px 0px;
	padding: 2vw;
	font-size: 150%;
	color: #666;
	font-weight: bold;
	margin-bottom: 0vw;
	display: flex;
}

.qa-item-wrap {
	margin: 0 auto;
	position: relative;
}

.qa-item-inner:first-child {
	cursor: pointer;
	width: 100%;
}

/* .qa-item-inner:first-child:hover, .qa-item-inner.isOpen:first-child {} (空のルール) */

.qa-item-inner:first-child::after {
	display: none;
}

.qa-item-inner.isOpen::after {
	transform: translateY(-50%) rotate(180deg);
}

.qa-item-inner+.qa-item-inner {
	border-top: none;
}

.qa .qa-item-icon-Q {
	display: inline;
	color: #1c8db1;
	margin-right: .5vw;
	position: relative;
	bottom: 0.1vw;
}

.qa .qa-item-icon-A {
	display: inline;
	color: #eb584e;
	margin-right: .5vw;
	position: relative;
	bottom: 0.1vw;
}

.qa-item-inner:first-child .pa-w {
	display: none;
}

.qa-item-inner:first-child .pa-g {
	display: block;
}

/* 元のセレクタから #contents を削除 (HTML構造に依存するため注意) */
.qa-item-inner:first-child:hover .pa-g,
.qa-item-inner.isOpen:first-child .pa-g,
.qa-item-inner:first-child .pa-c,
.qa-item-inner.isOpen:first-child:hover .pa-w {
	display: none;
}

.qa-item-inner:first-child:hover .pa-w,
.qa-item-inner.isOpen:first-child .pa-c {
	display: block;
}

.qa-item-text-A {
	font-size: 80%;
	line-height: 220%;
	font-weight: normal;
}

/* .qa-item-text.-q {} (空のルール) */

.qa-item-text .imgup {
	display: block;
	margin-top: -35px;
}

.qa-item-text p {
	padding-bottom: 2.5vw;
	padding-top: 1.5vw;
}

.qa-item-inner:first-child:hover .qa-item-text.-q,
.qa-item-inner.isOpen:first-child .qa-item-text.-q {
	color: #fff;
}

@media (max-width:750px) {
	.qa {
		background-size: cover;
	}

	.qa .qa_inner {
		width: 100%;
	}

	.qa-item {
		width: 90%;
		margin: 0 auto;
	}

	.qa-item-inner {
		font-size: 0.8em;
		margin-bottom: 2vw;
	}

	.qa-item-text {
		font-size: 80%;
		line-height: 160%;
	}

	/* 元のセレクタから #contents を削除 */
	.qa-item-icon img {
		width: 3vw;
	}

	.qa-item-text p {
		padding-bottom: 5vw;
		padding-top: 4vw;
	}

	.qa-item-text .imgup {
		margin-top: -10px;
	}
}

/* --------------------------------
 * トップへ戻る (.totop)
 * -------------------------------- */
.totop {
	background: #555;
	color: #fff;
}

.totop .totop_inner {
	width: 900px;
	margin: 0 auto;
	padding: 5vw 0;
	text-align: center;
}

.totop .totop_inner p {
	font-size: 150%;
	font-weight: bold;
}

.totop .totop_inner a {
	color: #aaa;
	text-decoration: none;
	text-shadow: 0 -1px 0 #333;
	border: 4px solid #aaa;
	padding: 1vw;
	border-radius: 1vw;
}

.totop .totop_inner a:hover {
	background: none;
	color: #ccc;
	border: 4px solid #ccc;
}


/* --------------------------------
 * アニメーション (Keyframes)
 * -------------------------------- */
@keyframes updown {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

/* ▼▼▼ ここからアコーディオン用CSS ▼▼▼ */

.accordion-gallery {
  padding: 50px 0; /* セクション全体の上下余白（調整してください） */
}

.accordion-gallery .inner {
  width: 750px; /* .qa_inner に合わせる */
  margin: 0 auto;
}

.accordion-item {
  margin-bottom: 10px; /* 各アコーディオンアイテム間の余白 */
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.accordion-trigger {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  /* justify-content: space-between; を削除 */
  align-items: center;
  background: linear-gradient(to bottom, #085f31, #00843e);  transition: background-color 0.3s ease;
}

.accordion-trigger:hover {
  background-color: #eee; /* ホバー時の背景色 */
}

.accordion-trigger h3 {
  margin: 0;
  font-size: 18px; /* タイトルの文字サイズ（調整してください） */
  font-weight: bold; /* 既存の .qa-item-inner に合わせる */
  
  /* ▼▼▼ 変更・追加 ▼▼▼ */
  flex-grow: 1; /* 利用可能なスペースをすべて占める */
  text-align: center; /* テキストを中央揃え */
  
  /* アイコン分のスペースを左に確保し、全体の中央に見えるように調整 */
  /* (アイコン幅 20px + マージン 15px = 35px) */

  box-sizing: border-box; /* パディングを含めて計算 */

  background: #fff;
  -webkit-background-clip: text; /* ベンダープレフィックス */
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2em; /* 0.05em や 2px などお好みの値に調整してください */
}

.accordion-trigger h3 .small-particle {
  font-size: 0.80em;  /* 親(h3)のフォントサイズの75%にする */
  font-weight: bold; /* 親がboldなので、normalに戻して弱める */
  color: #fff;
  /* 垂直位置の調整（小さくした文字が下にずれるのを補正） */
  position: relative;
  top: 0em; /* 少し上に移動（見た目に応じて 0.1 や 0.15 などを調整） */
}
.accordion-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  margin-left: 15px;
  
  /* アイコンのフォントスタイルを定義 */
  font-size: 16px; /* アイコンのサイズ */
  line-height: 20px; /* 縦方向の中央揃え（heightと合わせる） */
  text-align: center; /* 横方向の中央揃え */
  color: #fff; /* アイコンの色 */
}

/* 閉じた状態 (▶) */
.accordion-icon::before {
  content: '▶'; /* ★閉じた状態のアイコン */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 以前の「線」スタイルをリセット */
  background-color: transparent; 
  
  /* 回転アニメーションを設定 */
  transition: transform 0.3s ease;
  transform: rotate(0deg); /* 初期状態 */
}

/* 以前使用していた ::after を非表示にする */
.accordion-icon::after {
  content: '';
  display: none;
}

/* 開いた状態 (▼) */
.accordion-item.active .accordion-icon::before {
  transform: rotate(90deg); /* ★アイコンを90度回転させる */
}.accordion-item.active .accordion-trigger {
  background-color: #eaeaea; /* 開いたときのトリガーの背景色 */
}


.accordion-content {
  display: none; /* ★重要：初期状態では非表示（JSで制御） */
  background-color: #fff; /* コンテンツの背景色 */
  border-top: 1px solid #ddd;
}

.accordion-content img {
  max-width: 100%;
  height: auto;
  display: block; /* 画像下の余白対策 */
  margin: 0 auto; /* 画像を中央揃えにする場合 */
}

/* SP (750px以下) のスタイル */
@media (max-width:750px) {
  .accordion-gallery {
    padding: 5vw 0; /* SPの余白 (調整してください) */
  }
  .accordion-gallery .inner {
    width: 90%; /* .qa-item に合わせる */
    margin: 0 auto;
  }
  .accordion-trigger h3 {
    font-size: 14px; /* SP用の文字サイズ */
  }
}

/* ▲▲▲ アコーディオン用CSS ▲▲▲ */


/* ▼▼▼ Q&Aアコーディオン用CSS ▼▼▼ */

/* --- 1. トリガー (Q) のスタイル --- */
.qa-item .qa-item-inner:first-child {
  background-color: #009944; /* ご指定の背景色 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-items: center; /* アイコンを垂直中央揃え */
  
  /* 既存の左ボーダーを背景色で上書きして非表示に */
  border-left-color: #009944; 
}

.qa-item .qa-item-inner:first-child:hover {
  background-color: #007a36; /* ホバー時に少し暗くする */
  border-left-color: #007a36;
}

/* --- 2. トリガー内のテキスト/アイコン色 --- */
.qa-item .qa-item-inner:first-child .qa-item-icon-Q,
.qa-item .qa-item-inner:first-child .qa-item-text-Q {
  color: #ffffff;

}
/* 既存の .qa .qa-item-icon-Q の色指定を上書き */
.qa .qa-item-icon-Q {
  color: #ffffff;
}

/* --- 3. コンテンツ (A) のスタイル --- */
.qa-item .qa-item-inner:last-child {
  display: none; /* ★回答をデフォルトで非表示 */
  
  /* 既存のスタイルを維持（背景白、左ボーダー青） */
  background: #fff;
  border-left: 0px solid #fff;
}

/* --- 4. 開閉ボタン (+) のスタイル --- */
.qa-toggle-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-right: 8px; /* ボタンと「Q」アイコンの間隔 */
  flex-shrink: 0; /* 縮まないようにする */
}
.qa-toggle-icon::before,
.qa-toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px; /* 線の長さ */
  height: 2px;  /* 線の太さ */
  background-color: #ffffff; /* アイコンの色 */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
/* 縦棒 (「+」を作るため) */
.qa-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --- 5. 開いた状態 (✕) のスタイル --- */
/* (JSで .qa-open クラスを .qa-item に付与します) */

.qa-item.qa-open .qa-toggle-icon::before {
  /* 横棒を45度回転 */
  transform: translate(-50%, -50%) rotate(45deg); 
}
.qa-item.qa-open .qa-toggle-icon::after {
  /* 縦棒を-45度回転 */
  transform: translate(-50%, -50%) rotate(-45deg); 
}

/* ▲▲▲ Q&Aアコーディオン用CSS ここまで ▲▲▲ */