@charset "UTF-8";

#pagetitle {
    .titlewrap {
        height:240px;
        display:grid;
        align-items:center;
        justify-content:center;
        box-shadow:0 -3px 6px rgba(0,0,0,.15) inset;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:cover;
        &.report {
            height:320px;
            justify-content:start;
            align-items:end;
            h1 {
                font-family: "M PLUS 1p", sans-serif;
                background-color:#FFFFFF;
                font-size:3.0rem;
                padding:.25em .66em;
                box-shadow:.3em .3em 0 #007572;
                margin-left:calc(50vw - 420px);
                transform:translateY(50%);
                &:first-letter {
                    font-size:1.5em;
                    color:#007572;
                }
            }
        }
        h1 {
            font-size:4.0rem;
            font-weight:600;
            line-height:1.3;
        }
    }
    .rank-math-breadcrumb {
        background-color:#EFEFEF;
        p {
            font-size:1.5rem;
            line-height:1.5;
            padding:.5em 0;
            width:calc(100% - 60px);
            max-width:1100px;
            margin:0 auto;
            .last {
                color:#007572;
                font-weight:600;
            }
            .separator {
                margin:0 .5em;
            }
        }
    }
}

#main {
    section {
        .wrap {
            padding:30px 0 90px;
            .contents {
                max-width:800px;
                .linkbox {
                    display:flex;
                    align-items:center;
                    justify-content:flex-end;
                    font-size:1.4rem;
                    gap:1em;
                    &.top {
                        margin-bottom:2em;
                    }
                    &.bottom {
                        padding-top:3em;
                        justify-content:center;
                    }
                    a {
                        font-family: "M PLUS 1p", sans-serif;
                        box-shadow:-3px -3px 3px rgba(0,0,0,.075),
                            4px 4px 2px rgba(0,0,0,.2);
                        height:2.4em;
                        padding:0 1em;
                        display:grid;
                        grid-template-columns:repeat(2,auto);
                        align-items:center;
                        justify-content:center;
                        grid-gap:.5em;
                        border-radius:.2em .5em;
                        span {
                            &::before {
                                color:#007572;
                            }
                        }
                    }
                }
                .goodbox {
                    padding-top:1em;
                    .good {
                        font-family: "Lato", sans-serif!important;
                        font-weight:900;
                        font-size:2rem;
                        box-shadow:-2px -2px 2px rgb(246 125 18 / 42%),
                            3px 3px 5px rgb(215 124 0 / 62%);
                        color:#ff9900;
                        font-weight:600;
                        height:2.2em;
                        width:8em;
                        padding:0 1em;
                        margin:0 auto 1em;
                        display:grid;
                        grid-template-columns:repeat(2,auto);
                        align-items:center;
                        justify-content:center;
                        grid-gap:.5em;
                        border-radius:.2em .5em;
                        &::before {
                            color:#ff9900;
                            font-size:1.2em;
                        }
                    }
                    p {
                        text-align:center;
                        color:#ff9900;
                        font-weight:600;
                    }
                }
                .date {
                    font-size:4.0rem;
                    font-weight:300;
                    color:#007572;
                    font-style:italic;
                    display:block;
                    text-align:right;
                    display: none;
                }
                h2 {
                    font-size:2.4rem;
                    font-weight:600;
                    line-height:1.3;
                    margin-bottom:1.5em;
                    padding-left:.66em;
                    position:relative;
                    &::before {
                        content:'';
                        display:block;
                        background-color:#007572;
                        width:3px;
                        height:calc(100% + 1em);
                        position:absolute;
                        left:0;
                        top:-.33em;
                        z-index:1;
                    }
                    &::after {
                        content:'';
                        display:block;
                        width:calc(100% + 2em);
                        height:3px;
                        background-color:#EFEFEF;
                        margin-top:.33em;
                        transform:translateX(-1.66em);
                    }
                }
                .title_h3 {
                    font-size: 2.0rem;
                    color:#007572;
                    font-weight: 600;
                    line-height: 1.5;
                    margin-bottom: 1em;
                    &::first-letter {
                        font-size: 1.2em;
                        color:#333333;
                    }
                }
                .title_h4 {
                    font-size: 2rem;
					line-height:1.5;
					margin-bottom:1em;
					border-left:6px solid #007572;
					padding-left:.5em;
				}
                .title_h5 {
					background-color:#EFEFEF;
                    font-size: 1.8rem;
					line-height:1.3;
					padding:.2em .5em;
					border-bottom:3px solid #007572;
					margin-bottom:1em;
				}
                .contents_inner {
                    .contbox,.contbox p {
                        font-size:1.8rem;
                        line-height:2;
                        /* text-wrap: balance; */
                    }
                    .contbox {
                        p {
                            &:not(:last-child) {
                                margin-bottom:2em;
                            }
							&.sub {
								font-size:.9em;
							}
							&.att {
								color:#ff0000;
							}
                        }
                    }
                    &:not(:last-child) {
                        margin-bottom: 2em;
                    }
                    &.imgbox,.imgbox {
                        display:grid;
						grid-gap: 1.5em;
                        &.grid_2 {
                            grid-template-columns:repeat(2,1fr);
                            grid-gap:20px;
                        }
                        .img {
                            border-radius:.33em 1.33em;
                            overflow:hidden;
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
						&:not(:last-child) {
							margin-bottom: 2em;
						}
						&.img-top {

						}
						&.img-bottom {
							.img {
								grid-area: 2/1/3/2;
							}
						}
						&.img-left {
							grid-template-columns: 30% 1fr;
						}
						&.img-right {
							grid-template-columns: 1fr 40%;
							.img {
								grid-area: 1/2/2/3;
                                width: 100%;
                                aspect-ratio: 3/4;
							}
						}
						&.grid_2 {
							grid-template-columns: repeat(2,1fr);
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
						&.grid_3 {
							grid-template-columns: repeat(3,1fr);
							grid-gap: 1em;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
						&.grid_4 {
							grid-template-columns: repeat(4,1fr);
							grid-gap: 1em;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
						&.grid_5 {
							grid-template-columns: repeat(5,1fr);
							grid-gap: .75em;
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
                    }
                }
                &.category {
                    max-width:1100px;
                    .contents_inner {
                        &.posts {
                            display:flex;
                            flex-wrap:wrap;
                            justify-content:center;
                            gap:45px;
                            .item {
                                min-height:100%;
                                width:calc(33.3% - 30px);
                                display:grid;
                                grid-template-rows:auto 1fr auto;
                                grid-template-columns:1fr;
                                font-size:1.8rem;
                                .tag {
                                    display:flex;
                                    flex-wrap:wrap;
                                    gap:.5em;
                                    font-size:.9em;
                                    margin-bottom:1em;
                                    a {
                                        color:#007572;
                                    }
                                }
                                & > a {
                                    display:grid;
                                    &:not(.btn){
                                        align-content:start;
                                    }
                                    img {
                                        display:block;
                                        width:100%;
                                        aspect-ratio:1/1;
                                        object-fit:cover;
                                        border-radius:.33em 1.33em;
                                        box-shadow:-3px -3px 3px rgba(0,0,0,.04),
                                            7px 5px 10px rgba(0,0,0,.08);
                                    }
                                    h3 {
                                        font-size:1.1em;
                                        line-height:1.3;
                                        padding:1em 0 .75em;
                                        &::before {
                                            content:'●';
                                            margin-right:.33em;
                                            font-size:.8em;
                                            color:#007572;
                                        }
                                    }
                                    p {
                                        line-height:1.6;
                                        margin-bottom:1.5em;
                                    }
                                }
                                .btn {
                                    font-size:1.6rem;
                                    letter-spacing:.25em;
                                    text-align:center;
                                    display:grid;
                                    grid-template-columns:1fr 1em;
                                    align-items:center;
                                    height:3em;
                                    padding:0 1em;
                                    border-radius:2em;
                                    width:100%;
                                    max-width:12em;
                                    margin:0 auto;
                                    box-shadow:-3px -3px 3px rgba(0,0,0,.04),
                                        7px 5px 10px rgba(0,0,0,.08);
                                    &::after {
                                        height:1em;
                                    }
                                }
                            }
                        }
                    }
                    &.activity {
                        .contents_inner {
                            &.posts {
                                .item {
                                    a {
                                        h3 {
                                            &::before {
                                                color:#FF90B7;
                                            }
                                        }
                                    }
                                    .tag {
                                        a {
                                            color:#FF90B7;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.talent {
                        .contents_inner {
                            &.posts {
                                .item {
                                    a {
                                        h3 {
                                            &::before {
                                                color:#40D5BB;
                                            }
                                        }
                                    }
                                    .tag {
                                        a {
                                            color:#40D5BB;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.column {
                        .contents_inner {
                            &.posts {
                                .item {
                                    a {
                                        h3 {
                                            &::before {
                                                color:#89B0EF;
                                            }
                                        }
                                    }
                                    .tag {
                                        a {
                                            color:#89B0EF;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.donate,.comments {
    display:grid;
    grid-template-columns:auto 1fr;
    justify-content:start;
    grid-gap:1em;
    br {
        display:none;
    }
    dt {
        span {
            margin-right:.5em;
        }
    }
    dd {
        line-height: 1.5;
    }
}

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

    #pagetitle {
        .titlewrap {
            height:200px;
            &.report {
                height:280px;
                h1 {
                    font-size:2.4rem;
                    margin-left:1em;
                }
            }
        }
    }

    #main {
        section {
            .wrap {
                .contents {
                    &.category {
                        .contents_inner {
                            &.posts {
                                gap:30px;
                                .item {
                                    width:calc(33.3% - 20px);
                                    font-size:1.7rem;                                    
                                    .btn {
                                        font-size:1.5rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

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

    #pagetitle {
        .titlewrap {
            height:120px;
            &.report {
                height:200px;
                    justify-content:center;
                h1 {
                    font-size:2.0rem;
                    margin-left:0;
                    transform:translateY(-.5em);
                }
            }
            h1 {
                font-size:2.0rem;
            }
        }
        .rank-math-breadcrumb {
            p {
                font-size:1.4rem;
                width:calc(100% - 40px);
            }
        }
    }
    #main {
        section {
            .wrap {
                padding:15px 0 60px;
                .contents {
                    .linkbox {
                        font-size:1.3rem;
                        &.top {
                            margin-bottom:2em;
                        }
                        a {
                            padding:0 .75em;
                        }
                    }
                    .goodbox {
                        .good {
                            font-size:1.8rem;
                        }
                        p {
                            font-size:min(3.73vw,1.4rem);
                        }
                    }
                    .date {
                        font-size:3.0rem;
                    }
                    h2 {
                        font-size:1.8rem;
                    }
                    .title_h3 {
                        font-size: 1.7rem;
                    }
                    .title_h4 {
                        font-size: 1.6rem;
                    }
                    .title_h5 {
                        font-size: 1.6rem;
                    }
                    .contents_inner {
                        .contbox,.contbox p {
                            font-size:1.6rem;
                        }
                        &.imgbox,.imgbox {
                            &.grid_2 {
                                grid-gap:10px;
                            }
                            .img {
                                border-radius:.25em 1em;
                                overflow:hidden;
                            }
                            &.img-right {
                                grid-template-columns: 1fr;
                                .img {
                                    grid-area: unset;
                                    width: 100%;
									max-width:60%;
									justify-self:center;
                                    aspect-ratio: 1;
                                }
                            }
                        }
                    }
                    &.category {
                        .contents_inner {
                            margin-bottom:0;
                            &.posts {
                                display:grid;
                                grid-row-gap:2em;
                                .item {
                                    display:grid;
                                    width:100%;
                                    grid-template-columns:1fr;
                                    font-size:1.6rem;
                                    &:not(:last-child) {
                                        border-bottom:2px dotted #cccccc;
                                        padding-bottom:2em;
                                    }
                                    .tag {
                                        grid-area:1/1/2/3;
                                        display:flex;
                                        flex-wrap:wrap;
                                        gap:.5em;
                                        font-size:.9em;
                                        margin-bottom:1em;
                                    }
                                    & > a {
                                        &:not(.btn){
                                            grid-template-columns:40% 1fr;
                                            grid-template-rows:auto 1fr;
                                            grid-gap:.5em 1em;
                                            margin-bottom: 20px;
                                        }
                                        img {
                                            grid-area:1/1/3/2;
                                        }
                                        h3 {
                                            grid-area:1/2/2/3;
                                            margin:0;
                                            padding:0;
                                        }
                                        p {
                                            grid-area:2/2/3/3;
                                        }
                                    }
                                    .btn {
                                        font-size:1.4rem;
                                        grid-area:3/1/4/3;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    

    .donate,.comments {
        grid-template-columns:1fr;
        margin-left:.5em;
        dd {
            margin-bottom:1em
        }
    }

}

.postid-200 {
    .linkbox {
        &.top,&.bottom {
            a {
                &:last-child {
                    display: none!important;
                }
            }
        }
    }
}

.contents.advertisement {
	.imgbox {
		gap:10px;
		.img {
		border-radius:0!important;
		box-shadow:2px 2px 6px rgba(0,0,0,.3)!important;
		}
		&:nth-child(7),&:nth-child(9) {
			width:66.6%;
			margin:0 auto;
		}
	}
}

#bnrwrap {
	display:flex;
	flex-wrap:wrap;
	gap:30px;
    margin-bottom: 60px;
    &.sponsor{
       align-items: flex-start;
       justify-content: center;
    }
	a {
		width:100%;
		box-shadow:0 3px 6px rgba(0,0,0,.33);
		&.grid-2 {
			width:66.6%;
			margin:0 auto;
		}
		&.grid-1 {
			width:calc(33.3% - 20px);
		}
	}
}

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

	.contents.advertisement {
		.imgbox {
			gap:5px!important;
		}
	}

	#bnrwrap {
		display:flex;
		flex-wrap:wrap;
		gap:20px 10px;
        margin-bottom: 20px;
		a {
			width:100%;
			box-shadow:0 3px 6px rgba(0,0,0,.33);
			&.grid-2 {
				width:66.6%;
				margin:0 auto;
			}
			&.grid-1 {
				width:calc(33.3% - 7px);
			}
		}
	}
	
}