@charset "UTF-8";

body{
        font-size: 0.8125rem;
        max-width: 100%; 
        margin:0 auto;   /*(上下のマージン,左右のマージン)*/     
        /*background-image: url("../image_1/bgi-1.png") ;*/
        background-color: rgba(230, 255, 255, 0.778); 
        display: grid;  /*gridの使用を宣言*/
        grid-template:  /*ブロックの配置を指示*/
        "header"  /*7.7%*/
        "image"   /*18.5%*/
        "main"    /*1fr*/
        "left"    /*8%*/
        "right"   /*8%*/
        "footer"  /*2%*/
        /100% ;
}    

header{
    grid-area: header;  /*grid-areaの名前を指定*/
    /*background-color: rgba(218, 254, 294, 0.88);*/
    background-color:rgba(187, 236, 255, 0.822);
    padding: 8px 0px 5px 0px;
    margin: 0 auto;
}
h1{
    font-size: 0.875rem;
    font-weight: 400;
    width: 200px;
    text-align:center;
    padding: 6px auto 0px auto;
    margin: 0 auto;
}
.logo-1{
    width: 43%;
    margin: 0 auto;
    padding-top: 3px;
}
article{
    grid-area: image;  /*grid-areaの名前を指定*/
    background-color:rgba(187, 236, 255, 0.822);
    /*padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;*/
}
.swiper {
    width: 100%;
    height: auto;
    background-color:rgba(187, 236, 255, 0.822);
    padding-bottom: 4px;
}
main{
    grid-area: main;  /*grid-areaの名前を指定*/
    /*background-color: rgba(230, 255, 255, 0.778);*/
    text-align:left;
    padding: 6px 0px 6px 0px;
}
.news{
    padding-left: 10px;
    padding-bottom: 6px;
    /*background-color: rgba(230, 255, 255, 0.778);*/
}
.box-1{
    display: flex;
    flex-direction: row;        /*フレックスアイテムは左から右に配置*/
    justify-content: flex-start;/*起点に揃えて配置、この場合は左揃え*/
}
h2{
    font-size : 0.875rem;
    line-height : 1.3em;
    font-weight : 600;
    color : #000099;
}
.box-2{
    white-space: pre-wrap; /*半角空白・改行が表示に繁栄*/
}
.menu{
    /*display: block;*/
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 1px 8px 22px;
    border:1px solid rgba(160, 82, 45,0.5) ;
    border-radius: 10px;
    background-color: rgb(255, 253, 206);
}

/*.moji_14b{
        font-size : 0.875rem;
        line-height : 1.3em;
        font-weight : bold;
        color : #ff0033;
}*/
.left{
    grid-area: left;  /*grid-areaの名前を指定*/
    text-align:left;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    /*background-color: rgba(230, 255, 255, 0.778);*/
    /*justify-content: center;*/
}
.img-1{
    width: 100%;
    flex-shrink: 1;
    padding-top: 10px;
    position: relative;
    top: 0px;
    left: 15px;
}
.img-2{
    width: 100%;
    flex-shrink: 1;
    position: relative;
    top: 10px;
    left: 125px;
}
.img-3{
    width: 100%;
    flex-shrink: 1;
    position: relative;
    top: 95px;
    left: -180px;
}

aside{
    grid-area: right;  /*grid-areaの名前を指定*/
    padding: 0% 5% 0 5%;
    text-align:center;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.img-4{
    /*width: 20%;
    flex-grow: 1;*/
    width: 7%;
    height: 80%;
    flex-shrink: 1;
    padding-top: 10px;
    position: relative;
    top: -145px;
    left: 126px;
}
.img-5{
    /*width: 20%;
    flex-grow: 1;*/
    width: 18%;
    height: 70%;
    flex-shrink: 1;
    position: relative;
    top: 55px;
    left: -76px;
}
.img-6{
    /*width: 20%;
    flex-grow: 1;*/
    width: 16%;
    height: 80%;
    flex-shrink: 1;
    position: relative;
    top: 10px;
    left: -40px;
}
.img-7{
    /*width: 20%;
    flex-grow: 1;*/
    width: 16%;
    flex-shrink: 1;
    position: relative;
    top: -20px;
    left: -48px;
}
/*
.moji_12a{
    font-size : 0.75rem;
    line-height : 1.2em;
    font-weight : normal;
    color : #000099;
}
.moji_12b{
    font-size : 0.75rem;
    line-height : 1.2em;
    font-weight : normal;
    color : #ff4400;
}
.moji_13a{
    font-size : 0.8125rem;
    line-height : 1.3em;
    font-weight : normal;
    color : #000099;
}
.moji_13b{
    font-size : 0.8125rem;
    line-height : 1.3em;
    font-weight : normal;
    color : #ff0033;
}
.moji_13c{
    font-size : 0.8125rem;
    line-height : 1.3em;
    font-weight : normal;
    color : #00cc00;
}
.moji_14a{
    font-size : 0.875rem;
    line-height : 1.6;
    font-weight : normal;
    color : #000099;
}
.moji_14b{
    font-size : 0.875rem;
    line-height : 1.3em;
    font-weight : bold;
    color : #ff0033;
}
*/
footer{
    grid-area: footer;  /*grid-areaの名前を指定*/
    background-color: rgba(227, 255, 243,0.75);
    text-align:center; 
    padding: 3px 0px 0px 0px;
}

IMG.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a{
    font-size : 0.875rem;
}
a.sp_1 {
    color: red;
}


@media screen  and (min-width: 768px){  /*メディアクエリーの表示切替店を指定*/

body{
    font-size: 1.125rem;
    width: 816px;
    margin:0 auto; /*(上下のマージン,左右のマージン)*/
    background-image: url("../image_1/bgi-1.png");
    border:2px solid rgba(90, 104, 255, 0.5);  /* 一括指定 */
    min-height: 100vh;
    display: grid;
    grid-template:
    "header header header" 8.4%
    "image  image  image"  298px
    "left   main   right"  1fr
    "footer footer footer" 4%
    / 28%   1fr    22% ;
    }
    header{
        background-color:rgba(187, 236, 255, 0.822);
        width: 100%;
    }
    h1{
        font-size: 1.375rem;
    }
    .logo-1{
        width: 38%;
    }
    article{
        background-color: rgba(187, 236, 255, 0.822);
    }
    .swiper {
        width: 98%;
        height: auto;
        background-color:rgba(187, 236, 255, 0.822);
    }
    .left{
        grid-area: left;
        background-color: rgba(227, 255, 255,0.85);
        text-align: center;
        display: flex;
        flex-direction: column;
        /*justify-content: space-between;*/
    } 
    .img-1{
        padding-top: 10px;
        flex: 30%;
        flex-grow: 1;
        position: relative;
        top: 10px;
        left: 30px;
    }
    .img-2{
        flex: 30%;
        flex-grow: 1;
        position: relative;
        top: 10px;
        left: 38px;
    }
    .img-3{
        flex: 30%;
        flex-grow: 1;
        position: relative;
        top: 25px;
        left: 10px;
    }
    main{
        background-color: rgba(227, 255, 255,0.85);
    }
   /*.news{
        background-color: rgba(227, 255, 243,0.75);
    }
    */
    .menu{
        background-color: lightgoldenrodyellow;
    }
    aside{
        grid-area: right;
        background-color: rgba(227, 255, 255,0.85);
        text-align:center;
        display:flex;
        flex-direction: column;
    }
    .img-4{
        flex: 1;
        padding-top: 10px;
        position: relative;
        top: 0px;
        left: 26px;
    }
    .img-5{
        flex: 1;
        position: relative;
        top: 0px;
        left: -10px;
    }
    .img-6{
        flex: 1;
        height: auto;
        position: relative;
        top: 2px;
        left: 10px;
    }
    .img-7{
        flex: 1;
        height: auto;
        position: relative;
        top: 8px;
        left: 0px;
    }
    a{
        font-size : 0.9375rem;
    }
}