@charset "UTF-8";
/*
Reset
LastUpdate: 2021/06/20 mainを追加
-------------------------------------------------------------- */
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align:baseline;
	box-sizing: border-box;
}
html {
	font-size: 17px;
	scroll-behavior: smooth;
	overflow-y: scroll;
}
/* html:has(main input[required]) {
	scroll-behavior:auto;
} */
html:has(main input[type="text"][required]),
html:has(main input[type="email"][required]),
html:has(main input[type="tel"][required]),
html:has(main input[type="url"][required]),
html:has(main input[type="password"][required]),
html:has(main input[type="number"][required]),
/* html:has(main input[type="search"][required]), 検索ページは対象外 */
html:has(main input[type="text"][required]),
html:has(main input[type="date"][required]),
html:has(main input[type="month"][required]),
html:has(main input[type="week"][required]),
html:has(main input[type="time"][required]),
html:has(main input[type="datetime-local"][required]){
	scroll-behavior:auto;
}

body {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height: 1.9;/* flexで囲んだ場合に自動的にpでマークアップされないため、divも含めた全体に適用する必要がある */
	line-break: strict; /*for iOS 禁則処理（撥音、拗音、促音、ハイフン、長音、閉じ括弧なども行頭に来ない規則）*/
	animation: fadeIn 1s ease 0s 1 normal;/* Fade In */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;/* ランドスケープ時に文字サイズを変えない */
	-ms-text-size-adjust: 100%;
	/*word-break: break-all;*//* 長い英単語やURLを表示した際のレイアウト崩れを回避。但し英単語の途中でも改行される。 */
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
a {
	vertical-align: baseline;
	text-decoration:none;
	outline:none;
	background: transparent;
	transition: .2s;
	/* box-sizing: border-box; */
}
a:hover,
a:active	{
	text-decoration: underline;
}
a:focus	{
	outline:none;
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
	display: block;
}
audio,canvas,video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
ul {
	list-style: none;
}
ins {
	text-decoration: none;
}
mark {
	background: linear-gradient(transparent 50%, #ffff8d 50%);
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom: solid 1px rgba(0,0,0,.1);;
	cursor: help;
}
table {
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
}
table caption{
	text-align: center;
	margin-bottom: 0.5em;
}
table thead{
	text-align: left;
}
table th,
table td{
	line-height: 1.5;
	vertical-align: middle;
	padding: 1em;
}
table tbody th{
	text-align: left;
	min-width: 100px;
}
table td img,
table td p,
table td ul,
table td ol,
table th dl{
	display: block;
	margin: 0 auto;
	border: none;
}
blockquote,q {
	quotes: none;
}
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
pre,code,kbd,samp,tt{
	/* line-height:100%; */
	font-family:monospace;
	display: block;
}
img,object {
	vertical-align: bottom; /* 下余白の回避 */
	line-height: 1; /* 下余白の回避 */
	-ms-interpolation-mode: bicubic; /*for IE6&7*/
	max-width : 100%; /*Fluid Image*/
	height: auto;
}
embed,iframe,object,video {
	max-width:100%;/* Make sure videos and embeds fit their containers */
}
strong,em,b{
	font-weight: 700;
}
input,
button,
textarea,
select{
	font: inherit;
	outline: none;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select{
	display: block;
	width: 90%;
	max-width: 320px;
	padding: 8px;
	border-radius: 4px;
	border: solid 1px rgba(0,0,0,.1);
	border: none;
	background-color: rgba(0,0,0,.05);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* input[type="email"]:invalid {
	background-color: #f9dbdb;
} */
input[readonly],
textarea[readonly] {
	opacity: .5;
}
textarea {
	max-width: 560px;
	height: 80px;
	overflow: auto;
}
code textarea {
	width: calc(100% - 32px);
	max-width: calc(100% - 32px);
	padding: 16px;
	white-space: nowrap;
	font-size: 0.95rem;
}
input[type="number"]{
	max-width: 100px;
}
input[type="file"]{
	font-size: 0.85em;
	line-height: 1;
}
input[type="radio"],
input[type="checkbox"] {
	display: inline-block;
	margin-right: 0.4em;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	/* display: block; */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	line-height: 1;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	cursor: pointer;
}
/* input[type="submit"]{
	color: var(--main);
} */
input[type="submit"]:disabled{
	opacity: .5;
	cursor: default;
}
input[type="search"] {
	width: 100%;
	max-width: initial;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
select{
	outline:none;
	text-indent: 0.01px;
	text-overflow: '';
	vertical-align: middle;
	width: auto;
	max-width: initial;
	cursor: pointer;
	background-image: url(images/sort-down-solid.svg);
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: right 20px center;
	padding-right: 3em;
}
select option{
	background-color: #fff;
}
select::-ms-expand {
	display: none; /* IEのselect要素の右側に表示される矢印を無効化 */
}
select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #828c9a;
}
time{
	display: inline-block;
}
blockquote {
	background-color: #f7f7f7;
	padding: 8%;
}
blockquote::before {
	display: inline-block;
	content:"\f10d";/* quote-left */
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	text-rendering: auto;
	color: rgba(0,0,0,.2);
	margin-bottom: 1em;
}
details {
	transition: .2s;
}
details summary:hover{
	cursor: pointer;
	/* opacity: 0.5; */
}


/* main（メインコンテンツ）
-------------------------------------------------------------- */
/* Google Jump Rate = 20,16,14,12,11,10 */
.h1,main h1 {font-size: 2.0rem;line-height: 1.6;}
.h2,main h2 {font-size: 1.6rem;line-height: 1.6;}
.h3,main h3 {font-size: 1.4rem;line-height: 1.6;}
.h4,main h4 {font-size: 1.2rem;line-height: 1.6;}
.h5,main h5 {font-size: 1.1rem;line-height: 1.6;}

@media screen and (max-width:559px) {
	.h1,main h1 {font-size: 1.6rem;}
	.h2,main h2 {font-size: 1.4rem;}
	.h3,main h3 {font-size: 1.2rem;}
	.h4,main h4 {font-size: 1.1rem;}
	.h5,main h5 {font-size: 1.0rem;}
}
/* main h1, */
main h2,
main h3,
main h4,
main h5 {
	margin-top: 3em;
	/* margin-bottom: 1em; */
}
main p,
main ul,
main ol,
main dl,
main table,
main pre,
main blockquote,
main blockquote footer,
main figure,
/* main .btn,
表や段組みの中で使いにくいケースがあるが、メールフォームのボタンなどでその都度余白を設定するのが面倒なのでデフォルトで余白付きにした
→ と思ったが、やはり表やflexレイアウトの中で使いにくいのでやめた。classにマージン付けるべきではないことを再認識 */
main .youtube,
main .wp-video, /* 埋め込み動画 */
main .wpulike,
main #toc_container{
	margin-top: 2.0rem;
}
main :is(h2,h3,h4,h5) + p { /* 見出し直後のp */
	margin-top: 16px;
}
main .entry-content h2:first-child, /* 記事内の最初のh2 */
main .entry-content > p:first-child, /* 記事内の最初のp */
main .entry-content > ul:first-child, /* 記事内の最初のul */
/* main .flex figure, （2段組みで左テキスト・右イメージのように配置した場合に右だけ上余白がなくなるのでダメ） */
/* h直後の要素 */
/* main h2 + *:not(:first-child),
main h3 + *:not(:first-child),
main h4 + *:not(:first-child),
main h5 + *:not(:first-child), */
main p.toc_title,
main ul ul,
main ul ol,
main ul dl,
main ol ul,
main ol ol,
main ol dl,
main dl ul,
main dl ol,
main dl dl,
main ul figure,
main ol figure,
main dl figure,
main table *:first-child,
main blockquote *:first-child,
main details summary + *{
	margin-top: 0;
}
main p:empty{ /* 空のタグ */
	display: none;
}
main strong {
	background: linear-gradient(transparent 50%, #ffff8d 50%);
}
/* main ul li{
	list-style-type: disc;
} */
main ul{
	list-style-type: disc;
}
main li{ /* ul&ol共通 main ul li で指定すると .archive_line li などのクラスに影響があるためこうしてる */
	margin-left: 1.4rem;
}
main dt{
	margin-top: 1.0rem;
	font-weight: bold;
}
main dl dt:first-child{
	margin-top: 0;
}
main table img,
main table p{
	margin: 0;
	box-shadow: none;
}
main details[open] {
	margin-bottom: 2rem;
}
main blockquote p:last-child{
	margin-bottom: 0;
}
main figure{
	display: inline-block;
}
main figure figcaption{
	margin-top: 1em;
	font-size: 0.9rem;
	text-align: center;
}
main small {
	font-size: 0.9rem;
}
main iframe{
	display: block;
	width: 100%;
}
main img{
	display: inline-block;/* blockにすると、改行時に自動挿入される<br>で余計な余白ができる */
}
/* 画像直後の改行 */
main img + br,
main iframe + br{
    content: "";
    display: block;
    height: 1em;
}
/* main p img + br,
main p iframe + br,
main li img + br,
main li iframe + br{
    content: "";
    display: block;
    height: 1em;
} */

/* 改行直後の画像 */
main br + img,
main br + iframe{
    margin-top: 1em;
}
/* main p br + img,
main p br + iframe,
main li br + img,
main li br + iframe{
    margin-top: 1em;
} */

main .twitter-tweet,
main .instagram-media{ /* SNS 埋め込みコード */
	margin-top: 2rem!important;
	margin-bottom: 0!important;
	min-width: initial;
}
main .instagram-media{ /* SNS 埋め込みコード */
	margin-top: 2rem!important;
	margin-bottom: 0!important;
	min-width: initial!important;
}