@charset "UTF-8";
/* CSS Document */
html{margin-top: 0 !important;}
body{
	font-size: 14px;
  color: #000;
	line-height: 2;
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	width: 100%;
	height: auto;
	margin: 0px;
  background: #737371;
}
h1,h2,h3,h4,h5,p,ul,ol,li,img,table,th,td,dl,dt,dd{margin: 0px;padding: 0px;font-size: 14px;}
li{list-style-type: none;}
table{border-collapse: collapse;}
a{cursor: pointer;color: #333;text-decoration: none;transition: opacity .2s cubic-bezier(.210, .60, .350, 1);}
img{vertical-align: top;border: 0;max-width: 100%;height: auto;}
a img{vertical-align: bottom;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;}
input[type="text"] {line-height: 1.5;}
button {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 0;border: none;background-color: transparent;cursor: pointer;}
select {box-sizing: border-box;white-space: nowrap;}
::selection{background: #000;color: #fff;}

#wrap{
  position: relative;
  background: #fff;
  padding-top: 115px;
}
.spOnly{display: none;}
@media only screen and (max-width:768px) {
#wrap{
  padding-top: 61px;
}
.spOnly{display: block;}
.pcOnly{display: none;}
}

/*------------------------------------------------------------
	header
------------------------------------------------------------*/
header{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  background: #fff;
  transition: background .2s cubic-bezier(.210, .60, .350, 1);
}
header .inner {
  display: flex;
  align-items: center;
  gap:50px;
}
header .inner p{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
}
header .inner p span{
  display: block;
  font-family: "Shippori Mincho", serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
}
header .inner p span > span{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9px;
}
header.scroll{
  background: #fff;
}
header .logo{
  padding: 50px 0 40px 80px;
}
header .logo a{
  display: block;
  width: 200px;
  height: 25px;
  text-indent: -99999px;
  background-image: url("/img/common/logo_infill_blk.svg");
	background-repeat: no-repeat;
	background-position: center;
  background-size: 100%;
}
header #navi {
    padding: 47px 0 33px 0;
	min-height: 25px;
}
header #navi ul {
	display: flex;
	gap:  0px 40px;
    padding-right: 100px;
	flex-wrap: wrap;
}
header #navi ul li {
  transition: opacity 0.3s ease;
}
header #navi ul li:hover {
	opacity: 0.5;
}
header #navi ul a {
	font-weight: bold;
    font-size: 16px;
}
header ul li.mail {
}
header ul li.mail a{
  display: block;
  width: 30px;
	margin-top: -4px;
}
@media only screen and (max-width:1450px) {
header .inner {
  gap:20px;
}
header .logo{
  padding: 50px 0 40px 40px;
}
header .logo a{
  width: 150px;
  height: 25px;
}
header #navi ul {
	gap:  0px 20px;
}
header .inner p span{
  font-size: 22px;
}
}

@media only screen and (max-width:1180px) {
header #navi {
    display: none;
}
}
@media only screen and (max-width:768px) {
header .inner {
  gap:20px;
  padding-right: 50px;
}
header .logo{
  padding: 22px 0 22px 20px;
}
header .logo a{
  width: 136px !important;
  height: 17px !important;
}
header .inner p{
  font-size: 9px;
}
header .inner p span{
  font-size: 20px;
}
header .inner p span > span{
	margin-top: -2px;
}

}




/*------------------------------------------------------------
	scroll
------------------------------------------------------------*/
head,#main {
  opacity: 0;
  transition: opacity 2s ease-out, transform 2s ease-out;
}
head.scroll, #main.scroll{
  opacity: 1;
}
#main > * {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: 1s;
}
#main.scroll > * {
  opacity: 1;
}

/*------------------------------------------------------------
	menuBtn
------------------------------------------------------------*/
#menuBtn{
	position: fixed;
	right: 30px;
	top: 18px;
  z-index: 13;
	width: 90px;
	height: 90px;
	cursor: pointer;
	font-size: 0;
}
@keyframes hAnime{
  0% {transform: translateY(-100%);}
  100% {transform: translateY(0);}
}
#menuBtn.trigger{
  animation: hAnime .6s ease;
}
#menuBtn.active.trigger{
  animation: hAnime 0s ease;
}
#menuBtn span,
#menuBtn::before,
#menuBtn::after{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 38px;
  height: 3px;
  margin: auto;
  background: #000;
}
#menuBtn.trigger span,
#menuBtn.trigger::before,
#menuBtn.trigger::after{
  background: #fff;
}
#menuBtn::before{
  transform: translate(0, -12px);
  content:"";
}
#menuBtn::after{
  transform: translate(0, 12px);
  content:"";
}
#menuBtn span{
  transition: opacity 150ms 50ms;
}
#menuBtn::before,
#menuBtn::after{
  transition: transform 200ms;
}
#menuBtn.active span{
  opacity: 0;
  transition: opacity 150ms;
}
#menuBtn.active::before{
  transform: rotate(45deg);
}
#menuBtn.active::after{
  transform: rotate(-45deg);
}
@media only screen and (max-width:1024px) {
#menuBtn{
	right: 0;
	width: 80px;
}
}
@media only screen and (max-width:768px) {
#menuBtn{
	right: 0;
	top: 0;
	width: 60px;
	height: 60px;
}
#menuBtn span,
#menuBtn::before,
#menuBtn::after{
  width: 26px;
  height: 2px;
}
#menuBtn::before{
  transform: translate(0, -10px);
}
#menuBtn::after{
  transform: translate(0, 10px);
}
}


/*------------------------------------------------------------
	menu
------------------------------------------------------------*/
#menu{
  position: fixed;
	right: 0;
	top: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: 12;
  opacity: 0;
  transition: width .4s cubic-bezier(.210, .60, .350, 1) .6s, opacity .4s cubic-bezier(.210, .60, .350, 1);
}
#menu.active{
  width: 100%;
	opacity: 1;
  transition: width .6s cubic-bezier(.210, .60, .350, 1) 0s, opacity .6s cubic-bezier(.210, .60, .350, 1);
}
#menu .inner{
  position: relative;
  padding: 0 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(20px);
  opacity: 0.000001;
  transition: transform .4s cubic-bezier(.210, .60, .350, 1) .6s, opacity .4s cubic-bezier(.210, .60, .350, 1) 0s;
}
#menu.active .inner{
	opacity: 1;
  transform: translateY(0);
  transition: transform .6s cubic-bezier(.210, .60, .350, 1) .6s, opacity .6s cubic-bezier(.210, .60, .350, 1) .6s;
}
#menu ul{
  font-size: 0;
  margin-top: -40px;
  width: 100%;
}
#menu ul li{
    font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 50px;
  margin-top: 20px;
}
@media only screen and (min-width:768px) {
@media only screen and (max-height:940px) {
#menu ul{
  margin-top: -10px;
}
#menu ul li{
  margin-top: 10px;
}
@media only screen and (max-height:680px) {
#menu ul li{
/*  display: inline-block;*/
  width: 50%;
}
}
}
}
@media only screen and (max-width:768px) {
#menu .inner{
  padding: 0 40px;
}
#menu ul{
  margin-top: -15px;
}
#menu ul li{
  font-size: 30px;
  margin-top: 15px;
}
}


/*------------------------------------------------------------
	btn
------------------------------------------------------------*/
.btn a{
  max-width: 476px;
  width: 100%;
  border:2px #fff solid;
  padding: 40px 50px;
  color: #fff;
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 18px;
  font-weight: 500;
}
.btn a::after{
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  right: 30px;
  width: 18px;
  height: 18px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg)translateY(-50%);
}
.btn a:hover{
  opacity: .7;
}
/*------------------------------------------------------------
	footer
------------------------------------------------------------*/
footer{
  position: relative;
  z-index: 2;
  padding: 80px 0 15px;
  background: #737371;
}
footer a{
  display: block;
  width: 140px;
  margin: 0 auto;
}
footer p{
  text-align: center;
  color: #fff;
  font-size: 10px;
  margin-top: 70px;
}
@media only screen and (max-width:768px) {
footer{
  padding: 40px 0 15px;
}
footer a{
  width: 110px;
}
footer p{
  margin-top: 40px;
}
}
/*------------------------------------------------------------
	footer
------------------------------------------------------------*/
#sns ul li.insta a{
	content: none;
	overflow: hidden;
    text-indent: 200px;
}