@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-x: visible;}
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: 800px){
html {height: 100%;}
}
@media screen and (max-width: 320px){
html, body {min-width:320px;}
}


::selection { background: rgba(0,0,0,.5); color: #fff;}
::-moz-selection { background: rgba(0,0,0,.5); color: #fff;}


/*===================
 commons
=====================*/
:root {
--color-contact: #ca5254;
--color-contact2: #fd843a;
--color-contact-hover: #982f2f;
--link-color:#4e8280;
--link-color-hover:#1c4342;
--create-color:linear-gradient(90deg,rgba(225, 235, 231, 1) 23%, rgba(230, 237, 240, 1) 61%, rgba(242, 241, 228, 1) 89%);
--about-color:linear-gradient(90deg,rgba(225, 235, 231, 1) 23%, rgba(230, 237, 240, 1) 61%, rgba(242, 241, 228, 1) 89%);
--column-color:linear-gradient(90deg,rgba(225, 235, 231, 0.6) 23%, rgba(230, 237, 240, 0.6) 61%, rgba(242, 241, 228, 0.6) 89%);
}

/*===================
 common
=====================*/
.center{ justify-content: center; align-items: center; text-align: center;}
.txtLeft{ text-align: left;}
.txtRight{ text-align: right;}
.txtCenter{ text-align: center;}
.floatLeft{ float: left;}
.floatRight{ float: right;}
.fTitle span, .fTitle60 span{ will-change: transform, opacity;}
/**/
.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;}

.font8{ font-size: 8px !important;}
.font9{ font-size: 9px !important;}
.font10{ font-size: 10px !important;}
.font11{ font-size: 11px !important;}
.font12{ font-size: 12px !important;}
.font13{ font-size: 13px !important;}
.font14{ font-size: 14px !important;}
.font15{ font-size: 15px !important;}
.font16{ font-size: 16px !important;}

.block{ display: block;}
.bkfff{ background: #fff;}
.bkeee{ background: #eee;}
.bkccc{ background: #ccc;}
.bkddd{ background: #ddd;}

/*===================
 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;}


/*===================
 アニメーション
=====================*/

.mvAnime > span, 
.mvAnime2 > span, 
.setAnime > span { will-change: transform, opacity; opacity: 0; overflow: hidden; -webkit-transform: translateY(60px); transform: translateY(60px); }
.opBody .mvAnime span, 
.opBody1 .mvAnime2 span, 
.setView.setAnime > span{ opacity:1; -webkit-transform: translateY(0px); transform: translateY(0px);}
.opBody .mvAnime span:nth-child(1), 
.opBody1 .mvAnime2 span:nth-child(1), 
.setView.setAnime > span:nth-child(1){ transition:0.6s 0.0s !important;}
.opBody .mvAnime span:nth-child(2), 
.opBody1 .mvAnime2 span:nth-child(2), 
.setView.setAnime > span:nth-child(2){ transition:0.6s 0.05s !important;}
.opBody .mvAnime span:nth-child(3), 
.opBody1 .mvAnime2 span:nth-child(3), 
.setView.setAnime > span:nth-child(3){ transition:0.6s 0.1s !important;}
.opBody .mvAnime span:nth-child(4), 
.opBody1 .mvAnime2 span:nth-child(4), 
.setView.setAnime > span:nth-child(4){ transition:0.6s 0.15s !important;}
.opBody .mvAnime span:nth-child(5), 
.opBody1 .mvAnime2 span:nth-child(5), 
.setView.setAnime > span:nth-child(5){ transition:0.6s 0.2s !important;}
.opBody .mvAnime span:nth-child(6), 
.opBody1 .mvAnime2 span:nth-child(6), 
.setView.setAnime > span:nth-child(6){ transition:0.6s 0.25s !important;}
.opBody .mvAnime span:nth-child(7), 
.opBody1 .mvAnime2 span:nth-child(7), 
.setView.setAnime > span:nth-child(7){ transition:0.6s 0.3s !important;}
.opBody .mvAnime span:nth-child(8), 
.opBody1 .mvAnime2 span:nth-child(8), 
.setView.setAnime > span:nth-child(8){ transition:0.6s 0.35s !important;}
.opBody .mvAnime span:nth-child(9), 
.opBody1 .mvAnime2 span:nth-child(9), 
.setView.setAnime > span:nth-child(9){ transition:0.6s 0.4s !important;}
.opBody .mvAnime span:nth-child(10), 
.opBody1 .mvAnime2 span:nth-child(10), 
.setView.setAnime > span:nth-child(10){ transition:0.6s 0.45s !important;}
.opBody .mvAnime span:nth-child(11), 
.opBody1 .mvAnime2 span:nth-child(11), 
.setView.setAnime > span:nth-child(11){ transition:0.6s 0.5s !important;}
.opBody .mvAnime span:nth-child(12), 
.opBody1 .mvAnime2 span:nth-child(12), 
.setView.setAnime > span:nth-child(12){ transition:0.6s 0.6s !important;}
.opBody .mvAnime span:nth-child(13), 
.opBody1 .mvAnime2 span:nth-child(13), 
.setView.setAnime > span:nth-child(13){ transition:0.6s 0.65s !important;}
.opBody .mvAnime span:nth-child(14), 
.opBody1 .mvAnime2 span:nth-child(14), 
.setView.setAnime > span:nth-child(14){ transition:0.6s 0.7s !important;}
.opBody .mvAnime span:nth-child(15), 
.opBody1 .mvAnime2 span:nth-child(15), 
.setView.setAnime > span:nth-child(15){ transition:0.6s 0.75s !important;}
.opBody .mvAnime span:nth-child(16), 
.opBody1 .mvAnime2 span:nth-child(16), 
.setView.setAnime > span:nth-child(16){ transition:0.6s 0.8s !important;}
.opBody .mvAnime span:nth-child(17), 
.opBody1 .mvAnime2 span:nth-child(17), 
.setView.setAnime > span:nth-child(17){ transition:0.6s 0.85s !important;}
.opBody .mvAnime span:nth-child(18), 
.opBody1 .mvAnime2 span:nth-child(18), 
.setView.setAnime > span:nth-child(18){ transition:0.6s 0.9s!important;}
.opBody .mvAnime span:nth-child(19), 
.opBody1 .mvAnime2 span:nth-child(19), 
.setView.setAnime > span:nth-child(19){ transition:0.6s 0.95s!important;}
.opBody .mvAnime span:nth-child(20), 
.opBody1 .mvAnime2 span:nth-child(20), 
.setView.setAnime > span:nth-child(20){ transition:0.6s 1.0s!important;}
.opBody .mvAnime span:nth-child(21), 
.opBody1 .mvAnime2 span:nth-child(21), 
.setView.setAnime > span:nth-child(21){ transition:0.6s 1.05s!important;}
.opBody .mvAnime span:nth-child(22), 
.opBody1 .mvAnime2 span:nth-child(22), 
.setView.setAnime > span:nth-child(22){ transition:0.6s 1.1s!important;}
.opBody .mvAnime span:nth-child(23), 
.opBody1 .mvAnime2 span:nth-child(23), 
.setView.setAnime > span:nth-child(23){ transition:0.6s 1.15s!important;}
.opBody .mvAnime span:nth-child(24), 
.opBody1 .mvAnime2 span:nth-child(24), 
.setView.setAnime > span:nth-child(24){ transition:0.6s 1.2s!important;}
.opBody .mvAnime span:nth-child(25), 
.opBody1 .mvAnime2 span:nth-child(25), 
.setView.setAnime > span:nth-child(25){ transition:0.6s 1.25s!important;}
.opBody .mvAnime span:nth-child(26), 
.opBody1 .mvAnime2 span:nth-child(26), 
.setView.setAnime > span:nth-child(26){ transition:0.6s 1.3s!important;}
.opBody .mvAnime span:nth-child(27), 
.opBody1 .mvAnime2 span:nth-child(27), 
.setView.setAnime > span:nth-child(27){ transition:0.6s 1.35s!important;}
.opBody .mvAnime span:nth-child(28), 
.opBody1 .mvAnime2 span:nth-child(28), 
.setView.setAnime > span:nth-child(28){ transition:0.6s 1.4s!important;}
.opBody .mvAnime span:nth-child(29), 
.opBody1 .mvAnime2 span:nth-child(29), 
.setView.setAnime > span:nth-child(29){ transition:0.6s 1.45s!important;}
.opBody .mvAnime span:nth-child(30), 
.opBody1 .mvAnime2 span:nth-child(30), 
.setView.setAnime > span:nth-child(30){ transition:0.6s 1.5s!important;}
.opBody .mvAnime span:nth-child(31), 
.opBody1 .mvAnime2 span:nth-child(31), 
.setView.setAnime > span:nth-child(31){ transition:0.6s 1.55s!important;}
.opBody .mvAnime span:nth-child(32), 
.opBody1 .mvAnime2 span:nth-child(32), 
.setView.setAnime > span:nth-child(32){ transition:0.6s 1.6s!important;}
.opBody .mvAnime span:nth-child(33), 
.opBody1 .mvAnime2 span:nth-child(33), 
.setView.setAnime > span:nth-child(33){ transition:0.6s 1.65s!important;}
.opBody .mvAnime span:nth-child(34), 
.opBody1 .mvAnime2 span:nth-child(34), 
.setView.setAnime > span:nth-child(34){ transition:0.6s 1.7s!important;}
.opBody .mvAnime span:nth-child(35), 
.opBody1 .mvAnime2 span:nth-child(35), 
.setView.setAnime > span:nth-child(35){ transition:0.6s 1.75s!important;}
.opBody .mvAnime span:nth-child(36), 
.opBody1 .mvAnime2 span:nth-child(36), 
.setView.setAnime > span:nth-child(36){ transition:0.6s 1.8s!important;}
.opBody .mvAnime span:nth-child(37), 
.opBody1 .mvAnime2 span:nth-child(37), 
.setView.setAnime > span:nth-child(37){ transition:0.6s 1.85s!important;}
.opBody .mvAnime span:nth-child(38), 
.opBody1 .mvAnime2 span:nth-child(38), 
.setView.setAnime > span:nth-child(38){ transition:0.6s 1.9s!important;}
.opBody .mvAnime span:nth-child(39), 
.opBody1 .mvAnime2 span:nth-child(39), 
.setView.setAnime > span:nth-child(39){ transition:0.6s 1.95s!important;}
.opBody .mvAnime span:nth-child(40), 
.opBody1 .mvAnime2 span:nth-child(40), 
.setView.setAnime > span:nth-child(40){ transition:0.6s 2.0!important;}

.opBody2 #page-mv .mvAnime2 *, 
.opBody2 #page-mv .inner .titleArea h1 .txtIn::after, 
.opBody2 #page-mv .setAnime * { transition:0.0s 0.0s !important;}


/*===================
 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;}
.eng, 
.eng *, 
.en{ font-family: 'Jost', sans-serif;}

h1,h2,h3,h4,h5,h6 { font-size:18px; line-height:1.2em;}
p,li,dt,dl,span,td { font-size:16px; line-height:1.6em; letter-spacing: 0.1em;}
.b, b{font-weight: bold;}

@media screen and (max-width: 600px) {
p,li,dt,dl,span,td { font-size:14px;}
}

/*=====================================
	CONTENTS
=======================================*/
article{ width: 100%; display: flex; flex-direction: column; justify-content: center;}
header article{ opacity: 0; z-index: 100;}
main{ display: block; width: 100vw; 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;}
.inner-wrap{ width:100%; max-width: 1280px; display: flex; flex-direction: column;}
.inner1200{ width:100%; max-width: 1200px; display: flex; flex-direction: column;}
.inner1100{ width:100%; max-width: 1100px; display: flex; flex-direction: column;}
.inner1000{ width: 94%; margin:0 3%; max-width: 1000px; display: flex; flex-direction: column;}
.inner900{ width: 94%; margin:0 3%; max-width: 900px; display: flex; flex-direction: column;}
.inner800{ width: 94%; margin:0 3%; max-width: 800px; display: flex; flex-direction: column;}
.wrap{ width: 100%; display: flex; flex-direction: column;}
/**/
.column{ flex-direction: column !important;}
.column-reverse{ flex-direction: column-reverse !important;}
.row{ flex-direction: row !important;}
.row-reverse{ flex-direction: row-reverse !important;}

.flex-row{ width: 100%; display: flex; flex-direction: row ;}
.flex-column{ width: 100%; display: flex; flex-direction: column ;}


/**/
.opBody header, .opBody article{ opacity: 1;}
.contMin, .cont900{ margin:0 auto; overflow:hidden\9; *overflow:hidden;}
.loadWrap, 
#jobs .cf .cont dl, 
#contact .cf a > span::before, 
#contact .cf a > span::after, 
#cursor div.actF::after, 
a.link::before, 
#contact .cf a::after {background:#f3bd3b;}
@media screen and (min-width: 1201px) {.contMin { max-width:1200px;}}
@media screen and (max-width: 1200px) {.contMin { max-width: auto; width:100%; float:left;}}
@media screen and (min-width: 901px) {.cont900 { max-width:900px;}}
@media screen and (max-width: 900px) {.cont900 { max-width: auto; width:100%; float:left;}}
img{ max-width: 100%; width: 100%; height: auto;}
@media screen and (min-width: 800px) {
/*body{overflow-x:hidden; overflow-y:visible;}*/
}
@media screen and (max-width: 800px) {
main, 
.section{ width: 100%;}
}

/*==============================================
  text 色変化
================================================*/
.txtIn{ display: inline-block; position: relative; transition: 0.8s; color: #ccc;}
.txtIn::after{ color:#f3bd3b; width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: attr(data-txt); clip: rect(0,0,200px,0);transition: clip 1.5s linear; transition: 4.0s;}
.setView.txtIn::after{ clip: rect(0,300px,200px,0) !important;}

/*==============================================
  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; }
/*a.a*/
/*#cursor div.cursor_a{ opacity: 0.8; transform: scale(4,4); opacity: 0.6; transition: 0.4s; background: transparent; border-style: solid; border-width: 2px; animation: bk-border 120.0s ease-in infinite forwards;}*/
#cursor div.cursor_a{ background: rgba(0,0,0,.0); box-shadow: 0 0 0 1px #000 inset; transform: scale(3,3); opacity: 0.6; transition: 0.4s; animation: bk-color 120.0s ease-in infinite forwards; animation: case2 2.0s ease-in infinite forwards;}
@keyframes case2{
0%{transform: scale(3,3); opacity: 0.5; box-shadow: 0 0 0 1px #000 inset;}
50%{transform: scale(2,2); opacity: 0.2; box-shadow: 0 0 0 8px #000 inset;}
100%{transform: scale(3,3); opacity: 0.5; box-shadow: 0 0 0 1px #000 inset;}
}

/*a.an*/
#cursor div.cursor_an::after{ opacity: 1; width:60px; height:60px; margin: 0;}
#cursor div.cursor_an{ background: none}
#cursor.cursor_an{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: hard-light;}
#cursor div.cursor_an .l1, 
#cursor div.cursor_an .l2{ content: ""; position: absolute; border-radius: 100%;}
#cursor div.cursor_an .l1{ width: 60px; height: 60px; border: solid 2px #444; left: 5px; top: 5px; z-index: 10; animation: cursorAct 2.0s ease-in infinite forwards; background: none;} 
@keyframes cursorAct{
0%{ transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}
#cursor div.cursor_an .l2{ width: 54px; height: 54px;  left: 8px; top: 8px; animation: cursorAct_bk 16.0s ease-in infinite forwards; background:#000; z-index: 1;} 

@keyframes cursorAct_bk{

0% { background:rgb(255, 242, 156); transform:scale(1,1);}
13% { background:rgb(255, 242, 156); transform:scale(1.3,1.3);}
20% { background:rgb(181, 221, 146); transform:scale(1,1);}
33% { background:rgb(181, 221, 146); transform:scale(1.3,1.3);}
40% { background:rgb(140, 223, 223); transform:scale(1,1);}
53% { background:rgb(140, 223, 223); transform:scale(1.3,1.3);}
60% { background:rgb(209, 202, 255); transform:scale(1,1);}
73% { background:rgb(209, 202, 255); transform:scale(1.3,1.3);}
80% { background:rgb(255, 199, 167); transform:scale(1,1);}
93% { background:rgb(255, 199, 167); transform:scale(1.3,1.3);}
100% { background:rgb(255, 242, 156); transform:scale(1,1);}
}


/*a.an*/
#cursor div.cursor_aImage{ width: 200px !important; height: 200px !important; background: none; position: relative;}
#cursor div.cursor_aImage .l1{ width: 160px; height: 160px; display: block; opacity: 1; content: ""; position: absolute; top:-100px; left:-100px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transition: 0.4s;}
#cursor.cursor_aImage div.cursor_aImage .l1{  width: 200px; height: 200px;}

/*a.an*/
#cursor div.cursor_af{ background: none;}
/* hover:円形 */
#cursor div.cursor_af{ width: 140px !important; height: 140px !important; background: none;}
#cursor.cursor_af{ display: block; border-radius: 100%; margin: -70px 0 0 -70px; mix-blend-mode:multiply;}
#cursor div.cursor_af::after{ opacity: 0.8; width: 140px; height: 140px; margin: 0; margin: -65px 0 0 -65px;}
#cursor div.cursor_af .l1{ width: 140px; height: 140px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursoractF 1.2s ease-in infinite forwards; border: solid 1px #000;}
@keyframes cursoractF{
0%{transform:scale(1,1); opacity: 0.4; background: var(--cursor_color3);}
100%{transform:scale(0.4,0.4); opacity: 0; background: var(--cursor_color2);}
}
/*a_close*/
#cursor div.cursor_a_close{ background: none;}
#cursor div.cursor_a_close .l1{ border: solid 1px #fff; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; border-radius: 100%; background:rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center; margin: -50px 0 0 -50px;}
#cursor div.cursor_a_close .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "CLOSE"; color: #fff; font-size: 12px; transition: 0s; padding-top: 30px; font-family: 'Josefin Sans', sans-serif;}
#cursor div.cursor_a_close .l1::after{ content: "×"; transition: 0; color: #fff; font-size: 30px; line-height: 30px; width: 100%; pointer-events: none; text-align: center; position: absolute; left: 0; top: 15px; font-weight: 200; }

/*a_open*/
#cursor div.cursor_a_open{ background: none;}
#cursor div.cursor_a_open .l1{ border: solid 1px #fff; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; border-radius: 100%; background:var(--color1_2); display: flex; justify-content: center; align-items: center; margin: -30px 0 0 -30px;transition: 0.4s;}
#cursor div.cursor_a_open .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "OPEN"; color: #fff; transition: 0s; padding:5px 0; font-family: 'Josefin Sans', sans-serif; }
#cursor div.cursor_a_open .l1::after{ content: "▼"; transition: 0; color: #fff; line-height: 14px; width: 100%; pointer-events: none; text-align: center; position: absolute; left: 0; bottom: 5px; font-weight: 200; font-size: 9px;}

/*cursor_a_down*/
#cursor div.cursor_a_down{ background: none;}
#cursor div.cursor_a_down .l1{ width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; border-radius: 100%; border: solid 1px #999; display: flex; justify-content: center; align-items: center; margin: -18px 0 0 -18px; transition: 0.4s; background: rgba(255,255,255,.6);}
#cursor div.cursor_a_down .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "▼" !important; font-size: 9px; color: #555; transition: 0s;}

/*cursor_a_up*/
#cursor div.cursor_a_up{ background: none;}
#cursor div.cursor_a_up .l1{ width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; border-radius: 100%; border: none; display: flex; justify-content: center; align-items: center; margin: -18px 0 0 -18px; transition: 0.4s;}
#cursor div.cursor_a_up .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "▲" !important; font-size: 9px; color: #fff; background:var(--cursor_color2); mix-blend-mode: multiply; transition: 0s; border-radius: 100%;}


/*==============================================
  共通パーツ
================================================*/
/*タイトル*/
.ttl{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
.ttl .icon{ display: flex; justify-content: flex-start; align-items: center; line-height: 1em; font-size: 14px; letter-spacing: 4px; margin: 10px 0;}
.ttl .icon span{ animation: bk-color 120.0s ease-in infinite forwards;}
.ttl .icon span{ width: 16px; height: 16px; margin-right: 8px; border-radius: 100%; position: relative; overflow: hidden;}
.ttl .icon span::before{ width: 56%; height: 36%; content: ""; display: block; border-bottom: solid 2px #fff; border-left: solid 2px #fff; position: absolute; left: 16%; top: 15%; z-index: 5; transform: rotate(-45deg); transition: 1.0s 0.4s; clip-path:inset(0 100% 0 0);}
.ttl .icon.setView span::before{ clip-path:inset(0 0% 0 0);}
.ttl .setTit > span{ font-size: 20px; display: inline-block; opacity: 0; -webkit-transition:0.3s ease-in; -moz-transition:0.3s ease-in; -o-transition:0.3s ease-in; transition:0.3s ease-in; overflow: hidden; -webkit-transform: translateY(20px); transform: translateY(20px);}
.ttl .setTit > span.on{ margin: 0; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
/*リンクボタン*/
.linkBtn{ display: flex; width: auto !important; justify-content: flex-start; align-items: center; font-size: 14px;}
.linkBtn .i{ width: 68px; height: 34px; display: block; border-radius: 40px; background: rgba(0,0,0,.1); position: relative; overflow: hidden; margin-right:8px; }
.linkBtn:hover .i{ background: rgba(0,0,0,.0);}
.linkBtn .i::before{ width: 100%; height: 100%; border-radius: 40px; content: ""; position: absolute;  left:0px; top: 0px; z-index: 1; animation: bk-color 120.0s ease-in infinite forwards; transition: 0.3s; opacity: 0;}
.linkBtn:hover .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBtn .i::after{ width: calc(50% - 4px); height: calc(100% - 4px); border-radius: 100%; content: ""; background: #fff; position: absolute; right: 2px; top: 2px; z-index: 5; transition: 0.4s;}
.linkBtn:hover .i:after{ right:calc(50% + 2px);}

@media screen and (max-width: 800px) {
.linkBtn .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBtn .i:after{ right:calc(50% + 2px);}

}

/*リンク：ボックス*/
.linkBoxL{ display: block; padding-left: 90px; position: relative;}
.linkBoxL .i{ width: 68px; height: 34px; display: block; border-radius: 40px; background: rgba(0,0,0,.1); position: absolute; left: 0; top: 50%; margin-top: -17px; overflow: hidden; margin-right:8px; }
.linkBoxL:hover .i{ background: rgba(0,0,0,.0);}
.linkBoxL .i::before{ width: 100%; height: 100%; border-radius: 40px; content: ""; position: absolute;  left:0px; top: 0px; z-index: 1; animation: bk-color 120.0s ease-in infinite forwards; transition: 0.3s; opacity: 0;}
.linkBoxL:hover .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBoxL .i::after{ width: calc(50% - 4px); height: calc(100% - 4px); border-radius: 100%; content: ""; background: #fff; position: absolute; right: 2px; top: 2px; z-index: 5; transition: 0.4s;}
.linkBoxL:hover .i:after{ right:calc(50% + 2px);}
@media screen and (max-width: 800px) {
.linkBoxL .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBoxL .i:after{ right:calc(50% + 2px);}
}



/*リンク：ボックス*/
.linkBoxR{ display: block; padding-right: 90px; position: relative;}
.linkBoxR .i{ width: 68px; height: 34px; display: block; border-radius: 40px; background: rgba(0,0,0,.1); position: absolute; right: 0; top: 50%; margin-top: -17px; overflow: hidden; margin-right:8px; }
.linkBoxR:hover .i{ background: rgba(0,0,0,.0);}
.linkBoxR .i::before{ width: 100%; height: 100%; border-radius: 40px; content: ""; position: absolute;  left:0px; top: 0px; z-index: 1; animation: bk-color 120.0s ease-in infinite forwards; transition: 0.3s; opacity: 0;}
.linkBoxR:hover .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBoxR .i::after{ width: calc(50% - 4px); height: calc(100% - 4px); border-radius: 100%; content: ""; background: #fff; position: absolute; right: 2px; top: 2px; z-index: 5; transition: 0.4s;}
.linkBoxR:hover .i:after{ right:calc(50% + 2px);}

@media screen and (max-width: 800px) {
.linkBoxR .i:before{ opacity: 1; transition: 0.3s 0.2s;}
.linkBoxR .i:after{ right:calc(50% + 2px);}

}





/*==============================================
  共通パーツ
================================================*/
/*タイトルアニメーション
.setTit{ opacity: 0;}
.setTit.setView{ opacity: 1;}
.setTit span{ opacity: 0; transition: 0.3s;}
.setTit span.on{ opacity:1;}
*/
.setTit.anime-delay *{ transition-delay:0.8s; }

/*--------------------
 fTit  spanで囲ってアニメーション
--------------------*/
.fTit{}
.fTitle > span, 
.fTitle60 > span{ display: inline-block; opacity: 0; -webkit-transition:0.3s ease-in; -moz-transition:0.3s ease-in; -o-transition:0.3s ease-in; transition:0.3s ease-in; overflow: hidden; -webkit-transform: translateY(20px); transform: translateY(20px);}
/* font-size */
.fTitle60 > span{ font-size: 60px; font-weight: 200; height: 60px; line-height: 1em; font-family: serif; -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; transition:0.5s ease-out;}
/* 表示 */
.fTitle > span.on, 
.fTitle60 > span.on{ margin: 0; opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}


/*===================
 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;}
}

/*--------------------------
	ローディングアニメーション
--------------------------*/
header, 
.page_logo, 
.contactFix, 
.srv-top, 
main, 
aside, 
footer{ opacity: 0;}
.openpage header, 
.openpage .page_logo, 
.openpage .contactFix, 
.openpage .srv-top, 
.openpage main, 
.openpage aside, 
.openpage footer{ opacity: 1;}
/**/
@media screen and (max-width: 800px) {
.openMenu header::before,
.openMenu header::after{ display: none !important;}
.hp-headMenu nav ul li > div p{ opacity: 1 !important; transition: 0!important;}
}
/*------*/
.transition-overray{ width: 100vw; height: 100vh; position: fixed; position: -webkit-fixed; left: 0px; top: 0px; z-index: 100000100000100000; pointer-events: none; overflow: hidden;}
.nodiv.transition-overray{ display: none;}
.transition.opBody2 .transition-overray{ opacity: 0 !important;}
.transition-overray .to1, 
.transition-overray .to2, 
.transition-overray .to3, 
.transition-overray .to4{ width: 0; height: 100vh; position: fixed; position: -webkit-fixed; left: -100px; top: 0px; border-right: 0px solid transparent;}
.transition-overray .to1{ z-index: 10000; border-bottom: 100vh solid #ff8c7a; transition:0.6s;}
.transition-overray .to2{ z-index: 11000; border-bottom: 100vh solid #ada8a3; transition: 1.0s;}
.transition-overray .to3{ z-index: 12000; border-bottom: 100vh solid #d4cec8; transition: 1.3s;}
.transition-overray .to4{ z-index: 13000; border-bottom: 100vh solid #eee; transition: 1.6s;}

.transition .transition-overray { display: block !important;}
.transition .transition-overray .to1 { left: 0; width: calc(100vw + 900px); border-right: 100px solid transparent;}
.transition .transition-overray .to2 { left: 0; width: calc(100vw + 900px); border-right: 300px solid transparent;}
.transition .transition-overray .to3 { left: 0; width: calc(100vw + 900px); border-right: 500px solid transparent;}
.transition .transition-overray .to4 { left: 0; width: calc(100vw + 900px); border-right: 700px solid transparent;}
.transition-overray .ontp1, 
.transition-overray .ontp2, 
.transition-overray .ontp3{ width: 110vw; height: 100vh; position: fixed; position: -webkit-fixed; left: 0px; top: 0px; z-index: 113000; transition:0.8s; content: ""; border-right: 0px solid transparent;}
.transition-overray .ontp1{ width: calc(100vw + 900px); border-right: 300px solid transparent; z-index: 10000; border-bottom: 100vh solid #ff8c7a;}
.transition-overray .ontp2{ width: calc(100vw + 900px); border-right: 400px solid transparent; z-index: 110000; border-bottom: 100vh solid #d4cec8;}
.transition-overray .ontp3{ width: calc(100vw + 900px); border-right: 700px solid transparent; z-index: 210000; border-bottom: 100vh solid #eee;}
.openpage .transition-overray .ontp1{ width: 0vw; left: -100px; border-right: 0px solid transparent;}
.openpage .transition-overray .ontp2{ width: 0vw; left: -100px; margin-left: -50px; border-right: 0px solid transparent;}
.openpage .transition-overray .ontp3{ width: 0vw; left: -100px; margin-left: -200px; border-right: 0px solid transparent;}
.transition-overray .to4 span, 
.transition-overray .ontp3 span{ position: fixed; position: -webkit-fixed; left: 50%; top: 50%; margin: -50px 0 0 -50px; display: flex; flex-direction: column; width: 100px; height: 100px; justify-content: center; align-items: center; opacity: 1; pointer-events: none; transition: 0.4s;}
.openpage .transition-overray .ontp3 span, 
.openpage .transition-overray .to4 span{ opacity: 0;}
.transition .transition-overray .to4 span{ opacity: 1;}
/*
.transition-overray .to4 span{ margin: 250px 0 0 -100px;}
*/
.transition-overray .to4 span .loadingImg, 
.transition-overray .ontp3 span .loadingImg{ width: 50px; margin: 15px 0;}
.transition-overray .ontp3 .lo{ width: 50px; height: 50px; margin: 15px auto 15px -25px; display: block; background: url("../../asset/img/common/loading.gif") 50% 50% no-repeat; background-size: 50px 50px;}
/*==============================================
 ページャー
================================================*/
.pager { display: flex; flex-direction: row; align-items: center; justify-content: center;}


/*-------------------
下層MV #under-mv
---------------------*/
#under-mv { background: #fff; overflow: visible;}
#under-mv .inner.mvImage{ padding: 0px 0 0 20px; display: flex; position: relative; justify-content: space-between; align-items: center; }
/**/
#under-mv .inner h1{ display: flex; flex-direction: column; margin-top: 20px;}
#under-mv .inner h1 > b{ display: block; font-size: 18px; font-weight: 900; margin-bottom: 5px; letter-spacing: 6px;}
#under-mv .inner h1 .setTit, 
#under-mv .inner h1 .setTit span, 
#under-mv .inner h1 .txtIn::after{ font-size: 34px; font-weight: 900; letter-spacing: 3px; line-height: 1em; vertical-align: baseline;}
#under-mv .inner h1 .setTit{}
#under-mv .inner h1 .setTit span{ color: #ccc;}
#under-mv .inner h1 .txtIn::after{ color: #000;}
#under-mv .inner h1 .eng{ font-weight: 500; font-size: 66px; letter-spacing: 0px; color: #eee; padding-left: 15px; mix-blend-mode: darken; margin-top: -40px; opacity: 0; transition: 0.5s; white-space: nowrap;}
.opBody #under-mv .inner h1 .eng{ opacity: 1; letter-spacing: 1px;}
.opBody #under-mv .inner h1 .txtIn::after {clip: rect(0,500px,200px,0) !important;}
/**/
#under-mv .inner .imgBox{ flex: 1; height: 500px; background: #000; border-radius: 0 0 60px 60px; margin-left: 80px; position: relative;}
#under-mv .inner .imgBox .bkImg{ width: 100%; height: 100%; display: block;  opacity: 0.6; position: relative; z-index:1; border-radius: 0 0 60px 60px; overflow: hidden;}
#under-mv .inner .imgBox::before{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,.6); content: ""; z-index: 8; transition:1.4s;}
.opBody #under-mv .inner .imgBox::before{ width: 0; opacity: 0.1;}
@media screen and (max-width: 1250px){
#under-mv .inner h1 .eng{ font-size: 54px;}
#under-mv .inner .imgBox{ margin: 0 50px 0 ;}
}
@media screen and (max-width: 900px){
#under-mv .inner.mvImage{ height: 100vh; display: flex; flex-direction: column; padding: 0; overflow: hidden;}
#under-mv .inner h1{ height: 40vh; margin:5vh 0 0; padding: 60px 0; align-items: center; justify-content: center;}
#under-mv .inner .imgBox{ width: 100%; height: 60vh; margin: 0px; border-radius: 20px 20px 0 0; position: static;}	
#under-mv .inner .imgBox .bkImg{ border-radius: 20px 20px 0 0;}
#under-mv .inner h1 .setTit, 
#under-mv .inner h1 .setTit span, 
#under-mv .inner h1 .txtIn::after{ font-size: 6.4vw; }
#under-mv .inner h1 .eng{ font-size: 40px; color: #ccc; margin: 10px 0 0; padding: 0; font-weight: 600;}
}
@media screen and (max-width: 600px){
#under-mv .inner h1 .setTit, 
#under-mv .inner h1 .setTit span, 
#under-mv .inner h1 .txtIn::after{ font-size: 8.4vw; }
#under-mv .inner h1 .eng{ font-size:4.0vw;}
}
/**/
#under-mv .inner .imgBox .oomoji{ position: absolute; width: 180px; height: 500px; right:-70px; top: 0px; z-index: 11;  mix-blend-mode: difference;}
#under-mv .inner .imgBox .oomoji p span{ width:180px; height: 150px; display: block; font-size: 150px; line-height: 0.9em; color: #ccc; position: relative; z-index: -99; font-weight: 900; transition: 3.0s; transform:rotate(90deg); margin-bottom: -25px;}
.opBody2 #under-mv .inner .imgBox .oomoji p span{ color: #444;}
#under-mv .inner .imgBox .oomoji p span:nth-child(1), 
#under-mv .inner .imgBox .oomoji p span:nth-child(3){ margin-bottom: -50px;} 
#under-mv .inner .imgBox .oomoji p span:nth-child(4), 
#under-mv .inner .imgBox .oomoji p span:nth-child(5){ margin-bottom: -70px;}
#under-mv .inner .imgBox .oomoji p span::after{ bottom: 0; transition: 3.6s; color: #e5e5e5;}
#under-mv .inner .imgBox .opBody2 .oomoji p span::after{clip: rect(0,600px,200px,0); z-index: 0; color: #e5e5e5;}
@media screen and (max-width: 900px){
#under-mv .inner .imgBox .oomoji{ right:-30px; top: 80px;}
#under-mv .inner .imgBox .oomoji p span{ height: 160px;}
}
@media screen and (max-width: 750px){
#under-mv .inner .imgBox .oomoji{ z-index: 1; pointer-events: none;}
}
@media screen and (max-width: 650px){
#under-mv .inner .imgBox .oomoji{ right:-60px; height: 90vh; top: 0; display: flex; align-items: flex-end;}
#under-mv .inner .imgBox .oomoji p span{ height: 140px; font-size: 120px;}
#under-mv .inner .imgBox .opBody2 .oomoji p span::after{color: #f4f4f4;}
}










/*-------------------
下層MV #page-mv
---------------------*/
#page-mv { width: 100%; display: flex; justify-content: center; align-items: center; background: #fff; padding-top: 60px;}
#page-mv .inner{ width: 94%; display: flex; flex-direction: column; justify-content: flex-start;}
/**/
#page-mv .inner .titleArea{ width: 100%; display: flex; justify-content:space-between; align-items: center; margin: 20vh 20px; position: relative; overflow: hidden;}
#page-mv .inner .titleArea h1{ flex: 1; display: flex; flex-direction: column; position: relative;}
#page-mv .inner .titleArea h1 .setTit, 
#page-mv .inner .titleArea h1 .setTit span, 
#page-mv .inner .titleArea h1 .txtIn::after{ font-size: 32px; font-weight: 200; letter-spacing: 3px; line-height: 1em; vertical-align: baseline;}
#page-mv .inner .titleArea h1 .setTit{}
#page-mv .inner .titleArea h1 .setTit span{ color: #ccc;}
#page-mv .inner .titleArea h1 .txtIn::after{ color: #000;}
#page-mv .inner .titleArea h1 .eng{ position: absolute; z-index: 1; top: -15px; left: 0px; font-weight: 300; font-size: 46px; letter-spacing: 0px; color: #fff; mix-blend-mode: darken; transition: 2.6s; white-space: nowrap; filter: blur(2px); opacity: 0;}
.opBody #page-mv .inner .titleArea h1 .eng{ opacity: 1; letter-spacing: 3px; color: #e0e0e0; top: 0px; left: 50px;}
.opBody #page-mv .inner .titleArea h1 .txtIn::after {clip: rect(0,500px,200px,0) !important;}
/**/
#page-mv .inner .titleArea ul{ display: flex; flex-direction: column; position: relative; margin-right: 10%; animation: page-mv3 2.8s 1 forwards; opacity: 0;}
#page-mv .inner .titleArea ul li{ display: block; margin: 3px 0;}
#page-mv .inner .titleArea ul li a{ display: block; line-height: 20px; font-size: 12px; font-weight: 300; position: relative; color: #777;}
#page-mv .inner .titleArea ul li a:hover{ color: #000;}
#page-mv .inner .titleArea ul li a::after{ width: 0; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; background: #aaa; transition: 0.3s;}
#page-mv .inner .titleArea ul li a:hover::after{ width: 100%;}

#page-mv .inner .titleArea ul li a::before{ content: "・"; line-height: 20px; position: absolute; left: -20px; top: 0;}
#page-mv .inner .titleArea ul li a.active{ color: #000; font-weight: 500;}
#page-mv .inner .titleArea ul li a.active::before{ content: "●"; }
#page-mv .inner .titleArea ul li a.active::after{ display: none !important;}


@keyframes page-mv3{
0%{ opacity: 0;}
70%{ opacity: 0;}
100%{ opacity: 1;}
}

/**/
#page-mv .inner .imgBox{ width: 100%; height: 200px; background: #ddd; border-radius: 4px; margin: 0 0 20vh; position: relative; overflow: hidden;}
#page-mv .inner .imgBox .bkImg{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1;}
#page-mv .inner .imgBox::before, 
#page-mv .inner .imgBox::after{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; content: ""; }
#page-mv .inner .imgBox::before{ z-index: 10; background: rgba(0,0,0,.7); animation: page-mv2 2.2s 1 forwards; }
#page-mv .inner .imgBox::after{ z-index: 15; background: #fff; animation: page-mv1 2.2s 1 forwards; }
@keyframes page-mv1{
0%{ width: 100%;}
40%{ width: 100%;}
80%{ width: 0%;}
100%{ width: 0%;}
}
@keyframes page-mv2{
0%{ width: 100%;}
60%{ width: 100%;}
100%{ width: 0%;}
}
/**/
@media screen and (max-width: 700px){
#page-mv .inner .titleArea{ flex-direction: column; justify-content:flex-start; align-items: center; margin: 10vh 0 5px;}
#page-mv .inner .titleArea > *{ width: 100%;}
#page-mv .inner .titleArea h1{ margin-bottom: 20vh; padding: 0 20px;}
#page-mv .inner .titleArea h1 .setTit, 
#page-mv .inner .titleArea h1 .setTit span, 
#page-mv .inner .titleArea h1 .txtIn::after{ font-size: 7.0vw; }
/**/
#page-mv .inner .titleArea ul{ margin: 0 3%; flex-direction: row; flex-wrap: nowrap;}
#page-mv .inner .titleArea ul li{ margin: 0 5px 5px 0;}
#page-mv .inner .titleArea ul li a{ line-height: 1em; padding: 6px 8px; border: solid 1px #777; border-radius: 20px; font-size: 2.2vw;}
#page-mv .inner .titleArea ul li a:hover{ color: #000;}
#page-mv .inner .titleArea ul li a::after, 
#page-mv .inner .titleArea ul li a:hover::after, 
#page-mv .inner .titleArea ul li a::before, 
#page-mv .inner .titleArea ul li a.active::before{ display: none !important;}
#page-mv .inner .titleArea ul li a.active{ color: #fff; background: #222;}
/**/
#page-mv .inner .imgBox{ height: 40vh;}


}






/*===========
cta-box
=============*/
.cta-box{ width: 94%; margin: 20px 3%; display: flex; flex-direction: column-reverse; align-items: center; padding: 30px; border:solid 3px rgba(255,255,255,.6); background: rgba(0,0,0,.2); transition: 0.2s; box-shadow:0 0 0 0 #fa7a65 inset;}
.cta-box .info{ display: block; color: #fff; font-size: 16px; border-bottom: dotted 1px #ddd; padding: 0 20px 20px 62px; position: relative;}
.cta-box.on{ box-shadow:1100px 0 0 0 #fa7a65 inset; border:solid 3px rgba(255,255,255,1); transition: 0.6s;}
.cta-box .info img{ width: 40px; height: 40px; position: absolute; left: 10px; top: 50%; margin-top: -30px;}
.cta-box h2{ display: flex; flex-direction: column-reverse; align-items: center; margin: 20px 0 15px;}
.cta-box h2 .hh2{ font-size: 12px; letter-spacing: 0; color: #fff;}
.cta-box h2 .hh1{ font-size: 22px; font-weight: bold; color: #fff;}
.cta-box .contactType{ display: flex; flex-direction: row;}
.cta-box .contactType a { margin: 0 10px;}
/**/
.cta-box .contactType a.btnText{ padding: 0 20px; height: 50px; line-height: 46px; display: block; color: #fff; font-weight: bold; font-size: 16px; background: #fa7a65; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: 0.2s;}
.cta-box .btnText:hover{ color: #fa7a65; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,1.0); border-radius: 1px;}
/**/
.cta-box .contactType a.tel{ padding: 0 20px; line-height: 50px; font-weight: bold; display: block; color: #000; font-size: 32px; pointer-events: none; vertical-align: baseline; pointer-events:fill;}
.cta-box .contactType a.tel .t{ font-size: 20px; letter-spacing: 0; vertical-align: baseline; padding: 0 10px 5px 0;}
.cta-box .contactType a.tel .i, 
.cta-box .contactType a.tel br{ display: none;}
/**/
.white.cta-box{ border:solid 3px #fa7a65; background: #fff;}
.white.cta-box .info{ border-bottom: dotted 1px #444;}
.white.cta-box.on .info{ border-bottom: dotted 1px #fff;}
.white.cta-box .info, 
.white.cta-box h2 .hh2, 
.white.cta-box h2 .hh1{ color: #000;}
.white.cta-box.on .info, 
.white.cta-box.on h2 .hh2, 
.white.cta-box.on h2 .hh1{ color: #fff; transition: 0.3s;}
.white.cta-box a.btnText:hover{ color: #fa7a65; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,1.0); border-radius: 1px;}
@media screen and (max-width: 1200px){
.cta-box{ width: 100%; margin: 20px 0%;padding: 30px 20px;}
.cta-box > *{ width: 100%;}
.cta-box .contactType{ justify-content: space-between; margin: 20px 0 10px;}
.cta-box .contactType a { width: 45%; text-align: center;}
}
@media screen and (max-width: 950px){
.cta-box .contactType{ flex-direction: column-reverse; justify-content: center; margin: 0 0 10px;}
.cta-box .contactType a { width: 100%; display: flex; justify-content: center; align-items: center; margin:15px 0;}
.cta-box .contactType a.tel{ border: solid 3px #000; border-radius: 8px; padding: 10px 0; line-height: 1.1em; pointer-events: all;}
.cta-box .contactType a.tel .i{ display: inline; width: auto; padding: 4px 20px; background: #e5e5e5; font-weight: bold; text-align: center; color: #777; font-size: 11px; border-radius: 30px;}
.cta-box .contactType a.tel br{ display: block;}
.cta-box .contactType a.btnText{ height: 100px; line-height: 96px; font-size: 4.4vw; letter-spacing: 0;}
}
@media screen and (max-width: 700px){
.cta-box .contactType a.tel{ line-height: 30px; font-weight: normal; font-size: 22px; letter-spacing: 0;}
.cta-box .contactType a.tel .t{ font-size: 16px; margin-bottom: 30px;}
.cta-box .contactType a.btnText{ height: 120px; line-height: 116px;}
/**/
.cta-box h2{ margin: 15px 0 0px;}
.cta-box h2 .hh2{ font-size: 3.2vw;}
.cta-box h2 .hh1{ font-size: 4.4vw;}
/**/
.cta-box .info{ font-size: 13px; line-height: 1.3em; padding: 0 18px 20px 52px;}
.cta-box .info img{ width: 30px; height: 30px; left: 10px; top: 0px; margin-top: 0px;}
.cta-box .info br{ display: none;}
}

/*================================
aside
===================================*/
#aside { width: 100%; min-height: 500px; display: flex; flex-direction: row; justify-content: center; align-content: flex-end; align-items: center; position: relative; padding-bottom: 40px; z-index: 5;}
#aside::after {width: 100%; height: calc(110% + 150px); position: absolute; left: 0; top: 0; content: ""; z-index: -1; pointer-events: none; transition: 2.8s;}
#aside.setView::after{ background: rgba(0,0,0,.85);}
#aside .inner-aside{ width: 100%; max-width: 1100px; display: block; padding: 50px 5%;}
/**/
#aside .inner-aside .cta-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 20px;}
#aside .inner-aside .cta-links.line{ padding-top: 20px;}
#aside .inner-aside .cta-links li{ width: 19%; margin: 4px 0.5%; display: block;}
#aside .inner-aside .cta-links li.title{ width: 100%; margin: 10px 0;}
#aside .inner-aside .cta-links li.title b{ color: #fff; position: relative;}
#aside .inner-aside .cta-links li.title b::after{ content: ""; width: 100vw; height: 1px; background: #fff; position: absolute; left: 100%; top: 50%; margin-left: 15px;}
#aside .inner-aside .cta-links li a{ display: flex; height: 100%; flex-direction: column; padding:15px 10px; border: solid 1px rgba(255,255,255,.4); background: rgba(0,0,0,.2);}
#aside .inner-aside .cta-links li a > *{ display: block; letter-spacing: 0; color: #fff; transition: 0.2s;}
#aside .inner-aside .cta-links li a b{ font-size: 13px; line-height: 1.2em; margin-bottom: 4px;}
#aside .inner-aside .cta-links li a span{ font-size: 11px; font-weight: 300; line-height: 1.2em; }
#aside .inner-aside .cta-links li a:hover{ background: rgba(255,255,255,0.8); border: solid 1px rgba(250,122,101,1.0);}
#aside .inner-aside .cta-links li a:hover > *{ color: #fa7a65;}
#aside .inner-aside .cta-links li.now a, 
#aside .inner-aside .cta-links li.now a:hover{ background:rgba(250,122,101,0.8); border: solid 1px rgba(250,122,101,0.8);}
#aside .inner-aside .cta-links li.now a > *, 
#aside .inner-aside .cta-links li.now a:hover > *{ color: #eee;}
@media screen and (max-width: 1200px){
#aside .inner-aside .cta-links li{ width: 24%;}
}
@media screen and (max-width: 1000px){
#aside .inner-aside .cta-links li{ width: 32.3%;}
}
@media screen and (max-width: 700px){
#aside .inner-aside .cta-links li{ width: 49%;}
}
@media screen and (max-width: 600px){
#aside .inner-aside .cta-links li a b{ font-size: 3.1vw; letter-spacing: 0;}
#aside .inner-aside .cta-links li a span{ font-size: 2.5vw; letter-spacing: 0;}
}

/* --------------------
White 白
------------------------*/
.white#aside{ padding-bottom: 0;}
.white#aside::after{ width: 100%; height: 100%; content: ""; position: absolute; left: 0; top: 0; z-index: -1;}
.white#aside::after, 
.white#aside.setView::after{ background: #fff;}
/**/
.white#aside .inner-aside .cta-links li.title b{ color: #000;}
.white#aside .inner-aside .cta-links li.title b::after{background: #444;}
.white#aside .inner-aside .cta-links li a{ border: solid 2px rgba(250,122,101,1.0); background:#fff;}
.white#aside .inner-aside .cta-links li a > *{ color: #111;}
.white#aside .inner-aside .cta-links li a:hover{ background:#fa7a65;}
.white#aside .inner-aside .cta-links li a:hover > *{ color: #fff;}
.white#aside .inner-aside .cta-links li.now a, 
.white#aside .inner-aside .cta-links li.now a:hover{ background:rgba(250,122,101,0.8); border: solid 1px rgba(250,122,101,0.8);}
.white#aside .inner-aside .cta-links li.now a > *, 
.white#aside .inner-aside .cta-links li.now a:hover > *{ color: #fff;}
/*===========
3カラムスライダー
=============*/
.column3-slider .item-slid{ padding:30px 10px 20px;}
.column3-slider .slick-dots{ bottom: -10px !important;}
.column3-slider .item-slid a{ width: 100%; display: block; position: relative;min-height: 410px; background: #fff; box-shadow: 0 6px 8px rgba(0,0,0,.4);}
.column3-slider .item-slid a::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; box-shadow: 0 0 0 0 #8B1618 inset; opacity: 0.8; pointer-events: none; mix-blend-mode:multiply; transition: 0.4s;}
.column3-slider .item-slid a:hover::after{ box-shadow: 0 0 0 8px #ff8c7a inset;}
.column3-slider .item-slid a:hover{ box-shadow: 0 6px 8px rgba(0,0,0,0);}
.column3-slider .item-slid a .image{ width: 100%; height: auto; aspect-ratio: 6 / 4; overflow: hidden; border-bottom: solid 1px #e0e0e0; background:#ff8c7a;}
.column3-slider .item-slid a .image img{ width: 100%; height: auto; transition: 0.8s;}
.column3-slider .item-slid a:hover .image img{ transform: scale(1.02, 1.02); opacity: 0.9;}
.column3-slider .item-slid a .txt{ padding:15px 20px 35px;}
.column3-slider .item-slid a .txt h3{ width: 100%; display: flex; align-items: center;}
.column3-slider .item-slid a .txt h3 span{ min-height: 40px; font-size: 13px; letter-spacing: 0; line-height: 1.4em; padding: 0 0 15px; color: #777; transition: 0.4s;}
.column3-slider .item-slid a:hover .txt h3 span{ color: #000;}
.column3-slider .item-slid a .txt dl,  
.column3-slider .item-slid a .txt dl > *{ display: block; font-size: 11px; color: #555; line-height: 1.2em;}
.column3-slider .item-slid a .txt dl{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.column3-slider .item-slid a .txt dl dt{ width: 60px; font-weight: bold; margin: 2px 0;}
.column3-slider .item-slid a .txt dl dd{ width: calc(100% - 60px); margin: 2px 0;}
@media screen and (max-width: 1250px){
.slick-next{ right: 10px !important; z-index: 100 !important; mix-blend-mode: multiply;}
.slick-prev { left: 10px !important; z-index: 100 !important; mix-blend-mode: multiply;}
.slick-prev:before, .slick-next:before{ color: #ff8c7a !important;}
}
@media screen and (max-width: 850px){
.column3-slider{ width: 92%; margin-left: 4%; margin-right: 4%;}
.slick-next{ right: -3% !important; z-index: 100 !important;}
.slick-prev { left: -3% !important; z-index: 100 !important;}	
}
/*------------*/
#ctrBox{ width: 100%; padding: 80px 0; background: #fff; position: relative; z-index: 100;}
.linkBox{ display: flex; justify-content: center;}
.linkBox .inner1000{display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap; padding:12px 20px 20px; background: #eee; border-radius: 10px;}
/**/
.linkBox .inner1000 .linkBox-title{ width: 100%; text-align: center; padding: 0 0 8px!important;}
.linkBox .inner1000 .linkBox-title span{ font-size: 14px; letter-spacing: 1px; font-weight: 400; line-height: 1em;}
/**/
.linkBox .inner1000 .left{ width: 75%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.linkBox .inner1000 .left a { width: 24%; display: block; padding:0 20px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.1); background: #fff;}
.linkBox .inner1000 .left a h3{ width: 100%; display: flex; height: 100px; flex-direction: column; justify-content: center; align-items: center; border-bottom: solid 1px #ddd; font-size: 18px; font-weight: 400;}
.linkBox .inner1000 .left a h3 span{ display: block; font-size: 12px;}
.linkBox .inner1000 .left a p{width: 100%; display: flex; height: 80px; flex-direction: column; justify-content: center; align-items: center; font-size: 11px; padding-bottom: 10px;}
.linkBox .inner1000 .left a:hover{ background: #f16f5a; border-radius: 2px; box-shadow: 0 0 0 rgba(0,0,0,.1); }
.linkBox .inner1000 .left a:hover *{ color: #fff !important;}
/**/
.linkBox .inner1000 .right{ width: 22%; display: flex; flex-direction: column;}
.linkBox .inner1000 .right dt{ position: relative; display: flex; justify-content: center;}
.linkBox .inner1000 .right dt span{ padding: 0 15px; background: #f0f0f0; position: relative; z-index: 10; font-size: 12px; margin-bottom: 5px;}
.linkBox .inner1000 .right dt::before{ width: 100%; height: 1px; background: #999; content: ""; position: absolute; left: 0; top: 50%; z-index: 1; margin-top: -2px;}
.linkBox .inner1000 .right dd{ display: block; margin: 5px 0;}
.linkBox .inner1000 .right dd a{ width: 100%; height: 36px; display: flex; align-items: center;padding-left: 25px; border-radius: 40px; border: solid 1px #ccc; font-size: 12px; letter-spacing: 2px; background: #fff;}
.linkBox .inner1000 .right dd a:hover{ background: #f16f5a; border: solid 1px #f16f5a; color: #fff; }
/**/
.linkBox .inner1000 .site-type{ width: 100%; padding:10px 10px 0; margin-top: 15px; border-top: dotted 1px #ccc; display: flex; justify-content: center; align-items: center; }
.linkBox .inner1000 .site-type dt{ display: block; font-size: 12px; font-weight: 400; margin-right: 5px;}
.linkBox .inner1000 .site-type dd{ display: flex; flex: 1; flex-wrap: wrap;}
.linkBox .inner1000 .site-type dd a{ display: block; font-size: 10px; padding:4px 10px; line-height: 1em; border-radius: 4px; border: solid 1px #ccc; color: #999; margin:2px 5px; font-weight: 300;}
.linkBox .inner1000 .site-type dd a:hover{ border: solid 1px #555; background: #fff; color: #111;}

@media screen and (max-width:1050px){
.linkBox .inner1000{ flex-direction: column;}
.linkBox .inner1000 .left{ width: 100%;}
.linkBox .inner1000 .right{ width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 30px;}
.linkBox .inner1000 .right dt{ width: 100%;}
.linkBox .inner1000 .right dd{ width: 25%; padding: 0 10px;}
.linkBox .inner1000 .right dd a{ padding: 0; letter-spacing: 1px; justify-content: center;}
}
@media screen and (max-width: 900px){
.linkBox .inner1000 .site-type{justify-content: flex-start;}
}
@media screen and (max-width: 800px){
#ctrBox{ padding: 80px 0;}
.linkBox .inner1000{ padding:15px 0 30px;}
.linkBox .inner1000 .linkBox-title{ padding:0 0 5px!important;}
.linkBox .inner1000 .linkBox-title span{ border-bottom: solid 3px #555; padding-bottom: 4px;}
.linkBox .inner1000 .left a { width: 46%; margin: 2%;}
/**/
.linkBox .inner1000 .left a h3{ height: 80px; font-size: 16px; font-weight: 400;}
.linkBox .inner1000 .left a h3 span{ font-size: 11px; color: #999; margin-bottom: 5px;}
.linkBox .inner1000 .left a p{ height: 60px; color: #777;}
.linkBox .inner1000 .right dd{ width: 33%; }
.linkBox .inner1000 .right dd a{ letter-spacing: 0; border-radius: 6px;}
}
@media screen and (max-width: 750px){
.linkBox .inner1000 .right{ align-items: flex-start; justify-content: flex-start; }
.linkBox .inner1000 .right dd{ width: 50%; }
}

/*-------------------------
contBox
-----------------------*/
.contBox{ width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
.contBox a{ width: 90%; max-width: 500px; padding: 5px 0 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border-radius: 6px; overflow: hidden; background: #f16f5a;}
.contBox a .en{ font-size: 30px; font-weight: 300; color: #fff; position: relative; z-index: 10;}
.contBox a .txt{ font-size: 14px; font-weight: 300; text-align: center; color: #fff; position: relative; z-index: 10; margin-bottom: 5px;}
.contBox a:hover{ background:#CD2B2D;}
.contBox a:hover *{ letter-spacing: 2px;}





/*==============================================
 pageup
================================================*/
#pageup { width: 50px; height: 50px; opacity: 0; pointer-events: none; position: fixed; z-index: 10000; transition: 0.2s; right: 0; bottom: 0;}
.scroll #pageup { opacity: 1; pointer-events: all;}
#pageup a{ display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; align-content: center;}
#pageup a .img{ height: 14px; display: block; margin-top: -2px;}
#pageup a .txt{ height: 12px; display: none; margin-bottom: 5px;}
#pageup a .img::before{ content: "▲"; font-size: 18px; line-height: 1em;}
#pageup a .txt::before{ content: "page up"; font-size: 10px; letter-spacing: 0; line-height: 1em;}
#pageup a:hover .img{ margin-top: -6px;}

@media screen and (max-width: 650px) {
#pageup.noSP{ display: none;}
}
/*pageup-1*/
.pageup-1#pageup{ background: var(--main1-color-hover);}
.pageup-1#pageup a .img::before, 
.pageup-1#pageup a .txt::before { color: var(--main1-color);}
.pageup-1#pageup a:hover { background: var(--main1-color);}
.pageup-1#pageup a:hover .img::before, 
.pageup-1#pageup a:hover .txt::before { color: var(--main1-color-hover);}
/*pageup-2*/
.pageup-2#pageup{ right: 10px; bottom: 10px;}
.pageup-2#pageup a .img{ margin-top: -5px;}
.pageup-2#pageup a .txt{ display: block;}
.pageup-2#pageup a .img::before{ content: "↑"; font-size: 16px;}
.pageup-2#pageup{ border:solid 3px var(--main1-color);}
.pageup-2#pageup a .img::before, 
.pageup-2#pageup a .txt::before { color: var(--main1-color);}
.pageup-2#pageup:hover{ opacity: 0.5;}

/*pageup-3*/
.pageup-3#pageup{ right: 10px; bottom: 10px; border-radius: 100%;}
.pageup-3#pageup a .img{ margin-top: -8px;}
.pageup-3#pageup{ background:var(--main1-color);}
.pageup-3#pageup a .img::before, 
.pageup-3#pageup a .txt::before { color: var(--main1-color-hover);}
.pageup-3#pageup:hover{ opacity: 0.5;}

/*pageup-4*/
.pageup-4#pageup{ width: 30px; height: 80px; bottom: 10px; background: var(--main1-color-hover); border-radius: 2px 0 0 2px;}
.pageup-4#pageup a .img::before{ content: "↑"; font-size: 16px;}
.pageup-4#pageup a .img::before, 
.pageup-4#pageup a .txt::before { color: var(--main1-color);}
.pageup-4#pageup a:hover { background: var(--main1-color);}
.pageup-4#pageup a:hover .img::before, 
.pageup-4#pageup a:hover .txt::before { color: var(--main1-color-hover);}


/*================================
ページリンク 次へ・一覧・前へ
===================================*/
/*次へボタン*/
#blog-post-bottom{ padding: 0; 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;}
/*
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after{ content: "前へ";}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ content: "次へ";}
*/
}

/*==============================================
 ページャー
================================================*/
.pager { display: flex; flex-direction: row; align-items: center; justify-content: center;}
ul.page-numbers{ display: flex; direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 20px 0;}
ul.page-numbers li{ margin: 8px;}
ul.page-numbers li span{ min-width: 40px; height: 50px; border: solid 1px #ccc; display: block; line-height: 50px;text-align: center; border-radius: 4px; background: #fff; transition: 0.2s; margin: 0 5px;}
ul.page-numbers li a{ min-width: 40px; height: 50px; padding: 0 5px; display: block; line-height: 50px; text-align: center; background: #fff; border: solid 1px #ccc; box-shadow: 0 4px 6px rgba(0,0,0,.2); border-radius: 4px; color: #555;}
ul.page-numbers li > span{ background: #eee; color: #555;}
ul.page-numbers li a:hover{ background: var(--about-color); color: #111; border: solid 1px #222; box-shadow: 0 0 0 rgba(0,0,0,.2);}
ul.page-numbers li.dot{ display: flex; align-items: flex-end; width: auto;}
ul.page-numbers li.prev span, 
ul.page-numbers li.next span{ width: 80px;}
ul.page-numbers li.prev > span, 
ul.page-numbers li.next > span{ background:#e5e5e5; color: #999; border: solid 1px #ccc;}

@media screen and (max-width: 850px) {
ul.page-numbers li{ margin: 5px;}
ul.page-numbers li span{ min-width: 34px; margin: 0 ;}
ul.page-numbers li a{ min-width: 34px; font-size: 14px; font-weight: bold;  box-shadow: 0 2px 4px rgba(0,0,0,.15); }
}
@media screen and (max-width: 650px) {
ul.page-numbers{ justify-content: flex-start;}
ul.page-numbers li span, 
ul.page-numbers li a{ height: 48px; line-height: 48px;}
}