@charset "utf-8";
/**
 * StyleName		: _base
 * MainImageWidth	: 940
 * MainImageHeight	: free
 */

/** Tags
------------------------------ **/
@import url("//share.cr-cms.net/hp_agency/hpagency.css");
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,700");
* {
	margin: 0;
	padding: 0;
	font-family: inherit;
}
#wrap * {
	box-sizing: border-box;
}
table {
	margin: auto;
}
img {
	border: none;
	vertical-align: bottom;
}
ul,
li {
	list-style: none;
}
html {
	scroll-behavior: smooth;
}

/** Fonts
------------------------------ **/
@font-face {
	font-family: "Yu Gothic M";
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: YuGothicM;
	src: local("Yu Gothic Medium");
}
@font-face {
	font-family: "Yu Gothic M";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
body {
	font-size: 16px;
	letter-spacing: 0.5px;
	font-kerning: auto;
	line-height: 2;
	font-family: "Open Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
		"BIZ UDGothic", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium",
		"Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.serif {
	font-family: Georgia, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", "游明朝体",
		"YuMincho", "游明朝", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
#name,
h2,
h3,
h4,
h5,
h6,
.article.concept {
	font-feature-settings: "palt";
}

/** Links
------------------------------ **/
a {
	text-decoration: none;
	font-weight: bold;
}
.article a {
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration: none;
}
.footer a:hover,
.footer p a:hover {
	font-weight: bold;
}
.ams-build a,
.ams-build a:hover {
	font-weight: normal;
}

#mainArticles a:hover img,
#sideBanners a:hover img,
div.freeHtml a:hover img,
div.image img.gallery:hover {
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

.sideBanner_body a:hover,
.thumb a:hover,
.image a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

/*Link Button*/
a.btn {
	display: flow-root;
	padding: 16px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	border-radius: 6px;
	justify-content: center;
}
a.btn:hover {
	background: none;
	text-decoration: none;
}

/*Site Guide*/
ul.guide li {
	width: 394px;
	float: left;
	margin-right: 8px;
}
ul.guide li:last-of-type {
	margin: 0;
}

/** Outer Frame
------------------------------ **/
#wrap {
	width: 100%;
	position: relative;
}
#wrap_body {
	display: flex;
	flex-direction: column;
}
#title {
	order: 1;
}
#mainImage {
	order: 3;
}
#topMenu {
	order: 2;
}
#contents {
	order: 4;
}
#footer {
	order: 5;
}
#title_outer,
#title_body,
#footer_body,
#topMenu_outer,
#topMenu_body,
#topMenu .topMenu,
#mainTopics,
#listTopics {
	width: 1200px;
	margin: 0 auto;
}
#mainContents,
#footer_outer,
#mainArticles {
	width: 100%;
	min-width: 1200px;
	margin-bottom: 40px;
}
#title_outer,
div#title_body,
div#footer_body,
#topMenu_outer,
#topMenu_body,
#topMenu .topMenu,
#mainTopics,
#listTopics,
#mainServices {
	width: 1200px;
	min-width: 1200px;
	margin: 0 auto;
}
#mainArticles_body {
	display: flex;
	flex-wrap: wrap;
}

/** Header
------------------------------ **/
#title {
	padding: 0;
	height: 104px;
	text-align: center;
	box-sizing: unset;
}
#title .description {
	font-size: 0.75em;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
}
h1,
h1 a {
	margin-bottom: 0;
	text-decoration: none;
}
/*LOGO*/
h1 a {
	display: flex;
	align-items: center;
	height: 104px;
	width: fit-content;
	background: url("") left center no-repeat;
	font-size: 0.75em;

	/*background-size: 400px;*/
}
#title_outer {
	height: 104px;
	background: url("") right center no-repeat;
	/*background-size: 400px;*/
}

/** Main image **/
.mainImage img,
.mainImage #slider li img {
	max-width: 100%;
	min-width: 1200px;
	width: auto;
	height: auto;
	overflow: hidden;
	margin: auto;
}
#mainImage_body {
	text-align: center;
}

/** Top menu **/

#topMenu {
	width: 100%;
	z-index: 99;
	min-height: 56px;
	/*height: 56px;*/
}
#topMenu_outer,
#topMenu_body {
	width: 1200px;
	/*height: 56px;*/
	margin: 0 auto;
	text-align: center;
}
#topMenu_body {
	display: flex;
	flex-wrap: wrap;
}
#topMenu .topMenu li {
	padding: 0;
	flex: 1 0 auto;
	width: auto;
}
#topMenu .topMenu li a {
	width: auto;
	overflow: hidden;
	font-size: 1.125em;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.05em;
	line-height: 56px;
	padding: 0 0.5em;
	display: block;
}

/** Contents
------------------------------ **/
#pankuz {
	width: 1200px;
	margin: 24px auto;
}
.pankuz p {
	font-size: 0.75em;
	text-align: right;
}
/** Main contents **/
.mainArticles .article,
.mainArticles .gallery {
	width: 100%;
	padding-top: 32px;
	padding-bottom: 32px;
	margin: auto;
	margin-bottom: 1em;
}
.mainArticles .article .article_body,
.mainArticles .gallery .article_body,
#mainBlogComments_body,
#mainBlogCommentForm_body {
	width: 1200px;
	margin: auto;
}
.article p {
	margin-bottom: 1em;
}

/** Footer 
------------------------------ **/
#footer {
	padding: 40px 0;
}
.footer * {
	font-weight: normal;
}
.footer ul.topMenu,
.footer ul.services {
	width: auto;
	text-align: center;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.footer li {
	line-height: 30px;
	height: 30px;
	float: left;
	flex: 1 0 auto;
	width: auto;
	padding: 0 0.5em;
}
.footer ul.services {
	max-width: 1200px;
	flex-wrap: wrap;
	display: none;
}
.footer ul.services li {
	font-size: 0.75em;
	min-width: 10%;
}
.footer li a {
	text-decoration: none;
	display: block;
}
.footer p {
	clear: both;
	line-height: 18px;
	text-align: center;
}
.footer p a:hover {
	text-decoration: none;
}
.footer .copyright {
	padding: 30px 0 5px 0;
	clear: both;
}
#footer_outer {
	margin-bottom: 0;
}
#toggle {
	display: none;
}

/** Responsive
**/
@media only screen and (max-width: 1200px) {
	#title_outer,
	#title_body,
	.article_body,
	#footer_body,
	#topMenu_outer,
	#topMenu_body,
	#topMenu .topMenu,
	.mainImage img,
	.mainImage #slider li img,
	#mainTopics,
	#listTopics,
	#mainContents,
	#footer_outer,
	#mainArticles,
	.mainArticles .article,
	.mainArticles div.gallery,
	#title_outer,
	div#title_body,
	div.article_body,
	div#footer_body,
	#topMenu_outer,
	#topMenu_body,
	#topMenu .topMenu,
	#mainTopics,
	#listTopics,
	#mainServices,
	#pankuz {
		width: 100%;
		min-width: inherit;
	}
	#mainServices {
		display: none;
	}
	#topMenu .topMenu li a {
		font-size: 1em;
	}
}
@media only screen and (max-width: 600px) {
	body {
		font-size: 14px;
		line-height: 1.75;
	}
	div.wrap {
		display: flex;
		flex-direction: column;
	}
	#title {
		order: 1;
	}
	#topMenu {
		order: 2;
	}
	#mainImage {
		order: 3;
	}
	#contents {
		order: 4;
	}
	#footer {
		order: 5;
	}
	#title,
	#title_outer,
	#title_body,
	h1 {
		padding: 0;
		height: 56px;
	}
	#title_outer {
		background: none;
	}
	h1 {
		padding-left: 4%;
	}
	h1 a {
		width: calc(100% - 56px);
		height: 56px;
	}
	#pankuz {
		margin: 8px auto;
	}
	a.btn {
		padding: 8px;
	}

	/* ---------- SP MENU ---------- */
	#toggle {
		width: 56px;
		height: 56px;
		padding: 0;
		display: block;
		text-align: center;
		cursor: pointer;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10001;
	}
	#topMenu {
		position: unset;
		height: 0;
		min-height: 0;
		overflow: hidden;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
	}
	body.active #topMenu {
		height: 245px;
	}
	#topMenu_outer,
	#topMenu_body {
		display: block;
		text-align: left;
		height: 48px;
	}
	#topMenu .topMenu li {
		width: 100%;
		float: none;
	}
	#topMenu .topMenu li a {
		font-size: 1em;
		line-height: 1.25;
		min-height: 48px;
		padding: 0 4%;
		display: flex;
		align-items: center;
	}
	/*FooterLinks*/
	.footer ul.topMenu,
	.footer ul.services {
		display: block;
	}
	.footer ul.topMenu:before,
	.footer ul.services:before {
		display: block;
		height: 48px;
		line-height: 48px;
		font-size: 1em;
		font-weight: bold;
		text-align: left;
		width: 100%;
		padding: 0 10%;
		box-sizing: border-box;
	}
	.footer ul.topMenu:before {
		content: "メニュー";
	}
	.footer ul.services:before {
		content: "サブメニュー";
	}
	.footer ul.topMenu li,
	.footer ul.services li {
		float: none;
		text-align: left;
		height: auto;
		min-height: 40px;
		align-items: center;
		display: flex;
		line-height: 1;
		padding: 0 4%;
		font-size: 1em;
	}
}