@charset "utf-8";


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

/*Google Fonts Import
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*slick.css Import
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

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


/*CSSカスタムProperties
---------------------------------------------------------------------------*/
:root {

	--primary-color: #32cd32;		/*Main accent color*/
	--primary-inverse-color: #fff;		/*primary-color Pair of colors*/

	--global-space: 5vw;			/*For centralized management of margins on a site*/
}


/*animation1 Keyframe Settings
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1 Keyframe Settings（Versatile）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*Overall Settings
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

body {
	margin: 0;padding:0;
	font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*Font type*/
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: #fff;									/*Background color*/
	color: #333;										/*Font color*/
	line-height: 2;										/*Line spacing*/
	animation: opa1 0.2s 0.5s both;								/*Wait 0.5 seconds, then fade in over 0.2 seconds*/
}

/*reset*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
input {font-size: 1rem;}

/*table General settings*/
table {border-collapse:collapse;}

/*General image settings*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

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

/*iframe tag*/
iframe {width: 100%;}

/*If section follows*/
section + section {
	margin-top: 8vw;	
}


/*Setting the font size
--------------------------------------------------------------------------------*/
/*Font size when the "Large" button is pressed*/
html.f-large {
	font-size: 24px;
}

/*Font size when "Small" button is pressed*/
html.f-small {
	font-size: 17px;
}


/*Link (General) Settings
---------------------------------------------------------------------------*/
a {
	color: #333;		/*Link Text Color*/
	transition: 0.3s;	/*Time to transition when mouse is over: 0.3 seconds*/
}
a:hover {
	color: var(--primary-color);		/*font color css冒頭で指定しているprimary-colorを読み込む*/
	filter: brightness(1.2);		/*Make it slightly brighter when you hover the mouse*/
}


/*container（Block that surrounds everything except the footer）
---------------------------------------------------------------------------*/
#container {
	padding: 0 var(--global-space);	/*Margins inside the container on the top, bottom, left and right 左右の余白はcss冒頭で指定しているglobal-spaceを読み込む*/
}


/*contents（Blocks surrounding main）
---------------------------------------------------------------------------*/
#contents {
	padding: 3vw 0 5vw;	/*Margins within contents to top, left, right, and bottom 画面幅100%＝100vw*/
}

/*Top page contents*/
.home #contents {
	padding-top: calc(3vw + 40px);	/*The buttons on the slideshow move below the image, so I set the px appropriately so they don't overlap*/
}

/*header（The top block contains the logo and phone number）
---------------------------------------------------------------------------*/
/*Header Block*/
header {
    display: flex;	/*Align boxes horizontally in a header*/
    justify-content: space-between;
    align-items: center;
	position: relative;	/*Specifications required for absolute positioning of character size block*/
}

/*Logo Image*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: block;
	width: 350px;	/*Logo Image Width*/
}

/*Header center banner*/
header .banner {
	max-width: 500px;	/*Maximum width これ以上広くならない*/
	flex: 1;
	margin: 0 3vw;		/*Space outside the banner on all sides*/
}

/*Number Blocking*/
address {
	font-style: normal;
	line-height: 1.2;	/*Narrow the line spacing*/
	text-align: center;	/*Centering text*/
	padding: 10px 0;	/*Margins within the block on the top, bottom, left and right*/
	margin-top: 70px;	/*Space to leave above, so as not to overlap the font size box*/
}

/*Telphone number*/
address .tel {
	font-size: 2rem;	/*Double the font size*/
	color: var(--primary-color);	/*Font coloer css冒頭で指定しているprimary-colorを読み込む*/
}

	/*Additional specifications for screen width of 900px or less*/
	@media screen and (max-width:900px) {
	
	/*Header Block*/
	header {
		flex-direction: column;	/*Align boxes vertically in a header*/
	}
	
	/*Logo Image*/
	#logo img {
		margin-top: 20px;	/*Space above the logo*/
	}
	
	/*Number Blocking*/
	address {
		margin-top: 0;	/*Reset Margins*/
	}
	
	}/*Additional specifications end here*/


	/*Additional specifications for screen width of 400px or less*/
	@media screen and (max-width:400px) {
	
	/*Logo Image*/
	#logo img {
		width: 70%;	/*Logo Image Width*/
		margin: 0;
		padding: 0;
	}
	
	}/*Additional specifications end here*/


/*Font size change button
---------------------------------------------------------------------------*/
/*Entire button block*/
#f-size {
    background: #fff;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    border-radius: 0px 0px 5px 5px;
    display: flex;
    align-items: center;
    padding: 10px 15px;	
    position: absolute;		/*Absolute positioning for the header*/
    right: 0px;				/*Location from the right*/
    top: 0px;				/*Location from the right*/
}

/*"Text size" text*/
#f-size p {
	margin: 0;
	margin-right: 10px;	/*Space to be left on the right side. Space between the button*/
	font-size: 17px;	/*font size*/
}

/*Blocks surrounding "small" and "large"*/
#f-size ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;			/*Specifying to use flex boxes*/
	align-items: center;	/*Specifies vertical alignment, so that the text is centered vertically*/
}

/*"Small" button settings*/
#f-size ul li#f-small {
	margin-right: 5px;	/*The space to the right. This is the gap between the "Large" and the "Large" character*/
}
#f-size ul li#f-small::before {
	display: block;
	content: "小";		/*Outputs the character "small"*/
	font-size: 17px;	/*Font size*/
	width: 40px;		/*width*/
	line-height: 40px;	/*height*/
	text-align: center;	/*Center content*/
	background: #eee;	/*Background color*/
	border-radius: 5px;
}

/*"Large" button settings*/
#f-size ul li#f-large::before {
	display: block;
	content: "大";		/*Output the character "Large"*/
	font-size: 30px;	/*Font size*/
	width: 50px;		/*width*/
	line-height: 50px;	/*height*/
	text-align: center;	/*Center content*/
	background: #eee;	/*Background color*/
	border-radius: 5px;
}

/*Selected setting*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
	background: #ff0000;	/*Background color*/
	color: #fff;		/*Font color*/
}

/*When you hover your mouse over the link text, a hand symbol will appear*/
#f-size li {
	cursor: pointer;
}

	/*Additional specifications for screen width of 900px or less*/
	@media screen and (max-width:900px) {
	
	/*Entire button block*/
	#f-size {
		right: 60px;	/*Overwrite the placement from the right. Make sure the three-bar (hamburger) icon doesn't overlap*/
	}
	
	}/*Additional specifications end here*/

	/*Additional specifications for screen width of 900px or less*/
	@media screen and (max-width:900px) {
	
	/*Entire button block*/
	#f-size {
		display: none;	/*Hide because space is narrow*/
	}
	
	}/*Additional specifications end here*/


/*Menu block initial settings
---------------------------------------------------------------------------*/
#menubar {opacity: 0;line-height: 1.5;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

.large-screen #menubar {opacity: 1;}

.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}

/*3 bars hidden by default*/
#menubar_hdr.display-none {display: none;}

/*Dropdowns hidden by default*/
.ddmenu_parent ul {display: none;}

/*Setting to add an arrow icon to the menu that specifies ddmenu*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";		/*Specify the icon name (Font Awesome) you want to use here*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合がある*/
	font-size: 0.7rem;		/*Font size to 70%*/
	padding-right: 0.5rem;	/*Margin to be left on the right side, 0.5 characters*/
}


/*Common menu block settings for large and small devices
---------------------------------------------------------------------------*/
/*Settings per menu*/
#menubar a {
	display: block;text-decoration: none;
}

/*Lowercase English part*/
#menubar span {
	display: block;
	font-size: 0.7em;	/*Font size is 70% of the parent element*/
	letter-spacing: 0.1em;	/*Increase the letter spacing a little*/
	opacity: 0.6;		/*Transparency. 60% of the color is visible*/
}


/*Menu block settings for large devices
---------------------------------------------------------------------------*/
/*A box surrounding the menu block*/
.large-screen #menubar {
    position: sticky;	/*The menu is fixed to the top of the screen*/
    top: 0;
    z-index: 2;
    transition: opacity 0.3s;
}

/*Setting the entire menu block*/
.large-screen #menubar > nav > ul {
	display: flex;	/*Side by side*/
	justify-content: space-between;
	align-items: center;
}

/*Settings per menu*/
.large-screen #menubar li {
	flex: 1;		/*Set individual menus to be evenly spaced and use the full width*/
	position: relative;	/*Create a standard for the width of the drop-down*/
	text-align: center;	/*Centering text*/
}

/*Setting links (a elements)*/
.large-screen #menubar li a {
	flex: 1;
	background: var(--primary-color);	/*Background color. The primary-color specified at the beginning of the CSS is read*/
	color: var(--primary-inverse-color);	/*Text color. The primary-inverse-color specified at the beginning of the CSS is read*/
	padding: 0.8rem 0;	/*Top, bottom, left and right margins*/
}

/*Brighten on mouse over*/
.large-screen #menubar li a:hover {
	filter: brightness(1.2);
}

/*Box surrounding the menu block when the font size is "large"*/
html.f-large .large-screen #menubar {
	position: relative;	/*The menu will be two-tiered, so remove the sticky setting to make it scroll. If you want to keep it fixed, delete this line*/
}

/*Settings for the entire menu block when the font size is "large"*/
html.f-large .large-screen #menubar > nav > ul {
	flex-wrap: wrap;	/*Allow line breaks to make the menu two-tiered*/
}

/*Settings per menu when font size is "large"*/
html.f-large .large-screen #menubar > nav > ul > li {
	flex: auto;
	width: 33.33%;	/*Menu width. Since it has three columns, it is 33.33%*/
}


/*When the menu block for large devices reaches the top of the screen (fixed)
---------------------------------------------------------------------------*/
/*Font color*/
.large-screen #menubar.fixed a {
    opacity: 0.8;	/*Transparency. Only 80% of the color comes through*/
}

/*When mouse is on*/
.large-screen #menubar.fixed a:hover {
	opacity: 1;		/*Transparency. Brings out 100% of the color*/
}

/*Narrow the top and bottom margins of the menu*/
.large-screen #menubar.fixed2 li a {
	padding-top: 0.4rem;	/*Top margin*/
	padding-bottom: 0.4rem;	/*Bottom margin*/
}


/*Large and small devices with common drop-down menu settings
---------------------------------------------------------------------------*/
/*Dropdown Block*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*Wait 0.1 seconds, then fade in over 0.5 seconds*/
}


/*Drop-down menus for large devices
---------------------------------------------------------------------------*/
/*Entire Dropdown Menu Block*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 2;
	width: 100%;
	top: 100%;
	left: 0px;
}

/*The top, bottom, left and right margins for each drop-down menu*/
.large-screen #menubar ul ul a {
	padding: 0.6rem 1rem !important;
}


/*Opening block for small devices
---------------------------------------------------------------------------
.small-screen #menubar {height: 0px;}*/

/*Menu block settings*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;	/*The space to leave above. This is to prevent it from overlapping with the hamburger icon, so you can change it to your liking*/
	background: var(--primary-color);	/*Background color css冒頭で指定しているprimary-colorを読み込む*/
	animation: animation1 0.2s both;	/*Run animation1.　0.2sは0.2秒の事。*/
	color: var(--primary-inverse-color);	/*Font color css冒頭で指定しているprimary-inverse-colorを読み込む*/
}

/*Settings per menu*/
.small-screen #menubar li {
	border: 1px solid #fff;		/*Border width, line style, and color*/
	margin: 1rem;			/*Space to leave outside the menu*/
	border-radius: 5px;		/*Specify rounded corners*/
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3rem;		/*Margins within the menu, top, bottom, left and right*/
}
.small-screen #menubar li li a {
	background: var(--primary-inverse-color);	/*Background color css冒頭で指定しているprimary-inverse-colorを読み込む*/
	color: var(--primary-color);			/*Font color css冒頭で指定しているprimary-colorを読み込む*/
}


/*Three-bar (hamburger) icon setting
---------------------------------------------------------------------------*/
/*Blocks surrounding the three bars*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 2vw;		/*Location from above*/
	right: 2vw;		/*Location from the right*/
	width: 50px;	/*width*/
	height: 50px;	/*height*/
	padding: 15px;	/*Block margins*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/*Background color*/
}

/*以下、変更不要 No changes required below*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*Bar Settings*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*Line Weight*/
	background-color: #fff;		/*Line Color*/
	border-radius: 2px;		/*Slightly rounded corners*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下、変更不要 No changes required below*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*Main Block
---------------------------------------------------------------------------*/
/*h2 Heading*/
main h2 {
	margin: auto;
	padding: 0;
	text-align: center;
	font-size: 1.8rem;		/*Font size*/
	position: relative;		/*Required specifications for placing ulines*/
	font-weight: normal;
	letter-spacing: 0.1em;
}

/*h2 accent line setting*/
main h2 .uline {
	display: inline-block;position: relative;
	padding: 0.5rem 0 0 0;
	bottom: -3px;		/*Specifies to overlap a dark line with a light line. It will match the width of the border*/
	border-bottom: 3px solid var(--primary-color);	/*Dark line width, line type, var is color css冒頭で指定しているprimary-colorを読み込む*/
}

/*Setting the right decoration characters*/
main p .small {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	font-size: 0.8em;	/*Font size is 60% of the parent element*/
	opacity: 0.5;		/*Transparency. 50% of the color is visible*/
	display: block;
}
main p .big {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	font-size: 1.4em;
	color: #363332;
	line-height: 1.2em;
	display: block;
}


/*Centering the h2 text*/
main h2.c {
	display: block;
	border: none;		/*Hide underline*/
	text-align: center;	/*Centering text*/
	font-size: 2rem;	/*Double the font size*/
}

/*H3 heading*/
main h3 {
	font-size: 1.3rem;		/*font size*/
	letter-spacing: 0.1em;		/*Increase the letter spacing a little*/
	font-weight: normal;		/*Change default bold to normal*/
}


/*Common footer
---------------------------------------------------------------------------*/
#footer-contents, #footermenu {
	padding: 2rem var(--global-space);	/*The space inside the box on the top, bottom, left and right 左右はcss冒頭で指定しているglobal-spaceを読み込む*/
}


/*Footer content (blocks containing addresses and maps)
---------------------------------------------------------------------------*/
/*Whole block*/
#footer-contents {
	background: #6a6462;	/*Background color*/
	color: #fff;		/*Letter color*/
}
#footer-contents a {
	color: inherit;
}

/*Left block*/
#footer-contents .left {
	margin-bottom: 50px;	/*Space below*/
}


	/*Additional specification for screen width of 901px or more*/
	@media screen and (min-width:901px) {
	
	#footer-contents {
		display: flex;		/*Specifying to use flex boxes*/
		gap: 2rem;		/*Margin-like settings between left and right boxes*/
	}
	
	/*Left block*/
	#footer-contents .left {
		margin-bottom: 0;	/*Reset bottom margin*/
		width: 50%;		/*width leftとrightで合計100に。お好みで変更して可*/
	}
	
	/*Right block*/
	#footer-contents .right {
		width: 50%;		/*width leftとrightで合計100に。お好みで変更して可*/
	}

	}/*Additional specifications end here*/



/*A map in footer content レスポンシブにする為のもので、基本は編集不要
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*If you want to increase the height of your map, try increasing this value*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*Footer menu settings
---------------------------------------------------------------------------*/

/*フッターテスト*/
#footermenu {
	background: #363332;		/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.8rem;		/*文字サイズ。*/
	text-align: center;
	margin: 0 auto;
}

#footermenu .footer-nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	padding: 0 0.3em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#footermenu .footer-nav li {
	margin: 0px 20px;
}
#footermenu .footer-nav a {
	text-decoration: none;
	color: #fff;
	padding: 0px;
	border: none;
	display: inline-block;
}
#footermenu .footer-nav a:hover {
	color: #32cd32;
}


/*Footer Settings
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	background: #1d1b1b;		/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 1rem;			/*ボックス内余白*/
}

/*Link txt*/
footer a {color: inherit;text-decoration: none;}

/*Copyright*/
footer .pr {display: block;}


/*Social media icons in the footer
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;		/*A margin-like element between icons. One character*/
}
.icons i {
	font-size: 40px;	/*Icon Size*/
}


/*FAQ
---------------------------------------------------------------------------*/
/*question*/
.faq {
	margin: 50px 0;
}

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

/*Icon（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";				/*Icon code*/
	padding-right: 1rem;			/*Space between icon and text*/
	color: var(--primary-color);		/*Color of the icon css冒頭で指定しているprimary-colorを読み込む*/
}

/*Answer*/
.faq dd {
	padding: 0 1rem 1rem 3rem;		/*Margins within the box 上、右、下、左への順番*/
}

/*Cursor of element with openclose applied*/
.openclose {
	cursor: pointer;			/*Cursor shape リンクと同じスタイルにしてクリックできると認識*/
}


/*list-half (a box divided into two parts)
---------------------------------------------------------------------------*/
/*Image Block*/
.list-half .image {
    width: 60vw;	/*width 60%。*/
	margin: 0 auto;	/*画像を中央に配置*/
	padding: 5vw 0;	/*上下、左右への余白。画像の上下に隙間をあける*/
}

.text {
	text-align: left;
}

	/*Additional specification of screen width of 600px or more*/
	@media screen and (min-width:600px) {
	
	/*Whole Box*/
	.list-half {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5vw;			/*左右の間に空けるマージン的な要素*/
		position: relative;
	}

	/*Txt block*/
	.list-half .text {
		flex: 1;
	}

	/*Image block*/
	.list-half .image {
		padding: 0;			/*余白リセット*/
		width: 40vw;			/*width 40%。*/
	}

	/*For when swapping left and right*/
	.list-half.reverse {
		flex-direction: row-reverse;
	}

	}/*Additional specifications end here*/


/*Image Shadow Style*/
.list-half .shadow1 {
	box-shadow: -4vw 4vw 0 rgba(0,0,0,0.05);
}

/*Shadow in the reverse case*/
.list-half.reverse .shadow1 {
	box-shadow: 4vw 4vw 0 rgba(0,0,0,0.05);
}


/*list-grid1
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*Per box*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 1rem;			/*下に空けるスペース*/
}

/*p element inside a box*/
.list-grid1 .list p {
	font-size: 0.85rem;			/*文字サイズ85%*/
	line-height: 1.5;			/*行間を狭くする*/
}

/*Per box*/
.list-grid1 .list {
	padding: 1rem;					/*ボックス内余白。１文字分。*/
	background: #fff;				/*背景色*/
    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%出た状態*/
}

/*Figure image in a box*/
.list-grid1 .list figure {
	margin: -1rem;				/*In order to fill the image to the full frame, specify the padding of the above “.list-grid1 .list” with negative margins*/
	margin-bottom: 0.5rem;			/*画像下に空けるスペース*/
}

	/*Additional specification of screen width of 800px or more*/
	@media screen and (min-width:800px) {

	/*A block that encloses the entire list block*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)へ*/
		gap: 1rem;				/*ブロックの間に空けるマージン的な指定*/
	}

	/*Per box*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*Additional specifications end here*/


/*Button (btn)
---------------------------------------------------------------------------*/
.btn a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;				/*テキストをセンタリング*/
	background: var(--primary-color) !important;	/*背景色。css冒頭で指定しているprimary-colorを読み込む*/
	color: var(--primary-inverse-color) !important;	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込む*/
	padding: 0.5rem !important;			/*ボタン内余白*/
	margin-top: 1rem !important;			/*ボタンの外（上）に空けるスペース*/
}


/*bg1 Block with background color
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: #fcf8ea;				/*背景色*/
	padding-top: 5vw;				/*ボックス内の上に空ける余白。お好みで調整*/
	padding-bottom: 5vw;				/*ボックス内の下に空ける余白。お好みで調整*/
	/*margin-top: 10vw;		ボックス外の上に空ける余白。お好みで調整*/
	/*margin-bottom: 10vw;		ボックス外の下に空ける余白。お好みで調整*/
	
	/*以下、変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}
.bg1 a {
	color: inherit;
}


/*Announcement block
---------------------------------------------------------------------------*/
/*Announcement block*/
.new {
	background: rgba(0,0,0,0.02);			/*背景色。0,0,0は黒のことで0.02は色が2%出た状態*/
	overflow: hidden;
	margin-bottom: 4rem;				/*ブロックの下に空けるスペース。4文字分*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除*/
.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
	background: rgba(0,0,0,0.04);
}

/*Date (dt) setting*/
.new dt {
	padding: 1rem 1rem 0;				/*dt内の余白。上、左右、下への順番*/
}

/*Article (dd) settings*/
.new dd {
	padding: 1rem;	/*Margins within dd*/
	text-align: left;
}

/*Span within the block. Common settings for the icon-like part next to the date*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;				/*行間（アイコンの高さ）*/
	border-radius: 3px;				/*角を丸くする指定*/
	padding: 0 0.5rem;				/*上下、左右へのブロック内余白*/
	width: 8rem;					/*幅。8文字分*/
	transform: scale(0.8);				/*80%のサイズに縮小*/
	background: #fff;				/*背景色*/
	color:#777;					/*文字色*/
	border: 1px solid #999;				/*枠線の幅、線種、色*/
}

/*icon-bg1*/
.new .icon-bg1 {
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込む*/
	color: var(--primary-inverse-color);		/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込む*/
	border-color: transparent;			/*枠線を出したくないので透明に*/
}

	/*Additional specification of screen width of 700px or more*/
	@media screen and (min-width:700px) {

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

	/*Date (dt) setting*/
	.new dt {
		padding: 1rem 0 1rem 2rem;		/*dt内の余白。上、右、下、左への順番*/
	}

	/*Article (dd) settings*/
	.new dd {
		padding: 1rem 2rem 1rem 0;		/*dd内の余白。上、右、下、左への順番*/
	}

	}/*Additional specifications end here*/


/*2-3 columns (main-contents, sub-contents settings)
---------------------------------------------------------------------------*/
/*The main-contents block*/
.main-contents {
	margin-bottom: 2vw;				/*ボックスの下に空けるスペース*/
}

	/*Additional specification for screen width of 901px or more*/
	@media screen and (min-width:901px) {

	/*Specification for use in columns*/
	main.column {
		display: flex;				/*横並び*/
		justify-content: space-between;		/*並びかたの種類指定*/
		gap: 3vw;				/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contents block*/
	.main-contents {
		text-align: center;
		margin-bottom: 0;
		order: 2;				/*並び順。数字の小さい順番に表示*/
		flex: 1;
	}
	
	/*sub-contents Common to all blocks*/
	.sub-contents {
		width: 20%;				/*幅。お好みで変更*/
	}
	
	}/*Additional specifications end here*/


/*H3 elements (headings) in subcontent*/
.sub-contents h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.sub-contents h3::first-letter {
	border-left: 3px solid var(--primary-color);	/*左側アクセント用ラインの幅、線種、色*/
	padding-left: 10px;
}


/*Submenu Settings
---------------------------------------------------------------------------*/
/*Entire submenu block*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;				/*上、左右、下へのマージン*/
	border-top: 1px solid #ccc;			/*上の枠線の幅、線種、色*/
}

/*Per menu*/
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;				/*上下、左右へのメニュー内余白*/
	background: #fff;				/*背景色*/
}

/*Per menu item (excluding child menu items)*/
.submenu > li {
	border: 1px solid #ccc;				/*枠線の幅、線種、色*/
	border-top: none;				/*上の線のみ無くす*/
}

/*Child Menu*/
.submenu li li a {
	padding-left: 2rem;				/*左に余白を空ける*/
}


/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 1rem;					/*ボックス内余白*/
	margin-bottom: 1rem;				/*ボックスの下に空けるスペース*/
	background: rgba(0,0,0,0.05);			/*背景色*/
	border: solid 1px #ccc;				/*線の線種、幅、色*/
	box-shadow: 0px 0px 1px 1px #fff inset;		/*ボックスの影。右へ、下へ、ぼかし幅、距離。#fffは白のことでinsetは内側へ向けての影指定*/
}

/*Remove bottom margin of submenu in box1*/
.box1 .submenu {
	margin-bottom: 0;
}


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

/*A block that surrounds the entire thumbnail*/
.thumbnail-parts {
	display: flex;					/*flex指定*/
	justify-content: center;			/*並びかたの種類の指定。センタリング指定*/
	margin-bottom: 2rem;				/*下に空けるスペース。２文字分*/
}

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


/*Table（ta_profile）
---------------------------------------------------------------------------*/
.ta_profile caption {
	font-weight: bold;		/*太字*/
	padding: 0.5rem 1rem;		/*ボックス内余白*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;		/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta_profile table block settings*/
.ta_profile {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブル一番上の線。幅、線種、色*/
	width: 100%;			/*幅*/
	margin-bottom: 0;		/*テーブル下に空けるスペース*/
}

/*tr (one line) tag setting*/
.ta_profile tr {
	border-bottom: 1px solid #999;	/*テーブル下線。幅、線種、色*/
}

/*Common settings for th (left side) and td (right side)*/
.ta_profile th, .ta_profile td {
	padding: 1rem;			/*ボックス内余白*/
	word-break: break-all;		/*英語などのテキストを改行で自動的に折り返す設定。これがないとテーブルを突き抜けて表示される場合がある*/
}

/*Setting only th (left side)*/
.ta_profile th {
	width: 30%;			/*幅*/
	text-align: left;		/*左寄せへ*/
	background: #eee;		/*背景色*/
}

	
	@media screen and (min-width:900px) {
		.ta_profile {
			width: 90%;
			text-align: left;
		}

		
		.ta_profile th {
			width: 30%;	/*幅*/
		}

	}

/*Table（ta_recruit）
---------------------------------------------------------------------------*/
.ta_recruit caption {
	font-weight: bold;		/*太字*/
	font-size: 1.2rem;
	padding: 0.5rem 1rem;		/*ボックス内余白*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;		/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta_recruit table block settings*/
.ta_recruit {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブル一番上の線。幅、線種、色*/
	width: 100%;			/*幅*/
	margin-bottom: 5rem;		/*テーブル下に空けるスペース*/
}

/*tr (one line) tag setting*/
.ta_recruit tr {
	border-bottom: 1px solid #999;	/*テーブル下線。幅、線種、色*/
}

/*Common settings for th (left side) and td (right side)*/
.ta_recruit th, .ta_recruit td {
	padding: 1rem;			/*ボックス内余白*/
	word-break: break-all;		/*英語などのテキストを改行で自動的に折り返す設定。これがないとテーブルを突き抜けて表示される場合がある*/
}

/*Setting only th (left side)*/
.ta_recruit th {
	width: 30%;			/*幅*/
	text-align: left;		/*左寄せへ*/
	background: #eee;		/*背景色*/
}

	
	@media screen and (min-width:900px) {
		.ta_recruit {
			width: 100%;
			text-align: left;
		}

		
		.ta_recruit th {
			width: 40%;	/*幅*/
			padding: 1rem 2rem;		/*ボックス内余白*/
		}

	}


/*Table（ta_contact）
---------------------------------------------------------------------------*/
.ta_contact caption {
	font-weight: bold;		/*太字*/
	padding: 0.5rem 1rem;		/*ボックス内余白*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;		/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta_contact table block settings*/
.ta_contact {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブル一番上の線。幅、線種、色*/
	width: 100%;			/*幅*/
	margin-bottom: 1rem;		/*テーブル下に空けるスペース*/
}

/*tr (one line) tag setting*/
.ta_contact tr {
	border-bottom: 1px solid #999;	/*テーブル下線。幅、線種、色*/
}

/*Common settings for th (left side) and td (right side)*/
.ta_contact th, .ta_contact td {
	padding: 1rem;			/*ボックス内余白*/
	word-break: break-all;		/*英語などのテキストを改行で自動的に折り返す設定。これがないとテーブルを突き抜けて表示される場合がある*/
}

/*Setting only th (left side)*/
.ta_contact th {
	width: 30%;			/*幅*/
	text-align: left;		/*左寄せへ*/
	background: #eee;		/*背景色*/
}

	
	@media screen and (min-width:900px) {
		.ta_contact {
			width: 100%;
			text-align: left;
		}

		
		.ta_contact th {
			width: 40%;	/*幅*/
			padding: 1rem 2rem;		/*ボックス内余白*/
		}

	}

.red_small {
	font-size: 0.8em;
	color: #ff0000;
	padding-left: 5px;
	font-weight: normal;
}

/*Table (ta2) Used as a reception table for the sub-block
---------------------------------------------------------------------------*/
/*The heading part in the first row of the table (caption)*/
.ta2 caption {
	text-align: center;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: bold;		/*太字*/
	padding: 10px;			/*ボックス内余白*/
}

/*ta2 setting*/
.ta2 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;		/*テーブル下に空けるスペース*/
	text-align: center;		/*センタリング*/
	background: #fff;		/*背景色*/
	color: #333;			/*文字色*/
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #ccc;		/*テーブル枠線の幅、線種、色*/
}

/*Day of the week and AM/PM*/
.ta2 th {
	background: #fffbe3;
}


/*Preparation for horizontal scrolling of tables on small devices
---------------------------------------------------------------------------*/
/*Blocks surrounding the table*/
.ta-box {
	overflow-x: auto;
	margin-bottom: 1rem;
}

/*Set the minimum width only for ta2 in the block*/
.ta-box .ta2 {
	min-width: 600px;
}

/*パン屑リスト　setting
---------------------------------------------------------------------------*/
.breadcrumb {
	list-style: none;
	padding: 10px;
	background-color: #f8f9fa;
	border-radius: 4px;
}

.breadcrumb li {
	display: inline;
	font-size: 18px;
}

.breadcrumb li+li:before {
	padding: 8px;
	color: #6c757d;
	content: ">";
}

.breadcrumb li a {
	color: #007bff;
	text-decoration: none;
}

.breadcrumb li a:hover {
	color: #0056b3;
	text-decoration: underline;
}

.breadcrumb .active {
	color: #6c757d;
}

/*メインコンテンツ内　setting
---------------------------------------------------------------------------*/
.title_h2 {
	margin-bottom: 50px;
}

.info-contents {
	display: block;
}

.info-contents img {
	width: 100%;
	object-fit: cover;
	height: 300px;
}


.info-contents p {
	width: 100%;
	margin: 30px auto 30px;
	text-align: left;
}

.info-contents_left {
	width: 100%;
	display: block;
}

.info-contents_right {
	width: 100%;
	display: block;
}

@media screen and (min-width:900px) {
.info-contents {
	display: flex;
}

.info-contents img {
	width: 100%;
	height: 100%;
}

.info-contents p {
	width: 80%;
	margin: 0 auto 30px;
	text-align: left;
}

.info-contents {
	display: flex;
}

.info-contents p {
	width: 80%;
	margin: 0 auto 30px;
	text-align: left;
}

.info-contents_left {
	width: 50%;
}

.info-contents_right {
	width: 50%;
}
}

#access .info-contents {
	display: block;
}

#access .info-contents p {
	display: block;
	text-align: center;
}

.access-maps {
	display: block;
	width: 100%;
	height: 450px;
	margin-bottom: 50px;
}
.access-maps iframe {
	width: 100% !important;
	height: 100% !important;
}

@media screen and (min-width:900px) {
.access-maps {
	display: block;
	width: 100%;
	height: 600px;
	margin-bottom: 50px;
}
.access-maps iframe {
	width: 100% !important;
	height: 100% !important;
}
}

.thought_title {
	position: relative;
	text-align: center;
}
.thought_title h2 {
	position: absolute;
	color: #fff;
	width: 100%;
	font-size: 1.6rem;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-shadow: 2px 2px rgba(0,0,0,0.5), 0px 0px 10px rgba(0,0,0,0.5);
}
@media screen and (min-width:900px) {
	.thought_title h2 {
		font-size: 2rem;
	}
}

#thought h3 {
	font-size: 1.5em;
	padding: 10px 0;
}

#privacy {
	text-align: left;
}

.news_date {
	font-size: 0.8rem;
	text-align: right;
	color: #777;
	padding: 0px 16px;
}

.news_text {
	padding: 0px 16px;
	text-align: left;
}

.news_list {
	padding: 0px 25px;
	text-align: left;
}

.news_list li {
	padding: 10px 0;
}

.news_list2 {
	width: 90%;
	text-align: left;
	margin: 0 auto;
}

.news_list2 li {
	padding: 10px 0;
}


.news_title {
	width: 100%;
	font-weight: normal;
	font-size: 1.2rem;
	text-align: left;
	padding: 0.5rem 1rem;		/*ボックス内余白*/
	background: rgba(0,0,0,0.06);		/*背景色*/
	margin-bottom: 1rem;		/*下に空けるスペース*/
	margin-top: 0;
	border-radius: 5px;		/*角を丸くする指定*/
}


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

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


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

	/*Additional specification for screen width of 900px or more*/
	@media screen and (min-width:900px) {

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

	}/*Additional specifications end here*/