* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    padding: 0px;
    margin: 0px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #564843;
}
p {
    margin: 0;
}
.inner {
    max-width: 1280px;
    margin: 0 auto;
}
/* header */
.header{
    height: 109px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    font-size: 18px;
}
.another-header {
    background-color: #F9F6EF;
}
.logo {
    width: 100.37px;
    height: 100.37px;
}
.header > ul {
    display: flex;
    margin-right: 100px;
}
li {
    list-style: none;
    margin-left: 40px;
}
.nav {
    text-decoration: none;
    color: #564843;
}
.nav:hover {
    text-decoration-line: underline;
}

/*-------------------
topページ
--------------------*/
/*FV*/
.top-background {
    background-image: url(../images/fv_background.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.fv-main {
    margin: 0 auto;
    padding-top: 8rem;
}
.fv-img {
    width: 100%;
    display: flex;
    margin: 4rem auto 0 auto;
}
.text {
    font-size: 18px;
    text-align: center;
    margin-bottom: 5rem;
}

/*section*/
.section-title {
    font-size: 30px;
    color: #00A6E2;
    font-weight: bold;
    text-align: center;
    padding-top: 3rem;
}
.btn {
    border: 1px solid #564843;
    font-size: 18px;
    color: #564843;
    background-color: #F9F6EF;
    padding: 0.8rem;
    width: 17%;
    display: flex;
    margin: 4rem 8rem 0 auto;
    justify-content: space-around;
    align-items: center;
}
.btn-center {
    margin: 6rem auto 0 auto;
    justify-content: center;
}
.btn-contact {
    margin: 4rem auto 0 auto;
    background-color: #f9f9f9;
    justify-content: space-evenly;
}
.btn > img {
    width: 20px;
    height: 7px;
}
.btn-center > img {
    margin-left: 1rem;
}
#about, #works {
    background-color: #F9F6EF;
    margin-top: -1rem;
}
#service,#contact {
    background-color: #d5e5f0;
    margin-top: -1rem;
}
#contact {
    margin-bottom: -5rem;
}
.content {
    padding: 5rem;
}
.about-content {
    position: relative;
}
.about-text {
    position: absolute;
    top: 45%;
    left: 22%;
    font-size: 18px;
}
.about-img {
    width: 80%;
    display: block;
    margin: 3rem auto;
}
.service {
    background-color: #F9F6EF;
    max-width: 1000px;
    padding: 3rem 2rem 8rem 2rem;
    margin: 2rem auto;
    border-radius: 7rem;
}
.service-content-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 1rem 2rem;
}
.service-content {
    margin: 2rem;
    text-align: center;
}
.service-content-img {
    width: 80%;
}
.content-title {
    font-size: 24px;
    color: #3F6B8D;
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 70px;
}
.content-text, .service-content-text {
    text-align: center;
}
.works {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 9rem;
}
.star {
    width: 15%;
    display: block;
    margin: 1rem auto;
}
.customer-voice {
    width: 57%;
    display: block;
    margin: 3rem auto;
}
.contact {
    padding: 3rem 0 12rem 0;
}
.contact-text {
    text-align: center;
    margin-top: 2rem;
}
.contact-content {
    margin: 2rem auto;
    width: 53%;
}
.contact-label {
    text-align: left;
}
.contact-box {
    background-color: #f9f9f9;
    border-radius: 8px;
    width: 100%;
    height: 46px;
}
.textbox {
    height: 200px;
}
.small-text {
    font-size: 14px;
    text-align: center;
}
.check {
    text-align: center;
    margin: 1rem auto;
}
input {
  margin: 0.4rem;
}

/*footer*/
footer {
    background-color: #F9F6EF;
    margin-top: -3rem;
    padding: 2rem 0;
    text-align: center;
}
.top-footer {
    padding: 0 0 2rem 0;
}
.footer-content {
    display: flex;
    justify-content: center;
    margin: 2rem auto;
}
.sns-content {
    align-items: center;
}
.sns {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
.instagram {
    width: 29.71px;
    height: 28.94px;
}
.x-icon {
    width: 29.7px;
    height: 26.9px;
}
.note {
    width: 37.36px;
    height: auto;
}
.footer-border {
    border: 0.5px solid #564843;
    margin: 4px 12px;
}
.footer-nav {
    color: #564843;
    font-size: 18px;
}
.copyright {
    font-size: 14px;
}
/*スライダーカスタマイズ*/
.splide {
    margin-top: 5rem;
}
.splide__slide img {
  height: auto;
  width: 80%;
  display: block;
  margin: 0 auto 2rem auto;
}
.splide__arrow {
    background: #d5e5f0 !important;
    top: 25% !important;
    width: 4em !important;
    height: 4em !important;
    opacity: 1 !important;
}
.splide__arrow svg {
    fill: #f9f9f9 !important;
    width: 2.5em !important;
    height: 2.5em !important;
}
.splide__arrow--prev {
    left: -5em !important;
}
.splide__arrow--next {
    right: -5em !important;
}
.splide__pagination {
    bottom: 6em !important;
}
.splide__pagination__page.is-active {
    background: #d5e5f0 !important;
}
.splide__pagination__page {
    background: #00A6E2 !important;
}

/*-------------------
About
--------------------*/
#about-page-main, #career{
    background-color: #F9F6EF;
}
#history, .about-page-footer {
    background-color: #d5e5f0;
}
#history, #career {
    margin-top: -3rem;
    padding: 3rem 0;
}
.about-me {
    position: absolute;
    top: 26%;
    left: 22%;
    width: 30%;
}
.about-page-title {
    color: #00A6E2;
    font-size: 24px;
    margin-bottom: 2rem;
} 
.about-me-text {
    margin-bottom: 1rem;
}
.history {
    max-width: 1000px;
    position: relative;
    margin: 6rem auto 12rem auto;
}
.history-content {
    display: flex;
}
.history-icon {
    margin: 13px 2rem;
}
.history-circle {
    background-color: #f9f9f9;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.history-border {
    background: #564843;
    width: 2px;
    height: 100%;
    margin: 0 auto;
}
.history-detail {
    margin: 1rem 0 2rem 0;
    width: 75%;
}
.history-img {
    width: 20%;
    position: absolute;
    bottom: 0;
    right: 0;
}
.career-content {
    position: relative;
    max-width: 1000px;
    margin: 3rem auto;
}
.career-img {
    width: 60%;
    display: block;
    margin: 0 auto;
}
.career {
    position: absolute;
    width: 55%;
}
.career1, .career3, .career5, .career7, .career9 {
    left: -5%;
}
.career2, .career4, .career6, .career8, .career10 {
    right: 0;
}
.career1 {
    top: 0;
}
.career2 {
    top: 0;
}
.career3 {
    top: 20%;
}
.career4 {
    top: 20%;
}
.career5 {
    top: 40%;
}
.career6 {
    top: 40%;
}
.career7 {
    top: 60%;
}
.career8 {
    top: 60%;
}
.career9 {
    top: 80%;
}
.career10 {
    top: 80%;
}
.relative {
    position: relative;
}
.career-text {
    position: absolute;
    top: 20%;
    left: 22%;
    width: 60%;
}
.career-icon {
    width: 100%;
}
.career-page-text {
    text-align: center;
    margin: 6rem auto;
}
/*-------------------
Service & Price
--------------------*/
#service-page {
    background-color: #d5e5f0;
}
.service-page-content {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 12rem;
}
.page-title {
    padding: 3rem 0;
}
.price-text {
    font-size: 14px;
    text-align: right;
}
.service-page-btn {
    width: 30%;
}
/* タブメニューのスタイル */
.tab-container {
    background-color: #f9f9f9;
    margin: 3rem auto 1rem auto;
    padding: 2rem 1rem;
}
.tab-menu {
    display: flex;
    list-style: none;
    padding: 0;
}
.tab-menu > li {
    padding: 0 2rem;
    background-color: #F9F6EF;
    cursor: pointer;
    margin: 0;
    text-align: center;
    width: 100%;
    background-color: #F9F6EF;
    cursor: pointer;
    text-align: center;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.tab-menu > li.active {
    background-color: #d5e5f0;
    position: relative;
}
.tab-menu > li.active::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #d5e5f0 transparent transparent;
    translate: -50% 100%;
}
/* タブコンテンツのスタイル */
.tab-content {
  margin-top: 20px;
}
.tab-content > div {
  padding: 20px;
}
.service-page-title {
    font-size: 30px;
    color: #3F6B8D;
}
.service-page-title > span {
    border: 2px solid #d5e5f0;
    margin-right: 1rem;
}
.tab-content-img {
    display: flex;
    align-items: center;
    padding: 2rem 0 1rem 0;
}
.tab-content-imgbox > img {
    width: 60%;
    margin: 0 auto;
    display: block;
}
.deep-blue {
    color: #3F6B8D;
    margin: 2rem 0;
}
.service-page-small-text {
    font-size: 14px;
    line-height: 1.5;
}

/*-------------------
レスポンシブ
--------------------*/
@media screen and (min-width: 768px) {
    #menu-sp, #nav-sp, .sp {
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    .btn {
        width: 25%;
    }
    .btn-center, .btn-contact {
        width: 30%;
    }
    .splide__arrow--prev {
        left: 0em !important;
    }
    .splide__arrow--next {
        right: 0em !important;
    }
    .service-page-content {
        padding: 0 1.5rem 12rem 1.5rem;
    }
    .about-me {
        top: 19%;
        width: 33%;
    }
    .about-page-title {
        margin-bottom: 1rem;
    }
}
@media screen and (max-width: 820px) {
    .about-text {
        top: 42%;
        left: 16%;
        font-size: 16px;
    }
    .tablet-none {
        display: none;
    }
    .tablet {
        display: block;
    }
    .content {
        padding: 5rem 3rem;
    }
    .service-content-group {
        margin: 1rem 0;
    }
    .service-content {
        margin: 1rem;
    }
    .about-me {
        top: 25%;
        width: 53%;
    }
    .career {
        width: 60%;
    }
    .career-text {
        top: 15%;
        width: 65%;
    }
}
@media screen and (max-width: 767px) {
    #nav-pc, .nav, .pc {
        display: none;
    }
    /*header*/
    .header {
        height: 60px;
        padding: 10px;
    }
    #menu-sp {
        position: absolute;
        top: 20px;
        right: 10px;
        margin: 0;
        width: 24px;
        height: 22px;
    }
    .logo {
        width: 47px;
        height: 47px;
    }
    .nav-sp {
        text-decoration: none;
        display: block;
        color: #564843;
        margin: 40px 40px;
    }
    #nav-sp {
        display: block;
        background-color: #F9F6EF;
        position: absolute;
        left: 0;
        top: 0;
        height: 70%;
        width: 100%;
        display: none;
        z-index: 100;
    }
    #close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px;
        height: 20px;
    }

    /*---------------------
    トップページ
    ----------------------*/
    /*FV*/
    .fv-main {
        padding-top: 1rem;
    }
    .fv-img {
        padding: 0 1rem;
    }
    /*section*/
    .btn {
        font-size: 12px;
        padding: 5px;
        width: 35%;
        margin: 3rem 2rem 3rem auto;
    }
    .btn-center, .btn-contact {
        margin: 2rem auto;
    }
    .content {
        padding: 1rem;
    }
    .text, .about-text, .service-content-text, .contact-label, .small-text, .footer-nav {
        font-size: 10px;
    }
    .content-text, .contact-text, .check {
        font-size: 12px;
    }
    .section-title {
        font-size: 22px;
        padding-top: 2rem;
    }
    .content-title {
        font-size: 16px;
        margin: 0;
        line-height: 1.5;
        height: 45px;
    }
    .content-title2 {
        font-size: 14px;
    }
    .about-text {
        top: 30%;
        left: 15%;
        text-align: center;
    }
    .about-img {
        width: 90%;
    }
    .service {
        border-radius: 2rem;
        padding: 0 0 3rem 0;
    }
    .service-content-group {
        margin: 0;
    }
    .service-content {
        margin: 1rem;
    }
    .service-content-img {
        width: 90%;
    }
    .works {
        padding-bottom: 2rem;
    }
    .customer-voice {
        width: 80%;
        margin: 1rem auto;
    }
    .contact {
        padding:0 0 4rem 0;
    }
    .contact-box {
        border-radius: 3px;
        height: 30px;
    }
    .textbox {
        height: 80px;
    }
    .contact-content {
        width: 70%;
        margin: 1rem auto;
    }
    /*footer*/
    footer {
        margin-top: -2rem;
    }
    .instagram {
        width: 14.4px;
        height: 14px;
    }
    .x-icon {
        width: 14.4px;
        height: 13px;
    }
    .note {
        width: 18.12px;
        height: auto;
    }
    .copyright {
        font-size: 8px;
    }
    .sns-content {
        padding-top: 2rem;
    }
    .footer-content {
        margin: 1rem auto;
    }
    /*スライダーカスタマイズ*/
    .splide {
        margin-top: 2rem;
    }
    .splide__slide img {
        margin: 0 auto 1rem auto;
    }
    .splide__arrow {
        top: 35% !important;
        width: 20px !important;
        height: 20px !important;
    }
    .splide__arrow--prev {
        left: 0.8rem !important;
    }
    .splide__arrow--next {
        right: 0.8rem !important;
    }
    .splide__arrow svg {
        width: 0.5em !important;
        height: 0.5em !important;
    }
    .splide__pagination {
        bottom: -1em !important;
    }

    /*---------------------
    About
    ----------------------*/
    .about-page-title {
        font-size: 16px;
    }
    .about-me-text {
        font-size: 2.7vw;
    }
    .career-text > p {
        font-size: 2.6vw;
    }
    .history-detail, .career-page-text {
        font-size: 12px;
    }
    .about-font-12 {
        font-size: 12px;
    }
    .about-font-11 {
        font-size: 11px;
        margin-bottom: 5px;
    }
    .height-20 {
        height: 20px;
    }
    #about-page-main {
        padding-bottom: 2rem;
    }
    .about-me {
        width: 70%;
        left: 19%;
    }
    .about-img {
        width: 97%;
    }
    .about-page-title, .about-me-text {
        margin-bottom: 0;
    }
    .history {
        padding: 3rem 1rem 7rem 0;
        margin: 0 auto 0 0;
    }
    .history-icon {
        margin: 5px 1rem;
    }
    .history-circle {
        width: 12px;
        height: 12px;
    }
    .history-detail {
        margin: 0.5rem 0 1rem 0;
        width: 100%;
        line-height: 1.5;
    }
    .history-img {
        bottom: 9%;
    }
    .career-img {
        width: 80%;
    }
    .career {
        width: 60%;
    }
    .career-text {
        top: 14%;
        left: 2%;
        line-height: 1.5;
        width: 100%;
    }
    .career1-text {
        width: 57%;
        margin: auto;
    }
    .career2-text {
        width: 61%;
        margin: auto;
    }
    .career3-text {
        width: 71%;
        margin: auto;
    }
    .career4-text {
        width: 52%;
        margin: auto;
    }
    .career5-text {
        width: 82%;
        margin: auto;
    }
    .career6-text {
        width: 78%;
        margin: auto;
    }
    .career7-text {
        width: 74%;
        margin: auto;
    }
    .career8-text {
        width: 68%;
        margin: auto;
    }
    .career9-text, .career10-text {
        width: 72%;
        margin: auto;
    }
    .career1, .career3, .career5, .career7, .career9 {
        left: 0;
    }
    .career2 {
        top: 7%;
    }
    .career3 {
        top: 16%;
    }
    .career4 {
        top: 23%;
    }
    .career5 {
        top: 33%;
    }
    .career6 {
        top: 43%;
    }
    .career7 {
        top: 53%;
    }
    .career8 {
        top: 63%;
    }
    .career9 {
        top: 73%;
    }
    .career10 {
        top: 83%;
    }
    .career-page-text {
        margin: 3rem auto;
    }
    
    /*---------------------
    Service & Price
    ----------------------*/
    .page-title {
        padding: 2rem 0;
    }
    .service-page-content {
        padding: 0 1.5rem 4rem 1.5rem;
    }
    .price-text {
        font-size: 8px;
    }
    .service-page-btn {
        width: 60%;
    }
    .tab-menu > li {
        font-size: 9px;
        padding: 0;
    }
    .service-page-text, .service-page-small-text {
        font-size: 10px;
    }
    .service-page-title, .deep-blue {
        font-size: 12px;
    }
    .service-page-title > span {
        border: 1px solid #d5e5f0;
        margin-right: 0.5rem;
    }
    .deep-blue {
        margin: 0.5rem 0;
    }
    .tab-container {
        padding: 0.8rem 0.5rem;
    }
    .tab-content > div {
        padding: 0;
    }
    .tab-content-img {
        padding: 1rem 0;
    }
    .tab-content-imgbox {
        width: 60%;
    }
    .tab-content-imgbox > img {
        width: 50%;
    }
}