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

/*
* HEADING
******************************************************/
.post-list-heading {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: .2em;
	position: relative;
	margin: 0 0 80px 0;
}
.post-list-heading::after {
	content: '';
    width: 40px;
    height: 2px;
    display: inline-block;
    background-color: var(--color-primary);
    position: absolute;
    bottom: -5px;
    left: calc(50% - 20px);
}
/*
* CATEGORY
******************************************************/
.post-list-category {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position:relative;
	margin: 0 0 40px 0;
}
/* default icon delete */
summary {
	display: block;
}
summary::-webkit-details-marker {
	display: none;
}
/* accordion */
.post-list-category .summary_content {
	border-bottom: 1px solid var(--color-primary);
	border-right: none;
    padding: 0 0 5px 0;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 400;
}
.post-list-category .details_content {
	padding: 18px 32px 20px;
    width: 200px;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.05em;
    border: 1px solid var(--color-primary);
	position: absolute;
    top: 40px;
	right: 0;
    background: var(--bg--color-tertiary);
	z-index: 3;
}
/* accordion open animation */
details[open] .details_content {
	animation: fadeIn 0.85s ease;
  }
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	  transform: translateY(-12px);
	}
	100% {
	  opacity: 1;
	  transform: none;
	}
}
/* toggle button */
.toggle_button {
	display: block;
	position: relative;
	width: 13px;
	margin-left: 8px;
	flex-shrink: 0;
	transform-origin: center 45%;
	transition: transform 0.75s;
}
.toggle_button::before,
.toggle_button::after {
	content: "";
	position: absolute;
	display: block;
	width: 7px;
	height: 1px;
	background-color: var(--color-primary);
}
.toggle_button::before {
	left: 2px;
	transform: rotate(45deg);
}
.toggle_button::after {
	right: 0;
	transform: rotate(-45deg);
}
/* toggle open */
details[open] .toggle_button {
	transform: rotate(180deg);
}
@media screen and (min-width:714px) and (max-width:1180px) {
	.post-list-category {
		margin: 20px;
	}
}
@media screen and (max-width:714px) {
	.post-list-category {
		margin: 20px 20px 60px 20px;
	}
	.summary_content {
		font-size: 1.2rem;
	}
}
/*
* CONTENTS
******************************************************/
.post-item-list,
.blog-list {
	padding: 80px 0;
}
.post-item-list,
.post-item-content {
	background:var(--bg--color-secondary);
}
.blog-list,
.blog-content {
	background:var(--bg--color-page);
}
.post-content {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid var(--bg--color-quaternary);
}
/*
* BLOG LIST CONTENTS
******************************************************/
.ge-3col-list {
	margin: auto;
}
.ge-3col-list ul {
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
    margin: 0 auto;
}
.ge-3col-list li {
    width: calc(33% - (40px * 2) / 3);
	height: 100%;
	margin: 0 0 60px 40px;
}
.ge-3col-list li:nth-child(3n+1) {
    margin-left: 0
}
.ge-3col-list-thumb {
    position: relative;
    box-sizing: border-box;
    width: 333px;
    height: 333px;
    overflow: hidden
}
.ge-3col-list-thumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
}
@supports (object-fit: cover) {
	.ge-3col-list-thumb img {
        position:static;
        height: 100%;
        width: 100%;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        top: 0
    }
}
.ge-3col-list-desc {
	margin: 1em 0 0 0;;
}
.ge-3col-list-desc time {
	text-align: left;
    font-size: 1.3rem;
    font-weight: 400;
	line-height: 1.4;
}
.ge-3col-list-desc h3 {
	text-align: left;
    font-size: 1.3rem;
    font-weight: 400;
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.ge-3col-list-desc h3 span {
	display: block;
	text-align: left;
    font-size: 1.3rem;
    font-weight: 400;
	color:  var(--color-secondary);
}
@media screen and (min-width:714px) and (max-width:1180px) {
	.ge-3col-list {
		max-width: calc(100vw - 40px);
		padding: 0 20px;
	}
	.ge-3col-list-thumb {
		width: calc(32vw - (40px * 2) / 3);
		height: calc(32vw - (40px * 2) / 3);
	}
	.ge-3col-list-desc h3 {
		font-size: 1.3rem;
	}
}
@media screen and (max-width:714px) {
	.ge-3col-list {
		max-width: calc(100vw - 40px);
		padding: 0 20px;
	}
	.ge-3col-list li {
		width: calc(50% - 20px / 2);
		margin: 0 0 55px 20px;
	}
	.ge-3col-list li:nth-child(3n+1) {
		margin: 0 0 30px 20px;
	}
	.ge-3col-list li:nth-child(2n+1) {
		margin-left: 0
	}
	.ge-3col-list-thumb {
		width: calc(48vw - (20px * 2) / 2);
		height: calc(48vw - (20px * 2) / 2);
	}
	.ge-3col-list-desc h3 {
		font-size: 1.3rem;
	}
}

/*
* POST 2COLUMN LAYOUT
******************************************************/
.post-2col {
	display: flex;
	justify-content:space-between;
	align-items:flex-start;
	padding: 80px 20px;
}
.post-2col-heading {
	width: 300px;
	padding: 0 60px 0 0;
	position: sticky;
    top: 74px;
}
.post-2col-heading h1 {
	position: relative;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 2em 0;
}
.post-2col-heading h1:before {
	content: '';
	position: absolute;
	background-color: var(--bg--color-quaternary);
	width: 14px;
	height: 1px;
	top: 0;
	left: 0;
	display: block;
}
.post-2col-heading h1:after {
	content: '';
	position: absolute;
	background-color: var(--bg--color-quaternary);
	width: 14px;
	height: 1px;
	bottom: 0;
	left: 0;
	display: block;
}
.post-2col-heading time {
	display: block;
	padding: 2em 0 1em;
	font-size: 1.2rem;
}
.post-2col-heading p {
	display: block;
	padding: 0;
	font-size: 1.2rem;
}
.post-2col-heading p a {
	color:  var(--color-secondary);
}
.post-2col-content {
	width: calc(100% - 300px);
}
@media screen and (max-width:714px) {
	.post-2col {
		display: block;
		padding: 60px 20px;
	}
	.post-2col-heading {
		width: auto;
		padding: 0 0 60px 0;
		position: static;
	}
	.post-2col-content {
		width: auto;
	}
}
/*
* POST ITEMS LAYOUT
******************************************************/
.item-page-content {
    max-width: 1100px;
    margin: auto;
    padding: 80px 20px;
}
.post-2col-items {
	display: flex;
	justify-content: space-between;
	padding: 0 0 60px 0;
}
.post-2col-item-content {
	width: calc(60% - 40px);
	margin: 0 20px 0 0;
}
.post-2col-itemlist {
	width: calc(40% - 20px);
}
.sticky-bar {
	position: sticky;
	top:74px;
}
.item-page-heading h1 {
	font-size: 1.8rem;
	font-weight: 400;
    margin: 0 0 24px 0;
    padding: 0 0 24px 0;
	position: relative;
}
.item-page-heading h1::after {
	position: absolute;
    display: block;
    content: "";
    background-color: var(--color-secondary);
    height: 2px;
    width:12px;
    bottom: 0;
}
@media screen and (max-width:714px) {
	.item-page-content {
		max-width: inherit;
		padding: 80px 20px;
	}
	.post-2col-items {
		display: block;
	}
	.post-2col-item-content {
		width: auto;
		margin: 0 0 60px 0;
	}
	.post-2col-itemlist {
		width: auto;
	}
	.sticky-bar {
		position: static
	}
}

/*
* SINGLE
******************************************************/
.single-page-content {
	max-width: 640px;
	padding:  80px 20px;
}
.single-page-heading {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: .2em;
	position: relative;
	margin: 0 0 80px 0;
}
.single-page-heading::after {
	content: '';
    width: 40px;
    height: 2px;
    display: inline-block;
    background-color: var(--color-primary);
    position: absolute;
    bottom: -5px;
    left: calc(50% - 20px);
}
/*
* POST CONTENTS
******************************************************/
.post-content img {
	width: auto;
	max-width: 100%;
	height: auto;
}
.post-content h2 {
	font-size: 1.7rem;
	font-weight: 400;
}
.post-content h3 {
	font-size: 1.5rem;
	font-weight: 400;
}
.post-content p {
	font-size: 1.4rem;
	margin: 0 0 30px 0;
}
.post-content hr {
	margin: 30px 0;
	border-bottom: 1px solid var(--bg--color-quaternary);
}
.post-content ul,
.post-content ol {
  margin-bottom:2em;
  padding:15px 33px;
  line-height:40px
}
.post-content ol li {
  list-style-type:decimal;
  margin: 1.55em;
  line-height: 1.4;
}
.post-content p>a,
.post-content ol li>a,
.post-content ul li>a {
  text-decoration:underline!important
}
/*
* POST COMPONENT TABLE
******************************************************/
.post-content>table {
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	text-align:left;
	font-size:1.4rem;
	border-top:1px solid var(--color-secondary);
	margin: 0 0 30px 0;
}
.post-content tr th {
	background:var(--color-complementary);
	border-bottom:1px solid var(--color-secondary);
	color:var(--color-primary);
	width:40%;
	padding:15px 25px;
	text-align: left;
	vertical-align: top;
}
.post-content tr td {
	background:var(--color-complementary);
	border-bottom:1px solid var(--color-secondary);
	width:60%;
	padding:15px 15px;
	text-align: left;
}
.post-content tr th p,
.post-content tr td p {
	font-size:1.4rem;
}
.post-content table.as_3col tr th {
	width:33%
}
.post-content table.as_3col tr td {
	width:33%
}
@media screen and (max-width:600px) {
	.post-content tr th,
	.post-content tr td {
	  padding:10px 5px
	}
}
/*
* POST DECORATION
******************************************************/
.item-detail {
    padding-top: 16px;
    border-top: 1px solid var(--bg--color-quaternary);
    padding-bottom: 16px;
}

/*
* NEXT PREV
******************************************************/
.next-prev {
	padding: 2em 0;
	display: flex;
	justify-content: flex-end;
}
.next-prev-link {
	width: 200px;
	position: relative;
}
.next-prev-link ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.button-arrow-l {
	display: inline-block;
	vertical-align: middle;
	color: var(--color-secondary);
	line-height: 1;
	position: relative;
	width: 20px;
	height: 1px;
	background: currentColor;
}
.button-arrow-l::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 1px solid var(--color-secondary);
	border-right: 0;
	border-bottom: 0;
	transform: rotate(-45deg);
	transform-origin: top left;
	position: absolute;
	top: 50%;
	left: -0.05em;
	box-sizing: border-box;
}
.button-arrow-r {
	display: inline-block;
	vertical-align: middle;
	color: var(--color-secondary);
	line-height: 1;
	position: relative;
	width: 20px;
	height: 1px;
	background: currentColor;
}
.button-arrow-r::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 1px solid var(--color-secondary);
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -0.05em;
	box-sizing: border-box;
}
.next-prev-link-all {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.next-prev-link-all-text {
	display: inline-block;
	vertical-align: middle;
	color: var(--color-complementary);
	background-color: var(--bg--color-quaternary);
	line-height: 1;
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bg--color-quaternary);
	border-radius: 0.2em;
	box-sizing: content-box;
}
.next-prev-link-all-text::before,
.next-prev-link-all-text::after {
	content: '';
	position: absolute;
	top: 20%;
	left: 15%;
	height: 1px;
	background: currentColor;
	border-radius: 0.1em;
}
.next-prev-link-all-text::before {
	width: 70%;
	box-shadow: 0 0.25em 0 0 currentColor;
}
.next-prev-link-all-text::after {
	margin-top: 0.5em;
	width: 45%;
}
@media screen and (max-width:714px) {
	.next-prev-link {
		width: 150px;
		position: relative;
	}
}
/*
* RELATED
******************************************************/
.related-content {
	background: var(--bg--color-page-bottom);
	padding: 80px 20px;
}
.related-heading {
	border-bottom: 1px solid var(--bg--color-quaternary); 
    margin-bottom: 70px;
    padding-bottom: 1em;
}
.related-heading h2 {
	font-size: 1.4rem;
	letter-spacing: .2em;
	color: var(--color-primary);
}
/*
* PAGENATION
******************************************************/
.pagenation__content {
	max-width: 280px;
	margin: auto;
	margin-bottom: 10px;
	position: relative;
	height:65px;
}
.pagenation-selected__wrapper {
	display: grid;
	place-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.pagenation-selected {
	font-size: 1.5rem;
}
.pagenation-prev,
.pagenation-next {
	color: #323232;
	font-size: 1.2rem;
	padding: 3px;
}
.pagenation-prev {
	position: absolute;
	left: 24px;
	top: 19px;
}
.pagenation-prev::before{
    content: '';
  	position: absolute;
	bottom: -10px;
	right: -20px;
	width: 24px;
	height: 2px;
	background: #323232;
    transition: all .3s;
	z-index:1;
}
.pagenation-prev::after{
    content: '';
  	position: absolute;
	bottom: -8px;
	right: -3px;
	width: 8px;
	height: 2px;
	background: #323232;
    transform: rotate(-45deg);
    transition: all .3s;
}
.pagenation-next {
	position: absolute;
	right: 46px;
	top: 19px;
}
.pagenation-next::before{
    content: '';
  	position: absolute;
	bottom: -10px;
	right: -20px;
	width: 24px;
	height: 2px;
	background: #323232;
    transition: all .3s;
	z-index: 1;
}
.pagenation-next::after{
    content: '';
  	position: absolute;
	bottom: -8px;
	right: -23px;
	width: 8px;
	height: 2px;
	background: #323232;
    transform: rotate(45deg);
    transition: all .3s;
}
.pagenation-prev a,
.pagenation-next a,
.pagenation-prev a i,
.pagenation-next a i {
	color:transparent;
    z-index: 3;
    position: absolute;
}
.pagenation-prev a:hover,
.pagenation-next a:hover {
	color:transparent;
}
@media(max-width:767px) {
	.pagenation-prev {
	  position: absolute;
	  left: 20px;
	  top: 17px;
	}
	.pagenation-next {
	  position: absolute;
	  right: 20px;
	  top: 17px;
	}
}