/*
 *  タイトルエリアの何蛍
 */
#_titleArea_ {
    /*position:relative;

    /*background:-webkit-linear-gradient(top left, purple, #328cd4 10%, #6cb6f4 80%);*/
    background:-webkit-radial-gradient(top left, #62a288 12%, #328cd4, #6cb6f4);
    /*width:100%;*/
    /*height: 200px* /;
    color:white;
    padding:/*2em* / 1.6em 0 2.2em 0;
    margin-bottom:3em;
    margin-top:7.5em;
    /*padding:28.4em 0;*/
    line-height:144%;
}

#_titleArea_ div {
    width:86%;
    max-width:/*1170px*/1280px;
    margin:0 auto;
    padding:0;
    /*border:solid 1px;*/
}

#_titleArea_ h1.h2 {
    border:none;
    margin:/*.5em*/1em 0;
    font-size:160%;
    font-weight:normal;
    text-shadow:1px 6px 0px rgba(0,0,0,5%);
    padding:0;

}

#_titleArea_ h1.h1 {
    border:none;
    padding:0;
    margin:/*.5em*/.88em 0;
    font-size:250%;
    font-weight:normal;
    text-shadow:1px 8px 0px rgba(0,0,0,5%);
}

#_titleArea_ h1.h3 {
    border:none;
    padding:0;
    margin:/*.5em*/1em 0;
    /*text-shadow:1px 2px 1px #808080;*/
    font-size:128%;
    font-weight:normal;
    text-shadow:1px 4px 0px rgba(0,0,0,5%);
}

/*
 * 仝光何�T鏡徭サイトへ々のアイコンを�Kべる何蛍
 */
div#_facilitiesIconArea_ {
    /*background-color:/*#f8f8f8* /#d4e8e4* /#d0e2df;*/
    /*border:solid 1px #d0d0d0;*/
    /*width:1280px;/*96%;*/
    max-width:1280px;
    margin:0 auto /*4em*/0 auto;
    /*z-index: 0;
    position:relative;*/
    overflow:auto/*scroll*/;
    border-top-left-radius: 10pt;
    border-top-right-radius: 10pt;
    padding-bottom:0em;
}

div#_facilitiesIconArea_ > div {
    background-color:#d0e2df/*#e0ecf8*/;
    display:grid;
    /*position:relative;
    z-index: -21;*/
    grid-template-columns:repeat(5, 1fr);
    padding:1em 0 2.67em 0;
    text-align:center;
    width:1280px;
    margin:0 auto;
}

div#_facilitiesIconArea_ > div > a { /* �g�Hのアイコン云悶 */
    display:block;
    box-sizing:border-box;
    /*grid-column: 1 / 6;*/
    text-decoration:none;
    font-size:10.5pt;
    line-height:100%;
    padding:0;
    /*width:50%;*/
    border-top:solid 2px rgba(255,255,255,0.4);
    border-right:solid 2px rgba(208,208,208,0.4);
    border-bottom:solid 2px rgba(208,208,208,0.4);
    border-left:solid 2px rgba(255,255,255,0.4);
    margin:1.5em auto 1.6em auto;
    border-radius:8px;
    /*max-width:192px;*/
    width:/*242px*/208px;
    /*min-width:192px;*/
    background-color:white;
    background:-webkit-linear-gradient(top, rgba(255,255,255,0.7), rgba(232,232,232, 0.7) 1%, rgba(232,232,232, 0.7) 99%, rgba(255,255,255,0.7));
    /*box-shadow:4px 12px 12px rgba(160,160,160,20%);*/
    box-shadow:4px 12px 12px rgba(144,144,144,20%);
    color:#333;
    /*opacity:88%;*/
    &:visited {
        color:#444;
    }
    &:hover {
        background-color:#ffd;
        /*background:-webkit-linear-gradient(top, rgba(255,255,255,1), rgba(232,232,232,1) 2%, rgba(232,232,232,1) 98%, rgba(255,255,255,1));*/
        /*margin:1.6em 1.9em 1.4em 2.1em;*/
        border-color:/*#328cd4* /#6498cf*/white;
        /*color:#0084b4;*/
        /*box-shadow:2px 12px 12px rgba(160,160,160,55%);*/
        box-shadow:2px 12px 12px rgba(144,144,144,55%);
        /*opacity:100%;*/
    }
  /*-webkit-transition-property:box-shadow,border-color,opacity, background-color, color/*, background-image, background*/;
    -webkit-transition-duration:500ms;
}

div#_facilitiesIconArea_ > div > a >  p {
    position:relative;
    vertical-align:middle;
    text-align:center;
    padding:.67em;
    margin:0;
    &:first-of-type {
        border-radius:8px 8px 0 0;
        font-size:/*90%*/86%;
        /*padding:.67em;*/
        /*background-color:#f0f0f0/*#606060*/;
        /*background-color:transparent;*/
        color:#888;
        line-height:100%;
        min-height:1.25em;
    }
    /*border:solid 1px;*/
    /*background-color:#e8e8e8;
    background:-webkit-linear-gradient(top, #eee, #d8d8d8);*/
    /*border-top:solid 6px #6498cf;*/
    border-radius:0 0 12px 12px;
    min-height:2em;
    font-size:/*9.5pt*/94%;
    line-height:150%;

}

div#_facilitiesIconArea_ a img {  /* アイコンの嶄の鮫�� */
    margin:0;padding:0;
    /*border-radius:12px 12px 0 0;*/
    /*border:solid 1px;*/
    border-top:solid 1px /*#d4d4d4*/#a0a0a0;
    border-bottom:solid 6px #6498cf;
    width:100%;
}

div#_facilitiesIconArea_ > div > a.Sq {
    display:grid;
    grid-template-columns:1fr 2fr;
    grid-template-rows:1fr 1fr;
    background-color:#ffff44;
}

div#_facilitiesIconArea_  div#_hidIco_ {
    position:absolute/*relative*/;
    /*background-color:#4d4d4d;*/
    padding:.2em 2em;
    top:40px;
    text-align:left;
    width:512px;
    max-width:1280px;
    display:none;
    /*color:white;*/
    /*z-index:0;*/
    text-index:2em;
    grid-column: 1 / 6;
    margin:0 auto;
    opacity:60%;
    box-sizing:border-box;
}


/*
 * その麿の仟彭秤�鵐椒織�
 */
p#_other_topics_ {
    text-align:right;
    margin-bottom:3em;
}

p#_other_topics_ a {
    /*background:-webkit-linear-gradient(top left, /*#a47222 40%,* /#e49250 40%, #f0a466);*/
    background:-webkit-linear-gradient(top left, #808080 20%, #989898);
    padding:.88em 1.33em;
    /*padding:.67em 1em;*/
    border-radius:6px;
    color:white;
    text-decoration:none;
    line-height:100%;
    &:after {
        content:url('/src/assets/images/gt_%23c0c0c0.svg');
        position:relative;
        top:2px;
        vertical-align:middle;
        /*line-height:90%;*/
    }
    &:hover {
        background:-webkit-linear-gradient(top left, #d48232 20%, #e49250);
    }
}

/*
 * その麿リンク喘のバナ�`エリア
 */
div#_linkBannerArea_ {
    margin-top:0;
    background-color:#ffffff/*#f8f8f8/ *#d4e8e4*/;
    border:solid 1px transparent;
    border-top:solid 4px #328cd4;
}
div#_linkBannerArea_ > div {
    display:grid;
    grid-template-columns 1fr;
    padding:1em 0 1.67em 0;
    text-align:center;
    width:100%;
    width:86%;
    max-width:/*1170px*/1280px;
    margin:.88em auto;
}
div#_linkBannerArea_ a {
    margin:8px auto;
    box-sizing:content-box;
    width:260px;
    height:/*50px*/55px;
    /*border:solid 1px #d4d4d4;*/

    vertical-align:middle;
    text-align:center;
    background:-webkit-linear-gradient(top left, #ffe4bc, #f2d288);
    &:hover {
        box-shadow:0 6px 0 /*#d4d4d4*/#328cd4;
        /*padding:0;*/
    }
    -webkit-transition-duration: 250ms;
}
div#_linkBannerArea_ img {
    margin:0;
}


/* ----------------------------------------- 
 *  參和、デバイスごとの俳り蛍け
 * ------------------------------------------
 */

@media screen and (min-width:/*640px*/590px) {
    #_titleArea_ { /* タイトル�I囃 */
        margin-top:10.8em;
    }
    #_mainContents_ { /* メインの�I囃 */
        margin-top:0;
    }
    p#_other_topics_ a { /* その麿秤�鵑離椒織� */
      padding:.88em 1em;
      line-height:100%;
    }
}

/* かなり鮫中のﾚいPC */
@media screen and (min-width:1080px), print {

    div#_linkBannerArea_ > div {
        grid-template-columns:repeat(4, 1fr);
        /*grid-template-rows: 2fr;*/
        max-width:/*1170px*/1280px;
        width:90%;
        margin:0 auto;
    }
    div#_linkBannerArea_ a {
        margin: 8px 4px;
    }
}

/* 嶄殻業に鮫中のﾚいPC */
@media screen and (min-width:860px) and (max-width:1079px) {

    div#_linkBannerArea_ > div {
        grid-template-columns:repeat(3, 1fr);
        /*grid-template-rows: 2fr;*/
        max-width:1079px;
        width:90%;
        margin:0 auto;
    }
    div#_linkBannerArea_ a {
        margin: 8px 4px;
    }
}

/* 鮫中の倭いPC */
@media screen and (min-width:/*640px*/590px) and (max-width:859px) {
    div#_linkBannerArea_ > div {
        grid-template-columns:repeat(2, 1fr);
        max-width:859px;
        width:90%;
        margin:0 auto;
    }
    div#_linkBannerArea_ a {
        margin: 8px 4px;
    }
}

@media screen and (hover:none) and (max-width:1400px) {/* タッチ侏極挑 */
    /******
    @keyframes _fadeOut_ {
          0% { opacity:70%; }
         80% { opacity:70%; }
        100% { opacity:0%; }
    }
    ******/
    .LR {
        animation-duration: 2500ms;
        animation-name: _fadeOut_;
    }
    @keyframes _changeBG_ { /* アイコン�I囃の嘘尚弼を�笋┐� */
          0% { background-color:#777; opacity:40%; }
         80% { background-color:#777; opacity:40%; }
        100% { opacity:100%;/* background-color:#d0e2df;*/}
    }
    div#_facilitiesIconArea_ > div.ICN {
      animation-duration: 2500ms;
      animation-name: _changeBG_;
    }
}