@charset "utf-8";

/*********** レスポンシブ用 ***********************************************/

@media only screen and (max-width: 768px) {
	/*** フォーム ***/
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
	.select-box select {
		height: 48px;
		line-height: 1.0;
	}
	input[type="submit"] {
		height: 38px;
		font-size: 15px !important;
	}
}

@media only screen and (max-width: 680px) {
	/*** 構成 ***/
	#content-single .title-icon i {
		width: 68px;
		height: 68px;
		line-height: 68px;
		font-size: 30px;
	}
	.column,
	#content-single {
		padding: 60px;
	}
	.post-item,
	.entry .content {
		padding: 30px 60px;
	}
	.footer-item {
		float: none;
		width: 100%;
		margin: 0;
	}
	.footer-item:nth-child(2n) {
		margin-top: 30px;
		margin-left: 0;
	}
	.recent-entry-date {
		margin-right: 8px;
		font-size: 100%;
	}
	.archives {
		margin: 30px auto 0;
	}

	.meta ul:nth-child(2) {
		margin-top: 10px;
		border-top: 1px dotted #EEE;
	}
	.meta .fa-chain {
		overflow-x: scroll;
		word-break: keep-all;

		-webkit-overflow-scrolling: touch;
	}
}

@media only screen and (max-width: 638px) {
	.select-box:after {
		right: 10px;
		margin-left: 0;
	}
	#form-options .form-box label {
		display: block;
		position: relative;
		top: 0;
		width: 100%;
		padding: 0;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	#form-options .form-box input,
	#form-options .form-rememberme,
	#form-options .form-box .select-box {
		display: block;
		float: none;
		width: 100%;
		margin: 5px 0 15px;
	}
	#form-options .form-box select {
		width: 100%;
	}
	.form-options-show {
		padding: 0 20px 30px;
	}
	#form-options .form-rememberme {
		margin: 0;
		padding: 0;
		text-align: right;
	}

	/*** 2カラム表示 ***/
	dl.columns-2 dt {
		float: none;
		width: 100%;
		padding-top: 15px;
		border-top: 1px dotted #EEE;
		font-weight: bold;
		vertical-align: baseline;
	}
	dl.columns-2 dd {
		float: none;
		width: 100%;
		margin: 0;
		padding-top: 2px;
		border-top: none;
	}
	dl.columns-2 dd input {
		width: 100%;
	}
}

@media only screen and (max-width: 580px) {
	/*** 基本 ***/
	body {
		font-size: 14px;
	}
	#main #search-content {
		margin: 0 0 30px;
	}
	.post-item {
		font-size: 92%;
	}

	.icon-alt-share,
	.entry-link-title,
	.nav-admin-icon-alt {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;
	}
	#header p {
		margin-top: 20px;
	}

	/*** 管理者用ナビメニュー ***/
	.nav-admin-parent {
		width: 44px;
		height: 44px;
		text-align: center;
	}
	#nav-admin .nav-admin-parent > a {
		padding: 0;
	}
	#nav-admin .nav-admin-parent i {
		margin-right: 0;
		color: #FFF;
		font-size: 14px;
	}
	#nav-admin ul li ul {
		left: 50%;
		max-width: 100vw;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	}

	/*** 構成 ***/
	.meta ul.post-date {
		text-align: left;
	}
	.meta ul.post-date li {
		display: block;
	}
	.meta ul.post-date li.icon:before {
		top: 7px;
	}
	.meta ul.post-date li:nth-child(2),
	.meta ul.post-date li:nth-child(3) {
		margin-left: 0;
	}
	.meta ul.post-date li a {
		padding: 8px 6px;
		border: 1px solid #FAFAFA;
		color: #787878;
	}

	.share li {
		width: 20%;
		margin: 0 2%;
	}
	.share li a {
		width: 100%;
		padding: 0;
		border-radius: 1.4px;
	}
	.share li a:before {
		margin-right: 0;
	}

	#entry_link ul.entry_link {
		background-color: #FFF;
		text-align: center;
	}
	#entry_link ul.entry_link li {
		width: 92px;
		height: 48px;
		line-height: 48px;
	}
	#entry_link i {
		font-size: 16px;
	}
	#entry_link ul.entry_link li.prev {
		float: left;
	}
	#entry_link ul.entry_link li.next {
		float: right;
	}
	#entry_link ul.entry_link li.home {
		width: 48px;
		height: 48px;
		margin: 0 10px;
	}
	#entry_link ul.entry_link li i {
		margin: 0;
	}
	#entry_link ul.entry_link li.prev a,
	#entry_link ul.entry_link li.next a {
		width: 57px;
		height: 46px;
		padding: 0;
	}
	#entry_link ul.entry_link li.prev a {
		padding-left: 33px;
	}
	#entry_link ul.entry_link li.next a {
		padding-right: 33px;
	}
	#entry_link ul.entry_link li.home a {
		width: 46px;
		height: 46px;
		padding: 0;
	}
	#entry_link ul.entry_link li a:hover {
		border-color: transparent;
	}

	#nav-page ul li {
		width: 14.28%;
		line-height: 44px;
	}
	#nav-page ul li:nth-child(n+8) {
		border-top: 1px solid #EEE;
	}
	#nav-page ul li.current {
		height: 44px;
	}
	#nav-page ul li a {
		height: 44px;
	}
}

@media only screen and (max-width: 560px) {
	/*** 基本 ***/
	div {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	blockquote.bq-memo {
		width: 100%;
	}
	#header {
		padding: 105px 0 25px;
		border-bottom: 1px solid #EEE;
	}
	#nav-admin + #header > #nav {
		top: 44px;
	}
	select,
	textarea,
	[type="url"],
	[type="text"],
	[type="email"],
	[type="password"] {
		width: 100%;
	}
	.archives {
		width: 200px;
	}

	/*** ナビメニュー ***/
	#nav {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		margin-top: 0;
	}

	#menu {
		overflow: hidden;
		position: absolute;
		z-index: 9000;
		width: 100%;
		height: 45px;
		-webkit-transition: height 0.48s cubic-bezier(0.65, 0.05, 0.36, 1), border-top-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.16s, border-bottom-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1), border-radius 0.48s cubic-bezier(0.65, 0.05, 0.36, 1) 0.48s, background-color 0.58s cubic-bezier(0.65, 0.05, 0.36, 1);
		        transition: height 0.48s cubic-bezier(0.65, 0.05, 0.36, 1), border-top-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.16s, border-bottom-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1), border-radius 0.48s cubic-bezier(0.65, 0.05, 0.36, 1) 0.48s, background-color 0.58s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	#menu-toggle-st:target ~ #menu,
	#menu-toggle-st:checked ~ #menu {
		height: 100vh;
		border-top-color: #222;
		border-bottom-color: #222;
		background-color: #222;
		-webkit-transition: height 0.58s cubic-bezier(0.65, 0.05, 0.36, 1) 0.18s, border-top-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s, border-bottom-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s,  border-radius 0.48s cubic-bezier(0.65, 0.05, 0.36, 1), background-color 0.58s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s;
		        transition: height 0.58s cubic-bezier(0.65, 0.05, 0.36, 1) 0.18s, border-top-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s, border-bottom-color 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s, border-radius 0.48s cubic-bezier(0.65, 0.05, 0.36, 1), background-color 0.58s cubic-bezier(0.65, 0.05, 0.36, 1) 0.2s;
	}

	#menu-main a {
		display: block;
		padding: 20px 0 19px;
		line-height: 1.4;
		color: #FFF;
		font-size: 16px;
		letter-spacing: 0.1px;
	}
	#menu-main a:hover {
		color: rgba(255,255,255,0.4);
	}
	#menu-main li.current a {
		color: rgba(255,255,255,0.2) !important;
	}
	#menu ul li.current a:after,
	#menu ul li.current-user a:after,
	#menu ul li.menu-link a:after,
	#menu ul li.menu-link a:hover:after {
		position: absolute;
		bottom: 0;
		opacity: 1.0;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		-webkit-transition: 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.08);
		        transition: 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.08);
		-webkit-transform: scaleX(1.0);
		        transform: scaleX(1.0);
	}
	.user-online {
		display: block;
		padding: 8px 12px 6px;
	}

	/*** メニュー ***/
	#menu-bg,
	#menu-close,
	#menu-buttons,
	#menu-open-link,
	#menu ul.inline li,
	#menu-toggle-label {
		display: block;
	}
	#menu-main {
		visibility: hidden;
		overflow-y: auto;
		z-index: 9900;
		top: 41px;
		left: 0;
		opacity: 0;
		width: 100%;
		min-width: 220px;
		height: calc(100vh - 45px);
		margin: 0;
		padding: 18px 0 0;
		line-height: 45px;
		font-size: 15px;
		text-align: center;
		-webkit-transition: visibility 0s ease 0.88s, opacity 0.24s cubic-bezier(0.65, 0.05, 0.36, 1);
		        transition: visibility 0s ease 0.88s, opacity 0.24s cubic-bezier(0.65, 0.05, 0.36, 1);

		-webkit-overflow-scrolling: touch;
	}
	#menu-toggle-st:target ~ #menu > #menu-main,
	#menu-toggle-st:checked ~ #menu > #menu-main {
		visibility: visible;
		opacity: 1.0;
		-webkit-transition: visibility 0s ease 0s, opacity 0.24s cubic-bezier(0.65, 0.05, 0.36, 1);
		        transition: visibility 0s ease 0s, opacity 0.24s cubic-bezier(0.65, 0.05, 0.36, 1);
	}

	#menu-main li.menu-link:first-child {
		border-top: 1px solid rgba(255,255,255,0.1);
	}
	#menu-main li.menu-link {
		visibility: hidden;
		opacity: 0;
		margin: 0 60px;
		-webkit-transition: visibility 0s ease 0.32s, opacity 0.42s ease-out, -webkit-transform 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95), filter 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95);
		        transition: visibility 0s ease 0.32s, opacity 0.42s ease-out, transform 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95), filter 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95);
		-webkit-transform: translateY(-10px);
		        transform: translateY(-10px);
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link,
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link {
		visibility: visible;
		opacity: 1.0;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}

	#menu-main li#menu-close {
		-webkit-transition: 0.36s cubic-bezier(0.39, 0.86, 0.51, 0.95);
		        transition: 0.36s cubic-bezier(0.39, 0.86, 0.51, 0.95);
		-webkit-transform: scale(0.2);
		        transform: scale(0.2);
	}
	#menu-toggle-st:target ~ #menu > #menu-main li#menu-close,
	#menu-toggle-st:checked ~ #menu > #menu-main li#menu-close {
		visibility: visible;
		opacity: 1.0;
		-webkit-transform: scale(1.0);
		        transform: scale(1.0);
	}

	/* 遅延処理 */
	#menu-main li.menu-link:nth-child(1),
	#menu-main li.menu-link:nth-child(2),
	#menu-main li.menu-link:nth-child(3),
	#menu-main li.menu-link:nth-child(4),
	#menu-main li.menu-link:nth-child(5),
	#menu-main li.menu-link:nth-child(n+6) {
		-webkit-transition-delay: 0.42s;
		        transition-delay: 0.42s;
	}

	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link,
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link {
		-webkit-transition: opacity 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95),  border-bottom 0.68s cubic-bezier(0.39, 0.86, 0.51, 0.95), -webkit-transform 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95), filter 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95);
		        transition: opacity 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95), border-bottom 0.68s cubic-bezier(0.39, 0.86, 0.51, 0.95), transform 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95), filter 0.38s cubic-bezier(0.39, 0.86, 0.51, 0.95);
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(1),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(1) {
		-webkit-transition-delay: 0.44s;
		        transition-delay: 0.44s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(2),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(2) {
		-webkit-transition-delay: 0.48s;
		        transition-delay: 0.48s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(3),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(3) {
		-webkit-transition-delay: 0.52s;
		        transition-delay: 0.52s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(4),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(4) {
		-webkit-transition-delay: 0.56s;
		        transition-delay: 0.56s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(5),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(5) {
		-webkit-transition-delay: 0.62s;
		        transition-delay: 0.62s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li.menu-link:nth-child(n+6),
	#menu-toggle-st:checked ~ #menu > #menu-main li.menu-link:nth-child(n+6) {
		-webkit-transition-delay: 0.64s;
		        transition-delay: 0.64s;
	}
	#menu-toggle-st:target ~ #menu > #menu-main li#menu-close,
	#menu-toggle-st:checked ~ #menu > #menu-main li#menu-close {
		-webkit-transition-delay: 0.86s;
		        transition-delay: 0.86s;
	}

	/* 検索窓表示でアイコン非表示 */
	#searchbox-st:checked ~ #menu #menu-buttons > #menu-toggle-label {
		opacity: 0;
		-webkit-transition: 0.84s cubic-bezier(0.65, 0.05, 0.36, 1);
		        transition: 0.84s cubic-bezier(0.65, 0.05, 0.36, 1);
		-webkit-transform: scaleX(0) translateY(-42px);
		        transform: scaleX(0) translateY(-42px);
	}
	#searchbox-st:checked ~ #menu > #menu-main li.menu-link {
		top: 0;
		opacity: 0.3;
		-webkit-transition: 0.34s ease-out;
		        transition: 0.34s ease-out;
		-webkit-transform: scale(0.8) translateY(20px);
		        transform: scale(0.8) translateY(20px);

		-webkit-filter: blur(3px);
		        filter: blur(3px);
	}

	/** 検索窓表示ボタン **/
	#show-searchbox {
		z-index: 9200;
		top: -1px;
		width: 45px;
		height: 45px;
		line-height: 47px;
		-webkit-transition: 0.48s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0.18s;
		        transition: 0.48s cubic-bezier(0.46, 0.03, 0.52, 0.96) 0.18s;
	}
	#show-searchbox a {
		color: rgba(0,0,0, 0.2);
		font-size: 14px;
		-webkit-transition: opacity 0.32s ease-out 0.86s, color 0.48s ease-out, transform 0.32s ease-out 0.86s;
		        transition: opacity 0.32s ease-out 0.86s, color 0.48s ease-out, transform 0.32s ease-out 0.86s;
	}

	/* メニュー表示時 */
	#menu-toggle-st:target ~ #menu > #show-searchbox,
	#menu-toggle-st:checked ~ #menu > #show-searchbox {
		top: 6px;
		-webkit-transition: 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.32s;
		        transition: 0.42s cubic-bezier(0.65, 0.05, 0.36, 1) 0.32s;
	}
	#menu-toggle-st:target ~ #menu > #show-searchbox a,
	#menu-toggle-st:checked ~ #menu > #show-searchbox a {
		color: rgba(255,255,255,0.2);
		-webkit-transition: 0.48s ease-out 0s;
		        transition: 0.48s ease-out 0s;
	}
	/* 検索窓表示時 */
	#searchbox-st:checked ~ #menu > #show-searchbox a {
		opacity: 0;
		-webkit-transform: scale(0.4) rotate(0);
		        transform: scale(0.4) rotate(0);
	}

	/** 検索窓 **/
	#searchbox {
		z-index: 9100;
		top: 0;
		height: 0;
		-webkit-transition: height 0s ease 0.68s, transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0);
		        transition: height 0s ease 0.68s, transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0);
	}
	#searchbox-st:checked ~ #menu ~ #searchbox {
		height: 45px;
		-webkit-transition: transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
		        transition: transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
	}

	/* 検索文字列 */
	#searchbox [type="text"] {
		position: absolute;
		z-index: 9110;
		width: 100%;
		height: 45px;
		padding-right: 90px;
		border: 2px solid #222;
		border-top: none;
		border-right: none;
		border-left: none;
		-webkit-transition: visibility 0s ease 0.88s, opacity 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0), -webkit-transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.86s2s;
		        transition: visibility 0s ease 0.88s, opacity 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0), transform 0.78s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.86s2s;
	}
	#searchbox-st:checked ~ #menu ~ #searchbox [type="text"] {
		-webkit-transition: visibility 0s ease 0s, opacity 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s, -webkit-transform 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
		        transition: visibility 0s ease 0s, opacity 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s, transform 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
	}
	/* メニュー表示時 */
	#menu-toggle-st:target ~ #searchbox [type="text"],
	#menu-toggle-st:checked ~ #searchbox [type="text"] {
		border: 2px solid #222;
		border-radius: 8px;
	}

	/** 検索窓閉じるボタン **/
	#searchbox-close {
		top: 1px;
		right: 45px;
		width: 43px;
		height: 43px;
		-webkit-transition: 0s;
		        transition: 0s;
		-webkit-transform: scale(1.0);
		        transform: scale(1.0);
	}
	#searchbox-st:checked ~ #menu ~ #searchbox > #searchbox-close {
		z-index: 9120;
		-webkit-transition: 0s;
		        transition: 0s;
	}
	#hide-searchbox-button {
		width: 43px;
		height: 43px;
		border-right: 1px solid rgba(0,0,0,0.05);
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		-webkit-transform-origin: 0 0;
		        transform-origin: 0 0;
	}
	#searchbox-st:checked ~ #menu ~ #searchbox > #searchbox-close #hide-searchbox-button {
		-webkit-transition: -webkit-transform 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
		        transition:         transform 0.68s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.32s;
		-webkit-transform: scaleY(1.0);
		        transform: scaleY(1.0);
	}

	#searchbox-close span.close-button-left,
	#searchbox-close span.close-button-right {
		top: 21.5px;
		left: 32px;
		opacity: 0;
		width: 13px;
		margin-left: 0;
		background-color: #CCC;
		-webkit-transition: 0s ease 0.8s;
		        transition: 0s ease 0.8s;
		-webkit-transform-origin: center center;
		        transform-origin: center center;
	}
	#searchbox-st:checked ~ #menu ~ #searchbox > #searchbox-close span.close-button-left {
		left: 12px;
		opacity: 1.0;
		-webkit-transition: 0.68s cubic-bezier(0.18, 0.89, 0.32, 1.0) 1.2s;
		        transition: 0.68s cubic-bezier(0.18, 0.89, 0.32, 1.0) 1.2s;
		-webkit-transform: rotate(45deg) scaleY(1.0);
		        transform: rotate(45deg) scaleY(1.0);
	}
	#searchbox-st:checked ~ #menu ~ #searchbox > #searchbox-close span.close-button-right {
		left: 12px;
		opacity: 1.0;
		-webkit-transition: 0.68s cubic-bezier(0.18, 0.89, 0.32, 1.0) 1.2s;
		        transition: 0.68s cubic-bezier(0.18, 0.89, 0.32, 1.0) 1.2s;
		-webkit-transform: rotate(-45deg) scaleY(1.0);
		        transform: rotate(-45deg) scaleY(1.0);
	}

	/** 検索ボタン **/
	#searchbox [type="submit"] {
		display: block;
		z-index: 9120;
		right: 0;
		width: 45px;
		height: 45px;
		line-height: 47px;
		color: #222;
		font-size: 14px;
		text-align: center;
		-webkit-transform: scale(0.8);
		        transform: scale(0.8);
	}

	/*** 制限 ***/
	#main.entry-restriction {
		padding-bottom: 0;
	}
	.entry-restriction-single {
		padding-bottom: 45px !important;
	}
	.entry-restriction-item {
		padding: 30px 0 !important;
	}

	/*** その他 ***/
	.form-input-half {
		width: 100%;
	}
	.column,
	#content-single {
		padding: 60px 30px;
	}
	.entry .content {
		padding: 40px 30px 25px;
	}
	.post-item {
		padding: 30px;
	}
	#nav-page {
		margin: 30px auto;
	}
	.entry .content-information {
		padding-bottom: 40px;
	}
	#content-single.information {
		padding: 10px 30px 40px;
	}
	#minimal {
		max-width: 320px;
	}
}

@media only screen and (max-width: 375px) {
	#header,
	#container,
	.nav-gallery,
	.footer-content {
		width: 90%;
	}
	.archives {
		width: 100%;
	}
}

@media only screen and (max-width: 320px) {
	#header,
	#container,
	.nav-gallery,
	.footer-content {
		width: 95%;
	}
}