@charset "utf-8";

/* ****************************************************** */
/*助中同窓会(gallery)専用 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				:50px 0 80px 0;
	}
	
.main-section
	{
	margin				:50px auto 50px auto;
	}
	
@media screen and (min-width: 767px) {
.main-content
	{
	max-width			:1200px;
	margin				:50px 0 80px 0;
	}
		
.main-section
	{
	width				:100%;
	}
	}


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

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				:#b22222;
	}

.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
    {
    position                    :   relative                                	;
    padding                     :   0.25em 0                                	;
    color						:	#333										;
	font-weight					:	normal										;

    }

h2:after 
    {
    content                     :   ""                                      	;
    display                     :   block                                   	;
    height                      :   4px                                     	;
    background                  :   -webkit-linear-gradient(to right, #165e83, transparent)   ;
    background                  :   linear-gradient(to right, #165e83, transparent)           ;
    }

h3
	{
    margin-bottom				:	2rem										;
	padding-bottom				:	0.5rem										;
	font-size					:	1.3rem										;
	color						:	#0e1b3f										;
    border-bottom               :   1px solid #0e1b3f                  			;
	font-weight					:	normal										;

	}
	
@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)											;
}

/* ---------------------------------------------------------------------------- */
/*      箇条書き設定                                                        	*/
/* ---------------------------------------------------------------------------- */

dl{
	margin-left					:	5px 										;
	}

dt{
	float						:	left										;
	padding-top					:	15px										;
	line-height					:	1.5rem										;
	}

dd{
	padding-top					:	15px										;
	padding-left 				: 	5rem										;
	line-height					:	1.5rem										;
	}


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

.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										;
	}

/* ---------------------------------------------------------------------------- */
/*      Galleryインデックス                       								*/
/* ---------------------------------------------------------------------------- */

.item-menu4
	{
    font-size                   :   0.9rem                                      ;
    float                       :   left                                        ;
    margin                      :   0 0 12px 10px                               ;
    border                      :   1px solid #688999                    		;
    width                       :   150px                                       ;
    text-align                  :   center                                      ;
    background-color            :   #f4f9ff                                 	;
    }

.item-menu4 a
	{
    display                     :   block                                       ;
    padding                     :   5px                                         ;
    text-decoration             :   none                                        ;
    color                       :   #302833                                     ;
    }

.item-menu4 a:visited
	{
    color                       :   #302833                                     ;
    }

.item-menu4 a:hover
	{
    color                       :   #fff                                       	;
    background-color            :   #779eaf                                 	;
	transition					: 	all .3s	ease-in								;
    }
  
.clearfix
	{
	zoom						:	100%										;
	}
    
.clearfix::after
	{
	content						:	" "											;
	clear						:	both										;
	height						:	0											;
	display						:	block										;
	visibility					:	hidden										;
	}

@media screen and (min-width:767px) {
	.item-menu4{
    	font-size               :   1rem                                        ;
    	width                   :   180px                                       ;
		}
		}


/*----------------------------------------------------------------------------
							ギャラリー
--------------------------------------------------------------------------- */
.basic1 
    {
 	box-shadow					: 	7px 7px 18px -10px;							;
    margin                      :   10px                                 		;
    }


.ph-container
    {
    display                     :   flex                                		;
    flex-direction              :   column                              		;
    text-align                  :   center                              		;

    }
.ph-container img
    {
    width						:	330px										;
    }

/* PC用設定  ページで等間隔に配置 */
@media screen and (min-width:767px) 
    {
    .ph-container
        {
        display                 :   flex                                    	;
        flex-direction          :   row                                     	;
        flex-wrap               :   wrap                                    	;
        justify-content         :   space-around                            	;
        margin                  :   50px  0                                 	;
        }
    .ph-container img
        {
      width						:	450px										;
         }
     }


/*----------------------------------------------------------------------------
							ギャラリー  集合写真                          	
--------------------------------------------------------------------------- */
.gallery-photo{
		display					:	block										;
		background				: 	#fff										;
		text-align 				: 	center										;
   	 	margin					: 	0											;
		height 					: 	auto										;
		padding					: 	40px 0 60px 0								;
		}

.gallery-photo-img{
   	 	margin					: 	30px auto									;
    	box-shadow				: 	4px 4px 4px #cccccc							;
		background				: 	#fff										;
		}

.gallery-photo img{
		max-width 				: 	100%										;
		}
.text{
   	 	margin-top				: 	5px 										;
		}

.gallery-photo-t{
		font-size				:	1em											;
		color					:	#2c4f54										;
		}

.gallery-photo-p{
		font-size				:	0.9em										;
		line-height 			: 	1.1rem										;
		}

@media screen and (min-width: 767px) {
  .gallery-photo{
    	display					: 	flex										; 
    	flex-wrap				:	wrap										;
    	margin					: 	0 											;
  		}
		}


/* ---------------------------------------------------------------------------- */
/*      動画リンク                                        						*/
/* ---------------------------------------------------------------------------- */


.link-container
	{
	display						: 	flex										;
	flex-wrap					: 	wrap										;
    margin		          		:   50px 0 										; 
	}

@media screen and (min-width: 960px) {
	.link-container
		{
		display					: 	flex										;
  		flex-wrap				: 	wrap										;
  		justify-content			: 	flex-start									;
    	}
		}

.item5
	{
	width						:	45%											;
	margin                      :   5px auto                                	;
	border                    	:  	1.2px solid #262E6D              			;
    }

@media screen and (min-width: 520px) {
	.item5
		{
		width					:	250px										;
		}	
		}
		
@media screen and (min-width: 960px) {
	.item5
		{
  		width					:	230px										;
		overflow				: 	hidden										; 
		margin					: 	20px										;
		}
		
	.item5-img
		{
		width					: 	230px										;
		transition-duration		: 	0.5s										;
		}
		
	.item5-img:hover 
		{
		transform				: 	scale(1.1,1.1)								; /* 画像の拡大 */
		cursor					: 	pointer										; /* カーソルをポインターにする */
		}
		}



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

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                                        ;
    }