@charset "UTF-8";
/* CSS Document */

/* パーツの基本設定 */
body {
    -webkit-text-size-adjust: 100%;
    margin: 0;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Arial, Helvetica,"sans-serif";
    background-color:  #f5f1ef;
}

/* ##### Navi ##### */

/* 基本 */
.page *{
    
}

.page-head img{
    width: 250px;
    vertical-align:bottom;
}

/* グリッド */
.page{
    display : grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* ヘッダー */
.page-head{
    grid-column: 1;
    grid-row: 1;
    padding: 8px 0;
    background-color: #fff;
    text-align:center;
}

/* メインコンテンツ */
.page-main{
    grid-column: 1;
    grid-row: 2;
    background-color: #f5f1ef;
}





/* フッター */
.page-foot {
    grid-column: 1;
    grid-row: 3;
    padding: 20px 0;
    background-color: #fff;
    color: #666;
    text-align: center;
    font-size: 11px;
}
.page-foot a{
    text-decoration: none;
}

/* ##### 画面の横幅 1260ピクセル以上 ##### */
@media (min-width: 1260px){
    .page-head{
        text-align: left;
    }
}


/* 基本 */
.post * {
    margin: 0;
}

.post img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* グリッド */
.post {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-tenmplate-rows: repeat(16, 1fr);
    grid-column-gap: 30px;
    padding:0 30px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Arial, Helvetica,"sans-serif";
    font-size: 16px;
}

/* タイトル */
.post-title{
    grid-column:1/-1;
    grid-row: 1;
    justify-self: center;
    align-self:end;
    font-family: Arial, Helvetica, "sans-serif";
    font-size : 1.6em;
}

/* サブタイトル */
.post-sub{
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: center;
    align-self:auto;
    color:#666;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Arial, Helvetica,"sans-serif";
    font-size: 1.4em;
    font-weight:900;
    
}

/* リードテキスト */
.post-lead{
    grid-column: 1/-1;
    grid-row: 3;
    justify-self: center;
    margin-bottom: 30px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Arial, Helvetica, "sans-serif";
    font-size: 1.0em;
    line-height: 1.8em;
    
}

/* ビルボードイメージ */
.post-tiens-billboard-img{
    grid-column: 1/-1;
    grid-row: 1/1;
    justify-self: center;
    align-self: start;
	width: 100%;
	height: 100%;
	margin-top: 30px;
	margin-bottom: 60px;
}
.l-size{
	border-radius: 20px;
}
.s-size {
    display:none;
}


/* ワークス イメージ */




/*　コンテンツのグリッド設定 */
div.post-works-img{
    grid-column: 1/-1;
    grid-row:4;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: auto;
    grid-column-gap: 30px;
    background-color: #d6d8d9;
    margin-left: -30px;
    margin-right: -30px;
    padding: 30px;
    
}



/*　NEWS　*/
.post-news-01{
    grid-column: 1/3;
    grid-row: 3;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
}

.post-news-02{
    grid-column: 3/5;
    grid-row: 3;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
}

.post-news-03{
    grid-column: 5/7;
    grid-row: 3;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
}
.post-news-04{
    grid-column: 1/3;
    grid-row: 4;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-05{
    grid-column: 3/5;
    grid-row: 4;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-06{
    grid-column: 5/7;
    grid-row: 4;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-07{
    grid-column: 1/3;
    grid-row: 5;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-08{
    grid-column: 3/5;
    grid-row: 5;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-09{
    grid-column: 5/7;
    grid-row: 5;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-10{
    grid-column: 1/3;
    grid-row: 6;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-11{
    grid-column: 3/5;
    grid-row: 6;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}
.post-news-12{
    grid-column: 5/7;
    grid-row: 6;
    background-color:#F5F1EF;
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}

.post-news-head{
    font-size:1.2em;
}
.post-news-date{
    font-size: 0.8em;
}
.post-news-kind-01{
    font-size:0.9em;
    font-weight: bold;
    color:#CD5897;
}
.post-news-kind-02{
    font-size:0.9em;
    font-weight: bold;
    color:#2FB176;
}
.post-news-text{
    font-size: 1em;
    line-height: 1.5em;
}


/*YouTube最大値指定*/

.youtube-iframe {
  position:relative;
  padding-bottom: 56.25%;
  width: 100%;    
  height: 0;
  overflow: hidden;
}


.youtube-iframe iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/* Pagenation */
.post-pagenation{
    grid-column: 3/5;
    grid-row:5;
    display: flex;
    justify-content: space-between;
    
}
.post-pagenation li{
    display: inline-block;
    margin:0px 4px 0px 4px;
    height:20%;
    line-height:40px;
    width:20%;
    text-align:center;
    font-size:0.8em;
    border:1px #ccc solid;
    color:#000053;
    border-radius: 5px / 5px;
}
.post-pagenation li.pre{
    background-color:#ccc;color:#333;
}
.post-pagenation li.this{
    background-color:#777;
    color:#fff;
}
.post-pagenation li a{
    display:block;
    padding-left:2em;
    text-decoration: none;
    text-align: center;
    font-size:1em;
}
.post-pagenation li a:hover{
    color: #fff;
    text-decoration: none;
    background-color: #003396;
    border-radius: 5px / 5px;
}
/* SNS */
.post-sns{
    grid-column: 1/-1;
    grid-row: 6;
    justify-self: center;
    align-self: center;
}
.post-sns ul{
    margin: 30px;
    padding-top: 32px;
    padding-bottom: 32px;
    list-style : none;
}

.post-sns ul li{
    display: inline-block;
    
    
}
.post-sns a{
    font-size: 2.2em;
    color : #aaa;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2em;

}

/* ##### 画面の横幅1602ピクセル以上 ##### */
@media (min-width: 1602px){
    .post{
        width: 1602px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: boder-box;
        margin: auto;
        font-size: 20px;
    }
    .post-works-img-bg{
        grid-column: 1/-1;
        grid-row: 4;
        z-index:0;
        background-color: #d6d8d9;
        margin-left: calc(((100vw - 1542px) / 2)* -1);
        margin-right: calc(((100vw - 1542px) / 2)* -1);
        padding: 30px;
}
    .post-works-img{
        width: 1602px;
        margin-left:calc(((100vw - 1542px) / 2)* -1) ;
        margin-right:calc(((100vw - 1542px) / 2)* -1) ; 
    }
    .post-works_detail-img-bg{
        grid-column: 1/-1;
        grid-row: 4;
        z-index:0;
        background-color: #d6d8d9;
        margin-left: calc(((100vw - 1542px) / 2)* -1);
        margin-right: calc(((100vw - 1542px) / 2)* -1);
        padding: 30px;
    }
    .post-works_detail-img{
        width: 1602px;
        margin-left:calc(((100vw - 1542px) / 2)* -1) ;
        margin-right:calc(((100vw - 1542px) / 2)* -1) ; 
    }
    

    .post-pagenation li{
        font-size:0.7em;
    }

}

/* ##### 画面の横幅1000-1601ピクセル ##### */
@media (min-width: 1000px) and (max-width: 1601px){
    .post{
        font-size : calc(14px + 4 * (100vw - 1000px) / 834);
    }
}

/* ##### 画面の横幅768-999ピクセル ##### */
@media (min-width: 768px) and (max-width: 999px){
    .post{
        font-size : calc(12px + 4 * (100vw - 768px) / 232);
    }
}

/* ##### 画面の横幅767ピクセル以下 ##### */
@media (max-width: 767px){
    .post {
        grid-template-columns: none;
        grid-template-rows: none;
        grid-row-gap: 20px;
        padding: 20px;
        font-size : 14.4px;
    }
    
    .post > *,
    .post::after {
        grid-column: auto;
        grid-row: auto;
    }
    
    /* タイトル */
    .post-title{
        grid-column: 1;
        grid-row: 1;
        font-size: 1.2em;
    }
    
    /* サブタイトル */
    .post-sub{
        grid-column: 1;
        grid-row: 2;
        font-size: 1.1em;
    }
    
    /* リードテキスト */
    .post-lead{
        grid-column: 1;
        grid-row: 3;
        font-size: 0.9em;
    }
    
    /* ビルボードイメージ */
    .post-tiens-billboard-img{
        grid-column: 1;
        grid-row: 1;
        margin-left: -20px;
        margin-right: -20px;
    }
        .l-size{
        display: none;
    }
    .s-size{
		border-radius: 20px;
        display:block;
    }
    /* DETAILS OF THE WORK用のビルボード画像の設定 */
.post-billboard_works_detail-img{
    grid-column: 1/-1;
    grid-row: 3;
}
.post-billboard_works_detail-img img.s-size{
    display: block;
    border-radius: 20px;
}
.post-billboard_works_detail-img img.l-size{
    display: none;
}
    
    /* ワークス イメージ スマートフォン用　*/
    div.post-works-img{
        grid-template-columns: none;
        grid-template-rows: none;
        grid-row-gap: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }
    div.post-works-img > *,
    div.post-works-img::after{
        grid-column: auto;
        grid-row :auto;
    }
    div.post-works-img-bg{
        display:none;
        margin-left: -20px;
        margin-rignt: -20px;
    }
    
    
    /* NEWS */
    .post-news-04{
    margin-top: 0px;
}
.post-news-05{
    margin-top: 0px;
}
.post-news-06{
    margin-top: 0px;
}
    
    /* Pagenation */
    
    .post-pagenation li{
        display: inline-block;
        height:28px;
        line-height:28px;
        width:30px;
        text-align:center;
        font-size:0.5em;
        
    }
    .post-pagenation li a{
    display:block;
    padding-left:1em;
    text-decoration: none;
    text-align: center;
    font-size:1em;
}
    /* SNS */
    .post-sns{
        grid-column: 1;
        grid-row: 5;
        justify-self: center;
        align-self: center;
    }
    .post-sns ul{
        margin: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        list-style : none;
    }
    .post-sns ul li{
        display: inline-block;
    }
    .post-sns a{
        font-size: 2em;
        color : #aaa;
        text-decoration: none;
        text-align: center;
        letter-spacing: 1.0em;
    
    }
    
}