@charset "utf-8";

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

@media only screen and (max-width: 768px) {
	div {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	::-moz-placeholder {
		font-size: 14px;
	}
	:-ms-input-placeholder {
		font-size: 14px;
	}
	::-webkit-input-placeholder {
		font-size: 14px;
	}
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
	input[type="submit"] {
		padding: 12px 22px;
		font-size: 15px !important;
	}
}

@media only screen and (max-width: 580px) {
	/*** 基本の文字サイズ ***/
	body {
		font-size: 15px;
	}
	.message,
	#form-item,
	.item-content {
		font-size: 13px;
	}
	h1 {
		font-size: 160%;
	}
	h2 {
		font-size: 140%;
	}
	h3 {
		font-size: 130%;
	}
	h4 {
		font-size: 120%;
	}
	h5 {
		font-size: 110%;
	}
	h6 {
		font-size: 100%;
	}
	.entry-title {
		margin: 0;
		padding: 0;
		font-size: 140%;
	}
	blockquote {
		font-size: 118%;
	}
	pre {
		font-size: 90%;
	}
	.post-list {
		font-size: 80%;
	}

	/*** フォーム ***/
	.form-box input,
	.form-box select,
	.form-box textarea {
		width: 100%;
	}
	#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-show {
		padding: 0 20px 30px;
	}
	#form-options .form-rememberme {
		margin: 0;
		padding: 0;
		text-align: right;
	}

	/*** メニュー・検索 ***/
	#menu {
		overflow-x: auto;
		overflow-y: hidden;
		position: relative;
		border-bottom: none;

		-webkit-overflow-scrolling: touch;
	}
	#menu ul {
		overflow-x: auto;
		overflow-y: hidden;
		position: relative;
		border-bottom: none;
		white-space: nowrap;

		-webkit-overflow-scrolling: touch;
	}
	#menu ul:after {
		display: block;
		position: absolute;
		z-index: 1;
		top: 48px;
		width: 100vw;
		height: 1px;
		background-color: #EEE;
		content: "";
	}
	#menu ul li {
		border-bottom: 1px solid #EEE;
		line-height: 50px;
	}
	#menu ul li.menu-icon,
	#menu ul li.search,
	#menu ul li.search label,
	#menu a:link,
	#menu a:visited {
		z-index: 1500;
		width: 50px;
		height: 48px;
		color: #CCC;
	}
	#menu a:hover,
	#menu a:active {
		color: #505050;
	}
	#menu ul li.menu-icon:after {
		height: 48px;
	}
	#menu ul li.menu-icon a:before,
	#menu ul li.menu-icon a:hover:before {
		display: none;
	}

	#menu ul li.search {
		z-index: 9999;
	}
	#menu ul li.search input[type="text"] {
		z-index: -99;
		left: 50px;
		width: 100vw;
		height: 49px;
		margin-left: -100vw;
		padding-right: 60px;
		padding-left: 6vw;
		-webkit-transition: opacity 0.88s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0s, width 0s ease 1.2s, height 0s ease 1.2s, -webkit-transform 0s ease 1.2s;
		        transition: opacity 0.88s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0s, width 0s ease 1.2s, height 0s ease 1.2s, transform 0s ease 1.2s;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}
	#menu ul li.search input[type="text"]:focus {
		z-index: 2400 !important;
		-webkit-transition: opacity 0.88s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.44s;
		        transition: opacity 0.88s cubic-bezier(0.18, 0.92, 0.32, 1.0) 0.44s;
		-webkit-transform: scale(1.0);
		        transform: scale(1.0);
	}
	#menu ul li.search [type="submit"] {
		width: 50px;
		height: 49px;
		margin-left: -25px;
		padding: 0;
		border: none;
		border-right-color: transparent;
		color: #CCC;
		font-size: 12px !important;
	}
	#menu ul li.search [type="submit"]:hover,
	#menu ul li.search [type="submit"]:active,
	#menu ul li.search label:hover ~ [type="submit"] {
		opacity: 1.0;
		color: #CCC;
		-webkit-transition-delay: 0.44s;
		        transition-delay: 0.44s;
	}
	#menu ul li [type="text"]:focus + [type="submit"] {
		z-index: 2500 !important;
		color: #202020 !important;
	}

	#menu ul li.menu-icon a:before,
	#menu ul li.current:before {
		width: 51px;
		margin-top: 48px;
	}
	#menu ul li i {
		vertical-align: middle;
	}

	/*** 主要部分 ***/
	#header {
		padding: 60px 5% 40px;
	}
	#footer {
		padding: 40px 0;
	}
	.entry:first-child {
		margin-top: 40px;
	}
	#content-dark {
		padding: 40px 20px;
		border-radius: 4px;
	}
	#content-dark dl {
		width: 100%;
		margin: 0 auto;
		text-align: left;
	}
	#content-dark [type="text"],
	#content-dark [type="email"],
	#content-dark [type="password"] {
		height: 52px;
	}
	#content-dark [type="submit"] {
		padding: 12px 16px;
	}
	.minimal {
		padding-right: 0;
		padding-left: 0;
	}
	.entry-title + .link,
	.entry-title + .share {
		margin-top: 20px !important;
	}

	/*** インフォメーション ***/
	#information {
		margin: 40px auto;
		padding-bottom: 40px;
	}
	.information-content {
		padding-bottom: 40px !important;
	}
	.information-content-file {
		margin-top: 40px;
	}

	/*** エントリー ***/
	.entry {
		margin-bottom: 0 !important;
	}
	.entry .entry-view-title {
		padding: 0;
	}
	.entry-date {
		font-size: 12px;
	}
	.entry-file + .content {
		padding-top: 20px !important;
	}
	#info {
		padding: 30px 5%;
	}

	.entry-restriction + .share {
		margin-top: 30px;
	}
	.share {
		margin-top: 30px;
	}
	.share .icon:before,
	.share .jp-icon:before {
		margin-right: 0;
		line-height: 20px;
	}
	.icon-alt-share {
		display: none;
	}
	.share li a {
		display: block;
		width: 36px;
		height: 20px;
		padding: 3px 8px;
		border: 1px solid #088DD9;
		border-radius: 2px;
		background-color: #088DD9;
		color: #FFF;
	}
	.link:before,
	.share:before {
		display: block;
		width: 30px;
		margin: 0 auto 20px;
		border-bottom: 1px solid #EEE;
		content: "";
	}
	.share:before {
		margin-bottom: 30px;
	}

	#entry_link ul.entry_link {
		text-align: center;
	}
	#entry_link ul.entry_link li {
		width: 48px;
		height: 48px;
		line-height: 49px;
	}
	#entry_link i {
		font-size: 16px;
	}
	#entry_link ul.entry_link li.prev {
		float: left;
		text-align: center;
	}
	#entry_link ul.entry_link li.next {
		float: right;
		text-align: center;
	}
	#entry_link ul.entry_link li.home {
		width: 48px;
		height: 48px;
		margin: 0 10px;
	}
	#entry_link ul.entry_link li.prev i,
	#entry_link ul.entry_link li.next i {
		margin: 0;
	}
	.entry-link-title {
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
	}
	#entry_link a:link,
	#entry_link a:visited {
		display: block;
		width: 46px;
		height: 46px;
		padding: 0;
	}

	#entry .entry ul.link {
		font-size: 15px;
	}
	#entry .entry ul.link li {
		margin: 0 4px;
	}
	#entry .entry ul.link li i {
		margin-left: 2px;
	}
	#entry .entry ul.link li:before,
	#entry .entry ul.link li a:link,
	#entry .entry ul.link li a:visited {
		width: 42px;
		height: 42px;
		line-height: 44px;
		text-align: center;
	}
	.count-n {
		width: 42px;
		height: 42px;
		margin-left: -28px;
	}

	.meta {
		font-size: 12px;
	}
	ul.post-date li {
		margin: 0;
	}
	ul.post-date li:first-child {
		display: block;
	}
	ul.post-date li:nth-child(2) {
		margin-left: 0;
	}
	ul.post-date li:nth-child(3) {
		margin-left: 10px;
	}
	.meta ul li.fa-chain {
		overflow-x: scroll;
		word-break: keep-all;

		-webkit-overflow-scrolling: touch;
	}

	.entry-restriction {
		padding-bottom: 30px;
	}
	.entry-restriction-single {
		padding-bottom: 60px;
	}
	#main.entry-restriction {
		padding-bottom: 5px;
	}
	.entry-restriction-title {
		margin: 0 0 20px;
		padding: 0;
		line-height: 1.0;
	}
	.entry-restriction form,
	.entry-restriction [type="text"],
	.entry-restriction [type="submit"] {
		height: 44px;
		line-height: 44px;
	}
	.entry-restriction [type="text"] {
		padding-right: 44px;
		border-radius: 4px;
	}
	.entry-restriction [type="submit"] {
		width: 44px;
		margin-left: -44px;
		line-height: 38px;
	}

	/*** ページ移動 ***/
	#gallery ~ #nav-page ul {
		margin-top: 30px;
	}
	#nav-page ul li a:link,
	#nav-page ul li a:visited,
	#nav-page ul li.current,
	#nav-page ul li a:before {
		width: 38px;
		height: 38px;
		line-height: 38px;
	}

	/*** 検索結果 ***/
	#search-content form {
		float: none;
		width: 100%;
		margin: 0;
	}
	#result-count {
		float: none;
		width: 100%;
		height: 24px;
		margin: 0;
		border-bottom: 1px solid #EEE;
		line-height: 24px;
	}
	#search-content .search-box [type="submit"] {
		font-size: 14px;
	}

	#main h2 {
		margin-bottom: 20px;
	}
	.page-file {
		margin-top: 40px;
	}

	/*** ギャラリー ***/
	#gallery {
		margin: 0 auto;
		padding: 30px 0 0;
	}
	#gallery .gallery .image-title {
		visibility: visible;
		top: 0;
		opacity: 0;
		padding: 0;
		-webkit-transition: 0s;
		        transition: 0s;
	}
	#gallery .gallery .picture:hover > .image-title {
		top: 0;
		opacity: 0;
		padding: 0;
	}
}

@media only screen and (max-width: 420px) {
	/*** メニュー ***/
	#menu ul li:last-child {
		border-right: none;
	}

	/*** 主要部分 ***/
	#main,
	#footer,
	#nav-page,
	#entry_link,
	#information,
	#content-dark {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	#comment,
	#trackback,
	#comment_form,
	#trackback_url,
	#entry + #comment_form,
	#comment + #comment_form {
	}

	/*** ページ移動 ***/
	#nav-page ul {
		font-size: 15px;
	}
	#gallery ~ #nav-page ul {
		padding-top: 35px;
	}

	/*** ギャラリ－ ***/
	#gallery {
		width: 95%;
	}
}