@charset "utf-8";

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/*                                                                              */
/*      		助中同窓会(index)専用 CSS設定                         			*/
/*                                                                              */
/*              2023.12	佐藤紀子	作成/編集  									*/
/* 																				*/
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/*----------------------------------------------------------------------------
							すべて共通
--------------------------------------------------------------------------- */

html, body{
		font-size				: 	1.1rem										;
    	font-family				: 	sans-serif									;
	  	color 					: 	#333333										;
	  	margin					: 	0											;
		padding					: 	0											;
	  	background-color 		: 	#fff										;
		}
	
body, div, p, h1, h2, h3, h4, ul, figure{
		margin					: 	0											;
		padding					: 	0											;
		}
p, td, th, li{
		line-height				: 	2											;
		}
img{
		width					: 	100%										;
		height					: 	auto										;
		}

.wrap{
		width					: 	100%										;/*footerをページ下部に固定*/
     	position				: 	relative									;
     	min-height				: 	100vh										;
     	}
		

.container{
    	margin                  :   0 auto                             			;
   	 	padding                 :   0 10px										;
    	max-width               :   1200px                                      ;
		padding-bottom			: 	40px										;/*footerの高さ*/
    	}


.main-content{
    	margin-top              :   50px                             			;
		}
		
		
@media screen and (min-width: 767px) {
	.main-content{
    	max-width 				: 	1200px										;
    	margin-top              :   50px                             			;
		}
		}

/*----------------------------------------------------------------------------
								ヘッダー
--------------------------------------------------------------------------- */

header{
		height 					: 	40px										;
		padding 				: 	10px 0	5px 0								;
		margin 					: 	0											;
		}

.header-inner{
		display					: 	flex										;
		justify-content			: 	space-between								;
		align-items				: 	center										;
		margin					: 	5px 0 5px 5px								;
		}

@media screen and (min-width: 768px) {
	.header-inner{
		max-width				: 	1200px										;
		margin					: 	5px 0 5px 5px								;
  		height 					: 	40px										;
  		padding 				: 	0px											;
    	line-height 			: 	40px										;
  		}
		}

.keyvisual{
    	padding					: 	0 											;
		margin					: 	0 											;
		}
		


/*----------------------------------------------------------------------------
								ナビゲーション
--------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.nav{
    	position				: 	fixed										;
    	right					: 	-320px										; /* 右から出てくる */
    	top						:	0											;
    	width					: 	300px										; /* スマホサイズ */
    	height					: 	100vh										;
    	padding-top				: 	60px										;
   	 	background-color		: 	#fff										;
    	transition				: 	all .6s										;
    	z-index					: 	200											;
    	overflow-y				: 	auto										; /* メニューが多くなったらスクロールできるように */
  		}
  	
.hamburger{
    	position				: 	absolute									;
    	right					: 	20px										;
    	width					: 	40px										;
    	height					: 	40px										;
   	 	cursor					: 	pointer										;
    	z-index					: 	300											;
		}

.nav_list{
   	 	margin					: 	0											;
    	padding					: 	0											;
    	list-style				: 	none										;
		}
  
.nav_item{
    	text-align				: 	center										;
    	padding					: 	0 											;
		}

.nav_item a{
    	display					: 	block										;
    	padding					: 	8px 0										;
    	border-bottom			: 	1px solid #eee								;
    	text-decoration			: 	none										;
    	color					: 	#333										;
		font-size 				: 	1.1em										;
		}

.nav_item a:hover{
    	background-color		: 	#eee										;
		}

.hamburger_border{
    	position				: 	absolute									;
		border					: 	1px solid #333								;
    	left					: 	11px										;
    	width					: 	35px										;
    	height					: 	1.5px										;
    	background-color		: 	#333										;
    	transition				: 	all .6s										;
		}

.hamburger_border_top{
    	top						: 	12px										;
		}
	
.hamburger_border_center{
    	top						: 	20px										;
  		}

.hamburger_border_bottom{
    	top						: 	28px										;
 		}
 	
.black_bg{
    	position				: 	fixed										;
    	left					: 	0											;
    	top						: 	0											;
    	width					: 	100vw										;
    	height					: 	100vh										;
    	z-index					: 	100											;
    	background-color		: 	#333										;
    	opacity					: 	0											;
    	visibility				: 	hidden										;
    	transition				: 	all .6s										;
    	cursor					: 	pointer										;
		}

  /* 表示された時用のCSS */
.nav-open .nav{
    	right					: 	0											;
  		}
  		
.nav-open .black_bg{
    	opacity					: 	.8											;
    	visibility				: 	visible										;
  		}
  		
.nav-open .hamburger_border_top{
    	border					: 	1px solid #333								;
    	background-color		: 	#333										;
    	transform				: 	rotate(45deg)								;
    	top						: 	20px										;
  		}
  		
.nav-open .hamburger_border_center{
    	border					: 	1px solid #333								;
    	background-color		: 	#333										;
    	width					: 	0											;
    	left					: 	50%											;
  		}
  		
.nav-open .hamburger_border_bottom{
    	border					: 	1px solid #333								;
    	background-color		: 	#333										;
    	transform				: 	rotate(-45deg)								;
    	top						: 	20px										;
  		}
  		}

@media screen and (min-width: 767px) {
	.nav{
    	padding					: 	0 											;
		margin-top				: 	10px 										;
		width 					: 	100%										;										
		background-color 		: 	#fff										;
		}
	
	.nav_list{
		margin					: 	0 auto 										;
		display					: 	flex !important								;
		list-style-type			: 	none										;
		background-color 		: 	#fff										;
		max-width 				: 	800px										;
		}

	.nav_list li{
		flex					: 	1 1 auto									;
    	padding					: 	0 											;
		height 					: 	25px										;
		line-height 			: 	25px										;
		}

	.nav_list li a{
		display					: 	block										;
		text-decoration			: 	none										;
		text-align				: 	center										;
		border-right			: 	1px solid #000								;
		color 					: 	#333										;
		transition				:	0.5s										;
		}

	.nav_list li:first-child{
		border-left				: 	1px solid #000								;
		}

	.nav_list li a:hover{
		color					: 	crimson										;
		}

	 .hamburger{
		display					: 	none										;
		}
		}


@media screen and (min-width:768px) {
	.sp{
		display					: 	none										;
		}
		}

@media screen and (max-width:767px) {
	.pc{
		display					: 	none										;
		}
		}




/*----------------------------------------------------------------------------
							見出し
--------------------------------------------------------------------------- */

h1{
		color 					: 	#333										;
		font-size 				: 	1em											;
		font-weight				:  	normal										;
		}

h2{
		font-size				: 	0.9em										;
		font-weight				:  	normal										;
		line-height 			: 	50px										;
		
  height : 50px;
  visibility : hidden;
}

h2 img{
		width 					: 	100%										;										

  visibility : hidden;
}


h3{
		font-size				: 	1.6em										;/* 	見出し */
		line-height 			: 	50px										;
		color					:	#455c66										;
		font-weight				: 	normal										;
		text-align              :   center                                  	;
		}
	
@media screen and (min-width: 768px) {
	h3{
		padding-left			: 	5px											;
		}
		}

.under{
  		background				: 	linear-gradient(transparent 60%, #CCD6E0 60%);/* 見出し下線 blue系 */
		}

.small{
		font-size				:	1.5rem										;
		}

/*-----------------------------------------------------------------------------*/
/*   	境界線(hr)  設定				                         	 			*/
/*-----------------------------------------------------------------------------*/


hr{
		height					: 	0											;/* 境界線のリセットcss */
  		margin					: 	0											;
  		padding					: 	0											;
  		border					: 	0											;
		}

hr{
  		height					: 	1.5px										;
  		background-image		: 	-webkit-gradient(linear, left top, right top, from(transparent), color-stop(#262E6D), to(transparent))	;/*境界線 色 濃い青 */
  		background-image		: 	linear-gradient(to right, transparent, #262E6D, transparent)											;
		}

.green{
  		background-image		: 	-webkit-gradient(linear, left top, right top, from(transparent), color-stop(#3a5b52), to(transparent))	;/*境界線 色 深緑 */
  		background-image		: 	linear-gradient(to right, transparent, #3a5b52, transparent)											;
}




/*----------------------------------------------------------------------------
							information 紹介
--------------------------------------------------------------------------- */

.intro-title{
		font-size 				: 	2rem										;
    	margin-bottom			: 	10px										;
    	color                   :   #2c4f54                             		;
		}

.intro-photo{
    	margin-top 				:	 50px										;
		}

.intro-photo-img{
    	max-width 				: 	90%											;
		margin 					: 	0 auto 										;
    	}

.intro-photo img{
		width 					: 	100%										;
		padding 				: 	0											;
   		border 					: 	1px solid #dddcd6							;
    	box-shadow				: 	4px 4px 4px #cccccc							;
		}


@media ( min-width : 768px ){
	/* PC用設定  ページで等間隔に配置 */
	.information{
    	display					: 	-webkit-flex								;
    	display					: 	flex										;
    	justify-content         : 	space-between                      			;
		}

	.intro{
		width 					: 	1000px;
      	margin 					: 	20px auto 50px auto							;

    	}

	.intro p{
       	line-height 			: 	2.5rem !important							;
      	margin-top 				: 	20px										;
      	padding-left 			: 	20px										;
		}
		}

main{
		padding-top				: 	0px											;
		padding-bottom			: 	50px										;
	 	width 					: 	100%										;
		}


/* ---------------------------------------------------------------------------- */
/*        開催報告と集合写真へのリンク設定                                   	*/
/* ---------------------------------------------------------------------------- */

.news-information{
		width 						: 	280px									;
		height 						: 	50px									;
  		line-height 				: 	50px									;
  		text-align                  :   center                                  ;
		margin						:	50px auto								;
		}

@media ( min-width : 768px ){
	.news-information{
	  	margin					:	80px 0										;
		}
		}

.news-information a{
		display 					: 	block									;
		color						:	#fff									;
		text-decoration 			: 	none									;
  		background-color			: 	#779eaf									;
  		border-radius				: 	3px										;
  		border 						: 	1px solid #779eaf						;
		}

.news-information a:visited{
		color						:	#fff									;
		}

.news-information a:hover{
		background-color			: 	#fff									;
		color						: 	#779eaf									;
		transition					: 	all .4s									;
		}

.bss{
		margin : 100px auto;
		}

@media ( min-width : 768px ){
.bss{
		width 					: 	800px										;
		}
		}
/*----------------------------------------------------------------------------
							お知らせ                             				
----------------------------------------------------------------------------- */
.news{
		margin					:	80px 0										;
		}

.news dl{
  		font-size				:	1.1rem										;
		}

.news dt{
		float					:	none										;
		max-width				: 	100%										;
		padding					:	10px 0 5px 0								;
		}

.news dd{
    	padding					: 	20px 0										;
    	max-width				: 	100%										;
		margin					: 	0 											;
		border-bottom			:	1px solid #d6c6af							;
		}

.news dl a{
    	display                 :   block                                    	;
    	color                   :   black                                    	;
    	text-decoration         :   none                                     	;
    	}

.news dl a:hover{
    	color                   :   crimson                                  	;
    	}


@media screen and (min-width: 768px) {
	.news{
		margin					: 	50px auto									;
		width					: 	900px										;
		}
	.news dl{
		padding-left			: 	20px										;
    	margin-bottom			: 	20px										;
		}
	.news dt{
		float					:	left										;
		border-bottom			: 	none										;
		font-size 				: 	1.1rem										;
		padding					: 	30px 0	5px 0								;
		}
	.news dd{
		padding					: 	30px 0	5px  12em							;
		border-bottom 			: 	1px dashed black							;
		font-size 				: 	1.1rem										;
		}

	.news dd::after{
    	content					: 	"."											;
    	clear					: 	both										;
    	height					: 	0											;
    	display					: 	block										;
    	visibility				: 	hidden										;
		}
		}

.news img{
		width 					: 	100%										;
		padding 				: 	0											;
		}

@media ( min-width : 768px ){
.right{
    	height					: 	50px											;
  		line-height 				: 	50px									;
		text-align                  :   right                                  ;
		}
.right img{
		width 					: 	5px										;
		padding 				: 	0											;

}
.counter｛
		width 					: 	300px										;
    	height					: 	30px											;
		background-size:contain;
｝
.counter img｛
		max-width 					: 	100%										;

}
}

.flexbox 
	{
 	display							: 	flex									;
 	flex-direction					: 	column									; 
	align-items 					:	center									;
	}
	 
@media  screen and ( min-width : 768px ){
	.flexbox{
		flex-direction				:	row-reverse								;
		margin						: 	20px 0 									;
        }
        }



/*----------------------------------------------------------------------------
							フッター
--------------------------------------------------------------------------- */

footer{
		width					: 	100%										;
		height 					: 	35px										;
		background				:	#ECEDE8										;
		font-size				:	0.8em										;
		color					:	#000										;
		text-align				: 	center										;
		padding-top				: 	8px											;
		position				: 	absolute									;/*←絶対位置　フッターを下部に固定*/
    	bottom					: 	0											;/*←絶対位置　フッターを下部に固定*/
		}


/*  ----------------------------------------------------------------------------------------------------------------------------  */
/*      ページトップ(ページの先頭)へ戻るの設定                                                                                    */
/*  ----------------------------------------------------------------------------------------------------------------------------  */

#page-top{
    	position                :   fixed                                       ;
    	right                   :   10px                                        ;
    	bottom                  :   10px                                        ;
    	font-size               :   1.2rem                                      ;
    	line-height             :   1.2rem                                      ;
    	text-align              :   center                                      ;
    	background              :   #fff                                        ;
    	color                   :   #737373                                     ;
    	padding                 :   10px                                        ;
    	border                  :   solid 1px                                   ;
    	border-radius           :   50%                                         ;
    	box-shadow              :   0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2)  ;
    	text-decoration         :   none                                        ;
    	}