@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                      */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/


/* ========================================================

　Global Setting

=========================================================== */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    /* ブラウザのルートフォントサイズである16pxを、1rem＝10pxにリセット */
    font-size: 62.5%;
    /* モバイル時に機能するフォントの自動調整を100％に */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* iOSでリンクタップ時のハイライト表示（枠）を非表示に */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ========================================================

　body

=========================================================== */

body {
    width: 100%;
    height: 100%;
    color: rgba(68, 68, 68, 1.00); /* 基本フォントカラー */
    font: normal 400 1.4rem/2.2rem 'Montserrat', 'YakuHanJP', 'Noto Sans JP', 'メイリオ', 'Meiryo', sans-serif; /* 基本フォントファミリー */
    word-wrap: break-word; /* 英数字の改行制御 */
    letter-spacing: 0.0625rem; /* 文字間隔 */
    overflow-x: hidden;
}

@media only screen and (min-width: 992px) {

    body {
        padding-left: 20.0rem; /* navbarの幅の分、左に余白をとる */
    }

}


/* ========================================================

　Default Link Color

=========================================================== */

a:link,
a:visited {
    color: rgba(0, 100, 205, 1.00); /* ブルー */
    text-decoration: none;
    outline: none;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
    color: rgba(250, 126, 36, 1.00); /* オレンジ */
}

a:active,
a.active {
    color: rgba(230, 0, 20, 1.00); /* レッド */
}

a.mouseEvent {
    pointer-events: none;
}


/* ========================================================

　h1～h6 & Other Text

=========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    letter-spacing: 0.25rem;
}


p,
li {
    margin: 0;
    padding: 0;
}

sup.reg {
    font-size: 60%;
}


/* ========================================================

　#footer

=========================================================== */

.considering footer #ft-sitemap {
    display: none;
}

/*　#ft-sitemap
----------------------------------------------------------- */
/* ドロップダウントグル */
footer #ft-sitemap .toggle {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    line-height: 2.4rem;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* ドロップダウントグルクローズ時 */
footer #ft-sitemap .toggle[aria-expanded="false"] {
    background-color: rgba(250, 126, 36, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

/* 下向きキャレット左 */
footer #ft-sitemap .toggle[aria-expanded="false"]::before {
    margin-right: 1.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f107";
}

/* 下向きキャレット右 */
footer #ft-sitemap .toggle[aria-expanded="false"]::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "Sitemap Open　\f107";
}

/* ドロップダウントグルオープン時 */
footer #ft-sitemap .toggle[aria-expanded="true"] {
    margin-bottom: 1.0rem;
    background-color: rgba(0, 0, 0, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

/* 上向きキャレット左 */
footer #ft-sitemap .toggle[aria-expanded="true"]::before {
    margin-right: 1.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f106";
}

/* 上向きキャレット右 */
footer #ft-sitemap .toggle[aria-expanded="true"]::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "Sitemap Close　\f106";
}

footer #ft-sitemap .collapse {
    max-width: 192.0rem; /* 最大幅固定 */
    padding-bottom: 0;
    border-bottom: 0.1rem solid rgba(250, 126, 36, 1.00);
}

/* メニュー部分 */
/* 第１階層 */
footer #ft-sitemap ul {
    display: block;
    list-style: none;
}

footer #ft-sitemap li {
    padding: 0;
}

/* 第２階層 */
footer #ft-sitemap li ul {
    padding: 0;
}

footer #ft-sitemap li li {
    margin-left: 2.7rem;
}

/* リンク部分 */
footer #ft-sitemap ul a {
    color: rgba(0, 0, 0, 0.70);
    letter-spacing: 0;
}

footer #ft-sitemap ul a:hover {
    color: rgba(0, 0, 0, 1.00);
}

/* 親メニュー */
footer #ft-sitemap .parent,
footer #ft-sitemap .parent > a {
    color: rgba(250, 126, 36, 1.00);
}

/* 前頭の［-］ */
footer #ft-sitemap li li a::before {
    position: relative;
    top: -0.15rem;
    margin-right: 0.25rem;
    content: "-";
}

@media only screen and (min-width: 768px) {

    /* 区切り線 */
    footer #ft-sitemap #sitemap02 {
        border-left: 0.1rem solid rgba(165, 165, 165, 1.00);
        border-right: 0.1rem solid rgba(165, 165, 165, 1.00);
    }

    footer #ft-sitemap li li {
        font-size: 1.3rem;
    }

    /* インプラント治療を～の文字間を詰める */
    footer #ft-sitemap03 .parent:nth-of-type(3) a {
        letter-spacing: -0.05rem;
    }

}

@media only screen and (min-width:992px) {

    footer #ft-sitemap {
        padding-top: 1.0rem;
    }

    /* ドロップダウントグルを非表示に */
    footer #ft-sitemap .toggle {
        display: none;
    }

    /* サイトマップ部分を表示 */
    footer #ft-sitemap .collapse:not(.show) {
        display: block;
    }

    footer #ft-sitemap .collapse {
        border-bottom: none;
    }

    footer #ft-sitemap ul {
        margin-bottom: 0;
    }

    footer #ft-sitemap li li {
        margin-left: 2.5rem;
        font-size: 1.2rem;
    }

    footer #ft-sitemap li li a::before {
        margin-right: 0.5rem;
    }

    /* インプラント治療を～の文字間を通常に戻す */
    footer #ft-sitemap03 .parent:nth-of-type(3) a {
        letter-spacing: 0;
    }

}

@media only screen and (min-width:1024px) {

    footer #ft-sitemap li li {
        font-size: 1.3rem;
    }

}

@media only screen and (min-width:1100px) {

    footer #ft-sitemap ul {
        padding-left: 2.5%;
    }

}

@media only screen and (min-width: 1200px) {

    footer #ft-sitemap ul {
        padding-left: 3.0rem;
    }

    footer #ft-sitemap li li {
        font-size: 1.4rem;
    }

}

@media only screen and (min-width: 1600px) {

    footer #ft-sitemap ul {
        padding-left: 5.0rem;
    }

}

/*　#brand
----------------------------------------------------------- */
.considering footer #brand {
    display: none;
}

footer #brand {
    padding-top: 1.0rem;
    padding-bottom: 3.0rem;
}

/* 会社名を太字に */
footer #brand .row > div[class^="col-"]:nth-of-type(1) p {
    margin-top: 0.5rem;
    font-weight: 700;
}

footer #brand .row > div[class^="col-"]:nth-of-type(2) p {
    margin-top: -0.25rem;
}

/* お問い合わせボタン */
footer #brand .row > div[class^="col-"]:nth-of-type(3) div a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 29.0rem;
    height: 4.5rem;
    margin-top: 0.5rem;
    border: 0.2rem solid rgba(245, 130, 40, 1.00);
    background: rgba(245, 130, 40, 1.00) url("../images/caret_right_w.png") right 5% center no-repeat; /* 背景色とキャレット */
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
}

/* カイマンデンタルは～ */
footer #brand .container > .row > div[class^="col-"]:last-child {
    margin-top: 2.0rem;
}

/* Copyright */
footer aside {
    padding: 0.5rem 0;
    background-color: rgba(85, 85, 85, 1.00);
    color: rgba(255, 255, 255, 1.00);
    font-family: 'Montserrat';
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.6rem;
}

@media only screen and (min-width: 768px) {

    footer #brand {
        padding-bottom: 1.0rem;
        border-top: none;
    }

    footer #brand .row > div[class^="col-"]:nth-of-type(1) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    footer #brand .row > div[class^="col-"]:nth-of-type(2) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    footer #brand .row > div[class^="col-"]:nth-of-type(3) {}

    footer #brand .row > div[class^="col-"]:nth-of-type(3) div a {
        margin-top: 0;
    }

    footer #brand .row > div[class^="col-"]:last-child p {
        text-align: center;
    }

}

@media only screen and (min-width: 992px) {

    footer #brand {
        padding-top: 4.0rem;
    }

    footer #brand .row > div[class^="col-"]:nth-of-type(3) div a {
        font-size: 1.8rem;
    }

}


/* ========================================================

　#pageTop

=========================================================== */

.scroll-to-top {
    display: none;
}

@media only screen and (min-width: 992px) {

    .scroll-to-top {
        display: none;
        position: fixed;
        right: 0;
        bottom: 0;
        width: 8.0rem;
        height: auto;
        -webkit-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
        -webkit-animation: slideInBottom 0.3s;
        animation: slideInBottom 0.3s;
        z-index: 1042;
    }

    .scroll-to-top img {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0.7;
    }

    .scroll-to-top:hover img {
        opacity: 1.0;
    }

}


/* ========================================================

　Modal Window

=========================================================== */

/*　モーダル
----------------------------------------------------------- */
.modal-body {
    padding-top: 6.0rem;
    padding-bottom: 3.0rem;
    text-align: center;
}

.modal-body h2 {
    color: rgba(240, 130, 10, 1.00);
}

.modal-body p {
    text-align: justify;
}

.modal-body dl {
    margin: 2.0rem 0;
    text-align: left;
}

.modal-body dt {
    margin-bottom: 1.0rem;
    font-size: 1.6rem;
    font-weight: 500;
}

.modal-body dt:nth-of-type(n+2) {
    margin-top: 4.0rem;
}

.modal-body dd {
    text-align: justify;
}

.modal-body dd ul {
    margin: 0;
    margin: 1.0rem auto 2.0rem 2.0rem;
    padding: 0;
}

.modal-body dd li:nth-of-type(n+2) {
    margin-top: 0.5rem;
}

.modal-body .box {
    margin-top: 1.0rem;
    margin-bottom: 3.0rem;
    padding: 1.0rem;
    border: 0.1rem solid rgba(220, 220, 220, 1.00);
    border-radius: 0.6rem;
}

.modal-body .box p {
    text-align: left;
}

.privacy-modal .close {
    position: absolute;
    top: 1.0rem;
    right: 1.5rem;
    font-size: 4.0rem;
    line-height: 4.0rem;
    opacity: 1;
    z-index: 1;
    -webkit-transition: color 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;

}

.privacy-modal .close:hover {
    color: rgba(250, 126, 36, 1.00);
}

/*　button
----------------------------------------------------------- */
.privacy-modal .btn {
    max-width: 20.0rem;
    margin: 0 auto;
    padding: auto 2.0rem;
    background-color: rgba(240, 130, 10, 1.00);
    border: none;
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
    line-height: 4.0rem;
    outline: none;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.privacy-modal .btn:hover {
    opacity: 0.7;
}

@media only screen and (min-width: 768px) {

    .modal-body .box {
        padding: 2.0rem;
    }

    .modal-body h2 {
        height: 8.0rem;
        font-size: 3.0rem;
    }

}


/* ========================================================

　Animation settings

=========================================================== */

/* 基本設定（共通） */
section .fadein {
    opacity: 0;
    -webkit-transform: translateY(30.0rem);
    -ms-transform: translateY(30.0rem);
    transform: translateY(30.0rem);
    -webkit-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
}

/* 基本設定（共通） */
.animate {
    opacity: 0;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes fadeIn {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@-webkit-keyframes slideInTop {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}

@keyframes slideInTop {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}

@-webkit-keyframes slideInLeft {

    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

}

@keyframes slideInLeft {

    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

}

/* 製品情報のヘッダーに適用 */
@-webkit-keyframes fadRotExp {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%) rotate(0) scale(0);
        transform: translateY(-50%) rotate(0) scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(-50%) rotate(360deg) scale(1.0);
        transform: translateY(-50%) rotate(360deg) scale(1.0);
    }

}

@keyframes fadRotExp {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%) rotate(0) scale(0);
        transform: translateY(-50%) rotate(0) scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(-50%) rotate(360deg) scale(1.0);
        transform: translateY(-50%) rotate(360deg) scale(1.0);
    }

}

/* スクロールトップボタンに適用 */
@-webkit-keyframes blink {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes blink {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/* スクロールトップボタンに適用 */
@-webkit-keyframes slideInBottom {

    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}

@keyframes slideInBottom {

    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

}


/* ========================================================

　動画（Youtube）

=========================================================== */

/*　Youtubeサイトで表示
----------------------------------------------------------- */
.movie {
    margin: 0 auto;
    max-width: 80.0rem;
    border-radius: 0.6rem;
    background-color: rgba(255, 255, 255, 1.00);
    -webkit-box-shadow: 0.25rem 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.50);
    box-shadow: 0.25rem 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.50);
    overflow: hidden;
}

.movie a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.movie .hover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.10);
    z-index: 100;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.movie .hover:hover {
    background: rgba(0, 0, 0, 0.00);
}

.movie .hover i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    color: rgba(68, 68, 68, 1.0);
    font-size: 5.0rem;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.movie a:hover .hover i {
    color: rgba(255, 21, 0, 1.0);
}

.movie .thumbnail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.movie img {
    width: 100%;
    height: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.movie a:hover img {
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.movie .caption {
    position: absolute;
    bottom: 2.0rem;
    width: 100%;
    text-align: center;
}

.movie h3 {
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
    font-weight: 400;
    text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.70), 0 0 0.25rem rgba(0, 0, 0, 0.70), 0 0 0.25rem rgba(0, 0, 0, 0.70);
}

@media only screen and (min-width: 768px) {

    .movie .hover i {
        font-size: 8.0rem;
    }

    .movie h3 {
        font-size: 2.4rem;
    }

}

@media only screen and (min-width: 992px) {

    .movie .hover i {
        font-size: 6.0rem;
    }

}


/* ========================================================

　Other

=========================================================== */

a img {
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

a:hover img {
    opacity: 0.7;
}

/* 画像サイズ */
img.img-max {
    width: 100%; /* 画像の元サイズが小さい場合、.img-fluid（max-width:100%）ではフルサイズにならないので指定。大きな画像に差し替えた場合は削除 */
    height: auto;
}

/*　iframeの埋め込み（YoutubeやGoogleMap）は、レスポンシブ対応のため以下で囲む
----------------------------------------------------------- */
.ifWrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

.ifWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*　button
----------------------------------------------------------- */
.btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    min-height: 4.0rem;
    border: 0;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    letter-spacing: 0;
    outline: none;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn span::before {
    margin-right: 0.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
}

.btn:not(.btn06) span::after {
    margin-left: 1.0rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f061";
}

/* 背景オレンジ */
.btn.btn01 {
    border: 0.2rem solid rgba(245, 130, 40, 1.00);
    background-color: rgba(245, 130, 40, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

.btn.btn01:hover {
    background-color: rgba(245, 130, 40, 0.10);
    color: rgba(250, 126, 36, 1.00);
}

.btn.btn01 span::before {
    content: "\f0c1";
}

/* 背景オレンジ透過10％ */
.btn.btn02 {
    border: 0.2rem solid rgba(245, 130, 40, 1.00);
    background-color: rgba(245, 130, 40, 0.10);
    color: rgba(250, 126, 36, 1.00);
}

.btn.btn02:hover {
    background-color: rgba(245, 130, 40, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

.btn.btn02 span::before {
    content: "\f0c1";
}

/* 背景オレンジ透過0％ */
.btn.btn02z {
    border: 0.2rem solid rgba(245, 130, 40, 1.00);
    color: rgba(250, 126, 36, 1.00);
}

.btn.btn02z:hover {
    background-color: rgba(245, 130, 40, 1.00);
    color: rgba(255, 255, 255, 1.00);
}


.btn.btn02z span::before {
    content: "\f0c1";
}

/* PDF用 */
.btn.btn03 {
    border: 0.2rem solid rgba(85, 85, 85, 1.00);
    background-color: rgba(85, 85, 85, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

.btn.btn03:hover {
    background-color: rgba(85, 85, 85, 0.10);
    color: rgba(85, 85, 85, 1.00);
}

.btn.btn03 span::before {
    content: "\f1c1";
}

/* ムービー用 */
.btn.btn04 {
    border: 0.2rem solid rgba(245, 130, 40, 1.00);
    background-color: rgba(245, 130, 40, 1.00);
    color: rgba(255, 255, 255, 1.00);
}

.btn.btn04:hover {
    background-color: rgba(245, 130, 40, 0.10);
    color: rgba(250, 126, 36, 1.00);
}

.btn.btn04 span::before {
    content: "\f03d";
}

/* 背景ブラック透過10％ */
.btn.btn05 {
    border: 0.2rem solid rgba(85, 85, 85, 1.00);
    background-color: rgba(85, 85, 85, 0.70);
    color: rgba(255, 255, 255, 1.00);
}

.btn.btn05:hover {
    background-color: rgba(255, 255, 255, 0.70);
    color: rgba(85, 85, 85, 1.00);
}

.btn.btn05 span::before {
    content: "\f0c1";
}

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

    .table-responsive::-webkit-scrollbar {
        height: 5px;
    }

    .table-responsive::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: rgba(240, 240, 240, 1.0);
    }

    .table-responsive::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgba(100, 100, 100, 1.0);
    }

}

@media only screen and (min-width: 768px) {

    .btn {
        letter-spacing: 0.1rem;
    }

}

/*　IEハック
----------------------------------------------------------- */
@media all and (-ms-high-contrast: none) {

    /* IEで機能しない display:flex を解除 */
    #mainNav,
    #mainNav .navbar-brand,
    #mainNav .navbar-collapse,
    section {
        display: block;
    }

    #mainNav #other {
        margin-bottom: 30.0rem;
    }

}

/*　Pseudo-hide placeholders when in focus
----------------------------------------------------------- */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input::placeholder,
textarea::placeholder {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder {
    color: transparent;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent;
}



/* ---- End of file --------------------------------------- */