@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

html {
  font-size: 62.5%;
}
img {
  width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: #000;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
.object-fit-img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  font-family: 'object-fit: cover;'
}

ol, ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400; 
  font-style: normal;
}

.mb0{margin-bottom: 0 !important;}

.font-min{
	font-family: "Noto Serif JP", serif;
  	font-weight: 400;
  	font-style: normal;
}

body {
  padding: 0;
  margin: 0;
  background: #fff;
  position: relative;
  color: #26343c;
  font-feature-settings: "palt" 1;
  letter-spacing: 0em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
}

*{
min-width: 0;
min-height: 0;
}


@media screen and (min-width:751px) {
  .pc_none {
    display: none !important;
  }
	
  body {
    font-size: 1.4rem; /*14px*/ ;
    min-width: 100%;
  }
	
	/*header*/
	
	header{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		background:#fff;
		border-bottom:1px solid #cccccc;
		z-index: 10;
		
	}
	
	header .innerbox{
		display: flex;
		align-items: center;
		height:90px;
		padding:0 2.5%;
	}
	
	header .innerbox .logo{
		width:220px;
	}
	
	header .innerbox .side_logo{
		width:240px;
		padding:0 0 0 20px;
		margin:0 0 0 20px;
		border-left:1px solid #cccccc;
	}
	
	header .innerbox .slidenav{
		margin:0 0 0 auto;
		display: flex;
		height:100%;
	}
	
	header .innerbox nav{
		margin:0 0 0 auto;
		display: flex;
		height:100%;
	}
	
	header .innerbox nav .box{
		display: flex;
		height:100%;
		position: relative;
		align-items: center;
		margin:0 0 0 25px;
	}
	
	header .innerbox nav .box::after{
		content: "";
		width:100%;
		height:3px;
		background:#347cdf;
		position: absolute;
		bottom:0;
		left:0;
		transform: scaleX(0);
		transform-origin: center;
		transition: all 0.3s;
	}
	
	header .innerbox nav .box:hover::after{
		transform: scaleX(1);
	}
	
	header .innerbox nav .box a{
		font-size: 1.3rem;
		white-space: nowrap;
	}
	
	header .innerbox nav .box{
		font-size: 1.3rem;
		white-space: nowrap;
	}
	
	/*footer*/
	footer{
		padding:0 5% 50px;
	}
	
	footer .logo{
		padding:180px 0;
		width:100%;
		width:500px;
		margin:0 auto;
	}
	
	footer .bottom_cont{
		display: flex;
		align-items: center;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:25px 0;
	}
	
	footer .bottom_cont .blogo{
		width:220px;
	}
	
	footer .bottom_cont .copy{
		font-size: 1rem;
		margin:0 0 0 30px;
	}
	
	footer .bottom_cont a{
		font-size: 1.3rem;
		margin:0 0 0 auto;
		transition: all 0.2s;
		white-space: nowrap;
	}
	
	footer .bottom_cont a:hover{
		opacity: 0.7;
	}
	
	footer .bottom_cont a::after{
		content: "";
		width:12px;
		height:12px;
		background:url("/images/common/arrow01.svg") no-repeat;
		background-size: contain;
		display: inline-block;
		margin:0 0 0 10px;
	}
	
	.page_main{
		width:100%;
		padding:100px 0 90px 0;
		overflow: hidden;
		border-bottom:1px solid #ccc;
		position: relative;
	}
	
	.page_main.noborder{
		border:none;
	}
	
	.page_main .entl{
		height:180px;
		position: absolute;
		bottom:-50px;
		right:0;
		z-index: 1;
	}
	
	.page_main .entl.box2{
		height:130px;
		position: absolute;
		bottom:-10px;
		right:0;
		z-index: 1;
	}
	
	.page_main .entl img{
		width:auto;
		height:100%;
	}
	
	.page_main .innerbox{
		width:90%;
		max-width: 1166px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	
	.page_main .innerbox .jptl{
		height:70px;
	}
	
	.page_main .innerbox .jptl img{
		width:auto;
		height:100%;
	}
	
	.page_main .innerbox p{
		font-size: 1.5rem;
		line-height: 2em;
		letter-spacing: 0.1em;
	}
	
	/*pan*/
	#pan{
		width:100%;
		padding:40px 0 90px;
		font-size: 1.3rem;
		letter-spacing: 0.1em;
		color:#26343c;
	}
	
	#pan a{
		opacity: 0.5;
		transition: all 0.2s;
		padding:0 10px 0 0;
		font-weight: 400;
	}
	
	#pan a:hover{
		opacity: 1;
	}
	
	#pan span{
		margin:0 10px 0 0;
		font-weight: 300;
	}
	
	#pan span:last-child{
		margin:0 0 0 0;
	}
	
	#pan span::after{
		content:"";
		height:1px;
		width:25px;
		background:#26343c;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top:-1px;
	}
	
	#pan span:last-child::after{
		display: none;
	}
	
	/*main_container*/
	#main_container{
		padding-top:90px;
		position: relative;
	}
}

@media screen and (max-width:750px) {
  .sp_none {
    display: none !important;
  }
	
  body {
    font-size: 1.4rem; /*14px*/ ;
    min-width: 100%;
  }
	
	/*header*/
	header{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		background:#fff;
		border-bottom:1px solid #cccccc;
		z-index: 10;
		
	}
	
	header .innerbox{
		display: flex;
		align-items: center;
		height:75px;
		padding:0 0;
	}
	
	header .innerbox .logo{
		width:185px;
		margin:0 0 0 5%;
		
	}
	
	header .innerbox .side_logo{
		width:75px;
		padding:0 0 0 20px;
	}
	
	header .innerbox .slidenav{
		display: none;
		position: fixed;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background:#fff;
	}
	
	header .innerbox nav{
		margin:0 0 0 auto;
		display: block;
		z-index: 9;
		padding:75px 0 0 0;
	}
	
	header .innerbox nav .box{
		display: flex;
		height:100%;
		position: relative;
		align-items: center;
	}
	
	header .innerbox nav .box.logo{
		width:80%;
		max-width: 275px;
		margin:0 auto;
		padding:50px 0 30px 0;
	}
	
	header .innerbox nav .box a{
		font-size: 1.8rem;
		white-space: nowrap;
		padding:15px 0;
		text-align: center;
		width:100%;
		
	}
	
	header .innerbox nav .box{
		font-size: 1.3rem;
		white-space: nowrap;
	}
	.menu{
		width:75px;
		height:75px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin:0 0 0 auto;
		cursor: pointer;
		z-index: 11;
		position: relative;
		background:#1e6edc;
		
	}

	.menu-trigger,
	.menu-trigger span {
  		display: inline-block;
  		transition: all .4s;
  		box-sizing: border-box;
		cursor: pointer;
		z-index: 2;
	}
	.menu-trigger {
  		position: relative;
  		width: 25px;
  		height: 20px;
		z-index:5;
	}
	
	.menu-trigger span {
  		position: absolute;
  		left: 0;
  		width: 100%;
  		height: 1px;
  		background-color: #fff;
  		border-radius: 9999px;
	}

	.menu-trigger span:nth-of-type(1) {
  		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top:9px;
	}
	.menu-trigger span:nth-of-type(3) {
  		bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
  		-webkit-transform: translateY(9.5px) rotate(45deg);
  		transform: translateY(9.5px) rotate(45deg);
		background-color: #fff;
	}
	.menu-trigger.active span:nth-of-type(2) {
  		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
  		-webkit-transform: translateY(-9.5px) rotate(-45deg);
 		 transform: translateY(-9.5px) rotate(-45deg);
		width:100% !important;
		margin:0 0 0 0;
		background-color: #fff;
	}
	
	/*footer*/
	footer{
		padding:0 0 0;
	}
	
	footer .logo{
		padding:70px 0;
		width:90%;
		max-width:500px;
		margin:0 auto;
	}
	
	footer .bottom_cont{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		border-top:1px solid #ccc;
		padding:15px 5%;
	}
	
	footer .bottom_cont .blogo{
		width:50%;
		margin:0 0 0 0;
	}
	
	footer .bottom_cont .copy{
		font-size: 1rem;
		margin:15px 0 0 0;
		order:1;
		width:100%;
		text-align: left;
	}
	
	footer .bottom_cont a{
		font-size: 1.3rem;
		margin:0 0 0 0;
		transition: all 0.2s;
		white-space: nowrap;
	}
	
	footer .bottom_cont a:hover{
		opacity: 0.7;
	}
	
	footer .bottom_cont a::after{
		content: "";
		width:12px;
		height:12px;
		background:url("/images/common/arrow01.svg") no-repeat;
		background-size: contain;
		display: inline-block;
		margin:0 0 0 10px;
	}
	
	/*main_container*/
	#main_container{
		padding-top:75px;
		position: relative;
	}
	
	.page_main{
		width:100%;
		padding:50px 0 70px 0;
		overflow: hidden;
		border-bottom:1px solid #ccc;
		position: relative;
	}
	
	.page_main.noborder{
		border:none;
	}
	
	.page_main .entl{
		height:80px;
		position: absolute;
		bottom:-23px;
		right:0;
		z-index: 1;
	}
	
	.page_main .entl.box2{
		height:55px;
		position: absolute;
		bottom:-5px;
		right:0;
		z-index: 1;
	}
	
	.page_main .entl img{
		max-width: inherit;
		width:auto;
		height:100%;
	}
	
	.page_main .innerbox{
		width:90%;
		max-width: 1166px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	
	.page_main .innerbox .jptl{
		height:35px;
	}
	
	.page_main .innerbox .jptl img{
		width:auto;
		height:100%;
	}
	
	.page_main .innerbox p{
		font-size: 1.5rem;
		line-height: 2em;
		letter-spacing: 0.1em;
	}
	
	/*pan*/
	#pan{
		width:100%;
		padding:30px 0 40px;
		font-size: 1rem;
		letter-spacing: 0.1em;
		color:#26343c;
	}
	
	#pan a{
		opacity: 0.5;
		transition: all 0.2s;
		padding:0 10px 0 0;
		font-weight: 400;
	}
	
	#pan a:hover{
		opacity: 1;
	}
	
	#pan span{
		margin:0 10px 0 0;
		font-weight: 300;
	}
	
	#pan span:last-child{
		margin:0 0 0 0;
	}
	
	#pan span::after{
		content:"";
		height:1px;
		width:25px;
		background:#26343c;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top:-1px;
	}
	
	#pan span:last-child::after{
		display: none;
	}
	
}


/*animation*/
.fadeTop{
		opacity: 0;
		will-change:opacity;
	}
	
.fadeIn{
		opacity: 0;
		will-change:opacity;
	}

.fadeBlur{
		opacity: 0;
		-webkit-filter: blur(10px);
  	 	filter: blur(10px);
		will-change: filter;
	}

.fadeTop.active{
		animation: fadeTop 1s;
		animation-delay: 0s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
		position: relative;
	}
	
.fadeIn.active{
		animation: fadeIn 1s;
		animation-delay: 0s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
		position: relative;
	}

.fadeBlur.active{
		animation: fadeBlur 1s;
		animation-delay: 0s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
		position: relative;
	}

@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-100px);
  }
}

@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

@keyframes fadeTop {
  0% {
     top:30px;
	 opacity: 0;
  }
  100% {
    top:0;
	opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
	 opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

@keyframes fadeBlur {
  0% {
	 opacity: 0;
	 -webkit-filter: blur(10px);
  	 filter: blur(10px);
  }
  100% {
	opacity: 1;
	-webkit-filter: blur(0);
  	filter: blur(0);
  }
}