/* font-family:'Noto Sans JP',sans-serif; 4 5 7 */
/* font-family:'Noto Serif JP',serif; 3 4 5 6 7 9 */
@charset "UTF-8";

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

/*RESET.CSS Start */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; background : transparent; }
caption, th, td { text-align : left; font-weight : normal; }
table, td, th { vertical-align : middle; border-collapse:collapse;border-spacing : 0;  }
blockquote:before, blockquote:after, q:before, q:after { content : ""; }
blockquote, q { quotes : "" ""; }
a img {border : none; }
abbr[title], dfn[title] {border-bottom : 1px dotted rgb(0,0,0);cursor : help; }
ul li{list-style: none;}
 
/* HTML 5 */
article, aside, dialog, figure, footer, header, hgroup, nav, section {display : block; }
mark {background-color : #ff9;color : rgb(0,0,0);font-style : italic;font-weight : bold; }
/*RESET.CSS END */

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

.clearfix:before,.clearfix:after {display: block;line-height: 0; content: ""; display:block; height:0;clear:both;}

*,*::after,*::before{box-sizing: border-box;}


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

	--primary-color: #59d5e0;		/*テンプレートのメインとなる色*/
	--primary-text-color: #fff;		/*メインカラーの上で使うテキスト色*/	
	
	--second-color: #75cd75;		/*テンプレートのsecondとなる色*/
	
	--global-space: 5vw;			/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}

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


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


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

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

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

.line1{width:99%;height:1px;border:none; border-top: 1px dotted #ccc; margin-top:10px;margin-bottom:10px;}
.line2{width:99%;height:1px;border:none; border-top: 3px solid #ee7600; margin-bottom:10px;}
.imgHover:hover{opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; }

.alignLeft{text-align:left!important;}
.alignCenter{text-align:center!important;}
.alignRight{text-align:right!important;}

.inlineBlock{display:inline-block!important;}

.setPaddingT50{padding-top:50px!important;}
.setPaddingT20{padding-top:20px!important;}
.setPaddingT10{padding-top:10px!important;}

.setPaddingL20{padding-left:20px!important;}

.setPaddingB50{padding-bottom:50px!important;}
.setPaddingB20{padding-bottom:20px!important;}
.setPaddingB10{padding-bottom:10px!important;}

.setMarginB50{margin-bottom:50px!important;}
.setMarginB20{margin-bottom:20px!important;}
.setMarginB10{margin-bottom:10px!important;}

.setMarginT50{margin-top:50px!important;}
.setMarginT20{margin-top:20px!important;}
.setMarginT10{margin-top:10px!important;}

.annotation1{color:#666;font-size:0.825rem;}
.stress1{font-weight:600;font-size:0.825rem;}
.stress2{font-weight:600;color:#e69904;}
.stress3{font-weight:600;color:#e69904;font-size:1.125rem;}

.pBeforeArrow1{position:relative;}
.pBeforeArrow1::before{content:"";display: inline-block; width:6px; height:6px; border: solid #333;border-width: 0 1px 1px 0;transform:rotate(-45deg);position:absolute;top:11px;left:-11px;}
/*-------------------Comment2-----------------------*/
html{font-size:16px;}
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	font-optical-sizing: auto;
	/*font-weight: 300;*/
	-webkit-text-size-adjust: none;
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
	font-size:100%;
	line-height:2;		/*行間*/
	letter-spacing:1px;
}

a:link{ text-decoration: none; color: var(--text-color);}/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
a:visited{color:var(--text-color); }
a:hover{color:var(--primary-color); text-decoration: none;}
a:active{color:var(--primary-color);}

/*title1(見出し)要素*/
.title1{
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;font-size: 3.5rem;	letter-spacing: 0.1em;
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	margin-bottom:1em;
	line-height:1.5;
}
/*bg1背景の上でのh2*/
.bg1 .title1,.bg2 .title1 {
	color: #fff;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
}
/*h2内の小文字部分*/
.title1 .little {
	display: block;font-weight: normal;	font-size: 0.35em;	/*親要素の40%のサイズに*/
	font-weight:400;
}
	/*画面幅767px以下の追加指定*/
	@media screen and (max-width:767px) {
		.title1{
			font-size: 2.125rem;text-transform:uppercase;letter-spacing:0.05em;margin-top:1em;
		}
		.title1 .little {
			font-size: 0.425em;	
		}
	}
	
.title2{font-size:1.25rem;margin:2em auto;}
	
.btn1{display:inline-block;font-size:0.925rem;text-align:center;border:1px solid #999;background:rgba(255,255,255,0.6);padding:12px 60px;position:relative;margin-top:70px;letter-spacing:5px;}
.btn1::after{content:"";width: 15px; height:5px; position:absolute;top:23px;right:28px;border: solid #333;border-width: 0 1px 1px 0;transform-origin:left bottom;transform: skewX(45deg
);}
.btn1:hover::after{right:22px;-webkit-transition: all .3s;-o-transition: all .3s;transition: all .3s;}

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

/* --------------------------- */
header{
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	height: 70px;					/*ヘッダーの高さ*/
	padding: 1vw 3vw;				/*ヘッダー内の余白。上下、左右への順番。*/
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    position: fixed;top:0;
    z-index: 1;
    width: 100%;
	background:rgba(255,255,255,1);
}

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

/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	width: 160px;	/*ロゴ画像の幅*/
}
/*ロゴ（テキストにする場合）*/
#logo a {
	display: block;
	font-size: 1.25rem;	/*文字サイズを120%に*/
	font-weight: 700;	/*文字の太さ*/
}



/*フッター設定
---------------------------------------------------------------------------*/
footer {
	font-size: 0.725rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	color:#fff;
	letter-spacing:1px;
	padding: 00px;			/*ボックス内の余白*/
	
	
	position: relative;
	background: #f18d00; 
	min-height:200px;
}
footer p a{
	color:#fff!important;
}
.waves2 {
	position: relative;
	width: 100%;
	height: 70px;
	margin-bottom: -10px; /*Fix for safari gap*/
	margin-top:-20px;
	transform:rotate(180deg);
}
/* Animation */
.parallax > use {
	animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -1s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -2s;
	animation-duration: 12s;
}
.parallax > use:nth-child(3) {
	animation-delay: -3s;
	animation-duration: 17s;
}
.parallax > use:nth-child(4) {
	animation-delay: -4s;
	animation-duration: 22s;
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
	}
	100% {
		transform: translate3d(85px, 0, 0);
	}
}
	
/*メニューブロック全体*/
#footermenu {
	padding: 30px 10px 40px;		/*ブロック内の余白*/	
	text-align: center;	/*テキストを中央に*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*簡易的に横並びにする*/
	padding: 0 10px;		/*上下、左右への余白*/
}
/*メニュー１個あたり*/
#footermenu li a{
	text-transform:uppercase;	
	font-size: 0.775rem;	/*文字サイズ。bodyのfont-sizeの80%です。*/
	color:#fff;
}
	/*Shrinking for mobile*/
	@media (max-width: 768px) {
		/*メニュー１個あたり*/
		#footermenu li {
			padding: 0 5px;		/*上下、左右への余白*/
		}
	}

/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.topics{
	margin-bottom:5em;
	display: grid;	/*gridを使う指定*/
	grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
}

.topics dt {
	font-size:1rem;
}
.topics dd {
	margin-left: 1em;
	padding-bottom: 1rem;
	font-size:1rem;
}

	/*画面幅767px以下の追加指定*/
	@media screen and (max-width:767px) {		
		.topics{
			display: block;	
		}
		.topics dt {
			font-size:0.925rem;
			color:#666;
		}
		.topics dd {
			font-size:0.925rem;
		}
	}/*追加指定ここまで*/
	
/*partner Link
------------------------------------------------------------------*/

#partnerUl{text-align:center;}
#partnerUl li{display:inline-block;padding:20px 2%;vertical-align:middle;}
#partnerUl li:nth-of-type(1) a img{width:150px;}
#partnerUl li:nth-of-type(2) a img{width:110px;}
#partnerUl li:nth-of-type(3) a img{width:110px;}
#partnerUl li:nth-of-type(4) a img{width:110px;}

#mapIndex{width:65%;float:right;}
#companyD{width:35%;float:left;padding:50px 50px 40px 20px;font-size:0.925rem;line-height:1.75;}
#companyD h1{font-size:1.125rem;margin-bottom:1em;}

	/*画面幅1023px以上の追加指定*/
	@media screen and (max-width:1023px) {
		#mapIndex{width:100%;float:none;}
		#companyD{width:100%;float:none;padding:0 0 40px 20px;}
	}
	
.pageShow{
	margin-top:70px;
	background:url(../images/pageShow.jpg);
	height:157px;
}
.pageShow p{
	width:95%;
	margin:0 auto;
	color:#fff;
	line-height:1.25;
	font-weight:500;
	text-align: center;
	font-size:1.75rem;
	position: relative;
	top:38%;
	text-shadow:0px 0px 3px #333,0px 0px 8px #333,0px 0px 10px #333;
}
	
	@media (min-width: 1024px) and (max-width: 1140px){
		.pageShow p{
			font-size:1.5em;
		}
	}
	
	@media (max-width: 1023px){
		.pageShow p{
			font-size:1.25em;
		}
	}
	
	@media (min-width: 768px) and (max-width: 1023px){
		.pageShow p{
			font-size:1.25em;
		}	
	}
	
	@media (max-width: 767px){
		.pageShow{
			margin-top:60px;
		}
		.pageShow p{
			margin-top:60px;
			font-size:1.35rem;
		}
	}
	
#table1{width:80%;margin:0 auto 2em;}
#table1 td{padding:15px 10px;vertical-align:top;font-size:0.875rem;}
#table1 .titleTd{font-weight:600;text-align:center;width:180px;}
#table1 .contentTd{border-bottom:1px solid #ccc;}

	@media (max-width: 767px){
		#table1{width:100%;margin:0 auto 5em;}
		#table1 td{font-size:0.925rem;border-bottom:1px solid #ccc;}
		#table1 .titleTd{text-align:center;width:140px;}
	}
	
#concept{margin:2em 1em 0;text-align:center;}
#concept h3{font-size:1.5rem;}
#concept p{margin-bottom:2em;}

/* --------------------------------------------------- */
.topicTitle{
	font-size:1.25rem;
	margin-bottom:10px;
	text-align:center;
	font-weight:500;
}
.topicDate{
	text-align:center;
	font-size:0.75rem;
	color:#999;
	padding-bottom:20px;
}
.topicContent{
	font-size:0.875rem;
}

	@media (max-width: 767px){
		.topicTitle{
			text-align:left;
			font-size:1.125em;
		}			
		.topicDate{
			text-align:right;
		}
		.topicContent{
			font-size:0.925em;
		}
	}
	
/*-------------------------*/
.module1{
	background: #ef9c00; 
	padding: 2px 5px 2px; 
	font-size: 0.725rem; 
	color: #fff; 
	vertical-align:top;
	border-radius:1px;
}
.form-group{
	width:99%;
	margin:0 auto 1em;
}
.form-group label{
	display:block;
}
.form-group input[type=text], .form-group input[type=email], .form-group select,.form-group textarea{
	width:calc(100% - 12px);
	height:2.25em;
	outline-style:none;
	-webkit-appearance: none;
	border:1px solid #666;
	padding:2px 5px;
	border-radius:0;
}
.form-group select{
	-webkit-appearance: none;
	appearance:none;
	width:99.5%;
	height:2.75em;
	padding:2px 5px;
	background:#fafafa;
	border-radius:0;
}
input[type="checkbox"]{
	width:16px;
	height:16px;
	vertical-align:middle;
	border-radius:0;
}
.form-group textarea{
	height:10em;
	border-radius:0;
}

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

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

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

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

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

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {
		/*listブロック全体を囲むブロック*/
		.list-grid1 {
			grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
			gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
		}
	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
		/*listブロック全体を囲むブロック*/
		.list-grid1 {
			grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
			gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
		}
	}/*追加指定ここまで*/





/*ボタン（btnと、btn-border-radius）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 0.825rem;
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color) !important;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff !important;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;
}

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

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


/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	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;
}

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

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

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

	/*画面幅767px以上の追加指定*/
	@media screen and (max-width:767px) {
		.bg1 {
			margin-top: 20vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
			margin-bottom: 20vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
		}
	}/*追加指定ここまで*/

/*bg2背景色がついたブロック
---------------------------------------------------------------------------*/
.bg2 {
	position: relative;
	background: var(--second-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	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);
}
.bg2 a {
	color: inherit;
}

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

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

.bg2::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}
	
	/*画面幅767px以上の追加指定*/
	@media screen and (max-width:767px) {
		.bg2 {
			margin-top: 20vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
			margin-bottom: 20vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
		}
	}/*追加指定ここまで*/