@charset "UTF-8";
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
.mb40 {
margin-bottom: 40px;
}
.mb60 {
margin-bottom: 60px;
}
/*=================================================================*/
/* Autoジョブ名人 with スーパーカクテル
/*=================================================================*/
/* jsLowdirTopMenu
---------------------------------------------------------------*/
@media screen and (max-width: 768px) {
img {
max-width: 100%;
}
#mainContents img {
width: auto !important;
}
.jsLowdirTopMenu a.xc_gate_logo {
width: 60%;
display: flex;
}
.jsLowdirTopMenu a.xc_gate_logo img {
max-height: 30px;
}
.jsLowdirTopMenu .btn li.trial {
display: none;
}
.jsLowdirTopMenu .btn li.contact a {
background: #3ea4e6 url(/system/cocktail/common/images/core/hanbai/icon_contact.svg) no-repeat right 10px center !important;
}
}
@media screen and (min-width: 769px) {
.jsLowdirTopMenu {
/*border-top: solid 1px #d6d7d9;*/
border-bottom: solid 3px #ebe9e5;
padding: 14px 0 11px;
}
.jsLowdirTopMenu .inner {
width: 980px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
align-items: center;
min-height: 45px;
}
.jsLowdirTopMenu .inner a.xc_gate_logo {
display: block;
min-height: 45px;
}
a.with_logo {
margin-right: 20px;
}
.jsLowdirTopMenu .coreMenuRight {
width: 192px;
}
.jsLowdirTopMenu .btn {
margin: 0 0 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.jsLowdirTopMenu .btn li.contact, .jsLowdirTopMenu .btn li.trial {
margin: 0 0 0 12px;
}
.jsLowdirTopMenu .btn li.download a, .jsLowdirTopMenu .btn li.contact a, .jsLowdirTopMenu .btn li.trial a {
border-radius: 4px;
display: block;
padding: 6px 21px 5px 11px;
color: #FFF;
font-weight: bold;
font-size: 14px;
}
.jsLowdirTopMenu .btn li.download a {
width: 96px;
background: #231815 url(../../../images/products/xc-gate-ent/icon_download.svg) no-repeat right 10px center;
}
.jsLowdirTopMenu .btn li.contact a {
width: 100px;
background: #3ea4e6 url(../../../images/products/xc-gate-ent/icon_contact.svg) no-repeat right 10px center;
}
.jsLowdirTopMenu .btn li.trial a {
width: 142px;
background: #E63D3D;
padding: 6px 11px 5px 11px;
text-align: center;
}
.jsLowdirTopMenu .btn li.download a:hover, .jsLowdirTopMenu .btn li.contact a:hover, .jsLowdirTopMenu .btn li.contact a:hover, .jsLowdirTopMenu .btn li.trial a:hover {
text-decoration: none;
opacity: 0.8;
}
}
/*stayTop*/
.jsLowdirTopMenu.stayTop {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 2;
}
.menuitem.menuHide {
display: none !important;
}
/* whiteWrap / grayWrap
---------------------------------------------------------------*/
.whiteWrap {
background-color: #FFF;
padding: 80px 0 80px;
}
.whiteWrap.pb40 {
background-color: #FFF;
padding: 80px 0 40px;
}
.grayWrap {
background-color: #f5f5f5;
padding: 80px 0 80px;
}
.whiteWrap .inner, .grayWrap .inner {
margin: 0 auto;
}
/* midashi
---------------------------------------------------------------*/
.midashi01, .midashi02 {
position: relative;
padding: 0 0 30px;
margin: 0 0 40px;
text-align: center;
}
.midashi01 {
font-size: 26px;
}
.midashi02 {
font-size: 30px;
}
.midashi01::after, .midashi02::after {
position: absolute;
content: "";
width: 220px;
height: 1px;
background-color: #3ea4e6;
left: 50%;
bottom: 0px;
margin: 0 0 0 -110px;
}
.midashi01 .red, .midashi02 .red {
color: #3ea4e6;
}
p.ttlTxt {
margin-bottom: 40px;
text-align: center;
line-height: 1.8em;
font-size: 18px;
width: 950px;
margin: 0 auto 40px;
}
.ttlTxt span.red {
color: #3ea4e6;
}
/* catalogDl
---------------------------------------------------------------*/
.catalogDl {
text-align: center;
}
.catalogDl a {
display: block;
}
.catalogDl a:hover {
opacity: 0.8;
}
/* space
---------------------------------------------------------------*/
.mb0 {
margin-bottom: 0 !important;
}
.pb0 {
padding-bottom: 0 !important;
}
/*=================================================================*/
/* Autoジョブ名人 with スーパーカクテル
/*=================================================================*/
/* autojobTtl
---------------------------------------------------------------*/
.autojobTtl {
background: url(../../../images/products/autojob/main.jpg) no-repeat center center;
background-size: cover;
border-bottom: solid 1px #f1f1f1;
}
.autojobTtl h1 {
width: 940px;
margin: 0 auto;
color: #FFF;
font-size: 28px;
font-weight: normal;
padding: 70px 0;
line-height: 1.8em;
}
.autojobTtl h1 span {
display: inline-block;
font-size: 20px;
border: solid 1px #FFF;
padding: 1% 0.9% 0.9% 0.9%;
margin: 0 0 2%;
line-height: 1em;
font-weight: bold;
}
/* checkList
---------------------------------------------------------------*/
.checkList {
width: 720px;
margin: 50px auto 0;
border-top: 1px solid #c5c6ca;
text-align: left;
}
.checkList li {
padding: 17px 0 15px 60px;
border-bottom: 1px solid #c5c6ca;
font-size: 118%;
position: relative;
}
.checkList li::before {
content: url(../../../images/products/autojob/icon_list.svg);
display: inline-block;
margin-right: 15px;
vertical-align: middle;
position: absolute;
left: 20px;
}
.checkList li span {
background: linear-gradient(transparent 65%, #f1ecad 0%);
font-weight: bold;
display: inline-block;
line-height: 1.3em;
}
/* タイトル
---------------------------------------------------------------*/
h2.autojobH2Ttl {
text-align: center;
padding: 8px 5px;
background-color: #3ea4e6;
position: relative;
margin-bottom: 40px;
border: solid 2px #e8e8e8;
color: #FFF;
}
h2.autojobH2Ttl02 {
text-align: center;
padding: 8px 5px;
background-color: #FFF;
position: relative;
margin-bottom: 40px;
border: solid 1px #ececec;
}
h3.ajH3Ttl {
border-bottom: dotted 2px #e2e2e2;
padding: 5px 10px 12px 5px;
margin-bottom: 40px;
font-size: 24px;
}
.whiteWrap {
counter-reset: num;
}
.whiteWrap h3.xcH3Ttl::before {
counter-increment: num;
padding: 0 20px;
content: counter(num);
background-color: #3ea4e6;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
color: #FFF;
display: -webkit-flex;
display: flex;
align-items: center;
text-align: center;
}
/* kinouContents
---------------------------------------------------------------*/
.kinouContents {
width: 950px;
}
.contBox {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 40px;
}
.contBox .box2, .contBox .box3 {
margin-bottom: 20px;
}
.contBox .box2 {
width: 460px;
}
.contBox .box3 {
width: 300px;
}
.imgWrap {
text-align: center;
padding: 20px 0;
}
.contBox dl dt {
border-left: solid 4px #3ea4e6;
padding: 10px 14px 10px 19px;
margin-bottom: 20px;
background-color: #FFF;
font-weight: bold;
}
.contBox dl dd ol {
counter-reset: num;
}
.contBox dl dd ol li {
padding: 0 0 0 23px;
margin: 0 0 10px;
position: relative;
}
.contBox dl dd ol li::after {
position: absolute;
counter-increment: num;
content: counter(num) ".";
left: 0;
top: 0;
}
.whiteWrap .contBox dl dt {
background-color: #f7f7f7;
}
/* .mainFunc
---------------------------------------------------------------*/
.mainFunc {
width: 710px;
margin: 0 auto 80px;
text-align: center;
}
.mainFunc h3 {
margin: 0 0 20px;
}
.mainFunc ul {
background-color: #FFF;
padding: 20px 20px 15px;
border: solid 1px #e8e8e8;
}
.mainFunc ul li {
display: inline-block;
margin: 0 10px 5px;
}
.txtCenter {
text-align: center;
}
p.strongTxt {
font-size: 20px;
margin-bottom: 20px;
color: #000000;
background: linear-gradient(transparent 58%, #d2eeff 0%);
display: inline-block;
line-height: 1.2em;
font-weight: bold;
}
/* autojobRows
---------------------------------------------------------------*/
ul.autojobRows {
margin-top: 44px;
width: calc(100% + 36px);
display: flex;
flex-wrap: wrap;
margin-left: -36px;
}
ul.autojobRows .col {
width: calc(50% - 36px);
margin-left: 36px;
display: flex;
}
ul.autojobRows .col .img {
margin-right: 12px;
}
ul.autojobRows .col .voice {
color: #3ea4e6;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.02em;
}
ul.autojobRows .col .cat {
margin-top: 11.5px;
line-height: 26px;
padding-left: 8px;
padding-right: 8px;
display: inline-block;
background-color: #3ea4e6;
color: #fff;
}
.fukidashi2 {
box-sizing: border-box;
position: relative;
padding: 22px 22px 22px 13px;
background: #f8fcff;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #3ea4e6 solid 2px;
margin-bottom: 35px;
}
.fukidashi2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 11px 21px 0;
border-color: #f7fbf3 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -11px;
left: calc(50% - 21px);
}
.fukidashi2:before {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 22px 0;
border-color: #3ea4e6 transparent;
display: block;
width: 0;
z-index: 0;
bottom: -14px;
left: calc(50% - 22px);
}
/* recommend_blk
---------------------------------------------------------------*/
.recommend {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 40px;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.recommend .col {
-webkit-flex: 0 0 220px;
flex: 0 0 220px;
margin-left: 29px;
margin-bottom: 30px;
}
.recommend .col img {
width: 100%;
height: auto;
}
.recommend .col:last-child {
margin-right: auto;
}
.recommend .col:nth-child(4n+1) {
margin-left: 0;
}
.recommend .col a {
position: relative;
display: block;
}
.recommend .col a:hover {
text-decoration: none;
opacity: .8;
}
.recommend .col .label {
position: absolute;
left: 0;
top: 0;
display: inline-block;
padding: 5px 10px;
min-width: 53px;
text-align: center;
line-height: 1.2;
letter-spacing: 1px;
background-color: #5a90cc;
font-size: 87%;
color: #fff;
}
.recommend .col .label.cat1 {
background-color: #D4C500;
}
.recommend .col .label.cat2 {
background-color: #5fb383;
}
.recommend .col .label.cat3 {
background-color: #5A91CC;
}
.recommend .col .body {
padding: 12px 0;
}
.recommend .col .body .title {
line-height: 1.5;
font-weight: bold;
}
.recommend .col .body .tag {
margin-top: 5px;
}
.recommend .col .body .tag span {
display: inline-block;
margin-top: 10px;
margin-right: 10px;
padding: 5px 16px 3px;
text-align: center;
line-height: 1.2;
background-color: #EEEBE9;
font-size: 87%;
}
h3.midashi {
text-align: center;
}
.subttl a {
margin-top: 10px;
color: #3D60E6;
text-decoration: underline;
}
.price-plan__text {
text-align: center;
}
.flex-col2 {
display: flex;
justify-content: center;
grid-column-gap: 130px;
}
.button-link.size_s {
font-size: 20px;
width: 100%;
padding: 25px 30px 20px 30px;
box-sizing: border-box;
margin: 20px auto 90px auto;
}
.button-link.red {
background: #E63D3D;
}
/* SP版*/
.mainFunc h3 {
border: none;
}
h3.ajH3Ttl {
border-left: none;
}
ul.autojobRows .col .img img{
max-width: inherit;
}
@media screen and (max-width: 768px) {
.checkList, .kinouContents, .contBox .box3, .mainFunc {
width: 100% !important;
}
p.ttlTxt {
width: 100% !important;
text-align: left !important;
}
.price-plan__text {
width: 60%;
font-size: 15px;
}
.button-link.size_s {
width: 90%;
}
p.strongTxt {
font-size: 18px;
}
.button-link {
width: 94% !important;
padding: 25px 20px !important;
box-sizing: border-box !important;
font-size: 20px !important;
line-height: 1.4 !important;
}
ul.autojobRows .col {
width: 100%;
}
.recommend .col {
-webkit-flex: inherit;
flex: inherit;
margin-left: 0;
margin: 0 5% 30px 5% !important;
box-sizing: border-box;
width: 90%;
max-width: 480px;
}
.recommend .col img {
width: 100% !important;
height: auto !important;
}
.autojobTtl {
background: url(../../../images/products/autojob/main02_sp.png) no-repeat center center;
background-size: cover;
padding: 8% 6%;
position: relative;
border: none;
}
.autojobTtl h1 {
color: #FFF;
font-size: 4.6vw;
font-weight: normal;
line-height: 1.8em;
padding: 0;
width: 100%;
}
.autojobTtl h1 span {
display: inline-block;
font-size: 3.6vw;
border: solid 1px #FFF;
padding: 5px;
margin: 0 0 5px;
line-height: 1em;
font-weight: bold;
}
.midashi02 {
font-size: 26px;
}
.topImg.sp{
text-align: center
}
}