/*
 Theme Name:   Twenty Twelve Child
 Description:  Twenty Twelve Child Theme
 Template:     twentytwelve
*/

/* ---
    変数
------------------------------------- */
:root{
    /* もっと濃いブルー */
    --color-more-blue:#2c5282;
    /* 濃いブルー */
    --color-dark-blue:#1182ea;
    /* 明るいブルー */
    --color-bright-blue:#00a0e9;
    /* 薄いブルー背景 */
    --color-bg-blue:#f5f7fb;
}

/* ---
    アニメーション関連の動作
------------------------------------- */
/* アニメーション準備 */
.animation {
    opacity: 0;
}

/* slideTopアニメーションのキーフレーム */
@keyframes slideTop {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* slideRightアニメーションのキーフレーム */
@keyframes slideRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* slideLeftアニメーションのキーフレーム */
@keyframes slideLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* slideTopクラスの定義 */
.slideTop {
    overflow: hidden;
    position: relative;
}

.slideTop.animated {
    opacity: 1;
    animation: slideTop 1s ease-out forwards;
}
/* slideRightクラスの定義 */
.slideRight {
    overflow: hidden;
    position: relative;
}

.slideRight.animated {
    opacity: 1;
    animation: slideRight 1s ease-out forwards;
}
/* slideLeftクラスの定義 */
.slideLeft {
    overflow: hidden;
    position: relative;
}

.slideLeft.animated {
    opacity: 1;
    animation: slideLeft 1s ease-out forwards;
}


/* ---
    Reset
------------------------------------- */

html,body{
    background-color: var(--color-bg-blue);
}

body{
    overflow: hidden;
}

body .site{
    max-width:100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.site-header{
    padding:0;
}

.main-navigation ul.nav-menu{
    text-align: center;
    border:none;
}

body.page:not(.home) .wrapper{
    max-width: 100%;
    margin: 0 auto;
}

body.archive .wrapper,
body.category .wrapper,
body.single .wrapper{
    max-width:1400px;
    margin:0 auto;
    padding: 60px 0;
}

/* ページネーションスタイル */
.pagination-wrapper {
    margin: 2rem 0;
    text-align: center;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: var(--color-dark-blue);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagination-wrapper .page-numbers:hover {
    background-color: var(--color-bright-blue);
    color: white;
    text-decoration: none;
}

.pagination-wrapper .page-numbers.current {
    background-color: var(--color-dark-blue);
    color: white;
    border-color: var(--color-dark-blue);
}

.pagination-wrapper .page-numbers.prev,
.pagination-wrapper .page-numbers.next {
    font-weight: bold;
}

/* ページネーションクリック時のスクロール位置の調整 */

#list_top{
    scroll-margin-top: 100px;
    scroll-behavior: smooth;
}


@media (max-width:1023px){
    body.home .wrapper{
        background-color: var(--color-bg-blue);
    }
    body.page:not(.home) .wrapper,
    body.archive .wrapper,
    body.category .wrapper,
    body.single .wrapper{
        /*max-width:calc(100% - 40px);*/
        padding:30px 0;
    }
}

body.home .site-content{
    margin:0;
    width:100%;
    @media (min-width:600px){
        float: none;
    }
    @media (max-width:1023px){
        width:100%;
        margin: 0 auto;
    }
}

body.page:not(.home) .site-content{
    margin: 0;
    padding: 60px 0 0 0;
    @media (max-width:1023px){
        padding: 30px 0 0 0;
    }
}

.site-content article{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    @media (max-width:1023px){
        max-width: 100%;
        margin: 0 auto;
    }
}

body.archive,
body.category,
body.single{
    .site-content{
        article{
            @media (max-width:1023px){
                max-width: calc(100% - 40px);
            }
        }
    }
}

footer[role="contentinfo"]{
    max-width:100%;
    border-top: none;
    padding: 0;
    margin: 0;
}

/* ---
    Common Elements
------------------------------------- */

.pc_only{ display:block; }
.sp_only{ display:none; }

/* smartphone only */
@media (max-width:1023px){
	.pc_only{ display:none; }
	.sp_only{ display:block; }
}

.center{ text-align: center; }

.ts_white{ color:#000; }

.padding-t60{
    padding-top: 60px;
    @media (max-width:1023px){
        padding-top: 30px;
    }
}

p,
table tr th,
table tr td{
    font-size: 18px;
    @media (max-width:1023px){
        font-size: 16px;
    }
}

ul,
ul li{
    margin:0;
    padding: 0;
    list-style: none;
}

.entry-content{
    img{
        box-shadow: none;
        border-radius: 10px;
    }

    /* -- 投稿リスト -- */
    .post-list,
    .post-list li{
        margin: 0;
    }
    .post-list{
        @media (max-width:1023px){
            padding: 0;
        }
        li{
            font-size: 16px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px dashed #cfcfcf;
            .cat_name{
                display: inline-block;
                
                color: #fff;
                text-align: center;
                padding: 0 10px;
                border-radius: 3px;
                margin: 0 10px;
                /* 設計・施工事例 カテゴリ */
                &.dc-example{
                    background-color: #01A0E9;
                }
                /* メンテナンス カテゴリ */
                &.maintenance-example{
                    background-color: #121212;
                }
            }
            .entry-date{
                padding-right: 10px;
            }
            a{
                color: var(--color-bright-blue);
                text-decoration: underline;
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
}

/* 見出し */

/* 下層ページ共通H1見出し */
.sec_title{
    h1{
        font-size: 64px;
        font-family: "Prompt", sans-serif;
        font-weight: 500;
        font-style: normal;
        margin: 0;
        line-height: 1;
        text-align: center;
        position: relative;
        @media (max-width:1023px){
            font-size: 32px;
        }
        span{
            display: block;
            color: var(--color-bright-blue);
            font-size: 18px;
            font-weight: bold;
            margin-top: 15px;
        }
        &::after{
            content: "";
            width: 156px;
            height: 74.5px;
            position: absolute;
            top: 60px;
            left: 60%;
            background-image: url(img/first_message_point.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }
}

/* フッター配置の見出し */
h1.h1_under_title{
    span{
        display: block;
        max-width: 1400px;
        text-align: center;
        margin: 0 auto;
        padding-top: 20px;
        color: #fff;
    }
}

h2.sec_title{
    font-size: 30px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    @media (max-width:1023px){
        margin: 0 auto 20px auto;
        letter-spacing: 0;
        line-height: 1.2;
    }
}

h3.sec_title{
    font-size: 30px;
    color: var(--color-more-blue);
    font-family: "Prompt", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    @media (max-width:1023px){
        font-size: 20px;
        margin: 20px auto 10px auto;
    }
}

h3.top_h3{
    font-size: 112px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 0;
    line-height: 1;
    color: #000;
    @media (max-width:1023px){
        font-size: 36px;
    }
    span{
        display: block;
        font-size: 28px;
        margin-top: 30px;
        font-weight: bold;
        @media (max-width:1023px){
            font-size: 18px;
            margin-top: 15px;
        }
    }
}

/* 投稿の見出し */
.entry-header{
    .entry-title{
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ededed;
    }
}



/* 共通ボタン */
.common_btn{
    a{
        display: block;
        max-width: 270px;
        background-color: #000;
        border-radius: 50vw;
        color: #fff;
        text-align: center;
        font-size: 18px;
        text-decoration: none;
        padding: 1em 0;
        position: relative;
        @media (max-width:1023px){
            padding: 0.5em 0;
            margin: 0 auto;
        }
        &:visited{
            color: #fff;
        }
        &::after{
            position: absolute;
            top: 50%;
            right: 10%;
            transform: translateY(-50%);
            display: block;
            content: "";
            width: 15px;
            height: 15px;
            border-radius: 100%;
        }
    }
    &.icon_blue{
        a{
            &::after{
                background-color: var(--color-bright-blue);
            }
        }
    }
    &.icon_white{
        a{
            &::after{
                background-color: #fff;
            }
        }
    }
    &.white_bg{
        a{
            background-color: #fff;
            color: #000;
            border: 1px solid #000;
        }
    }
}

/* --- モーダル関連 --- */
.image-item{
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
    img{
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* モーダル本体 */
.modal{
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease;
    &.show{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.modal-content {
    background-color: white;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease;
}

.modal-image {
    width: 100%;
    height: auto;
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
}

.close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    &:hover{
        background-color: #f0f0f0;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---
    Common Layout
------------------------------------- */

.column{
    width:100%;
}

.column.column01{
    background-color: #efefef;
}

/* 薄い青の背景 */
.column.column02{
    background-color: var(--color-bg-blue);
    &.column_bg{
        background-image: url(./img/page_column02_bg.png);
        background-position: right top;
        background-repeat: no-repeat;
    }
    &.column_bg_left{
        background-image: url(./img/page_column02_bg_left.png);
        background-position: left top;
        background-repeat: no-repeat;
    }
    &.column_bg_long{
        background-image: url(./img/page_column02_bg_long.png);
        background-position: right top;
        background-repeat: no-repeat;
    }
}

.column.column03{
    background-image: url(img/tba_inner_bg.gif);
    background-repeat: repeat;
    background-position: left top;
}

.column .row{
    max-width:1400px;
    margin:0 auto;
    padding:60px 0;
    &.nopadding{
        padding: 0 0 100px 0;
        @media (max-width:1023px){
            padding: 0 0 30px 0;
        }
    }
    &.nopadding-tb{
        padding: 0;
    }
    &.nopadding-t{
        padding: 0 0 60px 0;
        @media (max-width:1023px){
            padding: 0 0 30px 0;
        }
    }
    &.nopadding-b{
        padding: 60px 0 0 0;
        @media (max-width:1023px){
            padding: 30px 0 0 0;
        }
    }
    &.padding-t300{
        padding-top: 300px;
        @media (max-width:1023px){
            padding-top: 30px;
        }
    }
    &.fullwidth{
        max-width: 100%;
    }
}

@media (max-width:1023px){
    .column .row{
        max-width:calc(100% - 40px);
        padding:30px 0;
    }

}

/* 全ページ共通で使える汎用的なflexbox */
.flexbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 30px;
    column-gap: 0;
    @media (max-width:1023px){
        row-gap: 0;
    }
    /*1列*/
    &.column1{
        > div{
            width: 100%;
            @media (max-width:1023px){
                width:100%;
            }
        }
    }
    /*2列*/
    &.column2{
        justify-content:space-between;
        > div{
            width: calc(100% / 2 - 40px);
            @media (max-width:1023px){
                width:100%;
                margin-bottom: 10px;
            }
            a{
                text-decoration: none;
            }
            img{
                display: block;
                margin: 0 auto;
            }
        }
    }
    /*2列（画像サイズ小）*/
    &.small_img{
        &.column2{
            .box{
                &:first-child{
                    width: 75%;
                    @media (max-width:1023px){
                        width:100%;
                    }
                }
                &:last-child{
                    flex: 1;
                    @media (max-width:1023px){
                        flex: auto;
                    }
                }
                
            }
        }
    }
    /*3列*/
    &.column3{
        > div{
            width:calc(100% / 3 - 40px);
            @media (max-width:1023px){
                width: 100%;
            }
        }
    }
    /*4列*/
    &.column4{
        > div{
            width:calc(100% / 4 - 20px);
            @media (max-width:1023px){
                width:calc(100% / 2 - 20px);
                margin: 0 auto;
            }
        }
    }
}

/* 写真とテキストが少し重なるflexbox */
.flexbox_overlap{
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
    @media (max-width:1023px){
        flex-direction: column;
        margin-bottom: 30px;
    }
    &:nth-child(even){
        flex-direction: row-reverse;
        @media (max-width:1023px){
            flex-direction: column;
        }
        .text_area{
            margin-right: -10%;
            @media (max-width:1023px){
                margin-right: 0;
            }
        }
    }
    .image_area{
        width: 55%;
        height: 400px;
        flex-shrink: 0;
        overflow: hidden;
        @media (max-width:1023px){
            width: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .text_area {
        width: 55%;
        background: rgba(255, 255, 255, 0.95);
        padding: 40px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        z-index: 2;
        position: relative;
        @media (max-width:1023px){
            width: 100%;
            box-sizing: border-box;
            padding: 20px;
        }
        .sec_title{
            @media (max-width:1023px){
                font-size: 24px;
                margin: 0 auto 10px auto;
            }
        }
        p{
            @media (max-width:1023px){
                margin-bottom: 0;
            }
        }
    }
    &:nth-child(odd){
        .text_area{
            margin-left: -10%;
            @media (max-width:1023px){
                margin-left: 0;
            }
        }
    }
}

/* 共通テーブル（製品説明などのページで利用） */
.product_common_table{
    max-width: 1200px;
    margin: 60px auto;
    @media (max-width:1023px){
        margin: 30px auto;
    }
    table{
        width: 100%;
        border-collapse: collapse;
        tr{
            th,td{
                border: 1px solid #cfcfcf;
                padding: 30px;
                font-size: 16px;
                line-height: 1.6;
                @media (max-width:1023px){
                    padding: 15px;
                    font-size: 14px;
                }
            }
            th{
                width: 25%;
                vertical-align: middle;
                background-color: var(--color-bg-blue);
                @media (max-width:1023px){
                    width: 40%;
                }
            }
        }
    }
}

/* ---
    Header
------------------------------------- */

body.home{
    .site-header{
        width: 100%;
        aspect-ratio: 1600 / 941;
        background-image: url(./img/site-header_bg.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        @media (max-width:767px){
            /*aspect-ratio: 640 / 827;*/
            aspect-ratio: 640 / 1000;
            background-image: url(./img/site-header_bg_sp.jpg);
        }
        .main-visual{
            width: 100%;
            height: 100%;
            flex: 1;
            position: relative;
            &::after{
                content: "";
                display: block;
                width: 297px;
                height: 195px;
                background-image: url(img/first_message_before_photo.png);
                position: absolute;
                bottom: -30px;
                left: 10%;
                z-index: 10;
                @media (min-width:1600px){
                    left:15%;
                }
                @media (max-width:1023px){
                    display: none;
                }
            }
            .main-visual_inner{
                width:100%;
                height: 100%;
                position: relative;
                .overlay-catch{
                    position: absolute;
                    bottom: 5%;
                    left: 32.5%;
                    color: #000;
                    @media (max-width:767px){
                        position: absolute;
                        /*top: 52.5%;*/
                        top: 60%;
                        transform: translateY(-50%);
                        left: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .sub-title{
                        font-size: 16px;
                        font-family: "Prompt", sans-serif;
                        font-weight: 500;
                        font-style: normal;
                        position: absolute;
                        letter-spacing: 0;
                        top: 70px;
                        left: 30%;
                        @media (max-width:767px){
                            position: static;
                            font-size: 10px;
                            font-weight: normal;
                            text-align: center;
                        }
                    }
                    .title{
                        font-size: 89px;
                        font-family: "Zen Kaku Gothic New", sans-serif;
                        font-weight: 500;
                        font-style: italic;
                        line-height: 1.2;
                        @media (max-width:767px){
                            font-size: 38px;
                            font-weight: 700;
                            letter-spacing: 0;
                            margin: 10px auto 15px auto;
                        }
                    }
                    .catch{
                        display: block;
                        font-size: 18px;
                        max-width: 66%;
                        margin-top: 30px;
                        line-height: 2.5;
                        letter-spacing: 0;
                        font-weight: 600;
                        @media (max-width:767px){
                            max-width: 90%;
                            margin-top: 0;
                            font-size: 14px;
                            line-height: 1.6;
                            background: rgba(255,255,255,0.3);
                            padding: 10px;
                        }
                    }
                }
            }
        }
    }
}

.site-header{
    .site-header_top{
        .site-header_inner{
            width:87.5%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding-top: 40px;
            @media (max-width:1023px){
                padding-top: 20px;
                padding-bottom: 20px;
            }
            hgroup{
                width:15%;
                @media (max-width:1023px){
                    width: calc(100% - 60px);
                }
                .site-description{
                    color: #000;
                    font-size: 12px;
                    letter-spacing: 0.2em;
                    margin-bottom: 5px;
                }
                .site-title{
                    @media (max-width:1023px){
                        margin: 0;
                    }
                    a{
                        @media (max-width:1023px){
                            width: 100%;
                        }
                        img{
                            display: block;
                            width: 100%;
                            max-width: 239px;
                        }
                    }

                }
            }
            .main-navigation{
                flex: 1;
            }
        }
    }

    /* 追従ヘッダー用 */
    .fixed-header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 15px 0;
        width: 100%;
        z-index: 999;
        background-color: rgba(255,255,255,0.8);
        box-shadow: 0 2px 6px #666;
        .site-header_inner{
            padding: 0;
        }
    }
}

.main-navigation{
	margin:0;
    li{
        margin:0 auto;
        /* お問い合わせボタンだけ別スタイル */
        &.navi-contact{
            a{
                background-color: #000;
                color: #fff;
                border: 1px solid #fff;
                border-radius: 50vw;
                padding: 0 40px;
                position: relative;
                &::after{
                    position: absolute;
                    top: 50%;
                    right: 10%;
                    transform: translateY(-50%);
                    display: block;
                    content: "";
                    width: 8px;
                    height: 8px;
                    border-radius: 100%;
                    background-color: #fff;
                }
                &:hover{
                    background-color: #efefef;
                    border: 1px solid #000;
                    transition: 0.5s;
                    color: #000;
                }
            }
        }
        a{
            padding:0 15px;
            font-size: 15px;
            color: #000;
            font-weight: 600;
            line-height: 2.5;
            &:hover{
                background-color: #efefef;
                transition: 0.5s;
            }
        }

        .sub-menu{
            li{
                a{
                    font-size: 16px;
                    line-height: 1.2;
                    color: #fff;
                    background-color: rgba(0,0,0,0.75);
                }
            }
        }
    }
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul{
	border:none;
}

.main-navigation li a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a{
	font-size:16px;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
    color: var(--color-bright-blue);
    background-color: var(--color-bg-blue);
}

/* --- スマホ ハンバーガーメニュー --- */
.menu-btn{
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #ffffff;
    &:hover{
        cursor:pointer;
    }
    span,
    span::before,
    span::after{
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #121212;
        position: absolute;
    }
    span::before{
        bottom: 8px;
    }
    span::after {
        top: 8px;
    }
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #121212;
    transition: all 0.5s;/*アニメーション設定*/
    ul {
        padding: 70px 10px 0;
        li {
            border-bottom: solid 1px #ffffff;
            list-style: none;
            > .sub-menu{
                padding: 0 20px 20px 20px;
                li{
                    border-bottom: 1px dashed #fff;
                }
            }
            a {
                display: block;
                width: 100%;
                font-size: 15px;
                box-sizing: border-box;
                color:#ffffff;
                text-decoration: none;
                padding: 9px 15px 10px 0;
                position: relative;
                &::before {
                    content: "";
                    width: 7px;
                    height: 7px;
                    border-top: solid 2px #ffffff;
                    border-right: solid 2px #ffffff;
                    transform: rotate(45deg);
                    position: absolute;
                    right: 11px;
                    top: 16px;
                }
            }
        }
    }
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

/* ---
    Footer
------------------------------------- */

footer[role="contentinfo"]{
    background-color: #242121;
    .footer-contents_around{
        max-width:87.5%;
        padding: 80px 0;
        margin: 0 auto;
        @media (width <= 767px){
            padding: 50px 0;
        }
        .inner{
            max-width:1200px;
            margin: 0 auto;
            color: #fff;
            .footer-company-info{
                display: flex;
                flex-wrap: wrap;
                column-gap: 30px;
                .footer-company-info_detail{
                    width:calc(100% / 3);
                    border-right:1px solid #454242;
                    @media (width <= 767px){
                        width: 100%;
                        border-right: none;
                        margin-bottom: 30px;
                    }
                    .footer-office-info{
                        margin: 60px auto;
                        @media (width <= 767px){
                            margin: 30px auto;
                        }
                        .title{
                            &:nth-child(3){
                                margin-top: 30px;
                            }
                        }
                    }
                    .permit-info{
                        p{
                            color: #bab7b1;
                        }
                    }
                }
                .footer-company-info_sitelink{
                    display: flex;
                    justify-content: center;
                    flex: 2;
                    @media (width <= 767px){
                        flex-direction: column;
                    }
                    ul{
                        width: calc(100% / 2 - 40px);
                        @media (width <= 767px){
                            width: 100%;
                        }
                        li{
                            line-height: 3em;
                            a{
                                width: 100%;
                                color: #fff;
                                font-size: 14px;
                                text-decoration: none;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                            .sub-menu{
                                width: 100%;
                                li{
                                    text-indent: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .site-info{
        background-color: #000;
        max-width: 100%;
        width: 100%;
        padding: 45px 0;
        p{
            text-align: center;
            color: #fff;
            @media (width <= 767px){
                font-size: 14px;
            }
        }
    }
}

/* パンくずリストのスタイル */
.breadcrumb {
    margin: 0 auto;
    padding:0;
    font-size: 14px;
    background-color: var(--color-bg-blue);
    @media (max-width:1023px){
        padding: 0 20px;
    }
    ol {
        background-color: var(--color-bg-blue);
        max-width: 1200px;
        list-style: none;
        margin: 20px auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        li {
            margin: 0;
            padding: 0;
            a {
                color: #0073aa;
                text-decoration: none;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

.breadcrumb li:not(:last-child)::after {
    content: ' > ';
    margin: 0 8px;
    color: #999;
}

.breadcrumb .current {
    color: #666;
    font-weight: normal;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 12px;
    }
    
    .breadcrumb li:not(:last-child)::after {
        margin: 0 4px;
    }
}

/* ---
    投稿ページ周り ウィジェット
------------------------------------- */
.widget-area{
    @media (max-width:1023px){
        width: calc(100% - 40px);
        margin: 0 auto;
    }
    .widget{
        h3{
            font-size: 24px;
            color: #000;
            margin-bottom: 20px;
            border-bottom: 1px solid #ededed;
            padding-bottom: 20px;
            line-height: 1;
        }
        li{
            font-size: 16px;
            a{
                color: #000;
                &:visited{
                    color: #00A0E9;
                }
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
}

/* シングルページ ページ送り */
.nav-single{
    @media (max-width:1023px){
        padding: 0 10px;
    }
    .nav-previous,
    .nav-next{
        line-height: 1.2;
        @media (max-width:1023px){
            width: 100%;
            margin-bottom: 10px;
        }
        a{
            display: inline-block;
            padding: 10px;
            box-sizing: border-box;
            background-color: var(--color-bright-blue);
            color: #fff;
            @media (max-width:1023px){
                font-size: 14px;
                text-align: left;
            }
        }
    }
}

footer.entry-meta{
    font-size: 16px;
    padding: 20px 0;
    border-top: 1px dashed #ededed;
}

/* ---
    トップページ HOME
------------------------------------- */

/* 企業の〇〇を通じて社会に貢献できるー */
.column{
    &.column_firstcontents{
        margin-top: 30px;
        .row{
            @media (max-width:1023px){
                max-width: calc(100% - 40px);
                width: 100%;
                margin: 0 auto;
            }
        }
    }
}


.first_message_box_around{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid #18a6ea;
    border-radius: 20px;
    padding: 100px 100px 50px 50px;
    position: relative;
    @media (max-width:1023px){
        padding: 25px;
    }
    > div{
        width: calc(50% - 40px);
        @media (max-width:1023px){
            width: 100%;
        }
    }
    .text_box{
        position: relative;
        &::before{
            content: "";
            width: 312px;
            height: 149px;
            position: absolute;
            top:-60px;
            right:-60px;
            background-image: url(img/first_message_point.png);
        }
        /* 縦書きゾーン */
        .first_message_text_box_around{
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            column-gap: 40px;
            .tategaki_box_left{
                width: 60%;
                @media (max-width:1023px){
                    width: 100%;
                    order: 2;
                }
                .tategaki_box_left_top{
                    p{
                        font-size: 18px;
                        width: 100%;
                        max-height: 330px;
                        writing-mode:vertical-rl;
                        line-height: 2.0;
                        letter-spacing: 0.025em;
                        @media (max-width:1023px){
                            font-size: 16px;
                            max-height: none;
                            writing-mode: horizontal-tb;
                        }
                    }
                }
                .tategaki_box_left_bottom{
                    .common_btn{
                        a{
                            margin: 0 auto;
                        }
                    }
                }
            }
            .tategaki_box_right{
                flex: 1;
                display: flex;
                justify-content: space-between;
                gap: 10px;
                @media (max-width:1023px){
                    flex-direction: column-reverse;
                    flex: auto;
                    margin: 15px auto;
                    gap: 5px;
                    order: 1;
                }
                p{
                    margin: 0;
                    writing-mode: vertical-rl;
                    width: 56px;
                    @media (max-width:1023px){
                        writing-mode: horizontal-tb;
                        width: 100%;
                    }
                    span{
                        background-color: #000;
                        color: #fff;
                        font-size: 36px;
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                        padding: 0.3em 0;
                        letter-spacing: 0.1em;
                        @media (max-width:1023px){
                            font-size: 18px;
                            padding: 0.1em;
                        }
                    }
                    
                }
            }
        }
    }
}

/* 事業内容 Construction */
/* 事業内容 Maintenance */
.column_construction,
.column_maintenance{
    .top_business_around{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-image: url(img/top_business_around_bg.png);
        background-position: left center;
        background-repeat:no-repeat;
        > div{
            @media (max-width:1023px){
                flex: 1;
                width: 100%;
            }
        }
        .margin_area{
            width: 25%;
            @media (max-width:1023px){
                width: 100%;
            }
            h2{
                display: block;
                font-size:38px;
                writing-mode:vertical-rl;
                color: #000;
                margin: -60px auto 0 50%;
                @media (max-width:1023px){
                    writing-mode: horizontal-tb;
                    margin: 30px auto;
                    padding: 20px;
                }
                span{
                    display: block;
                    color:var(--color-bright-blue);
                    font-size: 18px;
                }
            }
        }
        .contents_area{
            flex: 1;
            background-color: #fff;
            border-radius: 100px 0 0 0;
            box-shadow: 0 0 12px #fff,0 0 12px #fff;
            background-image: url(img/tba_inner_bg.gif);
            background-repeat: repeat;
            background-position: left top;
            @media (max-width:1023px){
                max-width: 100%;
                flex: auto;
                border-radius: 30px 30px 0 0;
                margin: 0 auto;
            }
            .inner_text{
                padding: 120px 60px 60px 120px;
                @media (max-width:1023px){
                    padding: 30px 20px 20px 20px;
                }
                p{
                    font-size: 18px;
                    color: #000;
                }
            }
            .inner_img{
                width: 100%;
                padding-top: 47.2984%;
                background-image: url(img/construction_bg_img.jpg);
                background-repeat: no-repeat;
                background-position: center top;
                background-size: cover;
                position: relative;
                p{
                    position: absolute;
                    bottom: 40px;
                    left: 40px;
                    background-color: #fff;
                    color: #000;
                    margin: 0;
                    font-size: 56px;
                    font-weight: bold;
                    padding: 0 20px;
                    @media (max-width:1023px){
                        bottom: 18px;
                        left: 20px;
                        font-size: 16px;
                        padding: 10px;
                    }
                }
            }
        }
    }
}

/* Maintenance */
.column_maintenance{
    .top_business_around{
        background-image: none;
        .contents_area{
            .inner_text{
                h3.top_h3{
                    position: relative;
                    &::after{
                        content: "";
                        width: 312px;
                        height: 149px;
                        position: absolute;
                        top: 75px;
                        left: 32vw;
                        background-image: url(img/first_message_point.png);
                    }
                }
            }
            .inner_img{
                background-image: url(img/maintenance_bg_img.jpg);
            }
        }
    }
}

/* 工事実績 Established */
.column_established{
    .head_sec{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        @media (max-width:1023px){
            flex-direction: column;
            margin-bottom: 15px;
        }
        .title{
            width:20%;
            position: relative;
            @media (max-width:1023px){
                width: 100%;
                order: 2;
            }
            &::before{
                content: "";
                width: 312px;
                height: 149px;
                position: absolute;
                top: -120px;
                right: 0;
                background-image: url(img/first_message_point.png);
                @media (max-width:1023px){
                    display: none;
                }
            }
            .title_inner{
                position: absolute;
                top: -60px;
                left: 50%;
                flex: 1;
                display: flex;
                justify-content: space-between;
                gap: 10px;
                transform: translateX(-50%);
                @media (max-width:1023px){
                    position: static;
                    transform: none;
                    flex-direction: column-reverse;
                    gap: 5px;
                }
                p{
                    margin: 0;
                    writing-mode: vertical-rl;
                    width: 56px;
                    @media (max-width:1023px){
                        writing-mode: horizontal-tb;
                        width: 100%;
                    }
                    span{
                        background-color: #000;
                        color: #fff;
                        font-size: 32px;
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                        padding: 0.3em 0;
                        letter-spacing: 0.1em;
                        @media (max-width:1023px){
                            font-size: 24px;
                        }
                    }
                }
            }
        }
        .top_h3{
            width: 58.46%;
            margin-bottom: 0;
            @media (max-width:1023px){
                width: 100%;
                margin: 0 auto 20px auto;
                order: 1;
            }
        }
        .common_btn{
            flex: 1;
            width: 75%;
            order: 3;
        }
    }
    
    .established_photo_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        li{
            margin: 0;
            width: 25%;
            @media (max-width:1023px){
                width: 50%;
            }
            img{
                width: 100%;
                display: block;
                padding: 10px;
                box-sizing: border-box;
            }
            p{
                font-size: 16px;
                line-height: 1.4;
                text-align: center;
                font-weight: 700;
                margin: 0;
                @media (max-width:1023px){
                    font-size: 14px;
                    font-weight: normal;
                }
            }
        }
    }
}

/* 各種工事関係の方へ */
.column_workers{
    background-image: url(img/column_workers_bg.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    padding-top: 43%;
    .workers_inner_around{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        transform: translateY(50%);
        @media (max-width:1023px){
            position: static;
            transform: none;
        }
        .margin_area{
            width: 12.5%;
            @media (max-width:1023px){
                display: none;
            }
        }
        .workers_contents{
            flex: 1;
            background-color: #242121;
            border-radius: 60px 0 0 60px;
            @media (max-width:1023px){
                border-radius: 0;
            }
            .contents_inner{
                padding: 6.4% 0 6.4% 8.5%;
                @media (max-width:1023px){
                    padding: 6.4%;
                }
                .top_h3{
                    font-size: 80px;
                    color: #fff;
                    font-weight: 700;
                    position: relative;
                    @media (max-width:1023px){
                        font-size: 32px;
                    }
                    &::after{
                        content: "";
                        width: 312px;
                        height: 149px;
                        position: absolute;
                        top: 0;
                        left: 35vw;
                        background-image: url(img/first_message_point.png);
                    }
                }
                p{
                    color: #fff;
                    @media (max-width:1023px){
                        margin: 0;
                    }
                }
            }
        }
    }
}

/* 施工事例 CASE */
.column_case{
    .case_inner{
        width:93.75%;
        background-color: #fff;
        border-radius: 0 100px 0 0;
        @media (max-width:1023px){
            width: 100%;
            border-radius: 30px 30px 0 0;
            padding-bottom: 50px;
        }
        .case_in_contents{
            max-width:1200px;
            margin: 0 auto;
            padding: 100px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            @media (max-width:1023px){
                max-width: 100%;
                padding: 20px;
            }
            .midashi_area{
                width:27.5%;
                @media (max-width:1023px){
                    width: 100%;
                }
                h2{
                    display: block;
                    font-size:38px;
                    writing-mode:vertical-rl;
                    color: #000;
                    margin: 0 auto;
                    @media (max-width:1023px){
                        writing-mode: horizontal-tb;
                        padding: 0 20px 20px 20px;
                    }
                    span{
                        display: block;
                        color:var(--color-bright-blue);
                        font-size: 18px;
                    }
                }
                .common_btn{
                    margin-top: 160px;
                    @media (max-width:1023px){
                        margin-top: 30px;
                        margin-bottom: 30px;
                    }
                    a{
                        margin: 0 auto;
                    }
                }
            }
            .case_blog_list{
                flex: 1;
                ul,
                ul li{ margin: 0; }
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    li{
                        font-size: 18px;
                        width: 100%;
                        padding: 30px 0;
                        border-top: 2px solid #eee;
                        border-bottom: none;
                        position: relative;
                        @media (max-width:1023px){
                            padding: 10px 0;
                        }
                        &:last-child{
                            border-bottom: 2px solid #eee;
                            &::after{
                                content: "";
                                width: 67px;
                                height: 2px;
                                position: absolute;
                                background-color: var(--color-dark-blue);
                                left:0;
                                bottom: -2px;
                            }
                        }
                        &::before{
                            content: "";
                            width: 67px;
                            height: 2px;
                            position: absolute;
                            background-color: var(--color-dark-blue);
                            left:0;
                            top: -2px;
                        }
                        .entry-date{
                            padding: 0 25px;
                            @media (max-width:1023px){
                                display: block;
                                width: 100%;
                                padding: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}


/* OUR MISSION */
.column_ourmission{
    background-image: url(img/mission_bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    padding-top: 63.5%;
    @media (max-width:1023px){
        padding-top: 100px;
    }
    .ourmission_inner{
        width: 1400px;
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        @media (max-width:1023px){
            width: 100%;
            position: static;
            transform: none;
            background-color: rgba(0,0,0,0.8);
            padding: 30px 0;
        }
        .inner_text{
            color: #fff;
            h2{
                font-size: 150px;
                font-family: "Prompt", sans-serif;
                font-weight: 500;
                font-style: normal;
                margin: 0;
                line-height: 1;
                @media (max-width:1023px){
                    font-size: 40px;
                    text-align: center;
                }
                .sub-title{
                    display: block;
                    font-size: 30px;
                }
                .title{
                    display: block;
                    padding: 20px 0;
                    @media (max-width:1023px){
                        padding: 10px 0;
                    }
                }
            }
            p{
                font-size: 18px;
                @media (max-width:1023px){
                    font-size: 16px;
                    padding: 0 20px;
                }
            }
        }
        .ourmission_under_photolist{
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            li{
                width: 20%;
                margin: 0;
                img{
                    display: block;
                    width: 100%;
                    border-radius: 0;
                }
            }
        }
    }
}

/* お問い合わせはこちら */
.column_contact{
    .row{
        max-width: 1200px;
        .contact_this{
            display: flex;
            flex-wrap: wrap;
            justify-content:center;
            align-items:center;
            > div{
                width: calc(50% - 40px);
                @media (max-width:1023px){
                    width: 100%;
                    padding: 0 20px;
                }
            }
            .right_box{
                .telno{
                    font-size: 2.4rem;
                    font-weight: 700;
                    margin: 0;
                }
            }
        }
    }
}

/* ---
    製品ページ products
------------------------------------- */

/* 型番の説明 */
.model_number_description{
    max-width: 1000px;
    font-size: 16px;
    margin: 60px auto;
    @media (max-width:1023px){
        margin: 30px auto;
    }
    .flexbox{
        background-color: #fff;
        padding: 30px;
        margin-bottom: 30px;
        @media (max-width:1023px){
            padding: 15px;
            row-gap: 0;
        }
        .box{
            overflow-x: scroll;
            h4.sec_title{
                font-size: 2.4rem;
                color: #fff;
                background-color: var(--color-dark-blue);
                font-weight: 700;
                text-align: center;
                margin: 0 auto 30px auto;
            }
            table{
                border-collapse: collapse;
                .thead{
                    font-weight: 700;
                }
                tr{
                    th,
                    td{
                        border: 1px solid #cfcfcf;
                        font-size: 16px;
                        padding: 5px;
                        text-align: center;
                    }
                    th{
                        &:not(.thead){
                            color: #000;
                            background-color: var(--color-bg-blue);
                        }
                    }
                    td{
                        &.left{
                            text-align: left;
                        }
                    }
                    .price{
                        color: #cc0000;
                        font-weight: bold;
                    }
                }
            }
            ul,
            ul li{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .first_list{
                font-size: 1.4rem;
                margin-bottom: 30px;
            }
            .annotation_list{
                font-size: 14px;
            }
        }
    }
}

/* ---
    工事実績一覧ページ construction-record
------------------------------------- */
.column_construction_record{
    .flexbox{
        justify-content:flex-start;
        gap: 20px;
        .box{
            @media (max-width:1023px){
                width: 100%;
            }
            p{
                margin: 0;
                padding: 5px 10px;
                line-height: 1.4;
            }
        }
    }
}

/* ---
    会社概要 company
------------------------------------- */

/* 会社概要テーブル */
.company_profile_table{
    max-width: 1200px;
    margin: 60px auto;
    .table_inner{
        background-color: #fff;
        padding: 3em;
        border-radius: 20px;
        font-size: 16px;
        @media (max-width:1023px){
            padding: 1em;
        }
        dl,
        dl dt,
        dl dd{
            margin: 0;
        }
        dl{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            column-gap: 30px;
            padding: 1.5em;
            border: 1px solid #cfcfcf;
            @media (max-width:1023px){
                padding: 1em;
                column-gap: 0;
                flex-direction: column;
                margin-bottom: 0;
                border: none;
            }
            dt{
                width: 20%;
                @media (max-width:1023px){
                    width: 100%;
                    padding-bottom: 10px;
                    border-bottom: 1px dashed #cfcfcf;
                    margin-bottom: 10px;
                }
            }
            dd{
                flex: 1;
                @media (max-width:1023px){
                    font-size: 14px;
                }
            }
        }
    }
}

/* 沿革リスト */
.company_history_list{
    max-width: 1200px;
    margin: 60px auto;
    .history_inner{
        font-size: 16px;
        dl,
        dl dt,
        dl dd{
            margin:0;
        }
        dl{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            column-gap: 30px;
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 1px dashed #cfcfcf;
            align-items: center;
            @media (max-width:1023px){
                column-gap: 0;
            }
            dt{
                width:20%;
                text-align: center;
                @media (max-width:1023px){
                    width: 40%;
                }
            }
            dd{
                flex:1;
            }
        }
    }
}

/* ---
    お問い合わせ contact
------------------------------------- */
.contact_form{
    @media (max-width:1023px){
        padding: 0 20px;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea{
        font-size: 16px;
        padding: 1em;
        width:100%;
        box-sizing: border-box;
        &:focus{
            background-color: antiquewhite;
        }
        &::placeholder{
            color: #afafaf;
        }
    }
    input[type="submit"]{
        font-size: 18px;
        font-weight: bold;
        background-color: #000;
        background-image: none;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 50vw;
        padding: 1em 2em;
        &:hover{
            color: #000;
            border: 2px solid #000;
            background-color: #fff;
            transition: 0.5s;
        }
    }
}

.column_contact{
    .contact_form{
        max-width:1000px;
        margin:60px auto;
        dl,
        dl dt{
            margin: 0;
        }
        dl{
            dt{
                p{
                    margin-bottom: 10px;
                }
            }
        }

        .submit_btn{
            text-align: center;
            margin: 60px auto 0 auto;
            display: flex;
            flex-direction: column;
            @media (max-width:1023px){
                margin: 30px auto 0 auto;
            }
        }
    }
}