﻿@media screen and (min-width: 0px) and (max-width: 989px) {

	#logo,
	nav,
	#fixbtn {
		display: none;
	}

	/****************初期設定*********************/
	header.openmenu {
		overflow: auto;
		height: 100% !important;
	}

	header div#header-area #telnumber {
		display: none;
	}

	#accordion {
		width: 100%;
		height: 100%;
		display: block;
	}

	header #accordion p.logo {
		width: 36vw;
		height: 10vw;
		left: 2vw;
		top: 1vw;
		text-align: left;
		position: absolute;
		z-index: 9999;
		display: block;
	}

	header #accordion p.logo a {
		display: block;
		width: 100%;
		height: 100%;
	}

	header #accordion p.logo img {
		width: 100%;
		margin-top: 0px;
	}

	header #accordion p.btn {
		position: relative;
		cursor: pointer;
		background-image: url(images/sp/sp_menu_btn.png);
		background-repeat: no-repeat;
		background-position: right top;
		background-size: auto 100%;
		width: 12vw;
		height: 12vw;
		right: 4vw;
		top: 0.6vw;
		z-index: 9994;
		display: block;
		float: right;
	}

	#accordion ul.navsp {
		display: none;
		z-index: 9994;
		position: relative;
		width: 100%;
		height: 100%;
		text-align: left;
		background: #5b2300;
		margin-top: 13vw;
		border-top: 0.3vw solid #fff;
		line-height: 0;
		font-size: 0;
	}

	.navsp li {
		background: #5b2300;
		margin-bottom: 0px;
		border-bottom: 0.3vw solid #fff;
		box-sizing: border-box;
		text-align: left;
		font-size: 4vw;
		color: #fff;
		height: 14vw;
		width: 100%;
	}

	.navsp li a {
		width: 100%;
		height: 100%;
		display: block;
		color: #fff;
		text-decoration: none;
		box-sizing: border-box;
		padding-left: 10vw;
		line-height: 14vw;
	}


	header #accordion p.btn.active {
		background-image: url(images/sp/sp_menu_close.png);
	}


	/****************共通設定*********************/
	header {
		position: fixed;
		height: 13vw;
		width: 100%;
		overflow: hidden;
		vertical-align: top;
		top: 0;
		left: 0;
		z-index: 1001;
		text-align: center;
		-moz-transition: height 0.3s;
		-o-transition: height 0.3s;
		-webkit-transition: height 0.3s;
		transition: height 0.3s;
		background: url(images/sp/header_bg.png) repeat-x top left;
	}

	#title-area {
		width: 100%;
		margin-top: 13vw;
		height: 300px;
		margin-bottom: 100px;
	}

	#main-image {
		width: 100%;
		height: 60vw;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		-webkit-animation: fadeIn 2.0s ease 0.3s 1 normal;
		animation: fadeIn 2.0s ease 0.3s 1 normal;
		position: relative;
		top: 13vw;
	}
}


@media screen and (min-width: 0px) and (max-width: 768px) {

	/****************body設定*********************/
	html,
	body {
		font-size: 62.5%;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-o-text-size-adjust: 100%;
		text-size-adjust: 100%;
		height: 100%;
	}

	body {
		background: #fff;
		font-size: 1.6rem;
		letter-spacing: 1.0px;
		font-family: fot-tsukuardgothic-std, sans-serif;
		line-height: 1;
		font-feature-settings: 'palt' 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-weight: 550;
	}

	.pc,
	.pc-inline {
		display: none;
	}

	.sp {
		display: block;
	}

	img {
		max-width: 100%;
	}

	a[href^="tel:"] {
		pointer-events: auto;
	}



	#main-image h1 {
		color: #fff;
		font-size: 2rem;
		text-align: left;
		line-height: 1.6em;
		font-weight: normal;
		top: 2vw;
		left: 2vw;
		position: absolute;
		display: none;
	}

	#main-image p.main {
		position: absolute;
		left: 50%;
		top: 30%;
		margin-left: -39vw;
		margin-top: 0;
		width: 78vw;
		height: 20vw;
		text-align: center;
	}

	/****************共通設定*********************/

	section {
		width: 100%;
		letter-spacing: 0.15em;
	}

	h2 {
		text-align: center;
		font-size: 1.8rem;
		line-height: 1.6em;
		margin-bottom: 5vw;
		letter-spacing: 0.2em;
	}

	h2 img {
		margin-left: auto;
		margin-right: auto;
		vertical-align: middle;
		width: 8vw;
		height: auto;
		display: block;
		margin-bottom: 1vw;
	}

	.mb_100 {
		margin-bottom: 20vw;
	}

	.top_content {
		width: 100%;
		text-align: center;
		padding-top: 30vw;
	}

	.top_content .text {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		margin-bottom: 16vw;
	}

	.top_content .text p {
		margin-bottom: 10vw;
		line-height: 1.8em;
		text-align: center;
		font-size: 1.6rem;
	}

	.top_content .image {
		width: 100%;
		height: 20vw;
	}

	.top_content .image {
		background-image: url("images/image01.png");
		background-attachment: scroll;
		background-size: 100% auto;
	}

	.top_content_info {
		width: 100%;
		height: 180vw;
		text-align: center;
		position: relative;
	}

	.top_content_info .infoarea {
		width: 90vw;
		height: 126vw;
		position: absolute;
		top: 14vw;
		left: 50%;
		margin-left: -45vw;
		padding: 4vw;
		text-align: left;
		box-sizing: border-box;
		font-size: 1.6rem;
		font-weight: 700;
		color: #3c2200;
		z-index: 10;
	}

	ul.info-area {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20vw;
		text-align: left;
	}

	ul.info-area li a {
		display: block;
		margin-left: 0px;
		color: #3c2200;
	}

	ul.info-area li {
		line-height: 1.6em;
		margin-bottom: 5vw;
		text-align: left;
		font-size: 1.6rem;
	}

	.top_content_info .infoarea ul {
		width: 100%;
		margin-bottom: 20vw;
		text-align: left;
	}

	.top_content_info .infoarea ul li {
		line-height: 1.6em;
		margin-bottom: 5vw;
	}

	.top_content_info .infoarea ul li a {
		display: block;
		margin-left: 0;
		color: #3c2200;
	}

	.top_content_info .image {
		width: 100%;
		position: absolute;
		height: 180vw;
		top: 6vw;
		background-image: url("images/image02.jpg");
		background-size: cover;
		background-attachment: scroll;
		z-index: 0;
	}

	.nextbtn {
		font-size: 4.5vw;
		border-radius: 3vw;
		width: 90%;
		height: 14vw;
		line-height: 14vw;
		box-sizing: border-box;
		background: #3c2200;
		font-weight: bold;
		margin-left: auto;
		margin-right: auto;
	}

	.nextbtn a {
		display: block;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		border-radius: 3vw;
		width: 100%;
		height: 14vw;
		line-height: 14vw;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.nextbtn a:hover {
		background: #fff;
		color: #3c2200;
		border: 0.5vw solid #3c2200;
		box-sizing: border-box;
	}


	.maparea {
		width: 100%;
		height: 100vw;
		margin-left: auto;
		margin-right: auto;
	}

	.maparea iframe {
		height: 100vw !important;
	}

	.maparea.mb_90 {
		margin-bottom: 20vw;
	}



	footer {
		width: 100%;
		height: auto;
		padding: 4vw;
		box-sizing: border-box;
		background: #3c2200;
		text-align: center;
		position: static;
	}

	footer h4 {
		position: static;
		text-align: center;
		margin-bottom: 4vw;
	}

	footer h4 img {
		width: 250px;
	}

	footer h5 {
		position: static;
		text-align: left;
		font-size: 1.4rem;
		margin-bottom: 4vw;
	}

	footer #rightnavi {
		display: none;
	}

	footer small {
		font-size: 1.2rem;
		position: static;
	}


	/****************************/
	/*secondcontent*/
	/****************************/
	.content-area {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-bottom: 4em;
		line-height: 1.8em;
	}


	.content-area.spfull {
		width: 100% !important;
	}

	.text-left {
		line-height: 1.8em;
		font-size: 1.6rem;
		color: #3c2200;
		margin-bottom: 16vw;
		text-align: left;
	}

	.text-center {
		line-height: 1.8em;
		font-size: 1.6rem;
		color: #3c2200;
		margin-bottom: 16vw;
		text-align: center;
	}

	.text-center.work {
		font-size: 1.6rem;
		line-height: 1.4em;
		color: #3c2200;
		margin-bottom: 10vw;
		text-align: center;
		width: 90% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.text-center_top {
		line-height: 1.6em;
		font-size: 1.6rem;
		color: #3c2200;
		margin-bottom: 8vw;
		text-align: center;
	}

	.text-list {
		width: 100%;
		text-align: left;
		padding-left: 3vw;
		box-sizing: border-box;
		margin-top: 5vw;
	}

	.text-list li {
		margin-bottom: 5vw;
		text-indent: -1em;
		padding-left: 1em;
	}


	#title-area {
		width: 100%;
		margin-top: 13vw;
		height: 30vw;
		margin-bottom: 10vw;
	}

	#title-area h1 {
		text-align: center !important;
		font-size: 2rem !important;
		line-height: 30vw !important;
		color: #3c2200;
		text-shadow: 0 0 7px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	}

	#title-area.company {
		background-image: url("images/company/title_bg.jpg");
		background-size: cover;
	}

	#title-area.work {
		background-image: url("images/company/title_bg.jpg");
		background-size: cover;
	}

	#title-area.policy {
		background-image: url("images/company/title_bg.jpg");
		background-size: cover;
	}

	.table-list {
		width: 100%;
		margin-bottom: 20vw;
		box-sizing: border-box;
		border-right: 0.4vw solid #ccc;
		border-top: 0.4vw solid #ccc;
	}

	.table-list.form {
		margin-bottom: 8vw !important;
	}

	.table-list td,
	.table-list th {
		padding: 3vw 3vw;
		box-sizing: border-box;
		border-left: 0.4vw solid #ccc;
		text-align: left;
		font-size: 1.6rem;
		color: #3c2200;
		line-height: 1.5em;
		width: 100%;
		display: block;
	}

	.table-list td a {
		color: #40a001;
	}

	.table-list th {
		width: 100%;
		background: #ccc;
		border-bottom: 0.4vw solid #fff;
		color: #3c2200;
	}

	.table-list td {
		background: #fff;
		color: #3c2200;
		border-bottom: 0.4vw solid #ccc;
	}

	.table-list tr:last-child th {
		border-bottom: 0.4vw solid #ccc !important;
	}

	.table-list.half td {
		width: 30% !important;
		display: table-cell !important;
	}

	.flow-area {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.flow-area p.mainimage {
		width: 100%;
		height: auto;
		margin-bottom: 10vw;
	}

	.flow-area .flow-box {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background: #fff;
		display: block;
		margin-bottom: 4vw;
	}

	.flow-box {
		margin-bottom: 4em;
	}

	.flow-area .flow-box .flow-image {
		width: 100%;
		display: block;
		padding: 0vw 0vw 2vw 0vw;
		box-sizing: border-box;
	}

	.flow-area .flow-box .flow-image img,
	.flow-area .flow-box .flow-image video {
		width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.flow-area .flow-box .flow-text {
		width: auto;
		display: block;
		vertical-align: middle;
		text-align: center;
		padding: 4vw;
		box-sizing: border-box;
		font-size: 1.6rem;
	}

	.flow-area .flow-box .flow-text p.title {
		font-weight: 700;
		margin-bottom: 2vw;
		padding-bottom: 2vw;
		text-align: center;
		font-size: 1.8rem;
	}

	.flow-area .flow-box .flow-text p.title span {
		width: 50px;
		height: 0.4vw;
		display: block;
		background: #000;
		margin-left: auto;
		margin-right: auto;
		margin-top: 4vw;
	}

	.break {
		width: 100%;
		text-align: center;
		margin-bottom: 8vw;
	}

	.break ul {
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: space-between;
	}

	.break ul li {
		display: block;
		width: 48%;
		font-size: 1.6rem;
		line-height: 1.4em;
		font-weight: 700;
		text-align: center;
		margin-right: 0;
		vertical-align: top;
	}

	.break ul li:last-child {
		margin-right: 0;
	}

	.break ul li img {
		margin-bottom: 4vw;
	}

	table.hanbailist {
		width: 40vw;
		box-sizing: border-box;
		border-top: 0.4vw solid #ccc;
		border-right: 0.4vw solid #ccc;
		margin-top: 2em;
	}

	table.hanbailist td {
		background: #fff;
		color: #333;
		text-align: left;
		font-size: 1.6rem;
		padding: 2em 1.5em;
		box-sizing: border-box;
		width: 100%;
		line-height: 1.6em;
		border-bottom: 0.4vw solid #ccc;
		border-left: 0.4vw solid #ccc;
		font-weight: 500;
	}

	.work-list-area {
		margin-bottom: 10rem;
		width: 100%;
	}

	.work-list {
		width: 100%;
		text-align: left;
		font-size: 0;
		letter-spacing: -.40em;
		margin-bottom: 3em;
	}

	.work-list li {
		display: inline-block;
		width: calc(100% / 3);
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.05em;
		vertical-align: top;
	}

	.work-list li p {
		padding-left: 10px;
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		font-size: 1.6rem;
		line-height: 1.8em;
	}

	.work-list li p:before {
		content: "→";
	}

	.work-list li div.image {
		width: 100%;
		height: 18vw;
		position: relative;
		overflow: hidden;
		vertical-align: middle;
		top: 0;
		margin-bottom: 2em;
	}

	.work-list li div.image img {
		width: 80vw;
		overflow: hidden;
		position: absolute;
		vertical-align: auto;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		height: auto;
		z-index: 0;
	}

	.president {
		width: 100%;
		margin-bottom: 20vw;
	}



	input[type="text"],
	input[type="tel"],
	input[type="email"],
	textarea,
	select {
		-webkit-appearance: none;
		border-radius: 0;
		border: none;
	}

	input[type="text"],
	input[type="tel"],
	input[type="email"],
	textarea {
		background: #fff;
		padding: 2vw 2vw;
		box-sizing: border-box;
		height: 12vw;
		border: 0.4vw solid #ccc;
	}

	input[type="checkbox"] {
		border: 0.4vw solid #ccc;
	}

	select {
		background: #fff;
		padding: 2vw 2vw;
		box-sizing: border-box;
		border: 0.4vw solid #ccc;
	}

	input[type="text"],
	input[type="email"] {
		width: 90% !important;
	}

	select {
		height: 8vw;
		width: 30vw;
		background: #fff url(images/select_bg.png) right no-repeat;
	}

	select.short {
		width: 20vw !important;
	}

	textarea {
		width: 90% !important;
		height: 30vw !important;
	}

	p.check {
		text-align: center;
		margin-bottom: 8vw;
	}

	p.send {
		text-align: center;
		margin-bottom: 20vw;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	p input[type="submit"] {
		font-size: 3.5vw;
		border-radius: 3vw !important;
		width: 100%;
		height: 16vw;
		line-height: 16vw;
		box-sizing: border-box;
		background-color: #fff;
		border: 0.4vw solid #3c2200;
		font-weight: bold;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		text-align: center;
		color: #3c2200;
		cursor: pointer;
	}

	p input[type="submit"]:hover {
		background-color: #3c2200;
		color: #fff;
	}


	/****************info設定*********************/

	ul.info-area {
		width: 100%;
	}

	ul.info-area li {
		padding-bottom: 3vw;
		padding-top: 3vw;
		text-align: left;
		font-size: 1.6rem;
	}

	ul.info-area li img {
		margin-right: 2vw;
		margin-bottom: -2vw;
	}

	.blog-area {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5em;
	}

	.data {
		text-align: center;
		font-weight: bold;
		color: #7db207;
		margin-bottom: 2em;
		margin-top: 0;
	}

	.blog-title {
		text-align: center;
		font-weight: bold;
		color: #41210f;
		margin-bottom: 3em;
		line-height: 1.4em;
		font-size: 2.0rem;
	}

	.comment {
		text-align: left;
		line-height: 1.8em;
		font-size: 1.6rem;
		margin-bottom: 4em;
	}

	.comment img {
		max-width: 100%;
		height: auto;
		margin-top: 1em;
		margin-bottom: 1em;
	}

	.back a {
		display: block;
		font-size: 1.6rem;
		border-radius: 2px !important;
		width: 280px;
		height: 60px;
		line-height: 60px;
		box-sizing: border-box;
		background-color: #7db207;
		background-image: url("images/ai_yajirushi.png");
		background-size: 10px auto;
		background-position: 90% center;
		background-repeat: no-repeat;
		font-weight: bold;
		padding-left: 30px;
		text-align: left;
		color: #fff;
	}

	.text-center span {
		display: block;
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: .5em;
		margin-top: 2em;
	}

}