@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
	.logo-area {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url(../image/main-image.jpg);
		background-size: cover;
		position: sticky;
		top:0;
		z-index:-100;
	}
	.logo-area::after {
		content:'';
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.3);
		position: absolute;
		z-index: -10;
	}
		.logo-image {
			width: 385px;
			height: 385px;
			position: relative;
			z-index: -1;
		}

	.container-inner {
		max-width: 1000px;
		width: 80%;
		padding-top: 80px;
		margin: 0 auto;
	}

	.about-ttl-area {
		margin: 102px auto 50px;
		text-align: center;
	}
		.about-ttl-area p {
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 28px;
		}
		.about-txt {
			width: 600px;
			margin: 0 auto;
			font-size: 16px;
			line-height: 1.8;
			letter-spacing: 0.06em;
		}
		.fix-info {
			width: 80%;
			margin: 120px auto 0;
			text-align: center;
			font-size: 16px;
			font-weight: 600;
		}
		.fix-info .sns {
			width: 100%;
			margin-top: 30px;
		}
		.fix-info .sns a {
			display: block;
			width: 100%;
			height: 100%;
			margin-bottom: 20px;
			transition: all 0.3s;
			overflow: hidden;
		}
		.fix-info .sns a:hover{
			opacity: 0.8;
			transition: all 0.3s;
		}
		.fix-info .sns img {
			width: 100%;
			transition: all 0.3s;
		}
		.hole {
			width: 100%;
			height: 100px;
			margin: 70px 0 0;
			background-image: url(../image/main-image.jpg);
			background-size: cover;
			background-position: 0 0;
			background-attachment: fixed;
		}
	.trouble {
		width: 80%;
		height: 470px;
		padding: 30px;
		margin: 40px auto 0;
		border: 4px solid #C68030;
		border-radius: 12px;

	}
	.trouble-inner {
		width: 70%;
		margin: 0 auto;
	}
	.trouble-ttl-area {
		text-align: center;
	}
		.trouble-ttl {
			display: inline-block;
			font-size: 34px;
			margin:0 auto;
			line-height: 1.2;
			color:#6F481B;
			position: relative;
		}
		.trouble-ttl::before {
			content:'';
			width: 55px;
			height: 57px;
			background-image: url(../image/trouble-image@2x.png);
			background-size: cover;
			position: absolute;
			top: 0;
			left:-75px;
		}
		.trouble-txt {
			margin: 40px auto 20px;
		}
		.trouble-txt li {
			font-size: 24px;
			padding-bottom: 4px;
			margin-bottom: 20px;
			border-bottom: 1px solid #707070;
		}
		.fix-area {
			width: 100%;
			margin: 50px auto;
		}
		.menu-box {
			width: 100%;
			padding: 20px;
			margin: 70px 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.menu-box:nth-of-type(even) {
			flex-direction: row-reverse;
		}
		.menu-txt-area {
			width: 400px;
		}
		.menu-image {
			width: 490px;
		}
		.menu-box:nth-of-type(even) .menu-image {
			margin-right: 40px;
		}
		.menu-txt {
			font-size: 14px;
			margin: 25px 0 0;
		}
		.fix-contents {
			
		}
		.fix-content {
			margin: 10px 0 20px;
		}
		.fix-content-ttl {
			font-weight: 600;
			font-size: 14px;
			margin-bottom: 5px;
		}
		.fix-content-txt {
			font-size: 14px;
		}
		.bold {
			font-weight: 600;
		}
		.btn {
			width: 80%;
			height: 66px;
			margin: 80px auto;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		.btn a {
			display: inline-block;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all .3s;
		}
		.btn p {
			color: #000;
			font-weight: 600;
		}

	.price-box {
		margin: 50px 0;
	}

	table {
		width: 100%;
	}
		tr:nth-child(odd) {
			background-color: #FFE3C3;
		}
		th,td{
			width: calc(100% / 6);
			color: #000;
			border: solid 1px #707070;
		}
		th {
			color: #fff;
			background-color: #C68030;
		}
		td {
			text-align: center;
		}
		td a {
			color: #000;
			text-decoration: underline;
		}
			td a:hover {
				opacity: .8;
			}
	.inner-box {
		padding: 80px 0 0;
		/* margin: 80px 0; */
	}

	#company dl {
		width: 90%;
		margin: 0 auto;
		
	}
	.company-list {
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		border-top: 1px solid #707070;
	}
	.company-list:last-of-type {
		border-bottom: 1px solid #707070;
	}
	#company dt {
		width: 150px;
		padding-left: 20px;
		font-weight: 600;
	}
	#company dd {

	}

	.contact-form {
		width: 100%;
	}
	#contact dl {
		width: 100%;
	}
	.contact-list {
		width: 80%;
		margin-bottom: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	#contact dt {
		width: 180px;
		font-weight: 600;
	}
	#contact dd {	
		width: calc(100% - 180px);
	}
	#contact input {
		width: 100%;
		height: 44px;
		background-color: #F7F7F7;
		border: 1px solid #707070;
		border-radius: 10px;
	}
	#contact textarea {
		width: 100%;
		height: 200px;
		background-color: #F7F7F7;
		border: 1px solid #707070;
		border-radius: 10px;
	}
	.submit-btn-area {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		border-radius: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.thanks-txt {
		margin: 50px 0;
	}
	.contact-btn {
		width: 100%!important;
		max-width: 200px;
		height: 70px!important;
		margin: 0 auto;
		border-radius: 20px!important;
		border:none!important;
		background-color: #C68030!important;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor:pointer;
		color:#fff;
	}
	.prev-btn {
		background-color: #000!important;
		margin-right: 20px!important;
	}
		
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	#about {
		padding-top: 30px;
		margin-top: -30px;
	}
	#menu,
	#price,
	#franchise,
	#company,
	#contact {
		padding-top: 80px;
		margin-top: -80px;
	}
	#wrap {

	}
	header {
		width: 100%;
		height: auto;
		position: relative;
		transition: all 0.3s;
	}
	.logo-area {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url(../image/main-image.jpg);
		background-size: cover;
		position: sticky;
		top:0;
		z-index:-100;
	}
	.logo-image {
		width: 350px;
	}

		.sp-sns-area {
			position: absolute;
			bottom: -50px;
			left: 50%;
			transform: translateX(-50%);
		}
		.sp-sns-area ul{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.sp-sns-area li{
			padding: 0 15px;
		}
		.sp-sns-area a{
			width: 20px;
			height: 20px;
		}
		.sp-sns-area img {
			width: 100%;
			height: 100%;
		}

			

	.container-inner {
		width: 100%;
		max-width: 700px;
		margin: 0px auto;
	}

	.about-ttl-area {
		padding-top: 60px;
		margin: 0 auto 60px;
		text-align: center;
	}
		.about-ttl-area p {
			font-size: 20px;
			font-weight: 600;
			margin: 0 auto 28px;
		}
		.about-txt {
			width: 80%;
			margin: 0 auto;
			font-size: 14px;
			line-height: 1.8;
			letter-spacing: 0.06em;
		}
		.fix-info {
			width: 100%;
			margin: 80px auto 100px;
			text-align: center;
			font-size: 22px;
			font-weight: 600;
		}
		.fix-info .sns {
			margin-top: 30px;
		}
		.fix-info .sns a {
			display: block;
			margin-bottom: 15px;
		}
		.fix-info .sns img {
			/* width: 40px; */
		}
	.trouble {
		width: 500px;
		padding: 30px 15px;
		margin: 0 auto 50px;
		border: 4px solid #C68030;
		border-radius: 12px;

	}
	.trouble-inner {
		width: 100%;
		margin: 0 auto;
	}
	.trouble-ttl-area {
		text-align: center;
	}
		.trouble-ttl {
			display: inline-block;
			font-size: 20px;
			margin:0 auto;
			line-height: 1.2;
			color:#6F481B;
			position: relative;
		}
		.trouble-ttl::before {
			content:'';
			width: 35px;
			height: 36px;
			background-image: url(../image/trouble-image@2x.png);
			background-size: cover;
			position: absolute;
			top: 0;
			left:-44px;
		}
		.trouble-txt {
			margin: 40px auto 20px;
		}
		.trouble-txt li {
			font-size: 14px;
			padding-bottom: 4px;
			margin-bottom: 20px;
			border-bottom: 1px solid #707070;
		}
		.slick-area {
			width: 80%;
			max-width: 1200px;
			margin: 0 auto 200px;
		}
		.slick li img{
			width: 300px;
		}
		.fix-area {
			width: 100%;
			margin: 70px auto;
		}
		.menu-box {
			width: 90%;
			margin: 70px auto;
		}
		.menu-txt {
			font-size: 16px;
			margin: 30px 0;
		}
		.fix-contents {

		}
		.fix-content {
			width: 100%;
			border-radius: 20px;
			text-align: left;
			margin: 20px 0;
		}
		.fix-content-ttl {
			font-weight: 600;
			font-size: 18px;
			margin-bottom: 10px;
		}
		.fix-content-txt {
			font-size: 14px;
		}
		.bold {
			font-weight: 600;
		}
		.sell-area {
			width: 90%;
			margin: 0 auto;
		}
		.btn {
			width: 100%;
			margin: 80px auto;
		}

		.btn a {
			display: inline-block;
			width: 100%;
			height: 100%;
			transition: all .3s;
		}
		.btn p {
			color: #000;
			font-weight: 600;
		}
	.price-box {
		width: 90%;
		margin: 50px auto;
	}

	.table-area {
		overflow: scroll;
	}
	table {
		width: 100%;
	}
		tr:nth-child(odd) {
			background-color: #FFE3C3;
		}
		th,td{
			width: calc(100% / 6);
			color: #000;
			border: solid 1px #707070;
		}
		th {
			font-size: 11px;
			color: #fff;
			background-color: #C68030;
		}
		td {
			font-size: 11px;
			text-align: center;
		}
		td a {
			color: #000;
			text-decoration: underline;
		}
			td a:hover {
				opacity: .8;
			}
	.inner-box {
		width: 90%;
		margin: 80px auto;
	}
	.last-inner-box {
		width: 90%;
		padding: 0 0 50px;
		margin: 80px auto 0;
	}

	#company dl {
		width: 90%;
		margin: 0 auto;
		
	}
	.company-list {
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		border-top: 1px solid #707070;
	}
	.company-list:last-of-type {
		border-bottom: 1px solid #707070;
	}
	#company dt {
		width: 90px;
		padding-left: 10px;
		font-weight: 600;
	}
	#company dd {
		width: calc(100% - 100px);
		font-size: 12px;
	}

	.contact-form {
		width: 100%;
	}
	#contact dl {
		width: 100%;
	}
	.contact-list {
		width: 90%;
		margin: 0 auto 30px;
	}
	#contact dt {
		width: 100%;
		font-weight: 600;
	}
	#contact dd {	
		width: 100%;
	}
	#contact input {
		width: 100%;
		height: 44px;
		border: 1px solid #707070;
		background-color: #fff;
		border-radius: 10px;
	}
	#contact textarea {
		width: 100%;
		height: 200px;
		border: 1px solid #707070;
		background-color: #fff;
		border-radius: 10px;
	}
	.submit-btn-area {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.submit-btn-area button {
		width: 100%;
		height: 100%;
		color:#fff;
		cursor:pointer;
	}
	.thanks-txt {
		margin: 50px 0;
	}
	.home-btn {
		width: 500px;
		height: 70px;
		margin: 0 auto;
		border-radius: 20px;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.thanks-txt {
		margin: 50px 0;
	}
	.contact-btn {
		width: 100%!important;
		height: 40px!important;
		margin: 0 auto;
		border-radius: 20px!important;
		border:none!important;
		background-color: #C68030!important;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor:pointer;
		color:#fff;
	}
	.prev-btn {
		background-color: #000!important;
		margin-right: 20px!important;
	}
}

/* SP ================================================== */
@media all and (max-width:559px){
	#about {
		padding-top: 30px;
		margin-top: -30px;
	}
	#menu,
	#price,
	#franchise,
	#company,
	#contact {
		padding-top: 80px;
		margin-top: -80px;
	}
	#wrap {

	}
	header {
		width: 100%;
		height: auto;
		position: relative;
		transition: all 0.3s;
	}
	.logo-area {
		width: 100%;
		height: calc(var(--vh,1vh) * 100);
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url(../image/main-image.jpg);
		background-size: cover;
		position: sticky;
		top:0;
		z-index:-100;
	}
	.logo-image {
		width: 250px;
	}

		.sp-sns-area {
			position: absolute;
			bottom: -50px;
			left: 50%;
			transform: translateX(-50%);
		}
		.sp-sns-area ul{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.sp-sns-area li{
			padding: 0 15px;
		}
		.sp-sns-area a{
			width: 20px;
			height: 20px;
		}
		.sp-sns-area img {
			width: 100%;
			height: 100%;
		}

			

	.container-inner {
		width: 100%;
		margin: 0px auto;
	}

	.about-ttl-area {
		padding-top: 60px;
		margin: 0 auto 60px;
		text-align: center;
	}
		.about-ttl-area p {
			font-size: 20px;
			font-weight: 600;
			margin: 0 auto 28px;
		}
		.about-txt {
			width: 80%;
			margin: 0 auto;
			font-size: 14px;
			line-height: 1.8;
			letter-spacing: 0.06em;
		}
		.fix-info {
			width: 100%;
			margin: 80px auto 100px;
			text-align: center;
			font-size: 22px;
			font-weight: 600;
		}
		.fix-info .sns {
			margin-top: 30px;
		}
		.fix-info .sns a {
			display: block;
			margin-bottom: 15px;
		}
		.fix-info .sns img {
			/* width: 40px; */
		}
	.trouble {
		width: 100%;
		padding: 30px 15px;
		margin: 0 0 50px;
		border: 4px solid #C68030;
		border-radius: 12px;

	}
	.trouble-inner {
		width: 100%;
		margin: 0 auto;
	}
	.trouble-ttl-area {
		text-align: center;
	}
		.trouble-ttl {
			display: inline-block;
			font-size: 20px;
			margin:0 auto;
			line-height: 1.2;
			color:#6F481B;
			position: relative;
		}
		.trouble-ttl::before {
			content:'';
			width: 35px;
			height: 36px;
			background-image: url(../image/trouble-image@2x.png);
			background-size: cover;
			position: absolute;
			top: 0;
			left:-44px;
		}
		.trouble-txt {
			margin: 40px auto 20px;
		}
		.trouble-txt li {
			font-size: 14px;
			padding-bottom: 4px;
			margin-bottom: 20px;
			border-bottom: 1px solid #707070;
		}
		.slick-area {
			width: 80%;
			max-width: 1200px;
			margin: 0 auto 200px;
		}
		.slick li img{
			width: 300px;
		}
		.fix-area {
			width: 100%;
			margin: 70px auto;
		}
		.menu-box {
			width: 90%;
			margin: 70px auto;
		}
		.menu-txt {
			font-size: 16px;
			margin: 30px 0;
		}
		.fix-contents {

		}
		.fix-content {
			width: 100%;
			border-radius: 20px;
			text-align: left;
			margin: 20px 0;
		}
		.fix-content-ttl {
			font-weight: 600;
			font-size: 18px;
			margin-bottom: 10px;
		}
		.fix-content-txt {
			font-size: 14px;
		}
		.bold {
			font-weight: 600;
		}
		.sell-area {
			width: 90%;
			margin: 0 auto;
		}
		.btn {
			width: 100%;
			margin: 80px auto;
		}

		.btn a {
			display: inline-block;
			width: 100%;
			height: 100%;
			transition: all .3s;
		}
		.btn p {
			color: #000;
			font-weight: 600;
		}
	.price-box {
		width: 90%;
		margin: 50px auto;
	}

	.table-area {
		overflow: scroll;
	}
	table {
		width: 100%;
	}
		tr:nth-child(odd) {
			background-color: #FFE3C3;
		}
		th,td{
			width: calc(100% / 6);
			color: #000;
			border: solid 1px #707070;
		}
		th {
			font-size: 11px;
			color: #fff;
			background-color: #C68030;
		}
		td {
			font-size: 11px;
			text-align: center;
		}
		td a {
			color: #000;
			text-decoration: underline;
		}
			td a:hover {
				opacity: .8;
			}
	.inner-box {
		width: 90%;
		margin: 80px auto;
	}
	.last-inner-box {
		width: 90%;
		padding: 0 0 50px;
		margin: 80px auto 0;
	}

	#company dl {
		width: 90%;
		margin: 0 auto;
		
	}
	.company-list {
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		border-top: 1px solid #707070;
	}
	.company-list:last-of-type {
		border-bottom: 1px solid #707070;
	}
	#company dt {
		width: 90px;
		padding-left: 10px;
		font-weight: 600;
	}
	#company dd {
		width: calc(100% - 100px);
		font-size: 12px;
	}

	.contact-form {
		width: 100%;
	}
	#contact dl {
		width: 100%;
	}
	.contact-list {
		width: 90%;
		margin: 0 auto 30px;
	}
	#contact dt {
		width: 100%;
		font-weight: 600;
	}
	#contact dd {	
		width: 100%;
	}
	#contact input {
		width: 100%;
		height: 44px;
		border: 1px solid #707070;
		background-color: #fff;
		border-radius: 10px;
	}
	#contact textarea {
		width: 100%;
		height: 200px;
		border: 1px solid #707070;
		background-color: #fff;
		border-radius: 10px;
	}
	.submit-btn-area {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.submit-btn-area button {
		width: 100%;
		height: 100%;
		color:#fff;
		cursor:pointer;
	}
	.thanks-txt {
		margin: 50px 0;
	}
	.home-btn {
		width: 500px;
		height: 70px;
		margin: 0 auto;
		border-radius: 20px;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.thanks-txt {
		margin: 50px 0;
	}
	.contact-btn {
		width: 100%!important;
		height: 40px!important;
		margin: 0 auto;
		border-radius: 20px!important;
		border:none!important;
		background-color: #C68030!important;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor:pointer;
		color:#fff;
	}
	.prev-btn {
		background-color: #000!important;
		margin-right: 20px!important;
	}
}