@charset "UTF-8";

/*共通*/

body {
    font-family: "Arial", "メイリオ";
}

.btn {
    background: #e6807e;
    color: #fff;
    border-radius: unset;
    padding: .5rem 1.4rem;
    position: relative;
    font-weight: 700;
}

.btn-area {
    margin: 6rem auto;
    text-align: center;
}

.btn-area .btn {
    font-size: 1.375rem;
}

.btn:hover {
    background: #ffbf00;
    top: 2px;
}

.bg-pink1 {
    background: #edf4e3;
}

.bg-pink2 {
    background: #f8f1e6;
}

.bg-green {
    background: #2ca48c;
    color: #fff;
}

.green {}

.num {
    color: #343a40;
    padding: .2rem .5rem;
    font-size: 1.2em;
    margin-left: .3rem;
}

main p {
    font-size: 1.125rem;
    line-height: 1.8;
}

.f08em {
    font-size: .8em;
}

.title {
    padding: 1.6rem 0;
    background: linear-gradient(to right, #effde2, #b1c850);
    margin-bottom: 1rem;
}

.title h2 {
    max-width: 1100px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    color: #003843;
    line-height: 1.4;
}

.title span {
    font-weight: bold;
    font-size: 1.1em;
}

h3 {
    background: #ec6734;
    color: #fff;
    padding: .4rem 1.4rem;
    display: inline-block;
    margin-left: 3.3rem;
    margin-bottom: 2rem;
    font-size: 1.375rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 5px;
}

@media(max-width:576px) {
    main {
        margin-top: 70px;
    }
    main p {
        font-size: 1rem;
    }
    .btn-area {
        margin: 3rem auto;
    }
    .title h2 {
        font-size: 1.5rem;
    }
    h3 {
        margin-left: 0;
    }
}


/*ヘッダー*/

#header {}

.header_inner {
    display: flex;
    justify-content: space-between;
}

.logo {}

.logo img {
    width: 200px;
}

.nav-menu_pc {
    display:flex;
    flex-wrap: wrap;
    justify-content:flex-end;
    margin-top: 10px;

}

.menu-list {
    background: #ffffff;
    padding: 10px 0px 0px 20px;
}

.menu-list li {
    display: inline-block;
    position: relative;
    margin: 0rem auto;
}

.menu-list li:before {
    content: url(/img/front/accommodate.svg);
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
    bottom: .5rem;
    left: .3rem;
}

.menu-list li+li {}

.menu-list li {
    color: #a28382;
    font-weight: bold;
    padding: .8rem .8rem .5rem 2rem;
}

.menu-list li:hover {
    background: #edf4e3;
    padding: .8rem .8rem .5rem 2rem;
}


/*ヘッダー『資料請求・お問い合わせ』ボタン*/

.btn_header{
       text-align: center;
       position:relative;
       margin-left:15px;
}
.btn_header li,
.btn_header div{
        display: inline-block;
    color: #fff;
    border-radius: unset;
    position: relative;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: 0px 2px 4px 0px #b4abab;
    border: 3px solid #ffffff;
    border-radius: 8px;
    margin: 4px 5px;
}
#header_cons li,
#header_cons div{
    background: #005bac;
    padding: .5rem 2rem .5rem .8rem;
}
#header_cont li,
#header_cont div{
    background: #ffbf00;
    padding: .5rem .8rem .5rem 2rem; 
}

#header_cons li:hover,
#header_cons div:hover{
    background: #3e95e2;
    top: 2px;
}
#header_cont li:hover,
#header_cont div:hover{
    background: #ffcc34;
    top: 2px;
}

#header_cont li:before,
#header_cont div:before{
    display: inline-block;
    position: absolute;
    content: url(/img/front/mail-envelope-closed.svg);
    width: 1.5rem;
    height: 1.5rem;
    left: .4rem;
}
#header_cons li:after,
#header_cons div:after {
     display: inline-block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    right:.5rem;
    top: .7rem;
    content: url(/img/front/arrow_right.svg);
    }

/*sp menu*/

.menu-line {
    display: none;
}

.sp-menu {
    display: none;
}

@media(max-width:576px) {
    #header {
        position: fixed;
        z-index: 999;
        background: #fff;
        height: 70px;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 1px 2px #ccc;
    }
    .logo img {
        width: 100px;
    }
    .nav-menu_pc {
        display: none;
    }
    .menu-line {
        display: inline-block;
        position: fixed;
        right: 20px;
        width: 44px;
        height: 44px;
        z-index: 1;
        transition: all .5s;
    }
    .menu-line span {
        display: block;
        width: 30px;
        height: 1.5px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #777;
        transition: all .5s;
    }
    .menu-line span:first-child {
        margin-top: -8px;
        -webkit-animation: b .5s linear forwards;
        animation: b .5s linear forwards;
    }
    .menu-line span:nth-child(2) {
        -webkit-animation: c .5s linear forwards;
        animation: c .5s linear forwards;
    }
    .menu-line span:nth-child(3) {
        margin-top: 8px;
        -webkit-animation: d .5s linear forwards;
        animation: d .5s linear forwards;
    }
    .sp-menu {
        z-index: 999;
        background: #ffffff;
        padding: 0.4rem .8rem 1rem .8rem;
        top: 70px;
        position: fixed;
        left: 0;
        width: 100%;
        font-size: 1.125rem;
        line-height: 1.7;
    }
    .sp-menu li {
        padding: .4rem 0 .4rem 2rem;
        position: relative;
        color: #a28382;
        font-weight: bold;
    }
    .sp-menu li:before {
        content: url(/img/front/accommodate.svg);
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        position: absolute;
        left: 0;
        top: .6rem;
    }
    .sp-menu .btn_header {
        padding: 0rem 0rem 0rem 0rem; 
        font-size: .8rem;
        margin-top: 1.1rem;
        top: -12px;
    }
    .sp-menu .btn_header:before {
        content: url(/img/front/mail-envelope-closed.svg);
        display: inline-block;
        width: 2rem;
        height: 1.6rem;
        position: absolute;
        bottom: 1rem;
        left: 1rem;
    }
}


/*パンくずリスト*/

.breadcrumbs {
    margin: 1rem 1rem 1rem 3.4rem;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline;
    /*横に並ぶように*/
    list-style: none;
    font-weight: bold;
    /*太字*/
}

.breadcrumbs li:after {
    /* >を表示*/
    content: '>';
    padding: 0 0.2em;
    color: #2ca48c;
}

.breadcrumbs li:last-child:after {
    content: '';
}

.breadcrumbs li a {
    text-decoration: none;
    color: #a28382;
    /*色*/
}

.breadcrumbs li a:hover {
    text-decoration: underline;
}

@media(max-width:576px) {
    .breadcrumbs {
        margin: 1rem 1rem 1rem 0rem;
    }
}


/*----------トップページ----------*/


/*メインビジュアル*/

.main-v {
    position: relative;
}

.main-v_contents {
    position: absolute;
    padding-left: 4.6rem;
    bottom: 4rem;
    width: 100%;
}

.main-v_contents h1 {
    font-size: 1.75rem;
    margin-bottom: 5rem;
}

.main-v_contents h1 span {
    color: #fff;
    font-size: .8em;
}

.main-v_contents .btn {
    font-size: 1.375rem;
}

@media(max-width:576px) {
    .main-v_contents {
        padding-left: 0;
        bottom: 2rem;
        text-align: center;
    }
    .main-v_contents h1 {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .main-v_contents .btn {
        font-size: 1.125rem;
    }
}


/*『ご契約中企業様はこちら』ボタン*/

.btn_top {
    background: #2ca48c;
    color: #fff;
    border-radius: unset;
    padding: 1rem 3rem 1rem 0.8rem;
    position: relative;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: 0px 2px 7px 0px #a28382;
    border-radius: 5%;
    border: 5px solid #ffffff;
    border-radius: 10px;
}

.btn_top {
    margin: 5rem auto;
    text-align: center;
}

.btn_top {
    font-size: 1.3rem;
}

.btn_top:hover {
    background: #7ec1b4;
    top: 2px;
    box-shadow: 0px 1px 5px 0px #ccc;
}

.btn_top:after {
    display: inline-block;
    position: absolute;
    content: url(/img/front/btn_top_ic_32px.png);
    position: absolute;
    margin: 0rem 0rem 0rem .3rem;
    width:10px;
}

@media(max-width:991px) {
    .btn_top {
        font-size: 1rem;
        padding: 0.7rem 2rem 0.7rem 0.4rem;
    }
    .btn_top:after {
        padding-left: 0.1rem;
        margin: 0.2rem 0.3rem 0.3rem 0.1rem;
        content: url(/img/front/btn_top_ic.png);
        position: absolute;
    }
}


/*メリット*/

section {
    padding: 3rem 0;
}

.merit h2 {
    position: relative;
    color: hsl(1deg 68% 70%);
    /* background-color: #a28382; */
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    border-radius: 10px;
    width: 70%;
    margin: 2rem auto .7rem auto;
    padding: 1rem;
    letter-spacing: 0.1em;
}

.merit_text {
    color: #e6807e;
    text-align: center;
    margin: auto auto 0rem auto;
    font-size: 1.3rem;
}

@media(max-width:576px) {
    .merit h2 {
        width: 90%;
        font-size: 1.8rem;
    }
    .merit_text {
        font-size: 1rem;
    }
}

.merit {
    padding: 0rem 0rem 4rem;
}

.box-title {
    background: linear-gradient(to right, #2ca48c, #e6807e);
    font-weight: bold;
    font-size: 1.375rem;
    margin: 0rem 2rem 1rem 0rem;
    background-repeat: no-repeat;
    background-size: 100% 12%;
    background-position: bottom;
    transition: all 0.25s ease-in;
    position: relative;
    padding-left: 2rem;
    padding-bottom: 0.7rem;
    line-height: 1;
}

.box-title:before {
    content: url(/img/front/accommodate.svg);
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    bottom: 0.2rem;
    left: -0.5rem;
}

.box {
    background: #f8f1e6;
    box-shadow: 5px 5px 4px #b7a3a5;
    padding: 2rem 0 2rem 2rem;
    margin: 1rem 0rem 1rem 0rem;
}

@media(max-width:576px) {
    .merit-title:before {
        bottom: 0.rem;
        left: -0.5rem;
    }
}


/*サービス一覧*/

.service {}

.service h2 {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 0.8rem;
    color: #2ca48c;
    font-weight: 700;
    background: linear-gradient(to right, #2ca48c, #e6807e);
    background-repeat: no-repeat;
    background-size: 100% 13%;
    background-position: bottom;
    transition: all 0.25s ease-in;
}

.service h2:before {
    content: url(/img/front/accommodate.svg);
    display: inline-block;
    width: 3rem;
    height: 3rem;
    position: absolute;
    bottom: 0.6rem;
    left: -0.5rem;
}

.service-box {
    background: #f8f1e6;
    margin-bottom: 2rem;
    box-shadow: 5px 5px 4px #a28382;
    border: 3px solid #ffffff;
    border-radius: 10px;
}

.service-box .point {
    background: #a28382;
    text-align: center;
    font-size: 1.24rem;
    font-weight: bold;
    color: #fff;
    padding: .5rem 0;
    letter-spacing: 0.2em;
    border-radius: 5px 5px 0px 0px;
}

.service-box .service-text {
    padding: 1.4rem;
    min-height: 200px;
}

@media(max-width:576px) {
    .box {
        padding: 2rem 1rem;
    }
    .service-box .service-text {
        min-height: unset;
    }
    .service h2 {
        font-size: 1.7rem;
        padding-left: 2.5rem;
    }
    .service h2:before,
    .container h2:before {
        bottom: 0.5rem;
        left: -0.5rem;
    }
}


/*導入をお考えの企業様ボタン*/


/*ご契約中の企業様ボタン*/

.btn_intro,
.btn_contact,
.btn_consult {
    color: #ffffff;
    border-rad.btn_contact,
    ius: unset;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: 0px 2px 7px 0px #a28382;
    position: relative;
    border: 5px solid #ffffff;
    border-radius: 10px;
    text-align: center;
    margin: 2rem auto 2rem auto;
}

.btn_intro {
    background: hsl(1deg 68% 70%);
    font-size: 1.4rem;
    width: 500px;
    padding: .7rem 2rem .7rem .5rem;
}

.btn_contact {
    background: #ffbf00;
    font-size: 1.4rem;
    padding: .8rem 2.2em .8rem .7rem;
}

.btn_consult {
    background: #2ca48c;
    width: 400px;
    font-size: 1.2rem;
    padding: .5rem 1.5rem .5rem .5rem;
}

.btn_intro:hover,
.btn_contact:hover,
.btn_consult:hover {
    top: 3px;
    color: #ffffff;
    box-shadow: 0px 1px 5px 0px #ccc;
}

.btn_intro:after,
.btn_contact:after {
    display: inline-block;
    content: url(/img/front/btn_top_ic_32px.png);
    position: absolute;
    margin: 0rem 0rem 0rem .3rem;
}

.btn_consult:after {
    display: inline-block;
    content: url(/img/front/btn_top_ic.png);
    position: absolute;
    margin: 0.4rem 0rem 0rem .3rem;
}

.btn_intro:hover {
    background: hsl(1deg 100% 84%);
}

.btn_contact:hover {
    background: #ffdf7e;
}

.btn_consult:hover {
    background: #7ec1b4;
}

@media(max-width:770px) {
    .btn_intro,
    .btn_contact,
    .btn_consult {
        font-size: 1.4rem;
        padding: 0.6rem 2rem .5rem .5rem;
        text-align: center;
        margin: 2rem auto 2rem auto;
        width: 100%;
    }
    .btn_consult {
        font-size: 1rem;
    }
    .btn_intro:after,
    .btn_contact:after {
        display: inline-block;
        content: url(/img/front/btn_top_ic.png);
        position: absolute;
        margin: 0.5rem 0rem 0rem .3rem;
    }
    .btn_consult:after {
        display: inline-block;
        content: url(/img/front/btn_top_ic.png);
        position: absolute;
        margin: 0.2rem 0rem 0rem .3rem;
    }
}


}

/*----------introduction-----------*/
.flow {
    margin: 0;
    display: flex;
}
.flow-title {
    font-weight: bold;
    margin-right: 1.2rem;
}
.arrow {
    text-align: center;
}
.arrow img {
    width: 8%;
}
.img-area img {
    margin-bottom: 3rem;
}

/*------------consultation-------------*/
.detail {
    padding: 1rem 2rem;
}
.detail p {
    font-family: sans-serif;
    font-size: .875rem;
}
@media(max-width:576px) {
    .detail {
        padding: 1rem 0;
    }
}

/*フッター*/
footer {
    padding: 1rem 0;
}
.footer-menu {
    margin-bottom: .4rem;
    line-height: 2;
}
.footer-menu li {
    display: inline-block;
    padding-right: 1rem;
}
.footer-menu li+li a {
    padding-left: 1rem;
    border-left: 1px solid #fff;
}
.footer-menu li a:hover {
    color: #f7e4e0;
}
.footbar {
    font-size: .75rem;
}
@media(max-width:576px) {
    .footer-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-menu li:not(:first-child) {
        padding: 0;
    }
    
    .footer-menu li:nth-child(3) a,
    .footer-menu li:nth-child(4) a {
        padding-left: 0;
        border-left: none;
    }
    
    footer {
        text-align: center;
    }
    
    .footbar {
        font-size: .625rem;
    }
}

/*----------サイトマップー----------*/

/* Sitemap section */
.sitemap h3 {
    margin-bottom: 2rem;
    position: relative;
    color: #2ca48c;
    font-weight: 700;
    background-color: #ffffff;
}
.sitemap h3:before {
    content: '▶ ';
}
.sitemap_title:hover {
    background: linear-gradient(to right, #2ca48c, #e6807e);
    background-repeat: no-repeat;
    background-size: 100% 7%;
    background-position: bottom;
}
section.sitemap {
    padding: 1rem 0 5rem;
}
.sitemap_body {
    padding: 0rem 0rem 2rem 4rem;
    color: #2ca48c;
    font-weight: 700;
}
ul.sitemap_list>li>a:hover {
    background: linear-gradient(to right, #2ca48c, #e6807e);
    background-repeat: no-repeat;
    background-size: 100% 7%;
    background-position: bottom;
}
.sitemap_title {
    margin: 0;
    padding: 0;
}

/*----------会社案内----------*/

/*挨拶署名*/
div#sign {
    padding: 20px 0;
    text-align: right;
}

/*会社概要*/
table.companyData {
    width: 100%;
    margin: auto;
}
table.companyData th,
table.companyData td {
    padding: 5px 10px;
    border: solid 1px #CCC;
}
table.companyData th {
    vertical-align: middle;
    text-align: center;
    background-color: #F0F0F0;
}
@media (max-width: 770px) {
    table.companyData {
        width: auto;
    }
}

/*-------------------------
===========================
個人情報保護方針
特定個人情報基本方針
ソーシャルメディアポリシー
共通CSS
===========================
-------------------------*/

/*-外部リンク-*/
a.external_link {
    color: #bd2130;
    text-decoration: underline;
}
.plc_text_box {
    padding: 0rem 0rem 5rem 3.3rem;
}
.plc_text_box2 {
    padding: 1rem 0 1rem 1rem;
}

/*社長あいさつ*/
.plc_text_box3 {
    margin: 0rem 8rem 5rem 8rem;
    padding: 2rem;
    border: 1px solid #CCCCCC;
}
p.plc_bld {
    font-weight: bold;
    margin: 1rem 0 1rem;
}
.p_bg_715 {
    margin-top: 0px;
    padding: 2rem 0rem 1rem;
    font-size: 1.5rem;
}
div.txt.number {
    padding: 1rem 0rem 1rem;
}

/* 各種ご請求時必要書 */
table.plc_skhh {
    margin: 15px auto;
    width: auto;
}
table.plc_skhh th,
table.plc_skhh td {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
}
table.plc_skhh th {
    text-align: center;
    vertical-align: middle;
}
ul,
ol {
    padding: 0rem;
}
@media (max-width: 770px) {
    .plc_text_box {
        padding: 0rem 1rem 1rem 1rem;
    }
    
    .plc_text_box3 {
        margin: 0rem 0.5rem 0.5rem 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/*----------電話予約テーブル----------*/
table.consult_form {
    margin: auto;
}
table.consult_form th,
table.consult_form td {
    border: solid 1px #545454;
    padding: 10px 10px;
    font-weight: bold;
}
table.consult_form td:first-child {
    background-color: hsl(0deg 0% 40%);
    color: #ffffff;
    font-size: 1rem;
}
table.consult_form th {
    vertical-align: middle;
    text-align: center;
    background-color: #ffffff;
}
table.consult_form tr:nth-child(2n+1) {
    background-color: #e0dbdb;
}
table.consult_form tr:first-child {
    background-color: #d6c2c1;
    font-size: 1rem;
}
table.consult_form td {}
/*
table.consult_form td:nth-child(7) {
*/
table.consult_form td.date_sat {
    color: #005894;
}
/*
table.consult_form td:nth-child(8) {
*/
table.consult_form td.date_sun {
    color: hsl(1deg 39% 46%);
}
@media (max-width: 770px) {
    table.consult_form {
        width: auto;
    }
    
    table.consult_form td:first-child {
        font-size: .5rem;
    }
    
    table.consult_form tr:first-child {
        font-size: .5rem;
    }
    
    table.consult_form th,
    table.consult_form td {
        padding: 5px 5px;
    }
}

/*----------ご契約いただいてる企業様ページ----------*/
#detail_title_mail,
#detail_title_tel {
    font-weight: bold;
    font-size: 1.2rem;
}
#detail_title_mail>span {
    background-color: #ffbf00;
    padding: 5px;
}
#detail_title_tel>span {
    background-color: hsl(1deg 68% 70%);
    padding: 5px;
}
.detail_title>span {
    font-weight: bold;
    font-size: 1.3rem;
    padding: 5px;
}
p.detail_text {
    margin: 10px 10px 20px 10px;
    font-size: .8em;
}