@charset "utf-8";

/* ----------------------------------- 

(c) 2023 Roppongi Energy Service Co., Ltd.

 ----------------------------------- */


/* ----------------------------------- 
    fonts
 ----------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

.font-size-dummy {
    font-size: .625rem;  /* 10px */
    font-size: .75rem;   /* 12px */
    font-size: .8125rem; /* 13px */
    font-size: .875rem;  /* 14px */
    font-size: 1rem;     /* 16px */
    font-size: 1.125rem; /* 18px */
    font-size: 1.25rem;  /* 20px */
    font-size: 1.5rem;   /* 24px */ 
    font-size: 1.75rem;  /* 28px */
    font-size: 2rem;     /* 32px */
    font-size: 3rem;     /* 48px */
}


/* ----------------------------------- 
    layout
 ----------------------------------- */

html {
    width: 100%;
    margin: 0;
    padding: 0;
    font:100%/1.5  'Noto Sans JP', sans-serif;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8rem 0 0 0;
    text-align: center;
    color: #333;
    font-weight: 300;
    background-color: #F3F3F3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family:"Noto Sans JP", sans-serif;
}

h1,h2,h3,h4 {
    color: #152040;
    margin-bottom: 1.5rem;
}

h1 {
    width: 100%;
    color: #fff;
    background-color: #3350A6;
    text-align: center;
    padding: 2rem 0;
}

h1 span {
    width: 100%;
    max-width: 1280px;
    display: block;
    text-align: left;
    margin: auto;
}

.text-h1 {
    font-size: 2rem;     /* 48px */
    font-weight: bold;
    margin-bottom: 1em;
}

p {
    text-align: left;
    margin: 0 auto 2rem auto;
}

p.error {
    width: 100%;
    padding: 1.5rem;
    color: #941825;
    background-color: #E5CAC6;
}

.wrapper {
    width: 90%;
}


section {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 4rem 0;
}

section .wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
}

.icon-pdf {
    position: relative;
}

.icon-pdf:after {
    content: url(../img/icon_pdf.png);
    width: 2rem;
    position: absolute;
    right: -2.5rem;
}

.center {
    text-align: center;
}

.for_tab,
.for_mob {
    display: none;
}

/* ----------------------------------- 
    link
 ----------------------------------- */
a {
    color: #5377A6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}



/* ----------------------------------- 
    input
 ----------------------------------- */
input {
    width: 70%;
    font-size: 1.125rem; /* 18px */
    line-height: 1;
    padding: 1rem;
    border-radius: .5em;
    border: solid 1px #999;
    display: inline-block;
    box-sizing: border-box;
}

input[type="radio"] {
    display: none;
}

.radio {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0 2rem;
    position: relative;
    width: auto;
}

.radio::before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    top:calc(50% - .5em);
    left: 0;
    background: #fff;
    border: 1px solid #707070;
    border-radius: 50%;
    position: absolute;
}

.radio::after {
    content: '';
    display: block;
    width: .6em;
    height: .6em;
    left: .25em;
    top: calc(50% - .25em);
    opacity: 0;
    background-color: #3350A6;
    border-radius: 50%;
    position: absolute;
}

input[type="radio"]:checked + .radio::before {
    border: solid 1px #3350A6;
}

input[type="radio"]:checked + .radio::after {
    opacity: 1;
}

input[type="checkbox"] {
    display: none;
}

.checkbox {
    width: calc(100% - 1.5em);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 0 0 0 3em;
    background-color: #fff;
}

.checkbox::before {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    left: 0;
    top: calc(50% - .75em);
    background-color: #fff;
    border: solid 1px #707070;
    position: absolute;
    border-radius: .5em;
}

.checkbox::after {
    content: '';
    display: block;
    width: .4em;
    height: .8em;
    left: .5em;
    top: calc(50% - .6em);
    border-right: .2em solid #3350A6;
    border-bottom:.2em solid #3350A6;
    transform: rotate(45deg);
    opacity: 0;
    position: absolute;
}

input[type="checkbox"]:checked + .checkbox::after {
    opacity: 1;
}

::placeholder,
.placeholder {
    color:#999;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: auto;
    font-size: 1.125rem; /* 18px */
    padding: 1rem 3rem 1rem 1rem;
    border-radius: .5em;
    border: solid 1px #999;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

select:invalid { color: #999; }
select option { color: #333; }
select option:first-child { color: #999; }

label.select {
    position: relative;
}

label.select:after {
    content: "▼";
    color: #707070;
    width: 1rem;
    height: 1rem;
    top:calc(50% - .725rem);
    right: 1rem;
    position: absolute;
    z-index: 10;
}

select::-ms-expand {
	display: none;
    opacity: 0;
}

select:focus::-ms-value {
    background: transparent;
    color:inherit;
}

textarea {
    width: 70%;
    height: 10rem;
    font-size: 1.125rem; /* 18px */
    padding: 1rem;
    border-radius: .5em;
    border: solid 1px #999;
    display: inline-block;
    box-sizing: border-box;
}


button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font: current;
    
    width: auto;
    min-width: 12rem;;
    display: block;
    margin: 0 0 1rem 0;
    font-size: 1rem;  /* 18px */
    padding: .8rem 1.5rem;
    border-radius: 3em;
    color: #fff;
    border: solid 1px #21A668;
    background-color: #21A668;
    box-sizing: border-box;
    cursor: pointer;
}

button.submit {
    font-size: 1.125rem; /* 18px */
}

button.back {
    font-size: 1.125rem; /* 18px */
    color: #21A668;
    background-color: #fff;
}


/* ----------------------------------- 
    header
 ----------------------------------- */
header {
    width: 100%;
    text-align: right;
    margin-top: -8rem;
    background-color: #F3F3F3;
    position:fixed;
    z-index: 100;
}

header .wrapper {
    width: 95%;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
}

.logo {
    width: 50%;
    text-align: left;
}

.logo img {
    width: 100%;
    max-width: 386px;
}

.gNav {
    font-weight: bold;
}

.gNav ul {
    display: flex;
}

.gNav ul li {
    height: 8rem;
    display: flex;
    align-items: center;
    padding:0 1rem;
}

.gNav ul li a {
    position: relative;
    color: #152040;
}

.gNav ul li a:hover {
    text-decoration: none;
}

.gNav ul li a:hover:after {
    content: "";
    width: 2rem;
    height: 4px;
    top: 2rem;
    left: calc(50% - 1rem);
    position: absolute;
    background-color: #21A668;
}

.gNav ul li.gNav_contact {
    background-color: #21A668;
    border-bottom: none;
}

.gNav ul li.gNav_contact a {
    color: #fff;
}

.gNav ul li.gNav_contact a:hover:after {
    background-color: #fff;
}

.gNav .gNav_dsp,
input.gNav-open,
input.memberMenu-open,
.gNav-btn {
    display: none;
}


/* ----------------------------------- 
    bread crumbs
 ----------------------------------- */

.breadcrumbs {
    width: 100%;
    padding:1em 0;
    background-color: #fff;
}

.breadcrumbs .wrapper {
    width: 100%;
    max-width: 1280px;
    text-align: center;
    margin: 0 auto;
}

.breadcrumbs ul {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: .875rem;  /* 14px */
}

.breadcrumbs ul li{
    position: relative;
    padding-right: 1rem;
    margin-right: 1rem;
}

.breadcrumbs ul li:after{
    content: "";
    position: absolute;
    top:calc(50% - .2rem);
    right: 1.3rem;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 1px solid #5377A6;
    border-top: 1px solid #5377A6;
    transform: rotate(45deg);
}

.breadcrumbs ul li:last-child{
    padding-right: 0;
    margin-right: 0;
}

.breadcrumbs ul li:last-child:after{
    display: none;
}



/* ----------------------------------- 
    footer
 ----------------------------------- */

footer {
    background-color: #304353;
    color: #fff;
    text-align: center;
    padding: 4rem 0 1rem 0;
}

footer a {
    color: #fff;
}

footer .wrapper {
    margin: 0 auto;
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
}

footer .wrapper div {
    text-align: left;
}


footer nav {
    width: 50%;
}

footer nav ul {
    display: flex;
    justify-content:flex-end;
}

footer nav ul div {
    width: 33%;
}

footer nav ul div:last-of-type {
    width: auto;
}

footer nav ul div li {
    margin-bottom: 1rem;
}

footer .wrapper div p,
footer nav ul div .nest,
footer nav ul div .nest a {
    color: #EEEEEE;
    font-size: .875rem;  /* 14px */
}

.copy {
    font-size: .75rem;   /* 12px */
    text-align: center;
}



/* ----------------------------------- 
    for tablet / ～1280
 ----------------------------------- */

@media screen and (max-width: 1279px) {
    body {
        padding: 5rem 0 0 0;
    }
    
    section .wrapper,
    .breadcrumbs .wrapper,
    h1 span {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .for_pc {
        display: none;
    }
    
    .for_tab {
        display: block;
    }

    header {
        margin-top: -5rem;
    }

    header .wrapper {
        padding: 1rem 0;
    }
    
    .logo img {
        width: auto;
        height: 3rem;
    }
    
    .gNav {
        display: block;
    }

    .gNav ul {
        width: 100%;
        height: 100%;
        padding-top: 3rem; 
        display: block;
        position: fixed;
        top: -100%;
        left: 0;
        background-color: #304353;
        opacity: 0;
        transition: all 0.5s;
    }

    .gNav ul li {
        width: 100%;
        height: auto;
        display: block;
        text-align: left;
        padding:1rem 1rem 1rem 2rem;
    }

    .gNav ul li a {
        width: 100%;
        display: block;
        color: #fff;
    }
    
    .gNav ul li.nest {
        padding-top:0;
    }
    
    .gNav ul li.nest a {
        color: #EEEEEE;
        font-size: .875rem;  /* 14px */
        font-weight: normal;
        padding-left: 1rem;
    }

    .gNav ul li a:hover {
        text-decoration: none;
    }

    .gNav ul li a:hover:after,
    .gNav ul li.gNav_contact a:hover:after {
        content: "";
        width: .5rem;
        height: .5rem;
        top: calc(50% - .25rem);
        left: -1rem;
        border-radius: 50%;
        position: absolute;
        background-color: #21A668;
    }

    .gNav ul li.gNav_contact {
        background-color: transparent;
    }

    .gNav .gNav_dsp {
        display: block;
    }
    
    input.gNav-open,
    input.memberMenu-open {
        display: none;
    }
    
   .gNav-btn {
        display: flex;
        position:fixed;
        top:0;
        right: 1rem;
        width: 2rem;
        height: 100%;
        max-height: 5rem;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 30;
    }
    
   .gNav-btn span,
   .gNav-btn span:before,
   .gNav-btn span:after {
        content: "";
        display: block;
        height: 2px;
        width: 1.5rem;
        right: 0;
        background-color: #3350A6;
        position: absolute;
    }
    
   .gNav-btn span:before {
        bottom:.42em;
    }
    
   .gNav-btn span:after {
       width: 1.2rem;
       top:.42em;
       right: .3rem;
    }
    
    
        /* ccontents menu open -----------------------*/
        .gNav #gNav-input:checked ~ .gNav-btn  {
            width: 100%;
        }
    
        .gNav #gNav-input:checked ~ .gNav-btn span { 
            background-color: rgba(255, 255, 255, 0);
        }

        .gNav #gNav-input:checked ~ .gNav-btn span:before {
            bottom: 0;
            transform: rotate(45deg);
            background-color: #fff;
        }

        .gNav #gNav-input:checked ~ .gNav-btn span:after {
       width: 1.5rem;
            top: 0;
            right: 0;
            transform: rotate(-45deg);
            background-color: #fff;
        }

        .gNav #gNav-input:checked ~ ul {
            opacity: 1;
            top: 0;
            z-index: 20;
            transition: all 0.4s;
        }

        /* //contents menu open -----------------------*/
    

    footer .wrapper {
        display: block;
    }

    footer .wrapper div {
    }


    footer nav {
        width: 100%;
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
        padding-top: 1rem;
    }

    footer nav ul {
        justify-content: flex-start;
    }

    footer nav ul div {
        width: 50%;
    }
}



/* ----------------------------------- 
    for mobile / ～519
 ----------------------------------- */

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

    body {
        padding: 4rem 0 0 0;
    }

    header {
        margin-top: -4rem;
    }

    .logo img {
        height: 2rem;
    }    

    .gNav-btn {
        max-height: 4rem;
    }

    h1,h2,h3,h4,p {
        margin-bottom: 1rem;
    }
    
    h1 {
        font-size: 1.25rem;  /* 20px */
        padding: 1rem 0;
        margin-bottom: 0;
    }
    
    .text-h1 {
        font-size: 1.25rem;
    }
    
    .for_mob {
        display: block;
    }
    
    .icon-pdf:after {
        display: none;
    }

    section {
        padding: 2rem 0;
        padding: 0;
    }
    
    .breadcrumbs {
        overflow: scroll;
        white-space: nowrap;
    }
    
    .breadcrumbs ul {
        font-size: .75rem;   /* 12px */
        flex-wrap: nowrap;
    }
    
    footer {
        padding: 2rem 0 1rem 0;
    }
    
}