@charset "UTF-8";

    body{
        font-family:"Hiragino Maru Gothic W4 JIS2004", "Hiragino Kaku Gothic Pro","Hiragino Sans","Meiryo",sans-serif;
        /* margin-top:100px; */ 
    }
    
    img { object-fit: cover; }
    a { cursor: pointer; }

    footer{ padding:2rem 2rem;}

    .container{ max-width:1000px; }
    .section { padding: 0;  }

    /*========================================================
    header ナビバー周り
    ========================================================*/
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.75);
    }
    .nav, .navbar, .nav-item{
        background:#66ccff !important;
    }
    /* header{ position: relative; } */
    .navbar {
        /* height:80px; */
        width:100%;
        padding: 1.2rem 2.0rem;
        /* position:absolute;
        top: 0; left:0; */
    }
    .navbar-nav {  }
    .navbar .navbar-nav { z-index:1020; }

    .navbar .navbar-nav .active { font-weight:bold; }
    a.nav-link:hover, a.nav-link:active { color:#FFFFFF !important; font-weight:bold !important; }

    .navbar-brand{ font-size:2.0rem; letter-spacing:1px; font-family:GSanSerif-B; font-weight:bold; font-style: oblique; }
    .navbar-toggler { padding: 0.25rem 0.25rem; }
    .navbar .nav-item .nav-link{ padding: 0.75rem 1.5rem; }
    .dropdown-item{ padding: 0.5rem 1.0rem; }

    .navbar .nav-item .nav-link:hover, .dropdown-item:hover{
        color:black; background:#a7d6ff;
        cursor: pointer;
    }

    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, 
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-left:10px;
        padding-right:10px;
    }


    /*========================================================
    jumbotron(HOME見出し)
    ========================================================*/
        /* .jumbotron.special {
            position: relative;
            min-height: 500px;
            margin-bottom: 0;
            overflow: hidden;

            background-attachment: fixed;
            background-size:cover;
            background-position: center middle;
        } */
        .display-4{
            font-size:4rem;
            text-shadow:
            0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF, 0 0 3px #FFF,
            0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,  0 0 3px #FFF,
            0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
        }
        .lead{
            font-size:1.5rem;
            text-shadow:
            0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,
            0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
        }

        .top-image{
            display: flex; /* 子要素をflexboxで揃える */
            flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
            justify-content: center; /* 子要素をflexboxにより中央に配置する */
            align-items: center;  /* 子要素をflexboxにより中央に配置する */

            min-height: 500px;
            background-attachment: fixed;
            background-size:cover;
            background-position: center middle;  
            z-index:1;
            
            position:relative; 
        }
        .top-image .message { 
            text-align:center;
            margin-bottom: -10px;
            z-index:300;
            position:absolute;
        }
        .top-image .image { 
            text-align:center;
            margin: 10px;
            z-index:200;
            position:absolute;
        }
        .top-image .image img{ 
			width:55%;
            opacity:0.4;
        }

		.wrap-info{ margin:0 auto; width:90%; }

        .info-title-bar{
            width:100%; 
            color:#FFFFFF;
            font-size:1.5rem;letter-spacing:2px;
            padding:10px 0 10px 20px; margin:10px auto 5px; 
            
        }
        .wrap-info-list{
            width:100%;
            margin:10px auto; 
            
        }
        .info-list{
            width:95%;
            padding:10px 0 10px 45px; margin:0px auto; 
            border-bottom:1px dashed gray;
            position: relative;
        }
        .info-list:first-child{
            border-top:1px dashed gray;
        }
        .info-list .text{
            font-size:1.0rem;
            padding-top:2px;
        }
        .info-list .text:before{
            color: #17A2B8;
            font-size: 1.5rem;
            font-weight: 900;
            font-family: "Font Awesome 5 Free";
            content: '\f35a';
            position: absolute; left: 0.5rem; top: 5px;
        }
        .info-list .text .date{ float:left; width:120px; padding-right:10px; }
        .info-list .text .title{ float:left; }

        .point-description{ width:90%; margin:0 auto; }
        .point-box a {
            color:#212529; 
            text-decoration:none;
        }

        .subtitle .title{
            font-size:1.5rem; 
            text-align:center;

            position: relative;/*相対位置*/
            padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
            line-height: 1.4;/*行高*/
            color: #ff6a6a;/*文字色*/
            border-top: dotted 1px gray;
            border-bottom: dotted 1px gray;
            background: #fffff4;
          }
          
        .subtitle .title:before {
            /* font-family: "Font Awesome 5 Free";
            content: '\f3c5'; */
            font-weight: 900;
            position: absolute;/*絶対位置*/
            font-size: 1em;/*サイズ*/
            left: 0.25em;/*アイコンの位置*/
            top: 0.5em;/*アイコンの位置*/
            color: #ff6a6a; /*アイコン色*/
        }
        



    /*========================================================
    page
    ========================================================*/
        .page_title{ 
            color: #66ccff;
            font-size:2.0rem; letter-spacing:2px;
            text-align: center;
            padding: 0.5rem 0; 
            margin:20px 20px 20px;
            border-top: solid 2px #66ccff;
            border-bottom: solid 2px #66ccff;
            background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
            background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);        
            
        }
        .page_description{ width:90%; font-size:1rem; margin:0 auto; text-align:left; }

        .carousel-inner{ height:300px; margin:0 auto; }
        .carousel-item img{
            width:100%; height:300px;
            object-fit:cover !important;
        }

        .anchor_wrap{
            display: flex;
            justify-content: center;/* 水平方向 */
            align-items: center;/* 垂直方向 */
            flex-wrap:wrap;
        }
        .anchor { 
            font-size:0.8rem; 
            width:180px; height: 45px; line-height: 45px;
            margin:0 5px 10px; 
            /* border:1px solid red; */
        }
        .anchor a{ 
            display:inline-block;
            width:100%; height:45px; 
            text-align:center; vertical-align:middle; 
            color:white; background:#17A2B8; border-radius:10px; 
        }

    /*========================================================
    contents
    ========================================================*/
        .wrap_contents{ width:95%; margin:0 auto 20px;
            /* border:1px solid red;  */
        }

        .contents_title{
            font-size:1.2rem; letter-spacing:1px;
            padding: 1rem 0 0.75rem 1rem;/*文字の上下 左右の余白*/
            color: #494949;/*文字色*/
            background: #f4f4f4;/*背景色*/
            border-left: solid 5px #66ccff;/*左線*/
            border-bottom: solid 3px #d7d7d7;/*下線 #d7d7d7 #7db4e6 */
            margin:0 auto;
        }
        .contents_img{ width:100%; margin:0 auto 10px; text-align:center;
            /* border:1px solid red; */
        }
        .contents_img img{ width:100%; object-fit: contain;
            /* border:1px solid red; */
        }
        .contents_text{ width:100%; margin:0 auto 20px;
            /* border:1px solid red; */
        }
        .contents_text table { border-collapse: collapse;  }/*border:1px solid #333333;*/
        .contents_text table td{   }/*padding:10px; border:1px solid #333333; background:#FFFFFF;*/
 
        /* .contents_text table td{ min-width:75%; width:550px; }
        .contents_text table tr td:first-child{ width:180px; min-width:25%; color:#333333; background: #ECECEC; letter-spacing:1px; } */

        .gallery { padding:0.5rem 1rem; text-align:center; margin:0 auto; }
        .gallery img { max-width:200px; max-height:150px; object-fit:contain; }
        

    /*========================================================
    page-top
    ========================================================*/
        #page_top{
            width: 60px; height: 60px;
            position: fixed; right: 10px; bottom: 10px;
            background: #66ccff; opacity: 1.0; border-radius: 50%;
        }
        #page_top a{
            position: relative; display: block;
            width: 60px; height: 60px;
            text-decoration: none; text-align: center;
        }
        #page_top a::before{
            font-family: "Font Awesome 5 Free"; content: '\f106';
            font-weight: 900; font-size: 40px; color: #fff;
            position: absolute; top: 0; bottom: 30px; right: 0; left: 0;
            width: 30px; height: 30px;
            margin: auto;
        }

/*--------------------------------------------------------------- */
@media (max-width:767px) {
/*--------------------------------------------------------------- */
    .section { padding: 0; }

    .navbar-brand{ font-size:1.5rem; }
    .nav-link{ font-size:1rem; color:white; }

    .navbar .nav-item .nav-link:active,
    .dropdown-item:active{
        color:black; background:#a7d6ff;
    }

    /*========================================================
    jumbotron(HOME見出し)
    ========================================================*/
        /* .jumbotron.special { min-height: 300px; position: relative; } */
        .display-4 { font-size: 1.8rem; }
        .lead{ font-size: 1.0rem; }

        .top-image{ min-height: 500px; }
        .top-image .message { }
        .top-image .image img{ width:90%; }

		.wrap-info{ width:100%; }
        .info-list{
            width:100%;
            padding:10px 0 10px 35px; margin:0px auto; 
        }
        .info-list .text{
            font-size:0.8rem;
        }
        .info-list .text:before{
            font-size: 1.0rem;
            position: absolute; left: 0.5rem; top: 8px;
        }
        .info-list .text .date{ float:left; width:70px; font-size:0.6rem; padding:2px 5px 0 0; }
        .info-list .text .title{ float:left; }

        
        .point-description{ width:80%; margin:0 auto; }
        
    /*========================================================
    page
    ========================================================*/
        .page_title{ 
            font-size:1.5rem; letter-spacing:2px; margin:20px 10px 5px; 
        }
        .carousel-inner{ height:150px; }
        .carousel-item img{ height:150px; }


        .anchor_wrap{　 }
        .anchor { width:150px; }
        .anchor a{ word-wrap:break-word ;
        }
        
    /*========================================================
    contents
    ========================================================*/
        .wrap_contents{ width:95%; margin:0 auto; }    

        .contents_title{  }

        .contents_img{ width:100%; text-align:center; margin:0 auto 10px; padding:0px;
            /* border:1px solid blue; */
        }

        .contents_img img{ width:100%; margin-bottom:10px; object-fit: cover;
            /* border:1px solid blue; */
        }

        .contents_text{ 
            width:100%;

            padding-left:0px !important;
            padding-right:0px !important;
            /* border:1px solid blue; */
        }

        .contents_text table { font-size:0.8rem; }
        .contents_text table td{  } /* padding:5px; */

        .gallery { padding:0.5rem 0.5rem; text-align:center; margin:0 auto; }
        .gallery img { max-width:80px; max-height:60px; object-fit:contain; }
 
}