body{
	font-family: "Klee One", cursive;
  	font-weight: 400;
  	font-style: normal;
}

.all-wrap{
	width:100%;
	height:auto;
	background-color:rgb(200,205,180);	
}

.header-wrap{
	width:100%;
	height:80px;
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 20px;
}

.header-logo{
	width:auto;
	height:80px;
	display:flex;
	align-items:center;
}

.header-menu-wrap {
	width: auto;
	height: 80px;
	display: flex;
	align-items: center;
}

.header-menu-list {
	display: flex;
	gap: 20px;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-menu {
	display: flex;
	align-items: center;
	height: 80px;
}

.hamburger {
	display: none;
	width: 30px;
	height: 25px;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	z-index: 101;
}

.hamburger span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	border-radius: 2px;
}

@media screen and (max-width: 767px) {
	.header-menu-wrap {
		position: absolute;
		top: 80px;
		right: 0;
		width: 80%;
		height:auto;
		background: #333;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
	
	.header-logo{
		max-width:50%;
	}

	.header-menu-list {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.header-menu {
		width: 100%;
		color: #fff;
	}

	.hamburger {
		display: flex;
	}
	
	.header-menu-wrap.active {
		display: flex;
	}
}

.fv-wrap{
	width:100%;
	height:auto;
	min-height:100vh;
	background-image:url("../img/fv_image.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position:center;
}

.concept-wrap {
	width: 100%;
	height: auto;
	min-height: 100vh;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0;
}

.concept-title {
	width: 20%;
	min-height: 100vh;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 12cqh;
	color: rgb(200, 180, 150);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Delius", cursive;
 	font-weight: 400;
 	font-style: normal;
}

.concept-content-wrap {
	right: 0;
	width: 60%;
	height: 70vh;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 30% 0 0 30%;
	display: flex;
}

.concept-content-left {
	width: 30%;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.concept-image {
	max-height: 100%;
	object-fit: contain;
	transform: translateX(-55%);
}

.concept-content-right {
	width: 70%;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: rgb(175, 160, 105);
}

.concept-content-right h2 {
	font-size: 2.4rem;
	margin-bottom: 3.6rem;
	line-height: 3.6rem;
}

.concept-description {
	font-size: 1rem;
	line-height: 2;
}

@media screen and (max-width: 767px) {
	.concept-wrap {
		flex-direction: column;
		align-items: center;
        justify-content: center;
	}

	.concept-title {
		width: 100%;
		min-height: auto;
		writing-mode: horizontal-tb;
		font-size: 3.6rem;
	}

	.concept-content-wrap {
		width: 100%;
		height:auto;
		flex-direction: column-reverse;
		border-radius:0;
		background-color: transparent;
	}

	.concept-content-left{
		margin:0 auto;	
	}

	.concept-image {
		transform: none;
	}
	
	.concept-content-right {
    	width: 100%;
    	padding: 20px;
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	color: rgb(175, 160, 105);
	}
	
	.concept-content-right h2{
		font-size:10cqw;
		line-height:6.2rem;
	}
}

@media screen and (max-width:560px){
	.concept-content-right h2{
		font-size:10cqw;
		line-height:4.2rem;
	}
}

.service-wrap-sp{
	display:none;
}

.service-wrap-pc {
  width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
}

.service-contents-wrap {
  width: 80%;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 20px;
}

.service-content-menu-wrap {
  width: 33.3%;
  height: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-content-mark {
  width: 50%;
  height: auto;
  margin: 0 auto;
}

.service-content-mark img {
  width: 100%;
  height: auto;
}

.service-content-menu-title-wrap {
  width: 100%;
  height: auto;
  color: rgb(175, 160, 105);
  background-color: rgb(255, 255, 255);
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  padding: 20px;
}

.service-content-menu-title-wrap img {
  width: 30%;
  height: auto;
}

.service-content-menu-title {
  color: rgb(175, 160, 105);
  font-size: 2cqw;
  width: 70%;
  text-align: center;
}

.service-content-menu-description {
  width: 100%;
  height: auto;
  min-height: 24rem;
  color: #fff;
  background-color: rgb(175, 160, 105);
  display: flex;
  align-items: center;
  padding: 20px;
  line-height: 2.4rem;
  border-radius: 0 0 20px 20px;
  font-size: 1rem;
}

.service-title {
  width: 20%;
  min-height: 100vh;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 12cqh;
  color: rgb(200, 180, 150);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Delius", cursive;
  font-weight: 400;
  font-style: normal;
}

@media screen and (max-width: 1080px){
	.service-contents-wrap{
		flex-direction:column;
	}
	
	.service-content-menu-wrap{
		width:80%;
		margin:0 auto;
	}
	
	.service-content-mark img{
		width:50%;
		margin:0 auto;
	}
	
	.service-content-menu-title-wrap img{
		width:20%;
	}
	
	.service-content-menu-title-wrap{
		font-size:3.5cqw;
	}
	
	.service-content-menu-description{
		min-height:12rem;
	}
} 

@media screen and (max-width: 767px) {
	.service-wrap-sp{
		width:100%;
		height:auto;
		min-height:auto;
		display:flex;
		flex-direction: column-reverse;
		align-items:center;
		justify-content:space-between;
		padding:40px 0px;
	}

	.service-wrap-pc{
		display:none;
	}

	.service-title {
		width: 100%;
		min-height: auto;
		writing-mode: horizontal-tb;
		font-size: 3.6rem;
		text-align: center;
		padding-bottom: 20px;
	}

	/* Swiper本体に必要なスタイル */
	.service-contents-wrap {
		width: 100%;
		min-height:auto;
		padding: 0;
	}
	
	.service-content-menu-title {
		font-size:6.0cqw;
	}

	/* Swiperが必要とする設定 */
	.swiper {
		width: 100%;
		overflow: hidden;
		height: auto;
		padding-bottom:40px;
	}

	.swiper-wrapper {
		display: flex;
		transition-timing-function: ease;
	}

	.swiper-slide {
		width: 80%; /* スライド1枚の幅 */
		box-sizing: border-box;
		padding: 10px;
	}

	.service-content-menu-wrap {
		width: 100%; /* スライドとして使う */
		padding: 0; /* paddingは.swiper-slideに含める */
	}
	
	.service-content-mark img {
    	width: 70%;
    	height: auto;
    	margin:0 auto;
	}
	
	.service-content-menu-title-wrap img {
    	width: 20%;
    	height: auto;
	}

	.service-content-menu-description {
		min-height: 15rem;
		line-height: 2.0;
		font-size: 1.orem;
	}
	
	.swiper-pagination-bullet{
		background-color:#fff;
	}
}

.galery-wrap{
	width:100%;
	height:auto;
	min-height:100vh;
	display:flex;
	align-items:center;
	padding:40px 0;
}

.gallery-title{
	width: 20%;
	min-height: 100vh;
	padding-bottom:20px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 12cqh;
	color: rgb(200, 180, 150);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Delius", cursive;
 	font-weight: 400;
 	font-style: normal;
}

.gallery-contents-wrap{
	width:80%;
	display:grid;
	grid-template-columns: repeat(3, 30%);
	gap:20px;
}

@media screen and (max-width:1080px){
	.gallery-contents-wrap{
		width:75%;
		grid-template-columns: repeat(2, 50%);
	}
}

@media screen and (max-width:767px){
	.galery-wrap{
		flex-direction:column;
		min-height:auto;
	}
	
	.gallery-title{
		width:100%;
		min-height:auto;
		writing-mode:horizontal-tb;
		font-size:3.6rem;
	}
	
	.gallery-contents-wrap{
		width:100%;
		grid-template-columns: repeat(2, 50%);
	}
}

.access-wrap{
	width:100%;
	height:auto;
	min-height:100vh;
	display:flex;
	align-items:center;	
}

.access-map-wrap{
	width:80%;;
	height:auto;
	min-height:100vh;
	display:flex;
	align-items:center;
}

.access-title{
	width: 20%;
	min-height: 100vh;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 12cqh;
	color: rgb(200, 180, 150);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Delius", cursive;
 	font-weight: 400;
 	font-style: normal;
}

@media screen and (max-width:767px){
	.access-wrap{
		flex-direction:column-reverse;
		min-height:auto;
		padding:40px 0;
	}
	
	.access-title {
		width: 100%;
		min-height: auto;
		writing-mode: horizontal-tb;
		font-size: 3.6rem;
		padding-bottom:20px;
	}
	
	.access-map-wrap {
		width:100%;
    	min-height: auto;
	}
}

.contact-wrap{
	width:100%;
	height:auto;
	min-height:100vh;
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	padding:40px 0;
}

.contact-title{
	width: 20%;
	min-height: 100vh;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 12cqh;
	color: rgb(200, 180, 150);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Delius", cursive;
 	font-weight: 400;
 	font-style: normal;
}

.contact-content-allwrap{
	width:70%;
	height:80vh;
	background-color:rgba(255,255,255,0.5);
	border-radius:30% 0 0 0;
	position:absolute;
	right:0;
	bottom:0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-content-wrap{
	width:70%;
	height:auto;
}

.contact-content-web{
	width:100%;
	height:auto;
	background-color:rgb(200,180,150);
	color:rgb(255,255,255);
	border-radius:20px;
	margin:10vh auto 5vh;
	display:flex;
	align-items:center;
	padding:1.2rem 20px;
	outline:4px dotted rgb(255,255,255);
	outline-offset:-15px;
}

.contact-image{
	width:20%;
	height:auto;
	padding:4%;
	display:flex;
	align-items:center;
}

.contact-text{
	width:80%;
	height:auto;
	text-align:center;
}

.contact-content-web-title{
	width:100%;
	height:auto;
	text-align:center;
	font-size:2.8cqw;
}

.contact-content-web-description{
	width:100%;
	height:auto;
	text-align:center;
	font-size:1.0rem;
}

.contact-content-line{
	width:100%;
	height:auto;
	background-color:rgb(200,180,150);
	color:rgb(255,255,255);
	border-radius:20px;
	margin:5vh auto;
	display:flex;
	align-items:center;
	padding:1.2rem 20px;
	outline:4px dotted rgb(255,255,255);
	outline-offset:-15px;
}

.contact-content-line-title{
	width:100%;
	height:auto;
	text-align:center;
	font-size:2.8cqw;
}

.contact-content-line-description{
	width:100%;
	height:auto;
	text-align:center;
	font-size:1.0rem;
}

.contact-content-tel{
	width:100%;
	height:auto;
	color:rgb(175, 160, 105);
	font-size:1.8rem;
	text-align:center;
}

.contact-content-tel a{
	font-size:2.4rem;
}

.contact-content-info{
	width:100%;
	height:auto;
	color:rgb(175, 160, 105);
	font-size:1.8rem;
	text-align:center;
	margin-top:2.5vh;
}

@media screen and (max-width:767px){
	.contact-wrap{
		flex-direction:column;
		width:100%;
		min-height:auto;
	}
	
	.contact-title {
		width: 100%;
		min-height: auto;
		writing-mode: horizontal-tb;
		font-size: 3.6rem;
		padding-bottom:20px;
	}
	
	.contact-content-allwrap{
		width:100%;
		height:auto;
		border-radius:0;
		position:static;
		background-color:transparent;
	}
	
	.contact-content-wrap{
		width:90%;
	}
	
	.contact-content-web{
		padding:20px;
		margin:0;
		outline: 2px dotted rgb(255, 255, 255);
		outline-offset: -10px;
	}
	
	.contact-image{
		padding:5px;
	}
	
	.contact-content-web-title{
		font-size:6cqw;
	}
	
	.contact-content-web-description{
		font-size:2.8cqw;
	}
	
	.contact-content-line{
		padding:20px;
		outline: 2px dotted rgb(255, 255, 255);
		outline-offset: -10px;
		margin:20px 0;
	}
	
	
	.contact-content-line-title{
		font-size:6cqw;
	}
	
	.contact-content-line-description{
		font-size:2.8cqw;
	}
	
	.contact-content-tel{
		font-size:6cqw;
	}
	
	.contact-content-tel a {
    font-size: 9cqw;
	}
	
	.contact-content-info{
		font-size:6cqw;
	}
}

footer{
	width:100%;
	height:80px;
	color:#fff;
	background-color:rgb(200, 180, 150);
	display:flex;
	align-items:center;
	justify-content:center;
}