@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-min: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "游明朝体", "Yu Mincho", YuMincho, "Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	--family-go: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--family-num: "Arial", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "sans-serif";

	--color-black: #333;
	--color-white: #fff;
	--color-hover: #2251a1;
	--color-border: #000;
	--color-border-r: #b4b4b4;
	--color-error: #cd401a;

	--color-sub: #f3f3f3;
	--color-sub-hover: #dfdfdf;

	--bg-white: #fff;
	--bg-body: #e3e3e3;
	--bg-body-2: #dbedf2;
	--bg-footer: #c4c4c2;
	--bg-button: rgba(0, 0, 0, 0.6);
	--bg-button-long: #e7e7e7;
	--bg-button-hover: var(--color-hover);
	--bg-tag: #cecece;
	--bg-swiper: #a6a6a6;
	--bg-tab-hover: var(--color-hover);
	--bg-blue: rgba(80, 174, 214, 0.7);
	--bg-blue-r: rgba(80, 174, 214, 0.5);
	--bg-th: #eee;

	--font-xl: 2.2rem;
	--font-ll: 2.0rem;
	--font-l: 1.8rem;
	--font-m: 1.6rem;
	--font-ms: 1.5rem;
	--font-s: 1.4rem;
	--font-ss: 1.3rem;
	--font-xs: 1.2rem;
	--font-xxs: 1.1rem;
	--font-button: var(--font-ss);
	--font-tag: var(--font-ss);
	--font-global: var(--font-ms);
	--font-footer: var(--font-ss);
	--font-sitemap: var(--font-s);
	--font-sitemap-s: var(--font-ss);
	--font-pan: var(--font-s);
	--font-h1: 2.6rem;/*2.8rem;/*3.6rem;*/
	--font-h2: 2.0rem;/*2.6rem;*/
	--font-h3: 1.8rem;/*2.0rem;*/
	--font-h4: 1.6rem;/*1.8rem;*/

	--weight-r: 400;
	--weight-m: 500;
	--weight-b: 700;

	--line-l: 2;
	--line-m: 1.5;
	--line-s: 1.3;

	--wrap-width: 90%;
	--max-width: 1440px;
	--main-width: 1024px;
	--main-width-s: 800px;

	--header-h: 50px;
	--header-logo-w: 38vw;
	--header-logo-max: 200px;
	--footer-logo-w: 210px;
	--button-w: 200px;
	--button-recruit-w: 147px;/*184px;*/

	--margin-180: 180px;
	--margin-120: 120px;
	--margin-90: 90px;
	--margin-80: 80px;
	--margin-60: 60px;
	--margin-30: 30px;
	--margin-20: 20px;
	--margin-10: 10px;
	--margin-5: 5px;

	--button-padding-s: 10px 0 11px;
	--button-padding-m: 15px 0 16px;
	--button-padding-l: 20px 0 21px;
}
/*-----------------------------------------------------------------------------------------------*/


/*html, body { height: 100%; }*/
html { font-size: 62.5%; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*font-feature-settings: "palt";*/
	line-height: 1;
	overflow-x: hidden;
	min-width: 320px;
}
img {
	height: auto;
	width: 100%;
	max-width: 100%;
}
a:link, a:visited, .a {
	transition: color 0.2s ease-out;
	text-decoration: none;
}
a:focus { outline: none; }
a:hover { color: var(--color-hover); }
dt { font-weight: var(--weight-r); }





/* フォント -------------------------------------------------------------------------------------*/
body {
	background-color: var(--bg-white);
	color: var(--color-black);
	font-family: var(--family-go);
	font-weight: var(--weight-r);
}
#top,
#newslist,
#news,
#company,
#about { background-color: var(--bg-body); }
#message,
#interviewlist { background-color: var(--bg-body-2); }

body { opacity: 0; }
.wf-active body,
.wfno-load body { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* wrapper --------------------------------------------------------------------------------------*/
.wrapper {
	margin: 0 auto;
	width: var(--wrap-width);
	max-width: var(--main-width);
}
.header .wrapper,
.footer .wrapper,
.pan .wrapper { max-width: var(--max-width); }

#news .main .wrapper,
#recruitnews .main .wrapper,
#message .main .wrapper,
#interview .main .wrapper { max-width: var(--main-width-s); }
#recruitnews .main .guideline .wrapper,
#interview .interview .wrapper { max-width: var(--main-width); }

#company #information .contents,
#company #history .contents,
#company #access .address,
#company #access .root {
	margin-right: auto;
	margin-left: auto;
	max-width: var(--main-width-s);
}

.main .footercontainer .wrapper { max-width: var(--main-width) !important; }
/*-----------------------------------------------------------------------------------------------*/


/* 共通 -----------------------------------------------------------------------------------------*/
br.pc { display: none; }
.tsume::first-letter { font-feature-settings: "palt"; }

/* ボタン */
.button {
	margin-top: var(--margin-60);
	text-align: center;
}

.button a,
.button .a,
.button input[type="submit"] {
	background-color: var(--bg-button);
	border-radius: 6px;
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-button);
	font-weight: var(--weight-b);
	letter-spacing: 0.15em;
	padding: var(--button-padding-l);	text-align: center;
	transition: background-color 0.2s ease-out;
	min-width: var(--button-w);
}

.button a span,
.button .a span { position: relative; }
.button a span::after,
.button .a span::after {
	background-image: url("../images/icon_arrow.svg");
	background-size: 16px auto;
	content: "";
	height: 16px;
	position: absolute;
	top: 2px;
	width: 16px;
}
.button.rarrow a span,
.button.rarrow .a span { padding-right: 20px; }
.button.rarrow a span::after,
.button.rarrow .a span::after { right: 0; }
.button.larrow a span,
.button.larrow .a span { padding-left: 20px; }
.button.larrow a span::after,
.button.larrow .a span::after { left: 0; transform: rotate(180deg); }

.button a:hover,
.main a:hover .button .a,
.button input[type="submit"]:hover { background-color: var(--bg-button-hover); }

.button a.disabled,
.button input[type="submit"]:disabled {
	cursor: default;
	background-color: var(--bg-tag);
}

.button.hide { display: none; }

/* MORE（丸ボタン） */
.button.viewmore a,
.button.viewmore .a,
.button.viewmore input[type="submit"] {
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	padding: 0;
	width: 95px;
	min-width: auto;
}
.button.uarrow a span,
.button.uarrow .a span { padding-bottom: 5px; }
.button.uarrow a span::after,
.button.uarrow .a span::after {
	background-image: url("../images/icon_arrow_more.svg");
	background-size: 22px auto;
	height: 11px;
	top: auto;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
}
/*-----------------------------------------------------------------------------------------------*/





/*-----------------------------------------------------------------------------------------------*/
/* ヘッダー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.header {
	background-color: var(--color-white);
	height: var(--header-h);
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

/* ロゴ */
.header .logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.header .logo img {
	width: var(--header-logo-w);
	max-width: var(--header-logo-max);
}


/* リクルートボタン -----------------------------------------------------------------------------*/
/*.header .button.recruit {
	margin: 0;
	position: absolute;
	top: 4px;
	right: var(--header-h);
}

.header .button.recruit a {
	padding: 6px 0 8px;
	transform: scale(0.8);
	transform-origin: right;
	min-width: var(--button-recruit-w);
}

.header .button.recruit a span:first-of-type {
	display: block;
	font-size: var(--font-xxs);
	letter-spacing: 0.18em;
	padding-bottom: 4px;
}
.header .button.recruit a span:first-of-type::after { content: none; }

.header .button.recruit a span:last-of-type {
	letter-spacing: 0.07em;
	padding-left: 20px;
}
.header .button.recruit a span:last-of-type::after {
	background-color: var(--color-white);
	background-image: none;
	-webkit-mask-image: url("../images/icon_arrow.svg");
	mask-image: url("../images/icon_arrow.svg");
	-webkit-mask-size: 16px auto;
	mask-size: 16px auto;
	left: 0;
	transform: rotate(-45deg);
}*/
.header .button.recruit {
	margin: 0;
	position: absolute;
	top: 8px;
	right: var(--header-h);
}

.header .button.recruit a {
	padding: var(--button-padding-s);
	min-width: var(--button-recruit-w);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ナビ -----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* ＝ -------------------------------------------------------------------------------------------*/
.nav {
	cursor: pointer;
	height: var(--header-h);
	position: fixed;
	top: 0;
	right: 0;
	width: var(--header-h);
	z-index: 102;
}

.nav span,
.nav span::before,
.nav span::after {
	background-color: var(--color-black);
	content: "";
	height: 2px;
	position: absolute;
	left: 0;
	transition: background-color 0.2s ease-out;
	width: 100%;
}
.nav span {
	top: calc((var(--header-h) / 2) - 1px);
	left: 12px;
	width: calc(var(--header-h) - 24px);
}
.nav span::before { top: -6px; }
.nav span::after { bottom: -6px; }

.nav.actived span { background-color: transparent; }
.nav.actived span::before { top: 0; transform: rotate(45deg); }
.nav.actived span::after { bottom: 0; transform: rotate(-45deg); }

/*.nav:hover span,
.nav:hover span::before,
.nav:hover span::after { background-color: var(--bg-button-hover); }*/

/* × */
@keyframes nav {
	0% { background-color: var(--color-black); }
	100% { background-color: transparent; }
}
.nav.active span {  animation: nav 0.2s linear forwards; }
.nav.reverse span { animation: nav 0.2s linear reverse both; }
@keyframes navt {
	0% { top: -6px; transform: rotate(0deg); }
	50% { top: 0; transform: rotate(0deg); }
	100% { top: 0; transform: rotate(45deg); }
}
.nav.active span::before { animation: navt 0.2s linear forwards; }
.nav.reverse span::before { animation: navt 0.2s linear reverse both; }
@keyframes navb {
	0% { bottom: -6px; transform: rotate(0deg); }
	50% { bottom: 0; transform: rotate(0deg); }
	100% { bottom: 0; transform: rotate(-45deg); }
}
.nav.active span::after { animation: navb 0.2s linear forwards; }
.nav.reverse span::after { animation: navb 0.2s linear reverse both; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* グローバル -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.global {
	background-color: var(--color-white);
	height: calc(100svh - var(--header-h));
	position: fixed;
	top: var(--header-h);
	left: 0;
	transform: translateX(100%);
	width: 100%;
	z-index: 101;
}
.global.ready { transition: transform 0.2s ease-out; }
.global.active { transform: translateX(0); }

.global .wrapper {
	width: 100%;
	max-width: none;
}


/* メニュー -------------------------------------------------------------------------------------*/
.global .menu {
	display: flex;
	flex-direction: column;
}
.global .menu > li { position: relative; }
.global .menu a {
	color: var(--color-black);
	display: block;
	font-size: var(--font-global);
	font-weight: var(--weight-b);
	padding: 15px 0 16px 8%;
	position: relative;
	text-decoration: none;
}

/* サブメニュー */
.global .menu .sub {
	cursor: pointer;
	height: 49px;
	position: absolute;
	top: 0;
	right: 8%;
	width: 49px;
}
.global .menu .sub::before,
.global .menu .sub::after {
	background-color: var(--color-black);
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease-out;
}
.global .menu .sub::before { height: 2px; width: 12px; }
.global .menu .sub::after { height: 12px; width: 2px; }
.global .menu .sub.active::after { opacity: 0; }

.global .menu ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.global .menu ul li { padding-left: 2em; }
.global .menu ul a {
	font-weight: var(--weight-r);
	padding-top: 10px;
	padding-bottom: 11px;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* パンくず -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*.pan { background-color: var(--bg-body); }*/

.pan ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5em;
	font-size: var(--font-pan);
}
.pan a,
.pan span {
	display: inline-block;
	padding: 20px 0 21px;
}
.pan li:not(:last-child)::after {
	content: "＞";
	padding-left: 0.5em;
}

.pan li:first-child {
	padding-left: 20px;
	position: relative;
}
.pan li:first-child::before {
	background-color: #7e7e7e;
	content: "";
	height: 16px;
	mask-image: url("../images/icon_home.svg");
	mask-size: 18px auto;
	position: absolute;
	top: calc(50% - 8px);
	left: 0;
	transition: background-color 0.2s ease-out;
	width: 18px;
}

.pan li:last-child { display: none; }
.pan li:nth-child(2) { display: block; }

.pan a:hover {
	color: var(--color-hover);
	text-decoration: underline;
}
.pan li:first-child:hover::before { background-color: var(--color-hover); }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* フッター -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.footer {
	background-color: var(--bg-footer);
	padding: 50px 0;
}


/* サイトマップ ---------------------------------------------------------------------------------*/
.footer .sitemap { text-align: center; }
.footer .sitemap > ul {
	display: inline-flex;
	flex-direction: column;
	row-gap: 30px;
	text-align: left;
}
.footer .sitemap .sub { margin-top: 10px; }

.footer .sitemap a {
	display: inline-block;
	font-size: var(--font-sitemap);
	font-weight: var(--weight-b);
	padding: 7px 0 8px;
}
.footer .sitemap .sub a {
	font-size: var(--font-sitemap-s);
	font-weight: var(--weight-r);
}
.footer .sitemap a + .sub a {
	padding-left: 1em;
	text-indent: -1em;
}
.footer .sitemap a + .sub a::before { content: "－"; }

.footer .sitemap a:hover { text-decoration: underline; }


/* インフォメーション ---------------------------------------------------------------------------*/
.footer .info {
	margin-top: var(--margin-60);
	text-align: center;
}

.footer .logo img { width: var(--footer-logo-w); }
.footer .address {
	font-size: var(--font-footer);
	margin-top: 10px;
}

/* プライバシーポリシー */
.footer .info .law { display: none; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ボディー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main {
	padding-bottom: var(--margin-120);

	line-break: strict; /* 禁則処理を厳格に適用 */
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
}

.main .container { padding-top: calc(var(--header-h) + var(--margin-20)); }
.main .container:not(:first-of-type),
#top .main .container.about {
	margin-top: var(--margin-120);
	position: relative;
}
.main .container:not(:first-of-type)::before,
#top .main .container.about::before {
	background-color: var(--color-black);
	content: "";
	height: 1px;
	position: absolute;
	top: var(--header-h);
	left: 0;
	width: 100%;
}

.main h1 {
	font-size: var(--font-h1);
	font-weight: var(--weight-m);
	letter-spacing: 0.1em;
	line-height: var(--line-m);
}
.main h2 {
	font-size: var(--font-h2);
	font-weight: var(--weight-b);
	letter-spacing: 0.08em;
	line-height: var(--line-m);
	padding-bottom: var(--margin-30);
}
.main h3 {
	font-size: var(--font-h3);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
}
.main h4 {
	font-size: var(--font-h4);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
}


/* タグ -----------------------------------------------------------------------------------------*/
.main .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.main .tag a,
.main .tag .a {
	background-color: var(--bg-tag);
	border-radius: 13px;
	display: inline-block;
	font-size: var(--font-tag);
	padding: 6px 1em 7px;
	transition: 0.2s ease-out;
	transition-property: background-color, color;
}
.main .tag a:hover,
.main .tag a.on,
.main .tag .a.on {
	background-color: var(--bg-tab-hover);
	color: var(--color-white);
}


/* 見出し ---------------------------------------------------------------------------------------*/
.main .midashi {
	margin-top: var(--margin-90);
	padding-bottom: var(--margin-20);
	position: relative;
}
.main .midashi.under { border-bottom: var(--color-border) solid 1px; }

/* アンカーリンク */
.main .midashi .anchor .arrow {
	cursor: pointer;
	height: 21px;
	position: absolute;
	top: 15px;
	right: 0;
	width: 21px;
}
.main .midashi .anchor .arrow::after {
	border-top: var(--color-black) solid 2px;
	border-right: var(--color-black) solid 2px;
	content: "";
	height: 13px;
	position: absolute;
	top: 0;
	left: 4px;
	transform: rotate(135deg);
	width: 13px;
}
.main .midashi .anchor .arrow.active::after {
	top: 4px;
	transform: rotate(-45deg);
}

.main .midashi .anchor ul {
	border-top: var(--color-black) solid 1px;
	border-right: var(--color-black) solid 1px;
	border-left: var(--color-black) solid 1px;
	margin-top: 10px;

	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.main .midashi .anchor li { border-bottom: var(--color-black) solid 1px; }
.main .midashi .anchor a {
	display: block;
	font-size: var(--font-m);
	padding: 13px 1em 15px;
}

/* タグ */
.main .midashi.wrap {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-10);
}
.main .midashi.wrap h2 { padding-bottom: 0; }


/* テキスト -------------------------------------------------------------------------------------*/
/* リード */
.main .read {
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: justify;
}
/* コメント */
.main .comment {
	font-size: var(--font-m);
	line-height: var(--line-l);
	text-align: justify;
}
.main .comment p:not(:first-of-type) { margin-top: 2em; }


/* キャリア・アルバイト、新卒採用ボタン ---------------------------------------------------------*/
.main .banner a {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0.48%, rgba(201, 201, 201, 0.30) 64.42%, rgba(121, 121, 121, 0.30) 99.52%), #666;
	border: var(--color-border-r) solid 1px;
	border-radius: 6px;
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	letter-spacing: 0.12em;
	padding: 35px var(--margin-20) 37px;/*48px 0 50px;*/
	text-align: center;
	transition: background 0.2s ease-out;
	width: 100%;
}
.main .banner a span {
	display: inline-block;
	padding-right: 54px;
	position: relative;
	text-align: left;
}
.main .banner a span::after {
	background-image: url("../images/icon_arrow_recruit.svg");
	background-size: 34px auto;
	content: "";
	height: 34px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 34px;
}

/* 新卒採用 */
.main .banner .new a {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0.48%, rgba(201, 201, 201, 0.30) 64.42%, rgba(121, 121, 121, 0.30) 99.52%), #19a0cc;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--margin-10);
	height: 140px;/*160px;*/
}
.main .banner .new a span { font-size: 2.4rem;/*3.0rem;*/ }
.main .banner .new a p {
	font-size: var(--font-m);
	line-height: var(--line-s);
	padding: 0 var(--margin-10);
	text-align: center;
}

.main .banner a:hover,
.main .banner .new a:hover { background: linear-gradient(180deg, rgba(121, 121, 121, 0.20) 0.48%, rgba(201, 201, 201, 0.20) 35.58%, rgba(255, 255, 255, 0.20) 99.52%), var(--hover, #2251a1); }

/* swiper */
.main .swiper-container { position: relative; }
.main .swiper-button-next,
.main .swiper-button-prev {
	background-color: rgba(255, 255, 255, 0.6);
	height: 72px;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}
.main .swiper-button-next { right: 0; }
.main .swiper-button-prev { left: 0; }

.main .swiper-button-next::after,
.main .swiper-button-prev::after {
	background-color: var(--color-black);
	content: "";
	mask-image: url("../images/icon_slide_arrow.svg");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 20px auto;/*30px auto;*/
	height: 100%;
	width: 100%;
}
.main .swiper-button-prev::after { transform: rotate(180deg); }
.main .swiper-button-next.swiper-button-disabled,
.main .swiper-button-prev.swiper-button-disabled { opacity: 0; }

.main .swiper-pagination { bottom: -20px !important; }
.main .swiper-pagination-bullet {
	background-color: var(--bg-button-long);
	height: 8px;
	opacity: 1;
	margin: 0 6px !important;
	width: 8px;
}
.main .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--bg-button-hover); }

/* swiper off */
.main .swiper.off .swiper-button-prev,
.main .swiper.off .swiper-button-next { display: none; }


/* リスト ---------------------------------------------------------------------------------------*/
.main .newslist {
	display: flex;
	flex-direction: column;
	gap: var(--margin-80) 4%;
	margin-top: var(--margin-20);
}
.main .newslist li.hide { display: none; }

.main .newslist .image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
}
.main .newslist .image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-out;
}

.main .newslist .datetags,
.main .midashi .datetags {
	display: flex;
	justify-content: space-between;
	margin-top: var(--margin-10);
}
.main .newslist .date,
.main .midashi .date {
	font-size: var(--font-s);
	margin-top: var(--margin-5);
}
.main .midashi .tags { flex: 1; }
.main .newslist .title {
	font-size: var(--font-ms);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	margin: var(--margin-5) 0;
}
.main .newslist .comment {
	font-size: var(--font-s);
	line-height: var(--line-m);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* 現在募集中の職種、関連情報 */
#top .main,
/*#newslist .main,*/
#news .main,
#recruitnews .main,
#environment .main,
#interviewlist .main,
#interview .main,
#job .main { padding-bottom: 0; }

.main .footercontainer {
	background-color: var(--bg-blue);
	margin-top: var(--margin-180);
	padding: var(--margin-60) 0;
}
#top .main .footercontainer,
#newslist .main .footercontainer,
#news .main .footercontainer {
	background-color: transparent;
	border-top: var(--color-black) solid 1px;
}

.main .footercontainer .midashi { margin-top: 0; }

.main .footercontents { margin-top: var(--margin-20); }
.main .footercontents .wrapper { width: 100%; }

.main .footercontents .image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	position: relative;
}
.main .footercontents .image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-out;
}
.main .footercontents .title {
	font-size: var(--font-ms);
	line-height: var(--line-m);
	margin-top: var(--margin-10);
}

/* hover */
.main .newslist a:hover .tag .a {
	background-color: var(--bg-tab-hover);
	color: var(--color-white);
}
.main .newslist a:hover .image img,
.main .footercontents a:hover .image img { transform: scale(1.02); }


/* swiper off */
.main .footercontents.off .wrapper { width: var(--wrap-width); }
.main .contentslist.off .swiper-wrapper {
	display: flex;
	justify-content: center;
	column-gap: 4%;
}


/* インタビューリスト ---------------------------------------------------------------------------*/
.main .interviewlist {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--margin-80) 4%;
	margin: 0 auto;
	max-width: var(--main-width);
}

.main .interviewlist .image {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	margin: 0 auto;
	overflow: hidden;
	max-width: 280px;
}
.main .interviewlist .image img {
	height: 100%;
	object-fit: cover;
}
.main .interviewlist .text {
	margin-top: var(--margin-20);
	text-align: center;
}
.main .interviewlist .catch {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}
.main .interviewlist .name {
	font-size: var(--font-s);
	line-height: var(--line-s);
	margin-top: var(--margin-10);
}

.main .interview .midashi {
	margin-top: 0;
	padding-bottom: 0;
}
.main .interview h2 { padding-bottom: 0; }
.main .interview .more {
	font-size: var(--font-m);
	margin-top: var(--margin-20);
	text-align: right;
}
.main .interview .interviewlist { margin-top: var(--margin-60); }

/* coming soon... */
.main .interviewlist.comingsoon { justify-content: center; }
.main .interviewlist.comingsoon .catch { color: var(--bg-swiper); }


/* 表 -------------------------------------------------------------------------------------------*/
.main .table { border-bottom: var(--color-border-r) solid 1px; }
.main .table dt,
.main .table dd {
	line-height: var(--line-l);
	padding: 10px var(--margin-20) 12px;
}
.main .table dt {
	border-top: var(--color-border-r) solid 1px;
	border-right: var(--color-border-r) solid 1px;
	border-left: var(--color-border-r) solid 1px;
	background-color: var(--bg-th);
	font-size: var(--font-ms);
	font-weight: var(--weight-b);
	white-space: nowrap;
}
.main .table dd {
	border-right: var(--color-border-r) solid 1px;
	border-left: var(--color-border-r) solid 1px;
	background-color: var(--bg-white);
	font-size: var(--font-m);
	text-align: justify;
}

.main .table h3:first-of-type { margin-top: 0; }
.main .table h3:not(:first-of-type),
.main .table p:not(:first-of-type),
.main .table ul:not(:first-of-type),
.main .table ol:not(:first-of-type) { margin-top: 2em; }
.main .table * + p,
.main .table * + ul,
.main .table * + ol { margin-top: 0 !important; }
.main .table h3 { font-size: var(--font-m); }
.main .table li {
	padding-left: 1em;
	text-indent: -1em;;
}


/* 働く環境を知る、スタッフに聞く 島暮らし ------------------------------------------------------*/
.main .work .button,
.main .life .button { margin-top: var(--margin-30); }
.main .work .image .button,
.main .life .image .button { display: none; }

.main .work .comment,
.main .life .comment { margin-top: var(--margin-30); }


/* 仕事を知る -----------------------------------------------------------------------------------*/
.main .button.long {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
	margin-top: 0;
}
.main .button.long a,
.main .button.long .a {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
	line-height: var(--line-s);
	padding: 10px var(--margin-20) 12px;
	position: relative;
	text-align: left;
}
.main .button.long .a {
	background-color: var(--bg-button-long);
	color: var(--color-black);
}

.main .button.long a .group,
.main .button.long .a .group {
	display: flex;
	column-gap: var(--margin-20);
	font-size: var(--font-m);
}
.main .button.long a .detail,
.main .button.long .a .detail {
	font-size: var(--font-s);
	font-weight: var(--weight-r);
	text-align: justify;
}

.main .button.long a { padding-right: 40px; }
.main .button.long a::after {
	background-color: var(--color-white);
	background-image: none;
	-webkit-mask-image: url("../images/icon_arrow.svg");
	mask-image: url("../images/icon_arrow.svg");
	-webkit-mask-size: 16px auto;
	mask-size: 16px auto;
	content: "";
	height: 16px;
	position: absolute;
	top: 50%;
	right: var(--margin-20);
	transform: translateY(-50%);
	width: 16px;
}

.main .career .button.long .detail { text-align: left; }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* リスト ---------------------------------------------------------------------------------------*/
	.main .newslist {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.main .newslist li { width: calc((100% - 4%) / 2); }
	/* 現在募集中の職種、関連情報 */
	/* swiper off */
	.main .contentslist.off .swiper-wrapper {
		flex-direction: row;
		column-gap: 4%;
	}
	.main .contentslist.off li { width: calc((100% - 4%) / 2); }
	/* インタビューリスト ---------------------------------------------------------------------------*/
	.main .interviewlist {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.main .interviewlist li { width: calc((100% - 4%) / 2); }
	/* swiper off */
	.main .interviewlist.off .swiper-wrapper {
		flex-direction: row;
		justify-content: center;
		column-gap: 4%;
	}
	/* coming soon... */
	.main .comingsoon .interviewlist li { width: 100%; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/* 共通 -----------------------------------------------------------------------------------------*/
	br.pc { display: inline; }
	br.sp { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* パンくず -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.pan li:last-child { display: block; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 見出し ---------------------------------------------------------------------------------------*/
	/* タグ */
	.main .midashi.wrap {
		flex-direction: row;
		column-gap: var(--margin-30);
	}
	.main .midashi.wrap .tags {
		flex: 1;
		margin-top: 7px;
	}
	/* リスト ---------------------------------------------------------------------------------------*/
	.main .newslist li { width: calc((100% - 8%) / 3); }
	/* 現在募集中の職種、関連情報 */
	.main .footercontainer .midashi.wrap .tags { margin-top: 2px; }
	/* swiper off */
	.main .contentslist.off li { width: calc((100% - 8%) / 3); }
	/* インタビューリスト ---------------------------------------------------------------------------*/
	.main .interviewlist li { width: calc((100% - 8%) / 3); }
	/* 表 -------------------------------------------------------------------------------------------*/
	.main .table {
		display: table;
		width: 100%;
	}
	.main .table dl { display: table-row; }
	.main .table dt,
	.main .table dd {
		display: table-cell;
		padding: 20px 20px 22px;
	}
	.main .table dt { border-right: none; }
	.main .table dd {
		border-top: var(--color-border-r) solid 1px;
		border-left: none;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	:root {
		--header-h: 80px;
		--header-logo-max: 230px;
	}

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header .wrapper {
		position: relative;
		height: 100%;
	}
	/* リクルートボタン -----------------------------------------------------------------------------*/
	.header .button.recruit {
		top: 18px;
		right: 0;
	}
	.header .button.recruit a {
		padding: var(--button-padding-m);
		min-width: var(--button-w);
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ナビ -----------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ＝ -------------------------------------------------------------------------------------------*/
	.nav { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global {
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--header-h);
		margin-top: calc(var(--header-h) * -1);
		overflow: visible;
		pointer-events: none;
		position: sticky;
		top: 0;
		left: auto;
		transform: none;
		width: 100%;
		z-index: 104;
	}
	.global .wrapper {
		width: var(--wrap-width);
		max-width: var(--max-width);
	}
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu {
		flex-direction: row;
		justify-content: flex-end;
		column-gap: var(--margin-30);
		margin-right: calc(var(--button-w) + 6%);
	}
	.global .menu a {
		padding-left: 0;
		pointer-events: auto;
		white-space: nowrap;
	}
	.global .menu > li > a::after {
		background-color: transparent;
		content: "";
		height: 2px;
		position: absolute;
		bottom: 5px;
		left: -5px;
		transform: scaleX(0);
		transition: 0.2s ease-out;
		transition-property: background-color transform;
		width: calc(100% + 10px);
	}
	.global .menu > li > a:hover::after {
		background-color: var(--color-hover);
		transform: scaleX(1);
	}
	.global .menu > li > a:hover { color: var(--color-hover); }
	/* サブメニュー */
	.global .menu .sub { display: none; }
	.global .menu .sub::before,
	.global .menu .sub::after { content: none; }
	.global .menu ul {
		background-color: var(--color-sub);
		position: absolute;
		top: 49px;
		left: calc(-2em + -5px);
		min-width: calc(100% + 10px);
		z-index: 1;
	}
	.global .menu ul li {
		border-bottom: var(--color-white) solid 1px;
		padding-left: 0;
	}
	.global .menu ul a {
		/*color: var(--color-white);*/
		padding: 15px 2em 16px;
		white-space: nowrap;
		min-width: 230px;
	}
	.global .menu ul a:hover { background-color: var(--color-sub-hover); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/*.footer .wrapper { position: relative; }*/
	.footer .wrapper {
		display: flex;
		justify-content: center;
	}
	.footer .wrapper > div { position: relative; }
	/* サイトマップ ---------------------------------------------------------------------------------*/
	/*.footer .sitemap { text-align: left; }*/
	.footer .sitemap > ul {
		flex-direction: row;
		column-gap: 50px;
	}
	.footer .sitemap li:last-child { display: none; }
	/* インフォメーション ---------------------------------------------------------------------------*/
	.footer .info {
		display: flex;
		align-items: flex-end;
		column-gap: 70px;
		text-align: left;
	}
	/* プライバシーポリシー */
	.footer .info .law {
		display: flex;
		column-gap: 1em;
		font-size: var(--font-footer);
	}
	.footer .info .law li:not(:last-child)::after {
		content: "｜";
		padding-left: 1em;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main { padding-bottom: var(--margin-180); }
	/* 見出し ---------------------------------------------------------------------------------------*/
	.main .midashi { margin-top: var(--margin-120); }
	.main .midashi.anchormenu {
		border-bottom: var(--color-black) solid 1px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--margin-20);
	}
	/* アンカーリンク */
	.main .midashi .anchor .arrow { display: none; }
	.main .midashi .anchor ul {
		border: none;
		display: flex;
		column-gap: var(--margin-30);
		margin-top: 0;
		max-height: none !important;
	}
	.main .midashi .anchor li { border-bottom: none; }
	.main .midashi .anchor a { padding: 0 0 1px; }
	.main .midashi .anchor a:hover { text-decoration: underline; }
	/* リスト ---------------------------------------------------------------------------------------*/
	/* swiper off */
	.main .contentslist.off li { width: calc((100% - 12%) / 4); }
	/* 働く環境を知る、スタッフに聞く 島暮らし ------------------------------------------------------*/
	.main .work .button,
	.main .life .button { display: none; }
	.main .work .image,
	.main .life .image { position: relative; }
	.main .work .image .button,
	.main .life .image .button {
		display: block;
		position: absolute;
		right: var(--margin-20);
		bottom: var(--margin-20);
	}
	/* 表 -------------------------------------------------------------------------------------------*/
	.main .table dt,
	.main .table dd {
		padding-right: var(--margin-30);
		padding-left: var(--margin-30);
	}
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	.main .button.long a,
	.main .button.long .a {
		flex-direction: row;
		align-items: center;
		column-gap: var(--margin-30);
		padding-top: 20px;
		padding-bottom: 22px;
	}
	.main .button.long a .group,
	.main .button.long .a .group {
		width: 30%;
		max-width: 270px;
	}
	.main .button.long a .detail,
	.main .button.long .a .detail { flex: 1; }

	.main .career .button.long .group {
		width: 15%;
		max-width: 150px;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	:root {
		/*--font-h1: 3.2rem;/*3.6rem;*/
		/*--font-h2: 2.3rem;/*2.6rem;*/
		/*--font-h3: 2.0rem;*/

		--header-h: 100px;
		--header-logo-max: 265px;
		--footer-logo-w: 243px;
	}

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* リクルートボタン -----------------------------------------------------------------------------*/
	.header .button.recruit { top: 23px; }
	.header .button.recruit a { padding: var(--button-padding-l); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu { column-gap: var(--margin-60); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap > ul { column-gap: 100px; }
	/* インフォメーション ---------------------------------------------------------------------------*/
	.footer .info .location {
		display: flex;
		align-items: flex-end;
		column-gap: 40px;
	}
	/* プライバシーポリシー */
	.footer .info .law {
		display: flex;
		column-gap: 1em;
		font-size: var(--font-footer);
	}
	.footer .info .law li:not(:last-child)::after {
		content: "｜";
		padding-left: 1em;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ボディー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 見出し ---------------------------------------------------------------------------------------*/
	/* 働く環境を知る、スタッフに聞く 島暮らし ------------------------------------------------------*/
	.main .work .image .button,
	.main .life .image .button {
		right: var(--margin-30);
		bottom: var(--margin-30);
	}
	/* 仕事を知る -----------------------------------------------------------------------------------*/
	.main .button.long a,
	.main .button.long .a { padding: 30px var(--margin-30) 32px; }
	.main .button.long a .group,
	.main .button.long .a .group { font-size: var(--font-l); }
	.main .button.long a .detail,
	.main .button.long .a .detail { font-size: var(--font-m); }
	.main .button.long a { padding-right: var(--margin-60) }
	.main .button.long a::after { right: var(--margin-30); }
	/*-----------------------------------------------------------------------------------------------*/
}