@charset "utf-8";

/*	##################################
	CONTENT
	################################## */

/** ページタイトル */
.page-title-box {
	min-width: 1100px;
	margin: 0 auto;
	margin-bottom: 40px;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.page-title-box {
		min-width: initial;
		min-width: auto;
		width: 90%;
		margin-bottom: 20px;
		padding: 0;
	}
}


/** サブページアイキャッチ画像 */
.eye-catch-sub {
	min-width: 1200px;
	margin: 0 auto;
	margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
	.eye-catch-sub {
		min-width: initial;
		min-width: auto;
		width: 100%;
		margin-bottom: 40px;
		padding: 0;
	}
}

.eye-catch-sub img {
	width: 100%;
	height: auto;
}


/** 2カラム用、1カラム用外枠 */
.container-box {
	min-width: 1100px;
	margin: 0 auto;
	margin-bottom: 80px;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.container-box {
		min-width: initial;
		min-width: auto;
		width: 90%;
		margin-bottom: 40px;
		padding: 0;
	}
}


/** 2カラム用枠 */
.container {
	display: flex;
	min-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.container {
		display: block;
		min-width: initial;
		min-width: auto;
		width: 100%;
		padding: 0;
	}
}


/** 2カラム用メイン */
.container-left {
	width: calc(100% - 380px);
	padding-right: 80px;
}
@media screen and (max-width: 767px) {
	.container-left {
		width: 100%;
		padding: 0;
		margin-bottom: 40px;
	}
}

.box-left {
	margin: 0;
	padding: 0;
}

.box-left p {
	margin-bottom: 20px;
	line-height: 200%;
}

.box-left img {
	margin-top: 20px;
	margin-bottom: 20px;
}


/** 2カラム用サイド */
.container-right {
	width: 300px;
	word-break: break-word;
}
@media screen and (max-width: 767px) {
	.container-right {
		width: 100%;
	}
}

.box-right {
	margin: 0;
	margin-bottom: 40px;
	padding: 0;
}
@media screen and (max-width: 767px) {
	.box-right {
		margin-bottom: 20px;
	}
}

.box-right a {
	color: #000000;
	text-decoration: none;
}

.box-right a:hover {
	color: #040668;
	text-decoration: none;
}

.box-right ul {
	margin: 10px 0;
	list-style: none;
}

.box-right ul li {
	margin-bottom: 10px;
}


/** 1カラム用 */
.container-single {
	min-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.container-single {
		min-width: initial;
		min-width: auto;
		width: 100%;
		padding: 0;
	}
}

.container-single p {
	margin-bottom: 20px;
	line-height: 200%;
}

.container-single img {
	width: 100%;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}


.container-single img.honsha {
	margin-top: 0;
}

.container-single .ceo {
	display: flex;
	margin-top: 20px;
	align-items: center;
	justify-content: flex-end;
}

.container-single .ceo span {
	margin-right: 20px;
}

.container-single .ceo img.signature {
	width: 137px;
	height: auto;
	margin: 0;
	padding: 0;
}

/*	##################################
	ABOUT
	################################## */

/** MARUSYO */
.marusyo {
	min-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.marusyo {
		min-width: initial;
		min-width: auto;
		width: 100%;
		padding: 0;
	}
}

.marusyo dl {
	display: grid;
	grid-template-columns: 250px 1fr;
	line-height: 200%;
}
@media screen and (max-width: 767px) {
	.marusyo dl {
		display: block;
		grid-template-columns: none;
	}
}

.marusyo dl dt {
	padding: 20px;
	font-family: "UD新ゴ M", UD Shin Go Medium, "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-ser;
	border-bottom: 1px solid #eeeeee;
}
@media screen and (max-width: 767px) {
	.marusyo dl dt {
		background: #f5f5f5;
	}
}

.marusyo dl dd {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

/** FACTORY */
.factory {
	min-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.factory {
		min-width: initial;
		min-width: auto;
		width: 100%;
		padding: 0;
	}
}

.factory-box {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.factory-box {
		display: block;
		flex-wrap: nowrap;
	}
}

.factory-box .factory-column-pic {
	width: 50%;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
	.factory-box .factory-column-pic {
		width: 100%;
		margin-bottom: 10px;
		box-sizing: content-box;
	}
}

.factory-box .factory-column-pic img {
	margin: 0;
	padding: 0;
}

.factory-box .factory-column-txt {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
	.factory-box .factory-column-txt {
		width: 100%;
		padding: 0;
		box-sizing: content-box;
	}
}

.factory-box .factory-column-txt h3 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 120%;
}
@media screen and (max-width: 767px) {
	.factory-box .factory-column-txt h3 {
		margin-bottom: 10px;
	}
}

.factory-box .factory-column-txt h3 i {
	margin-right: 10px;
	color: #040668;
}

/*	##################################
	GALLERY
	################################## */

.gallery {
	min-width: 1000px;
	margin: 0 auto;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.gallery {
		min-width: initial;
		min-width: auto;
		width: 100%;
		padding: 0;
	}
}

.gallery h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 0 40px 0;
	font-size: 180%;
}

.gallery h3::before,
.gallery h3::after {
	content: '';
	width: 60px;
	height: 1px;
	background-color: #040668;
}

.gallery h3::before {
	margin-right: 20px;
}
.gallery h3::after {
	margin-left: 20px;
}

.gallery-img {
	margin-top: 40px;
	margin-bottom: 40px;
}

.gallery-img img {
	width: 100%;
	height: auto;
}

.gallery ul.gallery-list {
	width: 100%;
	margin: 0 0 -2% 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2%;
}

.gallery ul.gallery-list li {
	width: calc( (100% - (2% * 3)) / 4 );
	margin: 0;
	margin-bottom: 2%;

	padding: 0;
	list-style: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.js-image {
	cursor: pointer;
	border: none;
	background: none;
	transition: .4s;
}

.js-image:hover {
	opacity: 0.4;
}

.gallery .detail {
	margin-top: 80px;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.gallery .detail {
		margin-top: 40px;
	}
}

.gallery .detail dl {
	display: grid;
	grid-template-columns: 20% 1fr;
	line-height: 200%;
}
@media screen and (max-width: 767px) {
	.gallery .detail dl {
		grid-template-columns: 30% 1fr;
	}
}

.gallery .detail dl dt {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

.gallery .detail dl dd {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

/*	##################################
	LICENCE
	################################## */

.licence {
	margin: 0;
	padding: 0;
}

.licence h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 0 40px 0;
	font-size: 180%;
}
@media screen and (max-width: 767px) {
	.licence h3 {
		margin: 0 0 20px 0;
		font-size: 150%;
	}
}

.licence h3::before,
.licence h3::after {
	content: '';
	width: 60px;
	height: 1px;
	background-color: #040668;
}

.licence h3::before {
	margin-right: 20px;
}
.licence h3::after {
	margin-left: 20px;
}

.licence-table {
	width: 100%;
	margin: 0;
	padding: 0;
}

.licence-table dl {
	display: grid;
	grid-template-columns: 70% 1fr;
	line-height: 200%;
	border-top: 1px solid #eeeeee;
}
@media screen and (max-width: 767px) {
	.licence-table dl {
		grid-template-columns: 60% 1fr;
	}
}

.licence-table dl dt.licence-title,
.licence-table dl dd.licence-title {
	background: #f5f5f5;
	font-family: "UD新ゴ M", UD Shin Go Medium, "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-ser;
	font-size: 120%;
	font-weight: bold;
}
@media screen and (max-width: 767px) {
	.licence-table dl dt.licence-title,
	.licence-table dl dd.licence-title {
		font-size: 110%;
	}
}

.licence-table dl dt {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
}

.licence-table dl dd {
	padding: 20px;
	border-bottom: 1px solid #eeeeee;
}

/*	##################################
	ACCESS
	################################## */

.access {
	margin: 0;
	padding: 0;
}

.access h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 0 40px 0;
	font-size: 180%;
}
@media screen and (max-width: 767px) {
	.access h3 {
		margin: 0 0 20px 0;
		font-size: 150%;
	}
}

.access h3::before,
.access h3::after {
	content: '';
	width: 60px;
	height: 1px;
	background-color: #040668;
}

.access h3::before {
	margin-right: 20px;
}
.access h3::after {
	margin-left: 20px;
}

.access h4 {
	margin: 40px 0 20px 0;
}
@media screen and (max-width: 767px) {
	.access h4 {
		font-size: 130%;
	}
}

/*	##################################
	MAILFORM
	################################## */

.mailform {
	min-width: 1000px;
	margin: 0 auto;
	margin-top: 80px;
	padding: 0 50px;
}
@media screen and (max-width: 767px) {
	.mailform {
		min-width: initial;
		min-width: auto;
		width: 100%;
		margin-top: 40px;
		padding: 0;
	}
}

.mailform dl {
	display: grid;
	grid-template-columns: 30% 1fr;
	line-height: 200%;
}
@media screen and (max-width: 767px) {
	.mailform dl {
		display: block;
		grid-template-columns: none;
	}
}

.mailform dl dt {
	margin: 0;
	padding: 20px 0;
	font-family: "UD新ゴ M", UD Shin Go Medium, "ヒラギノ角ゴ Pro W6", "HiraKakuPro-W6", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-ser;
}
@media screen and (max-width: 767px) {
	.mailform dl dt {
		padding: 0;
	}
}

.mailform dl dt span {
	margin: 0 0 0 10px;
	padding: 5px 10px;
	background: #c9171e;
	font-size: 90%;
	color: #ffffff;
	border-radius: 4px;
}

.mailform dl dd {
	margin: 0;
	padding: 20px 0;
}
@media screen and (max-width: 767px) {
	.mailform dl dd {
		padding: 0 0 20px 0;
	}
}

.mailform dl dd p {
	margin: 0;
	margin-top: 10px;
	padding: 0;
	font-size: 90%;
	line-height: 150%;
}
@media screen and (max-width: 767px) {
	.mailform dl dd p {
		font-size: 85%;
	}
}

.mailform dl dd input.text01 {
	width: 80% !important;
}

.mailform dl dd textarea.textarea01 {
	width: 90% !important;
	height: 300px !important;
}

.mailform dl dd input.submit {
	cursor: pointer;
	padding: 15px 35px;
	border: none;
	border-radius: 4px;
	color: #ffffff;
	font-weight: bold;
	background: #040668;
}

.mailform dl dd input.submit:hover {
	background: #02044b;
}