@charset "utf-8";

/* ======= すべて共通 ======= */
html, body {
    font-size: 16px;
    font-family: sans-serif;
    color: #244824;
    margin: 0;
}

h1 {
    margin: 30px 0 10px 0;
    font-size: 24px;
    font-weight: bold;
}

h2 {
    font-size: 18px;
    font-weight: bold;
}

h3 {
    margin: 30px 0 10px 0;
    font-size: 18px;
    font-weight: bold;
}

h4 {
    font-size: 16px;
    margin-top: 20px;
}

p {
    margin: 0 0 5px 0;
}

ol {
    margin: 0;
    padding: 0;
}

ul {
    margin: 10px 0 10px 0;
    padding: 0 0 0 20px;
}

li {
    line-height: 1.8;
    list-style-type: none;
}

dt, dd {
    line-height: 1.8;
}

hr {
    border: none;
    border-top: 1px dashed #3A843A;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px dashed #cfcfcf;
    padding: 8px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    text-align: left;
    vertical-align: middle;
}

/* ======= 共通の見出し ======= */
.container {
    max-width: 1000px;
}

/* 別タブで開くマーク */
a[target="_blank"]::after {
    content: url(../images/opentab.png);
    margin-left: 5px;
}

/* ======= ヘッダー ======= */
/* jumbotron */
header .jumbotron {
    margin-bottom: -11px;
    background: #98cd50;
}

.jumbotron h1 {
    font-size: 40px;
}

.jumbotron p {
    font-size: 16px;
}

.header-sub {
    font-size: 20px;
    margin-left: 20px;
}

/* ======= ナビゲーション ======= */
.nav-inner {
    padding: 10px 10px 0 10px;
    background: #98cd50;
}

.hamburger {
    border: none;
    width: 50px;
    height: 50px;
    background: url(../images/hamburger.png) no-repeat;
    background-size: contain;
}

.navbar {
    display: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #3A843A;
}

.navbar li a {
    display: block;
    padding: 10px 8px;
    color: #fff;
    text-decoration: none;
}

.navbar li a:hover {
    background: #fff;
    color: #3a843a;
    font-weight: bold;
}

@media only screen and (min-width: 768px) {
    /* ナビゲーション */
    .hamburger {
        display: none;
    }
    .navbar {
        display: flex !important;
        justify-content: flex-end;
    }
    .navbar li:first-child {
        margin-right: auto;
    }
}

/* ======= パンくず ======= */
.breadcrumb {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li::after {
    content: "»";
}

.breadcrumb li:last-child::after {
    content: none;
}

.breadcrum a {
    text-decoration: none;
    color: #333;
}

/* ======= 基本レイアウト ======= */
h1 .subtitle {
    font-size: 17px;
    color: #1a6bbf;
}

/* 目立つ文字色 */
.etc {
    color: #80989b;
}

.sign-g {
    color: #690;
}

.sign-gb {
    color: #690;
    font-weight: bold;
}

.sign-c {
    color: #bd6856;
}

.sign-cb {
    color: #bd6856;
    font-weight: bold;
}

.sign-p {
    color: #FF6666;
}

.sign-pb {
    color: #FF6666;
    font-weight: bold;
}

.sign-b {
    color: #3366FF;
}

.sign-bb {
    color: #3366FF;
    font-weight: bold;
}

.sign-usub {
    color: #7D9EC0;
}

.sign-usubb {
    color: #7D9EC0;
    font-weight: bold;
}

.sign-o {
    color: #ec7600;
}

.sign-ob {
    color: #ec7600;    
    font-weight: bold;
}

.sign-v {
    color: #e186ac;
}

.sign-vb {
    color: #e186ac;
    font-weight: bold;
}

/* 位置 右へ */
.migi20 {
    margin-left: 20px;
}

.migi30 {
    margin-left: 30px;
}

/* 位置 下へ */
.shita20 {
    margin-top: 20px;
}

.shita40 {
    margin-top: 40px;
}

/* インデント下げ */
.note {
    padding-left: 1em;
    padding-right: 1em;
    text-indent: -1em;
}

/* 囲い 鍵送り先 */
.kakoi {
    border: 1px dashed #3a843a;
    padding: 0 16px;
    margin: 10px 0;
}

/* 囲い 料金表 */
.kakoi2 {
    border: 1px dashed #3a843a;
    padding: 20px 20px 15px 20px;
    margin-top: 20px;
    font-size: 18px;
}

/* リスト */
.number li {
    list-style-type: decimal;
    margin-left: 20px;
    padding: 5px;
    line-height: 1.6; 
}

.ten li {
    list-style-type: disc;
    margin-left: 20px;
    padding: 5px;
    line-height: 1.6; 
}

.tensema li {
    list-style-type: disc;
    margin-left: 20px;
    padding: 0; 
}

/* 画像 */
.snap {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 5px 0 0 40px;
}

.fuku {
    display: block;
    max-width: 100%;
    height: auto;
    padding: 20px 0 0 0; 
    width: 290px;
}

.back-ty {
    background: url(../images/illust/dogcat.png) no-repeat right bottom;
    background-size: contain;
}

.back-cs {
    background: url(../images/illust/house-cat.png) no-repeat right bottom 120px;
    background-size: 270px;
}

.back-ps {
    background: url(../images/illust/house-dog.png) no-repeat right bottom 120px;
    background-size: 270px;
}

.back-qafuku {
    background: url(../images/illust/qa-fuku.png) no-repeat right bottom;
    background-size: 230px;
}

.back-qacat {
    background: url(../images/illust/qa-cat.png) no-repeat right bottom;
    background-size: 270px;
}

.back-qadog {
    background: url(../images/illust/qa-dog.png) no-repeat right bottom;
    background-size: 250px;
}

.back-toku {
    background: url(../images/illust/toku.png) no-repeat right center;
    background-size: 270px;
}

.back-topcat {
    background: url(../images/illust/stand-cat.png) no-repeat right bottom;
    background-size: 270px;
}

.back-topdog {
    background: url(../images/illust/stand-dog.png) no-repeat right bottom;
    background-size: 230px;
}

/* マーカー */
.marker-g {
   background:linear-gradient(transparent 50%, #ccff99 0%); 
}

.marker-y {
    background:linear-gradient(transparent 50%, #ffffcc 0%);
}

.marker-o {
    background:linear-gradient(transparent 50%, #ffcc99 0%);
}

.marker-p {
    background:linear-gradient(transparent 50%, #ffccff 0%);
}

.marker-v {
    background:linear-gradient(transparent 50%, #d6d6ff 0%);
}

.marker-b {
    background:linear-gradient(transparent 50%, #ccffff 0%);
}

.marker-k {
    background:linear-gradient(transparent 50%, #c1e0ff 0%);
}

/* === ボタン === */
/* トップ index内*/
.btn {
    font-size: 16px;
    margin-top: 5px;
}

/* ボタン 初めて*/
.btn-usub {
    background: #e0f4ff;
    border: 1px solid #1396c0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
    margin-top: 10px;
}

.btn-usub:hover, .btn-usub:focus {
    background: #87cefa;
}
.btn-usub:active {
    background: #87cefa;
}

/* ボタン リピート*/
.btn-usup {
    background: #ffdbed;
    color: #dc143c;
    border: 1px solid #eb6ea5;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 10px;
}

.btn-usup:hover, .btn-usup:focus {
    background: #ffb6c1;
}
.btn-usup:active {
    background: #ffb6c1;
}

/* ボタン 予約cs*/
.btn-o {
    background: #ffd1a3;
    color: #244824;
    border: 1px solid #f6ad49;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
    margin: 10px 0 5px 0;
}

.btn-o:hover, .btn-o:focus {
    background: #ffbf7f;
}
.btn-o:active {
    background: #ffbf7f;
}

/* ボタン 予約ps*/
.btn-g {
    background: #d6e9ca;
    color: #244824;
    border: 1px solid #88cb7f;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
    margin: 10px 0 5px 0;
}

.btn-g:hover, .btn-g:focus {
    background: #98d98e;
}
.btn-g:active {
    background: #98d98e;
}

/* ボタン 問合せ*/
.btn-y {
    background: #FFFFD1;
    color: #244824;
    border: 1px solid #f7c114;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
    margin: 10px 0 5px 0;
}

.btn-y:hover, .btn-y:focus {
    background: #F5E56B;
}
.btn-y:active {
    background: #F5E56B;
}

/* ======= よくある質問 ======= */
.qa {
    margin-top: 1em;
    padding: 8px 0 0 50px;
}

.qa-etc {
    margin-top: -2em;
    padding: 8px 0 0 50px;
}

.question {
    font-weight: 600;
    background: url(../images/q.png) no-repeat;
    background-size: 40px 40px;
}

.answer {
    margin-bottom: 2em;
    background: url(../images/a.png) no-repeat;
    background-size:  40px 40px;
}

.qa-mokuji li {
    margin-right: 25px;
}

/* ======= 自己紹介 ======= */
.float-box-none {
    float: none;
    margin-right: 1em;
    margin-bottom: 0.5em;
    vertical-align: baseline;
    text-align: center;
}

.float-box-left {
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
    vertical-align: baseline;
}

.float-box-right {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
    vertical-align: baseline;
}

.float-clear {
    overflow: hidden;
}

.float-clear p {
    margin-bottom: 5px;
}

.float-clear li {
    line-height: 1.8;
}

/* ======= 特定商法 ======= */
.toku th {
    white-space: nowrap;
}

/* ======= フッター ======= */
footer {
    margin-top: 30px;
}

/* フッター1段目 */
.footer-up {
    padding: 20px 20px 10px 20px;
    background: #edf7df;
    text-align: right;
    border-radius: 10px 10px 0 0;
}

.footer-info li {
    display: inline;
    padding: 0 0 0 1rem;
}

/* フッター2段目 */
.footer-ud {
    padding: 20px 20px 10px 20px;
    background: #98cd50;
    margin-bottom: 20px;
    border-radius: 0 0 10px 10px;
}

.footer-nav li {
    display: inline;
    padding: 0 1rem 0 0;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
}

.footer-nav a:hover {
    opacity: 0.5;
}