@charset "utf-8";

@import url("https://unpkg.com/sanitize.css");

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

@import url("animation.css");
@import url("inview.css");
@import url("slide.css");

:root {
    --primary-color: #ffffff;		
	--secondary-color: #060638;		
    --primary-text-color: #ffffff;	
}

html,body {
	font-size: 16px;	
}

/*ヘッダー*/
.header {
	background-color: #060638;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
  }
  
  .header-inner {
	display: flex;
	align-items: center;
	max-width: 1024px;
	height: 60px;
	padding: 2vw 0.8em;
	margin: 0 auto;
	font-size: 1.2em;
  }
  
  .header-nav-list {
	display: inline-block;
  }
  
  .header-nav-item {
	float: left;
	padding: 12px;
	font-size: 18px;
	font-weight: bold;
	color: #ccc;
	text-align: center;
	list-style: none;
	position: relative;
  }
  
  .header-nav-item a {
	text-decoration: none;
  }
  
  .header-ham {
	display: none;
  }
  
  .menu2 {
	width: 20px;
	height: 3px;
	margin: 4px 0;
	margin-right: 0;
	background-color: #333;
  }
  
.header-nav-item:hover {
	background: #eee;
  }
  
  .logo img {
	width: 140px;
  }

  .en,
  .jp {
	margin: 0;
	text-align: center;
  }
  
  .en {
	font-size: 0.8em;
	font-weight: bold;
  }
  
  .jp {
	margin-top: 0.5em;
	font-size: 0.5em;
  }
  .button-4 {
	display: inline-block;
	padding: 0.4em 1.6em;
	font-size: 0.8em;
	color: #fff;
	text-decoration: none;
	user-select: none;
	background: #00b5ad;
	border: 1px #00b5ad solid;
	border-radius: 3px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
	transition: 0.2s ease;
	margin: 10px 100px;
  }
  
  .button-4:hover {
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  }
  
  @media screen and (max-width: 480px) {
	.header-nav-list {
	  display: none;
	}
  
	.header-nav {
	  margin: 0 0 0 auto;
	}
  
	.header-ham {
	  display: block;
	}

	.button-4{
	  display: none;
	}

	.hamburger{
	  display: block;	
	}
  }


  @keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }
  @-webkit-keyframes bugfix {
	from {
	  padding: 0;
	}
	to {
	  padding: 0;
	}
  }

/* プルダウンメニューのスタイル */
.dropdown-menu {
    list-style: none;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    display: none; 
    z-index: 100;
}

/* プルダウンメニューアイテム */
.dropdown-menu li {
    padding: 8px;
}

.dropdown-menu li a {
    text-decoration: none;
    color: #333;
}

/* ホバー時にプルダウンメニューを表示 */
.header-nav-item:hover .dropdown-menu {
    display: block;
}

/* プルダウンメニューのスタイル調整 */
.dropdown-menu li:hover {
    background-color: #f1f1f1;
}

.hamburger {
	display: block;
	height: 60px;
	margin-left: auto;
	position: relative;
	z-index: 10;
	width: 60px;
	border: none;
	background-color: transparent;
}
.hamburger.-active .hamburger__line {
	background-color: transparent;
}
.hamburger.-active .hamburger__line::before {
	top: 0;
	transform: rotate(45deg);
}
.hamburger.-active .hamburger__line::after {
	top: 0;
	transform: rotate(-45deg);
}
.hamburger.-active .hamburger__text::before {
	content: '閉じる';
}
.hamburger__line {
	display: block;
	height: 2px;
	position: absolute;
	top: 23px;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	background-color: #ffffff;
	transition: 0.4s;
}
.hamburger__line:before,
.hamburger__line:after {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
	background-color: #ffffff;
	transition: inherit;
}
.hamburger__line:before {
	top: -6px;
}
.hamburger__line:after {
	top: 6px;
}
.hamburger__text {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}
.hamburger__text::before {
	content: "メニュー";
	text-align: center;
	color: #ffffff;
	font-size: 10px;
	font-weight: 900;
}
.header__nav-area {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 10000;
	height: 100vh;
	width: 300px;
	visibility: hidden;
	padding-top: 60px;
	background-color: #fff;
	transition: 0.4s;
}
.header__nav-area.-active {
	left: 0;
	visibility: visible;
}
.global-navigation {
	padding-top: 40px;
	padding-right: 25px;
	padding-bottom: 120px;
	padding-left: 25px;
}
.global-navigation__list > li {
	padding-bottom: 20px;
	border-bottom: 2px solid #e7e9ee;
}
.global-navigation__list > li + li {
	margin-top: 20px;
}
.global-navigation__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #172e59;
	font-weight: 900;
	transition: color 0.4s;
	font-size: 0.875rem;
}
.global-navigation__link.-accordion {
	position: relative;
	background: none;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding: 0;
}
.global-navigation__link.-accordion::after {
	content: '';
	display: block;
	height: 12px;
	position: absolute;
	top: 50%;
	right: 5px;
	width: 2px;
	background-color: #ed3242;
	transform: translateY(-50%);
	transition: transform 0.4s;
}
.global-navigation__link.-accordion::before {
	content: '';
	display: block;
	height: 2px;
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	background-color: #ed3242;
	transform: translateY(-50%);
	
}
.global-navigation__link.-active::after {
	transform: translateY(-50%) rotate(-90deg);
}
.accordion {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: 0.4s;
}
.accordion.-active {
	height: auto;
	padding-top: 30px;
	visibility: visible;
}
.accordion__list li {
	font-size: 0.75rem;
}
.accordion__list li + li {
		margin-top: 21px;
}
.accordion__link {
	color: #172e59;
}

@media (min-width: 800px){
	.hamburger{ display: none; }
	}

.video{
	margin: 100px 0px 0px 0px;
}

#table01 th,
#table01 td {
	width: 100%;
	display: block;
}

#table01 th {
	width: 100%;
}

#table01 td {
	padding-top: 0;
}

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

	html, body {
		font-size: 13px;	
	}
		
	.table01  {
		font-size: 0.8em;
	}
	
	#table01 th {
		width: 100%;
	}
	
	#table01 td {
		padding-top: 0;
	}
}/*追加指定ここまで*/




body {
	font-family: "Noto Serif JP", serif;
	background: var(--secondary-color);	
	color: #ffffff;		/*文字色*/
	line-height: 2;		/*行間*/
	text-align: center;
}

h1 {
	font-family: "Nico Moji";
	text-align: center;
	color: #2e8be3;
	text-shadow: 3px 3px 5px rgba(14, 51, 29, 0.5)
	
  }

	
	
#sec04_02{
	background: url(../images/背景05.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*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;}


a {
	color: var(--primary-color);		/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}


a:hover {
	opacity: 0.8;	/*色を80%*/
}

main > section,
main > article {
	padding: 2% 5%;	/*上下、左右への余白*/
}

#container {
	max-width: 1800px;	
	margin: 0 auto;
	overflow-x: hidden;
}

#mainimg-box {
	width: 100%;
	height: 0;
	padding-top: 45%;
	position: relative;z-index: -1;
}
#mainimg {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#contents {
	margin-top: 100px;
	flex: 1;
	z-index: 1;
}

#background_video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

#video_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/car.01.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

#video_controls {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

main h2 {
	text-align: center;		
	font-size: 2.8rem;		
	font-weight: normal;	
	letter-spacing: 0.1em;	
	margin-bottom: 2em;	
}

main h2 span {
	display: block;
	font-size: 0.3em;		
	opacity: 0.5;			
	letter-spacing: 0.5em;	
}


main h2.normal {
	text-align: left;	
	font-size: 2rem;	
	border-bottom: 1px solid #d1d3d3;	
	margin-bottom: 0.5em;	
}
/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
ユーザー エージェント スタイルシート
footer {
    display: block;
    unicode-bidi: isolate;
}

.footer-nav{
	display: flex;
	justify-content: center;
}


.list-normal .list {
	padding: 2rem 0;	
}

/*ボックス内のfigure画像*/
.list-normal .list figure {
	margin-bottom: 1rem;	
}
/*ボックス内のh4タグ*/
.list-normal .list h4 {
	margin: 0;			
	margin-bottom: 0.5;
	font-size: 1.3rem;	
}

/*ボックス内のpタグ*/
.list-normal .list p {
	margin: 0;			/*デフォルトマージンを一旦リセット*/
	font-size: 0.9rem;	/*文字サイズ。bodyで指定しているfont-sizeの0.9倍。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	.list-normal .list div {
		flex: 1;
	}

	/*ボックス１個あたり*/
	.list-normal .list {
		display: flex;	/*flexボックスを使う指定*/
		align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	}

	/*ボックス内のfigure画像*/
	.list-normal .list figure {
		margin-bottom: 0;	/*下に空けるスペースをリセットする*/
		width: 40%;			/*画像の幅*/
		margin-right: 2rem;	/*画像の右側に空けるスペース*/
	}

	}/*追加指定ここまで*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 40px;	/*アイコンサイズ*/
}

/*３列タイプのボックス（grid）
---------------------------------------------------------------------------*/
/*ボックス１個あたり(indexで使用)*/
.list-grid .list {
	position: relative;
    display: grid;	/*gridを使う指定*/
    grid-template-rows: auto 1fr auto;	/*list内の上から２番目のブロック(.text)だけ伸ばし、他は自動。*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
	margin: 0;
}

/*ボックス内のpタグ*/
.list-grid .list .text p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

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

/*ボタン*/
.list-grid .btn a {
	display: block;text-decoration: none;
	text-align: center;		/*テキストをセンタリング*/
	background: #555;		/*背景色。css冒頭で指定しているテーマカラーを読み込みます*/
	color: var(--primary-text-color);		/*文字色。css冒頭で指定しているテーマカラーを読み込みます*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(3, 1fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem;	/*マージン的な指定。２文字分。*/
	}
	
	/*ボックス１個あたり*/
	.list-grid .list {
		margin-bottom: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
	}

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

/*「新着情報」ブロック
---------------------------------------------------------------------------*/
/*新着情報ブロック*/
.new {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}
/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
	padding: 5px 0;		/*上下、左右へのボックス内の余白*/
}
/*日付(dt)設定*/
.new dt {
	width: 8em;	/*幅。8文字(em)分*/
}
/*日付の横のマーク（共通設定）*/
.new dt span {
	display: none;	/*小さな端末では非表示にしておく。*/
}
/*記事(dd)設定*/
.new dd {
	width: calc(100% - 8em);	/*「8em」は上の「.new dt」のwidthの値です*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

/*日付(dt)設定*/
.new dt {
	width: 14em;	/*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
	display: flex;	/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
.new dt span {
	display: inline-block;	/*表示させる*/
	width: 7em;				/*幅。7文字(em)分。*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.8em;		/*文字サイズを80%に。*/
	text-align: center;		/*文字をセンタリング*/
	margin-right: 1em;		/*アイコンの右側に空けるスペース*/
	align-self: flex-start;	/*高さを間延びさせない指定*/
	line-height: 1.8;		/*行間を少し狭く*/
	position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
	border-radius: 2px;		/*角を丸くする指定*/
}

/*icon-bg1設定。サンプルテンプレートでは「施工事例」と書いてあるマーク*/
.new dt span.icon-bg1 {
	background: #cd0000;	/*背景色*/
}

/*icon-bg2設定。サンプルテンプレートでは「キャンペーン」と書いてあるマーク*/
.new dt span.icon-bg2 {
	background: #006acd;	/*背景色*/
}

/*記事(dd)設定*/
.new dd {
	width: calc(100% - 14em);	/*「14em」は上の「.new dt」のwidthの値です。*/
}

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


/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #424242;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";	/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
}

/*回答*/
.faq dd {
	padding: 5px 1rem 30px 3rem;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*bg1（背景色がついたブロック）
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--secondary-color);	/*背景色。css冒頭で指定しているテーマカラーを読み込みます*/
	color: var(--primary-text-color);	/*文字色。css冒頭で指定しているテーマカラーを読み込みます*/
}

/*リンクテキスト*/
.bg1 a {
	color: inherit;
}

.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		
	background: #3b3b3b;		
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	color: #090909;			/*文字色*/
}
/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2em;		/*最後の「2em」がテーブルの下に空けるスペースです*/
}
/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}
/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #3e3e3e;	/*背景色*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*テーブル１行目に入った見出し部分（※caption）*/
	.ta1 caption {
		padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
	}

	/*th（左側）、td（右側）の共通設定*/
	.ta1 th, .ta1 td {
		padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
	}

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

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

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

.clearfix::after {content: "";display: block;clear: both;}color-check
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5rem {margin-bottom: 5rem !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;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;}

	
@media screen and (min-width:900px) {

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

}

  .container-calendar {
	background: var(--secondary-color);
	width: 100%;
	margin: 0 auto;
  }
  .button-container-calendar button {
	cursor: pointer;
	display: inline-block;
	zoom: 1;
	background: #00a2b7;
	color: #fff;
	border: 1px solid #0aa2b5;
	border-radius: 4px;
	padding: 5px 10px;
  }
  .table-calendar {
	border-collapse: collapse;
	width: 100%;
  }
  .table-calendar th,
  .table-calendar td{
	padding: 10px;
	border: 1px solid #e2e2e2;
	text-align: center;
	vertical-align: top;
  }
  .date-picker.selected {
	font-weight: bold;
	color: #fff;
	background: #cc0000;
  }
  .date-picker.selected span {
	border-bottom: 2px solid currentColor;
  }
  /* 日曜 */
  .date-picker:nth-child(1) {
  color: red;
  }
  /* 土曜 */
  .date-picker:nth-child(7) {
  color: blue;
  }
  #monthAndYear {
	text-align: center;
	margin-top: 0;
  }
  .button-container-calendar {
	position: relative;
	margin-bottom: 1em;
	overflow: hidden;
	clear: both;
  }
  #previous {
	float: left;
  }
  #next {
	float: right;
  }
  .footer-container-calendar {
	margin-top: 1em;
	border-top: 1px solid #dadada;
	padding: 10px 0;
  }
  .footer-container-calendar select {
	cursor: pointer;
	display: inline-block;
	zoom: 1;
	background: #ffffff;
	color: #454545;
	border: 1px solid #bfc5c5;
	border-radius: 3px;
	padding: 5px 1em;
  }

.title_br_r {
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	.title_br_r {
		color: var(--primary-color);
		border-bottom: 1px solid var(--primary-color);
		}

	.title_br_r {
			font-size: 2.5rem;
			padding-bottom: 16px;
			margin-bottom: 25px;
		}
	}

.title_br_r {
	font-size: 2.5rem;
	padding-bottom: 16px;
	margin-bottom: 25px;
}
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.table_r_w th {
    background: #0aa6e8;
    color: #fff;
    border-left: 1px solid var(--primary-color);
}

.table_r_w th, .table_r_w td {
    vertical-align: middle;
    text-align: center;
}
	@media screen and (min-width: 641px) {
    	.table_r_w th, .table_r_w td {
        	padding: 16px 8px;
		 }
}

.Form {
margin-top: 80px;
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
@media screen and (max-width: 480px) {
.Form {
	margin-top: 40px;
}
}
.Form-Item {
border-top: 1px solid #ddd;
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
display: flex;
align-items: center;
}
@media screen and (max-width: 480px) {
.Form-Item {
	padding-left: 14px;
	padding-right: 14px;
	padding-top: 16px;
	padding-bottom: 16px;
	flex-wrap: wrap;
}
}
.Form-Item:nth-child(5) {
border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 480px) {
.Form-Item-Label {
	max-width: inherit;
	display: flex;
	align-items: center;
	font-size: 15px;
}
}
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
@media screen and (max-width: 480px) {
.Form-Item-Label.isMsg {
	margin-top: 0;
}
}
.Form-Item-Label-Required {
border-radius: 6px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
background: #e4190e;
color: #fff;
font-size: 14px;
}
.Form-Item-Label-any {
	border-radius: 6px;
	margin-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 48px;
	display: inline-block;
	text-align: center;
	background: #5bc8ac;
	color: #fff;
	font-size: 14px;
	}
@media screen and (max-width: 480px) {
.Form-Item-Label-Required {
	border-radius: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 32px;
	font-size: 10px;
}
.Form-Item-Label-any {
	border-radius: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 32px;
	font-size: 10px;
}
}
.Form-Item-Input {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 18px;
}
@media screen and (max-width: 480px) {
.Form-Item-Input {
	margin-left: 0;
	margin-top: 18px;
	height: 40px;
	flex: inherit;
	font-size: 15px;
}
}
.Form-Item-Textarea {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 216px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 18px;
}
@media screen and (max-width: 480px) {
.Form-Item-Textarea {
	margin-top: 18px;
	margin-left: 0;
	height: 200px;
	flex: inherit;
	font-size: 15px;
}
}
.Form-Btn {
border-radius: 6px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
width: 280px;
display: block;
letter-spacing: 0.05em;
background: #5bc8ac;
color: #fff;
font-weight: bold;
font-size: 20px;
}
@media screen and (max-width: 480px) {
.Form-Btn {
	margin-top: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 160px;
	font-size: 16px;
}
}
  
  .chart {
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0;
	width: 650px;
	table-layout: fixed;
  }
  
  .chart tr {
	background-color: #e6f2f5;
	padding: .35em;
	border-bottom: 2px solid #fff;
  }
  .chart th,
  .chart td {
	padding: 1em 10px 1em 1em;
	border-right: 2px solid #fff;
  }
  .chart th {
	font-size: .85em;
  }
  .chartone tr{
	background-color: #167F92;
	color:#0a0a0a;
  }
  .charttwo th {
	  background: #78bbc7;
	  color: #050505;
  }
  .txt{
	 text-align: left;
	 font-size: .85em;
	 color: #167F92	;
  }
  .price{
	text-align: right;
	color: #167F92;
	font-weight: bold;
  }
  .non{
	background:#e6f2f5
  }
  @media screen and (max-width: 600px) {
	.chart {
	  border: 0;
	  width:100%
	}
	.chart th{
	  background-color: #167F92;
	  display: block;
	  border-right: none;
	}
	.chartone{
	  border: none;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	}
	.chart tr {
	  display: block;
	  margin-bottom: .625em;
	}
	.chart td {
	  border-bottom: 1px solid #bbb;
	  display: block;
	  font-size: .8em;
	  text-align: right;
	  position: relative;
	  padding: .625em .625em .625em 4em;
	  border-right: none;
	}
	
	.chart td::before {
	  content: attr(data-label);
	  font-weight: bold;
	  position: absolute;
	  left: 10px;
	  color: #167F92;
	}
	.chart td:last-child {
	  border-bottom: 0;
	}
	.charttwo th {
	  color: #fff;
  }
  }

  .thumbnail-view {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

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

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

@media screen and (max-width: 600px) {
	.thumbnail img {
		width: 55px;		
		margin: 2px;		
		cursor: pointer;	
		transition: 0.3s;	
	}
}
@media screen and (max-width: 600px){
		.aisatsu{
		text-align: center;
		font-size: 14px;
		}
	}

/*スライドショーブロック全てを囲むブロック*/
.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);}
}




/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: var(--primary-inverse-color);		/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: #f4e5aa;		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

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

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

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

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


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

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

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

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "“";	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;		/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -40px;	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

	}/*追加指定ここまで*/
.tema2{
	color:#2d2d2d;
	font-weight:bold;
	font-size: 20px;
	font-family: "Noto Serif JP", serif;
}



.box17 {
	overflow-x: visible;
	position: relative;
	background: #638091;	/*背景色*/
	padding: var(--space-large);	/*ボックス内の余白。冒頭にあるspace-largeを読み込みます。*/
	color: var(--primary-color);		/*文字色*/
	margin-top: 10vw;	/*上に空けるスペース。スライドショーとこのボックスの間のスペースです。お好みで。*/
}
.button-7 {
	display: inline-block;
	padding: 0.4em 2.6em;
	font-size: 0.8em;
	color: #fff;
	text-decoration: none;
	user-select: none;
	background: #00b5ad;
	border: 1px #00b5ad solid;
	border-radius: 3px;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
	transition: 0.2s ease;
  }
  
  .button-7:hover {
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  }

/*ボックス上部の大きな装飾テキスト*/
.box17 .deco-text {
	position: absolute;
	right: 0;
	top: -13vw;		/*font-sizeを２倍にし、気持ち小さくしたサイズ（背景色と少し重ねる為）にする。*/
	color: #1aa3f1;	/*文字色*/
	font-size: 7vw;		/*下の.box1のmargin-topと合わせる*/
	line-height: 1;
}

/*ボックスの左上イラスト（クツ）*/
.box17 .illust1 {
	position: absolute;
	right: 0;		/*右からの配置場所*/
	top: 8vw;		/*上からの配置場所*/
	width: 20vw;	/*イラストの幅。*/
	transform: rotate(-10deg);	/*左に10度回転*/
}

/*ボックスの左上イラスト（帽子）*/
.box17 .illust2 {
	position: absolute;
	right: 22vw;	/*右からの配置場所*/
	top: 2vw;		/*上からの配置場所*/
	width: 15vw;	/*イラストの幅。*/
	transform: rotate(10deg);	/*右に10度回転*/
}

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

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

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

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

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

	/*ボックスの左上イラスト（帽子）*/
	.box17 .illust2 {
		right: auto;
		left: 15vw;		/*左からの配置場所*/
		top: -5vw;		/*上からの配置場所。マイナスがついているので本来の向きとは逆に移動します。*/
		width: 6vw;		/*イラストの幅。*/
	}

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

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

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


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

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

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

/*画像ブロック内の２枚目の写真への追加指定*/
.box17 .image img:nth-of-type(2) {
	width: 40%;	/*画像の幅*/
}
.box17 .image img:nth-of-type(2) {
	position: absolute;
	right: 0;	/*画像ブロックに対して右側からの配置場所*/
	top: 15vw;	/*画像ブロックに対して上からの配置場所*/
}
@media screen and (max-width:768px) {
.box17 .image img:nth-of-type(2) {
	position: absolute;
	right: 0;	/*画像ブロックに対して右側からの配置場所*/
	top: 45vw;	/*画像ブロックに対して上からの配置場所*/
	width: 30%;
	
}
}
.btn1 a, .btn2 a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に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を読み込みます。*/
	border: 1px solid var(--primary-color);		/*枠線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
}

.tema {
	position: relative;
	color: #ffffff;
	display: inline-block;
	margin: 47px 0;
	text-shadow: 0 0 2px white;
	font-family: "Noto Serif JP", serif;
  }
.tema:before {
	content: "";
	position: absolute;
	background: #78a0af;
	width: 1600px;
	height: 160px;
	border-radius: 50%;
	top: 50%;
	border: dashed 1px white;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: -1;
	box-shadow: 0px 0px 0px 5px #a9e1ff;
	font-family: "Noto Serif JP", serif;
  }

 

.fade-in-text {
	visibility: hidden;
	font-size: 1.7em;
	font-family: "Noto Serif JP", serif;	
}

   /*追加指定ここまで*/
   @media screen and (max-width:768px) {
	.fade-in-text{
		font-size: 25px;
	}
}
.midasi h2 {
	font-size: 3.4rem;
	font-family: "Noto Serif JP", serif;
	font-style: italic;
	letter-spacing: .1em;
	color: #fff;
	text-shadow: -4px 3px 0 #fa4141, -8px 6px 0 #000;
  }
.midasi p{
	font-size: 1.7rem;
}

@media screen and (min-width: 768px){
	.br-sp {display: none; }
	}
.cash{
	font-size: 20px;
	background: linear-gradient(transparent 70%, #e97b44 70%);
}
.danzi{
	color: #ea7e0b;
	font-weight: bold;
}
.menu01{
	font-size: 15px;
	color: #167F92;
}
.menu02{
	font-size: 30px;
}
.act{
    display: inline-block;
	color: #006acd;
	font-size: 15px;
}