@charset "utf-8";
:root{
	--mainColor:#00463B;
	--accentColor:#FFCE29;
	--lightMainColor:#C2D6D3;
	--whiteMainColor:#F0F5F4;
	--fzXl:clamp(24px, 2.5vw, 36px);
	--fzLg:clamp(16px, 1.7vw, 24px);
	--fzMd:clamp(14px, 1.3vw, 18px);
	--fzSm:clamp(14px, 1.3vw, 16px);
	--fzXs:clamp(12px, 1.2vw, 14px);
}
body{
	background: #fff;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: var(--fzSm);
	min-height: 0;
	font-weight: 400;
	line-height: 1.7;
	color: #000;
	width: 100%;
}
img{
	display: block;
	max-width: 100%;
	height: auto;
}
a{
	display: block;
}
/* compornent */
.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
.c-btn{
	color: var(--mainColor);
	transition:0.3s
}
.c-btn:hover{
	color: var(--accentColor);
}
.c-btn.-xs{
	font-size: var(--fzSm);
	min-height: 0;
	font-weight: 400;
}
.c-btn.-sm{
	font-size: var(--fzMd);
	min-height: 0;
	font-weight: 700;
}
.c-btn.-lg{
	font-size: var(--fzLg);
	min-height: 0;
	font-weight: 400;
}
.c-gt::before{
	content:"＞";
	font-size: 0.5em;
	padding-right: 0.5em;
	vertical-align:10%;
}
.c-br{
	margin-left: 2em;
}
.c-icon{
	width: clamp(25px, 2vw,30px);
}
.c-icon:hover{
	opacity: 0.3;
}
.c-title-lg{
	text-align: center;
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 200;
	font-variation-settings: "YOPQ" 116;
	font-size: var(--fzXl);
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center
}
.c-title-lg::before{
	content:"";
	margin-top: 0.4em;
	width: 220px;
	height: 2px;
	background: var(--lightMainColor);
	opacity: 0.3;
	border-radius: 100vmax;
	order:1;
}
.c-title-lg::after{
	content:attr(data-ja);
	padding: 0.5em 0 3em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 0.5em;
	color: #777;
	order: 2;
}
.c-title.-md{
	padding: 0.5em;
	border: 1px var(--mainColor) solid;
	font-size: var(--fzLg);
	min-height: 0;
}
.c-title.-sm{
	font-size: var(--fzLg);
	min-height: 0;
}
.c-title.-sm::before{
	content: "";
	display: block;
	width: 1.5em;
	height: 3px;
	background: var(--lightMainColor);
	border-radius: 100vmax;
	transform: rotate(90deg) translate(1em, 1.5em);
}
.c-heading{
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-size: var(--fzXl);
	min-height: 0;
}
.c-title-lgProf{
	text-align: center;
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 200;
	font-variation-settings: "YOPQ" 116;
	font-size: var(--fzXl);
	min-height: 0;
	position: relative;
	padding: 150px 0;
	background: transparent;
	z-index: 2;
}
/* elment */
.el-share{
	width: fit-content;
	margin-left: auto;
	text-align: center;
	font-size: var(--fzMd);
	min-height: 0;
	position: relative;
}
.el-share-translate{
	transition:0.3s;
}
.el-share-translate:hover{
	color: var(--accentColor);
}
.el-share-text{
	padding-top: 0.5em;
}
.el-share-text::before{
	content:'＼';
	/*width: 15px;
	height: 1px;
	background: #000;*/
}
.el-share-text::after{
	content:"／";
	/*width: 15px;
	height: 1px;
	background: #000;*/
}
.el-share-iconList{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.el-share-iconLink:hover{
	opacity: 0.3;
}
.el-share-icon{
	width: clamp(25px, 2vw,30px);
}
.copyMsg{
	display: none;
	position: absolute;
	top:100%;
	left: 20%;
	margin-top: 0.5em;
	font-size: var(--fzSm);
}
.copyMsg::after{
	content:"!";
	margin-left: 0.5em;
}
.bottom-.el-share{
	margin: 75px auto 0;
	width: fit-content;
}
.el-post{
	display: flex;
	gap: 15px;
        height: 100%;
 	padding-top: 30px;
}
.el-post-imgOuter{
	flex: 2;
}
.el-post-img{
	aspect-ratio: 3 / 2;
	object-fit: cover;
        min-height:100%;
}
.el-post-textUnit{
	flex: 3;
	padding: 20px;
	background: var(--whiteMainColor);
	display: flex;
	flex-direction: column;
}
.el-post-link:hover{
	opacity: 0.5;
}
.el-post-heading{
	display: flex;
	align-items: center;
	gap: 2em;
}
.el-post-title{
	font-size: var(--fzLg);
	min-height: 0;
}
.el-post-class{
	text-align: center;
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 200;
	font-variation-settings: "YOPQ" 116;
	font-size: var(--fzMd);
	min-height: 0;
}
.el-post-text{
	margin: 0.7em 0;
	line-height: 1.8;
}
.el-post-btnList{
	display: flex;
	align-items: center;
	gap:25px;
	margin-top: auto;
}
.el-post-btnLink.-icon:hover{
	opacity: 0.3;
}
.el-post-btnLink.-icon{
	width: clamp(25px, 2vw,30px);
}
.el-post-tagList{
	display: flex;
	flex-wrap:wrap;
	gap: 10px;
	padding-top: 1.5em;
	font-size: var(--fzXs);
}
.el-post-tagItem{
	background: var(--lightMainColor);
	padding: 0 15px;
	border-radius: 100vmax;
}
.el-crumbsList{
	display: flex;
	gap: 10px;
}
.el-crumbsLink::after{
	content:"＞";
	padding-left: 1em;
	font-size: 0.7em;
	vertical-align:10%;
	color: #000;
}
.el-crumbsItem:last-child .el-crumbsLink::after{
	display: none;
}
.el-tocWrap{
	padding: 15px;
	background: var(--whiteMainColor);
}
.el-tocTitle{
	width: fit-content;
	margin: 0 auto;
}
.el-tocTitle::before, .el-tocTitle::after{
	content:"-";
	padding: 0 1em;
}
.el-tocLink{
	width: fit-content;
	line-height: 2.2;
}
.el-contentTitle{
	margin-top: 2.5em;
}
.el-contentText{
	margin-top: 0.7em;
	padding: 0 1em;
	line-height: 1.8;
}
.el-contentSubteitle{
	margin-top:1em;
	padding: 0 1em;
}
.el-contentImg-outer{
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin: 20px 0;
}
.el-contentImg{
	border-radius: 5px;
}
.el-tips-outer{
	margin-top: 3em;
	padding: 20px;
	background: var(--whiteMainColor);
	position: relative;
}
.el-tips-title{
	position: absolute;
	top: -0.8em;
	left: 0;
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 200;
	font-variation-settings: "YOPQ" 116;
	font-size: var(--fzLg);
	min-height: 0;
}
.el-cardWrap{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.el-cardLink{
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	border-radius: 5px;
}
.el-cardTitle{
	text-align: center;
	font-size: var(--fzMd);
	padding-top: 0.5em;
}
.el-cardDate, .el-cardText{
	font-size: var(--fzXs);
	padding-top: 0.5em;
}
@media(max-width: 500px){
	.el-share{
		margin: 0 auto;
	}
	.el-contentImg-outer{
		flex-direction: column;
	}
}
@media(max-width: 960px){
	.el-post{
		flex-direction: column;
		gap: 0px;
	}
}
/* lyout */
.l-width{
	width: min(95%, 1440px);
	margin-inline: auto;
}
.l-height{
	padding-top: 100px;
}
.l-header{
	position:fixed;
	top:-1px;
	left: 0;
	right: 0;
	z-index: 10;
	width: 100%;
}
.topConcept.l-height{
	padding: 10px 0 100px;
}
.l-topMap{
	width: 100%;
}
.l-footer{
	width: 100%;
}
.l-footer.l-height{
	padding-top: 50px;
}
.articlePost.l-height{
	padding-top: 50px;
}
.intvSuggest.l-width{
	width: min(768px, 95%);
}

.profFolio.l-height{
	padding-top: 150px;
}
/* header */
.hmbBtn{
	display: none;
}
.header-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headerLogo{
	width: 75px;
}
.headerGnav-list{
	display: flex;
	font-family: "Kumbh Sans", sans-serif;
	font-weight: 200;
	font-variation-settings: "YOPQ" 116;
	font-size: clamp(20px, 2vw,30px);
	min-height: 0;
}
.headerGnav-link{
	padding: 0 10px;
}
/* footer */
.footer-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 30px 15px 15px;
	background: var(--mainColor);
}
.footerLogo-imgOuter{
	width: calc(var(--fzXl) * 7em);
}
.footerLogo-img{
	width: clamp(100px, 15vw, 150px);
}
.footerCatch{
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-size: var(--fzXl);
	min-height: 0;
	color: var(--accentColor);
	order: 2;
}
.footerSitemap-folderList{
	justify-self: center;
	order: 1;
	display: flex;
	gap: 20px;
	margin: 0 auto;
	min-width: 175px;
	text-align: center;
}
.footerSitemap-folderList :where(.c-btn.-xs, .c-btn.-sm){
	color: #fff;
	margin-top: 0.5em;
}
.footerCopy{
	padding-bottom: 15px;
	text-align: center;
	background: var(--mainColor);
	color: #fff;
	font-size: 10px;
}
@media(max-width: 500px){
	.headerGnav-list{
		flex-direction: row;
	}
	.headerGnav{
		width: 100%;
		height: 100vh;
		background: rgb(0,0,0,0.7);
		position: fixed;
		top:-100vh;
		left: 0;
		right: 0;
		bottom: 100vh;
		transition: all 0.5s;
		z-index: 2;
	}
	.headerGnav .c-btn{
		color: #fff;
	}
	.hmbBtn{
		display:revert;
		cursor: pointer;
		margin-right: 20px;
		width: 30px;
		height: 15px;
		position: relative;
		z-index: 100;
	}
	.hmbBtn span{
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		background: var(--mainColor);
		border-radius:100vmax;
		transition:0.3s;
	}
	.hmbBtn span:nth-child(1){
		top: 1px;
	}
	.hmbBtn span:nth-child(2){
		top: 13px;
	}
	.hmbBtn.close span:nth-child(1){
		transform: rotate(30deg) translate(0, 7px);
		background: #fff;
	}
	.hmbBtn.close span:nth-child(2){
		transform: rotate(-30deg) translate(0, -7px);
		background: #fff;
	}
	.headerGnav.open{
		top:0;
	}
	.open .headerGnav-list{
		flex-direction: column;
		text-align: center;
		justify-content: center;
		height: 80%;
		gap: 40px;
	}
	.footer-container{
		flex-wrap: wrap;
	}
	.footerCatch{
		order: 1;
	}
	.footerSitemap-folderList{
		order: 2;
	}
}
/* main */
.topHero-container{
	background:url("../img/top-hero-img.jpg") no-repeat center/cover;
	height: 95vh;
	width: 100%;
}
.topHero-wrap{
	margin-inline: auto;
	padding: 30vh 5vw 0;
	max-width: 1440px;
	height: 100%;
}
.topHero-catchImg{
	width: 58%;
	min-width: 300px;
}
.topHero-catchText{
	padding-top: 0.5em;
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-size: var(--fzLg);
	min-height: 0;
	color: #fff;
}
.topConcept-Container{
	height: 100%;
}
.topConcept-linkUnit{
	display: flex;
	justify-content: center;
	gap:3em;
	margin-top: 100px;
}
.topConcept-textUnit{
	margin-top: 50px;
}
.topConcept-title{
	margin-bottom: 1.5em;
}
.topConcept-text{
	margin-inline:auto ;
	width: fit-content;
	font-size: var(--fzMd);
	min-height: 0;
}
.topConcept-textBr{
	margin-left: 1em;
}
.topConcept-textBr-lg{
	margin-left: 4em;
}
.topMap-container{
	height: 100%;
}
.topMap-map{
	width: 100%;
	height: 80vh;
	vertical-align: bottom;
}
.topMap-wrap{
	width: 100%;
	height: 80vh;
}
.topMap-textUnit{
	padding-top: 50px;
	text-align: center;
}
.topMap-title{
	margin-bottom: 1.5em;
}
.topMap-text{
	font-size: var(--fzMd);
	min-height: 0;
}
.topMap-text:nth-of-type(2){
	padding-top: 2em;
	position: relative;
}
.topMap-text:nth-of-type(2)::before{
	content:"";
	display: block;
	position: absolute;
	top: 2.3em;
	left: calc(50% - 12em);
	background: url("../img/icon_location.svg") no-repeat center/cover;
	width: clamp(20px, 1.6vw, 24px);
	aspect-ratio: 1 / 1;
}
.topNews-table{
	margin-inline: auto;
	transform: translate(1.5em,0);
}
.topNews-table :where(th, td){
	padding-top: 1em;
}
.topNews-tableHeading{
	padding-right: 4em;
	font-weight: 400;
}
.topPost-title{
	padding-bottom: 2em;
}
.topProf-wrap{
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: center;
}
.topProf-imgOuter{
	width: 250px;
}
.topProf-.el-post-btnList{
	margin-top: 1.5em;
	justify-self: center;
	transform: translate(-1.5em, 0);
}
.intvToc-wrap{
	padding-top: 50px;
	text-align: center;
}
.intvSuggest.l-height{
	padding-top: 75px;
}
.intv-.el-crumbsList{
	justify-content: center;
}
.profConcept-title::before{
	content: "";
	display: block;
	background: url("../img/profile-rock-whitegreen@2x.png") no-repeat center/cover;
	width: 280px;
	height: 230px;
	position: absolute;
	top: 60px;
	left:calc(50% - 280px / 2);
	opacity: 0.5;
}
.profProf-title::before{
	content: "";
	display: block;
	background: url("../img/profile-rock-lightgreen@2x.png") no-repeat center/cover;
	width: 300px;
	height: 230px;
	position: absolute;
	top: 40px;
	left:calc(50% - 300px / 2);
	opacity: 0.5;
}
.profFolio-title::before{
	content: "";
	display: block;
	background: url("../img/pofile-rock-white@2x.png") no-repeat center/cover;
	width: 212px;
	height: 300px;
	position: absolute;
	top: 0;
	left:calc(50% - 212px / 2);
}
.profConcept-container{
	display: flex;
	flex-direction: column;
	text-align: center;
}
.profConcept-name{
	order: 1;
}
.profConcept-catch{
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-size: clamp(40px, 7vw, 48px);
	min-height: 0;
	position: relative;
}
.profConcept-catch span:nth-of-type(1){
	font-size: 30px;
	position: absolute;
	transform: translate(-2em,0)
}
.profConcept-catch span:nth-of-type(2){
	font-size: 30px;
	position: absolute;
	transform: translate(0.5em,1em)
}
.profConcept-text, .profConcept-name, .profProf-text{
	font-size: var(--fzMd);
	min-height: 0;
	font-family: "Klee One", cursive;
	font-weight: 400;
	margin-top: 50px;
}
.profProf-img{
	width: min(80%, 350px);
	margin: 0 auto 50px;
}
.profProf-text{
	max-width: 31em;
	margin: 0 auto;
}
.profProf-accessContainer{
	margin-top: 50px;
	margin-inline: auto;
	padding: 20px;
	width: fit-content;
	background: var(--whiteMainColor);
	display: flex;
	gap: 30px;
}
.profProf-accessList{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px; 
}
.profProf-accessItem{
	padding: 0 10px;
	font-weight: 400;
}
.profProf-accessItem:nth-of-type(1){
	padding: 5px;
	width: calc((768px - 100px) / 3 );
	background: var(--mainColor);
	color: #fff;
	text-align: center;
}
.profProf-accessImg{
	display: revert;
	margin-right: 10px;
}
.profFolio-tagList{
	display: flex;
	justify-content: center;
	gap: 20px;
}
.profFolio-photoWrap{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-top: 50px;
}
.contactWrap{
	margin: 0 auto;
	text-align: center;
	height: 1200px;
}
/* aaaaaaaaaaaaa */
.blog.l-height{
	padding-top: 50px;
}
.blog.l-width{
	width: min(768px, 95%);
}
.date{
	text-align: end;
}
.shop_intro{
	padding: 35px 0 15px;
}
.flex_img{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.img{
	border-radius: 5px;
}
.product{
    padding:1.5%;
    margin-top:100px;
    background-color: var(--whiteMainColor);
}
.product p{
    margin:0 0 5px 0;
}
.product th{
	font-weight: 400;
}
.product td{
    padding:0 0 0 2em;
    text-align: end;
    width:10em;
}
.shop_info{
    border:solid 1px var(--lightMainColor);
    padding:1.5%;
	margin-top: 30px;
}
.shop_info h2{
    margin:0 0 5px 0;
}
.shop_info td{
    padding-left: 2em;
}
.shop_info th{
    text-align: justify;
    text-align-last:justify;
    width:4.5em;
	font-weight: 400;
}
.card-grid {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* 高さがないとposition:absoluteが効かない */
  overflow: hidden;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  transition: opacity 1s ease;
  z-index: 0;
}

.active_card {
  opacity: 1;
  z-index: 5;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card figure {
  margin: 0;
  text-align: center;
}
.gallarytitle{
	font-size: var(--fzLg);
	padding-top: 50px;
}

@media(max-width: 500px){
	.flex_img{flex-direction: column;}
	.headerGnav-list{
		flex-direction: row;
	}
	.topConcept-el-share .el-share-text{
		display:none;
	}
	.topConcept-el-share .el-share-iconList{
		display: none;
	}
	.article-.el-share{
		margin-top: 20px;
		margin-inline: auto;
	}
	.article- .el-crumbsList{
		display: grid;
		grid-template-columns: repeat(3, auto) 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.article- .el-crumbsItem:last-child{
		grid-column: 1 / 5 ;
		grid-row: 2; 
	}
	.intv-.el-crumbsList{
		display: flex;
	}
	.profFolio-photoWrap{
		grid-template-columns: repeat(1, 1fr);
	}
}
@media(max-width: 960px){
	.topProf-wrap{
		flex-direction: column;
	}
	#zoomback{
		display: none;
	}
	.profProf-accessContainer{
		flex-direction: column;
		width: 100%;
		text-align: center;
	}
	.profProf-accessItem:nth-of-type(1){
		width: 100%;
	}
}
@media(min-width: 961px){
	.zimg{
		cursor:pointer;
	}
	.zimg:hover{
		opacity: 0.7;
	}
	#zoomimg{
		width: min(80%, 1440px);
	}
	#zoomback{
		visibility: hidden;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background:rgb(0,0,0,0.7);
		display:flex;
		justify-content:center;
		align-items:center;
		z-index: 20;
	}
}