@charset "utf-8";
/* CSS Document */

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */

@media screen and (min-width: 600px) {
	/* 600px以上に適用されるCSS（タブレット用） */
	/* 左右で等倍*/

	.no-tb {
		display: none;
	}

	/* 上部固定ナビ-------------*/

	.top-container {
		align-items: flex-end;
		width: 95%;
		margin: 0 auto;
	}

	.top-wrap {
		max-width: 600px;
		flex-flow: row nowrap;
	}

	.top-wrap h1,
	.top-wrap h2 {
		text-align: left;
	}

	.top-wrap-btn {
		margin: 0 20px;
	}

	.main-message img {
		width: 25%;
	}

	.grid-wrap {
		grid-template-columns: 1fr 1fr;
	}

	.zoom-in-img {
		max-width: 100%;
	}

.main-works {
	grid-template-columns: repeat(2, 1fr);
}

	.works-grid-s {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	.wid {
		width: 70%;
	}

	.history dl dt {
		width: 8.5em;
	}

	.history dl dd {
		width: calc(100% - 8.5em);
	}

}

@media screen and (min-width: 769px) {
	/* 769px以上に適用されるCSS（タブレット用） */


	/* 上部固定ナビ-------------*/

	.top-container {
		justify-content: space-between;
	}

	.top-wrap {
		flex-flow: column wrap;
		align-items: flex-start;
		align-content: space-between;
		justify-content: space-around;
		height: 60px;
	}

	.top-nav-pc {
		display: block;
	}

	.top-nav-pc ul {
		display: flex;
		justify-content: center;
		height: 60px;
	}

	.top-nav-pc li {
		padding: 20px 12px 0;
	}

	.top-nav-pc a {
		display: inline-block;
		position: relative;
		display: inline-block;
		color: #0b4f49 !important;
		margin-top: 12px;
	}

	.top-nav-pc a:hover {
		text-decoration: none;
		cursor: pointer;
		color: #CB1B45 !important;
	}

	.top-nav-pc a::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #CB1B45;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .3s;
	}

	.top-nav-pc a:hover::after {
		transform: scale(1, 1);
	}

	.icon_home {
		width: auto;
		height: 24px;
		margin-top: -5px;
		-webkit-filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
		filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
	}

	.icon_home:hover,
	.icon_contact:hover {
		-webkit-filter: invert(19%) sepia(80%) saturate(3670%) hue-rotate(334deg) brightness(82%) contrast(94%);
		filter: invert(19%) sepia(80%) saturate(3670%) hue-rotate(334deg) brightness(82%) contrast(94%);
	}

	.icon_contact {
		width: auto;
		height: 28px;
		margin-top: -7px;
		-webkit-filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
		filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
	}

	.icon_tw {
		width: auto;
		height: 22px;
		margin-top: -4px;
		-webkit-filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
		filter: invert(23%) sepia(15%) saturate(2606%) hue-rotate(127deg) brightness(92%) contrast(91%);
	}

	.icon_tw:hover {
		-webkit-filter: invert(0%) sepia(0%) saturate(7474%) hue-rotate(87deg) brightness(102%) contrast(108%);
		filter: invert(0%) sepia(0%) saturate(7474%) hue-rotate(87deg) brightness(102%) contrast(108%);

	}

	.top-nav-btn {
		display: none;
	}

	.main-message {
		text-align: center;
	}

	.float-left50 {
		float: left;
		width: 49%;
		height: auto;
	}

	.float-right50 {
		float: right;
		width: 49%;
		height: auto;
	}

	/* 左右6：4*/
	.float-left60 {
		float: left;
		width: 59%;
		height: auto;
	}

	.float-right40 {
		float: right;
		width: 39%;
		height: auto;
	}

	/* 左右4：6*/
	.float-left40 {
		float: left;
		width: 39%;
		height: auto;
	}

	.float-right60 {
		float: right;
		width: 59%;
		height: auto;
	}

	/* 左3：右7*/
	.float-left30 {
		float: left;
		width: 29%;
		height: auto;
	}

	.float-right70 {
		float: right;
		width: 69%;
		height: auto;
	}

	/* 左7：右3*/
	.float-left70 {
		float: left;
		width: 69%;
		height: auto;
	}

	.float-right30 {
		float: right;
		width: 29%;
		height: auto;
	}

	/*２分割*/
	.works-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	/*3分割*/
	.works-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.message-wrapper {
		width: 80%;
	}

	.message-img {
		width: 200px;
		height: 200px;
	}
}

/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 960px) {

	.container {
		max-width: 1200px;
	}

	/* 上部固定ナビ-------------*/

	.top-container {
		align-items: flex-end;
		width: 95%;
		margin: 0 auto;
		max-width: 1200px;
	}

	.top-wrap {
		max-width: 600px;
		flex-flow: row nowrap;
	}

	.top-wrap h1,
	.top-wrap h2 {
		text-align: left;
	}

	.top-wrap-btn {
		margin: 0 20px;
	}


	.main-message h2 {
		margin-top: 80px;
	}

	.flex-wrap {
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
	}

	.grid-wrap {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.main-about {
		display: flex;
		justify-content: center;
		text-align: left;
	}

	.about-img {
		margin-right: 50px;
	}

	.no-pc {
		display: none;
	}
	.history dl dd {
		padding: 0.2em 1.0em 2.0em;
	}
	.history dl dd h2 {
		margin: 3px 0 20px;
		font-size: 20px;
	}

	.history dl dd h2 span {
		display: inline;
		font-size: 0.7em;
		width: 300px;
		margin-right:10px;
	}

	/* PC版は非表示＝改行しない*/
	.no-sp {
		display: block;
	}
}