@charset "UTF-8";

/* CSS共通仕様
-------------------------------------------------- */
html{
	-webkit-text-size-adjust:100%;/*モバイル端末回転時の文字サイズ調整機能のOFF*/
	font-size:100%;/*ユーザーの設定した文字サイズを正しく反映*/
        scroll-behavior: smooth;/*ページ内リンク移動を緩やかにする*/
}
a{
	text-decoration:none;/*<a>タグの傍線の指定：傍線なし*/
	color: black;
} 
img{
	max-width:100%;/*自身のサイズを基準とした最大横幅の指定*/
	height: auto;/*横幅に応じた縦幅の自動設定*/
	vertical-align: bottom;/*縦位置をbaselineからbottomlineへ変更*/
} 
/* フォント定義：日本語 */
.baseFont {
 	font-family: "M PLUS Rounded 1c", sans-serif;/*GoogleFonts*/
 	font-weight: 400;
 	font-style: normal;
	line-height:1.7; /*行の高さの指定*/
	color:#000; /*文字色の指定*/
}

/* モバイルファースト基準
----------------------------------------------------*/
/* サイト共通仕様
--------------------------------------------------- */
body{
	max-width: 1280px;
	margin: 0 auto;
}

/* ヘッダー部 */
.header{
	background-color: black;
	padding:40px 10px 10px;
}
topLogo{
	width: 80%;
	margin: 0 auto;
}
.header P{
	color: white;
	font-weight: bold;
	font-size: 1.6em;
	text-decoration: underline;
	margin-bottom: 15px;
}
.contentNavi{
	width: 9em;
	margin: 20px auto 40px;
}
.header li a{
	display: block;
	color: white;
	transition: 0.5s;
	font-size: 1.3em;
	margin-bottom: 15px;
}
.header li a::before{
	content:"";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 5px;
	margin-right: 3px;
	border: transparent 5px solid;
	border-left-color: white;
	vertical-align: middle;
}
.header li a:hover{
	color: #0ff;
	font-weight: bolder;
	text-shadow: 3px 3px 2px #C8C8C8;
}
.header li a:hover::before{
	border-left-color: #0ff;
}
@media(max-width:1000px){
	.top-menu li:nth-child(2){
		font-size: 0.9em;
	}
}
@media(min-width:800px){
	.header{
		padding:15px 10px 10px;
	}
	.topLogo{
		width: 25%;
		margin: 0;
	}
	.topLogo h1{
		max-width: 200px;
	}
	.header P{
		margin-bottom: 5px;
		font-size: 1.3em;
	}
	.contentNavi{
		width: 50%;
		margin: 0;
	}
	.flexheader{
		display: flex;
		justify-content: space-between;
	}
	.top-menu{
		display: flex;
		justify-content: space-between;
		list-style: none;
	}
	.top-menu li{
		width: 17%;
		text-align: center;
	}
	.top-menu li a{
		margin-bottom: 10px;
		font-size: 1.2em;
	}
	.header li a::before{
		margin-left: 0;
		margin-right: 0;
		border: 0;
		display: none;
	}
}

/* フッター部 */
.logo-sub{
	display: block;
	width:80%;
	max-width: 70%;
	margin: 40px auto;
}
.copyright{
	background-color: black;
	color: white;
	text-align: center;
}
.copyright small{
	line-height: 4em;
}
@media(min-width:680px){
	.logo-sub{
		max-width: 60%;
	}
}
@media(min-width:1020px){
	.logo-sub{
		max-width: 50%;
	}
}

/* index用仕様
------------------------------------------------ */
/* ファーストビュー部 */

/* News部 */
.News{
	padding: 1em;
	background: linear-gradient(rgba(160,160,160,0.7) 0%, rgba(220,220,220,0.7) 10%, rgba(255,255,255,0.7) 100%);
}
.NewsList{
	padding: 1em 1.5em;
	font-size: 12px;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.7);	
}
.NewsList dt{
	width: 9em;
	text-decoration: underline;
}
@media(min-width:680px){
	.News{
		padding: 2em 2em 4em;
	}
	.NewsList{
		display: flex;
		padding: 1em 2em;
		font-size: 14px;
	}
	.NewsList dt{
		width: 9em;
		text-decoration: none;
	}
	.NewsList dt::after{
		content: "　：";
	}
}

/* キャッチコピー部 */
.bg_keyword{
	padding-top: 100px;
	padding-bottom:110px ;
	background: linear-gradient(0deg,rgba(160,160,160,0.7) 0%, rgba(220,220,220,0.7) 10%, rgba(255,255,255,0.7) 60%);
}
.Keyword{
	margin-bottom:10px;	
}
.subtitle{
	font-size: 32px;
	text-align: center;
	margin-bottom: 70px;
	text-shadow: 5px 5px 5px #ccc;
}
.Keyword p{
	font-size: 18px;
	font-weight: 500;
	line-height: 3;
	color: #323232;
	text-align: left;
	text-shadow: 7px 7px 4px white;
	padding: 2em;
}
@media(min-width:680px){
	.bg_keyword{
		padding-top: 140px;
		padding-bottom:150px;
	}
	.Keyword{
		margin-bottom: 10px;	
	}
	.subtitle{
		font-size: 62px;
		text-align: center;
		margin-bottom: 80px;
	}
	.Keyword p{
		font-size: 20px;
		line-height: 4;
		padding: 2em 2em;
	}
}
@media(min-width:800px){
	.Keyword p{
		text-align: center;
		font-size: 24px;
	}
}

/* About Us部 */
.AboutUs{
	background: linear-gradient(0deg,rgba(160,160,160,0.7) 0%, rgba(220,220,220,0.7) 10%, rgba(255,255,255,0.7) 40%);
}
.AboutUs p{
	font-size: 16px;
	font-weight: 400;
	line-height: 2.5;
	color: #323232;
	padding: 0 2em 12em;
}
@media(min-width:680px){
	.AboutUs p{
		font-size: 18px;
		font-weight: 400;
		line-height: 3;
		padding: 0 4em 12em;
	}
}
@media(min-width:800px){
	.AboutUs p{
		font-size: 18px;
		font-weight: 400;
		line-height: 3.5;
		padding: 0 6em 12em;
	}
}
@media(min-width:1020px){
	.AboutUs p{
		font-size: 20px;
		font-weight: 400;
		line-height: 4;
		padding: 0 8em 12em;
	}
}

/* Contents部 */
.ZoneTitle{
	font-family: "jana-thork", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 42px;
	text-align: center;
	margin: 2em auto 2.5em;
	text-decoration: underline;
	text-shadow: 5px 5px 5px #ccc;
}
@media(min-width:680px){
	.ZoneTitle{
		font-size: 64px;
		margin: 100px;
	}
}
@media(min-width:680px){
	.ZoneTitle{
		margin: 140px;
	}
}
	
.sec-style{
	width: 90%;
	max-width: 330px;
	margin: 0px auto 2vh;
	border: 3px solid gray;
	border-radius: 5.3%/3%;
}
.ContentLogo{
	width: 90%;
	margin: 10% auto;
}
.sec-style h3{
	font-size: 22px;
	text-align: center;
	width: fit-content;
	border-bottom: 2px solid black;
	margin: 0 auto 10%;
}
.sec-style p{
	line-height:2;
	text-align: justify;
	width: 85%;
	margin: 0 auto 4%;
}
.sec_Description{
	height: 6em;
}
.sec-style img{
	display: block;
	width: 70%;
	margin: 0 auto 4%;
}
.sec-style a{
	display: block;
	width: 85%;
	height: auto;
	margin: 0 auto 15%;
	border: 1px solid gray;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #bbb;
	/*以下はホバー時のアニメーション用設定*/
	background-image: linear-gradient(to right,rgba(60, 60, 60, 0.8),rgba(40, 40, 40, 0.8) 45%,rgba(20, 20, 20, 0.8) 75%,rgba(0, 0, 0, 0.8));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 100%;
	transition: background-size 0.3s ease-out,border-color 0.3s ease-out,color 0.2s ;
}
.sec-style a:hover{
	color: white;
	border:1px solid black;
	/*以下は戻り時のアニメーション用設定*/
	background-position: 0% 100%;
	background-size: 100% 100%;
	transition-duration: 0.5s;
}
.sec-style a:hover .Goto{
	background-color: white;
}

.ContentURL{
	display: flex;
	justify-content: space-between;	
	align-items: center;
	padding: 3%;
	/*background:repeating-linear-gradient(135deg,#bbb,#bbb 5px,#fff 5px,#fff 10px);*/
}
.ContentURL p{
	width: 88%;
	padding-top: 3%;
	line-height: 1.2;
	overflow-wrap: break-word;
}
.GoTo{
	width: 10%;
	height: 20px;
	background-color: black;
	-webkit-clip-path: polygon(30% 0,100% 50%,30% 100%);
	clip-path: polygon(30% 0,100% 50%,30% 100%);
}

@media(min-width:700px){
	.sec-style{
		width: 330px;
		margin: 20px auto;
	}
	.PC_Flex{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		max-width: 850px;
		margin: 0 auto;
	}
	
}
@media(min-width:1030px){
	.sec-style{
		width: 330px;
		margin: 10px auto 30px;
	}
	.PC_Flex{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		max-width: 1140px;
		margin: 0 auto;
	}
	
}



/* デスクトップ版
（モバイル・ファーストで制作したWebページを、デスクトップ用に変更させる内容を記述する。）
（ブレークポイントの目安＝＝モバイル縦：400px）
（ブレークポイントの目安＝＝モバイル横、タブレット、デスクトップ：800px）
------------------------------------------------------------------ */
@media (min-width: 800px) {

}





/* font-family:フォントの種類;（"フォント名"、sans-serif：ゴシック系、serif：明朝系、など） */
/* font-weight:フォントの太さ;（normal、bold、ligher：一段階細く、bolder：一段階太く、1~1000） */
/* font-size:文字サイズ; */
/* text-align:文字揃え;（left、right、center、justify：両端揃え） */
/* line-height:行の高さ;（normal：ブラウザ判断、［推奨］→数値のみ：フォントサイズ比率、数値＋単位） */

/* word-wrap:break-word;（aタグ内のテキストの折り返し処理） */

/* background-color:背景色の設定;（#000000、10,10,10,.5） */
/* background-image:url(画像の保存場所); */
/* background-repeat:リピート方法;（repeat：縦横方向、repeat-x：横方向、repeat-y：縦方向、no-repeat：なし） */
/* background-size:表示領域;（cover：縦横比固定で最大表示、contain：縦横比固定で全体表示、値＋単位） */
/* background-position;横方向の表示位置 縦方向の表示位置:（横方向：left,center,right、縦方向：top,center,bottom） */

/* width:ボックス（要素）の横幅値;（数値＋単位、auto） */
/* height:ボックス（要素）の縦幅値;（数値＋単位、auot） */

/* border：ボックス内要素の境界線（線幅、線の種類、色を指定できる） */
/* border-radius：線の角を丸くする（8pxなどで丸み度合いを指定） */
/* margin：ボックス境界ラインと要素境界ラインとの余白距離 */
/* padding：要素境界ラインと要素内コンテンツ（実体）との余白距離 */
/* width：要素の横幅を決める事で、余白を作成できる */
/* height：要素の縦幅を決める事で、余白を作成できる */
/* 「border-」の後に続けて「top、bottom、left、right」を記述することで、上下左右位置を個別指定して線を作成できる */
/* 「margin-」の後に続けて「top、bottom、left、right」を記述することで、上下左右位置を個別指定して余白を作成できる */
/* 「padding-」の後に続けて「top、bottom、left、right」を記述することで、上下左右位置を個別指定して余白を作成できる */
/* 対象位置を個別指定しない場合は、値の入力個数と入力順に応じて反映箇所を指定できる。 */
/* （1つ入力：上下左右、2つ入力：上下,左右、3つ入力：上,左右,下、4つ入力：上,右,下,左） */
/* （値は、数値＋単位で指定する他に、「auto」と記述して自動調整させる事もできる）*/

/* 単位 ％：対象要素の親要素に対しての比率結果が返される。 */
/* 単位 em：親要素のサイズを基準値「1」とした単位（「2」を指定すると親要素の2倍のサイズになる） */
/* 単位 rem：ルート要素のサイズを基準値「1」とした単位 */
/* 単位 vw：ビューポイントの横幅を基準とした割合の単位（入力値100＝100％で表示、入力値50＝50％で表示） */
/* 単位 vh：ビューポイントの縦幅を基準とした割合の単位（入力値100＝100％で表示、入力値50＝50％で表示） */
/* ビューポイント：ブラウザーでWebサイトを閲覧している時の表示領域のこと*/