/*pointアイコン　部紹介用CSS
---------------------------------------------------------------------------*/
/*pointブロック全体*/
.list-free .point {
	order: -1;
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	width: 20vw;	/*幅*/
	height: 20vw;	/*高さ*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;		/*文字サイズを80%*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広く*/
	line-height: 1.2;		/*行間を狭く*/
	position: relative;
	background: url("../images/business/point_bg.svg") no-repeat center center / 100%;	/*アイコンの背景画像の読み込み。幅を100%に。*/
}

/*回転させる場合の指定*/
.list-free .point.spin::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url("../images/bg1.svg") no-repeat center center / 100%;	/*アイコンの背景画像の読み込み。幅を100%に。*/
	animation: spin 30s linear infinite;	/*30s（30秒）が１回転する速度です。お好みで変更して下さい。*/
}

/*テキストブロック*/
.list-free .point span {
	position: relative;z-index: 1;
}
/*大きな文字（1や2などの数字に使用）*/
.list-free .point span span {
	display: block;
	font-size: 2rem;	/*文字サイズを２倍*/
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*pointブロック*/
	.list-free .point {
		width: 10vw;	/*幅を変更*/
		height: 10vw;	/*高さを変更*/
	}
	
	}/*追加設定ここまで*/


/*spin（回転するキーフレーム）
---------------------------------------------------------------------------*/
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}



/*up,down,transform1,transform2の共通設定
（待機中の設定）
---------------------------------------------------------------------------*/
.up, .down, .transform1, .transform2 {
	position: relative;
	opacity: 0;		/*透明度（透明の状態）*/
}


/*up,down,transform1,transform2の共通設定
（要素が見えたら実行するアクションの設定）
---------------------------------------------------------------------------*/
.upstyle, .downstyle, .transform1style, .transform2style {
	opacity: 1;				/*透明度（色が100%出た状態）*/
	transition: 1s 0.5s;	/*1sはアニメーションの実行時間1.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}


/*upスタイル。下から上にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.up {
	bottom: -20px;	/*基準値の下20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.upstyle {
	bottom: 0px;	/*基準値まで戻す*/
}


/*downスタイル。上から下にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.down {
	top: -20px;	/*基準値の上20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.downstyle {
	top: 0px;	/*基準値まで戻す*/
}

/*transform1スタイル。その場で回転するスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform1 {
	transform: scaleX(0);	/*幅を0%でスタート*/
}

/*要素が見えたら実行するアクション*/
.transform1style {
	transform: scaleX(1);	/*幅を100%に戻す*/
}


/*transform2スタイル。倒れた状態から起き上がるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

/*要素が見えたら実行するアクション*/
.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}


/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
	opacity: 0;	/*透明度（透明の状態）*/
	filter: blur(30px);
	transform: scale(1.1);
}

/*要素が見えたら実行するアクション*/
.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}


/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.1);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

/*待機中の設定*/
.transform3 {
	transform: scale(0);
}

/*要素が見えたら実行するアクション*/
.transform3style {
	animation: transform3 0.3s ease-out 0.5s both;	/*0.5秒待機後、0.3秒かけてアニメーションを実行*/
}


/*box10
---------------------------------------------------------------------------*/
main .box10 {
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の事でcss冒頭のprimary-colorを読み込みます*/
	padding: 5vw;	/*ボックス内の余白。画面幅100% = 100vwです。*/
	margin-bottom: var(--global-space);	/*ボックスの下（外）に空けるスペース。css冒頭のglobal-spaceを読み込みます*/
}

/*box10の中にある最後のlist-freeの下マージンをなくす*/
.box10 .list-free:last-of-type {
	margin-bottom: 0;
}



/*list-free（レイアウトフリー用）
---------------------------------------------------------------------------*/
/*.list-free * {margin: 0;padding: 0;}*/

/*list-freeボックス*/
.list-free {
	display: flex;			/*直接の子要素を横並びに*/
    flex-direction: column;	/*一旦縦並びにしておく*/
	margin-bottom: 10vw;	/*ボックスの下（外側）に空けるスペース*/
	gap: 5vw;				/*子要素同士に空けるマージン的な要素。画面幅100%＝100vwです。*/
}

/*bg1,bg2背景の中にある最後のlist-freeの下マージンをなくす*/
.bg1 .list-free:last-of-type,
.bg2 .list-free:last-of-type {
	margin-bottom: 0;
}

/*テキストブロック*/
.list-free .text {
    align-self: flex-start;
	flex: 1;
}
/*テキストブロック*/
.list-free .text p {
   margin: 0;
}
/*h3見出し*/
.list-free h3 {
	margin-top: 0;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-size: 1.5rem;		/*文字サイズを150%に*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
}

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

/*縦書きスタイル*/
.list-free .vertical-text {margin: auto;}
.list-free .vertical-text::before,
.list-free .vertical-text::after {
	content: "";
	position: absolute;
	width: 20px;	/*カギカッコの幅。お好みで。*/
	height: 50px;	/*カギカッコの高さ。お好みで。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
}

/*bg1背景上で枠線の色のみ変更*/
.bg1 .list-free .vertical-text::before,
.bg1 .list-free .vertical-text::after {
	border-color: var(--primary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

.list-free .vertical-text::before {
	top: -15px;		/*テキストからの距離。お好みで。*/
	left: -15px;	/*テキストからの距離。お好みで。*/
	border-right: none;		/*右の線は消す*/
	border-bottom: none;	/*下の線は消す*/
}

.list-free .vertical-text::after {
	bottom: -15px;	/*テキストからの距離。お好みで。*/
	right: -15px;	/*テキストからの距離。お好みで。*/
	border-left: none;	/*左の線は消す*/
	border-top: none;	/*上の線は消す*/
}

/*画像ブロック*/
.list-free .image {
	position: relative;
}
.list-free .image img {
	box-shadow: 0px 10px 40px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.1は色が10%出た状態。。*/
	margin-bottom: 1rem;	/*画像の下に空けるマージン。２枚以上画像を配置した場合に間のスペースになります。*/
}

/*iframeを使う場合の設定（shop.htmlのGoogleMapに使用）*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/*画像の上にポイントアイコンを置いた場合の設定*/
.list-free .image.order3 .point {
	position: absolute;
	left: -20px;
	top: -20px;
}
.list-free .image.order1 .point {
	position: absolute;
	right: -20px;
	top: -20px;
}

/*画像ブロック内のdivタグ。テキストを囲むブロックです。*/
.list-free .image > div {
	font-size: 0.7rem;	/*文字サイズを70%*/
	padding: 1rem 2rem;	/*上下、左右への余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*list-freeボックス*/
	.list-free {
		flex-direction: row;		/*縦並びから横並びにする*/
		align-items: flex-start;	/*中のボックス類を上に寄せる*/
	}
	
	.list-free .vertical-text {
		writing-mode: vertical-rl;	/*縦書きの指定。*/
		text-orientation: upright;	/*文字の向き*/
		padding: 1rem 0.5rem;	/*上下、左右へのh3内の余白*/
	}
	
	/*画像ブロックが３番目（右側）になった場合に画面右側いっぱいまで広げる*/
	.list-free .image.order3 {
		margin-right: calc(-1 * var(--global-space));
	}
	.list-free .image.order3 img {
		border-radius: 30px 0px 0px 30px;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}
	
	/*画像ブロックが１番目（左側）になった場合に画面左側いっぱいまで広げる*/
	.list-free .image.order1 {
		margin-left: calc(-1 * var(--global-space));
	}
	.list-free .image.order1 img {
		border-radius: 0px 30px 30px 0px;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	/*その他（汎用向け）お好みでもっと追加して使ってもOK*/
	.list-free .w1 {width: 30%;}
	.list-free .w2 {width: 50%;}
	.list-free .order1 {order: 1;}
	.list-free .order2 {order: 2;}
	.list-free .order3 {order: 3;}
	.list-free .align-self-start {align-self: flex-start;}
	.list-free .align-self-center {align-self: center;}
	.list-free .align-self-end {align-self: flex-end;}

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

/*ボタン1、ボタン2の共通設定
---------------------------------------------------------------------------*/
.btn11 a, .btn12 a {
	display: block;text-decoration: none;
	font-size: 1rem;
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}


/*ボタン1（btn1）
---------------------------------------------------------------------------*/
.btn11 a {
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
}


/*ボタン2（btn2）
---------------------------------------------------------------------------*/
.btn12 {
	text-align: right;	/*テキストを右寄せ*/
}
.btn12 a {
	display: inline-block;
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	position: relative;
	padding-right: 80px;	/*矢印のアイコンと重ならないように余白をとる*/
}

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

/*矢印のマウスオン時*/
.btn12 a:hover::after {
	background: var(--primary-color) url("../images/arrow1.svg") no-repeat left center / 120px;	/*背景色をprimary-colorに変更し、背景画像の左側を読み込みます。最後の120の数字は、widthの２倍で指定します。*/
}

/*pointアイコン
---------------------------------------------------------------------------*/
/*pointブロック全体*/
.point {
	order: -1;
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	width: 20vw;	/*幅*/
	height: 20vw;	/*高さ*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;		/*文字サイズを80%*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広く*/
	line-height: 1.2;		/*行間を狭く*/
	position: relative;
	background: url("../images/bg1.svg") no-repeat center center / 100%;	/*アイコンの背景画像の読み込み。幅を100%に。*/
}

/*回転させる場合の指定*/
.point.spin::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url("../images/bg1.svg") no-repeat center center / 100%;	/*アイコンの背景画像の読み込み。幅を100%に。*/
	animation: spin 30s linear infinite;	/*30s（30秒）が１回転する速度です。お好みで変更して下さい。*/
}

/*テキストブロック*/
.point span {
	position: relative;z-index: 1;
}
/*大きな文字（1や2などの数字に使用）*/
.point span span {
	display: block;
	font-size: 2rem;	/*文字サイズを２倍*/
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*pointブロック*/
	.point {
		width: 10vw;	/*幅を変更*/
		height: 10vw;	/*高さを変更*/
	}
	
	}/*追加設定ここまで*/



/*list2ブロックを変更する　list8へ　関連する課・センターなど
---------------------------------------------------------------------------*/
.list8 {
	display: flex;			/*flexボックスを使う指定*/
	margin: 0% 5%;
	margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 10px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	}

/*ボックス内のfigure画像*/
.list8 figure {
display: flex;
	width: 30%;	/*幅*/
	margin: -10px 10px -10px -10px;	/*上の.list2で設定しているpadding分を相殺して画像をブロックいっぱいに出す*/
	overflow: hidden;
}

.list8 figure img{
height: 100%;
width: 100%;
object-fit: cover;
}

/*ボックス内のtextブロック*/
.list8 .text {
	flex: 1;
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 1rem 1rem;
}

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {
	
	/*list-freeボックス*/
.list8 {
		flex-direction: column;		/*縦並び*/
		align-items: flex-start;	/*中のボックス類を上に寄せる*/
	}
.list8 figure {
	width: 100%;	/*幅*/
	margin: 0;
}
.list8 .text {
	margin: 1rem;
}	}

/*ボックス内のh4タグ*/
.list8 h4 {
	margin: 0 0 0.5em!important;	/*上、左右、下への余白*/
}

/*ボックス内のpタグ*/
.list8 p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に*/
}

/*list2内でのbtn*/
.list8 p:not(.btn) {flex: 1;}

/*list8 ボックス内の住所・TEL 情報テーブル*/
.list8 .adbox {
	width: 100%;
    padding: 1em;
    margin: 1em 0 0rem;
    border: dashed 1px #5b8bd0;/*点線*/
}

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {
	
	/*住所・TELテーブルを縦並びにする*/
.list8 .adbox td  {
 display: block;
 width: 100%; 
 }
}






/*list-squareブロック　ここは？
---------------------------------------------------------------------------*/
/*１個あたりのボックス設定*/
.list-square {
	width: 33.3%;	/*幅*/
}

/*ボックス内のtextブロック*/
.list8-square .text {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態*/
	color: #fff;					/*文字色*/
	padding: 10px 20px;				/*上下、左右へのボックス内の余白*/
}

/*ボックス内のh4タグとpタグ*/
.list8-square h4,
.list8-square p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
}

/*小さな端末では説明文は非表示に。表示させてしまうと画像がかなり隠れてしまう可能性があります。*/
.list8-square p {
	display: none;
}


/*list,list2,list-squareの共通設定
---------------------------------------------------------------------------*/
.list8, .list8, .list8-square {
	position: relative;		/*子要素でabsolute(絶対配置)を使うための指定*/
}

/*左上の丸いアイコン*/
.list8 .icon,
.list8 .icon,
.list8-square .icon {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	font-size: 0.6em;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 60px;			/*幅*/
	height: 60px;			/*高さ*/
	line-height: 1.5;		/*行間*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のrelativeに対して絶対配置させる指示*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
}


/*btnの設定　これもbtn8へ変更
---------------------------------------------------------------------------*/
p.btn8 {margin: 0;}

/*ボタンを囲むブロック*/
.btn8 {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn8 a,
.btn8 input {
	text-decoration: none;border: none;
	display: block;
	font-size: 1em;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: #2b5796;	/*背景色*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 0.7em 1em;		/*上下、左右へのボタン内の余白*/
	margin-top: 2em;		/*ボタンの上に１文字分のスペースを空ける*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*pointブロック*/
.btn8 a,
.btn8 input {
	border-radius: 10px;
	position: fixed;
	top:0rem;
	right: 1rem;
}
	}/*追加設定ここまで*/


/*ボタンのマウスオン時*/
.btn8 a:hover,
.btn8 input:hover {
	cursor: pointer;			/*inputタグを使う場合に「手」のマークになるように。リンクと同じ表示になるようにという事です。*/
	opacity: 1;					/*一番上のリンク設定でhoverにopacityを指定しているので、適用されないようにする。*/
	filter: brightness(1.2);	/*少しだけ明るくする。*/
	transform: scale(1.02);		/*実寸の102%に拡大*/
}

/*ボタン内にiタグを使った場合*/
.btn8 i {
	margin-left: 15px;		/*テキストとの間に空ける余白*/
	opacity: 0.5;			/*透明度。色が50%でた状態。*/
	transform: scale(1.4);	/*サイズを1.4倍にする*/
}

