@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";

 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&family=Noto+Serif+JP:wght@500&family=Lato&display=swap&subset=japanese"); a:link{color: #01289d;}
a:visited{color: #01289d;}
a:active{color: #01289d;}
a:hover{text-decoration: none;} body {
background: url(/wp/common/img/bg.jpg) repeat-x center 0px;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
color: #000;
letter-spacing: 0.1em;
margin: 0px;
padding: 0px
}
p, li, dt, dd {
font-size: 95%;
font-weight: 300;
line-height: 170%;
}
p, form, ul, ol, li, dl, dt, dd, td, th, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
label,
button,
select,
input[type="raddio"],
input[type="checkbox"],
input[type="submit"],
input[type="button"] {
cursor: pointer;
}
input,
select,
select option,
textarea {
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
img {
vertical-align: top;
border: none;
} .clear {
width: 0px;
height: 0px;
clear: both;
margin: 0px;
padding: 0px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0px;
margin: 0px;
padding: 0px;
}
.flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
a:hover,
input[type="image"]:hover,
input[type="submit"]:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
}
.sizeFull {
width: 100%;
}
.fullImg {
width: 100%;
height: auto;
}
.maxImg {
max-width: 100%;
height: auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.allt {
text-align: left;
}
.alct {
text-align: center;
}
.alrt {
text-align: right;
}
.nmlTxt {
font-weight: normal;
}
.bldTxt {
font-weight: bold;
}
.narTxt {
transform: scale(0.8, 1);
}
.widTxt {
transform: scale(1.5, 1);
}
.justTxt {
text-align: justify;
text-justify: distribute;
}
.waku {
border: 1px solid #ddd;
}
div.wakuGra {
background-color: #f6f6f6;
padding: 15px 20px;
}
div.wakuYel {
background-color: #FCF9E9;
padding: 15px 20px;
}
div.wakuBlu {
background-color: #EBF4FA;
padding: 15px 20px;
}
div.wakuRed {
background-color: #f7f0f0;
padding: 15px 20px;
}
div.wakuGre {
background-color: #f1f9df;
padding: 15px 20px;
}
a.btnArea {
display: inline-block;
background-color: #333;
text-decoration: none;
color: #fff;
padding: 6px 35px;
border: 2px solid #d7d7d7;
}
a.btnArea.red {
background-color: #bf0d00;
border: 2px solid #f9d1ce;
}
a.btnArea.green {
background-color: #51920b;
border: 2px solid #d1e5bb;
} .smlTxt {
font-size: 90%;
}
.smlerTxt {
font-size: 80%;
}
.smlestTxt {
font-size: 70%;
}
.bigTxt {
font-size: 115%;
}
.biggerTxt {
font-size: 130%;
}
.biggestTxt {
font-size: 150%;
}
.colWt {
color: #fff;
}
.colBk {
color: #000;
}
.colGra {
color: #888888;
}
.colRed {
color: #cc0000;
}
.colPink {
color: #d33258;
}
.colPur {
color: #ac6ace;
}
.colBlue {
color: #4BAAE6;
}
.colOra {
color: #f68e12;
}
.colGree {
color: #336600;
}
.colBro {
color: #b49449;
} .link01 {
background: url(/wp/common/img/ico_link01.png) no-repeat 0px 7px;
padding: 0px 0px 0px 36px;
}
#pageTop {
position: fixed;
bottom: 75px;
right: 20px;
z-index: 9999;
}
#pageTop a {
background-color: rgba(19, 127, 189, 0.3);
display: block;
z-index: 999;
width: 43px;
height: 26px;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 17px 0 0 0;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#pageTop a:hover {
background-color: rgba(19, 127, 189, 0.8);
} @media print{
body { zoom:1; }
}
 .mt3 {
margin-top: 3px;
}
.mt5 {
margin-top: 5px;
}
.mt8 {
margin-top: 8px;
}
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mt20 {
margin-top: 20px;
}
.mt25 {
margin-top: 25px;
}
.mt30 {
margin-top: 30px;
}
.mt35 {
margin-top: 35px;
}
.mt40 {
margin-top: 40px;
}
.mt45 {
margin-top: 45px;
}
.mt50 {
margin-top: 50px;
}
.mt60 {
margin-top: 60px;
}
.mt70 {
margin-top: 70px;
}
.mt80 {
margin-top: 80px;
}
.mt90 {
margin-top: 90px;
}
.mt100 {
margin-top: 100px;
}
.mb3 {
margin-bottom: 3px;
}
.mb5 {
margin-bottom: 5px;
}
.mb8 {
margin-bottom: 8px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}
.mb25 {
margin-bottom: 25px;
}
.mb30 {
margin-bottom: 30px;
}
.mb35 {
margin-bottom: 35px;
}
.mb40 {
margin-bottom: 40px;
}
.mb45 {
margin-bottom: 45px;
}
.mb50 {
margin-bottom: 50px;
}
.mb60 {
margin-bottom: 60px;
}
.mb70 {
margin-bottom: 70px;
}
.mb80 {
margin-bottom: 80px;
}
.mb90 {
margin-bottom: 90px;
}
.mb100 {
margin-bottom: 100px;
}
.ml3 {
margin-left: 3px;
}
.ml5 {
margin-left: 5px;
}
.ml8 {
margin-left: 8px;
}
.ml10 {
margin-left: 10px;
}
.ml15 {
margin-left: 15px;
}
.ml20 {
margin-left: 20px;
}
.ml25 {
margin-left: 25px;
}
.ml30 {
margin-left: 30px;
}
.ml35 {
margin-left: 35px;
}
.ml40 {
margin-left: 40px;
}
.ml45 {
margin-left: 45px;
}
.ml50 {
margin-left: 50px;
}
.ml60 {
margin-left: 60px;
}
.ml70 {
margin-left: 70px;
}
.ml80 {
margin-left: 80px;
}
.ml90 {
margin-left: 90px;
}
.ml100 {
margin-left: 100px;
}
.mr3 {
margin-right: 3px;
}
.mr5 {
margin-right: 5px;
}
.mr8 {
margin-right: 8px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.mr20 {
margin-right: 20px;
}
.mr25 {
margin-right: 25px;
}
.mr30 {
margin-right: 30px;
}
.mr35 {
margin-right: 35px;
}
.mr40 {
margin-right: 40px;
}
.mr45 {
margin-right: 45px;
}
.mr50 {
margin-right: 50px;
}
.mr60 {
margin-right: 60px;
}
.mr70 {
margin-right: 70px;
}
.mr80 {
margin-right: 80px;
}
.mr90 {
margin-right: 90px;
}
.mr100 {
margin-right: 100px;
} .pt3 {
padding-top: 3px;
}
.pt5 {
padding-top: 5px;
}
.pt8 {
padding-top: 8px;
}
.pt10 {
padding-top: 10px;
}
.pt15 {
padding-top: 15px;
}
.pt20 {
padding-top: 20px;
}
.pt25 {
padding-top: 25px;
}
.pt30 {
padding-top: 30px;
}
.pt35 {
padding-top: 35px;
}
.pt40 {
padding-top: 40px;
}
.pt45 {
padding-top: 45px;
}
.pt50 {
padding-top: 50px;
}
.pt60 {
padding-top: 60px;
}
.pt70 {
padding-top: 70px;
}
.pt80 {
padding-top: 80px;
}
.pt90 {
padding-top: 90px;
}
.pt100 {
padding-top: 100px;
}
.pb3 {
padding-bottom: 3px;
}
.pb5 {
padding-bottom: 5px;
}
.pb8 {
padding-bottom: 8px;
}
.pb10 {
padding-bottom: 10px;
}
.pb15 {
padding-bottom: 15px;
}
.pb20 {
padding-bottom: 20px;
}
.pb25 {
padding-bottom: 25px;
}
.pb30 {
padding-bottom: 30px;
}
.pb35 {
padding-bottom: 35px;
}
.pb40 {
padding-bottom: 40px;
}
.pb45 {
padding-bottom: 45px;
}
.pb50 {
padding-bottom: 50px;
}
.pb60 {
padding-bottom: 60px;
}
.pb70 {
padding-bottom: 70px;
}
.pb80 {
padding-bottom: 80px;
}
.pb90 {
padding-bottom: 90px;
}
.pb100 {
padding-bottom: 100px;
}
.pl3 {
padding-left: 3px;
}
.pl5 {
padding-left: 5px;
}
.pl8 {
padding-left: 8px;
}
.pl10 {
padding-left: 10px;
}
.pl15 {
padding-left: 15px;
}
.pl20 {
padding-left: 20px;
}
.pl25 {
padding-left: 25px;
}
.pl30 {
padding-left: 30px;
}
.pl35 {
padding-left: 35px;
}
.pl40 {
padding-left: 40px;
}
.pl45 {
padding-left: 45px;
}
.pl50 {
padding-left: 50px;
}
.pl60 {
padding-left: 60px;
}
.pl70 {
padding-left: 70px;
}
.pl80 {
padding-left: 80px;
}
.pl90 {
padding-left: 90px;
}
.pl100 {
padding-left: 100px;
}
.pr3 {
padding-right: 3px;
}
.pr5 {
padding-right: 5px;
}
.pr8 {
padding-right: 8px;
}
.pr10 {
padding-right: 10px;
}
.pr15 {
padding-right: 15px;
}
.pr20 {
padding-right: 20px;
}
.pr25 {
padding-right: 25px;
}
.pr30 {
padding-right: 30px;
}
.pr35 {
padding-right: 35px;
}
.pr40 {
padding-right: 40px;
}
.pr45 {
padding-right: 45px;
}
.pr50 {
padding-right: 50px;
}
.pr60 {
padding-right: 60px;
}
.pr70 {
padding-right: 70px;
}
.pr80 {
padding-right: 80px;
}
.pr90 {
padding-right: 90px;
}
.pr100 {
padding-right: 100px;
}
 .pcView {
display: block;
}
.spView {
display: none;
}
a[href^="tel:"] {
pointer-events: none;
text-decoration: none;
color: #000;
}
.detailTb {
width: 100%;
line-height: 160%;
border-collapse: collapse;
}
.detailTb.topbd {
border-top: 1px dotted #ccc;
}
.detailTb td,
.detailTb th {
vertical-align: top;
padding: 15px 2%;
border-bottom: 1px dotted #ccc;
box-sizing: border-box;
}
.detailTb.wd td,
.detailTb.wd th {
padding: 30px 2%;
}
.detailTb th {
width: 30%;
font-weight: bold;
text-align: left;
}
.detailTb.gray th {
background-color: #f6f6f6;
}
.noteLi li {
margin: 5px 0px;
padding-left: 1em;
text-indent: -1em;
text-align: justify;
text-justify: distribute;
}
.dotLi li {
position: relative;
padding: 0px 0px 2px 18px;
text-align: justify;
text-justify: distribute;
}
.dotLi li:before {
position: absolute;
content: "・";
top: 0px;
left: 0px;
}
.ivoryBg {
background-color: #f7f6f3;
}
.blueBg {
background-color: #f3fbfb;
}
.col2 > li {
float: left;
width: 47%;
padding: 2% 6% 2% 0; 
}
.col2 > li:nth-child(2n) {
padding-right: 0; 
}
.col2 > li:nth-child(2n+1) {
clear: both;
}
.col3 > li {
float: left;
width: 30%;
padding: 2% 5% 2% 0; 
}
.col3 > li:nth-child(3n) {
padding-right: 0; 
}
.col3 > li:nth-child(3n+1) {
clear: both;
}
.col2 > li img,
.col3 > li img {
width: 100%;
height: auto;
}
.nmlBtn {
display: inline-block;
background: #000a3c url(/wp/common/img/ico_arrow01.png) no-repeat right 14px center;
background-size: 10px auto;
font-size: 95%;
font-weight: bold;
text-decoration: none;
line-height: 120%;
color: #fff;
padding: 25px 75px 25px 65px;
border: none;
box-sizing: border-box;
}
.nmlBtn.sml {
display: inline-block;
background: #000a3c url(/wp/common/img/ico_arrow01.png) no-repeat right 14px center;
background-size: 8px auto;
font-size: 90%;
padding: 18px 58px 18px 48px;
}
.nmlBtn.sml.wt {
display: inline-block;
background: #fff url(/wp/common/img/ico_arrow02.png) no-repeat right 14px center;
background-size: 8px auto;
font-size: 90%;
color: #000a3c;
padding: 15px 55px 15px 45px;
border: 3px solid #000a3c;
}
.nmlBtn.contact {
background: #000a3c url(/wp/common/img/ico_mail.png) no-repeat 70px center;
background-size: 25px auto;
font-size: 100%;
padding: 25px 75px 25px 115px;
border: none;
box-sizing: border-box;
}
a.nmlBtn {
color: #fff;
}
.sticked {
top: 100px;
position: sticky;
position: -webkit-sticky;
}
.telIco {
display: inline-block;
background: url(/wp/common/img/ico_tel.svg) no-repeat 0px 4px;
background-size: 16px auto;
font-size: 150%;
font-weight: 700;
line-height: 100%;
margin: 12px 20px 8px 10px;
padding-left: 20px;
} .pager{
text-align: center;
padding: 35px 0px;
}
a.page-numbers,
.pager .current{
background: rgba(0,0,0,0.02);
text-decoration: none;
line-height: 240%;
letter-spacing: 0px;
color: #000;
margin: 0 2px;
padding: 5px 8px;
border: solid 1px rgba(0,0,0,0.1);
}
.pager .current{
background-color: #000a3c;
font-weight: bold;
color: rgba(255,255,255,1);
} .drawer-hamburger {
display: none !important;
z-index: 9999;
}
.spHead {
display: none;
}
.headAreabg {
position: fixed;
background-color: rgba(255,255,255,0.9);
width: 100%;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
z-index: 100;
transition: all 0.4s;
}
.headArea {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.bx-wrapper {
margin-bottom: 0px !important;
}
.headArea .logo {
float: left;
background: url(/wp/common/img/logo.svg) no-repeat 0px 0px;
background-size: 180px 33px;
width: 180px;
height: 33px;
text-indent: -9999px;
margin: 30px 0px 26px 0px;
box-sizing: border-box;
z-index: 200;
transition: all 0.4s;
}
.nar .headArea .logo {
background: url(/wp/common/img/logo.svg) no-repeat 0px 0px;
background-size: 160px 29px;
width: 160px;
height: 29px;
margin: 18px 0px 15px 0px;
}
.headArea .logo a {
display: block;
width: 100%;
height: 100%;
}
.headArea .headMenu {
display: flex;
justify-content: flex-end;
align-items: center;
float: right;
width: calc(100% - 200px);
margin: 30px 0px 0px 0px;
box-sizing: border-box;
transition: all 0.4s;
}
.nar .headArea .headMenu {
margin: 15px 0px 0px 0px;
}
.headArea .headMenu li {
float: left;
font-size: 90%;
font-weight: 700;
letter-spacing: 0em;
padding-right: 15px;
transition: all 0.4s;
}
.nar .headArea .headMenu li {
font-size: 85%;
}
.headArea .headMenu li a {
position: relative;
text-decoration: none;
color: #000;
padding: 12px 5px;
}
.headArea .headMenu li a:hover:after {
bottom: 0px;
opacity: 1.0;
}
.headArea .headMenu > li > a:after {
position: absolute;
bottom: -10px;
left: 20%;
content: '';
width: 60%;
height: 1px;
background-color: #000a3c;
opacity: 0;
transition: all 0.4s;
}
.headArea .headMenu > li.current-menu-item > a:after,
.headArea .headMenu > li.current-menu-parent > a:after,
.headArea .headMenu > li.current-post-ancestor > a:after,
.headArea .headMenu > li.current-category-ancestor > a:after,
.headArea .headMenu > li > a.menuAct:after {
position: absolute;
bottom: -1px;
left: 20%;
content: '';
width: 60%;
height: 3px;
background-color: #000a3c;
opacity: 1.0;
transition: all 0.4s;
}
.headArea .headMenu li.tel,
.drawer-nav .spTel {
background: url(/wp/common/img/ico_tel.svg) no-repeat 0px 9px;
background-size: 16px auto;
font-size: 120%;
margin: -2px 0 0 20px;
padding-right: 0px;
padding-left: 18px;
}
.drawer-nav .spTel {
background: url(/wp/common/img/ico_tel.svg) no-repeat 0px 5px;
background-size: 16px auto;
font-size: 130%;
font-weight: 700;
margin: 20px 0 0 34px;
padding-left: 20px;
} .dropmenu li {
position: relative;
}
.dropmenu li ul {
list-style: none;
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
margin: 10px 0 0 0;
padding: 0;
}
.dropmenu li ul li {
overflow: hidden;
width: 250px;
height: 0;
color: #fff;
transition: .2s;
}
.dropmenu li ul li a {
display: block;
background: #fff;
font-size: 12px;
font-weight: normal;
text-align: left;
text-decoration: none;
line-height: 140%;
letter-spacing: 0.1em;
color: #000;
padding: 11px 10px 10px 20px !important;
border-bottom: 1px dotted #ddd;
}
.dropmenu > li:hover li:hover > a {
background: #d5eff4;
opacity: 1.0;
}
.dropmenu > li:hover > ul > li {
overflow: visible;
height: 38px;
}
.nar .dropmenu > li:hover > ul > li {
height: 39px;
}
.dropmenu > li:hover > ul > li.row2 {
height: 54px;
}
.nar .dropmenu > li:hover > ul > li.row2 {
height: 56px;
}
.dropmenu > li:hover > ul > li.row3 {
height: 70px;
}
.nar .dropmenu > li:hover > ul > li.row3 {
height: 73px;
}
.dropmenu li ul li ul {
top: 0;
left: 100%;
}
.dropmenu li:last-child ul li ul {
left: -100%;
width: 100%;
}
.dropmenu li ul li ul:before {
position: absolute;
content: "";
top: 13px;
left: -20px;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #454e08;
}
.dropmenu li:last-child ul li ul:before {
position: absolute;
content: "";
top: 13px;
left: 200%;
margin-left: -20px;
border: 5px solid transparent;
border-right-color: #454e08;
}
.dropmenu li ul li:hover > ul > li {
overflow: visible;
height: 38px;
}
.nar .dropmenu li ul li:hover > ul > li {
height: 39px;
}
.dropmenu li ul li:hover > ul > li.row2 {
height: 54px;
}
.nar .dropmenu li ul li:hover > ul > li.row2 {
height: 56px;
}
.dropmenu li ul li:hover > ul > li.row3 {
height: 70px;
}
.nar .dropmenu li ul li:hover > ul > li.row3 {
height: 73px;
}
.dropmenu li ul li ul li a {  background: #fff; }
.dropmenu li:hover ul li ul li a:hover {
background: #ffc7c7;
opacity: 1.0;
} .drawer-menu li {
margin-bottom: 0;
background-color: #fff;
}
.drawer-menu li a {
position: relative;
display: block;
padding: 12px 0 12px 35px;
text-decoration: none;
text-align: left;
line-height: 160%;
color: #000;
border-bottom: 1px solid #ddd;
}
.drawer-menu li.main {
}
.drawer-menu li.main span {
display: block;
font-size: 80%;
}
.drawer-menu > li.main > a:after {
content: "";
position: absolute;
background-color: #ff7d7d;
top: 14px;
left: 12px;
width: 5px;
height: 35px;
}
.drawer-menu .drawerMenuSub {
padding-left: 25px;
}
.drawer-menu .drawerMenuSub li a {
padding: 8px 0 8px 14px !important;
}
.drawer-menu .drawerMenuSub li a:hover,
.drawer-menu .drawerMenuSub li a.menuAct {
color: #ff7200;
opacity: 1.0;
}
.drawer-dropdown-menu li a {
position: relative;
background-color: #f6f6f6;
padding-left: 48px;
}
.drawer-dropdown-menu li a:after {
content: "";
position: absolute;
background-color: #ccc;
top: 12px;
left: 36px;
width: 4px;
height: 20px;
}
.drawer-sub-menu {
padding: 10px 0 0 5%;
}
.drawer-sub-menu li {
float: left;
width: 45%;
margin: 10px 5% 0 0;
}
.drawer-sub-menu li a {
display: block;
background: #000a3c url(/wp/common/img/ico_arrow01.png) no-repeat right 6px center;
background-size: 8px auto;
width: 100%;
font-size: 90%;
text-align: center;
text-decoration: none;
color: #fff;
padding: 8px 10px 8px 5px;
box-sizing: border-box;
} .container,
.containerS {
max-width: 1100px;
margin: 0px auto;
padding: 0px 20px;
}
.containerS {
max-width: 800px;
}
.contLt h2 {
font-size: 160%;
margin-bottom: 30px;
}
.h2Ttl {
position: relative;
font-family: "Lato", "Noto Sans JP", sans-serif;
font-size: 260%;
color: #000a3c;
text-align: center;
}
.h2Ttl span {
display: block;
font-size: 30%;
font-weight: normal;
color: #1399b1;
margin-bottom: 20px;
padding: 8px 0 10px 0;
}
.h2Ttl a {
text-decoration: none;
color: #000a3c;
}
.h2Ttl p {
position: absolute;
display: inline-block;
background: url(/wp/common/img/ico_arrow02.png) no-repeat right 8px center;
background-size: 6px auto;
top: 10px;
right: 0;
font-size: 30%;
padding: 6px 25px 6px 15px;
border: 1px solid #ddd;
}
.lineTtl,
.company h2,
.privacy h2,
.recruit h2,
.postArea h2,
.widgetArea h3 {
position: relative;
font-size: 160%;
margin: 50px 0 20px 0;
padding-bottom: 12px;
border-bottom: 1px solid #ddd;
}
h2.nosp {
margin-top: 10px;
}
.postArea h2 {
margin-top: 35px;
}
.widgetArea h3 {
font-size: 120%;
}
.widgetArea.widget_categories h3 {
margin: 0 0 10px 0;
}
.lineTtl:after,
.company h2:after,
.privacy h2:after,
.recruit h2:after,
.postArea h2:after,
.widgetArea h3:after {
position: absolute;
content: "";
bottom: -1px;
left: 0;
background-color: #000a3c;
width: 20%;
height: 1px;
}
.barTtl,
.company h3,
.privacy h3,
.recruit h3,
.postArea h3 {
position: relative;
font-size: 110%;
margin: 25px 0 15px 0;
padding: 0 0 0 15px;
border-left: 4px solid #000a3c;
}
.mainArea {
padding-top: 89px;
}
.contArea,
.contAreaS {
display: flex;
padding-top: 20px;
padding-bottom: 60px;
}
.contAreaS {
display: block;
}
.contLt {
flex: 1;
}
.contRt {
width: 290px;
margin-left: 50px;
}
.widgetArea h3 {
}
.sideMenu,
.widget_categories {
background-color: #f7f6f3;
padding: 25px 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.sideMenu h3,
.widget_categories h3 {
font-size: 90%;
margin-bottom: 10px;
padding: 0 0 10px 10px;
border-bottom: 2px solid #000a3c;
}
.sideMenu > ul > li,
.widget_categories > ul > li {
background-color: #f7f6f3;
border-bottom: 1px dotted #ccc;
}
.sideMenu > ul > li a,
.widget_categories > ul > li a {
display: block;
background: url(/wp/common/img/ico_arrow02.png) no-repeat right 14px center;
background-size: 8px auto;
font-size: 90%;
text-decoration: none;
color: #000;
padding: 10px 0 10px 10px;
}
.sideMenu > ul > li a:hover,
.sideMenu > ul > li a.menuAct,
.widget_categories > ul > li a:hover,
.widget_categories > ul > li a.menuAct {
background: #efe9d6 url(/wp/common/img/ico_arrow02.png) no-repeat right 14px center;
background-size: 8px auto;
}
.sideMenu > ul > li > ul,
.widget_categories > ul > li > ul {
background-color: #f7f6f3;
border-top: 1px dotted #ebe6d6;
}
.sideMenu > ul > li > ul > li,
.widget_categories > ul > li > ul > li {
background-color: #f7f6f3;
font-size: 90%;
border-bottom: 1px dotted #ebe6d6;
}
.sideMenu > ul > li > ul > li > a,
.widget_categories > ul > li > ul > li > a {
background: url();
}
.sideMenu > ul > li > ul > li > a:before,
.widget_categories > ul > li > ul > li > a:before {
content: "・ ";
}
.sideMenu > ul > li > ul > li > a:hover,
.sideMenu > ul > li > ul > li > a.menuAct,
.widget_categories > ul > li > ul > li > a:hover,
.widget_categories > ul > li > ul > li > a.menuAct {
background: url();
background-color: #efe9d6
}
.sideMenu > ul > li > ul > li:last-child,
.widget_categories > ul > li > ul > li:last-child {
border-bottom: none;
}
.sideMenu > ul > li > ul > li > a,
.widget_categories > ul > li > ul > li a {
padding: 5px 0 5px 25px;
}
.wp-caption {
background-color: #f6f6f6;
max-width: 100% !important;
text-align: center;
margin: 20px 0px;
padding: 5px 0px;
border: 1px solid #eee;
}
.wp-caption-text {
font-size: 90%;
text-align: center !important;
} .breadArea {
background-color: #f6f6f6;
margin-bottom: 30px;
padding: 5px 0;
}
.breadLt li {
float: left;
position: relative;
font-size: 80%;
margin-right: 26px;
}
.breadLt li:after {
position: absolute;
content: ">";
top: 0;
right: -18px;
}
.breadLt li:last-child:after {
content: "";
} .mainphArea {
position: relative;
height: 500px;
overflow: hidden;
}
.mainphArea li {
position: relative;
height: 500px;
overflow: hidden;
}
.mainphArea img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
z-index: 1;
}
.mainphArea h1,
.mainphTtl h1,
.mainphArea h2,
.mainphTtl h2,
.mainphTtl div {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
width: 100%;
font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, serif;
font-size: 260%;
font-weight: normal;
text-align: center;
color: #fff;
margin: auto;
z-index: 10;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
.mainphArea h1 span.en,
.mainphTtl h1 span.en,
.mainphArea h2 span.en,
.mainphTtl h2 span.en,
.mainphTtl div span.en {
display: block;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
font-size: 30%;
padding-top: 5px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
.newsBox {
max-width: 1100px;
font-size: 90%;
margin: 40px auto;
padding: 20px 20px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.newsBox h3 {
background-color: #F7F6F3;
text-align: center;
padding: 6px 0;
}
.newsBox p {
padding: 10px 0;
}
.service {
padding: 70px 0 30px 0;
}
.service li a {
display: block;
color: #000;
text-decoration: none;
}
.service .h2Ttl span {
margin-bottom: 20px;
padding: 15px 0 10px 0;
border-bottom: 1px solid #ddd;
}
.service .ph {
text-align: center;
}
.service .ph img {
width: 70%;
height: auto;
padding-top: 20px;
}
.service h3 {
font-size: 170%;
font-weight: normal;
padding: 22px 0 18px 0;
}
.service .txt {
text-align: justify;
text-justify: distribute;
}
.servOth {
background-color: #edf5fb;
font-size: 90%;
text-align: justify;
text-justify: distribute;
margin: 10px 0px;
padding: 15px 20px;
border: 2px solid #9ecbf2;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.flatsysArea {
position: relative;
background: url(/wp/img/flatsysarea_bg.jpg) no-repeat center center;
background-size: cover;
padding: 40px 0;
}
.flatsysArea:after {
content: '';
background-color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
}
.flatsysArea .lt {
position: relative;
float: left;
width: 35%;
z-index: 1;
}
.flatsysArea .lt img {
width: 100%;
height: auto;
}
.flatsysArea .rt {
position: relative;
float: right;
width: 60%;
color: #fff;
z-index: 1;
}
.flatsysArea h2 {
padding-bottom: 20px;
}
.kintoneArea {
position: relative;
background: url(/wp/img/kintone_bg.jpg) no-repeat center center;
background-size: cover;
margin-top: 40px;
padding: 40px 0;
}
.kintoneArea:after {
content: '';
background-color: rgba(5,40,80,0.7);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
}
.kintoneArea .lt {
position: relative;
float: left;
width: 60%;
color: #fff;
z-index: 1;
}
.kintoneArea .rt {
position: relative;
float: right;
width: 35%;
z-index: 1;
}
.kintoneArea .rt img {
width: 100%;
height: auto;
}
.kintoneArea h2 {
padding-bottom: 20px;
}
.flatsysArea .nmlBtn.sml.wt,
.kintoneArea .nmlBtn.sml.wt {
border: none;
}
.blogArea {
padding: 60px 0 18px 0;
}
.blogArea.list {
padding: 0 0 18px 0;
}
.blogArea .col3,
.blogArea.list .col2 {
margin-top: -2%;
}
.blogArea.list .col2 li {
padding-bottom: 40px;
}
.blogArea li {
position: relative;
}
.blogArea li .categoriTxt {
position: absolute;
top: 32px;
left: -10px;
background-color: #000a3d;
font-size: 0.7em;
line-height: 1.1em;
color: #fff;
padding: 2px 5px 4px 5px;
z-index: 10;
}
.blogArea.list li .categoriTxt {
top: 25px;
}
.blogArea li a {
display: block;
color: #000;
text-decoration: none;
}
.blogArea .timest {
font-size: 90%;
color: #999;
padding-top: 10px;
}
.blogArea h3 {
font-size: 120%;
padding: 5px 0 12px 0;
}
.blogArea .txt {
text-align: justify;
text-justify: distribute;
}
.blogLi .lineTtl {
margin: 0 0 50px 0;
}
.workArea {
padding: 40px 0 50px 0;
}
.workArea a {
position: relative;
display: block;
color: #000;
text-decoration: none;
}
.workArea h3 {
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
font-size: 160%;
font-weight: normal;
}
.workArea .comp h3 {
color: #fff;
} .mainphTtl {
height: 200px;
}
.mainphTtl.system_div {
background: url(/wp/img/sys_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.web_div {
background: url(/wp/img/web_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.work {
background: url(/wp/img/work_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.company {
background: url(/wp/img/com_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.recruit {
background: url(/wp/img/rec_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.contact {
background: url(/wp/img/contact_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.estimate {
background: url(/wp/img/contact_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.blog {
background: url(/wp/img/blog_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.error {
background: url(/wp/img/error_main_ph.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl h1,
.mainphTtl h2,
.mainphTtl div {
position: relative;
color: #000;
text-shadow: 2px 2px 1px #fff;
}
.mainphTtl h1 span.en,
.mainphTtl h2 span.en,
.mainphTtl div span.en {
color: #000;
text-shadow: 1px 1px 1px #fff;
}
.mainphTtl h1.wt,
.mainphTtl h2.wt,
.mainphTtl div.wt {
color: #fff;
text-shadow: 2px 2px 1px #000;
}
.mainphTtl h1.wt span.en,
.mainphTtl h2.wt span.en,
.mainphTtl div.wt span.en {
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.company p
.privacy p {
text-align: justify;
text-justify: distribute;
}
.contactArea {
padding: 60px 0 30px 0;
}
.contactArea .container {
max-width: 950px;
}
.contactArea .conLi {
margin: 0px auto;
padding-top: 30px;
}
.contactArea .conLi li {
float: left;
}
.contactArea .conLi li.tel.long {
width: 70%;
text-align: right;
}
.contactArea .conLi .telArea {
display: inline-block;
background: url(/wp/common/img/ico_tel.svg) no-repeat 0px 4px;
background-size: 22px auto;
font-size: 180%;
font-weight: 700;
line-height: 100%;
margin: 8px 30px 0 0;
padding-left: 26px;
}
.contactArea .conLi li.tel.long .telArea {
padding-right: 50px;
}
.contactArea .conLi .telArea span {
display: block;
font-size: 40%;
font-weight: normal;
margin-left: -14px;
}
.contactArea .conLi li.ph {
width: 200px;
height: auto;
margin: -100px 0 0 60px;
}
.contactArea .conLi li.ph img {
width: 100%;
height: auto;
}
.webPhtxt {
float: left;
width: 60%;
padding-top: 10px;
}
.webPh {
float: right;
width: 30%;
text-align: center;
padding-left: 10%;
}
.webPh img {
width: 100%;
height: auto;
}
.meritLi li {
float: left;
background-color: #fff;
width: 48%;
margin: 10px 0 30px 0;
padding: 18px 20px;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.meritLi li:nth-child(odd) {
clear: both;
}
.meritLi li:nth-child(even) {
margin-left: 4%;
}
.meritLi li h3 {
font-size: 110%;
color: #000a3c;
padding: 10px 0 25px 90px;
}
.meritLi li p {
text-align: justify;
text-justify: distribute;
}
.meritLi li.commu {
background: url(/wp/img/merit_commu.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi li.seo {
background: url(/wp/img/merit_seo.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi li.system {
background: url(/wp/img/merit_system.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi li.support {
background: url(/wp/img/merit_support.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.cms li.update {
background: url(/wp/img/merit_update.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.cms li.cost {
background: url(/wp/img/merit_cost.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.cms li.seo2 {
background: url(/wp/img/merit_seo2.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.cms li.user {
background: url(/wp/img/merit_user.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.hcms li.mobile {
background: url(/wp/img/hcms_mobile.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.hcms li.protect {
background: url(/wp/img/ssl_protect.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.hcms li.front {
background: url(/wp/img/hcms_front.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.hcms li.web {
background: url(/wp/img/maint_web.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.jam li.speed {
background: url(/wp/img/ssl_speed.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.jam li.traffic {
background: url(/wp/img/jam_traffic.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.jam li.protect {
background: url(/wp/img/ssl_protect.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.jam li.cost {
background: url(/wp/img/seo_cost.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.maint li.web {
background: url(/wp/img/maint_web.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.maint li.wp {
background: url(/wp/img/maint_wp.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.maint li.server {
background: url(/wp/img/maint_server.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.maint li.ssl {
background: url(/wp/img/maint_ssl.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.ssl li.protect {
background: url(/wp/img/ssl_protect.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.ssl li.seo {
background: url(/wp/img/ssl_seo.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.ssl li.speed {
background: url(/wp/img/ssl_speed.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.ssl li.stop {
background: url(/wp/img/ssl_stop.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.seo li.cost {
background: url(/wp/img/seo_cost.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.seo li.access {
background: url(/wp/img/ssl_seo.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.seo li.promo {
background: url(/wp/img/seo_promo.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.seo li.speed {
background: url(/wp/img/ssl_speed.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.system li.web {
background: url(/wp/img/system_web.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.system li.support {
background: url(/wp/img/system_support.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.system li.design {
background: url(/wp/img/system_design.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.system li.kind {
background: url(/wp/img/system_kind.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.sysflat li.engin {
background: url(/wp/img/flat_engineer.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.sysflat li.loss {
background: url(/wp/img/flat_loss.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.sysflat li.support {
background: url(/wp/img/flat_support.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.sysflat li.price {
background: url(/wp/img/flat_price.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.kintone li.cost {
background: url(/wp/img/seo_cost.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.kintone li.flexi {
background: url(/wp/img/hcms_front.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.kintone li.data {
background: url(/wp/img/maint_server.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.meritLi.kintone li.auto {
background: url(/wp/img/maint_wp.png) no-repeat 10px 10px;
background-size: 80px auto;
}
.worksLi li {
float: left;
background-color: #eee;
margin: 10px 10px 10px 0px;
padding: 5px 14px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.servLi li {
float: left;
background-color: #fff;
width: 47%;
margin: 10px 0 40px 0;
box-sizing: border-box;
}
.servLi li:nth-child(odd) {
clear: both;
}
.servLi li:nth-child(even) {
margin-left: 6%;
}
.servLi li a {
display: block;
text-decoration: none;
color: #000;
}
.servLi li img {
width: 100%;
height: auto;
}
.servLi li h3 {
font-size: 110%;
text-align: center;
color: #000a3c;
padding: 15px 0 15px 0;
}
.servLi .nmlBtn {
margin-top: 20px;
}
.servLi li p {
text-align: justify;
text-justify: distribute;
}
.priceCon h3 {
font-size: 100%;
color: #333;
}
.priceArea {
background-color: #f6f6f6;
margin: 10px 0 30px 0;
padding: 15px 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.priceLt {
float: left;
width: 55%;
}
.priceArea ul {
background-color: #fff;
float: right;
width: 35%;
padding: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-sizing: border-box;
}
.priceArea ul li {
position: relative;
font-size: 80%;
padding: 0px 0px 2px 14px;
}
.priceArea ul li:before {
position: absolute;
content: "・";
top: 0px;
left: 0px;
}
.price {
font-weight: bold;
color: #666;
}
.price span {
display: inline-block;
font-size: 200%;
color: #6bc62e;
padding-left: 5px 
}
.flowLi {
position: relative;
display: table;
width: 100%;
margin-bottom: 40px;
}
.flowLi:before {
position: absolute;
content: "";
width: 40px;
height: 40px;
bottom: -52px;
left: 110px;
background: url(/wp/common/img/ico_arrow03.png) no-repeat 0px 0px;
background-size: 25px auto;
z-index: 10;
}
.flowLi:last-child,
.flowLi.last {
margin-bottom: 20px;
}
.flowLi:last-child:before,
.flowLi.last:before {
background: url() no-repeat 0px 0px;
}
.flowLi dt {
display: table-cell;
background-color: #72b3cf;
width: 240px;
font-size: 110%;
color: #fff;
text-align: justify;
text-justify: distribute;
padding: 30px;
box-sizing: border-box;
z-index: 1;
}
.flowLi dd {
display: table-cell;
background-color: #f6f6f6;
width: calc(100% - 240px);
text-align: justify;
text-justify: distribute;
padding: 30px;
}
.flowLi dt span {
display: block;
font-size: 70%;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px dotted #f6f6f6;
}
.flowLi.st02 dt {
background-color: #6dafc9;
}
.flowLi.st03 dt {
background-color: #579cb1;
}
.flowLi.st04 dt {
background-color: #448c9c;
}
.flowLi.st05 dt {
background-color: #337e89;
}
.flowLi.st06 dt {
background-color: #26737a;
}
.flowLi.st07 dt {
background-color: #19686c;
}
.flowLi.st08 dt {
background-color: #1a696d;
}
.flowLi.st09 dt {
background-color: #0b5d5d;
}
.flowLi.st10 dt {
background-color: #005350;
}
.txtRt {
float: right;
width: 60%;
}
.phLt {
float: left;
width: 34%;
text-align: center;
padding-right: 6%;
}
.phLt img {
width: 100%;
height: auto;
}
.workbtmLine {
margin-bottom: 50px;
padding-bottom: 25px;
border-bottom: 1px dotted #aaa;
}
.workPoint {
position: relative;
background-color: #e2f1f4;
margin-top: 30px;
padding: 25px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.workPoint:before {
position: absolute;
top: 0;
left: 0;
content: "POINT";
background-color: #72c6d6;
font-size: 80%;
line-height: 120%;
color: #fff;
padding: 2px 5px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.faqArea dt {
background-color: #128dc6;
color: #fff;
margin-top: 15px;
padding: 0px 12px 0px 0;
}
.faqArea dt span {
display: table-cell;
padding: 12px 12px 12px 12px;
}
.faqArea dt span.ttl {
background-color: #4bafde;
font-size: 120%;
}
.faqArea dd {
padding: 15px 10px;
}
.mw_wp_form_preview .preNone {
display: none;
}
.mw_wp_form .error-message {
display: none;
}
.mw_wp_form_error .error-message {
background-color: #fff;
display: block;
font-size: 90%;
text-align: center; 
color: #cc0000;
margin: 20px 0 15px 0;
padding: 20px 10px;
border: 1px solid #cc0000;
}
.exTxt {
font-size: 90%;
color: #888;
}
.error {
background-color: #ffdddd;
margin: 4px 0px 8px 0px;
padding: 2px 10px;
}
.notes {
font-size: 85%;
color: #ef6983;
}
.box1 {
width: 60%;
border: 1px solid #ccc;
padding: 8px 1%;
}
.box2,
.box3 {
width: 80px;
border: 1px solid #ccc;
padding: 8px 1%;
}
.boxmax {
width: 98%;
border: 1px solid #ccc;
padding: 8px 1%;
}
.boxarea {
width: 98%;
height: 110px;
border: 1px solid #e0e0e0;
padding: 8px 1%;
}
.selbox {
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
font-size: 90%;
padding: 8px 1%;
}
.ecTb {
width: 100%;
line-height: 160%;
margin-top: 30px;
border-collapse: collapse;
}
.ecTb td,
.ecTb th {
width: 25%;
text-align: center;
vertical-align: middle;
padding: 15px 2%;
border: 1px solid #ccc;
box-sizing: border-box;
}
.ecTb th {
background-color: #333 !important;
font-weight: normal;
color: #fff;
border: 1px solid #fff;
}
.ecTb th.gr {
background-color: #1d6b8b !important;
}
.ecTb td {
font-size: 110%;
color: #999;
}
.ecTb td.good {
font-size: 150%;
font-weight: bold;
color: #19b2e4;
}
.sysflatPrice > li {
float: left;
width: 48%;
margin: 0 4% 4% 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
.sysflatPrice > li:nth-child(even) {
margin-right: 0;
}
.sysflatPrice > li h3 {
color: #fff;
text-align :center;
padding: 10px 0;
}
.sysflatPrice > li h3 span {
display: block;
font-size: 70%;
font-weight: normal;
}
.sysflatPrice > li.p1 h3 {
background-color: #4aa1e4;
}
.sysflatPrice > li.p2 h3 {
background-color: #128dc6;
}
.sysflatPrice > li.p3 h3 {
background-color: #0f4590;
}
.sysflatPrice > li.p4 h3 {
background-color: #06326e;
}
.sysflatPrice .sysflatP {
text-align :center;
padding: 150px 0 30px 0;
}
.sysflatPrice .sysflatP span {
display: inline-block;
font-size: 280%;
font-weight: bold;
color: #cc0000; padding: 0 5px;
}
.sysflatPrice .sysflatP strike {
display: inline-block;
padding-bottom: 6px;
}
.sysflatPrice > li.p1 .sysflatP {
background: url(/wp/img/sysflat_p1.png) no-repeat center top 30px;
background-size: 80px auto;
}
.sysflatPrice > li.p2 .sysflatP {
background: url(/wp/img/sysflat_p2.png) no-repeat center top 30px;
background-size: 80px auto;
}
.sysflatPrice > li.p3 .sysflatP {
background: url(/wp/img/sysflat_p3.png) no-repeat center top 30px;
background-size: 80px auto;
}
.sysflatPrice > li.p4 .sysflatP {
background: url(/wp/img/sysflat_p4.png) no-repeat center top 30px;
background-size: 80px auto;
}
.sysflatPrice > li > div > ul {
display: inline-block;
list-style: disc;
padding: 0 5px 20px 25px;
}
.sysflatPrice > li > div > ul > li {
font-size: 90%;
text-align: left;
padding-bottom: 4px;
} .postArea h2.otherTtl {
background-color: #000a3c;
font-size: 130%;
color: #fff;
margin-top: 60px;
padding: 4px 10px 7px 20px;
border: none;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.postArea h2.otherTtl:after {
height: 0px;
}
.postArea iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.postArea h1 {
font-size: 180%;
margin-bottom: 30px;
}
.postArea .entryMeta {
background-color: #d5e5ec;
font-size: 90%;
margin-bottom: 20px;
margin-left: 0;
padding: 5px 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.postArea .entryMeta .entryCate {
float: left;
}
.postArea .entryMeta .entryCate a {
display: inline-block;
background-color: #000a3c;
font-size: 80%;
line-height: 120%;
text-decoration: none;
color: #fff;
padding: 3px 6px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.postArea .entryMeta .entryDate {
float: right;
}
.postArea p {
text-align: justify;
text-justify: distribute;
word-break: break-all;
padding: 15px 0px;	
}
.postArea blockquote {
background: url(/wp/common/css/lib/img/ico_quote.png) no-repeat 7px 6px;
margin: 5px 0px 5px 20px;
padding: 10px 20px 10px 25px;
border: 3px solid #eee;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.postArea table {
width: 100% !important;
margin: 10px 0 20px 0;
border-collapse: collapse;
}
.postArea table td,
.postArea table th {
background-color: #fff;
font-size: 95%;
vertical-align: top;
padding: 8px 15px;
border: 1px solid #ccc;
}
.postArea table th {
background-color: #eee;
font-weight: bold;
vertical-align: top;
}
.postArea img {
max-width: 100%;
height: auto;
}
.postArea .alignleft,
.postArea img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.postArea .alignright,
.postArea img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.postArea .aligncenter,
.postArea img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.postArea img.alignleft,
.postArea img.alignright,
.postArea img.aligncenter {
margin-bottom: 12px;
}
.postArea ul,
.postArea ol {
margin-left: 25px;
}
.postArea ul li,
.postArea ol li {
margin-bottom: 5px;
}
#toc_container {
display: inline-block;
background-color: #f6f6f6;
width: 60%;
font-size: 95%;
margin: 40px 20% 20px 20%;
padding: 10px 5% 20px 5%;
border: 1px solid #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-sizing: border-box;
}
.tagArea {
font-size: 80%;
}
.tagArea a {
background-color: #000a3c;
display: inline-block;
text-decoration: none;
color: #fff;
margin: 3px 3px;
padding: 2px 6px 3px 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.tagcloud a {
background-color: #1b81ab;
display: inline-block;
font-size: 80% !important;
text-decoration: none;
color: #fff;
margin: 3px 3px;
padding: 2px 6px 3px 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
} .wpp-list li {
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
.wpp-list li a {
font-size: 0.9em;
color: #000a3d;
text-decoration: none;
}
.wpp-list li a:hover {
text-decoration: underline;
}
.wpp-thumbnail-container {
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 10px;
}
.wpp-thumbnail-container img {
width: 100%;
height: auto;
}
.wpp-list .taxonomies {
position: absolute;
display: inline-block;
background-color: rgba(0,0,0,0.7);
bottom: 0px;
left: 0px;
font-size: 0.8em;
padding: 2px 10px 3px 10px;
z-index: 10;
}
.wpp-list .taxonomies a {
color: #fff;
}
.wpp-list .wpp-item-data {
font-weight: bold;
padding-top: 5px;
} .relArea {
display: inline-block; 
vertical-align: top;
width: 29%;
font-size: 85%;
margin: 10px 1.7%;
}
.relArea img {
width: 100%;
height: auto;
}
.relArea .relTtl {
padding-top: 5px;
} .footAreabg {
background-color: #000a3c;
width: 100%;
}
.footArea {
max-width: 1100px;
margin: 30px auto 0 auto;
padding: 35px 20px;
}
.footArea a[href^="tel:"] {
color: #fff !important;
}
.footLogoArea {
float: left;
width: 40%;
}
.footLogoArea .catch {
font-size: 60%;
letter-spacing: 0em;
padding-bottom: 5px;
}
.footLogoArea h2 {
padding-bottom: 20px;
}
.footLogoArea p {
font-size: 80%;
color: #fff; 
}
.snsArea {
padding-top: 15px;
}
.snsArea li {
display: inline-block;
padding: 0 2px;
}
.footMenu {
float: left;
width: 20%;
}
.footMenu li {
padding-bottom: 8px;
}
.footMenu li a {
font-size: 80%;
text-decoration: none;
color: #fff;
}
.copyright {
background-color: #0e174d;
font-size: 75%;
text-align: center;
color: #fff;
padding: 22px 10px;
border-top: 1px solid #182153;
} @media screen and (max-width: 1020px) {
.headArea .headMenu li.tel {
display: none;
}
.headArea .headMenu {
margin: 33px 0px 0px 0px;
}
.headArea .headMenu li:nth-last-child(2){
padding-right: 0px;
}
.contactArea .conLi li.ph {
width: 100%;
height: auto;
text-align: center;
margin: 30px 0 0 0px;
}
.contactArea .conLi li.ph img {
width: 20%;
height: auto;
}
.contactArea .pcView {
display: none;
}
.contactArea .nmlBtn.contact {
background: #000a3c url(/wp/common/img/ico_mail.png) no-repeat 60px center;
background-size: 20px auto;
padding: 25px 55px 25px 95px;
}
.contactArea .conLi li.tel.long {
width: 100%;
text-align: center;
}
.contactArea .conLi li.tel.long .telArea {
padding-right: 0px;
}
} @media screen and (max-width: 840px) {
p, li, dt, dd {
font-size: 95%;
line-height: 180%;
} .headArea .headMenu {
display: none;
}
.headArea .logo {
margin: 20px 0px 16px 0px;
}
.drawer-hamburger {
display: block !important;
z-index: 9999;
margin-top: 10px;
}
.nar .drawer-hamburger {
margin-top: 5px;
} .mainArea {
padding-top: 69px;
}
.contArea {
display: block;
}
.contLt,
.contRt {
display: block;
width: 100%;
margin-left: 0;
padding-right: 0;
}
.contLt {
padding-bottom: 60px;
} .mainphArea h2 span {
display: block;
}
.mainphArea img {
width: auto;
height: 120%;
}
.newsBox {
max-width: 96%;
}
.service {
padding: 50px 0 30px 0;
}
.service .h2Ttl span {
border-bottom: none;
}
.service .ttl {
width: 100%;
box-sizing: border-box;
}
.service .sys {
width: 47%;
padding: 2% 3% 2% 0; 
}
.service .web {
width: 47%;
padding: 2% 0 2% 3%; 
}
.service .ttl .txt {
float: left;
width: 54%;
}
.service .ttl .ph {
float: right;
width: 46%;
}
.service .ph img {
width: 70%;
margin-top: -50px;
padding-top: 0px;
padding-bottom: 15px;
}
.contactArea p {
text-align: justify;
text-justify: distribute;
} .pager{
padding: 15px 0px 5px 0px;
} .footLogoArea h2 img {
width: 200px;
height: auto;
}
} @media screen and (max-width: 680px) { .pcView {
display: none;
}
.spView {
display: block;
}
a[href^="tel:"] {
pointer-events: auto;
}
body {
font-size: 105%;
}
.detailTb.sp td,
.detailTb.sp th {
display: block;
width: 100%;
}
.detailTb.sp th {
border-bottom: none;
}
.detailTb.sp td {
margin-bottom: 5px;
}
.detailTb.sp.wd th {
padding-top: 15px;
padding-bottom: 0px;
}
.detailTb.sp.wd td {
padding-top: 15px;
}
.col2 li,
.col3 li {
float: none;
width: 100%;
padding: 5% 0 30px 0; 
}   .service {
padding: 40px 0 10px 0;
}
.service .ttl .txt,
.service .ttl .ph {
float: none;
width: 100%;
}
.service .sys,
.service .web {
float: none;
width: 100%;
padding: 2% 0 40px 0; 
}
.service .ph img {
width: 70%;
margin-top: 0px;
padding-top: 20px;
padding-bottom: 30px;
}
.flatsysArea .lt,
.kintoneArea .rt {
margin-top: 30px;
}
.flatsysArea .btn,
.kintoneArea .btn {
text-align: center;
}
.flatsysArea .lt,
.flatsysArea .rt,
.kintoneArea .lt,
.kintoneArea .rt {
float: none;
width: 100%;
}
.blogArea {
padding: 40px 0 10px 0;
}
.workArea {
padding: 30px 0 30px 0;
}
.workArea h3 {
font-size: 4.5vw;
left: 8%;
} .mainphTtl {
height: 300px;
}
.mainphTtl.system_div {
background: url(/wp/img/sys_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.web_div {
background: url(/wp/img/web_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.work {
background: url(/wp/img/work_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.company {
background: url(/wp/img/com_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.recruit {
background: url(/wp/img/rec_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.contact {
background: url(/wp/img/contact_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.estimate {
background: url(/wp/img/contact_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.blog {
background: url(/wp/img/blog_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.mainphTtl.error {
background: url(/wp/img/error_main_ph_sp.jpg) no-repeat 0px 0px;
background-size: cover;
background-position: center;
}
.contactArea {
padding: 40px 0 20px 0;
}
.contactArea .conLi li {
float: none;
width: 100%;
text-align: center;
}
.contactArea .conLi .telArea {
background: url(/wp/common/img/ico_tel.svg) no-repeat 0px 4px;
background-size: 20px auto;
font-size: 210%;
padding-left: 24px;
margin: 8px 0 20px 0;
}
.contactArea .conLi li.ph {
margin: 40px 0 0 0px;
}
.contactArea .conLi li.ph img {
width: 40%;
height: auto;
}
.webPhtxt,
.webPh {
float: none;
width: 100%;
padding-top: 10px;
}
.webPh {
padding: 20px 0 0 0;
}
.webPh img {
width: 50%;
}
.meritLi li {
float: none;
width: 100%;
}
.meritLi li:nth-child(even) {
margin-left: 0;
}
.servLi li {
float: none;
width: 100%;
margin: 10px 0 50px 0;
}
.servLi li:nth-child(even) {
margin-left: 0;
}
.priceLt,
.priceArea ul {
float: none;
width: 100%;
}
.priceArea ul {
margin-top: 20px;
}
.flowLi:before {
width: 20px;
height: 20px;
bottom: -34px;
left: 50px;
background: url(/wp/common/img/ico_arrow03.png) no-repeat 0px 0px;
background-size: 20px auto;
}
.flowLi dt {
width: 120px;
padding: 20px;
}
.flowLi dd {
width: calc(100% - 120px);
padding: 20px;
}
.txtRt,
.phLt {
float: none;
width: 100%;
}
.phLt {
margin-top: 30px;
padding-right: 0;
}
.box1 {
width: 98%;
}
.box2 {
width: 45%;
}
.box3 {
width: 30%;
} .postArea table {
width: 88% !important;
margin: 10px 6% 20px 6%;
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
#toc_container {
width: 100%;
margin: 30px 0 10px 0;
}
.detbtArea {
text-align: center;
} .footLogoArea {
float: none;
width: 100%;
}
.footLogoArea h2 img {
max-width: 240px;
width: 70%;
height: auto;
}
.footMenu {
display: none;
}
} @media screen and (max-width: 480px) { .nmlBtn.contact {
background: #000a3c url(/wp/common/img/ico_mail.png) no-repeat 35px center !important;
background-size: 20px auto !important;
padding: 25px 35px 25px 65px !important;
}  .mainphArea,
.mainphArea li {
height: 400px;
}
.mainphArea img {
width: auto;
height: 120%;
}
.mainphArea h2 {
font-size: 220%;
}
.sysflatPrice > li {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 20px;
} .relArea {
display: inline-block; 
vertical-align: top;
width: 46%;
font-size: 85%;
margin: 10px 1.2%;
}
.relArea img {
width: 100%;
height: auto;
}
.relArea .relTtl {
padding-top: 5px;
}
}.drawer-nav {
position: fixed;
z-index: 110;
top: 0;
overflow: hidden;
width: 16.25rem;
height: 100%;
color: #222;
background-color: #fff;
}
.drawer-brand {
font-size: 1.5rem;
font-weight: bold;
line-height: 3.75rem;
display: block;
padding-right: .75rem;
padding-left: .75rem;
text-decoration: none;
color: #222;
}
.drawer-menu {
margin: 0;
padding: 0;
list-style: none;
}
.drawer-menu-item {
font-size: 1rem;
display: block;
padding: .75rem;
text-decoration: none;
color: #222;
}
.drawer-menu-item:hover {
text-decoration: underline;
color: #555;
background-color: transparent;
} .drawer-overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
}
.drawer-open .drawer-overlay {
display: block;
} .drawer--top .drawer-nav {
top: -100%;
left: 0;
width: 100%;
height: auto;
max-height: 100%;
-webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--top.drawer-open .drawer-nav {
top: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
right: 0;
} .drawer--left .drawer-nav {
left: -16.25rem;
-webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer--left.drawer-open .drawer-hamburger {
left: 16.25rem;
} .drawer--right .drawer-nav {
right: -16.25rem;
-webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
_::-webkit-full-page-media, _:future, :root .drawer--right.drawer-open .drawer-nav,
_::-webkit-full-page-media, _:future, :root .drawer--right .drawer-hamburger,
_::-webkit-full-page-media, _:future, :root .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
top:-2px;
}
.drawer--right.drawer-open .drawer-hamburger {
right: 16.25rem;
} .drawer-hamburger {
position: fixed;
z-index: 104;
top: 0px;
display: block;
box-sizing: content-box;
width: 1.8rem;
padding: 0;
padding-top: 18px;
padding-right: .75rem;
padding-bottom: 25px;
padding-left: .75rem;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border: 0;
outline: 0;
background-color: #fff;
}
.drawer-hamburger:hover {
cursor: pointer;
background-color: #fff;
}
.drawer-hamburger-icon {
position: relative;
display: block;
margin-top: 5px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
width: 100%;
height: 3px;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
background-color: #000;
}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
position: absolute;
top: -9px;
left: 0;
content: ' ';
}
.drawer-hamburger-icon:after {
top: 9px;
}
.drawer-open .drawer-hamburger-icon {
background-color: transparent;
}
.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
top: 0;
}
.drawer-open .drawer-hamburger-icon:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.drawer-open .drawer-hamburger-icon:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}  .sr-only {
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
} .sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin: 0;
} .drawer--sidebar {
background-color: #fff;
}
.drawer--sidebar .drawer-contents {
background-color: #fff;
}
@media (min-width: 64em) {
.drawer--sidebar .drawer-hamburger {
display: none;
visibility: hidden;
}
.drawer--sidebar .drawer-nav {
display: block;
-webkit-transform: none;
-ms-transform: none;
transform: none;
position: fixed;
width: 12.5rem;
height: 100%;
} .drawer--sidebar.drawer--left .drawer-nav {
left: 0;
border-right: 1px solid #ddd;
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: 12.5rem;
} .drawer--sidebar.drawer--right .drawer-nav {
right: 0;
border-left: 1px solid #ddd;
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: 12.5rem;
} .drawer--sidebar .drawer-container {
max-width: 48rem;
}
}
@media (min-width: 75em) {
.drawer--sidebar .drawer-nav {
width: 16.25rem;
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: 16.25rem;
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: 16.25rem;
} .drawer--sidebar .drawer-container {
max-width: 60rem;
}
} .drawer--navbarTopGutter {
padding-top: 3.75rem;
}
.drawer-navbar .drawer-navbar-header {
border-bottom: 1px solid #ddd;
background-color: #fff;
}
.drawer-navbar {
z-index: 102;
top: 0;
width: 100%;
} .drawer-navbar--fixed {
position: fixed;
}
.drawer-navbar-header {
position: relative;
z-index: 102;
box-sizing: border-box;
width: 100%;
height: 3.75rem;
padding: 0 .75rem;
text-align: center;
}
.drawer-navbar .drawer-brand {
line-height: 3.75rem;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
text-decoration: none;
}
.drawer-navbar .drawer-brand:hover {
background-color: transparent;
}
.drawer-navbar .drawer-nav {
padding-top: 3.75rem;
}
.drawer-navbar .drawer-menu {
padding-bottom: 7.5rem;
}
@media (min-width: 64em) {
.drawer-navbar {
height: 3.75rem;
border-bottom: 1px solid #ddd;
background-color: #fff;
}
.drawer-navbar .drawer-navbar-header {
position: relative;
display: block;
float: left;
width: auto;
padding: 0;
border: 0;
}
.drawer-navbar .drawer-menu--right {
float: right;
}
.drawer-navbar .drawer-menu li {
float: left;
}
.drawer-navbar .drawer-menu-item {
line-height: 3.75rem;
padding-top: 0;
padding-bottom: 0;
}
.drawer-navbar .drawer-hamburger {
display: none;
}
.drawer-navbar .drawer-nav {
position: relative;
left: 0;
overflow: visible;
width: auto;
height: 3.75rem;
padding-top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.drawer-navbar .drawer-menu {
padding: 0;
} .drawer-navbar .drawer-dropdown-menu {
position: absolute;
width: 16.25rem;
border: 1px solid #ddd;
}
.drawer-navbar .drawer-dropdown-menu-item {
padding-left: .75rem;
}
} .drawer-dropdown-menu {
display: none;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
.drawer-dropdown-menu > li {
width: 100%;
list-style: none;
}
.drawer-dropdown-menu-item {
line-height: 3.75rem;
display: block;
padding: 0;
padding-right: .75rem;
padding-left: 1.5rem;
text-decoration: none;
color: #222;
}
.drawer-dropdown-menu-item:hover {
text-decoration: underline;
color: #555;
background-color: transparent;
} .drawer-dropdown.open > .drawer-dropdown-menu {
display: block;
} .drawer-dropdown .drawer-caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
-webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
transition: opacity .2s ease, -webkit-transform .2s ease;
transition: transform .2s ease, opacity .2s ease;
transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
} .drawer-dropdown.open .drawer-caret {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
} .drawer-container {
margin-right: auto;
margin-left: auto;
}
@media (min-width: 64em) {
.drawer-container {
max-width: 60rem;
}
}
@media (min-width: 75em) {
.drawer-container {
max-width: 70rem;
}
}