@charset "UTF-8";
/* CSS Document */
@charset "UTF-8";
/* CSS Document */

/*--------------------------------
採用動画LP 全体設定
--------------------------------*/
.movie_lp {
font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
color: #555555;
background: #ffffff;
line-height: 1.8;
overflow: hidden;
}

.movie_lp * {
box-sizing: border-box;
}

.lp_inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

/*--------------------------------
共通設定
--------------------------------*/
.recruit_mv,
.recruit_problem,
.recruit_case,
.recruit_movie,
.recruit_strength,
.recruit_flow,
.recruit_price,
.recruit_faq,
.recruit_cta {
font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
color: #555555;
box-sizing: border-box;
}

.recruit_mv *,
.recruit_problem *,
.recruit_case *,
.recruit_movie *,
.recruit_strength *,
.recruit_flow *,
.recruit_price *,
.recruit_faq *,
.recruit_cta * {
box-sizing: border-box;
}

.recruit_problem,
.recruit_case,
.recruit_movie,
.recruit_strength,
.recruit_flow,
.recruit_price,
.recruit_faq,
.recruit_cta {
padding: 90px 0;
}

/*--------------------------------
共通見出し
--------------------------------*/
.recruit_problem h2,
.recruit_case h2,
.recruit_movie h2,
.recruit_strength h2,
.recruit_flow h2,
.recruit_price h2,
.recruit_faq h2,
.recruit_cta h2 {
text-align: center;
font-size: 42px;
line-height: 1.4;
color: #A45D74;
margin: 0 0 50px;
font-weight: 900;
}

.movie_lp h2 {
font-size: 38px;
line-height: 1.45;
font-weight: 900;
color: #A45D74;
text-align: center;
margin: 0 0 42px;
}

.movie_lp h3 {
color: #A45D74;
font-weight: 900;
}

.recruit_section_lead {
max-width: 760px;
margin: -25px auto 45px;
text-align: center;
font-size: 17px;
line-height: 1.9;
}

.lead {
max-width: 920px;
margin: -20px auto 45px;
text-align: center;
font-size: 16px;
line-height: 2;
}

/*--------------------------------
黄色・オレンジボタン 共通
--------------------------------*/
.yellow_btn {
display: inline-block;
background: linear-gradient(90deg, #F7B267, #EB8C22);
color: #ffffff;
font-weight: 900;
text-decoration: none;
padding: 14px 34px;
border-radius: 999px;
box-shadow: 0 6px 0 #D66D00;
transition: 0.25s;
}

.yellow_btn:hover {
transform: translateY(3px);
box-shadow: 0 3px 0 #D66D00;
}

/*--------------------------------
ファーストビュー
--------------------------------*/
.hero {
position: relative;
background: linear-gradient(105deg, #ffffff 0%, #ffffff 48%, #FFF1F4 48%, #F9DDE4 100%);
padding: 70px 0 80px;
}

.hero::after {
content: "";
position: absolute;
right: 28%;
top: 0;
width: 70px;
height: 100%;
background: rgba(232, 143, 163, 0.18);
transform: skewX(-18deg);
}

.hero_inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 54px;
}

.hero_text {
width: 58%;
}

.hero_img {
width: 58%;
}

.hero_img img {
width: 100%;
display: block;
margin-top: 20px;
margin-left: 20px;
border-radius: 80px 0 0 80px;
box-shadow: 0 20px 45px rgba(196, 109, 132, 0.18);
}

.catch {
font-size: 20px;
font-weight: 900;
color: #C46D84;
margin: 0 0 14px;
}

.hero h1 {
font-size: 40px;
line-height: 1.28;
color: #C46D84;
font-weight: 900;
margin: 0 0 12px;
letter-spacing: -0.03em;
}

.hero h2 {
font-size: 23px;
text-align: left;
color: #7A4B5B;
margin: 0 0 30px;
}

.sns_list {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}

.sns_list span {
background: #FFF7F9;
border: 1px solid #F4D2DB;
padding: 10px 18px 6px 15px;
border-radius: 999px;
font-weight: 900;
color: #7A4B5B;
box-shadow: 0 8px 22px rgba(196, 109, 132, 0.12);

	width: 30%;
}

.hero_desc {
font-weight: 700;
color: #555555;
margin: 0;
}

/*--------------------------------
お悩み部分
--------------------------------*/
.problem {
background: linear-gradient(180deg, #FFF9FA 0%, #FFF1F4 100%);
padding: 76px 0;
}

.problem_inner {
display: grid;
grid-template-columns: 1.15fr 0.8fr 1fr;
gap: 32px;
align-items: center;
}

.problem_left h2 {
text-align: left;
font-size: 28px;
margin-bottom: 26px;
color: #A45D74;
}

.problem_left ul {
list-style: none;
padding: 0;
margin: 0;
}

.problem_left li {
position: relative;
padding: 10px 0 10px 36px;
font-weight: 800;
color: #555555;
}

.problem_left li::before {
content: "✓";
position: absolute;
left: 0;
top: 11px;
width: 22px;
height: 22px;
background: #E88FA3;
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 22px;
font-size: 13px;
}

.problem_illust img {
width: 100%;
display: block;
}

.problem_box {
background: linear-gradient(135deg, #E88FA3, #C46D84);
color: #ffffff;
padding: 42px 36px;
border-radius: 18px;
font-size: 29px;
line-height: 1.65;
font-weight: 900;
box-shadow: 0 18px 35px rgba(196, 109, 132, 0.22);
text-align: center;
}

.problem_box span {
color: #FFD37D;
}

/*--------------------------------
効果・理由部分
--------------------------------*/
.reason {
background: #ffffff;
padding: 76px 0;
}

.reason_icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 26px;
max-width: 980px;
margin: 0 auto;
}

.reason_icons div {
aspect-ratio: 1 / 1;
background: #FFF5F7;
border-radius: 50%;
color: #A45D74;
font-weight: 900;
text-align: center;
/*display: flex;
align-items: center;
justify-content: center;*/
padding: 18px;
box-shadow: inset 0 0 0 1px rgba(232, 143, 163, 0.16);
}
.reason_icons img {
	width:50%;
	text-align: center;
		display: block;
	padding-top: 10px;
	
margin-left:auto;
margin-right:auto;}
.reason_icons_text {
	text-align: center;
	display: block;
	
float: none;}

/*--------------------------------
制作事例部分
--------------------------------*/
.case {
background: #FFF1F4;
padding: 82px 0;
}

.case_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

.case_card {
position: relative;
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(196, 109, 132, 0.12);
}

.case_card img {
width: 100%;
height: 180px;
display: block;
object-fit: cover;
}

.case_card span {
display: inline-block;
background: #E88FA3;
color: #ffffff;
font-size: 13px;
font-weight: 900;
padding: 5px 14px;
border-radius: 999px;
margin: 18px 20px 8px;
}

.case_card span.eryo {
background: #E88FA3;
}
.case_card span.butu{
background:#926BA5;
}

.case_card span.orange {
background: #F08E5E;
}

.case_card span.office {
background: #B07C8E;
}

.case_card h3 {
font-size: 18px;
margin: 0;
padding: 0 20px 8px;
color: #A45D74;
}

.case_card_text {
font-size: 14px;
line-height: 1.8;
margin: 0;
padding: 0 20px 24px;
color: #555555;
}

/*--------------------------------
動画実績部分
--------------------------------*/
.recruit_container {
max-width: 1200px;
margin: 0 auto;
padding: 20px 20px;
}

.recruit_movie {
background: #FFF7F9;
}

.movie_wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.movie_card {
background: #ffffff;
border-radius: 24px;
padding: 24px;
box-shadow: 0 12px 35px rgba(196, 109, 132, 0.12);
}

.movie_iframe {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 18px;
overflow: hidden;
background: #F9DDE4;
}

.movie_iframe iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}

.movie_card h3 {
color: #A45D74;
font-size: 22px;
margin: 22px 0 8px;
}

.movie_card p {
margin: 0;
line-height: 1.8;
color: #555555;
}

/*--------------------------------
スプリングブレスの強み部分
--------------------------------*/
.strength {
background: #FFF5F7;
padding: 80px 0 82px;
border-bottom: thin solid #E88FA3;
}

.strength_box {
background: #ffffff;
border-radius: 22px;
padding: 54px 48px;
box-shadow: 0 12px 35px rgba(196, 109, 132, 0.1);
}

.strength_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 42px;
}

.strength_item {
position: relative;
padding-left: 86px;
}
.strength_item img {
	width:80%;
	}
.circle {
position: absolute;
left: 0;
top: 4px;
width: 62px;
height: 62px;
background: #E88FA3;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
box-shadow: 0 0 0 8px #FFF1F4;
}

.strength_item h3 {
font-size: 18px;
line-height: 1.6;
margin: 0 0 12px;
color: #A45D74;
}

.strength_item p {
font-size: 14px;
line-height: 1.9;
margin: 0;
color: #555555;
}

/*--------------------------------
制作の流れ部分
--------------------------------*/
.flow {
padding: 82px 0 90px;
background-color: #FFF8FA;
}

.flow_grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}

.flow_item {
text-align: center;
position: relative;
}

.flow_item span {
display: block;
color: #C46D84;
font-size: 13px;
font-weight: 900;
margin-bottom: 12px;
}

.flow_icon {
width: 86px;
height: 86px;
margin: 0 auto 18px;
background: linear-gradient(135deg, #E88FA3, #C46D84);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
box-shadow: 0 8px 22px rgba(196, 109, 132, 0.2);
	font-size: 50px;
}

.flow_item h3 {
font-size: 18px;
margin: 0 0 10px;
color: #A45D74;
}
.flow_item img {
	width: 60%;
}
.flow_item p {
font-size: 14px;
line-height: 1.8;
margin: 0;
color: #555555;
}

/*--------------------------------
料金表部分
--------------------------------*/
.recruit_price {
background: #ffffff;
}

.price_wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
align-items: stretch;
}

.price_card {
position: relative;
background: #ffffff;
border: 2px solid #F4D2DB;
border-radius: 26px;
padding: 38px 30px;
box-shadow: 0 12px 35px rgba(196, 109, 132, 0.1);
}

.price_recommend {
border: 3px solid #E88FA3;
transform: translateY(-10px);
}

.recommend_label {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
background: #F7A64A;
color: #ffffff;
font-weight: 900;
padding: 6px 24px;
border-radius: 999px;
margin: 0;
}

.price_card h3 {
text-align: center;
color: #A45D74;
font-size: 26px;
margin: 0 0 10px;
}

.price_name {
text-align: center;
font-weight: 800;
min-height: 56px;
margin: 0 0 18px;
color: #555555;
}

.price_amount {
text-align: center;
color: #C46D84;
font-size: 34px;
font-weight: 900;
margin: 0 0 24px;
}

.price_card ul {
margin: 0;
padding: 0;
list-style: none;
}

.price_card li {
position: relative;
padding: 10px 0 10px 30px;
border-top: 1px solid #F4D2DB;
color: #555555;
}

.price_card li::before {
content: "✓";
position: absolute;
left: 0;
color: #E88FA3;
font-weight: 900;
}

.price_note {
text-align: center;
margin: 30px 0 0;
font-size: 14px;
color: #555555;
}

/*--------------------------------
FAQ部分
--------------------------------*/
.recruit_faq {
background: #FFF7F9;
}

.faq_wrap {
max-width: 900px;
margin: 0 auto;
}

.faq_item {
background: #ffffff;
border-radius: 18px;
padding: 26px 30px;
margin-bottom: 18px;
box-shadow: 0 8px 24px rgba(196, 109, 132, 0.1);
}

.faq_item h3 {
color: #A45D74;
font-size: 19px;
line-height: 1.6;
margin: 0 0 10px;
}

.faq_item p {
margin: 0;
line-height: 1.8;
color: #555555;
}

/*--------------------------------
CTA お問い合わせ部分
--------------------------------*/
.cta {
position: relative;
background: linear-gradient(rgba(196, 109, 132, 0.82), rgba(164, 93, 116, 0.82)),
url(../images/footer_img.png);
background-size: cover;
background-position: center;
padding: 86px 0;
text-align: center;
color: #ffffff;
}

.cta h2 {
color: #ffffff;
font-size: 38px;
margin-bottom: 18px;
}

.cta p {
font-size: 17px;
font-weight: 700;
line-height: 2;
margin-bottom: 18px;
color: #ffffff;
}

/*--------------------------------
レスポンシブ 1000px以下
--------------------------------*/
@media screen and (max-width: 1000px) {
.hero_inner {
gap: 34px;
}

.hero h1 {
font-size: 42px;
}

.problem_inner {
grid-template-columns: 1fr 0.8fr;
}

.problem_box {
grid-column: 1 / 3;
}

.case_grid {
grid-template-columns: repeat(2, 1fr);
}

.movie_wrap {
grid-template-columns: 1fr;
}

.strength_grid {
grid-template-columns: 1fr;
	padding-top: 30px;
	padding-bottom: 30px;
}

.flow_grid {
grid-template-columns: repeat(3, 1fr);
}

.price_wrap {
grid-template-columns: repeat(2, 1fr);
}

.price_recommend {
transform: none;
}

.footer_inner {
grid-template-columns: repeat(2, 1fr);
}

.footer_contact {
text-align: left;
}
}

/*--------------------------------
レスポンシブ 768px以下
--------------------------------*/
@media screen and (max-width: 768px) {
.hero {
background: linear-gradient(180deg, #ffffff 0%, #FFF1F4 100%);
padding: 54px 0 62px;
}

.hero::after {
display: none;
}

.hero_inner {
display: block;
}

.hero_text,
.hero_img {
width: 100%;
}

.hero h1 {
font-size: 34px;
}

.hero h2 {
font-size: 20px;
}

.catch {
font-size: 17px;
}

.hero_img {
margin-top: 34px;
}

.hero_img img {
margin-left: 0;
border-radius: 24px;
}

.problem,
.reason,
.case,
.recruit_movie,
.strength,
.flow,
.recruit_price,
.recruit_faq,
.cta {
padding: 62px 0;
}

.problem_inner {
display: block;
}

.problem_left h2 {
text-align: center;
font-size: 28px;
}

.problem_illust {
max-width: 260px;
margin: 28px auto;
}

.problem_box {
font-size: 24px;
padding: 32px 26px;
}

.movie_lp h2,
.recruit_problem h2,
.recruit_case h2,
.recruit_movie h2,
.recruit_strength h2,
.recruit_flow h2,
.recruit_price h2,
.recruit_faq h2,
.recruit_cta h2 {
font-size: 28px;
}

.lead {
margin: -18px auto 34px;
text-align: left;
}

.reason_icons {

grid-template-columns: 1fr;
gap: 14px;
}

.reason_icons div {
aspect-ratio: auto;
border-radius: 18px;
min-height: 76px;
}

.case_grid {
grid-template-columns: 1fr;
}

.case_card img {
height: 220px;
}

.strength {
padding: 62px 0;
}

.strength_box {
padding: 42px 24px;
}

.strength_item {
padding-left: 0;
text-align: center;
}

.circle {
position: static;
margin: 0 auto 20px;
}

.flow_grid {
grid-template-columns: 1fr;
gap: 24px;
}

.price_wrap {
grid-template-columns: 1fr;
}

.price_name {
min-height: auto;
}

.cta h2 {
font-size: 28px;
}

.yellow_btn,
.footer_btn {
width: 100%;
text-align: center;
}

.footer_inner {
grid-template-columns: 1fr;
}

.footer_contact {
text-align: left;
}
}

/*--------------------------------
レスポンシブ 480px以下
--------------------------------*/
@media screen and (max-width: 480px) {
.lp_inner {
padding: 0 16px;
}

.hero h1 {
font-size: 30px;
}

.hero h2 {
font-size: 18px;
}

.sns_list span {
font-size: 13px;
padding: 7px 13px;
width: auto;
	
}

.problem_left li {
font-size: 14px;
}

.case_card h3 {
font-size: 17px;
}

.price_amount {
font-size: 29px;
}

.cta p {
font-size: 15px;
}
}