@charset "utf-8";
/* CSS Document */

/* 画面幅が480px以下（小型スマホ） */
@media screen and (max-width: 480px) {
  /* 小型スマホ用のスタイル */
}

/* --- リセットCSS ------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: AdjustedYuGothic;
  font-weight: normal;
  src: local("Yu Gothic Medium");}

@font-face {
  font-family: AdjustedYuGothic;
  font-weight: bold;
  src: local("Yu Gothic Bold");}


	html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, input {
		margin: 0;
		padding: 0;
		border: 0;
		font-weight: 500;
        font-family: AdjustedYuGothic, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 500;
		color: inherit;/* 親の指定を継承させる */}
	html,body{ /* 背景色が途切れないように */
		min-height:100%;
		min-width:300px;}
	html{
		font-size:62.5%;/* この指定により10px(=1rem)になる */}

	body{
		width:100%;
		height:100%;
		min-height:100%;
		font-size:1.6rem;/* 基本のフォントサイズをここで指定【16px】 */
        color: #333;
		line-height:1.4;
		-ms-text-size-adjust:100%;
		-webkit-text-size-adjust:100%;
		background-color:#fff;}
	*, *::before, *::after { /* paddingとborderの値をオブジェクトのサイズに含める */
	    -webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	         -o-box-sizing: border-box;
	        -ms-box-sizing: border-box;
	            box-sizing: border-box;
		}
	article, header, footer, aside, figure, figcaption, nav, section { 
		display:block;}
	ol, ul {
		list-style: none;
		list-style-type: none;}

    img{display: block;}
	figure{
		margin:0;
		padding:0;}
	/* リンクの設定は適宜変更する */
		a{
			text-decoration:none;
			color:#333;}
			a:link		{color:#333;}
			a:visited	{color:#666;}
			a:hover		{color:#00a0e9;}
			a:active	{color:#00a0e9;}

	/* フォームの初期設定リセット */
	input, button, textarea, select {
			-webkit-appearance:none;
			-moz-appearance:none;
		appearance:none;
		margin:0;
		padding:0;
		background:none;
		border:none;
		border-radius:0;
		outline:none;
		box-sizing:border-box;}
	select::-ms-expand {
		display: none;}
	button{
		cursor:pointer;}


/* --- END/リセットCSS ------------------------------------------------------------------------------------------------------------------------------------- */

.font2em{font-size: 2em}

.triangle{
    position: relative;}
    .triangle::after,
    .triangle::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
        height: 80px;
        width: 100%;
        clip-path: polygon(50% 0, 0 100%, 100% 100%);/* 逆にする場合→ (50% 100%, 0 0, 100% 0) */}
        /* ▶◀ */
        .trBothTop::before{
            bottom:inherit;
            top: -1px;
            clip-path: polygon(0 0, 0 100%, 50% 0);}
        .trBothTop::after{
            bottom:inherit;
            top: -1px;
            clip-path: polygon(100% 0, 100% 100%, 50% 0);}
        .trBothBottom::before{clip-path: polygon(100% 0, 100% 100%, 50% 100%);}
        .trBothBottom::after{clip-path: polygon(0 0, 0 100%, 50% 100%);}
        .trWHITE::after,
        .trWHITE::before {background-color: #fff;}
        .trBLUE::after,
        .trBLUE::before {background-color: #04025b;}
        .trH50::after,
        .trH50::before {height: 50px;}
        .trREVERSE::after,
        .trREVERSE::before{
            clip-path: polygon(50% 100%, 0 0, 100% 0);}

.spacer{height: 50px;}

/* 色関係 */
.red{color: #D51F22;}
.bgBeige{background-color: #e7e5db;}

/* サイズ関係 */
.widthBasic{
/* 基本の横幅 */
    width: 70%;
    max-width: 900px;
    margin: auto;}
.widthL{
/* 基本の横幅 */
    width: 80%;
    max-width: 900px;
    margin: auto;}

.disNone{
    display: none !important;}

/* ----- ヘッダー ※画面幅1000px以下でレスポンシブ設定あり --------------------------------- */
header{
    position: sticky;
    z-index: 9999;
    top: 0;
    left: 0;}
#headerDIV{
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    height: 100px;
    padding: 10px 40px;
    background-color: #04025b;
    background-image: linear-gradient(0deg, rgb(21 19 125), rgba(4, 2, 91, 1) 10%, rgba(39, 36, 140, 1));
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);}

.headerLOGO{}
    .headerLOGO a{
        display: flex;
        align-items: center;}
        .headerLOGO a img{
            height: 40px;
            margin-right: 10px;}
        .headerLOGO a > h1{
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;}
.headerLINK{}
    .headerLINK a{
        position: relative;
        color: #fff;
        font-size: 1.4rem;
        text-decoration: none;}
        .headerLINK a:not(.headerMAIL):visited{
	        color: #f1f1f1;}
        .headerLINK a:not(.headerMAIL):hover{
	        color: #efea10;}
        .headerLINK a:not(.headerMAIL)::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #efea10;
            transform: scaleX(0);
            transition: transform 0.3s;}
            .headerLINK a:hover::after {
                transform: scaleX(1);}
        .headerLINK a + a{margin-left: 20px;}

        a.headerMAIL{
            display: inline-block;
            box-decoration-break: clone;	
            -webkit-box-decoration-break: clone;
            color: #04025b;
            font-size: 1.6rem;
            background-color: #fff;
            padding: 2px 20px;
            border-radius: 1.6rem;
            transition: background-color .3s;}
            a.headerMAIL:hover{
                color: #04025b;
                background-color: #efea10;}

    /* ハンバーガーメニューのチェックボックス（非表示） */
    .menu-toggle {display: none;}

    /* ハンバーガーメニューアイコン */
    .hamburger-menu {
        display: none; /* PCでは非表示 */
        cursor: pointer;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1001;}

    /* 三本線 */
    .hamburger-menu span {
        display: block;
        width: 30px;
        height: 3px;
        background: #fff;
        margin: 6px auto;
        transition: all 0.3s ease;}




/* 画面サイズ 1080px 未満 */
@media (max-width: 1080px) {
  /* スタイルルール */ 
        #headerDIV{
            display: flex;
            flex-direction: column;
            justify-content: center;}
        .headerLOGO a{margin-bottom: 10px;}
            .headerLOGO a img{
                height: 32px;}
        .headerLINK{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;}
        .headerLINK a + a{margin: 0;}
    a.headerMAIL{
        font-size: 1.4rem;
        padding: 2px 10px;
    }
}



/* ----- フッター --------------------------------- */
footer{
    position: relative;
    z-index: 9998;}
#footerDIV{
    text-align: center;
    padding: 40px;
    background-color: #04025b;
    color: #fff;}
.footerLOGO{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;}
    .footerLOGO > img{
        width: 90%;
        max-width: 450px;}
    .footerLOGO > p{
        font-size: 2.4rem;
        font-weight: 700;}
.footerADD{}
    .footerADD > p + p{margin-top: 10px;}
    .footerADD > p > span + span{margin-left: 1em;}


/* ----- main --------------------------------- */
main{}


/* ----- 共通設定 ------------------------------------------------------------------ */
main{
    min-height: calc( 100vh -  288px );}
/*
body:not(#top) main:first-of-type{
    padding: 80px 0 160px;} */

main > article:last-of-type{margin-bottom: 120px;}

.midashi{
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 0 auto 3em;
    width: 100%;
    font-size: 1.4em;
    font-weight: bold;
    color: #04025b;}
    .midashi::before,
    .midashi::before {
        content: '';
        position: absolute;
        bottom: -15px;
        display: inline-block;
        width: 60px;
        height: 5px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #04025b;
        border-radius: 2px;}
.midashi2{
    position: relative;
    line-height: 1.4;
    margin: 0 auto 2em;
    padding:0.25em 1.4em;
    display: inline-block;}
.midashi2:before, .midashi2:after { 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;}
.midashi2:before {
    border-left: solid 1px #04025b;
    border-top: solid 1px #04025b;
    top:0;
    left: 0;}
.midashi2:after {
    border-right: solid 1px #04025b;
    border-bottom: solid 1px #04025b;
    bottom:0;
    right: 0;}

.headerLINK a.new{
    position: relative;
    margin-right: 15px;}
    .headerLINK a.new::before{
        content: '●';
        display: block;
        font-size: .6em;
        position: absolute;
        top: .55em;
        right: -1.4em;
        color: #f00;
        -webkit-animation:blink 1.5s ease-in-out infinite alternate;
        -moz-animation:blink 1.5s ease-in-out infinite alternate;
        animation:blink 1.5s ease-in-out infinite alternate;}
        @-webkit-keyframes blink{
            0% {opacity:.7;}
            100% {opacity:1;}
            }
        @-moz-keyframes blink{
            0% {opacity:.7;}
            100% {opacity:1;}
            }
        @keyframes blink{
            0% {opacity:.7;}
            100% {opacity:1;}
            }



#pageTitle{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 0 80px;
    height: 40vh;
    max-height: 400px;
    min-height: 200px;
    background: url("../images/titleBG01.jpg") no-repeat center;}
    #pageTitle > p{
        position: relative;
        z-index: 1;
        font-size: 1.6em;
        font-weight: bold;
        color: #04025b;}

/* ----- トップページ --------------------------------- */
#indexTOPIMAGE{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc( 70vh - 100px );/* ヘッダーの高さを引く */
    padding: 0 50px;
    min-height: 400px;
    max-height: 800px;
    /*background: url("../images/topBG-min.jpg") no-repeat center center;*/
    }
    #indexTOPIMAGE > h2{
	    font-size: clamp(1.5rem, calc(4vw + 1.5rem), 6rem);
        color: #fff;
        text-shadow: 0px 0px 5px rgba(0, 0, 1, 1);}
        #indexTOPIMAGE > h2 > span{
            white-space: nowrap;
            margin: 0 -.4em;}
/* トップページ背景のアニメーション部分 */
    #indexTOPIMAGE_container{
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        /* 切り替え前の画像と切り替え後の画像を設定（切替後の背景も設定する） */
        background-image: url(../images/topBG-min.jpg), url(../images/topBG-min2.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        /* アニメーションを設定 */
        animation: image_anime 60s ease; 
        /* forwardsを設定すると100%の状態で止まる */
        animation-fill-mode: forwards; 
        /* animationを開始する時間を設定 */
        animation-delay: .5s;
        /* アニメーションを連続させる */
        animation-iteration-count:infinite;}
        @keyframes image_anime {
        /* 画像切替のタイミングは5％とする */
            0%    {background-image: url(../images/topBG-min.jpg); }
            20%    {background-image: url(../images/topBG-min.jpg); }
            25%    {background-image: url(../images/topBG-min2.jpg); }
            45%    {background-image: url(../images/topBG-min2.jpg); }
            50%    {background-image: url(../images/topBG-min.jpg); }
            70%    {background-image: url(../images/topBG-min.jpg); }
            75%    {background-image: url(../images/topBG-min2.jpg); }
            95%    {background-image: url(../images/topBG-min2.jpg); }
            100%    {background-image: url(../images/topBG-min.jpg); }
            }

#indexMAINTEXT{
    padding: 10px 0 90px;/* 三角形の分余白を入れる */
    text-align: center;
    color: #04025b;}
.title{
    text-align: center;
    letter-spacing: 10px;
    padding-left: 10px;
    margin: 10px 0 20px;
    font-size: 1.8em;
    font-weight: 600;
    color: #04025b;}
.titleRuby{
    letter-spacing: .5em;
    padding-left: .5em;
    text-align: center;
    margin-bottom: .5em;
    font-size: .7em;
    font-weight: bold;
    color: #918f85;}
.indexMAINTEXT_wrap{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 0 0 50px;}
.indexMAINTEXT_wrap h3{
    width: 60%;
    min-width: 500px;
    line-height: 2;
    font-size: 1.6rem;
    text-align: justify;
    margin-left: -110px;/* 左右の余白見栄えのため */
    padding-right: 60px;}
.indexMAINTEXT_img{
    position: relative;
    top: 10px;
    left: 20px;}
    .indexMAINTEXT_img > span{
        display: block;
        position: absolute;
        width: 180px;
        height: 230px;
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}

    /* 画面サイズ 1000px 未満 */
    @media (max-width: 999px) {
            .indexMAINTEXT_wrap h3{
                width: 100%;
                margin: 0;
                padding: 0;}
            .indexMAINTEXT_img{display: none;}
        /* スタイルルール */ }
    .indexMAINTEXT_img > span:first-of-type{
        background-color: #04025b;
        top: 10px;
        left: 10px;}
    .indexMAINTEXT_img > span:nth-of-type(2){
        top: 0;
        left: 0;
        background: url("../images/top_sagyouin.jpg") no-repeat bottom center;
        background-size: cover;}



/* 予定表 */
#indexSCHEDULE{
    padding: 120px 0;
    background-color: #e7e5db;}
    #indexSCHEDULE > h4{text-align: center;}
.indexSCHEDULEtable{
    border-collapse: collapse;
    background-color: #fff;
    border-top: 3px solid #04025b;
    border-bottom: 3px solid #04025b;
    margin: 40px auto;}
        .indexSCHEDULEtable tr:not(:first-of-type){
            border-top: 1px solid #ccc;}
        .indexSCHEDULEtable th{
            width: 200px;
            padding: 16px 0;
            text-align: center;
            color: #04025b;
            font-size: 1.1em;
            font-weight: bold;}
        .indexSCHEDULEtable td{
            padding: 16px 16px 16px 0 ;}
    .indexSCHEDULEtable .highlight{background-color: #fffcd3;}

/* お知らせ */
.indexNOTICE{margin-bottom: 80px;}
    .indexNOTICE article{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 30px;
        background-color: #fff;}
        .indexNOTICE article h5{
            margin: 0 0 1em;
            font-size: 1.1em;}
        .indexNOTICE article > p{
            text-align: justify;
            display: inline-block;
            margin: auto;}
        .indexNOTICE article > p + p{margin-top: .5em;}
    .indexNOTICE article + article{
        margin-top: 20px;}
.noticeBig{
    font-size: 1.5em !important;
    font-weight: bold;}

/* 組合員紹介 */
#indexMEMBER{
    padding: 100px 0 130px;}
.memberWrap{
    margin: 45px auto 80px ;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 32px;}
.memberBlock{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #e7e5db;
    text-align: center;
    transition: box-shadow .6s, background-color .3s;}
    .memberBlock:hover{
        box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.35);
        background-color: #efede5;}
.comPhoto{
    width: 100%;
    padding-top: 65%;
    position: relative;
    overflow: hidden;
    transition: opacity .3s;}
    .memberBlock:hover .comPhoto{opacity: .8;}
    .comPhoto > img{
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s}
        .memberBlock:hover .comPhoto > img{
            transform: scale(1.01) translate(-50%, -50%);}
.comName{
    margin-top: 15px;
    font-size: 2.6rem;
    font-weight: bold;
    color: #04025b;}
    .comName > small{
        display: inline-block;
        font-size: .75em;}
.jobType{
    display: inline-block;
    margin: 12px auto 0;
    padding: 2px 16px;
    background-color: #04025b;
    color: #fff;
    font-size: 1.4rem;}
.jobTag{
    flex: 1;/* ここで高さを調整する */
    padding: 16px 20px;
    text-align: justify;
    font-size: 1.4rem;
    color: #04025b;}
.comUrl{
    margin-bottom: 18px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #04025b;}

/* アクセス */
#indexACCESS{
    background-color: #04025b;
    padding: 50px 0;}
#mapWrap{
    margin: auto;
    padding-top: 30px;}
#map{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 60%; /* 比率を4:3なら75％に固定 */}
    #map > iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;}

/* 画面サイズ 1000px 未満 */
@media (max-width: 999px) {
  /* スタイルルール */ 
            .memberWrap{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(4, 1fr);
                grid-column-gap: 24px;
                grid-row-gap: 36px;}
}

/* ------ 組合概要・沿革 --------------------------------------------------------------- */

#enkaku #pageTitle{
    background: url("../images/titleBG06.jpg") no-repeat center;}



#enkaku main > article{position: relative;}
    #enkaku main > article:not(:last-of-type){padding: 0 0 160px;}
    #enkaku main > article:nth-of-type(even){
        /* 偶数個目に適用 */
        background: #e7e5db;}
    #enkaku main > article:nth-of-type(even)::before{
            content: '';
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            height: 80px;
            width: 100%;
            clip-path: polygon(50% 0, 0 100%, 100% 100%);/* 逆にする場合→ (50% 100%, 0 0, 100% 0) */
            background-color: #fff;}
    #enkaku main > article:nth-of-type(odd){
        /* 奇数個目に適用 */}
        #enkaku main > article:nth-of-type(odd):not(:last-of-type)::before{
            content: '';
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            height: 80px;
            width: 100%;
            clip-path: polygon(50% 0, 0 100%, 100% 100%);/* 逆にする場合→ (50% 100%, 0 0, 100% 0) */
            background-color: #e7e5db;}

.enkaku_aisatsu{}

.aisatsu_photo{
    display: flex;
    justify-content: center;
    margin-top: 50px;}
.aisatsu_photo img{
    width: 40%;}
    .aisatsu_photo img + img{margin-left: 20px;}

#enkaku article p{
    text-align: justify;
    line-height: 1.8;}

.gaiyou_table{
    /* 沿革と共有 */
    width: 80%;
    min-width: 300px;
    max-width: 700px;
    margin: auto;
    border-collapse: collapse;}
    .gaiyou_table th,
    .gaiyou_table td{
        padding:14px 0;}
    .gaiyou_table th{
        font-weight: bold;
        color: #201e73;
        width: 100px;
        border-bottom: 2px solid #201e73;}
    .gaiyou_table td{
        text-align: justify;
        padding-left: 10px;
        border-bottom: 2px solid #f3f3f3;}

.kibo_table{
    width: 80%;
    max-width: 500px;
    margin: auto;
    border-collapse: collapse;}
    .kibo_table tr:last-of-type{
        border-top: 2px solid #201e73;}
    .kibo_table th{
        width: 50%;
        text-align: left;
        padding: 8px 0 8px 50px;}
    .kibo_table td{
        width: 50%;
        text-align: right;
        padding: 8px 50px 8px 0;}



article#enkaku_jigyou ol{
    list-style-type: decimal;}
article#enkaku_jigyou h2{
    margin: auto;
    text-align: left;
    font-size: 1.7rem;
    font-weight: bold;}
    article#enkaku_jigyou h2::before{
        content: none;}
article#enkaku_jigyou li{
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;}
    article#enkaku_jigyou li h2{
        width: 230px;}
    article#enkaku_jigyou li p{
        flex: 1;
        line-height: 1.5;}


#conte_enkaku.gaiyou_table{}
#conte_enkaku.gaiyou_table th{
    text-align: left;}
    #conte_enkaku.gaiyou_table th:first-child{
        width: 3em;
        padding-left: 5px;}
    #conte_enkaku.gaiyou_table th:nth-child(2),
    #conte_enkaku.gaiyou_table th:nth-child(3){
        width: 2.5em;
        text-align: right;}
        #conte_enkaku.gaiyou_table th:nth-child(2)::after{
            content: '年';}
    #conte_enkaku.gaiyou_table th:nth-child(3){}
        #conte_enkaku.gaiyou_table th:nth-child(3)::after{
            content: '月';}


/* ------ 年間行事 --------------------------------------------------------------- */

#calendar{}

#calendar #pageTitle{
    background: url("../images/titleBG04.jpg") no-repeat center;}
.calendar_wrap{
    padding: 30px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 24px;}
    .calendar_wrap > *{
        background-color: #fff;
        padding: 12px;}
    .calendar_wrap > article{
        position: relative;
        box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.35);}
.month{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 7px;
    width: 60px;
    height: 65px;
    padding-top: 10px;
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    background-color: #4773d7;
    clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0% 100%, 0% 0%);}
    .month::after{
        content: '月';
        font-size: 1.6rem;}
.monthImg{
    position: relative;
    background: #ccc;}
    .monthImg img{
        width: 100%;
        aspect-ratio: 4 / 3 ;
        object-fit: cover;}
.monthTitle{
    position: relative;
    top: -1.3em;
    right: .2em;
    text-align: right;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 
        1px 1px 0 #333, 
        -1px -1px 0 #333, 
        -1px 1px 0 #333, 
        1px -1px 0 #333; /* 線を四方向に設定 */}
.monthOtheEvent{
    text-align: left;}


/* ------ イベント情報 --------------------------------------------------------------- */

#eventInfo{}
#eventInfo #pageTitle{
    background: url("../images/titleBG05.jpg") no-repeat center;}

    #eventInfo main > article + article{margin-top: 120px;}

    #eventInfo main > article div{text-align: center;}

    #eventInfo article table tr{}
    #eventInfo article table tr td{
        padding-bottom: 32px;
        vertical-align: top;
        text-align: justify;}
        #eventInfo article table tr td strong{
            color: #229f8e;}
        #eventInfo article table tr td:first-of-type > img{
            display: block;
            max-width: 240px;
            height: auto;}
        #eventInfo article table tr td:last-of-type{
            padding-left: 24px;}
    #eventInfo article table tr td:first-of-type{
        width: 240px;}
    #eventInfo article table tr:last-of-type td{
        padding-bottom: 0;}
.eventTitle{
    background-color: #4773d7;
    margin-bottom: 1rem;
    padding: 4px;
    color: #fff;}
    
.eventTitleSpace{
	margin-bottom:50px;}

/* 写真を掲載する場合 */
.slideConte{
    margin: 50px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;}
    .slideConte > li{}
        .slideConte > li img{
            width: 100%;
            max-width: 100%;}


/* ------ ひとやすみ（日記） --------------------------------------------------------------- */
#diary{
    background: url("../diary/diary_img/deco/bg.png");}
#diary > main{
    position: relative;}

    #diary > main::before{
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        background: url("../diary/diary_img/deco/diary_bg_top-8.png") no-repeat;
        background-position: top center;
        background-size: cover;
        width: 100%;
        aspect-ratio:1920 / 300;}
    #diary > main::after{
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        background: url("../diary/diary_img/deco/diary_bg_bottom-8.png") no-repeat;
        background-position: top center;
        background-size: cover;
        width: 100%;
        aspect-ratio:1920 / 310;}

.diary_title{
    text-align: center;
    padding: 96px 0 40px;}
    .diary_title img{
        width: 300px;
        margin: auto;}
.diary_page{
    pointer-events: none;
    margin-bottom: 30px;
    color: #ccc;
    text-align: center;}
    .diary_page a{
        pointer-events: auto;}

.diary_wrap{padding-bottom: 200px;}
.diary_wrap > table{
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);}
    .diary_wrap > table + table{
        margin-top: 50px;}
    .diary_wrap > table tr{
        position: relative;}
    .diary_wrap > table tr:first-of-type > th::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -3px;
        display: block;
        width: 100px;
        height: 6px;
        background-color: #25487f;}
    .diary_wrap > table tr:nth-of-type(2){
        border-top: 1px solid #25487f;}
    .diary_wrap > table tr th{
        font-size: 1.4em;
        text-align: left;
        color: #25487f;
        padding:16px 24px;}
        .diary_wrap > table tr th > p{display: inline-block;}
        .diary_wrap > table tr th > p:first-of-type{
            font-size: .8em;
            margin-right: 20px;}
        .diary_wrap > table tr th > p:nth-of-type(2){font-weight: bold;}
    .diary_wrap > table tr td{
        vertical-align: top;
        padding: 24px;}
    .diary_wrap > table tr td:last-of-type{
        width: 180px;}
    .diary_wrap > table tr td:last-of-type img{
        max-width: 130px;}
        .diary_wrap > table tr td:last-of-type img + img{
            margin-top: 20px;}





/* ----------------------------------------------------------------------------------------- */
/* 画面幅が480px以下（小型スマホ） */
/* ----------------------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  /* 小型スマホ用のスタイル */
    
            #headerDIV{}
    
    
            #footerDIV{text-align: justify;}
            .footerLOGO{text-align: justify;}
            .footerADD{
                font-size: .9em;
                text-align: center;}
            .footerADD > p > span{display: block;}
            .footerADD > p span + span{margin-left: 0;}
    
    

            .widthBasic{width: 80%;}
    
            #indexTOPIMAGE{
                height: 250px;
                min-height: 250px;
                max-height: inherit;
                align-items: flex-start;
                padding-top: 40px;}
            .title{
                letter-spacing: 0;
                padding-left: 0;}
            .indexMAINTEXT_wrap h3{
                width: inherit;
                min-width: inherit;
                margin-left: 0;
                padding-left: 0;}
            .indexNOTICE article{
                text-align: justify;}
            #indexSCHEDULE{padding: 60px 0;}
            .indexSCHEDULEtable th,
            .indexSCHEDULEtable td{
                display: block;
                width: 100%;}
            .indexSCHEDULEtable th{
                padding: 16px 8px 0 8px;}
            .indexSCHEDULEtable td{
                padding: 16px;}
            #indexMEMBER{
                padding: 10px 0 80px;}
            .memberWrap{
                margin: 24px auto 32px ;
                grid-template-columns: 1fr; /* 1列にする */
                grid-template-rows: auto; /* 自動調整 */
                grid-row-gap: 36px; /* 行間の余白はそのまま */
                grid-column-gap: 0px; /* 列間の余白は不要なので0 */}
            #indexACCESS{padding: 0 0 40px;}
            #mapWrap{padding-top: 0;}
    
    
    
            /* 各ページ共通 */
            #pageTitle{
                height: 150px;
                min-height: initial;
                max-height: none;
                margin: 0 0 30px}
            #pageTitle > p{font-size: 2.2rem;}
            .midashi{
                margin: 0 auto 2em;
                font-size: 1.8rem;}
            main > article:last-of-type{margin-bottom: 60px;}

            /* 沿革ページ */
            .aisatsu_photo{justify-content: space-between;}
            .aisatsu_photo img{width: 48%;}
            .aisatsu_photo img + img{margin-left: 0;}
            .gaiyou_table th,
            .gaiyou_table td{
                display: block;
                width: 100%;}
            .gaiyou_table th{
                padding: 16px 0 8px;
                border-bottom: 1px solid #fff;}
            .gaiyou_table td{
                padding: 12px 0;
                border-bottom: 2px solid #201e73;}
            .kibo_table{
                width: 100%;
                max-width: none;}
            .kibo_table th{
                text-align: right;
                padding: 8px 0;}
            .kibo_table td{padding: 8px 30px 8px 0}
            article#enkaku_jigyou li{
                flex-direction: column;
                padding: 16px 0;}
            article#enkaku_jigyou li h2{width: 100%;}
            #enkaku main > article:not(:last-of-type){padding: 0 0 120px;}
            #conte_enkaku.gaiyou_table tr{
                display: flex;
                flex-wrap: wrap;}
            #conte_enkaku.gaiyou_table th{}
            #conte_enkaku.gaiyou_table td{
                display: block;
                width: 100%;}
    
            /* 年間行事 */
            .calendar_wrap{
                padding: 0;
                grid-template-columns: repeat(1, 1fr);}
            .slideConte{
                margin: 40px 0 0;
                grid-template-columns: repeat(1, 1fr);}
            #eventInfo article table{width: 100%;}
            #eventInfo article table tr td{
                display: block;
                width: 100%;
                padding-bottom: 8px;}
            #eventInfo article table tr td:first-of-type{width: 100%;}
            #eventInfo article table tr td:first-of-type > img{max-width: none;}
            #eventInfo article table tr td:last-of-type{
                padding-left: 0;
                padding-bottom: 32px;}
            #eventInfo article table tr:last-of-type td:last-of-type{padding-bottom: 0;}
            #eventInfo .midashi2{
                font-size: 1.8rem;
                margin-bottom: 1em;}
            .eventTitleSpace {margin-bottom: 30px;}

        /* 日記 */
            .diary_title{
                padding-top: 60px;}
            .diary_wrap{padding-bottom: 100px;}
            .diary_wrap > table tr th{padding: 8px 24px;}
            .diary_wrap > table tr th > p{width: 100%;}
            .diary_wrap > table tr th > p:first-of-type{margin-right: 0;}
            .diary_wrap > table tr:first-of-type > th::after{
                width: 75%;}
            .diary_wrap > table tr:nth-of-type(2) td{
                display: block;
                width: 100%;}
            .diary_wrap > table tr:nth-of-type(2) td:last-of-type{
                display: flex;
                justify-content: center;
                padding: 0;}
            .diary_wrap > table tr td:last-of-type img{
                padding-bottom: 24px;}
            .diary_wrap > table tr td:last-of-type img + img{
                margin-top: 0;
                margin-left: 10px;}
}

/* ----------------------------------------------------------------------------------------- */
/* ヘッダー用スタイル（アコーディオンメニューになる） */
/* ----------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* ヘッダーの高さ調整 */
                #headerDIV {
                    align-items: flex-start;
                    padding: 10px 60px 10px 20px;
                    height: 60px;
                    position: relative;}

                /* ロゴの調整 */
                .headerLOGO a img {
                    width: calc( 100vw - 100px );
                    min-width: 230px;
                    margin: 0;}


                /* ハンバーガーメニュー表示 */
                .hamburger-menu {
                    display: block;}

                /* メニューのレイアウトを縦並びに変更 */
                .headerLINK {
                    flex-direction: column;
                    position: absolute;
                    top: 60px;
                    left: 0;
                    background: rgb(40, 38, 137, .95);
                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.5s ease-in-out;}

                /* メニューリンク */
                .headerLINK{display: flex;}
                .headerLINK a {
                    width: 100%;
                    padding: 15px;
                    display: block;
                    text-align: center;
                    font-size: 1.6rem;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
                .headerLINK a + a{margin-left: 0;}
                .headerLINK a.new{margin-right: 0;}
                .headerLINK a.new::before{content: none;}
                /* お問い合わせボタンを中央寄せ */
                a.headerMAIL {
                    display: block;
                    margin: 24px auto !important;
                    padding: 4px 8px;  
                    width: 70%;}

                /* メニューを開いたときのアニメーション */
                .menu-toggle:checked ~ .headerLINK {
                    max-height: 500px;}

                /* ハンバーガーメニュー "×" 変形 */
                .menu-toggle:checked ~ .hamburger-menu span:nth-child(1) {
                    transform: rotate(45deg) translate(6px, 6px);}

                .menu-toggle:checked ~ .hamburger-menu span:nth-child(2) {
                    opacity: 0;}

                .menu-toggle:checked ~ .hamburger-menu span:nth-child(3) {
                    transform: rotate(-45deg) translate(6px, -6px);}
    
    }