@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html{ -webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%; overflow-x: hidden; overflow-y: visible;}
html,body{ max-width:100%; width: 100vw !important;}
body,main { overflow-y: hidden; overflow-x: visible !important;}
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; list-style:none; vertical-align:middle; background:transparent;}
img {border-style: none;} 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul,ul,li{ list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
*{box-sizing: border-box;}
@media screen and (max-width: 320px){html, body { min-width:320px;}}
::selection { background: rgba(0,0,0,.1); color: #aaa;}
::-moz-selection { background: rgba(0,0,0,.1); color: #aaa;}
/*===================
 common
=====================*/
.mt0{ margin-top: 0px !important;}
.mt10{ margin-top: 10px !important;}
.mt20{ margin-top: 20px !important;}
.mt30{ margin-top: 30px !important;}
.mt40{ margin-top: 40px !important;}
.mt50{ margin-top: 50px !important;}
.mt60{ margin-top: 60px !important;}
.mt70{ margin-top: 70px !important;}
.mt80{ margin-top: 80px !important;}
.mt90{ margin-top: 90px !important;}
.mt100{ margin-top: 100px !important;}
.mb0{ margin-bottom: 0px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}
.mb50{ margin-bottom: 50px !important;}
.mb60{ margin-bottom: 60px !important;}
.mb70{ margin-bottom: 70px !important;}
.mb80{ margin-bottom: 80px !important;}
.mb90{ margin-bottom: 90px !important;}
.mb100{ margin-bottom: 100px !important;}

/*===================
 LINK
=====================*/
a, a span, a img {-webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none;}
a.link{ color: #019fe7; text-decoration: underline;}
a:hover { opacity:1; filter: alpha(opacity=100);}
/*- style -*/
a.a{}/* 「」がつく */
a.an{}/* ● */
a.af{}/* 大きな● */
a.al{ position:relative; text-decoration: none;}/*下線　要調整*/
a.al:hover{ color: #111 !important;}
a.al::after{ width: 0px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #000; content: ""; -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; transition: 0.4s ease-in;}
a.al:hover::after{ width: 100%; left: 0;}
a.ab{ position:relative; text-decoration: underline;}/*色と背景*/
a.ab:hover{ color: #fff !important; text-decoration: none; background: #222;}
/*- link -*/
a.link{ padding: 0px 60px 0px 10px; position: relative; display:inline-block; margin-top: 10px; line-height: 40px; text-decoration: none; color: #777; letter-spacing: 3px; transition:0.3s ease-out; box-shadow: 0 0 0 0 #ddd inset; z-index: 10;}
a.link span{ color: #777;}
a.link::after{ content: "→"; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; position: absolute; right: 25px; top: 5px; background: #ccc; color: #fff; transition:0.3s ease-out;}
a.link::before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0;}
a.link:hover::before{ opacity: 1;}
a.link:hover::after{ right: 10px; color: #999; background: #fff;}
a.link:hover, a.link:hover span{ color: #fff;}


/*===================
 NONE
=====================*/
.pc{display: block;}
.sp{ display: none;}
@media screen and (max-width: 600px) {
.pc{display: none;}
.sp{ display: block;}
}
/*===================
 FONT
=====================*/
*{ font-family:'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; font-weight: 300; color: #000;}
h1,h2,h3,h4,h5,h6 { font-size:18px; line-height:1.4em;}
p,li,dt,dl,span,td { font-size:14px; line-height:1.4em; letter-spacing: 0.1em;}
.b, b{font-weight: bold;}
@media screen and (max-width: 600px) {p,li,dt,dl,span,td { line-height:1.6em; font-weight: 300;}}
/*=====================================
	CONTENTS
=======================================*/
html, body { max-width: 100%;}
main{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x:hidden; overflow-y:visible; z-index: 1; position: relative;}

.section{ width: 100%; display: flex; flex-direction: column; align-items: center;}
.inner{ width:100%; max-width: 1100px; display: flex; flex-direction: column; justify-content: flex-start; align-items:center;}
.inner1100{ width:100%; max-width: 1100px; display: flex; flex-direction: column; justify-content: flex-start; align-items:center;}
.wrap{ width: 100%; display: flex; flex-direction: column; align-items: center;}
.row{ flex-direction: row;}
.column{ flex-direction: column;}
img{ max-width: 100%; width: 100%; height: auto;}
@media screen and (min-width: 800px) {
body{overflow-x:hidden; overflow-y:visible;}
}

/*==============================================
  cursor
================================================*/
@media screen and (max-width: 800px) {
#cursor, #cursor *{ display: none;}
}
#cursor{ opacity: 1; z-index: 10000001000000; position: fixed; pointer-events: none;}
#cursor div{ width:10px; height:10px; position: absolute; left: 0%; top: 0%; pointer-events: none;  border-radius: 100%; margin: -5px 0 0 -5px; background: #000;}
#cursor div::after{ width:10px; height:10px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: 30px 0 0 30px; pointer-events: none; content: ""; -webkit-transition:0.0s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; opacity: 0; mix-blend-mode: hard-light; }
#cursor div.act::after{ opacity: 1; width:60px; height:60px; margin: 0;}
#cursor div.act1::after{ opacity: 1; width:20px; height:20px; margin: 0;}
#cursor div.active{opacity: 0; background: none; margin: 0;}
#cursor div.act, 
#cursor div.act1, 
#cursor div.actF{ background: none}
#cursor.act{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: multiply;}
#cursor.act1{ display: block; border-radius: 100%; margin: -10px 0 0 -10px; mix-blend-mode: hard-light;}
#cursor div.act .l1{ border: solid 1px #444; width: 60px; height: 60px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; }
#cursor div.act1 .l1{ border: solid 1px #444; width: 20px; height: 20px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; }
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}
/* hover:円形 */
#cursor div.actF{ width: 90px !important; height: 90px !important; background: none;}
#cursor.actF{ display: block; border-radius: 100%; margin: -45px 0 0 -45px; mix-blend-mode:multiply;}
#cursor div.actF::after{ opacity: 0.8; width: 90px; height: 90px; margin: 0; margin: -45px 0 0 -45px; mix-blend-mode: hard-light;}
#cursor div.actF .l1{ border: solid 1px #fff; width: 90px; height: 90px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursoractF 1.2s ease-in infinite forwards; }
@keyframes cursoractF{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(0.4,0.4); opacity: 0;}
}
/* hover:「」*/
#cursor div span{}
#cursor div span.l1::before, 
#cursor div span.l1::after, 
#cursor div span.l2::before, 
#cursor div span.l2::after, 
#cursor div span.l3::before, 
#cursor div span.l3::after,
#cursor div span.l4::before, 
#cursor div span.l4::after{-webkit-transition:0.2s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; width: 0px; height: 0px; position: absolute; content: ""; background: none;}
#cursor div span.l1::before, 
#cursor div span.l1::after{left: 0; top: 0;}
#cursor div span.l2::before, 
#cursor div span.l2::after{ right: 0; top: 0;}
#cursor div span.l3::before, 
#cursor div span.l3::after{ left: 0; bottom: 0;}
#cursor div span.l4::before, 
#cursor div span.l4::after{ right: 0; bottom: 0; }
/* アクティブ */
#cursor div.active span.l1::before, 
#cursor div.active span.l2::before, 
#cursor div.active span.l3::before, 
#cursor div.active span.l4::before{ width: 1px; height: 10px; position: absolute; background: #f5dfc6; opacity: 0.5;}
#cursor div.active span.l1::after, 
#cursor div.active span.l2::after, 
#cursor div.active span.l3::after, 
#cursor div.active span.l4::after{width: 10px; height: 1px; position: absolute; background: #f5dfc6; opacity: 0.5;}

/*==============================================
  共通パーツ
================================================*/
.move{ transform: translate(0px, 100px); opacity: 0;}
.move.setView{animation: setMove 0.8s ease-out 1 forwards;}
.move2{ transform: translate(0px, 60px); opacity: 0;}
.move2.setView{animation: setMove 0.4s ease-out 1 forwards;}

@keyframes setMove{
0% { transform: translate(0px, 80px); opacity: 0;}
100% { transform: translate(0px, 0); opacity: 1;}
}

/*================================
ヘッダー
===================================*/
@media screen and (min-width: 800px) {
header { width: 100%; height: 160px; display: flex; justify-content: center; overflow: hidden; background: #000; position: relative; z-index: 100000;}
header nav{ width: 100%; padding: 0 1%; display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: flex-start;}
/**/
header nav .lang-nav { width: 100%; display: block; margin: 30px 15px 0 0;}
header nav .lang-nav ul{ display: flex; justify-content: flex-end;}
header nav .lang-nav ul li{ display: block; margin-left: 15px;}
header nav .lang-nav ul li > *{ height: 30px; display: flex; align-items: center; font-size: 15px; color: #fff; position: relative; transition: 0;}
header nav .lang-nav ul li span{ border-bottom: solid 1px #fff;}
header nav .lang-nav ul li a::after{ width: 0; height: 1px; content: ""; background: #fff; position: absolute; bottom: 0; left: 0; transition: 0.2s;}
header nav .lang-nav ul li a:hover::after{ width: 100%;}
header nav .lang-nav ul li a:hover{ color: #aaa;}
/**/
header nav .header-menu{ width: 100%; display: flex; justify-content:space-between; margin: 30px 0 26px;}
header nav .header-menu h1{ width: 205px; display: block;}
header nav .header-menu h1 a{ display: block;}
header nav .header-menu h1 a img{ width: 100%; height: auto;}
header nav .header-menu ul{ width: calc(100% - 260px); display: flex; justify-content: space-between;}
header nav .header-menu ul li{ margin: 0 5px;}
header nav .header-menu ul li.top{ display: none;}
header nav .header-menu ul li a{ display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 15px; color: #fff; font-weight: 500; position: relative; transition: 0.0s !important;}
header nav .header-menu ul li a:hover{ color: #ccc;}
header nav .header-menu ul li a::after{ width: 0; height: 1px; content: ""; background: #ccc; position: absolute; bottom: 0; left: 50%; transition: 0.4s;}
header nav .header-menu ul li a:hover::after{ width: 100%; left: 0;}
}
@media screen and (min-width: 800px) and (max-width: 1050px) {
header nav .header-menu ul li a{ padding: 0 5px;}
header nav .header-menu ul{ width: auto; flex: 1; margin-left: 3%;}
}
@media screen and (min-width: 800px) and (max-width: 900px) {
header nav .header-menu h1{ width: 20%;}
header nav .header-menu ul li a{ font-size: 12px;}
}

@media screen and (max-width: 800px) {
header { width: 100%; height: 100vh; position: fixed; right: -110vw; top: 0; display: block; overflow-y:auto; overflow-x: hidden; background: #000; z-index: 100000;}
.openMenu header{ animation: openMenu 0.2s ease-out 1 forwards;}
header nav{ width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; position: relative;}
/**/
header nav .lang-nav { width:40%; display: block; margin-left:57%; padding: 60px 0 0 0;}
header nav .lang-nav ul{ display: flex; justify-content: flex-start;}
header nav .lang-nav ul li{ max-width: 40%; display: block; margin-left: 20px;}
header nav .lang-nav ul li > *{ height: 24px; display: flex; align-items: center; font-size: 11px; letter-spacing: 0; color: #fff; position: relative; transition: 0;}
header nav .lang-nav ul li span{ border-bottom: solid 2px #999; color: #aaa;}
/**/
header nav .header-menu{ width: 100%; display: flex; margin-top: 40px; }
header nav .header-menu h1{ width: 50%; position: absolute; left: 15px; top: 50px;}
header nav .header-menu h1 a{ display: block;}
header nav .header-menu h1 a img{ width: 100%; max-width: 200px; height: auto;}
header nav .header-menu ul{ width: 100%; display: flex; flex-direction: column; padding: 0 5% 40px;}
header nav .header-menu ul li{ width: 100%;}
header nav .header-menu ul li a{ min-height: 80px; display: flex; justify-content: flex-start; align-items: center; color: #fff; font-weight: 500; transition: 0; font-size: 18px; letter-spacing: 0.1em; border-top: solid 1px rgba(255,255,255,.2); padding-left: 20px; position: relative;}
header nav .header-menu ul li:last-child a{ border-bottom: solid 1px rgba(255,255,255,.2);}	
header nav .header-menu ul li a::before{ content: "・"; color: #fff; position: absolute; line-height: 20px; top: 50%; left: 0; margin-top: -10px;}
header nav .header-menu ul li a:hover{ color: #ccc;}
header nav .header-menu ul li a::after{ width: 0; height: 1px; content: ""; background: #ccc; position: absolute; bottom: 0; left: 0%; transition: 0.4s;}
header nav .header-menu ul li a:hover::after{ width: 100%;}
}
@keyframes openMenu{
0% { right: -110vw;}
100% { right: 0vw;}
}


/*==============================================
  header menuBtnとspheader
================================================*/
@media screen and (min-width: 800px) {
#menuBtn{ display: none;}
.spheader {display: none;}
}
@media screen and (max-width: 800px) {
#menuBtn{ width: 60px; height: 60px; display: flex; justify-content: flex-end; position: fixed; right: 5px; top:5px; z-index: 10000000; transition: 0.4s;}
#menuBtn .menuBtn-line{ width: 50px; height: 50px; margin: 5px; display: block; position: relative; border-radius: 6px; background: rgba(0,0,0,.9);}
.openMenu #menuBtn .menuBtn-line { background: #fff;}
#menuBtn .menuBtn-line::after{ width:24px; height: 1px; background: #fff; position: absolute; left: 13px; top: 50%; content: ""; transition: 0.4s;}
.openMenu #menuBtn .menuBtn-line::after { width: 0px;}
#menuBtn .menuBtn-line .l1, 
#menuBtn .menuBtn-line .l2{ width: 24px; height: 1px; position: absolute; left: 13px; top: 50%; background: #fff; transition: 0.4s;}
#menuBtn .menuBtn-line .l1{ margin-top: 8px;}
#menuBtn .menuBtn-line .l2{ margin-top: -8px;}
.openMenu #menuBtn .menuBtn-line .l1{ margin-top: 0px; transform:rotate(45deg); background: #000;}
.openMenu #menuBtn .menuBtn-line .l2{ margin-top: 0px; transform:rotate(-45deg); background: #000;}
/**/
.spheader { width:100%; height: 70px; position: fixed; left: 0; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding-right: 70px; background: #000;}
.spheader img{ height: 30px; width: auto; margin: 20px 10px;}
.spheader .lang{ display: flex; justify-content: flex-end; align-items: center; flex: 1; }
.spheader .lang * { height: 30px; display: flex; justify-content: center; align-items: center; font-size: 10.5px; letter-spacing: 0; color: #ccc; margin-right: 10px; padding: 0 5px; }
.spheader .lang a{ color: #fff; padding-bottom: 4px;}
.spheader .lang span{ border-bottom: solid 2px #aaa;}
}



/*==============================================
  footer
================================================*/
footer{ width: 100%; display: flex; justify-content: center; background: #000; padding: 55px 0 70px; }
footer .inner{ display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 1%;}
footer .inner .left{ display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;}
footer .inner .left dl{ display: flex; flex-direction: column; margin-right: 55px;}
footer .inner .left dl *{ font-size: 13px; color: #fff; line-height: 1.6em;}
footer .inner .left dl dt{}
footer .inner .left dl dd{}
footer .inner .left dl dd a{ color: #fff; text-decoration: underline;}
footer .inner .left dl dd a:hover{ color: #ccc; text-decoration: none;}
/**/
footer .inner .right{ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
footer .inner .right p{ display: flex; justify-content: flex-end;}
footer .inner .right p a{ display: block; margin-right: 10px;}
footer .inner .right p a:hover{ opacity: 0.7;}
footer .inner .right p a img{ width: 40px; height: auto;}
footer .inner .right ul{ display: flex; justify-content: flex-end; margin-top: 25px;}
footer .inner .right ul li{ display: block;}
footer .inner .right ul li:first-child::after{ content: "|"; color: #fff;}
footer .inner .right ul li a{ display: inline-block; padding: 0 5px; margin: 0 5px; color: #fff; position: relative; font-size: 12px;}


@media screen and (max-width: 900px) {
footer{ padding: 50px 3%; }
footer .inner{  flex-direction: column; justify-content: center; align-items: center;}
footer .inner .right p a{ margin:0 10px;}
footer .inner .right{justify-content: center; align-items: center; margin-top: 70px;}
}

@media screen and (max-width: 700px) {
footer .inner{ justify-content: center;}
footer .inner .left{ flex-direction: column; align-items: flex-start;}
footer .inner .left dl{ margin:0 ;}
footer .inner .left dl:nth-child(2){ margin:40px 0 0 ;}

}

/*===================
 aside bnr-area
=====================*/
aside.bnr-area{ width: 100%; padding: 20px 5% 80px; display: flex; flex-direction: column; justify-content: center; align-items: center;}

@media screen and (max-width: 600px) {
	aside.bnr-area{}
}

/*-----------------------------
news
-------------------------*/
#news{ padding-bottom: 90px;}
#news .inner{ flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;}
#news .inner h2{ width: 100%; display: block; margin-bottom: 20px; padding: 0 1.5%; }
#news .inner h2 a{ font-size: 26px; font-weight: bold; text-decoration: none;}
#news .inner h2 a:hover{ text-decoration: underline; color: #555;}
#news .inner .box { display: flex;  width: 33%; padding: 0 1.5% 30px;}
#news .inner .box a { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; }
#news .inner .box a > *{ padding: 0 5px 10px;} 
#news .inner .box a .image{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; overflow: hidden; aspect-ratio: 45 / 26; }
#news .inner .box a .image img{ width: 100%; display: block; padding: 0; transition: 0.6s;}
#news .inner .box a .date{ margin-top: 20px; display: block; font-size: 18px;}
#news .inner .box a h3{ margin: 0; font-size: 22px; font-weight: bold;}
#news .inner .box a .txt{ font-size: 18px; line-height: 1.7em;}
#news .inner .box a:hover h3{ text-decoration: underline; color: #666;}
#news .inner .box a:hover .image img{ transition: 0.5s; transform: scale(1.06,1.06);}
@media screen and (max-width: 950px) {
#news .inner .box a .date{ font-size:16px;}
#news .inner .box a h3{ font-size: 18px;}
#news .inner .box a .txt{ font-size: 14px; line-height: 1.6em;}
}
@media screen and (max-width: 700px) {
#news .inner{ flex-direction: column; align-items: center;}
#news .inner h2{ width: 90%; margin: 0 5% 20px;}
#news .inner h2 a{ padding-left: 5%;}
#news .inner .box { width: 100%; max-width: 450px; padding: 0 5% 30px; margin-bottom: 50px;}
#news .inner .box a .date{ margin-top: 5px;} 
#news .inner .box a > *{ padding: 0 5px 5px;} 
}




/*===================
 404
=====================*/
#not404 { padding: 70px 0;}
#not404 .wrap{ display: flex; justify-content: center;}
#not404 .wrap .inner{ width:auto !important; max-width: 90% !important; padding: 20px 0 60px;}
#not404 .wrap .inner h1{ display: flex; justify-content: center;}
#not404 .wrap .inner h1 b{ display: block; text-align: center; padding:15px 30px; border: solid 2px #111; border-radius: 6px;}
#not404 .wrap .inner h1 b br{ display: none;}
#not404 .wrap .inner p{ display: block; margin-top: 20px; font-size: 18px; text-align: center;}
#not404 .wrap .inner p img{ width: 160px; margin: 20px 0 20px -10px; display: none;}
@media screen and (max-width: 850px) {
#not404 .wrap .inner p img{ display: block; margin: 50px auto;}
#not404 .wrap .inner p{ text-align: left;}
}
@media screen and (max-width: 650px) {
#not404 .wrap .inner p img{ margin: 30px auto;}
#not404 .wrap .inner h1 b{ font-size: 5.0vw; line-height: 1.4em;}
#not404 .wrap .inner h1 b br{ display: block;}
#not404 .wrap .inner p{ font-size: 3.8vw;}
}




/*================================
ページリンク 次へ・一覧・前へ
===================================*/
/*次へボタン*/
#blog-post-bottom{ padding: 0 0 60px; display: flex; justify-content: center;}
#blog-post-bottom .inner{ max-width: 800px; padding: 0 4%;}
#blog-post-bottom #blog_page_link ul{ display: flex; flex-direction: row; justify-content: space-between;}
#blog-post-bottom #blog_page_link ul li{ display: block; width: 20%; margin: 0 3%; }
#blog-post-bottom #blog_page_link ul li.list{ width: 38%;}
#blog-post-bottom #blog_page_link ul li > *{ line-height: 50px; text-align: center; display: block; font-size: 12px; border-radius: 4px;}
#blog-post-bottom #blog_page_link ul li a{ width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; border: solid 1px #555; text-decoration: none; color: #111; font-weight: 400; position: relative;}
#blog-post-bottom #blog_page_link ul li a span{ font-size: 12px;}
#blog-post-bottom #blog_page_link ul li a:hover{ border: solid 1px 000; box-shadow: 0 0 0 2px #000;}
#blog-post-bottom #blog_page_link ul li > span{ background: #e5e5e5; color: #888;}
/*icon*/
#blog-post-bottom #blog_page_link ul li.list a span, 
#blog-post-bottom #blog_page_link ul li.list a span::before, 
#blog-post-bottom #blog_page_link ul li.list a span::after{ content: ""; display: block; width: 20px; height: 2px; position: absolute; background: #111; transition: 0.3s;}
#blog-post-bottom #blog_page_link ul li.list a span{ margin-top: -1px; left: 15%; top: 50%;}
#blog-post-bottom #blog_page_link ul li.list a span::before{ margin-top: -6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a span::after{ margin-top: 6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::before{ margin-top: -4px;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::after{ margin-top: 4px;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 10px; height: 10px; display: block; content: ""; position: absolute; border-bottom: solid 3px #111; top: 50%; margin-top: -7px; transition: 0.4s;}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::before{ left: 8%; border-left: solid 3px #111; transform:rotate(45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a:hover::before{ left:6%;}
#blog-post-bottom #blog_page_link ul li:nth-child(2) a::before{ display: none;}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::before{ right: 5%; border-right: solid 3px #111; transform:rotate(-45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a:hover::before{ right:5%;}
@media screen and (max-width:800px) {
#blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;}
#blog-post-bottom #blog_page_link ul li.list a span{ left: 8%;}
}
@media screen and (max-width:600px) {
#blog-post-bottom{ padding: 0 0 30px;}

#blog-post-bottom #blog_page_link ul li:nth-child(1) span{ padding-left: 12%;}
#blog-post-bottom #blog_page_link ul li:nth-child(3) span{ padding-right: 12%;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 8px; height: 8px; margin-top: -5px;}
#blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;}
#blog-post-bottom #blog_page_link ul li.list a{ padding-left: 8%;}
#blog-post-bottom #blog_page_link ul li a span, 
#blog-post-bottom #blog_page_link ul li.list a, 
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after, 
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ font-size: 3.0vw; letter-spacing: 0;}
}