﻿ @charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 18px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;		/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}
a:hover {
	color: #b01212;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*コンテナー（ホームページを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1500px;	/*slide.cssの「#mainimg, #subimg」と設定と合わせる*/
	margin: 0 auto;
	border-top: 4px solid #b01212;	/*一番上に入っているアクセントライン。幅、線種、色。*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: relative;z-index: 1;
	height: 140px;	/*ヘッダーの高さ*/
	background: #fff;	/*背景色*/
}
/*ロゴ画像*/
header #logo img {
	width: 300px;	/*画像幅*/
	position: absolute;
	left: 3%;		/*ヘッダーに対して左から3%の場所に配置*/
	top: 38px;	/*ヘッダーに対して上から38pxの場所に配置*/
}

/*コンテンツ。メニューの下にある白い背景色のブロック。
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;position: relative;
	padding: 10% 3% 2% 3%;		/*上下、左右へのボックス内の余白*/
	margin: 0 3% 50px;	/*上、左右、下へのボックスの外側への余白*/
}
/*h2タグ*/
#contents h2 {
	clear: both;
	margin-bottom: 40px;	/*下に空けるボックスの外側への余白*/
	font-size: 250%;		/*文字サイズ*/
	text-align: center;		/*文字を中央に*/
	line-height: 1.5;		/*行間を基準より少し狭くする*/
}
/*h2タグ内のspanタグ（英語の飾り文字）*/
#contents h2 span {
	display: block;
	font-size: 40%;	/*文字サイズ*/
	color: #b01212;	/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
}
/*h3タグ*/
#contents h3 {
	clear: both;
	font-size: 200%;		/*文字サイズ*/
	margin-top: 20px;	/*下に空けるボックスの外側への余白*/
	margin-bottom: 10px;	/*下に空けるボックスの外側への余白*/
	text-align: left;		/*文字を中央に*/
	position: sticky;
    top: 0;
}

/*段落タグ*/
#contents p {
	padding: 0 20px 40px;
}
#contents p + p {
	margin-top: -10px;
}
/*section同士の余白*/
#contents section + section {
	margin-top: 40px;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;		/*文字を中央に*/
	font-size: 70%;			/*文字サイズ*/
	background: #b01212;	/*背景色*/
}
/*リンクテキスト*/
footer a {color: #fff;}
footer a:hover {color: #fff;}
/*著作部分*/
footer .pr {display: block;}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	background: #333;	/*背景色*/
	color: #fff;		/*文字色*/
}
#copyright a {text-decoration: none;}

/*ページの上部へボタン「↑」設定
---------------------------------------------------------------------------*/
@keyframes scroll {0% {opacity: 0;}100% {opacity: 1;}}
body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 3;
	position: fixed;
	bottom: 20px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #666;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/*追加用CSS
---------------------------------------------------------------------------*/

/*トップタイトルグラデーションイン
--------------------------*/
.view::after{
    content: "";
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    transform: translateX(-50%);
    transition: all 1s ease-in-out .3s;
}
.view img{
    vertical-align: middle;
}
.view.js-on::after{
    animation: viewinMask 1s ease-in-out forwards;
}
@keyframes viewinMask{
    0%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(50%);
    }
}
/*指定フォント*/
h2{
	font-family: "BIZ UDMincho", serif;
	font-weight: 400;
	font-style: normal;
}

/*トップテキスト
--------------------------*/
.maintext{
	font-family: "BIZ UDMincho", serif; 
	font-weight: 400;
	font-style: normal;
	padding: 80px 40% 80px 70px;
	margin-bottom: 50px;
	line-height: 40px;
	background-image: url(../images/honsya1.png);    /* 背景画像指定 */
	background-size: cover;
}
/*横スライドイン　各部門紹介
--------------------------*/
/*左右から画像スライドイン*/
.sclool{
	overflow: hidden;
	width: 50%;
}
.slidein{
/* 装飾に関わるスタイルは省略 */
	margin: 50px auto;
	transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
}
.slide_left{
	transform: translateX(calc(-50vw - 50%));
}
.slide_right{
	transform: translateX(calc(50vw + 50%));
}
.show{
	transform: translateX(0);
}
.display-flex_left{
	display: flex;
}
.display-flex_right{
	display: flex;
	flex-direction: row-reverse;
}
/*左からイン（テキスト）*/
.subtext{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:350;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	margin: 50px;
	text-align: left;
	line-height: 1.5;	/*行間を少し狭くする*/
}
.subtext a{
	color: none;		/*リンクテキストの色*/
	transition: none;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
	color: none;			/*マウスオン時の文字色*/
	text-decoration: none;
}

.sub_title{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:700;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:30px;
	color: #b01212;
}
.sub_title p{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:300;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:0.7em;
	color:#333;
}
/*右からイン（テキスト）*/
.subtext2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:350;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	margin: 50px;
	text-align:right;
	line-height: 1.5;	/*行間を少し狭くする*/
}
.subtext2 a{
	color: none;		/*リンクテキストの色*/
	transition: none;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
	color: none;			/*マウスオン時の文字色*/
	text-decoration: none;
}
.sub_title2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:700;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:30px;
	text-align:right;
}
.sub_title2 p{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:300;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:0.7em;
	text-align:right;
}
.sub_title2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:700;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:30px;
	text-align:right;
}
.sub_title2 p{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:300;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size:0.7em;
	text-align:right;
}
/*ボタン装飾*/
.button-36 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin-top: 1em;
    padding: .9em 2em;
    border: 1px solid #b01212;
    border-radius: 5px;
    background-color: #fff;
    color: #b01212;
    font-size: 1em;
}
.button-36:hover {
    border: none;
    background-color: #b01212;
    color: #fff;
    font-weight: 600;
}
.button-36::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #b01212;
    border-right: 2px solid #b01212;
    content: '';
}
.button-36:hover::after {
    border-color: #fff;
}

/*ワークスタイル
--------------------------*/
.link-area{
	display: flex;
	margin: 0em 0em 15em 0em;
}
.link-box{
	flex: 1;
	padding: 80px 60px;
	position: relative;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* 真ん中のライン */
.link-box:first-child{
	border-right: 1px solid #ddd;
}
/* タイトル */
.link-box h2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:700;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size: clamp(50px, 6vw, 90px);
	letter-spacing: 0.05em;
	color: #333;
	line-height: 1;
	margin-bottom: 10px;
}
/* サブタイトル */
.link-box p{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:400;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size: 25px;
	color: #d60000;
}
/* ボタン位置 */
.link-btn-wrap{
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
}
/* ボタン */
.link-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 14px 32px;
	border: 2px solid #333;
	border-radius: 100px;
	color: #333;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: 0.3s;
}
/* 丸矢印 */
.link-btn span{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24px;
	transition: 0.3s;
}
/* hover */
.link-btn:hover{
	background: #333;
	color: #fff;
	transform: translateY(-3px);
}
.link-btn:hover span{
	background: #fff;
	color: #333;
}

/*全体背景画像
--------------------------*/
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: -1;
}
.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}

/*=============
base
==============*/

html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: .025em;
  line-height: 1.8;
}
* {
  box-sizing: border-box;
}
.section {
  max-width: 1024px;
  margin: 0 auto;
  padding: 100px 20px 1000px;
}
._a {
  max-width: 300px;
  margin: 0 auto;  
}
._a a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2.0em 1.0em;
  border: 1px solid #222222;
  background: linear-gradient(to right, #ffffff 50%, #222222 50%);
  background-size: 200% auto;
  color: #222222;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
._a a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #222222;
  border-bottom: 1px solid #222222;
}
._a a:hover {
  color: #ffffff;
  background-position: -100% 0;
}

/*横スライドアニーメーション用CSS
---------------------------------------------------------------------------*/
/* セクション共通スタイル */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
    max-width: 800px;
    text-align: center;
    color: white;
}
.container h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.container p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* 働く環境　カード横スクロール
---------------------------------------------------------------------------*/
.horizontal-section {
	position: relative;
    overflow: hidden;
	height: auto;
	margin-top:5em;
}
.section-title{
	text-align: center;
	margin-bottom: 40px;
}
.section-title h2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:500;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size: 40px;
	margin-bottom: 10px;
}
.section-title p{
	font-size: 20px;
	opacity: 0.7;
}
.horizontal-container {
	min-height: 100vh; /* ←これが本命 */
	display: flex;
	align-items: flex-start;
}
.horizontal-scroll {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    width: max-content;
}
.scroll-item {
    min-width: 500px;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.scroll-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.scroll-item h3 {
    color: #b01212;
    margin: 1rem 0rem;
    font-size: 1.5rem;
	line-height: 1.5; /* 行間の倍率 */
	text-align: center;
}
.scroll-item p {
    color: #666;
    line-height: 1.6;
	text-align: center;
}
/* よくある質問（トップページ用）
---------------------------------------------------------------------------*/
.faq-section{
	display: flex;
	gap: 80px;
	padding: 100px 5%;
	margin-bottom: 3em;
}
/* 左タイトル */
.faq-title{
	min-width: 260px;
}
.faq-title h2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:500;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 10px;
}
.faq-title p{
	font-size: 25px;
	font-weight: 600;
	color: #b01212;
}
/* 右FAQ */
.faq-list{
	flex: 1;
}
.faq-item{
	border-top: 1px solid #d8dce5;
}
.faq-item:last-child{
	border-bottom: 1px solid #d8dce5;
}
/* 質問 */
.faq-question{
	width: 100%;
	background: none;
	border: none;
	padding: 35px 0;
	display: flex;
	align-items: center;
	gap: 25px;
	cursor: pointer;
	text-align: left;
	position: relative;
}
/* Q */
.faq-question .q{
	font-size: 23px;
	font-weight: 750;
	color: #b01212;
	line-height: 1;
}
/* テキスト */
.faq-question .text{
	flex: 1;
	font-size: 17px;
	line-height: 1.7;
	color: #333;
}
/* 回答 */
.faq-answer{
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.5s ease,
		opacity 0.4s ease;
	opacity: 0;
}
/* 中身 */
.faq-answer-inner{
	padding: 0 0 35px 70px;
}
.faq-answer-inner p{
	font-size:15px;
}
/* 開いた時 */
.faq-item.active .faq-answer{
	opacity: 1;
}
/* 矢印 */
.faq-question .icon{
	width: 12px;
	height: 12px;
	border-right: 2px solid #b01212;
	border-bottom: 2px solid #b01212;
	transform: rotate(45deg);
	transition: transform 0.4s ease;
}
/* 開いた時 */
.faq-item.active .icon{
	transform: rotate(-135deg);
	margin-top: 8px;
}
/*ボタン------------------------*/
/* 全体 */
.faq-more{
	margin-top: 20px;
	margin-right: 1.5em;
	position:absolute;
	right:0;
	display: flex;
	justify-content: flex-end;
}
/* ボタン */
.viewmore-btn{
	display: flex;
	align-items: center;
	gap: 25px;
	text-decoration: none;
	color: #333;
	font-size: 20px;
	font-weight: 700;
	transition: 0.3s;
}
/* 円 */
.viewmore-btn .circle{
	width: 50px;
	height: 50px;
	border: 1.5px solid #b01212;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s ease;
}
/* 矢印 */
.viewmore-btn .arrow{
	position: relative;
	width: 22px;
	height: 2px;
	background: #b01212;
	transition: 0.4s ease;
}
/* 矢印先 */
.viewmore-btn .arrow::after{
	content: "";
	position: absolute;
	right: 0;
	top: -4px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #b01212;
	border-right: 2px solid #b01212;
	transform: rotate(45deg);
}
/* hover */
.viewmore-btn:hover .circle{
	background: #b01212;
	border-color: #b01212;
	transform: translateX(5px);
}
/* hover矢印 */
.viewmore-btn:hover .arrow{
	background: #fff;
}
.viewmore-btn:hover .arrow::after{
	border-color: #fff;
}
/* テキスト */
.viewmore-btn .label{
	position: relative;
	top: 2px;
}

/*応募フォーム
--------------------------*/
/* =========================
   Recruit Banner
========================= */
.recruit-banner{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-weight:500;/*指定フォント太さ*/
	font-style: normal;/*指定フォント*/
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	border-radius: 24px;
	overflow: hidden;
	background: #999;
	margin: 80px 2em;
}
/* =========================
   Image
========================= */
.recruit-image{
	height: 100%;
}
.recruit-image img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}
/* =========================
   Content
========================= */
.recruit-content{
	padding: 70px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
}
/* 小タイトル */
.recruit-sub{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 30px;
	opacity: 0.95;
}
/* タイトル */
.recruit-content h2{
	font-family: "Noto Sans JP", sans-serif;/*指定フォント*/
	font-optical-sizing: auto;/*指定フォント*/
	font-style: normal;/*指定フォント*/
	font-size: 25px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	margin-bottom: 40px;
}
/* 本文 */
.recruit-text{
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
	margin-bottom: 50px;
}
/* ボタン */
.recruit-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 20px 34px;
	background: #fff;
	color: #4E4E4E;
	border-radius: 100px;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s ease;
}
/* 矢印 */
.recruit-btn::after{
	content: "↗";
	margin-left: 14px;
	font-size: 18px;
	transition: transform 0.3s ease;
}
/* hover */
.recruit-btn:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.recruit-btn:hover::after{
	transform: translate(3px,-3px);
}

/*フッターメニュー
--------------------------*/
.footer-001 {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 25px 10px 10px;
    background-color: #b01212;
}
.footer-001__logo {
    width: 200px;
    height: auto;
	margin-bottom:10px;
}
.footer-001__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.5em;
    list-style-type: none;
    margin: 0 0 .5em;
    padding: .5em;
}
.footer-001__link {
    color: #fff;
    font-weight: 200;
    text-decoration: none;
}
.footer-001__copyright {
    margin: 0;
    color: #ffffffb3;
    font-weight: 200;
    font-size: .8em;
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo img {
	top: 20px;	/*上から20pxの場所に配置*/
}

/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	margin-top: 8%;	/*上に空けるスペース。この部分にイメージ画像が表示されます。*/
}
body.home #contents {
	margin-top: 40%;	/*上に空けるスペース。この部分にスライドショーが表示されます。*/
}

/*トップタイトル
---------------------------------------------------------------------------*/
.maintext{
	padding: 0em 3em 3em 3em;
	background-image: none;
	text-align: center
	
}

/*働く環境　カード横スクロール
---------------------------------------------------------------------------*/
.scroll-item {
        min-width: 95vw;  /* ←画面幅いっぱい */
		max-width: 95vw;
        padding: 1.5rem;
		margin-left:10px;
    }
.container h2 {
        font-size: 2rem;
    }
.horizontal-scroll{
		padding: 0;        /* ←左右の余白を消す */
		gap: 1rem;
	}
/*ワークスタイル
---------------------------------------------------------------------------*/
.link-box{
	margin:5em 0em -5em 0em;
}
/*応募フォーム
---------------------------------------------------------------------------*/
.recruit-banner{
	grid-template-columns: 1fr;
}
.recruit-image{
	height: 260px;
}
.recruit-content{
	padding: 45px 30px;
}
.recruit-sub{
	font-size: 15px;
	margin-bottom: 18px;
}
.recruit-content h2{
	font-size: 32px;
	margin-bottom: 28px;
}
.recruit-text{
	font-size: 16px;
	line-height: 1.9;
	margin-bottom: 36px;
}
.recruit-btn{
	width: 100%;
	padding: 18px 24px;
	font-size: 16px;
}
	
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 15px;	/*文字サイズ*/
}
/*コンテンツ
---------------------------------------------------------------------------*/
/*h3タグ*/
#contents h3 {
	padding: 0 20px;	/*上下、左右へのボックス内の余白*/
}
/*各部門画像スライドスマホ対応
---------------------------------------------------------------------------*/
/* 横並び解除 */
.display-flex_left,
.display-flex_right{
	display: block;
	margin-bottom: 60px;
}
/* 画像エリア */
.sclool{
	width: 100%;
	overflow: hidden;
}
/* 画像 */
.slidein{
	width: 100%;
	margin: 0;
	padding: 0;
}
.slidein img{
	width: 100%;
	height: auto;
	display: block;
}
/* テキスト */
.subtext,
.subtext2{
	margin: 25px 20px 0;
	text-align: left;
}
/* タイトル */
.sub_title,
.sub_title2{
	font-size: 24px;
	text-align: left;
}
.sub_title p,
.sub_title2 p{
	text-align: left;
}
/* ボタン */
.button-36{
	width: 100%;
	max-width: 260px;
}
/* スライド移動量を弱く */
.slide_left,
.slide_right{
	transform: translateX(0);
	}
/*横スライド
---------------------------------------------------------------------------*/	
.horizontal-section {
	margin-top: 15em;
}
	.link-area{
	margin: 0em 0em 15em 0em;
}
/*ワークスタイル
---------------------------------------------------------------------------*/
.link-area{
	flex-direction: column;
}
.link-box{
	min-height: auto;
	padding: 50px 30px;
	gap: 40px;
}
.link-box:first-child{
	border-right: none;
	border-bottom: 1px solid #ddd;
}
.link-box h2{
	font-size: 52px;
}
.link-box p{
	font-size: 24px;
}
.link-btn{
	width: 100%;
	font-size: 22px;
	padding: 18px 30px;
}
/*よくある質問
---------------------------------------------------------------------------*/	
.faq-section{
	flex-direction: column;
	gap: 40px;
	padding: 70px 20px;
}
.faq-title{
	min-width: auto;
}
.faq-title h2{
	font-size: 36px;
}
.faq-title p{
	font-size: 24px;
}
.faq-question{
	padding: 25px 0;
	gap: 15px;
}
.faq-question .q{
	font-size: 30px;
}
.faq-question .text{
	font-size: 18px;
}
.faq-answer p{
	padding-left: 45px;
	font-size: 15px;
}

		
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: static;
	height: auto;
}
/*ロゴ画像*/
header #logo img {
	width: 240px;	/*画像幅*/
	position: static;
	padding: 20px 3%;
}

/*コンテンツ
---------------------------------------------------------------------------*/
/*h2タグ*/
#contents h2 {
	font-size: 200%;	/*文字サイズ*/
	margin-bottom: 20px;	/*下に空けるボックスの外側への余白*/
	
}
/*h3タグ*/
#contents h3 {
	font-size: 100%;	/*文字サイズ*/
	margin-bottom: 20px;/*下に空けるボックスの外側への余白*/
	line-height: 1.5;	/*行間を少し狭くする*/
}
/*段落タグ*/
#contents p {
	padding: 0px 0px 20px;	/*上、左右、下への段落タグ内の余白*/
	line-height: 1.5;		/*行間を少し狭くする*/
}
/*section同士の余白*/
#contents section + section {
	margin-top: 20px;
}
	
/*トップテキスト
---------------------------------------------------------------------------*/
.maintext{
	line-height: 20px;
}
	
	
}
