@charset "utf-8";

/*==============================ベース==============================*/

* { /*すべての要素の隙間をゼロに*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%; /*1rem=10px*/
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    width: 100%;
    letter-spacing: 0.1rem;
}

img { max-width: 100%; }

a { text-decoration: none; }
a:link {color: black;}
a:visited {color: black;}
a:active {color: black;}

li { list-style-type: none; }

h1 {
    font-size: 3.6rem;
    line-height: 1.2;
}

h2 {
    font-size: 2.4rem;
    line-height: 1.2;
}

h3 {
    font-size: 1.8rem;
    line-height: 1.2;
}

@media screen and (max-width: 599px) { /*スマートフォン用*/
    body { font-size: 1.1rem; }
	h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}

/*==============================レイアウト・デザイン==============================*/

/*=====共通パーツ=====*/
.inner-wrap {
    width: 110rem;
    margin: 0 auto;
    z-index: 999;
}
@media screen and (max-width: 599px) {
    .inner-wrap { width: 90%; }
}

/*=====ヘッダー=====*/
#hero {
    position: relative;
    height: 100vh;
    display: flex;
    background: url(../img/bg_01.svg) no-repeat top right / 45%;
    overflow: hidden;
}
@media screen and (max-width: 599px) {
    #hero {
        background: url(../img/bg_01.svg) no-repeat top right / 60%;
    }
}

.hero-nav {
    position: absolute;
    top: 7rem;
    left: 7rem;
    z-index: 999;
}
@media screen and (max-width: 599px) {
    .hero-nav { display: none; }
}

.hero-nav li {
    margin-bottom: 2.5rem;
    padding: 0.1rem 2rem;
    background: black;
    border-radius: 5rem;
}

.hero-nav ul a,
.hero-nav ul a:link,
.hero-nav ul a:visited,
.hero-nav ul a:active {
    text-decoration: none;
    color: white;
}

.hero-logo {
    margin: auto auto auto 25%;
    z-index: 999;
}
@media screen and (max-width: 599px) {
    .hero-logo { margin: auto; }
}

.hero-logo img {
    width: 50rem;
    margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
    .hero-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3rem;
    }
}

.hero-blob-anime {
    position: absolute;
    -webkit-backface-visibility: hidden;
}
.blob01 {
    top: 10%;
    right: -7%;
    max-width: 60rem;
    height: auto;
    z-index: 100;
}
@media screen and (max-width: 599px) {
    .blob01 {
        top: 5%;
        right: -10%;
        width: 21rem;
        height: auto;
        z-index: 100;
    }
}
.blob02 {
    top: -20%;
    right: 10%;
    width: 50rem;
    height: auto;
    z-index: 200;
}
@media screen and (max-width: 599px) {
    .blob02 {
        top: -10%;
        right: 10%;
        width: 21rem;
        height: auto;
        z-index: 200;
    }
}
.blob03 {
    top: 0;
    right: 70rem;
    width: 5rem;
    height: auto;
    z-index: 200;
}
@media screen and (max-width: 599px) {
    .blob03 {
        top: 0;
        right: 55%;
        width: 3rem;
        height: auto;
        z-index: 200;
    }
}
.blob04 {
    top: 20;
    right: 60rem;
    width: 10rem;
    height: auto;
    z-index: 200;
}
@media screen and (max-width: 599px) {
    .blob04 {
        top: 10%;
        right: 45%;
        width: 5rem;
        height: auto;
        z-index: 200;
    }
}
.blob05 {
    top: 50rem;
    right: 50rem;
    width: 10rem;
    height: auto;
    z-index: 300;
}
@media screen and (max-width: 599px) {
    .blob05 {
        top: 25%;
        right: 15%;
        width: 5rem;
        height: auto;
        z-index: 300;
    }
}

/*=====ABOUT US=====*/
#about {
    position: relative;
    overflow: visible;
    background: url(../img/bg_02.svg) no-repeat top left / 30%;
    margin-top: -20rem;
    padding-top: 20rem;
}
@media screen and (max-width: 599px) {
    #about {
        background: url(../img/bg_02.svg) no-repeat top left / 60%;
        margin-top: -10rem;
        padding-top: 10rem;
    }
}

.blob06 {
    top: -10%;
    left: -7%;
    max-width: 40rem;
    height: auto;
    z-index: -100;
}
@media screen and (max-width: 599px) {
    .blob06 {
        top: -8%;
        left: -14%;
        max-width: 25rem;
        height: auto;
        z-index: -100;
    }
}

.box-wrap {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}
@media screen and (max-width: 599px) {
    .box-wrap {
        flex-flow: column;
    }
}

.cross {
    position: absolute;
    top: 10rem;
}
@media screen and (max-width: 599px) {
    .cross {
        display: none;
    }
}

.cross img { height: 10rem; }
@media screen and (max-width: 599px) {
    .cross img {
        height: 5rem;
    }
}

.about-inner-box {
    display: flex;
    flex-flow: column;
    width: 45%;
    margin: auto;
}
@media screen and (max-width: 599px) {
    .about-inner-box {
        flex-flow: row;
        justify-content: space-between;
        width: 100%;
    }
    .about-inner-box:not(:last-of-type) {
        margin-bottom: 3rem;
    }
}

@media screen and (max-width: 599px) {
    .flex-reverse {
        flex-flow: row-reverse !important;
    }
}

.inner-box-img {
    height: 30rem;
    display: flex;
}
@media screen and (max-width: 599px) {
    .inner-box-img {
        width: 28%;
        height: auto;
        display: block;
    }
}

.inner-box-img img {
    width: 50%;
    height: auto;
    margin: auto;
}
@media screen and (max-width: 599px) {
    .inner-box-img img {
        width: 100%;
    }
}

.inner-box-text {
    position: relative;
    min-height: 23rem;
    padding: 3rem;
    background: #f2f2f2;
    border-top-left-radius: 2rem;
}
@media screen and (max-width: 599px) {
    .inner-box-text {
        min-height: auto;
        padding: 1.5rem;
        width: 70%;
        border-radius: 1rem;
    }
}

.inner-box-circle {
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: -2rem;
    left: -1rem;
}
@media screen and (max-width: 599px) {
    .inner-box-circle {
        display: none;
    }
}

/*=====TOPIC=====*/
#topic {
    position: relative;
    background: url(../img/bg_03.jpg) no-repeat right / contain;
    margin-top: 20rem;
}
@media screen and (max-width: 599px) {
    #topic {
        background: url(../img/bg_03_sp.jpg) no-repeat right / contain;
        margin-top: 5rem;
    }
}

.topic-number {
    position: absolute;
    top: 1.5rem;
    right: 10%;
    display: flex;
    text-align: right;
}
@media screen and (max-width: 599px) {
    .topic-number {
        top: 0;
        right: 5%;
    }
    .topic-number img {
        width: 5rem;
    }
}

.topic-number div { margin-left: 3rem; }
@media screen and (max-width: 599px) {
    .topic-number div { margin-left: 1rem; }
}

.topic-slider {
    width: auto;
}

.topic-slide-01 {
    display: flex;
    width: 90%;
    margin: 0 auto;
}
@media screen and (max-width: 599px) {
    .topic-slide-01 {
        flex-direction: column;
    }
}

.slide-img {
    display: block;
    width: 60%;
    height: auto;
}
@media screen and (max-width: 599px) {
    .slide-img {
        width: 100%;
        height: auto;
        padding-top: 5rem;
    }
}

.slide-text-box {
    width: 40%;
    margin-top: auto;
    margin-bottom: auto;
}
@media screen and (max-width: 599px) {
    .slide-text-box {
        width: 100%;
    }
}

/*=====RECOMMEND=====*/
#recommend {
    background: url(../img/bg_04.png) no-repeat top left / 40%;
    margin-top: 20rem;
    padding-top: 2rem;
}
@media screen and (max-width: 599px) {
    #recommend {
        background: url(../img/bg_04.png) no-repeat top left / 80%;
        margin-top: 5rem;
    }
}

.recommend-number { display: flex; }
.recommend-number div { margin-left: 3rem; }
@media screen and (max-width: 599px) {
    .recommend-number img {
        width: 5rem;
        height: auto;
    }
    .recommend-number div {
        margin-left: 1rem;
        
    }
}

.flex-wrap {
    width: 90%;
    margin: 0 auto;
}
@media screen and (max-width: 599px) {
    .flex-wrap {
        width: 100%;
    }
}

.flex-2x {
    display: flex;
    flex-wrap: wrap;
}

.voice-box-2x {
    width: 50%;
    display: flex;
    margin-bottom: 5rem;
}
@media screen and (max-width: 599px) {
    .voice-box-2x {
        width: 100%;
        justify-content: center;
        margin-bottom: 3rem;
    }
}

.voice-icon img {
    height: 24rem;
    width: auto;
}
@media screen and (max-width: 599px) {
    .voice-icon img {
        height: 18rem;
        width: auto;
    }
}

.voice-text {
    width: 60%;
    height: 24rem;
    padding-left: 1rem;
}
@media screen and (max-width: 599px) {
    .voice-text {
        width: 55%;
        height: 18rem;
    }
}

.scroll-bar {
    overflow-y: scroll;
    overflow-x: hidden;
}

.flex-3x {
    display: flex;
    flex-wrap: wrap;
}

.voice-box-3x {
    width: 33%;
    display: flex;
    margin-bottom: 5rem;
}
@media screen and (max-width: 599px) {
    .voice-box-3x {
        width: 100%;
        justify-content: center;
        margin-bottom: 3rem;
    }
}

.voice-icon-3x img {
    height: 18rem;
    width: auto;
}
@media screen and (max-width: 599px) {
    .voice-icon-3x img {
        height: 9rem;
        width: auto;
    }
}

.voice-text-3x {
    width: 60%;
    height: 18rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media screen and (max-width: 599px) {
    .voice-text-3x {
        width: 80%;
        height: 9rem;
    }
}

/*=====COMPANY=====*/
#company {
    background: url(../img/bg_06.png) no-repeat bottom left / 40%;
    height: 74rem;
    margin-top: 10rem;
}
@media screen and (max-width: 599px) {
    #company {
        background: url(../img/bg_06.png) no-repeat bottom left / 80%;
        margin-top: 5rem;
    }
}

.company-number {
    text-align: center;
    margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
    .company-number {
        margin-bottom: 1rem;
    }
}

.company-number img {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3rem;
}
@media screen and (max-width: 599px) {
    .company-number img {
        width: 5rem;
        margin-bottom: 1rem;
    }
}

.company-about {
    display: flex;
    justify-content: space-evenly;
}
@media screen and (max-width: 599px) {
    .company-about {
        flex-wrap: wrap;
    }
}

.google-map {
    position: relative;
    width: 40%;
    height: 0;
    padding-bottom: 25%;
    overflow: hidden;
}
@media screen and (max-width: 599px) {
    .google-map {
        width: 100%;
        padding-bottom: 62.5%;
        margin-bottom: 3rem;
    }
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.table-wrap { width: 55%; }
@media screen and (max-width: 599px) {
    .table-wrap {
        width: 100%;
    }
}

table { margin-bottom: 1rem; }

th, td {
    padding: 1rem;
    text-align: left;
}

/*=====CONTACT=====*/
#contact {
    position: absolute;
    display: flex;
    margin-top: 5rem;
    right: 0;
}
@media screen and (max-width: 599px) {
    #contact {
        margin-top: 3rem;
    }
}

#contact div { height: 10rem; }
#contact div img {
    max-height: 10rem;
    width: auto;
}
#contact div:not(:last-of-type) {
    margin-right: 3rem;
}
@media screen and (max-width: 599px) {
    #contact div { height: 5rem; }
    #contact div img {
    max-height: 5rem;
    width: auto;
    }
    #contact div:not(:last-of-type) {
        margin-right: 1rem;
    }
}

.contact-text h1 {
    line-height: 10rem !important;
    font-size: 4.8rem;
}
@media screen and (max-width: 599px) {
    .contact-text h1 {
        line-height: 5rem !important;
        font-size: 3.6rem;
    }
}

/*=====フッター=====*/
footer {
    display: flex;
    padding: 3rem;
    align-items: center;
}
@media screen and (max-width: 599px) {
    footer {
        padding: 1rem;
        flex-wrap: wrap;
    }
}

.footer-nav {
    width: 30%;
    display: flex;
    justify-content: space-evenly;
}
@media screen and (max-width: 599px) {
    .footer-nav {
        width: 100%;
    }
}

.copy {
    margin-left: auto;
}
@media screen and (max-width: 599px) {
    .copy {
        margin: 1rem auto 0 auto;
    }
}

.privacy * {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.another-footer {
    background-color: black;
    color: white;
}
.another-footer a { color: white; }

/*==============================モジュール==============================*/

/*=====レイアウト調整系=====*/
.margin-top { margin-top: 5rem; }
@media screen and (max-width: 599px) { /*スマートフォン用*/
    .margin-top { margin-top: 2rem; }
}
.position-relative { position: relative; }

/*=====テキスト関連=====*/
.headline { line-height: 2.5; }

.small { font-size: 1.2rem; }
@media screen and (max-width: 599px) { /*スマートフォン用*/
    .small { font-size: 0.9rem; }
}
.large { font-size: 2.8rem; }
@media screen and (max-width: 599px) { /*スマートフォン用*/
    .large { font-size: 2.2rem; }
}

.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.text-strong {
    font-weight: bold;
    font-size: 2.4rem !important;
}

.color-blue { color: #1e90ff; }
.color-pink { color: #ff1e90; }
.color-green { color: #1eff55; }
.color-purple { color: #c61eff; }
.color-yellow { color: #fffe1e; }