@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
/* ----------------------------------------------------------------------------------------------------
*  reset
* --------------------------------------------------------------------------------------------------*/
/*====================================
RESET
======================================*/
html{overflow-y: scroll;}
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,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
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%;
    vertical-align:baseline;
    background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
blockquote, q {
    quotes:none;
}
h1, h2, h3, h4, h5, h6, p {margin:0; font-weight:normal; display:block; font-size: 100%;}
ul,li {list-style:none; padding:0;margin:0;}
dl,dt,dd {padding:0; margin:0;}
table,tr,td {border:0;padding: 0 ; margin:0;}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a {
  text-decoration:none;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
a:focus {
  outline:none;
  cursor: pointer;
}
a:hover {cursor: pointer;}

input, textarea, select {
    vertical-align:middle;
}
button{
     background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

img {vertical-align:bottom; border:0; padding:0; margin:0;line-height:0; }
div {margin:0;padding:0;}

caption, th{
    font-weight: normal;
}


input,select,button,textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-family:inherit;font-size:inherit;font-weight:inherit;
}

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



/* ----------------------------------------------------------------------------------------------------
*  基本
* --------------------------------------------------------------------------------------------------*/
html,body{
	height:100%;
	width:100%;
}
html{
	font-size:62.5%;
    overflow-y: scroll;
}
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	text-align: left;
}
ul{letter-spacing: -0.4em;}
.android ul{letter-spacing: -1em;}
ul li{letter-spacing: normal;}


body a {
	text-decoration:none;
	color:inherit;
}
body{
	-webkit-text-size-adjust: 100%;
	width: 100%;
	font-size: 1.4rem;
	line-height: 2;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #4D4D4D;
	background: #F5F3ED;
	word-wrap: break-word;
}
body.preload{
	display: none;
}
.en{
	font-family: 'Lexend Exa', sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}
img{
		width:100%;
		height:auto;
	}
@media screen and (min-width: 769px) {
	html,body{
	}
	body{
		min-width: 1100px;
	}
}
@media screen and (max-width: 768px) {
	html{-webkit-overflow-scrolling: touch;}
	body{
		font-size: 3.2vw;
		line-height: 1.8;
	}

}



a, a img, .fade, .a_ico{
	transition: 0.6s ease-in-out;
	-webkit-transition: 0.6s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
a:hover img{
	opacity: 0.6;
}

}

table{width: 100%;}


/*--読み込み時にtransitionが動作する問題--*/
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

/* ----------------------------------------------------------------------------------------------------
*  box
* --------------------------------------------------------------------------------------------------*/
.wrap{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.wrap2{
	width: 100%;
	margin: 0 auto;
	position: relative;
}

@media screen and (min-width: 769px) {
	.sp{display: none!important;}
	.wrap{
		max-width: 1110px;
	}
	.wrap2{
		max-width: 900px;
	}
	main{
		display: block;
		width: 100%;
		overflow: hidden;
	}
}

@media screen and (max-width: 768px) {
	.pc{
		display: none!important;
	}
	body{
		min-width: 100%;
	}
	main{
		width: 100%;
		overflow: hidden;
	}
	.wrap{
		width: 90vw;
	}
	.wrap2{
		width: 90vw;
	}
	.sp100w{
		width: 100vw;
		margin-left: -5vw;
	}
}





/* ----------------------------------------------------------------------------------------------------
*  汎用
* --------------------------------------------------------------------------------------------------*/


/* ------------------------------
    clearfix
------------------------------ */
.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */

/* ------------------------------
   float
------------------------------ */
.aligncenter{
    display:block;
    margin:0 auto;
}
.alignright{
	float:right;
}
.alignleft{
	float:left;
}

/* ------------------------------
   flex
------------------------------ */
.flex{
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;
}
.flex_wrap{
    flex-wrap: wrap;
}

.jc_start{
    justify-content:start!important;
}
.jc_center{
    justify-content:center!important;
}
.item_center{
    align-items: center;
}
.item_end{
	align-items: flex-end;
}
.flex_prev{
	flex-flow: row-reverse;
}
@media screen and (min-width: 769px) {
	.flex_pc{
	    display:flex;
    	flex-wrap: nowrap;
    	justify-content:space-between;
	}

}
@media screen and (max-width: 768px) {
	.flex_sp{
	    display:flex;
    	flex-wrap: wrap;
    	justify-content:space-between;
	}
}
/* ------------------------------
   text
------------------------------ */
.taC{text-align: center!important;}
.taR{text-align: right!important;}
.taL{text-align: left!important;}

.nowrap{
	display: inline-block;
	text-indent: 0;
}
.bold{font-weight: bold;}

.italic{font-style: italic!important;}

.txt_pnk{
	color: #EA8B8B;
}

.fsMS{font-size: 1.5rem!important; }
.fsS{font-size: 1.2rem!important; }

.ruby{
	display: inline-block;
	padding-top: 0.5em;
}
@media screen and (max-width: 768px) {
	.fsMS{font-size: 1.2rem!important;}
	.fsMSS{font-size: 1rem!important;}
	.fsS{font-size: 1rem!important;}
}
/* ------------------------------
   shadow
------------------------------ */
.shadow{
	box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);
}
@media screen and (max-width: 768px) {
	.shadow{
		box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	}
}



/* ------------------------------
   枠線 linebox
------------------------------ */
.loaded .linebox{
	position: relative;
	overflow:hidden;
}
.linebox>span{
	width: 100%;
	height: 1px;
	display: block;
	background: #000;
	position: absolute;
}

.linebox>span.line_v{
	width: 1px;
	height: 100%;
}
.linebox .line_l{
	left: 0;
	top: 0;
	transform: translateY(100%);
}
.linebox.move .line_l{
 	animation: leftAnim 0.3s ease 0.9s both;
}
.linebox .line_top{
	left: 0;
	top: 0;
	transform: translateX(-100%);
}
.linebox.move .line_top{
 	animation: topAnim 0.3s ease 0s both;
}
.linebox .line_r{
	right: 0;
	top: 0;
	transform: translateY(-100%);
}
.linebox.move .line_r{
 	animation: rightAnim 0.3s ease 0.3s both;
}
.linebox .line_bottom{
	bottom: 0;
	right: 0;
	transform: translateX(100%);
}
.linebox.move .line_bottom{
 	animation: bottomAnim 0.3s ease 0.6s both;
}
@keyframes topAnim {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0%);}
}
@keyframes bottomAnim {
    0% {transform: translateX(100%);}
    100% {transform: translateX(0%);}
}
@keyframes rightAnim {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}
@keyframes leftAnim {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}
}
/* ------------------------------
   見出し-pagettl
------------------------------ */
.pttlbox{
	height: 244px;
	width: 100%;
	padding-top: 0;
	position: relative;
	background: url(../img/pttl_bg.jpg) center no-repeat;
	background-size: cover;
}
.pttlbox .txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 84px;
}
.pttlbox .pttl{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.8rem;
	color: #fff;
	white-space: nowrap;
}
.pttlbox .linebox>span{
	background: #fff;
}
.pttlbox .linebox .line_v{
	height: 21px;
}
.loaded .pttlbox .linebox .line_l{
 	animation: leftAnim 0.3s ease 0s both;
}
.loaded .pttlbox .linebox .line_top{
 	animation: topAnim 0.3s ease 0.3s both;
}
.loaded .pttlbox .linebox .line_r{
 	animation: rightAnim 0.3s ease 0.6s both;
}
.loaded .pttlbox .linebox .line_bottom{
 	animation: bottomAnim 0.3s ease 0.9s both;
}
.pttlbox .linebox .line_l2, .pttlbox .linebox .line_r2{
	top: auto;
	bottom: 0;
}
.loaded .pttlbox .linebox .line_l2{
 	animation: leftAnim 0.3s linear 1.4s both;
}

.loaded .pttlbox .linebox .line_r2{
 	animation: rightAnim2 0.3s linear 0.8s both;
}
@keyframes rightAnim2 {
    0% {transform: translateY(0%); height: 0; bottom: 21px;}
    100% {transform: translateY(0%); height: 21px;}
}
.loaded .pttlbox .linebox .line_bottom{
 	animation: bottomAnim 0.3s linear 1.1s both;
}
@media screen and (min-width: 769px) {
}
@media screen and (max-width: 768px) {
	.pttlbox{
		height: 34vw;
	}
	.pttlbox .txt{
		width: 12vw;
		height: 14vw;
	}
	.pttlbox .pttl{
		font-size: 5.3vw;
	}
	.pttlbox .linebox .line_v{
		height: 3vw;
	}
	@keyframes rightAnim2 {
    0% {transform: translateY(0%); height: 0; bottom: 3vw;}
    100% {transform: translateY(0%); height: 3vw;}
	}

}


/*--ttl_line--*/
.ttl_line{
	position: relative;
	line-height: 1;
	position: relative;
	padding-bottom: 35px;
	margin-bottom: 44px;
}
.ttl_line span{
	display: block;
	font-size: 2rem;
}

.ttl_line .en{
	font-size: 2.8rem;
}
.ttl_line .small{
	margin-top: 20px;
	font-size: 1.4rem;
	font-weight: 500;
}

.ttl_line .line{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 2px;
	background: #4D4D4D;
}
@media screen and (max-width: 768px) {
	.ttl_line{
		padding-bottom: 5vw;
		margin-bottom: 6vw;
	}
	.ttl_line span{
		font-size: 3.7vw;
	}

	.ttl_line .en{
		font-size: 5vw;
	}
	.ttl_line .small{
		margin-top: 0.7em;
		font-size: 3.4vw;
	}

	.ttl_line .line{
		width: 10vw;
		height: 2px;
	}


}


/* ------------------------------
    lead
------------------------------ */
.p_lead{
	margin: 0 auto 40px;
}
.p_lead .ttl{
	font-size: 2.2rem;
	margin-bottom: 32px;
	letter-spacing: 0.25em;
}
.p_lead p{
	letter-spacing: 0.03em;
	line-height: 2.5;
}
.p_lead .ttl.en{
	letter-spacing: 0.01em;
}
@media screen and (min-width: 769px) {
	.p_lead{
		width: 648px;
	}
	.p_lead .ttl.en{
		font-size: 2.8rem;
	}
}
@media screen and (max-width: 768px) {
		.p_lead{
		margin: 0 auto 5vw;
	}
	.p_lead .ttl{
		font-size: 5vw;
		margin-bottom: 3vw;
		letter-spacing: 0.15em;
	}
	.p_lead p{
		letter-spacing: 0.03em;
		line-height: 2;
	}

}
/* ------------------------------
    字下げ
------------------------------ */
.hang1, .hangli1 li{
	padding-left: 1em!important;
	text-indent: -1em!important;
}
.hang1h, .hangli1h li{
	padding-left: 1.5em!important;
	text-indent: -1.5em!important;
}
.kakko{
	display: inline-block;
	text-indent:-1em!important;
}

/* ------------------------------
    btn
------------------------------ */

/*----btn line--------------------*/
.btn_line{
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 40px;
	text-align: center;
	border:1px solid #4d4d4d;
	line-height: 1;
	transition: .6s;
}
.btn_line .a_ico{
	fill: #4d4d4d;
	width: 14px;
	margin-right: 14px;
}
.btn_line .line{
	position: absolute;
	width: 20px;
	height: 1px;
	background: #4d4d4d;
	top: 50%;
	left: -10px;
}
.btn_line:before{
	content: "";
	display: none;
	position: absolute;
	transition: .6s;
	width: 100%;
	height: 100%;
	background: #4d4d4d;
	color: #fff;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
}
@media screen and (min-width: 769px) {
	.btn_line:hover, a:hover .btn_line{
		color: #fff;
		background: #4d4d4d
	}
	.btn_line:hover .a_ico, a:hover .btn_line .a_ico{
		fill:#fff;
	}
}
@media screen and (max-width: 768px) {
	.btn_line{
		width: 80vw;
		height: 8vw;
	}
	.btn_line .a_ico{
		width: 3.7vw;
		margin-right: 1.8vw;
	}
	.btn_line .line{
		width: 4vw;
		left: -2vw;
	}
}
/*----btn ph--------------------*/
.btn_ph{
	display: block;
	position: relative;
	z-index:1;
}
.btn_ph img{
	z-index:-1;
}

.btn_ph:before{
	content: "";
	display: block;
	position: absolute;
	background: rgba(0,0,0,0.3);
	position: absolute;
	width: 100%;
	height: 100%;
	transition: 0.6s;
}
.btn_ph .txt{
	position: absolute;
	color: #fff;
	text-align: center;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.8rem;
	line-height: 1;
	z-index:2;
}
.btn_ph .txt span.small{
	display: block;
	font-size: 1.4rem;
	margin-top: 1em;
}
.btn_ph .txt span{
	display: block;
}
@media screen and (min-width: 769px) {
	.btn_ph:hover:before, a:hover .btn_ph:before{
		background: rgba(0,0,0,0.6);
	}
	.btn_ph:hover img{
		opacity: 1;
	}
}
@media screen and (max-width: 768px) {
}
/* ----------------------------------------------------------------------------------------------------
*  loading animation
* --------------------------------------------------------------------------------------------------*/
/* Loading Block */
#loading {
  width: 100%;
  height: 100%;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading .logo {
  position: absolute;
  width: 150px;
  height: 63px;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill:#4D4D4D;
  animation: loading_logo 0.5s ease 0s 1 both;
  opacity: 0;
}

@keyframes loading_logo {
  from {
	opacity: 0;
  }
  to {
	opacity: 1;
  }
}

/* Hide Loading Block */
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 499px) {
	#loading .logo {
	  width: 120px;
	  height: 63px;
	}
}

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

header {
    width: 100%;
	position: fixed;
    padding-top: 24px;
    z-index: 999;
    top: 0;
    transition: .5s;
    height: 90px;
}
header.hide{
transform: translateY(-100%);
}
header .wrap{

}

@media screen and (min-width: 769px) {
	header {
		display: block;
	}
	header .wrap{
	}
}
@media screen and (max-width: 768px) {
	header{
		padding-top: 3.7vw;
		height: 16vw;
	}
}




/*----logo------------------------------*/
header .logo{
	position: absolute;
	left: 50px;
}
header .logo svg {
	fill: #fff;
}
header.scroll .logo svg {
	fill: #4d4d4d;
}
@media screen and (min-width: 769px) {
	header .logo {
	    width: 97px;
	    height: 42px;
	}
}
@media screen and (max-width: 768px) {
	header .logo{
		left: 5vw;
	}
	header .logo {
		width: 20vw;
	}
}

/*----nav------------------------------*/
header ul{

}
header ul li{
}
	.menu_opn{
    	height: 100%;
    	position: fixed;
    	right: -100%;
    	top: 0;
    	z-index: 10;
    	overflow-x: visible;
    	overflow-y:hidden;
    	display: block;
    	transition: 1s;
    	width: 100%;
	}

	.menu_opn.on{
		display: block;
    	right: 0;
	}
	.menu_opn.off{
    	right: -100%;
	}


	.menu_bg{
		position: absolute;
		height: 100%;
		width: calc(100% - 324px);
		top: 0;
		right: 0;
		background-color: #F5F3ED;
		z-index:-1;
	}
	.menu_opn .menu_bg2{
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 324px 100vh 0;
		border-color: transparent #F5F3ED transparent transparent;
		top: 0;
		left: 0;
		z-index:-1;
	}
	.menu_opn .menu_inner{
		width: 564px;
		height: 100%;
		padding: 160px 68px 60px;
		margin: 0 0 0 auto;
		/*overflow-y:scroll;*/
		z-index:999;
		position:absolute;
		right: 0;
	}
	.menu_inner a{
		display: block;
    	line-height: 1;
	}
	header .gnav{
		margin-bottom: 36px;
	}
	header .gnav li{
		font-size: 1.6rem;
	}
	header .gnav li a{
		text-align: right;
	}
	header .gnav li+li{
		margin-top: 28px;
	}

	header .gnav2{
		display: flex;
		justify-content: space-between;
		margin-bottom: 26px;
	}
	header .gnav2 li a{
		width: 202px;
		height: 40px;
		border:1px solid #4d4d4d;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	header .gnav2 li svg{
		width: 15px;
		margin-right: 13px;
	}
	header .gnav2 li+li svg{
		width: 17px;
		margin-right: 10px;
	}
	.gnav_ins{
		width: 25px;
		margin: 0 0 0 auto;
	}
	.ie11 .gnav_ins a{
		display: block;
		height: 25px;
	}


	.menu_opn.on a{
		animation: menu_opn 0.8s ease 0.8s 1 both;
		opacity: 0;
	}

	@keyframes menu_opn {
	  from {
		opacity: 0;
		margin-top: -10px;
	  }

	  to {
		opacity: 1;
		margin-top: 0;
	  }
	}

.menu_bgwrap{
	position: absolute;
	right: 0;
	top:0;
	height:100%;
}
@media screen and (min-width: 769px){
	header .gnav li a:hover{
		color: #999;
	}
	header .gnav2 li a:hover{
		background: #4d4d4d;
		color: #fff;
	}
	header .gnav2 li a:hover svg{
		fill: #fff;
	}
	header .gnav_ins a:hover svg{
		fill:#999;
	}
	.menu_bgwrap{
		min-width: 700px;
		max-width: 890px;
		width: 90%;
	}

}
@media screen and (max-width: 768px) {
	.menu_opn{
		width: 100vw;
    	right: -100vw;
    	transition: 0.5s;
	}
	.menu_opn.off{
    	right: -100vw;
	}
	.menu_bgwrap{
		height: 100%;
		width:86vw;
		overflow:hidden;
	}

	.menu_bg{
		width: 60vw;
	}
	.menu_opn .menu_bg2{
		border-width: 0 26vw 100vh 0;
		left: auto;
		right: 60vw;
	}
	.menu_opn .menu_inner{
		width: 60vw;
		padding: 20vw 5vw 60px;
		overflow-y:scroll;
	}
	header .gnav{
		margin-bottom: 8vw;
	}
	header .gnav li{
		font-size: 3.7vw;
	}
	header .gnav li+li{
		margin-top: 5.3vw;
	}

	header .gnav2{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 4vw;
	}
	header .gnav2 li{
		width: 98%;
	}
	header .gnav2 li+li{
		margin-top: 1.3vw;
	}
	header .gnav2 li a{
		width: 100%;
		height: 7vw;
	}
	header .gnav2 li svg{
		width: 3.2vw;
		margin-right: 1.6vw;
	}
	header .gnav2 li+li svg{
		width: 3.7vw;
		margin-right: 1.3vw;
	}
	.gnav_ins{
		width: 4vw;
	}
	.menu_opn.on a{
		animation: menu_opn 1s ease 0.2s 1 both;
	}

}
.menu_ann{
	text-align: right;
	margin-bottom: 25px;
	font-size: 16px;
}
@media screen and (min-width: 769px){
	.menu_ann a:hover {
		color: #999;
	}
}
.menu_ann img{
	width: 82px;
	margin-left: 6px;
	vertical-align: -3px;
}
@media screen and (max-width: 768px){
	.menu_ann{
		font-size: 3.7vw;
		margin: 5vw 0;
	}
	.menu_ann img{
		width: 19vw;
		margin-left: 1.5vw;
		vertical-align: -0.5vw;
	}
}


/*------------
sp ハンバーガー
------------*/
.is_gnavOpen { width: 100%; height: 100%; position: fixed; }
/* gnav背景 */
.js_gnavLayer { display: none; }
    header .bl_navTrigger,
    header .bl_navTrigger span { display: inline-block; transition: all .4s; }
    header .bl_navTrigger {
    	position: absolute;
    	top: 24px;
    	right: 24px;
    	width: 35px;
    	height: 35px;
    	z-index: 990;
    }
    .is_gnavOpen header .bl_navTrigger {
    	position:fixed;
    }
    header .bl_navTrigger span {
    	width: 100%;
    	height: 1px;
    	position: absolute;
    	left: 0;
    	top: 50%;
    	background-color: #fff;
    }
    header.scroll .bl_navTrigger span {
		background-color: #4d4d4d;
	}
    header .bl_navTrigger.active{
    	position: fixed;
    }
    header .bl_navTrigger.active span{
    	background-color:#4D4D4D;
    }
    header .bl_navTrigger span:nth-of-type(1) { margin-top: -10px; }
    header .bl_navTrigger span:nth-of-type(2) { margin-top: -1px;}
    header .bl_navTrigger span:nth-of-type(3) { margin-top: 9px; }

    header .bl_navTrigger.active span:nth-of-type(1) { margin-top: 0px; transform:rotate(-45deg); }
    header .bl_navTrigger.active span:nth-of-type(2) { display: none;}
    header .bl_navTrigger.active span:nth-of-type(3) { margin-top: 0px; transform: rotate(45deg); }

    /* ハンバーガーメニューボタンアニメーション */
    @-webkit-keyframes active_menu_bar {
        100% { height: 0; }
    }

    @keyframes active_menu_bar {
        100% { height: 0; }
    }
@media screen and (min-width: 769px){
}
@media screen and (max-width: 768px) {
	.is_gnavOpen {  width: 100%; height: 100vh; position: fixed; }

	 header .bl_navTrigger {
	 	top: 10px;
	 }
	 header .bl_navTrigger {
    	position: absolute;
    	top: 4vw;
    	right: 5vw;
    	width: 9.3vw;
    	height: 9.4vw;
    }
    header .bl_navTrigger span:nth-of-type(1) { margin-top: -2.6vw; }
    header .bl_navTrigger span:nth-of-type(2) { margin-top: 0;}
    header .bl_navTrigger span:nth-of-type(3) { margin-top: 2.6vw; }

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

footer {
    width: 100%;
    position: relative;
    padding: 50px 0 35px;
    background: #4D4D4D;
    color: #fff;
}
footer .a_ico{fill:#fff;}

.foot_logo{
	display: block;
	width: 113px;
	margin: 0 auto 54px;
}
.footnav{
	display: flex;
	justify-content: center;
	margin-bottom: 26px;
}
.footnav li{
	width: 204px;
}
.footnav li+li{
	margin-left: 17px;
}
.footnav li a{
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid #fff;
	font-size: 1.4rem;
	line-height: 1;
	height: 40px;
}
	.footnav .ico_mail{
		width: 16px;
		margin-right: 12px;
		margin-top: 2px;
	}
	.footnav .ico_cart{
		width:17px;
		margin-right: 10px;
	}
.fnav_ins {
	display: flex;
	justify-content: center;
}
.fnav_ins a{
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	height: 21px;
}
.fnav_ins .ico_ins{
	width: 21px;
	margin-right: 16px;
}
.copyright{
	text-align: center;
	line-height: 1;
	font-size: 1rem;
	margin-top: 60px;
}
@media screen and (min-width: 769px) {
	footer .footnav a:hover .a_ico{fill:#4d4d4d;}
	footer .footnav a:hover{background:#fff; color:#4d4d4d;}
	.fnav_ins a:hover{opacity: 0.6;}

}
@media screen and (max-width: 768px) {
	footer {
	    padding: 8vw 0 4vw;
	}
	.foot_logo{
		width: 20vw;
		margin: 0 auto 6vw;
	}
	.footnav{
		margin-bottom: 3vw;
	}
	.footnav li{
		width: 49%;
	}
	.footnav li+li{
		margin-left: 2%;
	}
	.footnav li a{
		font-size: 3.7vw;
		height: 8vw;
	}
	.footnav .ico_mail{
		width: 3.7vw;
		margin-right: 1.3vw;
		margin-top: 2px;
	}
	.footnav .ico_cart{
		width:4vw;
		margin-right: 1.3vw;
	}
	.fnav_ins a{
		font-size: 3.2vw;
	}
	.fnav_ins .ico_ins{
		width: 5vw;
		margin-right: 2vw;
	}
	.copyright{
		font-size: 2.6vw;
		margin-top: 5vw;
	}
}


.page-list {
  margin: 30px -10px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-items: center;
}
.page-list li {
  max-width: 25%;
  flex: 0 0 25%;
  padding: 0 10px;
  margin-bottom: 20px;
}
.page-list li a {
  display: block;
  border-bottom: solid 1px #4d4d4d;
  padding: 8px 0;
  position: relative;
}
.page-list li a:before {
  position: absolute;
  bottom: -2px;
  left: 0;
  background: #C89EA0;
  transition: width .4s ease;
  display: block;
  width: 0;
  height: 4px;
  content: '';
}
.page-list li a:hover:before {
  width: 100%;
}


@media screen and (max-width: 768px) {

  .page-list {
    margin: 20px -10px 0;
  }
  .er-txt span {
    display: block;
  }
  .er-txt span + br{
    display: none;
  }
  .page-list li {
    max-width: 50%;
    flex: 0 0 50%;
  }
}