@charset "utf-8";
/* reset.css */
* {
    box-sizing: border-box;
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, 
p, a, img, dl, dt, dd, ol, ul, li, label, table, 
tbody, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 10px;
	vertical-align: baseline;
	box-sizing: border-box;
	line-height: 0;
}

h1, h2, h3, h4, h5, h6, p, a, span, dt, dd, li, label, th, td{
	line-height: 1.6;
}

body {
	width: 100%;
	color:#002256;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
 
ol, ul {
	list-style: none;
	font-size: 0;
}

figure {
    font-size: 0;
}

table, td, th {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	outline: none;
	text-decoration: none;
	display:inline-block;
	color:#002256;
}

a:hover {
	text-decoration: none;
}

.cf {
	overflow: hidden;
	zoom:1;
}

img {
	max-width:100%;
}

img.auto {
	width:auto;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.textMincho {
	font-family: "shippori-mincho","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.textSmall {
	font-size: 12px;
}

.textBold {
	font-weight: bold;
}

.textColor {
	color:#cf0000;
}

.textBig {
	font-size: 110%;
}

@keyframes zoom {
   0% {
      transform: scale(1.5);
   }
   100% {
      transform: scale(1);
   }
}	

.mainImage p.text {
    writing-mode: vertical-rl;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 65px;
    font-size: 26px;
    color: #fff;
    width: 165px;
}

.mainImage p.name {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 600px;
}

.mainImage p.name .sizeM {
    font-size: 32px;
}

.mainImage p.name .sizeL {
    font-size: 60px;
	line-height: 1;
}


@media screen and (min-width: 320px) and (max-width: 767px)  {	
	img {
		max-width:unset;
		width: 100%;
	}

	.pc {
		display: none;
	}
	
	.flexBox {
		display: flex;
		justify-content: space-between;
	}
	
	body {
		position: relative;
	}
	
	header {
		position: fixed;
		top:0;
		z-index: 10;
		width: 100%;
		height: 60px;
		background: #002256;
	}
	
	#logo {
		width: 175px;
		padding: 12px;
	}
	
	.contact {
		display: flex;
	}
	
	.contact .telephone {
		display: none;
	}
	
	
	.contact .telephone .tel a {
		font-size: 36px;
		font-weight: bold;
		color:#fff;
		line-height: 1;
    	padding: 20px 20px 0 0;
		pointer-events: none;
	}
	
	.contact .reserve {
		width: 100px;
	}
	
	.contact .reserve a {
		width: 100%;
		display: block;
		text-align: center;
		line-height: 60px;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 4px;
		background: #DFC389;
	}
	
	.contact .reserve a:hover {
		background: #cf0000;
		color: #fff;
	}
	
	.mainArea {
		position: relative;
		margin-bottom: 100px;
	}
	
	.mainBg {
		background: #002256;
		width:calc(100% - 130px);
		height: 68vh;
	}
	
	.mainImage {
		position: absolute;
		top: 60px;
		left: 0;
		z-index: 2;
		width: calc(100% - 60px);
		margin: 0 30px;
    	height: 65vh;
		overflow: hidden;
	}
	
	.mainImage .photo {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url("../images/main02.jpg") no-repeat 50% 50%;
		background-size: cover;
		animation: zoom 12s 1;
   		animation-fill-mode: forwards;
	}
	
	.mainImage p.text {
		top: 40px;
		font-size: 16px;
		width: 102px;
	}

	.mainImage p.name {
		position: absolute;
		bottom: 15px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		display: inline-block;
		left: 0;
		right: 0;
		line-height: 1.2;
		width: 70%;
	}


	.mainImage p.name .sizeM {
		font-size: 20px;
	}

	.mainImage p.name .sizeL {
		font-size:30px;
		line-height: 1.2;
	}
	
	h1 {
		position: absolute;
		top:50%;
		right: 5px;
		font-size: 14px;
		letter-spacing: 4px;
		color: #002256;
		writing-mode: vertical-rl;
		font-weight: normal;
	}
	
	h3 {
		font-size: 22px;
		width: 92%;
		margin: 0 auto 30px;
		position: relative;
	}

	h3:after {
		content: "";
		position: absolute;
		top: 50%;
		background: #002256;
		height: 1px;
		width: 150px;
		margin-left: 2rem;
	}
	
	.mapArea {
		width: 92%;
		margin: 0 auto 60px;
		text-align: center;
	}
	
	.kukakuArea {
		width: 92%;
		margin: 0 auto 60px;
		text-align: center;
	}
		
	.kukakuArea .kukakuzu {
		margin-bottom: 40px;
	}
	
	.kukakuArea .flexBoxSp {
		display: flex;
		justify-content: space-between;
	}
	
	.kukakuArea .flexBoxSp div {
		width: 48%;
	}
	
	.landArea {
		width: 92%;
		margin: 0 auto 60px;
	}
	
	.landArea .flexBox {
		display: block;
	}
	
	.landArea .flexBox:first-child {
		padding-bottom: 50px;
		margin-bottom:50px;
		border-bottom: 1px solid #002256;
	}
	
	.landArea .landImage {
		width: 100%;
	}
	
	.landArea .landImage img {
		margin-bottom: 1rem;
	}
	
	.landArea .menseki p {
		font-size: 16px;
	}
	
	.landArea .menseki {
		width:100%;
	}
	
	.landArea .menseki .textBig {
		font-size: 18px;
		border-bottom: 1px solid #002256;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	
	.landArea .menseki .textBig span {
		font-size: 18px;
	}
	
	.landArea .menseki .textBig span.big {
		font-size: 40px;
		 line-height: 1;
	}
	
	.landArea .menseki .textBig.kakaku {
		border-bottom: none;
		padding: 0;
	}
	
	.landArea .menseki .text {
		margin-bottom: 30px;
	}
	
	.landArea .menseki .photo {
		margin-bottom: 30px;
	}
	
	.gaiyo {
        width: 92%;
        margin: 0 auto 60px;
	}
	
	.gaiyo h4 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.gaiyo table {
		width: 100%;
	}

	.gaiyo table {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 40px;
	}

	.gaiyo table ,.gaiyo td,.gaiyo th {
		border-collapse: collapse;
		line-height: 1.6;
		padding: 1rem;
		font-size: 16px;
	}

	.gaiyo th {
		background: #f8fbff;
		width: 100%;
		text-align: left;
		font-weight: normal;
		display: block;
		border-top: 1px solid #aaa;
        border-bottom: 1px solid #eee;
	}
	
	.gaiyo tr:last-child td {
		border-bottom: 1px solid #aaa;
	}
	
	.gaiyo td {
		width: 100%;
		display: block;
	}

	.gaiyo p {
		margin-bottom: 40px;
	}
	
	
	
	
	
	
	.insulation {
		margin-bottom: 50px;
	}

	.btn a {
		display: block;
		text-align: center;
		padding: 6px 0;
		width: 65%;
		margin: 0 auto 60px;
		color: #002256;
		background: #DFC389;
		font-size: 16px;
		font-weight: bold;
	}

	.btn a:hover {
		background: #002256;
		color:#fff;
	}
	
	.otoiawase {
		background:#002256;
		padding: 20px 0 35px;
	}
	
	.otoiawase div.flexBox {
		width: 92%;
		margin: 0 auto;
		align-items: center;
		display: block;
	}
	
	.otoiawase div.flexBox #logo {
		width: 50%;
		margin: 0 auto 15px;
		text-align: center;
	}	

	.otoiawase div p {
		color: #fff;
		font-size: 16px;
		text-align: center
	}		
	
	.otoiawase div p.textBig {
		font-size: 18px;
		margin-bottom: 8px;
	}	
	
	.otoiawase div p.text {
		font-size: 16px;
		margin-bottom: 5px;
	}		
	
	.otoiawase div p.tel {
		font-size: 14px;
		line-height: 1;
	}
	
	.otoiawase div p.tel a {
		color: #fff;
		font-size: 32px;
		line-height: 1;
		margin-bottom: 5px;
	}	
	
	.otoiawase div p.textSmall {
		font-size: 12px;
		margin-bottom: 30px;
	}
	
	.otoiawase .btn {
		width: 65%;
		margin: 0 auto;
	}
	
	.otoiawase .btn a {
		width: 100%;
		margin: 0 auto ;
	}

	.otoiawase .btn a:hover {
		background: #cf0000;
		color:#fff;
	}
	
	#copy {
		background:#dddddd;
		padding: 5px 0;
		color: #002256;
		text-align: center;
		padding-bottom: 65px;
	}
	
	.sp.fixed {
		position: fixed;
		bottom: 0;
		height: 65px;
		background: #002256;
		width: 100%;
	}
	
	.sp.fixed ul {
		display: flex;
		justify-content: center;
		height: 65px;
		width: 100%;
	}
	
	.sp.fixed ul li {
		text-align: center;
		width: 50%;
	}
	
	.sp.fixed ul li:first-child {
		border-right: 1px solid #fff;
	}
	
	.sp.fixed ul li a {
		color: #fff;
		width: 100%;
		display: block;
		padding: 5px;
	}	
	
	.sp.fixed ul li img {
		width: 20%;
	}	
}
@media screen and (min-width: 768px) and (max-width: 799px)  {	
	
	.sp {
		display: none;
	}
	
	.flexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	header {
		position: fixed;
		top:0;
		z-index: 10;
		width: 100%;
		height: 90px;
		background: #002256;
		
	}
	
	#logo {
		width: 238px;
		padding: 20px;
	}
	
	.contact {
		display: flex;
	}
	
	.contact .telephone {
		color:#fff;
	}
	
	.contact .telephone p {
		font-size: 12px;
	}	
	
	.contact .telephone .tel a {
		font-size: 36px;
		font-weight: bold;
		color:#fff;
		line-height: 1;
    	padding: 20px 20px 0 0;
		pointer-events: none;
	}
	
	.contact .reserve {
		width: 130px;
	}
	
	.contact .reserve a {
		width: 100%;
		display: block;
		text-align: center;
		line-height: 90px;
		font-size: 19px;
		font-weight: bold;
		letter-spacing: 4px;
		background: #DFC389;
	}
	
	.contact .reserve a:hover {
		background: #cf0000;
		color: #fff;
	}
	
	.mainArea {
		position: relative;
		margin-bottom: 150px;
	}
	
	.mainBg {
		background: #002256;
		width:calc(100% - 130px);
		height: 60vh;
	}
	
	.mainImage {
		position: absolute;
		top: 90px;
		left: 0;
		z-index: 2;
		width: calc(100% - 100px);
		margin: 0 50px;
    	height: 59vh;
		overflow: hidden;
	}
	
	.mainImage .photo {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url("../images/main02.jpg") no-repeat 50% 50%;
		background-size: cover;
		animation: zoom 12s 1;
   		animation-fill-mode: forwards;
	}
	
	h1 {
		position: absolute;
		top:50%;
		right: 10px;
		font-size: 17px;
		letter-spacing: 4px;
		color: #002256;
		writing-mode: vertical-rl;
		font-weight: normal;
	}
	
	h3 {
		font-size: 34px;
		width: 92%;
		margin: 0 auto 40px;
		position: relative;
	}

	h3:after {
		content: "";
		position: absolute;
		top: 50%;
		background: #002256;
		height: 1px;
		width: 200px;
		margin-left: 2rem;
	}
	
	.mapArea {
		width: 92%;
		margin: 0 auto 80px;
		text-align: center;
	}
	
	.kukakuArea {
		width: 92%;
		margin: 0 auto 80px;
		text-align: center;
	}
	
	.kukakuArea .kukakuzu {
		text-align: center;
	}	
	
	.kukakuArea .kukakuzu {
		margin-bottom: 40px;
	}
	
	.kukakuArea .flexBoxSp {
		display: flex;
		justify-content: space-between;
	}
	
	.kukakuArea .flexBoxSp div {
		width: 48%;
	}
	
	.landArea {
		width: 92%;
		margin: 0 auto 60px;
	}
	
	.landArea .flexBox {
		display: block;
	}
	
	.landArea .flexBox:first-child {
		padding-bottom: 50px;
		margin-bottom:50px;
		border-bottom: 1px solid #002256;
	}
	
	.landArea .landImage {
		width: 100%;
	}
	
	.landArea .landImage img {
		margin-bottom: 2rem;
	}
	
	.landArea .menseki p {
		font-size: 16px;
	}
	
	.landArea .menseki {
		width:100%;
	}
	
	.landArea .menseki .photo {
		width:70%;
		margin: 0 auto 40px;
	}	
	
	.landArea .menseki .textBig {
		font-size: 28px;
		border-bottom: 1px solid #002256;
		margin-bottom: 2rem;
	}

	.landArea .menseki .textBig span.big {
		font-size: 54px;
	}
	
	.landArea .menseki .text {
		margin-bottom: 40px;
	}
	
	.insulation {
		margin-bottom: 100px;
	}

	.btn a {
		display: block;
		text-align: center;
		padding: 12px 0;
		width: 38%;
		margin: 0 auto 80px;
		color: #002256;
		background: #DFC389;
		font-size: 20px;
		font-weight: bold;
	}

	.btn a:hover {
		background: #002256;
		color:#fff;
	}
	
	.otoiawase {
		background:#002256;
		padding: 60px 0;
	}
	
	.otoiawase div.flexBox {
		width: 92%;
		margin: 0 auto;
		align-items: center;
	}	

	.otoiawase div p {
		color: #fff;
		font-size: 40px;
	}		
	
	.otoiawase div p.textBig {
		font-size: 30px;
		margin-bottom: 15px;
	}	
	
	.otoiawase div p.text {
		font-size: 22px;
		margin-bottom: 5px;
	}		
	
	.otoiawase div p.tel {
		font-size: 26px;
		line-height: 1;
	}
	
	.otoiawase div p.tel a {
		color: #fff;
		font-size: 40px;
		pointer-events: none;
		line-height: 1;
	}	
	
	.otoiawase div p.textSmall {
		font-size: 14px;
	}
	
	.otoiawase .btn {
		width: 250px;
	}
	
	.otoiawase .btn a {
		padding: 12px 0;
		width: 100%;
		margin: 0 auto ;
		color: #002256;
		background: #DFC389;
		font-size: 20px;
		font-weight: bold;
	}

	.otoiawase .btn a:hover {
		background: #cf0000;
		color:#fff;
	}
	
	#copy {
		background:#dddddd;
		padding: 5px 0;
		color: #002256;
		text-align: center;
	}
	
	
	
	
}

@media screen and (min-width: 800px) { 	
	.sp,.tb {
		display: none;
	}
	
	.flexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	header {
		position: fixed;
		top:0;
		z-index: 10;
		width: 100%;
		height: 75px;
		background: #002256;
		
	}
	
	#logo a {
		width: 238px;
		padding: 14px 20px;
	}
	
	.contact {
		display: flex;
	}
	
	.contact .telephone {
		color:#fff;
	}
	
	.contact .telephone p {
		font-size: 12px;
		margin-right: 15px;
	}	
	
	.contact .telephone .tel a {
		font-size: 36px;
		font-weight: bold;
		color:#fff;
		line-height: 1;
    	padding: 20px 20px 0 0;
		pointer-events: none;
	}
	
	.contact .reserve {
		width: 130px;
	}
	
	.contact .reserve a {
		width: 100%;
		display: block;
		text-align: center;
		line-height: 75px;
		font-size: 19px;
		font-weight: bold;
		letter-spacing: 4px;
		background: #DFC389;
	}
	
	.contact .reserve a:hover {
		background: #cf0000;
		color: #fff;
	}
	
	.mainArea {
		position: relative;
		margin-bottom: 200px;
	}
	
	.mainBg {
		background: #002256;
		width:calc(100% - 130px);
		height: 87vh;
	}
	
	.mainImage {
		position: absolute;
		top: 75px;
		left: 0;
		z-index: 2;
		width: calc(100% - 100px);
		margin: 0 50px;
    	height: 85vh;
		overflow: hidden;
	}
	
	.mainImage .photo {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url("../images/main02.jpg") no-repeat 50% 50%;
		background-size: cover;
		animation: zoom 12s 1;
   		animation-fill-mode: forwards;
	}
	
	h1 {
		position: absolute;
		top:50%;
		right: 10px;
		font-size: 17px;
		letter-spacing: 4px;
		color: #002256;
		writing-mode: vertical-rl;
		font-weight: normal;
	}
	
	h3 {
		font-size: 34px;
		max-width: 1200px;
		width: 92%;
		margin: 0 auto 40px;
		position: relative;
	}

	h3:after {
		content: "";
		position: absolute;
		top: 50%;
		background: #002256;
		height: 1px;
		width: 200px;
		margin-left: 2rem;
	}
	
	.mapArea {
		max-width: 1200px;
		width: 92%;
		margin: 0 auto 150px;
		text-align: center;
	}
	
	.kukakuArea {
		max-width: 1200px;
		width: 92%;
		margin: 0 auto 150px;
		text-align: center;
		position: relative;
		height:740px;
	}
	
	.kukakuArea .kukakuzu {
		position: absolute;
		top:0;
		left:50px;
		z-index: 2;
	}	
	
	.kukakuArea .photo01 {
		position: absolute;
		top:-16%;
		right:80px;
		z-index: 1;
	}	
	
	.kukakuArea .photo02 {
		position: absolute;
		top:42%;
		right:80px;
		z-index: 1;
	}	

	.landArea {
		max-width: 1200px;
		width: 92%;
		margin: 0 auto 150px;
	}
	
	.landArea .flexBox {
		align-items: center;
	}
	
	.landArea .flexBox:first-child {
		padding-bottom: 100px;
		margin-bottom:100px;
		border-bottom: 1px solid #002256;
	}
	
	.landArea .landImage {
		width: 56%;
	}
	
	.landArea .landImage img {
		margin-bottom: 2rem;
	}
	
	.landArea .menseki p {
		font-size: 16px;
	}
	
	.landArea .menseki {
		width:36%;
	}
	
	.landArea .menseki .textBig {
		font-size: 28px;
		border-bottom: 1px solid #002256;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}
	
	.landArea .menseki .textBig span {
		font-size: 28px;
	}
	
	.landArea .menseki .textBig span.big {
		font-size: 54px;
		line-height: 1;
	}
	
	.landArea .menseki .textBig.kakaku {
		border-bottom: none;
		padding: 0;
	}
	
	.landArea .menseki .text {
		margin-bottom: 2rem;
	}
	
	.gaiyo {
		max-width: 1200px;
        width: 92%;
        margin: 0 auto 150px;
	}
	
	.gaiyo h4 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.gaiyo table {
		width: 100%;
	}

	.gaiyo table {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 40px;
	}

	.gaiyo table ,.gaiyo td,.gaiyo th {
		border: 1px solid #ccc;
		border-collapse: collapse;
		line-height: 1.6;
		padding: 1rem;
		font-size: 16px;
	}

	.gaiyo th {
		background: #f8fbff;
		width: 20%;
		text-align: left;
		font-weight: normal;
	}

	.gaiyo p {
		margin-bottom: 40px;
	}
	
	.insulation {
		margin-bottom: 100px;
	}

	.btn a {
		display: block;
		text-align: center;
		padding: 12px 0;
		width: 38%;
		margin: 0 auto 150px;
		color: #002256;
		background: #DFC389;
		font-size: 20px;
		font-weight: bold;
	}

	.btn a:hover {
		background: #002256;
		color:#fff;
	}
		
	.otoiawase {
		background:#002256;
		padding: 60px 0;
	}
	
	.otoiawase div.flexBox {
		max-width: 1000px;
		width: 92%;
		margin: 0 auto;
		align-items: center;
	}	

	.otoiawase div p {
		color: #fff;
		font-size: 40px;
	}		
	
	.otoiawase div p.textBig {
		font-size: 30px;
		margin-bottom: 15px;
	}	
	
	.otoiawase div p.text {
		font-size: 22px;
		margin-bottom: 5px;
	}		
	
	.otoiawase div p.tel {
		font-size: 26px;
		line-height: 1;
	}
	
	.otoiawase div p.tel a {
		color: #fff;
		font-size: 40px;
		pointer-events: none;
		line-height: 1;
	}	
	
	.otoiawase div p.textSmall {
		font-size: 14px;
	}
	
	.otoiawase .btn {
		width: 250px;
	}
	
	.otoiawase .btn a {
		padding: 12px 0;
		width: 100%;
		margin: 0 auto ;
		color: #002256;
		background: #DFC389;
		font-size: 20px;
		font-weight: bold;
	}

	.otoiawase .btn a:hover {
		background: #cf0000;
		color:#fff;
	}
	
	#copy {
		background:#dddddd;
		padding: 5px 0;
		color: #002256;
		text-align: center;
	}
	
	
	
	
	
}