@charset "utf-8";

/* base
-------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
	display: block;
}
html {
	line-height: 1;
}
ul, ol {
	list-style-type: none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {
	border: none;
}
img {
	vertical-align: bottom;
	border: none;
	max-width: 100%;
	height: auto;
}
img[src*=".svg"] {
	width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
*,
:before,
:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
	border: none;
	border-radius: 0;
	outline: none;
}
textarea {
	resize: vertical;
}
input[type='checkbox'],
input[type='radio'] {
	display: none;
}
input[type='submit'],
input[type='button'],
label,
button,
select {
	cursor: pointer;
}
select::-ms-expand {
	display: none;
}

/* --------------------------------------------------------
	フォントと背景
-------------------------------------------------------- */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	font-family: YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", "HiraKakuPro-W3", "メイリオ", Meiryo, Verdana, sans-serif;
	color: #000;
	font-size: 1.6em;
	font-weight: 500;
	background: #fff;
	letter-spacing: 0;
	line-height: 1.6;
}

/* フォント */
.ff_yakuHan { font-family: YakuHanMP, sans-serif; }
.bold { font-weight: 700; }
.heavy { font-weight: 900; }
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }

/* 文字色 */
/* 文字サイズ */
.u-fz18 { font-size: 1.8rem; }
@media screen and (max-width: 768px) {
	.u-fz16_sp { font-size: 1.6rem; }
}
/* マーカー */
/* 背景 */

@media screen and (max-width: 768px) {
	body { font-size: 1.4em; }
}


/* --------------------------------------------------------
	リンク
-------------------------------------------------------- */
a {
	color: inherit;
	transition: .5s;
}
a:hover { opacity: 0.5; }
::-moz-selection {
	color: #fff;
	background: #34383b;
}
::selection {
	color: #fff;
	background: #34383b;
}
/* テキストリンク
-------------------------------------------------------- */
a.underline,
.article_content a { text-decoration: underline; }
a.underline:hover,
.article_content a:hover {
	text-decoration: none;
	opacity: 1;
}

/* アンカーリンク
-------------------------------------------------------- */
.anchor {
	margin-top: -90px;
	padding-top: 90px;
}
@media screen and (max-width: 1024px) {
.anchor {
	margin-top: -200px;
	padding-top: 200px;
}
}
@media screen and (max-width: 768px) {
.anchor {
	margin-top: -68px;
	padding-top: 68px;
}
}



/* --------------------------------------------------------
	共通
-------------------------------------------------------- */
.inner {
	max-width: 1400px;
	width: 96%;
	margin: auto;
}
.inner.mw1245 { max-width: 1245px; }
.inner.mw1400 { max-width: 1400px; }

@media screen and (max-width: 768px) {
.inner.is_wide { width: 100%; }
}

/* iframe */
.iframe { position: relative; }
.iframe.youtube { padding-top: 56.25%; }
.iframe iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/* flex */
.flex {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}
.nowrap { flex-wrap: nowrap; }
.fd_c {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}
.fd_rr {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	flex-direction: row-reverse;
}
.ai_fs {
	-webkit-box-align: start;
	align-items: flex-start;
}
.ai_fe {
	-webkit-box-align: end;
	align-items: flex-end;
}
.ai_c {
	-webkit-box-align: center;
	align-items: center;
}
.jc_fs {
	-webkit-box-pack: start;
	justify-content: flex-start;
}
.jc_fe {
	-webkit-box-pack: end;
	justify-content: flex-end;
}
.jc_c {
	-webkit-box-pack: center;
	justify-content: center;
}
.jc_sb {
	-webkit-box-pack: justify;
	justify-content: space-between;
}
.jc_sa {
	justify-content: space-around;
}
.order1 {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.order2 {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}

/* --------------------------------------------------------
	アニメーション
-------------------------------------------------------- */
.trigger {
	opacity: 0;
}
/* 下から上へ */
.animation.animation01 {
	animation: fadeup .8s ease forwards;
}
/* 左から右へ */
.animation.animation02 {
	animation: faderight .8s ease forwards;
}
/* 右から左へ */
.animation.animation03 {
	animation: fadeleft .8s ease forwards;
}

@keyframes fadeup{
	from {
		opacity: 0;
		transform: translateY(2em);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes faderight{
	from {
		opacity: 0;
		transform: translateX(-2em);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeleft{
	from {
		opacity: 0;
		transform: translateX(2em);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* --------------------------------------------------------
	title
-------------------------------------------------------- */
.c-en_title,
.c-en_title_flex {
	font-weight: 700;
	margin: 0 0 24px;
}
.c-en_title .en,
.c-en_title_flex .en {
	font-size: 4.2rem;
}
.c-en_title .ja,
.c-en_title_flex .ja {
	font-size: 2.4rem;
	margin: 2px 0 0;
}
.c-en_title .ja span,
.c-en_title_flex .ja span {
	display: inline-block;
	padding: 0 0 0 24px;
	position: relative;
}
.c-en_title .ja span::before {
	content: "";
	width: 1px;
	height: 40px;
	background: #000;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(45deg);
}
.c-en_title_flex .ja span::before {
    content: "";
    width: 1px;
    height: 40px;
    background: #000;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(45deg);
}
.c-en_title.is-wh {
	color: #fff;
}
.c-en_title.is-wh .ja span::before {
	background: #fff;
}
@media screen and (max-width: 768px) {
.c-en_title .en,
.c-en_title_flex .en {
	font-size: 3.1rem;
}
.c-en_title .ja,
.c-en_title_flex .ja {
	font-size: 1.8rem;
}
.c-en_title .ja span,
.c-en_title_flex .ja span {
	padding: 0 0 0 16px;
}
.c-en_title .ja span::before,
.c-en_title_flex .ja span::before {
	height: 30px;
}
}
@media screen and (max-width: 480px) {
}

/* --------------------------------------------------------
	btn
-------------------------------------------------------- */
.c-btn01 {
	font-size: 2.8rem;
	font-weight: 700;
	border: solid 1px #313131;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 24px 18px;
	position: relative;
}
.c-btn01::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 18px 18px;
	border-color: transparent transparent #0e1312 transparent;
	position: absolute;
	right: 4px;
	bottom: 4px;
}
.c-btn01 > span { position: relative; }
.c-btn01.is-icon > span { padding-left: 64px; }
.c-btn01.is-icon > span::before {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.c-btn01 > span span { font-size: 2rem; }
.c-btn01.is-vw { font-size: min(2.3333vw, 2.8rem); }
.c-btn01.is-vw > span { padding-left: min(5.3333vw, 64px); }
@media screen and (max-width: 768px) {
.c-btn01,
.c-btn01.is-vw { font-size: 1.8rem; }
.c-btn01::before {
	border-width: 0 0 9px 9px;
	right: 2px;
	bottom: 2px;
}
.c-btn01.is-icon > span,
.c-btn01.is-vw > span {
	padding-left: 0;
	position: static;
}
.c-btn01.is-icon > span::before {
	left: 2%;
}
}
@media screen and (max-width: 480px) {
.c-btn01,
.c-btn01.is-vw { font-size: 4.8vw; }
}


/* --------------------------------------------------------
	リスト
-------------------------------------------------------- */

/* --------------------------------------------------------
	テーブル
-------------------------------------------------------- */
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}

/* --------------------------------------------------------
	余白
-------------------------------------------------------- */

.mb40 {
	margin-bottom: 4rem;
}
.mb54 {
	margin-bottom: 5.4rem;
}
.mb60 {
	margin-bottom: 6rem;
}

/* --------------------------------------------------------
	PC SP
-------------------------------------------------------- */
.is-sp { display: none; }
@media screen and (max-width: 768px) {
	.is-pc { display: none; }
	.is-sp { display: block; }
}


/* --------------------------------------------------------
	ロゴ
-------------------------------------------------------- */
.c-logo a {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}
.c-logo a span { transition: .5s; }
.c-logo_summary {
	font-size: 1.5rem;
}
.c-logo_company {
	font-weight: 700;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin: 2px 0 0;
}
.c-logo_company .c-logo_corp {
	font-size: 2rem;
	line-height: 1.3;
	margin: 0 8px 0 0;
}
.c-logo_company .c-logo_name {
	font-size: 4.6rem;
}
.c-logo.is-wh a { color: #fff; }


/* --------------------------------------------------------
	header
-------------------------------------------------------- */
header {
	width: 100%;
	height: 100px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	padding: 12px 20px;
	position: fixed;
	top: 0;
	left: 0;
	transition: .5s;
	z-index: 50;
}
header::after {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: -100%;
	left: 0;
	transition: .5s;
	z-index: 0;
}
header > div:not(.drawer),
header > nav {
	position: relative;
	z-index: 1;
}

header > h1.hdr_logo {
    position: relative;
    z-index: 100 !important;
}
.gnav.pc {
	transition: .5s;
}
.hdr_logo .c-logo_company {
	line-height: 1.2;
	margin: 4px 0 0;
}
.gnav.pc {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	flex: 1 1 auto;
}
.gnav.pc ul {
	display: -webkit-box;
	display: flex;
}
.gnav.pc ul li:not(:last-child) {
	margin: 0 min(4.5714vw, 64px) 0 0;
}
.gnav.pc ul li a {
	color: #fff;
}
.hdr_btns {
	max-width: 360px;
	width: 30%;
	display: -webkit-box;
	display: flex;
	margin: 0 0 0 min(2.8571vw, 40px);
}
.hdr_btns .hdr_btn {
	color: #fff;
	width: 50%;
	text-align: center;
	padding: 12px;
}
.hdr_btns .hdr_btn_recruit {
	background: #e76500;
}
.hdr_btns .hdr_btn_contact,
.hamb {
	background: #000;
}
.hdr_links,
.hamb {
	display: none;
	margin: 0 0 0 2px;
}
.drawer {
	width: 100%;
	min-height: 100vh;
	height: 100%;
	overflow: auto;
	background: rgba(0, 0, 0, .8);
	padding: 0 0 64px;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	transition: .5s;
	z-index: 5;
}
.drawer_head {
	height: 60px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: end;
	justify-content: flex-end;
	padding: 0 min(2.1333vw, 8px);
}
.drawer_head .hamb {
	border: solid 1px #fff;
}
.drawer_head .hamb_icon span:nth-child(1),
.drawer_head .hamb_icon span:nth-child(3) {
	top: 7px;
}
.drawer_head .hamb_icon span:nth-child(1) { transform: rotate(45deg); }
.drawer_head .hamb_icon span:nth-child(2) { transform: scaleX(0); }
.drawer_head .hamb_icon span:nth-child(3) { transform: rotate(-45deg); }
.drawer_body {
	max-width: 710px;
	width: 96%;
	margin: auto;
}
.gnav.sp ul li a {
	color: #fff;
	display: block;
	text-align: center;
}
.gnav.sp > ul > li {
	border-bottom: solid 1px #fff;
}
.gnav.sp > ul > li > a {
	font-size: 1.8rem;
	font-weight: 700;
	padding: 16px 0;
}
.gnav.sp .child {
	margin: 0 0 16px;
}
.gnav.sp .child li:not(:last-child) {
	margin: 0 0 8px;
}
.gnav.sp .child li a {
	font-size: 1.5rem;
}
.gnav.sp .child li a::before {
	content: "\03e";
	margin: 0 8px 0 0;
}
.drawer_btns {
	margin: 16px 0 0;
}
.drawer_btns .drawer_btn:not(:last-child) {
	margin: 0 0 4px;
}
.drawer_btn {
	font-size: 1.8rem;
	font-weight: 700;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 16px;
	position: relative;
}
.drawer_btn::before {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 4%;
	transform: translateY(-50%);
}
.drawer_btn_recruit {
	color: #fff;
	background: #e76500;
}
.drawer_btn_recruit::before {
	width: min(5.6vw, 21px);
	height: min(5.2vw, 19.5px);
	background-image: url("../img/cmn/icon_recruit_wh.svg");
}
.drawer_btn_contact {
	background: #fff;
}
.drawer_btn_contact::before {
	width: min(4.5333vw, 17px);
	height: min(3.2vw, 12px);
	background-image: url("../img/cmn/icon_mail_bk.svg");
}
.drawer_btn_tel {
	color: #fff;
	background: #000;
	border: solid 1px #fff;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}
.drawer_btn_tel::before {
	width: min(4.6666vw, 17.5px);
	height: min(5.0666vw, 19px);
	background-image: url("../img/cmn/icon_tel_wh.svg");
}
.drawer_btn_tel .num {
	font-size: 2.4rem;
}
.drawer_btn_tel .hours {
	font-size: 1.5rem;
	margin: -3px 0 0;
}

/* スクロール時 */
.is_scroll header::after { top: 0; }
.is_scroll .hdr_logo.is-wh a,
.is_scroll .gnav.pc ul li a { color: #000; }
@media screen and (min-width: 1025px) {
.is_scroll header { height: 70px; }
.is_scroll .hdr_logo .c-logo_summary { font-size: 1rem; }
.is_scroll .hdr_logo .c-logo_company { margin: 2px 0 0; }
.is_scroll .hdr_logo .c-logo_company .c-logo_corp { font-size: 1.3rem; }
.is_scroll .hdr_logo .c-logo_company .c-logo_name { font-size: 3.4rem; }
}
@media screen and (max-width: 1024px) {
header {
	height: 60px;
	padding: 0 min(2.1333vw, 8px);
}
.gnav.pc { display: none; }
.hdr_logo .c-logo_summary {
	font-size: .8rem;
}
.hdr_logo .c-logo_company .c-logo_corp {
	font-size: 1rem;
	margin: 0 min(2.1333vw, 8px) 0 0;
}
.hdr_logo .c-logo_company .c-logo_name {
	font-size: 2.3rem;
}
.hdr_links {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	flex: 1 1 auto;
	margin: 0 min(2.9333vw, 11px) 0 0;
}
.hdr_link::before {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	transform: .5s;
}
.hdr_link_tel { margin: 0 min(3.7333vw, 14px) 0 0; }
.hdr_link_tel::before {
	width: min(4.1333vw, 15.5px);
	height: min(4.5333vw, 17px);
	background-image: url("../img/cmn/icon_tel_wh.svg");
}
.hdr_link_mail::before {
	width: min(5.6vw, 21px);
	height: min(4vw, 15px);
	background-image: url("../img/cmn/icon_mail_wh.svg");
}
.hdr_btns {
	max-width: inherit;
	width: auto;
	margin: 0;
}
.hdr_btns .hdr_btn,
.hamb {
	width: 40px;
	height: 40px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	cursor: pointer;
}
.hdr_btns .hdr_btn {
	font-size: 1.1rem;
	line-height: 1.2;
	padding: 0;
}
.hdr_btns .hdr_btn .is-sp { display: block; }
.hdr_btns .hdr_btn_contact { display: none; }
.hamb_icon {
	width: 20px;
	height: 15px;
	position: relative;
}
.hamb_icon span {
	width: 100%;
	height: 1px;
	background: #fff;
	display: block;
	position: absolute;
	left: 0;
}
.hamb_icon span:nth-child(1) {
	top: 0;
}
.hamb_icon span:nth-child(2) {
	top: 50%;
}
.hamb_icon span:nth-child(3) {
	top: 100%;
}

/* ハンバーガー開閉時 */
.is_hamb_open { overflow: hidden; }
.is_hamb_open header::after { top: 0; }
.is_hamb_open .hdr_logo.is-wh a { color: #000; }
.is_hamb_open .hdr_link_tel::before { background-image: url("../img/cmn/icon_tel_bk.svg"); }
.is_hamb_open .hdr_link_mail::before { background-image: url("../img/cmn/icon_mail_bk.svg"); }
.is_hamb_open .drawer {
	opacity: 1;
	visibility: inherit;
}

/* スクロール時 */
.is_scroll .hdr_link_tel::before { background-image: url("../img/cmn/icon_tel_bk.svg"); }
.is_scroll .hdr_link_mail::before { background-image: url("../img/cmn/icon_mail_bk.svg"); }

}

/* --------------------------------------------------------
	footer
-------------------------------------------------------- */
footer {
	color: #fff;
	background: #34383b;
	padding: 96px 0 16px;
	position: relative;
}
.page_top {
	display: inline-block;
	max-width: 54px;
	width: 100%;
	position: absolute;
	right: 1.875%;
	bottom: 7.6923%;
}
.ftr_main {
	margin: 0 0 64px;
}
.ftr_address {
	margin: 8px 0 0;
}
.ftr_certification_text {
	font-size: 1.8rem;
}
.ftr_certification_link {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	margin: 16px 0 0;
}
#copyright {
	color: #959595;
	text-align: center;
}
@media screen and (max-width: 1024px) {
.ftr_main > div { width: 100%; }
.ftr_certification {
	margin: 24px 0 0;
}
.ftr_certification_link {
	-webkit-box-pack: start;
	justify-content: flex-start;
}
}
@media screen and (max-width: 768px) {
footer {
	padding: 48px 0 16px;
}
.page_top {
	max-width: min(7.4666vw, 28px);
	right: 4%;
	bottom: 5.291%;
}
.ftr_logo .c-logo_summary {
	font-size: 1.2rem;
}
.ftr_logo .c-logo_company .c-logo_corp,
.ftr_address {
	font-size: 1.3rem;
}
.ftr_logo .c-logo_company .c-logo_name {
	font-size: 2.9rem;
}
.ftr_certification_text {
	font-size: 1.5rem;
}
.ftr_certification_link {
	max-width: 180px;
	margin: 8px 0 0;
}
}


/* --------------------------------------------------------
	トップページ
-------------------------------------------------------- */
/* メインビジュアル
-------------------------------------------------------- */
.mv_slider {
	min-width: 0;
	flex-grow: 1;
	position: relative;
}
.mv_title {
	color: #fff;
	position: absolute;
	bottom: 7%;
	left: 3.3125%;
	z-index: 5;
}
.mv_title .ja {
	font-size: min(10vw, 14rem);
	font-weight: 700;
	line-height: 1.3571;
}
.mv_title .en {
	font-size: min(2.8571vw, 4rem);
	margin: min(.7142vw, 10px) 0 0;
}
.mv_summary {
	font-size: clamp(13px, calc(1.5vh + 4px), 18px);
	background: #f1f1f1;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 100px 10px 20px;
}
.mv_summary::before {
	content: "";
	width: clamp(36px, calc(1 * 1vh + 30px), 40px);
	height: clamp(36px, calc(1 * 1vh + 30px), 40px);
	background: url("../img/top/mv_icon.svg") no-repeat;
	background-size: contain;
	margin: 0 0 clamp(12px, calc(1 * 1vh + 6px), 16px);
}
.swiper.mv_list .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mv_slider .swiper-controller {
	position: absolute;
	top: 50%;
	right: 1.5%;
	transform: translateY(-50%);
	z-index: 10;
}
.mv_slider .swiper-pagination {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	position: static;
}
.mv_slider .swiper-pagination .swiper-pagination-bullet {
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: transparent;
	position: relative;
	opacity: 1;
}
.mv_slider .swiper-pagination .swiper-pagination-bullet::before{
	content: "";
	display: block;
	width: 25%;
	height: 25%;
	margin: auto;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mv_slider .swiper-pagination .swiper-pagination-bullet .ring-path {
	opacity: 0;
	stroke-dasharray: 94; /* 円周 */
	stroke-dashoffset: 94; /* 初期は全て隠す */
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}
.mv_slider .swiper-pagination .swiper-pagination-bullet-active .ring-path {
	opacity: 1;
	animation: ring-draw 4s linear forwards;
}
@keyframes ring-draw {
	to {
		stroke-dashoffset: 0; /* 最後は全体が描かれる */
	}
}
@keyframes ring-stop {
	to {
		stroke-dashoffset: 94; /* 最後は全体が描かれる */
	}
}
@media screen and (min-width: 769px) {
#mv,
.swiper.mv_list,
.mv_summary {
	min-height: 600px;
	height: 100vh;
}
#mv {
	padding: 0 60px 0 0;
}
.mv_summary {
	width: 60px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	top: 0;
	right: 0;
}
}
@media screen and (max-width: 768px) {
#mv {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}
.mv_slider {
	flex: 1 1 auto;
}
.mv_title {
	bottom: 7%;
	left: 3.3125%;
}
.mv_title .ja {
	font-size: min(10.6666vw, 4rem);
	font-weight: 700;
	line-height: 1.3571;
}
.mv_title .en {
	font-size: min(4.6666vw, 1.75rem);
	margin: min(2.6666vw, 10px) 0 0;
}
.mv_summary {
	font-size: 1.4rem;
	padding: min(4.2666vw, 16px) 2%;
}
.mv_summary::before {
	width:  min(9.3333vw, 35px);
	height: 35px;
	margin: 0 10px 0 0;
}
.swiper.mv_list {
	height: 100%;
}
}
@media screen and (max-width: 480px) {
.mv_summary {
	font-size: 3.7333vw;
}
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}
.swiper.mv_list .swiper-slide-active img,
.swiper.mv_list .swiper-slide-duplicate-active img,
.swiper.mv_list .swiper-slide-prev img {
	animation: zoomUp 7s linear 0s normal both;
}


/* 事業内容
-------------------------------------------------------- */
.top_service_head {
	padding: 88px 0;
}
.top_service_head_title,
.top_service_head_text { text-align: center; }
.top_service_head_title {
	font-size: 4.8rem;
	font-weight: 700;
	margin: 0 0 10px;
}
.top_service_head_text {
	font-size: 1.8rem;
	line-height: 2.1;
}
@media screen and (max-width: 1024px) {
.top_service_head {
	padding: 64px 0;
}
.top_service_head_title { font-size: 2.4rem; }
.top_service_head_text { font-size: 1.4rem; }
}
@media screen and (max-width: 768px) {
.top_service_head_text { text-align: left; }
}
@media screen and (max-width: 480px) {
.top_service_head_title { font-size: 6.4vw; }
}



.top_service_content {
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	text-align: center;
}
.top_service_content_title {
	font-weight: 700;
	margin: 8px 0;
}
.top_service_content_text {
	line-height: 2.25;
}
.top_service_list .grid01 { background-image: url("../img/top/service01.jpg"); }
.top_service_list .grid02 { background-image: url("../img/top/service02.jpg"); }
.top_service_list .grid03 .c-btn01.is-icon > span::before {
	width: min(3vw, 36px);
	height: min(3.25vw, 39px);
	background-image: url("../img/cmn/icon_service_bk01.svg");
}
.top_service_list .grid04 .c-btn01.is-icon:nth-child(1) {
	border-bottom: none;
}
.top_service_list .grid04 .c-btn01.is-icon:nth-child(1) > span::before {
	width: min(3.0833vw, 37px);
	height: min(3vw, 36px);
	background-image: url("../img/cmn/icon_service_bk02.svg");
}
.top_service_list .grid04 .c-btn01.is-icon:nth-child(2) > span::before {
	width: min(2.8333vw, 34px);
	height: min(2vw, 24px);
	background-image: url("../img/cmn/icon_mail_bk.svg");
}
@media screen and (min-width: 769px) {
.top_service_list {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: repeat(2, 1fr);
	grid-template-columns: repeat(2, 1fr);
}
.top_service_list .grid01 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
}

.top_service_list .grid02 {
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-column: 2 / 3;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
}
.top_service_list .grid03 {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2 / 3;
}
.top_service_list .grid04 {
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-column: 2 / 3;
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2 / 3;
}
.top_service_content {
	padding: min(14.8333vw, 178px) 0;
}
.top_service_content_sub {
	font-size: min(1.6666vw, 2rem);
}
.top_service_content_title {
	font-size: min(4vw, 4.8rem);
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	flex: 1 1 auto;
}
.top_service_content_text {
	font-size: min(1.3333vw, 1.6rem);
}
.top_service_list .grid03 .c-btn01.is-icon {
	height: 100%;
	border-right: none;
}
}
@media screen and (max-width: 768px) {
.top_service_content {
	padding: 90px 0;
}
.top_service_list .grid01 {
	background-image: url("../img/top/service01_sp.jpg");
	background-position: top center;
}
.top_service_list .grid02 { background-image: url("../img/top/service02_sp.jpg"); }
.top_service_content_sub {
	font-size: 1.8rem;
}
.top_service_content_title {
	font-size: 2.4rem;
}
.top_service_list .grid03 .c-btn01.is-icon > span::before {
	width: min(5.6vw, 21px);
	height: min(5.7333vw, 21.5px);
}
.top_service_list .grid04 .c-btn01.is-icon:nth-child(1) > span::before {
	width: min(4.9333vw, 18.5px);
	height: min(4.8vw, 18px);
}
.top_service_list .grid04 .c-btn01.is-icon:nth-child(2) > span::before {
	width: min(4.5333vw, 17px);
	height: min(3.2vw, 12px);
}
}
@media screen and (max-width: 480px) {
.top_service_content {
	padding: 24vw 0;
}
.top_service_content_sub,
.top_service_list .c-btn01 {
	font-size: 4.8vw;
}
.top_service_content_title {
	font-size: 6.4vw;
}
.top_service_content_text {
	font-size: 3.7333vw;
}
}


/* 採用情報
-------------------------------------------------------- */
.top_recruit_content {
	background: #eee;
	padding: 96px 0;
}
.top_recruit_head {
	margin: 0 0 min(6.6666vw, 80px);
}
.p-interview_list > li {
	width: 30%;
	margin-top: 40px;
	margin-right: 5%;
}
.p-interview_list > li > a {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	padding: min(3.3333vw, 40px) 0 0  min(2.6666vw, 32px);
	position: relative;
}
.p-interview_meta {
	color: #fff;
	font-size: min(1.5vw, 1.8rem);
	min-width: min(5vw, 60px);
	max-height: min(30vw, 360px);
	background: #313131;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: 16px 4px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.p-interview_meta span {
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
}
.p-interview_img {
	background-color: #ccc;
	padding-top: 127.492447129%;
}
.p-interview_img {
	position: relative;
	overflow: hidden;
}
.p-interview_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-interview_title {
	font-size: 2rem;
	font-weight: 700;
	margin: min(2vw, 24px) 0 0;
}
.p-interview_text {
	margin: min(.6666vw, 8px) 0 0;
}
#top_recruit .c-btn01.is-icon > span::before {
	width: min(3.1666vw, 38px);
	height: min(2.9166vw, 35px);
	background-image: url("../img/cmn/icon_recruit_bk.svg");
}
@media screen and (min-width: 769px) {
.p-interview_list > li:nth-child(-n + 3) {
	margin-top: 0;
}
.p-interview_list > li:nth-child(3n),
.p-interview_list > li:last-child {
	margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.top_recruit_content {
	padding: 64px 0;
}
.top_recruit_head {
	margin: 0 0 40px;
}
.top_recruit_text {
	text-align: left;
    padding-top: 0.5em;
    line-height: 1.75;
}
.p-interview_list > li {
	width: 49%;
	margin-right: 2%;
}
.p-interview_list > li:nth-child(-n + 2) {
	margin-top: 0;
}
.p-interview_list > li:nth-child(2n),
.p-interview_list > li:last-child {
	margin-right: 0;
}
.p-interview_list > li > a {
	padding: min(6.6666vw, 25px) 0 0  min(2.6666vw, 10px);
}
.p-interview_meta {
	font-size: min(3.4666vw, 1.3rem);
	min-width: min(8vw, 30px);
	max-height: min(53.3333vw, 210px);
	height: 100%;
	padding: min(2.1333vw, 8px);
}
.p-interview_title {
	font-size: 1.6rem;
	margin: min(4.2666vw, 16px) 0 0;
}
#top_recruit .c-btn01.is-icon > span::before {
	width: min(5.6vw, 21px);
	height: min(5.2vw, 19.5px);
}
}


/* 乾仮設について
-------------------------------------------------------- */
#top_about {
	background-image: url("../img/top/about.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
}
.top_about_list {
	max-width: 600px;
	width: 45%;
}
.top_about_list > li:not(:last-child) {
	margin: 0 0 4px;
}
.top_about_list > li > a {
	color: #fff;
	background: rgba(14, 19, 18, .5);
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	padding: min(6.6666vw, 80px) 16px;
	position: relative;
}
.top_about_list > li > a::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 18px 18px;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	right: 4px;
	bottom: 4px;
}
@media screen and (max-width: 768px) {
#top_about {
	background-image: url("../img/top/about_sp.jpg");
	padding: 64px 2%;
}
.top_about_list {
	max-width: inherit;
	width: 100%;
}
.top_about_list > li:not(:last-child) {
	margin: 0 0 10px;
}
.top_about_list > li > a {
	padding: 48px 16px;
}
.top_about_list > li > a::before {
	border-width: 0 0 9px 9px;
	right: 4px;
	bottom: 4px;
}
.top_about_list > li > a > .c-en_title + div {
    padding-top: 0.5em;
    line-height: 1.75;
}
}


/* お問い合わせ
-------------------------------------------------------- */
#top_contact {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}
#top_contact > div { width: 50%; }
.top_contact_head {
	background: #eee;
	border: solid 1px #313131;
	border-right: none;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.top_contact_text {
	font-size: min(1.5vw, 1.8rem);
}
.top_contact_btns .c-btn01 {
	height: 50%;
	padding: 56px 8px;
}
.top_contact_btns .c-btn01 > span span {
	font-size: min(1.4285vw, 2rem);
	margin: 0 0 0 min(1.3333vw, 16px);
}
.top_contact_btns .c-btn01:not(:last-child) {
	border-bottom: none;
}
.top_contact_btns .c-btn01.is-icon.tel > span::before {
	width: 1.4em !important;
	height: 1.4em !important;
	background-image: url("../img/cmn/icon_tel_bk.svg");
}
.top_contact_btns .c-btn01.is-icon.mail > span::before {
	width: min(2.8333vw, 34px);
	height: min(2vw, 24px);
	background-image: url("../img/cmn/icon_mail_bk.svg");
}
@media screen and (min-width: 769px) {
.top_contact_btns .c-btn01 {
	font-size: min(2.3333vw, 2.8rem);
}
.top_contact_btns .c-btn01.tel {
	font-size: min(2.5714vw, 3.6rem);
}
.top_contact_btns .c-btn01.is-icon > span {
	padding-left: min(4.5714vw, 64px);
}
}
@media screen and (max-width: 768px) {
#top_contact > div { width: 100%; }
.top_contact_head {
	border: none;
	padding: 64px 0;
}
.top_contact_text {
    padding-top: 0.5em;
	font-size: 1.4rem;
}
.top_contact_btns .c-btn01 {
	padding: 16px;
}
.top_contact_btns .c-btn01 > span span {
	font-size: 1.5rem;
	margin: -4px 0 0;
}
.top_contact_btns .c-btn01.tel {
	font-size: 2.4rem;
}
.top_contact_btns .c-btn01.is-icon.tel > span {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	text-align: center;
}
}
@media screen and (max-width: 480px) {
.top_contact_btns .c-btn01 > span span {
	font-size: 4vw;
	margin: -1.0666vw 0 0;
}
.top_contact_btns .c-btn01.tel {
	font-size: 6.4vw;
}
}


/* 無限横スクロール
-------------------------------------------------------- */
@keyframes infinity-scroll {
from {
	transform: translateX(0);
}
to {
	transform: translateX(-100%);
}
}
.infinity_scroll,
.infinity_scroll ul {
	display: -webkit-box;
	display: flex;
}
.infinity_scroll {
	overflow: hidden;
}
.infinity_scroll ul {
	animation: infinity-scroll 80s infinite linear 0.5s both;
}
.infinity_scroll ul li {
	width: min(43.9453vw, 450px);
}
@media screen and (max-width: 768px) {
.infinity_scroll ul li {
	width: min(60vw, 450px);
}
}

.breadcrumb ol {
  display: flex; /* 横並びにする */
  list-style: none;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* 最後の要素以外に「>」をつける */
.breadcrumb li:not(:last-of-type)::after {
  content: ">";
  margin: 0 10px; /* 前後の余白 */
  color: #888;    /* 文字色を少し薄くするのがオシャレ */
  font-size: 0.8em;
}


.lower-mv {
	width: 100%;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.lower-mv .l_mv_title {
	color: #fff;
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
}
.lower-mv .l_mv_title h1 {
	font-size: 7.2rem;
}
.lower-mv .l_mv_title .en {
	font-size: 2.8rem;
}

#company .lower-mv {
	background-image: url(../img/company/mv.jpg);
}
.breadcrumb {
	max-width: 1200px;
	margin: 3rem auto;
	color: #b5b5b5;
}
.c-en_title p {
	font-weight: normal;
}

.c-en_title_flex {
	display: flex;
	align-items: baseline;
}
.c-en_title_flex .en {
	line-height: 1;
	font-size: 4.8rem;
}
.c-en_title_flex h2 span {
	margin-left: 3rem;
	line-height: 1.3;
	padding-left: 12px!important;
}
#company .inner {
	padding: 8rem 0;
	max-width: 1200px;
	margin: 0 auto;
}
#company #sec01 .inner.flex {
	justify-content: space-between;
}
#company #sec01 .inner .left-wrapper {
	width: 45%;
	max-width: 500px;
	background-image: url(../img/company/img01.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}
#company #sec01 .inner .right-wrapper {
	width: 53%;
}
#company #sec01 .inner .right-wrapper h3 {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 4rem;
}
#company #sec01 .inner .right-wrapper p {
	line-height: 2.2;
}
#company #sec01 .inner .right-wrapper .name {
	margin-top: 5rem;
	font-size: 2.4rem;
	text-align: right;
}
#company #sec01 .inner .right-wrapper .name span {
    font-size: 1.6rem;
    padding-right: 1em;
}

#company #sec02 .inner table {
	border-top: 1px solid #000;
}

#company #sec02 .inner table tr {
	border-bottom: 1px solid #000;
}
#company #sec02 .inner table tr th,
#company #sec02 .inner table tr td {
	padding: 1.2em;
}
#company #sec02 .inner table tr th {
	background-color: #eeeeee;
	text-align: center;
}
#company #sec03 {
	background-color: #eeeeee;
    background-image: url(../img/company/bg01.png);
    background-repeat: no-repeat;
    background-position: left 0 top 50%;
    background-size: 35%; 
    padding: 15rem 0;
    width: 100%;
}
.sec03-inner {
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}
#company #sec03 .right-wrapper {
	width: 64%;
    height: auto;
    overflow: visible;
}
#company #sec03 .right-wrapper .areaicon {
	margin-bottom: 4rem;
}
#company #sec03 .right-wrapper .areaicon::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 26px;
	vertical-align: middle;
	background-image: url(../img/company/icon01.svg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: .5em;
}
.accordion-006 {
    margin-bottom: 2px;
    background-color: #ffffff;
	position: relative;
}
.accordion-006 summary {
    list-style: none; /* 基本 */
	padding: 1em;
	font-weight: bold;
}
.accordion-006 summary::-webkit-details-marker {
    display: none;
}
.accordion-006 summary::marker {
    content: "";
    display: none;
}

.accordion-006 .icon {
    position: absolute;
    right: 1em;
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
}
/* 横棒 */
.accordion-006 .icon::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 1px;
    background: #fff;
}
/* 縦棒 */
.accordion-006 .icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1px; height: 10px;
    background: #fff;
    transition: .3s;
}
.accordion-006[open] {
    margin-bottom: 10px;
}
/* 開いた時に縦棒を回して隠す */
.accordion-006[open] .icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 1em 1em;
    color: #000000;
    transition: transform .5s, opacity .5s;
}

.accordion-006[open] p {
    transform: none;
    opacity: 1;
	color: #626262;
	line-height: 1.8;
}
#company #sec04 .inner .caricon {
	margin: 0 auto 4rem;
	text-align: center;
}
#company #sec04 .inner .caricon::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 14px;
	vertical-align: middle;
	background-image: url(../img/company/icon02.svg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: .5em;
}
@media screen and (max-width: 768px) {
	#company .mv_summar{
		display: none;
	}
}

@media screen and (max-width: 768px) {
    /* ------------------------------
       下層ページMV（メインビジュアル）スマホ共通設定
       ------------------------------ */
    .lower-mv {
        margin-top: 60px; 
        background-position: center top !important; 
        height: 50vw; 
    }
    .lower-mv .l_mv_title h1 { 
        font-size: 3.6rem; 
    }
    .lower-mv .l_mv_title .en { 
        font-size: 1.4rem; 
    }
}

/* ========================================================
   会社案内ページ (company) SP版レスポンシブ対応
   ======================================================== */
@media screen and (max-width: 768px) {
    /* ------------------------------
       共通設定・余白
       ------------------------------ */
    #company .inner {
        padding: 4rem 0; /* PCの巨大な余白をスマホ用に縮小 */
		width: 96%;
    }
    .mb60, .mb54 {
        margin-bottom: 3rem !important;
    }
    .breadcrumb {
        margin: 2rem auto;
        font-size: 1.2rem;
		width: 96%;
    }

	/* ------------------------------
       下層ページ(is-lower) SP版の初期ヘッダーを「白帯＋黒文字」に固定！
       ------------------------------ */
    /* 白い帯を最初から出す */
    .is-lower header::after {
        top: 0 !important;
        opacity: 1 !important;
    }
    /* ロゴを強制的に黒に */
    .is-lower .hdr_logo a,
    .is-lower .hdr_logo span {
        color: #000 !important;
    }
    /* 電話・メールアイコンを黒に差し替え */
    .is-lower .hdr_link_tel::before {
        background-image: url("../img/cmn/icon_tel_bk.svg") !important;
    }
    .is-lower .hdr_link_mail::before {
        background-image: url("../img/cmn/icon_mail_bk.svg") !important;
    }
    /* ハンバーガーメニューを「白背景＋黒線（枠付き）」に変更 */
    .is-lower .hamb {
        background: #fff !important;
        border-left: 1px solid #ddd !important; /* ボタンの区切り線 */
    }
    .is-lower .hamb_icon span {
        background: #000 !important;
    }

    /* ------------------------------
       セクションタイトル (英語・斜め線非表示 ＆ 左寄せ)
       ------------------------------ */
    /* 英語タイトルを消す */
    #company .c-en_title .en,
    #company .c-en_title_flex .en {
        display: none !important;
    }
    /* 斜め線を消す ＆ 左の余白を詰める */
    #company .c-en_title .ja span::before,
    #company .c-en_title_flex .ja span::before {
        display: none !important;
    }
    #company .c-en_title .ja span,
    #company .c-en_title_flex .ja span {
        padding: 0 !important;
		margin:0 !important;
        font-size: 1.8rem; /* スマホ用のタイトルサイズ */
    }
    /* 会社概要などのセンター寄せ(tac)を左寄せに強制変更 */
    #company .c-en_title.tac {
        text-align: left !important;
    }
	
	/* ------------------------------
       下層ページ(is-lower) の お問い合わせエリア (SP版)
       ------------------------------ */
    /* 英語(CONTACT)を非表示にする */
    .is-lower #top_contact .c-en_title .en {
        display: none !important;
    }
    
    /* 日本語タイトルを 2.4rem (24px) に大きくする！ */
    .is-lower #top_contact .c-en_title .ja span {
        font-size: 2.4rem !important; 
		padding: 0 !important;
    }
    
    /* 先ほど他を「左寄せ」にした影響を受けないよう、ここだけ「中央寄せ」を死守する！ */
    .is-lower #top_contact .c-en_title.tac,
    .is-lower #top_contact .top_contact_head {
        text-align: center !important;
    }
	.is-lower #top_contact .top_contact_head {
		padding: 5rem 0;
	}

    /* ------------------------------
       #sec01: 社長挨拶 (順番入れ替えの魔法 ＆ 画像差し替え)
       ------------------------------ */
    #company #sec01 .inner.flex {
        display: flex;
        flex-direction: column; /* 全体を縦並びに */
    }
    /* ▼ 右の箱の壁を壊して、中身を直接並べ替えられるようにする魔法！ ▼ */
    #company #sec01 .inner .right-wrapper {
        display: contents; 
    }
    
    /* 順番1：タイトルを一番上に！ */
    #company #sec01 .c-en_title_flex {
        order: 1;
        margin-bottom: 1em !important;
    }
    /* 順番2：画像をタイトルの下に！ ＆ SP用画像に差し替え！ */
    #company #sec01 .inner .left-wrapper {
        order: 2;
        width: 100%;
        height: 70vw; /* スマホでの写真の高さ（適宜調整してください） */
        margin-bottom: 3rem;
        background-image: url(../img/company/img01_sp.jpg) !important;
        background-position: center;
        background-size: cover;
    }
    /* 順番3：見出し(h3)をその下に */
    #company #sec01 .inner .right-wrapper h3 {
        order: 3;
        font-size: 1.8rem;
        margin-bottom: 1em !important;
        line-height: 1.5;
    }
    /* 順番4：本文(p)をその下に */
    #company #sec01 .inner .right-wrapper p {
        order: 4;
		line-height: 1.8;
    }

	#company #sec01 .inner .right-wrapper .name	{
		/* display: none; */
        margin-top: 2rem;
        font-size: 1.8rem;
	}

    #company #sec01 .inner .right-wrapper .name span {
        font-size: 1.4rem;
    }

    /* ------------------------------
       #sec02: 会社概要 (テーブル)
       ------------------------------ */
    #company #sec02 .inner table tr th {
        width: 30%;
        font-size: 1.3rem;
        padding: 1.2em 0.5em;
    }
    #company #sec02 .inner table tr td {
        width: 70%;
        font-size: 1.3rem;
        padding: 1.2em 0.5em;
    }

	#company #sec02 .c-en_title.tac {
		margin-bottom: 1em !important;
	}

    /* ------------------------------
       #sec03: 対応エリア
       ------------------------------ */
    #company #sec03 {
        padding: 4rem 0 6rem;
        /* ▼ 地図のサイズと位置を修正！ ▼ */
        background-position: center 150px; /* タイトル・テキストのすぐ下に配置 */
        background-size: 100% auto; /* 120%をやめて、画面幅ピッタリ（100%）に縮小！ */
    }
    .sec03-inner {
        flex-direction: column;
        padding-top: 0;
    }
    #company #sec03 .right-wrapper {
        width: 96%;
        margin: 0 auto;
        display: flex;
        flex-direction: column; 
    }
    #company #sec03 .right-wrapper .areaicon::before {
        display: none !important;
    }

    /* 順番1. タイトル（一番上 ＆ 下線） */
    #company #sec03 .c-en_title_flex {
        order: 1;
        border-bottom: 1px solid #333;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem !important;
        width: 100%;
    }
    
    /* 順番2. 本文（タイトルのすぐ下） */
    #company #sec03 .right-wrapper .areaicon {
        order: 2;
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    
    /* 順番3. 疑似要素「市区町村一覧」 */
    #company #sec03 .right-wrapper::before {
        content: '市区町村一覧';
        display: block;
        order: 3;
        font-size: 1.5rem;
        font-weight: normal;
        margin-top: 110vw; 
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 2; 
    }
    
    /* 順番4. アコーディオン（一番下） */
    .accordion-006 {
        order: 4;
        position: relative;
        z-index: 2; /* アコーディオンも地図の手前に出す */
    }

    /* ------------------------------
       #sec04: アクセス
       ------------------------------ */
    #company #sec04 .inner iframe {
        height: 250px;
    }
    #company #sec04 .inner .caricon::before {
        display: none !important;
    }
    #company #sec04 .inner .caricon {
        text-align: left;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
    /* タイトルの下線 */
    #company #sec04 .c-en_title.tac {
        border-bottom: 1px solid #333;
        padding-bottom: 1rem;
        margin-bottom: 1.5rem !important;
    }
}

/* ========================================================
   事業内容ページ (service)
   ======================================================== */
#service .lower-mv {
    background-image: url(../img/service/mv.jpg);
}
.fc-orange {
    color: #e76500;
}
.mt20 { margin-top: 2rem; }
.mt80 { margin-top: 8rem; }

/* ▼ コンテンツ幅を最大1200pxに固定！ ▼ */
#service .inner {
    max-width: 1200px;
}

/* ------------------------------
   リード文＆ポイント (#sec_lead)
   ------------------------------ */
#sec_lead {
    padding: 6rem 0 10rem;
}
#sec_lead .lead-text {
    width: 50%;
    margin-right: 5%; /* 右に余白を作ってオレンジ枠を押しやる */
}
#sec_lead .lead-text h2 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}
#sec_lead .lead-text p {
    line-height: 2;
}
#sec_lead .lead-points {
    width: 42%;
	margin-right: 2rem;
}
.point-box {
    border: 2px solid #e76500;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    background: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.6;
    border-radius: 10px;
	font-size: 2rem;
}
.point-box:last-child {
    margin-bottom: 0;
}
.point-box .fc-orange {
    font-size: 3rem;
}

/* ------------------------------
   事業のご案内 (#sec_info)
   ------------------------------ */
#sec_info {
    background: #eee;
    padding: 10rem 0;
}
/* コンテンツ幅を最大1200pxに固定（companyページと同じ mw1245 を流用可） */
#sec_info .inner {
    max-width: 1200px; 
}

.info-block {
    position: relative; /* 基準にする */
    display: flex; /* 上下中央揃えのため（mt80はCSSで制御） */
    align-items: flex-start; /* 上揃え */
    justify-content: flex-end; /* 画像を右へ押しやる */
    margin-top: 8rem; /* ブロック間の余白 */
}
.info-block:first-child {
    margin-top: 0;
}

/* mt80クラスの代替（CSSで制御） */
.info-block.mt80 {
    margin-top: 8rem;
}

/* ▼ 白枠を「下層（z-index:1）」にして、全幅(100%)にする ▼ */
.info-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* ★ユーザー指示通り100%★ */
    height: 100%; /* ★親要素いっぱい★ */
    background: #fff;
    padding: 5rem 53% 5rem 4rem; /* ★右側の余白を画像幅分大きく取る。画像幅約51.5%+余白1.5%★ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    z-index: 1; /* 白枠を奥に */
    border-radius: 10px;
}

/* ▼ 画像を「上層（z-index:2）」にして、右に20px、下に20pxずらす！ ▼ */
.info-img {
    width: 51.5%; /* デザインに合わせた幅（コンテンツ幅の約半分） */
    position: relative;
    z-index: 2; /* 画像を手前に */
    transform: translate(40px, 40px); 
}
.info-img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ▼ テキストコンテンツの調整 ▼ */
.info-text h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
}

.info-text h4 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 4rem; /* 上の本文との間隔をここに移動 */
    margin-bottom: 1.5rem; /* グレーボックスとの間隔 */
}
.info-icon {
    display: inline-block;
    width: 30px; /* アイコンサイズ調整 */
    margin-right: 1.5rem;
}
.info-text p {
    line-height: 1.8;
}

/* ▼ 薄グレーのボックス（info-gray-box）の調整 ▼ */
.info-gray-box {
    background: #eee;
    border-radius: 10px;
    padding: 3rem;
}
.info-gray-box p {
    color: #626262; 
    font-size: 1.5rem;
    line-height: 1.8;
}



/* ------------------------------
   レンタル (#sec_rental)
   ------------------------------ */
#sec_rental {
    padding: 10rem 0;
}
.rental-sub-title {
    font-size: 2.4rem;
    font-weight: bold;
    border-bottom: 1px solid #000;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.rental-desc {
    line-height: 2;
    margin-bottom: 4rem;
}

/* ▼ 新規追加：1行目のリード文の装飾 ▼ */
.rental-desc .desc-lead {
    display: inline-block;
    font-size: 2.0rem; /* 少し大きく */
    font-weight: 700;   /* 太文字に */
    margin-bottom: 1rem; /* 下の文章との余白 */
}
/* リード文の中のオレンジ文字だけをさらに大きく！ */
.rental-desc .desc-lead .fc-orange {
    font-size: 2.8rem;
    margin: 0 4px; /* 前後に少し余白をあけて目立たせる */
}
.rental-grid {
    margin: 0 auto 8rem;
	max-width: 1020px;

}
.rental-item {
    width: 48%;
    margin-bottom: 4rem;
}
.rental-item img {
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 10px; /* ★角丸追加 */
}
.rental-item h4 {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
}
.rental-item p {
    line-height: 1.8;
}

/* 外部バナーリンク */
.banner-wrap {
    margin-top: 3rem;
	max-width: 1020px;
	margin:0 auto;
}
.banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
	height: 150px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 3rem 5rem;
    position: relative;
    transition: 0.3s;
    border-radius: 10px; /* バナー自体の角丸 */
}
.banner-link .bnr-logo {
    max-height: 50px; /* 企業ロゴのサイズ制限 */
}

/* ▼ 新設：丸い枠（〇）のCSS ▼ */
.link-icon-wrap {
    position: absolute;
    right: -15px; /* 右下に少しはみ出させる */
    bottom: -15px;
    width: 44px;  /* アイコン22pxの倍くらいのサイズで丸を作る */
    height: 44px;
    background-color: #fff; /* 平時は白抜き */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 50%; /* まん丸にする魔法 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
/* SVGアイコンのサイズ設定 */
.link-icon-wrap img {
    width: 22px; /* ご指定の22px！ */
    height: auto;
    transition: opacity 0.3s;
}
.link-icon-wrap .ico-wh {
    position: absolute;
    opacity: 0; /* 平時は白アイコンを隠しておく */
}

/* ▼ ホバー時の魔法 ▼ */
.banner-link:hover {
    border-color: #e76500;
    box-shadow: 0 5px 15px rgba(231, 101, 0, 0.1);
}
/* 丸枠をオレンジに塗りつぶす */
.banner-link:hover .link-icon-wrap {
    background-color: #e76500;
    border-color: #e76500;
}
/* グレーのアイコンを消して、白アイコンを浮かび上がらせる！ */
.banner-link:hover .link-icon-wrap .ico-gr {
    opacity: 0;
}
.banner-link:hover .link-icon-wrap .ico-wh {
    opacity: 1;
}

/* ------------------------------
   お問い合わせ (service-contact)
   ------------------------------ */
.service-contact {
    background: #eee;
    padding: 8rem 0;
}
.service-contact .top_contact_head {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 4rem;
}
.service-contact-btns {
    max-width: 600px;
    margin: 0 auto;
}
.wide-btn.is-white {
    background: #fff;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 2.5rem 1rem;
    border: 1px solid #333;
    /* border-radius: 10px; ← 角丸を削除しました！ */
}
.wide-btn.is-white:last-child {
    margin-bottom: 0;
}
.wide-btn.is-white:hover {
    background: #333;
    color: #fff;
}
.wide-btn.is-white.tel > span::before {
    background-image: url("../img/cmn/icon_tel_bk.svg");
	transition: .5s;
}
.wide-btn.is-white.mail > span::before {
    background-image: url("../img/cmn/icon_mail_bk.svg");
	transition: .5s;
}

.wide-btn.is-white.tel:hover > span::before {
    background-image: url("../img/cmn/icon_tel_wh.svg");
}
.wide-btn.is-white.mail:hover > span::before {
    background-image: url("../img/cmn/icon_mail_wh.svg");
}
.wide-btn.is-white .hours {
    display: inline-block;
    font-size: 1.4rem;
    margin-left: 1.5rem;
}

/* ========================================================
   事業内容ページ (service) SP版レスポンシブ対応
   ======================================================== */
@media screen and (max-width: 768px) {
    /* ------------------------------
       共通設定・余白
       ------------------------------ */
    #service .inner {
        width: 96%;
        padding: 0;
    }
    .mt80 { margin-top: 4rem; } /* SPでは大きな余白を半減 */

    /* ------------------------------
       セクションタイトル
       ------------------------------ */
    /* 英語タイトルと斜め線を非表示にし、左寄せに統一 */
    #service .c-en_title .en,
    #service .c-en_title_flex .en { display: none !important; }
    #service .c-en_title .ja span::before,
    #service .c-en_title_flex .ja span::before { display: none !important; }
    #service .c-en_title .ja span,
    #service .c-en_title_flex .ja span {
        padding: 0 !important;
        margin:0 !important;
        font-size: 2.2rem; /* スマホで見やすいサイズ */
    }
    #service .c-en_title.tac { text-align: left !important; }

    /* ------------------------------
       リード文＆ポイント (#sec_lead)
       ------------------------------ */
    #sec_lead { padding: 4rem 0; }
    #sec_lead .inner.flex { flex-direction: column; }
    
    #sec_lead .lead-text { width: 100%; margin-bottom: 3rem; margin-right: 0; }
    #sec_lead .lead-text h2 { font-size: 1.8rem; margin-bottom: 1.5rem; line-height: 1.6; }
    #sec_lead .lead-text p { font-size: 1.4rem; line-height: 1.8; }
    
    #sec_lead .lead-points { width: 100%; margin-right: 0; }
    .point-box { padding: 1.5rem; font-size: 1.6rem; }
    .point-box .fc-orange { font-size: 2.4rem; }

    /* ------------------------------
       事業のご案内 (#sec_info) - 一体型カードデザイン
       ------------------------------ */
    #sec_info { padding: 5rem 0; }
    
    .info-block {
        flex-direction: column; /* 縦並びに変更 */
        align-items: stretch;
        margin-top: 4rem;
        /* ▼ カード全体としての装飾をここ（親要素）に設定 ▼ */
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        overflow: hidden; /* 中の画像が枠からはみ出ないようにする魔法 */
    }
    .info-block.mt80 { margin-top: 4rem; } /* mt80の余白をSP用に縮小 */
    
    .info-img {
        width: 100%;
        transform: none; /* PC版の右下へのはみ出しを解除 */
    }
    .info-img img {
        width: 100%;
        border-radius: 0; /* 親要素で角丸にしているので、画像自体の角丸は解除 */
        display: block; /* 画像の下にできる謎の隙間を消す */
    }
    
    .info-text {
        position: static;
        width: 100%;
        margin: 0; /* 画像への被せ（マイナスマージン）を解除 */
        padding: 3rem 2rem; /* カード下半分の余白 */
        box-shadow: none; /* 個別の影を解除（親要素に任せる） */
        background: transparent;
    }

    .info-text h3 { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .info-text h4 {
        font-size: 1.6rem;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
    .info-icon { width: 30px; margin-right: 1rem; }
    .info-text p { font-size: 1.4rem; line-height: 1.8; }
    
    .info-gray-box { padding: 2rem; margin-top: 1.5rem; }
    .info-gray-box p { font-size: 1.3rem; line-height: 1.6; }

    /* ------------------------------
       レンタル (#sec_rental)
       ------------------------------ */
    #sec_rental { padding: 5rem 0; }
    .rental-sub-title { font-size: 2rem; margin-bottom: 1.5rem; }
    .rental-desc { font-size: 1.4rem; margin-bottom: 3rem; line-height: 1.8; }
    
	/* リード文のスマホ用調整 */
    .rental-desc .desc-lead {
        font-size: 1.6rem; 
        margin-bottom: 0.5rem;
    }
    .rental-desc .desc-lead .fc-orange {
        font-size: 2.0rem; /* スマホ版での強調サイズ */
        margin: 0 2px;
    }

    .rental-grid { margin-bottom: 4rem; }
    .rental-item { width: 100%; margin-bottom: 3rem; }
    .rental-item h4 { font-size: 1.6rem; margin-bottom: 1rem; }
    .rental-item p { font-size: 1.4rem; line-height: 1.8; }
    
    .banner-wrap.flex { flex-direction: column; }
    .banner-link {
        width: 100%;
        margin-bottom: 2rem;
        padding: 1.5rem;
        height: auto;
        min-height: 100px;
    }
    .banner-link .bnr-logo { max-height: 40px; }
    
    /* 丸いアイコン枠も少し縮小 */
    .link-icon-wrap {
        width: 36px;
        height: 36px;
        right: -10px;
        bottom: -10px;
    }
    .link-icon-wrap img { width: 18px; }

    /* ------------------------------
       お問い合わせ (service-contact)
       ------------------------------ */
    .service-contact { padding: 5rem 0; }
    .is-lower #top_contact .top_contact_head { padding: 1.8rem 0 2rem; }
    .service-contact-btns .wide-btn.is-white { padding: 1.5rem; }
    
    /* 営業時間などの補足テキストの調整 */
    .service-contact-btns .wide-btn.is-white .hours {
        display: block;
        margin-left: 0;
        margin-top: 0.5rem;
        font-size: 1.2rem;
    }
}

/* works */
#works .lower-mv {
    background-image: url(../img/works/mv.jpg);
}

#works .inner {
    max-width: 1200px;
}

#sec_list {
    padding: 10rem 0;
}

.works-item {
    margin-bottom: 8rem;
}

/* Swiperコンテナ */
.works-img {
    width: 475px;
    position: relative;
    overflow: hidden;
    padding-bottom: 25px; /* ここを追加！画像から下に10pxの隙間＋丸ぽちの高さ分の余白を作ります */
}
.works-img img {
    width: 100%;
    height: auto;
    display: block; /* 画像下の余分な隙間を消す */
}

/* Swiper ナビゲーション（PC）: 画像の両端をクリック */
.works-img .swiper-button-prev,
.works-img .swiper-button-next {
    top: 0;
    width: 50%; /* 画像の左半分/右半分 */
    height: calc(100% - 25px); /* 下の丸ぽちエリアには被らないように高さを調整 */
    margin-top: 0;
    background: transparent;
}
.works-img .swiper-button-prev::after,
.works-img .swiper-button-next::after {
    display: none; /* デフォルトの矢印アイコンを消す */
}
.works-img .swiper-button-prev {
    left: 0;
}
.works-img .swiper-button-next {
    right: 0;
}

/* Swiper 共通スタイル（ページネーション：丸ぽち） */
.worksSlider .swiper-pagination {
    bottom: 0 !important; /* 作った余白の最下部にぴったり合わせる */
}
.worksSlider .swiper-pagination-bullet {
    background: #ccc; /* 選択されていない丸ぽちの色（薄いグレー） */
    opacity: 1;
    width: 8px; /* 丸の大きさ */
    height: 8px;
    margin: 0 5px !important; /* 丸と丸の間隔 */
}
.worksSlider .swiper-pagination-bullet-active {
    background: #000; /* 選択されている丸ぽちの色（黒） */
}

/* テキスト部分 */
.works-text {
    width: calc(100% - 475px - 5%);
    padding: 0 0 0 5%;
}

.works-cat {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.works-ttl {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

.works-desc {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.works-table {
    width: 100%;
    border-top: 1px solid #000;
}
.works-table tr {
    border-bottom: 1px solid #000;
}
.works-table tr th {
    padding: 1.2em;
    text-align: left;
    width: 30%;
    font-size: 1.4rem;
}
.works-table tr td {
    padding: 1.2em;
    width: 70%;
    font-size: 1.4rem;
}

/* テーブル自体の上線を消す */
table.works-table {
    border-top: none !important;
}

/* 念のため、施工場所の行（一番上）の上線も消す */
table.works-table tr.location th,
table.works-table tr.location td {
    border-top: none !important;
}


/* SP版スタイル */
@media screen and (max-width: 768px) {
	.is-lower .c-en_title .ja span::before {
		display: none !important;
	}

    /* （既存の #sec_list や .works-item などのSP版記述はそのまま残してください） */
    #sec_list {
        padding: 4rem 0;
    }

    #sec_list {
        padding: 4rem 0;
    }

    .works-item {
        flex-direction: column;
        margin-bottom: 4rem;
    }

    .works-img {
        width: 100%;
        margin-bottom: 2rem;
    }

    .works-text {
        width: 100%;
        padding: 0;
    }

    .works-ttl {
        font-size: 1.8rem;
    }

    .works-desc {
        font-size: 1.4rem;
    }

    .works-table tr th,
    .works-table tr td {
        padding: 1em 0.5em;
        font-size: 1.3rem;
    }
}

/* ========================================================
   採用情報ページ (recruit) 固有スタイル
   ======================================================== */
.page-recruit main#recruit {
    /* 共通ヘッダーとの重なりを回避するための調整 */
}

.page-recruit .inner.mw1245 { max-width: 1200px; margin: 0 auto; }

/* MV背景画像 */
.page-recruit .lower-mv#sec_recruit {
    background-image: url(../img/recruit/mv.jpg);
}

/* セクション共通の余白 */
.recruit-sec {
    padding: 10rem 0;
}
@media screen and (max-width: 768px) {
    .recruit-sec {
        padding: 5rem 0;
    }
}

/* 背景色 */
.bg-eee { background-color: #eee; }
.bg-f7 { background-color: #eee; }

/* 募集要項・採用フロー・お問い合わせエリアの tac調整 (companyと同様) */
.page-recruit .recruit-sec .c-en_title tac {
    text-align: left !important;
}
.page-recruit .recruit-sec tac trigger trigger_lower {
    text-align: center !important;
}

/* ------------------------------
   メッセージセクション
   ------------------------------ */
#sec_message {
    position: relative;
    background: linear-gradient(to bottom, transparent 45%, #eee 45%);
    padding: 8rem 0 10rem;
    overflow: hidden; /* 横スクロール防止用 */
}

/* フレックスボックスで画像とテキストを並べる */
#sec_message .msg-wrap {
    display: flex;
    align-items: flex-start; 
    justify-content: flex-end; /* テキストボックスを右に配置 */
}

#sec_message .msg-img {
    width: 920px; /* ★ポイント2：指定通りの920px */
    max-width: 75vw; /* 画面が狭くなった時に崩れないための安全装置 */
    margin-left: -80px; /* ★ポイント3：innerから左に80pxはみ出させる */
    margin-right: auto; /* 余った空間を右に押しやる */
    position: relative;
    z-index: 1; /* 重ね順（下） */
}

#sec_message .msg-img img {
    width: 100%;
    height: auto;
    /* border-radius: 10px; ← 角丸はデザイン画像にないので消しました */
    display: block; /* 画像下の謎の隙間を消す */
}

#sec_message .msg-text {
    width: 700px; /* テキストボックスの幅（お好みで調整してください） */
    background: #eee; /* ★ポイント4：セクション背景と全く同じ色！シャドウもなし！ */
    padding: 6rem 0 0 9rem; /* 左と上の余白（画像に被っている部分のスペース確保） */
    margin-left: -200px; /* ★ポイント5：マイナスマージンで画像を左に引っ張り込み、上に乗せる！ */
	margin-top: 400px;
    position: relative;
    z-index: 2; /* 重ね順（上） */
}

/* タイトル部分の微調整（既存の .c-en_title_flex を使用） */
#sec_message .c-en_title_flex {
    margin-bottom: 3rem;
    align-items: baseline;
}

#sec_message .c-en_title_flex .en {
	font-size: 4.2rem;
}

#sec_message .msg-text p {
    line-height: 2.2;
    margin-bottom: 1.5em;
}
#sec_message .msg-text p:last-child {
    margin-bottom: 0;
}


/* --- SP版レスポンシブ --- */
@media screen and (max-width: 768px) {

	/* ------------------------------
       採用情報 スマホ用タイトル調整
       ------------------------------ */
    /* 英語タイトルと斜め線を非表示にし、左寄せの余白を詰める */
    .page-recruit .c-en_title .en,
    .page-recruit .c-en_title_flex .en { 
        display: none !important; 
    }
    
    .page-recruit .c-en_title .ja span::before,
    .page-recruit .c-en_title_flex .ja span::before { 
        display: none !important; 
    }
    
    .page-recruit .c-en_title .ja span,
    .page-recruit .c-en_title_flex .ja span {
        padding: 0 !important;
        margin: 0 !important;
    }

    #sec_message {
        /* ★ポイント6：スマホの時のグレー背景の割合。
           「15%」など少ない数字にすることで、写真がグレー領域から上に突き出すような見た目になります！ */
        background: linear-gradient(to bottom, transparent 15%, #eee 15%);
        padding: 4rem 0 5rem;
    }

    #sec_message .msg-wrap {
        flex-direction: column; /* ★オーソドックスに縦並びにする */
        align-items: center;
    }

    #sec_message .msg-img {
        width: 100%;
        max-width: 100%;
        margin-left: 0; /* はみ出しを解除 */
        margin-bottom: 2rem; /* 下のテキストとの間隔 */
    }

    #sec_message .msg-text {
        width: 100%;
        margin-left: 0; /* 被りを解除 */
		margin-top: 0;
        padding: 0; /* スマホ用両サイド余白 */
        background: transparent; /* 背景は親セクションが既にグレーなので透明でOK！ */
    }
    
    #sec_message .c-en_title_flex {
		justify-content: center;
        text-align: center;
        width: 100%;
        margin-bottom: 2rem;
    }
}

/* ------------------------------
   インタビューセクション
   ------------------------------ */
/* リード文 */
.interview-lead {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rem;
}
.interview-lead img {
    width: 20px; /* アイコンサイズ調整 */
    height: auto;
    margin-right: 1.5rem;
}
.interview-lead p {
    font-size: 1.8rem;
}

#sec_interview .interview-list { list-style: none; padding: 0; }

/* 1200pxの区切り線と余白 */
#sec_interview .interview-block {
    padding-bottom: 8rem;
    margin-bottom: 10rem;
    border-bottom: 1px solid #ccc;
}
#sec_interview .interview-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* ★1000pxのコンテンツ幅制限 */
#sec_interview .interview-inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* 画像とプロフィールの配置（下端揃え） */
#sec_interview .int-top {
    margin-bottom: 5rem;
}

#sec_interview .int-img-wrap {
    width: 700px;
    position: relative;
    flex-shrink: 0; /* 縮小防止 */
}
#sec_interview .int-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* トップページの縦書きデザインを流用・カスタマイズ */
#sec_interview .int-v-tags {
    display: flex;
	align-items: flex-start;
    gap: 8px; /* 黒ボックス同士の隙間 */
    position: absolute;
    top: -4rem; /* ★画像より40px上へ */
    right: -13rem; /* T.Yさんは右寄せ */
}
/* A.Oさん（反転時）は左寄せ */
#sec_interview .interview-block.is-reverse .int-v-tags {
    right: auto;
    left: -13rem;
}

#sec_interview .int-v-tag {
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    background: #313131;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    letter-spacing: 0.1em;
}

/* プロフィールテキスト */
#sec_interview .int-meta {
    width: calc(100% - 700px - 40px); /* 1000px - 画像700px - 安全な隙間 */
}
#sec_interview .int-meta .name {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    display: block;
}
#sec_interview .int-meta span.pos,
#sec_interview .int-meta span.year,
#sec_interview .int-meta span.motto {
    display: block;
    font-size: 1.6rem;
    line-height: 2;
    font-weight: bold;
}

/* Q&Aエリア */
#sec_interview .int-content {
    width: 100%;
}
#sec_interview .qa-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sec_interview .qa-list dt {
    font-size: 1.8rem;
    font-weight: bold;
    color: #e76500;
    margin-bottom: 1.5rem;
}
#sec_interview .qa-list dd {
    font-size: 1.6rem;
    line-height: 2;
    color: #333;
    margin-bottom: 4rem;
}
#sec_interview .qa-list dd:last-child {
    margin-bottom: 0;
}

/* --- SP版レスポンシブ --- */
@media screen and (max-width: 1024px) {
    #sec_interview .int-img-wrap { width: 60%; }
    #sec_interview .int-meta { width: 35%; }
}

@media screen and (max-width: 768px) {
    .interview-lead {
        /* flex-direction: column; */
        margin-bottom: 8rem;
    }
    .interview-lead img {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 30px;
    }
    .interview-lead p {
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 0 1rem;
    }
    
    #sec_interview .int-top,
    #sec_interview .interview-block.is-reverse .int-top {
        flex-direction: column !important; /* SPでは画像を上、プロフィールを下に強制 */
        align-items: flex-start;
        margin-bottom: 3rem;
    }
    
    #sec_interview .int-img-wrap {
        width: 100%;
        margin-bottom: 2.5rem;
    }
    
    #sec_interview .int-v-tags {
        top: -20px;
        right: 15px;
    }
    #sec_interview .interview-block.is-reverse .int-v-tags {
        left: auto;
        right: 15px; /* SPの時は反転させず、両方右寄せが見栄えが良いです */
    }
    #sec_interview .int-v-tag {
        font-size: 1.3rem;
        padding: 12px 6px;
    }
    
	#sec_interview .qa-list dd {
		font-size: 1.4rem;
	}

    #sec_interview .int-meta {
        width: 100%;
        padding-bottom: 0;
    }
    #sec_interview .int-meta .name {
        font-size: 2rem;
    }
    
    #sec_interview .qa-list dt {
        font-size: 1.6rem;
    }
}
/* ------------------------------
   数字で見るセクション
   ------------------------------ */
#sec_numbers .numbers-wrap { 
    gap: 9rem; 
    align-items: center; /* 全体を中央揃え */
}

/* リード文側 */
#sec_numbers .numbers-lead { 
    width: calc(100% - 660px - 4rem); /* 余った幅を使用 */
    display: flex; 
    flex-direction: column; 
}
#sec_numbers .numbers-lead p { 
    line-height: 2; 
    margin-top: 1.5rem; 
}

/* 画像群（リスト）側 */
#sec_numbers .numbers-list { 
    width: 660px; /* ★ご要望の幅に固定 */
    flex-shrink: 0; /* 縮小防止 */
    list-style: none; 
    padding: 0; 
    margin: 0;
    
    /* Gridレイアウトを使用して綺麗に並べる */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 15px; /* マス同士の隙間 */
}

/* 各マス（カード）の設定 */
#sec_numbers .numbers-item { 
    background: #fff; 
    border-radius: 10px;
    height: 230px; /* ★ご要望の高さに固定 */
    padding: 2.5rem 1.5rem 2rem; /* 外側の余白 */
    
    /* ★Space-betweenで上下を固定する魔法 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* 見出し（一番上） */
#sec_numbers .numbers-label { 
    font-size: 1.6rem; 
    color: #000; 
    line-height: 1.4;
    display: flex;
    align-items: center;
}

/* アイコン画像エリア（中央） */
#sec_numbers .numbers-icon {
    flex-grow: 1; /* 余った空間をすべてアイコンエリアに使う */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0; /* 上下に適度な余白 */
}

/* ★各画像を個別にサイズ調整するクラス */
#sec_numbers .num-icon01 img { width: 80px; }
#sec_numbers .num-icon02 img { width: 100px; }
#sec_numbers .num-icon03 img { width: 95px; }
#sec_numbers .num-icon04 img { width: 110px; }
#sec_numbers .num-icon05 img { width: 85px; }
#sec_numbers .num-icon06 img { width: 65px; }

/* 数字（一番下） */
#sec_numbers .numbers-num { 
    font-size: 4rem; /* 数字のサイズ */
    line-height: 1; 
    color: #000; 
    letter-spacing: -0.05em; /* 数字の間隔を少し詰める */
}
#sec_numbers .numbers-num .unit { 
    font-size: 1.6rem; 
    margin-left: 2px;
}
#sec_numbers .numbers-num .fc-orange { 
    color: #e76500; 
    margin-left: 10px; /* 男女比の隙間 */
}


/* ------------------------------
   見出しの斜め線（/）の左飛び出しをピッタリ揃える
   ------------------------------ */
@media screen and (min-width: 769px) {
    /* 斜め線の中心を右に14pxずらし、左端の飛び出しを綺麗に無くす */
    .page-recruit .c-en_title .ja span::before,
    .page-recruit .c-en_title_flex .ja span::before {
        left: 14px !important; 
    }
    
    /* 斜め線を右にずらした分、日本語テキストが被らないように右へ逃がす（元24px + 14px） */
    .page-recruit .c-en_title .ja span,
    .page-recruit .c-en_title_flex .ja span {
        padding-left: 38px !important; 
    }
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 1024px) {
    #sec_numbers .numbers-wrap { 
        flex-direction: column; 
        align-items: stretch;
		gap: 0;
    }
    #sec_numbers .numbers-lead { 
        width: 100%; 
    }
    #sec_numbers .numbers-list { 
        width: 100%; /* 横幅いっぱいを使う */
        max-width: 700px; /* 広がりすぎ防止 */
        margin: 4rem auto 0; 
    }
}


@media screen and (max-width: 768px) {
	#sec_numbers .c-en_title {
        text-align: center;
        width: 100%;
    }
	
    #sec_numbers .numbers-list { 
        /* ★SP版は2列表示に変更 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    
    #sec_numbers .numbers-item {
        height: 200px; /* スマホでは少し高さを低く */
        padding: 2rem 1rem 1.5rem;
    }
    
    #sec_numbers .numbers-label { font-size: 1.4rem; }
    
    /* スマホでの画像サイズ微調整（必要に応じて） */
    #sec_numbers .num-icon01 img { width: 75px; }
    #sec_numbers .num-icon02 img { width: 90px; }
    #sec_numbers .num-icon03 img { width: 90px; }
    #sec_numbers .num-icon04 img { width: 95px; }
    #sec_numbers .num-icon05 img { width: 80px; }
    #sec_numbers .num-icon06 img { width: 60px; }
    
    #sec_numbers .numbers-num { font-size: 3.2rem; }
    #sec_numbers .numbers-num .unit { font-size: 1.4rem; }
}
/* ------------------------------
   募集要項セクション
   ------------------------------ */
/* ドット抜けのエラーを修正（.inner.mw1245 と繋げる） */
#sec_job .inner.mw1245 { max-width: 1200px; margin: 0 auto; }

.job-wrap { max-width: 1020px; margin: 0 auto; }
.job-table { width: 100%; border-top: 1px solid #000; table-layout: fixed; border-collapse: collapse; }
.job-table tr { border-bottom: 1px solid #000; }

.job-table tr th { 
    width: 25%; /* 画像のバランスに合わせて少し狭く調整 */
    font-weight: bold; 
    text-align: center; 
    background: #eee; /* ご指定のグレー */
    padding: 2.5rem 1rem; 
    font-size: 1.6rem; 
    vertical-align: middle; 
    /* th::after にあった縦線を削除し、デザイン通りにしました */
}

.job-table tr td { 
    width: 75%; 
    padding: 3.5rem 4rem; 
    vertical-align: middle; 
    font-size: 1.5rem; 
    background: #fff;
}

/* td内のテキストブロックごとの余白調整 */
.job-table tr td p { 
    line-height: 2; 
    margin-bottom: 0; 
}
.job-desc-block {
    margin-bottom: 3rem;
}
.job-desc-block:last-child {
    margin-bottom: 0;
}
.job-desc-block .bold {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* --- SP版レスポンシブ --- */
@media screen and (max-width: 768px) {
    #sec_job .inner.mw1245 { width: 96%; }
    
    /* スマホ時はテーブルを「縦積み」にして読みやすくする */
    .job-table, .job-table tbody, .job-table tr, .job-table th, .job-table td {
        display: block;
        width: 100%;
    }
    
    .job-table tr th { 
        font-size: 1.4rem; 
        padding: 1.5rem; 
        text-align: left; /* スマホ時は左寄せの方が見やすいです */
        border-bottom: 1px solid #ccc;
		width: 100%;;
    }
    
    .job-table tr td { 
        font-size: 1.4rem; 
        padding: 2rem 1.5rem; 
    }
    
    .job-desc-block {
        margin-bottom: 2rem;
    }
}

/* ------------------------------
   採用の流れセクション (前回作成部分の統合)
   ------------------------------ */
/* 固有スタイルは前回の内容と同様。スマホのgap設定をSP縦用に調整 */
.page-recruit .recruit-sec tac { text-align: left !important; }
.page-recruit .recruit-sec.service-contact.bg-f7 { text-align: center !important; }

.page-recruit .entry_flow_steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 auto 64px;
    padding: 0;
    width: 100%;
    max-width: 1000px;
    gap: 0.3rem; /* PCでは gap: 2remを採用 */
}

/* ホバー時の魔法 (SVGがないのでコメントアウト) */
/* .c-btn01.mail.wide-btn.is-white.form-btn:hover span::before {
    background-image: url("../img/recruit/form01_wh.svg"); 
} */

@media screen and (max-width: 768px) {
    .page-recruit .entry_flow_steps {
        flex-direction: column;
        gap: 0.3rem; /* スマホ時の縦の隙間を gap: 1.5remに調整 */
        padding: 0 8rem;
    }
    
    .page-recruit .entry_flow_step::after {
        transform: rotate(135deg); /* 下向き */
    }
}
/* 採用の流れ（エントリーフロー）
-------------------------------------------------------- */
/* フロー図のコンテナ */
.entry_flow_steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 auto 64px;
    padding: 0;
    width: 100%;
    max-width: 1000px;
    gap: 0.3rem; /* ★ご提案のgapを採用！ */
}

/* 各ステップのボックス */
.entry_flow_step {
    flex: 1;
    position: relative;
    background: #fff;
    border: 2px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ★変更：center から space-between にして上下にテキストを固定！ */
    justify-content: space-between; 
    text-align: center;
    /* ★paddingで上下左右の余白（内側の壁）を設定 */
    padding: 24px 8px; 
}

/* 矢印の先端（右側の出っ張り部分） */
.entry_flow_step::after {
    content: "";
    position: absolute;
    right: -17px;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    background: inherit;
    border-top: 2px solid #1a1a1a;
    border-right: 2px solid #1a1a1a;
    transform: rotate(45deg);
    z-index: 1;
}

/* 最後のステップは右側の矢印を消す */
.entry_flow_step:last-child::after {
    display: none;
}

/* 中身のテキスト（上部） */
.entry_flow_step .step-en {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* margin-bottom は削除し、配置はFlexboxに任せます */
}

/* ★追加：アイコンを包むdivを伸び縮みさせる */
.entry_flow_step .step-icon {
    flex-grow: 1; /* 余った真ん中の空間をすべてアイコンエリアに使う */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0; /* 上下のテキストとの最低限の隙間 */
    width: 100%;
}

/* ★画像のサイズ調整用（基本サイズ） */
.entry_flow_step .step-icon img {
    height: auto;
}

/* ★各ステップの画像を個別にサイズ調整（nth-childで順番を指定） */
.entry_flow_step:nth-child(1) .step-icon img { width: 55px; } /* 1つ目：エントリー */
.entry_flow_step:nth-child(2) .step-icon img { width: 65px; } /* 2つ目：書類選考 */
.entry_flow_step:nth-child(3) .step-icon img { width: 90px; } /* 3つ目：企業説明会 */
.entry_flow_step:nth-child(4) .step-icon img { width: 90px; } /* 4つ目：面接 */
.entry_flow_step:nth-child(5) .step-icon img { width: 90px; } /* 5つ目：採用 */

/* --- 必要であればSP版（スマホ）での微調整も --- */
@media screen and (max-width: 768px) {
    .entry_flow_step:nth-child(1) .step-icon img { width: 45px; }
    .entry_flow_step:nth-child(2) .step-icon img { width: 55px; }
    .entry_flow_step:nth-child(3) .step-icon img { width: 80px; }
    .entry_flow_step:nth-child(4) .step-icon img { width: 80px; }
    .entry_flow_step:nth-child(5) .step-icon img { width: 80px; }
}

/* 中身のテキスト（下部） */
.entry_flow_step .step-ja {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 最後の「採用（アクティブ）」の色 */
.entry_flow_step.is-active {
    background: #e65c00; /* オレンジ色 */
    color: #fff;
	height: 200px;
}
/* アクティブ時の矢印の枠線もオレンジに合わせる */
.entry_flow_step.is-active::after {
    border-top-color: #e65c00;
    border-right-color: #e65c00;
}

/* エントリーボタン固有のアイコン設定 */
.wide-btn.is-white.form-btn > span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wide-btn.is-white.form-btn > span::before {
    content: "";
    width: min(4vw, 32px);
    height: min(4vw, 32px);
    background-image: url("../img/recruit/form01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 16px;
}

/* ホバー時にアイコンを白反転させる場合（白抜きSVGがあれば） */
.wide-btn.is-white.form-btn:hover > span::before {
    background-image: url("../img/recruit/form01_wh.svg");
}


/* スマホ表示（縦並びにする）
-------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.c-en_title, .c-en_title_flex {
		margin: 0;
	}
    .entry_flow_steps {
        flex-direction: column;
        gap: 0.3rem; /* スマホ時の縦の隙間 */
        padding: 0 10rem;
    }

    .entry_flow_step {
        padding: 32px 16px 24px;
    }
    
    /* 矢印の向きを「下」へ変更 */
    .entry_flow_step::after {
        right: 50%;
        top: auto;
        bottom: -17px;
        margin-top: 0;
        margin-right: -16px;
        transform: rotate(135deg); /* 下向き */
    }

    .entry_flow_step .step-en {
        min-height: auto;
    }
}

/* ========================================================
   お問い合わせページ
   ======================================================== */
    #contact .lower-mv {
        background-image: url(../img/contact/mv.jpg);
    }
    @media screen and (max-width: 768px) {
        #contact .lower-mv {
            background-image: url(../img/contact/mv_sp.jpg);
        }
    }
   /* ------------------------------
       STEP1〜3
       ------------------------------ */
        #contact_step_area{
            margin-bottom: 4rem;
        }

        .contact_step_list{
            display: flex;
            justify-content: space-between;
            max-width: 56rem;
            margin: 0 auto 4.5rem;
            isolation: isolate;/* 接続ラインのz-index:-1をこの中に閉じ込める */
        }

        .contact_step_list > li{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;
            letter-spacing: .08em;
            width: 6.667em;/* 120/18 */
            height: 6.667em;
            border-radius: 50%;
            background-color: #eee;
            position: relative;
        }
        .contact_step_list > li.active{
            color: #fff3f2;
            background-color: #34383b;
        }
        .contact_step_list > li:nth-of-type(2)::before,
        .contact_step_list > li:nth-of-type(2)::after{
            content: "";
            display: block;
            width: 100%;
            height: .8rem;
            background-color: #eee;
            position: absolute;
            top: calc(50% - .4rem);
            z-index: -1;/* 丸(li)より奥へ */
        }
        .contact_step_list > li:nth-of-type(2)::before{
            right: 95%;
        }
        .contact_step_list > li:nth-of-type(2)::after{
            left: 95%;
        }

        #contact_guidance_text{
            font-size: 2.4rem;
            letter-spacing: .08em;
            padding-left: 2.5em;
        }
        #contact_guidance_text.hide{
            display: none;
        }

        @media screen and (max-width: 768px) {
            #contact_step_area{
                margin-bottom: 3rem;
            }

            .contact_step_list{
                transform: scale(0.8);
                max-width: 50rem;/* 560*.888 */
                margin-bottom: 3rem;
            }

            .contact_step_list > li{
                font-size: 1.6rem;
            }

            #contact_guidance_text{
                font-size: 1.8rem;
                padding-left: 0;
            }

        }

    /* ------------------------------
       フォーム
       ------------------------------ */
        #form_area{
            max-width: 1140px;
            width: 96%;
            padding-bottom: 10rem;
            margin: 0 auto;
        }

        .form_table{
            border: none;
            margin-bottom: 6rem;
            position: relative;
        }

        .form_table th{
            width: 23.2rem;
            vertical-align: middle;
        }
        .form_table th.required::after{
            content: "必須";
            display: inline-block;
            color: #e76500;
            line-height: 1.4;
            padding: 0 .6em;
            margin-left: 1em;
            border: 2px solid #e76500;
            border-radius: 5em;
        }

        .form_table td{
            width: calc(100% - 23.2rem);
            padding: .5rem 0 .5rem .5rem;
        }

        .form_table .th_top th{
            padding-top: 2.5rem;
            vertical-align: text-top;
        }

        .form_table .pad_tr th{
            vertical-align: text-top;
        }
        .form_table .pad_tr th,
        .form_table .pad_tr td{
            padding-block: 2.5rem;
        }

        @media screen and (max-width: 768px) {
            .form_table,
            .form_table tbody,
            .form_table tr,
            .form_table th,
            .form_table td{
                display: block;
                width: 100%;
            }

            #form_area{
                width: 92%;
                padding-bottom: 6rem;
            }

            .form_table{
                margin-bottom: 4rem;
            }

            .form_table th{
                width: 100%;
                padding: 0;
            }
            .form_table th.required::after{
                line-height: 1.3;
                padding: .1em .6em 0;
            }

            .form_table td{
                width: 100%;
                padding: 1.25rem 0 2.25rem;
            }

            .form_table .th_top th{
                padding: 0;
                vertical-align: middle;
            }

            .form_table .pad_tr th{
                vertical-align: middle;
            }
            .form_table .pad_tr th{
                padding: 0;
            }
            .form_table .pad_tr td{
                padding: 1.25rem 0 2.75rem;
            }
        }

    /* ------------------------------
       input"text"など　例：form#mailformpro label.mfp_checked　より強い方がいい
       ------------------------------ */
        #form_area form#mailformpro input[type="text"],
        #form_area form#mailformpro input[type="email"],
        #form_area form#mailformpro input[type="tel"],
        #form_area form#mailformpro input[type="date"],
        #form_area form#mailformpro textarea,
        #form_area form#mailformpro select{
            width: 100%;
            padding: 1.75em .75em;
            margin: 0;
            background-color: #eee !important;
            box-shadow: none;
        }
        #form_area form#mailformpro input[type="text"],
        #form_area form#mailformpro input[type="email"],
        #form_area form#mailformpro input[type="tel"],
        #form_area form#mailformpro input[type="date"]{
            max-width: none;
        }

        #form_area form#mailformpro textarea{
            width: 100% !important;/* importantが必要 */
            height: 25em !important;/* importantが必要 */
        }


        @media screen and (max-width: 768px) {
            #form_area form#mailformpro textarea{
                height: 15em !important;
            }
        }

    /* ------------------------------
       ラジオボタン・チェックボックス
       ------------------------------ */
        #form_area form#mailformpro .radio,
        #form_area form#mailformpro .checkbox{
            display: block;
            width: fit-content;
            padding-inline: 2.5em;
            margin-bottom: .85em;
            position: relative;
        }
        #form_area form#mailformpro td .radio:nth-last-of-type(1),
        #form_area form#mailformpro td .checkbox:nth-last-of-type(1){
            margin-bottom: 0;
        }

        #form_area form#mailformpro .radio input[type="radio"],
        #form_area form#mailformpro .checkbox input[type="checkbox"]{
            cursor: pointer;
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            position: absolute;
            left: 0;
            top: 0;
        }

        /* ラジオボタン
        ------------------ */
        #form_area form#mailformpro .radio input[type="radio"]::before,
        #form_area form#mailformpro .radio input[type="radio"]::after{
            content: "";
            display: block;
            width: 1.5em;/* 25/16 */
            height: 1.5em;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        #form_area form#mailformpro .radio input[type="radio"]::before{
            border: 1px solid #7d7d7d;
        }

        #form_area form#mailformpro .radio input[type="radio"]::after{
            background-color: #e76500;
            transform: scale(.6);/* 15/25 */
            opacity: 0;
            z-index: 1;
            transition: opacity .4s;
        }
        #form_area form#mailformpro .radio input[type="radio"]:checked::after{
            opacity: 1;
        }

        /* チェックボックス
        ------------------ */
        #form_area form#mailformpro .checkbox input[type="checkbox"]::before,
        #form_area form#mailformpro .checkbox input[type="checkbox"]::after{
            content: "";
            display: block;
            width: 1.25em;/* 20/16 */
            height: 1.25em;
            position: absolute;
            left: 0;
            top: .1em;
        }
        
        #form_area form#mailformpro .checkbox input[type="checkbox"]::before{
            border: 1px solid #7d7d7d;
            background-color: #fff;
        }

        #form_area form#mailformpro .checkbox input[type="checkbox"]::after{
            background: url(../img/cmn/icon_check.svg) no-repeat center/80%;
            opacity: 0;
            z-index: 1;
            transition: opacity .4s;
        }
        #form_area form#mailformpro .checkbox input[type="checkbox"]:checked::after{
            opacity: 1;
        }

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

    /* ------------------------------
       個人情報の取扱規程に同意する
       ------------------------------ */
        #form_area .privacy_check_wrap{
            margin-bottom: 1em;
        }

        #privacy_box{
            padding: .75rem 0;/* スクロールバーがradiusにかかるので、子に更にdivを用意 */
            border: 1px solid #7d7d7d;
            border-radius: 1rem;
        }
        #privacy_box .overflow_wrap{
            padding: 1.5rem 3.5%;
            overflow: auto;
            max-height: 24rem;
        }

        #privacy_box .overflow_wrap{
            scrollbar-color: #ccc #fff;/* ハンドルの色, 背景色 */
            scrollbar-width: thin;
        }

        #privacy_box h3{
            font-weight: 700;
            margin-bottom: .5em;
        }

        #privacy_box .privacy_box_text{
            line-height: 1.75;
        }

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

    /* ------------------------------
       送信ボタン
       ------------------------------ */

        .submit_btn_wrapper{
            max-width: 80rem;
            width: 92%;
            margin: 0 auto;
        }
        #form_area form#mailformpro .mfp_element_submit{
            display: block;
            font-size: 2.8rem;
            font-weight: 700;
            color: #fff;
            text-align: center;
            width: 100%;
            padding: .9em calc(8% + 1.5em);/* iconの位置とiconの幅分 */
            border: 1px solid #313131;
            background-color: #e76500;
            position: relative;
            transition: opacity .4s;
        }
        #form_area form#mailformpro .mfp_element_submit:hover{
            opacity: .7;
        }
        #form_area form#mailformpro .mfp_element_submit::before{
            content: "";
            display: block;
            width: 1.42em;/* 40/28 */
            height: 1em;/* 28/28 */
            background: url(../img/cmn/icon_mail_wh.svg) no-repeat center/contain;
            position: absolute;
            left: 8%;
            top: calc(50% - .5em);
        }
        #form_area form#mailformpro .mfp_element_submit::after{
            content: "";
            display: block;
            width: .7em;/* 18/28 */
            height: .7em;
            background-color: #fff;
            -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
            position: absolute;
            right: .5rem;
            bottom: .5rem;
        }

        @media screen and (max-width: 768px) {
            #form_area form#mailformpro .mfp_element_submit{
                font-size: 1.8rem;
            }
        }
    /* ------------------------------
       確認画面
       ------------------------------ */
        #form_area #mfp_phase_confirm_inner h4{
            font-size: 2.4rem;
            font-weight: 700;
            margin-bottom: 1em;
        }
        #form_area #mfp_confirm_table{
            border: none;
            margin-bottom: 6rem;
            position: relative;
        }

        #form_area #mfp_confirm_table th,
        #form_area #mfp_confirm_table td{
            font-size: 1.6rem;
            padding: 1rem;
        }
        #form_area #mfp_confirm_table tr:nth-last-of-type(1) th,
        #form_area #mfp_confirm_table tr:nth-last-of-type(1) td{
            border-bottom: 1px solid #7d7d7d;
        }

        #form_area #mfp_confirm_table th{
            width: 25rem;
            vertical-align: middle;
        }

        #form_area #mfp_confirm_table td{
            width: calc(100% - 25rem);
        }

        @media screen and (max-width: 768px) {
            #form_area #mfp_confirm_table,
            #form_area #mfp_confirm_table tbody,
            #form_area #mfp_confirm_table tr,
            #form_area #mfp_confirm_table th,
            #form_area #mfp_confirm_table td{
                display: block;
                width: 100%;
            }

            #form_area #mfp_confirm_table{
                margin-bottom: 4rem;
            }

            #form_area #mfp_confirm_table th{
                width: 100%;
                padding: 0;
            }

            #form_area #mfp_confirm_table td{
                width: 100%;
                padding: 1.25rem 0 2.25rem;
            }
        }

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

       }

       /* 送信するボタン */
        #form_area .mfp_buttons{
            display: flex;
            justify-content: center;
        }

        #form_area .mfp_buttons button{
            display: block;
            font-size: 2.4rem;
            font-weight: 700;
            box-shadow: none;
            text-shadow: none;
            min-width: 20rem;
            padding: .25em .75em;
            border-radius: 0;
            border: 1px solid #313131;
            position: relative;
            transition: opacity .4s;
        }
        #form_area .mfp_buttons button:hover{
            opacity: .7;
        }

        #form_area .mfp_buttons #mfp_button_send{
            color: #fff;
            background: #e76500;
        }
        #form_area .mfp_buttons #mfp_button_send::after{
            content: "";
            display: block;
            width: .7em;/* 18/28 */
            height: .7em;
            background-color: #fff;
            -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
            position: absolute;
            right: .5rem;
            bottom: .5rem;
        }
        #form_area .mfp_buttons #mfp_button_cancel{
            color: #313131;
            text-decoration: none;
            background-color: #eee;
        }
       @media screen and (max-width: 768px) {

       }

   /* ------------------------------
       サンクスページ
       ------------------------------ */
        .thanks #contact_step_area{
            margin-bottom: 10rem;
        }

        #contact_step_area .guidance_supple{
            margin: 1em 0 6.5em;
        }
        #contact_step_area .c-btn01{
            max-width: 800px;
            margin: 0 auto;
        }

       @media screen and (max-width: 768px) {
            .thanks #contact_step_area{
                margin-bottom: 6rem;
            }

            #contact_step_area .guidance_supple{
                margin: 1em 0 4em;
            }
            #contact_step_area .c-btn01{
                max-width: 800px;
                width: 92%;
                margin: 0 auto;
            }
       }

/* ========================================================
   サイト全体のボタンを「フォーム送信ボタン」のスタイルに統一（完全版）
   ======================================================== */

/* ▼ 基本のサイズとパディング（余白）を統一 ▼ */
.c-btn01,
.wide-btn.is-white {
    font-size: 2.8rem !important; /* PC版の文字サイズを固定 */
    padding: 0.9em 2em !important; /* フォームボタンの黄金比パディング */
    min-height: auto !important;
}

/* ▼ 右下の三角（clip-path）をフォームボタンと同じ作りに統一 ▼ */
.c-btn01::before {
    content: none !important; /* 昔のborderで作っていた三角を消す */
}
.c-btn01::after,
.wide-btn.is-white::after {
    content: "";
    display: block;
    width: 0.7em;
    height: 0.7em;
    background-color: #313131; /* 白ボタンの場合は黒い三角に */
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}
/* オレンジなど濃い背景のボタンの時は、三角を白にする */
.hdr_btn_recruit::after, 
.drawer_btn_recruit::after {
    background-color: #fff;
}

/* ▼ アイコン付きボタンの余白とアイコンサイズ統一 ▼ */
/* テキストがアイコンに被らないように、左にpaddingを作る */
.c-btn01.is-icon > span,
.wide-btn.is-white.is-icon > span,
.wide-btn.is-white.form-btn > span,
.wide-btn.is-white.tel > span,
.wide-btn.is-white.mail > span {
    position: relative !important;
    display: inline-block !important; /* 強制縦積みをリセット */
    padding-left: 2em !important; /* アイコンの幅分(約1.42em)のスペースを空ける */
}

/* アイコン自体の設定（絶対配置で左端にピタッと固定！） */
.c-btn01.is-icon > span::before,
.wide-btn.is-white.form-btn > span::before,
.wide-btn.is-white.tel > span::before,
.wide-btn.is-white.mail > span::before {
    content: "" !important; /* アイコン復活の呪文 */
    width: 1.42em !important; /* フォームボタンのアイコン幅 */
    height: 1em !important;   /* フォームボタンのアイコン高さ */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: absolute !important; /* 絶対配置にして浮かす */
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    display: block !important;
    margin: 0 !important;
}

.wide-btn.is-white.tel > span::before {
	width: 1.45em !important; 
    height: 1.45em !important; 
}

/* ▼ PC版（769px以上）の固有設定 ▼ */
@media screen and (min-width: 769px) {
    /* トップページ等の「2段重ねお問い合わせボタン」の高さを復元 */
    .top_contact_btns .c-btn01 {
        height: 50% !important; 
        padding: 56px 8px !important; 
    }
    
    /* PC版では、電話番号の横のテキスト(受付時間)を「横並び」に強制！ */
    .c-btn01.tel > span > span,
    .wide-btn.is-white.tel > span > span {
        display: inline-block !important;
        margin-left: 1rem !important; /* 電話番号との間に少し隙間 */
        margin-top: 0 !important;
    }
}

/* ▼ スマホ（SP）版（768px以下）のサイズ統一と縦積み ▼ */
@media screen and (max-width: 768px) {
    .c-btn01,
    .wide-btn.is-white {
        font-size: 1.8rem !important; /* フォームボタンのSPサイズに統一 */
        padding: 0.9em 0.8em !important; 
    }
    
    /* 電話番号など2行になるボタンの文字サイズ微調整 */
    .c-btn01 > span > span,
    .wide-btn.is-white .hours {
        font-size: 1.2rem !important;
    }
    
    /* ★電話番号と受付時間をSP版のみ「縦積み」にする！★ */
    .c-btn01.tel > span > span,
    .wide-btn.is-white.tel > span > span {
        display: block !important; /* 塊にして強制改行 */
        margin-left: 0 !important; 
        margin-top: 0.3em !important; 
        line-height: 1.4 !important;
    }
	.c-btn01.is-icon > span, .wide-btn.is-white.is-icon > span, .wide-btn.is-white.form-btn > span, .wide-btn.is-white.tel > span, .wide-btn.is-white.mail > span {
		padding: 0 2em !important;
	}
}