@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=Noto+Sans+JP:wght@100..900&display=swap');


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


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

	--primary-color: #2b5796;			/*テンプレートのテーマカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/

	--secondary-color: #121a5a;			/*テンプレートのサブカラー*/
	--secondary-inverse-color: #fff;	/*secondary-colorの対となる色*/
	
	--accent-color: #c43311;			/*テンプレートのアクセントカラー*/
	--accent-inverse-color: #fff;		/*accent-colorの対となる色*/

	/*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/
	--content-space: 3rem;
	
}


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


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


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

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

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

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


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #555;		/*文字色*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
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 {
	padding: var(--content-space);	/*section内の余白。css冒頭のcontent-spaceを読み込みます。*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
  text-decoration: none;
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	position: relative;
	animation: opa1 1s 1s both;	/*1秒待機し、1秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0 auto;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: 0.3rem var(--content-space);		/*ヘッダー内の余白。上下に１文字分、左右についてはcss冒頭のcontent-spaceを読み込みます。*/
	color: #333;		/*文字色*/
	position: absolute;
	width: 100%;
	line-height: 1.3rem;
	background: linear-gradient(#fff, rgba(255,255,255,0.7));	/*背景グラデーション。255,255,255は白のことで0.7は色が70%出た状態。*/

}
header a {color: inherit;}

/*ロゴ*/
#logo a {text-decoration: none;}
#logo img {
	display: block;
	width: 250px;	/*ロゴの幅*/
}

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

	/*ヘッダーブロック*/
	header {
		display: flex;	/*中のコンテンツを横並びにする*/
		justify-content: space-between;
		gap: 2rem;	/*中のコンテンツ同士に空けるマージン的な余白。*/
		align-items: center;
			z-index: 1;						/*スクロール中、コンテンツの上になるように*/
	position: fixed;				/*スクロールしても動かないようにする指定。*/

	}

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

/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
/*header nav ul {display: none;}*/
/*900px未満ではヘッダー直下の水平メニューだけ非表示（#menubar配下は対象外）*/
header > nav > ul { display: none; }


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


	
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin-right: 10vw;	/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;		/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;text-decoration: none;
		font-size: 1rem;		/*文字サイズ90%*/
		padding: 0.5rem 0.1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	
	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.2rem;	/*右に空ける余白*/
	}

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


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em;				/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;				/*上に空けるスペース。ドロップダウン同士の隙間。*/
}



/*header-box（ヘッダー右側にあるボタン）
---------------------------------------------------------------------------*/
/*ボックス全体*/
#header-box * {margin: 0;padding: 0;}

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

	#header-box {
		margin-right: 5px;	/*ハンバーガーアイコンと重ならないように適当な余白*/
	}

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


/*ボタンが入ったボックス*/
#header-box .btn {
	list-style: none;
	display: flex;
	gap: 1rem;	/*ボタン同士の間に空けるスペース。１文字分。*/
}

/*メニュー１個あたり（ここにない設定は、下の方にある「btn共通設定」にあります。）*/
#header-box .btn a {
	display: block;text-decoration: none;
	padding: 1rem 1rem;	/*上下、左右へのボタン内の余白*/
	border-radius: 5px;		/*角を少し丸くする*/
		font-size: 0.9rem;		/*文字サイズ90%*/
}

/*ボタンに使用しているアイコン*/
#header-box .btn i {
	margin-right: 1rem;		/*アイコンの右側に１文字分のスペースを空ける*/
	transform: scale(1.4);	/*アイコンサイズを140%に。*/
}

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

	/*ボタンが入ったボックス*/
	#header-box .btn {
		/*display: inline-block;*/
		display:none;
	}
	
	/*ボタン１個あたり*/
	#header-box .btn li {
		margin-bottom: 0.5rem;
	}

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


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

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen header #menubar {display: block;}
.small-screen header #menubar.display-block { display: block; }
.small-screen header #menubar.display-block nav ul { 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;		/*横並びにする*/
    justify-content: flex-end;
}
.large-screen #menubar li a {
	padding: 0.3em 1em;				/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;				/*上に空けるスペース。ドロップダウン同士の隙間。*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	padding: 1rem 1rem;	/*上下、左右へのメニュー内の余白*/
}



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


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.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;
	border-radius: 10px;
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白のことで0.8は色が80%出た状態。*/
}

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

}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.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.7);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen header #menubar nav ul li {
	border-top: 1px 0 1px solid #fff;	/*枠線の幅、線種、色*/
	padding: 0 1rem;		/*メニュー内の余白。上下、左右へ。*/
}


.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;	/*上、左右、下へのブロック内の余白*/
}


/* スマホ時：サブメニューを縦に展開する用 */
.small-screen header #menubar nav ul ul {
  position: static;      /* PC時のabsolute配置を打ち消す */
  display: none;         /* 最初は非表示 */
  margin: 0;
  padding: 0;
}

.small-screen header #menubar nav ul ul li {
  border-bottom: 1px solid #fff;
}

.small-screen header #menubar nav ul ul a {
  padding: 0.8rem 1.5rem;
  display: block;
  color: #ccc;
  font-size: 0.9rem;
}

/* 親メニューに開閉用の矢印を表示（好みに応じて） */
.small-screen header #menubar .ddmenu::after {
  content: "▼";
  float: right;
  transition: transform 0.3s;
}

.small-screen header #menubar .ddmenu.open::after {
  transform: rotate(-180deg);
}



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#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;	/*２本目は使わないので非表示にする*/
}


/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
.new-top * {margin: 0;padding: 0;}

/*ブロック全体*/
.new-top {
	position: absolute;
	top: 80vh;	/*上から80%の場所に配置*/
	z-index: 1;
	width: 80vw;	/*幅は80%*/
	margin-left: 10vw;	/*左に10%空ける*/
	display: flex;
	align-items: center;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: #fff;	/*背景色。*/
	border-radius: 5px;	/*角を丸くする*/
}

/*マウスオン時に透明度を80%に*/
.new-top a:hover {
	opacity: 0.8;
}

/*「お知らせ」の見出し*/
.new-top h2 {
	font-size: 1rem;
	font-weight: normal;
	background: #555;	/*背景色*/
	color: #fff;		/*文字色*/
	border-radius: 3px;	/*角を少しだけ丸く*/
	margin-right: 1rem;	/*右に空けるスペース。テキストブロックとの間に空けるスペースです。*/
	padding: 0 1rem;	/*見出し内の余白。上は0で、左右に１文字分。*/
}

/*テキストのブロック*/
.new-top .text {
	flex: 1;
	
	/*以下4行は、末尾を...として１行にまとめる為のスタイル*/
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*ブロック右側にある「一覧」*/
.new-top .new-list {
	align-self: flex-end;
}


/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
	flex: 1;
	padding-bottom: 5rem;	/*下に10文字分の余白を空ける*/
}

/*トップページ以外のコンテンツ*/
body:not(.home) #contents {
	padding-top: 10rem;		/*上に10文字分の余白を空ける*/
	padding-bottom: 10rem;	/*下に10文字分の余白を空ける*/
}

.sub #contents {
margin-top: 10%;		/*上に10文字分の余白を空ける*/
}

/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul,#contents ol {
	margin-left: 2rem;
	margin-right: 2rem;
}


/*p要素（段落タグ）
---------------------------------------------------------------------------*/
p {
	margin-left: 1rem;	/*左に１文字分のスペース*/
	margin-right: 1rem;	/*右に１文字分のスペース*/
}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow: visible;
	padding: 6vw 0 0;	/*上、左右、下への余白。画面幅100%＝100vwです。*/
}

/*h2見出し（共通）*/
main h2 {
	margin: 0;padding: 0;
	font-size: 2.4rem;		/*文字サイズ。240%。*/
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	margin-bottom: 2vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}
main h2.c {
	align-items: center;	/*見出しをセンタリングする場合*/
}

/*h2見出しのサブテキスト（sub-text）*/
main h2 span.sub-text {
	display: inline-block;
	border-top: 1px solid var(--primary-color);	/*上の線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
	font-size: 0.9rem;		/*文字サイズ80%*/
	opacity: 0.6;			/*透明度。色が60%出た状態。*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	padding-top: 2rem;		/*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

/*見出し上のラインを消すスタイル*/
main h2.no-line span.sub-text {
	border: none;
	padding-top: 0;
}

/* サブページ上部 写真入り　h2 */
.sub .back_img {
  position: absolute;
  background-image: url("../images/common/h2_img.jpg");
  width: 100%;
  height: 30vh;
  top: 0;
  left:0;
  color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 4rem 30px ;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: -1;
}
.sub .back_img .filter {
  background-color: rgba(0, 0, 0, 0.5);
}
.sub .back_img h2, .back_img h3, .back_img p {
  text-align: center;
  font-weight: 400;
  font-size: 3em;
  border: none;
  transition: all 0.5s;
  line-height: 1.5;
  margin: 0;
}
.sub .back_img h2::before, .back_img h3::before, .back_img p::before {
  content: none;
}
.sub .back_img h2 span, .back_img h3 span, .back_img p span {
  font-size: 0.35em;
  margin-top: 8px;
  color: #fff;
}
@media screen and (max-width:600px){  .sub .back_img {
  height: 25vh;}
}
@media screen and (max-width: 600px) {

  .sub .back_img h2, .back_img h3, .back_img p {
    font-size: 2em;
  }

}




/*h3見出し（共通）*/
main h3 {
	font-weight: 600;
	font-size: 1.4rem;	/*文字サイズ140%*/
}

/*box1（1つ目のセクションボックス）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.box1 {
	overflow-x: visible;
	position: relative;
	background: #e8eaee;	/*背景色*/
	padding: 4em;
	margin-top: 10vw;	/*上に空けるスペース。スライドショーとこのボックスの間のスペースです。お好みで。*/
}
.box1 a {
	color: inherit;
}

/*ボックス上部の大きな装飾テキスト*/
.box1 .deco-text {
	position: absolute;
	right: 0;
	top: -13.5vw;		/*文字とボックスの配置バランスです。お好みで調整して下さい。*/
	color: #e8eaee;		/*文字色*/
	font-size: 7vw;		/*下の.box1のmargin-topと合わせる*/
	line-height: 1;
}

/*ボックスの左上イラスト（1つ目）*/
.box1 .illust1 {
	position: absolute;
	right: 20vw;	/*右からの配置場所*/
	top: 9vw;		/*上からの配置場所*/
	width: 23vw;	/*イラストの幅。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*ボックスの左上イラスト（2つ目）*/
.box1 .illust2 {
	position: absolute;
	right: 4vw;		/*右からの配置場所*/
	top: 2vw;		/*上からの配置場所*/
	width: 13vw;	/*イラストの幅。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*テキストボックス*/
.box1 .text {
	margin-bottom: 5rem;	/*下に5文字分の余白*/
}

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

	.box1 {
		display: flex;	/*横並びにする*/
		gap: 5vw;		/*左右の間のスペース*/
		border-radius: 20vw 0 20vw 0;	/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	}
	
	.box1 > * {flex: 1;}

	/*ボックスの左上イラスト（1つ目）*/
	.box1 .illust1 {
		rignt: auto;
		left: 3vw;		/*左からの配置場所*/
		top: -8vw;		/*上からの配置場所。マイナスがついているので本来の向きとは逆に移動します。*/
		width: 15vw;		/*イラストの幅。*/
	}

	/*ボックスの左上イラスト（2つ目）*/
	.box1 .illust2 {
		rignt: auto;
		left: 14vw;		/*左からの配置場所*/
		top: -11vw;		/*上からの配置場所。マイナスがついているので本来の向きとは逆に移動します。*/
		width: 8vw;		/*イラストの幅。*/
	}

	/*テキストボックスの上の小さなイラスト*/
	.box1 h2 img {
		width: 5vw;	/*幅*/
	}

	.box1 .text {
		margin-bottom: 0;	/*下マージンのリセット*/
	}

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


/*画像を囲むブロック*/
.box1 .image {
	position: relative;
}

/*画像の角を少し丸くする指定*/
.box1 .image img {
	border-radius: 10px;
}

/*画像ブロック内の１枚目の写真への追加指定*/
.box1 .image img:nth-of-type(1) {
	width: 80%;	/*画像の幅*/
}

/*画像ブロック内の２枚目の写真への追加指定*/
.box1 .image img:nth-of-type(2) {
	width: 40%;	/*画像の幅*/
}
.box1 .image img:nth-of-type(2) {
	position: absolute;
	right: 0;	/*画像ブロックに対して右側からの配置場所*/
	top: 15vw;	/*画像ブロックに対して上からの配置場所*/
}


/*list1（企業理念コーナー）
---------------------------------------------------------------------------*/
/*冒頭の大きなロゴの飾り*/
.logo-kazari {
	background: url("../images/logo_kazari.svg") no-repeat left top / 70%;	/*ロゴ画像の読み込み。左上に配置し、幅は70%。*/
}

/*１枚目の写真*/
.list1.image1 {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*２枚目の写真*/
.list1.image2 {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*３枚目の写真*/
.list1.image3 {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*４枚目の写真*/
.list1.image4 {
	background: url("../images/4.jpg") no-repeat center center / cover;
}

/*ボックス１個あたり*/
.list1 {
	padding: 2rem 3em 1rem;	/*ボックス内の余白。冒頭のspace-largeを読み込みます。*/
	position: relative;
	overflow-x: hidden;
	height: 59vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 1vh;	/*下に空けるスペース。ボックス同士の隙間です。*/
}

/*マウスオン用のアニメーション*/
.list1::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.list1:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.list1 .text {
	position: relative;z-index: 1;
	width: 100%;		/*幅*/
	color: #fff;	/*文字色*/
	height: auto;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

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

	/*テキストブロック*/
	.list1 .text {
		width: 50%;		/*幅*/
	}

/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.list1.left .text {
	margin-left: auto;
}
	}/*追加指定ここまで*/

/*list1内のh3見出し*/
.list1 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
}

/*list1内のh3見出し内の１文字目の大きな文字*/
.list1 h3 .large {
	font-size: 4rem;	/*文字サイズを4倍*/
}

/*見出しの右上にある英語の小さな文字*/
.list1 h3 span:not(.large) {
	font-size: 1rem;	/*文字サイズを標準に戻す*/
	opacity: 0.5;		/*透明度50%*/
	position: absolute;
	left: 0px;	/*右からの配置場所*/
	top: -1rem;	/*上からの配置場所*/
}

/*全面画像　左右余白あり*/
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

.img_all{
margin: 0 7%;}

	}



/*2カラムブロック　※900px未満では１カラム（私たちのこだわりブロック）
---------------------------------------------------------------------------*/
.list-half * {margin: 0;padding: 0;}


/*２カラムを囲むブロック*/
.list-half .list {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half .list h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

/*ブロック内のh4内のspan（小さな装飾文字）*/
.list-half .list h4 span {
	display: block;
	opacity: 0.5;	/*透明度50%*/
	font-weight: normal;
	font-size: 0.5em;	/*文字サイズを親要素の50%*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広く*/
}

/*画像ブロック共通*/
.list-half .image-l img, .list-half .image-r img {
	border-radius: 50px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

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

	/*２カラムを囲むブロック*/
	.list-half .list {
		flex-direction: row;			/*子要素を横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	}

	/*画像ブロック共通*/
	.list-half .image-l, .list-half .image-r {
		width: 50%;			/*画像の幅*/
	margin: 2rem 5rem 0 0;
}

	}

	/*画像を右に配置する場合*/
	.list-half .image-r {
		margin-left: 2rem;	/*画像の左側に空けるスペース*/
	}

	/*画像を左に配置する場合*/
	.list-half .image-l {
		order: -1;
		margin-right: 2rem;	/*画像の右側に空けるスペース*/
	}

	/*テキストブロック*/
	.list-half .text {
		flex: 1;
		margin: 5% 0% 5% 10%;
	}

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

/*list
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-lr {
	display: flex;
	align-items: center;	/*中のブロックの縦並びの揃え方*/
	background: #fff;		/*背景色*/
	margin-bottom: 30px;		/*ボックスの下に空けるスペース。上、左右、下への順番。*/
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順番。0,0,0は黒の事で0.5は色が50%出た状態の事。*/
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-lr h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 1.25rem;		/*文字サイズ。冒頭で指定しているフォントサイズの1.25倍です。*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-lr p {
	padding: 0;		/*余白のリセット*/
	padding-bottom: 20px;
}
/*ボックス内のfigure画像*/
#contents .list-lr figure,
#contents .list-lr video {
	width: 50%;		/*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-lr .text {
	width: 40%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
	padding: 2% 5%;	/*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
#contents .list-lr:nth-of-type(even) .text {
	order: 1;
}

/*list-c2（お問い合わせ、オンライン相談）
---------------------------------------------------------------------------*/
.list-c2 > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2 {
		display: flex;	/*横並びにする*/
	}

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


/*ボックス１個あたり*/
.list-c2 .list {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	text-shadow: 0px 0px 8px rgba(0,0,0,0.8);	/*テキストの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.6は色が出た状態。*/
	padding: 5rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem 0;		/*上下、左右へのマージン*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2 > * {
		flex: 1;
	}
	.list-c2 .list {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2 > a .list {
		height: 100%;
	}

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


/*左側ボックスの背景*/
.list-c2 .list.image1 {
	background: url("../images/sample4.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.list-c2 .list.image2 {
	background: url("../images/sample5.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2 h4 {
	font-weight: 200;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
}

/*h4見出し内のメインテキスト（main-text）1*/
.list-c2 h4 .main-text {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 1.5rem;	/*下に空ける余白*/
}

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

	.list-c2 h4 .main-text {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

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


/*h4見出し内のサブテキスト（sub-text）*/
.list-c2 h4 .sub-text {
	position: relative;
	padding: 0 5rem;	/*上下、左右への余白設定ですが、両サイドのラインの配置にも影響します。お好みで。*/
}
/*h4見出し内のサブテキストの左右のライン*/
.sub-text::before {left: 0;}
.sub-text::after {right: 0;}
.list-c2 h4 .sub-text::before,.list-c2 h4 .sub-text::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;	/*線の長さ*/
	border-top: 1px solid #fff;	/*ラインの幅、線種、色*/
}

/*見出しの下の説明テキスト*/
.list-c2 .list .text {
	position: relative;z-index: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2 .list::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2 .list:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*ボックス内のボタン（.btn2）*/
.list-c2 .list .btn2 a,
.list-grid7 .list .btn2 a {
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
}

/*ボックス内のボタン（.btn3）*/
.list-c2 .list .btn1 a {
	text-shadow: none;	/*テキストの影を消す*/
}

.slidecm  {
padding: 2rem  0 2rem 0 }

.slidecm .list-c2 .list {
margin: 0 }

.slidecm .list-c2 .text {
width: 80%; }

/*マウスオン用のアニメーション　逆の動き*/
.slidecm .list-c2 .list::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
		background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transform: translateY(-100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/

}
.slidecm .list-c2 .list:hover::before {
	transform: translateY(0%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}


/*左側ボックスの背景*/
.slidecm .list-c2 .list.image1 {
	background: url("../images/1.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.slidecm .list-c2 .list.image2 {
	background: url("../images/2.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.slidecm .list-c2 .list.image3 {
	background: url("../images/3.jpg") no-repeat center center / cover;
}/*右側ボックスの背景*/
.slidecm .list-c2 .list.image4 {
	background: url("../images/4.jpg") no-repeat center center / cover;
}









/*list-grid1（２カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 8rem;	/*下に空けるスペース*/
}




/*ボックス内のp要素*/
.list-grid1 .list .text {
	padding: 0rem 3rem;	/*行間を狭くする*/
}


/*ボックス内のp要素*/
.list-grid1 .list p {
	line-height: 1.5;	/*行間を狭くする*/
}

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


/*ボックス内のfigure画像*/
.list-grid1 .list figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
aspect-ratio:3/1;
overflow: hidden;
}
.list-grid1 .list figure img {
width: 100%;
height: 100%;
  object-fit: cover;}



/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	text-align: center;		/*テキストをセンタリング*/
	font-size: 2rem;		/*文字サイズ130%*/
	margin-bottom: 1rem;	/*下に0.5文字分の余白を空ける*/
	line-height: 2rem;
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}
/*h4内のspan（小さな装飾文字）*/
.list-grid1 .list h4 span {
	display: block;
	font-weight: normal;	/*デフォルトだと太字なので標準に*/
	font-size: 0.5em;		/*文字サイズを70%*/
}

/*ボタン（btn）
---------------------------------------------------------------------------*/
.list-grid1 .list .btn a {
	display: block;text-decoration: none;
	font-size: 1rem;
		letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
		margin: 2rem;

	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color);	/*背景色。css冒頭のvar(accent-color)を読み込みます*/
	color: var(--accent-inverse-color);	/*文字色。css冒頭で指定しているaccent-inverse-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}
/*マウスオン時（btn1、btn2共通）*/
.list-grid1 .list .btn a:hover {
	letter-spacing: 0.5rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}


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

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

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0px;	/*下に空けるスペースをなくす*/
	}

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






/*list-grid7（サービス紹介ブロック）
---------------------------------------------------------------------------*/
.list-grid7 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid7 .list {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/
.list-grid7 .list h4 {
	text-align: center;		/*テキストをセンタリング*/
	font-size: 2rem;		/*文字サイズ130%*/
	margin-bottom: 1rem;	/*下に0.5文字分の余白を空ける*/
	line-height: 2rem;
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*h4内のspan（小さな装飾文字）*/
.list-grid7 .list h4 span {
	display: block;
	font-weight: normal;	/*デフォルトだと太字なので標準に*/
	font-size: 0.5em;		/*文字サイズを70%*/
}

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


/*ボックス内のfigure画像*/
.list-grid7 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -30px;	/*本来の場所より上にずらす*/
	background: #fff;
	border-radius: 100px;		/*角を少しだけ丸く*/
}
.list-grid7 .list figure.icon img {
margin-top: 20px;
}

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

	/*ボックス内のfigure画像*/
	.list-grid7 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -80px;	/*本来の場所より上にずらす*/
	}
	}
    /*　画面サイズが500pxから898pxまではここを読み込む　*/
	@media screen and (min-width:600px) and ( max-width:998px) {
	.list-grid7 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem	/*ブロックの間に空けるマージン的な指定。２文字分。*/
	}
}
	@media screen and (min-width:1000px) {
	.list-grid7 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem	/*ブロックの間に空けるマージン的な指定。２文字分。*/
	}
	}
	

	
/*list-grid3（サービス紹介ブロック ３カラム）
---------------------------------------------------------------------------*/
.list-grid3 .list * {margin: 0;padding: 0;align-items: flex-start;}

/*ボックス１個あたり*/
.list-grid3 .list {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

.list-grid3 .list figure {max-width: 200px;
margin: auto;}


/*ボックス内のh4見出し*/
.list-grid3 .list h4 {
	text-align: center;		/*テキストをセンタリング*/
	font-size: 2rem;		/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*下に0.5文字分の余白を空ける*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*h4内のspan（小さな装飾文字）*/
.list-grid3 .list h4 span {
	display: block;
	font-weight: normal;	/*デフォルトだと太字なので標準に*/
	font-size: 0.5em;		/*文字サイズを70%*/
margin-top:-1rem;
}

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


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

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

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


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

/*日付、記事（共通）*/
.new dt,.new dd {
	border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding-top: 1rem;				/*上の余白*/
	padding-bottom: 1rem;			/*下の余白*/
}

/*日付*/
.new dt {
	padding-right: 4rem;			/*右の余白*/
}


/*よく頂く質問ブロック
---------------------------------------------------------------------------*/
/*faqブロック全体*/
.faq {
	background: #5E5C5A;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
}

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

	.faq {
		display: flex;
		flex-direction: row-reverse;	/*左右の並びをデフォルトと逆に*/
		justify-content: space-between;
	}

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


/*faq内のh2見出し*/
.faq h2 {
	margin: 0;padding: 0;
	font-size: 2rem;	/*文字サイズを2倍*/
	font-weight: 200;	/*文字を細く*/
	letter-spacing: 0.4em;	/*文字間隔を広くする*/
}

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

	/*faq内のh2見出し*/
	.faq h2 {
		writing-mode: vertical-lr;	/*日本語は縦書き。英語は90度回転。*/
		margin-right: 18vw;	/*右側に画面18%程度のスペースを空ける。そこに英語の飾り文字を入れる為。*/
	}

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


/*右側の英語の飾り文字*/
.faq h2 .kazari {
	line-height: 1;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	/*右側の英語の飾り文字*/
	.faq h2 .kazari {
		font-size: 10vw;	/*文字サイズ*/
		position: absolute;
		right: 0px;
		top: var(--space-large);
    	color: rgba(255,255,255,0.05);	/*文字色。255,255,255は白のことで、0.05は色が5%出た状態。*/
	}

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


/*質問*/
.faq dt {
	font-size: 1.3rem;	/*文字サイズ130%*/
	border-top: 1px solid rgba(255,255,255,0.2);	/*上の線の幅、線種、色。255,255,255は白のことで、0.2は色が20%出た状態。*/
	padding: 2rem 0 1rem 0;	/*上、右、下、左への余白*/
}

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

	.faq dt {
		padding: 2rem 2rem 1rem 2rem;	/*上、右、下、左への余白*/
	}

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


/*回答*/
.faq dd {
	padding: 0 0 2rem 0;	/*上、右、下、左への余白*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	.faq dd {
		padding: 0 2rem 2rem 2rem;	/*上、右、下、左への余白*/
	}

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


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

	/*左側のテキストブロック*/
	.faq .text {
		width: 50%;	/*幅*/
	}
	
	}/*追加指定ここまで*/

/*問い合わせブロック
---------------------------------------------------------------------------*/
/*contactブロック全体*/
.contact {
	background: var(--primary-color);	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

	.contact {
		display: flex;
		flex-direction: row-reverse;	/*左右の並びをデフォルトと逆に*/
		justify-content: space-between;
	}

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


/*contact内のh2見出し*/
.contact h2 {
	margin: 0;padding: 0;
	font-size: 2rem;	/*文字サイズを2倍*/
	font-weight: 200;	/*文字を細く*/
	letter-spacing: 0.4em;	/*文字間隔を広くする*/
}

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

	/*.contact内のh2見出し*/
	.contact h2 {
		writing-mode: vertical-lr;	/*日本語は縦書き。英語は90度回転。*/
		margin-right: 18vw;	/*右側に画面18%程度のスペースを空ける。そこに英語の飾り文字を入れる為。*/
	}

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


/*右側の英語の飾り文字*/
.contact h2 .kazari {
	line-height: 1;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	/*右側の英語の飾り文字*/
	.contact h2 .kazari {
		font-size: 15vw;	/*文字サイズ*/
		position: absolute;
		right: 0px;
		top: var(--space-large);
    	color: rgba(255,255,255,0.05);	/*文字色。255,255,255は白のことで、0.05は色が5%出た状態。*/
	}

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


/*各種問い合わせ*/
.contact ul{	border-top: 1px solid rgba(255,255,255,0.2);	/*上の線の幅、線種、色。255,255,255は白のことで、0.2は色が20%出た状態。*/
border-bottom: 1px solid rgba(255,255,255,0.2);	/*上の線の幅、線種、色。255,255,255は白のことで、0.2は色が20%出た状態。*/
	padding: 2rem 0 1rem 0;	/*上、右、下、左への余白*/
	margin-left: 2rem;
}
.contact ul li {
	font-size: 1.1rem;	/*文字サイズ130%*/
	list-style: none;
}
/*問い合わせ一覧 リンクアニメーション装飾*/
.contact ul a:hover{filter: none;}

.contact .cta li  {
  border: none;
  background: none;
}

.contact .cta li span {
  padding-bottom: 7px;
  letter-spacing: 0.1em;
  padding-left: 18px;
}

.contact .cta i {
  transform: translateX(0);
  transition: all 0.3s ease;
}

.contact .cta li:hover i {
  transform: translateX(10px);
}

.contact .cta li:active i {
  transform: scale(1.0);
}

.contact .cta .cont_ani {
  position: relative;
  padding-bottom: 8px;
}

.contact .cta .cont_ani:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 18px;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.contact .cta li:hover .cont_ani:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

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

	.contact li {
		padding: 0rem 2rem;	/*上、右、下、左への余白*/
	}

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

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

	/*左側のテキストブロック*/
	.contact .text {
		width: 60%;	/*幅*/
		margin-left: 3%;
	}
	
	}/*追加指定ここまで*/




/*縦書き用の設定
---------------------------------------------------------------------------*/
/*ボックス全体*/
.title-bg {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
}

/*ボックス内のh2*/
.title-bg h2 {
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*縦並びにする指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
	padding-bottom: 3vw;
}

/*縦書きにする指定*/
.title-bg h2 .tate {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 2rem;
}

/*横書きで使う際の指定。※縦書きを横書きにする為の指定ではないのでご注意下さい。*/
.title-bg h2 .yoko {
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-bottom: 3vw;	/*下に空けるスペース*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	opacity: 0.5;	/*透明度50%*/
}


/*ボタン
---------------------------------------------------------------------------*/
/*btn1、btn2共通*/
.btn1 a, .btn2 a {
	display: block;text-decoration: none;
	padding: 0.5rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 1.5rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
}
/*マウスオン時（btn1、btn2共通）*/
.btn1 a:hover, .btn2 a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}

/*btn1への追加設定*/
.btn1 a {
	color: var(--primary-color);	/*文字色。冒頭のprimary-colorを読み込みます。*/
	background: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*btn2への追加設定*/
.btn2 a {
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*list1内のbtn2の設定。マウスオン時にボタンの背景色を追加。*/
.list1:hover .btn2 a {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}

.btn-bl a {
	display: block;text-decoration: none;
	font-size: 1rem;
		letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color);	/*背景色。css冒頭のvar(accent-color)を読み込みます*/
	color: var(--accent-inverse-color);	/*文字色。css冒頭で指定しているaccent-inverse-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}
/*マウスオン時（btn1、btn2共通）*/
.btn-bl a:hover {
	letter-spacing: 0.5rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}




/*btn3*/
.btn3 {
	text-align: right;	/*テキストを右寄せ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}
.btn3 a {
	display: inline-block;text-decoration: none;
	color: inherit;
	position: relative;
	padding-right: 5rem;	/*矢印のアイコンと重ならないように余白をとる*/
}

/*btn3の矢印のアイコン設定*/
.btn3 a::after {
	content: "";
	background: url("../images/arrow1.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	display: block;
	position: absolute;
	right: 0px;
	bottom: -1rem;		/*下からの配置場所*/
	width: 50px;		/*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
	height: 50px;		/*アイコンの高さ*/
	border-radius: 50%;	/*円形にする指定。この１行を削除すれば正方形になります。*/
	text-align: center;
	transition: 0.3s;		/*hover時に切り替えをなめらかにする*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、色*/
}

/*btn3の矢印のマウスオン時*/
.btn3 a:hover::after {
	background-color: var(--primary-color);	/*背景色を冒頭のprimary-colorにする*/
	background-position: left center;		/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/*背景色が暗い所で使う場合*/
.btn3.white {
	color: #fff;	/*文字色*/
}
.btn3.white a::after {
	background: url("../images/arrow1_white.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
.btn3.white a:hover::after {
	background-color: #fff;				/*背景色を白に*/
	background-position: left center;	/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショーブロック全てを囲むブロック*/
.slide-thumbnail-box {
	overflow-x: hidden;
	padding-left: 0;
	padding-right: 0;
}

/*各スライドショーブロックを囲むブロック*/
.slide-thumbnail1 {
	margin-bottom: 6vw;	/*下に空けるスペース。スライドショーを２個以上置く場合に上下の画像が重ならないようにする為。*/
}

/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
	display: flex;
}

/*画像*/
.slide-thumbnail1 .img img {
	padding: 0 1rem;	/*上下、左右への画像の余白*/
}

/*偶数番目の画像の垂直位置を少しずらす。垂直位置を並べたいならこのブロックを削除。*/
.slide-thumbnail1 .img div:nth-of-type(even) {
	transform: translateY(3vw);
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*btn共通設定（ヘッダーと、フッターの上のボックス内にあるボタンの共通設定）
---------------------------------------------------------------------------*/
.btn a {
	display: block;text-decoration: none;
	background: var(--accent-color);	/*背景色。css冒頭のaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。css冒頭のaccent-inverse-colorを読み込みます。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*マウスオン時*/
.btn a:hover {
	background: var(--accent-inverse-color);	/*背景色。css冒頭のaccent-inverse-colorを読み込みます。*/
	color: var(--accent-color);					/*文字色。css冒頭のaccent-colorを読み込みます。*/
}


/*フッターの上のボックス内にあるボタン（ここにない設定は、すぐ上の「btn共通設定」にあります。）
---------------------------------------------------------------------------*/
/*ボタンに使用しているアイコン*/
.btn-box .btn i {
	margin-right: 2rem;		/*アイコンの右側に２文字分のスペースを空ける*/
	transform: scale(1.4);	/*アイコンサイズを140%に。*/
}

/*ボタンブロック*/
.btn-box .btn {
	list-style: none;margin:0;padding:0;
	display: flex;
	flex-direction: column;	/*縦並びに*/
	justify-content: center;
	align-items: center;
	gap: 2rem;			/*ボタン同士に空けるスペース。２文字分。*/
	height: 80vh;		/*ブロックの高さ。画面の高さの80%。お好みで。*/
	font-size: 1.5rem;	/*文字サイズを150%に*/
}

/*ボタン１個あたり*/
.btn-box .btn li {
	width: 80vw;	/*幅。画面幅の80%*/
}
.btn-box .btn a {
	border-radius: 10px;	/*角を丸くする指定*/
	padding: 1rem 2rem;		/*ボタン内の余白。上下、左右へ。*/
}

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

	/*ボタンブロック*/
	.btn-box .btn {
		flex-direction: row;	/*横並びに変更*/
	}
	
	/*ボタン１個あたり*/
	.btn-box .btn li {
		width: 40vw;	/*幅。画面幅の40%*/
	}

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


/*波のアニメーション
---------------------------------------------------------------------------*/
/*アニメーション*/
@keyframes move-wave {
0% { transform: translateX(0); }
100%   { transform: translateX(-50%); }
}

/*波を囲む全体のブロック*/
.wave-section {
	position: relative;
	
	/*以下の３行の数字については、下のwaveのheight(波の高さ)から1を差し引いた形です。隙間が出る場合があるのでそれが出ないようにしています。*/
	padding-top: 79px;
	top: -79px;
	margin-bottom: -79px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave-section .text {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
}
.wave-wrap use {
	fill: var(--primary-color);			/*塗りつぶしの色。css冒頭のprimary-colorを読み込みます。*/
}

/*上下の波（共通）*/
.wave {
	position: absolute;
	left: 0;
	width: 100%;
	height: 80px;	/*波の高さ。ここを変更する場合は上の.wave-sectionの３箇所の数字も合わせて変更して下さい。*/
}
.wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wave .wave-wrap {
	transform-box: fill-box;
	transform-origin: 0 0;
	animation: move-wave 10s linear infinite;	/*ここの10sを変更すれば波のアニメーション速度が変わります*/
}

/*上の波*/
.wave-top {
	top: 0;
}

/*下の波*/
.wave-bottom {
	bottom: 0;
	transform: rotate(180deg);
}


/*フッター
---------------------------------------------------------------------------*/
#footer * {margin: 0;padding: 0;}
#footer ul {list-style: none;}

/*ブロック全体*/
#footer {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer div.footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer div.footer2 {
    flex: 3;
}

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

	#footer {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴやSNSアイコンが入ったブロック*/
	#footer div.footer1 {
		text-align: left;
		width: 20%;	/*幅。20%。*/
	}

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

#footer .footer_box ul li .li_title {
	padding-bottom: 5px;
	margin-bottom: 7px;
	line-height: 30px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fff;
	font-size: 14px;
	letter-spacing: 1px;
	margin-right: 1rem;
}

#footer .footer_box ul li a {
	color: #FFF;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	text-decoration: none;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	font-size: 13px;
	line-height: 15px;
	position: relative;
}
#footer .footer_box ul li ul {	margin-bottom: 10px;
}

#footer .footer_box ul li a::before {
	font-size: 10px;
	display: block;
	width: 20px;
	line-height: 15px;
	position: absolute;
	top: 5px;
	left: 10px;
	content: '・';
}
#footer .footer_box ul li a:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

#footer .footer_box ul {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#footer .footer_box ul li ul {
	width: 100% !important;
}
.footer_box .box_in {
	width: 100%;
}
.footer_box ul li .li_title {
	font-size: 12px;
	letter-spacing: 0px;
}

.footer_box ul li a {
	padding-left: 20px;
	font-size: 11px;
	line-height: 12px;
}
.footer_box .box_in ul {
	display: block;
	float: left;
	margin-right: 30px;
}

.footer_box .box_in ul {
	width: 20%;
	display: block;

margin-left: 1%;
	padding-right: 0px;
}
@media screen and (max-width:600px) {
.footer1{width: 100%;}
.footer_box {display: none;}
}


/*Copyright部分*/
#footer small {
	display: block;
	text-align: right;
	margin-top: 2rem;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
#footer .sns {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

#footer .sns i {
	font-size: 30px;	/*アイコンサイズ*/
}





/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: #555;
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


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

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	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%;	/*円形にする*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--primary-color);		/*背景色。css冒頭のsecondary-colorを読み込みます。*/
	color:#fff;	/*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*共通設定*/
.bg-slideup {
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
}

/*slideup1画像*/
.slideup1 {
    background-image: url("../images/bg-slideup1.jpg");	/*背景画像の読み込み*/
	color: #fff;
	border-radius: 10vw 10vw 0 0;
}

/*slideup2画像*/
.slideup2 {
    background-image: url("../images/bg-slideup2.jpg");	/*背景画像の読み込み*/
	position: relative;
}

/*slideup2の上部にグラデーションをかけて、「よく頂く質問」ブロックとの境界をなめらかにする*/
.slideup2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 20vh;	/*高さ。画面の高さの20%。お好みで。*/
	background: linear-gradient(var(--secondary-color), transparent);/*背景グラデーション。css冒頭の--secondary-colorから透明(transparent)になるグラデ。*/
}


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

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 2px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。8文字分。*/
	transform: scale(0.85);	/*85%のサイズに縮小*/
	border: 1px solid #777;	/*枠線の幅、線種、色*/
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-bg1 {
	border-color: transparent;	/*枠線を透明に*/
	background: #cd0000;		/*背景色*/
	color: #fff;				/*文字色*/
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
	border-color: transparent;				/*枠線を透明に*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

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

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

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


/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

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


/* カウント文字装飾 追加CSS*/


.box {
  text-align: center;
}
.box p{font-size: 1.2em;}

.box-item {
  /*margin-top: 2rem;*/
}
.js-countUp {
  font-size: 2rem;
  font-weight: bold;
  line-height: 4rem;
margin: 0;
padding: 0;}

.number {
  font-size: 4.5rem;
  color: red;
}



/*調整用スタイル
---------------------------------------------------------------------------*/
/*並べ替え*/
.order1 {
	order: 1;	/*orderは数字の小さな順番に並びます。デフォルトは0なので、それより後ろに表示させたいブロックに使います。（※flex内で使用）*/
}

.padding0 {
	padding: 0 !important;
}
.padding-bottom0 {
	padding-bottom: 0 !important;
}
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/*左右の余白*/
.space-small {
	padding-left: var(--space-small);
	padding-right: var(--space-small);
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}

.clfix::after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.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;}
.pd5 {padding: 0 3rem !important;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);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;}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}

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

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

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