@charset "UTF-8";
/* =======================================================================
 layout.css
 services配下：レスポンシブ対応用 contents-2 共通レイアウト
 @URL https://services.osakagas.co.jp
 ====================================================================== */

/* -----------------------------------------------------------------------
PC 共通
----------------------------------------------------------------------- */

/* Page wrapper（PC）
----------------------------------------------------------------------- */
:where(#page-wrapper) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    min-height: 100vh;
    border: 5px solid var(--main-site-color);
}

/* Page header（PC）
----------------------------------------------------------------------- */
:where(#page-header) {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: -3px;
    padding: 0 15px;
    background: transparent;
    height: 71px;
}

:where(#page-header)::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    width: 100%;
    height: 69px;
    background: var(--main-site-color);
}

:where(#page-header)::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
}

:where(#page-header) .header-inner {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    width: var(--devices-content-width);
}

:where(#user-info) {
    flex: 0 0 714px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    background: var(--main-site-color);
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    height: 68px;
}

:where(#user-info)::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 96px;
    height: 68px;
    background: url(/portalc/contents-2/assets/img/bg_curve.jpg) no-repeat left top;
    background-size: auto 100%;
}

:where(#user-info)::after {
    content: '';
    position: absolute;
    left: 96px;
    z-index: 1;
    width: 100%;
    min-width: 15px;
    height: 100%;
    background: var(--main-site-color);
}

:where(#header-main-box){
    display: flex;
    flex-flow: row wrap;
    width: var(--devices-content-width);
    margin: var(--devices-content-margin);
}

:where(#page-header #header-upper-box){
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    width: var(--devices-content-width);
}

/* ロゴ */
:where(#header-logo) {
    display: flex;
    align-items: center;
    width: 184px;
    height: 100%;
    padding: 12px 0 16px 0;
}

:where(#header-logo) a {
    width: 100%;
}

:where(#page-header #logo-box) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: -4px;
    margin-right: 24px;
}

:where(#page-header #logo-box .logo-osakagas) {width: 132px;}
:where(#page-header #logo-box .logo-home-osakagas) {width: 110px;margin-left: 15px;}
:where(#page-header #logo-box .logo-home-osakagas a) {
    display: flex;
    align-items: center;
    height: 15px;
}

/* Page contents（PC）
----------------------------------------------------------------------- */
:where(#page-contents) {
    flex: 1 0 auto;
    padding: 0;
}

/* page top */
:where(.page-top) {
    display: none;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    right: 5px;
    width: 44px;
    height: 44px;
    color: var(--main-white-color);
    opacity: 1;
    transition: var(--main-hover-transition), transform var(--transition-base-duration) var(--ease-out-cubic);
    transform: translateY(44px);
    max-width: 100%;
}

:where(.page-top).active {transform: translateY(0);}

:where(.page-top):hover {opacity: var(--main-hover-opacity);}

:where(.page-top)::before,
:where(.page-top)::after {content: '';display: inline-block;}

:where(.page-top)::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 44px 44px;
    border-color: transparent transparent var(--main-site-color) transparent;
}

:where(.page-top)::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 12px;
    margin: 1px 0 0 5px;
    background: url('/portalc/contents-2/assets/img/icon_pagetop.svg') no-repeat 0 0;
    background-size: contain;
}

/* Page footer（PC）
----------------------------------------------------------------------- */
#page-footer {
    padding: 15px 0;
    background: var(--main-site-color);
    color: #ffffff;
}

#page-footer a {
    text-decoration: none;
    color: #ffffff;
}

#footer-upper-box,
#footer-main-box {
    width: 950px;
    position: relative;
    margin: 0 auto;
}

#footer-upper-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-start;
}

#footer-main-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

#footer-sp-navi {display: none;}


#footer-upper-box .page-top {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    width: 196px;
    height: 24px;
    padding: 0 12px 0 10px;
    line-height: 26px;margin-top: -39px;
    background: var(--main-site-color);
    border-radius: 4px 4px 0 0;
    font-size: 1.2rem;
    text-align: left;
    letter-spacing: 0.075rem;
    cursor: pointer;
}

#footer-upper-box .page-top:hover {opacity: 0.75;}

#footer-upper-box .page-top br {display: none;}

#footer-upper-box .page-top::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #ffffff transparent;
}


#footer-www-navi {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}
#footer-www-navi .navi-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
}

#footer-www-navi .navi-list .navi-item {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}

#footer-www-navi .navi-list .navi-head {
    display: none;
}

#footer-www-navi .navi-list .navi-item {margin-right: 2rem;}

#footer-www-navi .navi-list .navi-item a {
    display: inline-flex;
    flex-flow: row wrap;align-items: center;
}

#footer-www-navi .navi-list .navi-item a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin: -1px 0.5rem 0 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #ffffff;
}

#footer-main-box .logo-daigas-group {
    width: 105px;
    position: absolute;
    top: 0;right: 0;
}

#copyright {
    width: 100%;
    font-size: 1rem;
    text-align: left;
}

/* responsive
------------------------------------ */
#page-footer.responsive {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    position: relative;
    height: 39px;
    padding: 5px 15px 0;
    background: var(--main-site-color);
    color: var(--main-white-color);
}

#page-footer.responsive a,
#page-footer.responsive a:link,
#page-footer.responsive a:visited,
#page-footer.responsive a:active {
    text-decoration: none;
    color: var(--main-white-color);
    opacity: 1;
    transition: var(--main-hover-transition);
}

#page-footer.responsive a:hover {opacity: var(--main-hover-opacity);}

#page-footer.responsive a[target="_blank"] {
    background-image: url('/portalc/contents-2/assets/img/icon_blank_white.svg');
}

#page-footer.responsive .footer-inner {
    flex: 0 0 var(--devices-content-width);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;
    max-width: 100%;
}

#page-footer.responsive #footer-navi {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#page-footer.responsive #footer-navi ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#page-footer.responsive #footer-navi ul li {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#page-footer.responsive #footer-navi ul li::after {
    content: '';
    display: inline-block;
    height: 10px;
    margin: 0 15px;
    border-right: 1px solid var(--main-white-color);
}

#page-footer.responsive #footer-navi ul li:last-child::after {border-width: 0;margin: 0;}

#page-footer.responsive #footer-navi li a {
    position: relative;
    font-size: 1rem;
}

#page-footer.responsive .footer-media {
    display: none;
    opacity: 0;
    visibility: hidden;
    margin-bottom: 12px;
}
#page-footer.responsive .footer-media img {
    width: auto;
    max-width: 100%;
}
#page-footer.responsive .link-sns {
    max-width: 350px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#page-footer.responsive .link-sns a[target="_blank"] {
    display: block;
    padding-right: 0;
    background-image: unset;
}

#page-footer.responsive #copyright {
    width: auto;
    font-size: 1rem;
}



/* -----------------------------------------------------------------------
TB/SP 共通
----------------------------------------------------------------------- */
@media (max-width: 980px) {
    
    /* Page wrapper（TB/SP）
    ------------------------------------------------------------------- */
    :where(#page-wrapper) {
        border: none;
    }
    
    /* Page header（TB/SP）
    ------------------------------------------------------------------- */
    :where(#page-header) {
        padding-top: 10px;
    }

    :where(#header-logo) {
        display: block;
        min-width: 144px;
        width: 35.3%;
        max-width: 184px;
        height: auto;
        padding: 0;
        margin-bottom: 6px;
    }

    :where(#header-main-box){}
    
    :where(#header-upper-box){
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        height: 60px;
    }
    
    /* ロゴ */
    :where(#logo-box) {align-items: flex-end;margin-top: -4px;padding: 0;}
    :where(#logo-box .logo-osakagas) {width: 100px;}
    :where(#logo-box .logo-home-osakagas) {width: 84px;margin-left: 5px;}
    :where(#logo-box .logo-home-osakagas a) {}
    :where(#logo-box .logo-home-osakagas a img) {width: 100%;}

    /* responsive
    ------------------------------------ */
    #page-header.responsive {
        background-color: var(--main-site-color);
        margin-bottom: 0;
        padding: 16px 0;
        height: auto;
    }
    #page-header.responsive::before {
        content: none;
    }

    #page-header.responsive #user-info {
        display: none;
        flex: unset;
        height: auto;
    }
    #page-header.responsive #user-info::before {
        content: none;
    }
    
    /* Page contents（TB/SP）
    ------------------------------------------------------------------- */
    :where(#page-contents) {}

    /* page top */
    :where(.page-top) {
        display: block;
        position: static;
        width: var(--devices-content-width);
        height: auto;
        margin:0 auto 18px;
        padding: 10px 15px;
        background: #008dd8;
        border-radius: 4px;
        font-size: 1.1rem;
        text-align: center;
        transition: none;
        transform: none;
    }
    
    :where(.page-top):hover {opacity: 1;}
    
    :where(.page-top)::before,
    :where(.page-top)::after {}
    
    :where(.page-top)::before {
        position: relative;
        top: 3px;
        width: 6px;
        height: 6px;
        margin-right: 1em;
        border: solid white;
        border-width: 2px 2px 0 0;
        transform: rotate(-45deg);
    }
    
    :where(.page-top)::after {
        content: '';
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 12px;
        margin: 3px 0 0 4px;
        background: url('/portalc/contents-2/assets/img/icon_pagetop.svg') no-repeat 0 0;
        background-size: contain;
    }
  
    
    /* Page footer（TB/SP 共通）
    ----------------------------------------------------------------------- */
    #page-footer a {
        text-decoration: none;
        color: #ffffff;
    }
    
    #footer-upper-box,
    #footer-main-box {
        width: 100%;
    }
    
    #footer-upper-box .page-top:hover {opacity: initial;}

    /* responsive
    ------------------------------------ */
    #page-footer.responsive {
        flex-flow: column nowrap;
        height: auto;
        padding: 15px 5px 10px;
    }
    
    #page-footer.responsive a,
    #page-footer.responsive a:link,
    #page-footer.responsive a:visited,
    #page-footer.responsive a:active {
        transition: none;
    }
    
    #page-footer.responsive a:hover {
        opacity: 1;
    }
    
    #page-footer.responsive .footer-inner {
        flex: 0 1 auto;
        flex-flow: column nowrap;
        /* justify-content: center; */
        width: var(--devices-content-width);
        margin: 0 auto;
        max-width: 100%;
    }
    
    #page-footer.responsive #footer-navi {
        margin-bottom: 12px;
    }
    
    #page-footer.responsive #footer-navi li a {
        font-size: 1.1rem;
    }
    #page-footer.responsive .footer-media {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* -----------------------------------------------------------------------
TB (portrait)
----------------------------------------------------------------------- */
@media (min-width: 521px) and (max-width: 980px) {
    /* Page footer（TB）
    ----------------------------------------------------------------------- */
    #page-footer {
        padding: 15px 3%;
    }
    
    #footer-upper-box {}
    
    #footer-sp-navi {display: none;}
    
    #footer-sp-navi .navi-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: stretch;
        align-items: stretch;
        width: 100%;
    }
    
    #footer-sp-navi .navi-list .navi-item {
        flex: 1 0 auto;
        align-items: stretch;
        position: relative;
        box-shadow: 1px 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    #footer-sp-navi .navi-list .navi-item::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;top: 0;
        width: 0;height: 100%;
        border-right: 1px solid #00508d;
    }
    
    #footer-sp-navi .navi-list .navi-item a,
    #footer-upper-box .page-top {}

    /* SP用メニュー：ページトップ */
    #footer-upper-box .page-top {}
    
    /* フッターメインメニュー */
    #footer-main-box {}
    
    #footer-www-navi {margin: 0 125px 10px 0;}
    
    #footer-www-navi .navi-list { justify-content: flex-start;}
    
    #footer-www-navi .navi-list .navi-item {flex: 0 1 auto;margin: 0 2rem 5px 0;}
    
    #footer-www-navi .navi-list .navi-item a {}
    
    #footer-upper-box .page-top::before {display: none;}
    
    #footer-www-navi .navi-list .navi-item a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin: -1px 0.5rem 0 0;
        border-style: solid;
        border-width: 3px 0 3px 5px;
        border-color: transparent transparent transparent #ffffff;
    }
    
    #footer-main-box .logo-daigas-group {}
    
    #copyright {}
  
}

/* -----------------------------------------------------------------------
SP (portrait)
----------------------------------------------------------------------- */
@media (max-width: 520px) {
    
    /* Page header（SP）
    ------------------------------------------------------------------- */
    :where(#logo-box){}
    
    /* Page contents（TB/SP）
    ------------------------------------------------------------------- */
    :where(#footer-main-box) {margin-top:24px;}
    :where(#footer-www-navi) {margin-bottom: 9px;}
    :where(#footer-www-navi .navi-list){flex-flow: column nowrap;}
    :where(#footer-www-navi .navi-list .navi-item) {margin: 0 0 5px 0;align-items: flex-start;}
    :where(#copyright) {text-align: center;}
    
    /* Page footer（SP）
    -------------------------------------------------------------------- */
    #page-footer {
        padding: 0 0 15px 0;
    }
    
    #page-footer a {
        text-decoration: none;
        color: #ffffff;
    }
    
    #footer-upper-box,
    #footer-main-box {
        width: 100%;
        position: relative;
        margin: 0 auto;
    }
    
    #footer-upper-box {
        justify-content: space-between;
        margin-bottom: 24px;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
    }
        
    /* フッターメインメニュー */
    #footer-main-box {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 3%;
    }
    
    #footer-www-navi {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 9px;
    }
    
    #footer-www-navi .navi-list {flex-flow: column nowrap;justify-content: flex-start;align-items: flex-start;}
    
    #footer-www-navi .navi-list .navi-item {margin: 0 0 5px 0;align-items: flex-start;}
    
    #footer-www-navi .navi-list .navi-item a {}
    
    #footer-upper-box .page-top:hover {opacity: 1;}
    
    #footer-upper-box .page-top br {display: inherit;}
    
    #footer-upper-box .page-top::before {display: none;}
    
    #footer-www-navi .navi-list .navi-item a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin: -1px 0.5rem 0 0;
        border-style: solid;
        border-width: 3px 0 3px 5px;
        border-color: transparent transparent transparent #ffffff;
    }
    
    #footer-main-box .logo-daigas-group {
        width: 105px;
        position: absolute;
        top: 0;
        right: 3%;
    }
    
    #copyright {
        width: 100%;
        font-size: 1rem;
        text-align: center;
    }

    /* Page footer_simple（SP）
    -------------------------------------------------------------------- */
    /* SP用メニュー：ページトップ */
    .footer-simple #footer-upper-box .page-top{
        display: none;
    }
}