/* ============ GAL RECRUIT ============ */

.gal_recruit .cd-fixed-bg.cd-bg-1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../../images/gal_rec_bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

.common_rec {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    padding: 100px 0;
    min-height: 14800px; /* ←テスト用に明示的に高さを指定 */
    margin-bottom: 1rem;
}

.common_wrapper_rec {
	position: relative;
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    margin-top: -30px;
}

.common_wrapper_rec .bread_crumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 18px;
    align-items: center;
    margin: 15px 0;
    color: #fff;
}

.rec_section{
	background: #f4f2ed;
	margin-bottom: 80px;
	width: 1000px;
}

.gal_sliderArea{
	width: 1350px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.slider.pc{
	display: block;
}

.slider.sp{
	display: none;
}

.gal_rec_title {
	margin: -180px auto 10px;
	text-align: center;
	width: 100%;
	max-width: 1350px;
	position: relative;
	z-index: 2;
}

.reason#rec1 {
	margin: 0 auto;
	width: 100%;
	max-width: 1350px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.reason_img01 {
	width: 100%;
	max-width: 1350px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.rec_pc_img	{
	display: block;
}

.rec_sp_img	{
	display: none;
}

.icon_container{
	background-image: url("../../images/reason_bg.jpg");
	background-position: center;
	background-size: cover;
	height: 800px;
}

.reason_icon {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 60px auto;
	width: 745px;
}

.icon_img {
	width: 200px;
	height: auto;
	filter: drop-shadow(4px 4px 4px #aaa);
}

/* 初期状態 */
.iconFadeTrigger {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none; /* 念のため */
}

/* アニメーション発火時 */
.iconFadeIn {
  animation: fadeInUp 2s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.delay01 {
    animation-delay: 0.2s;
}

.delay02 {
    animation-delay: 0.4s;
}

.delay03 {
    animation-delay: 0.6s;
}

.delay04 {
    animation-delay: 0.8s;
}

.delay05 {
    animation-delay: 1s;
}

.delay06 {
    animation-delay: 1.2s;
}

.delay07 {
    animation-delay: 1.4s;
}

.delay08 {
    animation-delay: 1.6s;
}

.delay09 {
    animation-delay: 1.8s;
}

.delay10 {
    animation-delay: 2s;
}

.reason_detail {
  max-width: 1350px;
  margin: 0 auto;
}

.reason_detail .section {
  margin-bottom: 100px;
}

.sec_head {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  background: #000;
  padding: 1px 0;
  line-height: 1.2;
}

.sec_head .num {
  font-size: 60px;
  color: #d3bb85;
  padding: 0 20px;
  font-family: "Cardo", serif;
  font-style: italic;
  margin-right: 15px;
}

.sec_head h2 {
  font-size: 30px;
  color: #d3bb85;
  border-bottom: 1px solid #d3bb85;
  padding-bottom: 4px;
}
  
.txt_rec_inner {
	padding: 0 130px;
}

.txt_rec_inner.flow {
	padding: 0 130px;
}

.desc {
	font-size: 23px;
	font-family: 'Noto Serif JP', sans-serif;
	line-height: 2;
	margin-bottom: 30px;
	text-align: left;
}

.desc2 {
  font-size: 26px;
  font-family: 'Noto Serif JP', sans-serif;
  line-height: 2;
  margin-bottom: 20px;
  text-align: left;
}

.voice_wrap {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

img.voice_l {
	width: 700px;
	display: block;
}

img.voice_r {
	margin-top: -80px;
	width: 550px;
	display: block;
	margin-left: auto; /* 右寄せ */
	margin-bottom: -40px;
}

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

/* === 共通 === */
.specialty_icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 640px;
  margin: 60px auto;
}

.icon2_img {
  width: calc((100% - 40px) / 3); /* 3列 */
  height: auto;
  display: block;
}

/* 最後だけ段落ち＋左寄せ */
.last_icon {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.last_icon img {
  width: calc((100% - 40px) / 3);
  height: auto;
}



.section#step1,.section#step2,.section#step3,.section#step4,.section#step5{
	margin-top: 100px;
	margin-bottom: 100px;
}

.section#step5{
	padding-bottom: 100px;
}

.flo_container .txt_rec_inner {
	margin-top: 50px;
}

.flow_wrap {
    display: flex;
    align-items: center;
    width: 740px;
    max-width: 100%;
    height: 380px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
}

.flow_wrap.bg1 {
    background-image: url("../../images/flow_img1.jpg");
    background-position: right center;
    justify-content: flex-start;
}

.flow_wrap.bg2 {
    background-image: url("../../images/flow_img2.jpg");
    background-position: right center;
    justify-content: flex-start;
}

.flow_wrap.bg3 {
    background-image: url("../../images/flow_img3.jpg");
    background-position: right center;
    justify-content: flex-start;
}

.flow_wrap.bg4 {
    background-image: url("../../images/flow_img4.jpg");
    background-position: right center;
    justify-content: flex-start;
}

.flow_wrap.bg5 {
    background-image: url("../../images/flow_img5.jpg");
    background-position: right center;
    justify-content: flex-start;
}

.sp_spacer {
  display: none;
}

.flow_box1 {
    width: 530px;
    max-width: 100%;
    padding: 25px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    text-align: left;
}

.flow_box1 .step {
    color: #e4007f;
    font-family: "Cardo", serif;
    font-style: italic;
    font-size: 60px;
    line-height: 1;
}

.flow_box1 .step em {
    display: block;
    font-size: 36px;
    line-height: 1;
    font-style: normal;
}

.flow_box1 .title {
    font-size: 26px;
    font-weight: 700;
    color: #e4007f;
}

.flow_box1 .txt{
	font-size: 16px;
	font-family: 'Noto Sans JP';
}

.flow_box2 {
    width: 740px;
    max-width: 100%;
    margin: 50px auto 0;
    border: 3px solid #d3bb85;
    padding: 5px;
}

.flow_box2 .inner{
	font-family: 'Noto Sans JP';
	border: 2px solid #c7ab8d;
    padding: 40px 50px;
}

.flow_box2 .title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

.flow_box2 .txt1 {
    font-size: 22px;
    text-align: center;
}

.flow_box2 .list1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.flow_box2 .list1 li {
    background: #d3bb85;
    color: #FFF;
    font-size: 15px;
    margin: 5px 5px;
    padding: 5px 10px;
    border-radius: 3px;
}

.flow_box2 .txt2 {
    font-size: 18px;
    text-align: center;
    margin-top: 30px;
}

.flow_box2 .list2 {
    display: flex;
}

.flow_box2 .list2 + .list2 {
    margin-top: 15px;
}

.flow_box2 .list2 dt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 105px;
    margin-right: 15px;
    background: #d3bb85;
    color: #FFF;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.flow_box2 .list2 dd {
    width: calc(100% - 105px - 15px);
    font-size: 14px;
    line-height: 1.4;
}

/* === GIRLS RECRUIT スマホ用 === */
@media (max-width: 767px) {
.gal_recruit .cd-fixed-bg.cd-bg-1 {
	display: none;
}

.common_rec {
    min-height: 12430px; /* ←テスト用に明示的に高さを指定 */
    margin-top: 27px;
}

.common_wrapper_rec {
	width: 100%;
}

.rec_section{
	width: 100%;
	margin-top: -53px;
}

.gal_sliderArea{
	width: 100vw !important;
    max-width: 100% !important;
    overflow-x: hidden;
	margin-top: -100px;
}

.slider.pc{
	display: none;
}

.slider.sp{
	display: block;
}

.gal_rec_title {
	width: 100% !important;
    max-width: 100% !important;
	margin: -103px auto 10px;
}

.reason#rec1 {
	max-width: 100%;
}

.reason_img01 {
	display: block;
}

.rec_pc_img{
	display: none;
}

.rec_sp_img	{
	display: block;
	margin-top: -20px;
}

.icon_container{
	height: 465px;
}

.reason_icon {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* アイコン間の余白 */
    width: 100%;
    margin: 30px auto;
}

.reason_icon a {
    width: calc(100% / 3 - 14px); /* 横に3個並べる。14pxはgap調整 */
    margin-bottom: 0;
}

.icon_img {
	width: 200px;
	height: auto;
	filter: drop-shadow(2px 2px 2px #aaa);
}

.reason_detail .section {
	margin-bottom: 50px;
}

.sec_head {
	margin-bottom: 30px;
}

.sec_head .num {
	font-size: 50px;
	padding: 0 8px;
}

.sec_head h2 {
	font-size: 17px;
}
  
.txt_rec_inner {
	padding: 0 15px;
}

.txt_rec_inner.flow {
	padding: 0 5px;
}

.desc {
	font-size: 16px;
}

.desc2 {
	font-size: 16px;
}

img.voice_l {
	width: 100%;
}

img.voice_r {
	margin-top: -30px;
	width: 80%;
}

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

.specialty_icon {
    justify-content: space-between;
    gap: 10px;
    width: 90%;
    margin: 40px auto;
}

  .icon2_img {
    width: 48% !important; /* ← ★上書き */
    height: auto;
}

  .last_icon {
    width: 48%;
    display: block;
    margin-left: auto;
}

.last_icon img {
    width: 100% !important;
    height: auto;
}

.section#step1,.section#step2,.section#step4,.section#step5{
	margin-top: 50px;
	margin-bottom: 50px;
}

.section#step3 {
	margin-top: 50px;
	margin-bottom: 160px; /* 下のstep4と離す */
}

.section#step5{
	padding-bottom: 50px;
}

.flo_container .txt_rec_inner {
	margin-top: 50px;
}

.flow_wrap {
	width: 90%;
	padding-top: 85%;
}

.flow_wrap.bg1, .flow_wrap.bg2, .flow_wrap.bg13, .flow_wrap.bg4, .flow_wrap.bg5 { 
	background-position: center top;
}

.flow_wrap.bg3,
.flow_wrap.bg4,
.flow_wrap.bg5 {
	margin-bottom: 180px; /* ← これを追加 */
}

.flow_wrap.bg3 {
	margin-top: -80px; /* 必要に応じて -40px や -20px に調整 */
}

.flow_wrap.bg3::after {
	content: "";
	display: block;
	height: 160px; /* 必要な分だけ余白にする */
}

.flow_wrap.bg3 .flow_box1 {
	margin-top: 190px;
}

.sp_spacer {
	display: block;
	height: 1px;
	margin-top: -50px;
}

.flow_box1 {
    width: 100%;
    padding: 15px;
}

.flow_box1 .txt{
	font-size: 15px;
}

.flow_box2 {
    width: 90%;
    margin: 130px auto 0;
}

.flow_box2.is-first {
    width: 90%;
    margin: 170px auto 0;
}

.flow_box2 .inner{
	padding: 15px 10px;
}

.flow_box2 .title {
    font-size: 18px;
}

.flow_box2 .txt1 {
    font-size: 14px;
    text-align: center;
}

.flow_box2 .list1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.flow_box2 .list1 li {
	width: 80%;
	margin: 2px auto;
	padding: 5px 5px;
	text-align: center;
}

.txt_rec_inner .section {
	padding-top: 50px;
	padding-bottom: 50px;
}

.flow_box2 .txt2 {
    font-size: 15px;
}

.flow_box2 .list2 {
    flex-wrap: wrap;
}

.flow_box2 .list2 dt {
	width: 100%;
	margin-right: 0;
	margin-bottom: 5px;
	padding: 5px;
}

.flow_box2 .list2 dd {
	width: 100%;
    }
}