/* ----------
	common
---------- */
body {
	background: #fafafa;
	color: #222;
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
@media (min-width: 768px) {
	body {
		min-width: 1000px;
	}
}
.container {
	overflow-x: hidden;
	width: 100%;
	display: flex;

}

.b {
	font-weight: bold;
}
.big {
	font-size: 1.25em;
}
.small {
	font-size: .8em;
}
small{
	font-size: .6em;
}

/* ----------
	fadein
---------- */

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* ----------
	loading
---------- */

.loder{
	display: block;
	width: 100vw;
    height: 100vh;
    position: relative;
}

.loader_dot, .loader_dot:before, .loader_dot:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.4s infinite ease-in-out;
  animation: load7 1.4s infinite ease-in-out
}

.loader_dot {
  color: #a28d69;
  font-size: 10px;
  margin: -2em auto 0;
  position: absolute;
  text-indent: -9999em;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  top: 50vh;
  left: 50vw;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9999
}

.loader_dot::before, .loader_dot::after {
  content: '';
  position: absolute;
  top: 0
}

.loader_dot::before {
  left: -4.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s
}

.loader_dot::after {
  left: 4.5em
}


/* ----------
	header
---------- */

#site-header {
	background: #fafafa;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,.1));
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap:wrap;
	padding: 24px;
	width: 25%;
    height: 100vh;
}
@media (max-width: 767px) {
	#site-header {
		background:rgba(250, 250, 250, .9);
		width: 100%;
		height:65px;
		align-items: center;
		align-content: center;
		left: 0;
		padding: 8px 12px;
		position: fixed;
		top: 0;
		z-index: 10001;
	}
}
#site-header .logo_sp{
	display: none;
}
#site-header .logo{
	display: block;
	margin: auto;
}
@media (max-width: 767px) {
	#site-header .logo_sp{
		display: block;
	}
	#site-header .logo{
		display: none;
	}
}

#site-header .brand {
	width: 100%;
	text-align: center;
}
#site-header .brand img{
	width:80px;
}
#site-header .com_name{
	display: none;
}
@media (max-width: 767px) {
	#site-header .brand a{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text-decoration: none;
		color: #222;
	}
	#site-header .brand {
		width: 50%;
	}
	#site-header .brand img{
		width:55px;
		margin-top:0px;
		margin-right:10px;
	}
	#site-header .com_name{
		display: flex;
		flex-wrap: wrap;
		color:#00529c;
	}
	#site-header .com_name span:first-child{
		font-size: 11px;
    width: 100%;
    text-align: left;
    margin-top: 1px;
	}
	#site-header .com_name span:last-child{
		font-size: 20px;
    width: 100%;
    text-align: left;
    margin: -7px 0 -2px 0;
	}
}

#site-header #nav-switch,
#site-header #nav-close,
#site-header nav small {
	display: none;
}

#site-header ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	margin-bottom: 0px;
}
#site-header li {
	width: 100%;
}
#site-header .sp_header_img{
	display: none;
}
#site-header li a {
	align-items: center;
	color: #222;
	display: flex;
	justify-content: center;
	height: 100%;
	padding: 20px;
	text-decoration: none;
	transition: .3s;
}
#site-header li span{
	width:100%;
	text-align: center;
	
}
#site-header li a:hover {
	color: #aaa;
}
#site-header small{
	text-align: center;
	margin:0 auto;
	color: #aaa;
}
@media (max-width: 767px) {
	#site-header nav small{
		display: block;
		text-align: left;
/*		bottom: 0%;*/
		position: fixed;
		padding:20px 0;
/*		position: fixed;
		top:8vh;
		left: 0;
		padding:8px 12px;*/
	}
	#site-header small{
		display: none;
	}
	#site-header nav{
		display: none;
	}
}





/* ----------
	footer
---------- */

#footer{
	display: none;
}
@media (max-width: 767px) {
	#footer {
		position: fixed;
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',"Noto Sans JP",serif;
		background: #fafafa;
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		flex-wrap:wrap;
		padding: 24px;
		width: 25%;
	  height: 100vh;
	}
	#footer ul {
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		margin: 0;
		margin-bottom: 0px;
	}
	#footer li {
		width: 100%;
	}
	#footer li a {
		align-items: center;
		color: #222;
		display: flex;
		justify-content: center;
		height: 100%;
		padding: 20px;
		text-decoration: none;
		transition: .3s;
	}
	#footer li span{
		width:100%;
		text-align: center;
		order: 2;
	}
	#footer .material-symbols-outlined {
	  font-variation-settings:
	  'FILL' 0,
	  'wght' 100,
	  'GRAD' -25,
	  'opsz' 48;
	  order: -1;
    font-size: 50px;
    color: #fafafa;
	}
}
@media (max-width: 767px) {
	#footer nav{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		background: #fafafa;
	}
	#footer ul {
		align-content: flex-start;
		flex-wrap: wrap;
		height:calc(100vw/4);
	}
	#footer li {
		width: 24.5%;
		height: 100%;
		background: #aaa;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
	}
	#footer .sp_header_img{
		display: block;
		width: 30px;
    margin: 5px;
	}
	#footer li a {
		font-size: 3.5vw;
		width:100%;
		height: auto;
		color: #fff;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		margin: 0px 1px 0px 1px;
		padding: 0 3px;
		line-height: 135%;
	}
	#footer small{
		display: block;
		position: fixed;
		bottom:13vh;
		right: 0;
		padding:5px 0px;
		color: #aaa;
	}
}




/* ----------
	index
---------- */

/* common */
.index .body {
	padding: 0 0px;
	max-width: 1000px;
}
@media (max-width: 767px) {
	.index .body {
		padding: 0 20px;
	}
}

.index .txt p {
	line-height: 165%;
	font-size:16px;
	letter-spacing: 0.05rem;
}


/* /common */
.index .content{
	width:75%;
}
@media (max-width: 767px) {
	.index .content{
		width:100%;
	}
}
.index .kv {
	height: 100%;
	position: relative;
	overflow: hidden;
	margin: auto;
}
@media (max-width: 767px) {
	.index .kv {
		height: 100vh;
/*		width: 100vw;*/
/*		padding-top:65px;*/
	}
}

.index .kv .img{
	margin:0 auto;
	display: block;
}
.index .kv .img_sp{
	display: none;
}
@media (max-width: 767px) {
	.index .kv .img{
		display: none;
	}
	.index .kv .img_sp{
		display: block;
	}
}
.index .kv .mv_logo{
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:190px;
/*  background: rgba(250, 250, 250, .35);*/
/*  box-shadow: 0px 0px 5px #fff;*/
}
.index .kv h1{
	font-size:30px;
	color:#00529c;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight:400;
	margin:15px 0 0 0;
	text-align: center;
}
@media (max-width: 767px) {
	.index .kv .mv_logo{
		width:150px;
	}
	.index .kv h1{
		font-size:23px;
	}
}
.index .kv .img_base{
	animation: img_base 24s linear infinite;
	height: auto;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
  right: 0;
  filter: brightness(80%);
}
.index .kv .img_base_sp{
	animation: img_base 24s linear infinite;
	height: auto;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
  right: 0;
  filter: brightness(80%);
}
@keyframes img_base{
    0% { opacity: 0; transform: scale(1); }
    5% { opacity: 1; }
    25% { opacity: 1; }
    30% { opacity: 0; }
    100% { opacity: 0; transform: scale(1.15); }
}


.index .kv img:first-of-type{
	animation-delay: 0s;
}
.index .kv img:nth-of-type(2){
	animation-delay: 6s;
}
.index .kv img:nth-of-type(3){
	animation-delay: 12s;
}
.index .kv img:nth-of-type(4){
	animation-delay: 18s;
}