@charset "UTF-8";
/* ====================================================
　CSS 3@ Document 2019.05
==================================================== */
html { font-size: 10px; }
body { font-size: 1.4rem; }

@media screen and (min-width: 768px) {
  html { font-size: clamp(8px, 0.9vw, 10px); }
  body { font-size: 1.4rem; }
}

body {
    background: #fff;
    color: #161616;
    font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

input, button, textarea, *:before, *:after {
    font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

p { margin: 0 0 1em; }
p:last-of-type { margin-bottom: 0; }

a { color: #161616; }

.serif {
    font-family: "游明朝 Medium", "YuMincho Medium", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.sans {
    font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

.alignL { text-align: left !important; }
.alignC { text-align: center !important; }
.alignR { text-align: right !important; }

img { max-width: 100%; height: auto; vertical-align: bottom; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.alignleft {
    position: relative;
    z-index: 1;
    background: #fff;
}
@media print, screen and (min-width: 768px) {
    img.alignright {
        float: right;
        margin: 0.5em 0 0.5em 70px;
    }
    img.alignleft {
        float: left;
        margin: 0.5em 70px 0.5em 0;
    }
}
@media screen and (max-width: 767px) {
    img {
        margin-bottom: 1em;
    }
}

ul, ol{ margin: 0; padding: 0;}
li{ list-style: none; }


@media print, screen and (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}


/* =======================================================
　フレーム
========================================================== */
.contents {
    margin: 0 auto;
    width: 100%;
    max-width: 1270px;
}

@media print, screen and (min-width: 768px) {
    .contents {
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media screen and (max-width: 767px) {
    .contents {
        padding-left: 15px;
        padding-right: 15px;
    }
    #ContentsBase{
        padding-top: 65px;
    }
}

/* ######################################################################################

　ヘッダー　header

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .header .contents {}
}
@media screen and (max-width: 767px) {
    .header .contents {
    }
}


/* =======================================================
　header__top
========================================================== */
@media print, screen and (min-width: 768px) {
    .header__top{
        padding-top: 1.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media screen and (max-width: 767px) {
    .header{
        padding-right: 65px;
    }
    .header__top{
        display: flex;
        align-items: center;
    }
}

/*　logo
　-------------------------------------*/
.header .logo{}
.header .logo img{margin-bottom: 0;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .header .logo{
        max-width: 80%;
    }
}


/*　gnav2
　-------------------------------------*/
.gnav2{}
.gnav2__item{}
.gnav2__item.btn{}

@media print, screen and (min-width: 768px) {
    .gnav2{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .gnav2__item{
        position: relative;
    }
    .gnav2__item.left:before{
        content: "";
        position: absolute;
        top: 55%;
        left: 0;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background: #D4D4D4;
    }
    .gnav2__item.btn{
        margin-left: 1em;
    }
    .gnav2__item a:not(.button){
        display: block;
        padding: 0.5em 1.5em;
        text-decoration: none;
        color: #161616;
        font-size: 1.4rem;
        white-space: nowrap;
    }
    .gnav2__item.btn .button{
        white-space: nowrap;
    }
}
@media screen and (max-width: 767px) {
    .gnav2{display: none;}
}



/* =======================================================
　header__bottom
========================================================== */
.header__bottom{}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .header__bottom{
        display: none;
    }
}

/*　gnav
　-------------------------------------*/
.gnav{}
.gnav__item{}
.gnav__sub{}
.gnav__sub__item{}

@media print, screen and (min-width: 768px) {
    .gnav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }
    .gnav > li{
        width: calc(100% / 5);
        position: relative;
    }
    .gnav > li:before{
        content: "";
        position: absolute;
        top: 55%;
        left: 0;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background: #D4D4D4;
    }
    .gnav > li > a{
        width: 100%;
        text-align: center;
        display: block;
        padding: 1.85em 1.25em;
        font-size: 1.5rem;
        text-decoration: none;
        color: #161616;
        font-weight: bold;
        transition: all 0.2s ease;
    }
    .pageAbout .gnav > li:nth-child(1) > a,
    .pageMember .gnav > li:nth-child(2) > a,
    .pageSupport .gnav > li:nth-child(3) > a,
    .pageReport .gnav > li:nth-child(4) > a,
    .pageRegister .gnav > li:nth-child(5) > a,
    .pageProperty .gnav > li:nth-child(6) > a,
    .pageGuide .gnav > li:nth-child(6) > a,
    .gnav > li > a:hover{
        color: #00B2BB;
    }
    .gnav > li.parent-menu > a:after{
        content: "";
        position: absolute;
        top: 50%;
        right: 0.75em;
        display: inline-block;
        width: 0.45em;
        height: 0.45em;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: translateY(-50%) rotate(45deg);
        vertical-align: middle;
        transition: all 0.2s ease;
    }
    .pageAbout .gnav > li:nth-child(1) > a:after,
    .pageMember .gnav > li:nth-child(2) > a:after,
    .pageSupport .gnav > li:nth-child(3) > a:after,
    .pageReport .gnav > li:nth-child(4) > a:after,
    .pageRegister .gnav > li:nth-child(5) > a:after,
    .pageProperty .gnav > li:nth-child(6) > a:after,
    .pageGuide .gnav > li:nth-child(6) > a:after,
    .gnav > li.parent-menu > a:hover:after{
        border-color: #00B2BB;
    }
    .gnav > li.parent-menu> a:hover + .sub-menu,
    .gnav .sub-menu:hover{
        opacity: 1;
        pointer-events: auto;
        transition: all 0.2s ease;
    }
    .gnav .sub-menu{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        cursor: pointer;
        box-shadow: 0 3px 15px rgba(0,0,0,0.06);
        opacity: 0;
        pointer-events: none;
    }
    .gnav .sub-menu > li{
        background: #fff;
    }
    .gnav .sub-menu > li:first-child{
        border-radius: 4px 4px 0 0;
    }
    .gnav .sub-menu > li:last-child{
        border-radius: 0 0 4px 4px;
    }
    .gnav .sub-menu > li + li{
        border-top: 1px solid #F1F1F1;
    }
    .gnav .sub-menu > li > a{
        position: relative;
        width: 100%;
        text-align: left;
        display: block;
        padding: 1em 1.5em 1em 2.75em;
        font-size: 1.4rem;
        text-decoration: none;
        color: #161616;
        font-weight: normal;
        transition: all 0.2s ease;
    }
    .gnav .sub-menu > li > a:before{
        content: "";
        position: absolute;
        top: 50%;
        left: 1.3em;
        display: inline-block;
        width: 0.25em;
        height: 0.25em;
        border-right: 1px solid #CACACA;
        border-bottom: 1px solid #CACACA;
        transform: translateY(-50%) rotate(-45deg);
        vertical-align: middle;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    .gnav .sub-menu > li > a:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 1em;
        display: inline-block;
        width: 1.1em;
        height: 1.1em;
        border: 1px solid #CACACA;
        transform: translateY(-50%);
        border-radius: 50%;
        vertical-align: middle;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    .gnav .sub-menu > li > a:hover{
        background: #F9F9F9;
    }
    .gnav .sub-menu > li > a:hover:before,
    .gnav .sub-menu > li > a:hover:after{
        border-color: #00B2BB;
    }
}
@media screen and (max-width: 767px) {
}




/* ######################################################################################

　下層メインイメージ　.pageTitle

###################################################################################### */
.pageTitle{
    position: relative;
	background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}
.pageTitle .contents{
    height: 100%;
}
.pageTitle .contents .pageTitle__text{
	height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    color: #fff;
}


@media print, screen and (min-width: 768px) {
    .pageTitle{
        height: 230px;
        background-position: center;
        background-size: cover;
    }
    .pageTitle__text{
        font-size: 3.2rem;
    }
}
@media screen and (max-width: 767px) {
    .pageTitle {
        height: 160px;
        background-position: center 0px;
        background-size: cover;
    }
    .pageTitle .contents .pageTitle__text{
        font-size: 2.4rem;
    }
}


/* ページごと */
.pageMember .pageTitle{background-image: url(../img/contents/member/pageTitle.jpg);}
.pageSupport .pageTitle{background-image: url(../img/contents/member/pageTitle.jpg);}
.pageProperty .pageTitle{background-image: url(../img/contents/rental/pageTitle.jpg);}
.pageAbout .pageTitle {background-image: url(../img/contents/about/pageTitle.jpg);}
.pageRegister .pageTitle {background-image: url(../img/contents/register/pageTitle.jpg);}
.pageGuide .pageTitle {background-image: url(../img/contents/guide/pageTitle.jpg);}
.pageReport .pageTitle {background-image: url(../img/contents/report/pageTitle.jpg);}
.pageRegister.form .pageTitle,
.pageContact .pageTitle {background-image: url(../img/contents/contact/pageTitle.jpg);}

/* ######################################################################################

　下層メインイメージ　.pageTitleText

###################################################################################### */
.pageTitleText {
    background: #F2F6F6;
    color: #161616;
}
.pageTitleText .pageTitle__text {
    position: relative;
}

.pageTitleText .pageTitle__text span:before,
.pageTitleText .pageTitle__text span:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 14px;
    height: 4px;
}
.pageTitleText .pageTitle__text span:before {
    background: #00B2BB;
}
.pageTitleText .pageTitle__text span:after {
    left: 14px;
    background: #FFFFFF;
}

@media print, screen and (min-width: 768px) {
    .pageTitleText {
        height: 230px;
        display: flex;
        align-items: center;
    }
    .pageTitleText .pageTitle__text {
        padding-bottom: 0.6em;
        font-size: 3.2rem;
    }
    .pageTitleText .pageTitle__text span:before,
    .pageTitleText .pageTitle__text span:after {
        width: 14px;
        height: 4px;
    }
    .pageTitleText .pageTitle__text span:after {left: 14px;}
}
@media screen and (max-width: 767px) {
    .pageTitleText {
        height: 160px;
        display: flex;
        align-items: center;
    }
    .pageTitleText .pageTitle__text {
        padding-bottom: 0.5em;
        font-size: 2.4rem;
    }
    .pageTitleText .pageTitle__text span:before,
    .pageTitleText .pageTitle__text span:after {
        width: 14px;
        height: 4px;
    }
    .pageTitleText .pageTitle__text span:after {left: 14px;}
}



/* ######################################################################################

　フッター　footer

###################################################################################### */
body:not(.pageIndex) .footer{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

@media print, screen and (min-width: 768px) {
    body:not(.pageIndex) .footer{
        padding-top: 15.8%;
        background-image: url(../img/contents/index/mv.jpg);
    }
}
@media screen and (max-width: 767px) {
    body:not(.pageIndex) .footer{
        padding-top: 30%;
        background-image: url(../img/contents/index/mv_sp.jpg);
    }
}


/* =======================================================
　footer__top
========================================================== */
.footer__top{
    background: #F2F6F6;
}

@media print, screen and (min-width: 768px) {
    .footer__top{
        padding: 5em 0 4em;
    }
}
@media screen and (max-width: 767px) {
    .footer__top{
        padding: 3em 0;
    }
}

/*　fnav
　-------------------------------------*/
.fnav > li > a{
    display: block;
    text-decoration: none;
    color: #161616;
    font-weight: bold;
}
.fnav > li > .sub-menu > li > a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #161616;
    font-weight: normal;
}
.fnav > li > .sub-menu > li > a:before{
    content: "";
    position: absolute;
    top: 53%;
    left: 0;
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid #00B2BB;
    border-bottom: 2px solid #00B2BB;
    transform: translateY(-50%) rotate(-45deg);
    vertical-align: middle;
    box-sizing: border-box;
}
.fnav li.nolink > a {pointer-events: none;}


/* フッタリンク：ログイン・ログアウト */
.fnav li.login,
.fnav li.logout {display:none;}

body:not(.logged-in) .fnav li.login {display: inline-block;}
body.logged-in .fnav li.logout {display: inline-block;}



@media print, screen and (min-width: 768px) {
    .fnav{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-height: 200px;
    }
    .fnav > li {
    }
    .fnav > li:nth-child(1),
    .fnav > li:nth-child(2),
    .fnav > li:nth-child(3) {
        min-height: 180px;
    }
    .fnav > li > a{
        padding: 0.5em 0;
        font-size: 1.6rem;
        transition: all 0.2s ease;
    }
    .fnav > li > a:hover{
        color: #00B2BB;
    }
    .fnav > li > .sub-menu > li > a{
        padding: 0.5em 0 0.5em 1em;
        font-size: 1.4rem;
        transition: all 0.2s ease;
    }
    .fnav > li > .sub-menu > li > a:hover{
        color: #00B2BB;
    }
}
@media screen and (max-width: 767px) {
    .fnav > li + .fnav__list{
        margin-top: 1.5em;
    }
    .fnav > li > a{
        padding: 0.5em 0;
        font-size: 1.6rem;
    }
    .fnav > li > .sub-menu{
        margin-bottom: 1em;
    }
    .fnav > li > .sub-menu > li > a{
        padding: 0.5em 0 0.5em 1em;
        font-size: 1.4rem;
    }
}

/* =======================================================
　footer__middle
========================================================== */
.footer__middle{}

@media print, screen and (min-width: 768px) {
    .footer__middle{
        padding: 6em 0 8em;
    }
}
@media screen and (max-width: 767px) {
    .footer__middle{
        padding: 3em 0 4em;
    }
}

/*　fcompany
　-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .fcompany{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .fcompany__logo{
        margin-right: 3em;
    }
    .fcompany__title{
        margin-bottom: 0.75em;
        font-weight: bold;
        font-size: 1.8rem;
    }
    .fcompany__text{
        font-size: 1.5rem;
        line-height: 1.8;
    }
}
@media screen and (max-width: 767px) {
    .fcompany__logo{
        margin-bottom: 1em;
        text-align: center;
    }
    .fcompany__logo img{
        width: 140px;
    }
    .fcompany__title{
        text-align: center;
        margin-bottom: 1.75em;
        font-weight: bold;
        font-size: 1.8rem;
    }
    .fcompany__text{
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .fcompany__text a[href^="tel:"] {
        color: inherit;
        text-decoration: none;
        pointer-events: none;
    }

}

/* =======================================================
　footer__bottom
========================================================== */
.footer__bottom{
    background: #00B2BB;
}

/*　copyright
　-------------------------------------*/
.copyright{
    display: block;
    text-align: center;
    color: #fff;
}

@media print, screen and (min-width: 768px) {
    .copyright{
        padding: 1em 0;
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 767px) {
    .copyright{
        padding: 0.75em 0;
        font-size: 1.4rem;
    }
}