@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#333;
font:14px verdana,"メイリオ","Meiryo","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#f7f7f7;
-webkit-text-size-adjust: none;
}

html{
}

/* リンク設定
------------------------------------------------------------*/
a{color:#000000;text-decoration:none;}  /*  #808080  */
a:hover{color:#ff3300; font-weight: bold; background-color: #b3dc2e;}    /*  #b3dc2e  */
a:active, a:focus{outline:3;} /* 0 */
a img:hover{
	transform:scale(2.0);
	transition:0.3s;
}

/* 全体
------------------------------------------------------------*/

* html #wrapper{background:#c0c0c0;}  /* #fff */

.inner{
margin:0 auto;
width:100%;
}

* html #header{height:1%;}

/*************
/* ヘッダー
*************/
h1{
font-size:12px;
line-height:1.6;
font-weight:normal;
}

#header{
overflow:hidden;
padding:5px 0 0;
color:#fff;
background:#316e03;    /* #7d9313;    #808080;  */
}

* html #header{height:1%;}


/**************************
/* トップナビゲーション
**************************/
ul#topnav{
clear:both;
overflow:hidden;
margin:0 auto;
background:#5e8700;
border-radius:5px 5px 0 0;
}

* html ul#topnav{height:1%;}


/**************************
/* メイン画像
**************************/
#mainBanner{
clear:both;
line-height:0;
background:#316e03;    /* #7d9313;    #808080;  */
}

#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
height:auto;
}

.slogan{
position:absolute;	/* 絶対配置	*/
max-width:100%;		/* 親要素のwidth幅の100%	*/
height:auto;		/* 幅の変化に伴って高さも変化する	*/
bottom:1px;			/* 下端からの距離を指定するプロパティ*/
left:0px;
padding:5px 5px;	/* 値１ 値２;で値が２つの場合は、上下の値（値１）、左右の値（値２）という意味	*/
line-height:1.4;	/* 「行の高さ」を指定する 行の高さが「文字サイズの1.4倍」	*/
z-index:50;		/*  100  position: staticが指定されている要素では、z-indexは無効です。	*/
}					/* z-index:100が上に重なってきます。	*/

.slogan h2{
padding-bottom:5px;
font-size:20px;
}

.slogan h3{
font-size:0.9em;
font-weight:bold;	/* bold;太文字 normal*/
color: #ffffff;
background-color:#5e8700;	/* 背景色	*/
/*opacity: .5;	背景半透明	*/
}

/**************************
/* グリッド
**************************/
.grid{
float:left;  /* width:auto; */
padding-bottom:10px;
border:1px solid #dbdbdb;
border-radius:5px 5px 0 0;
background:#ffffff;
}

.grid h3{
padding:5px;
font-size:13px;
color:#fff;
text-align:center;
border-radius:5px 5px 0 0;
background:#5e8700;
}

.grid p{
padding:10px 10px 0;
}

.grid ul{margin:5px 10px 3px;}

.grid li{
padding:5px 0 4px;
border-bottom:1px solid #ccc;
}

.grid li:first-child{border-top:0;}
.grid li:last-child{border-bottom:0;}

/*************
メイン コンテンツ
*************/

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

#footerlist ul{margin:0 0 10px 5px;}

#footerlist li{
padding:0 7px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border:0;
border-right:1px solid #fff;
}

/********  旧ＨＰより追加  ******/

     .topcontainer {
        position: relative;
        width: auto; /* 任意の幅 width: 940px; */
        height: auto; /* 任意の高さ */
        margin:0 0 30px;
        /* border: 2px solid black; */
}
     .image1 {
        position: absolute;
        width: 150px; /* 画像のサイズ調整 */
        height: 30px; /*  25px;  */
        padding: 0;
}
     .image2 {
        position: absolute;
        width: 80px; /* 画像のサイズ調整 */
        height: 25px;
        padding: 0;
}
     .left {
        top: 0;
        left: 0;
}
     .right {
        top: 0;
        right: 0;
        }
        
     .textslide {
        width:auto; /* 940px */
        margin-bottom: 3px;
        border-bottom: 2px solid #ccc;
}
     .textslide > p {
        padding: 0 10px;
        line-height 1.5;
        font-size: 1.2em;
        font-weight: bold;
        color:#ffffff;
        text-align:left;
}
     .textslide > h2 {
        font-size: 1.5em;
        font-weight: bold;
        padding: 0 20px;
}
/* ----- ナビゲーションメニュー(ヘッダーの下のメインメニュー) ----- */
.nav {
	height: 40px; /*40px;領域の高さ指定*/
	width: auto; /*幅指定(autoは初期値に戻す) width: auto */
	padding-left: 0px; /*ボックス内側左の余白*/
	border-top: solid 1px #ffffff;  /*  2px #B7B7B7; /*上境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	border-bottom: solid 1px #ffffff;  /*  2px #B7B7B7; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
    background:#5e8700;  /* #454545 */
}

.nav li {
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	/*font-weight: bold; /*フォントの太さ指定(boldは太字)*/
}

.nav li a {
	width: 158px;/* 150px; 幅指定*/
	border-right: solid 1px #ffffff;  /*  1px #B7B7B7; /*右境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	color: #fffafa; /*文字色指定*/
	font-size: 12px; /*文字大きさ指定*/
	line-height: 40px; /40px;*行の高さ指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
	display: block; /*要素の表示形式指定(blockはブロックレベルで表示)*/
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
    background:#5e8700;  /* #f7f7f7 */
}

.nav, .nav li a {
    /*  background:#336600; */
	background-image: url(../images/menu.jpg); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
}

.nav li.first a {
	border-left: solid 1px #ffffff; /* 1px #B7B7B7; 左境界線の一括指定(solidは1本線,線の太さ,線の色)*/
}

.nav li a:hover {
	background-position: 0 -50px; /*背景画像の表示開始位置(値2つは左からと上からの距離)*/
}

.nav li ul {
	display: none; /*要素の表示形式指定(noneは表示しない)*/
}

.nav li:hover ul {
	display: block; /*要素の表示形式指定(blockはブロックレベルで表示)*/
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	z-index: 100; /*ボックスの重なり順序の指定(値が大きいほど上(前面)に表示)*/
}

.nav li ul li {
	float: none; /*要素を左か右に寄せて配置(noneは配置指定しない)*/
	font-size: 8px; /*文字大きさ指定*/
	font-weight: normal; /*文字の太さ指定(normalは標準)*/
	border-bottom: solid 1px #ffffff;  /*  2px #B7B7B7; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
}

/* ----- 新着情報 ----- */
.newlist {
	margin-bottom: 10px; /*ボックス外側下の余白  30px*/
	background-color: #ffffff;
	height: 750px; /*  新着情報領域の高さ指定   ※予定の高さと調整要  */
	overflow: auto; /*領域に入りきらない内容の処理(autoはブラウザに依存(通常はみ出す場合はスクロール表示))*/
}

.newlist dl {
	/*  width: auto; 幅指定(autoは初期値に戻す) */
	padding-left: 5px; /*ボックス内側左の余白*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.newlist dt {
	/* font-weight: normal;フォントの太さ指定(normalは標準)*/
	/* font-weight: bold; フォントの太さ指定(boldは太字)*/
	color: #222222; 文字色指定
	/* color: #F00000; 文字色指定 */
	margin: 0px 10px 0px 5px; /*元：指定なし　ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

.newlist dd {
	line-height: 1.5;
	color: black;
	/*font-weight: normal; /*フォントの太さ指定(normalは標準)*/
	border-bottom: 2px solid #cccccc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin: 0px 10px 2px 5px; /*元：5px 8px 8px 5px;　ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

.newlist dd img {
	display: inline;
	vertical-align: middle;
}

.tbllist {
	/*margin-bottom: 10px;   ボックス外側下の余白  30px*/
	background-color: #ffffff;
	height: 500px; /*領域の高さ指定 ※*/
	overflow: auto; /*領域に入りきらない内容の処理(autoはブラウザに依存(通常はみ出す場合はスクロール表示))*/
}
.moji-black{
    color: black;
}

.titel p{
    text-align: center;
    font-weight: bold;  /*フォントの太さ指定(boldは太字)*/
    color: black;
    }
    
/* ----- 新着情報終わり ----- */
/**************** レスポンシブテーブル対応 **************/

        table {
            width: 100%;
            border-collapse: collapse;  /*  セルが境界を共有する  */
            table-layout: fixed;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 1px;  /*10px */
            text-align: left;
            font-size: small;
            vertical-align: middle;
        }
        td:first-child {
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        td:last-child {
            width: 30%;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: auto;
        }
/*********  ＥＮＤ  *********/
/**--------POST---------**/
.post {
	clear: both; /*floatの回り込みを解除*/
	/* width: auto; 幅指定(autoは初期値に戻す)*/
	position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
}

.post h2 {
	padding-left: 10px; /*ボックス内側左の余白*/
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	/*margin-bottom: 10px; ボックス外側下の余白*/
	font-size: 14px; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #ffffff; /*文字色指定*/
	line-height: 30px; /*行の高さ指定*/
	background:#454545;  /* */
}

#rightside {
    width: 100%; /* 親要素の幅いっぱいにする */
    /* max-height: 350px;  高さ制限を設定 */
     overflow: auto; /* スクロールを有効にする */
	height: 400px; /*領域の高さ指定*/
    position: relative;
	/*  width: 190px; 幅指定 */
	/*  float: left; 要素を左か右に寄せて配置(leftは左に寄せる) */
	/*  margin: 1px 0; ボックス外側の余白(値2つは左から上下,左右の値) */
	/*  padding-right: 20px; ボックス内側左の余白 */
	
}

#rightside h2 {
	padding-left: 10px; /*ボックス内側左の余白*/
	margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	color: #ffffff; /*文字色指定*/
	line-height: 25px; /*行の高さ指定*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
	/*width: 90%; /*幅指定*/
	/* background-image: url(images/sidemenutop2.png);  /* 背景画像指定　url(画像ファイルを指定)*/
    /*  background: #707070; /*  #777777  */
	background-image: url(../images/menu1.gif); /*背景画像指定　url(画像ファイルを指定)*/
}

.sidemenu {
	width: 100%; /*幅指定*/
	/* overflow: hidden; 領域に入りきらない内容の処理(hiddenははみ出た部分を表示しない)*/
	margin-bottom: 1px; /*ボックス外側下の余白*/
}

.sidemenu li {
	font-size: 1em; フォントサイズ指定(emはフォントの高さを１とした相対指定)
	margin-bottom: 0px; /*ボックス外側下の余白*/
	border-bottom: solid 1px #dcdcdc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	list-style-type: none; /*リストマーカーの種類指定(noneはなし)*/
}

.sidemenu li a {
	padding-left: 2px; /*ボックス内側左の余白*/
	color: #333333; /*文字色指定*/
	line-height: 20px; /*  30px 行の高さ指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
	display: block; /*要素の表示形式指定(blockはブロックレベルで表示)*/
	background-image: url(../images/sidemenu1.gif); /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: no-repeat; /*背景画像の並べかた(no-repeatは１つだけ表示)*/
    /* background: pink; */
    /* border: solid green; /* 枠線に色指定 */
}


.sidemenu li a img{
    display: inline;  /*  文字とアイコン画像同一行指定  */
}

.sidemenu li a:hover {
	background-position: 0 -40px; /*背景画像の表示開始位置(値2つは左からと上からの距離)*/
}

/* ----- Ｖスライダー ----- */
        .slider {
            width: auto; /* コンテナの幅 100%; */
            height: 400px; /* Ｖスライダーの高さ 400px; ※blockの高さより低くする*/
            margin: 0px;
            padding: 0px;
            /* border: solid red; */
            overflow: hidden;
            position: relative;
        }
        
        .slide-wrapper {
            margin: 0px;
            padding: 0px;
            text-align: center;
            display: flex;
            justify-content: center; /* 画像を中央寄せ center;*/
            /* background-color: #4b4b4b  /*  aqua;  */
            border: solid green; /* 枠線を緑色に指定 */
        }

        .slide-wrapper img{
            width:100%;  /* 100% */
         }
         

    .swiper {
      height: 500px; /*  800px  /*  260px × 3枚 */
      width: auto;  /*  230px;  */
      background: #f0f0f0;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f0f0f0;
    }

    .swiper-slide img {
      width: 340px;  /*  210px;  */
      height: auto;
      object-fit: cover;
      cursor: pointer;
      border-style: solid; /* 直線 */
      border-color: dimgray;  /*lightgray;   /* dimgray; 薄い灰色 */
      border-width: 1px 0px; /** 上下 左右 **/
    }

    /* モーダルスタイル */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
    }

    .overlay img {
      max-width: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px #000;
    }

    .overlay .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
    }

/*****  PC用  *****/
@media only screen and (min-width:960px){
	.inner,ul#topnav{
	width:960px;
	padding:0;
	}
	
	#main{
	float:right;
	width:680px;
	padding-right:10px;
	}
	
	/* グリッド */

        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0px;
            width: 960px;
            margin: auto;
        }
        .block {
            background-color: white;  /* lightblue; */
	        text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
            padding: 3px;  /* 5 */
        }

       /*  PCレイアウト  */
        .newplan { grid-column: 1 / 3; grid-row: 1 / 2;}
        .block2 { grid-column: 3 / 5; grid-row: 1 / 2; }
        .block3 { grid-column: 1 / 2; grid-row: 2 / 3; }
        .block4 { grid-column: 2 / 4; grid-row: 2 / 3; }
        .block5 { grid-column: 4 / 5; grid-row: 2 / 3; }
        .block6 { grid-column: 1 / 2; grid-row: 3 / 4; }
        .block7 { grid-column: 2 / 4; grid-row: 3 / 4; }
        .block8 { grid-column: 4 / 5; grid-row: 3 / 4; }
        
        .grid-container-foot {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0px;
            width: 960px;
            margin: auto;
        }
        .block-foot {
            background-color: #5e8700; /*  #808080;  */
            text-align: center;
            padding: 0px;
        }
        
        .block-foot1 { grid-column: 1 / 2; grid-row: 1 / 3; height: auto; }
        .block-foot2 { grid-column: 2 / 4; grid-row: 1 / 2; height: auto; }
        .block-foot3 { grid-column: 2/ 4; grid-row: 2 / 3; height: auto; }
	
}

/*****  タブレット横  *****/
@media only screen and (max-width:960px){
	h1{padding:0 1%;width:98%}

            .grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                width: 100%;
               }
            
        .block {
            /*background-color: lightblue;*/
	        text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
            padding: 10px;
               }
        
            .newplan { grid-column: 1 / 3; grid-row: 1; width:1fr;}
            .block2 { grid-column: 1 / 3; grid-row: 2; width: 1fr;}
            .block3 { grid-column: 1 / 2; grid-row: 3; width: auto;}
            .block5 { grid-column: 2 / 3; grid-row: 3; width: auto;}
            .block4 { grid-column: 1 / 3; grid-row: 4; width: auto;}
            .block7 { grid-column: 1 / 3; grid-row: 5; width: auto;}
            .block6 { grid-column: 1 / 2; grid-row: 6; width: auto;}   /*  260px; justify-self: center;}  */
            .block8 { grid-column: 2 / 3; grid-row: 6; width: auto;}
                           
            .grid-container-foot {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0px;
                width: 100%;
               }
            
        .block-foot {
            background-color: #5e8700; /*  #808080  */
            text-align: center;
            padding: 0px;
             }
            .block-foot1 { grid-column: 1 / 2; grid-row: 1; width: 100%; }
            .block-foot2 { grid-column: 2 / 3; grid-row: 1; width: 100%; }
            .block-foot3 { grid-column: 1 / 3; grid-row: 2; width: 100%; }
        }

/***** スマートフォン 縦 *****/
@media only screen and (max-width:460px){
            .grid-container {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
                width: 100%;
            }
            .block { width: 100%; height: auto; }
            .newplan { grid-column: 1 / 2; grid-row: 1; width: 100%; justify-self: center;}
            .block2 { grid-column: 1 / 2; grid-row: 2; width: 100%; justify-self: center;}
            .block3 { grid-column: 1 / 2; grid-row: 3; width: 80%; justify-self: center;}
            .block5 { grid-column: 1 / 2; grid-row: 4; width: 80%; justify-self: center;}
            .block4 { grid-column: 1 / 2; grid-row: 5; width: 100%; justify-self: center;}
            .block6 { grid-column: 1 / 2; grid-row: 6; width: 100%; justify-self: center;}
            .block7 { grid-column: 1 / 2; grid-row: 7; width: 100%; justify-self: center;}
            .block8 { grid-column: 1 / 2; grid-row: 8; width: 80%; justify-self: center;}
       }