@charset "utf-8";
/*
Theme Name: swx2017
Theme URI: http://
Description: テーマ「swx2017」はシンプルかつミニマムにまとめた swx.jp 用のテンプレートです。ヽ(*‘ω‘ *)ゝ
Version: 1.0
Author: zawa
Author URI: http://swx.jp/
*/
/* ------------------------------------------ */
/* swx.jp : style.css                         */
/*                            2017.01.09 zawa */
/* ------------------------------------------ */
/*
	別途ファイル
	・色定義(col_XXXX.css)
	・小サイズ用(small.css)

	※幅480px以下でスマホ用表示に切り替える

*/
/* ------------------------------------------ */
/*
	2017.06.09
	フォントサイズ調整
	・表示幅 480～1920px でサイズ可変
	・各サイズはルート要素(html)に合わせ行うように rem で統一させる
*/
/* ------------------------------------------ */
/* 縮小用 */
@import url(./small.css?tm=20190114);

/* プラグイン用 */
@import url(./plugin.css?tm=20190114);

/* 色変更用 */
@import url(./color_sky.css?tm=20190114);
/*
@import url(./color_blue.css?tm=20190114);
@import url(./color_sky.css?tm=20190114);
@import url(./color_green.css?tm=20190114);
@import url(./color_yellow.css?tm=20190114);
@import url(./color_orange.css?tm=20190114);
@import url(./color_pink.css?tm=20190114);
@import url(./color_purple.css?tm=20190114);
*/


/* ------------------------------------------ */
/* reset */
* {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	border-color: inherit;
	border-style: none;
	border-image: none;
	border-width: 0;
}


/* ------------------------------------------ */
/* base */
html {
	/* ブラウザデフォルトサイズ(16px) */
	font-size: 100%;
	/* スマホの自動サイズ調整を固定化 */
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}
/* 表示幅 480～1920px に合わせフォントサイズを 16～24px に調整 */
@media (min-width: 480px) {
	:root {
		font-size: calc(1rem + ((1vw - 4.8px) * 0.5556)); /* Where: * 0.5556 = 100 * font_Size_Difference / viewport_Width_Difference */
	}
}
/* 表示幅 1920px 以上はデフォルトの 1.5倍(24px)固定 */
@media (min-width: 1920px) {
	:root {
		font-size: 24px;
	}
}

body {
	font-family: 
		-apple-system, "Noto Sans Japanese", 
		"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", 
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", 
		"メイリオ", Meiryo, 
		"MS P Gothic", sans-serif;
	/*font-size: 1rem;	/* 16px */
	font-style: normal;
	font-weight: normal;
	text-align: left;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	position: relative;
	background-color: rgba(180, 180, 180, 1.0);
	background-image: url(./img/bk01.png);
	background-repeat: no-repeat;
	background-position: right 0 bottom 0;
}

h1 { font-size: 32px; font-size: 2.0rem;   line-height: 110%; font-weight: bold; }
h2 { font-size: 28px; font-size: 1.75rem;  line-height: 110%; font-weight: bold; }
h3 { font-size: 23px; font-size: 1.4rem;   line-height: 110%; font-weight: bold; }
h4 { font-size: 20px; font-size: 1.25rem;  line-height: 110%; font-weight: bold; }
h5 { font-size: 18px; font-size: 1.125rem; line-height: 110%; font-weight: bold; }
h6 { font-size: 16px; font-size: 1rem;     line-height: 110%; font-weight: bold; }

a {
	text-decoration: none;
	padding: 0.5rem;
}

a, input[type="submit"], button {
	cursor: pointer;
}

a.nolink {
	cursor: default;
}
a.nolink:hover {
	background-color: rgba(1, 1, 1, 0.0) !important;
	color: inherit !important;
}

input, textarea, button, .def_btn {
	padding: 0.25rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.4rem;
	box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.3) inset;
	background-color: rgba(255, 255, 255, 1.0);
	font-size: 1rem;
}
input[type="submit"], button, .def_btn {
	padding: 0.5rem 2.5rem;
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	font-size: 1rem;
}
input[type="submit"]:active, button:active, .def_btn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.0);
}

img {
	vertical-align: bottom; /* 画像下の隙間をなくす */
}


/* ------------------------------------------ */
/* common */

/* スクロール */
.scroll {
	overflow: auto;
}

/* 配置 */
.float_r {
	float: right;
}
.float_l {
	float: left;
}
.float_clear {
	clear: both;
}
.block_center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.table_cell {
	display: table-cell;
}
.valign_top {
	vertical-align: top;
}
.valign_middle {
	vertical-align: middle;
}
.valign_bottom {
	vertical-align: bottom;
}

/* テキスト */
.text_left {
	text-align: left;
}
.text_center {
	text-align: center;
}
.text_right {
	text-align: right;
}

/* インラインブロック */
.inline_block {
	display: inline-block;
}

/* ブロック非表示 */
.none {
	display: none;
}

/* ul横並び */
ul.way_2, ul.way_3 {
	margin: 0 auto;
}
ul.way_2 li, ul.way_3 li {
	margin: 0.5rem;
	padding: 0;
	list-style: none;
	display: inline-block;
	vertical-align: top;
}
ul.way_2 li {
	width: 45%;
}
ul.way_3 li {
	width: 25%;
}
ul.way_2 li.img, ul.way_3 li.img {
	text-align: center;
}
ul.way_2 li.img a, ul.way_3 li.img a {
	padding: 0;
}
ul.way_2 li.img img, ul.way_3 li.img img {
	max-width: 100%;
	max-height: 100%;
}
ul.way_2 li.text a, ul.way_3 li.text a {
	padding: 0.5rem;
}

/* ul横並び flex版 */
ul.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
ul.flex li {
	list-style: none;
	flex-grow: 1;
	width: 45%;
}
ul.flex li.way_3 {
	width: 25%;
}

ul.flex li.order_1 {
	order: 1;
}
ul.flex li.order_2 {
	order: 2;
}
ul.flex li.order_3 {
	order: 3;
}
ul.flex li.img {
	order: 1;	/* 縮小でtextと入れ替わる */
}
ul.flex li.text {
	order: 2;
}

ul.flex li.img {
	text-align: center;
}
ul.flex li.img img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}
ul.flex li.img p {
	margin: 0.25rem 0 1.0rem 0;
}
ul.flex li.img a {
	padding: 0;
}

/* dl dt dd */
dl {
	padding: 0.5rem;
}
dt {
	font-size: 1.15rem;
}
dd {
	margin: 0.75rem;
	font-size: 1.0rem;
}


/* 角丸 */
.radius_03rem {
	border-radius: 0.3rem;	/* input系と同じ */
}
.radius_06rem {
	border-radius: 0.6rem;
}

/* ボーダ */
.border_none {
	border: none;
}
.border_solid_1px {
	border-style: solid;
	border-width: 1px;
}
.border_dot_1px {
	border-style: dotted;
	border-width: 1px;
}


/* ------------------------------------------ */
/* balloon */

/* left */
.balloon_left {
	position: relative;
	background: #ffffff;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.3rem;
}
.balloon_left:after, .balloon_left:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_left:after {
	border-right-color: #ffffff;
	border-width: 4px;
	margin-top: -4px;
}
.balloon_left:before {
	border-right-color: inherit;
	border-width: 5px;
	margin-top: -5px;
}

/* right */
.balloon_right {
	position: relative;
	background: #ffffff;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.3rem;
}
.balloon_right:after, .balloon_right:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_right:after {
	border-left-color: #ffffff;
	border-width: 4px;
	margin-top: -4px;
}
.balloon_right:before {
	border-left-color: inherit;
	border-width: 5px;
	margin-top: -5px;
}


/* ------------------------------------------ */
/* 全体構成 */
#container {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: 100%;
	min-width: 320px;
	border-style: none;
}


/* ------------------------------------------ */
/* header */
#header {
	margin: 0px;
	position: relative;
	display: block;
}
#header h1 {
	bottom: 51%;
	left: 3%;
	font-size: 2.5rem;
	color: #ffffff;
	position: absolute;
	z-index: 24;
}
#header h1 a {
	color: #ffffff;
	padding: 8px;
	text-shadow: -1px -1px 3px rgba(50, 50, 50, 1.00),
				 -1px -1px 3px rgba(50, 50, 50, 1.00),
				  0px -1px 3px rgba(50, 50, 50, 1.00),
				  0px -1px 3px rgba(50, 50, 50, 1.00),
				  1px -1px 3px rgba(50, 50, 50, 1.00),
				  1px -1px 3px rgba(50, 50, 50, 1.00),
				 -1px  0px 3px rgba(50, 50, 50, 1.00),
				 -1px  0px 3px rgba(50, 50, 50, 1.00),
				  1px  0px 3px rgba(50, 50, 50, 1.00),
				  1px  0px 3px rgba(50, 50, 50, 1.00),
				 -1px  1px 3px rgba(50, 50, 50, 1.00),
				 -1px  1px 3px rgba(50, 50, 50, 1.00),
				  0px  1px 3px rgba(50, 50, 50, 1.00),
				  0px  1px 3px rgba(50, 50, 50, 1.00),
				  1px  1px 3px rgba(50, 50, 50, 1.00),
				  1px  1px 3px rgba(50, 50, 50, 1.00),
				  3px  3px 4px rgba(50, 50, 50, 1.00) !important;
}
#header .description {
	top: 51%;
	left: 4%;
	font-size: 1.0rem;
	z-index: 20;
	position: absolute;
	color: #ffffff;
	text-shadow: -1px -1px 2px rgba(50, 50, 50, 1.00),
				 -1px -1px 2px rgba(50, 50, 50, 1.00),
				  0px -1px 2px rgba(50, 50, 50, 1.00),
				  0px -1px 2px rgba(50, 50, 50, 1.00),
				  1px -1px 2px rgba(50, 50, 50, 1.00),
				  1px -1px 2px rgba(50, 50, 50, 1.00),
				 -1px  0px 2px rgba(50, 50, 50, 1.00),
				 -1px  0px 2px rgba(50, 50, 50, 1.00),
				  1px  0px 2px rgba(50, 50, 50, 1.00),
				  1px  0px 2px rgba(50, 50, 50, 1.00),
				 -1px  1px 2px rgba(50, 50, 50, 1.00),
				 -1px  1px 2px rgba(50, 50, 50, 1.00),
				  0px  1px 2px rgba(50, 50, 50, 1.00),
				  0px  1px 2px rgba(50, 50, 50, 1.00),
				  1px  1px 2px rgba(50, 50, 50, 1.00),
				  1px  1px 2px rgba(50, 50, 50, 1.00);
}
#header img {
	width: 100%;
	z-index: 5;
}


/* ------------------------------------------ */
/* navi */
nav {
	text-align: center;
	font-size: 1.5rem;
	/*background-color: rgba(0, 0, 0, 0.5);*/
}
nav ul {
	height: auto;
	list-style: none;
	width: 100%;
	/* table
	display: table;
	table-layout: fixed;
	border-bottom: 0px;
	border-style: solid;
	*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
nav ul li {
	/* table
	display: table-cell;
	*/
	flex-grow: 1;
	/*min-width: 20%;*/
}
nav ul li a {
	display: block;
	line-height: 200%;
}
nav ul li a:visited {
	color: #ffffff;
}
nav ul li a.selected {
	/* table
	margin-top: 0.25rem;
	*/
	border-bottom: 0.25rem;
	border-style: solid;
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.3);
}
nav ul li span {
	display: none;
}
nav ul.category li a {
}

/* page */
nav ul.page {
	/*background-color: rgba(255, 255, 255, 0.3);*/
}
nav ul.page li a {
	color: #ffffff;
}

/* category */
nav ul.category {
	font-size: 1.0rem;
	border: none;
	/*background-color: rgba(255, 255, 255, 0.3);*/
}
nav ul.category li {
}
nav ul.category li a {
	margin: 0.5rem;
	border-radius: 0.4rem;
	border: 1px;
	border-style: solid;
	background-color: rgba(255, 255, 255, 0.4);
	color: #ffffff;
}
nav ul.category li a:hover,
nav ul.category li a.selected {
	background-color: rgba(255, 255, 255, 1.0);
}


/* ------------------------------------------ */
/* footer */

footer {
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 1.0rem;
	position: relative;
}
#footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#footer section {
	margin: 1.5rem;
	padding: 1.5rem;
	max-width: 16%;
	min-width: 14rem;
	/*flex: 1;*/
	flex-grow: 1;

	background-color: rgba(255, 255, 255, 0.25);
	box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
#footer section h3 {
	margin: 0 0 0.5rem 0;
}
#footer section ul ,
#footer section ol {
	list-style-type: none;
}


/* profile */
#footer section.profile a {
	padding: 0;
}
#footer section.profile img {
	max-width: 100%;
}
#footer section.profile .name {
	font-weight: bold;
}
#footer section.profile .icon {
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	justify-content: center;
}
#footer section.profile .icon a {
	margin: 0.75rem;
	padding: 0;
	display: block;
}

/* archives */
#footer section.archives ul {
	max-height: 20rem;
	overflow: auto;
}
#footer section.archives li {
}
#footer section.archives a {
	line-height: 1.75rem;
	padding: 0.5rem;
}

/* tagcloud */
#footer section.tagcloud a ,
#footer section div.tagcloud a {
	padding: 0.5rem;
	line-height: 1.75rem;
}

/* search */
#footer section.search input[type="text"] ,
#footer section .searchform input[type="text"] {
	width: 65%;
}
#footer section .searchform .screen-reader-text {
	display: none;
}
#footer section.search input[type="submit"] ,
#footer section .searchform input[type="submit"] {
	padding: 0.5rem 0;
	width: 20%;
}

/* copyright */
footer .copyright {
	text-align: center;
	margin-top: 0.5rem;
	width: 100%;
}

/* 表示切替checkbox */
footer .footer_checkbox,
footer .footer_checkbox[type="checkbox"] + .footer_label {
	display: none;
}

/* 画像バナー */
#footer ul.image_banner li {
	padding: 1.0rem 0;
}
#footer ul.image_banner li a {
	padding: 0;
}

/* ------------------------------------------ */
/* archives */

/* ※幅480以下で縦並びに */
#archives {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#archives_title > article,
#archives_title > section {
	margin: 5%;
	padding: 5%;
	background: #ffffff;
	box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.25);
}

/* ※幅480以下で隙間をなくす */
#archives > article {
	margin: 1.5rem;
	padding: 0;
	background: #ffffff;
	box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.25);

	max-width: 380px; /* サムネの最大幅 */

	display: flex;
	flex-direction: column;
}

#archives > article header {
	margin: 0.5rem;
	display: flex;
	flex-direction: column;
	order: 1;
}
#archives > article header h2 {
	order: 1;
	margin: 0.25rem 0;
	font-size: 1.25rem;
}
#archives > article header time {
	font-size: 0.8rem;
	opacity: 0.6;
	order: 0;
}
#archives > article header .comment {
	font-size: 0.8rem;
	text-align: right;
	order: 2;
}
#archives > article a.thumbnail {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 320px;
	height: 320px;
	overflow: hidden;
	display: block;
}
#archives > article a.thumbnail img {
	object-fit: cover;
	width: inherit;
	height: inherit;
	order: 0;
}
#archives > article .text {
	margin: 0.5rem;
	order: 2;
	overflow-wrap: break-word;
	word-break: break-all;
	font-size: 0.90rem;
	line-height: 1.2rem;
}
#archives > article .classification {
	margin: 0.5rem;
	font-size: 0.8rem;
	text-align: right;
	order: 3;
}

#archives > article .classification ul {
	margin: 0;
	list-style: none;
}
#archives > article .classification ul:before {
	opacity: 0.75;
}
#archives > article .classification ul.category:before {
	content: "Category";
}
#archives > article .classification ul li {
	margin: 0 0.3rem;
	display: inline-block;
	vertical-align: baseline;
}

#archives .postlink {
	display: block;
	margin: 2.5%;
	width: 100%;
}


/* ------------------------------------------ */
/* contents */

/* ※幅480以下で隙間をなくす */
#contents > article,
#contents > section {
	margin: 5%;
	padding: 5%;
	background: #ffffff;
	box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.25);
}

#open-commentform {
	margin: 2.0rem 0;
}


/* ------------------------------------------ */
/* post */

/* header */
.post header {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}
.post header h2 {
	margin: 1.5rem 0;
	order: 1;
}
.post header time {
	font-size: 0.8rem;
	order: 0;
}
.post header .comment {
	font-size: 0.8rem;
	text-align: right;
	order: 2;
}

/* text */
.post .text {
	line-height: 1.8rem;
}
.post .text p {
	margin-bottom: 0.5rem;
}
.post .text a {
	padding: 0;
}

/* img */
.post .text img {
	margin: 2rem auto;
	display: block;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.25);
}

/* blockquote */
.post blockquote {
	margin: 1.0rem;
	padding: 1.0rem;
	border: 1px;
	border-style: dotted;
	border-color: rgba(0, 0, 0, 0.5);
}
.post blockquote footer {
	margin-top: 1.0rem;
	padding: 0.25rem;
	text-align: right;
}
.post blockquote footer a {
	color: #ffffff;
}

/* more-link */
.post .text .more-link:before {
	content: "\A";
	white-space: pre;
}


/* classification */
.post .classification {
	text-align: right;
}
.post .classification {
	font-size: 0.8rem;
}
.post .classification ul {
	margin: 1rem 0;
	list-style: none;
}
.post .classification ul:before {
	opacity: 0.75;
}
.post .classification ul.category:before ,
.post .classification ul.post-categories:before {
	content: "Category";
}
.post .classification ul.tag:before ,
.post .classification ul.post-tags:before {
	content: "Tag";
}
.post .classification ul li {
	margin: 0 0.3rem;
	display: inline-block;
	vertical-align: baseline;
}
.post .classification p.permalink:before {
	opacity: 0.75;
	content: "Permalink";
}
.post .classification p.permalink input {
	margin: 0 0.3rem;
	width: 14rem;
	text-align: right;
}

/* Tagcloud */
.post .tagcloud a {
	display: inline-block;
	padding: 0.5rem;
	margin: 0.5rem;
}


/* ------------------------------------------ */
/* postlink */

.postlink {
	margin: 2.0rem 0;
}
.postlink span {
	margin: 0.5rem;
}
.postlink span.previous {
	float: left;
}
.postlink span.next {
	float: right;
}
.postlink:after {
	content: '';
	display: block;
	clear: both;
}
.postlink span.num a {
	margin: 0 0.25rem;
	padding: 0.5rem;
}


/* ------------------------------------------ */
/* related */

.related ul {
	list-style: none;
	width: 100%;
	display: table;
	table-layout: fixed;
}
.related li {
	margin: 0;
	padding: 1.0rem;
	display: table-cell;
	vertical-align: top;
	text-align: center;
}
.related img {
	margin: 0.5rem auto;
	height: auto;
	max-width: 100%;
	display: block;
}
.related a {
	padding: 0;
}


/* ------------------------------------------ */
/* comment */

.comment h3 {
	margin: 0 0 0.5rem 0;
}
.comment img,
.comment div.comment-body {
	vertical-align: top;
	display: inline-block;
}
.comment img {
	max-width: 100%;
}
.comment em {
	font-style: italic;
}
.comment li {
	margin: 1.5rem;
	list-style: none;
}
.comment ul.children li {
	margin-right: 0;
}
.comment .comment-header {
	margin-bottom: 0.5rem;
}
.comment .comment-header p,
.comment .comment-header time {
	display: inline-block;
	vertical-align: baseline;
}
.comment .comment-header time {
	margin-left: 1.5rem;
	opacity: 0.6;
	font-size: 0.8rem;
}

.comment input[type="text"] {
	width: 40%;
	min-width: 15rem;
}
.comment textarea {
	width: 94%;
	height: 7rem;
}

/* respond */
.respond div,
.respond p {
	margin: 1.0rem 0;
}


/* ------------------------------------------ */
/* gallery */

.gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.gallery li {
	margin: 1.5rem;
	list-style: none;
	position: relative;
}
.gallery li time {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	text-align: right;
	font-size: 0.8rem;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.5);
}
/*
.gallery li:hover time {
	display: none;
}
*/
.gallery a ,
.img_list a {
	padding: 0;
}