@charset 'UTF-8';

html {
    font-family: 'Klee One', cursive;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    font-size: 18px;
    scroll-behavior: smooth;
}

/*****************************/
/* 共通 */
/*****************************/
.content {
    max-width: 880px;
    /* margin-bottom: 80px; */
    margin: 0 auto;
    width: 90%;
}

.even-sec {
    background-color: #E6F5F4;
}

section {
    padding: 70px 0;
}

.ttl {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

.ttl span {
    position: relative;
}

.ttl span:before {
    content: "";
    background: url(../img/icon02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    left: -40px;
    top: 7px;
}

.ttl span:after {
    content: "";
    background: url(../img/icon02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    right: -40px;
    top: 7px;
}

.ttl {
    margin-bottom: 50px;
}

/*****************************/
/* ヘッダー */
/*****************************/
.header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 10px 60px 10px 100px;
    align-items: center;
    position: fixed;
    top: 0;
    background-color: rgb(255, 255, 255,0.7);
    z-index: 1001;
    width: 100%;
}

.header img {
    width: 215px;
    height: 25px;
    transition: .3s;
}

.header img:hover {
    opacity: .7;
}


.header .hd_navi .menu {
    display: flex;
}

.header .hd_navi .menu li {
    margin: 0 5px 0;
    position: relative;
    overflow: hidden;
}

.header .hd_navi .menu li a {
    font-size: 14px;
}

.hd_navi .menu li::before {
    content: "";
    display: inline-block;
    border-bottom: 2px solid #0D96A0;
    width: 100%;
    position: absolute;
    bottom: 1px;
    transform: translateX(-100%);
    transition: .3s;
}

.hd_navi .menu li:hover::before {
    transform: translateX(0);
}


/*****************************/
/* キービジュアル */
/*****************************/
.kv {
    position: relative;
    padding-top: 50px;
}

.kv .box {
    position: absolute;
    top: 50%;
    left: 0;
    padding: 30px 35px 30px 100px;
    background-color: rgb(255, 255, 255, 0.7);
    transform: translate(0, -50%);
}

.kv .box h1 {
    font-size: 25px;
    font-weight: bold;
}

.kv .box h1 span {
    font-size: 40px;
    line-height: 1.5;
    color: #0D96A0;
    display: block;
    margin-top: 10px;
}

/*****************************/
/* headline */
/*****************************/
.headline {
    text-align: center;
}

.headline .lead {
    font-size: 30px;
    font-weight: bold;
    color: #0D96A0;
    /* margin: 50px 0 30px; */
}

.headline .concept {
    position: relative;
}

.headline .concept:before {
    content: "";
    background: url(../img/icon01.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 20px;
    bottom: -20px;
    width: 80px;
    height: 80px;
}

/*****************************/
/* about */
/*****************************/
.about figure {
    display: flex;
    align-items: center;
}

/* .about figure+figure{
    margin-top: 40px;
} */

.about figure:nth-of-type(2) {
    margin: 40px 0;
}

.about figure figcaption {
    width: 50%;
    margin: 0 30px 0;
}

.about figure figcaption h2 {
    font-size: 21px;
    font-weight: bold;
}

.about figure figcaption p {
    font-size: 18px;
    margin-top: 20px;
}

.about figure img {
    width: 50%;
}

/*****************************/
/* サービス */
/*****************************/
.service ul {
    display: flex;
    justify-content: space-between;
}

.service ul li {
    width: 30%;
}

.service ul li figure h2 {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.service ul li figure p {
    font-size: 17px;
}

/*****************************/
/* お知らせ */
/*****************************/
.info .info-list dl {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid gray;
}

.info .info-list {
    border-bottom: 1px solid gray;
}

.info .info-list dl dd:nth-of-type(1) {
    font-size: 17px;
}

.info .info-list dl dt {
    margin: 0 20px;
    width: 160px;
    font-size: 20px;
    color: #0D96A0;
}

.info .info-list dl dd:nth-of-type(2) {
    font-size: 17px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    width: 500px;
}

/*****************************/
/* アクセス */
/*****************************/
.access .address figure {
    display: flex;

}

.access .address figure iframe {
    width: 50%;
    height: 330px;
    margin-right: 60px;
}

.access .address figure figcaption {
    width: 50%;
}

.access .address figure figcaption h2 {
    font-size: 22px;
    font-weight: bold;
}

.access .address figure figcaption address {
    font-size: 18px;
    margin-top: 40px;
}

.access .address figure figcaption address .tel span {
    font-size: 25px;
    font-weight: bold;
    color: #0D96A0;
    transition: .3s;
}

.access .address figure figcaption address .tel span:hover {
    opacity: .7;
}

.access .address figure figcaption address .mail {
    transition: .3s;
}


.access .address figure figcaption address .mail:hover {
    opacity: .7;
}

.access .address figure figcaption .adr2 {
    padding: 25px 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-top: 30px;
}

/*****************************/
/* お問い合わせ */
/*****************************/
.contact p {
    text-align: center;
}

.contact form {
    margin-top: 50px;
}

.contact form table {
    width: 100%;
}

.contact form table tr {
    padding: 15px 0;
}

.contact form table tr th {
    padding: 15px 0 15px 0;
    width: 200px;
}

.contact form table tr td {
    padding: 15px 0;

}

.contact form table tr td input {
    background-color: #fff;
    /* width: 100%; */
    min-width: 600px;
    padding: 5px;

}

.contact form table tr td textarea {
    background-color: #fff;
    /* width: 100%; */
    min-width: 600px;
    padding: 5px;
}

.contact form .btn {
    display: block;
    margin: 40px auto;
    background-color: #0D96A0;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    width: 200px;
    height: 55px;
    text-align: center;
    border-radius: 10px;
    letter-spacing: 10px;
    border: 1px solid #0d96a0;
    transition: .5s;
}

.contact form .btn:hover {
    color: #0D96A0;
    background-color: #fff;

}

/*****************************/
/* footer */
/*****************************/
footer {
    background-color: #505050;
    color: #fff;
    padding: 70px 0;
    font-size: 20px;
}

footer .ft-navi .ft-menu {
    display: flex;
    justify-content: center;
}

footer .ft-navi .ft-menu li {
    margin: 0 10px;
}

footer .bd-line {
    margin: 40px auto;
    width: 700px;
    border-top: 1px solid #fff;
}

footer .copy {
    text-align: center;
    font-weight: bold;
}

footer .sns {
    display: flex;
    justify-content: center;
}

footer .sns li {
    margin: 0 5px;
}

footer .sns li a img {
    width: 20px;
    height: 20px;
}

.sp-br {
    display: none;
}

/*************************/
/* レスポンシブ対応 */
/*************************/
@media screen and (max-width: 769px) {

    /*************************/
    /* 共通 */
    /*************************/
    section {
        padding: 50px 0;
    }

    .sp-br {
        display: block;
    }

    .wrap {
        overflow-x: hidden;
    }

    /*************************/
    /* 幅調整 */
    /*************************/
    .access .address figure {
        display: block;
    }

    .access .address figure iframe {
        width: 100%;
        height: 220px;
    }

    .access .address figure figcaption {
        width: 100%;
    }

    .contact form table tr td input {
        min-width: 100%;
    }

    .contact form table tr td textarea {
        min-width: 100%;

    }

    /*************************/
    /* ヘッダー */
    /*************************/
    .header {
        padding: 0 0 0 10px;
        /* display: unset; */
    }

    .header .hd_navi {
        /* display: block; */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #0D96A0;
        z-index: 1000;
        color: #fff;
        transform: translateX(100%);
        transition: 0.3s ease-in-out;
        padding: 100px 0 0 20px;
    }

    .header .hd_navi .menu {
        display: unset;
    }

    /******************************/
    /* ハンバーガーメニューstart */
    #header .toggle-menu {
        display: inline-block;
        width: 70px;
        height: 50px;
        background-color: #0D96A0;
        position: relative;
        /* top: 0; */
        /* right: 0; */
        z-index: 1001;
    }

    #header .toggle-menu .toggle-line {
        display: block;
        width: 30px;
        height: 4px;
        background-color: #fff;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50px;
    }

    #header .toggle-menu .toggle-line::before,
    #header .toggle-menu .toggle-line::after {
        content: "";
        width: 30px;
        height: 4px;
        background-color: #fff;
        margin: auto;
        border-radius: 50px;
        transition: .4s;
    }

    #header .toggle-menu .toggle-line::before {
        position: absolute;
        top: -11px;
        /* animation: menu-barTop 0.6s forwards; */
    }

    #header .toggle-menu .toggle-line::after {
        position: absolute;
        top: 11px;
        /* animation: menu-barBottom 0.6s forwards; */
    }

    /* ハンバーガーメニュークリック時の挙動 */
    #header.open .toggle-menu .toggle-line {
        height: 0;
    }

    #header.open .toggle-menu .toggle-line::before {
        transform: rotate(-45deg);
        transition: .4s;
        top: -5px;
    }

    #header.open .toggle-menu .toggle-line::after {
        transform: rotate(45deg);
        transition: .4s;
        top: -5px;
    }

    #header.open .hd_navi {
        transform: translateX(60%);
    }

    /* ハンバーガーメニューend */
    /******************************/

    /*************************/
    /* キービジュアル */
    /*************************/
    .kv {
        /* position: relative; */
        /* bottom: 0; */
    }

    .kv .box {
        padding: 20px;
        /* position: absolute; */
        transform: unset;
        top: unset;
        bottom: 0;

    }


    .kv .box h1 {
        font-size: 20px;
    }

    .kv .box h1 span {
        font-size: 30px;
    }

    /*************************/
    /* ヘッドライン */
    /*************************/
    .headline .lead {
        font-size: 25px;
    }

    .headline .concept {
        font-size: 16px;
        font-weight: unset;
        text-align: left;
        margin-top: 15px;
    }

    /*************************/
    /* アバウト */
    /*************************/
    .about figure {
        flex-flow: column;
    }

    .about figure:nth-of-type(2) {
        margin: 60px 0;
    }


    .about figure figcaption {
        width: 100%;
        margin: 0;
    }

    .about figure figcaption h2 {
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .about figure figcaption p {
        font-size: 16px;
    }

    .about figure img {
        width: 100%;
    }

    .about figure:nth-of-type(1),
    .about figure:nth-of-type(3) {
        flex-flow: column-reverse;
    }

    /*************************/
    /* サービス */
    /*************************/
    .service ul{
        flex-flow: column;
    }

    .service ul li{
        width: 100%;
    }

    .service ul li:nth-of-type(2){
        margin: 50px 0;

    }

    .service ul li figure h2{
        margin-top: 20px;
        font-weight: bold;
    }
    .service ul li figure p{
        margin-top: 10px;
        text-align: center;
    }

    /*************************/
    /* お知らせ */
    /*************************/
    .info .info-list dl{
        display: block;
        padding: 30px 10px;
    }

    .info .info-list dl dt{
        margin: 0;
    }

    .info .info-list dl dd:nth-of-type(2){
        -webkit-line-clamp:2;
        width: 100%;
        font-size: 16px;
    }

    .access .address figure figcaption{
        margin-top: 35px;
    }

    .access .address figure figcaption address{
        margin-top: 20px;
    }

    .access .address figure figcaption address{
        font-size: 16px;
    }

    /*************************/
    /* お問合せ */
    /*************************/
    .contact .ttl{
        margin-bottom: 30px;
    }

    .contact form{
        margin-top: 30px;
    }

    .contact p{
        text-align: left;
    }

    .contact form table tr th{
        display: block;
        padding: 20px 0 0 0;
        width: 100%;
    }
    .contact form table tr td{
        display: block;
        padding: 0;
    }

    .contact form .btn{
        width: 100%;
        height: 50px;
        font-size: 20px;
        margin-bottom: 0;
    }

    /*************************/
    /* フッター */
    /*************************/
    footer .ft-navi .ft-menu{
        font-size: 18px;
        flex-wrap: wrap;
    }

    footer .ft-navi .ft-menu li{
        margin: 0 13px;
    }

    footer .bd-line{
        width: 90%;
        margin: 24px auto;
    }

    footer .copy{
        font-size: 16px;
    }

    footer .sns{
        margin-top: 24px;
    }

}

/* メディアスクリーン終わり */