@charset "utf-8";
/*
COLORS
================================================ */
:root {

	--light-blue: #5ac8fa;	/* 爽やかな水色（Apple風） */
	--blue: #007aff;		/* モダンな青（iOSブルー） */
	--purple: #8e44ad;	/* 深みのある紫（高級感） */
	--pink: #ff6b81;		/* 落ち着いたピンク（アクセント） */
	--orange: #ff8c42;	/* 柔らかめのオレンジ（温かみ） */
	--yellow: #fcd34d;	/* くすみ系イエロー（トレンド） */
	--light-green: #a3e635;	/* 明るいグリーン（自然・安心感） */
	--green: #10b981;	/* 深めのグリーン（信頼感） */
	--light-grey: #e5e7eb;	/* ブルーグレー（ニュートラル） */
	--grey: #334155;		/* ダークグレー（落ち着き） */
	--white: #ffffff;		/* 純白 */
	--white-grey: #f1f5f9;	/* 明るいグレー（背景に最適） */
	--black: #0f172a;	/* 深い黒（モダンな印象） */
}
/*
GENERAL STYLING
================================================ */
html, body {
	scroll-behavior: smooth;
}
#top{
	scroll-margin-top: 50px;
}
html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	color: var(--grey);
	font-size: 1rem;
}
body{
	background-color : var(--white);
	margin : 0 ;
	padding : 0 ;
	padding-top: 50px;
}
.pagetop{
	position: fixed ;
	right: 20px;
	bottom: 50px;
	background-color: var(--grey);
	width : 60px;
	height : 60px ;
	border-radius : 50%;
	text-align : center ;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 12px; 
	line-height: 1.2;

}
.pagetop:hover{
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pagetop a{
	color: var(--white);
	text-decoration: none;
	display: block; 
}
.pagetop a:hover{
	color: var(--white);
	text-decoration: none;
}
/*
COMMON
================================================ */
h1{
	font-size : 1.8rem;
	border-bottom : 1px solid var(--light-grey) ;
	margin-bottom: 1rem;
	margin-top : 2rem;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New";
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

h2{
	font-size : 1.2rem;
	margin-bottom: 1rem;
	border-bottom : 1px solid var(--white-grey) ;
	border-left : 5px solid var(--white-grey) ;
	padding-left : .5rem ;
	font-weight: 600;
	font-family: "Zen Kaku Gothic New";

}
h3{
	font-size : 1.1rem;
	margin-top: 1rem;
	margin-bottom: .5rem;
	padding-left : .5rem ;
	font-weight: 500;
	font-family: "Zen Kaku Gothic New";
}

li{
	list-style: none;
}
ol li{
	list-style-type : decimal ;
	margin-left : 2rem ;
	margin-bottom : .4rem;
}
a{
	color : var(--blue);
	text-decoration : none ;
}
a:hover{
	color : var(--grey);
	text-decoration: underline;
}

img{
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

.wrapper {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}
/* text-align & Font */
.r{
	text-align :right;
}
.c{
	text-align : center ;
}
.red{
	color : red ;
}
.b{
	font-weight : bold ;
}

.h{
	background: linear-gradient(transparent 40%, var(--yellow) 40%);
}

i.fas.fas fa-chevron-down {
  filter: brightness(1.2) contrast(0.8);
}


/*
HEADER
================================================ */
header {
	padding: 0;
	background-color : var(--white);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.title{	padding : 0 ;
	display : flex ;
}
.style-logo{
	width: 90%;
	min-width: 200px;
	max-width:1200px;
	background-color : var(--white);
	margin : auto ;
	padding : 0 2rem;
	vertical-align: top;
	float : left ;
}
.style-logo img{
	min-width:200px;
	max-width : 434px ;

}
/* ナビゲーションメニュー */
.nav_button{
}
.nav-menu {
	background-color: var(--grey); 
	color: var(--white); 
	display:none;
}

input[type="checkbox"]{
	display:none;
}
label[for="menu"]{
	display:block;
	background-color : var(--white-grey);
	color : var(--black);

	height : 35px ;
	padding : 5px 15px ;
	vertical-align: middle ;
	text-align : center ;
	font-size : 12px ;
	margin : auto ;
	cursor: pointer;
	border-left : 1.5px solid var(--black);
}
#menu:checked + .nav-menu{
	display:block;
}

.menu-list{
	position: absolute;
	top : 35px ;
	right: 0 ;
	list-style-type: none;
	background-color: rgba(0, 0, 0, 0.7); 
	width: 100%;
	display: block;
	z-index: 10;
	text-align : center ;


	animation-name: slideIn;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
	animation-fill-mode: forwards;
}
@keyframes slideIn {
0% {
	transform: translateX(180px);
	opacity: 0;
}
100% {
	transform: translateX(0);
}
40%,100% {
	opacity: 1;
}
}

.menu-list a{
	text-decoration: none;
	color: var(--white);
	display: block;
	padding: 3px ;

}
.menu-list a:hover{
	text-decoration: none;
	color: var(--light-blue);
	display: block;
	padding: 3px ;
}
.menu-item {
	border-bottom: 1px solid var(--black) ;
	padding: 3px ;
}


/* ドロップダウンメニュー */
.drop-menu-list {
	position: relative;
}
.drop-menu-list {
	list-style-type: none;
	background-color: rgba(150, 150, 150, 0.562); 
	left: 0;
	position: absolute;
	top: 100%;
	display: none; 
	width: 100%;
	z-index: 10;
}

.drop-menu-item{
	border-bottom: 1px dotted var(--grey) ;
	padding: 3px ;
}
.drop-menu-item-b{
	border-bottom: 1px dotted var(--light-grey) ;
	background-color: rgba(100, 100, 100, 0.7); 
	padding: 3px ;
	color : var(--white);
	font-size : .8rem;
}
drop-menu-item-end{
	border-top: 1px solid var(--light-grey) ;
}



/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
	display: block; /* 下層メニューを表示 */
	position: static;

}
/* TOP IMAGE スライダー使用時に有効化
================================================

.c-carousel {
	position: relative;
	width: 100%;
	min-width: 360px;
	margin : 0 ;
	padding : 0 ;
	text-align : center;
	background-color : var(--light-grey);
	box-shadow: 0 -2px 4px rgba(0,0,0,0.1);

}
.c-carousel__activator-main {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.c-carousel__main {
	overflow: hidden;
	position: relative;
}
.c-carousel__main-track {
	display: flex;
	white-space: nowrap;
	transition: transform 0.3s ease-out;
}
.c-carousel__main-item {
	flex-shrink: 0;
	width: 100%;
}
.c-carousel__main-image {
	max-width: 1200px;
	margin : 0 ;
	text-align : center;
	vertical-align: bottom;
}

.c-carousel__main-control-item {
	display: none;
}
.c-carousel__btn-prev-main, .c-carousel__btn-next-main {
	position: absolute;
	top: 50%;
	right: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 5px;
	transform: translateY(-50%);
	background-color: rgba(30, 30, 30, 0.562); 
	border-radius: 50%;
	transition: opacity 0.3s;
	cursor: pointer;
}
.c-carousel__btn-prev-main {
	right: auto;
	left: 16px;
}
.c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(1) {
	display: block;
}
.c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(2) {
	display: block;
}
.c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(3) {
	display: block;
}
.c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-track {
	transform: translateX(calc(-100% * 0));
}
.c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-track {
	transform: translateX(calc(-100% * 1));
}
.c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-track {
	transform: translateX(calc(-100% * 2));
}
*/
.topimage{
	width: 100%;
	min-width: 360px;
	margin : 0 ;
	padding : 0 ;
	text-align : center;
	background-color : var(--light-grey);
}
.topimage img{
	max-width: 1200px;
	margin : 0 ;
	vertical-align: bottom;
}

/*
MAIN
================================================ */
main{ 
	margin-left: auto;
	margin-right: auto;
	padding : 0px;
	background-color : var(--white);
}

.main {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width : 80% ;
	background-color : var(--white);
}

.main_news1 h2{
	border-bottom : 1px solid var(--light-grey) ;
	border-left : 0px ;
	margin-bottom: 1rem;
}

.main_news1{
	width : 100% ;
	padding: 15px ;
	display: block;
	float: left;
	background-color: var(--white);
}
.topnews .news_list{
	border-bottom : 1px dotted var(--light-grey);
	padding : 3px ;
}
.topnews .news_list dt{
	font-size : .8rem;
	font-family: sans-serif;
	color :var(--grey);
	font-weight: 700;
}
.topnews .news_list dd,
.topnews .news_list a{
	font-size : .9rem;
}

.main_news2 h2{
	border-bottom : 1px solid var(--light-grey) ;
	margin-bottom: 1rem;
	border-left : 0px ;
}
.main_news2{
	width : 100% ;
	padding: 15px ;
	display: block;
	float: left;
	background-color: var(--white);
}

.main_news2 li{
	font-size : 1.1rem ;
	line-height: 2 ;
}


.main ul{
	list-style-type: none;
	padding-left: 10px;
}

.clear{clear: both;}

/*
ABOUT
================================================ */
.about{
	width : 100% ;
	padding : 0 ;
}
.about p{
	padding : .5rem ;
	text-indent: 1em;
}

figure {
	float: left;
	margin: .3rem ;
	width : 200px ;
	text-align : center ;
	font-size : .8rem ;
}
figure img {
	max-width: 55%;
	border-radius: 50%;
}

.about table{
	margin-left:auto;
	margin-right:auto;
}
.about td{
	padding : 3px 10px ;
}

.purpose {
	float: right;
	margin: 0px;
	background-color : var(--white);
	text-align : center ;
	width : 30%;
	max-width : 320px ;
	min-width : 200px ;
}
.purpose img{
	width : 100%;
}

.explanation{
	background-color : var(--white);
}
.explanation figure {
	float: right;
	margin: .5rem 2rem 1rem 0;
	width: max-content;
	text-align : center ;
}
.explanation figure img {
	max-width: 100%;
	border-radius: 0%;
}
.kiyaku{
	width : 90% ;
	padding : 0 ;
	text-indent: 1em;
}
.wg-list{
	list-style-type: square;
	padding-left: 2rem;
	font-family: "Noto Sans JP", sans-serif;
	color: #2c2c2c;
}
.wg-list li{
	list-style-type: square;
	margin-bottom: 0.4em;
}

/*
NEWS
================================================ */
.whatsnew .news_list{
	display: flex;
	border-bottom : 1px dotted var(--light-grey);
	padding : 5px 0 ;
}
.whatsnew .news_list dt{
	width: max-content;
	padding: 5px 15px;
}

.whatsnew .news_list dd{
	padding: 5px;
}

/*oritatami*/
.accordion {

}
.accordion .accordion--title {

}
.accordion .accordion--tgl {
	display: none;
}
.accordion .accordion--title {
	position: relative;
	display: block;
	padding: 1em 0;
	border-bottom: 1px dotted var(--grey);
	cursor: pointer;
}
.accordion .accordion--title i {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -.75em;
	width: 1.5em;
	height: 1.5em;
}
.accordion .accordion--title i::before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -.3em;
	margin-left: -.3em;
	width: .6em;
	height: .6em;
	transform: rotate(0deg);
	box-sizing: border-box;
	transition: all .15s ease-in-out;
}
.accordion .accordion--body {
	transition: all .15s ease-in-out;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
}
.accordion .accordion--tgl:checked + .accordion--title {
	border-bottom: none;
}
.accordion .accordion--tgl:checked + .accordion--title i::before {
	transform: rotate(-180deg);
}
.accordion .accordion--tgl:checked + .accordion--title + .accordion--body {
	visibility: visible;
	max-height: none;
	opacity: 1;
	padding: 1em 0;
}
.news-article-body.news-yrs {

}
.news-article-body.news-yrs .news-yr {

}
.news-yr:not(:last-child) {
}
.news-yr--title {
	font-size: 1.5em;
	font-weight: 700;
}
.news-yr--title .num {
	font-size: .8125em;
}
/* 旧表示対応 */

.item{
	border-top : 1px dotted var(--light-grey);
	padding: 1rem 0 ;
	width : 100% ;
}
.itemHead{
	font-weight : bold ;
}
.itemInfo{
	float : right ;
	padding : 0 .5rem ;
	font-size : .9rem ;
	background: linear-gradient(transparent 60%, var(--white-grey) 90%);
	width : max-content ;
}
.itemBody{
	clear: both;
	padding-left : 3rem ;
	padding-top : .5rem ;
}

/*
EVENT
================================================ */
.sympo{
	margin-left : 2rem ;
}
.sympo-info1 .sympo-info_list {
	display: flex;
}
.sympo-info1 .sympo-info_list dt,
.sympo-info1 .sympo-info_list dd {
	vertical-align: top;
	padding-bottom : 10px ;
	padding: 5px; 
}
.sympo-info2 .sympo-info_list {
	display: flex;
	margin-left : 15px ;
}
.sympo-info2 .sympo-info_list dt,
.sympo-info2 .sympo-info_list dd {
	padding : 5px ;
	vertical-align: top;
	background-color: #E4EDF4;
	margin : 2px ;
}

.sympo-info_list dt{
	width: 22%;
}

.sympo-info_list dd{
	width: 78%;
}

.sympo-info_list_item{
	margin-left : 1rem ;
	margin-right : 1rem ;
	font-size: .9rem;
}
/*
MEMBER INFO
================================================*/
.index{
	margin-left : 20px ;
}
.index ul{
	list-style-type: square;
	padding-left: 2rem;
}
.index li{
	list-style-type: square;
	margin-bottom: 0.4em;
}


/*
INFO
================================================ */
.inquiry{
	display: flex;
}
.inquiry dt{
	width: 200px;
	font-size : 1.1rem;
	background-color : var(--white-grey);
	margin : 2px;
	padding : 5px;
}
.inquiry dd{
	font-size : 1.1rem;
	margin : 2px;
	padding : 5px;
}


.admission{
	display: flex;
}
.admission dt{
	width: max-content;
	font-size : 1.1rem;
}

.admission dd{
	font-size : 1rem;

}
.admission li{
	list-style-type: square;
}

/*
FOOTER
================================================ */
footer{
	width : 100%;
	margin : 0 ;


  background-color: var(--white);
  color: var(--grey);
  text-align: center;
  padding: .5rem 0 1rem 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--light-grey); 

}
.footer-menu {
/*	background-color :var(--blue) ;*/
	max-width: 1200px;
	width: 100%;
	list-style-type: none;
	display: flex;
	margin-left: auto;
	margin-right: auto;
}
.footer-menu ul{
	list-style-type: none;
	display: block;
	text-align : left ;
	padding-left : 2rem;

}
.footer-menu ul li {
	padding: .5rem 1rem;
}
.footer-menu ul li a {
	color: var(--grey);
	text-decoration: none;
	font-size : .7rem;
}
.footer-menu ul li a:hover{
	text-decoration: underline;
}
.footer-menu ul{
	list-style-type: none;
}
.f_wrapper {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}

.footer-link{
	float : left ;
	display : block ;
	padding : 20px;
	color: var(--grey);
}
.footer-link ul li{
}
.footer-link ul li a{
	color: var(--grey);
	text-decoration: none;
	font-size : .8rem ;

}
.footer-link ul li a:hover{
	text-decoration: underline;
}

.footer-info{
	float : left ;
	display : block ;
	padding : 20px;
/*	color:var(--grey);*/
	font-size : .8rem ;
}
.maintenance{
/*	color:var(--white);*/
	text-align : center ;
	width : 100% ;
	font-size : .8rem ;
	padding: 10px ;

}
.copyright{
/*	color:var(--white);*/
	text-align : center ;
	width : 100% ;
	padding-top: 10px ;
	padding-bottom : 20px ;
	font-size : .8rem;
}

/*会員向け情報発信ページ*/

h3.disseminate{
	font-size: 1.3em;
	color : cornflowerblue;
}

ol.disseminate{
	margin : 5px ;
	font-size: 1.2em;
}


/*
DESKTOP SIZE
================================================ */
/*  タブレット・PC向け（800px以上） */

@media (min-width: 768px){
body{
	background-color : var(--white);
	padding-top: clamp(120px, 12vw, 140px); 
}

#top {
	scroll-margin-top: clamp(120px, 12vw, 140px);
}
h1{
	font-size : 2rem;
	border-bottom : 1px solid var(--light-grey) ;
	margin-bottom: 1rem;
	margin-top : 2rem;
	font-weight: 700;
	font-family: "Zen Kaku Gothic New";
}

.nav_button{
	visibility: hidden;
}
.nav-menu {
	background-color: var(--white);
	color: var(--grey);
	width: 100% ;
	display : block ;
}

.menu-list{
	position: relative;
	top : 0 ;
	list-style-type: none;
	background-color: var(--white); 
	width: 100%;
	display: flex;
	justify-content: center;
	height : 44px;
	animation : none ;
	box-shadow: 0 -1px 3px rgba(100,100,100,0.1);

}

.menu-list li{
	display: inline-block;
	padding : .5rem 1rem ;
}
.menu-list a{
	color: var(--grey);
}
.menu-list a:hover{
	color: var(--black);
}
.menu-item {
	border-bottom: none ;
	padding: 5px ;
}
.menu-item a{
	font-size : .9rem;
}

.main_news1{
	width : 50% ;
	padding: 15px ;
	display: block;
	float: left;
	background-color: var(--white);
}
.main_news2{
	width : 50% ;
	padding: 15px ;
	display: block;
	float: left;
	background-color: var(--white);
}

/* ドロップダウンメニュー */
@keyframes slideDown {
0% {
	transform: translateY(-20px);
	opacity: 0;
	visibility: hidden;
}
100% {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
}

.drop-menu-list {
	list-style-type: none;
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	top: 45px;
	left: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	z-index: 10;
	width: 300px;
	border : 1px solid var(--light-grey);
/*	border-radius: 3%;*/
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.drop-menu-item{
	border-bottom: none;
	width: 300px;
	text-align : left ;
}
.drop-menu-item-b{
	border-bottom: none;
	background-color: rgba(200, 200, 200, 0.8); 
	width: 300px;
	text-align : center ;
	color : var(--grey);
}
.drop-menu-item a{
	font-size : .9rem;
}
.drop-menu-item-end{
	border-top: 1px solid var(--light-grey) ;
	width: 100%;
	text-align : right ;
	padding : 0 ;
	font-size : .8rem ;
}
.drop-menu-item-end a{
	font-size : .8rem ;
}
.drop-menu-item:hover,
.drop-menu-item:hover a,
.drop-menu-item-end:hover,
.drop-menu-item-end:hover a{
	background-color : var(--blue);
	color : var(--white);
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
	display: block;
	position: absolute;
	top: 45px;
	animation: slideDown 0.5s ease forwards;

}
/* About Setting */
figure {
	float: left;
	margin: .5rem 2rem 1rem 0;
	width: max-content;
	text-align : center ;
}
figure img {
	max-width: 85%;
	border-radius: 50%;
}

/* Footer Setting */
.footer-menu ul{
	list-style-type: none;
	display: flex;
}
.footer-menu ul li a {
	color: var(--grey);
	text-decoration: none;
	font-size : 1rem;
}

}	/* DESKTOP SIZE ここまで */