:root {
    --font__color: #161616;
    --gray: #4d4d4d;
    --white: #fffffa;
    --base__color: #f5fafb;
    --base__color2:#c8dee2;
    --orange: #ff761d;
    --blue: #00779a;
    --light__blue: #69cbe9;
    --red: #d11f1f;
}

/* お知らせ一覧 */
.news__all {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.news__contents{
    display:flex;
    gap:2em;
    align-items: center;
    padding:1em 0;
}

.br__pc__hidden{
    display:none;
}

/* ページング */

.pager__wrap {
    width: 100%;
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
    margin: 2em auto;
}

.pager {
    font-size: 2rem;
    display: flex;
    gap: 1em;
    align-items: center;
}

.pager a {
    display: block;
    line-height: 1em;
}

.pager a:hover {
    color:var(--light__blue);
}

.pager__now {
    font-size: 2rem;
    line-height: 1em;
    padding-bottom:1px;
    color: var(--orange);
}

.pager__btn {
    display: block;
}

.pager__btn i {
    font-size: 2rem;
    line-height: 1em;
}

.pager__btn i:hover {
    color: var(--blue);
}

/* お知らせ詳細 */
.news__detail__wrap {
    width: 100%;
    padding: 2em 1em;
}

.news__detail {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.news__detail h2 {
    font-size: clamp(1.3rem, 0.9rem + 2vw, 2.4rem);
}

.detail__main__img {
    text-align: center;
}

.detail__main__img img {
    width: 100%;
    max-width: 800px;
    border-radius: 1em;
}

.detail__title {
    font-size: clamp(1.29rem, 1.006rem + 1.42vw, 2.07rem);
    background: var(--blue);
    padding: 0.2em;
    color: var(--white);
    font-weight: 500;
}

.detail__main__text {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.detail__main__text img {
    width: 100%;
    max-width: 600px;
}

.detail__category {
    width: fit-content;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    font-weight: 700;
    font-size: clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
}

/* swiper */

.swiper--wrapper {
    /* wrapperのサイズを調整 */
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.swiper-slide {
    /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.mySwiper2 {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.mySwiper2 img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
}

.mySwiper {
    width: 100%;
    max-width: 500px;
    height: 100px;
}

.mySwiper img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.mySwiper .swiper--wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    gap: 1em;
}

.mySwiper .swiper-slide {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    line-height: 80px;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.all__btn{
    text-align: center;
    padding:2em 0;
}

/* 施工事例一覧 */

.works__title {
    margin: 1em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.works__title h2 {
    font-size: 1.5rem;
}

.works hr {
    margin: 1em 0;
}

.works__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.works__inner {
    width:100%;
    height:100%;
    max-width: 440px;
    border: 1px solid var(--gray);
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
}

.works__img{
    width:200px;
    overflow: hidden;
}

.works__inner p {
    padding: 1em;
}

.works__item:hover img{
    transform: scale(1.1);
}

.works__inner img {
    width: 100%;
}

@media screen and (max-width:1200px) {
    .works__inner{
        display:flex;
        flex-direction: column;
        align-items: start;
        height: 100%;
    }
    .works__img{
        width:100%;
        overflow: hidden;
    }
}

@media screen and (max-width:900px) {

    .swiper-button-prev:after,
    .swiper-button-next:after {
        display: none;
    }

    .br__pc__hidden{
        display:block;
    }

    .news__contents{
        display:grid;
        grid-template-columns: 70px 1fr;
        gap:1em;
    }
}