/*  Typo
----------------------------------------------- */

a:link, a:visited {
    text-decoration: underline;
    color:#EC4413;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }

h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }
p { font: 14px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; }


/*  Layout
----------------------------------------------- */
body {
    background: #fff;
    padding:0;
    margin:0 auto;
}

div.cen {
    text-align:center !important;
}

/*  ヘッダー
----------------------------------------------- */
#header {
    width:100%;
    padding:5px 0;
    margin:0 auto;
    background:#fff;
    position:fixed;
    z-index:1000;
}

#logobox {
    width:1000px;
    margin:0 auto;
    padding:0;
}

#logo-b {
    width:400px;
    margin-left:10px;
    float:left;
}

#info-b {
    width:300px;
    margin-right:10px;
    float:right;
}

#headimage {
    width:100%;
    height:350px;
    margin:0 auto;
}

#header a:hover { text-decoration:none; }

#navigation {
    float:left;
    width:220px;
    padding:10px;
    background:#e6ffe9;
}

#container {
    width:100%;
    margin:0 auto;
}

#content {
    width:1000px;
    margin:0 auto;
    padding:10px 5px;
    min-height:200px;
    position: relative;
    z-index: 10;
}

#visual {
    width:1000px;
    margin:0 auto;
    padding:10px auto;
}

/* パンくずリスト
----------------------------------------------- */
#breadcrumb {
    margin:0 0 0 0.5em;
}
#breadcrumb:after {
    content: "";
    display: block;
    clear: both;
}
#breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#breadcrumb ol li {
    float: left;
    margin: 0 8px 0 0;
    font-weight:none;
}
#breadcrumb ol li a {
    padding: 0 20px 0 0;
    background: url(https://u.jimcdn.com/cms/o/s10b17e7d6c418c18/userlayout/img/arrow-breadcrumbs.png?t=1553263331) center right no-repeat;
    font-weight:none;
}
#breadcrumb ol li a.cc-nav-current {
    text-decoration: none;
    color:#666;
    font-weight:none;
    background: none;
}

/* 見出し・文字
----------------------------------------------- */
#content h1 {
    font-size:16pt;
    color:#333333;
    background:#eaf3ff;
    border-left: 8px solid #000080;
    padding: 10px 0.5em;
    margin-top:5px;
    font-family: "Maru Folk Regular", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

#content h2 {
    font-size:16pt;
    border-bottom: solid 3px #cce4ff;
    font-family: "Maru Folk Regular", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    position: relative;
    text-indent:0.5em;
    margin-top:10px;
}

#content h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #5472cd;
    bottom: -3px;
    width: 20%;
}

#content h2 a {
    color:#0000ff;
    font-weight:bold;
}

#content h3 {
    font-size:14pt;
    margin-left:0.5em;
    padding-left:0.5em;
    border-bottom: none;
    margin-top:10px;
    color:#333;
    font-family: "Maru Folk Regular", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

#content a:link, a:visited {
    text-decoration: underline;
    color:#0000ff;
}
#content a:active { text-decoration: underline; }
#content a:hover { text-decoration:none; }

/* 文字
----------------------------------------------- */
#content p {
    font-size:11pt;
    margin:3px 0.5em;
}

#content p.mu {
    text-indent:-1em;
    margin-left:1em;
    margin-top:10px;
}

p.rekome {
    text-indent:-1em;
    margin-left:2em;
    font-size:11pt;
}

p.kome {
    text-indent:-1em;
    padding-left:1em;
    margin-top:5px;
}

#content li {
    font-size:12pt;
    margin-top:10px;
    line-height:150%;
}

#content figcaption {
    font-size: 14px;
}

.text {
    padding:0 1em;
}

/*  ブログページ
----------------------------------------------- */
.j-blog-meta a {
    text-decoration: none !important;
}

#cc-m-1 {
    margin-top:10px;
}

.cc-m-spacer {
    height:5px !important;
}

/*  ボタン
----------------------------------------------- */
.j-calltoaction-link.j-calltoaction-link-style-1 {
    font-size:16px;
    font-weight:bold;
    background: #fff !important;
    color: #000080 !important;
    border:2px solid #000080;
    border-radius: 10px !important;
    padding: 10px 1em !important;
    box-shadow: none !important;
}

.j-calltoaction-link-style-2 {
    font-weight:bold;
    background: #6495ed !important;
    border-radius: 10px !important;
    padding: 10px 1em !important;
    box-shadow: none !important;
}

.j-calltoaction-link-style-3 {
    background:#6495ed !important;
    border-radius: 10px !important;
    padding: 10px 1em !important;
    box-shadow: none !important;
}

/*  お知らせ
----------------------------------------------- */
p.news {
    margin:10px;
    padding:0 10px;
    border-bottom:2px dotted #333333;
}

#content figcaption {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 11pt;
}

#content li {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size:11pt;
}

/* table 枠
----------------------------------------------- */
td {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #666666;
    padding: 5px 0px;
    font-size:14px !important;
    font-family: "Maru Folk Regular", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

th {
    border: 1px solid #666666;
    background:#a8d3ff;
    padding: 5px;
    font-weight:normal;
    font-size:14px !important;
    font-family: "Maru Folk Regular", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

table {
    border-collapse: collapse;
    margin-bottom:0px;
}

/*  新レイアウト
----------------------------------------------- */

/* ナビゲーションレイアウト PC用 */
@media screen and (min-width: 769px) {

    #bucktop {
        display:inline-block;
        padding:0;
        position:fixed;
        top:150px;
        right:-1px;
        z-index:900;
    }

    #logobox {
        width:1000px;
        padding:0;
    }

    #top-image {
        display: none;
    }

    #nav-top #toggle {
        display: none;
    }

    #menu {
        clear:both;
        width: 100%;
        margin:0;
        padding:0;
        background: #0079c2;
        border-bottom: 1px solid #fff;
    }

    nav {
        width: 1000px;
        margin:0 auto;
        padding:0;
        background: #0079c2;
        border-left:1px solid #ffffff;
        clear:both;
    }

    nav:after {
        content: "";
        display: block;
        clear: both;
    }

    nav ul {
        list-style-type: none;
    }

    nav ul.cc-nav-level-0 {
        width: 100%;
        *zoom: 1;
        margin: 0;
        padding: 0;
    }

    nav ul.cc-nav-level-0:after {
        content: "";
        display: block;
        clear: both;
    }

    nav ul.cc-nav-level-0 li {
        float: left;
        *zoom: 1;
        white-space: nowrap;
        width:142px;
    }

    nav ul.cc-nav-level-0 li ul {
        visibility: hidden;
        position: absolute;
        margin: 0;
        padding:0;
        z-index: 1 !important;
    }

    nav ul.cc-nav-level-0 li:hover > ul {
        visibility: visible;
    }

    nav ul.cc-nav-level-0 li ul li {
        width: auto !important;
        clear: left;
        position: relative;
    }

    nav ul.cc-nav-level-0 li ul li ul {
        top: 0;
        left: 100%;
    }

    nav ul.cc-nav-level-0 li a {
        display: block;
        background-color: #0079c2;
        border-right: 1px solid #eeeeee;
        padding: 1.2em;
        color: #fff;
        text-align: center;
        text-decoration: none;
    }

    nav ul.cc-nav-level-0 li a:hover {
        background-color: #00a7db;
    }

    nav ul.cc-nav-level-0 li a.cc-nav-current,
    #nav ul.cc-nav-level-0 li.cc-nav-parent a {
        background-color: #00a7db;
    }

    nav ul.cc-nav-level-0 li ul li a {
        text-align: left;
    }

    nav ul.cc-nav-level-1 a,
    #nav ul.cc-nav-level-2 a {
        background: rgb(30,30,30);
        filter: alpha(opacity=9);
        -ms-filter: "alpha(opacity=90)";
        -moz-opacity: 0.9;
        -khtml-opacity: 0.9;
        opacity: 0.9;
        text-align: center;
        width:150px;
    }

    nav ul.cc-nav-level-1 a.cc-nav-current,
    #nav ul.cc-nav-level-2 a.cc-nav-current {
        background: #0079c2;
    }

    #content {
        padding-top:8vw;
    }
}

/* ナビゲーションレイアウト スマホ用 */
@media screen and (max-width: 768px) {

    #bucktop {
        display: none;
    }

    #header {
        display: flex;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
        margin:0;
    }

    #logobox {
        display: none;
    }

    #header .top-image {
        padding:0;
        text-align:right;
    }

    #nav-top {
        margin: 0;
    }

    #nav-top nav {
        position: absolute;
        top: -150vh;
        left: 0;
        padding: 60px 0 0 0;
        z-index: 100;
        overflow: auto;
        box-sizing: border-box;
        width: 100%;
        height: calc(100vh - 50px);
        text-align: left;
        transition: .3s ease-in-out;
        background: rgba(255,255,255,.95);
    }

    #nav-top nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #nav-top ul li {
        line-height: 1.5;
    }

    #nav-top ul li a {
        display: block;
        color: #666666 !important;
        text-decoration: none;
        font-weight: 700;
        margin: 0;
        padding: 10px 0 10px 50px;
    }

    #nav-top ul li ul li a {
        padding: 10px 0 10px 60px;
    }

    #nav-top ul li ul li ul li a {
        padding: 10px 0 10px 70px;
    }

    .openNav nav {
        transform: translateY(150vh);
    }

    #nav-top.openNav nav {
        background: rgba(255,255,255,.95);
    }

    .openNav #toggle span:nth-child(1) {
        top: 11px;
        border-color: #666666;
        transform: rotate(-45deg);
    }

    .openNav #toggle span:nth-child(2),
    .openNav #toggle span:nth-child(3) {
        top: 11px;
        border-color: #666666;
        transform: rotate(45deg);
    }

    #toggle {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 200;
        width: 30px;
        height: 25px;
        cursor: pointer;
    }

    #toggle div {
        position: relative;
    }

    #toggle span {
        position: absolute;
        display: block;
        width: 100%;
        border-bottom: solid 3px #666666;
        transition: .38s ease-in-out;
    }

    #toggle span:nth-child(1) { top: 0; }
    #toggle span:nth-child(2) { top: 8px; }
    #toggle span:nth-child(3) { top: 16px; }

    #container {
        overflow: hidden;
        margin:0;
        width: 100%;
        padding:0 5px;
    }

    #content {
        clear: both;
        margin:0 auto;
        width: 100%;
        padding: 20px 0px 10px 0px;
        padding-top:18vw;
    }

    #sideber {
        margin:0 auto;
        width: 100%;
    }

    #footer {
        clear: both;
        margin:0 auto;
        width: 100%;
        padding: 20px 0px 5px 0px;
        overflow: hidden;
    }

    .div {
        width:100%;
        clear:both;
    }
}

@media screen and (max-width: 599px) {

    #footerFloatingMenu {
        display: block;
        width: 100%;
        height:70px;
        position: fixed;
        left: 0px;
        bottom: -10px;
        text-align: center;
        margin: 0 auto;
        padding: 20px 10px 0 10px;
        background-color: #6495ed;
        color: #ffffff;
        font-size: 3em;
        z-index:1000;
    }

    #footerFloatingMenu a {
        text-decoration: none !important;
    }

    a.home, a.tel, a.mail, a.top {
        position: relative;
        padding: 10px 10px;
    }

    a.home:before {
        font-family: FontAwesome;
        content: "\f015";
        color: #ffffff;
        padding-bottom:10px;
    }

    a.home:after {
        content: "HOME";
        font-size: .3em;
        color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        padding:0;
        text-align: center;
    }

    a.tel:before {
        font-family: FontAwesome;
        content: "\f095";
        color: #ffffff;
        padding-bottom:10px;
    }

    a.tel:after {
        content: "TEL";
        font-size: .3em;
        color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    a.mail:before {
        font-family: FontAwesome;
        content: "\f0e0";
        color: #ffffff;
        padding-bottom:10px;
    }

    a.mail:after {
        content: "お問い合わせ";
        font-size: .24em;
        color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        padding:0;
        text-align: center;
    }

    a.top:before {
        font-family: FontAwesome;
        content: "\f102";
        color: #ffffff;
        padding-bottom:10px;
    }

    a.top:after {
        content: "TOP";
        font-size: .3em;
        color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    .j-hgrid .cc-m-hgrid-column {
        float: none;
        width: 100% !important;
        padding-left: 0;
        padding-right: 0 3px;
        margin-left: 0;
        margin-right: 0;
    }

    #cc-m-container img {
        width:95%;
    }
}

/*  お客様の声
----------------------------------------------- */
div.koe {
    position: relative;
    background: #dfefff;
    padding: 1rem 1rem;
    border: 4px solid #96c2fe;
}

div.koe:before {
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 4px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    content: '';
    border: 2px dotted #96c2fe;
}

div.koetitle {
    font-size:20px;
    font-weight:bold;
    border-bottom:solid 1px #96c2fe;
    padding: 3px 3px;
}

div.koe2 {
    position: relative;
    background: #ffeaff;
    padding: 1rem 1rem;
    border: 4px solid #ffb6c1;
}

div.koe2:before {
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 4px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    content: '';
    border: 2px dotted #ffb6c1;
}

div.koetitle2 {
    font-size:20px;
    font-weight:bold;
    border-bottom:solid 1px #ffb6c1;
    padding: 3px 5px;
}

/* ================================================
   TERUMA素 画像CSS
   ================================================ */

.teruma-img-main {
    background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/s10b17e7d6c418c18/image/i6badf7d538484ee1/version/1774342157/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 10px auto;
    display: block;
}

.teruma-img-jirei {
    background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=440x10000:format=png/path/s10b17e7d6c418c18/image/i53831173085b6eb9/version/1774340827/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 10px auto;
    display: block;
}

.teruma-img-fun {
    background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/s10b17e7d6c418c18/image/i745adb66eb5bca0b/version/1774340819/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 10px auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .teruma-img-main,
    .teruma-img-jirei,
    .teruma-img-fun {
        height: 250px;
    }
}