@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&family=Oswald:wght@400;700&family=Zen+Old+Mincho:wght@600;900&family=Average&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho&display=swap');

/*Reset
---------------------------------------------------------------------*/
/*html, body, div, span, object, iframe,*/
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-style: normal;
  background: transparent;
}

article, nav, section, header, footer, aside, main {
  display: block;
}

* {
  box-sizing: border-box;
}

*:after, *:before {
  box-sizing: border-box;
}

nav ul,
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  line-height: 0;
  border: none;
  max-width: 100%;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --main-rgb:51,51,51;
  --red-rgb:239,12,12;

  /*
  --font-sans: "Roboto", "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic , "メイリオ", Meiryo, sans-serif;
  --font-serif: "Zen Old Mincho" ,"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  */
  --font-sans: "新ゴ R", "Roboto", "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic , "メイリオ", Meiryo, sans-serif;
  --font-serif: "Average", "リュウミンR-KL", "Ryumin Regular KL", "游明朝", "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

  --header-height:100px;
  --header-height-fixed:80px;
  --header-height-sp:70px;
}

/*共通
---------------------------------------------------------------------*/
html {
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

.inner {
  width: 96%;
  margin:0 auto;
  padding:0 5%;
}
@media screen and (min-width: 768px) and (orientation: portrait) {
  .inner {
    max-width: 720px;
  }
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 1280px;
  }
}

/*body
---------------------------------------------------------------------*/
body {
  margin: 0px;
  padding: 0px;
  background-color: #FFF;
  color: rgb(51, 51, 51);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-family: var(--font-serif);
  overflow-wrap: break-word;
}

/*wrapper
---------------------------------------------------------------------*/
#wrapper {
  margin: 0px;
  padding: 0px;
  height: 100%;
  position: relative;
}

#overlay {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  background-color: rgb(255, 255, 255);
}
#overlay.open {
  opacity: 1;
  visibility: visible;
}

/*header
---------------------------------------------------------------------*/
#header {
  width: 100vw;
  overflow: hidden;
  margin: 0 0 0 0;
  padding: 5px 0;
  z-index: 100;
  position: fixed;
  top: 0;
  background-color: rgb(255, 255, 255);
  transition: all 0.5s;
  height: var(--header-height-sp);
}
@media screen and (min-width: 768px) {
  #header {
    height: var(--header-height);
  }
}
#header .header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
  padding: 0px 2% 0;
}
@media screen and (min-width: 768px) {
  #header .header_inner {
    padding: 0px 5% 0;
  }
}
#header #headerlogo {
  transition: all 0.5s;
  margin: 0;
  z-index: 100;
  width: 200px;
}
@media screen and (min-width: 768px) {
  #header #headerlogo {
    width: 320px;
  }
}
#header.headerfixed {
  height: var(--header-height-sp-fixed);
}
@media screen and (min-width: 768px) {
  #header.headerfixed {
    height: var(--header-height-fixed);
  }
}
@media screen and (min-width: 768px) {
  #header.headerfixed #headerlogo {
    width: 240px;
  }
}

/*タブレット　スマホ　メニュー*/
@media screen and (max-width: 1280px) {
	#menu_btn {
	position: relative;
	cursor: pointer;
	padding: 0 0px;
	width: 50px;
	height: 50px;
	z-index: 25;
	overflow: hidden;
	text-align: center;
	color: rgb(var(--main-rgb));
	}
	#menu_btn span {
	display: inline-block;
	transition: all 0.4s;
	position: absolute;
	left: 14px;
	height: 2px;
	border-radius: 5px;
	width: 45%;
	background: rgb(var(--main-rgb));
	}
	#menu_btn span:nth-of-type(1) {
	top: 14px;
	}
	#menu_btn span:nth-of-type(2) {
	top: 23px;
	}
	#menu_btn span:nth-of-type(3) {
	top: 32px;
	}
	#menu_btn.active {
	color: rgb(var(--main-rgb));
	}
	#menu_btn.active span:nth-of-type(1) {
	top: 15px;
	left: 14px;
	transform: translateY(9px) rotate(-135deg);
	}
	#menu_btn.active span:nth-of-type(2) {
	opacity: 0;
	}
	#menu_btn.active span:nth-of-type(3) {
	top: 33px;
	left: 14px;
	transform: translateY(-9px) rotate(135deg);
	}


	#mainnavi {
	display: none;
	}

	#mainnavi.active {
	background-color: #DDD;
	z-index: 20;
	height: 100vh;
	width: 100vw;
	padding: var(--header-height-sp) 0;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	#mainnavi.active {
	opacity: 1;
	visibility: visible;
	}
	#mainnavi.active ul {
	margin: 0 0 30px;
	text-align: center;
	}
	#mainnavi.active li {
	margin: 0;
	padding: 0 0;
	font-size: 1rem;
	}
	#mainnavi.active li a {
	display: block;
	padding: 1rem;
	text-decoration: none;
	color: rgb(51, 51, 51);
	}
}

/*　PCメニュ*/
@media screen and (min-width: 1281px) {
  #menu_btn {
	display:none;
  }
  #mainnavi {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    flex-grow: 2;
    gap: 10px;
	font-family:var(--font-sans);
  }
  #mainnavi .mainmenu {
    display: flex;
    position: relative;
    text-align: center;
    justify-content: end;
    gap: 2em;
  }
  #mainnavi .mainmenu > li {
    margin: 0;
    font-size: clamp(0.8rem, 0.6378435518rem + 0.422832981vw, 0.9rem);
    font-weight: normal;
    position: relative;
  }
  #mainnavi .mainmenu > li a {
    padding: 0px 0 20px;
    position: relative;
    color: rgb(51, 51, 51);
	background-color:#FFF;
    position: relative;
  }
  #mainnavi .mainmenu > li a:after {
	display:block;
	content:'';
	width:100%;
	height:0px;
	background: url(../img/nav.svg) no-repeat bottom center;
	background-size:150px;
	position:absolute;
	bottom:20px;
	left:0;
	transition: ease 0.2s;
  }
}

#body_about .mainmenu li.navi_about a:after,
#body_project .mainmenu li.navi_project a:after,
#body_event .mainmenu li.navi_event a:after,
#body_contact .mainmenu li.navi_contact a:after,
#mainnavi .mainmenu li a:hover:after{
	bottom:0px;
	height:20px;
}


/*main
---------------------------------------------------------------------*/
#main {
  padding: 0px 0 0 0;
  position: relative;
  background-color: rgb(255, 255, 255);
  margin-top: var(--header-height-sp);
}
@media screen and (min-width: 768px) {
  #main {
    margin-top: var(--header-height);
  }
}



/*footer
---------------------------------------------------------------------*/
#footer {
  margin:0;
  background:url(../img/footer.jpg) no-repeat center;
  background-size:cover;
  padding:calc(7% + 20px) 0 20px;
  position: relative;
  font-size: 0.9rem;
  overflow:hidden;
}
#footer h2{
  margin:0 0 30px;
}
#footer h2 img{
  width:60%;
  max-width:360px;
}
#footer p#copyright {
  margin:0;
  padding: 0px 0px;
  text-align: right;
}
@media screen and (max-width: 767px) {
	#footer h2,#footer p#copyright{
		text-align: center;
	}
}

/*common
---------------------------------------------------------------------*/
#topmainimage {
  position: relative;
  background: url(../img/title.jpg) no-repeat center center;
  background-size:cover;
}
#topmainimage .inner{
	padding:2em 0;
}
#main h1 {
  font-size: clamp(1.4rem, 3vw, 3rem);
  margin: 0em 0 1rem;
  text-align:center;
  font-weight:normal;
  letter-spacing: 0.1em;
}
body:not(#body_top) #topmainimage p{
  text-align:center;
}
#maincol {
  z-index: 10;
  position: relative;
  padding: 0px 0 calc(7% + 20px) 0;
  background: url(../img/line.svg) no-repeat top center;
  background-size:100%;
}
@media screen and (max-width: 767px) {
	#maincol {
		background-size:200%;
	}
}

#maincol article {
  margin:0px 0;
  padding:calc(7% + 20px) 0;
}
body:not(#body_top) #maincol article:not(:first-child){
	border-top:2px dotted rgb(var(--main-rgb),.5);
}


#maincol h2 {
  font-size: clamp(1.2rem, 0.5513742072rem + 1.6913319239vw, 1.6rem);
  margin: 0 0 1em 0;
}

#maincol h3 {
  margin: 2em 0 0.75em;
  padding: 0 0 0;
  font-size: clamp(1.1rem, 0.2202959831rem + 1.9027484144vw, 1.4rem);
  line-height: 1.2;
  position: relative;
}

p {
  margin: 0 0 1em;
}
.center {
  text-align: center !important;
}

.txtleft {
  text-align: left !important;
}

.txtright {
  text-align: right !important;
}

.small {
  font-size: 80%;
}

.large {
  font-size: 120%;
}

strong {
  font-weight: bold;
  font-size: 110%;
}

em, .red {
  color: rgb(var(--red-rgb));
}

a {
  text-decoration: none;
  color: rgb(var(--red-rgb));
  transition: ease 0.2s;
}
a:hover {
  color: rgb(var(--main-rgb));
}
a img {
  transition: ease 0.2s;
}
a:hover img {
  opacity: 0.8;
}

.linkbutton{
  line-height: 0;
}

.linkbutton a{
  line-height: 1.2;
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 1em 1.5em;
  color: rgb(var(--main-rgb));
  border: solid 2px rgb(var(--main-rgb));
  border-radius: 5px;
  min-width: 50%;
  overflow: hidden;
  z-index: 1;
}
.linkbutton a:hover {
	color: #fff;
}
.linkbutton a::before,
.linkbutton a::after {
	content: "";
	position: absolute;
	transition: all .3s;
}
.linkbutton a::before {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--main-rgb));
	transform: translateX(-100%);
	z-index: -1;
}
.linkbutton a:hover::before {
	transform: translateX(0);
}
.linkbutton a::after {
  height:0.8rem;
  width:0.8rem;
  right: 5%;
  top: 50%;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpolygon points="16.6 0 13.6 3.3 24.1 12.4 0 12.4 0 17 24.1 17 13.6 26.1 16.6 29.3 32 15.1 32 14.3 16.6 0" fill="black" /%3E%3C/svg%3E') no-repeat;
  transform: translate(-50%, -50%);
}
.linkbutton a:hover::after {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpolygon points="16.6 0 13.6 3.3 24.1 12.4 0 12.4 0 17 24.1 17 13.6 26.1 16.6 29.3 32 15.1 32 14.3 16.6 0" fill="white" /%3E%3C/svg%3E') no-repeat;
}

table{
	border-collapse:collapse;
	margin:0 0 1em;
}
table th,table td{
	padding:0.25em 1em;
	text-align:left;
	vertical-align:top;
}
table th{
	vertical-align:top;
	white-space:nowrap
}
table td{
	
}
.top_shokai table td{
	padding:0.25em 1em 0.25em 0;
}
@media screen and (max-width: 767px) {
	table tr{
		border-bottom:1px dotted rgb(var(--main-rgb) ,.2);
	}
	table th,table td{
		padding:0.25em 0.5em;
		display:block;
	}

}

/*TOPページ*/
#topmainimage #mainimage img{
  overflow: hidden;
  z-index: 1;
  position: relative;
  line-height:.1;
}
#topmainimage #mainimage img.mainimage{
  display: block;
  width: 100vw;
  object-fit: cover;
  position: relative;
}
#topmainimage #mainimage p{
  position:absolute;
  z-index:10;
  margin:0;
  line-height:1;
}
#topmainimage #mainimage p.maintext{
  top:10%;
  left:0;
  text-align:center;
  width:100%;
  mix-blend-mode:difference;
}
#topmainimage #mainimage p.maintext img{
  margin:auto;
}
#topmainimage #mainimage p.photographer{
  bottom:-1.5em;
  right:1em;
  color:#0e0e0e;
}
@media screen and (min-width: 768px) {
  #topmainimage img.mainimage {
  }
}
@media screen and (max-width: 767px) {
  #topmainimage img.mainimage{
  }
}


#maincol h1.top_h1 {
  margin: 1em 0.5em 1em;
  padding: 0;
  color: rgb(51, 51, 51);
  position: relative;
  text-align: center;
  border: 0;
  line-height:1;
  letter-spacing: 0;
}
#maincol h1.top_h1 span{
  display:inline-block;
  background: url(../img/h1.svg) no-repeat left bottom;
  background-size:960px;
  padding:0 0 5px 90px;
}
#maincol h1.top_h1 strong{
  font-size:clamp(2.25rem, 1.432rem + 4.09vw, 4.5rem);
  letter-spacing: 0.25em;
  color: transparent;
  background-image: url(../img/h1.png);
  background-size: cover;
   -webkit-background-clip: text;
  font-weight: 100;
}
#maincol h1.top_h1 small {
  display:inline-block;
  padding: 0 1em 0 0;
  margin-bottom: 1em;
  font-weight: normal;
  font-size: 0.95rem;
  color: rgb(var(--main-rgb));
}
@media screen and (max-width: 767px) {
	#maincol h1.top_h1 {
	}
	#maincol h1.top_h1 span{
		background-size:640px;
		display:flex;
		flex-direction:column;
		padding:0 0 15px 40px;
	}
	#maincol h1.top_h1 strong{
		order:2;
	}
	#maincol h1.top_h1 small{
		order:1;
	}
}

#maincol h2.top_h2 {
  font-size:clamp(1.5rem, 0.818rem + 3.41vw, 3.375rem);
}
#maincol h2.top_h2 small{
  font-size:1rem;
  font-weight:normal;
}
@media screen and (max-width: 767px) {
	/*#topabout{
		background:url(../img/metabo.png) no-repeat 100% 5%;
		background-size:45px;
		background-color:rgba(255,255,255,0.9);
		background-blend-mode:lighten;
		}*/
	.top_shokai{
		margin:0 1em 0em;
	}
}
@media screen and (min-width: 768px) {
	/*#topabout{
		background:url(../img/metabo.png) no-repeat 100% 5%;
		background-size:75px;
	}*/
	.top_shokai{
		margin:0 90px 0em;
	}
}

.large_txt {
  font-size:clamp(1.5rem, 0.818rem + 3.41vw, 3.375rem);
}
.large_txt strong{
	font-size:150%;
	font-weight:normal;
	letter-spacing:0.1em;
	margin-left:-5%;
}
.about_list{
	list-style:none;
	margin:0 0 4em;
	padding:0;
}
.about_list li{
	margin:0 0 2em;
	padding:0;
	text-align:center;
	max-width:100%;
	/*max-height:100%;*/
}
.about_list img{
	margin:auto;
	display:block;
	object-fit:contain;
	max-width:680px;
	max-height:600px;
}
@media screen and (max-width: 767px) {
	.about_list img{
		max-width:320px;
		max-height:320px;
	}
}

.profile{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1em;
	flex-wrap: wrap;
}
.profile .photo{
	max-width:240px;
	flex-shrink:0;
}
/*.profile .photo-w{
	display: block;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	font-size: 80%;
}
.profile .photo-w img{
	width: 100%;
}*/
.profile .photo-w2{
	display: flex;
	justify-content:center;
	width: 100%;
	margin-top: 1em;
	font-size: 80%;
}
.profile .photo-w2 span {
	max-width: 360px;
	text-align: center;
}
.profile .photo-w2 img{
	max-width: 100%;
	max-height: 240px;
}
.profile .photo-w2 span:last-of-type img{
	margin-left: 1em;
}
@media screen and (max-width: 767px) {
	.profile{
		flex-direction:column;
	}
	/*.profile .photo-w{
		max-width: 100%;
		font-size: 100%;
	}*/
	.profile .photo-w2 {
		flex-wrap: wrap;
		font-size: 100%;
	}
	.profile .photo-w2 span:last-of-type img{
		margin-left: 0;
	}
}
.project_list{
	list-style:none;
	margin:0 0 4em;
	padding:0;
}
.project_list li{
	margin:0 0 1em;
	padding:0;
}
.project_list a{
	display:flex;
	font-size:1.2em;
	color:rgb(var(--main-rgb));
	border:solid 1px currentColor;
	padding:1em;
	gap:1em;
	align-items:center;
}
.project_list a:hover{
	color:rgb(var(--red-rgb));
}
.project_list span.date{
	font-size:1rem;
	flex-shrink:0;
}
@media screen and (max-width: 767px) {
	.project_list a{
		flex-direction:column;
	}
}


#topcontact{
}
#topcontact{
  background: url(../img/contact.jpg) no-repeat center center;
  background-size:cover;
}






#kanrenevent img{
	margin:auto;
	display:block;
	object-fit:contain;
	max-width:680px;
	max-height:600px;
}
@media screen and (max-width: 767px) {
	#kanrenevent img{
		max-width:320px;
		max-height:320px;
	}
}




/**/
.iframe {
  margin: 30px auto;
}
.iframe iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-width: 960px;
  display: block;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

/*-----*/
#jce {
	padding-bottom: 0 !important;
}
#jce img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 240px;
	height: auto;
}
@media screen and (max-width: 767px) {
	#jce {
	}
}

ul.link_list {
	width: 100%;
	margin: 0;
}
.link_list a {
	color: rgb(51, 51, 51);
}
.link_list a:hover {
	color: rgb(var(--red-rgb));
}

/*-----*/