@charset "utf-8";
/* CSS Document */
@media screen and (max-width:850px){
	html {
		font-size: 8px;
	}
	body {
		max-width: 850px;
	}
	
	.sec-ttl h4 {
		font-size: 150px;
	}
	
	/*メインビジュアル*/
	.mainvisual {
		width:100%;
		height: 60vh;
		background: url("../img/mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.catch-copy {
		width: 100%;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
	}
	.catch-copy h2 {
		font-size: 60px;
		text-align: center;
		text-shadow: 2px 2px 5px #ccc;
		line-height: 1.2;
	}
	.catch-copy h3 {
		color: blue;
		font-size: 24px;
		text-align: center;
		margin-top: 3rem;
	}

	/*- お知らせ -*/
	#news {
		margin: 5rem auto;
	}
	.sec-ttl2 {
		margin: 3rem auto;
	}
	.sec-ttl2 p {
		text-align: center;
		font-size: 4rem;
		font-style: italic;
		color: #70C1F6;
	}
	.news-inner {
		width: 750px;
		margin: auto;
	}
	.news-inner dl {
		font-size: 18px;
	}
	.news-inner dl dt {
		width: 20%;
		border-bottom: 1px solid #ccc;
		text-align: center;
		color: #202656;
	}
	.news-inner dl dd {
		width: 80%;
		border-bottom: 1px solid #ccc;
	}


	/*- 事業内容 -*/
	.work-wrapper {
		width: 750px;
		margin: auto;
		justify-content: center;
		align-items: flex-start;
		gap:5rem;
		padding-bottom: 100px;
	}
	.work-wrapper .item {
		width: 45%;
		background: #D3EEF9;
		padding-top: 2rem;
	}
	.work-ttl {
		text-align: center;
		font-size: 24px;
		line-height: 1.5;
		margin-bottom: 2rem;
	}
	.work-ttl span {
		font-weight: normal;
		font-size: 18px;
	}
	.work-img {
		width: 90%;
		margin-bottom: -20px;
		margin-left: auto;
		margin-right: auto;
	}


	/*- 施工実績 -*/
	#case {
		background: #EBFAFB;
	}
	.case-wrapper {
		width: 750px;
		margin: auto;
		justify-content: center;
		gap:5rem;
		align-items: flex-start;
		padding-bottom: 100px;
	}
	.case-wrapper .item {
		width: 45%;
		background: #fff;
		padding: 2rem 0;
	}
	.thumbnail {
		width: 90%;
		margin: auto;
	}
	.case-ttl {
		width: 90%;
		margin: 1rem auto 0 auto;
		font-size: 18px;
	}

	/*- 採用情報 -*/
	#recruit {
		background: url("../img/rec-bg.png");
		background-size: cover;
		background-position: center;
	}
	.rec-message .message-b {
		font-size: 40px;
		text-align: center;
	}
	.rec-message .message-s {
		font-size: 20px;
		text-align: center;
		margin-top: 3rem;
		margin-bottom: 5rem;
		line-height: 2;
	}

	/*- お問合せ -*/
	.contact-link {
		width: 750px;
		margin: auto;
		justify-content: space-between;
	}
	.c-link-btn {
		width: 48%;
		height: 120px;
		background: #3260C9;
	}
	.c-link-btn :hover {
		background: rgba(55,150,196,1.00);
	}
	.c-link-btn a {
		display: block;
		text-align: center;
		letter-spacing: 3px;
		line-height: 120px;
	}
	.c-link-btn a i {
		margin-right: 10px;
	}
	.tel-link a {
		font-size: 36px;
		font-style: italic; 
	}
	.web-link a {
		font-size: 28px;
	}


	/*- フッター -*/
	#footer h1 {
		margin-bottom: 2rem;
	}
	#footer h1 a {
		display: block;
		font-size: 70px;
		text-align: center;
		color: #707070;
	}
	#footer h1 a span {
		color: #57A5E9;
	}
	#footer .adoress {
		text-align: center;
		font-size: 18px;
		margin-top: 2rem;
	}

	.foot-bottom {
		background: #70C1F6;
		padding-top: 2rem;
		margin-top: 3rem;
	}
	.foot-nav {
		width: 600px;
		margin: auto;
		justify-content: space-between;
	}
	.foot-nav li a {
		display: block;
		font-size: 16px;
	}
	.copy {
		margin-top: 3rem;
		font-size: 14px;
		text-align: center;
		margin-bottom: 5px;
	}
	
	
	/*--- 下層 ---*/
	/*メインビジュアル*/
	.s-mainvisual {
		width:100%;
		height: 40vh;
		background: url("../img/s-mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.page-ttl {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%);
	}
	.page-ttl h2 {
		font-size: 80px;
		text-align: center;
		text-shadow: 2px 2px 5px #333;
		letter-spacing: 5px;
	}
	.s-secttl {
		width: 500px;
		margin: auto;
		border-bottom: 5px solid;
		padding-bottom: 10px;
		border-image: linear-gradient(to right, #2DBBE8, #9EE8EE)1;
	}
	.s-secttl h3 {
		font-size: 36px;
		text-align: center;
		letter-spacing: 3px;
	}

	/*- 会社概要 -*/
	.c-info-inner {
		width: 750px;
		margin: 5rem auto;
	}
	.c-info-inner th {
		width: 30%;
		padding: 20px 0;
		background: rgba(196,229,254,0.5);
		text-align: center;
	}
	.c-info-inner td {
		margin-left: 20px;
		padding: 20px 0 20px 20px;
	}
	.c-info-inner th,
	.c-info-inner td {
		font-size: 16px;
		border: 1px solid #ccc;
	}

	/*- 事業内容 -*/
	.work-inner {
		max-width: 750px;
		margin: 5rem auto;
	}
	.work-inner .txt,
	.work-inner .img {
		width: 50%;
	}
	.work-inner .txt {
		margin-right: -30px;
		margin-top: 100px;
		background: rgba(196,229,254,0.5);
		padding: 50px 0;
		z-index: 2;
	}
	.work-inner .txt p {
		width: 80%;
		margin: auto;
		font-size: 16px;
		line-height: 1.5;
	}
	.work-inner .img {
		z-index: 1;
	}


	/*- 施工事例 -*/
	.case-container {
		width: 750px;
		margin: auto;
		justify-content: space-between;
		align-items: flex-start;
		gap: 5rem;
	}
	.case-container .item {
		width: 47%;
		padding: 30px 0;
		box-shadow: 3px 3px 6px #ccc;
	}
	.s-case-txt {
		width: 90%;
		margin: 2rem auto 0 auto;
	}
	.s-case-txt p {
		font-size: 16px;
		line-height: 1.5;
	}
	.s-case-txt .ttl {
		border-bottom: 1px solid #ccc;
		margin-bottom: 16px;
	}
	.case-container .item .link-btn {
		width: 90%;
		margin-top: 3rem;
	}
	.case-container .item .link-btn a {
		font-style: italic;
	}

	/*- 採用情報 -*/
	.recruit-top {
		width: 90%;
		margin: 5rem auto;
	}
	.recruit-top p {
		text-align: center;
	}
	.recruit-top .message-b {
		font-size: 20px;
		margin-bottom: 3rem;
	}
	.recruit-top .message-s {
		font-size: 16px;
		line-height: 2;
	}
	.rec-point {
		margin: 5rem auto;
		justify-content: space-between;
	}
	.rec-point .point-item {
		width: 30%;
	}
	.rec-detail .wait {
		width: 80%;
		margin: 5rem auto;
		border: 1px solid #333;
		padding: 5rem 0;
	}
	.rec-detail .wait p {
		font-size: 20px;
		text-align: center;
	}


	/*フォーム*/
	.contact-form {
		width: 90%;
		margin-left:auto;
		margin-right: auto;
		margin-top: 10rem;
		font-size: 16px;
		background: #EEFDFE;
		padding: 5rem 0;
	}
	.contact-form form {
		width: 90%;
		margin: auto;
	}

}









@media screen and (max-width:420px){
	html {
		font-size: 6px;
	}
	body {
		max-width: 420px;
	}
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
	.sec-ttl h4 {
		font-size: 80px;
	}
	.sec-ttl span {
		font-size: 30px;
	}
	
	#header h1 a {
		font-size: 50px;
	}
	
	/*メインビジュアル*/
	.mainvisual {
		width:100%;
		height: 80vh;
		background: url("../img/mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.catch-copy {
		width: 80%;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
	}
	.catch-copy h2 {
		font-size: 40px;
		text-align: center;
		text-shadow: 2px 2px 5px #ccc;
		line-height: 1.2;
	}
	.catch-copy h3 {
		color: blue;
		font-size: 20px;
		text-align: center;
		margin-top: 3rem;
	}

	/*- お知らせ -*/
	#news {
		margin: 5rem auto;
	}
	.sec-ttl2 {
		margin: 3rem auto;
	}
	.sec-ttl2 p {
		text-align: center;
		font-size: 4rem;
		font-style: italic;
		color: #70C1F6;
	}
	.news-inner {
		width: 90%;
		margin: auto;
	}
	.news-inner dl {
		font-size: 18px;
		flex-direction: column;
		gap:10px;
	}
	.news-inner dl dt {
		width: 20%;
		border-bottom: none;
		text-align: center;
		color: #202656;
	}
	.news-inner dl dd {
		width: 100%;
		border-bottom: 1px solid #ccc;
	}


	/*- 事業内容 -*/
	.work-wrapper {
		width: 90%;
		margin: auto;
		flex-direction: column;
		gap:15rem;
		padding-bottom: 100px;
	}
	.work-wrapper .item {
		width: 100%;
		background: #D3EEF9;
		padding-top: 2rem;
	}
	.work-ttl {
		text-align: center;
		font-size: 24px;
		line-height: 1.5;
		margin-bottom: 2rem;
	}
	.work-ttl span {
		font-weight: normal;
		font-size: 18px;
	}
	.work-img {
		width: 90%;
		margin-bottom: -20px;
		margin-left: auto;
		margin-right: auto;
	}


	/*- 施工実績 -*/
	#case {
		background: #EBFAFB;
	}
	.case-wrapper {
		width: 90%;
		margin: auto;
		flex-direction: column;
		gap:5rem;
		padding-bottom: 50px;
	}
	.case-wrapper .item {
		width: 100%;
		background: #fff;
		padding: 2rem 0;
	}
	.thumbnail {
		width: 90%;
		margin: auto;
	}
	.case-ttl {
		width: 90%;
		margin: 1rem auto 0 auto;
		font-size: 18px;
	}

	/*- 採用情報 -*/
	#recruit {
		background: url("../img/rec-bg.png");
		background-size: cover;
		background-position: center;
	}
	.rec-message .message-b {
		font-size: 24px;
		text-align: center;
	}
	.rec-message .message-s {
		font-size: 18px;
		text-align: center;
		margin-top: 3rem;
		margin-bottom: 5rem;
		line-height: 2;
	}

	/*- お問合せ -*/
	.contact-link {
		width: 380px;
		margin: auto;
		flex-direction: column;
		gap:3rem;
	}
	.c-link-btn {
		width: 100%;
		height: 100px;
		background: #3260C9;
	}
	.c-link-btn :hover {
		background: rgba(55,150,196,1.00);
	}
	.c-link-btn a {
		display: block;
		text-align: center;
		letter-spacing: 3px;
		line-height: 100px;
	}
	.c-link-btn a i {
		margin-right: 10px;
	}
	.tel-link a {
		font-size: 36px;
		font-style: italic; 
	}
	.web-link a {
		font-size: 28px;
	}


	/*- フッター -*/
	#footer h1 {
		margin-bottom: 2rem;
	}
	#footer h1 a {
		display: block;
		font-size: 70px;
		text-align: center;
		color: #707070;
	}
	#footer h1 a span {
		color: #57A5E9;
	}
	#footer .adoress {
		text-align: center;
		font-size: 18px;
		margin-top: 2rem;
	}

	.foot-bottom {
		background: #70C1F6;
		padding-top: 2rem;
		margin-top: 3rem;
	}
	.foot-nav {
		width: 90%;
		margin: auto;
		flex-wrap: wrap;
		justify-content: space-between;
		gap:2rem;
	}
	.foot-nav li {
		width: 30%;
	}
	.foot-nav li a {
		display: block;
		font-size: 16px;
		text-align: center;
	}
	.copy {
		margin-top: 3rem;
		font-size: 14px;
		text-align: center;
		margin-bottom: 5px;
	}
	
	/*--- 下層 ---*/
	/*メインビジュアル*/
	.s-mainvisual {
		width:100%;
		height: 30vh;
		background: url("../img/s-mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.page-ttl {
		width: 100%;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%);
	}
	.page-ttl h2 {
		font-size: 60px;
		text-align: center;
		text-shadow: 2px 2px 5px #333;
		letter-spacing: 5px;
	}
	.s-secttl {
		width: 380px;
		margin: auto;
		border-bottom: 5px solid;
		padding-bottom: 10px;
		border-image: linear-gradient(to right, #2DBBE8, #9EE8EE)1;
	}
	.s-secttl h3 {
		font-size: 30px;
		text-align: center;
		letter-spacing: 3px;
	}

	
	/*----- 会社概要 -----*/
	.c-info {
		width: 100%;
		margin: 5rem auto;
	}
	.c-info table {
		width: 100%;
	}
	.c-info table th {
		background: rgba(196,229,254,0.5);
		text-align: center;
		padding: 2rem 0;
		width: 20%;
		font-size: 2rem;
		font-weight: normal;
	}
	.c-info table td {
		padding: 2rem 0 2rem 1rem;
		width: 80%;
		border: 1px solid #D1EAF5;
		font-size: 2rem;
	}
	
	
	/*- 事業内容 -*/
	.work-inner {
		width: 90%;
		margin: 5rem auto;
		flex-direction: column;
		gap:3rem;
	}
	.work-inner .txt,
	.work-inner .img {
		width: 100%;
	}
	.work-inner .txt {
		margin-right: 0;
		margin-top: 0;
		background: rgba(196,229,254,0.5);
		padding: 20px 0;
		z-index: 2;
	}
	.work-inner .txt p {
		width: 80%;
		margin: auto;
		font-size: 16px;
		line-height: 1.5;
	}
	.work-inner .img {
		z-index: 1;
	}


	/*- 施工事例 -*/
	.case-container {
		width: 90%;
		margin: auto;
		justify-content: space-between;
		align-items: flex-start;
		gap: 5rem;
	}
	.case-container .item {
		width: 100%;
		padding: 30px 0;
		box-shadow: 3px 3px 6px #ccc;
	}
	.s-case-txt {
		width: 90%;
		margin: 2rem auto 0 auto;
	}
	.s-case-txt p {
		font-size: 16px;
		line-height: 1.5;
	}
	.s-case-txt .ttl {
		border-bottom: 1px solid #ccc;
		margin-bottom: 16px;
	}
	.case-container .item .link-btn {
		width: 90%;
		margin-top: 3rem;
	}
	.case-container .item .link-btn a {
		font-style: italic;
	}

	/*- 採用情報 -*/
	.recruit-top {
		width: 90%;
		margin: 5rem auto;
	}
	.recruit-top p {
		text-align: center;
	}
	.recruit-top .message-b {
		font-size: 20px;
		margin-bottom: 3rem;
	}
	.recruit-top .message-s {
		font-size: 16px;
		line-height: 2;
	}
	.rec-point {
		margin: 5rem auto;
		justify-content: center;
		gap:3rem;
	}
	.rec-point .point-item {
		width: 46%;
	}
	.rec-detail .wait {
		width: 80%;
		margin: 5rem auto;
		border: 1px solid #333;
		padding: 5rem 0;
	}
	.rec-detail .wait p {
		font-size: 20px;
		text-align: center;
	}


	/*フォーム*/
	.contact-form {
		width: 100%;
		margin-left:auto;
		margin-right: auto;
		margin-top: 10rem;
		font-size: 16px;
		background: #EEFDFE;
		padding: 5rem 0;
	}
	.contact-form form {
		width: 90%;
		margin: auto;
	}
	

	.input_box {
		border: 1px solid #ccc;
		padding: 1rem 0;
		width: 95%;
	}
	.input_txtarea {
		border: 1px solid #ccc;
		padding: 1rem 0;
		width: 95%;
		height: 10em;
	}

	
	
}