@charset "utf-8";


.fonts{
	font-family: "Oswald", serif;
	font-family: "Zen Old Mincho", serif;
  font-family: "BIZ UDPGothic", serif;
  font-family: "Reddit Sans", serif;
  }
  


html {
	scroll-behavior: smooth;
	font-family: sans-serif;
	font-family: "BIZ UDPGothic", serif;
	/* font-weight: 300; */
}
input, select {
	/* -webkit-appearance: none;
	appearance: none; */
	/* border: 1px solid #000;
	border-radius: 0px; */
}
h1,h2,h3,menu,p{
	margin: 0;
	padding: 0;
	font-weight: normal;
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

body {
	padding:0;
	margin: 0 auto;
	background-color: #ccd6d0;
	overflow-x: hidden;
}
p{
	text-align: justify;
}
menu{
	margin: 0;
	padding: 0;
}

div#olmenu{
	display: none;
}
div#hbg{
	display: none;
}



/* Header */

header{
	background-color: transparent;
	background-color: #ffffff55;
	backdrop-filter: blur(2px);
	padding: 10px 30px;
	border-radius: 40px;
	margin: 20px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	transition: all .3s ease;
	font-family: "Reddit Sans", sans-serif;

	position: fixed;
	top: 0;
	width: calc(100% - 40px);
	box-sizing: border-box;
	z-index: 1000;
}

header h1.hlogo{
	font-size: inherit;
	display: block;
	width: 120px;
	height: 40px;
	background-image: url(../img/logo.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
header h1.hlogo>a{
	display: block;
	height: 100%;
	width: 100%;
}
header h1.hlogo>a>span{
	display: none;
}

header>menu{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
header>menu ul{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	gap: 1em;
	padding: 0 1em;
	font-weight: 200;
}
header>menu ul a{
	text-decoration: none;
	color: #222;
	font-weight: bold;
	display: flex;
	background-color: transparent;
	padding: 3px 9px;
	transition: all .3s ease;
}
header>menu ul a:hover{
	background-color: #fff;
	border-radius: 9999px;
}

header>div>div.tel{
	display: flex;
	flex-flow: column;
	height: 100%;
	justify-content: center;
	align-items: center;
	gap: 4px;
}
header>div>div.tel>div.txt{
	font-family: "BIZ UDPGothic", serif;
	font-size: 1.2em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url(../img/logo_t.svg);
}
header>div>div.tel>div.txt>span{
	opacity: 0;
}
header>div>div.tel>div.num{
	font-size: 1.2em;
	line-height: 100%;
	font-weight: 400;
}


/* MV */
div.dummy{
	height: 100px;
	background-color: #fafafa;
}


div.mvWrapper{
	height:clamp( 250px, 550 /1024 * 100vw, 600px);
	width: 100%;
	/* background-color: #fff; */
	/* background-image: url(../img/cut1.jpg); */
	background-repeat: no-repeat;
	background-size: cover;
	/* border-top: #fff solid 100px; */
	/* margin-bottom: clamp(.5rem, 80 /1024 * 100vw, 250px); */
}
div.mvWrapper>div.mv{
	height:clamp( 250px, 450 /1024 * 100vw, 450px);
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	/* background-color: #ddd; */
}

div.mvWrapper>div.mv>div.img{
	width: 60%;
	height: 100%;
	background-image: url(../img/cut1.jpg);
	background-size: cover;
	background-position: center top;
	border-radius: 0 0 0 100px;
}
div.mvWrapper>div.mv>div.txt{
	width: clamp( 200px, 400 /1024 * 100vw, 400%);
	height: 100%;
	padding-top: clamp( 10px, 60 /1024 * 100vw, 60px);
	padding-right: clamp( 10px, 40 /1024 * 100vw, 40px);
	padding-bottom: 0;
	padding-left: clamp( 5px, 20 /1024 * 100vw, 20px);


	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
}

div.mvWrapper>div.mv>div.txt>h2{
	font-size: 3em;
	font-family: "Zen Old Mincho";
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	border-left: #00000022 solid 1px;
	z-index: -1;
	font-size: clamp(.5rem, 40 /1024 * 100vw, 5rem);
}
div.mvWrapper>div.mv>div.txt>div{
	padding-top: 20px;
}
div.mvWrapper>div.mv>div.txt>div>h3{
	font-size: 1.7em;
	line-height: 140%;
	font-weight: 700;
	margin-bottom: 20px;
	color: #035f28;
	font-size: clamp(.5rem, 26 /1024 * 100vw, 2.4rem);
}
div.mvWrapper>div.mv>div.txt>div>p{
	font-size: .95em;
	line-height: 160%;
	margin:1em 0;
	font-size: clamp(.5rem, 14 /1024 * 100vw, 2rem);
}






main{
	background-color: #f2f2f2;
	padding-bottom: calc(100/1024*100vw);
	padding-top: 1px;
}


/* News */

section.newslists{
	background-color: #fafafa;
	padding-top: clamp(10px, 40 / 1024 * 100vw, 100px);
	padding-right: 0;
	padding-bottom: clamp(10px, 40 / 1024 * 100vw, 100px);
	padding-left: 0;
	box-shadow: 0 0 20px -10px #00000022;
	margin-bottom: clamp(10px, 80 / 1024 * 100vw, 80px);
}
section.newslists>div{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: start;
	gap: clamp(.5rem, 20 / 1024 * 100vw, 2rem);
	max-width: 800px;
	margin: 0 auto;

}
section.newslists>div>h2{
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(.5rem, 40 /1024 * 100vw, 2rem);
	line-height: 100%;
	position: relative;
	top: -0.2em;
	z-index: 1;
}

section.newslists>div>div>a{
	margin: 1em ;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	font-size: clamp(.5rem, 13 /1024 * 100vw, 2rem);
	gap: clamp(.5rem, 16 /1024 * 100vw, 2rem);
}
section.newslists>div>div>a>span.date{
	color: #777;
	font-size: .84em;
}

section.newslists>div>div>a>span.title{
	color: #000;
	font-weight: bold;
}




/* Common Section*/

section.common{
	/* background-color: #ffffff55; */
	padding-right: clamp(1px, 16 /1024 * 100vw, 2rem);
	padding-left: clamp(1px, 16 /1024 * 100vw, 2rem);
	margin-top: calc(100 /1024 * 100vw);
}
section.common>div{
	display: flex;
	flex-flow: row;
	flex-grow: 1;
}
section.common>div>div.title{
	width: clamp(16%, 158 /1024 * 100vw, 20%);
	box-sizing: border-box;
	writing-mode: vertical-rl;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding-left: clamp(1px, 15 /1024 * 100vw, 2rem);
}
section.common>div>div.title>h2{
	padding-left: clamp(1px, 25 /1024 * 100vw, 2rem);
}
section.common>div>div.title>h2>span.pre{
	display: block;
	font-size: clamp(1px, 13 /1024 * 100vw, 2rem);
	margin-left: 0.1em;
}
section.common>div>div.title>h2>span.main{
	display: block;
	font-size: clamp(1px, 36 /1024 * 100vw, 10rem);
	font-family: "Zen Old Mincho", serif;
	background: linear-gradient(
		to right,
		transparent 0%,
		transparent 10%,
		#e8ff66cc 10%,
		#e8ff66cc 40%,
		transparent 40%,
		transparent 100%
	);
}

section.common>div>div.title>p{
	font-size: clamp(1px, 13 /1024 * 100vw, 2rem);
	line-height: 140%;
}

/* featured */

section.common.featured>div>div.content{
	box-sizing: border-box;
	width: clamp(70%, 834 /1024 * 100vw, 85%);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	border-bottom: 1px solid #000000;
	padding-bottom: calc(100 / 1024 * 100vw);
}
section.common.featured>div>div.content>div{
	width: clamp(20px, 400/1024 * 100vw, 600px);
	height: clamp(20px, 400/1024 * 100vw, 600px);

	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: stretch;

	border-radius: 0 20px 0 20px;
	overflow: hidden;
	background-color: #ffffff55;

	box-shadow: 0 0 ;
}
section.common.featured>div>div.content>div>div.img{
	height: 65%;
	background-color: #035f28;
	box-sizing: border-box;
}
section.common.featured>div>div.content>div>div.txt{
	height: 35%;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: clamp(1px, 16 /1024 * 100vw, 2rem);
}
section.common.featured>div>div.content>div>div.txt>h3{
	font-size: clamp(1em, 26 /1024 * 100vw, 36px);
	margin-bottom: calc( 10 /1024 * 100vw);
	font-weight: bold;
	color: #222;
}
section.common.featured>div>div.content>div>div.txt>p{
	font-size: clamp(.6em, 14 /1024 * 100vw, 22px);
	line-height: 140%;
}





/* introduction */

section.common.introduction>div>div.content{
	box-sizing: border-box;
	width: clamp(70%, 834 /1024 * 100vw, 85%);
	border-bottom: 1px solid #000000;
	padding-bottom: calc(100 / 1024 * 100vw);
}
section.common.introduction>div>div.content>a{
	display: block;
	margin-bottom: 1.6em;
	border:1px solid #777;
	background-color: #fff;
	height: calc(90 /1024 * 100vw);
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 100px;
	padding: 0 calc(60 / 1024 * 100vw);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: all .3s ease;
	opacity: 1;
}
section.common.introduction>div>div.content>a:hover{
	opacity: .9;
}
section.common.introduction>div>div.content>a>span.en{
	color: #00000011;
	font-family: "Zen Old Mincho";
	font-size: calc(90 /1024 * 100vw);
	line-height: 100%;
	position: absolute;
	top: -40%;
	left: 0;
}
section.common.introduction>div>div.content>a>span.ja{
	font-size: calc(24 /1024 * 100vw);
	font-family: "Zen Old Mincho";
	position: absolute;
	top: calc(15 /1024 * 100vw);
	left: calc(40 /1024 * 100vw);
	font-weight: 700;
	transition: all .3s ease;
}
section.common.introduction>div>div.content>a:hover>span.ja{
	left: calc(60 /1024 * 100vw);
}
section.common.introduction>div>div.content>a>p{
	font-size: calc(14 /1024 * 100vw);
	position: absolute;
	top: calc(50 /1024 * 100vw);
	right: calc(45 /1024 * 100vw);
}




/* contact */

section.contact{
	background-color: #3e7554;
	padding-top: calc(40 / 1024 * 100vw);
	padding-bottom: calc(40 / 1024 * 100vw);
	box-shadow: 0 0 20px -10px #000000ff;
}

section.contact>div{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

section.contact>div>h2{
	width: 30%;
	font-size: inherit;
}
section.contact>div>h2>span{
	display: block;
	width: 50%;
	margin: auto;
	color: #e8ff66;
}
section.contact>div>h2>span.en{
	font-size: clamp(1px, 36 /1024 * 100vw, 10rem);
	font-family: "Zen Old Mincho", serif;
}

section.contact>div>h2>span.ja{
	font-size: clamp(1px, 13 /1024 * 100vw, 2rem);
}

section.contact>div>div{
	width: 70%;
	font-size: inherit;
}
section.contact>div>div>p{
	font-size: clamp(1px, 18 /1024 * 100vw, 2rem);
	line-height: 180%;
	color: #ccd6d0;
	text-align: center;
}
section.contact>div>div>div.num{
	color: #fff;
	font-size: clamp(1px, 50 /1024 * 100vw, 100px);
	text-align: center;
	line-height: 140%;
    font-family: "Reddit Sans", sans-serif;
	font-weight: 600;
}
section.contact>div>div>span{
	display: block;
	color: #ccd6d0;
    font-family: "Reddit Sans", sans-serif;
	font-size: clamp(1px, 16 /1024 * 100vw, 2rem);
	text-align: center;
	line-height: 120%;
}
section.contact>div>div>span>span{
	font-size: clamp(1px, 12 /1024 * 100vw, 2rem);
	display: inline-block;
	padding: .1em .3em;
	background-color: #ccd6d0;
	color: #3e7554;
	font-weight: bold;
	line-height: 120%;
	position: relative;
	top: -0.1em;
}






/* レイアウト調整 */

table.overture{
	width: fit-content;
	margin: auto;
	font-size: clamp(12px, 20 /1024 * 100vw, 1em);
}
table.overture tr{

}
table.overture th{
	padding: 1em ;
	text-align: right;
	color: #035f28;
	border-bottom: #00000055 solid 1px;
	font-weight: normal;
}
table.overture td{
	border-bottom: #035f2855 solid 1px;
}


















/* レイアウト調整 */
section.common.end>div>div.content{
	border-bottom-width: 0px;
	margin-bottom: 80px;
}




footer{
	padding-left: calc(20 / 1024 * 100vw);
	padding-right: calc(20 / 1024 * 100vw);
	background-color: #fff;
}
footer>section{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: calc(15 / 1024 * 100vw);
	padding-top: calc(115 / 1024 * 100vw);
	border-bottom: #000 2px solid;
	font-size: calc(14 / 1024 * 100vw);
}
footer>section>menu{
	display: flex;
	flex-flow: row nowrap;
	gap: calc(12 / 1024 * 100vw);
	font-family: '';
	font-weight: 600;
}
footer>section>menu>a{
	text-decoration: none;
	color: inherit;
    font-family: "Reddit Sans", sans-serif;
	padding: .5em 0;
}

footer>section>div.flogo{
	width: calc(80 / 1024 * 100vw);
	height: calc(40 / 1024 * 100vw);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	background-image:url(../img/logo.svg);
}
address{
	font-size: calc(10 / 1024 * 100vw);
	padding-top: calc(20 / 1024 * 100vw);
	padding-bottom: calc(20 / 1024 * 100vw);
	font-style: normal;
}


/* 写真指定 */
#call1{
	background-size: cover;
	background-image: url(../img/call1.jpg);
	background-position: center;
}

#cut2{
	background-size: cover;
	background-image: url(../img/cut2.jpg);
	background-position: center;
}


/*第二階層*/

section.common.featured>div>div.content>div.solo{
    width: 100%;
	height: auto;
    padding: calc(30 /1024 * 100vw);
}
section.common.featured>div>div.content>div.solo>h2{
	margin: 1.2em 0;
	font-size: clamp(14px, 28 / 1024 * 100vw, 1.2rem);
}
section.common.featured>div>div.content>div.solo>h3{
	margin-top: .5em;
	font-size: clamp(12px, 26 / 1024 * 100vw, 1.0rem);
}
section.common.featured>div>div.content>div.solo>p{
	margin: 1em 0;
	line-height: 160%;
	font-size: clamp(10px, 18 / 1024 * 100vw, 0.9rem);
}
section.common.featured>div>div.content>div.solo ul{
	margin: 1em 0;
}
section.common.featured>div>div.content>div.solo ul>li{
	line-height: 160%;
	text-indent: -2em;
	margin-left: 2em;
	font-size: clamp(10px, 18 / 1024 * 100vw, 0.9rem);
}
section.common.featured>div>div.content>div.solo ol{
	width: fit-content;
	margin: 1em auto;
}
section.common.featured>div>div.content>div.solo ol>li{
	line-height: 160%;
	font-size: clamp(10px, 18 / 1024 * 100vw, 0.9rem);
}



@media screen and (max-width:1023px) {

	div.mvWrapper>div.mv>div.img{
		width: 50%;
	}
	div.mvWrapper>div.mv>div.txt{
		width: 50%;
	}

	div.mvWrapper>div.mv>div.txt>div>h3{
		font-size: clamp(.5rem, 36 /1024 * 100vw, 2.4rem);
	}
	div.mvWrapper>div.mv>div.txt>div>p{
		font-size: clamp(.5rem, 18 /1024 * 100vw, 2rem);
	}
	
	section.news>div {
		margin: 0 1em;
	}

	section.newslists>div{
		margin: 0 1em;
	}
}


@media screen and (max-width:768px) {

	header>menu ul {
		font-size: .84em;
	}

}


@media screen and (max-width:700px) {

	header>menu ul {
		font-size: .84em;
	}

	header>div {
		display: none;
	}

	header>menu {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}


	table.overture{
		width: fit-content;
		margin: auto;
		font-size: calc(26 /1024 * 100vw);
	}
}


@media screen and (max-width:600px) {


	div.dummy {
		height: 70px;
	}

	header{
		margin: 10px;
		padding: 10px 15px;
		width: calc(100% - 20px);
	}

	header h1.hlogo {
		width: 60px;
		height: 30px;
		background-position: center;
	}
	header>menu{
		justify-content: space-between;
		width: 100%;
	}
	header>menu ul {
        font-size: calc(10/425*100vw);
		gap: .5em;
    }
	header>menu ul a {
		padding: 3px 5px;
	}


}










@media screen and (max-width:500px) {




	
	div.mvWrapper{
		height:clamp( 250px, 2048 /1024 * 100vw, 600px);
		width: 100%;
	}
	div.mvWrapper>div.mv{
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		justify-content: space-between;
	}
	div.mvWrapper>div.mv>div.img{
		width: 100%;
		height: 100%;
		background-image: url(../img/cut1.jpg);
		background-size: cover;
		background-position: center top;
		border-radius: 0 0 0 100px;
	}
	div.mvWrapper>div.mv>div.txt{
		width: clamp( 200px, 1024 /1024 * 100vw, 400%);
		height: 100%;
	}

	div.mvWrapper>div.mv>div.txt>div>h3 {
        font-size: clamp(.5rem, 26 / 425 * 100vw, 2.4rem);
    }
	div.mvWrapper>div.mv>div.txt>div>p {
        font-size: clamp(.5rem, 14 / 425 * 100vw, 2.4rem);
	}

	div.mvWrapper>div.mv>div.txt>h2 {
		padding-top: 1em;
	}

	section.common>div>div.title {
		width: clamp(30%, 150 / 425* 100vw, 20%);
	}
	section.common>div>div.title>h2>span.pre {
        font-size: clamp(.5rem, 12 / 425 * 100vw, 2.4rem);
	}
	section.common>div>div.title>h2>span.main {
        font-size: clamp(.5rem, 20 / 425 * 100vw, 2.4rem);
	}
	section.common>div>div.title>p {
		font-size: clamp(1px, 13 / 425* 100vw, 2rem);
		line-height: 140%;
	}
	section.common.featured>div>div.content {
		width: clamp(70%, 275 / 425* 100vw, 100%);
		gap: clamp(1px, 13 / 425* 100vw, 2rem);
	}
	section.common.featured>div>div.content>div {
		width: clamp(20px, 275 / 425* 100vw, 600px);
		height: clamp(20px, 275 / 425* 100vw, 600px);
	}
	section.common.introduction>div>div.content>a {
		height: calc(60/ 425* 100vw);
	}
	section.common.introduction>div>div.content>a>span.ja {
		font-size: calc(20 / 425* 100vw);
		top: calc(5 / 425* 100vw);
	}
	section.common.introduction>div>div.content>a>p {
		font-size: calc(12 / 425* 100vw);
		position: absolute;
		top: calc(34 / 425* 100vw);
		right: calc(20 / 425* 100vw);
	}
	section.common.featured>div>div.content>div>div.txt>h3 {
		font-size: calc(18 / 425* 100vw);
		margin-bottom: calc(4 / 425* 100vw);
	}
	section.common.featured>div>div.content>div>div.txt>p {
		font-size: calc(9 / 425* 100vw);
		line-height: 140%;
	}

	section.contact>div{
		flex-flow: column;
	}
	section.contact>div>h2{
		width: 100%;
	}
	section.contact>div>div{
		width: 100%;
	}
	section.contact>div>h2>span.ja{
		text-align: center;
		font-size: 1rem;
	}
	section.contact>div>h2>span.en{
		text-align: center;
		font-size: 2rem;
	}
	section.contact>div>div>p{
		font-size: 1em;
	}
	section.contact>div>div>div.num{
		font-size: 1.8em;
	}
}



@media screen and (max-width:400px) {

	


	




}
@media print{
	header{
		position: absolute;
	}

}