/**********

subtitle

************/
.sub-title-example{
	background-color: #FFE200;
	font-weight: 300;	
}
.sub-title-senction h2{
	text-align: center;
	padding-bottom: 24px;
	color: #898989;
	font-weight: 400;
	font-size: 26px;
}
.sub-title-senction{
	padding: 40px 0;
}
.topAll{
	display: flex;
    justify-content: space-between;
}
.topAll > *{
    vertical-align: middle;
}
.topRight{
    background:linear-gradient(to top left, rgba(255,255,255,0) 50%, #E5DFC8 50.5%) no-repeat top left/100% 100%;
	width: 120px;
    height: 100px;
}
.topLeft{
    background:linear-gradient(to top right, rgba(255,255,255,0) 50%, #E5DFC8 50.5%) no-repeat top right/100% 100%;
	width: 120px;
    height: 100px;
}
.topMiddle{
    width: calc(100vw - 90px - 90px);
    height: 120px;
}
.example-archive-sp{
	display: none;
}

/**********

post

************/
.example-single-post .thumb-desc.thumb-right .thumb {
    float: right;
    margin-left: 28px;
    margin-bottom: 10px;
}
.example-single-post li::before {
	margin-right: 6px;
}
.example-single-post .thumb-desc.thumb-left .thumb {
    float: left;
    margin-right: 28px;
    margin-bottom: 10px;
}

.example-single-post .thumb-desc.thumb-right .desc {
    padding: 0 !important;
}

.example-single-post .thumb-desc .thumb {
	width: 250px;
	display: flex;
	align-items: center;
    clear: none;
}

.example-single-post .thumb-desc:after {
    content: "";
    display: block;
    clear: both;
}

.example-single-post .columns.col-2 .col {
    display: block;
    float: left;
    width: 48%;
    margin: 10px 1%;
}

.example-single-post .columns.col-2 .col img {
    max-width: 100%;
    height: auto;
}

.example-single-post .desc table {
    border-collapse: collapse;
    border: 2px solid #14AAA2;
    min-height: 100px;
    position: relative;
}
.example-single-post .desc table:last-child {
	margin-bottom: 60px;
}
.example-single-post .desc table+p {
    margin: 20px 0;
    color: transparent;
}

.example-single-post .desc table+p b {
    display: none;
}

.example-single-post .desc table+p::before {
    content: '';
    display: block;
    width: 12px;
    height: 36px;
    background-color: #14AAA2;
    margin: 0 auto;
}

.example-single-post .desc table+p::after {
    content: '';
    bottom: -20px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #14AAA2 transparent transparent transparent;
    margin: 0 auto;
}
.example-single-post .desc table:first-child {
    margin-top: 30px;
}
.example-single-post .desc td {
	padding: 0 20px;
	text-indent: 0;
}
.example-single-post .desc td:first-child {
    width: 180px;
    color: #fff;
}

.example-single-post .desc ul.list-dotted li{
	list-style-type: disc;
	list-style-position: inside;
}

.example-section-title {
    text-align: center;
}
.example-section-title h2,
.example-section-title p {
    color: #6BB84E;
}
.example-single-post > p,
.example-single-post > .desc {
    margin-bottom: 20px;
}
.example-section-title p.post{
	color: #000000;
	font-weight: 500;
}
.example-section-title h2{
	font-size: 36px;
}
.example-section-title hr{
	margin: 0 auto;
    border: #6BB84E 1px solid;
    width: 22%;
    margin:0 auto;
}
.example-section-post-box-img{
	height: auto;
}
.example-section{
	background-color: #F9F6E9;
	padding: 40px 0;
}
.example-section-post{
	width: 980px;
    max-width: 1280px;
	margin: 51px auto;
}
.example-section-post-box{
	display: flex;
	border-bottom: 1px #000000 dotted;
	padding: 0 0 48px 0;
}
.example-section .example-section-post:nth-child(4) .example-section-post-box{
	border-bottom: none;
}
.example-section-post-box-txt{
	padding-left: 24px;
	font-size: 16px;
	font-weight: 200;
}
.single-post-title span{
	color: #ffffff;
	padding: 8px;
	margin-right: 8px;
}
.example-section-post-box-txt span{
	padding: 6px 8px;
    margin-right: 8px;
    font-size: 14px;
    color: #ffffff;
}
.example-section-category-box > a {
    display: flex;
    align-items: center;
}
.example-section-category-box > a img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.example-section-category-box > a:hover img {
	opacity: 0.7;
}

.example-section-category-box-txt span.day,
.example-section-post-box-txt span.day,
.single-post-title-labels-gene span.day{
	color: #000000;
}
.example-section-post-box-txt p{
	padding-bottom: 16px;
}
.example-section-post-box-txt span.singing,
.example-section-category-box-txt span.singing,
.single-post-title span.singing{
	background-color: #5B9FD8;
}
.example-section-post-box-txt span.composition,
.example-section-category-box-txt span.composition,
.single-post-title span.composition{
	background-color: #A192C6;
}
.example-section-post-box-txt span.instruments,
.example-section-category-box-txt span.instruments,
.single-post-title span.instruments{
	background-color: #FC98BF;
}
.example-section-post-box-txt span.elementary-school,
.example-section-category-box-txt span.elementary-school,
.single-post-title span.elementary-school{
	background-color: #AFD642;
}
.example-section-post-box-txt span.junior-high-school,
.example-section-category-box-txt span.junior-high-school,
.single-post-title span.junior-high-school{
	background-color: #4DBFB9;
}
.example-archive-item{
	display: flex;
	margin:1px auto 48px auto;
    justify-content: space-between;	
	width: 880px;
    max-width: 880px
}
.example-section-post-box-txt h3 a{
	color: #150202;
	font-weight: bold;
}
.example-section-post-box-txt h3 a:hover{
	text-decoration: underline;
}
.example-archive-item-list{
	margin-right: 0;
}
.archiveItemIcon{
	display: block;
}

.example-section-title{
	justify-content: space-between;	
	width: 960px;
    max-width: 1280px;
    margin:0 auto;	
}
.archiveItemSmallIcon{
	width: 75px;
	display: block;
    margin:0 auto 12px auto;	
}
.example-section-post-box .example-section-post-box-txt h3{
	font-size: 16px;
}
.example-section-post-box .example-section-post-box-txt p{
	padding-top: 10px;
    font-size: 14px;
}
.example-section-title p{
	text-align: center;
}
.example-section-title span{
	font-size: 24px;
}
.example-section-title-line{
	width: 180px;
    text-align: center;
    margin: 0 auto;
}
.line-make{
    border: solid #A192C6;
}
.line-middle{
    border: solid #4DBFB9;
}
.line-song{
    border: solid #5B9FD8;
}
.line-element{
    border: solid #AFD642;
}
.line-instrument{
    border: solid #FC98BF;
}
.example-section-category-box-txt{
	margin-top: 12px;
}
.example-section-post-box-img img{
	width: 250px;
	height: auto;
}

.example-section-post-box-img a:hover img{
	opacity: 0.7;
}
p.thumb img{
	width: 100%;
	height: auto;
}
/**********

single

************/

.example-section-category {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.st-single__title {
	display: flex;
	flex-direction: column;
}
.st-single__title h2 {
	font-size: 40px;
}
.st-single__subtitle {
	display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}
.st-single__subtitle p {
    order: -1;
    font-size: 28px;
    padding: 0 !important;
    color: #6BB84E;
    text-align: center;
    width: 100%;
}
@media all and (-ms-high-contrast: none) and (max-width: 980px){
	.example-section-category{
        -ms-grid-columns:48vw 48vw;
    }   
}
.example-section-category-box{
	padding: 24px;
    background-color: #ffffff;
    margin-bottom: 24px;
    width: 48%;
    box-sizing: border-box;
}
.example-section-category-box-txt span{
	color: #ffffff;
	padding: 8px;
	margin-right: 8px;
}
.example-section-category-box-txt h4{
	color: #6BB84E;
}
.example-section-category-box-txt p{
	font-weight: 200;
	padding: 12px 0;
}
.example-section-category-box-txt p.post-time{
	line-height: 2.2em;
}
/**********

single-post-list

************/
.example-section-singlepost{
	width: 960px;
    max-width: 1280px;
    margin: 48px auto;
    background-color: #ffffff;
}
.single-post-title {
	order: -1;
}
.single-post-title h2{
	text-align: center;
}
.example-section-category-box-txt a{
	color: #6BB84E;
}

.example-section-category-box-txt a:hover{
	text-decoration: underline;
}

.example-section-singlepost p img{
	width: 100% !important;
	height: auto;
}
/**********

single-post

************/
.example-single-post h4{
	color: #F47922;
}
.example-single-post a{
	color: #6BB84E;
}
.single-post-title ul li a{
	color: #6BB84E;
	border:1px solid #6BB84E;
	border-radius: 18px;
    padding: 8px;
}
.single-post-title-labels-tags ul li{
	border:1px solid #6BB84E;
	border-radius: 22px;
    padding: 2px 8px;
    margin-right: 6px;	
	color: #6BB84E;
	font-size: 14px;    
}
.title-labels-tags ul{
	display: inline-flex;
}
.title-labels-tags ul li{
	border:1px solid #6BB84E;
	border-radius: 22px;
    padding: 2px 8px;
    margin-right: 6px;
}
.title-labels-tags ul li{
	color: #6BB84E;
	font-size: 14px;
}
.single-post-title-labels{
	display: flex;
	margin-top: 12px;
	justify-content: space-between;
}
.single-post-title-labels-all{
	display: flex;
}
.example-single-post{
	padding: 24px;
}
.pdf-link a{
	display: block;
    background-color: red;
    color: #fff;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 24px;
    line-height: 18px;
}
.example-single-post .single-post-title p.single-post-title-day{
	padding: 0;
}
.example-single-post h3{
	padding-top: 12px;
	color: #14AAA2;
}
.example-single-post table caption{
    text-align: left;
}
.single-post-title h2 {
    text-align: center;
    padding-top: 12px;
}
.single-post-title h2{
	text-align: center;
	padding-top: 12px;
}
.example-single-post h1{
	font-size: 28px;
	color: #6BB84E;
	margin-bottom: 50px;
}
.example-single-post h1{
	clear: both;
	/* padding-top: 50px;
	margin-top: 50px; */
	/* border-top: solid 1px #C9C9C7; */
}

/** text **/
.example-single-post p,.desc{
	/* padding: 24px 0; */
	font-weight: 200;
	line-height: 30px;
	/* text-indent: 1em; */
}

/** table **/

.example-single-post table caption{
	text-align: left;
}


/** floating thumbnail **/
.example-single-post .thumb-desc.thumb-right .thumb {
	float: right;
	width: 250px;
}
.example-single-post .thumb-desc.thumb-left .thumb {
	float: left;
	width: 250px;
	margin-right: 28px;
}

.example-single-post .columns {
	width: 100%;
	zoom: 1;
	overflow: hidden;
	display: inline-block;
}

.example-single-post .columns.col-2 .col {
	display: block;
	float: left;
	width: 48%;
	margin: 10px 1%;
}

.example-single-post .columns.col-2 .col img{
	width: 100%;
	height: auto;
}

/** for smartphone **/
@media screen and (max-width: 680px) {
	.example-single-post .thumb-desc.thumb-right .thumb {
		float: none;
		width: 100%;
	}
	.example-single-post .thumb-desc.thumb-left .thumb {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.example-single-post .columns.col-2 .col {
		width: 100%;
	}
	
}


/** iframe **/
/** for smartphone **/
@media screen and (max-width: 680px) {
	.example-single-post iframe{
		width: 100%;
	}
	.example-single-post .desc td {
		padding: 3.8vw;
		font-size: 3.2vw;
	}
	.example-single-post .desc td:first-child {
		width: auto;
		color: #fff;
	}
	.example-single-post .desc td:nth-child(2) {
		width: 24%;
	}
	.example-single-post .desc td:last-child {
		width: 40%;
	}
}

.box{
	background-color: #F1F4E7;
	padding: 24px;
	margin: 24px 0;
}
.box h2{
	font-size: 22px;
	color: #6BB84E;
}
.box .desc{
	font-weight: 200;
}
.box p, .box .desc {
	text-indent: 0;
}

.thumb-desc-teacher{
	display: flex;
}
.thumb-desc-teacher .desc{
	padding-left: 24px;
}
.thumb-desc p.thumb img,
.thumb-desc .thumb img{
	object-fit: cover;
	width: 100% !important;
	height: auto;
}
.example-single-post p img{
	width: 100% !important;	
	height: auto;
}
.box-resciption h2{
	color: #F47922;
	font-size: 22px;
	border-bottom: 1px solid #B5B5B5;
}
.box-resciption{
	background-color: #FFFBCB;
	padding: 24px;
}
.box-resciption p{
	font-weight: 200;
}
.musicbox{
	padding: 24px 0;
}
.example-single-post hr{
	margin: 50px 0;
	border-top: #C9C9C7;
}
.single-post-title-labels-tags ul{
	display: flex;
}
.single-post-title-labels-tags ul li{
	padding-right: 12px;
}
.pdfIcon{
	vertical-align: bottom;
	margin-right: 4px;
}
.new-icon{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 8px;
    background-color: red;
    margin-left: 5px;
    margin-top: 5px;
    position: absolute;
}
.new-icon-post{
	margin-left: -8px;
    margin-top: -8px;
}
.new-txt{
	color: #ffffff;
	font-size: 11px;
	font-weight: 500;
}
.post-bigImg{
	width: 420px;
}
/****************

pager

**********************/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px;
    padding: 12px 4px;
    border: 1px solid #6BB84E;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    border-radius: 6px;
    font-size: 18px;
	font-weight: 500;
}

/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    color: #fff;
    border-color: #6BB84E;
    background-color: #6BB84E;
}
.pagination a{
	color: #6BB84E;
}
/* 前へ */
.pagination a.prev {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}
@media screen and (max-width: 980px) {
	.example-section-post,
	.example-archive-item,
	.example-section-title,
	.example-section-singlepost{
		width: 100%;
		justify-content: center;
	}
	.example-section-category {
		width: 100%;
	}
	.example-section-post-box{
		padding: 2.1vw;
	}
	.example-archive-item-list {
    	margin-right: 4.2vw;
	}
	.archiveItemIcon {
	    width: 15vw;
	}
	.example-section-post-box-img {
	    width: 40vw;
	    height: auto;
	}
	.example-section-post-box-txt{
		width: 50vw;
	}
	.example-section-post-box-img img{
		width: 40vw;
	}
	.title-labels-tags ul li a{
		font-size: 1.6vw;
	}
	.post-bigImg{
		width: 40vw;
	}		
}

@media screen and (max-width: 680px) {
	.topRight, .topLeft{
    	width: 12vw;
    	height: 10vw;
	}
	.example-section-title h2{
		font-size: 8vw;
	}
	.example-section-title p{
		font-size: 5vw;
	}
	.example-section-category{
		display: block;
	}
	.example-section-category-box {
	    padding: 2.1vw;
		margin: 4.2vw auto;
		width: 92%;
	}	
	.example-section-post-box-img {
	    width: 40vw;
	    height: auto;
	}
	.example-section-post-box-img img{
		width: 40vw;
	}
	.example-archive{
		display: none;
	}
	.example-archive-sp{
		display: block;
		margin-top: -10vw;
	}
	.sub-title-senction {
    	padding: 5vw 0;
	}
	.st-single__subtitle h2 {
		font-size: 5.4vw !important;
	}
	.st-single__subtitle p {
		font-size: 4.26666vw !important;
	}	
	.example-archive-item{
		display: flex;
		margin: 4.2vw auto;
		justify-content: center;
	}
	.archiveItemIcon {
	    width: 28vw;
	}
	.example-archive-item-list{
		margin: 0 2.1vw;
	}
	.example-section {
	    padding: 6.4vw 0;
	}
	.example-section-post{
		margin: 6.4vw auto 0 auto;
	}
	.example-section-post-box{
		display: block;
	}
	.example-section-post-box-txt{
		padding: 2.1vw;
	}
	.example-section-post-box .example-section-post-box-txt h3{
		padding-top: 2.1vw;
	}
	.example-section-post-box-txt span{
		padding: 0.8vw;
	}
	.example-section-post-box-txt span {
	    padding: 0.8vw;
	    font-size: 3.2vw;
	}
	.example-section-post-box-img img{
		width: 90vw;
	}
	.example-section-post-box-img {
	    width: 90vw;
	    height: auto;
	    margin: 0 auto;
	}
	.example-section-post-box-txt {
	    padding: 0 4.2vw 0 4.2vw;
	    font-size: 2.1vw;
	    width: 80vw;
	    margin: 0 auto;
	}
	.example-single-post h2, h3 {
	    font-size: 4.5vw;
	    margin-bottom: 5.3333vw;
	}
	.example-single-post div {
		font-size: 3.8vw;
	}
	.example-single-post p, .desc {
	    font-weight: 200;
	    line-height: 6.4vw;
	    font-size: 3.2vw;
	}
	.example-single-post p, .desc ul.list-dotted li{
		list-style-type: disc;
	}
	@media all and (-ms-high-contrast: none) {
		.example-single-post p, .desc ul.list-dotted li{		
			margin-left:12px;
		}
	}
	.example-single-post h1 {
	    font-size: 4.8vw;
	    margin-bottom: 5.3333vw;
	}
	.thumb-desc-teacher{
		display: block;
	}
	.thumb-desc-teacher .desc{
		padding: 0;
	}
	.box{
		padding: 3.2vw;
	}
	.title-labels-tags ul li a{
		font-size: 2.1vw;
	}
	.title-labels-tags ul li{
		line-height: 4.2vw;
	}
	.single-post-title-labels-all{
		display: block;
	}
	.single-post-title-labels-tags ul{
		margin-top: 2.8vw;
	}
	.single-post-title-labels-tags ul li{
		font-size: 2.1vw;
	}
	.single-post-title-labels-gene span{
		font-size: 2.1vw;
	}
	.pdf-link a{
		font-size: 2.4vw;
	}
	.new-icon{
		margin-left: 3.8vw;
		margin-top: 1.8vw;
	}
	.post-bigImg{
		width: 87vw;
	}
	.new-icon-post{
		margin-left: -2.1vw;
    	margin-top: -2.1vw;
	}
	.sub-title-senction h2{
		font-size: 5vw;
	}
    .size-full {
        width: 100%;
    }
    .box {
        border-radius: 5px;
        padding: 10.6666vw 3.8vw 8vw;
    }
    .box h2{
        font-size: 4.8vw;
    }
    .box .desc {
        padding-bottom: 0;
    }
    .box .desc p {
        padding-bottom: 0;
    }
    .title-labels-tags ul li a {
        font-size: 2.1vw;
    }
    .title-labels-tags ul li {
        line-height: 4.2vw;
    }
    .example-single-post .thumb-desc.thumb-right .thumb {
        float: none;
        margin: 0 0 2.6666vw 0;
    }
    .example-single-post .thumb-desc.thumb-left .thumb {
        float: none;
        margin: 0 0 2.6666vw 0;
    }
    .example-single-post .thumb-desc .thumb {
        width: auto;
    }
    .st-single__subtitle {
        margin-top: 16vw;
    }
    .single-post-title {
        display: flex;
        align-items: center;
    }
    .example-single-post hr {
        margin: 13.3333vw 0;
    }
    .example-single-post .single-post-title p.single-post-title-day {
        margin-right: 2.6666vw;
        flex-shrink: 0;
    }
    .single-post-title-labels {
        margin-top: 0;
        align-items: center;
        width: 100%;
    }
    .single-post-title-labels-tags {
        position: absolute;
        left: 24px;
    }
    .single-post-title-labels-all {
        display: block;
    }
    .single-post-title-labels-tags ul {
        margin-top: 4.8vw;
    }
    .single-post-title-labels-tags ul li {
        font-size: 2.1vw;
    }
    .single-post-title-labels-gene span {
        font-size: 2.1vw;
    }
    .pdf-link a {
        font-size: 2.4vw;
        display: flex;
        align-items: center;
        width: 32vw;
        justify-content: center;
    }
    .new-icon {
        margin-left: 3.8vw;
        margin-top: 1.8vw;
    }
    .post-bigImg {
        width: 87vw;
    }
    .new-icon-post {
        margin-left: -2.1vw;
        margin-top: -2.1vw;
    }
    .sub-title-senction h2 {
        font-size: 5vw;
    }
    iframe {
        width: 100%;
        height: 56.25vw;
    }
}