@charset "utf-8";
@media screen and (min-width: 769px){
    .thm-footer .inner {
        margin: 0 auto;
        width: 970px
    }

    #gcse, #gcse-footer {
        width: 165px
    }

    #gcse .gsc-control-searchbox-only, #gcse-footer .gsc-control-searchbox-only {
        background-color: #fff;
        margin: 0
    }

    #gcse form.gsc-search-box, #gcse-footer form.gsc-search-box {
        margin: 0
    }

    #gcse td.gsc-input, #gcse-footer td.gsc-input {
        padding: 0
    }

    #gcse div.gsc-input-box, #gcse div.gsc-input-box table, #gcse-footer div.gsc-input-box, #gcse-footer div.gsc-input-box table {
        border: none !important
    }

    #gcse div.gsc-input-box .gsib_a, #gcse-footer div.gsc-input-box .gsib_a {
        height: 20px;
        margin: 0;
        padding: 0 10px;
        text-align: left
    }

    #gcse input.gsc-input, #gcse-footer input.gsc-input {
        background-color: transparent;
        background-color: rgba(0, 0, 0, 0)
    }

    #gcse td.gsc-search-button, #gcse-footer td.gsc-search-button {
        width: 25px;
        border: none
    }

    #gcse input.gsc-search-button, #gcse-footer input.gsc-search-button {
        background-color: transparent;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        height: 17px;
        margin: 0;
        padding: 0;
        vertical-align: -6px;
        width: 17px
    }

    .footer-nav {
        padding: 30px 0 10px
    }

    .footer-nav-wrapper {
        position: relative
    }

    .footer-control {
        position: absolute;
        right: 0;
        top: 0
    }

    .footer-control .item {
        float: right
    }

    .footer-sitemap .sitemap-list {
        margin-left: -12px;
        overflow: hidden
    }

    .footer-sitemap .sitemap-list .item {
        float: left;
        font-size: 15px;
        margin-left: 12px;
        width: 130px
    }

    .footer-sitemap .sitemap-list .item > .link {
        border-bottom: 2px solid #ccc;
        display: block
    }

    .footer-media .caption, .footer-media .name, .footer-service .caption, .footer-service .name {
        display: inline-block
    }

    .footer-sitemap .sitemap-list .item > .link:hover {
        color: #333;
        border-bottom: 2px solid #4a4a4a;
        text-decoration: none
    }

    .footer-sitemap .sitemap-sub-list {
        margin-left: 5px;
        padding-top: 10px
    }

    .footer-sitemap .sitemap-sub-list .sub-item {
        margin: 0 0 5px
    }

    .footer-sitemap .sitemap-sub-list .sub-item > .link {
        font-size: 13px
    }

    .footer-sitemap .sitemap-sub-list .sub-item > .link:hover {
        text-decoration: underline
    }

    .footer-company {
        background-color: #fff;
        padding: 10px 0 15px
    }

    .footer-company .head {
        font-size: 16px;
        padding: 18px 0 5px
    }

    .footer-company .media-list .item-group, .footer-company .service-list .item-group {
        border-left: 1px solid #eee;
        font-size: 10px;
        margin-top: 10px;
        line-height: 1.8;
        padding-left: 10px
    }

    .footer-company .media-list .item-group:first-child, .footer-company .service-list .item-group:first-child {
        border-left: none
    }

    .footer-media .title {
        color: #ccc;
        float: right;
        font-family: arial, helvetica, sans-serif;
        font-size: 35px
    }

    .footer-media .item-group {
        float: left;
        width: 310px
    }

    .footer-service {
        position: relative
    }

    .footer-service .head {
        border-bottom: 1px solid #ccc
    }

    .footer-service .tab {
        border: solid #ccc;
        border-width: 1px 1px 0;
        color: #999;
        cursor: pointer;
        height: 23px;
        line-height: 23px;
        margin-left: 5px;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 22px;
        width: 180px
    }

    .footer-service .tab.is-open {
        background-color: #ccc;
        color: #fff
    }

    .footer-service .tab--first {
        right: 560px
    }

    .footer-service .tab--second {
        right: 375px
    }

    .footer-service .tab--third {
        right: 190px
    }

    .footer-service .tab--fourth {
        right: 5px
    }

    .footer-service .item-group {
        float: left;
        width: 310px
    }

    .footer-common-link {
        background-color: #444;
        font-size: 10px;
        padding: 15px 0
    }

    .footer-common-link .item, .footer-common-link .link {
        color: #fff
    }

    .footer-common-link .item {
        float: left
    }

    .footer-common-link .item:after {
        content: " ｜ ";
        color: #666
    }

    .footer-common-link .item--copyright {
        float: right;
        text-align: right;
        width: 250px
    }

    .footer-common-link .item--copyright:after {
        content: ""
    }

    .page-top {
        background-color: #333;
        bottom: 10px;
        color: #fff;
        display: none;
        outline: 0;
        position: fixed
    }

    .page-top.is-visible {
        display: block
    }

    .thm-footer {
        background-color: #fff;
        padding-bottom: 38px;
        position: relative
    }

    .thm-footer .columnist {
        width: 970px;
        margin: 40px auto;
        letter-spacing: -.4em
    }

    .thm-footer .columnist .heading {
        border-top: solid 4px #e40001;
        background-color: #f5f5eb;
        color: #e40001;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: normal;
        line-height: 1;
        margin-bottom: 20px;
        padding: .5em 6px;
        position: relative
    }

    .thm-footer .columnist .heading:before {
        border-top: solid 1px #fff;
        content: "";
        display: block;
        height: 0;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .thm-footer .columnist > .caption {
        color: #666;
        font-size: 16px;
        letter-spacing: normal;
        margin-bottom: 20px
    }

    .thm-footer .columnist .item {
        display: inline-block;
        vertical-align: top;
        letter-spacing: normal;
        width: 32.5%;
        margin-right: 1%;
        margin-bottom: 10px
    }

    .thm-footer .columnist .item:nth-of-type(3n) {
        margin-right: 0
    }

    .thm-footer .columnist .item .link {
        background-color: #f5f5eb;
        display: block;
        padding: 10px
    }

    .thm-footer .columnist .item .link .figcaption, .thm-footer .columnist .item .link .figure {
        display: inline-block;
        vertical-align: top
    }

    .thm-footer .columnist .item .link .figure {
        width: 100px;
        height: 100px;
        margin-right: 5px
    }

    .thm-footer .columnist .item .link .figcaption {
        width: 185px
    }

    .thm-footer .columnist .item .link .columnist-name {
        font-size: 18px;
        color: #333
    }

    .thm-footer .columnist .item .link .columnist-summary, .thm-footer .columnist .item .link .columnist-title {
        display: block
    }

    .thm-footer .columnist .item .link .columnist-title {
        font-size: 14px;
        color: #666
    }

    .thm-footer .columnist .item .link .columnist-summary {
        font-size: 12px;
        color: #999
    }

    .thm-footer .footer-nav {
        background-color: #f5f5eb;
        padding: 16px 0
    }

    .thm-footer .footer-logo {
        padding-left: 25px
    }

    .thm-footer .footer-logo .link, .thm-footer .footer-logo .link .logo {
        display: block;
        height: 33px;
        width: 150px;
    }

    .thm-footer .footer-control {
        margin-top: 18px
    }

    .thm-footer .footer-control .item--login {
        display: none
    }

    .thm-footer .footer-control .item--social {
        margin: 5px 12px 0 0
    }

    .thm-footer .footer-control .item--social .icon {
        font-size: 16px
    }

    .thm-footer .footer-common-link {
        background-color: #0a3e6f;
        padding: 13px 0 12px
    }

    .thm-footer .footer-common-link .common-link-list {
        letter-spacing: -.4em;
        text-align: center
    }

    .thm-footer .footer-common-link .common-link-list .item {
        display: inline-block;
        float: none;
        letter-spacing: normal;
        margin-left: 24px
    }

    .thm-footer .footer-common-link .common-link-list .item:first-child {
        margin-left: 0
    }

    .thm-footer .footer-common-link .common-link-list .item:after {
        display: none
    }

    .thm-footer .footer-common-link .common-link-list .item .link {
        color: #fff;
        font-size: 12px;
        text-decoration: none;
    }

    .thm-footer .footer-common-link .common-link-list .item .link:hover {
        text-decoration: underline
    }

    .thm-footer .footer-common-link .common-link-list .item--copyright {
        bottom: 9px;
        color: #999;
        display: block;
        font-size: 12px;
        margin: 0;
        position: absolute;
        text-align: center;
        width: 350px;
        left: 50%;
        margin-left: -175px;
    }

    .page-top {
        background: url(../images/btn_page-top.png) no-repeat;
        height: 44px;
        opacity: 1;
        right: 18px;
        text-indent: -9999px;
        width: 43px
    }

}
@media screen and (max-width: 768px) {
    .thm-footer {
        position: relative
    }

    .thm-footer {
        background-color: #fff;
        padding-bottom: 31px;
    }

    .thm-footer .columnist, .thm-footer .columnist-lasthalf {
        margin: 40px 2%;
        letter-spacing: -.4em
    }

    .thm-footer .columnist .heading, .thm-footer .columnist-lasthalf .heading, .thm-footer .columnist-lasthalf > .caption, .thm-footer .columnist > .caption {
        letter-spacing: normal
    }

    .thm-footer .columnist .heading, .thm-footer .columnist-lasthalf .heading {
        border-bottom: solid 4px #e40001;
        color: #e40001;
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
        padding: .5em 6px
    }

    .thm-footer .columnist-lasthalf > .caption, .thm-footer .columnist > .caption {
        color: #666;
        font-size: 14px;
        margin: 1em 0 .5em
    }

    .thm-footer .columnist .item, .thm-footer .columnist-lasthalf .item {
        letter-spacing: normal;
        border-bottom: solid 1px #ccc
    }

    .thm-footer .columnist .item:last-child, .thm-footer .columnist-lasthalf .item:last-child {
        border: none
    }

    .thm-footer .columnist .item .link, .thm-footer .columnist-lasthalf .item .link {
        display: block;
        padding: 10px 0
    }

    .thm-footer .columnist .item .link .figure, .thm-footer .columnist-lasthalf .item .link .figure {
        width: 24%;
        height: auto;
        margin-right: 5px
    }

    .thm-footer .columnist .item .link .figcaption, .thm-footer .columnist .item .link .figure, .thm-footer .columnist-lasthalf .item .link .figcaption, .thm-footer .columnist-lasthalf .item .link .figure {
        display: inline-block;
        vertical-align: top
    }

    .thm-footer .columnist .item .link .figcaption, .thm-footer .columnist-lasthalf .item .link .figcaption {
        width: 72%
    }

    .thm-footer .columnist .item .link .columnist-name, .thm-footer .columnist-lasthalf .item .link .columnist-name {
        font-size: 18px;
        color: #333
    }

    .thm-footer .columnist .item .link .columnist-summary, .thm-footer .columnist .item .link .columnist-title, .thm-footer .columnist-lasthalf .item .link .columnist-summary, .thm-footer .columnist-lasthalf .item .link .columnist-title {
        display: block;
        line-height: 1.2;
        margin-top: 5px
    }

    .thm-footer .columnist .item .link .columnist-title, .thm-footer .columnist-lasthalf .item .link .columnist-title {
        font-size: 14px;
        color: #666
    }

    .thm-footer .columnist .item .link .columnist-summary, .thm-footer .columnist-lasthalf .item .link .columnist-summary {
        font-size: 12px;
        color: #999
    }

    .thm-footer .columnist {
        margin-bottom: 0
    }

    .thm-footer .columnist-lasthalf {
        margin-top: 0
    }

    .thm-footer .columnist-lasthalf .item:first-child {
        border-top: solid 1px #ccc
    }

    .thm-footer .more-columnist {
        background-color: #eee;
        color: #16387c;
        display: block;
        font-size: 1.1em;
        margin: 10px 2% 40px;
        padding: 10px 0;
        text-align: center;
        position: relative
    }

    .thm-footer .more-columnist:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: 8px 6px;
        border-color: #16387c transparent transparent;
        position: absolute;
        right: 10px;
        top: 45%
    }
    .footer-nav {
        background: #4c4c4c;
        overflow: hidden
    }

    .footer-nav .item {
        float: left;
        position: relative;
        text-align: left
    }

    .footer-common-link, .footer-media, .more, .pc-site {
        text-align: center
    }

    .footer-nav .item--home {
        width: 72px
    }

    .footer-nav .item--facebook {
        width: 96px
    }

    .footer-nav .item--twitter {
        width: 118px
    }

    .footer-nav .link {
        color: #fff;
        display: block;
        font-size: 12px;
        font-weight: 700;
        padding: 1px 1px 1px 20px;
        line-height: 1.2
    }

    .footer-nav .icon:before {
        font-size: 26px;
        font-weight: 400;
        position: absolute;
        left: 2px;
        top: 5px
    }

    .arrow, .pc-site:before {
        position: relative
    }

    .page-top {
        color: #fff;
        display: block;
        font-size: 12px;
        font-weight: 700
    }

    .pc-site {
        display: block
    }

    .footer-common-link .item, .footer-media .item {
        display: inline-block
    }

    .pc-site:before {
        font-size: 23px;
        padding-right: 5px;
        top: 5px
    }

    .footer-media {
        padding: 10px 0
    }

    .footer-media .item {
        padding: 10px;
        width: 30%
    }

    .footer-media .item--half {
        padding: 10px 20px;
        vertical-align: middle;
        width: 45%
    }

    .footer-media .media-logo {
        height: auto;
        max-width: 100%
    }

    .footer-common-link {
        font-size: 10px
    }

    .footer-common-link .item, .footer-common-link .link {
        color: #fff
    }

    .footer-common-link .item:first-child .link:before {
        content: ""
    }

    .footer-common-link .link {
        color: #fff;
        display: block;
        font-size: 10px
    }

    .footer-common-link .link:before {
        content: " ｜ "
    }

    @font-face {
        font-family: icomoon;
        src: url(./fonts/icomoon.eot);
        src: url(./fonts/icomoon.eot?#iefix) format('embedded-opentype'), url(./fonts/icomoon.ttf) format('truetype'), url(./fonts/icomoon.woff) format('woff'), url(./fonts/icomoon.svg#icomoon) format('svg');
        font-weight: 400;
        font-style: normal
    }

    .icon:before {
        display: inline-block;
        font-family: icomoon;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 1;
        speak: none;
        text-transform: none;
        vertical-align: baseline
    }

    .icon--line:before, .icon--magnifier:before {
        font-family: cyclestyle
    }

    .icon--footer-home:before, .icon--nav-home:before {
        content: "\e60d"
    }

    .icon--footer-googleplus:before, .icon--googleplus:before, .icon--nav-googleplus:before {
        content: "\e608"
    }

    .icon--facebook:before, .icon--footer-facebook:before, .icon--nav-facebook:before {
        content: "\e602"
    }

    .icon--footer-twitter:before, .icon--nav-twitter:before, .icon--twitter:before {
        content: "\e601"
    }

    .icon--feed:before, .icon--footer-feed:before, .icon--nav-feed:before {
        content: "\e600"
    }

    .footer-nav {
        display: none;
    }

    .footer-nav .control-list {
        padding-left: 21px
    }

    .footer-nav .item {
        height: auto;
        margin: 0;
        padding: 0;
        width: auto
    }

    .footer-nav .item--home {
        margin-right: 20px;
        padding-right: 20px
    }

    .footer-nav .item--googleplus {
        margin: 8px 10px 0 0
    }

    .footer-nav .item--facebook {
        margin: 8px 12px 0 0
    }

    .footer-nav .item--twitter {
        margin: 8px 14px 0 0
    }

    .footer-nav .item--feed {
        margin: 8px 0 0
    }

    .footer-nav .icon {
        display: block;
        height: 18px;
        margin: 0;
        padding: 0;
        text-indent: -9999px;
        width: 20px
    }

    .footer-nav .item--home .icon:before {
        display: none
    }

    .footer-nav .icon--footer-home {
        background: url(http://s.hanjohanjo.jp/base/images/footer-logo@2x.png) no-repeat;
        background-size: 64px 30px;
        display: block;
        height: 30px;
        width: 64px
    }

    .footer-nav .icon--footer-facebook:before, .footer-nav .icon--footer-feed:before, .footer-nav .icon--footer-googleplus:before, .footer-nav .icon--footer-twitter:before {
        color: #666;
        display: block;
        font-size: 18px;
        font-weight: 400;
        height: 18px;
        left: 0;
        line-height: 18px;
        text-indent: 0;
        top: 0;
        width: 20px
    }

    .footer-common-link {
        background-color: #0a3e6f;
        padding: 10px 20px;
    }

    .footer-common-link .common-link-list {
        letter-spacing: -.4em;
        text-align: center;
    }

    .footer-common-link .item {
        letter-spacing: normal;
        margin: 0 9px 12px
    }

    .footer-common-link .item .link:before {
        display: none
    }

    .footer-common-link .item .link {
        font-size: 9px;
        line-height: 11px;
        text-decoration: none;
    }

    .footer-common-link .item--copyright, .pc-site {
        font-size: 9px;
        line-height: 9px;
        position: absolute
    }

    .footer-common-link .item--copyright {
        bottom: 11px;
        color: #999;
        display: block;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
    }

}