@charset "utf-8";
.bk-color, footer #fback span::before{ animation: bk-color 120.0s ease-in infinite forwards;}
@media screen and (max-width: 800px) {header .header-inner nav ul li#gnav-Contact > .a{ animation: bk-color 120.0s ease-in infinite forwards;}}
@keyframes bk-color{
0% { background:#fff600; color: #111;}
12% { background:#fff600; color: #111;}
17% { background:#9a17ff; color: #fff;}
29% { background:#9a17ff; color: #fff;}
34% { background:#1aa3b4; color: #fff;}
46% { background:#1aa3b4; color: #fff;}
51% { background:#ffa200; color: #fff;}
63% { background:#ffa200; color: #fff;}
68% { background:#35a650; color: #fff;}
80% { background:#35a650; color: #fff;}
85% { background:#ff5757; color: #fff;}
95% { background:#ff5757; color: #fff;}
100% { background:#fff600; color: #111;}
}
.txt-color{ animation: txt-color 120.0s ease-in infinite forwards;}
@keyframes txt-color{
0% { color:#dac516;}
12% { color:#dac516;}
17% { color:#9101ff;}
29% { color:#9101ff;}
34% { color:#01a4b8;}
46% { color:#01a4b8;}
51% { color:#ffa200;}
63% { color:#ffa200;}
68% { color:#299744;}
80% { color:#299744;}
85% { color:#ff5757;}
95% { color:#ff5757;}
100% { color:#dac516;}
}
.border-color1{ animation: border-color1 120.0s ease-in infinite forwards;}
@keyframes border-color1{
0% { border-color:#dac516;}
12% { border-color:#dac516;}
17% { border-color:#9101ff;}
29% { border-color:#9101ff;}
34% { border-color:#01a4b8;}
46% { border-color:#01a4b8;}
51% { border-color:#ffa200;}
63% { border-color:#ffa200;}
68% { border-color:#299744;}
80% { border-color:#299744;}
85% { border-color:#ff5757;}
95% { border-color:#ff5757;}
100% { border-color:#dac516;}
}
.border-txt-color{ animation: border-txt-color 120.0s ease-in infinite forwards;}
@keyframes border-txt-color{
0% { border-color:#dac516; color:#dac516;}
12% { border-color:#dac516; color:#dac516;}
17% { border-color:#9101ff; color:#9101ff;}
29% { border-color:#9101ff; color:#9101ff;}
34% { border-color:#01a4b8; color:#01a4b8;}
46% { border-color:#01a4b8; color:#01a4b8;}
51% { border-color:#ffa200; color:#ffa200;}
63% { border-color:#ffa200; color:#ffa200;}
68% { border-color:#299744; color:#299744;}
80% { border-color:#299744; color:#299744;}
85% { border-color:#ff5757; color:#ff5757;}
95% { border-color:#ff5757; color:#ff5757;}
100% { border-color:#dac516; color:#dac516;}
}


/* 
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%; }
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; }
body { line-height:1; z-index: 1;}
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;}
*{box-sizing: border-box;}
table{border-collapse: collapse ;}
td{ position: relative;}
/*===================
 LINK
=====================*/
a, a *, a:hover, a:hover * { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
a { text-decoration: none; color: #3367d6;}
a:hover{ text-decoration: none; color: #3367d6;}
/*===================
 FONT
=====================*/
*{ color:#111; letter-spacing: 1.0px; font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-weight:300;}
.en, 
.en span{font-family: 'Josefin Sans', sans-serif;}
h1 { font-weight:400; font-size:20px; line-height:1.3em;}
h2,h3,h4,h5,h6 { font-weight:400; font-size:16px; line-height:1.3em;}
p,li,dt,dl,span,td { font-size:16px; line-height:1.6em;}
b, .b{font-weight: bold;}
img{ max-width: 100%; width: 100%; height: auto;}
.word-keep{ word-break: keep-all;}
/*===================
 共通
=====================*/
.block{ display: block;}
.inline-block{ display: inline-block;}
.flex{ display: flex;}
.flex-row{ display: flex; flex-direction: row; align-items: center;}
.flex-column{ display: flex; flex-direction: column;}
.flex-space-between{ justify-content: space-between !important;}
.center{ text-align: center !important; justify-content: center !important;}
/*=====================================
	CONTENTS
=======================================*/
html, body { width: 100%; max-width:100%; position: relative;}
body{ overflow-x:visible; overflow-y:visible;}
body.out_movie{ overflow-x:hidden; overflow-y:visible;}
footer, section, main{ width: 100%; display: block; position: relative; z-index: 2;}
footer{ background: #fff;}
.section{ width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2;}
.wrap{ width: 100%; display: flex; justify-content: center; position: relative; z-index: 9;}
.wrap-block{ width: 100%; display: block; position: relative; z-index: 9;}
.inner{ width: 96%; max-width: 1100px; display: block; position: relative; z-index: 10;}
.inner-column{ width: 96%; max-width: 1100px; display: flex; flex-direction: column; position: relative; z-index: 10;}
.inner-row{ width: 96%; max-width: 1100px; display: flex; flex-direction: row; align-items: flex-start; position: relative; z-index: 10;}
/*==============================================
  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.act, 
#cursor div.actF{ background: none}
#cursor.act{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; 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; }
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}
/* hover:円形 */
#cursor div.actF{ width: 140px !important; height: 140px !important; background: none;}
#cursor.actF{ display: block; border-radius: 100%; margin: -70px 0 0 -70px; mix-blend-mode: difference;}
#cursor div.actF::after{ opacity: 0.8; width: 140px; height: 140px; margin: 0; margin: -65px 0 0 -65px; mix-blend-mode: hard-light;}
#cursor div.actF .l1{ border: solid 1px #fff; width: 140px; height: 140px; 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.act div::after, 
#cursor.actF div::after{animation: bk-color 120.0s ease-in infinite forwards; mix-blend-mode:lighten; opacity: 0.4 !important;} 

/*-----------
アニメーション
--------------*/
.mvAnime > span, 
.setTit > span, 
#mvTitle p .mvAnime > span { will-change: transform, opacity; opacity: 0; overflow: hidden; -webkit-transform: translateY(60px); transform: translateY(60px); }
#mvTitle p .mvAnime * { opacity: 0;}
.opBody .mvAnime span, 
.setView.setTit > span, 
.opBody2 #mvTitle p .mvAnime span{ opacity:1; -webkit-transform: translateY(0px); transform: translateY(0px);}

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

/*================================
footer
===============================*/
/*-----------
endCTA
--------------*/
#endCTA .ctaBox{ width: 100%; height: 400px; display: flex; flex-direction: row; align-items: center; border-top: solid 1px #555; border-bottom: solid 1px #555;}
#endCTA .ctaBox > *{ height: 100%; display: block;}
/**/
#endCTA .ctaBox .tel{ width: 30%;}
#endCTA .ctaBox .tel a{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; pointer-events: none; position: relative;}
#endCTA .ctaBox .tel a > *{ position: relative; z-index: 10;}
#endCTA .ctaBox .tel a b { display: flex; align-items: center; vertical-align: baseline; font-size: 18px; font-weight: 500;}
#endCTA .ctaBox .tel a b .number{ display: block; font-size: 32px; font-weight: 500; padding: 0 10px;}
#endCTA .ctaBox .tel a .time{ display: block; font-size: 14px; font-weight: 500;}
#endCTA .ctaBox .tel a .tap{ display: none;}
#endCTA .ctaBox .tel a::after{ width: 100%; height: 0%; position: absolute; left: 0; top: 0; z-index: 1; content: ""; background: #333; transition: 0.8s;}
#endCTA .ctaBox .tel.setView a::after{ height: 100%;}
#endCTA .ctaBox .tel.setView a *{ color: #fff;}
#endCTA .ctaBox .tel a .bk-color{display: none;}
/**/
#endCTA .ctaBox .mail{ width: 70%; position: relative;}
#endCTA .ctaBox .mail a{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; position: relative; z-index: 20;}
#endCTA .ctaBox .mail a *{ color: #111; position: relative; z-index: 10;}
#endCTA .ctaBox .mail.setView a *{ color: #fff;}
#endCTA .ctaBox .mail a .en{ font-size: 40px; font-weight: 600;}
#endCTA .ctaBox .mail a:hover .en{ letter-spacing: 3px;}
#endCTA .ctaBox .mail a b{ display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; text-align: center; padding-top: 30px; margin-top: 10px; position: relative;}
#endCTA .ctaBox .mail a b::before{ width: 100%; height: 4px; content: ""; background: #111; position: absolute; left: 0; top: 0; border-radius: 20px; transition: 0.4s;}
#endCTA .ctaBox .mail.setView a b::before{ background: #fff;}
#endCTA .ctaBox .mail a b span{ width: auto; display: block; border-radius:40px; margin-top: 20px; font-size: 13px; padding: 2px 15px 4px; background: #fff; font-weight: 500;}
#endCTA .ctaBox .mail a .bk-color, 
#endCTA .ctaBox .mail a::after{ width: 100%; height: 0; position: absolute; left: 0; top: 0; z-index: 3; transition: 0.8s; content: "";}
#endCTA .ctaBox .mail.setView a .bk-color, 
#endCTA .ctaBox .mail.setView a::after{ height: 100%;}
#endCTA .ctaBox .mail a::after{ background: url(../img/common/ctabk.webp) 50% 50% no-repeat; background-size: cover; opacity: 0.15; z-index: 1;}
#endCTA .ctaBox .mail.setView a:hover{ background: #000; transition: 0;}
#endCTA .ctaBox .mail.setView a:hover .bk-color{ opacity: 0.4;}
@media screen and (max-width: 1100px) {
#endCTA .ctaBox .tel a b {font-size: 1.4vw; }
#endCTA .ctaBox .tel a b .number{ font-size: 3.0vw; }
}
@media screen and (max-width: 800px) {
#endCTA .ctaBox{ height: auto; flex-direction: column-reverse; }
#endCTA .ctaBox .tel{ width: 100%; padding: 30px 5%;}
#endCTA .ctaBox .tel a{ width: 100%; min-height: 70px; padding: 15px; height: auto; border-radius: 6px; pointer-events:auto; background: #333; box-shadow: 0 10px 20px rgba(0,0,0,.4); }
#endCTA .ctaBox .tel a *{ transition: 0; line-height: 1.2em; color: #fff;}
#endCTA .ctaBox .tel a b { font-size: 15px;}
#endCTA .ctaBox .tel a b .number{ font-size:30px;}
#endCTA .ctaBox .tel a .time{ font-size: 15px;}
#endCTA .ctaBox .tel a .tap{ display: block; background: #fff; font-size: 14px; font-weight: 600; padding: 2px 20px; border-radius: 4px; margin-top: 10px; animation:none; color: #111 !important;}
#endCTA .ctaBox .tel a::after{ display: none;}
#endCTA .ctaBox .tel a .bk-color{display: block; position: absolute; left: 0; top: 0; width: 0; height: 100%; z-index:1; opacity: 0.15; transition: 0.8s;}
#endCTA .ctaBox .tel.setView a .bk-color{ width: 100%;}
/**/
#endCTA .ctaBox .mail{ width: 100%;}
#endCTA .ctaBox .mail a{ height: auto; min-height: 340px; padding: 20px 20px 70px; background: #000;}
#endCTA .ctaBox .mail a .en{ font-size: 70px; line-height: 1.2em; transition: 0s;}
#endCTA .ctaBox .mail a .en, 
#endCTA .ctaBox .mail a:hover .en{ letter-spacing: 0.1em;}
#endCTA .ctaBox .mail a b{ font-size: 24px; line-height: 1.6em;}	
#endCTA .ctaBox .mail a b span{ font-size: 18px; padding: 2px 5% 4px; transition: 0s; border-radius: 6px; box-shadow: 0 8px 14px rgba(0,0,0,.2); animation:none; color: #111 !important;}
#endCTA .ctaBox .mail a .bk-color, 
#endCTA .ctaBox .mail a::after{ width: 0%; height: 100%;}
#endCTA .ctaBox .mail.setView a .bk-color, 
#endCTA .ctaBox .mail.setView a::after{ width: 100%;}
#endCTA .ctaBox .mail.setView a .bk-color{ opacity: 0.5;}
#endCTA .ctaBox .mail a::after{ opacity: 0.3;}
}
@media screen and (max-width: 600px) {
#endCTA .ctaBox .mail a .en{ font-size: 15.0vw;}
#endCTA .ctaBox .mail a b{ font-size: 4.4vw;}
#endCTA .ctaBox .mail a b span{ font-size: 4.2vw;}
#endCTA .ctaBox .tel a b { font-size: 3.0vw;}
#endCTA .ctaBox .tel a b .number{ font-size: 6.8vw;}
#endCTA .ctaBox .tel a .time{ font-size: 3.4vw;}
#endCTA .ctaBox .tel a .tap{ font-size: 12px;}
}

/*==============================================
  loading
================================================*/
.loading{}
.clBody{ width: 100%; height: 100%; overflow: hidden; position: fixed;}
.loadWrap{ width: 100%; height: 100%; position: fixed; z-index: 100000100000100000100000; right:0; top: 0; background: #fff; display: block;}
.colors.loadWrap{ background: #fff;}

/***************************************************
 * Generated by SVG Artista on 12/7/2020, 11:25:09 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
.loadWrap .logo_open{ width: 40%; height: auto; max-width: 260px; position: fixed; left: 50%; top: 50%; margin: -21px 0 0 -130px;}
@media screen and (max-width: 600px) {
.loadWrap .logo_open{ width: 50%; max-width:900px; left: 25%; margin: -30px 0 0;}
}
/**/
.logo_open .svg-elem-1 { stroke-dashoffset: 1909.719970703125px;stroke-dasharray: 1909.719970703125px;fill: transparent;-webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,fill 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,fill 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;}
.opBody .logo_open .svg-elem-1 {stroke-dashoffset: 0;fill: rgb(0, 0, 0);}
.logo_open .svg-elem-2 {stroke-dashoffset: 96.2813720703125px;stroke-dasharray: 96.2813720703125px;-webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,fill 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,fill 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;}
.opBody .logo_open .svg-elem-2 {stroke-dashoffset: 0;}
/*==============================================
  遷移
================================================*/
.loadWrap{ width: 100%; height: 100%; position: fixed; z-index: 100000100000100000100000; right:0; top: 0; background: #fff; display: block;}


/*--遷移----*/
.transition-overray{ width: 100vw; height: 100vh; position: fixed; position: -webkit-fixed; left: 0px; top: 0px; z-index: 100000100000100000; pointer-events: none; overflow: hidden;}
.transition .transition-overray { display: block !important; pointer-events: none;}
.nodiv.transition-overray{ display: none;}
/* 出るとき */
.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 #444444; transition:0.6s;}
.transition-overray .to2{ z-index: 11000; border-bottom: 100vh solid #999999; 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 #ffffff; transition: 1.6s;}
.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;}
.opBody2.transition .transition-overray { opacity: 0 !important;}
.opBody3.transition .transition-overray { display: none;}

/*来たとき*/
.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 #444444;}
.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 .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;}


/*================================
ページリンク 次へ・一覧・前へ
===================================*/
/*次へボタン*/
#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: 16px; 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: bold; position: relative;}
#blog-post-bottom #blog_page_link ul li a span{ font-size: 16px;}
#blog-post-bottom #blog_page_link ul li a:hover{ background: #f0f0f0; 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: #222; color: #fff; 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;}
}

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

}
/**/
#head-title{ display: none;}

@charset "utf-8";
.bk-color, footer #fback span::before{ animation: bk-color-footer 120.0s ease-in infinite forwards;}
@keyframes bk-color-footer{
0% { background:#fff600; color: #111;}
12% { background:#fff600; color: #111;}
17% { background:#9a17ff; color: #fff;}
29% { background:#9a17ff; color: #fff;}
34% { background:#1aa3b4; color: #fff;}
46% { background:#1aa3b4; color: #fff;}
51% { background:#ffa200; color: #fff;}
63% { background:#ffa200; color: #fff;}
68% { background:#35a650; color: #fff;}
80% { background:#35a650; color: #fff;}
85% { background:#ff5757; color: #fff;}
95% { background:#ff5757; color: #fff;}
100% { background:#fff600; color: #111;}
}

/*==============================================
  header menuBtn
================================================*/
@media screen and (min-width: 800px) {
#menuBtn{ display: none;}
header nav .header-menu .hd-nav.web-marketing .hd1::after{ width: 60%; left: 20%;}
}
@media screen and (max-width: 800px) {
#menuBtn{ width: 60px; height: 60px; display: flex; justify-content: flex-end; position: fixed; right: 0; top:0; z-index: 10000; background:rgba(0,0,0,.0);transition: 0.4s;}
#menuBtn .menuBtn-line{ width: 50px; height: 50px; margin: 5px; display: block; position: relative; border-radius: 100%; box-shadow: 0 8px 12px rgba(0,0,0,.1); background: rgba(255,255,255,.7);}
.openMenu #menuBtn{ width: 100%; box-shadow: 0; background: linear-gradient(to right, rgba(255,255,255,1) 70%,rgba(221,221,221,1) 100%);}
.openMenu #menuBtn .menuBtn-line{ box-shadow: none; background: rgba(255,255,255,.0);}
#menuBtn .menuBtn-line::after{ width:24px; height: 1px; background: #000; 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: #000; 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);}
.openMenu #menuBtn .menuBtn-line .l2{ margin-top: 0px; transform:rotate(-45deg);}
}

/*==============================================
  h1.logo
================================================*/
h1.logo{ height: 50px; position: fixed; left: 0; top: 0; width: auto; display: flex; z-index: 10000001; transition: 0.4s;}
h1.logo a{ display: flex; justify-content: center; align-items: center; padding: 0 20px;}
h1.logo a:hover{ opacity: 0.3;}
h1.logo a img{ width: auto; height: 16px;}
h1.logo a .bb{ display: block;}
h1.logo a .ww{ display: none;}
.scroll h1.logo{ height: 22px;}
@media screen and (max-width: 800px) {
h1.logo{ position: absolute; transition: 0.4s; z-index: 90000; }
.scroll h1.logo{ opacity: 0;}
.scroll.openMenu h1.logo, 
.openMenu h1.logo{ height: 50px !important; position: fixed; pointer-events: none; opacity: 1;}
}

/*==============================================
  header
================================================*/
@media screen and (min-width: 800px) {
.menu-overlay{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index:100000; background: rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: 1.2s;}
.pconMenu .menu-overlay{ opacity: 1;}
main, #newMv, footer{ filter: blur(0px);}
.pconMenu main, .pconMenu #newMv, .pconMenu footer{ filter: blur(6px); transition: 1.2s;}
/**/
header{ width: 100%; background: #fff; position: fixed; left: 0; top: 0; display: flex; justify-content: space-between; z-index: 1000000;}
.scroll header{ border-bottom: solid 1px #eee;}
/**/
header nav{ display: block; flex: 1; margin:0 20px;}
header nav .header-menu{ display: flex; justify-content: flex-end;}
header nav .header-menu .hd-nav{}
/*--▼hd1----*/
header nav .header-menu .hd-nav .hd1{ position: relative; z-index: 100;}
header nav .header-menu .hd-nav .hd1 p{ }
header nav .header-menu .hd-nav .hd1 p .hd-link { height: 50px; padding: 0 15px; display: flex; justify-content: center; align-items: center; transition: 0.4s;}
.scroll header nav .header-menu .hd-nav .hd1 p .hd-link { height: 30px;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span{ height: 14px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span{ display: block; height: 14px; line-height: 14px; font-size: 11.5px; transition: 0.4s; text-align: center;}
header nav .header-menu .hd-nav:hover .hd1 p .hd-link > span > span.j{ margin-top: -14px;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ color: #111;}
.scroll header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ color: #555;}
header nav .header-menu .hd-nav .hd1::after{ width: 0%; height: 3px; position: absolute; left: 50%; bottom: 0px; content: ""; background: #555; transition: 0.4s; }
header nav .header-menu .hd-nav:hover .hd1::after{ width: 60%; left: 20%;}
/*--▼hd2----*/
header nav .header-menu .hd-nav .hd2{ width: 100%; height: auto; position: fixed; left: 0; top: 50px; flex-wrap: nowrap; justify-content: space-between; background: #fff; transition: 0s; z-index: 10; box-shadow: 0 1px 8px rgba(0,0,0,.05) inset;}
header nav .header-menu .hd-nav .hd2{ opacity: 0; pointer-events: none; top: 20px;}
header nav .header-menu .hd-nav.pcmenu-open .hd2{ display: flex; top: 50px; opacity: 1; pointer-events: fill; transition: 0.2s;}
.scroll header nav .header-menu .hd-nav.pcmenu-open .hd2{top: 30px;}
/*--▼hd2 hd2-left----*/
header nav .header-menu .hd-nav .hd2 .hd2-left{ width: 250px; background: url("../img24/common/menu-bk.png") 100% 50% no-repeat;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2{ display: flex; justify-content:center; align-items: flex-start; padding: 20px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link { display: flex; flex-direction: column; align-items: center; padding:5px 15px 20px 10px; position: relative; border-radius: 6px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b{ font-size: 11px; transition: 0.2s;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link span { font-size: 14px; font-weight: 300; transition: 0.2s;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link span{ padding-left: 10px; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link span.spmenu{ display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link span::before{ width: 4px; height: 4px; content: ""; box-shadow: 0 0 0 2px #777 inset;  border-radius: 100%; position: absolute; left: 3px; top: 50%; margin-top: -2px; transition: 0.8s;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link:hover span::before{ width: 10px; height: 10px; left: 0px; margin-top: -5px; box-shadow: 0 0 0 2px #44629F inset;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link::before, 
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link::after { content: ""; height: 1px; position: absolute; left: 3%; bottom: 10px; transition: 0.4s;} 
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link::before{ width: 20px; background: #000; z-index: 5;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link::after{ width: 94%; background: #ccc; z-index: 4;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link:hover::before{ width: 94%; background: #44629F;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link:hover b, 
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link:hover span { color: #44629F;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-left#menu-me h2 { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 300; font-size: 20px;}
header nav .header-menu .hd-nav .hd2 .hd2-left#menu-me h2 span{ font-size: 8px;}

/*--▼hd2 hd2-right----*/
header nav .header-menu .hd-nav .hd2 .hd2-right{ width: calc(100% - 250px); display: flex; justify-content: center;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box{ width: 33%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;  padding: 20px;}
/*hd-box-block*/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block{ width: 100%; display: block; padding: 10px 20px; border-radius: 6px; border: solid 1px #ddd; background: #fff; position: relative; z-index: 1;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3{ display: flex; justify-content: flex-start; margin-bottom: 5px; }
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 span{ display: inline; font-size: 11px; font-weight: 500; border-bottom: solid 1px #aaa; padding: 0 5px 5px 15px; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 span::before{ width: 8px; height: 8px; content: ""; box-shadow: 0 0 0 2px #777 inset;  border-radius: 100%; position: absolute; left: 0px; top: 50%; margin-top: -7px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 a{ padding:0 5px; text-decoration: underline; color: #44629F;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 a::before{ content: "[ ";}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 a::after{ content: " ]";}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 a:hover{ text-decoration: none; color: #bbb;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p{ display: flex; flex-direction: column;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span{ width: 100%; display: flex; justify-content: flex-start; align-items: center; ppadding: 3px 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ display: flex; align-items: center; font-size: 12px; letter-spacing: 0; font-weight: 200; line-height: 1.1em; padding:4px 5px 6px 10px; position: relative; border-radius: 4px; color: #333;}

header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a:hover{ color: #44629F; text-decoration: underline;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span{ width:6px; height: 6px; position: absolute; left: 0; top: 50%; margin-top: -3px; overflow: hidden;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span::before, 
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span::after { width:6px; height: 6px; position: absolute; left: 0; top: 0%; display: flex; justify-content: center; align-items: center; transition: 0.8s;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span::before { content: "●"; font-size: 3px; color: #555;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span::after { content: "▼"; transform: rotate(-90deg); font-size: 8px; color:#44629F; margin-left: -10px; }
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a:hover span::before{ margin-left: 10px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a:hover span::after{ margin-left: 0;}
/*hd-box-p*/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p{ width: 100%; display: block; margin: 8px 0 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a{ width: 100%; display: flex; padding: 12px 10px 12px 35px; justify-content: flex-start; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a::before, 
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a::after{ content: ""; height: 1px; position: absolute; left: 3%; bottom: 0px; transition: 1.4s; z-index: 20;} 	
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a::before{ width: 20px; background: #000; z-index: 5;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a::after{ width: 94%; background: #ccc; z-index: 4;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a:hover::before{ width: 94%; background: #44629F;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .icon{ width: 18px; height: 18px; position: absolute; left: 10px; top:50%; margin-top: -9px; display: block; overflow: hidden; border-radius: 100%; background: #ddd;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .icon::after{ width: 18px; height: 18px; position: absolute; left: -18px; top: 0; display: block; border-radius: 100%; background:#44629F; transition: 0.2s; content: ""; z-index: 10;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a:hover .icon::after{ left: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .icon::before{ width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; position: absolute; left: -18px; top: 0; border-radius: 100%; background:#44629F; transition: 0.8s; content: "▼"; transform: rotate(-90deg); color: #fff; z-index: 11; font-size: 7px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a:hover .icon::before{ left: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .txt{ display:block; line-height: 1.1em; font-size: 12px;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span.comingsoon a{ pointer-events: none; color: #666; padding-left:0px; }
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span.comingsoon a::before{ content: "[ページ制作中]"; font-size: 9px; letter-spacing: 0; font-weight: 400; margin-right: 3px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span.comingsoon a span{ display: none;}


/*--hd-contact---*/
header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link::after{ content: ""; width: 96%; height:30px; position: absolute; left: 2%; top: 50%; margin-top: -15px; background: #fff; border-radius: 20px; z-index: -1; border: solid 1px #aaa; transition: 0.3s;}
.scroll header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link::after{ height:24px; margin-top: 2px; top: 0;}
header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link .j{ font-size: 11px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left{ width: 300px; padding: 20px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left p{ display: block;font-size: 13px; padding-left: 10%;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left p span{ font-size: 10px; background: #eee; padding: 1px 4px 2px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right{ align-items:center; flex-direction: row-reverse;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr { display: flex; margin: 0 15px; min-width: 200px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a{ width: 100%; height: 52px; display: flex; justify-content: center; border-radius: 5px; background: #B11D1F;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a{ border: solid 3px #BC4042; background: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a *{ color: #BC4042;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr.form a{ border: none; background: #BC4042;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr.form a *{ color: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; line-height: 1em;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a .txt .min { font-size: 9px; font-weight: 400; opacity: 0.7; margin-top: 3px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a:hover{ background:#7C1516; border: solid 3px #7C1516;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a:hover *{ color: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr.form a:hover{ border: none;}
/**/


/*--------------
カレント指定
create-operation
------------------*/
.toppage header nav .header-menu .hd-nav.web-marketing .hd2 .hd2-left h2 a { pointer-events: none; border: solid 3px #222; color: #777 !important;}
.toppage header nav .header-menu .hd-nav.web-marketing .hd2 .hd2-left h2 a *{ color: #777 !important;}
/*
.frontpage header nav .header-menu .hd-nav.top-page .hd1::after, 
.works header nav .header-menu .hd-nav.works .hd1::after, 
.about-privacypolicy header nav .header-menu .hd-nav.we-aer .hd1::after, 
.news header nav .header-menu .hd-nav.we-aer .hd1::after, 
.about-company header nav .header-menu .hd-nav.we-aer .hd1::after{ width: 60%; left: 20%;}


.about-privacypolicy header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.privacypolicy span, 
.create header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.create span, 
.create-operation header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.operation span, 
.create-lp header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.lp span, 
.renewal header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.renewal span, 
.concept header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.concept span, 
.faq header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.faq span { display: none;}
*/
.service-research header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-research, 
.service-current header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-current, 
.service-advisor header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-advisor, 
.service-seo header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-seo, 
.service-operational header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-operational, 
.service-web_marketing header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a.wm-service-web_marketing { background: #222; color: #fff; border-radius: 4px; pointer-events: none;}

.service-research header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.wm-service-research .txt,
.about-company header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.company .txt, 
.news header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.news .txt { color: #fff;}


.about-privacypolicy header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.privacypolicy .icon, 
.about-privacypolicy header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.privacypolicy::before, 
.about-privacypolicy header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.privacypolicy::after, 
.about-company header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.company .icon, 
.about-company header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.company::before, 
.about-company header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.company::after, 
.news header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.news .icon, 
.news header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.news::before, 
.news header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a.news::after{ display: none;}
	
/*----*/
}
/*--------------------------------------------*/
@media screen and (max-width: 1100px) {

header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ font-size: 11px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 span{ letter-spacing: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span.comingsoon a::before{ font-size: 8px; letter-spacing: 0;}
}

@media screen and (max-width: 1050px) {
header nav .header-menu .hd-nav .hd2 .hd2-right{width: calc(100% - 200px);}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box{ padding: 15px 5px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block{ padding: 10px 8px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ font-size: 11px;}
header nav .header-menu .hd-nav .hd2 .hd2-left, 
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left{ width: 200px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b{ font-size: 9px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link span{ font-size: 14px;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span, 
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left p{ padding: 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr{ width: 29%; min-width:0; margin: 0 2%; }

}

@media screen and (max-width: 900px) {
header nav { margin: 0 3px;}
header nav .header-menu .hd-nav .hd1 p .hd-link{ padding: 0 8px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .txt, 
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 span{ font-size: 11px;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ font-size: 10.5px;}
}

@media screen and (max-width: 800px) {
header nav .header-menu .hd-nav .hd1{ border-bottom: solid 1px #fff;}
header nav .header-menu .hd-nav .hd1 p a.hd-link, 
header nav .header-menu .hd-nav .hd1 p span.hd-link { height:90px;}
/**/
header{ width: 100%; height: 100%; background: #fff; position: fixed; right: -100%; top: 0; display: block; z-index: 1000; transition: 0.4s; opacity: 0;}
.openMenu header{ right: 0; opacity: 1;}
/**/
header nav{ width: 100%; height:100%; margin:0px; padding-top: 60px; overflow-x: hidden; overflow-y: auto;}
header nav .header-menu{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
header nav .header-menu .hd-nav{ width: 100%; display: flex; flex-direction: column; background: #ddd;}
/*--▼hd1----*/
header nav .header-menu .hd-nav .hd1{ display: block; background: #fff;}
header nav .header-menu .hd-nav .hd1 p{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd1 p .hd-link { width: 100%; display: block;}
header nav .header-menu .hd-nav .hd1 p a.hd-link { display: flex; align-items: center; padding: 0 10px 0 40px; position: relative;}
header nav .header-menu .hd-nav .hd1 p a.hd-link::before{ font-size: 10px; line-height: 1em; position: absolute; left: 10px; top: 50%; content: "▼"; transform: rotate(-90deg); color: #ccc; margin-top: -5px;}
header nav .header-menu .hd-nav .hd1 p span.hd-link { display: flex; align-items: center; padding: 0 10px 0 40px;  position: relative;}
header nav .header-menu .hd-nav .hd1 p span.hd-link::before, 
header nav .header-menu .hd-nav .hd1 p span.hd-link::after{ content: ""; background: #555; position: absolute; top: 50%;} 
header nav .header-menu .hd-nav .hd1 p span.hd-link::before{ width: 14px; height: 1px; left: 10px;}
header nav .header-menu .hd-nav .hd1 p span.hd-link::after{ width: 1px; height: 14px; left: 17px; margin-top: -7px;}
header nav .header-menu .hd-nav.active .hd1 p span.hd-link::before{ width: 10px; left: 12px; background: #888;}
header nav .header-menu .hd-nav.active .hd1 p span.hd-link::after{ display: none;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span{ display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span{ }
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ font-size: 11px; padding-left: 10px; color: #777;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j::before{ content: "|"; color: #999; vertical-align: text-bottom; padding-right: 10px; font-weight: 200;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.e{ font-size: 18px;}
/*--▼hd2----*/
header nav .header-menu .hd-nav .hd2{ width: 94%; display: none; margin: 10px 3% 20px; background: #fff; border: solid 1px #aaa; border-radius: 4px; flex-direction: column; position: relative;}
header nav .header-menu .hd-nav.active .hd2{ display: flex;}
/*--▼hd2 hd2-left----*/
header nav .header-menu .hd-nav .hd2 .hd2-left{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link { width: 100%; height: 40px; display: flex; justify-content: flex-start; align-items: center; border-bottom: solid 1px #d0d0d0; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link::before{ width: 6px; height: 6px; content: ""; border-radius: 100%; border: solid 4px #ccc; position: absolute; left: 7px; top: 50%; margin-top: -6px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b{ display: flex; justify-content: flex-start; align-items: baseline; padding: 0 28px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b span{  padding-left: 5px;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b, 
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b span { font-size: 14px; font-weight: 300;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link span.pcmenu{ display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 a.hd-link span{ }
/**/
header nav .header-menu .hd-nav .hd2 .hd2-left#menu-me h2 { }
header nav .header-menu .hd-nav .hd2 .hd2-left#menu-me h2 span{ }
/*--▼hd2 hd2-right----*/
header nav .header-menu .hd-nav .hd2 .hd2-right, 
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box, 
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block{ width: 100%; display: flex; flex-direction: column; padding: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block{ box-shadow: 0 0 0 1px #d0d0d0 inset;}

/*hd-box-block*/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3{ background: #ddd; display: flex; align-items: center; justify-content: flex-start; padding: 4px 4px 4px 10px; border-bottom: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 span{ font-size: 9px; font-weight: 500; line-height: 1em;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block h3 a{ display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p{ display: flex; flex-wrap: wrap;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span{ width: 50%;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ width: 100%; display: flex; padding: 4px 5px 4px 15px; border-bottom: solid 1px #d0d0d0; font-size: 10px; position: relative; color: #444;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a::before{ position: absolute; left: 4px; top: 50%; font-size: 6px; line-height: 1em; content: "▼"; transform: rotate(-90deg); margin-top: -3px; color: #bbb;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span:nth-child(odd) a{ border-right: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a span{ }
/*hd-box-p*/
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a{ width: 100%; display: flex; align-items: center; position: relative; height: 36px; font-size: 14px; padding-left:20px; border-bottom: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a::before{ position: absolute; left: 4px; top: 50%; font-size: 6px; line-height: 1em; content: "▼"; transform: rotate(-90deg); margin-top: -3px; color: #bbb;}
/**/
header nav .header-menu .hd-nav#hd-about .hd2 .hd2-left{ display: none;}
/**/
header nav .header-menu .hd-nav#hd-contact { background: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd1, 
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-left { display: none;}
header nav .header-menu .hd-nav#hd-contact .hd2{ width: 90%; margin: 20px 5% 60px; background: none; border: none; border-radius: 0; display: flex !important;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr{ width: 46%; display: flex; padding: 20px 0; margin: 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr.form{ width: 100%; padding: 10px 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr.form a{ height: 100px; background: #CC292C;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a{ width: 100%; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background:#EF7E1C; border-radius: 6px; }
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a .txt{font-size: 15px; color:#fff; font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-right .hd-ctr a .txt .min{font-size: 11px; color:#fff; font-weight: 400;}
}
@media screen and (max-width: 520px) {
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.e{ font-size: 4.4vw;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ font-size: 3.2vw;}
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b,
header nav .header-menu .hd-nav .hd2 .hd2-left h2 .hd-link b span{ font-size:3.2vw;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-block p > span a{ font-size: 2.6vw;}
header nav .header-menu .hd-nav .hd2 .hd2-right .hd-box .hd-box-p a .txt{ font-size: 2.6vw;}
}



/*-----------
pageup
--------------*/
.pageup{ width: 100px; height: 100px; position:fixed; right: -20px; bottom: 10px; z-index: 30000; transition: 0.5s; transform: scale(0,0);}
.scroll .pageup{ transform: scale(1,1);}
.pageup a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0.7;}
.pageup a:hover{opacity: 1;}
.pageup a span{ width: 100%; display: block; line-height: 1.1em; color: #000; font-size: 14px; font-weight: 500; text-align: center;}
.pageup a img.cta_area{ width: 100px; height: 100px; position: absolute; right: 0%; top: 0%; transition: 0s !important;}
.pageup a:hover span{ line-height: 1.3em;}
.pageup a:hover img.cta_area{transform: rotate(0deg) !important; transition: 2s !important;}
@media screen and (max-width: 750px) {
.pageup, 
.pageup a img.cta_area{ width: 70px; height: 70px;}
.pageup a span{ font-size: 10px;}
}








/*==============================================
footer
===============================*/


@media screen and (min-width: 1382px) {
/*1300の94% 1300以上*/
#footerNav #footerMenu .footerInfo p, 
#footerNav #footerMenu .footerInfo .textAria{ left: 50%; margin-left: -650px;}
#footerNav #footerMenu .fNav .fTxt{ right: 50%; margin-right: -650px;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox{ right: 50%;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ margin-right: -140px;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ margin-right: -380px;}

}
@media screen and (min-width: 850px) and (max-width: 1382px) {
/* 850以上 1300以下*/
#footerNav #footerMenu .footerInfo p, 
#footerNav #footerMenu .footerInfo .textAria{ left: 2%;}
#footerNav #footerMenu .fNav .fTxt{ right: 2%;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ right: calc(2% + 260px);}/* fTxt横200 余白60 */
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ right: calc(2% + 440px);}/* fTxt横200 余白60 navBox.nv1横140 余白40*/
}
@media screen and (min-width: 850px) and (max-width: 1000px) {
#footerNav #footerMenu .fNav .fTxt p > span a{ font-size: 12px !important; font-weight: 400 !important;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ font-size: 12px !important; font-weight: 400 !important;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt::before{ content: ":"; padding: 0 2px;}

#footerNav #footerMenu .fNav .fTxt{ width: 170px !important;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ right: calc(2% + 220px) !important;}/* fTxt横200 余白60 */
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ right: calc(2% + 400px) !important;}/* fTxt横200 余白60 navBox.nv1横140 余白40*/
}


@media screen and (min-width: 850px) {
/* 850以上*/
/*----------------------------*/
#footerNav { position: relative; width: 100%; height: 500px; overflow: hidden;}
#footerNav #footerMenu {}
#footerNav #footerMenu .footerInfo{}
#footerNav #footerMenu .footerInfo * { font-weight: 300; color: #666;}
#footerNav #footerMenu .footerInfo p{ width: 140px; position: absolute; top:50px; z-index: 1000;}
#footerNav #footerMenu .footerInfo .textAria{ width: 190px; position: absolute; top:150px; z-index: 1000;}
#footerNav #footerMenu .footerInfo h1{ font-size: 11px; padding-left: 5px; color: #333;}
#footerNav #footerMenu .footerInfo ul { padding-left: 5px;}
#footerNav #footerMenu .footerInfo ul li{ width: 100%; display: block; font-size: 10px; margin: 3px 0;}
#footerNav #footerMenu .footerInfo ul li a{ text-decoration: underline;}
#footerNav #footerMenu .footerInfo ul li .add{ display: block; font-size: 10px; line-height: 1.1em; margin-bottom: 2px;}
#footerNav #footerMenu .footerInfo ul li .copy{ font-size: 11px; letter-spacing: 0;}

/*-----*/
#footerNav #footerMenu .fNav{ }
#footerNav #footerMenu .fNav .fTxt{ width: 200px; position: absolute; top: 50px; z-index: 1000;}
#footerNav #footerMenu .fNav .fTxt p{ display: flex; flex-direction: column; align-items: flex-start;}
#footerNav #footerMenu .fNav .fTxt p > span{ display: block; margin-bottom: 12px;}
#footerNav #footerMenu .fNav .fTxt p > span a{ width: auto; font-size: 15px; letter-spacing: 0; font-weight: 300; line-height: 1em; position: relative; white-space: nowrap; display: flex; align-items: baseline; color: #333;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ font-weight: 300; font-size: 13px; letter-spacing: -1px;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt::before{ content: ":"; padding: 0 3px;}
#footerNav #footerMenu .fNav .fTxt p > span a .min{ font-size: 10.5px; letter-spacing: 0; font-weight: 300; padding-left: 5px; color: #555;}
#footerNav #footerMenu .fNav .fTxt p > span a .bk-color{ width: 0%; height: 4px; position: absolute; left: 0; bottom: 0; display: block; border-radius: 4px; z-index: -1; transition: 0.6s; opacity: 0.6;}
#footerNav #footerMenu .fNav .fTxt p > span a:hover .bk-color{ width: 100%;}

/**/
#footerNav #footerMenu .fNav .fMenu{}
#footerNav #footerMenu .fNav .fMenu *{ font-size: 12px;}
#footerNav #footerMenu .fNav .fMenu .navBox{ max-width: 220px; position: absolute; top: 50px; display: flex; flex-direction: column; z-index: 1000;}
#footerNav #footerMenu .fNav .fMenu .navBox h2{ display: flex; flex-direction: column; margin-bottom: 15px;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .en{ font-size: 14px; font-weight: 300; line-height: 1em;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .jp{ font-size: 9px; letter-spacing: 0; font-weight: 300; }
#footerNav #footerMenu .fNav .fMenu .navBox ul{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ margin: 3px 0;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 10.5px; font-weight: 300; position: relative; margin-left:0.8em; color: #555; white-space: nowrap;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a::before{ content: "・"; margin-left: -0.8em; opacity: 0.8;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a .bk-color{ width: 0%; height: 4px; position: absolute; left: 0; bottom: 0; display: block; border-radius: 4px; z-index: -1; transition: 0.6s; opacity: 0.6;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover { color: #000;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover .bk-color{ width: 100%;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson{ pointer-events: none;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a{ color: #999;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a::after{ content: " [制作中]"; font-size: 9px; letter-spacing: 0;}
/**/
#footerNav .fotterText{ width: 1100px; position: absolute; left: 50%; bottom:30px; margin: 0 0 0 -550px; z-index: 100; padding: 10px; border-top: solid 1px #ddd;}
#footerNav .fotterText span{ display: block; font-size: 10px; letter-spacing: 0; color: #444; line-height: 1.3em; font-weight: 300;}
}
@media screen and (min-width: 850px) and (max-width: 1200px) {
#footerNav .fotterText{ width: 94%; left: 3%; bottom: 15px; margin: 0; padding: 10px 0; }
#footerNav .fotterText span{ font-size: 9px;}
}
@media screen and (max-width: 1100px) {
#footerNav .footerInfo{ width: 20%; left:3%;  margin-left:0;;}
}
@media screen and (max-width: 800px) {
#footerNav .footerInfo ul li, 
#footerNav .footerInfo ul li span{ font-size: 10px;}
}
@media screen and (max-width: 750px) {
#footerNav { height: auto; display: flex; flex-direction: column;}
#footerNav #footerMenu{ display: flex; flex-direction: column-reverse; width: 100%; padding: 40px 0;}
#footerNav .footerInfo{ width: 94%; position: relative; left: auto; top: auto; margin:0 6% 30px 0; align-items: center;}
#footerNav .footerInfo h1{ width: 60%; margin:0 20%;}
#footerNav .footerInfo h1 img, 
#footerNav .footerInfo ul, 
#footerNav .footerInfo ul li{ width: auto;}
#footerNav .footerInfo ul li{ font-size: 10px; color: #777;}
#footerNav .footerInfo ul li span{ font-size: 10px; color: #444;}
/*-----*/
#footerNav .fNav{ width: 100%; position: relative; left: auto; top: auto; right:auto !important; margin-bottom: 40px;}
}





@media screen and (max-width: 850px) {
/* 850以下*/
/*----------------------------*/
#footerNav { width: 100%; display:block;}
#footerNav #footerMenu { width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-content: center;}
#footerNav #footerMenu .footerInfo{ width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo p{ width: 100%; padding: 120px 0; text-align: center; }
#footerNav #footerMenu .footerInfo img{ width: 60%; max-width: 140px;}
#footerNav #footerMenu .footerInfo .textAria{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo h1{ font-size: 12px; font-weight: 400; text-align: center;}
#footerNav #footerMenu .footerInfo ul { display: flex;  flex-direction: column; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo ul li{ display: flex; flex-direction: column;}
#footerNav #footerMenu .footerInfo ul li span, 
#footerNav #footerMenu .footerInfo ul li a{ display: block; font-size: 9px; line-height: 16px; line-height: 2.0em; font-weight: 300;}
#footerNav #footerMenu .footerInfo ul li a{ text-decoration: underline;}
#footerNav #footerMenu .footerInfo ul li .add{ }
#footerNav #footerMenu .footerInfo ul li .copy{ }

/*-----*/
#footerNav #footerMenu .fNav{ width: 100%; display: flex; justify-content: space-between;}
#footerNav #footerMenu .fNav .fTxt{ width: 30%; padding: 15px 5px;}
#footerNav #footerMenu .fNav .fTxt p{ width: 100%; display: flex; flex-direction: column; position: sticky; top: 10px;}
#footerNav #footerMenu .fNav .fTxt p > span{ display: block; margin: 10px 0;}
#footerNav #footerMenu .fNav .fTxt p > span a{ padding-left: 10px; position: relative;}

#footerNav #footerMenu .fNav .fTxt p > span a{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: 2.0vw; letter-spacing: 0; font-weight: 300; color: #111;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ display: flex; font-size: 9px; letter-spacing: 0; font-weight: 300; color: #777; line-height: 1em;}

#footerNav #footerMenu .fNav .fTxt p > span a .min{ font-size: 9px; line-height: 1.3em; font-weight: 300; color: #777;}
#footerNav #footerMenu .fNav .fTxt p > span a .bk-color{ display: none;}


/**/
#footerNav #footerMenu .fNav .fMenu{ width: 68%; padding-bottom: 50px; margin-top: 15px; display: flex; flex-direction: row;}
#footerNav #footerMenu .fNav .fMenu *{ }
#footerNav #footerMenu .fNav .fMenu .navBox{ width: 49%; margin: 50px 1% 0 30px; display: flex; padding: 10px; border-radius:4px; flex-direction: column;}
#footerNav #footerMenu .fNav .fMenu .navBox h2{ width: 100%; display: flex; flex-direction: column; }
#footerNav #footerMenu .fNav .fMenu .navBox h2 .en{ font-size: 16px; font-weight: 300; line-height: 1.2em;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .jp{ font-size: 9px; font-weight: 300; line-height: 1em; border-bottom: solid 1px #999; padding-bottom: 15px; margin-bottom: 10px;}
#footerNav #footerMenu .fNav .fMenu .navBox ul{ width: 100%; display: flex; flex-wrap: wrap;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ width: 100%; display: block; line-height: 1.3em;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 11px; font-weight: 300; color: #555;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a::before{ content: "・";}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a .bk-color{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover { }
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover .bk-color{}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson{ }
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a::after{ }
/**/
#footerNav .fotterText{ width: 94%; margin: 0 3% 20px; border-top: double 3px #ccc; padding: 20px 0;}
#footerNav .fotterText span{ display: block; font-size: 8.5px; color: #555; line-height: 1.4em; font-weight: 300;}
}

@media screen and (max-width: 700px) {
#footerNav #footerMenu .fNav .fTxt p > span a{ font-size: 3.4vw;}
/**/
#footerNav #footerMenu .fNav .fMenu{ flex-direction: column;}
#footerNav #footerMenu .fNav .fMenu .navBox{ width: 100%; margin:40px 0 0;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ width: 50%;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 2.3vw; letter-spacing: 0; padding: 5px 0;}

}

/*--back---------*/
footer #fback{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; z-index: 1;}
footer #fback span{ width: 1%; height:10%; margin: 0; padding: 0; display:block; position: relative; background: #fff;}
footer #fback span::before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; content: ""; opacity: 0; transition: 5.0s 5.0s;}
footer #fback span:hover::before{ opacity: 1; transition: 10.0s;}
@media screen and (max-width: 800px) {footer #fback{ display: none;}}
/*================================
endCTA2
===============================*/
#endCTA2{ width: 100%; background: #888; padding: 100px 2%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#endCTA2 .ctaBox2{ width: 100%; max-width: 800px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 10;}
#endCTA2 .ctaBox2 h2{ text-align: center; font-size: 22px; font-weight: 300; color: #fff; margin-bottom: 30px;}
#endCTA2 .ctaBox2 .mailTxt{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
#endCTA2 .ctaBox2 .mailTxt span{ color: #fff; font-size: 14px; line-height: 1.2em; padding: 4px 0; font-weight: 300; }
#endCTA2 .ctaBox2 h2 br, 
#endCTA2 .ctaBox2 .mailTxt span br{ display: none;}
#endCTA2 .ctaBox2 .linkBox{ width: 100%; display: flex; justify-content: space-between; margin-top: 40px;}
#endCTA2 .ctaBox2 .linkBox a{ width: 47%; height: 110px; padding-bottom: 5px; background: rgba(255,255,255,1); border: solid 1px #fff; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#endCTA2 .ctaBox2 .linkBox .docBox{ width: 47%; height: 110px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
#endCTA2 .ctaBox2 .linkBox .docBox a{ width: 48.5%;}
#endCTA2 .ctaBox2 .linkBox a *{ color: #111; transition: 0.6s; font-weight: 300;} 
#endCTA2 .ctaBox2 .linkBox a .en{ font-size: 11px; }
#endCTA2 .ctaBox2 .linkBox a .jp{ font-size: 17px; letter-spacing: 0; text-align: center;}
#endCTA2 .ctaBox2 .linkBox a .jp span{ font-size: 12px; display: block;}
#endCTA2 .ctaBox2 .linkBox .docBox a .jp{ font-size: 14px;}
#endCTA2 .ctaBox2 .linkBox .docBox a .jp span{ font-size: 10px;}
#endCTA2 .bk-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; transition: 0.8s;}

@media screen and (min-width: 600px) {
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a:hover{ background: rgba(50,50,50,0.9); border: solid 1px rgba(50,50,50,0.9);}
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a{  background: rgba(255,255,255,0);}
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a *{ color: #fff;} 
#endCTA2.endCTA2-hover .bk-color{ opacity: 0.6;}
/*WEBマーケだけ*/
#endCTA2{ background: rgba(100,100,100,.75); transition: 0.2s;}
.out_movie{ background: rgba(150,150,150,1);}
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a:hover{ opacity: 0.7;}

}
@media screen and (max-width: 700px) {
#endCTA2 .ctaBox2 .linkBox .docBox a .jp span{ font-size: 8px; letter-spacing: 0;}
}
@media screen and (max-width: 650px) {
#endCTA2 .ctaBox2 h2 br, 
#endCTA2 .ctaBox2 .mailTxt span br{ display:block;}
#endCTA2 .ctaBox2 h2{ font-size:4.4vw;}
}
@media screen and (max-width: 600px) {
#endCTA2{ background: #666; padding: 50px 2%;}
#endCTA2 .ctaBox2 .linkBox{ padding:0 2%; flex-direction: column;}
#endCTA2 .ctaBox2 .linkBox a{ width: 100%; height: 80px; box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#endCTA2 .ctaBox2 .linkBox a.cu{ height: 140px; margin-bottom: 30px;}
#endCTA2 .bk-color{ opacity: 0.1;}
#endCTA2 .ctaBox2 .linkBox a .en{ font-size: 9px; line-height: 1em; font-weight: 500;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp{ font-size:14px;}
#endCTA2 .ctaBox2 .linkBox a .jp span{ font-size: 10px;}
#endCTA2 .ctaBox2 .linkBox a.cu .en{ font-size: 11px;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp{ font-size:5.8vw; font-weight: 500;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp span{ font-size: 11px;}

#endCTA2 .ctaBox2 .linkBox .docBox{ width: 100%; height: 80px;}
#endCTA2 .ctaBox2 .linkBox .docBox a{ width: 48%; padding: 2px 0 0;}
#endCTA2 .ctaBox2 .linkBox .docBox a .jp{ font-size:3.0vw;}
#endCTA2 .ctaBox2 .linkBox .docBox a .jp span{ font-size: 2.4vw;}

}



/*-------------------------
ページトップへ
-------------------------*/
@media screen and (min-width: 1001px) {
.sp-up{ display: none;}
.pc-up{ width: 100%; display: block; position: relative; z-index: 100;}
.pc-up .tit{ display: flex; width: 100%; justify-content: center; align-items: center; height: 60px; background: #eee; color: #000; font-size: 14px; border: solid 1px #000;}
.pc-up .txt{ display: flex; position: absolute; width: 100%; left: 0; top: 0; flex-direction: column; -webkit-clip-path: inset( 0 0 100% 0); clip-path: inset( 0 0 100% 0); transition: 0.4s;}
.pc-up:hover .txt{ -webkit-clip-path: inset(0); clip-path: inset(0);}
.pc-up .txt * { transition: 0.5s;}
.pc-up .txt a{ display: flex; width: 100%; justify-content: flex-start; align-items: center; height: 40px; background: #000; border-bottom: solid 1px #444;}
.pc-up .txt a:last-child{ border-bottom: solid 0 #444;}
.pc-up .txt a:hover{ background:#62B0AA;}
.pc-up .txt a:hover span, 
.pc-up .txt a:hover span::before{ color: #000; opacity: 1;}
.pc-up .txt a span{ color: #fff; font-size: 14px; position: relative; margin-left: 40vw;}
.pc-up .txt a span::before{ position: absolute; content: "▲"; opacity: 0.2; color: #fff; left: -1.5em; top: 50%; margin-top: -6px; line-height: 12px;}
}
@media screen and (max-width: 1000px) {
.pc-up{ display: none;}
.sp-up{ width: 100%; display: block; position: relative; z-index: 100;}
.sp-up a{ display: flex; width: 100%; justify-content: center; align-items: center; height:70px; background: #000; color: #fff; font-size: 14px;}
}
/*-------------------------
コラムリスト
-------------------------*/
.colimnList{ border-top: solid 1px #000; margin-top: -1px; padding: 90px 0 120px;}
.colimnList .inner{ display: flex; flex-direction: column;}
/**/
.colimnList .titleArea{ width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
.colimnList .titleArea h2{ display: flex; flex-direction: row; }
.colimnList .titleArea h2 .en { padding:0 20px;}
.colimnList .titleArea h2 .en, 
.colimnList .titleArea h2 .en *{ font-size: 32px; line-height: 32px; font-weight: 300;}
.colimnList .titleArea h2 .mvAnime, 
.cplimnList .titleArea h2 .mvAnime *{ font-size: 18px; line-height: 32px;}
.colimnList .titleArea p{ display: block;}
.colimnList .titleArea p a{ background: #eee; border: solid 1px #eee; color: #777; font-size: 12px; padding: 4px 10px; border-radius: 4px;}
.colimnList .titleArea p a:hover{ background: #fff; color: #000; border: solid 1px #000;}
/**/
.colimnList .itemArea{ width: 100%; display: flex; padding: 15px 0; overflow-x: scroll; overflow-y: hidden;}

.colimnList .itemArea::-webkit-scrollbar { width: 4px; height: 4px;}
.colimnList .itemArea::-webkit-scrollbar-track { background-color:#e5e5e5; border-radius: 4px;}
.colimnList .itemArea::-webkit-scrollbar-thumb { background-color:#555; box-shadow:0 0 0 1px rgba(255, 255, 255, .3);  border-radius: 4px;}

/**/
.colimnList .itemArea p{ display: none;}
.colimnList .itemArea .item{ width: 18%; min-width: 200px; display: block; margin: 1%; position: relative;}
.colimnList .itemArea .item a.colimn-link{ width: 100%; height: 300px; display: block; border: solid 1px #ddd; padding:100px 15px 15px; background: #fff;}
.colimnList .itemArea .item a.colimn-link h3{ display: block; font-size: 17px; letter-spacing: 3px; line-height: 1.4em; color: #000; font-weight: 400;}
.colimnList .itemArea .item a.colimn-link:hover{ border: solid 1px #00A684; }
.colimnList .itemArea .item a.colimn-link:hover h3{ color: #00A684;}
.colimnList .itemArea .item dl{ max-width: calc(100% - 30px); display: flex; flex-direction: column; position: absolute; left: 15px; top: 15px;}
.colimnList .itemArea .item dl *{ color: #999; transition: 0.6s;}
.colimnList .itemArea .item dl:hover *{ color: #000;}
.colimnList .itemArea .item dl dt{ font-size:12px; padding-bottom: 5px; margin-bottom: 1px; border-bottom: solid 1px #ccc;}
.colimnList .itemArea .item dl dd{ display: flex; flex-direction: column; }
.colimnList .itemArea .item dl dd a{ font-size:9px; margin:3px 0; display: inline-block; line-height: 1em; font-style: italic;}
.colimnList .itemArea .item dl dd a::before{ content: "#"; font-style: italic;}
.colimnList .itemArea .item dl:hover dd a:hover{ color: #00A684; text-decoration: underline;}
@media screen and (max-width: 1200px) {
.colimnList .itemArea .item a.colimn-link h3{ font-size: 15px; letter-spacing: 2px;}
}
@media screen and (max-width: 1100px) {
.colimnList .itemArea .item a.colimn-link h3{ line-height: 1.2em;}
}
@media screen and (max-width: 900px) {
.colimnList{ padding: 80px 0 60px;}
.colimnList .itemArea{ flex-direction: column;}
.colimnList .itemArea .item{ width: 94%; margin: 12px 3%; justify-content: flex-end;}
.colimnList .itemArea .item a.colimn-link{ height: auto; padding:80px 4% 30px ; background: #fff; border: solid 1px #111;}
.colimnList .itemArea .item dl{ max-width:94%; left: 3%; top: 20px;}
.colimnList .itemArea .item dl *{ color: #777;}
.colimnList .itemArea .item dl dt{ font-size:11px; padding:0 10px 2px; margin-bottom: 6px; border-bottom: solid 4px #ddd;}
.colimnList .itemArea .item dl dd{ flex-direction: row; padding: 0 10px;}
.colimnList .itemArea .item dl dd a{ font-size:8px; margin:0 4px 0 0; letter-spacing: 0; pointer-events: none;}
.colimnList .itemArea .item a.colimn-link h3{ font-size: 18px;}
}
@media screen and (max-width: 600px) {
.colimnList .titleArea p{ display: none;}
/**/
.colimnList .itemArea p{ display: block; width: 70%; margin: 20px 15% 0;}
.colimnList .itemArea p a{ height: 44px; display: flex; align-items: center; justify-content: center; background: #00A684; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 6px;}
.colimnList .itemArea p a:hover{ background: #000;}
}


/*===================
 サービス リンク一覧
=====================*/
.ser-link-list{ border-top: solid 1px #111;}
.ser-link-list .inner{ padding: 60px 2% 80px;}
.ser-link-list .inner h2{ padding: 15px 2%; font-size: 30px; font-weight: 200;}
.ser-link-list.solutionList .inner h2{ font-size: 20px;}
.ser-link-list .inner .listArea{ display: flex; flex-wrap: wrap;}
.ser-link-list .inner .listArea .box{ width: 25%; padding: 15px;}
.ser-link-list .inner .listArea .box a{ height: 100%; display: flex; flex-direction: column; padding: 20px; border: solid 1px #ddd; box-shadow: 0 4px 12px rgba(0,0,0,.1); background: #fff; border-radius: 10px; transition: 1.2s;}
.ser-link-list .inner .listArea .box a h3{ font-size: 14px; padding: 5px 0 10px; margin-bottom: 15px; position: relative;}
.ser-link-list .inner .listArea .box a p{ font-size: 11px; line-height: 1.2em;}
.ser-link-list.solutionList .inner .listArea{ flex-wrap: wrap;}
.ser-link-list.solutionList .inner .listArea .box{ width: 16.66%; padding:6px; justify-content: flex-start; align-items: flex-start; align-content: flex-start;}
.ser-link-list.solutionList .inner .listArea .box a{ padding:20px 12px 16px; border-radius: 2px; border: solid 1px #777; box-shadow: 0 2px 8px rgba(0,0,0,.1); flex-direction: column-reverse; justify-content: center; position: relative;}
.ser-link-list.solutionList .inner .listArea .box a h3{ margin-bottom: 0; padding:2px 0 0; line-height: 1.1em; font-size: 13px;}
.ser-link-list.solutionList .inner .listArea .box a p{ position: absolute; left: 5px; top: 3px; font-size: 10.5px; line-height: 1.2em;}
@media screen and (min-width: 701px) {
.ser-link-list{ background: #fff !important;}
.ser-link-list .inner .listArea .box a *{ transition: 0.4s;}
.ser-link-list .inner .listArea .box a:hover{ border-radius: 0px; background: #444;}
.ser-link-list .inner .listArea .box a:hover *{ color: #fff;}
.ser-link-list.solutionList .inner .listArea .box a h3::after{ display: none;}
.ser-link-list .inner .listArea .box a h3::after{ width: 0%; height: 1px; background: #aaa; content: ""; position: absolute; left: 0; bottom: 0; transition: 0.8s;}
.ser-link-list .inner .listArea .box a:hover h3::after{ width: 100%;}
}
@media screen and (max-width: 1100px) {
.ser-link-list .inner .listArea .box{ padding: 15px 10px;}
}
@media screen and (max-width: 1000px) {
.ser-link-list .inner .listArea .box{ width: 33%;}
.ser-link-list.solutionList .inner .listArea .box{ width: 20%;}
}
@media screen and (max-width: 800px) {
.ser-link-list.solutionList .inner .listArea .box{ width: 25%;}
}
@media screen and (max-width: 700px) {
.ser-link-list{ border-top: none;}
.ser-link-list .inner{ padding: 20px 0% 40px; border-bottom: solid 2px #fff;}
.ser-link-list .inner h2{ color: #fff;}
.ser-link-list .inner .listArea .box{ width: 50%;}
.ser-link-list .inner .listArea .box a{ box-shadow: 0 4px 12px rgba(0,0,0,.3); border: none; }
.ser-link-list.solutionList .inner .listArea .box{ width: 33%; padding: 3px;}
.ser-link-list.solutionList .inner .listArea .box a{ padding:0 10px; height: 60px; justify-content: center; align-items: center;}
.ser-link-list.solutionList .inner .listArea .box a h3{ font-size: 11px;}
.ser-link-list.solutionList .inner .listArea .box a p{ color: #777; font-size: 9px;}
}
@media screen and (max-width: 600px) {
.ser-link-list .inner h2{ font-size: 4.6vw; text-align: center; color: #fff; font-weight: bold;}
.ser-link-list .inner .listArea .box{ padding: 6px;}
.ser-link-list .inner .listArea .box a{ border-radius: 6px;}
.ser-link-list .inner .listArea .box a h3{ padding: 0px 0 6px; margin-bottom: 6px; font-size: 10px;}
}