/*!
Theme Name: noct_base
Description: Description
Version: 1.0.0
Text Doarticle: noct_base
*/

/*
ノクト基本設定
*/

/************************************
** スクロールバー設定）
************************************/
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	margin: 0;
	background-color: rgba(0, 70, 100, 0.3);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0, 70, 100, 0.6);
	border-radius: 10px;
	cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}


/************************************
** article設定）
************************************/
article{

	& h3{
		position: relative;
		padding: 0.5em 0.75em;
	}
	& h4,
	& h5,
	& h6 {
		position: relative;
		padding: 0.5em 0.75em;
		margin: 0 0 0.25em 0;
	}
	& h3::before,
	& h4::before,
	& h5::before,
	& h6::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 6px;
		height: 70%;
		margin: auto 0;
		border-radius: 3px;
		background-color: #222;
	}
	& h5::before,
	& h6::before{
		width: 4px;
		height: 50%;
	}

	& p{
		font-size: 16px;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	& hr{
		margin: 4em 0;
	}
	& p + h1,
	& p + h2,
	& p + h3,
	& p + h4,
	& p + h5,
	& p + h6 {
		margin: 2.4em 0 0.5em 0;
	}
	
	& dl {
		margin: 0 0 1.6em 0;
		list-style: none;
	}
	& dd {
		margin-left: 2.4em;
	}
	& ul,
	& ol {
		margin: 0 0 1.6em 0;
		padding-left: 1.6em;
		list-style: none;
	}
	& ul li,
	& ol li{
		margin-bottom: 1.6em;
	}
	
	& ul li {
		list-style-type: disc;
		list-style-position: outside;
	}
	& ol li{
		list-style: decimal;
		list-style-position: outside;
	}
	& table ul li,
	& table ol li{
		margin-left: 0;
	}
	& ul li:last-child,
	& ol li:last-child {
		margin-bottom: 0;
	}
	& ul ul,
	& ul ol,
	& ol ul,
	& ol ol{
		padding-left: 1.5em;
	}
	
	& div.sns__container + blockquote,
	& p + ul.flex-list,
	& div + img,
	& div + picture,
	& div + p,
	& p + div,
	& p + h2,
	& ul + h2,
	& ol + h2,
	& table + h2,
	& div + h2,
	& pre + h2,
	& blockquote + h2,
	& img + h2,
	& picture + h2,
	& noscript + h2,
	& iframe + h2,
	& script + h2,
	& ul + ins,
	& ol + ins,
	& p + ins,
	& table + ins,
	& div + ins,
	& pre + ins,
	& blockquote + ins,
	& img + ins,
	& picture + ins,
	& iframe + ins {
		margin-top: 4em;
	}
	& div.ez-toc-container + h2{
		margin-top: 6em;
	}
	
	& blockquote + img,
	& blockquote + picture,
	& script + ul,
	& script + ol,
	& script + table,
	& script + h3,
	& script + h4,
	& script + h5,
	& p + ul,
	& p + ol,
	& p + table,
	& p + h3,
	& pre + ul,
	& pre + ol,
	& ul + h3,
	& ol + h3,
	& table + h3,
	& div + h3,
	& pre + h3,
	& blockquote + h3,
	& img + h3,
	& picture + h3,
	& noscript + h3,
	& p + h4,
	& ul + h4,
	& ol + h4,
	& table + h4,
	& div + h4,
	& pre + h4,
	& blockquote + h4,
	& img + h4,
	& picture + h4,
	& noscript + h4,
	& p + h5,
	& ul + h5,
	& ol + h5,
	& table + h5,
	& div + h5,
	& pre + h5,
	& blockquote + h5,
	& img + h5,
	& picture + h5,
	& noscript + h5 {
		margin-top: 2.4em;
	}
	& code + p,
	& pre + p,
	& p + img,
	& p + picture {
		margin-top: 1.6em;
	}
	& img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto 1.6em auto;
	}
	
	& iframe{
		margin: 0 0 1.6em 0;
	}
}

@media screen and (max-width: 800px) {
	article h2::before{
		bottom: -3px;
	}
}


p:last-child,
div:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
ul li:last-child,
ol li:last-child,
dl li:last-child,
table:last-child,
article p:last-child,
article div:last-child,
article ul:last-child,
article ol:last-child,
article dl:last-child,
article ul li:last-child,
article ol li:last-child,
article dl li:last-child,
article table:last-child {
	margin-bottom: 0;
}

.margin-top-0{
	margin-top: 0;
}

/************************************
** 吹きだし
************************************/
div.talk{
	position: relative;
	padding: 0 0 0 120px;
	margin: 0 0 2.4em 0;

	& p{
		position: relative;
		padding: 1.6em;
		border: 5px solid #eee;
		background-color: #fff;
		border-radius: 10px;
		box-sizing: border-box;
	}

	& p::before {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: -30px;
		bottom: 0;
		height: 0;
		margin: auto 0;
		border: 15px solid transparent;
		border-right: 15px solid #eee;
	}
}
div.talk::before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100px;
	height: 100px;
	margin: auto 0;
	border-radius: 50%;
	background-size: cover;
}
div.talk::after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100px;
	height: 15px;
	padding-top: 115px;
	margin: auto 0;
	line-height: 15px;
	white-space: nowrap;
	font-size: 10px;
	text-align: center;
}
div.talk.right{
	padding: 0 120px 0 0;

	& p::before {
		display: block;
		position: absolute;
		left: initial;
		right: -30px;
		border: 15px solid transparent;
		border-left: 15px solid #eee;
	}
}
div.talk.right::before{
	left: initial;
	right: 0;
}
div.talk.right::after {
	left: initial;
	right: 0;
}
@media screen and (max-width: 800px) {
	article p{
		font-size: 15px;
	}
	div.talk{
		position: relative;
		padding: 0 0 0 120px;
		margin: 0 0 2.4em 0;
	
		& p{
			position: relative;
			padding: 1.6em;
		}
	}
}

/************************************
** ソースコード
************************************/
code{
	background: #eee;
	padding: 0.3em;
	color: #222;
	margin: 0 0.25em;
	font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
	font-size: 14.4px;
	word-break : break-all;
	white-space: nowrap;
}
pre code{
	background: initial;
	padding: initial;
	color: #ccc;
	margin: initial;
	font-size: 14.4px;
	word-break : break-all;
	white-space: pre;
}
code.kb-btn {
	border-radius: 4px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #bbb;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #aaa;
}
pre {
	background-color: #f3f4f5;
	border: 1px solid #ccc;
	overflow: auto;
	padding: 10px;
	margin: 1em 0;
}
article :not(pre) > code[class*="language-"],
article pre[class*="language-"]{
	padding: 1.6em;
	margin: var(--margin-base4);
	margin-bottom: 1.6em;
	border: none;
	background: #364549;
	color: #e3e3e3;
	font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
	line-height: 1.8;
}
article pre[class*="language-"] code{
	font-size: 14.4px;
}
article pre .katex-container{
	color: #000;
}


/************************************
** sns
************************************/
.sns__container {
    display: flex;
}

.sns__container a {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0;
	text-decoration: none;

	&::before{
		font-family: FontAwesome;
		font-size: 21px;
		color: #fff;
	}
}

.sns__container a:hover {
    opacity: 0.6;
}

.sns__twitter {
    background: #000;
	
	&::before{
		content: "\e61b";
	}
}

.sns__facebook {
    background: #3b5998;

	&::before{
		content: "\f09a";
	}
}

.sns__line {
    background: #1dcd00;

	&::before{
		content: "\f3c0";
	}
}

.sns__hatena {
    background: #00a5de;

	&::before{
		content: "B!";
		font-weight: bold;
	}
}
  
/************************************
** ページネーション
************************************/
nav.pagination{
	margin: -2.4em 0 0 0;

	& div.nav-links{
		display: flex;
		padding: 0 0 2.4em 0;
		margin: 0 auto;
		justify-content: center;

		& .page-numbers{
			color: #333;
			text-decoration: none;
			display: inline-block;
			height: 40px;
			width: 40px;
			margin: 0 0.5em;
			line-height: 40px;
			text-align: center;
			display: inline-flex;
			justify-content: center;
			border-radius: 50%;
			background-color: #f9f9f9;
			border: none;
			font-size: 16px;
			font-family: var(--fontfamily-sub);
			font-weight: var(--fontweight-sub);
		}

		& .prev::before{
			content: "\f060";
			font-family: FontAwesome;
		}
		& .next::before{
			content: "\f061";
			font-family: FontAwesome;
		}

		& .page-numbers:hover,
		.current{
			background-color: #000;
			color: #fff;
		}

	}
}

/************************************
** サイドメニュー設定）
************************************/
#overlay{
	opacity: 0;
	transition: opacity 1s;
}
body.overlay #overlay{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	content: "";
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	opacity: 1;
	z-index: 2147483600
}
#secondary-menu-bt{
	position: fixed;
    display: none;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 2147483646;
    line-height: 80px;
    text-align: center;
    font-family: FontAwesome;
    transition: all 0.5s ease-in;
    overflow: hidden;
    background-color: #000;
    color: #fff;
}
#secondary-menu-bt:before {
	content: "\f0c9";
}
#secondary-menu-bt.close {
	right: 307px;
	width: 40px;
	height: 40px;
	margin-top: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #000;
	line-height: 40px;
}
#secondary-menu-bt.close:before {
	content: "\f00d";
}

#secondary-menu{
	display: block;
	position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    box-sizing: border-box;
	background-color: #fff;
	z-index: 2147483646;
	transition: width 1s;
	overflow: hidden;

	& div.secondary-menu{
		width: 302px;
		height: 100%;
		padding: 1em;
		overflow: auto;
		box-sizing: border-box;
		transition: transform 1s;
		transform: translateX(100%);

		& ul{
			
			padding: 0 0 1em 1em;

			& li{

				& a{
					display: block;
					margin: 0 0 0.5em 0;
					font-family: var(--fontfamily-head);
					font-weight: var(--fontweight-head);
					color: #222;
					text-decoration: none;
					transition: transform 1s;
				}
				& a:hover{
					transform: translateX(1em);
				}
				& a:before {
					content: "\f138";
					margin-right: 0.25em;
					font-size: 12px;
					font-family: FontAwesome;
				}
			}
		}
	}

	& div.secondary-menu::before {
		position: static;
		content: "";
		display: block;
		width: 90%;
		height: 0;
		padding: 45% 0 0 0;
		margin: 5%;
		background-color: #fff;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		box-sizing: border-box;
		opacity: 1;
		border-bottom: 1px solid #eee;
		cursor: auto;
	}
}
#secondary-menu.open{
	width: 302px;
	
	& div.secondary-menu{
		transform: translateX(0);
	}
}
@media only screen and (max-width: 1200px) {
	#secondary-menu-bt{
		display: block;
	}
}


/************************************
** イレギュラーclass設定）
************************************/
span.supplement{
	font-size: 12px;
	color: #333;
}

/************************************
** テーブル設定）
************************************/
table {
	width: 100%;
	margin: 0 0 2.4em 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	text-overflow: ellipsis;
	word-break:break-all;
	border: 1px solid #ddd;
}
table th,
table td {
	position: relative;
	padding: 1em;
	border: none;
	border-right: 1px solid #ddd;
	font-style: normal;
	font-size: 16px;
}
table th.text-center,
table td.text-center{
	text-align: center;
	border-right: none;
}

table tr {
	border-bottom: 1px solid #ddd;
}
table th {
	width: 30%;
	text-align: right;
	background-color: #f0f0f0;
	color: #444;
	font-weight: 600;
	line-height: 1.3;
}
table th span.required{
	position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    height: 1em;
    margin: auto;
    background: #b54030;
    display: block;
    color: #fff;
    font-weight: 500;
	font-size: 14px;
    line-height: 1;
    padding: 0.3em 1em 0.5em;
    border-radius: 2em 2em 0 2em;
}
table th span.any{
	position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    height: 1em;
    margin: auto;
    background: #696969;
    display: block;
    color: #fff;
    font-weight: 500;
	font-size: 14px;
    line-height: 1;
    padding: 0.3em 1em 0.5em;
    border-radius: 2em 2em 0 2em;
}
table td {
	width: 70%;
	font-weight: 500;
}
table tr:last-child,
table td:last-child {
	border: none;
}
article table td ul li,
article table td ol li {
	margin-bottom: 1em;
}

div.scrollhint{
	position: relative;
}
div.scrollhint > span{
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.2) 100%);
}
div.scrollhint > span::before{
	position: absolute;
	top: 1em;
	left: 0;
	right: 0;
	content: "\f0a6";
	display: block;
	width: 100px;
	height: 100px;
	margin: auto;
	line-height: 100px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-family: FontAwesome;
	text-align: center;
	font-size: 42px;
	animation: flick 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	overflow: hidden;
}
div.scrollhint > span::after{
	content: "スクロール\Aできます";	
    position: absolute;
	top: 42px;
	left: 0;
	right: 0;
	
	display: block;
	width: 100px;
    padding: 26px 0 0 0;
    margin: 0 auto;
	font-size: 13px;
	color: #fff;
    text-align: center;
    white-space: pre;
    font-style: normal;
}
@keyframes flick {
	0%{
		text-indent: 4em;
	}
	40%{
		text-indent: 0;
	}
	60%{
		text-indent: 0;
	}
	100%{
		text-indent: -4em;
	}
}
@media screen and (max-width: 800px) {
	.scrollable-table{
		overflow-x: auto;
		margin: 0 0 2.4em 0;
		padding: 0 0 10px 0;
		overflow: auto;
		white-space: nowrap;
	}
	.scrollable-table table {
		width: auto;
		min-width: 100%;
		margin: 0;
	}
	table tr{
		border: none;
	}
	table th{
		display: block;
		width: 100%;
		text-align: left;
		box-sizing: border-box;
		border: none;
	}
	table td{
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
		border: none;
	}
	table td select,
	table td input,
	table td textarea{
		width: 100% !important;
		box-sizing: border-box;
		color: #000;
	}
}

/************************************
** ボタン設定）
************************************/
span.h-captcha{
	margin: 0 auto 1.6em auto !important;
}
div.button-area{
	margin: 1em 0;
	text-align: center;
}
div.button-wrap,
p.form-submit{
	position: relative;
	display: block;
	width: 100%;
	max-width: 250px;
	height: 50px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	border: 2px solid #222;
	z-index: 0;
	overflow: hidden;
}
p.form-submit input,
div.button-wrap input,
div.button-wrap a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	color: #222;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	font-style: normal;
	transition: all 0.5s;
	text-decoration: none;
	cursor: pointer;
}
p.form-submit::before,
p.form-submit::after,
div.button-wrap::before,
div.button-wrap::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all 0.5s;
	z-index: -1;
}
p.form-submit::before,
div.button-wrap::before{
	right: -50px;
	border-right: 30px solid transparent;
	border-bottom: 50px solid #000;
	transform: translateX(-100%);
}
p.form-submit::after,
div.button-wrap::after{
	left: -50px;
	border-left: 30px solid transparent;
	border-top: 50px solid #000;
	transform: translateX(100%);
}
p.form-submit:hover,
p.form-submit:hover input,
div.button-wrap:hover,
div.button-wrap:hover a,
div.button-wrap:hover input{
	color: #fff;
}
p.form-submit:hover::before,
div.button-wrap:hover::before{
	transform: translateX(-49%);
}
p.form-submit:hover::after,
div.button-wrap:hover::after{
	transform: translateX(49%);
}

/************************************
** ICON設定）
************************************/
.fa-tag::before {
	font-family: FontAwesome;
	content: "\f02b";
	padding-right: 3px;
}
.fa-home::before{
	font-family: FontAwesome;
	content: "\f015";
	padding-right: 3px;
}
.fa-folder::before {
	font-family: FontAwesome;
	content: "\f07b";
	padding-right: 3px;
}
.fa-angle-right::before {
	font-family: FontAwesome;
	content: "\f105";
	padding-right: 3px;
}
.fa-file::before {
	font-family: FontAwesome;
	content: "\f15b";
	padding-right: 3px;
}
a.cat-link,
.cat-link {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 2px 6px;
	font-size: 12px;
	background-color: #333;
	border-radius: 2px;
	word-break: break-all;
	font-style: normal;
}
a.tag-link,
.tag-link{
	color: #333;
	text-decoration: none;
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 1px 5px;
	font-size: 12px;
	border: 1px solid #999;
	border-radius: 2px;
	word-break: break-all;
	font-style: normal;
}
div.search-box{
	position: relative;
}
div.search-box input::placeholder{
	color: #ccc;
}
div.search-box button.search-submit {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 20px;
	cursor: pointer;
	line-height: 49px;
	border: none;
	color: #ccc;
	padding: 0 8px;
	background-color: rgba(255, 255, 255, 0);
}
div.search-box button.search-submit::before{
	content: "\f002";
	font-family: FontAwesome;
}

/************************************
** FLEX設定）
************************************/
.flex{
	display: flex;
}

.flex50{
	flex-wrap: wrap;
	
	& div.photo{
		width: 50%;
		flex-shrink: 0;
	}

	& div.text{
		width: 50%;
		flex-shrink: 0;
	}
}

/************************************
** アニメーション）
************************************/
.show{
	opacity: 0;
}
.tt010ms{
	transition: transform 1s, opacity 1s;
}
.tt015ms{
	transition: transform 1.5s, opacity 1.5s;
}
.tt020ms{
	transition: transform 2s, opacity 2s;
}

.slide{
	opacity: 0;
	transform: translateY(50%);
	transition: all 1s;
}
.slide.on{
	opacity: 1;
	transform: translateY(0);
}
.slide2{
	opacity: 0;
	transform: translateX(50%);
	transition: all 1s;
}
.slide2.on{
	opacity: 1;
	transform: translateX(0);
}


/************************************
** ユーザーページ
************************************/
#author-profile{
	display: flex;
	max-width: 1300px;
	padding: var(--padding-base3);
	margin: 0 auto 50px auto;
	justify-content: space-between;

	& div.description{
		width: 35%;
		padding: 1em 4em 1em 1em;
		box-sizing: border-box;
		
		& h2{
			font-size: 24px;
			padding: 0;
			margin: 0 0 0.75em 0;
			line-height: 1;
		}
		
		& p{
			text-align: justify;
			text-justify: inter-ideograph;
			word-break: break-all;
		}
	}
	
	& div.photo{
		position: relative;
		width: 65%;
		height: 0;
		padding: 27.625% 0 0 0;
		flex-shrink: 0;
		overflow: hidden;
		box-shadow: 3px 5px 20px rgba(0,0,0,0.15);
	
		& img{
			position: absolute;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			max-width: 100%;
    		height: auto;
			margin: auto;
		}
	}
	& div.photo.top img{
		top: 0;
		bottom: initial;
	}
}
  
@media screen and (max-width: 1650px) {
	#author-profile{

		& div.description{
			width: 50%;
			padding: 1em 4em 1em 0;
		}
		& div.photo{
			width: 50%;
			padding: 28% 0 0 0;
		}
	}
}
@media screen and (max-width: 1365px) {
	#author-profile{
		align-items: center;
		
		& div.photo{
			padding: 33% 0 0 0;
		}
	}
}
@media screen and (max-width: 1200px) {
	#author-profile{
		flex-wrap: wrap;
		align-items: flex-start;

		& div.description{
			width: 100%;
			padding: 2.4em 0 0 0;
			order: 2;
		}
		& div.photo{
			width: 100%;
			padding: 42.5% 0 0 0;
			order: 1;
		}
	}
}
@media screen and (max-width: 550px) {
	#author-profile{
	
		& div.description{
			& h2{
				font-size: 24px;
			}
			& h3{
				font-size: 16px;
			}
		}
	}
}

/************************************
** ページナビ）
************************************/
#eyecatch-area ul.pagenav{
	position: absolute;
    top: 135px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    margin: auto;
    width: 100%;
    height: 400px;
    max-width: 1400px;
    padding: var(--padding-eyecatch-nav);
	justify-content: space-between;
	pointer-events: none;
	box-sizing: border-box;
}
#eyecatch-area ul.pagenav li{
	position: relative;
	display: block;
	width: 50px;
	height: 400px;
}
#eyecatch-area ul.pagenav li a{
	position: absolute;
    top: 0;
    bottom: 0;
	display: block;
	width: 0;
	height: 80px;
	padding: 0 25px;
	margin: auto 0;
	transition: all 0.5s;
	overflow: hidden;
	font-size: 12px;
	pointer-events: auto;
	font-size: 10px;
	color: #444;
	text-align: center;
	text-decoration: none;
}
#eyecatch-area ul.pagenav li.next a{
	right: 0;
}
#eyecatch-area ul.pagenav li.next a div.photo{
	float: right;
}
#eyecatch-area ul.pagenav li a:hover{
	width: 80px;
}
#eyecatch-area ul.pagenav div.photo{
	position: relative;
    width: 80px;
	height: 80px;
    margin: auto 0;
	border-radius: 50%;
	overflow: hidden;
	background: #000;
}
#eyecatch-area ul.pagenav div.photo::after{
	position: absolute;
    width: 30px;
    height: 80px;
    line-height: 80px;
    display: block;
    color: #fff;
    background: rgba(0,0,0,0.5);
    font-size: 18px;
    transition: 0.5s all;
}
#eyecatch-area ul.pagenav li.prev div.photo::after{
	left: 0;
	font-family: FontAwesome;
	content: "\f137";
}
#eyecatch-area ul.pagenav li.next div.photo::after{
	right: 0;
	font-family: FontAwesome;
	content: "\f138";
}
#eyecatch-area ul.pagenav li:hover div.photo::after{
	width: 80px;
	opacity: 0;
}
#eyecatch-area ul.pagenav div.photo img{
	position: absolute;
    top: 0;
    left: -200%;
    right: -200%;
    margin: auto;
    width: auto;
	height: 100%;
}
#eyecatch-area ul.pagenav div.text{    
	position: absolute;
    top: 0;
    width: 1em;
    height: 400px;
    padding: 0.25em;
    line-height: 1;
    font-weight: 600;
    font-style: normal;
    color: #bbb;
    flex-shrink: 0;
	font-size: 12px;
	text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: normal;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
}
#eyecatch-area ul.pagenav li.prev div.text{
	left: 4px;
}
#eyecatch-area ul.pagenav li.next div.text{
    right: 4px;
}
#eyecatch-area ul.pagenav li:hover div.text{
	color: #000;
}

@media only screen and (max-width: 1000px) {
	#eyecatch-area ul.pagenav{
		display: none;
	}
}


/************************************
** シングル
************************************/
article.post {
	margin: 0;
}

header.post-header{
	display: flex;
    width: 100%;
    max-width: 1300px;
	padding: 1.6em 0;
    margin: 0 auto;
	align-items: center;
}
header.post-header h1{
	flex-grow: 1;
	padding: 0 1em 0 0;
	margin: 0.5em 0;
	font-size: 27px;
	line-height: 1.3;	
	text-align: justify;
	text-justify: inter-ideograph;
}
header.post-header div.entry-meta{
	width: 220px;
	padding: 0 0 0 1.6em;
	order: 1;
	flex-shrink: 0;
	flex-grow: 0;
	box-sizing: border-box;
	border-left: 2px dotted #000;
}
header.post-header div.entry-meta div.author a.photo img{
    position: relative;
	width: 80px;
	height: 80px;
	margin: 0 0 -80px 0;
	border-radius: 50%;
    z-index: 100;
}
header.post-header div.entry-meta div.author a.name{
	display: block;
	margin: 0 0 0.5em 0;
	font-size: 14px;
	color: #444;
}
header.post-header div.entry-meta span.post-date{
	display: block;
	font-size: 14px;
	font-family: var(--fontfamily-sub);
	font-weight: var(--fontweight-sub);
	font-style: normal;
	color: #444;
}
section.post-content{
	padding: 0 0 4em 0;
}

@media only screen and (max-width: 1000px) {
	header.post-header{
		flex-wrap: wrap;
		padding: 0;
	}
	header.post-header h1{
		width: 100%;
		padding: 0;
	}
	header.post-header div.entry-meta{
		width: 100%;
		padding: 1em 0 0 0;
		border-top: 1px dotted #ddd;
		border-left: none;
		text-align: center;
	}
	header.post-header div.entry-meta div.author a.photo img{
		margin: 0;
	}
}


/************************************
** 記事フッター
************************************/
footer.post-footer{
	padding: 1.6em 0;
	margin-top: -6em;
	
	& h3{
		margin: 0 0 0.5em 0;
	}

	& div.author-wrap{
		display: flex;
		align-items: center;

		& div.author{
			width: 150px;
			padding: 1em 0;
			flex-shrink: 0;

			& a.photo img{
				display: block;
				width: 100px;
				height: 100px;
				margin: 0 auto 0.5em auto;
				border-radius: 50%;
			}
			& a.name{
				display: block;
				color: #000;
				text-align: center;
			}
		}

		& p{
			margin: 0 0 0 1.6em;
			font-size: 14px;
		}
	}

	& div.entry-info{
		display: flex;
		justify-content: space-between;
		padding-bottom: 0.5em;
		margin-bottom: 1em;
		border-bottom: 1px dotted #ddd;
		
		& span,
		& a{
			font-size: 14px;
			font-style: normal;
			color: #444;
		}
	}
}

@media only screen and (max-width: 600px) {
	footer.post-footer{
		& div.author-wrap{
			flex-wrap: wrap;

			& div.author{
				width: 100%;
			}

			& p{
				margin: 0 0 1em 0;
			}
		}
	}
}

@media only screen and (max-width: 500px) {
	footer.post-footer div.entry-info span,
	footer.post-footer div.entry-info a{
		font-size: 11px;
	}
}

/************************************
** iframe
************************************/
div.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

div.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.iframe-wrapper a.modal-panel{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/************************************
** モーダルコンテンツ
************************************/
/*モーダルコンテンツ用*/
#modal-content{
	position: fixed;
	width:80%;
	margin:auto;
	padding:0;
	background:#fff;
	position:fixed;
	display:none ;
	z-index: 2147483601;
}
	
#modal-content .inner{
	position:relative;
	width:100%;
	padding-top:56.25%;
	overflow:hidden;
}

#modal-content .inner #player{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	background-color: #000;
}

#modal-overlay{
	z-index: 2147483600;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba( 0,0,0, 0.75 );
}

/************************************
** ページネーション
************************************/
h2.screen-reader-text{
	display: none;
}
#main-area ul.pagenav{
	display: flex;
	padding: 16px;
	margin: var(--margin-base4);
	background: #eee;
	justify-content: space-between;

	& li{
		padding: 16px;
		background: #fff;
		width: 45%;
		flex-shrink: 0;
		transition: all 0.5s;
		box-sizing: border-box;
		line-height: 1.3;

		& a{
			display: flex;
			color: #444;
			font-style: normal;
			color: #444;
			text-decoration: none;
			align-items: center;

			& div.photo{
				position: relative;
				width: 160px;
				height: 90px;
				margin: -16px;
				border: 1px solid #fff;
				background: #f9f9f9;
				box-sizing: border-box;
				overflow: hidden;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					margin: auto;
					width: auto;
					height: 100%;
				}
			}
		}
	}

	& li.next{
		& a{
			justify-content: flex-end;

			& div.photo{
				margin-left: 16px;
			}

			& div.text{
				text-align: right;
			}

			& div.text::after{
				font-family: FontAwesome;
				content: "\f138";
				padding-right: 3px;
				margin-left: 5px;
				padding-right: 0;
			}
		}
	}

	& li.prev{
		& a{
			& div.photo{
				margin-right: 16px;
			}

			& div.text::before{
				font-family: FontAwesome;
				content: "\f137";
				padding-right: 3px;
				margin-right: 5px;
				padding-right: 0;
			}
		}

	}

	& li.prev:hover{
		transform: translateX(-16px);
		box-shadow: 0 0 25px rgba(0,0,0,0.05);
	}
	& li.next:hover{
		transform: translateX(16px);
		box-shadow: 0 0 25px rgba(0,0,0,0.05);
	}
	
	& li.blank{
		background: transparent;
	}
}

p.archive-link{
	margin: 0 0 0 0;
	text-align: right;

	& a{
		display: block;
		color: #000;
		transition: transform 1s;
	}
	& a:hover{
		transform: translateX(1em);
	}
}

@media only screen and (max-width: 1000px) {
	#main-area ul.pagenav{
		display: block;

		& li{
			width: 100%;
		}

		& li.prev{
			border-bottom: 1px dotted #999;
		}
	}
}
@media only screen and (max-width: 800px) {
	#main-area ul.pagenav{
		& li{
			& a{
				flex-wrap: wrap;

				& div.text{
					width: 100%;
					order: 2;
				}
			}
		}

		& li.prev a div.photo,
		li.next a div.photo{
			width: 100%;
			height: 0;
			margin: 0;
			padding: 44.895% 0 0 0;
			order: 1;
		}
	}
}


/************************************
** サイドバー
************************************/
#sidebar{

	& .sticky {
        position: sticky;
        top: 0;
	}
	
    > section{
        padding: 0 0 1.6em 0;
        margin: 0 0 1.6em 0;
        border-bottom: 1px dotted #999;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 14px;
        font-style: normal;

        & h2,h3,h4,h5,h6{
            padding: 0.25em 0;
            background-color: var(--bgcolor-side-head);
            color: var(--color-side-head);
        }
    }

	& section.widget_categories{

		& ul{
			padding: 0.5em;
			background-color: #f9f9f9;

			& li{
				padding: 0.5em;

				& a{
					display: block;
					border-bottom: 1px dotted #eee;
					color: #000;
					text-decoration: none;
					transition: transform 1s;
				}

				& a:hover{
					transform: translateX(1em);
				}

				& a::before {
					content: "\f07b";
					margin: 0 0.25em 0 0;
					font-size: 12px;
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}			
			}
			& li.cat-item-53{
				display: none;
			}
		}
	}

    & section {
		> ul{
			margin-left: 0;

			& ul{
				margin-left: 1em;
			}
		}
    }
}

/*タグクラウド*/
.tagcloud {
	display: flex;
	flex-wrap: wrap;
}
.tagcloud a {
	display: inline-block;
	padding: 3px 8px;
	margin: 2px;
	border-radius: 2px;
	background-color: #f9f9f9;
	color: #777;
	text-decoration: none;
	font-size: 12px;
	border-radius: 5px;
}
#side-area section .tagcloud a:hover {
	background-color: #333;
	transition: all 0.5s ease;
	color: #eee;
}
.tagcloud a::before{
	content: "\f02b";
	margin-right: 0.25em;
	font-family: FontAwesome;
}


/************************************
** 目次
************************************/
#toc_container{
    margin-bottom: -2.4em;
    padding: 1.6em;
	font-size: 14px;
}


/************************************
** 関連記事
************************************/
#content-side{
    max-width: 1300px;
    margin: 0 auto;
	padding-top: 50px;

    & ul.related-list{
        display: flex;
		flex-wrap: wrap;
        width: 100%;

        & li{
            position: relative;
            width: 15%;
            padding: 0 0 1em 0;
            margin: 0 2% 0 0;

			& a{
				color: #000;
				text-decoration: none;
			}

            & div.photo{
                position: relative;
                width: 100%;
                padding: 44.895% 0 0 0;
                margin: 0;
                background: #f9f9f9;
                border-radius: 10px;
                overflow: hidden;
    
                & img{
                    position: absolute;
                    top: 0;
                    left: -200%;
                    right: -200%;
                    bottom: 0;
                    width: 100%;
                    height: auto;
                    margin: auto;
                    transition: all 0.5s;
                }
            }

			& div.text{
				padding: 0.5em;
				
				& h3{
					font-size: 13px;
					line-height: 1.3;
					margin: 0 0 0.5em 0;
				}

				& time{
					font-family: var(--fontfamily-sub);
					font-weight: var(--fontweight-sub);
					font-size: 10px;
					display: block;
				}

				& time::before {
					font-family: FontAwesome;
					content: "";
					padding-right: 3px;
				}
			}

            & li:last-child{
                margin: 0;
            }

            & a:hover img{
                transform: scale(1.1);
            }
        }
        & li:last-child {
            margin: 0;
        }
    }

}
@media only screen and (max-width: 1300px) {
	#content-side{
	
		& ul.related-list{
	
			& li{
				width: 32%;
			}

			& li:nth-child(3n+3) {
				margin: 0;
			}
		}
	}
}
@media only screen and (max-width: 900px) {
	#content-side{
	
		& ul.related-list{
	
			& li{
				width: 49%;
			}

			& li:nth-child(3n+3) {
				margin: 0 2% 0 0;
			}

			& li:nth-child(even) {
				margin: 0;
			}
		}
	}
}

/************************************
** AdSense
************************************/
ins.adsbygoogle,
.google-auto-placed {
    margin: 0 0 2.4em 0;
}
#ad-foot{
    max-width: 1450px;
    margin: 0 auto;
	padding: var(--padding-base5);
	text-align: center;
	box-sizing: border-box;
}
#ad-contents-foot{
	margin: 1.6em 0 4em 0;
}
div.ad-wrapper{
	margin: 4em 0;
}
/************************************
** 人気記事
************************************/
section.popular-posts{
	& ul{
		& li{
			margin: 0 0 1em 0;
			border-radius: 10px;
			overflow: hidden;

			& a{
				display: flex;
				font-size: 12px;
				color: #000;
				text-decoration: none;

				& div.photo{
					position: relative;
					width: 100px;
					height: 100px;
					margin: 0;
					overflow: hidden;
					flex-shrink: 0;

					& img{
						position: absolute;
						top: 0;
						left: -200%;
						right: -200%;
						bottom: 0;
						width: auto;
						height: 100%;
						margin: auto;
						transition: all 0.5s;
					}
				}

				& div.text{
					width: calc(100% - 100px);
					padding: 0.5em 0.5em 0.5em 1em;
					background-color: #fff;
				}
			}

			& a:hover img{
				transform: scale(1.1);
			}
		}
	}
}

/************************************
** コメント
************************************/
#comments{
	padding: var(--padding-base6);
}


/************************************
** トップへ戻るボタン
************************************/
.goto-top {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 99999;
}

.goto-top a {
	display: block;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
	width: 40px;
	height: 40px;
	background: #000;
	color: #fff;
}
.goto-top a:hover {
	color: #fff;
}
.goto-top a:before {
    content: "\f077";
	font-family: FontAwesome;
}


/************************************
** トップページ＆親固定ページのループ記述
************************************/
article section.loop_section{

	& div.text{
	}

	& div.flex{
		display: flex;

		& div.photo{
			width: 40%;
			padding: 0;
			flex-shrink: 0;
			order: 1;

			& img{
				width: 100%;
				height: auto;
				margin: 0;
			}
		}

		& div.text{
			width: 60%;
			padding: 0 0 0 2.4em;
			order: 2;
		}
	}
}
article section.loop_section.right{
	& div.flex{
		display: flex;

		& div.photo{
			order: 2;
		}

		& div.text{
			padding: 0 2.4em 0 0;
			order: 1;
		}
	}
}
article section.loop_section.flex3_7{
	& div.flex{
		& div.photo{
			width: 30%;
		}

		& div.text{
			width: 70%;
		}
	}
}
article section.loop_section.flex2_8{
	& div.flex{
		& div.photo{
			width: 20%;
		}

		& div.text{
			width: 80%;
		}
	}
}
@media only screen and (max-width: 800px) {
	article section.loop_section,
	article section.loop_section.flex2_8,
	article section.loop_section.flex3_7{

		& div.text{
		}
	
		& div.flex{
			display: flex;
			flex-wrap: wrap;
	
			& div.photo{
				width: 100%;
				padding: 0;
				margin: 0;
				order: 2;
			}
	
			& div.text{
				width: 100%;
				padding: 0;
				margin: 0 0 1.6em 0;
				order: 1;
			}
		}
	}
}


/************************************
** カテゴリー
************************************/
div.category-wrapper{
	margin: 0 0 1.6em 0;
}
ul.category-children-list{
	display: flex;
	flex-wrap: wrap;

	& li{	
		list-style: none;
		margin: 0.25em;

		& a{
			display: block;
			color: #000;
			text-decoration: none;
			padding: 0.25em 1em;
			background-color: #eee;
			border-radius: 1.5em;
		}

		& a::before{
			content: "\f07b";
			margin: 0 0.25em 0 0;
			font-size: 12px;
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
		}
	}
}

ul.category-list{
	display: flex;
    flex-wrap: wrap;
	padding: 0;

	& li{
		position: relative;
		width: 50%;
		padding: 0 2.4em 2.4em 2.4em;
        margin: 0 0 2.4em 0;
		list-style: none;
		box-sizing: border-box;

        & a{
			position: relative;
			display: block;
			height: 100%;
            color: #000;
            text-decoration: none;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
			transition: box-shadow 0.5s;

			& div.photo{
				position: relative;
				width: 100%;
				height: 0;
				padding: 44.895% 0 0 0;
				margin: 0;
				background: #f9f9f9;
				overflow: hidden;
				border-radius: 10px 10px 0 0;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					bottom: 0;
					width: 100%;
					height: auto;
					margin: auto;
					transition: transform 0.5s;
				}
			}

			& div.text{
				position: relative;
				width: 100%;
				padding: 1.6em 1.6em 1.6em 120px;
				box-sizing: border-box;
				text-align: justify;
				text-justify: inter-ideograph;

				& h3{
					padding: 0;
					border: none;
					font-size: 18px;
				}
				
				& h3::before{
					display: none;
				}

				& time{
					position: absolute;
					display: block;
					top: -30px;
					left: 10px;
					font-family: var(--fontfamily-sub);
					font-weight: var(--fontweight-sub);
					font-size: 50px;
					text-align: left;
					line-height: 1;
                    font-style: italic;
					transform: rotate(-10deg);

					& span{
						display: block;
						margin-bottom: -0.15em;
                        font-size: 60px;
                        letter-spacing: 0;
					}
				}

				& div.vol{
					position: absolute;
					display: block;
					top: 1em;
					left: 1.6em;
					font-family: var(--fontfamily-sub);
					font-weight: var(--fontweight-sub);
					font-size: 12px;

					& span{
						display: block;
						font-size: 50px;
						line-height: 30px;
						font-style: italic;
						letter-spacing: -0.05em;
					}
				}

				& div.cat{
					display: flex;
					flex-wrap: wrap;
					font-size: 11px;
					margin: 0 0 0.5em 0;

					> span{
						display: block;
						padding: 0.25em 0.5em;
						margin: 0 0 2px 2px;
						border: 1px solid #333;
						background-color: #333;
						border-radius: 3px;
						color: #fff;
					}
				}

				& div.tag{
					display: flex;
					flex-wrap: wrap;
					font-size: 11px;
					margin: 0 0 0.5em 0;

					> span{
						display: block;
						padding: 0.25em 0.5em;
						margin: 0 0 2px 2px;
						border: 1px solid #999;
						border-radius: 3px;
					}
				}

				& div.author{
					display: block;
					position: absolute;
					top: 90px;
					left: 25px;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;
	
					& img{
						width: 100%;
						height: 100%;
					}
				}
			}

        }

        & a:hover{
			box-shadow: 0 0 30px rgba(0,0,0,0.1);
		}

        & a:hover div.photo img{
            transform: scale(1.1);
        }
	}
	
	& li:last-child{
		margin-bottom: 2.4em;
	}

	& li::before{
		position: absolute;
		top: 0;
		right: -1px;
		width: 2px;
		height: calc(100% - 2.4em);
		background-image: linear-gradient(0deg,#999 25%,transparent 25%);
		background-position: 0 0;
		background-repeat: repeat-y;
		background-size: 2px 8px;
		content: "";
	}
	& li::after{
		position: absolute;
		bottom: -1px;
		left: 2.4em;
		width: calc(100% - 4.8em);
		height: 2px;
		background-image: linear-gradient(90deg,#999 25%,transparent 25%);
		background-position: 0 0;
		background-repeat: repeat-x;
		background-size: 8px 2px;
		content: "";
	}
	& li:nth-child(odd){
		padding-left: 0;
	}
	& li:nth-child(even){
		padding-right: 0;
	}
	& li:nth-child(2n)::before{
		display: none;
	}
	& li:nth-last-child(-n+2)::after{
		display: none;
	}
	& li.now{
		& time::after {
			content: "開催中";
            display: block;
            padding: 0.3em;
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            background-color: #000;
            color: #fff;
            width: 3.5em;
            text-align: center;
            line-height: 1;
		}
	}
	& li.now.recruitment{
		& time::after {
			content: "募集中";
		}
	}
}
ul.category-list.event{
	& li{
        & a{
			& div.photo{
				padding: 100% 0 0 0;
				background-color: #ede9e5;

				& img{
					transform: scale(0.9);
				}
			}
			& div.time{
				margin: 0 0 1em 0;
				line-height: 1.3;
				text-align: left;
				
				& span{
					display: block;
				}
			}
		}
		& a:hover div.photo img{
            transform: scale(1);
        }
	}
	& li.v a div.photo img{
		width: auto;
		height: 100%;
	}
	& li.h a div.photo img{
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 1400px) {
	ul.category-list{
	
		& li{
			width: 50%;
		}
	}
}
@media only screen and (max-width: 800px) {
	ul.category-list{
	
		& li{
			width: 100%;
			padding: 0 0 2.4em 0;
		}
		& li::before{
			display: none;
		}
		& li:nth-child(2n)::before{
			display: none;
		}
		& li:nth-last-child(-n+2)::after{
			display: block;
		}
		& li:last-child::after{
			display: none;
		}
	}
}

p.archive-link{
	margin: 2.4em 0 0 0;
	text-align: right;

	& a{
		display: block;
		color: #000;
		transition: transform 1s;
	}
	& a:hover{
		transform: translateX(1em);
	}
}


/************************************
** faq
************************************/
article #faq{
	& div.wrapper{
		> ul{
			max-width: 1300px;
			padding: 0;
			margin: 0 auto 4em auto;

			& li{
				list-style: none;
			}
		}

		& h3{
			margin-top: 2.4em;
			font-family: var(--fontfamily-sub);
			font-weight: var(--fontweight-sub);
		}

		& .toggle{
			position: relative;
			min-height: 80px;
			padding: 1.6em 1.6em 1.6em 0.5em;
			margin: 0 0 1.6em 0;
			border: 2px solid #000;
			cursor: pointer;
			box-sizing: border-box;

			& h4{
				position: relative;
				padding: 0 24px 0 30px;
				margin: 0;
				color: #000;
				line-height: 24px;
				font-size: 18px;
				font-weight: 600;
				text-align: left;
				font-family: var(--fontfamily-sub);
				font-weight: var(--fontweight-sub);
			}
			& h4::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: auto;
				height: auto;
				content: "Q";
				vertical-align: text-bottom;
				font-weight: 700;
				background: none;
			}

			& strong,
			h4{
				display: block;
				font-size: 18px;
				text-align: left;
			}
			& p{
				margin: 0 0 1em 0;
				text-align: justify;
				text-justify: inter-ideograph;
			}
			& p:last-child{
				margin: 0;
			}
			& p + ul,
			p + ol,
			p + h4{
				margin-top: 1.6em;
			}

			& .toggle_box{
				position: relative;
				display: none;
				padding: 1.6em 0 0 30px;
				cursor: auto;
			}
			& .toggle_box::before {
				position: absolute;
				top: 2.4em;
				left: 2px;
				display: block;
				content: "A";
				vertical-align: text-bottom;
				font-size: 18px;
				font-weight: 700;
				line-height: 1;
			}
		}
		& .toggle:last-child{
			margin-bottom: 0;
		}
		
		
		& .toggle::after{
			position: absolute;
			top: 40px;
			right: 21px;
			display: block;
			content: "";
			width: 18px;
			height: 0;
			margin: 0;
			border-top: 2px solid #000;
			transition: 0.5s all;
		}
		& .toggle::before{
			position: absolute;
			top: 40px;
			right: 21px;
			display: block;
			content: "";
			width: 18px;
			height: 0;
			margin: 0;
			transform: rotate(90deg);
			border-top: 2px solid #000;
			transition: 0.5s all;
		}
		& .toggle.active::before,
		& .toggle.active::after{
			transform: rotate(180deg);
		}
	}
}


/************************************
** Wooocommerce
************************************/
.is-large.wc-block-cart .wc-block-cart-items th{
	padding-top: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	text-align: center;
}
.is-large.wc-block-cart .wc-block-cart-items td{
	padding-top: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
}
.is-large.wc-block-cart .wc-block-cart__totals-title{
	text-align: left;
}
article div.wc-block-components-sidebar-layout h2{
	background-color: transparent;
}
article div.wc-block-components-sidebar-layout h2::before{
	content: none;
}
.wc-block-components-form .wc-block-components-checkout-step{
	padding: 0 0 0 2.4em;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before{
	content: none !important;
}

.woocommerce form .form-row .input-checkbox,
.woocommerce form #sonypayment-light-save-payment-method,
.woocommerce-checkout #payment ul.payment_methods li input.input-radio {
    display: inline;
	width: 1rem !important;
    padding: 0;
    margin: 0 0.25em 0 0 !important;
    inline-size: 1rem;
    block-size: 1rem;
	vertical-align: middle;
    -webkit-appearance: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation{
	float: none;
	width: 100%;
	margin: 0 0 2.4em 0;
	background-color: #f0f0f0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{	
	display: flex;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{
	padding: 5px;
	margin: 0;
	list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
	display: block;
	padding: 0.5em 1em;
	margin: 0;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	border-radius: 1.5em;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
	background-color: #000;
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content{
	width: 100%;
	float: none;
}

.woocommerce .col2-set, .woocommerce-page .col2-set{
	display: flex;
}
.woocommerce-account .addresses .title h3{
	float: none;
}
.woocommerce-account .addresses .title .edit{
	float: none;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
	position: relative;
	float: none;
	width: 50%;
	box-sizing: border-box;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1{
	margin: 0 1.6em 0 0;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
	margin: 0 0 0 1.6em;
}

.select2-container--default .select2-selection--single{
	height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 42px;
}

.woocommerce form .form-row #order_comments{
	height: 5em;
    padding: 0.5em;
    line-height: 1.3;
}

.woocommerce table.shop_table{
	table-layout: auto;
	border-right: none;
}
.woocommerce table.shop_table th{
	text-align: center;
	border-right: 1px solid #ddd;
	background-color: #f0f0f0;
}
.woocommerce table.shop_table td{
	text-align: right;
	border-right: 1px solid #ddd;
}

.woocommerce form .woocommerce-page form #billing_first_name_field{
	float: right;
}
.woocommerce form .woocommerce-page form #billing_last_name_field{
	float: left;
}
.woocommerce form .woocommerce-page form #billing_postcode_field{
	float: none;
}
#add_payment_method #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li{
	list-style: none;
}

.woocommerce strong{
	background: none;
}

.woocommerce-notices-wrapper{
	margin: 0 0 2.4em 0;
}


/*商品ページ*/
/*商品タイトル*/
.woocommerce div.product .product_title{
	margin-bottom: 1em;
	line-height: 1.35;
}
.woocommerce div.product h2{
	font-size: 21px;
}

/*写真表示箇所*/
.woocommerce div.product div.images .flex-control-thumbs{
	display: flex;
}
.woocommerce div.product div.images .flex-control-thumbs li{
	width: 12.5%;
	float: none;
}

/*バリエーションのテーブル*/
.woocommerce div.product form.cart{
	padding: 1em;
	background-color: #e9e9e9;
}
.woocommerce div.product form.cart .variations{
	margin: 0;

	& th,td{
		background-color: transparent;
	}
}
.woocommerce div.product form.cart .variations th.label label{
    padding: 14px;
    display: block;
    text-align: right;
    font-size: 16px;
    line-height: 1;
}
.woocommerce div.product form.cart .variations a.reset_variations{
	display: none !important;
}

/*バリエーションの価格表示*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
	color: #c00;
	font-size: 30px;
	margin: 0 0 0.5em 0;
}
div.woocommerce-variation{
	display: none !important;
}

/*買い物ボタン*/
.woocommerce div.product form.cart .button {
    padding: 14px;
    border: 1px solid transparent;
    box-sizing: border-box;
    line-height: 1;
    font-size: 18px;
    background-color: #b00;
}

/*フロート設定を解除*/
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.woocommerce div.product div.custom-wrapper{
	width: 48%;

	& .product_meta{
		font-size: 12px;
		margin: 0 0 2.4em 0;
	}

	& .woocommerce-product-description,
	.woocommerce-product-attributes{
		margin: 0 0 2.4em 0;

		& p{
			font-size: 14px;
		}
	}
}

@media screen and (max-width: 1000px) {
	.woocommerce-page div.product div.images,
	.woocommerce div.product div.custom-wrapper{
		width: 100%;
	}
}


.woocommerce table.shop_attributes{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    margin: 1.6em 0 2.4em 0;
}
.woocommerce table.shop_attributes tr {
    border-top: 1px dotted #999;
}
.woocommerce table.shop_attributes tr:first-child {
    border: none;
}
.woocommerce table.shop_attributes th{
    width: 120px;
    padding: 1.6em;
    color: #262317;
    text-align: left;
    vertical-align: top;
	background: #fff;
}
.woocommerce table.shop_attributes td{
    padding: 1.6em;
	font-style: normal;
	background: #fff;
}
.woocommerce table.shop_attributes td p{
	padding: 0;
	margin: 0 0 1.6em 0;

	&:last-child{
		margin: 0;
	}
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images{
	float: none;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
	float: none;
}

/*woocommerceカテゴリ箇所*/
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
	line-height: 1.35;
	font-weight: 500;
}