@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset "utf-8";
@charset 'UTF-8';
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
 .slick-loading .slick-list
{
background: #fff url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/ajax-loader.gif) center center no-repeat;
} @font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/fonts/slick.eot);
src: url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/fonts/slick.eot?#iefix) format('embedded-opentype'), url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/fonts/slick.woff) format('woff'), url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/fonts/slick.ttf) format('truetype'), url(https://goofy-inc.com/wp-content/themes/GOOFY/js/slick-1.8.1/fonts/slick.svg#slick) format('svg');
} .slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
} .slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}







   html {
overflow-y: scroll; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote, table, th,td,
tbody, tfoot, thead, object, iframe, code, fieldset, legend, caption,
article, aside, figure, footer, header, hgroup, menu, nav, section, audio, video, canvas {
margin: 0;
padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}
table {
font-size:1.4rem;
border-collapse: collapse;
border-spacing: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: '';
}
object,
embed {
vertical-align: top;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight:normal;
}
img,abbr,acronym,fieldset {
border: 0;
}
li {
list-style-type: none;
zoom:1;
}
a:active, a:focus{ outline:none; } 
a{
color:#2c93cd;
}
a:hover{
text-decoration:underline ;
}
br {
letter-spacing:normal;
}
img {
-ms-interpolation-mode: bicubic;
max-width: 100%;
vertical-align: middle;
} html {
font-size: 62.5%;
}
@media screen and (max-width: 813px) {
html {
}
}
body {
background: #fffdf7;
color: #333;
font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-webkit-text-size-adjust: none;
}
* html body { font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
 .br{
display:block;
}
.brN{
display:none;
}
@media screen and (max-width: 768px) {
.br{
display:none;
}
.brN{
display:block;
}
} .tacPC{
text-align:center!important;
}
@media screen and (max-width: 768px) {
.tacPC{
text-align:left!important;
}
}
.talPC{
text-align:left!important;
}
@media screen and (max-width: 768px) {
.talPC{
text-align:center!important;
}
}
.markerY{
background: -moz-linear-gradient(transparent 70%, #ffff66 40%);
background: -webkit-linear-gradient(transparent 70%, #ffff66 40%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.9, transparent), color-stop(0.9, #ffff66));
background: -o-linear-gradient(transparent 70%, #ffff66 40%);
background: linear-gradient(transparent 70%, #ffff66 40%);
} .w100 { width: 100px!important;}
.w150 { width: 150px!important;}
.w200 { width: 200px!important;}
.w250 { width: 250px!important;}
.w300 { width: 300px!important;}
.w350 { width: 350px!important;}
.w400 { width: 400px!important;}
.w450 { width: 450px!important;}
.w500 { width: 500px!important;}
@media screen and (max-width: 813px) {
} .m1 { margin: 1px!important;}
.m3 { margin: 3px!important;}
.m5 { margin: 5px!important;}
.m10 { margin: 10px!important;}
.m20 { margin: 20px!important;}
.m30 { margin: 30px!important;}
.mt1 { margin-top: 1px!important;}
.mt2 { margin-top: 2px!important;}
.mt3 { margin-top: 3px!important;}
.mt4 { margin-top: 4px!important;}
.mt5 { margin-top: 5px!important;}
.mt6 { margin-top: 6px!important;}
.mt7 { margin-top: 7px!important;}
.mt8 { margin-top: 8px!important;}
.mt9 { margin-top: 9px!important;}
.mt10 { margin-top: 10px!important;}
.mt11 { margin-top: 11px!important;}
.mt12 { margin-top: 12px!important;}
.mt13 { margin-top: 13px!important;}
.mt14 { margin-top: 14px!important;}
.mt15 { margin-top: 15px!important;}
.mt20 { margin-top: 20px!important;}
.mt25 { margin-top: 25px!important;}
.mt30 { margin-top: 30px!important;}
.mt35 { margin-top: 35px!important;}
.mt40 { margin-top: 40px!important;}
.mt50 { margin-top: 50px!important;}
.mt60 { margin-top: 60px!important;}
.mt70 { margin-top: 70px!important;}
.mt80 { margin-top: 80px!important;}
.mt90 { margin-top: 90px!important;}
.mr1 { margin-right: 1px!important;}
.mr2 { margin-right: 2px!important;}
.mr3 { margin-right: 3px!important;}
.mr4 { margin-right: 4px!important;}
.mr5 { margin-right: 5px!important;}
.mr6 { margin-right: 6px!important;}
.mr7 { margin-right: 7px!important;}
.mr8 { margin-right: 8px!important;}
.mr9 { margin-right: 9px!important;}
.mr10 { margin-right: 10px!important;}
.mr11 { margin-right: 11px!important;}
.mr12 { margin-right: 12px!important;}
.mr13 { margin-right: 13px!important;}
.mr14 { margin-right: 14px!important;}
.mr15 { margin-right: 15px!important;}
.mr20 { margin-right: 20px!important;}
.mr25 { margin-right: 25px!important;}
.mr30 { margin-right: 30px!important;}
.mr40 { margin-right: 40px!important;}
.mr50 { margin-right: 50px!important;}
.mr60 { margin-right: 60px!important;}
.mr70 { margin-right: 70px!important;}
.mr80 { margin-right: 80px!important;}
.mr90 { margin-right: 90px!important;}
.mr100 { margin-right: 100px!important;}
.mb1 { margin-bottom: 1px!important;}
.mb2 { margin-bottom: 2px!important;}
.mb3 { margin-bottom: 3px!important;}
.mb4 { margin-bottom: 4px!important;}
.mb5 { margin-bottom: 5px!important;}
.mb6 { margin-bottom: 6px!important;}
.mb7 { margin-bottom: 7px!important;}
.mb8 { margin-bottom: 8px!important;}
.mb9 { margin-bottom: 9px!important;}
.mb10 { margin-bottom: 10px!important;}
.mb11 { margin-bottom: 11px!important;}
.mb12 { margin-bottom: 12px!important;}
.mb13 { margin-bottom: 13px!important;}
.mb14 { margin-bottom: 14px!important;}
.mb15 { margin-bottom: 15px!important;}
.mb20 { margin-bottom: 20px!important;}
.mb25 { margin-bottom: 25px!important;}
.mb30 { margin-bottom: 30px!important;}
.mb40 { margin-bottom: 40px!important;}
.mb50 { margin-bottom: 50px!important;}
.mb60 { margin-bottom: 60px!important;}
.mb70 { margin-bottom: 70px!important;}
.mb80 { margin-bottom: 80px!important;}
.mb90 { margin-bottom: 90px!important;}
.mb100 { margin-bottom: 100px!important;}
.ml1 { margin-left: 1px!important;}
.ml2 { margin-left: 2px!important;}
.ml3 { margin-left: 3px!important;}
.ml4 { margin-left: 4px!important;}
.ml5 { margin-left: 5px!important;}
.ml6 { margin-left: 6px!important;}
.ml7 { margin-left: 7px!important;}
.ml8 { margin-left: 8px!important;}
.ml9 { margin-left: 9px!important;}
.ml10 { margin-left: 10px!important;}
.ml11 { margin-left: 11px!important;}
.ml12 { margin-left: 12px!important;}
.ml13 { margin-left: 13px!important;}
.ml14 { margin-left: 14px!important;}
.ml15 { margin-left: 15px!important;}
.ml20 { margin-left: 20px!important;}
.ml25 { margin-left: 25px!important;}
.ml30 { margin-left: 30px!important;}
.ml40 { margin-left: 40px!important;}
.ml50 { margin-left: 50px!important;}
.ml60 { margin-left: 60px!important;}
.ml70 { margin-left: 70px!important;}
.ml80 { margin-left: 80px!important;}
.ml90 { margin-left: 90px!important;}
.ml100 { margin-left: 100px!important;}
.mtmb5 { margin-top: 5px; margin-bottom: 5px!important;}
.mtmb10 { margin-top: 10px; margin-bottom: 10px!important;}
.mtmb15 { margin-top: 15px; margin-bottom: 15px!important;}
.mlmrAuto {
margin-left: auto!important;
margin-right: auto!important;
} .m01em { margin: 0.1em!important;}
.m02em { margin: 0.2em!important;}
.m03em { margin: 0.3em!important;}
.m04em { margin: 0.4em!important;}
.m05em { margin: 0.5em!important;}
.m10em { margin: 1.0em!important;}
.m12em { margin: 1.2em!important;}
.m14em { margin: 1.4em!important;}
.m16em { margin: 1.6em!important;}
.m18em { margin: 1.8em!important;}
.m20em { margin: 2.0em!important;}
.mt01em { margin-top: 0.1em!important;}
.mt02em { margin-top: 0.2em!important;}
.mt03em { margin-top: 0.3em!important;}
.mt04em { margin-top: 0.4em!important;}
.mt05em { margin-top: 0.5em!important;}
.mt10em { margin-top: 1.0em!important;}
.mt12em { margin-top: 1.2em!important;}
.mt14em { margin-top: 1.4em!important;}
.mt16em { margin-top: 1.6em!important;}
.mt18em { margin-top: 1.8em!important;}
.mt20em { margin-top: 2.0em!important;}
.mr01em { margin-right: 0.1em!important;}
.mr02em { margin-right: 0.2em!important;}
.mr03em { margin-right: 0.3em!important;}
.mr04em { margin-right: 0.4em!important;}
.mr05em { margin-right: 0.5em!important;}
.mr10em { margin-right: 1.0em!important;}
.mr12em { margin-right: 1.2em!important;}
.mr14em { margin-right: 1.4em!important;}
.mr16em { margin-right: 1.6em!important;}
.mr18em { margin-right: 1.8em!important;}
.mr20em { margin-right: 2.0em!important;}
.mb01em { margin-bottom: 0.1em!important;}
.mb02em { margin-bottom: 0.2em!important;}
.mb03em { margin-bottom: 0.3em!important;}
.mb04em { margin-bottom: 0.4em!important;}
.mb05em { margin-bottom: 0.5em!important;}
.mb10em { margin-bottom: 1.0em!important;}
.mb12em { margin-bottom: 1.2em!important;}
.mb14em { margin-bottom: 1.4em!important;}
.mb16em { margin-bottom: 1.6em!important;}
.mb18em { margin-bottom: 1.8em!important;}
.mb20em { margin-bottom: 2.0em!important;}
.ml01em { margin-left: 0.1em!important;}
.ml02em { margin-left: 0.2em!important;}
.ml03em { margin-left: 0.3em!important;}
.ml04em { margin-left: 0.4em!important;}
.ml05em { margin-left: 0.5em!important;}
.ml10em { margin-left: 1.0em!important;}
.ml12em { margin-left: 1.2em!important;}
.ml14em { margin-left: 1.4em!important;}
.ml16em { margin-left: 1.6em!important;}
.ml18em { margin-left: 1.8em!important;}
.ml20em { margin-left: 2.0em!important;}
.mtmb01em { margin-top: 0.1em; margin-bottom: 0.1em!important;}
.mtmb02em { margin-top: 0.2em; margin-bottom: 0.2em!important;}
.mtmb03em { margin-top: 0.3em; margin-bottom: 0.3em!important;}
.mtmb04em { margin-top: 0.4em; margin-bottom: 0.4em!important;}
.mtmb05em { margin-top: 0.5em; margin-bottom: 0.5em!important;}
.mtmb10em { margin-top: 1.0em; margin-bottom: 1.0em!important;}
.mtmb12em { margin-top: 1.2em; margin-bottom: 1.2em!important;}
.mtmb14em { margin-top: 1.4em; margin-bottom: 1.4em!important;}
.mtmb16em { margin-top: 1.6em; margin-bottom: 1.6em!important;}
.mtmb18em { margin-top: 1.8em; margin-bottom: 1.8em!important;}
.mtmb20em { margin-top: 2.0em; margin-bottom: 2.0em!important;}
.mlmr01em { margin-left: 0.1em; margin-right: 0.1em!important;}
.mlmr02em { margin-left: 0.2em; margin-right: 0.2em!important;}
.mlmr03em { margin-left: 0.3em; margin-right: 0.3em!important;}
.mlmr04em { margin-left: 0.4em; margin-right: 0.4em!important;}
.mlmr05em { margin-left: 0.5em; margin-right: 0.5em!important;}
.mlmr10em { margin-left: 1.0em; margin-right: 1.0em!important;}
.mlmr12em { margin-left: 1.2em; margin-right: 1.2em!important;}
.mlmr14em { margin-left: 1.4em; margin-right: 1.4em!important;}
.mlmr16em { margin-left: 1.6em; margin-right: 1.6em!important;}
.mlmr18em { margin-left: 1.8em; margin-right: 1.8em!important;}
.mlmr20em { margin-left: 2.0em; margin-right: 2.0em!important;} .m01rem { margin: 0.1rem!important;}
.m02rem { margin: 0.2rem!important;}
.m03rem { margin: 0.3rem!important;}
.m04rem { margin: 0.4rem!important;}
.m05rem { margin: 0.5rem!important;}
.m10rem { margin: 1.0rem!important;}
.m12rem { margin: 1.2rem!important;}
.m14rem { margin: 1.4rem!important;}
.m16rem { margin: 1.6rem!important;}
.m18rem { margin: 1.8rem!important;}
.m20rem { margin: 2.0rem!important;}
.mt01rem { margin-top: 0.1rem!important;}
.mt02rem { margin-top: 0.2rem!important;}
.mt03rem { margin-top: 0.3rem!important;}
.mt04rem { margin-top: 0.4rem!important;}
.mt05rem { margin-top: 0.5rem!important;}
.mt10rem { margin-top: 1.0rem!important;}
.mt12rem { margin-top: 1.2rem!important;}
.mt14rem { margin-top: 1.4rem!important;}
.mt16rem { margin-top: 1.6rem!important;}
.mt18rem { margin-top: 1.8rem!important;}
.mt20rem { margin-top: 2.0rem!important;}
.mr01rem { margin-right: 0.1rem!important;}
.mr02rem { margin-right: 0.2rem!important;}
.mr03rem { margin-right: 0.3rem!important;}
.mr04rem { margin-right: 0.4rem!important;}
.mr05rem { margin-right: 0.5rem!important;}
.mr10rem { margin-right: 1.0rem!important;}
.mr12rem { margin-right: 1.2rem!important;}
.mr14rem { margin-right: 1.4rem!important;}
.mr16rem { margin-right: 1.6rem!important;}
.mr18rem { margin-right: 1.8rem!important;}
.mr20rem { margin-right: 2.0rem!important;}
.mb01rem { margin-bottom: 0.1rem!important;}
.mb02rem { margin-bottom: 0.2rem!important;}
.mb03rem { margin-bottom: 0.3rem!important;}
.mb04rem { margin-bottom: 0.4rem!important;}
.mb05rem { margin-bottom: 0.5rem!important;}
.mb10rem { margin-bottom: 1.0rem!important;}
.mb12rem { margin-bottom: 1.2rem!important;}
.mb14rem { margin-bottom: 1.4rem!important;}
.mb16rem { margin-bottom: 1.6rem!important;}
.mb18rem { margin-bottom: 1.8rem!important;}
.mb20rem { margin-bottom: 2.0rem!important;}
.ml01rem { margin-left: 0.1rem!important;}
.ml02rem { margin-left: 0.2rem!important;}
.ml03rem { margin-left: 0.3rem!important;}
.ml04rem { margin-left: 0.4rem!important;}
.ml05rem { margin-left: 0.5rem!important;}
.ml10rem { margin-left: 1.0rem!important;}
.ml12rem { margin-left: 1.2rem!important;}
.ml14rem { margin-left: 1.4rem!important;}
.ml16rem { margin-left: 1.6rem!important;}
.ml18rem { margin-left: 1.8rem!important;}
.ml20rem { margin-left: 2.0rem!important;}
.mtmb01rem { margin-top: 0.1rem; margin-bottom: 0.1rem!important;}
.mtmb02rem { margin-top: 0.2rem; margin-bottom: 0.2rem!important;}
.mtmb03rem { margin-top: 0.3rem; margin-bottom: 0.3rem!important;}
.mtmb04rem { margin-top: 0.4rem; margin-bottom: 0.4rem!important;}
.mtmb05rem { margin-top: 0.5rem; margin-bottom: 0.5rem!important;}
.mtmb10rem { margin-top: 1.0rem; margin-bottom: 1.0rem!important;}
.mtmb12rem { margin-top: 1.2rem; margin-bottom: 1.2rem!important;}
.mtmb14rem { margin-top: 1.4rem; margin-bottom: 1.4rem!important;}
.mtmb16rem { margin-top: 1.6rem; margin-bottom: 1.6rem!important;}
.mtmb18rem { margin-top: 1.8rem; margin-bottom: 1.8rem!important;}
.mtmb20rem { margin-top: 2.0rem; margin-bottom: 2.0rem!important;}
.mlmr01rem { margin-left: 0.1rem; margin-right: 0.1rem!important;}
.mlmr02rem { margin-left: 0.2rem; margin-right: 0.2rem!important;}
.mlmr03rem { margin-left: 0.3rem; margin-right: 0.3rem!important;}
.mlmr04rem { margin-left: 0.4rem; margin-right: 0.4rem!important;}
.mlmr05rem { margin-left: 0.5rem; margin-right: 0.5rem!important;}
.mlmr10rem { margin-left: 1.0rem; margin-right: 1.0rem!important;}
.mlmr12rem { margin-left: 1.2rem; margin-right: 1.2rem!important;}
.mlmr14rem { margin-left: 1.4rem; margin-right: 1.4rem!important;}
.mlmr16rem { margin-left: 1.6rem; margin-right: 1.6rem!important;}
.mlmr18rem { margin-left: 1.8rem; margin-right: 1.8rem!important;}
.mlmr20rem { margin-left: 2.0rem; margin-right: 2.0rem!important;}  .p1 { padding: 1px!important;}
.p3 { padding: 3px!important;}
.p5 { padding: 5px!important;}
.p10 { padding: 10px!important;}
.p15 { padding: 15px!important;}
.p20 { padding: 20px!important;}
.pt1 { padding-top: 1px!important;}
.pt2 { padding-top: 2px!important;}
.pt3 { padding-top: 3px!important;}
.pt4 { padding-top: 4px!important;}
.pt5 { padding-top: 5px!important;}
.pt6 { padding-top: 6px!important;}
.pt7 { padding-top: 7px!important;}
.pt8 { padding-top: 8px!important;}
.pt9 { padding-top: 9px!important;}
.pt10 { padding-top: 10px!important;}
.pt11 { padding-top: 11px!important;}
.pt12 { padding-top: 12px!important;}
.pt13 { padding-top: 13px!important;}
.pt14 { padding-top: 14px!important;}
.pt15 { padding-top: 15px!important;}
.pt20 { padding-top: 20px!important;}
.pt25 { padding-top: 25px!important;}
.pt30 { padding-top: 35px!important;}
.pr1 { padding-right: 1px!important;}
.pr2 { padding-right: 2px!important;}
.pr3 { padding-right: 3px!important;}
.pr4 { padding-right: 4px!important;}
.pr5 { padding-right: 5px!important;}
.pr6 { padding-right: 6px!important;}
.pr7 { padding-right: 7px!important;}
.pr8 { padding-right: 8px!important;}
.pr9 { padding-right: 9px!important;}
.pr10 { padding-right: 10px!important;}
.pr11 { padding-right: 11px!important;}
.pr12 { padding-right: 12px!important;}
.pr13 { padding-right: 13px!important;}
.pr14 { padding-right: 14px!important;}
.pr15 { padding-right: 15px!important;}
.pr16 { padding-right: 16px!important;}
.pr17 { padding-right: 17px!important;}
.pr18 { padding-right: 18px!important;}
.pr19 { padding-right: 19px!important;}
.pr20 { padding-right: 20px!important;}
.pr25 { padding-right: 25px!important;}
.pr30 { padding-right: 30px!important;}
.pb1 { padding-bottom: 1px!important;}
.pb2 { padding-bottom: 2px!important;}
.pb3 { padding-bottom: 3px!important;}
.pb4 { padding-bottom: 4px!important;}
.pb5 { padding-bottom: 5px!important;}
.pb6 { padding-bottom: 6px!important;}
.pb7 { padding-bottom: 7px!important;}
.pb8 { padding-bottom: 8px!important;}
.pb9 { padding-bottom: 9px!important;}
.pb10 { padding-bottom: 10px!important;}
.pb11 { padding-bottom: 11px!important;}
.pb12 { padding-bottom: 12px!important;}
.pb13 { padding-bottom: 13px!important;}
.pb14 { padding-bottom: 14px!important;}
.pb15 { padding-bottom: 15px!important;}
.pb20 { padding-bottom: 20px!important;}
.pb25 { padding-bottom: 25px!important;}
.pb30 { padding-bottom: 30px!important;}
.pl1 { padding-left: 1px!important;}
.pl2 { padding-left: 2px!important;}
.pl3 { padding-left: 3px!important;}
.pl4 { padding-left: 4px!important;}
.pl5 { padding-left: 5px!important;}
.pl6 { padding-left: 6px!important;}
.pl7 { padding-left: 7px!important;}
.pl8 { padding-left: 8px!important;}
.pl9 { padding-left: 9px!important;}
.pl10 { padding-left: 10px!important;}
.pl11 { padding-left: 11px!important;}
.pl12 { padding-left: 12px!important;}
.pl13 { padding-left: 13px!important;}
.pl14 { padding-left: 14px!important;}
.pl15 { padding-left: 15px!important;}
.pl20 { padding-left: 20px!important;}
.pl25 { padding-left: 25px!important;}
.pl30 { padding-left: 30px!important;}
.ptpb5 { padding-top: 5px; padding-bottom: 5px!important;}
.ptpb10 { padding-top: 10px; padding-bottom: 10px!important;}
.ptpb15 { padding-top: 15px; padding-bottom: 15px!important;}
.plpr5 { padding-left: 5px; padding-right: 5px!important;}
.plpr10 { padding-left: 10px; padding-right: 10px!important;}
.plpr15 { padding-left: 15px; padding-right: 15px!important;}
.plpr20 { padding-left: 20px; padding-right: 20px!important;}
.plpr25 { padding-left: 25px; padding-right: 25px!important;}
.plpr30 { padding-left: 30px; padding-right: 30px!important;} .p01em { padding: 0.1em!important;}
.p02em { padding: 0.2em!important;}
.p03em { padding: 0.3em!important;}
.p04em { padding: 0.4em!important;}
.p05em { padding: 0.5em!important;}
.p10em { padding: 1.0em!important;}
.p12em { padding: 1.2em!important;}
.p14em { padding: 1.4em!important;}
.p16em { padding: 1.6em!important;}
.p18em { padding: 1.8em!important;}
.p20em { padding: 2.0em!important;}
.pt01em { padding-top: 0.1em!important;}
.pt02em { padding-top: 0.2em!important;}
.pt03em { padding-top: 0.3em!important;}
.pt04em { padding-top: 0.4em!important;}
.pt10em { padding-top: 1.0em!important;}
.pt12em { padding-top: 1.2em!important;}
.pt14em { padding-top: 1.4em!important;}
.pt16em { padding-top: 1.6em!important;}
.pt18em { padding-top: 1.8em!important;}
.pt20em { padding-top: 2.0em!important;}
.pr01em { padding-right: 0.1em!important;}
.pr02em { padding-right: 0.2em!important;}
.pr03em { padding-right: 0.3em!important;}
.pr04em { padding-right: 0.4em!important;}
.pr05em { padding-right: 0.5em!important;}
.pr10em { padding-right: 1.0em!important;}
.pr12em { padding-right: 1.2em!important;}
.pr14em { padding-right: 1.4em!important;}
.pr16em { padding-right: 1.6em!important;}
.pr18em { padding-right: 1.8em!important;}
.pr20em { padding-right: 2.0em!important;}
.pb01em { padding-bottom: 0.1em!important;}
.pb02em { padding-bottom: 0.2em!important;}
.pb03em { padding-bottom: 0.3em!important;}
.pb04em { padding-bottom: 0.4em!important;}
.pb05em { padding-bottom: 0.5em!important;}
.pb10em { padding-bottom: 1.0em!important;}
.pb12em { padding-bottom: 1.2em!important;}
.pb14em { padding-bottom: 1.4em!important;}
.pb16em { padding-bottom: 1.6em!important;}
.pb18em { padding-bottom: 1.8em!important;}
.pb20em { padding-bottom: 2.0em!important;}
.pl01em { padding-left: 0.1em!important;}
.pl02em { padding-left: 0.2em!important;}
.pl03em { padding-left: 0.3em!important;}
.pl04em { padding-left: 0.4em!important;}
.pl05em { padding-left: 0.5em!important;}
.pl10em { padding-left: 1.0em!important;}
.pl12em { padding-left: 1.2em!important;}
.pl14em { padding-left: 1.4em!important;}
.pl16em { padding-left: 1.6em!important;}
.pl18em { padding-left: 1.8em!important;}
.pl20em { padding-left: 2.0em!important;}
.ptpb01em { padding-top: 0.1em; padding-bottom: 0.1em!important;}
.ptpb02em { padding-top: 0.2em; padding-bottom: 0.2em!important;}
.ptpb03em { padding-top: 0.3em; padding-bottom: 0.3em!important;}
.ptpb04em { padding-top: 0.4em; padding-bottom: 0.4em!important;}
.ptpb05em { padding-top: 0.5em; padding-bottom: 0.5em!important;}
.ptpb10em { padding-top: 1.0em; padding-bottom: 1.0em!important;}
.ptpb12em { padding-top: 1.2em; padding-bottom: 1.2em!important;}
.ptpb14em { padding-top: 1.4em; padding-bottom: 1.4em!important;}
.ptpb16em { padding-top: 1.6em; padding-bottom: 1.6em!important;}
.ptpb18em { padding-top: 1.8em; padding-bottom: 1.8em!important;}
.ptpb20em { padding-top: 2.0em; padding-bottom: 2.0em!important;}
.plpr01em { padding-left: 0.1em; padding-right: 0.1em!important;}
.plpr02em { padding-left: 0.2em; padding-right: 0.2em!important;}
.plpr03em { padding-left: 0.3em; padding-right: 0.3em!important;}
.plpr04em { padding-left: 0.4em; padding-right: 0.4em!important;}
.plpr05em { padding-left: 0.5em; padding-right: 0.5em!important;}
.plpr10em { padding-left: 1.0em; padding-right: 1.0em!important;}
.plpr12em { padding-left: 1.2em; padding-right: 1.2em!important;}
.plpr14em { padding-left: 1.4em; padding-right: 1.4em!important;}
.plpr16em { padding-left: 1.6em; padding-right: 1.6em!important;}
.plpr18em { padding-left: 1.8em; padding-right: 1.8em!important;}
.plpr20em { padding-left: 2.0em; padding-right: 2.0em!important;} .p01rem { padding: 0.1rem!important;}
.p02rem { padding: 0.2rem!important;}
.p03rem { padding: 0.3rem!important;}
.p04rem { padding: 0.4rem!important;}
.p05rem { padding: 0.5rem!important;}
.p10rem { padding: 1.0rem!important;}
.p12rem { padding: 1.2rem!important;}
.p14rem { padding: 1.4rem!important;}
.p16rem { padding: 1.6rem!important;}
.p18rem { padding: 1.8rem!important;}
.p20rem { padding: 2.0rem!important;}
.pt01rem { padding-top: 0.1rem!important;}
.pt02rem { padding-top: 0.2rem!important;}
.pt03rem { padding-top: 0.3rem!important;}
.pt04rem { padding-top: 0.4rem!important;}
.pt10rem { padding-top: 1.0rem!important;}
.pt12rem { padding-top: 1.2rem!important;}
.pt14rem { padding-top: 1.4rem!important;}
.pt16rem { padding-top: 1.6rem!important;}
.pt18rem { padding-top: 1.8rem!important;}
.pt20rem { padding-top: 2.0rem!important;}
.pr01rem { padding-right: 0.1rem!important;}
.pr02rem { padding-right: 0.2rem!important;}
.pr03rem { padding-right: 0.3rem!important;}
.pr04rem { padding-right: 0.4rem!important;}
.pr05rem { padding-right: 0.5rem!important;}
.pr10rem { padding-right: 1.0rem!important;}
.pr12rem { padding-right: 1.2rem!important;}
.pr14rem { padding-right: 1.4rem!important;}
.pr16rem { padding-right: 1.6rem!important;}
.pr18rem { padding-right: 1.8rem!important;}
.pr20rem { padding-right: 2.0rem!important;}
.pb01rem { padding-bottom: 0.1rem!important;}
.pb02rem { padding-bottom: 0.2rem!important;}
.pb03rem { padding-bottom: 0.3rem!important;}
.pb04rem { padding-bottom: 0.4rem!important;}
.pb05rem { padding-bottom: 0.5rem!important;}
.pb10rem { padding-bottom: 1.0rem!important;}
.pb12rem { padding-bottom: 1.2rem!important;}
.pb14rem { padding-bottom: 1.4rem!important;}
.pb16rem { padding-bottom: 1.6rem!important;}
.pb18rem { padding-bottom: 1.8rem!important;}
.pb20rem { padding-bottom: 2.0rem!important;}
.pl01rem { padding-left: 0.1rem!important;}
.pl02rem { padding-left: 0.2rem!important;}
.pl03rem { padding-left: 0.3rem!important;}
.pl04rem { padding-left: 0.4rem!important;}
.pl05rem { padding-left: 0.5rem!important;}
.pl10rem { padding-left: 1.0rem!important;}
.pl12rem { padding-left: 1.2rem!important;}
.pl14rem { padding-left: 1.4rem!important;}
.pl16rem { padding-left: 1.6rem!important;}
.pl18rem { padding-left: 1.8rem!important;}
.pl20rem { padding-left: 2.0rem!important;}
.ptpb01rem { padding-top: 0.1rem; padding-bottom: 0.1rem!important;}
.ptpb02rem { padding-top: 0.2rem; padding-bottom: 0.2rem!important;}
.ptpb03rem { padding-top: 0.3rem; padding-bottom: 0.3rem!important;}
.ptpb04rem { padding-top: 0.4rem; padding-bottom: 0.4rem!important;}
.ptpb05rem { padding-top: 0.5rem; padding-bottom: 0.5rem!important;}
.ptpb10rem { padding-top: 1.0rem; padding-bottom: 1.0rem!important;}
.ptpb12rem { padding-top: 1.2rem; padding-bottom: 1.2rem!important;}
.ptpb14rem { padding-top: 1.4rem; padding-bottom: 1.4rem!important;}
.ptpb16rem { padding-top: 1.6rem; padding-bottom: 1.6rem!important;}
.ptpb18rem { padding-top: 1.8rem; padding-bottom: 1.8rem!important;}
.ptpb20rem { padding-top: 2.0rem; padding-bottom: 2.0rem!important;}
.plpr01rem { padding-left: 0.1rem; padding-right: 0.1rem!important;}
.plpr02rem { padding-left: 0.2rem; padding-right: 0.2rem!important;}
.plpr03rem { padding-left: 0.3rem; padding-right: 0.3rem!important;}
.plpr04rem { padding-left: 0.4rem; padding-right: 0.4rem!important;}
.plpr05rem { padding-left: 0.5rem; padding-right: 0.5rem!important;}
.plpr10rem { padding-left: 1.0rem; padding-right: 1.0rem!important;}
.plpr12rem { padding-left: 1.2rem; padding-right: 1.2rem!important;}
.plpr14rem { padding-left: 1.4rem; padding-right: 1.4rem!important;}
.plpr16rem { padding-left: 1.6rem; padding-right: 1.6rem!important;}
.plpr18rem { padding-left: 1.8rem; padding-right: 1.8rem!important;}
.plpr20rem { padding-left: 2.0rem; padding-right: 2.0rem!important;} .fl { float: left;}
.fr { float:right;} .cf:after {
content: "."; display: block; clear: both;
height: 0;
visibility: hidden;
font-size: 0.1em;
}
.cf {
min-height: 1px;
}
* html .cf {
height: 1px;/*\*//*/height: auto;
overflow: hidden;/**/}
.cb { clear: both;} .tac { text-align: center!important;}
.tar { text-align: right!important;}
.tal { text-align: left !important;}
.vat { vertical-align: top!important;}
.vam { vertical-align: middle!important;}
.vab { vertical-align: bottom!important;} .fs09 { font-size: 0.9rem!important;}
.fs10 { font-size: 10rem!important;}
.fs11 { font-size: 1.1rem!important;}
.fs12 { font-size: 1.2rem!important;}
.fs13 { font-size: 1.3rem!important;}
.fs14 { font-size: 1.4rem!important;}
.fs15 { font-size: 1.5rem!important;}
.fs16 { font-size: 1.6rem!important;}
.fs17 { font-size: 1.7rem!important;}
.fs18 { font-size: 1.8rem!important;}
.fs19 { font-size: 1.9rem!important;}
.fs20 { font-size: 2.0rem!important;}
.fs21 { font-size: 2.1rem!important;}
.fs22 { font-size: 2.2rem!important;}
.fs23 { font-size: 2.3rem!important;}
.fs24 { font-size: 2.4rem!important;}
.fs25 { font-size: 2.5rem!important;} .fs01em { font-size: 0.1em!important;}
.fs02em { font-size: 0.2em!important;}
.fs03em { font-size: 0.3em!important;}
.fs04em { font-size: 0.4em!important;}
.fs05em { font-size: 0.5em!important;}
.fs06em { font-size: 0.6em!important;}
.fs07em { font-size: 0.7em!important;}
.fs08em { font-size: 0.8em!important;}
.fs09em { font-size: 0.9em!important;}
.fs10em { font-size: 1.0em!important;}
.fs11em { font-size: 1.1em!important;}
.fs12em { font-size: 1.2em!important;}
.fs13em { font-size: 1.3em!important;}
.fs14em { font-size: 1.4em!important;}
.fs15em { font-size: 1.5em!important;}
.fs16em { font-size: 1.6em!important;}
.fs18em { font-size: 1.8em!important;}
.fs20em { font-size: 2.0em!important;} .fsEng{
font-family: 'Arial', sans-serif!important;
} .fcWhite { color: #FFFFFF!important;}
.fcBlack { color: #000!important;}
.fcRed { color: #f00!important;}
.fcOrange { color: #f60!important;}
.fcYellow { color: #fc0!important;}
.fcGreen { color: #360!important;}
.fcYgreen { color: #f90!important;}
.fcBlue { color: #03f!important;}
.fcLblue { color: #0cc!important;}
.fcPink { color: #f09!important;}
.fcPurple { color: #c0c!important;} .fb { font-weight: bold !important;} .lh0p5 { line-height: 0.5em!important;}
.lh1p0 { line-height: 1.0em!important;}
.lh1p2 { line-height: 1.2em!important;}
.lh1p4 { line-height: 1.4em!important;}
.lh1p6 { line-height: 1.6em!important;}
.lh1p8 { line-height: 1.8em!important;}
.lh2p0 { line-height: 2.0em!important;} .bgNone { background-image: none!important;}
.bg01 { background: #FFFFFF!important;}
.bgGray01 { background: #dedede!important;} .bdr01 {
border: solid 1px #dedede!important;}
.bdrT01 {
border-top: solid 1px #dedede!important;}
.bdR01 {
border-right: solid 1px #dedede!important;}
.bdrB01 {
border-bottom: solid 1px #dedede!important;}
.bdrL01 {
border-left: solid 1px #dedede!important;}
.bdrBDotted {
border-bottom: dotted 1px #dedede!important;} .bdrEMB {
border: 0;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #fff;
margin: 20px 0;
}
@media screen and (max-width: 813px) {
.bdrEMB {
border: 0;
border-top: 1px solid #f4f1ea;
border-bottom: 1px solid #fff;
margin: 10px 0;
margin-left: -14px;
margin-right: -14px;
}
} a {
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
a:hover {
text-decoration: underline;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.op img,
.op input {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.op:hover,
.op:hover img,
.op:hover input {
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.visible-pc {
display: block;
}
.visible-ts {
display: none;
}
.telsp a {
cursor: default;
}
@media screen and (max-width: 813px) {
.visible-ts {
display: block;
}
.visible-pc {
display: none;
}
}
.flex-center-center{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-center-between{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.flex-center-left{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.flex-center-right{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.flex-bottom-center{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
}
 body{
background: #fff;
font-family: 'Noto Sans JP', sans-serif;
color: #000;
}  .hdm{
}
@media screen and (max-width: 813px) {
.hdm{
font-size: 18px;
margin-bottom: 20px;
-webkit-background-size: 20px 3px;
background-size: 20px 3px;
}
} .btn{
}
.btn a{
}
.btn a:hover{
text-decoration: none;
} #wrapper {
position: relative;
}
@media screen and (max-width: 813px) {
#wrapper {
min-width: 320px;
}
}
.inner{
max-width: 1120px;
margin: 0 auto;
}
.pageinner{
max-width: 1680px;
margin: 0 auto;
}
@media screen and (max-width: 1366px) {
.pageinner{
width: 100%;
padding: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
@media screen and (max-width: 813px) {
.inner{
width: 100%;
padding: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pageinner{
width: 100%;
padding: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
} header{
}
@media screen and (max-width: 813px) {
} .teaser {
}
@media screen and (max-width: 813px) {
.teaserPage {
}
} #breadcrumb{
}
@media screen and (max-width: 813px) {
#breadcrumb{
}
} #content {
}
#content .inner {
}
@media screen and (max-width: 813px) {
#content {
}
#content .inner {
}
} article {
}
@media screen and (max-width: 813px) {
article {
}
} aside{
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 50px;
z-index: 9;
}
aside .sideimg+.sideimg{
margin-top: 10px;
}
@media screen and (max-width: 813px) {
aside{
}
} .pageTop{
position: fixed;
bottom: 70px;
right: 120px;
z-index: 99;
display: none;
}
@media screen and (max-width: 813px) {
.pageTop {
position: fixed;
bottom: 70px;
right: 10px;
z-index: 10;
display: none;
}
.pageTop img {
width: 30px;
}
} @media screen and (max-width: 813px) {
}


 .hdL {}
.hdM {}
.hdS {}
.hd01 {}

* {
box-sizing: border-box;
}
#header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 15;
background-color: #fff;
border-bottom: 1px solid #ededed;
}
#header .headerIn {
position: relative;
}
#header .headerIn #headerlink {
position: absolute;
right: 0;
top: 0;
display: flex;
}
#header .headerIn #headerlogo {
text-align: center;
padding-top: 10px;
}
#header .headerIn #headerlink .btn {
background-color: #4e799d;
font-size: 16px;
transition: all 0.2s;
}
#header .headerIn #headerlink .btn a {
padding: 0px 15px;
height: 50px;
}
#header .headerIn #headerlink .btn span {
color: #fff;
margin-left: 5px;
}
#header .headerIn #headerlink .btn:hover {
background-color: #ff088c;
transition: all 0.2s;
}
.nav ul li {
width: 16.6%;
float: left;
text-align: center;
}
.nav ul li > div {
display: block;
padding: 10px 0;
position: relative;
}
.nav ul li > div:hover {
cursor: pointer;
}
.nav ul li > div:hover:before {
position: absolute;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/header_hover.png) no-repeat;
width: 16px;
height: 9px;
}
.nav ul li > div .name {
font-size: 16px;
color: #000;
}
.nav ul li > div .english {
color: #4e799d;
font-size: 1.1rem;
}
#mainimg {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/main_bg.png);
-webkit-background-size: cover;
background-size: cover;
position: relative;
margin-top: 115px;
}
#mainimg svg {
position: absolute;
z-index: 5;
top: 0;
left: -200px;
}
#mainimg .inner {
position: relative;
}
#mainimg .inner .pic {
position: absolute;
right: -30px;
bottom: 70px;
}
#mainimg .inner .textimg {
position: absolute;
right: 0px;
top: 30px;
}
#mainimg .textbox {
padding-top: 90px;
line-height: 1.2;
font-weight: bold;
}
#mainimg .text01 {
font-size: 30px;
color: #4e799d;
font-weight: 900;
}
#mainimg .normal {
font-weight: 700;
}
#mainimg .text02 {
font-size: 60px;
color: #4e799d;
}
#mainimg .text03 {
font-size: 130px;
color: #4e799d;
}
#mainimg .text04 {
font-size: 25px;
color: #4e799d;
margin-bottom: 10px;
}
#mainimg ul {
margin-left: -5px;
width: 50%;
padding-bottom: 10px;
}
#mainimg ul li {
padding-left: 5px;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
float: left;
}
#mainimg ul li .box {
border: 3px solid #dce4eb;
border-radius: 5px;
background-color: #fff;
}
#mainimg ul li .img {
margin-top: 20px;
height: 35px;
}
#mainimg .text05 {
color: #4e799d;
padding: 5px 0 10px;
font-weight: 500;
font-size: 1.2rem;
}
.navbar-collapse {
display: none;
}
@media screen and (max-width: 813px) {
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 15;
background-color: #fff;
}
#header .headerIn {
position: relative;
margin-right: -10px;
}
#header .headerIn #headerlink {
position: relative;
right: 0;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
}
#header .headerIn #headerlogo {
text-align: left;
padding: 10px 0;
width: 30%;
}
#header .headerIn #headerlink .btn {
background-color: #4e799d;
font-size: 12px;
}
#header .headerIn #headerlink .btn a {
display: flex; }
#header .headerIn #headerlink .btn a img {
width: 20px;
height: 20px;
}
#header .headerIn #headerlink .btn span {
color: #fff;
margin-left: 5px;
}
#header .headerIn #headerlink .btn:hover {
background-color: #ff088c;
}
#header .headerIn #headerlink .navbar-toggle img {
height: 50px;  }
.navbar-collapse {
display: none;
background-color: #4e799d;
text-align: center;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 14;
overflow: auto;
}
.navbar-collapse .scroll {
}
.navbar-collapse ul {
padding-top: 90px;
}
.navbar-collapse ul li {
margin-bottom: 25px;
}
.navbar-collapse ul li > div {
display: block;
color: #fff;
text-align: center;
}
.navbar-collapse ul li > div .name {
font-size: 20px;
}
.navbar-collapse .logo {
width: 80px;
margin: 0 auto;
}
.nav ul li {
width: 14.28%;
float: left;
text-align: center;
}
.nav ul li a {
display: block;
padding: 10px 0;
position: relative;
}
.nav ul li a:hover:before {
position: absolute;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/header_hover.png) no-repeat;
width: 16px;
height: 9px;
}
.nav ul li a .name {
font-size: 16px;
color: #000;
}
.nav ul li a .english {
color: #4e799d;
}
#mainimg {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/main_bg.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
margin-top: 50px;
}
#mainimg svg {
position: absolute;
z-index: 5;
top: 250px;
left: -200px;
}
#mainimg .inner {
position: relative;
}
#mainimg .inner .pic {
position: absolute;
right: 0px;
bottom: auto;
top: 130px;
width: 50%;
max-width: 190px;
}
#mainimg .inner .textimg {
position: absolute;
right: 0px;
top: 10px;
width: 30px;
}
#mainimg .textbox {
padding-top: 40px;
line-height: 1.2;
font-weight: bold;
}
#mainimg .text01 {
font-size: 20px;
color: #4e799d;
}
#mainimg .text02 {
font-size: 40px;
color: #4e799d;
}
#mainimg .text03 {
font-size: 70px;
color: #4e799d;
line-height: 1;
}
#mainimg .text04 {
font-size: 15px;
color: #4e799d;
margin-bottom: 5px;
font-weight: 700;
}
#mainimg .text04 span {
font-size: 18px;
}
#mainimg ul {
margin-left: -5px;
width: 100%;
padding-bottom: 10px;
}
#mainimg ul li {
padding-left: 5px;
width: 33.33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
float: left;
margin-bottom: 10px;
}
#mainimg ul li:nth-child(1) {
padding-top: 27px;
}
#mainimg ul li .box {
border: 3px solid #dce4eb;
border-radius: 5px;
background-color: #fff;
}
#mainimg ul li .img {
margin-top: 10px;
height: 25px;
}
#mainimg ul li .img img {
max-height: 20px;
max-width: 30px;
}
#mainimg .text05 {
color: #4e799d;
padding: 0px 0 5px;
}
}
.cliants {
background-color: #fff;
}
.cliants .title {
padding-top: 25px;
margin: 0px 0px 20px 0px;
text-align: center;
font-size: 24px;
position: relative;
font-family: arial;
border-top: 1px solid #4e799d;
background-color: #fff;
}
.cliants .title:before {
position: absolute;
content: "";
width: 90px;
height: 1px;
background-color: #000;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.cliants .title:after {
position: absolute;
content: "";
width: 100%;
height: 10px;
background-color: #fff;
left: 0;
bottom: -10px;
}
.cliants ul {
margin-bottom: 70px;
}
.cliants li {
width: 16.66%;
float: left;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #dce4eb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 25px;
border-left: 1px solid #dce4eb;
border-right: 1px solid #dce4eb;
}
.cliants li:nth-child(1) { }
.cliants li:nth-child(7) { }
.cliants li:nth-child(6) {
border-right: none;
}
.cliants li:nth-child(12) {
border-right: none;
}
.today {
color: #fff;
text-align: center;
}
.today .bg {
position: relative;
background-color: #333333;
padding-bottom: 35px;
}
.today .bg .people {
top: -89px;
left: 150px;
position: absolute;
}
.today .title {
font-size: 25px;
padding-top: 40px;
font-weight: 700;
}
.today .text {
font-size: 18px;
padding: 14px 0 10px;
}
.today .btn a {
color: #fff;
display: inline-block;
padding: 20px 0px;
background-color: #ff088c;
font-size: 20px;
border-radius: 5px;
border: 1px solid #ff088c;
width: 300px;
margin: 13px auto;
}
.today .btn a span {
margin-left: 7px;
padding-top: 5px;
}
.today .btn a:hover {
background-color: #fff;
color: #ff088c;
}
.comtitle .left {
font-size: 28px;
color: #4e799d;
margin-right: 40px;
position: relative;
font-weight: 700;
margin-bottom: 10px;
}
.comtitle .left:before {
position: absolute;
content: "";
width: 110px;
height: 1px;
background-color: #4e799d;
left: 0;
bottom: -10px;
}
.problem {
padding-top: 90px;
padding-bottom: 100px;
}
.problem .box {
padding-top: 50px;
}
.problem .box .left {
float: left;
width: 51%;
}
.problem .box .right {
float: right;
width: 48%;
padding-top: 56px;
}
.today02 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/online_consultation.png) no-repeat center;
-webkit-background-size: cover;
background-size: cover;
padding: 40px 0 90px;
text-align: center;
}
.today02 .text01 {
font-size: 20px;
font-weight: 500;
}
.today02 .text02 {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.today02 .btn a {
color: #fff;
display: inline-block;
padding: 25px 100px;
background-color: #ff088c;
font-size: 20px;
border-radius: 5px;
border: 1px solid #ff088c;
width: 300px;
margin: 13px auto;
}
.today02 .btn a span {
margin-left: 7px;
padding-top: 5px;
}
.today02 .btn a:hover {
background-color: #fff;
color: #ff088c;
}
.reason {
padding: 120px 0 90px;
font-weight: bold;
position: relative;
}
.reason .icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.allin {
background-color: #eef2f6;
padding-top: 100px;
padding-bottom: 80px;
}
.allin .tit01 {
font-size: 30px;
font-weight: bold;
color: #4e799d;
text-align: center;
}
.allin .tit02 {
font-size: 80px;
font-weight: bold;
color: #4e799d;
text-align: center;
font-family: arial;
margin-bottom: 10px;
}
.allin .tit03 {
display: inline-block;
background-color: #4e799d;
padding: 15px 100px;
color: #fff;
font-weight: bold;
font-size: 24px;
margin: 0 auto;
position: relative;
margin-bottom: 30px;
}
.allin .tit03:before {
position: absolute;
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/arrow.png);
width: 16px;
height: 9px;
content: "";
left: 50%;
transform: translateX(-50%);
bottom: -8px;
}
.allin .tit03 span {
font-size: 40px;
}
.allin .tit04 {
font-size: 20px;
font-weight: 500;
color: #4e799d;
text-align: center;
margin-bottom: 50px;
}
.allin ul {
margin-left: -25px;
}
.allin ul li {
padding-left: 25px;
width: 33.33%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.allin ul li .box {
background-color: #dce4eb;
padding: 50px 20px 20px;
position: relative;
text-align: center;
}
.allin ul li .box .num {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
background-color: #4e799d;
text-align: center;
font-size: 30px;
top: -25px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
font-weight: 500;
font-family: "Roboto";
}
.allin ul li .box .tit {
font-size: 26px;
color: #4e799d;
font-weight: bold;
margin-bottom: 10px;
}
.allin ul li .box .txt {
font-size: 15px;
color: #4e799d;
margin-bottom: 10px;
font-weight: 500;
}
.allin ul li .box .linebox .line {
background-color: #fff;
color: #4e799d;
padding: 10px 0;
font-size: 1.4rem;
font-weight: 500;
}
.allin ul li .box .linebox .line + .line {
margin-top: 6px;
}
.allin ul li .box .txt01 {
font-size: 25px;
color: #ff088c;
font-weight: bold;
}
.allin ul li .box .img {
background-color: #fff;
}
.features {
padding-top: 140px;
}
.features .comtitle {
text-align: center;
margin-bottom: 70px;
}
.features .comtitle .left {
font-weight: bold;
margin-right: 0;
font-size: 35px;
}
.features .comtitle .left:before {
left: 50%;
transform: translateX(-50%);
}
.features .bg {
position: relative;
padding-left: 340px;
padding-top: 180px;
padding-bottom: 200px;
margin-bottom: 80px;
}
.features .bg1 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg01.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg2 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg02.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg3 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg03.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg .num {
width: 140px;
height: 140px;
font-size: 80px;
font-weight: bold;
text-align: center;
line-height: 140px;
background-color: #eef2f6;
color: #4e799d;
position: absolute;
left: 280px;
top: -20px;
font-family: arial;
}
.features .bg .tit {
font-size: 100px;
font-weight: bold;
color: #4e799d;
font-family: arial;
}
.features .bg .tit span {
font-size: 30px;
font-family: "Noto Sans JP", sans-serif;
}
.features .bg .txt {
font-size: 25px;
font-weight: bold;
}
.features .bg .txt span {
font-size: 40px;
}
.features .bg .box {
background-color: #4e799d;
position: absolute;
bottom: -30px;
right: 280px;
padding: 30px 40px 20px;
}
.features .bg .box .txt01 {
font-size: 28px;
font-weight: bold;
color: #fff;
}
.features .bg .box .txt02 {
font-size: 24px;
margin-top: 10px;
text-align: center;
color: #fff;
}
.free {
background-color: #4e799d;
text-align: center;
padding: 100px 0 210px;
color: #fff;
}
.free .text01 {
font-size: 80px;
font-weight: bold;
line-height: 1.2;
}
.free .text01 span {
font-size: 180px;
font-weight: bold;
font-family: arial;
}
.free .img .add {
margin: 0 20px;
}
.free .text02 {
font-size: 60px;
font-weight: bold;
line-height: 1.2;
margin-top: 30px;
}
.free .text03 {
font-size: 25px;
font-weight: 700;
line-height: 1.2;
}
.list {
text-align: center;
}
.list .comtitle {
padding-top: 250px;
}
.list .left {
font-weight: bold;
margin-right: 0;
font-size: 35px;
margin-top: 10px;
margin-bottom: 20px;
}
.list .left:before {
left: 50%;
transform: translateX(-50%);
}
.list .bottom {
font-size: 25px;
color: #4e799d;
margin-bottom: 15px;
}
.list .inner {
position: relative;
}
.list .today {
position: absolute;
top: 0;
left: 0;
transform: translateY(-50%);
width: 100%;
}
.listcontent {
background-color: #dce4eb;
padding: 70px 0 50px;
}
.listcontent ul.tabList {
padding: 0 160px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-left: -10px;
margin-bottom: -15px;
}
.listcontent ul.tabList li {
width: 33.33%;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
}
.listcontent ul.tabList li a {
display: block;
background-color: #4e799d;
color: #fff;
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
border-radius: 30px;
}
.listcontent ul.tabList li a:hover {
text-decoration: none;
background-color: #fff;
color: #4e799d;
}
.listcontent ul.tabList li a.on {
background-color: #fff;
color: #4e799d;
}
.listcontent .tabBox {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/listcontent_bg.png) no-repeat top center;
-webkit-background-size: cover;
background-size: cover;
display: none;
margin-top: 30px;
padding: 40px 60px 60px;
}
.listcontent #tab01 {
display: block;
}
.listcontent .tabBox .title {
font-size: 30px;
font-weight: bold;
color: #4e799d;
text-align: center;
margin-bottom: 20px;
position: relative;
}
.listcontent .tabBox .title:before {
position: absolute;
content: "";
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #4e799d;
}
.listcontent .tabBox .tit {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.listcontent .tabBox .left {
width: 49%;
text-align: right;
padding-right: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.listcontent .tabBox .right {
width: 51%;
height: 200px;
}
.listcontent .tabBox .right li {
padding-left: 30px;
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/listcontent_icon.png) no-repeat center left;
font-size: 18px;
}
.listcontent .boxbg {
position: relative;
background-color: #ededed;
padding: 50px 40px 40px;
margin-top: 40px;
}
.boxbg .tit01 {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
.listcontent .boxbg ul {
margin-left: -10px;
}
.listcontent .boxbg ul li {
padding-left: 10px;
width: 33.33%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.listcontent .boxbg ul li .box {
background-color: #fff;
}
.listcontent .boxbg ul li .box .img {
text-align: center;
padding: 20px 0 5px;
}
.listcontent .boxbg ul li .box .text {
font-size: 18px;
text-align: center;
color: #4e799d;
font-weight: 500;
}
.listcontent .boxbg ul li .box .text02 {
font-size: 12px;
text-align: center;
color: #4e799d;
padding-bottom: 10px;
}
.listcontent .boxbg02 ul {
margin-left: -20px;
margin-top: 20px;
}
.listcontent .boxbg02 ul li {
padding-left: 20px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
.listcontent .boxbg02 ul li .box {
background-color: #ededed;
padding: 20px;
}
.listcontent .boxbg02 ul li .box .boxbg02left {
width: 90px;
height: 90px;
background-color: #4e799d;
line-height: 90px;
color: #fff;
font-size: 15px;
text-align: center;
}
.listcontent .boxbg02 ul li .box .boxbg02right {
padding: 20px 0 20px 20px;
font-size: 17px;
color: #4e799d;
flex: 1;
}
.red {
color: #f34b1e;
}
.listcontent #tab02 .boxbg ul li {
width: 50%;
}
.listcontent #tab02 .boxbg ul li .box .text {
padding-bottom: 20px;
}
.listcontent .boxbg .note {
position: absolute;
font-size: 18px;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
color: #4e799d;
}
.listcontent .boxbg .note span {
margin-left: 7px;
}
.listcontent #tab03 .boxbg ul li {
width: 50%;
}
.listcontent #tab03 .boxbg ul li .box .text {
padding-bottom: 20px;
}
.listcontent #tab04 .boxbg ul li {
width: 50%;
}
.listcontent #tab04 .boxbg ul li .box .text {
padding-bottom: 20px;
}
.listcontent #tab05 .boxbg ul li {
width: 100%;
}
.listcontent #tab05 .boxbg ul li .box .text {
padding-bottom: 20px;
}
.member {
padding: 40px 0;
}
.member .comtitle .left {
font-size: 35px;
margin-right: 15px;
}
.member .box {
margin-top: 100px;
}
.member .box .left {
width: 32%;
float: left;
padding: 0 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.member .box .right {
width: 68%;
float: right;
}
.member .box .right .tit01 {
font-size: 20px;
font-weight: bold;
}
.member .box .right .tit02 {
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
.member .box .right .tit02 span {
font-size: 40px;
font-family: "Noto Sans JP", sans-serif;
}
.member .box .right .txt01 {
font-size: 16px;
font-weight: 500;
}
.member .title {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-top: 70px;
margin-bottom: 30px;
}
.member .title span {
font-family: Arial;
font-size: 48px;
}
.member .txt02 {
font-size: 16px;
font-weight: 500;
}
.member .btn {
margin-top: 10px;
}
.member .btn a {
border: 1px solid #e0e0e0;
background-color: #f8f8f8;
text-align: center;
padding: 15px 0;
display: block;
color: #000;
font-size: 18px;
}
.member .btn a img {
margin-right: 5px;
}
.company {
padding-top: 110px;
}
.company .comtitle .left {
font-size: 35px;
}
.company .box {
padding: 0 270px;
margin-bottom: 110px;
}
.company dl {
display: table;
width: 100%;
font-size: 18px;
}
.company dl dt {
display: table-cell;
width: 28%;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 25px 0 10px;
}
.company dl dd {
display: table-cell;
width: 72%;
padding-left: 10px;
}
.company dl dd .value {
border-bottom: 1px solid #000;
padding: 25px 0 10px;
}
.consultation {
background-color: #dce4eb;
padding-top: 110px;
padding-bottom: 80px;
}
.consultation .comtitle {
text-align: center;
margin-bottom: 20px;
}
.consultation .comtitle .left {
font-weight: bold;
margin-right: 0;
margin-bottom: 35px;
}
.consultation .comtitle .left:before {
left: 50%;
transform: translateX(-50%);
}
.consultation .document-img {
max-width: 740px;
margin: auto;
}
.consultation .box {
padding: 0 100px;
}
.consultation .box .bg { padding: 60px 74px;
}
.consultation .box .bg .name {
margin-bottom: 10px;
margin-top: 15px;
}
.consultation .box .bg .name .icon {
width: 40px;
height: 26px;
line-height: 26px;
text-align: center;
color: #fff;
background-color: #f4511e;
border-radius: 4px;
margin-right: 5px;
font-size: 13px;
}
.consultation .box .bg .name .icon02 {
background-color: #4e799d;
}
.consultation .box .bg .name .text {
font-size: 16px;
}
.consultation .box .bg .value input {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 10px;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.consultation .box .bg .textarea textarea {
height: 150px;
width: 100%;
resize: none;
background-color: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 10px;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.consultation .box .bg .btn {
padding-top: 40px;
}
.consultation .box .bg .btn a {
width: 300px;
height: 80px;
line-height: 80px;
background-color: #4e799d;
font-size: 18px;
text-align: center;
color: #fff;
display: block;
margin: 0 auto;
border-radius: 40px;
}
#footer .nav ul li a {
padding: 30px 0;
}
#footer .logo {
text-align: center;
padding: 30px 0 20px;
}
#footer .copyright {
text-align: center;
font-size: 13px;
padding-bottom: 20px;
}
@media screen and (max-width: 813px) {
.cliants .title {
padding: 25px 0 5px;
margin: 0;
margin-bottom: 15px;
text-align: center;
font-size: 20px;
position: relative;
border-top: 1px solid #4e799d;
}
.cliants .title:before {
position: absolute;
content: "";
width: 90px;
height: 1px;
background-color: #000;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.cliants ul {
margin-bottom: 70px;
}
.cliants li {
width: 33.33%;
float: left;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #dce4eb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 15px;
border-left: 1px solid #dce4eb;
border-right: 1px solid #dce4eb;
}
.cliants li img {  }
.cliants li:nth-child(3n) { }
.cliants li:nth-child(1) { }
.cliants li:nth-child(7) { }
.cliants li:nth-child(6) { }
.cliants li:nth-child(12) { }
.today {
color: #fff;
text-align: center;
}
.today .bg {
position: relative;
background-color: #333333;
padding: 0 0 35px;
margin-left: -10px;
margin-right: -10px;
}
.today .bg .people {
top: -55px;
left: 30px;
position: absolute;
width: 50px;
}
.today .title {
font-size: 15px;
padding-top: 30px;
}
.today .text {
font-size: 12px;
padding: 14px 0 10px;
}
.today .btn a {
color: #fff;
display: inline-block;
padding: 0px 10px;
background-color: #ff088c;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ff088c;
line-height: 60px;
width: 200px;
}
.today .btn a span {
margin-left: 5px;
padding: 0;
}
.today .btn a:hover {
background-color: #fff;
color: #ff088c;
}
.comtitle {
display: block;
}
.comtitle .left {
font-size: 18px;
color: #4e799d;
margin-right: 0px;
position: relative;
}
.comtitle .left:before {
position: absolute;
content: "";
width: 110px;
height: 1px;
background-color: #4e799d;
left: 0;
bottom: -5px;
}
.comtitle .right {
width: 70%;
margin-top: 20px;
}
.problem {
padding-top: 40px;
padding-bottom: 50px;
}
.problem .box {
padding-top: 25px;
}
.problem .box .left {
float: none;
width: 100%;
text-align: center;
}
.problem .box .right {
float: none;
width: 100%;
padding-top: 20px;
text-align: center;
}
.today02 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/online_consultation.png) no-repeat center;
-webkit-background-size: cover;
background-size: cover;
padding: 20px 0 100px;
text-align: center;
}
.today02 .text01 {
font-size: 14px;
}
.today02 .text02 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.today02 .btn a {
color: #fff;
display: inline-block;
padding: 0px 30px;
background-color: #ff088c;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ff088c;
line-height: 60px;
width: 200px;
}
.today02 .btn a span {
margin-left: 5px;
padding-top: 0px;
}
.today02 .btn a:hover {
background-color: #fff;
color: #ff088c;
max-width: 80%;
padding: 0 10px;
}
.reason {
padding: 30px 0 40px;
font-weight: bold;
position: relative;
}
.reason .icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
}
.allin {
background-color: #eef2f6;
padding-top: 50px;
padding-bottom: 40px;
}
.allin .tit01 {
font-size: 16px;
font-weight: bold;
color: #4e799d;
text-align: center;
}
.allin .tit02 {
font-size: 30px;
font-weight: bold;
color: #4e799d;
text-align: center;
}
.allin .tit03 {
display: inline-block;
background-color: #4e799d;
padding: 10px 50px;
color: #fff;
font-weight: bold;
font-size: 20px;
margin: 0 auto;
position: relative;
margin-bottom: 15px;
}
.allin .tit03:before {
position: absolute;
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/arrow.png);
width: 16px;
height: 9px;
content: "";
left: 50%;
transform: translateX(-50%);
bottom: -8px;
}
.allin .tit03 span {
font-size: 30px;
}
.allin .tit04 {
font-size: 16px;
font-weight: bold;
color: #4e799d;
text-align: center;
margin-bottom: 25px;
}
.allin ul {
margin-left: 0px;
}
.allin ul li {
padding-left: 0px;
width: 100%;
float: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 30px;
}
.allin ul li .box {
background-color: #dce4eb;
padding: 25px 10px 10px;
position: relative;
text-align: center;
}
.allin ul li .box .num {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
background-color: #4e799d;
text-align: center;
font-size: 30px;
top: -25px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
font-weight: bold;
}
.allin ul li .box .tit {
font-size: 18px;
color: #4e799d;
font-weight: bold;
margin-bottom: 5px;
}
.allin ul li .box .txt {
font-size: 12px;
color: #4e799d;
margin-bottom: 5px;
}
.allin ul li .box .linebox .line {
background-color: #fff;
color: #4e799d;
padding: 5px 0;
}
.allin ul li .box .linebox .line + .line {
margin-top: 3px;
}
.allin ul li .box .txt01 {
font-size: 16px;
color: #ff088c;
font-weight: bold;
}
.allin ul li .box .img {
background-color: #fff;
}
.features {
padding-top: 30px;
}
.features .comtitle {
text-align: left;
margin-bottom: 50px;
}
.features .comtitle .left {
font-weight: bold;
margin-right: 0;
font-size: 18px;
}
.features .comtitle .left:before {
left: 0;
transform: translateX(0%);
}
.features .bg {
position: relative;
padding-left: 20px;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 20px;
margin-bottom: 40px;
}
.features .bg1 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg01.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg2 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg02.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg3 {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/features_bg03.png) no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.features .bg .num {
width: 50px;
height: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 50px;
background-color: #eef2f6;
color: #4e799d;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 0;
}
.features .bg .tit {
font-size: 25px;
font-weight: bold;
}
.features .bg .tit span {
font-size: 15px;
}
.features .bg .txt {
font-size: 16px;
font-weight: bold;
}
.features .bg .txt span {
font-size: 20px;
}
.features .bg .box {
background-color: #4e799d;
position: initial;
bottom: -30px;
right: auto;
left: 50%;
padding: 15px 20px 10px;
margin-top: 20px;
}
.features .bg .box .txt01 {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.features .bg .box .txt02 {
font-size: 16px;
margin-top: 5px;
text-align: center;
color: #fff;
}
.free {
background-color: #4e799d;
text-align: center;
padding: 50px 0 100px;
color: #fff;
}
.free .text01 {
font-size: 20px;
font-weight: bold;
line-height: 1.2;
}
.free .text01 span {
font-size: 30px;
font-weight: bold;
}
.free .img .add {
margin: 0 10px;
}
.free .text02 {
font-size: 16px;
font-weight: bold;
line-height: 1.2;
margin-top: 15px;
}
.free .text03 {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
margin-top: 10px;
}
.free .img {
margin: 10px 0;
}
.free .img img {
max-width: 40%;
}
.list {
text-align: center;
}
.list .comtitle {
padding: 0;
}
.list .left {
font-weight: bold;
margin-right: 0;
text-align: left;
font-size: 18px;
margin-bottom: 10px;
}
.list .left:before {
left: 0;
transform: translateX(0%);
}
.list .bottom {
margin-top: 20px;
font-size: 30px;
color: #4e799d;
text-align: center;
font-weight: bold;
}
.list .inner {
position: relative;
}
.list .today {
position: initial;
top: 0;
left: 0;
transform: translateY(0%);
width: 100%;
margin-left: 0;
margin-right: 0;
}
.listcontent {
background-color: #dce4eb;
padding: 30px 0 25px;
}
.listcontent ul.tabList {
padding: 0 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-left: -5px;
margin-bottom: -5px;
}
.listcontent ul.tabList li {
width: 50%;
padding-left: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 5px;
}
.listcontent ul.tabList li a {
display: block;
background-color: #4e799d;
color: #fff;
font-size: 10px;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 20px;
}
.listcontent ul.tabList li a:hover {
text-decoration: none;
background-color: #fff;
color: #4e799d;
}
.listcontent ul.tabList li a.on {
background-color: #fff;
color: #4e799d;
}
.listcontent .tabBox {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/listcontent_bg.png) no-repeat center;
-webkit-background-size: cover;
background-size: cover;
display: none;
margin-top: 10px;
padding: 50px 15px 30px;
}
.listcontent #tab01 {
display: block;
}
.listcontent .tabBox .title {
font-size: 20px;
font-weight: bold;
color: #4e799d;
text-align: center;
margin-bottom: 15px;
position: relative;
}
.listcontent .tabBox .title:before {
position: absolute;
content: "";
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #4e799d;
}
.listcontent .tabBox .tit {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.listcontent .tabBox .left {
width: 100%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
}
.listcontent .tabBox .box {
display: block;
}
.listcontent .tabBox .right {
width: 100%;
height: auto;
}
.listcontent .tabBox .right li {
padding-left: 30px;
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/listcontent_icon.png) no-repeat top 5px left;
font-size: 16px;
}
.listcontent .boxbg {
position: relative;
background-color: #ededed;
padding: 20px 10px 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.boxbg .tit01 {
position: initial;
top: 0;
left: 0%;
transform: translate(0);
}
.listcontent .boxbg ul {
margin-left: 0px;
}
.listcontent .boxbg ul li {
padding-left: 0px;
width: 100%;
float: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 10px;
}
.listcontent .boxbg ul li .box {
background-color: #fff;
}
.listcontent .boxbg ul li .box .img {
text-align: center;
padding: 10px 0 5px;
}
.listcontent .boxbg ul li .box .text {
font-size: 16px;
text-align: center;
color: #4e799d;
}
.listcontent .boxbg ul li .box .text02 {
font-size: 12px;
text-align: center;
color: #4e799d;
padding-bottom: 10px;
}
.listcontent .boxbg02 ul {
margin-left: 0px;
margin-top: 0px;
}
.listcontent .boxbg02 ul li {
padding-left: 0px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: none;
}
.listcontent .boxbg02 ul li .box {
background-color: #ededed;
padding: 10px;
}
.listcontent .boxbg02 ul li .box .boxbg02left {
width: 100%;
height: 50px;
background-color: #4e799d;
line-height: 50px;
color: #fff;
font-size: 14px;
text-align: center;
}
.listcontent .boxbg02 ul li .box .boxbg02right {
padding: 10px 0 10px 10px;
font-size: 16px;
color: #4e799d;
flex: 1;
}
.red {
color: #f34b1e;
}
.listcontent #tab02 .boxbg ul li {
width: 100%;
}
.listcontent #tab02 .boxbg ul li .box .text {
padding-bottom: 10px;
}
.listcontent .boxbg .note {
position: initial;
font-size: 14px;
bottom: 5px;
left: 50%;
transform: translateX(0%);
color: #4e799d;
margin-top: 10px;
}
.listcontent .boxbg .note span {
margin-left: 7px;
}
.listcontent #tab03 .boxbg ul li {
width: 100%;
}
.listcontent #tab03 .boxbg ul li .box .text {
padding-bottom: 10px;
}
.listcontent #tab04 .boxbg ul li {
width: 100%;
}
.listcontent #tab04 .boxbg ul li .box .text {
padding-bottom: 10px;
}
.listcontent #tab05 .boxbg ul li {
width: 100%;
}
.listcontent #tab05 .boxbg ul li .box .text {
padding-bottom: 10px;
}
.member {
padding-top: 50px;
}
.member .comtitle .left {
font-size: 18px;
}
.member .box {
margin-top: 50px;
}
.member .box .left {
width: 100%;
float: none;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
margin-bottom: 20px;
}
.member .box .right {
width: 100%;
float: none;
}
.member .box .right .tit01 {
font-size: 18px;
font-weight: bold;
}
.member .box .right .tit02 {
font-size: 16px;
font-weight: bold;
}
.member .box .right .tit02 span {
font-size: 20px;
}
.member .box .right .txt01 {
font-size: 14px;
font-weight: 400;
}
.member .title {
font-size: 22px;
font-weight: bold;
text-align: left;
margin-top: 30px;
margin-bottom: 10px;
}
.member .title span {
font-family: Arial;
font-size: 30px;
}
.member .txt02 {
font-size: 14px;
}
.member .btn {
margin-top: 5px;
}
.member .btn a {
border: 1px solid #e0e0e0;
background-color: #f8f8f8;
text-align: center;
padding: 10px 0;
display: block;
color: #000;
font-size: 16px;
}
.member .btn a img {
margin-right: 5px;
}
.company {
padding-top: 50px;
}
.company .comtitle .left {
font-size: 18px;
}
.company .box {
padding: 0px;
margin-bottom: 50px;
}
.company dl {
display: table;
width: 100%;
font-size: 14px;
}
.company dl dt {
display: table-cell;
width: 28%;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px 0 5px;
}
.company dl dd {
display: table-cell;
width: 72%;
padding-left: 10px;
}
.company dl dd .value {
border-bottom: 1px solid #000;
padding: 10px 0 5px;
}
.consultation {
background-color: #dce4eb;
padding-top: 10px;
padding-bottom: 40px;
}
.consultation .comtitle {
text-align: center;
margin-bottom: 10px;
}
.consultation .comtitle .left {
font-weight: bold;
margin-right: 0;
text-align: left;
}
.consultation .comtitle .left:before {
left: 0%;
transform: translateX(0%);
}
.consultation .box {
padding: 0px;
}
.consultation .box .bg { padding: 30px 20px;
}
.consultation .box .bg .name {
margin-bottom: 5px;
margin-top: 10px;
}
.consultation .box .bg .name .icon {
width: 40px;
height: 26px;
line-height: 26px;
text-align: center;
color: #fff;
background-color: #f4511e;
border-radius: 4px;
margin-right: 5px;
font-size: 13px;
}
.consultation .box .bg .name .icon02 {
background-color: #4e799d;
}
.consultation .box .bg .name .text {
font-size: 16px;
}
.consultation .box .bg .value input {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 5px;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.consultation .box .bg .textarea textarea {
height: 150px;
width: 100%;
resize: none;
background-color: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 5px;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.consultation .box .bg .btn {
padding-top: 20px;
}
.consultation .box .bg .btn a {
width: 300px;
height: 50px;
line-height: 50px;
background-color: #4e799d;
font-size: 16px;
text-align: center;
color: #fff;
display: block;
margin: 0 auto;
border-radius: 40px;
}
#footer .nav ul li a {
padding: 30px 0;
}
#footer .logo {
text-align: center;
padding: 10px 0 10px;
}
#footer .copyright {
text-align: center;
font-size: 12px;
padding-bottom: 10px;
}
}
.spbtn {
display: none;
}
@media screen and (max-width: 813px) {
.spbtn {
display: none;
background-color: #333333;
padding: 5px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.spbtn .btn {
text-align: center;
}
.spbtn .btn a {
color: #fff;
display: inline-block;
padding: 0px 30px;
background-color: #ff088c;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ff088c;
line-height: 50px;
}
.spbtn .btn a span {
margin-left: 5px;
padding-top: 0px;
}
#footer {
margin-bottom: 62px;
}
}
.planePath {
stroke: none;
stroke-width: 0.1%;
stroke-width: 0.5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
} .btn {
font-size: 16px;
transition: all 0.2s;
}
.btn a {
color: #fff;
}
.pink_btn,
#header .headerIn #headerlink .btn.pink_btn {
background-color: #ff088c;
}
.pink_btn:hover,
#header .headerIn #headerlink:hover .btn.pink_btn {
background-color: #4e799d;
}
.blue_btn {
background-color: #4e799d;
border-color: #4e799d;
color: #fff;
}
.blue_btn:hover,
#header .headerIn #headerlink:hover .btn.blue_btn {
background-color: #ff088c;
}
.today .btn.blue_btn a,
.today02 .btn.blue_btn a {
background-color: #4e799d;
border-color: #4e799d;
}
.today .btn.blue_btn a:hover,
.today02 .btn.blue_btn a:hover {
background-color: #fff;
color: #4e799d;
}
.radius_btn {
border-radius: 5px;
}
.today .blue_btn,
.today02 .blue_btn { }
.today .btn,
.today02 .btn {
padding: 20px 7px;
width: 300px;
margin: auto;
color: #fff;
display: block;
}
.member .btn {
padding: 20px 7px;
width: 300px;
margin: auto;
color: #fff;
}
.round_btn {
border-radius: 50px;
}
.shadow_btn {
box-shadow: 0 2px 0 0 #d8dce6;
position: relative;
}
.today .shadow_btn,
.today02 .shadow_btn {
box-shadow: 0 2px 0 0 #707070;
}
.shadow_btn:hover {
box-shadow: none;
top: 4px;
}
.online_wrap {  }
#mainimg .online_wrap {
margin: 30px 0 0;
}
.today .online_wrap,
.today02 .online_wrap,
.member .online_wrap {
margin: 30px auto;
}
.online_copy {
text-align: center;
margin: 0 0 5px;
font-size: 12px;
width: 300px;
}
.today .online_copy,
.today02 .online_copy,
.member .online_copy {
margin: 0 auto 5px;
}
.btn:hover {
text-decoration: none;
}
#mainimg .btn {
width: 300px;
margin: 0 0 30px;
padding: 20px 7px;
color: #fff;
}
#mainimg .btn a {
padding: 15px 5px;
}
.c-arrow {
margin: 0 0 80px;
overflow: hidden;
}
.c-arrow .inner {
-webkit-animation: anim_line 2s infinite;
animation: anim_line 2s infinite;
position: relative;
overflow: hidden;
height: 70px;
}
.c-arrow .inner:before {
content: "";
display: block;
width: 2px;
height: 70px;
background: #000;
position: absolute;
left: 50%;
bottom: 0;
}
.c-arrow .inner:after {
content: "";
display: block;
width: 2px;
height: 30px;
background: #000;
position: absolute;
left: 50%;
bottom: 0;
transform: rotate(30deg);
margin-left: 7px;
margin-bottom: -3px;
}
.c-arrow p {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
right: auto;
font-size: 20px;
}
@-webkit-keyframes anim_line {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
@keyframes ticker { 0% {
transform: translateX(0);
visibility: visible;
}
100% {
transform: translateX(-100%);
}
}
.ticker-wrap { bottom: 0;
width: 100%;
overflow: hidden;
height: 100px;
box-sizing: content-box;
display: flex;
}
.ticker-wrap .ticker { display: inline-block;
height: 100%;
line-height: 100%;
white-space: nowrap; box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 30s;
margin: 0;
}
.ticker-wrap .ticker__item { display: inline-block;
padding: 0 2rem;
font-size: 1rem;
color: white;
width: 200px;
float: none;
height: auto;
margin: 0;
border: 0;
}
.casecard {
margin: 40px auto 40px;
overflow: hidden;
}
.casecard-item {
margin: 0 10px;
padding: 20px;
border: 1px solid #ccc;
}
.casecard-title {
font-weight: bold;
font-size: 1.8rem;
margin: 20px auto;
}
.casecard-line {
border-bottom: 2px solid #ccc;
margin: 20px auto;
}
.casecard-corp-wrap {
display: flex;
}
.casecard-industry {
background: #617fa1;
color: #fff;
display: inline-block;
padding: 5px;
margin: 0 auto 10px;
font-size: 12px;
white-space: nowrap;
}
.casecard-corpname {
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
.casecard-logo {
}
.casecard .slick-prev,
.casecard .slick-next {
width: 35px;
height: auto;
aspect-ratio: 55 / 143;
}
.casecard .slick-prev:before,
.casecard .slick-next:before {
background: url(//goofy-inc.com/wp-content/themes/GOOFY/img/lp/slick_arrow.svg) no-repeat;
display: block;
content: "";
height: 100%;
background-size: cover;
}
.casecard .slick-prev {
left: -75px;
transform: translate(0, -50%) rotateY(180deg);
}
.casecard .slick-next {
right: -75px;
}
.casecard .btn {
width: 300px;
margin: 60px auto 30px;
}
.casecard .btn a {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
padding: 20px 0;
line-height: 1;
}
.casecard .btn img {
width: 30px;
margin: 0 0 0 20px;
}
.feature {
position: relative;
padding: 60px 0;
}
.feature1,
.feature3 {
background-color: #e9ecef;
}
.feature-num {
color: #fff;
background-color: #617fa1;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 24px;
padding: 8px 20px;
border-radius: 10px;
line-height: 1;
white-space: nowrap;
}
.feature-contents {
display: flex;
align-items: center;
justify-content: center;
gap: 0 20px;
}
.feature2 .feature-contents {
flex-direction: row-reverse;
}
.feature-img {
width: 30%;
}
.feature-text { font-size: 36px;
letter-spacing: 3px;
font-weight: 600;
}
.feature-strong {
color: #617fa1;
font-weight: 900;
font-size: 50px;
}
.form-group {
margin: 0 auto 2rem;
font-size: 16px;
box-sizing: border-box;
}
span.wpcf7-list-item {
margin: 0;
}
span.wpcf7-list-item label {
cursor: pointer;
}
.wpcf7-list-item-label {
white-space: nowrap;
margin: 0 0 0 0.6em;
}
.tag {
display: inline-block;
padding: 0.45em 0.6em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline; margin-left: 0.5rem;
}
.tag-danger {
background-color: #d9534f;
}
.tag-default {
background-color: #78909c;
}
.form-group label {
display: flex;
align-items: center;
margin: 0 auto 0.5rem;
cursor: auto;
}
input,
textarea {
width: 100%;
padding: 13px 8px;
font-size: 16px;
border: 0;
border-radius: 5px;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
}
.wpcf7-submit {
font-size: 18px;
color: #fff;
background-color: #4e799d;
border: 1px solid #4e799d;
transition: all 0.2s;
cursor: pointer;
border-radius: 40px;
max-width: 360px;
font-size: 24px;
padding: 17px 15px;
margin: auto;
display: block;
}
.wpcf7-submit:hover {
background-color: #fff;
color: #4e799d;
}
.wpcf7-submit:disabled {
background-color: #ccc;
border-color: #ccc;
}
.wpcf7-submit:disabled:hover {
color: #fff;
}
#consultation .pink_btn {
margin: 100px auto;
width: 300px;
}
#consultation .pink_btn a {
padding: 20px 10px;
display: block;
text-align: center;
font-size: 20px;
}
@media screen and (max-width: 767px) {
#header .headerIn #headerlogo {
display: none;
}
#header .headerIn #headerlink .btn a { }
#mainimg .btn {
margin: 0px auto 30px;
}
.online_copy {
margin-left: auto;
margin-right: auto;
}
.spbtn .online_copy {
color: #fff;
}
.feature .feature-contents {
flex-direction: column;
gap: 20px 0;
}
.feature-num {
font-size: 18px;
}
.feature-img {
width: auto;
}
.feature-text {
font-size: 18px;
}
.feature-strong {
font-size: 24px;
}
#consultation .pink_btn {
margin: 50px auto;
}
#consultation .pink_btn a {
font-size: 16px;
}
} .scrolldown2 { position: relative;
bottom: 10px;
left: 50%;
height: 50px;
display: inline-block;
}
@media screen and (max-width: 813px) {
.scrolldown2 {
position: relative;
display: inline-block;
height: 70px;
margin: 20px auto;
}
} .scrolldown2 span { position: absolute;
left: 10px;
bottom: 10px; color: #222;
font-size: 0.7rem;
letter-spacing: 0.05em; -ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
} .scrolldown2:before {
content: ""; position: absolute;
bottom: 0;
left: -4px; width: 10px;
height: 10px;
border-radius: 50%;
background: #222; animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
} @keyframes circlemove {
0% {
bottom: 45px;
}
100% {
bottom: -5px;
}
} @keyframes cirlemovehide {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
80% {
opacity: 0.9;
}
100% {
opacity: 0;
}
} .scrolldown2:after {
content: ""; position: absolute;
bottom: 0;
left: 0; width: 2px;
height: 50px;
background: #222;
}