/*=============================*/
/* ブラウザデフォルト値        */
* {
    margin:0;
    padding:0;
}
/* ブラウザデフォルト値        */
/*=============================*/


/*=============================*/
/* clearfix        */
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
/* clearfix        */
/*=============================*/


/*=============================*/
/* body                        */
body{
    /* width:100%; */
    padding-top:0px;
    padding-right:0px;
    padding-left:0px;
    margin-top:0px;
    margin-right:auto;
    margin-left:auto;
    word-wrap:break-word;
    /* font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; */
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    /* font-family: Georgia, ヒラギノ明朝 ProN, HiraMinProN-W3, Yu Mincho, HG明朝E, serif; */

    /* border: solid 1px rgb(149, 0, 0); */
    /* background-color: rgb(243, 207, 207); */
}
/* @media (min-width:576px){
    body{
        max-width:540px
    }
}
@media (min-width:768px){
    body{
        max-width:720px
    }
}
@media (min-width:992px){
    body{
        max-width:960px
    }
}
@media (min-width:1200px){
    body{
        max-width:1140px
    }
} */
/* body                        */
/*=============================*/



/*=============================*/
/* main (主要部)               */
main {
    /* menu-topのheight */
    margin-top:80px;
    
    font-size:small;
    /* border: solid 1px rgb(0, 0, 255); */
    /* background-color: rgb(201, 201, 243); */
}
@media (min-width:576px){
    main{
        margin-top:0px;
        font-size:medium;
    }
}
/* main (主要部)               */
/*=============================*/



/*=============================*/
/* header (ヘッダー)           */
header {
    padding: 0px;
    margin:0px;
    border: solid 1px white;
    background-color: white;
}
@media screen and (max-width:575px) {
    header {
        display:none;
    }
}

header .h-main-left {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: unset;
}

header .h-main {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: unset;
}

header .h-main-right {
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: unset;
}


header .logo {
    margin: 0;
    padding: 0;
    color: #f6b209;
    font-weight: bold;
    font-size: xx-large;
    font-family: Georgia, ヒラギノ明朝 ProN, HiraMinProN-W3, Yu Mincho, HG明朝E, serif;
    word-break: keep-all;
}

header .header-left {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: xx-small;
    height: 20px;
}

header .header-center {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: xx-small;
    height: 20px;
}

header .header-right {
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: xx-small;
    height: 20px;
}
/* header (ヘッダー)           */
/*=============================*/



/*=============================*/
/* footer (フッター)           */
footer {
    padding: 0px;
    margin:0px;
    color: whitesmoke;
    border: solid 1px lightgray;
    background-color: lightgrey;
    text-align: center;
    font-size: small;
}
/* footer (フッター)           */
/*=============================*/


/*=============================*/
/* section (セクション)        */
/* 
section {
    border: solid 1px gray;
    background-color: rgb(203, 221, 205);
}
 */
/* section (セクション)        */
/*=============================*/


/*=============================*/
/* article (記事・投稿)        */
/*
article {
    border: solid 1px gray;
    background-color: rgb(203, 221, 205);
}
*/
/* article (記事・投稿)        */
/*=============================*/


/*=============================*/
/* aside (補足情報・サイドバー)*/
/*
aside {
    border: solid 1px gray;
    background-color: rgb(203, 221, 205);
}
*/
/* aside (補足情報・サイドバー)*/
/*=============================*/


/*=============================*/
/* nav (ナビゲーション)        */
/* 
nav {
    border: solid 1px gray;
    background-color: rgb(255, 180, 180);
}
 */
/* nav (ナビゲーション)        */
/*=============================*/


/*=============================*/
/* address (連絡先)            */
/* 
address {
    border: solid 1px gray;
    background-color: rgb(228, 180, 255);
}
 */
address .mail {
    font-style: italic;
}
/* address (連絡先)            */
/*=============================*/


/*=============================*/
/* a (アンカーリンク)          */
a:hover {
    color: midnightblue;
    text-decoration: none;
}

a:active {
    color: midnightblue;
    text-decoration: none;
}

a:visited {
    color: green;
    text-decoration: none;
}

a:link {
    color: midnightblue;
    text-decoration: none;
}
/* a (アンカーリンク)          */
/*=============================*/


/*=============================*/
/* img (イメージ)              */
img {
    /* マウスイベントの禁止 */
    pointer-events: none;
}
/* img (イメージ)              */
/*=============================*/


/*=============================*/
/* hr (区切り)                 */
hr {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 1px;
    border-top: 1px lightslategray solid;
}
/* hr (区切り)                 */
/*=============================*/


/*=============================*/
/* h1,h2,h3,h4,h5,h6 (見出し)  */
h1 {
    font-size:x-large;
}
h2 {
    font-size:large;
}
h3 {
    font-size:medium;
}
h4 {
    font-size:small;
}
h5 {
    font-size:x-small;
}
h6 {
    font-size:xx-small;
}
@media (min-width:576px){
    h1 {
        font-size:xx-large;
    }
    h2 {
        font-size:x-large;
    }
    h3 {
        font-size:large;
    }
    h4 {
        font-size:medium;
    }
    h5 {
        font-size:small;
    }
    h6 {
        font-size:x-small;
    }
    }
/* h1,h2,h3,h4,h5,h6 (見出し)  */
/*=============================*/





/*******************************/
/* container                   */
.container{
    width:100%;
    padding-top:0px;
    padding-right:0px;
    padding-left:0px;
    margin-top:0px;
    margin-right:auto;
    margin-left:auto;
    border: none;
    background-color: unset;
    /* border: solid 1px rgb(5, 149, 0); */
    /* background-color: rgb(253, 249, 121); */
}
@media (min-width:576px){.container{max-width:568px;}}
@media (min-width:768px){.container{max-width:760px;}}
@media (min-width:992px){.container{max-width:984px;}}
@media (min-width:1200px){.container{max-width:1192px;}}
/* container                   */
/*******************************/


/*******************************/
/* wrapper                     */
.wrapper {
    margin: 0px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    border: none;
}
/* wrapper                     */
/*******************************/


/*******************************/
/* flex box                    */
/* 行 */
.flex-row{
    display:-ms-flexbox;
    display:flex;
    align-items:stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
/*    justify-content: flex-start;*/
    justify-content: space-between;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.flex-row-center{
    display:-ms-flexbox;
    display:flex;
    align-items:stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.flex-row-reverse{
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
}
.flex-nowrap{
    -ms-flex-wrap:nowrap !important;
    flex-wrap:nowrap !important;
}

.flex-space{
    justify-content: space-between !important;
}
/* 列 */
.flex-column-left{
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack:start;
    align-content: flex-start;
}
.flex-column-cneter{
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack:center;
    align-content:center;
}
.flex-column-right{
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack:end;
    align-content:flex-end;
}

.flex-column-reverse{
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
}

.flexitem{
    flex-grow:1;
}

.flexitem-grow{
    flex-grow:1;
}
/* flex box                    */
/*******************************/


/*******************************/
/* 幅指定 (レスポンシブ)　*******/
.w5-m100 {
    width:100%;
}
@media (min-width:576px){.w5-m100{width:100%;}}
@media (min-width:768px){.w5-m100{width:5%;}}
@media (min-width:992px){.w5-m100{width:5%;}}
@media (min-width:1200px){.w5-m100{width:5%;}}
.w10-m100 {
    width:100%;
}
@media (min-width:576px){.w10-m100{width:100%;}}
@media (min-width:768px){.w10-m100{width:10%;}}
@media (min-width:992px){.w10-m100{width:10%;}}
@media (min-width:1200px){.w10-m100{width:10%;}}
.w20-m100 {
    width:100%;
}
@media (min-width:576px){.w20-m100{width:100%;}}
@media (min-width:768px){.w20-m100{width:20%;}}
@media (min-width:992px){.w20-m100{width:20%;}}
@media (min-width:1200px){.w20-m100{width:20%;}}
.w20-m50 {
    width:50%;
}
@media (min-width:576px){.w20-m50{width:50%;}}
@media (min-width:768px){.w20-m50{width:20%;}}
@media (min-width:992px){.w20-m50{width:20%;}}
@media (min-width:1200px){.w20-m50{width:20%;}}
.w25-m100 {
    width:100%;
}
@media (min-width:576px){.w25-m100{width:100%;}}
@media (min-width:768px){.w25-m100{width:25%;}}
@media (min-width:992px){.w25-m100{width:25%;}}
@media (min-width:1200px){.w25-m100{width:25%;}}
.w25-m50 {
    width:50%;
}
@media (min-width:576px){.w25-m50{width:50%;}}
@media (min-width:768px){.w25-m50{width:25%;}}
@media (min-width:992px){.w25-m50{width:25%;}}
@media (min-width:1200px){.w25-m50{width:25%;}}
.w30-m100 {
    width:100%;
}
@media (min-width:576px){.w30-m100{width:100%;}}
@media (min-width:768px){.w30-m100{width:30%;}}
@media (min-width:992px){.w30-m100{width:30%;}}
@media (min-width:1200px){.w30-m100{width:30%;}}
.w30-50-m100 {
    width:100%;
}
@media (min-width:576px){.w30-50-m100{width:100%;}}
@media (min-width:768px){.w30-50-m100{width:50%;}}
@media (min-width:992px){.w30-50-m100{width:30%;}}
@media (min-width:1200px){.w30-50m100{width:30%;}}
.w30-m50 {
    width:50%;
}
@media (min-width:576px){.w30-m50{width:50%;}}
@media (min-width:768px){.w30-m50{width:30%;}}
@media (min-width:992px){.w30-m50{width:30%;}}
@media (min-width:1200px){.w30-m50{width:30%;}}
.w40-m100 {
    width:100%;
}
@media (min-width:576px){.w40-m100{width:100%;}}
@media (min-width:768px){.w40-m100{width:40%;}}
@media (min-width:992px){.w40-m100{width:40%;}}
@media (min-width:1200px){.w40-m100{width:40%;}}
.w40-m50 {
    width:50%;
}
@media (min-width:576px){.w40-m50{width:50%;}}
@media (min-width:768px){.w40-m50{width:40%;}}
@media (min-width:992px){.w40-m50{width:40%;}}
@media (min-width:1200px){.w40-m50{width:40%;}}
.w50-m100 {
    width:100%;
}
@media (min-width:576px){.w50-m100{width:100%;}}
@media (min-width:768px){.w50-m100{width:50%;}}
@media (min-width:992px){.w50-m100{width:50%;}}
@media (min-width:1200px){.w50-m100{width:50%;}}
.w60-m100 {
    width:100%;
}
@media (min-width:576px){.w60-m100{width:100%;}}
@media (min-width:768px){.w60-m100{width:60%;}}
@media (min-width:992px){.w60-m100{width:60%;}}
@media (min-width:1200px){.w60-m100{width:60%;}}
.w70-m100 {
    width:100%;
}
@media (min-width:576px){.w70-m100{width:100%;}}
@media (min-width:768px){.w70-m100{width:70%;}}
@media (min-width:992px){.w70-m100{width:70%;}}
@media (min-width:1200px){.w70-m100{width:70%;}}
.w80-m100 {
    width:100%;
}
@media (min-width:576px){.w80-m100{width:100%;}}
@media (min-width:768px){.w80-m100{width:80%;}}
@media (min-width:992px){.w80-m100{width:80%;}}
@media (min-width:1200px){.w80-m100{width:80%;}}
/* 幅指定 (レスポンシブ)　*******/
/*******************************/


/*******************************/
/* 幅指定 **********************/
.w5 {
    width:5%;
}
.w10 {
    width:10%;
}
.w20 {
    width:20%;
}
.w25 {
    width:25%;
}
.w30 {
    width:30%;
}
.w40 {
    width:40%;
}
.w50 {
    width:50%;
}
.w60 {
    width:60%;
}
.w70 {
    width:70%;
}
.w80 {
    width:80%;
}
.w90 {
    width:90%;
}
.w100 {
    width:100%;
}
.h100 {
    height:100%;
}
/* 幅指定 **********************/
/*******************************/

/*******************************/
/* テキスト配置 ****************/
.tx-left {
    text-align: left;
   }
   .tx-center {
    text-align: center;
   }
   .tx-right {
    text-align: right;
   }
/* テキスト配置 ****************/
/*******************************/
   
/*******************************/
/*　色 ****************/
.fb-color1 {
    color: whitesmoke;
    background-color: lavender;
}
/* 色 ****************/
/*******************************/
  










/*******************************/
/* 表示位置固定 ****************/
.sticky-first {
    z-index:100;
    /*固定する*/
    position: sticky;
    /*Safari用ベンダープレフィックス*/
    position: -webkit-sticky;
    /*ブラウザの上からの距離はゼロ*/
    top: 0;
}
.sticky-second {
    z-index:100;
    position: sticky;
    position: -webkit-sticky;
    /*ブラウザの上からの距離は px*/
    top: 0;
}
.sticky-third {
    z-index:100;
    position: sticky;
    position: -webkit-sticky;
    /*ブラウザの上からの距離は px*/
    top: 0;
}

.sticky-top {
    z-index:100;
    /*固定する*/
    position: sticky;
    /*Safari用ベンダープレフィックス*/
    position: -webkit-sticky;
    /*ブラウザの上からの距離*/
    top: 0;
}
.sticky-bottom {
    z-Index : 100;
    /*固定する*/
    position: sticky;
    /*Safari用ベンダープレフィックス*/
    position: -webkit-sticky;
    /*ブラウザの下からの距離はゼロ*/
    bottom: 0;
}
/* 表示位置固定 ****************/
/*******************************/
   



/*******************************/
/* TOP image *******************/

.topimage {
    padding: 0px;
    margin:0px;
    /* border: solid 1px dimgray;
    background-color: gray; */
}

/* イメージアニメーション */

@keyframes frames-heder {
    from {
        transform: scale(1.5, 1.5);
    }
    to {
        transform: scale(1.0, 1.0);
    }
}

@keyframes fadeIn {
    /**/
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.topimage-ani {
    position: relative;
    overflow: hidden;
}

.topimage-ani img {
    width: 100%;
    display: block;
    /*アニメーション名*/
    animation-name: frames-heder;
    /* アニメーション一回分の時間の長さ */
    animation-duration: 8s;
    /*アニメーションのタイミング・進行割合*/
    animation-timing-function: ease;
    /*アニメーションがいつ始まるか*/
    animation-delay: 0.5;
    /*アニメーションの繰り返し回数*/
    animation-iteration-count: initial;
    /*アニメーションを交互に反転再生させるか*/
    animation-direction: normal;
}

.topimage-ani .contents {
    position: absolute;           
    top: 50%;
    left:50%;                         
    transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: xx-large;
    font-family: 'Hiragino Maru Gothic ProN', 'Osaka', 'Meiryo', 'メイリオ', 'Roboto', sans-serif;
    word-break: keep-all;
    /*    background-color: rgba(0, 0, 0, 0.05);*/
    /*アニメーション名*/
    animation-name: fadeIn;
    /* アニメーション一回分の時間の長さ */
    animation-duration: 5s;
    /*アニメーションのタイミング・進行割合*/
    animation-timing-function: ease;
    /*アニメーションがいつ始まるか*/
    animation-delay: 0.5;
    /*アニメーションの繰り返し回数*/
    animation-iteration-count: initial;
    /*アニメーションを交互に反転再生させるか*/
    animation-direction: normal;
}

.topimage-static {
    position: relative;
    overflow: hidden;
}
.topimage-static img {
    width: 100%;
    display: block;
}
.topimage-static .contents {
    position: absolute;           
    top: 50%;
    left:50%;                         
    transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: xx-large;
    font-family: 'Hiragino Maru Gothic ProN', 'Osaka', 'Meiryo', 'メイリオ', 'Roboto', sans-serif;
    word-break: keep-all;
    /*    background-color: rgba(0, 0, 0, 0.05);*/
}


/* TOP image *******************/
/*******************************/


/*******************************/
/* MENU  (レスポンシブ)*********/
.menu {
    display:none;
}
@media screen and (min-width:576px) {
    .menu {
        /* フレックスボックスにする */
        display: flex;   
        /* 横の位置指定 */               
        justify-content: space-around;  
        /* 背景の色指定 */
        background-color: white;   
        /* 表示の階層指定 */   
        z-index: 100;                   

    }
}

.menu-item {
    position:relative;
    margin: 10px 10px 10px 10px; 
    padding: 0px 0px 0px 0px;
    background: #f6b209;
    border: dashed 2px #3d2c01;
    box-shadow: 0px 0px 0px 10px#f6b209;
}
.menu-item:hover {
    background: #f6b209;
    border: dashed 2px #3d2c01;
    box-shadow: 0px 0px 0px 10px #f6b209;
}
.menu-item:hover::before {
    position: absolute;
    content: "";
    left:-19px;
    top:-19px;
    display:inline-block;
    height:38px;
    width:38px;
    background-image: url(../image/logo.png);
    background-size: contain;
    vertical-align: middle;
}
.menu-item:hover::after {
    position: absolute;
    content:'';
    right:-12px;
    top:-12px;
    border-width: 0 20px 20px 0;
    border-style:solid;
    border-color:  #f6b209 #fdd100  #f6b209;
    box-shadow: -2px 2px 2px  rgba(0,0,0,0.15); 
}
.menu-item div {
    width:100%; 
    height:100%;
    color:  #ffffff;
    text-align:center;
    font-size:11px;
    text-shadow: 1px 1px 1px black; 
}
@media (min-width:576px){.menu-item div {font-size:12px;}}
@media (min-width:768px){.menu-item div {font-size:14px;}}
@media (min-width:992px){.menu-item div {font-size:16px;}}
@media (min-width:1200px){.menu-item div {font-size:18px;}}

.menu-item div:hover {
    color: whitesmoke;
    text-shadow: 0px 0px 5px whitesmoke; 
}

.menu-item-select {
    margin: 10px 10px 10px 10px; 
    padding: 0px 0px 0px 0px;
    background: #fdd100;
    border: dashed 2px #3d2c01;
    box-shadow: 0px 0px 0px 10px #fdd100;
}
.menu-item-select div {
    width:100%; 
    height:100%;
    color:  #ffffff;
    text-align:center;
    font-size:11px;
    text-shadow: 1px 1px 0px black; 
}
@media (min-width:576px){.menu-item-select div {font-size:12px;}}
@media (min-width:768px){.menu-item-select div {font-size:14px;}}
@media (min-width:992px){.menu-item-select div {font-size:16px;}}
@media (min-width:1200px){.menu-item-select div {font-size:18px;}}

.menu-item-select div:hover {
    color: whitesmoke; 
    text-shadow: 0px 0px 5px whitesmoke; 
}

/* hamburger menu */

.hamburger-menu {
    display:block;
}
.menu-top {
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    height: 80px;
    width: 100%;
    z-index: 101;
    background-color: #358400;
}
.menu-logo {
    position: fixed;
    top: 20px;
    left: 10px;
    display: flex;
    height: 30px;
    width: 30px;
    z-index: 102;
}
.menu-logo-text {
    position: fixed;
    top: 20px;
    left: 35px;
    display: flex;
    margin: 0;
    padding: 0;
    color: #f6b209;
    font-weight: bold;
    font-size: x-large;
    font-family: Georgia, ヒラギノ明朝 ProN, HiraMinProN-W3, Yu Mincho, HG明朝E, serif;
    word-break: keep-all;
    z-index: 102;
}
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 101;
    background-color: #358400;
}
.menu-btn span,
.menu-btn span::before, 
.menu-btn span::after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span::before { 
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    /*メニューオープン時は真ん中の線を透明にする*/
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-contents {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    top: 0;
    /* 画面の外へ　*/
    left: 100%;   
    z-index: 100;
    background-color: #358400;
    /*アニメーション設定*/
    transition: all 0.5s;
}
.menu-contents ul {
    margin: 80px 0px;
    padding: 0px 10px 0;
    background-color: #358400;
    /* margin-bottom: 50px; */
}
.menu-contents ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-contents ul li a {
    display: block;
    width: 100%;
    font-size: medium;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-contents ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
#menu-btn-check:checked ~ .menu-contents {
    /*メニューを画面内へ*/
    left: 0;
}
@media screen and (min-width:576px) {
    .hamburger-menu {
        display:none;
    }
}

/* MENU  (レスポンシブ) ********/
/*******************************/



/*******************************/
/* MENU */
.menu01 {
    width: 100%;
    height: 100%;
    color: black;
    /*    border-style: outset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu01.jpg");
    background-size: 100%;*/
}
.menu01:hover {
    width: 100%;
    height: 100%;
    color: mediumblue;
    /*border-style: inset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu01_on.jpg");
    background-size: 100%;*/
}

.menu01 a {
    color: black;
}

.menu01:hover a {
    color: mediumblue;
}

.menu02 {
    width: 100%;
    height: 100%;
    color: black;
    /*    border-style: outset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu01.jpg");
    background-size: 100%;*/
}

.menu02:hover {
    width: 100%;
    height: 100%;
    color: mediumblue;
    /*   border-style: inset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu02_on.jpg");
    background-size: 100%;*/
}

.menu02 a {
    color: black;
}

.menu02:hover a {
    color: mediumblue;
}

.menu03 {
    width: 100%;
    height: 100%;
    color: black;
    /*   border-style: outset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu03.jpg");
    background-size: 100%;*/
}

.menu03:hover {
    width: 100%;
    height: 100%;
    color: mediumblue;
    /*    border-style: inset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu03_on.jpg");
    background-size: 100%;*/
}

.menu03 a {
    color: black;
}

.menu03:hover a {
    color: mediumblue;
}

.menu04 {
    width: 100%;
    height: 100%;
    color: black;
    /*    border-style: outset;
    border-width: 1px;
        background-color: white;
     background-image: url("../images/img_menu04.jpg");
    background-size: 100%;*/
}

.menu04:hover {
    width: 100%;
    height: 100%;
    color: mediumblue;
    /*    border-style: inset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu04_on.jpg");
    background-size: 100%;*/
}

.menu04 a {
    color: black;
}

.menu04:hover a {
    color: mediumblue;
}

.menu05 {
    width: 100%;
    height: 100%;
    color: black;
    /*   border-style: outset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu05.jpg");
    background-size: 100%;*/
}

.menu05:hover {
    width: 100%;
    height: 100%;
    color: mediumblue;
    /*   border-style: inset;
    border-width: 1px;
    background-color: white;
    background-image: url("../images/img_menu05_on.jpg");
    background-size: 100%;*/
}

.menu05 a {
    color: black;
}

.menu05:hover a {
    color: mediumblue;
}
/* MENU */
/*******************************/


/*******************************/
/* お知らせ  *******************/

.notice {
    font-weight: bold;
    font-size: xx-large;
    font-family: Georgia, ヒラギノ明朝 ProN, HiraMinProN-W3, Yu Mincho, HG明朝E, serif;
    color:#f6b209;
    text-shadow: #565656 ;
    /* border: solid 1px gray; */
    /* background-color: gray; */
}

/* お知らせ  *******************/
/*******************************/

/*******************************/
/* 囲み枠装飾 ******************/
.box-design1 {
    margin: 10px 10px 10px 10px; 
    padding: 0px 0px 0px 0px;
    color: #565656;
    background-color: #c5f0fd;
    box-shadow: 0px 0px 0px 10px #c5f0fd;
    border:dashed 2px #09d3f6;
    border-radius: 2px;
    /* 幅調整 */
    /* width:-webkit-calc(100% - 24px); */
    /* width:calc(100% - 24px);    */
    /* 高さ調整 */           
    /* height:-webkit-calc(100% - 24px); */
    /* height:calc(100% - 24px);              */
}
/* .box-design1 div {
    margin: 10px; 
    padding: 0px;
} */

/*  */

.box-design0 {
    margin: 10px 10px 10px 10px; 
    padding: 0px 0px 0px 0px;
    color: #565656;
    background: #fdd100;
    box-shadow: 0px 0px 0px 10px #facf06;
    border: dashed 2px #f6b209;
    border-radius: 2px;
}
.box-design0 p {
    margin: 0; 
    padding: 0;
}
/* 囲み枠装飾 ******************/
/*******************************/


/*******************************/
/* 見出し装飾 ******************/
/*  */
.heading-design1 {
        margin: 3px 2px 3px 2px; 
        padding-left: 20px; 
        color: #565656;
        background-color: #f4f4f4; 
        border-left: solid 10px #f6b209;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        box-shadow: 0px 2px 3px rgba(0,0,0,0.33);
}

/*  */
.heading-design2 {
    margin: 0px 0px 0px 0px; 
    padding-left: 20px; 
    border-left: solid 10px #f6b209;
}
   


/*  */
.heading-design3 {
    position: relative;
    margin: 0px 0px 0px 0px; 
    border-left: solid 50px #ededed;
    padding-left: 5px; 
    border-radius: 5px;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.33);
} 
.heading-design3::before {         
    position: absolute;
    top: 40%;
    left: -34px;
    /* -webkit-transform: rotate(45deg); */
    /* transform: rotate(45deg); */
    height: 40%;
    width: 12px;
    border: solid 2px #f6b209;
    /* background: #f6b209; */
    content: "";
}
.heading-design3::after {         
    position: absolute;
    top: 10%;
    left:-40px;
    /* -webkit-transform: rotate(15deg); */
    /* transform: rotate(15deg); */
    height: 50%;
    width: 14px;
    border: solid 2px #f68f09;
    /* background: #f68f09; */
    content: "";
}
.heading-design3:hover::before {          
    top: 10%;
    left:-40px;
    height: 50%;
    width: 14px;
    /* border: solid 2px #f68f09; */
    /* background: #f68f09; */

    /* background-image: url(../image/logo.png); */
    /* background-size: contain; */
    /* vertical-align: middle; */
} 
.heading-design3:hover::after {          
    top: 40%;
    left: -34px;
    height: 40%;
    width: 12px;
    /* border: solid 2px #f6b209; */
    /* background: #f6b209; */
} 
@media screen and (min-width:576px) {
.heading-design3 {
    position: relative;
    margin: 0px 0px 0px 0px; 
    border-left: solid 50px #ededed;
    padding-left: 5px; 
    border-radius: 5px;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.33);
} 
.heading-design3::before {         
    position: absolute;
    top: 40%;
    left: -34px;
    /* -webkit-transform: rotate(45deg); */
    /* transform: rotate(45deg); */
    height: 40%;
    width: 14px;
    border: solid 3px #f6b209;
    /* background: #f6b209; */
    content: "";
}
.heading-design3::after {         
    position: absolute;
    top: 15%;
    left:-40px;
    /* -webkit-transform: rotate(15deg); */
    /* transform: rotate(15deg); */
    height: 50%;
    width: 16px;
    border: solid 3px #f68f09;
    /* background: #f68f09; */
    content: "";
}
.heading-design3:hover::before {          
    top: 15%;
    left:-40px;
    height: 50%;
    width: 16px;
    /* border: solid 3px #f68f09; */
    /* background: #f68f09; */

    /* background-image: url(../image/logo.png); */
    /* background-size: contain; */
    /* vertical-align: middle; */
} 
.heading-design3:hover::after {          
    top: 40%;
    left: -34px;
    height: 40%;
    width: 14px;
    /* border: solid 3px #f6b209; */
    /* background: #f6b209; */
} 
}

/* 項目タイトル装飾 ************/
/*******************************/


/*******************************/
/* 項目装飾 ********************/
.circle1 {
    position: absolute;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f6b209;
    z-index: 90;
}
.circle1 span {
    position: absolute;
    /* display: inline-block; */
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :80px;
    color: #ffffff;
    font-size:medium;
    font-weight: bold;
    text-align:center;
}
/* 項目装飾 ********************/
/*******************************/

/*******************************/
/* 装飾 ************************/
.triangle-up1 {
    width :0px;
    height:0px;
    border-style:solid;
    border-width: 0px 25px 25px 25px;
    border-color: transparent transparent #f6b209 transparent;
    z-index: 90;
}
.triangle-down1 {
    width :0px;
    height:0px;
    border-style:solid;
    border-width: 25px 25px 0px 25px;
    border-color: #f6b209 transparent transparent transparent;
    z-index: 90;
}
.triangle-left1 {
    width :0px;
    height:0px;
    border-style:solid;
    border-width: 25px 25px 25px 0px;
    border-color: transparent #f6b209 transparent #f6b209;
    z-index: 90;
}
.triangle-right1 {
    width :0px;
    height:0px;
    border-style:solid;
    border-width: 25px 0px 25px 25px;
    border-color: transparent #f6b209 transparent #f6b209;
    z-index: 90;
}
/* 装飾 ************************/
/*******************************/


/*******************************/
/* リスト (レスポンシブ) *******/
.responsive-list1 dl {
    padding: 15px 0px;
    border-bottom:unset;
}
.responsive-list1 dt {
    padding-bottom:5px;
    background-color: #cccccc;
}
@media screen and (min-width:768px){
    .responsive-list1 dl {
        border-bottom:1px solid #cccccc;
        border-bottom:1px solid #333;
    }
    .responsive-list1 dt {
        clear:left;
        float:left;
        width: 20%;
        background-color:unset;
    }
    .responsive-list1 dd{
        margin-left:21%;
        margin-right:0px;
    }
}
/* リスト (レスポンシブ) *******/
/*******************************/


/*******************************/
/* テーブル (レスポンシブ) *****/
.responsive-table1 {
    width:100%;
    border-collapse: collapse;
}
.responsive-table1 tr{
    display:block;
}
.responsive-table1 tr:first-child{
    border-top:1px solid #d5d5d5;
}
.responsive-table1 th{
    padding: 10px 15px;
    border:1px solid #ddd;
    display:block;
    border-top:none;
    color:#ffffff;
    background-color: #4f4f4f;
}
.responsive-table1 td{
    padding: 10px 15px;
    border:1px solid #ddd;
    display:block;
    border-top:none;
}
@media screen and (min-width:576px){
    .responsive-table1 {
        width:100%;
        border-collapse: collapse;
    }  
    .responsive-table1 tr:first-child{
        border-top:unset;
    }
    .responsive-table1 tr{
        display:table-row;
    }    
    .responsive-table1 th{
        padding: 10px 15px;
        border:1px solid #ddd;
        display:table-cell; 

        width:30%;
        background-color: #4f4f4f;
    }
    .responsive-table1 td{
        padding: 10px 15px;
        border:1px solid #ddd;
        display:table-cell;

        /* width:auto; */
        background-color: #ffffff;
    }
}
/* テーブル (レスポンシブ) *****/
/* テーブル (レスポンシブ) *****/
/*******************************/





/*******************************/
/* スケジュール ****************/

/* .scheduleTable table{
    margin:0px;
    padding:0px;
    table-layout: fixed;
    width : 100%;
} */

.scheduleTable th {
    position: relative;
    vertical-align: top;
}
.scheduleTable th p {
    margin-top:12px;
}

.scheduleTable td {
    vertical-align: top;
    line-height: 1.4;
    /* border:none; */
}
.scheduleTable td h3 {
    margin-top:12px;
}

.scheduleTable td p {
    margin-left:12px;
}

.scheduleTable td.dot {
    position: relative;
    background: url(../image/dot.png) center 15px repeat-y;
    vertical-align: top;
    width: 40px;
    min-height: 40px;
    /* position: relative;
    background-image: url(../image/dot.png);
    background-size:3px; */
    /* background-repeat:repeat-y;     背景の繰り返し設定 */
    /* background-position: 20px 100px;    背景の位置指定 */
    /* background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%),url(_img.jpg);   */
}
.scheduleTable td.dot .circle {
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f6b209;
}
.scheduleTable td.dot .circle span {
    position: absolute;
    /* display: inline-block; */
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :40px;
    font-size:xx-small;
    text-align:center;
}
@media screen and (min-width:576px) {
    .scheduleTable th p {
        margin-top:24px;
    }
    
    .scheduleTable td h3 {
        margin-top:24px;
    }
    
    .scheduleTable td.dot {
        width: 64px;
        min-height: 64px;
    }
    .scheduleTable td.dot .circle {
        width: 64px;
        height: 64px;
    }
    .scheduleTable td.dot .circle span {
        width :64px;
        font-size:medium;
    }
}

/* スケジュール ****************/
/*******************************/



/*******************************/
/* ページTOPへ *****************/
.page-top {
    position: absolute;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 3%;
    bottom: 3%;
    background: black;
    opacity: 0.1;
    border-radius: 5%;
}
.page-top:hover {
    background: darkblue;
    opacity: 0.6;
}
.page-top a {
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}
/* .page-top a::before {
    font-family: "Font Awesome 5 Free";
    content: '\f102';
    font-weight: 900;
    font-size: x-large;
    color: white;
    position: absolute;
    top: 7px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.page-top a:hover::before {
    color: white;
} */
.page-top .arrow1{
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 4px solid;
    border-color: #ffffff #ffffff transparent transparent;
    transform: rotate(-45deg);
  }
  .page-top .arrow2{
    position: absolute;
    top: 28px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 4px solid;
    border-color: #ffffff #ffffff transparent transparent;
    transform: rotate(-45deg);
  }
/* ページTOPへ *****************/
/*******************************/


body { 
   background-image: url("../../images/background.gif");
   text-align : center; 
   max-width: 960px;
   margin: 0 auto; 
   text-align: center; 
} 

h1 {
  margin: 0;
  padding: 0 10px;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size:150%;
  color: rgb(0, 0, 0);
  border-bottom:2px solid #ffaa00; /* 見出しの下に2pxのオレンジ色の直線を引く */
  /* background-color:#ffffcc; 背景色を薄いクリーム色に */
}

h2{
  padding:0px 10px; /* 余白の調整 */
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size:100%; 
  font-weight:bold; /* 文字を太文字に */
  color:#000000; /* 文字の色を黒に */
  border-bottom:1px solid #ffaa00; /* 見出しの下に1pxのオレンジ色の直線を引く */
  /* background-color:#ffffcc; 背景色を薄いクリーム色に */
}

h3{
  padding:0px 10px; /* 余白の調整 */
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size:100%; 
  font-weight:bold; /* 文字を太文字に */
  color:#000000; /* 文字の色を黒に */
  border-bottom:1px solid #ffaa00; /* 見出しの下に1pxのオレンジ色の直線を引く */
  /* background-color:#ffffcc; 背景色を薄いクリーム色に */
}

.header { max-width: 960px;  font-size: 20px; margin: 0px 5px 0px 5px; padding: 0px 0 0 0; letter-spacing: normal; }

.footer { max-width: 960px;  font-size: 12px; margin: 0px 5px 0px 5px; padding: 30px 0 0 0; letter-spacing: normal; }



/* pure */
.main {
  clear: both;
  max-width: 960px;
  margin: 0px 5px 0px 5px;
  padding: 0px 0;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size: 100%;
}

.sub {
  clear: both;
  max-width: 960px;
  margin: 0px 5px 0px 5px;
  padding: 0 5;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size: 90%;
}
.sub2 {
  clear: both;
  max-width: 480px;
  margin: 0 0;
  padding: 5px 5px 5px 5px;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size: 90%;
}
.sub3 {
  clear: both;
  max-width: 320px;
  margin: 0 0;
  padding: 5px 5px 5px 5px;
  text-align: left;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size: 90%;
}

.sub80 {
  clear: both;
  max-width: 960px;
  margin: 0 0;
  padding: 0px 5px 0px 5px;
  font-family:'ＭＳ ゴシック', 'ＭＳ Ｐゴシック','MS UI GOTHIC','Osaka-等幅','Osaka',Verdana,Arial, sans-serif;
  font-size: 80%;
}

/*全てのボタン共通の設定*/
.stye-button-success,
.stye-button-error,
.stye-button-warning,
.stye-button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
/*それぞれのボタンの色の設定*/
.stye-button-success {
  background: rgb(28, 184, 65); /* 緑色 */
}
.stye-button-error {
  background: rgb(202, 60, 60); /* えび茶色 */
}
.stye-button-warning {
  background: rgb(223, 117, 20); /* オレンジ色 */
}
.stye-button-secondary {
  background: rgb(66, 184, 221); /* 水色 */
}

.stye-button-micro {
  font-size: 60%;
}

.stye-button-xsmall {
  font-size: 70%;
}

.stye-button-small {
  font-size: 85%;
}

.stye-button-large {
  font-size: 110%;
}

.stye-button-xlarge {
  font-size: 125%;
}


div#container { 
    border: 1px solid #000;  
    background:#FFFFFF; /*の背景色*/
    max-width: 960px; 
    margin: 0 auto; 
    text-align: left; 
} 


a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

@media print{
a.noprint {display:none;}
}


.titlestyle1 {
background:#BA55D3;
color: #FFFFFF;
font-weight: bold;
font-size:24px;
}

.itempicture1 {
   max-width: 400px; 
   width: 100%; 
   text-align: center; 
}

.spec { /*クラス名は任意でOKです*/
    width:100%; /*幅は任意の幅*/
    border: 1px solid #444444;
    border-collapse: collapse;
}
.spec th, .spec td {
    padding: 10px;
    border: 1px solid #444444;
    text-align: center;
}
.spec thead tr {
    color: #FFFFFF;
    background: #009933; /*1行目の背景色*/
}
.col0 {
    background:#D7D7FF; /*の背景色*/
}

.style000 {
  font-family:  "ＭＳ ゴシック", "Osaka－等幅";
	font-size: 14px;
}
.style001 {
  font-family:  "ＭＳ ゴシック", "Osaka－等幅";
  text-decoration:none;
	font-size: 14px;
}
.style00 {
  font-family:  "ＭＳ ゴシック", "Osaka－等幅";
	font-size: 14px;
}
.style01 {
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 16px;
	font-weight: bold;
}
.style02 {
	color: #FF0000;
  font-family:  "ＭＳ ゴシック", "Osaka－等幅";
	font-size: 14px;
}
.style1 {
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	color: #FF0000;
	font-size: 16px;
	font-weight: bold;
}
.style2 {
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	color: #FF9900;
	font-size: 20px;
	font-weight: bold;
}
.style22 {
  font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";;
	font-size: 20px;
	font-weight: bold;
	color: #FF0000;
}

  /*--------------------------------------------------------
  画像ポップアップ拡大
  --------------------------------------------------------*/
  #popup-container label.thumbnail {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width:100%;
    height: 100%;
    cursor: pointer;
  }
  #popup-container input {
    display: none;
    z-index: 102;
  }
  #popup-container label.popup-area {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
  }
  #popup-container label.popup-area > div {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    cursor: default;
  }
  #popup-container label.popup-area > div > img {
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
    cursor: default;
  }
  #popup-container label.popup-area::before {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height: 3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
    transform: rotate(-315deg);
    cursor: pointer;
  }
  #popup-container label.popup-area::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height: 3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
    transform: rotate(315deg);
    cursor: pointer;
  }
  #popup-container input:checked + label.popup-area {
    display: block;
  }