/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

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

#wrapper {  }

@media (max-width: 767px) {

	main, footer { padding: 0; }

	article h2 {
		color: var( --baby-blue );
		text-align: center;
		line-height: 1.2;
		margin: 0 0 3em;
	}
	article h2 span { 
		font-size: clamp(2rem, 1.195rem + 4.03vw, 3.125rem); 
		font-weight: 900;
	}
	article h2 small { 
		display: block;
		font-weight: 700;
		margin: .5em 0 0;
	}

	article h3 {
		font-size: clamp(1rem, 0.732rem + 1.34vw, 1.375rem); 
		font-weight: 600;
		text-align: center;
		line-height: 1.6;
		margin: 0 0 1.25em;
	}
	article h3.smalls {
		font-size: clamp(0.875rem, 0.607rem + 1.34vw, 1.25rem); 
		font-weight: 800;
		text-align: center;
		line-height: 1.6;
		margin: 0 0 .5em;
	}

}

@media (min-width: 768px) {

	article h2 {
		color: var( --baby-blue );
		text-align: center;
		line-height: 1.2;
		margin: 0 0 3em;
	}
	article h2 span { 
		font-size: clamp(2.75rem, -0.974rem + 7.76vw, 3.875rem); 
		font-weight: 900;
	}
	article h2 small { 
		display: block;
		font-weight: 700;
		margin: .5em 0 0;
	}

	article h3 {
		font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); 
		font-weight: 600;
		text-align: center;
		line-height: 1.6;
		margin: 0 0 1.25em;
	}
	article h3.smalls {
		font-size: clamp(0.875rem, -0.366rem + 2.59vw, 1.25rem); 
		font-weight: 800;
		text-align: center;
		line-height: 1.6;
		margin: 0 0 .5em;
	}

}

/* ---------------------------------------- news */


#news .inside {
	background: #f5f5f5;
	padding: 2em;
	border-radius: 1em;
}
#news h2 { color: var( --baby-blue ); }
#news ul li {
	border-bottom: 3px #ccc dotted;
	line-height: 1.6;
}
#news ul li a time { font-weight: 800; }

@media (max-width: 767px) {

	#news { padding: 5em 1.25em; }
	#news .inside { padding: 2em; }
	#news ul li a {
		display: block;
		line-height: 2;
		padding: 1em 0;
	}
	#news ul li a span { display: none; }
}

@media (min-width: 768px) {

	#news { padding: 5em 1.875em; }
	#news .inside { padding: 2em 4em; }
	#news ul li a {
		display: table;
		width: 100%;
		padding: 1em 0;
		-webkit-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	#news ul li a > * {
		display: table-cell;
		vertical-align: middle;
	}
	#news ul li a time { width: 8em; }
	#news ul li a p { padding: 0 1em 0 0; }
	#news ul li a span { width: 1.5em; }

}

#news ul li a:hover {
	color: var( --baby-blue );
}

/* ---------------------------------------- greeting */

#greeting {
	background: var( --alice-blue );
	padding: 5em 1.875em;
}
#greeting h2 { color: var( --baby-blue ); }
#greeting figure { 
	text-align: center;
	margin: 0 0 2em; 
}
#greeting figure img { border-radius: 1em; }

@media (max-width: 767px) {
	#greeting .inside,
	#greeting p { line-height: 2; }
}

@media (min-width: 768px) {
	#greeting .inside,
	#greeting p { line-height: 2.5; }
}

/* ---------------------------------------- concept */

#concept {
	padding: 5em 1.875em;
}
#concept h2 { color: var( --baby-blue ); }

#concept .insidewrap .inside figure {
	text-align: center;
	margin: 0 0 1em;
	position: relative;
}
#concept .insidewrap .inside figure::after {
	display: block;
	font-family: 'icomoon';
	color: var( --baby-blue );
	background: #fff;
	border: 2px var( --baby-blue ) solid;
	padding: .6em;
	border-radius: 100%;
	opacity: .8;
	position: absolute;
	top: -.75em;
	left: -.5em;
}
#concept .insidewrap .inside:nth-child(1) figure::after {
	content: "\e908";
}
#concept .insidewrap .inside:nth-child(2) figure::after {
	content: "\e90f";
}
#concept .insidewrap .inside:nth-child(3) figure::after {
	content: "\e916";
}

#concept .insidewrap .inside figure img {
	border: 4px #fff solid;
	border-radius: .75em;
}
#concept .insidewrap .inside p { line-height: 1.8; }

#concept .menu li {
	background: var( --pale-celadon );
	padding: 1.5em 1.5em 1em;
	border-radius: .75em;
}
#concept .menu h3 {
	color: #fff;
	margin: 0 0 .5em;
}
#concept .menu h3 span {
	margin: 0 1em 0 0;
}
#concept .menu .pagelink {
	margin: 0;
}
#concept .menu .pagelink a {
	color: var( --pale-blue );
	border: 2px var( --pale-blue ) solid;
	background: #fff;
}
#concept .menu .pagelink a:hover {
	color: #fff;
	border: 2px #fff solid;
	background: var( --pale-celadon );
	opacity: 1;
}

@media (max-width: 767px) {

	#concept .insidewrap { margin: 0 0 3em; }
	#concept .insidewrap .inside:not(:last-child) {
		margin: 0 0 3em;
	}
	#concept .insidewrap .inside figure::after {
		font-size: clamp(1.125rem, 0.857rem + 1.34vw, 1.5rem);
	}
	#concept .menu li:not(:last-child){ margin: 0 0 1em; }
}

@media (min-width: 768px) {

	#concept .inner {
		max-width: 1200px;
	}

	#concept .insidewrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 0 5em;
	}
	#concept .insidewrap .inside {
		width: 30%;
		margin: 0 5% 0 0;
	}
	#concept .insidewrap .inside:nth-child(3) {
		margin: 0;
	}
	#concept .insidewrap .inside figure::after {
		font-size: clamp(1.125rem, -0.116rem + 2.59vw, 1.5rem);
	}

	#concept .menu {
		display: flex;
		justify-content: space-between;
	}
	#concept .menu li {
		width: 48%;
	}

}

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

#gallery {
	background: #f5f5f5;
	padding: 5em 1.875em;
}
#gallery ul li {
	overflow: hidden;
	border: 4px #fff solid;
	aspect-ratio: 1;
}
#gallery ul li a img {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#gallery ul li a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

@media (max-width: 767px) {

	#gallery ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#gallery ul li:not(:last-child) { margin: 0 0 1em; }

}

@media (min-width: 768px) {

	#gallery ul {
		display: flex;
		justify-content: space-between;
	}
	#gallery ul li {
		width: 22%;
	}

}

/* ---------------------------------------- blog */

#blog {
	padding: 5em 1.875em;
}
#blog .inside {
	background: #f5f5f5;
	padding: 2em;
	border-radius: 1em;
}
#blog h2 { color: var( --baby-blue ); }
#blog ul li {
	border-bottom: 3px #ccc dotted;
	line-height: 1.6;
}
#blog ul li a time { font-weight: 800; }
#blog ul li a span { width: 1.5em; }

@media (max-width: 767px) {

	#blog { padding: 5em 1.25em; }
	#blog .inside { padding: 2em; }
	#blog ul li a {
		display: block;
		line-height: 2;
		padding: 1em 0;
	}
	#blog ul li a span { display: none; }

}

@media (min-width: 768px) {

	#blog .inside { padding: 2em 4em; }
	#blog ul li a {
		display: table;
		width: 100%;
		padding: 1em 0;
		-webkit-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	#blog ul li a > * {
		display: table-cell;
		vertical-align: middle;
	}
	#blog ul li a time { width: 8em; }
	#blog ul li a p { padding: 0 1em 0 0; }

}

#blog ul li a:hover {
	color: var( --baby-blue );
}

/* ---------------------------------------- review */

#review {
	background: #f5f5f5;
	padding: 5em 1.875em;
}
#review ul li {
	border-bottom: 3px #ccc dotted;
	line-height: 1.6;
}
#review ul li h3 {
	text-align: left;
	margin: 0 0 .5em;
}
#review ul li a > figure { 
	text-align: center; 
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#review ul li a time { font-weight: 800; }
#review ul li a span { width: 1.5em; }

@media (max-width: 767px) {

	#review ul li a {
		display: block;
		padding: 1.5em 0;
		position: relative;
	}
	#review ul li a > figure { margin: 0 0 1em; }
	#review ul li a span {
		text-align: right;
		position: absolute;
		bottom: 2em;
		right: 0;
	}

}

@media (min-width: 768px) {

	#review .inside { padding: 2em 4em; }
	#review ul li a {
		display: table;
		width: 100%;
		padding: 1em 0;
		-webkit-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	#review ul li a > * {
		display: table-cell;
		vertical-align: middle;
	}
	#review ul li a > figure { width: 22%; }
	#review ul li a > div { padding: 0 2em; }

}

#review ul li a:hover {
	color: var( --baby-blue );
}
#review ul li a:hover > figure {
	opacity: .5;
}