@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--text-color: #333;				/*テキストカラー*/

	--primary-color: rgb(0, 112, 243);;		/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/
	
	--global-space: 5vw;			/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
		}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	font-optical-sizing: auto;
	/*font-weight: 300;*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
section li {margin-left: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 1rem;
}

.last {
	margin-bottom: 0 !important;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
body:not(.home) #container {
	height: 100%;
	display: flex;
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: var(--global-space);	/*コンテンツ内の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
}

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	#contents {
		padding-top: 80px;	/*コンテンツ内の上の余白だけ上書き*/
	}

	}/*追加指定ここまで*/

@media screen and (min-width: 900px) {
    section.c {
        padding-left: 20vw;
        padding-right: 20vw;
    }
}
/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	height: 100px;					/*ヘッダーの高さ*/
	padding: 1vw 3vw;				/*ヘッダー内の余白。上下、左右への順番。*/
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    position: absolute;
    z-index: 4;
    width: 100%;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		/*ヘッダーブロック*/
		header {
			position: fixed;	/*スクロールしても動かないようにする指定。*/
			background-color: #ffffff;
			overflow: hidden;
		}
	}
	@media screen and (max-width: 900px) {
		.subpage header {
			background-color: #ffffff;
		}
	}

/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	max-width: 100%;
}

/*ロゴ（テキストにする場合）*/
#logo a {
	display: block;text-decoration: none;
	font-size: 1.2rem;	/*文字サイズを120%に*/
	font-weight: 800;	/*文字の太さ*/
	left: -15px;
	position: relative;
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;		/*横並びにする*/
	font-size: 0.85rem;	/*文字サイズ。85%。*/
	gap: 0.5rem;		/*メニュー同士の間に空けるマージン的な要素*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	border-radius: 100px;	/*角を丸くする指定。適当に大きければOKです。*/
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}

/*マウスオン時*/
.large-screen #menubar li a:hover {
	background: #fff;		/*背景色*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
	margin-top: 0.4rem;	/*上に空けるスペース。メニュー同士の隙間です。*/
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	background: rgba(0,0,0,0.9);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 0 2rem;		/*メニュー内の余白。上下、左右へ。*/
}
.small-screen #menubar a {
	padding: 1rem;	/*メニュー内の余白*/
}

/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
	color: #fff;
}

/*900px以下でのみ表示させるブロック*/
#menubar .sh {
	font-weight: normal;		/*文字の太さを標準にする*/
	padding: 1rem 2rem 2rem;	/*上、左右、下へのブロック内の余白*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3vw;			/*右からの配置場所指定*/
	top: 1vw;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #333;	/*線の幅、線種、色*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
	border-color: #fff;					/*線の色だけ上書き*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*main
---------------------------------------------------------------------------*/
/*h2(見出し)要素*/
main h2 {
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 3rem;		/*文字サイズ。基準の3倍の大きさに。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	
}

/*bg1背景の上でのh2*/
.bg1 h2 {
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*h2内の小文字部分*/
main h2 .hosoku {
	display: block;font-weight: normal;
	font-size: 0.6em;	/*親要素の4<strong></strong>0%のサイズに*/
}
main h2 .coment{
	display: block;font-weight: normal;
	font-size: 0.4em;	/*親要素の4<strong></strong>0%のサイズに*/
}
/*h3(見出し)要素*/
main h3 {
	display: inline-block;
	border-bottom: 3px solid var(--text-color);	/*下線の幅、線種、varは色のことで、css冒頭で指定しているtext-colorを読み込みます*/
}

.text h4 {
    text-align: center;
	font-size: 1.5em;
}

section.c p {
    text-align: left;
    margin-bottom: 5rem;
}

section p {
    text-align: left;
}
/*2カラム
---------------------------------------------------------------------------*/
.main-contents {
	margin-bottom: 5rem;	/*ボックスの下に空けるスペース。subとの間の余白です。5文字分。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;					/*横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 1rem;						/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contentsブロック*/
	.main-contents {
		margin-bottom: 0;
		order: 2;		/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 230px;	/*幅*/
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 1;	/*並び順。数字の小さい順番に表示されます。*/
	}
	
	/*2つ目のsub-contents*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/
	}
	
	}/*追加指定ここまで*/


/*サブコンテンツ設定
---------------------------------------------------------------------------*/
/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
	display: block;
	margin: 0;
	text-align: center;	/*テキストをセンタリング*/
	border-radius: 5px 5px 0px 0px;	/*角を丸くする指定。左上、右上、右下、左下の順番。*/
	border: 1px solid #ccc;			/*下線の幅、線種、色*/
	background: linear-gradient(transparent, rgba(0,0,0,0.03));/*背景グラデーション。transparentは透明の事。0,0,0は黒の事で0.03は色が3%出た状態。*/
	padding: 0.5rem 0;	/*上下、左右への見出し内の余白*/
}
.midashi {
    display: block;
    font-weight: normal;
    font-size: 2rem; /* サイズは調整OK */
    text-align: center;
    margin-bottom: 1.5rem; /* h2とpの間の余白 */
}

/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li {
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけなくす*/
}

/*子メニュー*/
.submenu li li a {
	padding-left: 2rem;	/*左に余白を空ける*/
}

/*h3見出しの下にサブメニューが続く場合にメニューの上の線をなくす*/
.sub-contents h3 + nav .submenu {
	border-top: none;
}


/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0 !important;
	padding: 20px;		/*ブロック内の余白*/
	padding-bottom: 50px;
	text-align: center;	/*テキストを中央に*/
	font-size: 0.8rem;	/*文字サイズ。bodyのfont-sizeの80%です。*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*簡易的に横並びにする*/
	padding: 0 7px;		/*上下、左右への余白*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

footer .logo {
  margin-bottom: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer .logo img {
	width: 250px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.05s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 3s linear infinite;}
@keyframes fadeIn {
    0%   { opacity: 1; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	width: 8rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #fff;		/*背景色*/
	color:#777;				/*文字色*/
	border: 1px solid #333;
}

/*icon-bg1*/
.new .icon-bg1 {
	background: #333;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*icon-bg2*/
.new .icon-bg2 {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid1
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid1 {
	display: grid;
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1 .list * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1 .list {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*ボタン（btnと、btn-border-radius）
---------------------------------------------------------------------------*/
/*ボタン共通*/
 .btn a {
   display: inline-block;
   text-decoration: none;
}
.btn-border-radius {
    text-align: center;
    margin-top: 2rem;
}
.bg1 p.btn-border-radius {
    text-align: center;
}

.btn-border-radius a {
    display: inline-block;
    padding: 0.5rem 2rem;
    border-radius: 100px;
    background: #e12000;
    color: #fff;
    text-decoration: none;
}

/*ボタン共通（マウスオン時に少し明るくする）*/
.btn a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

/*btn-border-radiusの上書き*/
.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;	/*ボタン内の余白*/
	border-radius: 100px;	/*角丸の指定。適当に大きければOK。*/
	background: #e12000 !important;
	color: #fff !important;
}

section.c .btn-border-radius a {
    font-size: 1.0rem;          /* ← 文字サイズ */
    padding: 1rem 2rem;         /* ← 上下・左右の余白（ボタンの高さ・幅感） */
}


/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	padding-top: 1vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	margin-top: 10vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
	margin-bottom: 5vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}
.bg1 a {
	color: inherit;
}

/*以下のheightの行が傾斜の角度です。vwという単位は画面幅に対してで、画面幅100%＝100vwになります。
つまり、画面幅に対して常に同じ傾斜具合になります。1pxの数字は時々隙間が発生するのでそれを防ぐ為の措置です。
傾斜（height）を変更したい場合は、下にある「.bg1::before」のtopと「.bg1::after」のbottomの数字も変更。*/
.bg1::before, .bg1::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}

.bg1::before {
	top: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	/*三角形の形を作っています*/
}

.bg1::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}

/*bg2背景色がついたブロック
---------------------------------------------------------------------------*/
section.bg2 {
    position: relative;
    background-color: #00B900; /* ← 緑 */
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 5vw;
    margin-top: 10vw;
    margin-bottom: 5vw;
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
    padding-left: var(--global-space);
    padding-right: var(--global-space);
}

section.bg2 h2,
section.bg2 h3,
section.bg2 p,
section.bg2 .hosoku,
section.bg2 a {
    color: #ffffff;
}

/* bg2 の上下の傾斜部分 */
section.bg2::before,
section.bg2::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(5vw + 1px);
    background-color: #00B900; /* ← 緑 */
}

section.bg2::before {
    top: -5vw;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

section.bg2::after {
    bottom: -5vw;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: #333;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #333;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 5rem;		/*テーブルの下に空けるスペース。5文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #333;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/

/*--- セクションごとの見出し色ルール整理版 ---*/

/* 通常の section */
section h2 {
    color: var(--primary-color);
}

/* .bg1 のとき */
section.bg1 h2,
section.bg1 h2 span,
section.bg1 h2 .hosoku,
section.bg1 p,
section.bg1 a {
    color: var(--primary-inverse-color);
}

/* .bg2 のとき */
section.bg2 h2,
section.bg2 h2 span,
section.bg2 .hosoku,
section.bg2 p,
section.bg2 a {
    color: #ffffff;
}

.list-grid1 .list p {
    color: var(--text-color);
}

/* bg3背景色がついたブロック
---------------------------------------------------------------------------*/
section.bg3 {
    position: relative;
    background-color: #DBDB00; /* ← 黄色 */
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 5vw;
    margin-top: 10vw;
    margin-bottom: 5vw;
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
    padding-left: var(--global-space);
    padding-right: var(--global-space);
}

/* bg3 の文字色 fix */
section.bg3 h2,
section.bg3 h2 span,
section.bg3 h2 span span,
section.bg3 .hosoku,
section.bg3 p,
section.bg3 a {
    color: #ffffff !important;
}

/* bg3 の上下の傾斜部分 */
section.bg3::before,
section.bg3::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(5vw + 1px);
    background-color: #DBDB00; /* ← 黄色 */
}

section.bg3::before {
    top: -5vw;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

section.bg3::after {
    bottom: -5vw;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

section.bg3 .list p {
    color: var(--text-color) !important;
}

/* bg4背景（真っ青）＋ 文字色（白） */
section.bg4 {
    position: relative;
    background-color: #0070f3; /* 真っ青 */
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 5vw;
    margin-top: 10vw;
    margin-bottom: 5vw;
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
    padding-left: var(--global-space);
    padding-right: var(--global-space);
}

/* bg4内のすべての文字要素も白に統一 */
section.bg4 h2,
section.bg4 h2 span,
section.bg4 h2 .hosoku,
section.bg4 p,
section.bg4 a {
    color: #ffffff !important;
}

/* bg4の傾斜装飾 */
section.bg4::before,
section.bg4::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(5vw + 1px);
    background-color: #0070f3;
}

section.bg4::before {
    top: -5vw;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

section.bg4::after {
    bottom: -5vw;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}



/*------------------------------------------------------------------------------------------------------------------
　additional
-------------------------------------------------------------------------------------------------------------------*/

.subpage .mv {
	background-image: url("../images/subpage_mv.png");
	background-position: top right;
	background-repeat: no-repeat;
	width: 1450px;
	height: 300px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	transition: 0.2s;
}

@media screen and (max-width: 1400px) {
	.subpage .mv {
		background-position: top 0 right -200px;
	}
}
@media screen and (max-width: 1200px) {
	.subpage .mv {
		background-position: top 0 right -400px;
	}
}
@media screen and (max-width: 1000px) {
	.subpage .mv {
		background-position: top 0 right -600px;
	}
}

.subpage h2 {
	z-index: 2;
	position: relative;
	margin-bottom: 100px;
	color: #089fe6;
}

@media screen and (max-width: 900px) {
	.subpage h2 {
		top: 50px;
		margin-bottom: 150px;
	}
}

.subpage h3 {
	font-size: 28px;
	margin: 0;
	padding: 0;
	position: relative;
	top: -10px;
	margin-bottom: 30px;
}

.message {
	margin-bottom: 50px;
}

.message h3 {
	margin: 0;
	margin-bottom: 25px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 20px;
	padding-bottom: 17px;
	color: #089fe6;
	font-size: 30px;
	line-height: 35px;
	display: block;
	border-top: 2px solid #089fe6;
	border-bottom: 2px dotted#089fe6;
}

.message h3 span {
	display: block;
	color: #666666;
	font-size: 13px;
}

.message .catch {
	font-size: 28px;
}

.subpage article {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/*----------------------------------------------------------------------------
   works
------------------------------------------------------------------------------*/

#works {
}

#works .works-list-primary {
	width: 100%;
	position: relative;
}

#works .works-list-primary > .list {
	background-color: #F0F9FF;
	box-sizing: border-box;
	padding: 40px;
	padding-right: 430px;
	margin-bottom: 50px;
	position: relative;
}

@media screen and (max-width: 1000px) {
	#works .works-list-primary > .list {
		padding-right: 40px;
	}
}

#works .works-list-primary > .list h3 {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	color: #089fe6;
	border-bottom-color: #089fe6;
	top: -10px;
	position: relative;
}

#works .works-list-primary > .list h3+p {
	margin: 0;
	padding: 0;
	font-weight: bold;
	margin-bottom: 20px;
}

#works .list .thum {
	background-color: #9C9C9C;
	position: absolute;
	top: 40px;
	right: 40px;
	width: 100%;
	max-width: 353px;
	height: 240px;
	display: block;
}

@media screen and (max-width: 1000px) {
	#works .list .thum {
		position: relative;
		top: inherit;
		right: inherit;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
}

#works .list .thum:after {
	content: "";
	background-image: url("../images/logo.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 100%;
	max-width: 306px;
	height: 87px;
	position: absolute;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	transform: scale(0.7,0.7);
	transform-origin: center;
	mix-blend-mode: luminosity;
}

#works .list .thum img {
	object-fit: cover;
	width: 350px;
	height: 240px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#works .works-list-primary > .list .detail {
	background-color: #ffffff;
	border: 2px dotted #bad5e8;
	box-sizing: border-box;
	padding: 20px;
}

#works .works-list-primary > .list .detail h4 {
	color: #ffffff;
	background-color: #2D2D2D;
	font-size: 16px;
	margin: 0;
	padding-top: 3px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 15px;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
}

#works .works-list-primary > .list .detail .list-primary {
	width: calc(100% + 30px);
}

#works .works-list-primary > .list .detail .list-primary .list {
	width: calc(50% - 30px);
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
}

@media screen and (max-width: 1100px) {
	#works .works-list-primary > .list .detail .list-primary {
		width: 100%;
	}
	#works .works-list-primary > .list .detail .list-primary .list {
		width: 100%;
		float: none;
		margin-right: auto;
	}
}

#works .works-list-primary > .list .detail .list-primary:after {
	content: "";
	float: none;
	clear: both;
	display: block;
}

#works .works-list-primary > .list .detail .list-primary .list strong {
	color: #222222;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 4px;
	margin-bottom: 6px;
	display: block;
}

#works .works-list-primary > .list .detail .list-primary .list p {
	margin: 0;
	padding: 0;
}


/* ===============================
   works：サムネ無しレイアウト用リセット
   =============================== */

/* PC時に右側の空き（padding-right: 430px）をなくす */
@media screen and (min-width: 1000px) {
  #works .works-list-primary > .list {
    padding: 40px;          /* 均等に */
    margin-bottom: 50px;
    background-color: #F0F9FF;
  }
}

/* サムネ用ボックスは完全に無効化（もし残っていても非表示） */
#works .list .thum {
  display: none !important;
}

/* 余計な高さ確保を避ける（サムネ前提のmin-height対策） */
#works .works-list-primary > .list {
  min-height: unset !important;
  padding-right: 40px; /* 念押し */
}

/* 内側の2カラム（取扱い一覧）はそのまま使う想定
   1カラムにしたい場合は下記をON

@media screen and (min-width: 800px) {
  #works .works-list-primary > .list .detail .list-primary .list {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}
*/

/* ===== interview：2列グリッドに完全切替（右側の余白を消す） ===== */

/* PC/タブレット：2列 */
.interview-top_comment-answer .interview-list-primary {
  width: 100% !important;              /* 既存の calc(100% + 30px) を無効化 */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;                           /* 要素間の余白 */
  padding-top: 50px;                   /* 既存踏襲（お好みで調整） */
}

/* 旧レイアウトの後始末 */
.interview-top_comment-answer .interview-list-primary:after {
  content: none !important;            /* クリア用ダミー削除 */
}
.interview-top_comment-answer .interview-list-primary .list {
  float: none !important;              /* float解除 */
  margin: 0 !important;                /* 右マージン撤去 */
  width: auto !important;              /* calc(33.333% - 30px) 等を解除 */
  box-sizing: border-box;
}

/* サムネ画像まわりの安定化（念のため） */
.interview-top_comment-answer .interview-list-primary .thum img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ：1列 */
@media screen and (max-width: 640px) {
  .interview-top_comment-answer .interview-list-primary {
    grid-template-columns: 1fr;
  }
}

/* 3カードのリード文を大きく・読みやすく */
.card-lead {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.8;
  margin-top: 0.4rem;
  /* left揃えのまま余白は現状維持。中央寄せにしたければ text-align:center; を追加 */
}

/* 既存の .list-grid1 .list p の小さめ指定を確実に上書き */
.list-grid1 .list .text > .card-lead { font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.0rem); }

/* もしこのブロックが .bg2（緑背景）内で白文字にしたい場合だけ有効化
section.bg2 .card-lead { color: #fff !important; }
*/


/*----------------------------------------------------------------------------
   company
------------------------------------------------------------------------------*/

#company {
}

.message .name {
	font-size: 28px;
	margin-top: 20px;
}

.message .name span {
	font-size: 18px;
	display: inline-block;
	margin-right: 15px;
}

#company_detail {
	margin-bottom: 50px;
}

#company_detail .detail {
	margin-bottom: 50px;
	background-color: #F0F9FF;
	padding: 40px;
	padding-right: 480px;
	box-sizing: border-box;
	position: relative;
}

#company_detail .detail .company-detail-thum {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 400px;
}

#company_detail .detail .company-detail-thum img {
	width: 400px;
	margin-bottom: 20px;
}

@media screen and (max-width: 1100px) {
	#company_detail .detail {
		padding-right: 40px;
	}
	#company_detail .detail .company-detail-thum {
		position: relative;
		top: inherit;
		right: inherit;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		width: 100%;
		text-align: center;
	}
	#company_detail .detail .company-detail-thum img {
		display: inline-block;
		margin-left: 15px;
		margin-right: 15px;
		max-width: 100%;
	}
}

#company_detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#company_detail ul li {
	margin-left: 0;
	position: relative;
	padding-left: 130px;
	box-sizing: border-box;
	display: block;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#company_detail ul li span {
	position: absolute;
	top: 0;
	left: 0;
}

#company iframe {
	margin-bottom: 50px;
}


/*----------------------------------------------------------------------------
   contact
------------------------------------------------------------------------------*/

#contact {
}

#contact .contact-detail {
	position: relative;
	text-align: center;
	border: 2px solid #089fe6;
	box-sizing: border-box;
	padding: 30px;
	padding-top: 50px;
	line-height: 42px;
	margin-bottom: 50px;
}

#contact .contact-detail .tel {
	font-size: 34px;
	color: #089fe6;
	font-weight: bold;
	display: inline-block;
	font-family: "Times New Roman", Times, "serif";
}

#contact .contact-detail .tel span {
	font-size: 50px;
	display: inline-block;
	margin-left: 8px;
	position: relative;
	top: -8px;
}

#contact .contact-detail .ontime {
	font-size: 24px;
}

#contact .contact-detail .ontime span {
	display: inline-block;
	color: #ff0000;
	margin-left: 15px;
}

.contact-primary p {
	margin-bottom: 30px;
}


/*----------------------------------------------------------------------------
   recruit
------------------------------------------------------------------------------*/

#recruit {
}

body#recruit #container {
	flex: none;
	display: block;
}

#recruit .recruit-content {
	padding-top: 200px;
	box-sizing: border-box;
	margin-bottom: 80px;
}

#recruit .recruit-content article {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: 0.2s;
}

@media screen and (max-width: 1200px) {
	#recruit .recruit-content article {
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
	}
}

#recruit .content {
	margin-bottom: 80px;
}

#recruit .mv {
	background-image: url("../images/contents/recruit/mv.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
	height: 700px !important;
	position: relative;
	top: 100px;
	left: inherit;
	right: inherit;
	transition: 0.2s;
}

@media screen and (max-width: 1395px) {
	#recruit .mv {
		background-position: right -230px top 0;
	}
}
@media screen and (max-width: 1300px) {
	#recruit .mv {
		background-image: url("../images/contents/recruit/mv_sp.jpg");
		background-position: center top;
		background-size: contain;
		width: 100% !important;
		height: 0 !important;
		padding-top: 58.333% !important;
	}
}

#recruit-about {
	position: relative;
	box-sizing: border-box;
	padding-right: 457px;
	min-height: 535px;
}

#recruit-about .thum {
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (max-width: 950px) {
	#recruit-about {
		padding-right: 0;
	}
	#recruit-about .thum {
		position: relative;
		top: inherit;
		right: inherit;
		margin-bottom: 50px;
	}
}

#recruit-about .catch {
	margin-bottom: 50px;
}

#recruit-about p {
	font-size: 18px;
	margin: 0;
	padding: 0;
}

#recruit h2 {
	background-color: #089fe6;
	padding-top: 25px;
	padding-bottom: 20px;
	margin-bottom: 80px;
	box-sizing: border-box;
	text-align: center;
	color: #ffffff;
	font-size: 36px;
	line-height: 48px;
}

#recruit h2 span {
	display: block;
	font-size: 18px;
	color: #e7ff45;
}

#recruit-works {
	background-image: url("../images/contents/recruit/back.gif");
	padding-bottom: 80px;
	position: relative;
}

#recruit-works article {
	padding-left: 460px;
	box-sizing: border-box;
}

#recruit-works h3 {
	font-size: 40px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

#recruit-works .thum {
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1230px) {
	#recruit-works article {
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
	}
	#recruit-works .thum {
		position: relative;
		top: inherit;
		left: inherit;
		display: block;
		margin-bottom: 50px;
	}
}

#recruit-works p {
	margin: 0;
	padding: 0;
	font-size: 18px;
}

#recruit-interview {
	background-image: url("../images/contents/recruit/back.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-bottom: 80px;
	box-sizing: border-box;
}

#recruit-interview .interview-top_comment {
	position: relative;
	margin-bottom: 50px;
}

#recruit-interview .interview-top_comment:before {
	background-image: url("../images/contents/recruit/illust01.png");
	background-position: top left;
	background-repeat: no-repeat;
	width: 280px;
	height: 240px;
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
}

#recruit-interview .interview-top_comment:after {
	background-image: url("../images/contents/recruit/illust02.png");
	background-position: top right;
	background-repeat: no-repeat;
	width: 323px;
	height: 236px;
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
}

@media screen and (max-width: 1100px) {
	#recruit-interview .interview-top_comment {
		padding-bottom: 260px;
	}
	#recruit-interview .interview-top_comment:before {
		left: 50px;
	}
	#recruit-interview .interview-top_comment:after {
		right: 50px;
	}
}
@media screen and (max-width: 800px) {
	#recruit-interview .interview-top_comment:before {
		left: 20px;
	}
	#recruit-interview .interview-top_comment:after {
		right: 20px;
	}
}

#recruit-interview .interview-top_comment .interview-top_comment-text {
	text-align: center;
	font-size: 24px;
	color: #1e1e1e;
	font-weight: bold;
}

.interview-top_comment-answer {
	background-color: #f4f4f4;
	text-align: center;
	padding: 40px;
	box-sizing: border-box;
}

.interview-top_comment-answer p {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 18px;
}

.interview-top_comment-answer .link-button a {
	background-color: #c2d236;
	width: 420px;
	height: 86px;
	line-height: 80px;
	text-indent: -10px;
	background-image: url("../images/layout/ar.png");
	background-position: center right 18px;
	background-repeat: no-repeat;
	border-color: #c2d236;
	color: #ffffff !important;
	transition: 0.2s;
}

.interview-top_comment-answer .link-button a:hover {
	background-position: center right 10px;
}

#recruit-candidates {
	background-image: url("../images/contents/recruit/back.gif");
	padding-top: 80px;
	padding-bottom: 80px;
}

#recruit-candidates .candidates_mv {
	background-image: url("../images/contents/recruit/photo03.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	width: 100%;
	height: 300px;
	position: relative;
	margin-bottom: 50px;
}

#recruit-candidates .candidates_mv img {
	position: absolute;
	bottom: 30px;
	right: 30px;
	display: block;
}

.candidates-list-primary {
	width: 100%;
	text-align: center;
	letter-spacing: -.4em;
	vertical-align: top !important;
}

.candidates-list-primary .list {
	display: inline-block;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 28px;
	letter-spacing: normal;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
	width: calc(33.333% - 30px);
	vertical-align: top !important;
}

@media screen and (max-width: 1200px) {
	.candidates-list-primary {
		letter-spacing: inherit;
		width: calc(100% + 30px);
	}
	.candidates-list-primary .list {
		width: calc(50% - 30px);
		margin-right: 30px;
		margin-left: 0;
		margin-bottom: 30px;
		float: left;
		display: block;
	}
	.candidates-list-primary:after {
		content: "";
		display: block;
		clear: both;
	}
}
@media screen and (max-width: 880px) {
	.candidates-list-primary {
		width: 100%;
	}
	.candidates-list-primary .list {
		width: 100%;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

.candidates-list-primary .list .title {
	width: 100%;
	height: 55px;
	display: block;
	padding-left: 65px;
	font-size: 24px;
	color: #089fe6;
	font-weight: bold;
	margin-bottom: 5px;
	background-position: top left;
	background-repeat: no-repeat;
	text-align: left;
	white-space: nowrap;
}

.candidates-list-primary .list:nth-of-type(1) .title { background-image: url("../images/contents/recruit/icon01.png"); }
.candidates-list-primary .list:nth-of-type(2) .title { background-image: url("../images/contents/recruit/icon02.png"); }
.candidates-list-primary .list:nth-of-type(3) .title { background-image: url("../images/contents/recruit/icon03.png"); }
.candidates-list-primary .list:nth-of-type(4) .title { background-image: url("../images/contents/recruit/icon04.png"); }
.candidates-list-primary .list:nth-of-type(5) .title { background-image: url("../images/contents/recruit/icon05.png"); }

.candidates-list-primary .list p {
	margin: 0;
	padding: 0;
	text-align: left;
}

#recruit-requirements {
	background-image: url("../images/contents/recruit/back.gif");
	padding-bottom: 80px;
	box-sizing: border-box;
}

#recruit-requirements .requirements-list-primary {
	position: relative;
}

#recruit-requirements .requirements-list-primary .list {
	width: 100%;
	position: relative;
	display: block;
	background-color: #ffffff;
	padding: 40px;
	padding-top: 30px;
	margin-bottom: 30px;
	box-sizing: border-box;
	border: 5px double #089fe6;
}

#recruit-requirements .requirements-list-primary .list .title {
	color: #089fe6;
	font-size: 24px;
	display: block;
	margin-bottom: 15px;
	font-weight: bold;
}

#recruit-requirements .requirements-list-primary .list .option {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}

#recruit-requirements .requirements-list-primary .list .option div {
	display: inline-block;
	margin-right: 20px;
	font-weight: bold;
}

#recruit-requirements .requirements-list-primary .list .option div span {
	display: inline-block;
	background-color: #353535;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	color: #ffffff;
	margin-right: 10px;
}

#recruit-requirements .requirements-list-primary .list .button {
	position: absolute;
	top: 50px;
	right: 50px;
}

#recruit-requirements .requirements-list-primary .list .button a {
	background-color: #c2d236;
	display: block;
	color: #ffffff;
	font-weight: bold;
	height: 52px;
	line-height: 52px;
	width: 280px;
	text-align: center;
	text-indent: -20px;
	font-size: 20px;
	text-decoration: none;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	background-image: url("../images/layout/ar.png");
	background-position: center right 15px;
	background-repeat: no-repeat;
	transition: 0.2s;
}

@media screen and (max-width: 1000px) {
	#recruit-requirements .requirements-list-primary .list .button {
		position: relative;
		top: inherit;
		right: inherit;
		display: block;
		margin-top: 30px;
	}
}

#recruit-requirements .requirements-list-primary .list .button a:hover {
	background-position: center right 10px;
	background-color: #d6e270;
}

#recruit-requirements .requirements-list-primary .list p {
	margin: 0;
	padding: 0;
	font-size: 18px;
}

#recruit-company {
	position: relative;
}

#recruit-company .detail {
	padding-right: 520px;
	margin-bottom: 50px;
	box-sizing: border-box;
	min-height: 500px;
}

#recruit-company .thum {
	position: absolute;
	top: 0;
	right: 0;
	width: 500px;
	transition: 0.2s;
}

@media screen and (max-width: 1200px) {
	#recruit-company .thum {
		right: 30px;
	}
}

@media screen and (max-width: 980px) {
	#recruit-company .detail {
		padding-right: 0;
	}
	#recruit-company .thum {
		position: relative;
		top: inherit;
		right: inherit;
		width: 100%;
		margin-bottom: 30px;
	}
}

#recruit-company .thum img {
	max-width: 100%;
}

#recruit-company .detail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: 25px;
}

#recruit-company .detail ul li {
	position: relative;
	padding-left: 120px;
	padding-top: 3px;
	box-sizing: border-box;
	display: block;
	margin-bottom: 20px;
}

#recruit-company .detail ul li span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100px;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	text-align: center;
	background-color: #666666;
}

#recruit-company iframe {
	width: 100%;
	display: block;
}

#recruit-detail h2 {
	background-color: #089fe6;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 50px;
	box-sizing: border-box;
	text-align: center;
	color: #ffffff;
	font-size: 36px;
	line-height: 48px;
}

#recruit-detail h2 span:nth-of-type(1) {
	display: inline-block;
	font-size: 15px;
	background-color: #ffffff;
	color: #333333;
	font-weight: bold;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	margin-left: 10px;
	margin-right: 10px;
}

#recruit-detail h2 span:nth-of-type(2) {
	display: inline-block;
	font-size: 15px;
	background-color: #ffffff;
	color: #333333;
	font-weight: bold;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	margin-left: 10px;
	margin-right: 10px;
}

#recruit-detail h2+p {
	margin-bottom: 50px;
}

#recruit-gallery:after {
	content: "";
	display: block;
	clear: both;
}
/* Recruitの箇条書き（大きめ・左インデント・左揃え） */
.list-grid1 .list .point-list {
  list-style: disc;
  margin: -2rem 0 0;           /* 上に少し間隔 */
  padding-left: 2rem;        /* ← 左の余白（インデント）を増やす */
  text-align: left;             /* 左揃え */
  font-size: 1.0rem;            /* 文字を大きく */
  line-height: 1.9;
}

/* 大きめ画面ではさらに少しだけ大きく */
@media screen and (min-width: 900px) {
  .list-grid1 .list .point-list {
    font-size: 1.2rem;
  }
}

/* グローバルの `section li { margin-left: 1rem; }` を打ち消しつつ整える */
.list-grid1 .list .point-list li {
  margin-left: 0;               /* 余計な左マージンをリセット */
  margin-bottom: 0rem;       /* 項目間の間隔 */
  color: var(--text-color);     /* .bg3でも見えるように濃色に固定 */
}

/* 念のため .bg3 配下でも確実に濃色に */
section.bg3 .list .point-list,
section.bg3 .list .point-list li {
  color: var(--text-color) !important;
}


/*----------------------------------------------------------------------------
   information
------------------------------------------------------------------------------*/

/* 記事一覧 */

#information .post-list {
	background-color: #e7f7ff;
	padding: 40px;
	padding-top: 30px;
	padding-right: 420px;
	box-sizing: border-box;
	margin-bottom: 40px;
	position: relative;
	min-height: 342px;
}

@media screen and (max-width: 950px) {
	#information .post-list {
		padding-right: 40px;
	}
}

#information .post-list:after {
	content: "";
	display: block;
}

#information .post-list .link-button, #information .post-list .link-button a {
	margin-left: 0 !important;
	margin-right: inherit !important;
	margin-bottom: 0;
}

#information .post-list .thum {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 350px;
	height: auto;
	display: block;
}

@media screen and (max-width: 950px) {
	#information .post-list .thum {
		position: relative;
		top: inherit;
		right: inherit;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
}

#information .post-list .date {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

#information .post-list .title a {
	color: #089fe6;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;
	background-color: #ffffff;
	padding: 10px;
	padding-bottom: 13px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

#information .post-list p {
}


/* 記事詳細 */

#information .post {
	position: relative;
}

#information .post h3 {
	margin: 0;
	margin-bottom: 25px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 9px;
	padding-bottom: 17px;
	color: #089fe6;
	font-size: 30px;
	line-height: 35px;
	display: block;
	border-top: 2px solid #089fe6;
	border-bottom: 2px dotted#089fe6;
}

#information .post h3 span {
	display: block;
	color: #666666;
	font-size: 13px;
}

#information .post .post-image {
	margin-bottom: 35px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100% !important;
	width: inherit !important;
}


/*----------------------------------------------------------------------------
   interview
------------------------------------------------------------------------------*/

.interview-list-primary {
	width: calc(100% + 30px);
	padding-top: 50px;
}

.interview-list-primary:after {
	content: "";
	display: block;
	clear: both;
}

.interview-list-primary .list {
	width: calc(33.333% - 30px);
	margin-right: 30px;
	margin-bottom: 30px;
	float: left;
	background-color: #ffffff;
	box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
	.interview-list-primary .list {
		width: calc(50% - 30px);
	}
}

@media screen and (max-width: 640px) {
	.interview-list-primary {
		width: 100%;
	}
	.interview-list-primary .list {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
}

.interview-list-primary .list .thum {
}

.interview-list-primary .list .thum img {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.interview-list-primary .list .name {
	color: #089fe6;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	box-sizing: border-box;
	padding: 20px;
}

.interview-list-primary .list .name span {
	display: block;
	color: #222222;
	font-size: 16px;
}

#interview_detail {
}

#interview_detail .profile {
	position: relative;
	margin-bottom: 50px;
	min-height: 400px;
	box-sizing: border-box;
	background-image: url("../images/contents/recruit/back.gif");
	padding: 50px;
	padding-right: 400px;
}

@media screen and (max-width: 1000px) {
	#interview_detail .profile {
		padding-right: 50px;
	}
}

#interview_detail .profile .message {
	margin-bottom: 0;
	padding-bottom: 0;
}

#interview_detail .profile .message p {
	margin: 0;
	padding: 0;
}

#interview_detail .profile .thum {
	position: absolute;
	top: 50px;
	right: 50px;
	width: 300px;
}

@media screen and (max-width: 1000px) {
	#interview_detail .profile .thum {
		position: relative;
		top: inherit;
		right: inherit;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
}

#interview_detail .profile .thum img {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#interview_detail .profile .name {
	font-size: 38px;
	display: block;
	margin-bottom: 30px;
	font-weight: bold;
	color: #089fe6;
	line-height: 42px;
}

#interview_detail .profile .name span {
	font-size: 16px;
	display: block;
	color: #646464;
}

#interview_detail .profile .name p {
	background-color: #089fe6;
	display: inline-block;
	color: #ffffff;
	font-size: 16px;
	margin: 0;
	padding: 0;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 2px;
	box-sizing: border-box;
}

#interview_detail .profile:after {
	content: "";
	display: block;
	clear: both;
}

#interview_detail .detail {
	position: relative;
}

#interview_detail .detail .qa-list-primary {
	padding-top: 50px;
	margin-bottom: 50px;
}

#interview_detail .detail .qa-list-primary .list {
	position: relative;
	margin-bottom: 30px;
	border: 1px solid #e4e4e4;
	box-sizing: border-box;
	padding: 30px;
}

#interview_detail .detail .qa-list-primary .list .question {
	position: relative;
	background-color: #eeeeee;
	padding: 20px;
	padding-left: 90px;
	padding-right: 28px;
	font-weight: bold;
	font-size: 16px;
}

#interview_detail .detail .qa-list-primary .list .question span {
	background-color: #089fe6;
	color: #ffffff;
	display: block;
	width: 60px;
	height: 60px;
	position: absolute;
	top: 13px;
	left: 13px;
	text-align: center;
	line-height: 57px;
	font-weight: bold;
	font-size: 20px !important;
}

#interview_detail .box {
	background-color: #f4f4f4;
	padding: 30px;
	box-sizing: border-box;
	margin-bottom: 50px;
}

#interview_detail .box:after {
	display: block;
	content: "";
	clear: both;
}

#interview_detail .box .thum {
	width: 300px;
	float: right;
	margin-left: 30px;
	overflow: hidden;
}

@media screen and (max-width: 1000px) {
	#interview_detail .box .thum {
		width: auto;
		float: none;
		display: block;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}
}

#interview_detail .box h3 {
	margin-bottom: 20px;
	color: #089fe6;
	border-bottom-color: #089fe6;
}

#interview_detail .box p {
	margin: 0;
	padding: 0;
}

/* 自己紹介タイトル */
.intro-title {
    font-size: 22px;          /* h2らしく大きめ */
    color: #089fe6;           /* サイトのテーマカラー */
    font-weight: bold;
    border-left: 5px solid #089fe6; /* 見出しっぽい装飾 */
    padding-left: 10px;
}

.subpage h2.intro-title {
  margin: 0 0 15px 0;
  position: static;   /* ← relative を解除 */
  top: auto;          /* ← SPの top:50px 無効化 */
  z-index: auto;
  display: block;     /* 念のため */
}

/* PC表示時：プロフィール画像を縦中央に固定 */
@media screen and (min-width: 1001px) {
  #interview_detail .profile .thum {
    position: absolute;   /* 既定どおり */
    right: 50px;          /* 既定どおり */
    top: 50%;             /* 親(.profile)の高さの中央まで下げる */
    transform: translateY(-50%); /* 自分の高さの半分だけ上に戻す＝中央揃え */
  }
}

/* PCだけプロフィール写真を大きく */
@media screen and (min-width: 1001px) {
  /* 写真ボックスの幅を拡大 */
  #interview_detail .profile .thum {
    width: 420px;     /* ← 好きな値に調整OK（例：420px） */
    right: 50px;      /* 既存どおり */
  }

  /* 本文の右パディングを、画像幅＋右余白＋見切れ防止の隙間ぶん確保 */
  #interview_detail .profile {
    padding-right: 520px;  /* = 420(画像幅) + 50(右配置) + 50(隙間) */
  }

  /* 念のため中のimgは入れ物幅にフィット */
  #interview_detail .profile .thum img {
    width: 100%;
    height: auto;
  }
}
/* 画像リンクの当たり判定を安定化 */
.list-grid1 .list .text a { display:block; }
.list-grid1 .list figure { margin: 0; }
.list-grid1 .list figure img { display:block; width:100%; height:auto; }

/* ホバー時の軽い演出（任意） */
.list-grid1 .list .text a:hover img { transform: scale(1.02); transition: transform .2s; cursor:pointer; }