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

/* pc */
@media screen and (min-width: 641px) and (max-width: 980px) {
/*ここにpc用スタイルを記述*/
	/*contents_about AGENTページ*/
	div#contents_about .agent .odd {
		float: none;
		margin: 0 auto;
	}
	div#contents_about .agent .even {
		float: none;
		margin: 0 auto;
	}
}

@media screen and (min-width: 981px) {
/*ここにpc用スタイルを記述*/
	/*contents_about AGENTページ*/
	div#contents_about .agent .odd {
		float: left;
	}
	div#contents_about .agent .even {
		float: right;
	}
}

@media screen and (min-width: 641px) {
/*ここにpc用スタイルを記述*/

	body {
		word-wrap: break-word;
	}

	/*Cookie---------------------------*/
	.cky-btn-revisit-wrapper {
		display: none!important;
	}

	/*広告---------------------------*/
	.ad .ad_A {
		font-family: 'Century Gothic';
		font-weight: bold;
		text-align: center;
		padding-bottom: 10px;
		background: #fff;
		font-size: 0.6rem;
		line-height: 1em;
	}
	.ad .ad_B {
		font-family: 'Century Gothic';
		font-weight: bold;
		text-align: center;
		padding: 60px 0 10px;
		background: #fff;
		font-size: 0.6rem;
		line-height: 1em;
	}
	.ad a {
		display: block;
		background: url("../img/ad/ad_back.png") repeat;
		margin-bottom: 15px;
	}
	.ad .ad_pc {
		display: block;
		width: 100%;
	}
	.ad .ad_sp {
		display: none;
	}

	/*header---------------------------*/
	header#header {
		background: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		display: block;
		border-bottom: 1px solid #ccc;
		height: auto;
		overflow: hidden;
		z-index: 99;
	}
	header h1 {
		text-align: center;
		margin: 0.5em 0;
	}
	header h1 img {
		/*padding: 3px 0;*/
		padding: 0;
		/*height: 30px;*/
		height: 6vh;
		width: auto;
	}
	/*header#header2(広告Aなし)---------------------*/
	header#header2 {
		position: fixed;
		top: 0;
		width: 100%;
		margin: 0 auto;
		display: block;
		height: auto;
		overflow: hidden;
		z-index: 98;
	}
	/*header#header2(広告Aあり)---------------------*/
/*
	header#header2 {
		background: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		display: block;
		border-bottom: 1px solid #ccc;
		height: auto;
		overflow: hidden;
		z-index: 98;
	}
*/

	/*side-menu-btn---------------------*/
	.side-menu-btn {
		position: absolute;
		position: fixed;
		top: 3.9vh;
		left: 30px;
		cursor: pointer;
		display: block;
		/*float: left;*/
		height: 12px;
		width: 16px;
		z-index: 9999;
	}
	.side-menu-btn::before {
		-webkit-box-shadow: #f00 0 12px 0;
		box-shadow: #fff 0 5px 0;
		height: 2px;
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		width: 16px;
	}
	.side-menu-btn::after {
		bottom: 0;
		height: 2px;
		-webkit-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		transform-origin: left bottom;
		width: 16px;
	}
	.side-menu-btn::before,
	.side-menu-btn::after {
		background: #fff;
		display: block;
		content: '';
		position: absolute;
		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
		transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
	}
	.side-menu-btn.now::before,
	.side-menu-btn.fix::before,
	.side-menu-btn.open::before {
		box-shadow: #222 0 5px 0;
		background: #222;
	}
	.side-menu-btn.now::after,
	.side-menu-btn.fix::after,
	.side-menu-btn.open::after {
		background: #222;
	}
	
	/*new-side-menu-btn------------------- */
	.drawer-hamburger {
		padding-top: 3.4vh;
		padding-right: 1.5rem;
		padding-bottom: 3vh;
		padding-left: 1.5rem;
	}
	.drawer-hamburger-icon.now,
	.drawer-hamburger-icon.now:before,
	.drawer-hamburger-icon.now:after {
		background: #222 !important;
	}
	.drawer--left.drawer-open .drawer-hamburger-icon.now {
		background: none !important;
	}

	/*language-btn----------------------*/
	.language-btn {
		position: absolute;
		position: fixed;
		top: 3.5vh;
		right: 30px;
		display: block;
		z-index: 9999;
	}
	.language-btn a:first-child {
		margin-right: 15px;
	}
	.language-btn a.now,
	.language-btn.fix a {
		color: #222;
	}
	.language-btn.none {
		display: none;
	}
	/*language-btn a(広告Aなし)----------------------*/
	.language-btn a {
		color: #fff;
		font-size: .85rem;
		font-weight: bold;
		margin:0 0 20px 0;
		clear: both;
	}
	/*language-btn a(広告Aあり)----------------------*/
/*
	.language-btn a {
		color: #222;
		font-size: .85rem;
		font-weight: bold;
		margin:0 0 20px 0;
		clear: both;
	}
*/

	/*mainV---------------------------*/
	/*section#mainV {
		text-align: center;
		width: 100vw;
		height: 50vh;
		min-height: 285px;
		background:url(../img/mainV.jpg) no-repeat;
		background-size:cover;
		position: relative;
	}
	section#mainV img {
		margin-top: 9vh;
		left: 40vw;
		width: 20vw;
		position: absolute;
	}*/
	
	/*new mainV---------------------------*/
	section#mainV_f {
		text-align: center;
		/*width: 100vw;*/
		width: 100%;
		/*height: 50vh;*/
/*
		height: 75vh;
		min-height: 285px;
		background: url(../img/mainV.jpg) no-repeat;
		background-size:cover;
*/
		position: relative;
	}
	section#mainV_f .logo {
		position: absolute;
		top: 15px;
		right: 0;
		left: 0;
		height: 6vh;
		margin: 0 auto;
	}
	section#mainV_f .logo img {
		height: 100%;
	}
	section#mainV_f .image {
		background: #000;
		height: 75vh;
		overflow: hidden;
	}
	section#mainV_f .image img {
		width: 100%;
		height: auto;
		object-fit: fill;
	}
	section#mainV_f .image img.blackout {
		opacity: 0.8;
		display: block;
	}
	section#mainV_f .text,
	section#mainV_f .slickSlide div h3 {
		width: 60vw;
		font-size: 2vw;
		position: absolute;
		right: 0;
		top: 60vh;
		left: 0;
		margin: 0 auto;
	}
	section#mainV_f .text h3,
	section#mainV_f .slickSlide div h3 {
		line-height: 1.5em;
		text-align: center;
	}
	section#mainV_f .text h3 a,
	section#mainV_f .slickSlide div h3 a {
		color: #fff;
		font-weight: bold;
		letter-spacing: 0.03em;
	}
	
	/*contents---------------------------*/
	/*archives カテゴリの記事---------------------------*/
	div#contents,
	div#archives {
		clear: both;
		margin: 0 auto;
		max-width: 80%;
		/*max-width: 1230px;*/
		padding-left: 5%;
		position: relative;
		overflow: hidden;
	}
	
	/*archivesのみヘッダー分padding確保*/	
	div#archives {
		padding-top: 80px;
	}
	div#contents section h2,
	div#archives section h2 {
		font-family: 'Century Gothic';
		font-weight: bold;
		padding: 40px 0;
		background: #fff;
		font-size: 1.2rem;
	}
	/*div#contents section#post h3{
		font-family: 'Century Gothic';
		font-weight: bold;
		padding: 40px 0;
		background: #fff;
		font-size: 1.2rem;
	}*/
	div#contents ul.post-item li, 
	div#archives ul.post-item li {
		width: 28%;
		float: left;
		margin: 0 5% 30px 0 ;
		display: block;
		height: 25rem;
		overflow: hidden;
		/*min-height: 250px;*/
	}
	div#contents ul.post-item li p.category,
	div#archives ul.post-item li p.category {
		font-size: .8rem;
		font-family: 'Century Gothic';
		/*color: deeppink;*/
		/*color: hotpink;*/
		display: inline-block;
		float: left;
		height: 1.4rem;
		width: 50%;
	}
	div#contents ul.post-item li p.date {
		height: 1.4rem;
		font-size: .7rem;
		display: inline-block;
		color: #999;
		width: 50%;
		text-align: right;
	}
	div#archives ul.post-item li p.date {
		height: 1.4rem;
		font-size: .7rem;
		display: inline-block;
		color: #999;
		width: 100%;
		text-align: right;
	}
	div#contents ul.post-item li div.thumbnail ,
	div#archives ul.post-item li div.thumbnail {
		display: block;
		width: 99%;
		height: 150px;
		border: 1px solid #ccc;
		position: relative;
		overflow: hidden;
		margin-bottom: 10px;
		background-image: url(https://avyss-magazine.com/wp-content/themes/avyss/img/thumbnail_bg.jpg); 
		background-size: cover; 
		background-repeat: no-repeat;
	}
	div#contents ul.post-item li img,
	div#archives ul.post-item li img {
		width: 100%;
		height: auto;
		min-height: 150px;
		overflow: hidden;
		clear: both;
		object-fit: cover;
	}
	div#contents ul.post-item li h3.post_ttl,
	div#archives ul.post-item li h3.post_ttl {
		clear: both;
		font-size: 1.2rem;
		line-height: 1.8rem;
		margin: 0 0 5px 0;
		/*padding-top: 15px;*/
		font-weight: bold;
	}
	div#contents ul.post-item li h3.post_ttl,
	div#archives ul.post-item li h3.post_ttl {
		clear: both;
		font-size: 1.2rem;
		line-height: 1.8rem;
		margin: 0 0 5px 0;
		/*padding-top: 15px;*/
		font-weight: bold;
	}
	div#contents ul.post-item li p,
	div#archives ul.post-item li p {
		clear: both;
		font-size: .9rem;
		line-height: 1.4rem;
		/*font-weight: lighter;*/
	}
	input[type="checkbox"].on-off {
		display: none;
	}
	div#contents .menu ul {
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
	}
	div#contents .menu li {
	   /* padding: 5px;*/
	}
	input[type="checkbox"].on-off + ul {
		height: 0;
		overflow: hidden;
	}
	input[type="checkbox"].on-off:checked + ul {
		height: auto;
		overflow: hidden;
	}
	
	/*「続きを読む」テキスト*/
	.more-link {
		color: #999;
		font-size: .7rem
	}
	
	/*全ての記事一覧へのボタン*/	
	div#allcontents p.allcontents {
		clear:both;
		/*height: 50px;*/
		width: 500px;
		padding: 15px 0;
		background: #1a1a1a;
		color: #fff;
		display: inline-block;
		text-align: center;
		letter-spacing: 2px;
		font-size: 1rem;
	}
	div#allcontents a:hover p.allcontents {
		opacity: 0.9;
	}

	/*ページネーション*/
	div#pagenations{
		font-size: 1rem;
		color: #666 !important;
		/*font-weight: bold;*/
	}
	/*ページ番号*/	
	div#pagenations span.page-numbers,
	div#pagenations a.page-numbers {
		color: inherit;
		display: inline-block;
		margin: 0 5px;
	}
	/*アクティブなページ番号*/
	div#pagenations span.current {
		font-weight: bold;
		color: #222;
		border-bottom:4px solid #ccc;
		padding-bottom: 2px;
	}

	/*search 検索結果ページ----------------*/
	div#search-result {
		clear: both;
		margin: 0 auto;
		max-width: 80%;
		/*max-width: 1230px;*/
		padding-left: 5%;
		position: relative;
		overflow: hidden;
		padding-top: 80px;
	}
	div#search-result h2 {
		font-family: 'Century Gothic';
		font-weight: bold;
		padding: 40px 0;
		background: #fff;
		font-size: 1.2rem;
		text-align: left;
	}
	div#search-result .type-post,
	div#search-result .type-page {
		width:28%;
		float: left;
		margin: 0 5% 30px 0 ;
		display: block;
		height: 25rem;
		overflow: hidden;
		/*min-height: 250px;*/
	}
	div#search-result .type-post .date {
		height: 1.4rem;
		font-size: .7rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		color: #999;
		width: 100%;
		text-align: right;
	}
	div#search-result .type-post .date a {
		color: #999;
	}
	div#search-result .type-post .date .screen-reader-text {
		display: none;
	}
	div#search-result .type-post div.thumbnail {
		display: block;
		width: 100%;
		height: 150px;
		position: relative;
		overflow: hidden;
		margin-bottom: 10px;
		background-image: url(https://avyss-magazine.com/wp-content/themes/avyss/img/thumbnail_bg.jpg); 
		background-size:cover; 
		background-repeat: no-repeat;
	}
	div#search-result .type-post .post-thumbnail img {
		width: 100%;
		height: 150px;
		/*height: auto;*/
		/*min-height: 150px;*/
		overflow: hidden;
		clear: both;
		object-fit: cover;
	}
	div#search-result .type-post .entry-title,
	div#search-result .type-page .entry-title {
		clear: both;
		font-size: 1.2rem;
		line-height: 1.8rem;
		margin: 0 0 5px 0;
		/*padding-top: 15px;*/
		font-weight: bold;
	}
	div#search-result .type-post .entry-summary,
	div#search-result .type-page .entry-summary {
		clear: both;
		font-size: .9rem;
		line-height: 1.4rem;
		/*font-weight: lighter;*/
	}

	/*contents_post 記事の個別ページ----------------*/
	div#contents_post{
		clear: both;
		margin: 0 auto;
	/*	width: 80%;*/
		max-width: 625px;
		padding:140px 0 ;
		text-align: left;
	}
	div#contents_post h2.post_ttl {
		font-size: 2rem;
		line-height: 3rem;
		margin: 5px 0 0 0;
	}
	div#contents_post div.post_date p {
		font-size: .8rem;
		line-height: .9rem;
		margin: 10px 0 0 0;
		color: #999;
	}
	div#contents_post p.category {
		font-size: .8rem;
		margin: 30px 0 0 0;
	}
	div#contents_post p.category a {
		color: hotpink;
	}
	div#contents_post p.tag {
		font-size: .8rem;
		margin: 3px 0 0 0;
	}
	div#contents_post p.tag a {
		color: yellowgreen;
	}
	/*div#contents_post p.post_lead {
		font-size: 1rem;
		line-height: 1.8rem;
		font-weight: bold;
	}*/
	div#contents_post div.post_tx p.lead {
		/*font-weight: bolder;*/
		font-size: 1rem;
		margin-bottom: .8rem;
		font-weight: normal;
	}
	div#contents_post div.post_tx p {
		font-size: .9rem;
		line-height: 1.7rem;
		letter-spacing: 0.03rem;
		/*font-weight: lighter;*/
		margin: 0;
		clear: both;
		padding: 0;
	}
	div#contents_post div.post_tx p a {
		color: #006FBA;
		font-weight: bold;
		text-decoration: underline;
	}
	div.post_thumbnail {
		width: 100vw;
		height: 400px;
		position: relative;
		overflow: hidden;
		display: block;
		clear: both;
		background-image: url(https://avyss-magazine.com/wp-content/themes/avyss/img/thumbnail_bg.jpg); 
		background-size:cover; 
		background-repeat: no-repeat;
	}
	div.post_thumbnail img {
		width: 100%;
		height: auto;
	}
	
	/*youtube動画のみに反映*/
	div#contents_post div.post_tx div.youtube {
		width: 625px;
		height: 351.5px;
		position: relative;
		/*background: #f00;*/
		display: block;
		overflow: hidden;
		margin: 20px 0 !important;
	}
	div#contents_post div.post_tx div.youtube iframe {
		position: absolute;
		width: 100% !important;
		height: 100% !important;
		top: 0;
		left: 0;
	}
	
	/*インスタ埋め込みのみに反映*/
	div#contents_post div.post_tx iframe.instagram-media {
		margin: 20px 0  !important;
		clear: both;
		display: block;
	}
	
	/*ツイッター埋め込みのみに反映*/
	div#contents_post div.post_tx div.EmbeddedTweet-tweet {
		margin: 20px 0  !important;
		height: auto;
		clear: both;
		display: block;
		overflow: hidden;
	}
	div#contents_post div.post_tx img {
		width: 100%;
		height: auto;
		margin: 15px 0;
	}
	div#contents_post div.post_tx figure {
		width:625px;
		padding: 0;
		margin: 0;
	}
	div#contents_post div.post_tx figure img {
		max-width: 625px;
		height: auto;
		margin: 0;
		padding: 0;
	}
	div#contents_post div.post_tx figcaption {
		clear: both;
		width: 625px;
		display: inline-block;
		display: block;
		font-size: .7rem;
		line-height: 1rem;
		margin-top:10px; 
	}
	div#contents_post div#but_sns {
		width: 100%;
		float: left;
		display: block;
		margin: 20px 0;
	}
	
	/*投稿記事ページのsnsボタン*/
	div#contents_post div.post_but_facebook,
	div#contents_post div.post_but_twitter {
		margin-right:10px; 
		float: left;
		padding: 5px 10px;
		/*width: 145px;*/
		width: 100px;
		height: 20px;
		text-align: center;
	}
	div#contents_post div.post_but_facebook p,
	div#contents_post div.post_but_twitter p {
		font-family: 'Century Gothic';
		color:#fff;
		display: inline-block;
		float: left;
		margin: 0;
	}
	div#contents_post div.post_but_facebook img,
	div#contents_post div.post_but_twitter img {
		/*float: right;*/
		display: inline-block;
		width: 16px;
		height: auto;
		margin-top: 2px;
	}
	div#contents_post div.post_but_facebook {
		/*background: #315a95;*/
		background: #000000;
	}
	div#contents_post div.post_but_twitter {
		/*background: #43acea;*/
		background: #000000;
	}
	
	/*contents_about ABOUT/CONTACTページ*/
	div#contents_about {
		clear: both;
		margin: 0 auto;
		/*width: 80%;*/
		max-width: 952px;
		padding:80px 24px 0 24px;
		text-align: left;
	}
	div#contents_about .info {
		margin: 0 auto;
		width: 625px;
	}
	div#contents_about h2 {
		font-family: 'Century Gothic';
		font-weight: bold;
		padding: 60px 0 10px 0;
		background: #fff;
		font-size: 1.8rem;
	}
	div#contents_about dl dt {
		font-weight: bold;
		margin:50px 0 15px 0; 
		font-size: 1.1rem;
	}
	div#contents_about dl dd {
		font-size: .9rem;
		line-height: 1.4rem;
	}
	div#contents_about dl dd span {
		color: #666;
	}
	
	div#contents_about p {
		font-size: .9rem;
		line-height: 1.4rem;
	}
	div#contents_about dl .youtube iframe {
		width: 100%;
	}
	
	/*contents_about AGENTページ*/
	div#contents_about .agent {
		overflow: auto;
		clear: both;
		padding-bottom: 60px;
	}
	div#contents_about .agent .odd {
		width: 450px;
	}
	div#contents_about .agent .even {
		width: 450px;
	}
	div#contents_about .agent h2 {
		font-size: 30px;
		text-align: center;
		margin-bottom: 20px;
	}
	div#contents_about .agent h3 {
		font-size: 1.3rem;
		text-align: center;
		font-weight: bold;
		margin-bottom: 10px;
	}
	div#contents_about .agent p {
		clear: both;
		font-size: 0.9rem;
		line-height: 1.4rem;
		text-align: left;
	}
	div#contents_about .agent p.mail {
		text-align: center;
	}
	div#contents_about .agent .icon {
		overflow: auto;
		display: flex;
		justify-content: center;
		padding: 20px 0 30px;
	}
	div#contents_about .agent .icon li {
		float: left;
		display: flex;
		margin-right: 10px;
	}
	div#contents_about .agent .icon li:last-child {
		margin-right: 0;
	}
	div#contents_about .agent .icon li a {
		width: 14px;
		height: 14px;
		border: 2px solid #000000;
		border-radius: 16px;
	}
	div#contents_about .agent .icon li a::before {
		font-family: "Font Awesome 5 Brands";
		font-weight: 400;
		font-size: 14px;
	}
	div#contents_about .agent .icon li.youtube a {
		padding: 5px 8px 9px 6px;
	}
	div#contents_about .agent .icon li.youtube a::before {
		content: "\f167";
		color: #000000;
	}
	div#contents_about .agent .icon li.instagram a {
		padding: 5px 6px 9px 8px;
	}
	div#contents_about .agent .icon li.instagram a::before {
		content: "\f16d";
		color: #000000;
	}
	div#contents_about .agent .icon li.twitter a {
		padding: 5px 5px 9px 9px;
	}
	div#contents_about .agent .icon li.twitter a::before {
		/*content: "\f099";*/
		content: "𝕏";
		color: #000000;
	}
	div#contents_about .agent .icon li.spotify a {
		padding: 5px 7px 9px 7px;
	}
	div#contents_about .agent .icon li.spotify a::before {
		content: "\f1bc";
		color: #000000;
	}
	div#contents_about .agent .icon li.applemusic a {
		padding: 5px 5px 9px 9px;
	}
	div#contents_about .agent .icon li.applemusic a::before {
		content: "\f179";
		color: #000000;
	}
	div#contents_about .agent img {
		display: block;
		width: 367px;
		margin: 0 auto 40px;
	}
	div#contents_about .agent .mov {
		width: 100%;
		margin-top: 35px;
	}
	div#contents_about .agent .mov .youtube iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	
	/*contact form 7 コンタクトフォーム7*/
	.wpcf7-form p {
		margin-bottom: 15px;
	}
	.wpcf7-form input,
	.wpcf7-form textarea {
		margin-top: 5px;
	}
	.wpcf7-form .wpcf7-submit {
		border: none;
		background: #000;
		color: #fff;
		padding: 5px 20px;
	}
	
	
	/*similar posts-------------------------*/
	.spost_wrap {
		max-width: 80%;
		margin: 0 auto 50px;
	}
	.spost_wrap h2 {
		font-family: 'Century Gothic';
		font-size: 1.2rem;
		font-weight: bold;
		margin-bottom: 60px;
	}
	.spost_wrap .spost_inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.spost_wrap .spost_inner li {
		flex-basis: 31%;
		text-align: left;
		margin-bottom: 30px;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.spost_wrap .spost_inner li .spost_category,
	.spost_wrap .spost_inner li .spost_date {
		font-size: .7rem;
		margin-bottom: 5px;
	}
	.spost_wrap .spost_inner li .spost_thumb {
		flex-basis: 100%;
	}
	.spost_wrap .spost_inner li .spost_thumb img {
		width: 99%;
		height: 150px;
		border: 1px solid #ccc;
		object-fit: cover;
		margin-bottom: 10px;
	}
	.spost_wrap .spost_inner li .spost_title {
		flex-basis: 100%;
		height: 50px;
		display: block;
		overflow: hidden;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.4em;
		margin: 3px 0 8px;
		/*display: -webkit-box;*/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.spost_wrap .spost_inner li .spost_excerpt {
		flex-basis: 100%;
		height: 35px;
		font-size: .9rem;
		/*font-weight: lighter;*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	/*feature posts-------------------------*/
	.fpost_wrap {
		max-width: 80%;
		margin: 60px auto 0;
	}
	.fpost_wrap.index {
		padding-left: 5%;
	}
	.fpost_wrap h2 {
		font-family: 'Century Gothic';
		font-size: 1.2rem;
		font-weight: bold;
		margin-bottom: 60px;
	}
	.fpost_wrap .fpost_inner {
		display: flex;
		flex-wrap: wrap;
		/*justify-content: space-between;*/
	}
	.fpost_wrap .fpost_inner .featurelist {
		flex-basis: 31%;
		text-align: left;
		margin: 0 3.5% 30px 0;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.fpost_wrap .fpost_inner .featurelist:last-child {
		margin-right: 0;
	}
	.fpost_wrap.index .fpost_inner .featurelist {
		flex-basis: 28%;
		margin: 0 5% 30px 0;
	}
	.fpost_wrap .fpost_inner .featurelist dt {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.fpost_wrap .fpost_inner .featurelist dt .category,
	.fpost_wrap .fpost_inner .featurelist dt .date {
		font-size: .7rem;
		margin-bottom: 5px;
	}
	.fpost_wrap .fpost_inner .featurelist .image {
		width: 100%;
		height: 150px;
		border: 1px solid #ccc;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.fpost_wrap .fpost_inner .featurelist .image a img {
		width: 100%;
		height: auto;
		min-height: 150px;
		object-fit: cover;
	}
	.fpost_wrap .fpost_inner .featurelist .text {
		width: 100%;
	}
	.fpost_wrap .fpost_inner .featurelist .text h3 {
		flex-basis: 100%;
		height: 50px;
		display: block;
		overflow: hidden;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.4em;
		margin: 3px 0 8px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.fpost_wrap .fpost_inner .featurelist .text span {
		flex-basis: 100%;
		height: 35px;
		font-size: .9rem;
		/*font-weight: lighter;*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	/*popular posts-------------------------*/
	.ppost_wrap {
		max-width: 80%;
		margin: 0 auto;
	}
	.ppost_wrap h2 {
		font-family: 'Century Gothic';
		font-size: 1.2rem;
		font-weight: bold;
		margin-bottom: 60px;
	}
	.ppost_wrap .ppost_inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ppost_wrap .ppost_inner .popularlist {
		flex-basis: 31%;
		text-align: left;
		margin-bottom: 30px;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ppost_wrap .ppost_inner .popularlist dt {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ppost_wrap .ppost_inner .popularlist dt .category,
	.ppost_wrap .ppost_inner .popularlist dt .date {
		font-size: .7rem;
		margin-bottom: 5px;
	}
	.ppost_wrap .ppost_inner .popularlist .image a img {
		width: 99%;
		height: 150px;
		border: 1px solid #ccc;
		object-fit: cover;
		margin-bottom: 10px;
	}
	.ppost_wrap .ppost_inner .popularlist .text {
		width: 100%;
	}
	.ppost_wrap .ppost_inner .popularlist .text h3 {
		flex-basis: 100%;
		height: 50px;
		display: block;
		overflow: hidden;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.4em;
		margin: 3px 0 8px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.ppost_wrap .ppost_inner .popularlist .text span {
		flex-basis: 100%;
		height: 35px;
		font-size: .9rem;
		/*font-weight: lighter;*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	/*404-------------------------*/
	div#error {
		width:100vw;
		min-height:100vh;
		text-align: center;
	}
	div#error h2 {
		padding-top: 35vh;
		font-size: .8rem;
		color: #999;
		text-align: center;
	}
	
	/*footer-------------------------*/
	footer {
		clear: both;
		background: #000;
		margin:100px 0 0 0 ;
		padding:30px 0;
		color:#fff;
		z-index: 9999;
	}
	footer#footer_fix {
		width: 100%;
		position: fixed;
		vertical-align: bottom;
		bottom: 0;
	}
	footer #footer_logo {
		text-align: center;
		margin-bottom: 20px;
	}
	footer #footer_logo img {
		height: 6vh;
	}
	footer div#sns {
		display: block;
		text-align: center;
		clear: both;
		margin-bottom: 20px;
	}
	footer div#sns img {
		width: 22px;
		height: 22px;
		margin: 0 15px;
	}
	footer div#sns a:hover img {
		opacity: .8;
	}
	footer #footer_nav {
		font-family: 'Century Gothic';
		text-align: center;
		font-size: 1rem;
		margin-bottom: 20px;
		letter-spacing: 2px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	footer #footer_nav li {
		margin: 0 20px;
	}
	footer small p {
		width: 100%;
		font-family: 'Century Gothic';
		text-align: center;
		margin: 0 auto;
		letter-spacing: 1px;
	}
	footer a {
		text-decoration: none;
		color:inherit;
	}

}