@charset "UTF-8";

/* 各コンテンツ共通設定 */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body{
	background: #eee;
}

p{
	line-height: 1.6em;
	margin-left: 1.0em;
}

p.indent{
	text-indent: 1.0em;
}

p.top{
	margin-top: 1.0em;
}

p.bottom{
	margin-bottom: 2.0em;
}

.text_Deco_Red{
	color: red;
}

.text_Deco_ul{
	text-decoration: underline;
}

a:hover{
    background: #efe; 
}

.new::after{
	content: 'New!';
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.2;
	display: inline-block;
	color: #fff;
	background: #f00;
	border-radius: 8px;
	padding: 0 5px;
	margin-left: 0.4em;
	vertical-align: middle;
}

/* コンテンツタイトル h1 */
h1.section_Title{
	position: relative;
	display: block;
	font-size: 2.5rem;
	font-style: italic;
	text-align: left;
	margin: 2rem auto;
	margin-bottom: 1.0em;
}

h1.section_Title::after{
	content: attr(data-text);
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	transform: scaleY(-1);
	opacity: 0.3;
	mask-image: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

/* コンテンツタイトル h2 */
h2.section_Title{
	width: 65%;
	font-size: 1.4em;
	border-left: solid 3px #26896D;/* フォレストグリーン */
	border-bottom: solid 3px;
	border-image: linear-gradient(to left,#eee 0%, #26896D 100%);
	border-image-slice: 1;
	padding: 0.25em 0 0 0.5em;
}

/* PDF用aタグ */
a[href$=".pdf"]::after{
    content:" ";
	text-decoration: none;
    display: inline-block;
	width: 2.0em;
	height: 1.6em;
    background: url(../images/kkrn_icon_pdf_1.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
}

/* ページトップへ戻る */
.page_Top{
	width: 80px;
	height: 40px;
	position: fixed;
	left: calc(85%);
	bottom: 0;
	background: #228b22;
	opacity: 0.6;
}

.page_Top a{
	position: relative;
	display: block;
	width: 80px;
	height: 40px;
	text-decoration: none;
}

.page_Top a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f102";
	font-weight: 900;
	position: absolute;
	color: #fff; 
	font-size: 25px;
	width: 25px;
	height: 25px;
	top: -20px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

.page_Top a::after{
	content: "Page Top";
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 25px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/* ------------------------------------------------------------------------------- */
/* ヘッダー */
.site_header{
	background: rgba(211, 211, 211, 0);
	padding: 15px 0;
}

.site_header .logo img{
	margin-left: 25px;
	height: 45px;
	width: auto;
}

.site_header a:hover{
	 background-color: transparent;
}

/* ------------------------------------------------------------------------------- */
/* フッター */
.site_footer{
	background: #2f4f4f;/* darkslategray */
	padding: 25px 0;
}

.copyright{
	color: #fff;
	font-size: 12px;
	text-align: center;
}

/* ------------------------------------------------------------------------------- */
/* コンテンツ部分 */
.wrap{
	width: 100%;
	height: 100%;
	display: flex;
}

.left_contents{
	width: 20%;
	height: auto;
	background: linear-gradient(90deg, rgb(255, 255, 255), #d3d3d3);
	/* rgb(255, 255, 255) = white, rgb(211, 211, 211) = lightgray */
}

.menu{
	position: -webkit-sticky;
	position: sticky;
	padding-top: 2.0em;
	margin: 0.5em;
	font-size: 1.2rem;
	background: linear-gradient(90deg, rgb(255, 255, 255), rgb(211, 211, 211));
	/* rgb(255, 255, 255) = white, rgb(211, 211, 211) = lightgray */
	top: 0;
}

.menu li{
	border-left: 3px solid #ccc;
	padding: 0.5em 0 0.5em 0.5em;
}

.menu a{
	display: flex;
	text-align: left;
	text-decoration: none;
	width: 100%;
}

.menu li.curt{
	font-weight: bold;
	border-left: 3px solid #26896D;/* フォレストグリーン */
}

.menu li.curr_pos::before{
	border-left: 5px solid red;
}

.right_contents{
	float: right;
	width: 80%;
	height: auto;
	background: linear-gradient(90deg, rgb(211, 211, 211), rgb(255, 255, 255));
	/* rgb(255, 255, 255) = white, rgb(211, 211, 211) = lightgray */
}

p.caption{
	font-size: 1.2rem;
	margin-bottom: 1.0em;
}

.info_Title{
	width: 80%;
	background: #006400;
	border: 1px solid #006400;
	padding: 0.2em 0 0.2em 1.5em;
	color: white;
}

.info_Text{
	width: 80%;
	border: 1px solid #006400;
	font-size: 100%;
	padding: 0.5em;
}

/* ------------------------------------------------------------------------------- */
/* トップページ（スライドショー） */
#contents01a{
	padding: 1.0em 0;
	width: 80%;
}

.slide_Frame{
	position: relative;
	height: 300px;
	overflow: hidden;
	margin: 0 auto;
}

@media screen and (max-width: 820px){
	.slide_Frame{
		width: 100%;
		height: 200px;
	}
}

/* スライド：5枚を40秒でループ */
.slide_Image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-size: cover;
	background-repeat: no-repeat;
	animation: slide_Animation 40s infinite;
}

.p01{
  background-image: url('../images/pic1.JPG');
}

.p02{
  background-image: url('../images/pic2.JPG');
}

.p03{
  background-image: url('../images/pic3.JPG');
}

.p04{
  background-image: url('../images/pic4.JPG');
}

.p05{
  background-image: url('../images/pic5.JPG');
}

@keyframes slide_Animation{
	0%{ opacity: 0;}
	12%{ opacity: 1;}
	25%{ opacity: 1;}
	30%{ opacity: 0; transform: scale(1.2);}
	100%{ opacity: 0;}
}

.slide_Image:nth-of-type(1){
	animation-delay: 0s;
}
.slide_Image:nth-of-type(2){
	animation-delay: 8s;
}
.slide_Image:nth-of-type(3){
	animation-delay: 16s;
}
.slide_Image:nth-of-type(4){
	animation-delay: 24s;
}
.slide_Image:nth-of-type(5){
	animation-delay: 32s;
}

/* トップページ（お知らせ,更新情報） */
#contents01b{
	padding: 0.5em 0 2.0em 0;
	width: 80%;
}

#contents01b article{
	margin: 2.0em 0 1.0em 0;
	padding: 1.0em 0.5em;
	text-align: left;
	border-radius: 20px;
	background-color: #fff;
}

#contents01b article .news_Title{
	margin-bottom: 1.0em;
	padding: 0 0.5em;
	font-size: 1.1rem;
	line-height: 1.8em; 
	border-bottom: 2px solid #006400;
}

#contents01b article .news_Date{
	font-size: 0.85rem;
}

#contents01b article .news_Content{
	line-height: 2.0em;
	font-size: 1.0rem;
}

#contents01b h2.news{
	font-size: 1.4em;
	position: relative;
	padding: 0.3em 0 0.2em 1.5em;
	border-bottom: 2px solid #777;
	color: black;
}

#contents01b h2.news::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0.6em;
	transform: rotate(60deg);
	height: 12px;
	width: 12px;
	background: #777;
}

#contents01b h2.news::after{
	position: absolute;
	content: '';
	top: 0.6em;
	left: 0.2em;
	transform: rotate(20deg);
	height: 7px;
	width: 7px;
	background: #222;
}

#contents01b .notice_Text{
	line-height: 2.0em;
	font-size: 1.0rem;
}

#contents01b .notice_Text::before{
	content: "※";
}

#contents01b .news_List{
	margin-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 10em;
	display: inline-block;
	text-align: center;
	background: #7f7f7f;
	color: #fff;
	font-size: 16px;
}

#contents01b .news_List a:hover{
	background: #a9a9a9;/* darkgray */
}

#contents01b .accordion{
	font-size: 1.1rem;
}

#contents01b .accordion_title{
	position: relative;
	border: none;
	display: block;
	list-style: none;
	cursor: pointer;
	padding: 1em;
}

#contents01b summary.accordion_title::-webkit-details-marker{
	display:none;
}

#contents01b .accordion_title:after{
	content: "+";
	position: absolute;
	top: calc(50% - 0.5em);
	right: 20px;
	line-height: 1;
	padding: 0;
	pointer-events: none;
}

#contents01b .accordion_title:hover{
	background: #a9a9a9;/* darkgray */
}

#contents01b .accordion[open] .accordion_title:after{
  content: "-";
}

/* ------------------------------------------------------------------------------- */
/* 沿革 */
#contents02{
	padding: 2.0em 0;
	width: 80%;
}

#contents02 .table_layout{
	table-layout: fixed;
	border-collapse: collapse;
}

#contents02 table td{
	padding: 0.5em;
	line-height: 1.2;
}

#contents02 .text_date{
		width: 10em;
	    border-top: solid 1px #333;
		border-bottom: solid 1px #333;
}

#contents02 .text_event{
	    border-top: solid 1px #999;
		border-bottom: solid 1px #999;
}

/* ------------------------------------------------------------------------------- */
/* 役員会 */
#contents03{
	padding: 2.0em 0;
	width: 80%;
}

#contents03 .table_layout{
	table-layout: fixed;
	border-collapse: collapse;
	margin-top: 1.0em;
}

#contents03 table td{
	padding: 0.5em;
	line-height: 1.2;
}

#contents03 .text_post{
	width: 8em;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
}

#contents03 .text_name{
	width: 8em;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
}

#contents03 .text_company{
	border-top: solid 1px #999;
	border-bottom: solid 1px #999;
}

/* ------------------------------------------------------------------------------- */
/* 賛助会員 */
#contents04{
	padding: 2.0em 0;

}

#contents04 table{
	border-collapse: separate;
	border-spacing: 0 0.5em;
	table-layout: auto;
	width: 820px;
}

#contents04 td,th{
	height: 40px;
	padding: 5px;
}

#contents04 tr:nth-child(odd){
	background-color: #CCE7D3;/* アイスグリーン (Ice green) */
};

#contents04 .text_Company{
/*	width: 300px;*/
}

#contents04 .text_Address{
	width: 260px;
}

#contents04 .text_Tel,.text_Fax{
	width: 260px;
/*	padding: 10px;*/
}

#contents04 .text_Tel::before{
	content: "TEL : ";
}

#contents04 .text_Tel::after{
	white-space: pre-wrap;
	content: "\A";'/* 改行 */
}

#contents04 .text_Fax::before{
	content: "FAX : ";
}

#contents04 .text_Company a{
/*	margin: 0.5em 0.3em;*/
/*	text-decoration: none;*/
}


#contents04 .text_Company a::after{
	content:" ";
	text-decoration: none;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url(../images/kkrn_icon_gaibulink_6.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
}


/* ------------------------------------------------------------------------------- */
/* 出版物 */
#contents05{
	padding: 2.0em 0;
	width: 100%;
}

#contents05 .table_layout{
	table-layout: fixed;
	border-collapse: collapse;
	margin: 1.0em 0 0 2.0em;
}

#contents05 td{
	padding: 0.25em;
}

#contents05 .epoch{
		border-bottom: solid 1px #999;
}

#contents05 .epoch a::before{
	content: "■";
	color: black;
}

#contents05 .sec_Sub{
	font-size: 0.8em;
}

/* ------------------------------------------------------------------------------- */
/* 事務局 */
#contents06{
	padding: 2.0em 0;
	width: 80%;
}

#contents06 h2.title{
	width: 50%;
	font-size: 1.4em;
	border-left: solid 3px #26896D;/* フォレストグリーン */
	border-bottom: solid 3px;
	border-image: linear-gradient(to left,#eee 0%, #26896D 100%);
	border-image-slice: 1;
	padding: 0.25em 0 0.3em 0.5em;
}

/* ------------------------------------------------------------------------------- */
/* メーリングリスト登録 */
#contents07{
	padding: 2.0em 0;
	padding-top: 2.0em;
	width: 80%;
}

#contents07 h2.title_Decoration{
	width: 50%;
	font-size: 1.4em;
	border-left: solid 3px #26896d;/* フォレストグリーン */
	border-bottom: solid 3px;
	border-image: linear-gradient(to left,#eee 0%, #26896d 100%);
	border-image-slice: 1;
	padding: 0.25em 0 0.3em 0.5em;
}

#contents07 .form{
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

#contents07 .form_Item{
	border-top: 1px solid #aaa;
	padding: 10px 0;
	width: 100%;
	display: flex;
	align-items: center;
}

#contents07 .form_Item:nth-child(7){
	border-bottom: 1px solid #aaa;
}

#contents07 .form_Item_Label{
	width: 100%;
	max-width: 200px;
	letter-spacing: 0.05em;
	font-weight: bold;
	font-size: 16px;
}

#contents07 .form_Item_Label2{
	width: 100%;
	max-width: 400px;
	letter-spacing: 0.05em;
	font-weight: bold;
	font-size: 16px;
}

#contents07 .form_Item_Label.remarks{
	margin-top: 8px;
	margin-bottom: auto;
}

#contents07 .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: #40ba8d;/* コバルトグリーン */
	color: #fff;
	font-size: 14px;
}

#contents07 .form_Item_Input{
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-left: 40px;
	padding: 0 1em;
	height: 48px;
	flex: 1;
	width: 100%;
	max-width: 410px;
	background: #eaedf2;
	font-size: 14px;
}

#contents07 .form_Item_Textarea{
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-left: 40px;
	padding: 1em;
	height: 96px;
	flex: 1;
	width: 100%;
	max-width: 410px;
	background: #ffffff;
	font-size: 14px;
}

#contents07 input[type="text"]{
	background: #ffffff;
}

#contents07 input[type="radio"]{
	position: relative;
	margin-left: 2.0em;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
	border-radius: 50%;
	cursor: pointer;
	vertical-align: -2px;
}

#contents07 input[type="radio"]:checked:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #26896d;/* フォレストグリーン */
	content: '';
}

#contents07 .form_Btn{
	border-radius: 6px;
	margin-top: 20px;
	padding: 16px 0;
	width: 8em;
	display: block;
	letter-spacing: 0.05em;
	background: #26896d;/* フォレストグリーン */
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

/* メーリングリスト登録 - 確認画面 */
#contents07 .confirm{
	margin: 2.0em 0;
	font-size: 16px;
}

#contents07 .conf-Style{
	border-collapse: collapse;
	margin-bottom: 2.0em;
}

#contents07 .conf-Style td,th{
	border-top: 1px solid #aaa;
	padding: 0.5em 2.0em;
}

#contents07 .conf-Style:nth-child(1){
	border-bottom: 1px solid #aaa;
}
#contents07 .confirm_Btn{
    margin-left: 2.0em;
}

#contents07 .confirm_Btn input[type="button"],form input[type="submit"]{
	border-radius: 6px;
	margin-top: 20px;
	padding: 16px 0;
	width: 8em;
	display: inline-block;
	letter-spacing: 0.05em;
	background: #26896d;/* フォレストグリーン */
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

#contents07 .confirm_Btn input[type="button"]{
	margin-right: 1.0em;
	background: #f2f2f2;
	color: #333;
	border: none;
}

/* ------------------------------------------------------------------------------- */
/* リンク */
#contents08{
	padding: 2.0em 0;
	width: 80%;
}

#contents08 p.lnk01{
	margin-top: 0.5em;
	margin-left: 1.0em;
}

#contents08 p.lnk02{
	margin-left: 2.0em;
}

/* ------------------------------------------------------------------------------- */
/* コンテンツトップに載せたいお知らせ(共通) */
#contents_info{
	padding-top: 2.0em;
}