@charset "UTF-8"; /* 文字エンコードの設定（削除不可） */
/* このファイルはv5内で編集してdistにアップする */
/* WP用のクラスはmain.cssに */

/* ********************************************** */


/* ***** WordPress各パーツ用指定 ***** */
/* .wp-stikey h2:before { } */
div.wp-pagenavi { padding:15px 0; }
div#nav-above { margin-top:2em; }



@media screen and (min-width:641px) {
.nav-previous, .nav-next { display:inline-block; }
.nav-next { margin-left:2rem;}
}

@media screen, print {

/* 広告の表示 */
.adsarea { display:block; margin:20px 0; border:1px solid gray; background:#fee; height:auto; box-sizing:border-box; }
	.adsarea h3 { font-size:80%; border:0; font-weight:normal; margin-left:3px; }
	.adsarea p { display:block; margin:auto; padding:2px; }
	.adsarea ins.adsbygoogle { margin:0; padding:0; }

/* ***** 続きを読むボタン ***** */
.more-link { background:#CC2F3A; line-height:3; padding:10px 15px; text-decoration:none; font-size:120%; border-radius:5px; }
a.more-link { color:white !important;}
.more-link:before { font-family:'Font Awesome 5 Free'; content:'\f13a'; font-weight:bold; margin-right:0.5em; }
.post-type-archive-template .more-link { display:none;}
.post-type-archive-design .more-link { display:none;}

}

/* ***** トップページのナビゲーション ***** */
@media screen, print {
	#al-front-navigation .cell {  }
	#al-front-navigation a:link,
	#al-front-navigation a:visited,
	#al-front-navigation a:active { color:#c33; }
	.nav-wrapper { border-radius:10px; border:3px solid #c33; padding:2em 1em;}
	.al-responsive-mark { font-size:450%; }
}
@media screen and (min-width:1024px) {
	.nav-wrapper { width:85%; margin:auto; }
}
@media screen and (max-width:767px) {
	#al-front-navigation .cell { border-radius:10px; }
	.nav-wrapper { padding:1em 0.3em; width:100%;}
	#al-front-navigation a { font-size:95%;}
	.al-responsive-mark { font-size:300%; }

}

/* ***** トップページの下段 ***** */
@media screen, print {
	#al-front-postlist { font-size:80%;}
}
@media screen and (max-width:1023px) {
	#al-front-postlist h3 { font-size:1.5rem;}
	#al-front-postlist h4 { font-size:1.2rem;}
	#al-front-postlist h5 { font-size:1rem;}
}

@media screen, print {
/* ***** 日付表示（_s版対応済） ***** */
section.date, .entry-meta { margin-bottom:1em; }
.entry-meta { font-size:85%; }
.posted-date, .entry-date { margin-right:1em; }
.posted-date:before, .entry-date:before { font-family: 'Font Awesome 5 Free'; content:'\f303'; font-weight:bold; margin-right:0.3em; }
.update-date:before, .updated:before { font-family: 'Font Awesome 5 Free'; content:'\f2f9'; font-weight:bold; margin-right:0.3em;}

/* ***** ボタンパーツ ***** */
/* social bookmarking light */
.no-social-button .wp_social_bookmarking_light,
.no-social-button .wp_social_bookmarking_light_clear { display:none; }

/* ***** ボタン ***** */
.download-link { }
/*.download-link:before {
	display:block;
	text-align:center;
	font-size:260%;
	font-family: 'Font Awesome 5 Free';
	font-weight:bold;
	content:'\f56d';
	margin-right:0.5em;
}*/

/* foundation6のボタンをちょっと上書き */
.al-button {
	color:white !important;
	font-weight:bold;
	border-radius:15px;
	font-size:120%;
}

/* 戻るボタン */
ul#MODORIBUTTON {
	position:fixed;
	right:20px;
	bottom:0px;
}
	ul#MODORIBUTTON li {
		list-style-type:none;
	}

	#move-page-top, #move-page-down, #move-up-60per, #move-down-60per {
		display:block;
		text-decoration:none;
		text-align:center;
		color:white;
		font-size:200%;
		width:45px;
		height:45px;
		line-height:45px;
		background-color: #c33;
		cursor: pointer;
		opacity:0.75;
	}
}
@media screen and (min-width:640px) {
	/*ul#MODORIBUTTON { display:none; }*/
}
@media screen and (max-width:767px) {
ul#MODORIBUTTON {
	position:fixed;
	right:0;
	bottom:0;
}
	ul#MODORIBUTTON li {
		list-style-type:none;
	}

	#move-page-top,#move-page-down, #move-up-60per, #move-down-60per {
		display:block;
		text-decoration:none;
		text-align:center;
		color:white;
		font-size:180%;
		width:40px;
		height:40px;
		line-height:40px;
		background-color: #c33;
	}
}

@media screen, print {


/* ***** マーカー ***** */
mark.gray { background-color:gainsboro; }
mark.red { background-color:#f9aea5; }
mark.orange { background-color:#FBD26B; }
mark.yellow { background-color:#fef263; }
mark.green { background-color:#ceff9e; }
mark.blue { background-color:paleturquoise; }
mark.purple { background-color:thistle; }
mark.pale { color:silver;background-color:whitesmoke; }
mark.bg-none { background-color:transparent; }
mark.pink {background:#FEDFE1;}

mark.half-gray { background:linear-gradient(transparent 60%, gainsboro 60%); }
mark.half-red { background:linear-gradient(transparent 60%, #f9aea5 60%); }
mark.half-orange { background:linear-gradient(transparent 60%, #FBD26B 60%); }
mark.half-yellow { background:linear-gradient(transparent 60%, #fef263 60%); }
mark.half-green { background:linear-gradient(transparent 60%, #ceff9e 60%); }
mark.half-blue { background:linear-gradient(transparent 60%, #a2d7dd 60%); }
mark.half-purple { background:linear-gradient(transparent 60%, thistle 60%); }
mark.half-pink {background:linear-gradient(transparent 60%, #FEDFE1 60%); }


/* ***** 注意書き ***** */
.caution {
	display:block;
	border:1px solid #333;
	padding:10px 15px;
	background-color:mistyrose;
	margin:1em 0;
	font-size:85%;
}

.caution h3:before {
	border:0;
	padding:0;
	margin-right:.5em;
	content:'\f058';
	font-weight:bold;
	font-family:'Font Awesome 5 Free';
	color:inherit;
}

.caution h3 {
	font-weight:bold;
	font-size:1.3rem;
	margin:0 0 .5em 0;
	border:0;
	padding:0;
	background-color:transparent;
}

.caution p {
	font-size:90%;
	line-height:1.4;
}

.comment-aside {
	border:3px dashed gray;
	background:gainsboro;
	padding:0.2em 0.5em;
	color:#4F455C;
	margin:1em 0;
}
.comment-aside h3 {
	margin:0.5em 0;
	font-size:1.2em;
	font-weight:bold;
}
.comment-aside h3:before {
	font-family:'Font Awesome 5 Free';
	font-weight:400;
	content:'\f0eb';
	margin-right:0.5em;
}

.comment-aside p {
	font-size:0.85em;
}

/* ***** 目次 ***** */
div.contentlist {
	border:2px solid #333;
	background-color:transparent;
	padding:5px;
	margin:1em 0;
	display:block;
	width:auto;
}
div.contentlist  ol, div.contentlist  ul {
}
div.contentlist h3 {
	margin:0 0 0.8em 0;
	background:transparent;
	padding:0;
	border:0;
	border-radius:0;
	text-align: center;
}
/* 目次の開く閉じる */
#mokujibutton { font-size:0.5em; text-decoration:underline; color:#c33; }
#mokujibutton:hover { cursor:pointer; }
#mokuji {}


/* ***** 文字の大小 ***** */
.x-large { font-size:260%; }
.large { font-size:160%; }
.littlesmall { font-size:85%; }
.small { font-size:75%; }
.x-small { font-size:60%; }

/* 文字の太字、細字 */
.w-normal { font-weight:normal; }
.w-bold { font-weight:bold; }

/* 文字の配置 */
.position-right { text-align:right; }
.position-center { text-align:center; }
.position-indent { text-align:left; padding-left:2em; }
.al-center { text-align:center; }

/* マージンを空ける */
.underspace { margin-bottom:1em; }
.underspace-more { margin-bottom:1.5em; }
.topspace { margin-top:1em; }
.topspace-more { margin-top:1.5em; }

.al-inline { display:inline-block; }

/* 行の高さを変更する */
.al-height-2 { line-height: 2em; }
.al-height-3 { line-height: 3em; }
.al-height-4 { line-height: 4em; }
.al-height-5 { line-height: 5em; }

/* hr */
hr.hr-dashed, hr.hr-dotted, hr.hr-solid, hr.hr-double { display:block; height:1px; border:0; margin:1em 0; }
hr.hr-double { border-bottom:3px black double; }
hr.hr-dashed { border-bottom:1px black dashed; }
hr.hr-dotted { border-bottom:1px black dotted; }
hr.hr-solid  { border-bottom:1px black solid; }

hr.hr-red { border-bottom-color:#c33; }
hr.hr-blue { border-bottom-color:#3c3; }
hr.hr-green { border-bottom-color:#33c; }

hr.hr-half { width:60%; }



/* リストいろいろ */
ul.no-padding { padding:0; margin-left:0; }
ul.list-nomark { list-style-type:none; }
ul.list-horizon { margin:0; padding:0; }
ul.list-horizon li {
	list-style-type:none;
	display:inline-block;
}
ul.list-horizon li + li { margin:0 0 0 2px; }

ul.list-part-aster li,ul.list-part-line li  { margin-right:0; }
ul.list-part-aster li + li:before { content:' * '; }
ul.list-part-line li + li:before { content:' | '; }

.list-bold li { font-weight:bold; }
.li-bold li { font-weight:bold; }

ol.ol-comments {
  counter-reset: number;
  list-style: none;
  font-size:75%;
	margin-left:1em;
  padding-left:2em;
	text-indent:-1.5em;
}
ol.ol-comments li:before {
  counter-increment: number;
  content: "*"counter(number)" ";
}


/** ソーシャルボタン **/
.socialbutton { margin:1em 0 0.5em; padding:0; }
.socialbutton li { list-style-type: none; display:inline-block; }
.socialbutton li + li { margin-left:10px; }
.socialbutton a { text-decoration:none; }
.socialbutton .twitterbutton a { color:#55acee; }
.socialbutton .facebookbutton a { color:#3B5998; }
.socialbutton .hatenabutton a { color:white; }
.socialbutton .linebutton a { color:#00b900; }

.fa-hatena-square:before {
	margin:0;
	padding:0;
	display:inline-block;
    content: "B!";
    font-size:60%;
    line-height:1.5em;
    width:1.5em;
    text-align:center;
    font-family: Verdana;
    font-weight: bold;
    box-sizing:border-box;
    background-color:#008fde;
    border-radius:5px;
    position:relative;
    top:-5px;
}


/* ステップアップリスト */
.stepup-list {
	padding: 0;
	list-style-type: none;
	padding: 1em 1em 1.5em 0.8em;
	border: 1px solid #42ad42;
	border-radius: 15px;
	margin: 1em auto;
}

.stepup-list > dt {
	margin-bottom:0;
}
.stepnumber {
	display:inline-block;
	width:2rem;
	height:2rem;
	text-align:center;
	line-height:2rem;
	border-radius:50%;
	background-color:#42ad42;
	font-weight:900;
	font-size:1.5rem;
	margin-right:0.4em;
	margin-bottom:0;
	color:white;
	font-family:'Arial', sans-serif;
}

.steptitle {
	display:inline-block;
	font-size:1.3rem;
	font-weight:bold;
	color:#42ad42;
	line-height:130%;
	/* transform: translateY(-0.3rem); */
}
.stepup-list > dd {
	margin:0 0 0 0.95rem;
	padding:0.5rem 0 0.75rem 1.5rem;
	border-left:2px solid #42ad42;
	font-size:95%;
}

.stepup-list > dd:last-child {
	border-left:2px solid white !important;
}

.infolist {
	box-sizing:border-box;
	font-size:0.9rem;
	padding:1em;
	display: flex;
	flex-flow: row wrap;
	align-items:baseline;
	width:100%;
}

.infolist > dt {
	box-sizing:border-box;
	font-weight: bold;
	font-size:0.9em;
	flex:0 0 15%;
}
.infolist > dd {
	box-sizing:border-box;
	font-weight:normal;
	flex:1 0 85%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow:hidden;
}





/* コード表示用 */
code.shell {
	border:0;
	background-color:#333333;
	color:white;
	display: block;
}
code.shell:before {
	content:'$ ';
	color:rgb(26, 201, 1);
}

/* テーブルいろいろ */

table.table-separate {
	border-collapse:separate;
	border:0;
}
table.table-separate td {
	border:1px solid black;
}

table.t-header-silver th{
	min-width:100px;
	background-color:silver;
	font-weight:bold;
	border:1px solid black;
}







/* Works用定義 */
dl.worksinfo {
}

.worksinfo dt:before {
	content:'■';
	padding-right:3px;
}
.worksinfo dt {
	width:60%;
	border-bottom:1px dashed #c33;
	color:#c33;
	font-weight:bold;
}


.worksinfo dd {
	border-left: 0;
	margin-left: 10px;
	padding-left: 10px;
	/* style.cssのリセット */
	line-height:2.5em;

}

/* リリースノート */
.al-releasenote {

}

	.al-releasenote dt {
		margin-bottom:0;
	}

	.al-releasenote dd + dt {
		margin-top:1em;
	}


/* Flexbox化 */
.flex-container {
	display:flex;
	display:-webkit-flex;
}

ul.flex-container { padding:0; }
ul.grid-margin-x, .flex-container li { list-style-type:none; }
.flex-container li + li {}

.imagearea li + li { margin-left:1em; }
.imagearea { margin-left:0; }



/* スケジュール用DL */
dl.schedulelist { }
dl.schedulelist dt { display:inline-block; }

dl.schedulelist dd  {
	display:inline-block;
	border-left: 0; margin-left: 0; padding-left: 0;
}


/* ブログタイトル用 */
main div.contentarea h3.blogtitle {
	color:#c33;
	font-weight:normal;
	background:transparent;
	border:0;
	border-left:0;
	padding:0;
}

/* Q&A的フキダシデザイン */
.balloon-Q, .balloon-A {
	position: relative;
	padding:20px;
	max-width:85%;
	border-radius:5px;
}
.balloon-Q {
	margin:0.7em auto 0.7em 15px;
	background-color: lavender;
	border: 2px solid steelblue;
}
.balloon-A {
	margin:0.7em 15px 0.7em auto;
	background-color: bisque;
	border: 2px solid #ca8888;
}

.balloon-Q::before, .balloon-A::before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	top: 15px;
}

.balloon-Q::before{
  left: -15px;
  border-right: 15px solid steelblue;
}
.balloon-A::before{
  right: -15px;
  border-left: 15px solid #ca8888;
}

.balloon-Q::after, .balloon-A::after {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: 15px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

.balloon-Q::after{
	left: -12px;
	border-right: 15px solid lavender;
}

.balloon-A::after{
	right: -12px;
	border-left: 15px solid bisque;
}

.balloon-A + .balloon-Q { margin-top:2em; }


/* append:2020.09.28　ブログカード用のスタイル */
.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  word-wrap: break-word;
  margin:1em 2px;
  box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard_container {

}
.blogcard.ex {
  background-color: #f7f7f7;
}
.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
}
.blogcard a:hover {
  opacity: 0.6;
}
.blogcard_thumbnail {
	position:relative;
	overflow: hidden;
	min-height:150px;
}

.blogcard_thumbnail > img {
object-fit: cover;
position:absolute;
width:auto;
height:auto;
top:60%;
left:60%;
min-height:100%;
transform: translate(-60%, -60%);
}

.blogcard_content {
	padding:1em;
}
.blogcard_title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom:1rem;
}
.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.6;
  margin-bottom:0.5rem;
}
.blogcard_link {
  font-size:0.60em;
  text-align: left;
}
.blogcard_link .favicon {
  margin-bottom: -4px;
}
.blogcard_link .icon-external-link-alt::before {
  font-size:0.75em;
}

/* コード表示部 */
.al-codearea {
	display: block;
	padding:0.5em;
	font-size:0.85em;
background-image: linear-gradient(#e6e6e6);
overflow-x: auto;
}

.codecopy, .codecopy:link, .codecopy:visited, .codecopy:active
  {
	display: inline-block;
	margin:0 0 1em 0;
	font-size:0.7em;
	padding:0.3em 0.7em;
	color:white !important;
	background-color: gray;
}
.codecopy:hover {
	color:white !important;
	background-color: silver;
	transition : all 0.5s ease 0s;
}

} /* @media screen, print { */

@media screen and (max-width:767px) {
.blogcard_thumbnail {
	min-height:200px;
}

}

/* ********************* */
/* ディスプレイ設定
フルHD：1920*1080
ノートPC：1366*768
iPad Pro：1024*1366
iPad：1024*768
iPhone 5：320*568

PCビューのcontainer幅は1020
*/

/* iPad横以上の幅 */
@media screen and (min-width:1024px), print {
	.sidebar .flex-container {
		flex-flow:column wrap;
		-webkit-flex-flow:column wrap;
	}
	.sidebar h3 { border:0;margin:0; }
	.sidebar h3 + p { margin:0; }
}

/* iPad縦～iPad横未満 */
@media screen and (min-width:768px) and (max-width:1023px) {
	.flex-devide-tablet section {
		flex:1 0 auto;
		-webkit-flex:1 0 auto;
	}

}

/* iPad縦未満（スマホ全て） */
@media screen and (max-width:767px) {


ul.list-horizon { margin:0; padding:0; }

section.sep-2, section.sep-3 {
	width:100%;
}


ul.flex-container {
	display:flex;
	display:-webkit-flex;
}

.littlesmall { font-size:90%; }
.small { font-size:85%; }
.x-small { font-size:70%; }


ul.gallery-container li	{
	width:60%;
}

/* ***** リンク関係 ***** */
.link-block { display:block; width:100%; height:100%; margin:0; padding:0; box-sizing:border-border-box;}

.stepup-list {
	padding: 1em 0.8em 1.5em 0.5em;
}

.infolist {
	padding: 0.5em 0.1em;
}
.infolist > dt {
	flex: 0 0 25%;
}

.infolist > dd {
	flex: 0 0 75%;
}
}


/* 主に画像表示用、gridレイアウト */
@media screen, print {
	.al-grid {
		display:grid;
		gap:0.75em;
		margin:auto 0;
		list-style-type:none;
	}
		.grid-3 { grid-template-columns: repeat(3,1fr); }
		.grid-4 { grid-template-columns: repeat(4,1fr); }
		.grid-5 { grid-template-columns: repeat(5,1fr); }
		.grid-6 { grid-template-columns: repeat(6,1fr); }

	.flex-4-2 {	/* PC向け */
		grid-template-columns: repeat(4,1fr);
	}
}


@media screen and (max-width:480px) {
	.flex-4-2 {	/* 主にスマホ向け */
		grid-template-columns: repeat(2,1fr);
	}
}