@charset "UTF-8"; /* 文字エンコードの設定（削除不可） */
/* 汎用デザインのcss
idを使うような固有指定はmainに */


/* v6 breakpoint memo
Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
-- from bootstrap v5.3
*/

/* ***** all page common design ***** */


/* img */
.thumbnail {
    padding: .25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto;
}

/* link */
.al-a-max {
	display: block;
	width:100%;
	height:100%;
	border-bottom:inherit;
	
	&:hover {
		background:none;
	}
}

/* btn */
.al-btn {
	color:var(--al-color-red);
	border:1px solid var(--al-color-red) !important;

	&:hover {
		background:var(--al-color-red) !important;
		color:white !important;
	}
}
p:has(a.al-btn) { margin-bottom:0; }

[class*="al-badge-"] {
	color:white;
	font-weight:bold;
	font-size:0.6rem;
	vertical-align: 50% !important;
	margin-left:1em;
}


.al-badge-rakuraku {
	background-color:#9ace3c;
}
.al-badge-kodawari {
	background-color:#007b43;
}

.al-badge-option {
	background-color:#915da3;
}

.al-badge-need {
	background-color:var(--al-color-red);
}

.al-label-need {
	font-weight:bold;
	color:var(--al-color-red);

	&:after {
		content:' ＊';
		font-weight:bold;
		color:var(--al-color-red);
		font-size:0.75em;
		vertical-align: super;
	}
}


/* card */
.al-cardheader {
	font-size:120%;
	font-weight:bold;
}

.card-body {
	p:last-child {
		margin-bottom:0;
	}
}

.card a:has(.card-img-top):hover {
	transition: 0.5s ease;
	opacity:0.5;
}

/* page: works */
#designmenu {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:1em;

	a {
		font-size:115%;
		font-weight:bold;
	}

	.card a + p {
		display: none;
	}

	@media screen and (max-width:576px) {
		display:block;

		.card {
			margin-bottom:1.5em;
		}
	}
}

/* page: works/novelpack */
#novelpack-planlist {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:1.5em;

	@media screen and (max-width:567px) {
		grid-template-columns: 1fr;
	}

	.card a + p {
		display:none;
	}

	.card-header a {
		text-decoration: none;
		font-weight:bold;
		color:white;
		transition : all 0.5s ease 0s;
	}

}

/* **** レスポンシブテーブル **** */
.restable {
	* {
		line-height:1.65;
	}

	th {
		width:13em;

		@media screen and (max-width:576px) {
			background:#efefef;
			padding:5px;
		}
	}

	td {
		padding:.5rem 1rem;

		p {
			margin-bottom:auto;
		}

		ul {
			margin-bottom:auto;
			padding-left:1rem;
		}
	}

	tr:nth-of-type(2n+1) th,
	tr:nth-of-type(2n+1) td {
		@media screen and (min-width:577px) {
			background:#f4f3f2;
		}
	}

	tbody, tr, th, td {
		@media screen and (max-width:576px) {
			display: block;
			width:100%;
		}

	}
}

/* stepup list */
.stepup-list {
	padding: 0;
	list-style-type: none;
	border-radius: 15px;
	margin: 1em auto;

	@media screen and (max-width: 576px) {
		padding: 1em 0.8em 1.5em 0.5em;
	}

	& >dt {
		margin-bottom: 0;
	}

	dd {
		margin: 0 0 0 0.75rem;
		padding: 0.5rem 0 0.75rem 1.25rem;
		font-size: 95%;
		border-left:2px dotted var(--al-color-red);

		@media screen and (max-width: 992px) {
			margin:0 0 0 0.65rem;
			padding: 0.5rem 0 0.75rem 1.1rem;
		}

		&:last-child {
			border-left:2px solid white !important;
		}
	}
}

.stepnumber {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	text-align: center;
	line-height: 1.45rem;
	border-radius: 50%;
	background-color: var(--al-color-red);
	font-size: 1.25rem;
	margin-right: 0.4em;
	margin-bottom: 0;
	color: white;
	font-family: 'Arial Narrow', sans-serif;
	font-weight:bold;

	@media screen and (max-width: 992px) {
		font-size:1rem;
	}

}

.steptitle {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: bold;
	color: #c53d43;
	line-height: 130%;
	/* transform: translateY(-0.3rem); */

}


/* もくじ */
#content-index {
	width:50%;

	@media screen and (max-width:768px) {
		width:100%;
	}

	.accordion-button {
		font-weight:bold;
		background-color:#e0e0e0;

		& + p {
			display: none;
		}
	}
}


.al-separate-area {
	display: flex;
	justify-content: space-between;
	gap:2em;

	@media screen and (max-width:576px) {
		flex-direction:column;
	}

	.al-sep-section-main {
		width:70%;
		@media screen and (max-width:576px) {
			width:100%;
		}
	}

	.al-sep-section-sub {
		width:30%;
		@media screen and (max-width:576px) {
			width:100%;
		}
	}
}



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

/* CF7の指定 */
.wpcf7-form {
	h4 {
		margin-bottom:1.5em;
	}
}
.wpcf7-form-control-wrap {
	&:has(input[type="checkbox"]),
	&:has(input[type="radio"])
	{
		display: block;
		box-sizing: border-box;
		padding: .375rem 0rem 0rem;
	}
}


/* 依頼フォームの指定 */
.form-text {
	p {
		margin-bottom:0.5em;
	}
}
.form-select,
.form-control {
	font-size:1em;
	line-height:1.7;
}


@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;}

}

/* ***** トップページ ***** */
#post-home {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:2.5em;

	@media screen and (max-width:768px) {
		display:block;
	}

	.hidenseek {
		visibility: hidden;

		@media screen and (max-width:576px) {
			display: none;
		}
	}
}
#post-home.fluid {
	display:block;
	.hidenseek {
		display:none;
	}
}

#frontpage-postlist {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:2.5em;

	@media screen and (max-width:768px) {
		display:block;
	}


	.frontpage-header {
		font-size:1.2rem;
		font-weight:bold;
		background:linear-gradient(transparent 60%, #f9aea5 60%);
		display: inline-block;
		padding:0 7px 0 3px;
	}

	.oshirase {
		padding:7px 0;
		border-bottom:1px solid silver;

		.entry-title {
			font-size:1rem;
			font-weight:bold;
			margin-bottom: 0;

			a {
				border-bottom:0;
				color:#222;
			}

			a:hover {
				color:var(--al-color-red);
				transition: 0.5s ease all;
			}
		}
	}
	.frontpage-postdate {
		font-size:0.65rem;
	}
}
#al-front-postlist { font-size:80%;}

#webmaster {
	display: flex;
	justify-content: space-between;
	gap:2em;

	@media screen and (max-width:768px) {
		flex-direction: column;
		gap:1em;
	}

}

#frontpage-icon {
	min-width: 150px;
}

#frontpage-followme {
	min-width: 200px;

	@media screen and (max-width:992px) {
		min-width: 170px;
	}


	h5 {
		margin-top:0;
	}
	.socialbutton {
		margin:0;

		li {
			display: block;

			& + li {
				margin-left:0;
			}
		}
	}
}



@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;
}*/


/* 戻るボタン */
ul#MODORIBUTTON {
	position:fixed;
	right:20px;
	bottom:0px;

	@media screen and (max-width:576px) {
		right:10px;
	}

	li {
		list-style-type:none;
		margin-bottom:0.5rem;
	}
}

	#move-page-top, #move-page-down {
		display:block;
		width:45px;
		height:45px;
		border-radius: 50%;
		font-size:150%;
		line-height:45px;
		color:white;
		text-decoration:none;
		text-align:center;
		background-color: var(--al-color-red);
		cursor: pointer;
		opacity:0.75;

		@media screen and (max-width:576px) {
			font-size:180%;
			width:40px;
			height:40px;
			line-height:40px;
		}
	}
}


@media screen, print {
/* テキスト色 */
.text-alred { color:var(--al-color-red); }
.text-alblue { color:steelblue; }
.text-algreen { color:#007b43; }

/* ***** マーカー ***** */
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 50%, gainsboro 50%, gainsboro 85%, transparent 85%); }
mark.half-red { background:linear-gradient(transparent 50%, #f9aea5 50%, #f9aea5 85%, transparent 85%); }
mark.half-orange { background:linear-gradient(transparent 50%, #FBD26B 50%, #FBD26B 85%, transparent 85%); }
mark.half-yellow { background:linear-gradient(transparent 50%, #fef263 50%, #fef263 85%, transparent 85%); }
mark.half-green { background:linear-gradient(transparent 50%, #ceff9e 50%, #ceff9e 85%, transparent 85%); }
mark.half-blue { background:linear-gradient(transparent 50%, #a2d7dd 50%, #a2d7dd 85%, transparent 85%); }
mark.half-purple { background:linear-gradient(transparent 50%, thistle 50%, thistle 85%, transparent 85%); }
mark.half-pink {background:linear-gradient(transparent 50%, #FEDFE1 50%, #FEDFE1 85%, transparent 85%); }


/* ***** 注意書き ***** */
.caution {
	display:block;
	border:2px solid var(--al-color-middleblack);
	margin:1em 0;
	padding:0.5rem;
	background-color: mistyrose;
	border-radius: 10px;

	@media screen and (max-width:576px) {
		border-radius:5px;
	}

	& > h3 {
		font-size:1.15rem !important;
		margin:.5em 0 !important;
		border:0 !important;
		padding:0 !important;
		background-color:transparent !important;
	}

	p {
		font-size:90%;
	}
}


.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;
}

/* ***** 目次 ***** */
#primary {
	.contentlist {
		border:2px solid var(--al-color-middleblack);
		background-color:transparent;
		padding:5px;
		margin:1em 0;
		display:block;
		width:70%;
		border-radius: 10px;
		@media screen and (max-width:576px) {
			width:100%;
			border-radius: 5px;
		}

		h3 {
			margin:0.8em 0;
			background:transparent;
			padding:0;
			border:0;
			border-radius:0;
			text-align: center;
		}
	}
}

/* 目次の開く閉じる */
#mokujibutton { font-size:0.5em; color:var(--al-color-red) }
#mokujibutton:hover { cursor:pointer; }
#mokuji {
	display:block;
	max-height:calc(11pt * 15);
	transition: max-height 0.5s ease;
	overflow:hidden;
}
#mokuji.mokuji-hide {
	max-height:0 !important;
}


/* ***** 文字の大小 ***** */
.x-large { font-size:200%; }
.large { font-size:150%; }
.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:var(--al-color-red); }
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;

	li {
		list-style-type: none;
		display:inline-block;

		& + li { margin-left:10px; }
	}

	a { text-decoration:none; border-bottom:0; }
	.twitterbutton a { color:#55acee; }
	.facebookbutton a { color:#3B5998; }
	.hatenabutton a { color:white; }
	.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;
}

.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 var(--al-color-red);
	color:var(--al-color-red);
	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:var(--al-color-red);
	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; }


/* blogcard */
.blogcard {
	line-height: 1;
	background-color: #ffffff;
	border: 1px solid silver;
	box-sizing: border-box;
	
	word-wrap: break-word;
	margin:1em;
	box-shadow: 0 0 10px 6px rgba(0,0,0,.025);

	@media screen and (max-width:767px) {
		margin:1em 0.25em;
	}
	& + br {
		display: none;
	}


	a {
		display:flex;
		text-decoration: none;
		opacity: 1;
		transition: all 0.2s ease;

		&:hover {
			opacity: 0.6;
			background: transparent;
		}


		@media screen and (max-width:767px) {
			flex-direction: column;
		}


		.blogcard_thumbnail {
			flex:0 0 auto;
			width:285px;
			height:150px;
			overflow: hidden;

			@media screen and (max-width:767px) {
				width:100%;
				height:fit-content;
			}

			& > img {
				width:100%;
				height:100%;
				object-fit: cover;
			}

		}

		.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;

				.favicon {
					margin-bottom: -4px;
				}

				.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 { */


/* ********************* */
/* ディスプレイ設定
フル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;}


.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;
		padding-left:unset;
		padding:0.5rem;
	}
		.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);
	}
}