@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
body{
    font-size: 16px;
    line-height: 2;
    font-family: "Noto Sans Japanese","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ\ Ｐゴシック","sans-serif";
    color: #000;
    -webkit-font-smoothing: antialiased;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;}
.cf:after {
    clear: both;}
/* For IE 6/7 only */
.cf {
    *zoom: 1;}
a {
    color: #333;
    display: block;
    text-decoration: underline;
}
a:hover {
    color: #1eb9eb;
    transition: .5s;
}
pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
    display: inline-block;
    border: 3px solid #eee;
    border-radius: 6px;
    margin: 1em 0;
    padding: 1em;
}
h1,h2,h3,h4,h5,h6{
    line-height: 1.2;
}
h2,h3,h4,h5,h6{
    font-size: 130%;
    margin-bottom: 25px;
    padding: 8px 0;
}


/* header */

.header-area {
    position: fixed;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: left;
    background: rgba(0, 0, 0, .3);
    z-index: 1;
}

.header-area-in{
    position: relative;
    width: 1200px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* transition */
.header-area,
.header-area:after,
.header-area .site-title,
nav.g-nav > ul li,
nav.g-nav > ul li a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
/* Fixed */
.header-area.fixed {
    background: rgba(255,255,255,.9);
    padding: 0;
    box-shadow: 0px 5px 10px -6px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 5px 10px -6px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 5px 10px -6px rgba(0,0,0,0.6);
}
.header-area.fixed .site-title a {
    font-size: 16px;
    color: #333;
}

.header-area.fixed:after {
    width: 100%;
    margin-top: 20px;
}
.header-area.fixed #g-nav-menu li a {
    color: #333;
    padding: 10px 20px;
}
.header-area.fixed #g-nav-menu li a:hover{
    color: #fff;
}
.img_01 {
    text-align: center;
    margin-bottom: 35px;
}
.header-area .site-title {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px 10px 0;
    width: 300px;
}
.header-area .site-title a{
    color: #fff;
    text-decoration: none;
}

nav.g-nav > ul {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}
nav.g-nav a{
    color: #fff;
    font-weight: bold;
}

nav.g-nav ul#g-nav-menu > li {
    display: block;
    position: relative;
/*    width: 25%;*/
    font-size: 14px;
    text-align: center;
}

ul#g-nav-menu li ul.sub-menu {
    display: none;
    position: absolute;
    padding: 0;
    z-index: 9999;
}
ul.sub-menu li a {
    display: block;
}
ul.sub-menu li a:hover {
    color: #f5f2e8;
    background-color: #388186;
}
.slicknav_menu {
    display: none;
}
#g-nav-menu li a {
    display: block;
    color: #fff;
    padding: 20px;
    position: relative;
    text-decoration: none;
}
#g-nav-menu li a:hover {
    color: #fff;
    background: #1eb9eb;
}

header {
    margin: 0 auto 55px;
    position: relative;
    display: flex;
    z-index: -1;
}
.catchcopy{
    color: #fff;
    font-size: 160%;
    position: relative;
    width: 45%;
    background: #81a4c3;
}
.catchcopy p{
    line-height: 1.3;
    display: block;
    width: 90%;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

/* slider */
#slider {
    overflow:hidden;
    position:relative;
    width:100%;
}
.bx-wrapper {
    margin:0 auto;
    position:relative;
    border: none;
    max-width: 100%!important;
}
.bx-viewport {
    background: #81a4c3;
}
.bx-wrapper .bx-pager.bx-default-pager a{
    background: #f8f8f8;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus{
    background: #1eb9eb;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{
    bottom: 30px;
}
.bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus,
.bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus{
    transition: 0s;
}
.header-area p.catchcopy {
    margin-bottom: 35px;
    font-size: 12px;
    line-height: 1.2;
}
.container.cf {
    width: 1200px;
    margin: 0 auto;
}
main {
    float: right;
    width: 880px;
}

.btn_10 {
    text-align: right;
}
.btn_10 a {
    border: 1px solid #1eb9eb;
    background: #1eb9eb;
    color: #fff;
    padding: 10px 50px;
    display: inline-block;
    text-decoration: none;
}
.btn_10 a:hover {
    background: #fff;
    color: #1eb9eb;
}
/* section */
.article {
    margin-bottom: 35px;
}
.container section p{
    margin-bottom: 20px;
}
.container article .art-box {
    padding: 0 20px;
}
.inner > img{
    float: left;
    margin: 0 30px 0 auto;
    max-width: 250px;
}
.article p img {
    max-width: 100%;
}
.article .art-R {
    width: 280px;
    float: right;
}
.art-R a {
    display: block;
    text-align: right;
}

/* style */
.container section .content1_img{
    max-width: 880px;
    margin: 0 auto 25px;
    text-align: center;
    display: block;
    float: none;
}
.sub_img{
    float: left;
    max-width: 295px;
    margin-right: 30px;
}
.sub_img img{
    width: 100%;
    height: auto;
}
.eyecatch_wrap{
    width: 880px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}
.eyecatch{
    width: 100%;
    height: auto;
    position: absolute;
    top: -10%;
}
.container section .content1_img img{
    width: 100%;
}
.container h2{
    color: #1eb9eb;
    font-size: 200%;
    font-weight: 700;
    position: relative;
    text-align: left;
    margin-bottom: 10px;
}
.container .main-wrap h2{
    text-align: left;
    padding: .5em;
}
.container h3{
    color: #1eb9eb;
    border-top: 3px solid #1eb9eb;
    border-bottom: 3px solid #1eb9eb;
    position: relative;
    text-align: center;
    padding: .5em 20px;
    font-size: 150%;
}
.container h4{
    position: relative;
    padding: .5em .75em;
    background-color: #eee;
    font-size: 110%;
}
.container h5{
    font-size: 110%;
    padding-bottom: .5em;
    border-bottom: 5px solid #aaa;
}
.container h6{
    border-left: 5px solid #1eb9eb;
    font-size: 110%;
    color: #aaa;
    padding-left: 10px;
}

b, strong, .bo {
    font-weight: bold;
    font-size: 100%;
    background: linear-gradient(transparent 60%, #dbecf2 60%);
}
.container article ul,
.container .subcontents ul{
    border: 1px solid #2f9fe5;
    padding: 0 2em;
    margin: 1.5em 0;
    font-weight: bold;
}
.container article ul li,
.container .subcontents ul li{
    line-height: 1.5;
    padding: .5em 0;
    border-bottom: 1px solid #eee;
    position: relative;
}
.container article ul li:before,
.container .subcontents ul li:before{
    font-family: FontAwesome;
    content: "\f0da";
    position: absolute;
    left : -1em;
    color: #1eb9eb;
}
.container article ol,
.container .subcontents ol{
    counter-reset:list;
    border-radius: 6px;
    padding: 0.5em 0;
    margin: 1.5em 0;
}

.container article ol li,
.container .subcontents ol li{
    position:relative;
    line-height: 25px;
    margin: 7px 0 7px 30px;
    font-weight: bold;
}

.container article ol li:before,
.container .subcontents ol li:before{
    counter-increment: list;
    content: counter(list);
    position: absolute;
    left: -35px;
    width: 25px;
    height: 25px;
    background: #1eb9eb;
    text-align: center;
    color: #fff;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
blockquote{
    background:#f0f0f0;
    padding:3em 1em;
    position:relative;
}
blockquote:before{
    content:"“";
    font-size:600%;
    line-height:1em;
    color:#1eb9eb;
    position:absolute;
    left:0;
    top:0;
}
blockquote:after{
    content:"”";
    font-size:600%;
    line-height:0em;
    color:#1eb9eb;
    position:absolute;
    right:0;
    bottom:0;
}
.container main p img{
    display: inline-block;
    float: none;
}
.subcontents img{
    display: block;
}
.aligncenter { text-align: center; }
.alignleft {text-align: left;}
.alignright {text-align: right;}

table{
    border-collapse: collapse;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 20px;
    background: #fff;
}
table th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border: 1px solid #ccc;
    background: #eee;
}
table td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
}
/* link */
article.link-box h2{
    text-align: center;
    border-bottom: 1px solid #1eb9eb;
}
article.link-box{
    border: 1px solid #aaa;
    padding: .5em 3em;
}
article.link-box h3{
    display: block;
    border: none;
    background: #fff;
}
article.link-box h3 a:before {
    content: "\f08e";
    font-family: FontAwesome;
    margin-right: 5px;
}
article.link-box h3:hover{
    transition: .5s;
    background: #eee;
}
article.link-box p {
    padding: 0 0 20px;
}
.container section article.link-box a {
    text-align: left;
}

/* aside */
aside{
    float: left;
    width: 260px;
}
.side-wrap >li{
    margin-bottom: 3em;
}
.side-wrap a {
    display: block;
    padding: 10px 10px 10px 0px;
    position: relative;
}

.side-wrap p a {
    display: block;
    padding-left: 70px;
    height: 40px;
    line-height: 40px;
}
.side-link img {
    max-width: 260px;
}
.sidemenu > ul > li > p {
    color: #aaa;
    font-weight: bold;
    text-align: left;
    padding: 3px 5px;
    border-bottom: 3px solid #1eb9eb;
}
p.side-link img {
    vertical-align: middle;
}
.side-link p {
    padding: 10px 0;
}

/* footer */
footer {
    position: relative;
    background: #656565;
}
footer a{
    color: #fff;
}
footer .fmenu-area {
    display: flex;
    justify-content: inherit;
    width: 1060px;
    margin: 0 auto;
    padding: 2em 0;
}
.fmenu-area > li {
    width: 28%;
    margin: 0 5% 0 0;
}
footer .fttl,
footer .copy {
    color: #aaa;
    background: #fff;
    font-size: 10px;
    text-align: center;
    padding: 10px;
}
footer a.btn_top {
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 1;
}

footer .fmenu p {
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    margin-bottom: 15px;
}
footer .fmenu a {
    display: block;
    line-height: 1.3;
    padding: 15px 0;
}
/* under */


/* pan nav */
#panmenu{
    padding: 5px 0;
    margin-bottom: 45px;
    text-align: right;
    margin: 100px auto 45px;
}
#panmenu a {
    display: inline;
    font-size: 13px;
    color: #1eb9eb;
}

img.eyecatch {
    display: block;
    margin: 20px auto;
}
.buttonarea {
    margin-bottom: 30px;
}
.container main .subcontents p {
    padding: 0 0 20px 0;
}


/* SNS */
.buttonarea {
    width: 100%;
}
/*
.sns-container {
    display: flex;
    justify-content: flex-end;
}
*/
.buttonarea >div{
text-align: center;}
.buttonarea:after {
    content: '';
    clear: both;
    display: block;
}
.title-fill {
    text-align: center;
    display: block;
    color: #1eb9eb;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.button-w {
    float: right;
    width: 10%;
    box-sizing: border-box;
    margin: 0 0.1%;
}
.button-w .fa{
    font-weight: bold;}
.button-link {
    display: block;
    text-align: center;
    color: #fff !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    box-sizing: border-box;
    text-decoration: none;
}
.button-link:hover {
    text-decoration: none !important;
    filter:alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
}
/* SNSごとの背景色 */
#twitter {
    background-color: #00acee;
}
#hatena {
    background-color: #2D4C86;
}
#facebook {
    background-color: #3b5998;
}
#ggl-plus {
    background-color: #dd4b39;
}

@media screen and (max-width: 667px) {
    body{
        line-height: 1.7;
    }
    h1,h2,h3,h4,h5,h6{
        text-align: left;
    }
    .header-area .site-title,.header-area p.catchcopy,footer .fmenu-area,
    .main-wrap h1,
    .buttonarea, .side-wrap,
    aside.sidemenu, .pan-nav,.main-wrap,.container,article.link-box{
        padding: 3%;
    }
    .container section article.link-box a,main,.header-area {
        padding: 0;
    }
    .container .main-wrap h2{
        margin-bottom: 0;
    }
    div.pan-nav{
        padding: 0 3%;
    }
    header {
        margin: 0 auto;
        display: inherit;
        z-index: 1
    }
    .catchcopy p{
        position: inherit;
        height: auto;
        padding: 1em;
        font-size: 14px;
    }
    .article .art-box p {
        margin: 10px 0;
    }
    .article img {
        margin: 0;
    }
    .container h2,.header-area .site-title{
        text-align: left;
    }
    .header-area .site-title a{
        color: #666;
    }
    .container h2{
        font-size: 160%;
    }
    .container h3{
        text-align: left;
    }
    main section article.article img {
        margin: 0 auto 20px;
        display: block;
        width: 100%;
    }
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{
        bottom: 10px;
    }
    .container, ul.sub-menu li a, .container section,
    .article .art-R, aside.sidemenu, .container .main-wrap,
    .side-link img, div.pan-nav,
    img.eyecatch,
    footer .fmenu-area,
    .header-area,.fmenu-area > li,.eyecatch_wrap,.main-wrap main,.container.cf,main,.catchcopy,.header-area-in{
        width: 100%;
    }
    .article img,
    .container section .content1_img img{
        max-width: 100%;
    }
    .sub_img{
        max-width: 155px;
        margin-right: 10px;
    }
    .btn_10 a{
        width: 80%;
    }
    #panmenu{
        padding: 5px 3%;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
        text-align: left;
    }

    .eyecatch_wrap, .eyecatch{
        height: auto;
        position: inherit;
        margin-bottom: 0;
    }
    .article img, .article .art-R, .container section,
    .container .main-wrap, .side-link img {
        float: none;
    }

    .slicknav_menu > ul > li > a > p {
        display: inline-block;
    }

    .container{
        margin: 0px auto;
    }
    .header-area{
        display: inherit;
        position: inherit;
        background: none;
    }
    .header-area .site-title{
        width: 100%;
    }
    .header-area p.catchcopy{
        text-align: left;
    }
    footer .fmenu-area {
        display: block;
        text-align: left;
        line-height: 2;
    }
    footer .fttl, footer .copy{
        padding: 10px 20% 10px 10px;
        text-align: left;
    }
    .side-wrap p a {
        height: 28px;
        padding: 0;
        text-align: center;
    }
    footer a.btn_top {
        right: 0px;
    }
    /* g-nav */
    #g-nav-menu, .side-wrap,
    .sidemenu h2 {
        display: none;
    }
    .slicknav_menu {
        display: block;
        padding: 10px;
        background: #1eb9eb;
    }
    .slicknav_nav ul {
        margin: 0;
    }
    .slicknav_menu ul a {
        padding: 5px 20px;
        color: #fff;
        text-align: left;
        border-bottom: 1px solid #fff;
    }
    .slicknav_nav a:hover{
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        color: #fff;
        background: #1eb9eb;
    }
    .slicknav_menu a {
        padding: 0 1em;
        margin: 0;
    }
    a.slicknav_btn.slicknav_collapsed {
/*        width: 100%;*/
        display: block;
    }
    .slicknav_menu img {
        display: block;
        margin: 20px auto 0;
        width: 100%;
        height: auto;
    }
    .slicknav_btn {
        float: none;
        background-color: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .slicknav_menu .slicknav_menutxt {
        display: block;
        padding: 15px 30px;
        text-shadow: none;
        color: #fff;
        background-color: transparent;
        float: none;
        line-height:1;
        text-align: right;
    }
    .slicknav_menu .slicknav_icon{
        float: none;
        display: block;
        position: absolute;
        top: 10px;
        right: 18px;
    }
    .slicknav_menu .slicknav_icon-bar {
        background-color: #fff;
        text-shadow: none;
        -webkit-box-shadow:none;
    }
    .slicknav_nav .slicknav_row:hover{
        border-radius: 0;
        background: #16a6d4;
    }


    .btn_10 {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    /* side menu */
    .side-link img {
        min-width: 80%;
    }

    /* sns */
    .button-w {
        display: block;
        width: 24%;
        margin: 0 0.5% 10px;
    }
    .alignleft,.alignright{
        float: none;
        margin: 0;
    }
    .subcontents >img {
        margin-bottom: 20px;
    }
    .subcontents img{
        width: 100%
    }
}