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

@charset "UTF-8";
body {
    font-family: 'Noto Sans Japanese', serif, "\30E1\30A4\30EA\30AA", Meiryo, "\30D2\30E9\30AE\30CE\89D2\30B4   Pro W3", "Hiragino Kaku Gothic Pro", "\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF", "MS PGothic", sans-serif !important;
    color: #333333;
    line-height: 1.3;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
    display: block !important;
}

.pc_dflex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.sp {
    display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }

    .pc_dflex {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

.container {
    max-width: 1200px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
        padding-left: 0;
        padding-right: 0;
    }

    #scroll {
        margin-top: -150px;
        padding-top: 150px;
    }

    #contents {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        max-width: 880px;
        padding: 0;
        margin: 0 40px 0 0;
    }

    #sidebar {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        max-width: 280px;
        padding: 0;
    }
}

section.wrap {
    padding-bottom: 70px;
    display: inline-block;
    width: 100%;
}

a {
    color: #42413d;
    text-decoration: underline;
}

a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    text-decoration: none;
}

a.link {
    color: #007f9e;
    text-decoration: underline;
    font-size: 12px;
}

hr.point {
    border: dashed 0.5px #aaa;
    margin: 20px 15px;
    width: 100%;
}

hr.top {
    border-bottom: solid 1px #007f9e;
    margin-bottom: 45px;
}

/* 見出し */
h2.top {
    font-size: 30px;
    color: #036c85;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: solid 2px #036c85;
}

h2 .head {
    margin-right: 20px;
    height: 70px;
    width: 70px;
}

/*
h3 {
	position: relative;
	display: inline-block;
	margin: 0 0 30px;
	padding: 23px 10px;
	height: 80px;
	max-width: 100%;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 24px;
	background: #036c85;
}

h3:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #036c85;
}
*/

/* icon */
span.icon_arrow1 {
    margin-left: 30px;
    position: relative;
    top: -5px;
}

span.icon_arrow1 a {
    font-size: 13px;
    font-weight: normal;
    color: #ff784f;
    text-decoration: underline;
    padding-left: 3px;
}

span.icon_arrow1:before {
    font-family: FontAwesome;
    content: "\F138";
    padding-right: 0.2rem;
    font-size: 14px;
    font-weight: normal;
    color: #ff784f;
}

/* header */
header.fp-active {
    position: fixed;
    z-index: 100;
    background-color: #fff;
    width: 100%;
}

.header_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.jumbotron.header_bottom {
    margin: 15px 0 0;
    padding: 0;
    background-color: rgba(129, 181, 194, 0.2);
    border-radius: 0;
    height: 40px;
}

.head_padding {
    padding-top: 128px;
}

.header_logo {
    margin: 26px 0 0 0;
}

/* nav */
header li.nav-item {
    padding: 0 25px;
    list-style: none;
    display: inline-block;
    float: none;
}

/*header li.nav-item a.item-1 {*/
/*width: 100px !important;*/
/*}*/

/*header li.nav-item a.item-2 {*/
/*width: 80px !important;*/
/*}*/

header a.nav-link {
    font-weight: bold;
    color: #007f9e;
    text-decoration: none;
    padding: 0;
}

/* footer */
footer {
    background-color: #1c4853;
    margin-top: 100px;
}

footer li.nav-item {
    margin: 33px 0;
}

footer a.nav-link {
    font-weight: normal;
    font-size: 14px;
    border-right: solid 1px #fff;
    color: #fff;
    text-decoration: none;
    padding: 0 25px;
}

footer a.last {
    border-right: none;
}

small {
    display: block;
    text-align: center;
    color: #fff;
    margin: 25px 0 0;
    height: 30px;
    padding: 5px 0;
    background-color: #15182b;
}

@media screen and (max-width: 767px) {
    h2.top {
        font-size: 23px;
        padding-bottom: 10px;
        margin-bottom: 20px;
        text-align: center;
    }

    h2 .head {
        margin-right: 0;
        height: 50px;
        width: 50px;
    }

    header.fp-active {
        height: 50px;
    }

    .header_logo {
        margin: 10px 0 0 0;
        display: block;
    }

    .header_logo img {
        display: block;
        margin: auto;
    }

    footer .nav {
        /*display: block;*/
    }

    footer a.nav-link {
        border: 0;
    }
}

/* フキダシ */
.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 1px 0 3px 30px;
    border-radius: 3px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    background-color: rgba(129, 181, 194, 0.3);
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -23px;
    margin-top: -9px;
    border: 8px solid transparent;
    border-right: 15px solid rgba(129, 181, 194, 0.3);
}

.balloon1-left2 {
    position: relative;
    display: inline-block;
    margin: 0 0 5px 5px;
    border-radius: 3px;
    padding: 0px 5px 1px;
    max-width: 100%;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    background-color: rgba(129, 1, 194, 0.3);
}

.balloon1-left2:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    margin-top: -7px;
    border: 6px solid transparent;
    border-right: 10px solid rgba(129, 181, 194, 0.3);
}

.balloon1-left p {
    margin: 0;
    padding: 0;
}

.balloon1 {
    display: none;
}

@media screen and (max-width: 767px) {
    .balloon1-left {
        display: none;
    }

    .balloon1 {
        position: relative;
        display: inline-block;
        border-radius: 3px;
        margin: 20px 0;
        padding: 10px;
        width: 100%;
        color: #333;
        font-size: 16px;
        font-weight: 500;
        line-height: 150%;
        background-color: rgba(129, 181, 194, 0.3);
    }

    .balloon1:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid rgba(129, 181, 194, 0.3);
    }
}

/* button */
.head_ad_link {
    font-size: 12px;
    margin: 13px 0 10px 0;
    text-align: right;
    display: block;
}

.login {
    width: 100px;
    height: 30px;
    display: block;
    padding-top: 4px;
    border-radius: 15px;
    border: solid 1px #ff784f;
    color: #ff784f;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    float: left;
}

.register {
    width: 100px;
    height: 30px;
    margin: 0 0 0 11px;
    display: block;
    padding-top: 4px;
    border-radius: 15px;
    border: solid 1px #007f9e;
    color: #007f9e;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    float: left;
}

.btn2 {
    width: auto;
    height: 45px;
    margin: 17px auto 0;
    padding-right: 30px;
    padding-left: 30px;
    display: block;
    border-radius: 25px;
    border: solid 1px #ff784f;
    background-color: #fff;
    color: #ff784f;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    float: right;
}

.btn3 {
    padding: 7px 0;
    margin: 10px;
    background-color: #036c85;
    color: #fff;
    border-bottom: solid 3px #00303c;
    font-size: 16px;
    width: 100%;
    max-width: 180px;
    height: 40px;
    border-radius: 20px;
    text-decoration: none;
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .login {
        width: 100%;
        height: 40px;
        margin: 0 10px;
        display: inline-block;
        padding: 8px 0;
        border-radius: 20px;
        border: solid 1px #ff784f;
        color: #ff784f;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        float: left;
    }

    .register {
        width: 100%;
        height: 40px;
        margin: 0 10px;
        display: block;
        padding: 8px 0;
        border-radius: 20px;
        border: solid 1px #007f9e;
        color: #007f9e;
        font-size: 16px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        float: left;
    }

    .btn3 {
        margin: 5px 0 0;
        max-width: 155px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }
}

a.cat2 {
    padding: 0px 5px 1px;
    margin: 10px 10px 10px 0;
    background-color: #81b5c2;
    color: #fff !important;
    font-size: 11px;
    max-width: 180px;
    height: 20px;
    border-radius: 15px;
    text-decoration: none;
}

a.tag1 {
    padding: 0px 5px 1px;
    margin: 10px 0 10px 5px;
    background-color: #fff;
    color: #007f9e !important;
    font-size: 11px;
    max-width: 180px;
    height: 20px;
    border-radius: 15px;
    border: solid 1px #007f9e;
    text-decoration: none;
}

/* Form */
#form_header {
    width: auto;
    margin-top: 40px;
}

#form_header #input_header {
    vertical-align: top;
    text-indent: 10px !important;
    margin: 0px;
    width: 220px;
    height: 30px;
    border-radius: 15px 0 0 15px;
    background-color: #f4f4f4;
    border: solid 1px #cccccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

#submit_header {
    width: 80px;
    height: 30px;
    border-radius: 0 15px 15px 0;
    border: none;
    background-color: #aaaaaa;
    color: #ffffff;
    font-size: 14px;
    float: left;
}

div.radio_header_wrap {
    margin: 8px 0 0 15px;
    font-size: 12px;
    float: left;
}

.radio_header {
    display: none;
}

.radio_header + label {
    padding-left: 23px;
    position: relative;
}

.radio_header + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #cccccc;
    border-radius: 50%;
}

.radio_header:checked + label::before {
    border: 1px solid #007f9e;
}

.radio_header:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #007f9e;
    border: 1px solid #007f9e;
    border-radius: 50%;
}

.form_qa_wrap {
    padding: 20px;
    margin-top: 40px;
}

.form_qa_textarea {
    border-radius: 3px;
    border: solid 1px #cccccc;
    padding: 15px;
    font-size: 15px;
    width: 100%;
    height: 168px;
}

@media screen and (max-width: 767px) {
    #form_header {
        margin: 0;
        padding: 0;
    }

    #form_header #input_header {
        width: 70%;
        border-radius: 15px 0 0 15px;
        background-color: #f1f7e9;
        border: 0px;
    }

    #submit_header {
        width: 30%;
        height: 30px;
        border-radius: 0 15px 15px 0;
        border: none;
        background-color: #fff;
        color: #044655;
        font-size: 14px;
        float: left;
        text-align: center;
    }
}

/* top */
.group {
    border-bottom: dashed 1px #aaa;
    padding-bottom: 20px;
    margin: 0 0 20px;
    line-height: 130%;
}

.group_left {
    font-size: 12px;
    margin-top: 0;
    float: left;
}

.group_left span {
    font-size: 16px;
    display: block;
}

span.name {
    padding-right: 12px;
    margin-right: 10px;
    border-right: solid 1px #999;
    height: 10px;
}

span.status {
    color: #007f9e;
    font-weight: 600;
}

span.icon {
    width: auto;
    height: auto;
    margin-right: 15px;
    color: #007f9e;
    display: inline-block;
    font-size: 12px;
}

span.comment:before {
    content: " ";
    background: url(../images/ico-comment.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

span.comment-sm:before {
    background-size: 14.5px 13.3px;
    padding: 0 15px 0 0;
}

span.good:before {
    content: " ";
    background: url(../images/ico-good.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

span.heart:before {
    content: " ";
    background: url(../images/ico-star.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

span.heart-sm:before {
    background-size: 13.5px 12.151px;
    padding: 0 15px 0 0;
}

span.note:before {
    content: " ";
    background: url(../images/icon-note.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

span.star {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    line-height: 0;
    color: #f68f4b;
    display: block;
    margin: 12px 0 0;
    float: left;
}

span.star:before {
    content: " ";
    padding: 0 100px 0 0;
}

span.rank5:before {
    background: url(../images/ico-star-5.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

span.rank4:before {
    background: url(../images/ico-star-4.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

span.rank3:before {
    background: url(../images/ico-star-3.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

span.rank2:before {
    background: url(../images/ico-star-2.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

span.rank1:before {
    background: url(../images/ico-star-1.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.border {
    border: solid 1px #eeeeee !important;
}

div.title {
    font-size: 16px;
    margin: 3px 0 5px;
    font-weight: bold;
}

div.txt {
    font-size: 14px;
    margin: 5px 0;
}

img.usericon {
    margin-right: 10px;
    border: solid 1px #eaeaea;
    width: 70px;
    height: 70px;
}

img.usericon2 {
    margin-right: 10px;
    border: solid 1px #eaeaea;
    width: 50px;
    height: 50px;
}

.iconborder {
    border-left: dashed 1px #aaa;
    padding-left: 20px;
}

img.eyecatch {
    width: 160px;
    height: 104px;
    margin-right: 10px;
}

@media screen and (max-width: 767px) {
    .grouptop {
        border-top: dashed 1px #aaa;
        padding-top: 15px;
    }

    .group {
        padding-bottom: 10px;
        margin: 0 0 10px;
    }

    span.name {
        padding-right: 5px;
        margin-right: 5px;
    }

    span.date {
        padding-right: 5px;
        margin-right: 5px;
    }

    img.eyecatch {
        width: 70px;
        height: 70px;
    }

    span.date.data2 {
        display: block;
        border: 0px;
        margin-bottom: 10px;
    }

    .iconborder {
        border-left: 0;
        padding-left: 0;
    }
}

.top_kaiketsu {
    background: url(../images/kaiketsu_bg.PNG);
    width: 100%;
    height: 300px;
    text-align: center;
}

.top_kaiketsu p {
    font-size: 20px;
    color: #ff784f;
    font-weight: 600;
    text-align: center;
    padding-top: 60px;
    display: block;
    line-height: 150%;
}

.top_kaiketsu a.link {
    font-size: 14px;
    color: #ff784f;
    font-weight: 500;
    text-align: center;
    padding-top: 30px;
    display: block;
}

.news_wrap {
    height: 125px;
}

@media screen and (max-width: 767px) {
    .top_kaiketsu p {
        padding-top: 0;
    }

    .top_kaiketsu {
        background: url(../images/kaiketsu_bg_sp.PNG);
        width: 100%;
        height: auto;
        padding: 30px 0;
        text-align: center;
        background-size: 100%;
    }
}

#top_spacer {
    height: 200px;
}

.components {
    /* Header */
    /* Anchor */
    /* Button */
    /* search form */
    /*
      Note
       */
}

.components h4 {
    font-size: 18px;
    letter-spacing: 0.05em;
    color: #007f9e;
}

.components h4 {
    font-size: 18px;
    color: #007f9e;
    text-align: center;
    background-color: #d1ebec;
    padding: 14px 5px 15px;
    height: 50px;
}

.components h5 {
    text-align: left;
    background: none;
    font-size: 18px;
    color: #007f9e;
    padding: 14px 5px 15px;
    height: 50px;
}

.ti_filter h5{
    color: inherit !important;
}

.components h5 span {
    display: inline-block;
}

.components h5 span.search {
    position: relative;
    color: #036c85;
    line-height: 1.3rem;
    text-indent: 2.5rem;
}

.components h5 span.search::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -4px;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    background: url(../images/ico_search.png);
    background-size: 30px;
    background-repeat: no-repeat;
}

.components a {
    color: #333333;
}

.components a.blue {
    color: #007f9e;
}

.components .btn-post {
    font-size: 1rem;
    line-height: 50px;
    width: 250px;
    height: 50px;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 25px;
    border: solid 1px #ff784f;
    color: #ff784f;
    text-decoration: none;
    background-color: transparent;
    margin-top: 20px;
    margin-bottom: 30px;
    float: none;
}

.components .report a {
    font-size: 12px;
    color: #007f9e;
    text-decoration: underline;
}

.components .bdb {
    border-bottom: 1px dashed #aaaaaa;
}

.components .bdt {
    border-top: 1px dashed #aaaaaa;
}

.components form label {
    color: #007f9e;
}

.components form .form-group {
    border-bottom: 1px dashed #aaaaaa;
    padding-bottom: 20px;
}

.components form .form-group:first-of-type {
    border-top: 1px dashed #aaaaaa;
    padding-top: 20px;
}

.components form .form-group.no-bd {
    border: none;
}

.components form .form-group label input[type="file"] {
    /*display: none;*/
}

input[type="file"]{
    color: #333 !important;
}

.components form .scroll,
.components form #scroll {
    margin-top: 30px;
    padding-top: 0;
    overflow: auto;
}

.components form .checkbox-toggle label {
    color: #333333;
    display: block;
}

.components form .checkbox-toggle input[type="checkbox"] {
    display: none;
}

.components form .checkbox-toggle input[type="checkbox"]:checked + span {
    background-color: #007f9e;
}

.components form .checkbox-toggle input[type="checkbox"]:checked + span::before {
    left: 33px;
    background-color: #ffffff;
    color: #007f9e;
    content: "ON";
}

.components form .checkbox-toggle span {
    float: right;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    background-color: #eeeeee;
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
}

.components form .checkbox-toggle span::before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #d3d3d3;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.components form .radio label .radio-mark {
    display: inline-block;
    vertical-align: text-bottom;
    width: 0.5em;
    height: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: #ffffff;
    line-height: 1;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0.25em;
}

.components form .radio label .radio-mark::before {
    content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.25em;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.components form .radio label input {
    display: none;
}

.components form .radio label input:checked + .radio-mark::before {
    background-color: #007f9e;
}

.components .db {
    display: block;
    text-decoration: none;
}

.components .btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
}

.components .btn.middle {
    line-height: 50px;
    color: #007f9e;
}

.components .btn-small {
    width: 100px;
    height: 30px;
    display: block;
    padding-top: 4px;
    border-radius: 15px;
    border: solid 1px #333;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    float: left;
}

.components .btn-small.orange {
    border-color: #ff784f;
    color: #ff784f;
}

.components .btn-inquiry {
    color: #ff784f;
    font-size: 1.25rem;
    line-height: 50px;
    width: 310px;
    height: 50px;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 25px;
    border: solid 1px #ff784f;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    float: none !important;
}

.components .btn-dl {
    color: #036c85;
    font-size: 1.25rem;
    line-height: 50px;
    width: 310px;
    height: 50px;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 25px;
    border: solid 1px #036c85;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    float: none !important;
}

.components .baloon-small {
    position: relative;
    display: inline-block;
    border-radius: 3px;
    padding: 7px 10px;
    margin-top: 1px;
    margin-right: 0;
    min-width: 120px;
    max-width: 100%;
    min-height: 50px;
    background-color: #81B5C2;
    vertical-align: middle;
    color: #fff;
    font-size: 0.75rem;
    margin-left: 25px;
}

.components .baloon-small::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -23px;
    margin-top: -9px;
    border: 8px solid transparent;
    border-right: 15px solid #81B5C2;
}

.components table,
.components table td {
    border-color: #81b5c2;
}

.components table th {
    border-right-color: #d1ebec;
}

.components table th {
    background-color: #81b5c2;
    white-space: nowrap;
    text-align: left;
    color: #000;
    border-bottom: 1px solid #d1ebec;
}

.components table.table_gr {
    width: 100%;
    border: 1px solid #81B5C2;
    border-collapse: collapse;
}

.components table.table_gr th,
.components table.table_gr td {
    font-weight: normal;
}

.components table.table_gr th {
    color: #fff;
    background-color: #81B5C2;
    width: 210px;
    vertical-align: top;
}

.components table.table_gr th .icon {
    font-size: inherit;
    color: inherit;
}

@media screen and (max-width: 767px) {
    .components table.table_gr.table_row tr,
    .components table.table_gr.table_row th,
    .components table.table_gr.table_row td {
        display: block;
        width: auto;
    }
}

.components table.table_gr.table_row th,
.components table.table_gr.table_row td {
    font-weight: normal;
    padding: 15px 20px;
}

.components table.table_gr.table_row th {
    border-bottom: 1px solid #fff;
}

.components table.table_gr.table_row td {
    border-bottom: 1px solid #81B5C2;
}

.components table.table_gr.table_row tr:last-child th {
    border-bottom: 1px solid #81B5C2;
}

@media screen and (max-width: 767px) {
    .components table.table_gr.table_row tr:last-child td {
        border-bottom: none;
    }
}

.components table.table_gr.table_col th {
    text-align: center;
    border-right: 1px solid #fff;
    padding-top: 5px;
    padding-bottom: 5px;
}

.components table.table_gr.table_col th:last-child {
    border-right: 1px solid #81B5C2;
}

.components table.table_gr.table_col td {
    padding: 15px 20px;
    border-right: 1px solid #81B5C2;
    border-bottom: 1px solid #81B5C2;
}

.components ul {
    /* ページネーション */
    /*
              カテゴリ
           */
}

.components ul.pagination {
    display: inline;
    padding: 0;
    margin: 0;
    text-align: center;
}

.components ul.pagination li {
    display: inline;
    text-align: center;
}

.components ul.pagination li a {
    color: #036c85;
    float: left;
    width: 40px;
    height: 40px;
    padding-top: 4px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1.5px #036c85;
    border-radius: 20px;
    margin: 20px 5px;
}

.components ul.pagination li a.active {
    background-color: #036c85;
    color: white;
}

.components ul.pagination li a:hover:not(.active) {
    background-color: #036c85;
    color: #fff;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.components ul.pagination .fa {
    font-size: 28px;
    margin-top: -1px;
}

.components ul.sidemenu {
    /* ------------------------------
                  Start Variables
                 ------------------------------ */
    /* colors */
    /* fonts */
    /* ------------------------------
                  End Variables
                 ------------------------------ */
    margin: 0;
    padding: 0;
}

.components ul.sidemenu li {
    list-style: none;
    background-color: #f9fcf1;
    border-bottom: 1px dashed #aaa;
    cursor: pointer;
}

.components ul.sidemenu li.sidemenu1 {
    position: relative;
    width: 100%;
}

.components ul.sidemenu li.sidemenu1 a {
    line-height: 3;
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: .5em;
    background-color: #f9fcf1;
}

.components ul.sidemenu li.sidemenu1:after {
    font-family: FontAwesome;
    font-weight: bold;
    padding-right: .25em;
    content: '\F105';
    color: #007f9e;
    position: absolute;
    top: 50%;
    right: 7px;
    margin-top: -12px;
}

.components ul.sidemenu li.sidemenu2 a {
    line-height: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;
    border-bottom: 1px solid #fff;
    background-color: #f4f4f4;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .components ul.sidemenu li.sidemenu1 a.sidemenu_cat_first {
        display: inline-block !important;
        text-align: left !important;
        padding-left: 20px !important;
    }

    .components ul.sidemenu li.sidemenu2 a {
        display: inline-block !important;
        text-align: left !important;
        padding-left: 20px !important;
    }
}

.components ul.sidemenu ul {
    padding-left: 0;
}

.components .btn4-slim {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #999999;
    display: inline-block;
    padding: 6px 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .25rem;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    margin-left: 5px;
}

.components .search_wrapper .form-group {
    border-bottom: none;
    padding-bottom: 0;
}

.components .search_wrapper .form-group:first-of-type {
    border-top: none;
}

.components .search_wrapper h4 {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #036c85;
}

.components .search_wrapper h4 a {
    color: #fff;
    width: 100%;
    height: auto;
    display: block;
    font-size: 1.125rem;
    text-decoration: none;
    font-weight: normal;
    padding: 10px;
    position: relative;
}

.components .search_wrapper h4 a::after {
    font-family: 'FontAwesome';
    padding-right: .25em;
    content: '\F106';
    color: #fff;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -10px;
}

.components .search_wrapper .search {
    padding: 15px 20px;
    background-color: #F4F4F4;
}

.components .search_wrapper form .tag_wrap {
    vertical-align: middle;
}

.components .search_wrapper form .tag_wrap label {
    display: inline-block;
    margin: 0 0 3px 5px;
    line-height: 1;
}

.components .search_wrapper form .tag_wrap label input[type="checkbox"] {
    display: none;
}

.components .search_wrapper form .tag_wrap label input[type="checkbox"]:checked + span {
    background-color: #036c85;
    color: #fff !important;
    border: solid 1px #036c85;
}

.components .search_wrapper form .tag_wrap label span {
    display: inline-block;
    padding: 3px 5px;
    background-color: #fff;
    color: #007f9e !important;
    font-size: 11px;
    max-width: 180px;
    height: 20px;
    border-radius: 15px;
    border: solid 1px #007f9e;
    text-decoration: none;
    margin: 0;
    vertical-align: top;
    cursor: pointer;
}

.components .search_wrapper form .btn_wrap {
    text-align: center;
}

.components .search_wrapper form .btn4 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #999999;
    display: inline-block;
    padding: 2px 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: .25rem;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    margin-bottom: 15px;
    cursor: pointer;
}

span.tip-cat {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    text-decoration: none;
    color: #fff!important;
}

.slideimg span.tip-cat {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    padding: 5px;
    color: #fff !important;
}


.components span.tip-cat.orange {
    color: #fff !important;
    background-color: #ff784f;
}

.components span.tip-cat.green {
    color: #fff;
    background-color: #22ac38;
}

.components span.tip-cat.blue {
    color: #fff;
    background-color: #00adc9;
}

.components .thumbnail {
    width: 160px;
}

@media screen and (max-width: 767px) {
    .components .thumbnail {
        width: 70px;
        height: 70px;
    }
}

.components .thumbnail img {
    width: 100%;
}

.components .charged_icon {
    max-width: 120px;
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .components .charged_icon {
        max-width: 85px;
    }
}

.components .charged_icon {
    width: 120px;
    height: 80px;
}
.components .charged_icon img{
    object-fit: contain;
    font-family: 'object-fit: contain;';
    width: auto;
    height: 80px;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.components span.date {
    padding-right: 12px;
    margin-right: 10px;
    border-right: solid 1px #999;
    height: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #666666;
}

.components span.name {
    padding-right: 12px;
    margin-right: 10px;
    border-right: solid 1px #999;
    height: 10px;
}

.components span.status {
    color: #007f9e;
    font-weight: 600;
}

.components span.status.bg-or {
    background-color: #ff784f;
    color: #ffffff;
}

.components span.icon {
    width: auto;
    height: auto;
    margin-right: 15px;
    color: #007f9e;
    display: inline-block;
    font-size: 12px;
    position: relative;
    line-height: 1rem;
    text-indent: 1.25rem;
}

.components span.comment:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    background: url(../images/ico-comment.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
    margin-top: 2px;
}

.components span.comment-sm:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-size: 14.5px 13.3px;
    padding: 0 15px 0 0;
}

.components span.good:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    background: url(../images/ico-good.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

.components span.heart:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    background: url(../images/ico-star.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

.components span.heart-sm:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-size: 13.5px 12.151px;
    padding: 0 15px 0 0;
}

.components span.note:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    background: url(../images/icon-note.png);
    background-size: 16px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 0 20px 0 0;
}

.components span.star {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: bold;
    color: #f68f4b;
    display: block;
    margin: 12px 0 0;
    float: left;
    line-height: 1;
}

.components span.star:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    content: " ";
    padding: 0 100px 0 0;
}

.components span.rank5:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/ico-star-5.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.components span.rank4:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/ico-star-4.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.components span.rank3:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/ico-star-3.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.components span.rank2:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/ico-star-2.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.components span.rank1:before {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/ico-star-1.png);
    background-size: 90px 15px;
    background-position: left;
    background-repeat: no-repeat;
}

.components span.bg-gr {
    color: #fff;
    background-color: #007f9e;
}

.components span.status {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    text-decoration: none;
}

.components span.check-square {
    font-size: 1rem;
    color: #fff;
    line-height: 1rem;
    text-indent: 1.5rem;
}

.components span.check-square::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    width: 1.188rem;
    height: 1.188rem;
    background: url(../images/subpages/ico_check_squ.png);
    background-repeat: no-repeat;
}

.components span.note25 {
    font-size: 1rem;
    line-height: 1rem;
    text-indent: 2rem;
    margin-right: 0;
}

.components span.note25::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    top: -4px;
    width: 25px;
    height: 25px;
    background: url(../images/subpages/icon-note_x25.png);
    background-repeat: no-repeat;
}

.components span.ico_star {
    color: #f68f4b;
    font-size: 1rem;
    line-height: 1;
    padding-right: 12px;
    margin: 0 10px 6px 0;
    border-right: solid 1px #999;
    position: relative;
    text-indent: 100px;
}

.components span.ico_star::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 90px;
    height: 15px;
}

.components span.favo::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    background: url(../images/subpages/ico-star.png);
    background-repeat: no-repeat;
}

.components .bx-caption span.icon {
    /*text-indent: 0 !important;*/
}

.components time {
    font-size: 12px;
}

.components.components-note {
    /*
          Favorite
           */
    /*
          End Favorite
           */
    /*
           Images
            */
    /*
           End Images
            */
}

.components.components-note .fav_wrap {
    text-align: right;
}

.components.components-note .fav {
    margin-bottom: 30px;
    text-align: right !important;
    white-space: nowrap;
}

.review_head .components.components-note .fav {
    margin-bottom: 0px !important;
}

@media screen and (max-width: 767px) {
    .components.components-note .fav {
        margin-top: 15px;
        text-align: center !important;
    }
}

.components.components-note .fav .btn-group {
    margin-right: 10px;
}

.components.components-note .fav .btn-group:last-child {
    margin-right: 0;
}

.components.components-note .fav .btn {
    font-size: 0.875rem;
    font-weight: normal;
    height: 26px;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    border-bottom: solid 3px #007082;
}

.components.components-note .fav .btn.bg {
    color: #fff;
    background-color: #007f9e;
}

.components.components-note .fav .btn.square {
    border-radius: 4px;
}

.components.components-note .fav .btn.square:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.components.components-note .fav .btn.square:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.components.components-note .fav .btn .icon {
    font-size: 0.875rem;
    font-weight: normal;
}

.components.components-note .fav.disabled .btn {
    background: #ddd;
    border-top: solid 3px #007082;
    border-bottom: solid 1px #007f9e;
}

.components.components-note .fav.disabled .bg {
    color: #ddd;
    background-color: #006b85;
}

.components.components-note img.img-company {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

@media screen and (max-width: 767px) {
    .components.components-note img.img-company {
        width: 70px;
        height: 70px;
        margin-right: 10px;
    }
}

@media screen and (max-width: 767px) {
    .sp_hide {
        display: none !important;;
    }
}

.btn:focus, .btn.focus,
input:focus,
textarea:focus {
    box-shadow: none !important;
    /*border: inherit !important;*/
    outline: 0 !important;
}
.btn.no_focus_border:focus, .btn.no_focus_border.focus,
input.no_focus_border:focus,button.no_focus_border:focus,
textarea.no_focus_border:focus{
    border: none !important;
}

button:focus {
    outline: 0 !important;
    /*border: inherit !important;*/
    box-shadow: none !important;
}

button.zdo_drawer_button:focus {
    border: none !important;
}

.fit_image_160 {
    object-fit: contain;
    font-family: 'object-fit: contain;';
    width: 160px;
    height: 160px;
}

.tace {
    text-align: center;
}
.tar {
    text-align: right;
}

@media screen and (max-width: 767px) {
    .review_sp_favorite {
        text-align: right;
    }
}

@media screen and (max-width: 767px) {
    .resp-table table td ,
    .resp-table table th {
        width: 100% !important;
        display: block !important;
    }
    .resp-table table th ,
    .resp-table table td {
        border: none !important;
    }
    .resp-table table.tablesaw  th{
        background: #dee2e6;
    }
}

.product-detail-review-item span.ico_star {
    color: #f68f4b;
    font-size: 1rem;
    line-height: 1;
    padding-right: 12px;
    margin: 0 10px 6px 0;
    border-right: solid 1px #999;
    position: relative;
    text-indent: 100px;
    display: table-cell;
}

.product-detail-review-item .rcol div{
    padding-right: 0px !important;
}

.product-detail-review-item .fav{
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    text-align:right !important;
}
@media screen and (max-width: 767px) {
    .product-detail-review-item .rcol div{
        padding-bottom: 10px;
    }
    .product-detail-review-item span.ico_star {
        border-right: none;
    }
    .product-detail-review-item img{
        width: 100% !important;
    }
}

.text-right{
    text-align:right !important;
}
.pln{
    padding-left: 0px !important;
}
.prn{
    padding-right: 0px !important;
}