@media screen and (min-width:768px) {
	.m-sp {
		display: none !important;
	}
	.m-row {
		width: 100%;
	}
	.hsize_9of10 {
		width: 90%;
		margin: 0 auto;
	}
	.hmax_9of10 {
		max-width: 1148px;
	}
	.m-pc_flex,
	.m-flex {
		-js-display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin: 0 -14px;
		margin: 0 -0.875rem;
	}
	.m-pc_flex.m-align_center,
	.m-flex.m-align_center {
		align-items: center;
		justify-content: center;
	}
	.m-pc_flex .m-half,
	.m-flex .m-pc_half {
		-webkit-box-flex: 0;
		-webkit-flex-grow: 0;
		-ms-flex-positive: 0;
		flex-grow: 0;
		width: 50%;
		min-width: 50%;
		max-width: 50%;
	}
	.m-pc_flex .m-third,
	.m-flex .m-pc_third {
		-webkit-box-flex: 0;
		-webkit-flex-grow: 0;
		-ms-flex-positive: 0;
		flex-grow: 0;
		width: 33.3333333333%;
		min-width: 33.3333333333%;
		max-width: 33.3333333333%;
	}
	.m-pc_flex .m-quarter,
	.m-flex .m-pc_quarter {
		-webkit-box-flex: 0;
		-webkit-flex-grow: 0;
		-ms-flex-positive: 0;
		flex-grow: 0;
		width: 25%;
		min-width: 25%;
		max-width: 25%;
	}
	.m-debug-grid {
		position: fixed;
		bottom: 0;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 90%;
		max-width: 1176px;
		margin: 0;
		padding: 0;
		z-index: 90;
	}
	.m-debug-grid .m-twelve {
		position: relative;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.m-debug-grid .m-twelve:before {
		display: block;
		content: ' ';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 14px;
		right: 14px;
		background: rgba(0,125,0,0.25);
	}
	p, li {
		font-size: 14px;
		font-size: 0.875rem;
	}
	p a, li a {
		color: #00A882;
		text-decoration: none;
	}
	p a:hover .label,
	li a:hover .label {
		text-decoration: underline;
	}
	.sp {
		display: none !important;
	}
	.m-white_triangles {
		background: url(../images/bg-white_triangles.png) 50% 0;
		background: url(../images/bg-white_triangles.svg) 50% 0/auto 196px;
	}
	.m-green_triangles {
		background: url(../images/bg-green_triangles.png) 50% 0;
		background: url(../images/bg-green_triangles@2x.png) 50% 0/auto 80px;
	}
	.m-green_rails {
		position: relative;
	}
	.m-green_rails:before,
	.m-green_rails:after {
		display: block;
		content: ' ';
		position: absolute;
		top: 32px;
		top: 2rem;
		bottom: 32px;
		bottom: 2rem;
		z-index: 4;
		width: 8px;
		width: 0.5rem;
		margin: 0;
		padding: 0;
		background: #00A882;
	}
	.m-green_rails:before {
		left: 0;
	}
	.m-green_rails:after {
		right: 0;
	}


	/***
	 * フォント・見出し
	 **********************************************************************************/
	.h2 {
		margin: 0 0 16px 0;
		margin: 0 0 1rem 0;
	}


	/***
	 * トップのお知らせ
	 **********************************************************************************/
	#m-news {
		position: relative;
		height: 100vh;
		margin: 0;
		padding: 0;
		background: url(../images/bg_101868302@2x.jpg) no-repeat 50% 0;
		background: url(../images/bg_101868302@2x.jpg) no-repeat 50% 0/cover;	
	}
	#m-news .m-wrap {
		padding-top: 55vh;
	}
	#m-news .m-pc_flex {
		justify-content: space-between;
		position: relative;
		height: 45vh;
	}
	#m-news .h1 {
		border: 0;
		margin: 0 0 16px 0;
		margin: 0 0 1rem 0;
		padding: 0;
		color: #00665F;
		font-size: 40px;
		font-size: 2.5rem;
		font-weight: bold;
		font-weight: 700;
		line-height: 1.3;
	}
	#m-news .h1 .spacer {
		display: inline-block;
		width: 104px;
		width: 6.5rem;
	}
	#m-news .h1 + p strong {
		letter-spacing: 0.1em;
	}
	#m-news .h3 {
		margin: 0;
	}
	#m-news .m-col:last-child {
		position: relative;
		margin: 0;
		padding-top: 104px;
		padding-top: 6.5rem;
		padding-bottom: 24px;
		padding-bottom: 1.5rem;
	}
	#m-news .m-col:last-child .m-block {
		position: absolute;
		bottom: 104px;
		bottom: 2vh;
		left: 28px;
		left: 1.75rem;
		right: 64px;
		right: 4rem;
	}

	#m-news ul, 
	#m-news li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#m-news li {
		margin: 0 0 8px 0;
		margin: 0 0 0.5rem 0;
	}
	#m-news .m-more {
		text-align: right;
	}
	#m-news .m-more .m-button_list {
		display: inline-block;
		vertical-align: top;
	}
	#m-news .m-next .company {
		display: block;
		position: absolute;
		top: 50%;
		right: -36px;
		right: -2.25rem;
		margin: -8px 0 0 0;
		margin: -0.5rem 0 0 0;
		padding: 0;
		transform: rotateZ(90deg);
		color: #4C4638;
		font-size: 24px;
		font-size: 1.5rem;
		letter-spacing: 0.05em;
	}
	#m-news .m-next .arrow {
		display: block;
		position: absolute;
		left: 14px;
		left: 0.875rem;
		bottom: 16px;
		bottom: 1rem;
		width: 50px;
		width: 3.125rem;
		height: 21px;
		height: 1.3125rem;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: url(../images/arrow_down.png) no-repeat 50% 50%;
		background: url(../images/arrow_down.svg) no-repeat 50% 50%/100% auto;
		text-decoration: none;
		text-indent: 200%;
		white-space: nowrap;
	}


	/***
	 * トップの会社情報
	 **********************************************************************************/
	#m-about-solution {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.m-visual_about {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	.m-visual_about:before {
		display: block;
		position: absolute;
		top:0;
		left: 50%;
		transform: translateX(-50%);
		content: ' ';
		background: url(../images/visual-about.png) no-repeat 0 0;
		width: 1373px;
		width: 86rem;
		height: 784px;
		height: 49rem;
		margin: 0 0 0 52px;
		margin: 0 0 0 3.3rem;
		z-index: 1;
	}
	.m-visual_about > .m-row {
		position: relative;
		z-index: 2;
	}
	.m-visual_about > .m-row:first-child {
		min-height: 589px;
		min-height: 36.7rem;
	}
	#m-about .h2 {
		margin: 0 0 16px 0;
		margin: 0 0 1rem 0;
	}
	#m-solution {
		padding: 0 0 32px 0;
		padding: 0 0 2rem 0;
	}
	.m-solution {
		display: block;
		padding: 16px 0 24px 0;
		padding: 1rem 0 1.5rem 0;
	}
	.m-solution h3 {
		width: 100%;
		margin: 0;
		padding: 8px 0;
		padding: 0.5rem 0;
		color: #4C4638;
		font-size: 14px;
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1.8;
	}
	.m-solution .semi_bold {
		font-weight: bold;
		font-weight: 600;
	}
	.m-solution .fa {
		display: block;
		margin: 8px auto;
		margin: 0.5rem auto;
	}
	.m-solution p {
		font-size: 12px;
		font-size: 0.75rem;
		padding: 0 14px;
		padding: 0 0.875rem;
	}


	/***
	 * トップのワークス
	 **********************************************************************************/
	#m-works {
		padding: 0 0 48px 0;
		padding: 0 0 3rem 0;
	}
	 .m-slider {
		 width: 100%;
		 overflow: hidden;
		 white-space: nowrap;
	 }
	 .m-slide {
		 display: inline-block;
		 max-width: 500px;
	 }
	.m-work {
		display: block;
		padding: 1rem 0;
		min-height: 200px;
		background-repeat: no-repeat;
		background-position: center;
		background-color: rgba(255,255,255,0.9);
		background-blend-mode:lighten;
	}
	.m-work figure {
		display: block;
		position: relative;
		width: 100%;
		margin: 1rem 0 0 0;
		margin: 16px 0 0 0;
		padding: 65% 0 0 0;
		overflow: hidden;
	}
	.m-work img {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.m-work h3,
	.m-work h4,
	.m-work h5 {
		margin: 0 0 8px 0;
		margin: 0 0 0.5rem 0;
		padding: 12px 0;
		padding: 0.75rem 0;
	}
	.m-work h3 span,
	.m-work h4 span, 
	.m-work h5 span {
		color: #4C4638;
		font-size: 18px;
		font-size: 1.125rem;
		font-weight: 600;
		display: block;
	}
	.m-work h3 span + span,
	.m-work h4 span + span, 
	.m-work h5 span + span {
		font-size: 11px;
		font-size: 0.6875rem;
		font-weight: 600;
	}
	.m-work p {
		margin: 0 16px;
		margin: 0 1rem;
		font-size: 14px;
		font-size: 0.875rem;
	}
	.tns-controls button:first-child {
		left: -48px;
		left: -3rem;
	}
	.tns-controls button:first-child + button {
		right: -48px;
		right: -3rem;
	}
	.m-work.ios {
		background-image: url(../images/ico-ios_app@2x.png);
	}
	.m-work.movabletype {
		background-image: url(../images/ico-movable_type@2x.png);
	}
	.m-work.system {
		background-image: url(../images/ico-system_dev@2x.png);
	}
	.m-work.infra {
		background-image: url(../images/ico-infra@2x.png);
	}


	/***
	 * トップの「アクセスと会社概要」
	 **********************************************************************************/
	#m-access {
		background: #000;
	}
	#m-access .m-half:first-child {
		padding-left: 0;
		padding-right: 8.5%;
	}
	#m-access .m-half:first-child + .m-half {
		padding-left: 0;
	}
	.m-visual_profile {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	.m-visual_profile:before,
	.m-visual_profile:after {
		display: block;
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		content: ' ';
		margin: 0;
		padding: 0;
		z-index: 1;
	}
	.m-visual_profile:before {
		background: url(../images/visual-profile.jpg) no-repeat 0 0;
		background-size: cover;
	}
	.m-visual_profile:after {
		background: rgba(51,51,51,0.85);
	}
	.m-visual_profile > .m-row {
		position: relative;
		z-index: 2;
	}
	.m-visual_profile .h2 span {
		color: #fff;
	}
	.m-access {
		padding: 16px 0 104px 0;
		padding: 1rem 0 6.5rem 0;
	}
	.m-access p {
		color: #fff;
		font-size: 13px;
		font-size: 0.8125rem;
		letter-spacing: 0.1em;
	}
	.m-access p a span {
		text-decoration: underline;
	}
	.m-profile {
		padding: 16px 0 104px 0;
		padding: 1rem 0 6.5rem 0;
	}
	.m-profile dt {
		width: 182px;
		width: 11.375rem;
		color: #fff;
	}
	.m-profile dd {
		margin: 0 0 0 194px;
		margin: 0 0 0 12.125rem;
		color: #fff;
	}


	/***
	 * トップの「メンバー」
	 **********************************************************************************/
	#m-members .h2 {
		border: 0;
	}
	#m-members .m-wrap:last-child {
		background: url(../images/bg-green_stripes.png) repeat-x 50% 32px;
		background: url(../images/bg-green_stripes.svg) repeat-x 50% 2rem/auto 197px;
	}
	#m-members .m-half:first-child {
		padding: 0 4.75% 0 9.5%;
	}
	#m-members .m-half:first-child + .m-half {
		padding: 0 9.5% 0 4.75%;
	}
	.m-member {
		position: relative;
		margin: 32px 0 0 0;
		margin: 2rem 0 0 0;
		padding: 0 0 80px 0;
		padding: 0 0 5rem 0;
	}
	.m-member ul,
	.m-member li {
		display: block;
		margin: 0;
		padding: 0;
	}
	.m-member ul {
		position: absolute;
		top: 240px;
		top: 15rem;
		right: 0;
		white-space: nowrap;
	}
	.m-member .fa {
		vertical-align: top;
		width: 28px;
		width: 1.75rem;
		height: 28px;
		height: 1.75rem;
	}
	.m-member li {
		display: inline-block;
		vertical-align: top;
		margin: 0 0 0 10px;
		margin: 0 0 0 0.625rem;
	}
	.m-member figure {
		display: block;
		margin: 0;
		padding: 12px 0 36px 0;
		padding: 0.75rem 0 2.25rem 0;
	}
	.m-member .h3 {
		margin: 8px 0;
		margin: 0.5rem 0;
	}
	.m-member .h3 span:first-child {
		color: #4C4638;
		letter-spacing: 0.28rem;
	}
	.m-member .h3 span:first-child + span {
		font-style: italic;
		font-weight: normal;
		font-weight: 400;
		letter-spacing: 0.08125rem;
	}
	.m-member .h3 + p {
		font-size: 13px;
		font-size: 0.8125rem;
		line-height: 2;
	}


	/***
	 * ニュース
	 **********************************************************************************/
	#m-news_archive {
		padding: 138px 0 0 0;
		padding: 2.625rem 0 0 0;
	}
	#m-news_archive .h2 {
		border: 0;
	}
	#m-news_archive .h2 span:first-child {
		font-weight: 600;
	}
	#m-news_archive .m-block {
		background: #fff;
		margin: 0 0 200px 0;
		margin: 0 0 12.25rem 0;
		padding: 80px 96px;
		padding: 5rem 5.75rem;
	}
	#m-news_archive .m-list ul,
	#m-news_archive .m-list li {
		list-style: none;
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	#m-news_archive .m-list .label {
		display: block;
		margin: 0;
		padding: 0 0 16px 0;
		padding: 0 0 1rem 0;
		width: 100%;
	}
	.m-post_header {
		position: relative;
		margin: 0 0 64px 0;
		margin: 0 0 4rem 0;
		padding: 0;
	}
	.m-post_header .h1 {
		margin: 0 0 12px 0;
		margin: 0 0 0.75rem 0;
		padding: 0;
		color: #00665F;
		font-size: 28px;
		font-size: 1.75rem;
		font-weight: bold;
		font-weight: 700;
		line-height: 1.75;
	}
	.m-post_headerMetas {
		margin: 0;
		padding: 0;
		line-height: 2.3;
	}
	.m-post_headerMetas time,
	.m-post_headerMetas span {
		color: #999;
		font-size: 14px;
		font-size: 0.875rem;
		margin: 0;
		padding: 0;
	}
	.m-post_headerSNS,
	.m-post_footerSNS {
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
		white-space: nowrap;
	}
	.m-post_headerSNS {
		bottom: 4px;
		bottom: 0.25rem;
	}
	.m-post_footerSNS {
		bottom: 20px;
		bottom: 1.25rem;
	}
	.m-post_headerSNS .fa,
	.m-post_footerSNS .fa {
		vertical-align: top;
		width: 28px;
		width: 1.75rem;
		height: 28px;
		height: 1.75rem;
	}
	.m-post_headerSNS li,
	.m-post_footerSNS li {
		display: inline-block;
		vertical-align: top;
		margin: 0 0 0 10px;
		margin: 0 0 0 0.625rem;
	}
	.m-post_body {
		margin: 0;
		padding: 0 0 92px 0;
		padding: 0 0 5.75rem 0;
	}
	.m-post_body a {
		color: #00A882;
		text-decoration: underline;
	}
	.m-post_footer {
		position: relative;
		margin: 0;
		padding: 25px 0;
		padding: 1.5625rem 0;
		border-top: 1px solid #eee;
		border-top: 0.0625rem solid #eee;
	}
	.m-post_footer p {
		margin: 0;
		padding: 0;
		line-height: 2.3;
	}
	.m-post_footer .back {
		display: block;
		width: 21px;
		width: 1.3125rem;
		height: 21px;
		height: 1.3125rem;
		margin: 0;
		padding: 0;
		background: url(../images/ico-back.png) no-repeat 50% 50%;
		background: url(../images/ico-back.svg) no-repeat 50% 50%/20px auto;
		overflow: hidden;
		text-indent: 200%;
		white-space: nowrap;
		text-decoration: none;
	}
	/***
	 * お問い合わせ
	 **********************************************************************************/
	#m-contact {
		padding: 138px 0 0 0;
		padding: 2.625rem 0 0 0;
	}
	#m-contact .h2 {
		border: 0;
	}
	#m-contact .h2 span:first-child {
		font-weight: 600;
	}
	#m-contact .m-block {
		background: #fff;
		margin: 0 0 200px 0;
		margin: 0 auto 12.25rem auto;
		padding: 80px 96px;
		padding: 5rem 5.75rem;
		width: 500px;
	}
	#m-contact .m-list ul,
	#m-contact .m-list li {
		list-style: none;
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	#m-contact .m-list .label {
		display: block;
		margin: 0;
		padding: 0 0 16px 0;
		padding: 0 0 1rem 0;
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1232px) {
	#m-news .h1 {
		font-size: calc( 20px + (37 - 20) * (100vw - 768px) / (1232 - 768) );
	}
	#m-news .h1 + p {
		font-size: calc( 10px + (16 - 10) * (100vw - 768px) / (1232 - 768) );		
	}
}

@media screen and (min-width: 1001px) {
	/***
	 * ヘッダー
	 **********************************************************************************/
	#m-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		background: rgba(255,255,255,0);
		transition: background-color 0.3s;
	}
	#m-header .h1,
	#m-header #navbar {
		transition: padding 0.3s;
	}
	.m-fixed_navbar #m-header {
		position: fixed;
		z-index: 999;
		background: rgba(255,255,255,0.75);
	}
	.m-fixed_navbar #m-header .h1 {
		padding: 4px 0;
		padding: 0.25rem 0;
	}
	.m-fixed_navbar #m-header #navbar {
		padding: 12px 0 0 0;
		padding: 0.75rem 0 0 0;
	}
	#m-header .h1 {
		float: left;
		margin: 0;
		padding: 32px 0;
		padding: 2rem 0;
		border: 0;
	}
	#m-header .h1 a {
		display: block;
	}
	#logo {
		display: block;
		overflow: hidden;
		width: 292px;
		width: 18.25rem;
		height: 30px;
		height: 1.875rem;
		background: url(../images/m-logic.png) no-repeat 50% 50%;
		background: url(../images/m-logic.svg) no-repeat 50% 50%/100% auto;
		text-decoration: none;
		text-indent: 200%;
		white-space: nowrap;
	}
	#opener {
		display: none;
	}
	#navbar {
		display: block;
		float: right;
		margin: 0;
		padding: 42px 0 0 0;
		padding: 2.6rem 0 0 0;
	}
	#navbar ul,
	#navbar li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#navbar li {
		display: inline-block;
		vertical-align: top;
	}
	#navbar li:first-child {
		display: none; /* ホーム */
	}
	#navbar a {
		display: block;
		padding: 0 4px;
		padding: 0 0.25rem;
		line-height: 1.4;
		text-decoration: none;
	}
	#navbar li:last-child a {
		padding-right: 0;
	}
	#navbar a:before {
		display: inline;
		color: #00A683;
		content: '- ';
		margin: 0;
		padding: 0;
	}
	#navbar a span:first-child {
		color: #4C483B;
		font-size: 13px;
		font-size: 0.8125rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	#navbar a span:first-child + span {
		display: none;
	}
}