@charset "utf-8";

/* -----------------------------------------------
 common
----------------------------------------------- */
html,body {
    font-family: "メイリオ", "Meiryo", YuGothic, "Yu Gothic", system-ui, -apple-system, "Hiragino Sans", "Segoe UI", sans-serif;
	color: #070707;
	font-size: 10px;
    background-color: #fff;
}
body {
    font-size: 1.6rem;
}
a {
    color: #070707;
    text-decoration: none;
    transition: 0.2s;
}
a:hover {
    opacity: 0.6;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

/* -----------------------------------------------
 format
----------------------------------------------- */
.wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.b_ffb700 {
    background: #ffb700;
}
.c_ffb700 {
    color: #ffb700;
}

.g_form {
    display: inline-block;
    min-width: 400px;
    padding: 20px 58px;
    border: 1px solid #ffb700;
    border-radius: 40px;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 2rem;
}
.g_form:hover {
    color: #ffb700;
    background: #393939;
    opacity: 1;
}
.top_btn {
    display: inline-block;
    min-width: 200px;
    max-width: 40%;
    margin-top: 40px;
    padding: 5px 20px;
    border: 1px solid #ffb700;
    border-radius: 40px;
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    background: #ffb700;
}
.top_btn:hover {
    color: #ffb700;
    background: #fff;
    opacity: 1;
}

#main section {
    padding: 80px 0;
}

#main h2 {
    margin-bottom: 60px;
    font-size: 3.2rem;
    text-align: center;
    text-wrap:inherit;
}
#main h3 {
    text-wrap:inherit;
}

@media  screen and (max-width: 600px) {
    .g_form {
        min-width: 0%;
        padding: 20px 30px;
        font-size: 1.8rem;
    }
    #main h2 {
        font-size: 2.8rem;
        line-height: 1.2;
    }
}

/* -----------------------------------------------
 header
----------------------------------------------- */
#gh_bar {
    padding: 17px 0;
}
.gh_logo a {
    display: inline-block;
}
#mv {
    width: 100%;
    color: #fff;
    background: url(../images/mv.png) center center/ cover;
}
#mv .wrap {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    padding: 80px 20px;
}
#mv h1 {
    margin-bottom: 20px;
    font-size: 3.2rem;
    text-wrap: inherit;
    letter-spacing: -0.14rem;
}
#mv p {
    margin-bottom: 20px;
    font-size: 2rem;
    letter-spacing: -0.06rem;
}
#mv .s_logo {
    display: block;
}

@media  screen and (max-width: 1024px) {
    #mv .wrap {
        display: block;
        padding: 40px 20px;
    }
    #mv .bt_box {
        margin-top: 20px;
        text-align: right;
    }
}
@media  screen and (max-width: 600px) {
    #mv h1 {
        font-size: 2.8rem;
    }
    #mv p {
        font-size: 1.8rem;
    }
}

/* -----------------------------------------------
 main
----------------------------------------------- */

/* lead */
#main #lead {
    position: relative;
    padding-bottom: 120px;
    background: #fff6de;
}
#main #lead::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -181px;
    left: 50%;
    transform: translateX(-50%);
    width: 411px;
    height: 181px;
    background: url(../images/dec02.png) no-repeat center center /cover;
    z-index: 10;
}
#main #lead .wrap {
    padding-bottom: 80px;
}
#worries {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
}
#worries li {
    width: calc(100% / 3);
    text-align: center;
}
#worries li p {
    position: relative;
    margin-bottom: 55px;
    padding: 50px 22px;
    border-radius: 30px;
    font-weight: bold;
    background: #ffb700;
}
#worries li p::after {
    display: block;
    content: "";
    width: 38px;
    height: 45px;
    position: absolute;
    bottom: -28px;
    right: 73px;
    background: url(../images/dec01.png) no-repeat center center / cover;

}
#lead .abs {
    max-width: 100%;
    position: absolute;
    bottom: -240px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
#lead .center {
    text-align: center;
}
#lead .center span {
    display: inline-block;
}
#lead div.center {
    margin-bottom: 30px;
}
#lead div.center p {
    margin-top: 30px;
    font-weight: bold;
    font-size: 3.2rem;
}
#lead p.center {
    display: flex;
    justify-content: center;
    width: 100vw;
    font-weight: bold;
    font-size: 4.8rem;
}
#lead p.center span {
    margin-right: 20px;
}

@media  screen and (max-width: 1024px) {
    #lead p.center {
        flex-wrap: wrap;
    }
}
@media  screen and (max-width: 600px) {
    #main #lead .wrap {
        padding-bottom: 40px;
    }
    #main #lead::after {
        bottom: -40px;
        max-width: 30%;
        width: 100px;
        height: 40px;
    }
    #worries {
        display: block;
    }
    #worries li {
        display: flex;
        width: 100%;
        align-items: center;
    }
    #worries li:not(:last-child) {
        margin-bottom: 60px;
    }
    #worries li:nth-child(odd) {
        flex-direction: row-reverse;
    }
    #worries li p {
        margin-top: -20px;
        margin-bottom: 0;
        padding: 20px;
    }
    #worries li span {
        max-width: 40%;
    }
    #worries li:nth-child(odd) p::after {
        bottom: 10px;
        left: -10px;
        transform: rotate(30deg);
    }
    #worries li:nth-child(even) p::after {
        bottom: 10px;
        right: -10px;
        transform: rotate(260deg);
    }
    #lead .abs {
        max-width: 100%;
        bottom: -160px;
    }
    #lead div.center span {
        max-width: 20%;
    }
    #lead div.center p {
        margin-top: 10px;
        font-size: 2rem;
    }
    #lead p.center {
        font-size: 2.8rem;
    }
    #lead p.center span {
        max-width: 50%;
        margin-right: 0;
    }
}


/* guideline */

#main #guideline {
    position: relative;
    margin-top: 350px;
    background: #ffb700;
}
#guideline::after {
    display: block;
    content: "";
    width: 48px;
    height: 32px;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/dec04.png) no-repeat center center /cover;
}
#guideline .exhibit {
    display: inline-block;
    border-radius: 30px;
    margin-bottom: 30px;
    background: #fff;
}
#guideline .exhibit p {
    padding: 10px 25px 10px 85px;
    font-size: 2.4rem;
    background: url(../images/dec03.png) no-repeat center left 25px;
}
#guideline .exhibit span {
    color: #ff782c;
    font-weight: bold;
}
#guideline h2 {
    letter-spacing: -0.14rem;
}
#guideline ul li {
    margin-bottom: 20px;
    padding: 40px 50px;
    border-radius: 30px;
    background: #fff;
}
#guideline ul h3 {
    margin-bottom: 30px;
    font-weight: normal;
    font-size: 2rem;
}
#guideline ul table {
    color: #ee2c2c;
    font-weight: bold;
}
#guideline ul table tr {
    display: flex;
}
#guideline ul table th {
    min-width: 72px;
}
#guideline small {
    display: block;
    text-align: right;
}
#guideline small a {
    color: #fff;
    word-wrap: break-word;
}

@media  screen and (max-width: 1024px) {
    #guideline h2 {
        letter-spacing: normal;
    }
}
@media  screen and (max-width: 600px) {
    #main #guideline {
        margin-top: 200px;
    }
    #guideline .exhibit p {
        font-size: 1.8rem;
    }
    #guideline ul li {
        padding: 30px;
    }
}

/* summary */
#summary .wrap {
    text-align: center;
}
#summary .bubble {
    position: relative;
    display: inline-block;
    margin-bottom: 60px;
    padding: 20px 30px;
    border-radius: 30px;
    font-size: 2.4rem;
    background: #fff6de;
}
#summary .bubble::after {
    display: block;
    content: "";
    width: 48px;
    height: 28px;
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/dec05.png) no-repeat center center /cover;
}
#summary .bubble span {
    color: #ee782c;
    font-weight: bold;
}
#summary h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 3.6rem;
}
#summary h2 span {
    margin-right: 20px;
}
#summary h2 + p {
    margin-bottom: 60px;
}
#summary .g_form {
    margin-top: 60px;
}

@media  screen and (max-width: 1024px) {
    #summary .bubble span:last-child {
        display: block;
    }
}
@media  screen and (max-width: 600px) {
    #summary h2 {
        flex-wrap: wrap;
    }
}

/* reasons */

#reasons {
    background: #f5f5f5;
}
#reasons .wrap {
    text-align: center;
}
#reasons h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
    letter-spacing: -0.19rem;
}
#reasons h2 img {
    margin: 0 10px;
}
#reasons h3 {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 59px;
    margin-bottom: 40px;
    font-weight: normal;
    font-size: 3.2rem;
    border-bottom: 3px solid #cecdcd;
}
#reasons h3::after {
    display: block;
    content: "";
    position: absolute;
    bottom: -3px;
    left: 1;
    width: 50%;
    height: 3px;
    background: #ffb700;
}
#reasons h3 span {
    display: block;
    margin-right: 35px;
    font-weight: bold;
    font-size: 4.8rem;
}
#reasons .r_list {
    margin-bottom: 60px;
    text-align: left;
}
#reasons .r_list li {
    margin-bottom: 5px;
}
#reasons .r_list > li:not(:last-child) {
    margin-bottom: 6%;
}
#reasons .r_list li ul {
    margin-top: 5px;
}
#reasons .r_list > li > ul > li {
    position: relative;
    padding-left: 16px;
}
#reasons .r_list > li > ul > li::before {
    display: block;
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
}
#reasons .r_list ul li ul li {
    position: relative;
    margin-left: -16px;
    padding-left: 16px;
}
#reasons .r_list ul li ul li::before {
    display: block;
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}
#reasons .r_list li.list_img {
    margin-top: 40px;
    padding-left: 0;
}
#reasons .r_list li.list_img::before {
    display: none;
}
#reasons .r_list small {
    display: block;
    margin-top: 20px;
    text-align: right;
}
#reasons .r_list .reason02 .list_img {
    display: flex;
    gap: 40px;
}
#reasons .r_list .reason02 .list_img span {
    display: block;
    max-width: calc(50% - 20px);
}
#reasons .r_list .reason03 .list_img {
    margin-bottom: 40px;
}

@media  screen and (max-width: 1024px) {
    #reasons h2 {
        display: block;
        letter-spacing: normal;
    }
    #reasons h2 img {
        margin: 5px auto;
    }
}
@media  screen and (max-width: 600px) {
    #reasons h2 {
        font-size: 2.8rem;
    }
    #reasons h3 {
        font-size: 2rem;
    }
    #reasons h3 span {
        font-size: 3rem;
    }
    #reasons .r_list small span {
        display: block;
    }
}

/* safety */

#safety h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
}
#safety h2 span {
    margin-right: 20px;
}
#safety .outline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 40px;
    margin-bottom: 60px;
    padding: 40px;
    background: #f5f5f5;
}
#safety .outline li {
    position: relative;
    width: calc(50% - 20px);
    padding-left: 16px;
}
#safety .outline li::before {
    display: block;
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}
#safety .d_table {
    width: calc(100% + 20px);
    margin-left: -10px;
    border-spacing: 10px;
    text-align: center;
}
#safety .d_table th,
#safety .d_table td {
    padding: 20px;
}
#safety .d_table th {
    background: #ffb700;
}
#safety .d_table tbody tr:nth-child(even) td {
    background: #f8e2ac;
}

@media  screen and (max-width: 1024px) {
    #safety h2 {
        display: block;
    }
    #safety h2 img {
        margin: 5px auto;
    }
}
@media  screen and (max-width: 600px) {
    #safety h2 {
        font-size: 2.8rem;
    }
    #safety h2 span {
        margin-right: 0;
    }
    #safety .outline {
        display: block;
        padding: 20px;
    }
    #safety .outline li {
        width: 100%;
    }
    #safety .d_table {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-spacing: 2px;
    }
    #safety .d_table th, #safety .d_table td {
        padding: 10px;
    }
}


/* -----------------------------------------------
 footer
----------------------------------------------- */
#gl_footer {
    background: #ffb700;
}
#gl_footer .wrap {
    padding: 80px 20px;
    font-weight: bold;
    text-align: center;
}
#gl_footer .wrap p:first-child {
    margin-bottom: 60px;
    font-size: 3.6rem;
}
#gl_footer .g_form {
    margin-top: 40px;
    background: #fff;
}

#gl_footer .g_form:hover {
    background: #262626;
}

#gl_footer .gf_copyright {
    padding: 30px 0;
    color: #fff;
    text-align: center;
    background: #262626;
}

@media  screen and (max-width: 600px) {
    #gl_footer .wrap p:first-child {
        font-size: 2.8rem;
        letter-spacing: -0.03rem;
    }
}

/* -----------------------------------------------
 footer2
----------------------------------------------- */
#gl_footer2 {
    background: #ffb700;
}
#gl_footer2 .wrap {
    padding: 0px 20px;
    font-weight: bold;
    text-align: center;
}
#gl_footer2 .wrap p:first-child {
    margin-bottom: 40px;
    font-size: 3.6rem;
}
#gl_footer2 .g_form {
    margin-top: 40px;
    background: #fff;
}

#gl_footer2 .g_form:hover {
    background: #262626;
}

#gl_footer2 .gf_copyright {
    padding: 10px 0;
    color: #fff;
    text-align: center;
    background: #262626;
}

@media  screen and (max-width: 600px) {
    #gl_footer2 .wrap p:first-child {
        font-size: 2.8rem;
        letter-spacing: -0.03rem;
    }
}