@charset "utf-8";

/*********************
 base
*********************/
 
*{ padding:0; margin:0; }
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}
html{ scroll-padding-top: 100px; }
html,body{ height:100%; }
body{
	-webkit-text-size-adjust: 100%;
	width:100%;
font-family: "IBM Plex Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Roboto, sans-serif;
/*	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
	font-size:16px;
	line-height:1.8em;
	letter-spacing: .09em;
	color:#666;
	background-color:#fff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-top:90px;
	transition:.2s;
	line-break: strict; /* 禁則処理を厳格に適用 */
}
.mincho{ font-family: "Noto Serif JP",serif; }
img{ vertical-align:middle; }
ul{ list-style-type: none; }
a{ transition:.2s; }

/*********************
 flexbox
*********************/
.flexbox{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.flexbetween{
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flexcenter{
	-webkit-justify-content: center;
	justify-content: center;
}
.flextop{
	-webkit-box-align: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
}

/*********************
 link opacity
*********************/
.op{ transition:0.3s; }
.op:hover{ opacity:0.7; }

/*********************
 header
*********************/
header{
	width:100%;
	background:#fff;
	display:block;
	margin:0 auto;
	position: fixed;
	top:0;
	z-index: 999;
	filter: drop-shadow(0 0px 8px rgba(0, 0, 0, .2));
}
header .logo_btn img{
	height:70px;
	margin:10px 5px 10px 50px;
	transition: all .2s;
}
/** menu button **/
header .menu_btn{
	display:inline-block;
	position: fixed;
	background:#98a4b0;
	cursor: pointer;
	width: 90px;
	height:90px;
	top:0;
	right:0;
	z-index:999;
}
header .menu_btn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	right: 25px;
	height: 2px;
	border-radius: 5px;
	background: #fff;
	width: 45%;
 }
header .menu_btn span:nth-of-type(1) { top:30px; }
header .menu_btn span:nth-of-type(2) { top:40px; }
header .menu_btn span:nth-of-type(3) { top:50px; }

header .menu_btn span:nth-of-type(3)::after {
	content:"Menu";
	position: absolute;
	top:1px;
	left:2px;
	letter-spacing: .3em;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}
header .menu_btn.active span:nth-of-type(1) {
	top: 30px;
	right: 26px;
	transform: translateY(6px) rotate(-45deg);
	width: 40%;
}
header .menu_btn.active span:nth-of-type(2) { opacity: 0; }
header .menu_btn.active span:nth-of-type(3){
	top: 39px;
	right: 26px;
	transform: translateY(-2px) rotate(45deg);
	width: 40%;
}
header .menu_btn.active span:nth-of-type(3)::after {
	content:"Close";
	transform: translateY(0) rotate(-45deg);
	top:-25px;
	right:-90px;
}
/** menu list **/
header .menu_list{
	position: fixed;
	background:#fff;
	max-width:500px;
	width:80vw;
	z-index:998;
	border-top:91px solid #98a4b0;
	display:none;
	opacity: 0;
	height: 100vh;
	top:0;
	color:#98a4b0;
}
header .menu_list.active{
	animation-name:slideinRight;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
	display:inline-block;;
}
@keyframes slideinRight {
  0% {
	transform: translateX(100%);
  }
  100% {
	opacity: 1;
	transform: translateX(-100%);
  }
}
header .menu_list li{
	border-bottom:1px solid #ececec;
	display:block;
}
header .menu_list li a{
	margin-right:30px;
	color:#737989;
	text-decoration:none;
	position: relative;
	display: inline-block;
	padding:15px 20px;
	width:100%;
	transition:0.3s;
}
header .menu_list li a:hover{
	opacity:0.5;
}
header .menu_list li a:before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #737989;
	border-right: solid 2px #737989;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	margin: auto;
}

/*********************
 footer
*********************/
footer{
	width:100%;
	margin:50px auto 0;
	text-align:center;
	font-size:0.8em;
	line-height:1.6em;
	padding:15px 0 0;
	color:#fff;
	background:#98a4b0;
}
footer section{
	padding:0;
	text-align:center;
	max-width:1100px;
	margin:0 auto 30px;
}
footer section img.logo{
	display:inline-block;
	width:50%;
	max-width:100px;
	margin:30px auto;
}
footer section div#links {
	line-height:2.4em;
}
footer section div#links a{
	color:#fff;
	text-decoration:none;
	display:inline-block;
	margin:0 20px;
}
footer section div#links a:hover{
	text-decoration:underline;
}
footer div#copy{
	width:100%;
	max-width:1100px;
	border-top:1px solid #fff;
	padding:15px 0;
	margin:0 auto;
	font-size:0.8em;
}
footer div.pc-menu{
	padding-left:10px;
	width:100%;
	max-width:300px;
	margin:30px auto 0;
}
footer div.pc-menu a img{
	height:30px;
}
footer div.pc-menu a:first-child img{
	height:35px;
}