@charset "UTF-8";

/*----------------------------------------
  tb用
----------------------------------------*/
@media((min-width:438px) and (max-width:991px)) {
    .concept__image img {
        height: 200px;
    }
}

@media((min-width:768px) and(max-width:991px)){
    .site-title {
        left: 8.33%;
    }

    .site-title h2 {
        text-align: left;
        font-size: 50px;
        letter-spacing: 3px;
    }

    .sub__txt {
        text-align: left;
        padding: 20px 0 0 4%;
        font-size: 32px;
    }

    .site-title .line-break {
        display: inline;
    }

    /*----------------------------------------
  concept
----------------------------------------*/
    .concept .container {
        padding: 100px 220px 0 220px;
    }



}
/*----------------------------------------
  pc、tablet用
----------------------------------------*/
/*=========  tb.pcではhb非表示 ===============*/
@media(min-width:768px) {

    .openbtn,
    #g-nav {
        display: none;
    }

    .header {
        height: 96px;
        padding: 19px 80px 0 80px;
    }

    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
    }

    .main-nav menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    .main-nav menu li {
        margin-bottom: 20px;
    }

    .main-nav menu li a {
        display: block;
        color: #fff;
        font-style: italic;
        font-weight: var(--bold-weight);
        /*5-3-2 中心から外に線が伸びる（中央）*/
        /*線の基点とするためrelativeを指定*/
        position: relative;
    }

    .main-nav menu li a::after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: -20%;
        left: 10%;
        /*線の形状*/
        width: 80%;
        height: 1.5px;
        background: #fff;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0, 1);
        /*X方向0、Y方向1*/
        transform-origin: left top;
        /*左上基点*/
    }

    /*現在地とhoverの設定*/
    .main-nav menu li a:hover::after {
        transform: scale(1, 1);
        /*X方向にスケール拡大*/
    }

    /* mein v */
    .slider-container {
        height: 752px;
    }
}

/*----------------------------------------
  nav　1200pxに対応 (pc)
----------------------------------------*/
@media(min-width:992px) {
    .header {
        padding: 19px 120px 0 120px;
    }

    /*----------------------------------------
  main-v
----------------------------------------*/
    .site-title {
        top: 32%;
        padding: 0 120px;
    }

    .site-title h2 {
        font-size: 70px;
        text-align: left;
        letter-spacing: 4px;
    }

    .sub__txt {
        padding-top: 20px;
        padding-left: 4%;
        text-align: left;
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    .sub__txt .line-break {
        display: inline;
    }

    /*========= concept ===============*/
    #concept .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 100px 100px 0 220px;
    }

    .concept-title {
        font-size: 60px;
        line-height: 1.667;
    }

    .concept-title::after {
        width: 200px;
        margin-bottom: 20px;
        margin-left: 30px;
    }

    .concept-catch {
        padding: 70px 0 60px 0;
        font-size: 1.9375rem;
    }

    .concept-catch .line-break {
        display: inline;
    }

    .concept-catch .line-break2 {
        display: block;
    }

    .concept__inner {
        display: flex;
        align-items: center;
        gap: 120px;

    }

    .concept__inner p {
        width: 440px;
        text-align: justify;
    }

    .concept__image img {
        width: 440px;
        height: 240px;
    }

    #concept .bg__txt {
        padding: 70px 0;
        text-align: right;
        font-size: 90px;
    }

    /*========= works ===============*/
    #works {
        width: 100%;
        height: 986px;
    }

    #works .container {
        padding: 0 120px 0 120px;
    }

    .works-title {
        padding-top: 104px;
        font-size: 60px;
        line-height: 1.667;
    }

    .works-title::after,
    .contact-title::after {
        width: 200px;
        margin-bottom: 10px;
        margin-left: 48px;
    }

    .card__items {
        max-width: 1000px;
        margin: auto;
    }

    .card__items dl {
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;
    }

    #works .bg__txt,
    #contact .bg__txt {
        padding: 70px 0;
        font-size: 90px;
        text-align: left;
    }

    /*========= service ===============*/
    .service__wapper {
        padding: 100px 120px 80px 120px;
    }

    .service-title {
        padding: 0 0 0 100px;
        font-size: 60px;
        line-height: 1.667;
    }

    .service-title::after {
        width: 200px;
        margin-bottom: 20px;
        margin-left: 30px;
    }

    .service__card__items {
        flex-direction: row;
        align-items: start;
    }

    .service__card__item h4 {
        top: 45%;
        left: 30%;
        font-size: 2.5rem;
    }

    #service .bg__txt {
        padding: 70px 120px 70px 0;
        text-align: right;
        font-size: 90px;
    }


    /*========= contact ===============*/
    #contact {
        height: 666px;
    }

    #contact .container {
        padding: 0 120px;
        height: 666px;
    }

    .contact-title {
        padding-top: 109px;
        font-size: 60px;
        line-height: 1.667;
    }

    .contact-title::after {
        width: 200px;
        margin-bottom: 10px;
        margin-left: 30px;
    }

    .contact__btn {
        margin-bottom: 0;
    }

    .contact__btn {
        margin-top: 40px;
    }

    #contact .bg__txt {
        padding: 70px 0;
    }

}