div {
    display: block;
}

a {
    cursor: pointer;
    background-color: transparent;
    text-decoration: none;
    color: rgb(0, 0, 0);
}

a:hover {
    text-decoration: underline;
}

* {
    box-sizing: border-box;
}

/* header */

header {
    margin-bottom: 8rem;
}

.header_container {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    /*row-gap: var(--grid-gap);*/
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
    padding-bottom:calc(1 * var(--grid-margin));
}

.header_container {
    grid-template-columns: repeat(12, 1fr);
}

@media screen and (min-width:600px) {
    .header_container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr 1fr;
    }
}


@media screen and (min-width:600px) {
    .header_container {
        --grid-gap: 1.5rem;
        --grid-margin:3rem;
        padding-right:calc(1 * var(--grid-margin));
        padding-left:calc(1 * var(--grid-margin));
    }
}

/*
@media screen and (min-width:1024px) {
    .header_container {
        --grid-gap: 2rem;
    }
}
*/

.bga {
    animation: bgchange 20s ease infinite;
}

@keyframes bgchange{
    0%   {background:#ffe6e1;}/*変化させたい色*/
    25%  {background:#fdcb9e;}/*変化させたい色*/
    50%  {background:#fdcbc1;}/*変化させたい色*/
    75%  {background:#ffff8c;}/*変化させたい色*/
    90%  {background:#b2dffb;}/*変化させたい色*/
    100% {background:#ffe6e1;}/*変化させたい色*/
}

.t_item1 {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span 2;
    grid-column-end: 2;

}

.t_item2 {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: span 2;
    grid-column-end: 3;
}

.t_item3 {
    grid-row-start: 1;
    grid-column-start: 3;
    grid-row-end: span 2;
    grid-column-end: 4;
}

.t_item4 {
    grid-row-start: 1;
    grid-column-start: 4;
    grid-row-end: span 2;
    grid-column-end: 5;
}

.t_item5 {
    grid-row-start: 1;
    grid-column-start: 5;
    grid-row-end: span 2;
    grid-column-end: 6;
}

.t_item6 {
    grid-row-start: 1;
    grid-column-start: 6;
    grid-row-end: span 2;
    grid-column-end: 7;
}

.t_item7 {
    grid-row-start: 1;
    grid-column-start: 7;
    grid-row-end: span 2;
    grid-column-end: 8;
}

.t_item8 {
    grid-row-start: 1;
    grid-column-start: 8;
    grid-row-end: span 2;
    grid-column-end: 9;
}

.t_item9 {
    grid-row-start: 1;
    grid-column-start: 9;
    grid-row-end: span 2;
    grid-column-end: 10;
}

.t_item10 {
    grid-row-start: 1;
    grid-column-start: 10;
    grid-row-end: span 2;
    grid-column-end: 11;
}

.t_item11 {
    grid-row-start: 1;
    grid-column-start: 11;
    grid-row-end: span 2;
    grid-column-end: 12;
}

.t_item12 {
    grid-row-start: 1;
    grid-column-start: 12;
    grid-row-end: span 2;
    grid-column-end: 13;
}

.t_a {
    background-color: rgb(237, 238, 233);
}

.t_b {
    background-color: rgb(250, 250, 250);
}

/* titleの文字を消す */
@media screen and (max-width:599px) {
    .visible p {
        display:none;
    }
}



.blogo {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span2;
    grid-column-end: span 12;
}

.bpadding {
    padding-bottom: 1.7rem;
}

.bpadding p {
    font-size: 13px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(51,51,51);
}

/* tabのtitleの文字を小さく */
@media screen and (max-width:1024px) {
    .bpadding p {
        font-size: 6px;
    }
}

.blogo img {
    opacity: 0.9;
}


/* 第一コンテンツ */

.row1 {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 14px auto;
    width: 100%;
    max-width: 1600px;
    padding-top:calc(1 * var(--grid-margin));
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
}

.row1 {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    margin-bottom:calc(1 * var(--grid-margin));
}

main {
    width: 100%;
    display: block;
}

.container {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
    padding-bottom:calc(1 * var(--grid-margin));
}

.container {
    grid-template-columns: repeat(12, 1fr);
}

@media (min-width:0px) and (max-width:599px) {
    .container {
        column-gap: 10px;
    }
}

@media screen and (min-width:600px) {
    .container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr 1fr;
        column-gap: 14px;
    }
}


@media screen and (min-width:600px) {
    .container {
        --grid-gap: 1.5rem;
        --grid-margin:3rem;
        padding-right:calc(1 * var(--grid-margin));
        padding-left:calc(1 * var(--grid-margin));
    }
}

@media screen and (min-width:1024px) {
    .container {
        --grid-gap: 2rem;
    }
}

@media screen and (min-width:600px) {
    .grid-margin {
        padding: 0px 1.5rem;
    }
}


#left1 {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: -1;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width:600px) {
    #left1 {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: auto;
        grid-column-end: span 3;
    }
}

#left2 {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-row-end: 5;
    grid-column-end: -1;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width:600px) {
    #left2 {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: auto;
        grid-column-end: span 3;
        background-color: rgb(255, 255, 255);
    }
}

.cwrap {
    cursor: pointer;
    border-bottom: 1px solid rgb(229, 229, 229);
    padding-bottom: 1rem;
}

#center {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span 2;
    grid-column-end: -1;
    box-sizing: border-box;

    padding: 0 10px;
    background-color: rgb(255, 255, 255);

}

@media screen and (min-width:600px) {
    #center {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-row-end: span 2;
        grid-column-end: span 6;
        border-right: 1px solid rgb(229, 229, 229);
        border-left: 1px solid rgb(229, 229, 229);
    }
}

.category-item a:visited {
    text-decoration: inherit;
}

.category-item-title {
    font-size: 32px;
}

#right1 {
    grid-row-start: 5;
    grid-column-start: 1;
    grid-row-end: 6;
    grid-column-end: -1;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width:600px) {
    #right1 {
        grid-row-start: 1;
        grid-column-start: 10;
        grid-row-end: auto;
        grid-column-end: span 3;
    }
}

#right2 {
    grid-row-start: 6;
    grid-column-start: 1;
    grid-row-end: 7;
    grid-column-end: -1;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width:600px) {
    #right2 {
        grid-row-start: 2;
        grid-column-start: 10;
        grid-row-end: auto;
        grid-column-end: span 3;
    }
}


h3 {
    position: relative;
    padding-bottom: 1.5rem;
}

.s_title {
    margin-bottom:1rem ;
}

.s_title h3::after {
    content: "";
    display: block;
    padding-bottom: 1rem;
    position: absolute;
    border-bottom: 1px solid rgb(5, 125, 188);
    width: 4rem;
}

.category_title h3 {
    padding-bottom: 0;
}

/* メインコーナ(#center)wrapper */
.upper-corner {
    padding: 0rem 0px 2rem;
}

.topupper-corner {
    padding: 0rem 0px 2rem;
}

/* new post title */
.new-post-title {
    margin-bottom: 3.5rem;
    margin-top: 3rem;
}

.new-post-title {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(2 * var(--grid-margin));
    padding-left:calc(2 * var(--grid-margin));
}



.npt_container {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
}

.grid-padding {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid rgb(229, 229, 229);
    border-bottom: 1px solid rgb(229, 229, 229);
    align-items: center;
    text-align: center;
}

.bgc {
    background-color: black;
    color:rgb(255, 255, 255);
}


.row2 {
    margin-bottom: 3.5rem;
}

.row2 {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
}

/* /new post */

/*bokuralab culture*/

.row3 {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 5px;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
}

.culture-content h3 {
    font-size: 16px;
}



/*.np_container_gap {
    gap: 20px;
}*/

.np_container {
    --grid-gap: 1rem;
    --grid-margin: 1.5rem;
    display: grid;
    gap: var(--grid-gap);
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-top: calc(1 * var(--grid-margin));
    padding-right: calc(1 * var(--grid-margin));
    padding-left: calc(1 * var(--grid-margin));
}

.np_container {
    grid-template-columns: repeat(4, 1fr);
}

.np_container {
    padding-bottom: 2.5rem;
}

/*category*/

.row4 {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-top:calc(1 * var(--grid-margin));
    padding-right:calc(1 * var(--grid-margin));
    padding-left:calc(1 * var(--grid-margin));
}

.row4 {
    margin-bottom: 3.5rem;

}

.cate_container {
    --grid-gap: 1rem;
    --grid-margin: 1.5rem;
    display: grid;
    gap: var(--grid-gap);
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right: calc(1 * var(--grid-margin));
    padding-left: calc(1 * var(--grid-margin));
}

.cate_container {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(4, 1fr);
}




/*新しい投稿アイテム*/


.gridItem{
    grid-column-start: 1;
    grid-column-end: span4;
};


.np-item {
    padding-bottom: 1rem;
}

.np-item {
    grid-template-columns: repeat(3, 1fr);
}

.np-item {
    cursor: pointer;
    --grid-gap: 1rem;
    --grid-margin: 1.5rem;
    align-items: center;
    display: grid;
    border-bottom: 1px solid rgb(229, 229, 229);
    column-gap: var(--grid-gap);
}

.np_left {
    grid-column-start: 1;
    grid-column-end: -1;
}

.np_center1 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.np_center2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.np_right {
    grid-column-start: 1;
    grid-column-end: -1;
}



/*新しい投稿PC指定 */

@media screen and (min-width:600px) {
    .np_container {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media screen and (min-width:600px) {
    .np_left {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: auto;
        grid-column-end: span 3;
    }

    .np_center1 {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-row-end: auto;
        grid-column-end: span 3;
    }

    .np_center2 {
        grid-row-start: 1;
        grid-column-start: 7;
        grid-row-end: auto;
        grid-column-end: span 3;
    }

    .np_right {
        grid-row-start: 1;
        grid-column-start: 10;
        grid-row-end: auto;
        grid-column-end: span 3;
    }

    /*新しい投稿アイテム内レイアウト*/

    .np-image {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .np-content {
        grid-column-start: 2;
        grid-column-end: span2;
    }

}

/*culture*/
.culture_container {
    --grid-gap: 1rem;
    --grid-margin: 1.5rem;
    display: grid;
    gap: var(--grid-gap);
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-top: calc(1 * var(--grid-margin));
    padding-right: calc(1 * var(--grid-margin));
    padding-left: calc(1 * var(--grid-margin));
}

.culture_container {
    grid-template-columns: repeat(4, 1fr);
}

.culture_container {
    padding-bottom: 2.5rem;
}

.culture_left {
    grid-column-start: 1;
    grid-column-end: -1;
}

.culture_center {
    grid-column-start: 1;
    grid-column-end: -1;
}

.culture_section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.culture_right {
    grid-column-start: 1;
    grid-column-end: -1;
}

.culture-image {
    grid-column-start: 1;
    grid-column-end: 2;
}

.culture-content {
    grid-column-start: 2;
    grid-column-end: -1;
}

@media screen and (min-width:600px) {
    .culture_container {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
    }
}

@media screen and (min-width:600px) {
    .culture_left {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-column-end: 5;
    }

    .culture_center {
        grid-row-start: 1;
        grid-column-start: 5;
        grid-row-end: 2;
        grid-column-end: 9;
    }

    .culture_right {
        grid-row-start: 1;
        grid-column-start: 9;
        grid-row-end: 2;
        grid-column-end: 13;
    }

    .culture_section {
        gap: 5px;
    }
}


/* カテゴリー名 */
.category-item {
    font-family: WiredMono, helvetica, sans-serif;
    font-size: 11px;
    margin: 0.7rem 0 0.2rem;
}

.summary-wrap {
    position: relative;
}

.summary-wrap a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.summary {
    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS ゴシック", "MS Gothic", sans-serif;
    box-sizing: border-box;
    overflow-wrap: break-word;
    font-style: normal;
    line-height: 1.5em;
    font-size: 14px;
    font-weight: 400;
    color: rgb(51,51,51);
}

.category_title {
    margin-bottom:1rem ;
}

.cate_left {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_center1 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_center2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_right {
    grid-column-start: 1;
    grid-column-end: -1;
}

.category_title {
    margin-bottom:1rem ;
}

.cate_left_r2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_center1_r2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_center2_r2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

.cate_right_r2 {
    grid-column-start: 1;
    grid-column-end: -1;
}

@media screen and (min-width:600px) {
    .cate_container {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media screen and (min-width:600px) {
    .cate_left {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-column-end: span 3;
    }

    .cate_center1 {
        grid-row-start: 1;
        grid-column-start: 4;
        grid-row-end: 2;
        grid-column-end: span 3;
    }

    .cate_center2 {
        grid-row-start: 1;
        grid-column-start: 7;
        grid-row-end: 2;
        grid-column-end: span 3;
    }

    .cate_right {
        grid-row-start: 1;
        grid-column-start: 10;
        grid-row-end: 2;
        grid-column-end: span 3;
    }

    
    .cate_left_r2 {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: span 3;
    }

    .cate_center1_r2 {
        grid-row-start: 2;
        grid-column-start: 4;
        grid-row-end: 3;
        grid-column-end: span 3;
    }

    .cate_center2_r2 {
        grid-row-start: 2;
        grid-column-start: 7;
        grid-row-end: 3;
        grid-column-end: span 3;
    }

    .cate_right_r2 {
        grid-row-start: 2;
        grid-column-start: 10;
        grid-row-end: 3;
        grid-column-end: span 3;
    }

    /*新しい投稿アイテム内レイアウト*/

    .np-image {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .np-content {
        grid-column-start: 2;
        grid-column-end: span2;
    }
    
}



/* footer */
.footer-wapp {
    margin-top:3.5rem;
}

.footer {
    --grid-gap: 1rem;
    --grid-margin:1.5rem;
    display: grid;
    gap: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1600px;
    padding-right:calc(2 * var(--grid-margin));
    padding-left:calc(2 * var(--grid-margin));
}

.footer {
    gap: 20px 20px;
}

.footer p {
    font-size: 12px;
    padding:10px;
    text-align: center;
}


.border-box {
    box-sizing: border-box;
}

.silink {
    display: block;
    position: relative;
}

img {
    width: 100%;
}

div {
    display: block;
}