@charset "utf-8";
/**********************************/
/*フォント  					   */
/**********************************/

/* font-family */
#top h2.title,
#report h2,
#report h3{
    font-family: 'BIZ UDMincho','BIZ UD明朝','Hiragino Mincho ProN','ヒラギノ明朝 ProN', 'Open Sans', sans-serif;
    font-weight: lighter;
    color: #fff;
    animation-delay: 0.3s;
}

#report h3,
#report h4,
.photo-title {
    font-family: 'BIZ UDGothic','BIZ UDゴシック','Hiragino Sans','ヒラギノ角ゴシック', 'Open Sans', sans-serif;
    font-weight: lighter;
    color: #fff;
}

/**********************************/
/*まとめページのflex   			   */
/**********************************/

/* 大枠 */
#top .all-box {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    max-width: 1000px;
    list-style: none; /* リストのスタイルを無効にする */
}

/* ３カラム */
#top .box30 {
    max-width: 900px;
    margin:3rem 1rem;
    padding:1rem;
    background-color:#fff;
    color:#000;
    border-radius:10px;
}
@media only screen and (max-width: 500px) {
    #top .box30 {
        width:100%;
        margin:1rem;
    }
}
#top .box30-font-g {
    color:#70cc11;
    font-size:1.1rem;
    font-weight:200;
    margin:1rem;
    border-bottom:1px solid #70cc11;
}
#top .box30-font-b {
    color:#000;
    font-size:0.9rem;
    text-align:center;
}

/**********************************/
/*本文              			   */
/**********************************/

/* 大枠 */
#report .all-box {
    display: flex;
    flex-wrap: wrap;
    margin:1em;
    list-style: none; /* リストのスタイルを無効にする */
}

/* 大枠 */
#report .all-box2 {
    flex-wrap: wrap;
    margin:1em;
    list-style: none; /* リストのスタイルを無効にする */
}

/* １カラム版（イベントページ用） */
#report .one-box {
    max-width: 900px;
    width:100%;
    margin:0 auto;
    padding:1rem;
}

@media only screen and (max-width: 840px) {
    #report .one-box {
        max-width: 800px;
        margin:1em auto;
    }
}
/* トップ枠 */
#top .top-area2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
}
/* トップ文章（枠） */
#top .top-desc2{
    width:100%;
    max-width:900px;
    padding: 1rem;
    text-align: center;
}
#top h2.title{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2.2;
    margin: 2rem 0 0 0px;
    padding: 0 0 0 0px;
    text-align: center;
    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
}
#top .title-b{
    font-size: 1.7rem;
    letter-spacing: 0.3em;
}

/* 冒頭文章 */
.top-text{
    margin:0 auto;
    text-align:center;
    font-size:0.9rem;
    max-width:900px;
    width:90%;
}

/* 文章 */
.text{
    margin:0 auto;
    text-align:left;
    font-size:0.9rem;
    max-width:900px;
    width:90%;
}

.text2{
    margin:0 auto;
    text-align:left;
    font-size:0.9rem;
    padding:1rem;
    max-width:900px;
    width:100%;
    border:1px solid #000;
    background-color:#444;
}

.text3{
    font-family: 'BIZ UDMincho','BIZ UD明朝','Hiragino Mincho ProN','ヒラギノ明朝 ProN', 'Open Sans', sans-serif;
    margin:0 auto;
    text-align:center;
    font-size:1rem;
    max-width:900px;
    width:90%;
}

/* 文章（小） */
.text-s{
    margin:0 auto;
    text-align:left;
    font-size:0.8rem;
    max-width:900px;
    width:90%;
}

@media only screen and (max-width: 650px) {
    #top h2.title{
        font-size: 1.1rem;
        line-height: 1.3;
    }
    #top .title-b{
        font-size: 1.2rem;
        letter-spacing: 0.1em;
    }

    .top-text{
        text-align:left;
        width:100%;
    }

    .text,
    .text-s{
        width:100%;
    }
    .text3{
        font-size:0.9rem;
        text-align:left;
        width:100%;
    }
}

/* 見出し */
h2 {
    position:relative;
    max-width:900px;
    width: 100%;
    text-align: center;
    margin: 1rem 0 2rem 0;
    padding:0rem 1rem;
    font-size:1.3rem;
}
h2:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background: #70cc11;
}

/* 小見出し */
h3{
    position:relative;
    max-width:900px;
    width: 100%;
    text-align: center;
    margin: 1rem 0 2rem 0;
    padding:0rem 1rem;
    font-size:1.1rem;
}
h3:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background: #70cc11;
}

/* flex枠 */
.flex{
    display:flex;
    justify-content:center;
    margin:0 auto;
    text-align:center;
}

/* 最後の紹介枠 */
/* 大枠 */
.last-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
    background-color:#c9c9c0;
    color:#222;
    padding:2rem;
    margin:0 auto;
    border-radius:5px;
}
.last-flex-box-l{
    max-width:450px;
    width:45%;
    padding:2rem 1rem;
}

.last-flex-box-r{
    max-width:450px;
    width:50%;
    text-align:center;

}

.last-flex-box-inner{
    max-width:450px;
    width:100%;
}

@media only screen and (max-width: 650px) {
    .last-flex{
        padding:1rem;
    }
    .last-flex-box-l{
        width:100%;
        padding:1rem 0rem;
    }

    .last-flex-box-r{
        width:100%;
    }
}

/**********************************/
/*画像  　                          */
/**********************************/

.img-flex{
    display:flex;
    margin:0 auto;
    justify-content:center;
    flex-wrap: wrap;
    align-items: flex-start
}
.img-100{
    max-width:900px;
    width:100%;
    padding:0rem 1rem;
}

.img-50{
    max-width:450px;
    width:50%;
    padding:0rem 0.5rem;
    flex-wrap: wrap;
    font-size:0.9rem;
}

.img-50-flex{
    display:flex;
    max-width:450px;
    width:45%;
    margin:0.5rem;
    flex-wrap: wrap;
    font-size:0.9rem;
}
@media only screen and (max-width: 500px) {
    .img-50{
        max-width:800px;
        width:100%;
        padding:0.5rem;
        flex-wrap: wrap;
        font-size:0.9rem;
    }
    .img-50-flex{
        width:100%;
        margin:0.5rem;
    }
}

.img-30{
    max-width:200px;
    width:29%;
    padding:0rem 0.5rem;
    margin:0.5rem;
    flex-wrap: wrap;
}

.img-box{
    max-width:900px;
    width:100%;
}

/**********************************/
/*ギャラリー       			      */
/**********************************/
.gallery{
    columns: 4;/*段組みの数*/
    padding:0 15px;/*ギャラリー左右に余白をつける*/
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
    font-size:0.9rem;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
    border-radius:5px;
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
    .gallery{
    columns:3;
    }
}

@media only screen and (max-width: 768px) {
    .gallery{
    columns: 2;
    }
}

/*画像を出現させるアニメーションCSS*/

.flipLeft{
    animation-name: flipLeft;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    perspective-origin: left center;
    opacity: 0;
}

@keyframes flipLeft{
    from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
    }

    to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    }
}

/**********************************/
/*施工事例　コンテンツ用       			      */
/**********************************/
.gallery2{
    columns: 5;/*段組みの数*/
    padding:1rem;/*ギャラリー左右に余白をつける*/
    max-width:1000px;
}

.gallery2 li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
    font-size:0.9rem;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery2 img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/
    border-radius:5px;
}

/*ギャラリー内のテキスト*/
.gallery2 div{
    font-size:0.9rem;
    text-align:center;
}

/*ギャラリー内の「NEW！」*/
.gallery2-red{
    color:#ff5858;
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
    .gallery2{
    columns:3;
    }
}

@media only screen and (max-width: 768px) {
    .gallery2{
    columns: 2;
    }
}

/**********************************/
/*バナー         			      */
/**********************************/

/*バナー小の枠*/
#report .topics-all{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:1rem auto;
    list-style: none; /* リストのスタイルを無効にする */
}

#report .topics{
    right:0px;
    width:auto;/*幅*/
    border-radius: 3px; /* ボックスの四つ角を丸くする */
    background:#70cc11;
    color:#fff;
    padding:0 1em;
    margin:0.5em;
    font-size: 0.8rem;
}

/**********************************/
/*枠             			      */
/**********************************/
#report .bg-g {
    position: relative;
    padding: 1em;
    background: #444;
    border-radius:5px;
    margin:1rem 0;
    text-align:center;
}

#report .bg-w {
    position: relative;
    padding: 1em;
    background: #fff;
    border-radius:5px;
}

#report .bg-b {
    padding: 0.5rem 2rem;
    background: #222;
    border-radius:20px;
}

/**********************************/
/*テーブル               		   */
/**********************************/

#report table{
    border-collapse:collapse;
    margin:0 auto;
}
@media only screen and (max-width: 630px) {
    #report table{
        border-collapse:collapse;
        margin:0 1em;
    }
}
#report .left_td{
    position: relative;
    padding: 2px;
}

#report .right_td{
    border-bottom:1px solid #666;
    padding:1em;
}

#report span{
    font-size: 0.9em;
}
#report .img-bottom{
    border-bottom:1px solid #666;
    padding:10px;
    display: table-cell;
    position: relative;
}