@charset "UTF-8";



@font-face {
    font-family: Roboto;
    font-weight: 500;
    font-style: MediumItalic;
    src: url("../fonts/Roboto-MediumItalic.woff") format("woff");
}

@font-face {
    font-family: Roboto;
    font-weight: bold;
    font-style: bold;
    src: url("../fonts/Roboto-Bold.woff") format("woff");
}

@font-face {
    font-family: notosans;
    font-weight: 400;
    font-style: lighter;
    src: url("../fonts/NotoSansJP-Light.woff") format("woff");
}

@font-face {
    font-family: notosans;
    font-weight: 500;
    font-style: regular;
    src: url("../fonts/NotoSansJP-Regular.woff") format("woff");
}

@font-face {
    font-family: notosans;
    font-weight: bold;
    font-style: bold;
    src: url("../fonts/NotoSansJP-Bold.woff") format("woff");
}

@font-face {
    font-family: poppins;
    font-weight: 400;
    font-style: regular;
    src: url("../fonts/Poppins-Regular.woff") format("woff");
}

@font-face {
    font-family: poppins;
    font-weight: bold;
    font-style: regular;
    src: url("../fonts/Poppins-SemiBold.woff") format("woff");
}

.roboto {
    font-family: roboto;
}

body {
    font-family: notosans;
    -webkit-text-size-adjust: 100%;
}

.notosans {
    font-family: notosans;
}

.poppins {
    font-family: poppins;
}

.w100 {
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover{
    color: inherit;
    text-decoration: none;
}

.fw600 {
    font-weight: 600;
}

.pb30 {
    padding-bottom: 30px;
}


/* .colorSkill {
background-color: var(--color-skillOrange);
}

.colorJob {
background-color: var(--color-jobBlue);
} */

.colorSkillOrange {
    color: var(--color-skillOrange);
}

.colorIconRoboto {
    color: var(--color-jobBlue);
}

.header__nav__list__item.icon a {
    display: flex;
}

.header__nav__list__item.icon a img {
    margin-right: 5px;
}

.mypageWrap .contentWrap,
.mypage .contentWrap {
    max-width: 1150px;
}

.to-top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    right: 100px;
    bottom: 5%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}

.to-top i {
    font-size: 26px;
    margin-left: 1px;
}

.job .to-top i {
    color: var(--color-jobBlue);
}

.skill .to-top i {
    color: var(--color-skillOrange);
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.flexWrap {
    display: flex;
    justify-content: center;
}

.flexWrap.aic {
    align-items: center;
}

.flexWrap.jcsb {
    justify-content: space-between;
}

.flexWrap .col img {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
}

.flexWrap .col:first-child {
    margin-right: 40px;
}

.commonTitle {
    text-align: center;
    font-size: 26px;
    line-height: calc(36/26);
font-weight: 700;
}

.commonTitle.tal {
    text-align: left;
}

.myPageProfileDescWrap .commonTitle {
    text-align: left;
}

.commonTitleSub {
    font-size: 18px;
    line-height: calc(32/18);
    text-align: center;
    margin-bottom: 40px;
}

.commonTitle.colorJob {
    color: var(--color-jobBlue);
}

.commonText {
    font-size: 14px;
    line-height: calc(24/14);
    text-align: center;
}

.commonText.sm {
    font-size: 10px;
}

.commonText.lg {
    font-size: 19px;
    line-height: 1.7;
}

.commonText.tal {
    text-align: left;
}

.commonText.tar {
    text-align: right;
}

.commonBtnWrap {
    display: flex;
    justify-content: space-between;
}

.commonBtnWrap.btnMa {
    margin: 0 -10px;
    margin-bottom: 20px;
}

.commonBtnWrap.btnMa>* {
    margin: 0 10px;
}

.commonBtnWrap .btnBorderRadius {
    padding: 0 80px;
}

.commonBtnWrap .btnBorderRadius:first-child {
    margin-right: 10px;
}

.userBox {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.userBox .userImage {
    width: 50px;
    height: 50px;
}

.myPageTitle {
    font-size: 18px;
    line-height: calc(32/18);
    margin-bottom: 22px;
}

.commonInputText {
    width: 100%;
    height: 50px;
    border-radius: 3px;
    border: 1px solid var(--color-grey-dddddd);
    padding: 12px 20px;
}

.commonInputText.postal {
    width: 80px;
    margin: 0 10px 0 10px;
}

.commonInputText.smaller {
    width: 350px;
}

.commonInputText.smallest {
    width: 150px;
    margin-right: 30px;
}

.commonInputBetweenText {
    margin-right: 30px;
}

.commonInputSelect {
    font-size: 14px;
    height: 50px;
    padding: 0 20px;
    width: 100%;
    line-height: calc(24/14);
    border: 1px solid var(--color-grey-dddddd);
    /*     width: 20%; */
}

.commonInputSelect.auto {
    width: auto
}

.tox-tinymce {
    width: 100%;
    min-height: 500px;
}

.birthday .commonInputSelect {
    margin: 0 10px 0 10px;
}

.birthday .commonInputSelect.year {
    width: 100px;
}

.commonInputSelect.smaller {
    width: 350px;
}

.commonInputSelect.smallest {
    width: 100px;
}

.formUnit {
    margin-left: 10px;
}

.commonImgCaption {
    font-size: 12px;
    line-height: calc(22/12);
    color: var(--color-grey-777777);
    margin-top: 10px;
    display: block;
}

.commonLabel {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}

.jobThumb {
    margin-bottom: 50px;
}

.sideBarSortMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sideBarSortMenu .commonInputSelect {
    margin: 0;
}

.job .commonLabel {
    background-color: #3572b575;
    color: #424952;
    padding-left: 20px;
    font-weight: bold;
}

.skill .commonLabel {
    background-color: var(--color-skillOrange);
    color: #FFF;
    padding-left: 20px;
}

.job .commonLabel.withBar {
    color: var(--color-jobBlue);
    position: relative;
    background-color: unset;
    border-left: 5px solid var(--color-jobBlue);
}

.pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 -10px;
    list-style: none;
    max-width: 1200px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.pager>li {
    margin: 0 10px;
}

.pager>li>a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--color-grey-dddddd);
    color: var(--color-black);
    transition: .2s;
}

.pager>li>a.active,
.pager>li>a:hover {
    background-color: var(--color-grey-dddddd);
    color: #FFF;
    transition: .2s;
}

.pager>li>a.active {
    cursor: default;
}

.pager>li.pagerArrow>a {
    background-color: var(--color-black);
    width: 56px;
    color: #FFF;
}

.commonListRow {
    display: flex;
    padding: 20px;
    border: 1px solid var(--color-grey-dddddd);
    border-radius: 3px;
    margin-bottom: 30px;
}

.commonListRow.rightOnly .commonListDescRow {
    width: 100%;
}

.commonListRowLeft {
    margin-right: 38px;
    width: 100%;
    max-width: 185px;
}

.commonListRowRight {
    width: calc(100% - 223px);
}

.commonListRowRight.full {
    width: calc(100%);
}

.chatList .commonListRowLeft,
.chatDetail .commonListRowLeft {
    max-width: 40px;
}

.chatList .commonListRowLeft img,
.chatDetail .commonListRowLeft img {
    width: auto;
    height: auto;
}

.commonListRowLeft img {
    width: 185px;
    height: 105px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
    margin-top: 23px;
}

.commonListDescRow {
    display: flex;
    font-size: 14px;
    line-height: calc(28/14);
    margin-bottom: 10px;
    align-items: center;
}

.commonListRow.rightOnly .commonListRowRight {
    width: 100%;
}

.chatList .commonListRowRight {
    max-width: 180px;
    width: 100%;
}

.title {
    min-width: 120px;
}

.title.smaller {
    font-size: 12px;
}

.commonListDescRow .title {
    margin-right: 15px;
    max-width: 100px;
    width: 100%;
}

.commonListDescRow .desc {
    width: 100%;
}

.commonListDescRow .desc img {
    width: 130px;
    margin-right: 10px;
}

.focuse_job {
    border: 2px solid var(--color-jobBlue);
    border-radius: 3px;
}

.commonListDescRow .desc .midoku {
    display: inline-flex;
    padding: 2px 10px;
    font-size: 10px;
    color: #FFF;
    background-color: #EC5252;
    margin-left: 10px;
    border-radius: 15px;
}

.midokusc {
    position: relative;
    background-color: var(--color-skillOrange);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    color: #FFF;
    transform: translate(20px, 0);
    top: 0;
}

.chatList .commonListDescRow {
    max-width: 180px;
    margin-bottom: 0;
}

.commonListRowLeft img {
    margin-top: 0;
}

.chatList .commonListRow:last-child {
    border-bottom: 1px solid var(--color-grey-dddddd);
}

.commonListRowChatPreview {
    max-width: 400px;
    line-height: calc(21/14);
}

.commonChatContainer {
    flex-wrap: wrap;
}

.commonChatHeader {
    display: flex;
    border-bottom: 1px solid var(--color-grey-dddddd);
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

.commonChatHeader .commonListDescRow {
    align-items: center;
    height: 100%;
}

.commonChatContents {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px 70px;
}

.chatProfileImg img {
    max-width: 40px;
    margin-right: 38px;
    width: 100%;
}

.chatTextArea {
    border-radius: 12px;
    padding: 10px 30px;
    /* background-color: var(--color-grey-eeeeee); */
    color: var(--color-black);
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    margin-right: auto;
    line-height: calc(21/14);
    max-width: 95%;
}

.skill .chatTextArea {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.job .chatTextArea {
    background-color: var(--color-skillOrange);
    color: #FFF;
}

.chatTextArea.you {
    background-color: var(--color-skillOrange);
    color: #FFF;
    margin-right: 0;
    margin-left: auto;
}

.job .chatTextArea.you {
    background-color: var(--color-jobBlue);
}

.commonChatHeader .title {}

.chatTimeStamp {
    color: var(--color-grey);
    position: absolute;
    top: 100%;
    white-space: nowrap;
}

.you .chatTimeStamp {
    right: 5%;
}

.chatInputContainer {
    display: flex;
    flex-wrap: wrap;
}

.jobImg {
    margin-bottom: 85px;
}

.contentWrap.topArea {
    max-width: 800px;
    margin-bottom: 115px;
}

.job .topAreaTagContainer {
    color: var(--color-jobBlue);
}

.profileBox {
    display: flex;
}

.profileImg {
    max-width: 40px;
    width: 100%;
}

.profileImg img {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.profileDesc {
    display: flex;
    flex-direction: column;
}

.profileDesc .blueAtag i {
    margin-left: 16px;
}

.formTextArea {
    width: 100%;
    height: 300px;
    overflow-x: hidden;
    margin-bottom: 15px;
    padding: 15px;
    font-family: notosans;
    border: 1px solid var(--color-grey-dddddd);
    resize: none;
}

.chatInputContainer .formTextArea {
    width: 80%;
}

.chatInputContainer .btnSquare {
    width: 20%;
    /* height: 220px; */
    /* margin-left: 10px; */
    margin-left: auto;
}

.formSupplement {
    margin-top: 10px;
}

.formChkTxt {
    font-size: 12px;
    line-height: calc(32\12);
    margin-right: 40px;
}

.bgGreyTextWrap {
    background-color: var(--color-grey-f5f5f5);
    padding: 25px 30px;
    display: flex;
    margin-bottom: 30px;
}

.createAccountTopBorder {
    width: 100%;
    display: flex;
    height: 10px;
    margin-bottom: 130px;
}

.createAccountTopBorder div:first-child {
    width: 50%;
    background-color: var(--color-skillOrange);
}

.createAccountTopBorder div:last-child {
    width: 50%;
    background-color: var(--color-jobBlue);
}

.job .createAccountTopBorder div:first-child {
    background-color: var(--color-jobBlue);
}

.createAccountTitle {
    margin: 0 0 70px 0;
}

.createAccountTitle .col {
    margin: 0;
    flex-basis: 50%;
}

.createAccountTitle .col .bgSkill {
    background-color: var(--color-skillOrange);
}

.createAccountTitle .col .bgJob {
    background-color: var(--color-jobBlue);
}

.createAccountTitle .col div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
    height: 100px;
    margin: 0;
    flex-basis: 50%;
}

.createAccountTitle .col span {
    font-size: 27px;
    font-weight: bold;
    line-height: calc(35/27);
}

.createAccountTitle .col p {
    font-size: 10px;
    line-height: 1.3;
}

.createAccountCol2Wrap {
    margin-bottom: 120px;
}

.createAccountCol2Wrap .col img {
    margin-right: auto;
    margin-left: auto;
}

.createAccountColTitle {
    font-size: 20px;
    text-align: center;
    line-height: calc(32/20);
    margin-bottom: 30px;
font-weight: 700;
}

.colorSkill .createAccountColTitle {
    color: var(--color-skillOrange);
}

.colorJob .createAccountColTitle {
    color: var(--color-jobBlue);
}


/* .createAccountCol2Wrap .col p {
text-align: center;
font-size: 14px;
line-height: calc(22/14);
} */

.createAccountCol2Wrap .col2Wrap {
    margin-bottom: 30px;
}

.col2Border.col {
    padding-right: 50px;
    padding-left: 50px;
    flex-basis: 50%;
    margin: 0;
}

.createAccountCol2Wrap .col2Border.col:first-child {
    border-right: 1px solid var(--color-grey-dddddd);
}

.borderContainer {
    display: flex;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 60px;
}

.borderContainer.bgGreyNoShadow {
    background-color: var(--color-grey-f5f5f5);
}

.borderContainerTitle {
    font-size: 18px;
    line-height: calc(32/18);
}

.borderContainerText {
    font-size: 14px;
    line-height: calc(24/14);
    width: 100%;
}

.borderContainer .iconRoboto {
    width: 50px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-bottom: 0;
    margin-right: 10px;
}

.borderForm {
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    padding: 0px;
}

.borderForm.withSideBarContainer {
    padding: 60px 10px;
    background-color: #FFF;
}

.borderForm .withSideBarLeft {
    max-width: 355px;
    width: 100%;
    padding-left: 50px;
    padding-right: 85px;
    border-right: none;
}

.mypageWrap .borderForm .withSideBarLeft {
    padding-right: 0;
    padding-left: 0;
    margin-right: 60px;
    max-width: 190px;
}

.mypageWrap .borderForm .withSideBarRight {
    max-width: calc(100% - 250px);
    padding-left: 0px;
    padding-right: 0px;
}

.mypageWrap .withSideBarContainer.borderForm {
    padding-left: 70px;
    padding-right: 70px;
}

.borderForm .withSideBarRight {
    padding-left: 0px;
    padding-right: 50px;
    max-width: calc(100% - 355px);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.borderForm .withSideBarRight.full {
    padding-left: 50px;
    padding-right: 50px;
    max-width: calc(100%);
}

.aaa {
    display: flex;
    align-items: center;
    justify-content: center;
}

.formSubText {
    font-size: 12px;
    line-height: calc(32/12);
}

.flexSpaceBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flexSpaceBetween .sbLeft {
    display: flex;
    align-items: center;
}

.flexSpaceBetween .sbLeft.fdcol {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.mainVisual img {
    margin-right: auto;
    margin-left: auto;
}

.imgContainerWithSlider {
    margin-bottom: 30px;
}

.imgContainerSliderCol {
    margin-right: 5px;
    margin-left: 5px;
}

.job .flexSpaceBetween {
    border-bottom: 1px solid var(--color-grey-dddddd);
}

.job .flexSpaceBetween.noBorder {
    border-bottom: none;
}

.flexSpaceBetween .sbRight {
    display: flex;
}

.flexSpaceBetween .iconRoboto.withImg {
    margin-bottom: 0;
    margin-right: 12px;
}

.commonInfo .flexSpaceBetween {
    margin-bottom: 17px;
}

.commonInfo .commonCardTagWrap {
    margin-bottom: 50px;
    height: auto;
}

.commonInfo.commonDesc {
    font-size: 14px;
    line-height: calr(21/14);
    margin-bottom: 10px;
}

.flexStart.commonCardsStarWrap {
    justify-content: flex-start;
}

.blueAtag.iconRight i {
    margin-left: 10px;
}

.commonInfo .starNum {
    margin-left: 17px;
}

.commonInfo .voteNum {
    margin-left: 5px;
}

.commonInfo .courseTeacher {
    font-size: 14px;
    line-height: calc(20/14);
    margin-bottom: 15px;
}

.reviewRow {
    display: flex;
    padding-top: 20px;
    border-bottom: 1px solid var(--color-grey-dddddd);
}

.reviewLeft {
    max-width: 76px;
    width: 100%;
}

.reviewRight {
    width: calc(100%-76px);
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.reviewRight .blueAtag {
    margin-bottom: 10px;
}

.profileImg {
    width: 56px;
    height: 56px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
    margin-right: 5px;
}

.reviewText {
    font-size: 12px;
    line-height: calc(16/12);
}

.btnFav {
    border: 1px solid var(--color-grey);
    border-radius: 15px;
    height: 30px;
    width: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}

.btnFav:hover {
    background-color: #ffbea8;
}

.active.btnFav i {
    color: #FF7244;
}

.btnFav i {
    margin-left: 10px;
}

.btnOtherReivews {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border: 1px solid var(--color-grey);
    margin-bottom: 60px;
}

.btnOtherReivews i {
    margin-left: 27px;
}

.btnSearch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 60px;
    font-size: 20px;
    line-height: calc(32/20);
    border-radius: 3px;
}

.btnSearch i {
    margin-right: 10px;
}

.topAreaSearchContainer {
    display: flex;
    margin-bottom: 15px;
}

.job .btnSearch {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.bgOrange {
    background-color: var(--color-skillOrange);
}

.bgLightOrange {
    background-color: var(--color-skillLightOrange2);
    padding-top: 100px;
    padding-bottom: 90px;
}

.job .bgLightOrange {
    background-color: #f3f9ff;
}

.bgJob {
    background-color: var(--color-jobBlue);
}

.bgRequired {
    background-color: var(--color-red-required);
}

.bgGrey {
    background-color: var(--color-grey-eeeeee);
}

.bgGrey.btnBorderRadius {
    color: #000;
}

.bgTwitter {
    background-color: var(--color-twitter);
}

.bgFacebook {
    background-color: var(--color-facebook) !important;
}

.bgForRelative {
    background-color: var(--color-grey-f5f5f5) !important;
    height: 450px;
}

.bgForAbsolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    z-index: 1;
    background-color: #FFF;
}

.mypageWrap {
    position: relative;
    padding-top: 40px;
}

.mypageWrap:before {
    content: '';
    display: block;
    width: 100%;
    height: 300px;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--color-skillOrange);
}

.mypageWrap_job:before {
    background-color: var(--color-jobBlue);
}

.job .topSearchContainer {
    margin-bottom: 100px;
}

.topSearchContainer.contentWrap {
    padding-left: 0;
    padding-right: 0;
    max-width: 772px;
    /*     height: 80px; */
}

.heightAuto .topSearchContainer.contentWrap {
    height: auto;
}

.job .heightAuto .topSearchContainer {
    margin-bottom: 0;
}

.skill .topSearchContainer.contentWrap {
    /*     overflow: hidden; */
}

.topSearchContainer.extend {
    height: auto;
}

.topSearchContainer {
    padding-top: 28px
}

.modalBox .topSearchContainer {
    padding-top: 0px;
}

.pophash.popularTagWrap.col {
    font-size: 10px;
    line-height: calc(32/12);
    height: 14px;
    margin-bottom: 5px;
}

.withSideBarRight .popluarTagContainer.withHeart .popularTagWrap.col,
.popularTagWrap.col.pophash {
    height: 35px;
    padding-right: 0;
    min-width: unset;
    margin-bottom: 25px;
}

.pophash .commonCardBookmark {
    position: initial;
    margin-left: 10px;
    min-width: 30px;
    background-color: var(--color-grey-f5f5f5);
}

.popluarTagContainer.withHeart {
    padding-right: 20px;
}

.popluarTagContainer.withHeart a {
    display: flex;
    width: 100%;
}

.popluarTagContainer.withHeart .commonCardBookmark {
    position: initial;
    margin-left: 10px;
    min-width: 30px;
}

.popluarTagContainer.withHeart .fa-heart {
    /*     color: #FFF; */
}

.topSearchContainer .popluarTagContainer,
.topSearchContainer .topSearchBox {
    color: #FFF;
    position: relative;
}

.skill .topSearchContainer .popluarTagContainer {
    padding-right: 60px;
}

.job .topSearchContainer .popluarTagContainer,
.job .topSearchContainer .topSearchBox {
    color: var(--color-jobBlue)
}

.skill.topSearchContainer .popluarTagContainer,
.skill.topSearchContainer .topSearchBox {
    color: var(--color-skillOrange)
}

.topSearchContainer .popularTagWrap.col {
    background: none;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
}

.job .topSearchContainer .popularTagWrap.col {
    color: var(--color-jobBlue);
    border-color: var(--color-jobBlue);
}

.job .topSearchContainer .hashtag_lob:checked+.popularTagWrap.col {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.skill.topSearchContainer .popularTagWrap.col {
    color: var(--color-skillOrange);
    border-color: var(--color-skillOrange);
}

.skill .modalBox .popularTagWrap.col {
    color: var(--color-skillOrange);
    border-color: var(--color-skillOrange);
}

.skill .modalBox .hashtag_lob:checked+.popularTagWrap.col {
    background-color: var(--color-skillOrange);
    color: #FFF;
}

.topSearchBox {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.topSearchBoxInput {
    max-width: 900px;
    width: 100%;
    position: relative;
}

.btnSearchTop {
    background-color: var(--color-skillOrange);
    color: #FFF;
    position: absolute;
    right: 1%;
    top: 20%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.job .btnSearchTop {
    background-color: var(--color-jobBlue);
}

.tooltip {
    /*ツールチップの対象要素*/
    position: relative;
    display: inline-block;
    opacity: 1;
}

.tooltip .tooltiptext {
    /*ツールチップ本体*/
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    font-size: 12px;
    z-index: 1;
    right: -70px;
    bottom: -30px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    /*吹き出しのアロー部分*/
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip .tooltiptext {
    /*表示させる際のアニメーションエフェクト。透明にしておく*/
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    /*マウスホバーでアニメーションしながら表示*/
    opacity: 1;
}

.topSearchBoxDetail {
    margin-left: auto;
    display: flex;
    cursor: pointer;
}

.topSearchBoxDetail span {
    margin-right: 10px;
}


/* .contentWrap.bgForAbsolute .borderForm {
box-shadow: none
} */

.btnBorderRadius {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #FFF;
    margin-bottom: 20px;
    width: 33%;
    text-decoration: none;
    margin-left: 390px;
}

.btnBorderRadius:hover {
    text-decoration: none;
    color: #FFF;
}

.btnBorderRadius2 {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #FFF;
    margin-bottom: 20px;
    width: 50%;
    text-decoration: none;
    margin-right: 20px;
    font-weight: 600;
    font-size: 1.2em;
}

.btnBorderRadius2:hover {
    text-decoration: none;
    color: #FFF;
}

.job .btnBorderRadius {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.skill .btnBorderRadius {
    background-color: var(--color-skillOrange);
}

.skill .btnBorderRadius.bgGrey {
    background-color: #929292;
    color: #FFF;
}

.job .btnBorderRadius.sm,
.skill .btnBorderRadius.sm {
    background-color: #fff
}

.job .btnBorderRadius.bgWhite,
.skill .btnBorderRadius.bgWhite {
    background-color: #FFF;
    color: var(--color-black);
}

.skill .btnBorderRadius.bgWhite.active {
    background-color: var(--color-skillOrange);
    color: #FFF;
}

.btnBorderRadius.green {
    color: #FFF;
    background-color: #01B8BF;
}

.btnBorderRadius.sm {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-grey-dddddd);
    color: var(--color-black);
    height: 25px;
    width: 55px;
    margin-right: auto;
    margin-left: auto;
}

.btnBorderRadius.md {
    width: 250px;
}

.mlauto {
    margin-left: auto;
}

.btnBorderRadius.message {
    background-color: #fff;
    width: 125px;
    height: 20px;
    font-size: 12px;
}

.borderWrap {
    border-top: 1px solid var(--color-grey);
    border-bottom: 1px solid var(--color-grey);
    padding-top: 20px;
    padding-bottom: 20px;
}

.btnMedium {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #FFF;
    margin-bottom: 10px;
    width: 100%;
    background-color: var(--color-red-required);
}

.btnMedium.wid320 {
    width: 320px;
}

.btnMedium.smaller {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 150px;
}

.jobDetailBtnLayout {
    display: flex;
    flex-wrap: wrap;
}

.jobDetailBtnLayout .btnMedium.bgRequired {
    max-width: 450px;
    margin-right: 10px;
}

.jobDetailBtnLayout .btnMedium.jobSkillBorder {
    max-width: 190px;
    width: 100%;
}

.btnMedium.jobSkillBorder.fafa:before {
    content: "お気に入りに追加する";
}

.btnMedium.jobSkillBorder.fafa.active {
    background-color: var(--color-red-required);
    color: #FFF;
}

.btnMedium.jobSkillBorder.fafa.active:before {
    content: "お気に入り済み";
}

.btnMedium.jobSkillBorder {
    position: relative;
}

.btnMedium {
    cursor: pointer;
}

.btnMedium.jobSkillBorder i {
    /* margin-left: auto; */
    position: absolute;
    top: 41%;
    right: 5%;
}

.btnBanner {
    background-color: var(--color-skillOrange);
    color: #FFF;
    height: 40px;
    width: 270px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 20px;
}

.btnBanner a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btnRightArrow {
    margin-left: auto;
    margin-right: 20px;
}

.skill .jobSkillBorder,
.job .job.jobSkillBorder {
    background-color: #FFF;
    color: var(--color-jobBlue);
    border: 1px solid var(--color-jobBlue);
}

.job .jobSkillBorder,
.skill .skill.jobSkillBorder {
    background-color: #FFF;
    color: var(--color-skillOrange);
    border: 1px solid var(--color-skillOrange);
}

.btnSmall {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #000;
    margin-bottom: 10px;
    width: 100%;
    background-color: var(--color-grey-eeeeee);
}

.btnBorderRadius.mb {
    margin-bottom: 130px;
}

.btnBorderRadius.noShadow {
    border: 1px solid var(--color-grey-dddddd);
    box-shadow: none;
    color: var(--color-black);
}

.btnBorderRadius.narrower {
    width: 200px;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
    transition: 0.3s;
}

.btnBorderRadius.narrower:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid var(--color-skillOrange);
    transition: 0.3s;
}

.btnAccountCreateTwitter {
    background-color: var(--color-twitter);
}

.btnAccountCreateFacebook {
    background-color: var(--color-facebook);
}

.logoutIcon {
    margin-right: 7px;
}

.scoutIcon {
    padding: 2px 10px;
    border-radius: 20px;
    color: #FFF;
    margin-left: 5px;
}

.scoutIcon.new {
    background-color: var(--color-red);
}

.scoutIcon.keep {
    background-color: var(--color-blue);
}

.scoutIcon.viewed {
    background-color: var(--color-lightGreen);
}

.scoutIcon.decline,
.scoutIcon.rejected {
    background-color: var(--color-grey-eeeeee);
    color: var(--color-black);
}

.scoutIcon.passed {
    background-color: var(--color-jobBlue);
}

.chkSkillJob {
    padding: 20px;
    font-family: roboto;
    font-size: 27px;
    border-radius: 5px;
    font-style: normal;
    font-weight: 600;
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-grey);
    border: 1px solid var(--color-grey);
    cursor: pointer;
}

.colorSkill .register_sts_check:checked+.chkSkillJob {
    background-color: var(--color-skillOrange);
    border: none;
    color: #fff;
}

.colorJob .register_sts_check:checked+.chkSkillJob {
    background-color: var(--color-jobBlue);
    border: none;
    color: #fff;
}

.courseDetailMainImg {
    object-fit: contain;
    font-family: 'object-fit: contain;';
    margin-bottom: 50px;
}

.commonInfo .btnFav {
    margin-bottom: 30px;
font-weight: 700;
}

.commonInfo .btnFav.fafa:before {
    content: "お気に入り";
}

.commonInfo .btnFav.fafa.active:before {
    content: "お気に入り済み";
}

.commonInfo .btnFav.active {
    margin-bottom: 30px;
    border-color: #ff7244;
    color: #ff7244;
}

.courseTitle {
    font-size: 22px;
    line-height: calc(32/22);
    margin-bottom: 30px;
}

.blueAtag {
    font-size: 16px;
    color: var(--color-blue);
    line-height: calc(25/10);
    display: inline-block;
    width: 100%;
}

.blueAtag.bigger {
    font-size: 12px;
}

.blueAtag.bigger {
    font-size: 14px;
}

#commonDesc01 {
    padding-bottom: 30px;

    margin-bottom: 40px;
}

.job #commonDesc01 {
    border-bottom: none;
}

#commonDesc02 {
    margin-bottom: 60px;
}

#commonDesc01 .commonDesc,
#commonDesc02 .commonDesc,
.editorIn.commonDesc {
    font-size: 14px;
    line-height: calc(28/14);
}

.commonDesc .blueAtag {
    font-size: 12px;
}

.basicLink {
    text-decoration: underline;
    color: #4453ff;
}

.underline {
    text-decoration: underline;
}

.borderBottom {
    border-bottom: 1px solid;
}

.jibunLink {
    text-decoration: underline;
}

.flexSpaceBetween.pegeTopTitle {

    margin-bottom: 30px;
    padding-bottom: 30px;
}

.flexSpaceBetween.pegeTopTitle .pageTitle {
    margin-bottom: 0px;
}

.flexSpaceBetween.pegeTopTitle.noborder {
    border-bottom: none;
    margin-bottom: 0px;
}

.blueAtag i.fa-chevron-down {
    margin-left: 15px;
}

.dltable {
    font-size: 14px;
    line-height: calc(28/14);
    margin-bottom: 40px;
}

.dltable dl {
    display: flex;
}

.dltable dd.row1 {
    max-width: 126px;
    width: 100%;
    margin-right: 60px;
}

.formRow {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
}

.formRow.alignCenter {
    align-items: center;
}

.formRowLeft {
    max-width: 185px;
    width: 100%;
    margin-right: 15px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    padding: 8px 0;
}

.formRowLeft.full {
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.companyMidashii {
    padding-top: 40px;
}

.mypageTable .formRow {
    /* height: 60px; */
}

.skill .mypageTable .formRowLeft {
    /* border-bottom: 1px solid var(--color-skillOrange); */
    margin-right: 0px;
    align-items: center;
}

.job .mypageTable .formRowLeft {
    /* border-bottom: 1px solid var(--color-jobBlue); */
    margin-right: 0px;
    align-items: center;
}

.formRowRight {
    width: calc(100% - 270px);
    /*     display: flex; */
    align-items: center;
    flex-wrap: wrap;
}

.formRowRight>p {
    padding: 13px 0;
}

.formRowRight {
    width: calc(100% - 270px);
}

.col3Wrap.mypage {
    margin-top: 20px;
}

.mypageTable .formRowRight {
    border-bottom: 1px solid var(--color-grey-dddddd);
    margin-left: 5%;
    line-height: 1.7;
    margin-right: 1%;
}

.mypageTable .formRowRight.full {
    width: 100%;
    margin-left: 0;
}

.mypageTable .formRowRight.nobo {
    border-bottom: none;
}

.formRowTitle {
    font-size: 14px;
    line-height: calc(32/14);
font-weight: 700;
}

.mypage .col {
    position: relative;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.mypage.col3Wrap .commonCardImgWrap {
    width: auto;

}

.mypageTitleWrap {
    margin-bottom: 50px;
    display: block;
}

.mypageTitle {
    font-size: 30px;
    line-height: calc(32/30);
    text-align: center;
font-weight: 500;
}

.mypageTitleSub {
    font-family: roboto;
    font-weight: bold;
    font-size: 14px;
    line-height: calc(35/14);
    text-align: center;
}

.skill .mypageTitleSub {
    color: var(--color-skillOrange);
}

.job .mypageTitleSub {
    color: var(--color-jobBlue);
}

.reserveDate {
    font-size: 14px;
    line-height: calc(32/14);
    position: absolute;
    top: -12%;
    left: 0;
}

.iconRequired {
    color: var(--color-red-required);
    border: 1px solid var(--color-red-required);
    border-radius: 2px;
    height: 16px;
    width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    margin-left: auto;
    margin-right: 0;
}

.blackBox {
    font-size: 10px;
    line-height: calc(20/10);
    width: 40px;
    height: 15px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* background-color: var(--color-black);
    color: #FFF; */
    border-radius: 2px;
    margin-right: 6px;
}

.positionRelative {
    position: relative;
}

.nortifyNum {
    border-radius: 50px;
    width: 15px;
    height: 15px;
    background-color: #EC5252;
    position: absolute;
    right: -50%;
    top: -30%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 13px;
}

.sideBarMenuRow .nortifyNum {
    position: unset;
    margin-left: 5px;
    width: 18px;
    height: 18px;
}

#header {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 0;
    background-color: #FFF;
    width: 100%;
    z-index: 999;
}

.header__logo {
    max-width: 190px;
    margin-right: 35px;
    -webkit-flex-basis: 405px;
    flex-basis: 405px;
    margin-left: 20px;
}

.header__logo img {
    height: 28px;
}

.header__logo__img {
    max-width: unset;
}

.header__nav {
    max-width: 1860px;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-basis: calc(100% - 405px);
    flex-basis: calc(100% - 405px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.header__nav.header__nav_pc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header__nav__list {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    text-decoration: none;
    list-style: none;
    align-items: center;
    font-size: 15px;
    white-space: nowrap;
font-weight: 500;
}

.header__wrap {
    max-width: 1860px;
    width: 100%;
    margin: 0 auto;
    height: 90px;
}

#header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-skillOrange);
}

.jobH#header:before {
    background-color: var(--color-jobBlue);
}

.header__nav_sp {
    display: none;
}

.header__nav__list__item {
    margin-right: 30px;
    position: relative;
}

.header__nav__list__item .fa-sort-down {
    content: "";
    position: absolute;
    right: -75%;
    top: -3%;
}

.headerLeft {
    display: flex;
    width: 995px;
    align-items: center;
}

.headerRight {
    width: calc(100% - 995px);
}

.headerRight i {
    font-size: 20px;
}

.headerJibun {
    background-color: var(--color-grey-777777);
    color: #FFFFFF;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    display: none;
}

.headerJibun .text {
    margin-right: 90px;
}

.headerJibun .poppins {
    font-weight: 600;
}



.btnShosai {
    border: 1px solid #FFF;
    border-radius: 3px;
    width: 50px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnShosai a {
    color: inherit;
}

.btnJibunClose {
    position: absolute;
    right: 3%;
    top: 36%;
    cursor: pointer;
}

.inputHeaderSearch {
    border: none;
    border-radius: 5px;
    padding: 5px;
    background-color: var(--color-grey-eeeeee);
    width: 250px;
    height: 30px;
}

.headerSearchBox {
    position: relative;
}

.headerSearchBox .form-control{
    margin-top: 0;
background: aliceblue; */
    display: block;
    width: 100%;
    padding: 1.1rem 0.75rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #1d2329;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.searchButton {
    position: absolute;
    right: 1%;
    top: 19%;
    color: #FFF;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;

    background-color: var(--color-black2);
    border-radius: 18px;
}

.searchButton i {
    font-size: 10px;
    color: #FFF;
    padding: 4px;
}

.headerItemCircle {
    font-size: 14px;
    border-radius: 18px;
    padding: 6px 30px;
    position: relative;
}

.headerItemCircle::before {
    content: "";
    width: 1px;
    height: 21px;
    display: block;
    position: absolute;
    left: -20%;
    background-color: #AAAAAA
}

.job .headerItemCircle {
    color: var(--color-skillOrange);
    border: 1px solid var(--color-skillOrange);
    margin-left: 40px;
    align-items: center;
}

.skill .headerItemCircle {
    color: var(--color-jobBlue);
    border: 1px solid var(--color-jobBlue);
    margin-left: 40px;
    align-items: center;
}

.headerUserImg {
    position: relative;
    min-width: 20px;
    width: 20px;
}

.headerUserImg .sideBarMenu {
    display: none;
}

.headerUserImg:hover .sideBarMenu,
.sideBarMenu:hover {
    display: block;
    /* position: absolute; */
    /* bottom: -610%; */
    width: 200px;
    /* left: -370%; */
}

.absWrap.sidebar {
    position: absolute;
    bottom: -144px;
    left: -370%;
    padding-top: 40px;
}

.headerArrowDown {
    position: absolute;
    right: -40%;
    top: 50%;
}

input.font-awesome {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 600;
    text-decoration: inherit;
}

.main {
    position: relative;
    margin-top: 90px;
}

.main.extend {
    /*     margin-top: 140px; */
}

.withSideBarContainer {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.withSideBarLeft {
    max-width: 700px;
    width: 100%;
    padding-right: 50px;
    border-right: 1px solid var(--color-grey-dddddd);
}

.job .withSideBarLeft {
    border-right: none;
}

.job .withSideBarRight {
    padding-left: 0px;
}

.withSideBarRight {
    padding-left: 50px;
    max-width: 250px;
    width: 100%;
}

.footer {
    border-top: 2px solid #DDDDDD;
    background-color: #F5F5F5;
}

.footerLogo {
    margin-bottom: 30px;
    max-width: 190px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

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

.footerWrap {
    display: flex;
    padding-top: 50px;
    margin-bottom: 100px;
}

.footerAtagWrap {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #DDDDDD;
    padding-left: 30px;
    margin-right: 50px;
}

.footerAtagWrap a {
    margin-bottom: 20px;
    position: relative;
}

.footerAtagWrap a:before {
    content: '';
    width: 10px;
    height: 1px;
    background-color: #111111;
    position: absolute;
    left: -11%;
    top: 50%;
}

.footerAtagWrap a:last-child {
    margin-bottom: 0px;
}

.footerBannerArea {
    margin-left: auto;
}

.footerBannerArea img {
    margin-bottom: 5px;
}

.footerBannerArea .blueAtag {
    text-align: right;
    font-size: 16px;
    line-height: calc(32/16);
}

.full.withSideBarContainer {
    max-width: 100%;
    width: 100%;
}

.full .withSideBarRight {
    padding-left: 50px;
    padding-right: 50px;
    max-width: 100%;
    width: 100%;
}

.footerBannerArea i {
    margin-left: 5px;
}

.bannerArea {
    padding-bottom: 70px;
    padding-top: 70px;
}

.bannerfullWidth {
    max-width: 1920px;
    width: 100%;
    position: relative;
}

.bannerfullWidth img {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.absTextArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
}

.footerCopyRight {
    font-size: 12px;
    line-height: calc(35/12);
    margin-bottom: 30px;
}

.pankuzu {
    font-size: 12px;
    line-height: 3.2;
    margin-bottom: 50px;
    width: 100%;
    flex-basis: 100%;
}

.pankuzu span {
    margin-right: 10px;
    margin-left: 10px;
}

.skill .pankuzuEmphasis {
    color: var(--color-skillOrange);
}

.job .pankuzuEmphasis {
    color: var(--color-jobBlue);
}

.pageTitleSub {
    font-size: 14px;
    line-height: 2.5;
    color: var(--color-skillOrange);
}

.job .pageTitleSub {
    color: var(--color-jobBlue);
}

.pageTitle {
    font-size: 30px;
    line-height: 1.06;
    margin-bottom: 62px;
font-weight: 700;
}

.sectionTitle {
    font-size: 22px;
    line-height: 1.45;
    margin-bottom: 20px;
    display: block;
}

.sectionTitle.mt {
    margin-top: 150px;
}

.sectionTitle.bigger {
    font-size: 50px;
    line-height: calc(32/50);
    text-align: center;
    margin-bottom: 40px;
}

.sectionTitle.bigger {
    font-size: 30px;
    line-height: calc(35/30);
}

.sectionTitle.smaller {
    font-size: 18px;
}

.sectionTitle.help {
    color: var(--color-skillOrange);
}

.sectionTitle.help.border {
    color: var(--color-skillOrange);
    border-bottom: 1px solid var(--color-grey-dddddd);
    padding-bottom: 30px;
    padding-bottom: 30px;
}

.sectionTitle.flex {
    display: flex;
    justify-content: space-between;
}

.bannerTitle {
    font-size: 28px;
    text-align: center;
}

.helpCol2Wrap .col {
    margin-bottom: 60px;
}

.helpCol2Wrap .col p {
    font-size: 16px;
    margin-bottom: 10px;
}

.helpCol2Wrap .col .blueAtag {
    font-size: 14px;
    line-height: calc(32/14);
}

.acd-check {
    display: none;
}

.acd-label {
    background: #FFFFFF;
    /* color: #fff; */
    display: block;
    padding: 16px 30px;
    position: relative;
    border: 1px solid var(--color-grey-dddddd);
    font-size: 16px;
}

.acd-label:after {
    box-sizing: border-box;
    content: url('../img/skill/help/accordionArrowDown.png');
    display: block;
    /* font-family: "Font Awesome 5 Free"; */
    /* height: 52px; */
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 20%;
}

.acd-content {
    /* border: 1px solid var(--color-grey-dddddd); */
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    background: var(--color-grey-f5f5f5);
}

.acd-content p {
    display: inline-flex;
    font-size: 16px;
    line-height: calc(24/16);
}

.acd-check:checked+.acd-label:after {
    content: url('../img/skill/help/accordionArrowUp.png');
}

.acd-check:checked+.acd-label+.acd-content {
    border: 1px solid var(--color-grey-dddddd);
    height: auto;
    opacity: 1;
    padding: 10px 30px;
    visibility: visible;
}

.accordionContainer {
    margin-bottom: 70px;
}

.faq-q,
.faq-a {
    font-size: 22px;
    line-height: calc(32/22);
    margin-right: 20px;
}

.faq-q {
    color: var(--color-skillOrange);
}

.faq-a {
    color: #FF6473;
}

.job .sectionTitle.help {
    color: var(--color-jobBlue);
}

.job .faq-q {
    color: var(--color-jobBlue);
}

.job .faq-a {
    color: var(--color-skillOrange);
}

.btnMedium {
    background-color: var(--color-jobBlue);
}

.btnMedium.skill {
    background-color: var(--color-skillOrange);
}

.arrowDown2color {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 55px;
}

.commonCard {
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.sliderBlogPost .commonCard {
    box-shadow: none;
    border: 1px solid var(--color-grey-dddddd);
}

.inputHeaderSearch {
    font-size: 12px;
}

.commonCard.justLogo {
    box-shadow: none;
    border-radius: unset;
}

.commonCard a {
    display: block;
    height: 100%;
    /* margin-bottom: 5px; */
    margin-bottom: 15px;
    text-decoration: none !important;
font-weight: 600;
}

.commonCard.col {
    /* margin-right: 8px; */
    /* margin-left: 8px; */
    margin-bottom: 35px;
    transition: .3s ease-in-out;
}

.commonCard.col:hover {
    box-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
}

.bnr-hover {
    transition: .3s ease-in-out;
    opacity: 1;
}

.bnr-hover:hover {
    opacity: 0.7;
}

.img-hover-act:hover {
    box-shadow: 0px 0px 5px rgb(0 0 0);
}

.sliderTop.imgOnly.slick-dotted.slick-slider {
    margin-bottom: 90px;
}

.sliderTop.imgOnly .commonCard.col {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.commonCardImgWrap {
    position: relative;
    height: 170px;
}

.nani .commonCardImgWrap {
    width: 88px;
    height: 111px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
}

.nani .commonCard {
    padding-top: 50px;
    padding-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 30px;
    height: 360px;
}

.addFavUser,
.addFav {
    cursor: pointer;
}

.nani .commonCard.border {
    height: 300px;
}

.skill .nani .commonCard.border {
    border: 2px solid var(--color-skillOrange);
    color: var(--color-skillOrange);
}

.job .nani .commonCard.border {
    border: 2px solid var(--color-jobBlue);
    color: var(--color-jobBlue);
}

.job .nani .commonCard.border {
    border: 2px solid var(--color-jobBlue);
    color: var(--color-jobBlue);
}

.naniArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.naniArrow img {
    width: 25px;
    height: 15px;
    margin-right: auto;
    margin-left: auto;
}

.commonCardImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

.commonCardCategory {
    position: absolute;
    top: 0;
    background-color: var(--color-skillOrange);
    border-radius: 5px 0px 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 81px;
    color: #FFF;
}

.commonCardCategory.c2,
.commonCardCategory.c10 {
    background-color: var(--color-jobBlue);
}

.commonListButtonArea.mama {
    margin: 0 -10px;
}

.commonListButtonArea.mama>* {
    margin: 0 10px;
}

.commonCardCategory.cl2 {
    background-color: var(--color-jobBlue);
}

.commonCardCategory.notAbsolute {
    position: initial;
    border-radius: 5px;
    margin-right: 10px;
}

.portfolioCategoryWrap {}

.portfolioCategoryWrap .commonText {
    text-align: left;
}

.portfolioCategoryWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.portfolioWrap {
    display: flex;
}

.portfolioImage {
    width: 300px;
    display: flex;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}

.portfolioPreviewDesc {
    margin-right: 20px;
    flex-basis: 50%;
}

.portfolioDesc {
    width: 50%;
}

.portfolioImage+.portfolioDesc {
    width: calc(100% - 500px);
    margin-left: 30px;
}

.commoncardtitleSub {
    font-size: 10px;
    line-height: calc(14/10);
    color: var(--color-grey-777777);
}

.commonCardTitleAbs {
    position: absolute;
    top: 5%;
    left: 5%;
    font-size: 16px;
    line-height: calc(24/16);
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    color: #FFF;
}

.commonCardBookmark {
    position: absolute;
    top: 2%;
    right: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-lightGrey);
    height: 30px;
    width: 30px;
    border-radius: 50px;
    color: #FFF;
}

.commonCardBookmark:hover {
    background-color: #ffbea8;
}

.commonCardBookmark.active {
    color: #FF7244;
}

.cardRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.commonCardTextWrap .commonDesc {
    font-size: 18px;
    max-width: 530px;
    position: relative;
}

.commonDesc iframe {
    display: block;
}

.commonCardTextWrap .pric {
    font-size: 14px;
    line-height: 1;
    margin-top: -10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cardFreeIcon {
    position: absolute;
    top: 5px;
    right: 5px;
}

.commonCardTextWrap .courseTime {
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    text-align: right;
    margin-top: 0;
}

.skill .commonCardTextWrap .commonDesc {
    max-width: 380px;
}

.commonCardTextWrap {
    padding: 25px;
    min-height: 120px;
    height: 100%;
    position: relative;
    /* display: flex; */
    /* flex-direction: column; */
    background-color: #fff;
}

.sliderTop .commonCardTextWrap {
    display: flex;
    flex-direction: column;
}

.sliderTop.imgOnly .commonCardTextWrap {
    padding: 0;
}

.mypage .commonCardTextWrap {
    padding: 5px;
}

.commonCardTitle {
    font-size: 14px;
    font-family: notosans;
    line-height: 1.14;
    max-height: 30px;
    height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.colpad {
    padding: 14px 0;
}

.commonCardThumArea {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.commonCardThumArea img {
    max-width: 20px;
    width: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
    margin-right: 7px;
}

.commonCardAtag {
    color: var(--color-grey);
    position: absolute;
    bottom: 5%;
    right: 5%;
}

.commonCardGreyText {
    font-size: 12px;
    line-height: calc(32/12);
    color: var(--color-grey-777777);
    margin-bottom: 8px;
}

.courseTeacher {
    font-size: 10px;
    line-height: 2;
    color: var(--color-blue);
}

.withSideBarRight .courseTeacher {
    font-size: 14px;
    line-height: calc(20/14);
    margin-bottom: 10px;
    display: block;
}

.commonDesc {
    font-size: 14px;
    line-height: calc(18/12);
    margin-bottom: 60px;
margin-right: 10px;
}

.centerArea {
    width: 100%;
    text-align: center;
}

.commonTable {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 70px;
}

.commonTableRow {
    width: 100%;
    border-top: 1px solid var(--color-grey-dddddd);
    display: flex;
    height: 50px;
}

.commonTable .commonTableRow:last-child {
    border-bottom: 1px solid var(--color-grey-dddddd);
}

.commonTableHeader {
    background-color: var(--color-grey-eeeeee);
    max-width: 117px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.commonTableHeader.maxWidthUnset {
    max-width: unset;
}

.commonTableDesc {
    width: calc(100% - 117px);
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: var(--color-black);
}

.commonTable2 {}

.commonTable2 th {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.commonTable2 td:first-child {
    background-color: var(--color-grey-f5f5f5);
}

.commonDesc2col {
    width: 98%;
    display: flex;
    margin-left: 2%;
    margin-bottom: 10px;
}

.commonDesc2col dt {
    margin-right: 10px;
}

.categoryCard {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-grey-dddddd);
    width: 200px;
    height: 100px;
    border-radius: 5px;
}

.withSideBarRight .popularTeacherCategory {
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.7;
}

.sideBarTitle {
    font-size: 16px;
    line-height: calc(32/16);
}

.borderForm .sideBarTitle {
    font-size: 18px;
    line-height: calc(32/18);
    margin-bottom: 60px;
}

.withSideBarRight .popularTagWrap.col {
    font-size: 10px;
    line-height: calc(32/12);
    /*     height: 14px; */
    margin-bottom: 5px;
}

.iconRoboto {
    color: #FFF;
    background-color: var(--color-iconRoboto);
    border-radius: 2px;
    padding: 4px 10px;
    font-size: 9px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: roboto;
    margin-bottom: 5px;
}

.iconRoboto.ty3 {
    background-color: #dc7000;
}

.iconRoboto.ty4 {
    background-color: #3eb700;
}

.iconRoboto.ty5 {
    background-color: var(--color-red);
}

.commonCardIconWrap {
    display: flex;
    align-items: center;
}
.commonCardIconWrap.mb5 {
	margin-left: 0;
    width: 100%;
}
.commonCardIconWrap.mb5 .iconRoboto {
	margin-left: 0;
}

.commonCardIconWrap .iconRoboto,
.commonCardIconWrap .jobCategory {
    height: 20px;
    font-size: 12px;
    margin-left: 5px;
    padding: 5px 8px;
    margin-bottom: 0px;
}

.commonCardIconWrap .iconRoboto {
    padding-right: 20px;
    padding-left: 20px;
margin-right: 2%;
}

.jobCategory {
    background-color: var(--color-lightGreen);
    display: inline-flex;
    justify-self: center;
    align-items: center;
    color: #FFF;
    border-radius: 2px;
    width: auto;
    padding: 0 10px;
    font-size: 9px;
    height: 30px;
    background-color: var(--color-lightGreen);
}

.jobCategory.smaller {
    height: 15px;
    width: auto;
}

.iconRoboto.withImg {
    width: auto;
    height: 30px;
    border-radius: 5px;
    font-size: 20px;
    line-height: 1.75;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5px;
}

.commonCardTagWrap {
    display: flex;
    flex-wrap: wrap;
    /*     height: 16px; */
    overflow: hidden;
    margin-bottom: 15px;
}

.alignEnd {
    justify-content: flex-end;
}

.starNum {
    font-size: 10px;
}

.commonCardsStarWrap {
    justify-content: flex-end;
    align-items: center;
    display: flex;
    flex-basis: 100%;
}

.commonCardsStarWrap i {
    margin-right: 5px;
}

.commonCardsStarWrap i,
.starNum {
    font-size: 10px;
    color: var(--color-lightOrange);
}

.voteNum {
    color: var(--color-grey);
    font-size: 10px;
    line-height: 3.2;
    color: #3c3c3c;
}

.starNum {
    margin-right: 5px;
}

.commonCardTag {
    display: block;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    height: 16px;
    background-color: var(--color-blueTag);
    margin-right: 5px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    max-width: 120px;
    /* 	width: 100%; */
    line-height: 1.5;
}

.job .commonCardTag {
    border-radius: 20px;
    height: 20px;
    width: auto;
    min-width: 40px;
    display: inline-flex;
}

.imageWrapper {
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
}

.imageWrapper>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: "object-fit: contain;";
}

.skill .commonCardTag {
    background-color: var(--color-skillLightOrange);
}

.lg .commonCardTag {
    padding: 0 15px;
    height: 22px;
    border-radius: 11px;
    font-size: 14px;
}

.blogPost .commonCardTag {
    background-color: var(--color-grey-f5f5f5);
}

.commonCardCategoryBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    height: 16px;
    margin-right: 5px;
    border-radius: 8px;
    font-size: 12px;
    line-height: calc(32/10);
    margin-left: 17px;
}

.recommendSlider {
    margin-bottom: 60px;
}

.recommendContainer {
    padding: 30px;
    border: 1px solid #DDD;
    display: flex;
}

.bannerSlide .recommendContainer {
    padding: 0;
    border: none;
}

.recommendContainer .commonCardImgWrap {
    width: 375px;
    height: 240px;
    margin-right: 30px;
}

.bannerSlide .recommendContainer .commonCardImgWrap {
    width: 500px;
    height: 120px;
    margin-right: 0px;
}

.col4Wrap .commonCardImgWrap {
    width: auto;
    height: 100%;
    height: 127px;
    margin: 18px;
}

.sliderTop .commonCardImgWrap {
    max-width: 550px;
    width: 100%;
    max-height: 450px;
    height: 100%;
}

.sliderTop.imgOnly .commonCardImgWrap {
    max-width: 380px;
}

.commonLogoImgWrap {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.myPageTitle+.conf_show {
    display: block;
    margin-bottom: 20px;
    font-size: 1.2em;
}

.commonCardJobIcon {
    max-width: 40px;
    max-height: 40px;
    width: 100%;
    height: 100%;
    margin-right: 5px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.slick-initialized .recommendContainer.slick-slide {
    display: flex;
}

.sliderTop {
    background-color: var(--color-grey-f5f5f5);
    padding-top: 10px;
}

.sliderBlogPost .slick-prev {
    left: -23px;
    top: 40%;
}

.sliderBlogPost .slick-next {
    right: -23px;
    top: 40%;
}

.slick-prev,
.slick-next {
    width: 30px;
    height: 30px;
}

.recommendTitle {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 11px;
}

.recommendText {
    font-size: 14px;
    font-weight: light;
    line-height: 1.5;
    color: #0B1118;
}

.bannerContianer {
    margin-bottom: 20px;
}

.bannerContianer.flex {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.recommendcommonDesc {
    max-width: 350px;
}

.recommendcommonDesc .courseTeacher {
    margin-bottom: 5px;
}

.recommendcommonDesc .commonCardsStarWrap {
    justify-content: flex-start;
}

.slick-prev {
    display: block;
    position: absolute;
    top: 50%;
    left: -2.7%;
    z-index: 1;
}

.slick-next {
    display: block;
    position: absolute;
    top: 50%;
    right: -2.7%;
    z-index: 1;
}

.job .slick-prev {
    top: 40%;
    left: 0%;
}

.job .slick-next {
    top: 40%;
    right: 0%;
}

.popularTagWrap.col,
.popularCategoryWrap.col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.w_ca_chk:checked+.popularCategoryWrap.col {
    color: #FFF;
    background-color: var(--color-jobBlue);
}

.popularCategoryWrap.col {
    border: 1px solid var(--color-jobBlue);
    color: var(--color-jobBlue);
    background-color: #FFF;
    height: 40px;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.skill .popularCategoryWrap.col {
    border: 1px solid var(--color-skillOrange);
    color: var(--color-skillOrange);
    font-weight: 700;
}

.withSideBarRight .popularCategoryWrap.col {
    height: 25px;
}

.popularTagWrap.col {
    flex-basis: auto;
    display: inline-flex;
    width: auto;
    min-width: 75px;
    height: 25px;
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 0 10px;
    margin-right: 5px;
    color: var(--color-black);
    background-color: var(--color-grey-f5f5f5);
}

.topSearchContainer .popularTagWrap.col {
    margin-bottom: 40px;
}

.modalBox .topSearchContainer .popularTagWrap.col {
    margin-bottom: 10px;
}

.job .topAreaTagContainer .popularTagWrap.col,
.job .bottomAreaTagContainer .popularTagWrap.col {
    flex-basis: auto;
    display: inline-flex;
    min-width: 75px;
    height: 25px;
    padding: 0 10px;
    border-radius: 13px;
    margin-bottom: 0px;
    color: var(--color-jobBlue);
    border: 1px solid var(--color-jobBlue);
    background-color: #FFF;
    margin-bottom: 10px;
}

.job .topAreaTagContainer span,
.job .topAreaTagContainer i {
    margin-bottom: 10px;
}

.topAreaSearchBox {
    height: 60px;
    max-width: 670px;
    width: 100%;
    margin-right: 10px;
    border: none;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.popluarTagContainer {
    margin-bottom: 10px;
    align-items: center;
}

.modalBox .popluarTagContainer {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.popluarTagContainerSpan {
    margin-right: 10px;
}

.popularTeacherName {
    font-size: 14px;
    line-height: 1.42;
    border-bottom: 1px solid var(--color-black);
    margin-bottom: 6px;
    padding-bottom: 2px;
    width: 100%;
    text-align: center;
    display: block;
}

.popularTeacherCategory {
    word-break: keep-all;
    text-align: center;
}

.popularTeacherCategory span {
    display: inline-block;
}

.popluarTeacherContainer {
    margin-bottom: 60px;
}

.popluarTeacherImg {
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
}

.popluarTeacherImg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    font-family: "object-fit: cover;";
}

.navCourses {
    border-bottom: 2px solid var(--color-grey-dddddd);
    width: 100%;
    margin-bottom: 25px;
}

.navCourses {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navCoursesTitle {
    position: relative;
    max-width: 90px;
    height: 100%;
    display: block;
    padding: 0 10px;
}

.navCoursesTitle i {
    /* position: absolute;
top: -8%;
left: -15%; */
}

.navCoursesTitle.active:after {
    position: absolute;
    bottom: 5%;
    width: 100%;
    height: 2px;
    background-color: red;
}

.navCoursesSelect {
    border: 1px solid #AAAAAA;
    border-radius: 3px;
    color: #AAAAAA;
    width: 120px;
    height: 30px;
}

.withSideBar {
    display: flex;
}

.navCoursesLeft {
    display: flex;
}

.btnConcierge {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 365px;
    height: 75px;
    right: 80px;
    bottom: 5%;
    color: #fff;
    cursor: pointer;
    background: var(--color-black);
    border-radius: 100px;
    padding: 0px 30px;
    justify-content: flex-start;
    z-index: 10;
}

.btnConcierge .fa-comment-dots {
    font-size: 30px;
    margin-right: 10px;
}

.btnConcierge .fa-chevron-right {
    margin-left: auto;
}

.btnSearchFixed,
.btnConciergeFixed {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    bottom: 5%;
    color: #fff;
    cursor: pointer;
    border-radius: 100px;
    padding: 0px 30px;
    z-index: 5;
}

.miniPopRelativeWrap {
    position: relative;
}

.miniPopFixed {
    position: absolute;
    width: 400px;
    height: 300px;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
    top: 1%;
    right: 5%;
}

.miniPopRelativeWrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.btnErase {
    position: absolute;
    right: -5%;
    top: -5%;
    width: 35px;
    height: 35px;
    border-radius: 100px;
    color: #FFF;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.btnSearchFixed {
    right: 50px;
}

.btnConciergeFixed {
    right: 50px;
    font-size: 26px;
    background: var(--color-black);
}

.job .btnSearchFixed {
    background: var(--color-jobBlue);
}

.skill .btnSearchFixed {
    background: var(--color-skillOrange);
}

.btnSearchFixed .fa-search-plus {
    font-size: 26px;
}

.fullWidth {
    width: 100%;
}

.btnSquare {
    color: #FFF;
    height: 40px;
    width: 100%;
    ;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
}

.btnSquare.w-40 {
    width: 40%;
    position: absolute;
    top: 0;
    left: 50%;
}

.mxAuto {
    max-width: 200px;
}

.widAuto {
    width: auto;
}

.btnRadius {
    width: 280px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 30px;
    margin-right: auto;
    margin-left: auto;
font-weight: 700;
}

.skill .btnRadius {
    color: var(--color-skillOrange);
    border: 1px solid var(--color-skillOrange);
}

.job .btnRadius {
    color: var(--color-jobBlue);
    border: 1px solid var(--color-jobBlue);
    transition: .3s;
}

.job .btnRadius:hover {
    /*text-decoration: underline;*/
    background: #fff;
    color: #E0523F;
}

.btnRadius img {
    position: absolute;
    right: 5%;
    top: 40%;
}

.job .btnSquare,
.mama .job.btnSquare {
    background-color: var(--color-jobBlue);
}

.skill .btnSquare.blank {
    background-color: unset;
    color: var(--color-skillOrange);
    border: 1px solid var(--color-skillOrange);
}

.skill .btnSquare.blank.active {
    background-color: var(--color-skillOrange);
    color: #FFF;
}

.skill .btnSquare.blank:hover {
    background: var(--color-skillOrange);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.skill .btnSquare.noAr {
    cursor: default;
}

.skill .btnSquare.noAr:hover {
    cursor: pointer;
}

.job .btnSquare.blank {
    background-color: unset;
    color: var(--color-jobBlue);
    border: 1px solid var(--color-jobBlue);
}

.job .btnSquare.blank.active {
    background-color: var(--color-jobBlue);
    color: #FFF;
}

.job .btnSquare.blank.fafa:before {
    content: "お気に入り";
}

.job .btnSquare.blank.fafa.active:before {
    content: "お気に入り済み";
}

.btnSquare.disabled {
    background-color: var(--color-grey-eeeeee);
    color: #000;
    cursor: unset;
}

.btnSquare.disabled.po {
    cursor: pointer;
}

.btnListGrey a {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-grey-dddddd);
    border-radius: 3px;
    height: 40px;
    width: 140px;
    /*     width: auto; */
    font-size: 14px;
    justify-content: flex-end;
    padding-right: 15px;
    padding-left: 15px;
}

.btnListGrey a img {
    margin-left: 7px;
    margin-top: 3px;
}

.commonListButtonArea {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-grey-dddddd);
}

.commonListButtonArea.noBorder {
    border-top: none;
}

.commonListButtonArea.center {
    justify-content: center;
}

.commonListButtonArea .btnSquare,
.commonListButtonArea>.btnWrapppp {
    width: 48%;
}

.commonListButtonArea>.btnWrapppp>.btnSquare {
    width: 100%;
}

.commonListButtonArea .btnSquare.full {
    width: 100%;
}

.commonListButtonArea.col3 .btnSquare {
    width: 30%;
}

.skill .btnSquare {
    background-color: var(--color-skillOrange);
    cursor: pointer;
}

.skill .btnSquare:hover {
    background: #fff;
    color: var(--color-skillOrange);
    text-decoration: none;
    border: 1px solid var(--color-skillOrange);
}

.loginForm {
    margin-top: 170px;
    max-width: 500px;
    margin-bottom: 100px;
}

.loginForm .btnSquare {
    margin-bottom: 55px;
}

.loginForm .btnBorderRadius {
    max-width: 220px;
    width: 100%;
    margin-right: 20px;
    font-size: 16px;
    line-height: calc(32/16);
}

.loginForm .centercete .btnBorderRadius {
    margin-right: auto;
}

.mypageTable .btnBorderRadius {
    max-width: 250px;
    width: 100%;
    margin-left: auto;
}

.btnContainer {
    display: flex;
    width: 100%;
}

.loginForm .pageTitle {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

.loginForm .sectionTitle {
    border-bottom: 1px solid var(--color-grey-dddddd);
}

.loginForm .formRow {
    flex-direction: column;
}

.loginForm .formRowLeft {
    width: 100%;
    max-width: unset;
}

.loginForm .formRowRight {
    width: 100%;
}

.sideBarMenu {
    /* display: flex; */
    max-width: 190px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--color-grey-dddddd);
    margin-bottom: 20px;

    /* position: sticky;
    top: 140px; */}

.sideBarMenuRow {
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid var(--color-grey-dddddd);
    color: var(--color-black);
    position: relative;
    flex-wrap: wrap;
}

.sideBarMenuRow.title {
    background-color: var(--color-grey-F8F8FA);
    font-weight: bold;
}

.flexWrap .commonListRow {
    flex-wrap: wrap;
}

.flexWrap .reviewRow:last-child {
    border-bottom: none;
}

.sideBarLabel {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.skill .sideBarMenuRow.title {
    border-bottom: 2px solid var(--color-skillOrange);
}

.job .sideBarMenuRow.title {
    border-bottom: 2px solid var(--color-jobBlue);
}

.myPageProfileBox {
    display: flex;
    margin-bottom: 40px;
}

.myPageProfileImgWrap {
    margin-right: 30px;
}

.myPageProfileImg {
    width: 140px;
    height: 140px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.myPageProfileImgWrap img {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

.myPageProfileDescWrap {}

.myPageProfileDescWrap {
    max-width: 400px;
    width: 100%;
}

.star-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 250px;
    height: 50px;
    overflow: hidden;
    position: relative;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    /* background: url('../img/common/star-solid.svg'); */
    background-size: contain;
}

.star-rating i {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    /* background: url('../img/common/star-solid.svg'); */
    background-size: contain;
}

.star-rating input {
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
}

.star-rating input:hover+i,
.star-rating input:checked+i {
    opacity: 1;
}

.star-rating i~i {
    width: 40%;
}

.star-rating i~i~i {
    width: 60%;
}

.star-rating i~i~i~i {
    width: 80%;
}

.star-rating i~i~i~i~i {
    width: 100%;
}

.choice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px;
    display: block;
}

.updateDate {
    font-size: 14px;
    /* line-height: calc(32/14); */
    line-height: 4;
    display: inline-block;
    margin-left: 10px;
}

.textRow {
    display: flex;
}

.fukidasi {
    background-color: var(--color-grey-777777);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    position: relative;
    margin-bottom: 20px;
}

.fukidasi:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid var(--color-grey-777777);
    transition: .2s;
}

.animeFukidasi .fukidasi.rad {
    background-color: var(--color-grey-777777);
    border-radius: 3px;
    font-size: 1.2rem;
    padding: 10px;
    line-height: calc(14.4/12);
    transition: .2s;
}

.col.animeFukidasi {
    margin-bottom: 60px;
}

.animeFukidasi:hover .fukidasi.rad {
    transform: translateY(-10px);
    transition: .2s;
    background-color: var(--color-skillOrange);
}

.animeFukidasi:hover .fukidasi:after {
    transition: .2s;
    border-top: 15px solid var(--color-skillOrange);
}

.job .animeFukidasi:hover .fukidasi.rad {
    background-color: var(--color-jobBlue);
}

.job .animeFukidasi:hover .fukidasi:after {
    transition: .2s;
    border-top: 15px solid var(--color-jobBlue);
}

.animeFukidasi .fukidasiImg {
    max-width: 200px;
    max-height: 200px;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.animeFukidasi .fukidasiImg::after {
    content: ' ';
    background-color: rgb(0, 0, 0);
    opacity: 0.3;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .2s;
}

.animeFukidasi:hover .fukidasiImg::after {
    opacity: 0;
    transition: .2s;
}

.animeFukidasi .fukidasiImg img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    transition: .2s;
}

.animeFukidasi:hover .fukidasiImg img {
    transform: scale(1.1);
    transition: .2s;
}

.simpleBorder {
    border-bottom: 1px solid var(--color-grey-dddddd);
    display: block;
    width: 100%;
    margin-bottom: 75px;
}

.remodal {
    max-width: 1000px;
    width: 100%;
    border-radius: 20px;
}

.modalBox {
    background-color: var(--color-grey-f5f5f5);
    padding: 60px 75px 33px 75px;
}

.commonSearchBox {
    display: flex;
    height: 60px;
    width: 100%;
    align-items: center;
    border-radius: 5px;
    position: relative;
    background-color: #FFF;
    margin-bottom: 30px;
}

.commonSearchBox.outOfMordal {
    overflow: hidden;
    width: 670px;
    margin-bottom: 0;
}

.job .commonSearchBox.outOfMordal {
    border: 1px solid var(--color-jobBlue);
}

.skill .commonSearchBox.outOfMordal {
    border: 1px solid var(--color-skillOrange);
}

.searchCombo,
.searchText {
    border: none;
    height: 100%;
    color: #333;
}

.searchCombo {
    width: 130px;
    height: 60px;
    padding: 0 20px;
    margin-right: 10px;
    color: #333;
    outline: none;
    cursor: pointer;
}

.searchComboWrap {}

.searchText {
    width: calc(100% - 140px);
    padding: 0 20px;
}

.searchBorder {
    width: 1px;
    height: 30px;
    background-color: var(--color-grey-aaaaaa);
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 15px solid #FFFFFF;
    border-bottom: 15px solid #FFFFFF;
}

.searchBoxTitle {
    font-size: 16px;
    line-height: calc(32/16);
    text-align: left;
    margin-bottom: 10px;
}

.btnSearchAbs {
    background-color: var(--color-jobBlue);
    border-radius: 3px;
    height: 30px;
    width: 30px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 1%;
    top: 25%;
}

.job .btnSearchAbs {
    background-color: var(--color-jobBlue);
    cursor: pointer;
}

.skill .btnSearchAbs {
    background-color: var(--color-skillOrange);
}

.commonSearchBoxRow .blueAtag {
    font-size: 12px;
}

.commonSearchBoxRow {
    margin-bottom: 30px;
}

.commonSearchBoxRow .popluarTagContainerSpan {
    display: inline-block;
    text-align: left;
    width: 100%;
}

.btnMoreTag {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    position: absolute;
    color: #FFF;
    top: 3px;
    right: 0%;
    border: 1px solid #FFF;
    border-radius: 3px;
    cursor: pointer;
}

.btnMoreTag.rev {
    transform: rotate(180deg);
}

.searchBoxSelectWrap {
    margin-right: 30px;
}

.searchBoxSelectWrap span {
    margin-right: 10px;
}

.btnSearchBox {
    background-color: var(--color-jobBlue);
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.closeText {
    cursor: pointer;
}

.skill .btnSearchBox {
    background-color: var(--color-skillOrange);
}

.searchBox .remodal-close {
    left: unset;
    right: 0;
}

.searchBoxRow {
    display: flex;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.searchBoxRow.mb50 {
    margin-bottom: 50px;
}

.searchBoxBtnArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hitCount {
    margin-left: auto;
}

.ckbWrap {
    margin-right: 30px;
}

.ckbWrap input {
    margin: 0;
    margin-right: 5px;
}

.modelPlanBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid #FFF;
    text-align: center;
    padding: 10px 4px;
    margin-right: 10px;
    position: relative;
    font-family: 'roboto';
    font-weight: 600;
    width: 50px;
    height: 50px;
}

.model {
    font-size: 11px;
}

.plan {
    font-size: 15px;
}

.modelPlanBox .fileNum {
    position: absolute;
    bottom: -130%;
    right: 0;
    left: 0;
    font-weight: 400;
}

.modelCaseNum {
    font-size: 12px;
    font-family: roboto;
    margin-bottom: 5px;
}

.modelCaseNickname {
    font-size: 14px;
    line-height: calc(20/14);
    text-decoration: underline;
}

.modelCaseWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.newsRow {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    /* font-size: 12px; */
    font-size: 14px;
    line-height: calc(32/12);
    margin-bottom: 10px;
    border: 1px solid var(--color-grey-dddddd);
    border-radius: 3px;
    padding: 10px 20px;
    transition: .3s all;
}

.newsRow:hover {
    text-decoration: none;
    background-color: #e6f2ff;
}

.footerLinkSkill a:hover {
    color: #1EA1F2
}

.footerLinkJob a:hover {
    color: #1EA1F2
}

.tooltip:hover {
    color: #1EA1F2
}

.header__nav__list__item headerUserImg:hover {
    color: #1EA1F2
}

.newsRow span {
    margin-right: 55px;
    color: var(--color-skillOrange);
}

.job .newsRow span {
    margin-right: 55px;
    color: var(--color-jobBlue);
}

.newsRow p {
    max-width: calc(100% - 190px);
    width: calc(100% - 190px);
}

.topNewsList {
    margin-bottom: 140px;
}



.register_sts_check {
    display: none;
}

.btnWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.myPageProfileImg {
    border-radius: 50%;
    overflow: hidden;
}

.myPageProfileImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;";
}

.bootstrap-tagsinput .tag {
    background-color: var(--color-skillOrange);
    padding: 0 5px;
    border-radius: 3px;
}

.job .bootstrap-tagsinput .tag {
    background-color: var(--color-jobBlue);
}

.contentFull {
    width: 100%;
}

.dangerWrapper {
    border: 1px solid red;
    background-color: rgb(255 225 225);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: red;
}

.dangerWrapper a {
    text-decoration: underline;
}

.threadRow {
    display: block;
    border-bottom: 1px dashed #5d5d5d;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.threadRow:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.threadRowTop {
    margin-bottom: 20px:
}

.threadRowTtl {
    font-size: 24px;
}

.threadRowDesc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    ;
}

.threadRowDesc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    ;
}

.threadRowDesc p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.threadRowDescIcon {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-right: 10px;
    overflow: hidden;
}

.threadRowDescIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;";
}

.threadRowBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resTop .threadRowDesc p,
.threadResBox .threadRowDesc p {
    overflow: visible;
    white-space: normal;
    line-height: 1.5
}

.resTop>.threadRowBottom {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #5d5d5d;
}

.threadResBox .threadRowBottom {
    justify-content: flex-end;
}

.threadResBox {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #5d5d5d;
}

.threadLink {
    text-decoration: underline;
    margin-right: 20px;
}

.formLAb {
    font-size: 16px;
}

.header__wrap.skill {
    display: block;
}

.userContBox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 80px;
}

.userContBoxTumb {
    width: 200px;
    margin-right: 20px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
}

.userContBoxTumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

.userContBoxDet {
    padding-top: 20px;
    width: calc(100% - 220px);
}

.userContBoxDetNa {
    font-size: 30px;
    line-height: 1.06;
    margin-bottom: 20px;
}

.userContBoxDetNa {
    font-size: 30px;
    line-height: 1.06;
}

.userContBoxDetDt {
    font-size: 16px;
}

.userContBoxDetPref {
    font-size: 14px;
    margin-bottom: 10px;
}

.filePdf {
    background-color: #f5f5f5;
    padding: 20px 40px;
    display: flex;
    align-items: center;
}

.filePdf i {
    font-size: 30px;
    margin-right: 10px;
}

.pubTag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    font-size: 14px;
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 10px;
}

.evDate {
    font-size: 12px;
    display: inline-block;
    align-items: center;
    margin-left: 10px;
}

.pubTag.disa {
    background-color: #333;
    color: #FFF;
}


/* .header__wrap.job { */


/*     display: none; */


/* } */


/* .footer.skill { */


/*     display: none; */


/* } */

.footer.job {
    display: block;
}

.mb5 {
    margin-bottom: 5px;
    width: 200px;
    margin-left: 26px;
    margin-bottom: 10px;
}

.mr10 {
    margin-right: 10px;
}

.cateArea {
    margin-bottom: 100px;
}

.slick-slide {
    height: auto !important;
}

.conf_txt {
    line-height: 1.5;
    margin-bottom: 20px;
    display: block;
}

input[type=checkbox],
input[type=radio] {
    margin: 0px 5px 3px;
}

input[type=checkbox],
input[type=radio] {
    margin: 0px 10px 3px 0;
}

label {
    font-weight: normal;
}

.formRowRight label {
    margin-right: 10px
}

.w_auto {
    width: auto;
}

.pager li>a,
.pager li>span {
    border-radius: 50%;
}

.sp-show {
    display: none;
}

.svgTitleContainer .title {
    margin-bottom: 50px;
}

.svgTitleContainer .title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.svgTitleContainer .textWrap {
    margin-right: 40px;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 3rem;
    line-height: calc(32/30);
}

.svgTitleContainer .textWrap .subText {
    color: var(--color-skillOrange);
    font-size: 1.4rem;
    line-height: calc(35/14);
    display: flex;
    justify-content: center;
}

.job .svgTitleContainer .textWrap .subText {
    color: var(--color-jobBlue);
}

.lineImg {}

.nani.col3Wrap {
    text-align: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    align-items: stretch;
    flex-direction: row;
}

.nani.col3Wrap .col{
    margin-bottom: 20px;
}

.nani.col3Wrap .title {
    font-size: 1.8rem;
    line-height: calc(28/18);
    margin-bottom: 18px;
    min-height:56px;
}

.nani.col3Wrap .text {
    font-size: 1.4rem;
    line-height: calc(22/14);
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 23px;
}

@media screen and (max-width:991px) {
.acd-check:checked+.acd-label+.acd-content {
	padding: 10px 12px;
}
    .col3Wrap {
        justify-content: center;
        flex-wrap: wrap;
    }

    .nani.col3Wrap .title {
        font-size: 1.4rem;
        line-height: calc(28/18);
        margin-bottom: 18px;
        font-weight: 600;
    }

    .nani.col3Wrap .text {
        font-size: 1.4rem;
        line-height: calc(22/14);
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 13px;
    }
}

@media screen and (max-width:560px) {
    .nani.col3Wrap .title {
        font-size: 1.2rem;
    }

    .nani.col3Wrap .text {
        font-size: 1.3rem;
        margin-right: 0px;
        margin-left: 0px;
    }

}

@media screen and (max-width:480px) {

	.sectionTitle.flex {
	    flex-wrap: wrap;
	}

    .col3Wrap .col {
        width: 100%;
    }

    .nani .commonCardImgWrap {
        width: 100%;
    }

    .title {
        min-width: auto;
        margin-bottom: 10px;
    }
    .nani.col3Wrap .col{
        margin-right: 0;
        margin-left: 0;
    }
    .nani.col3Wrap .text {
        font-size: 1.3rem;
    }

    .break {
        display: none;
    }
    .nani .commonCard {
        height: auto;
    }
    .nani .commonCard.sc_tab_head {
        height: auto;
    }


}

.formRowRight table {
    margin: 10px 0;
    width: 100%;
}

.formRowRight th,
.formRowRight td {
    padding: 5px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.commonDatalist {
    border-bottom: 1px solid var(--color-grey-dddddd);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.formRow .commonDatalist:last-child {
    margin-bottom: 60px;
}

.commonDatalist dl {
    display: flex;
}

.commonDatalist dt {
    min-width: 100px;
    margin-right: 10px;
}

.formRowRight .commonTable2 th,
.formRowRight .commonTable2 td {
    text-align: center;
    padding: 5px 10px;
}

.formRowRight th {
    width: 150px;
    min-width: 170px;
}

.searchInnerFormRow {
    display: flex;
    margin: 0 -10px;
    margin-bottom: 30px;
    align-items: center;
}

.searchInnerFormRow>* {
    margin: 0 10px
}

.searchInnerFormRow>button {
    flex-basis: 150px
}

.skill .w_ca_chk:checked+.popularCategoryWrap {
    background-color: var(--color-skillOrange);
    color: #FFF;
}

.searchBox .remodal-close {
    left: unset;
    right: 30px;
    top: 20px;
}

.searchBox .remodal-close:before {
    font-size: 35px;
}

.validate~.error {
    display: block;
    margin-top: 10px;
}

@media screen and (max-width: 991px) {
	.validate~.error {
    	margin-top: 0px;
    	margin-bottom: 10px;
	}
}

.remodal.minimum {
    max-width: 460px;
}

.modalInUserWrap {}

.modalInUser {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d5d5d5;
}

.modalInUser:last-child {
    border-bottom: none;
}

.modalInUser .myPageProfileImg {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-bottom: 0;
}

.mainVisualTop {
    display: flex;
    overflow: hidden;
    position: relative;
    margin-bottom: 120px;
}

.mainVisualTop .col {
    width: 50%;
}

.title.active {
    font-size: 45px;
}

.mainVisualImg {
    position: relative;
}

.Visual {
    max-height: 750px;
    height: 100%;
    overflow: hidden;
}

.Visual img {
    object-fit: cover;
}

.mainVisualImg.skill img,
.mainVisualImg.job img {
    transform: scale(1);
    transition: .3s;
    min-height: 600px;
}

.mainVisualImg.skill:hover img,
.mainVisualImg.job:hover img {
    transform: scale(1.1);
    transition: .3s;
}

.mainVisualImg.skill:before,
.mainVisualImg.job:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
    opacity: .0;
    z-index: 2;
}

.mainVisualImg.skill:hover .subTextWrap,
.mainVisualImg.job:hover .subTextWrap {
    opacity: 1;
    transition: .3s;
    margin-top: 30px;
    white-space: nowrap;
}

.mainVisualImg.skill:hover:before {
    transition: .3s;
    background: #FF6473;
    opacity: .25;
}

.mainVisualImg.job:hover:before {
    transition: .3s;
    background: #01B8BF;
    opacity: .25;
}

.mainVisualImg.skill .subTextWrap {
    transition: .3s;
    opacity: 0;
    z-index: 1;
    line-height: 1.2;
    margin-top: 30px;
    white-space: nowrap;
}

.mainVisualImg.skill:hover .subTextWrap {
    transition: .3s;
    opacity: 1;
}

.mainVisualImg.job .subTextWrap {
    transition: .3s;
    opacity: 0;
    z-index: 1;
    margin-top: 30px;
    white-space: nowrap;
}

.mainVisualImg.job:hover .subTextWrap {
    transition: .3s;
    opacity: 1;
    margin-top: 30px;
    white-space: nowrap;
}

.mainVisualImg .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    font-size: 40px;
    z-index: 1;
}

.mainVisualImg .title.bigger {
    font-size: 70px;
}

.mainVisualTop .col:first-child .mainVisualImg .title {
    font-size: 45px;
}

.subTextWrap {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateY(-70%) translateX(-50%);
    margin: auto;
    text-align: center;
}

.mainVisualTop .subText {
    font-size: 22px;
    margin-bottom: 22px;
}

.mainVisualTop .subText.sm {
    font-size: 16px;
}

.mainVisualImg {
    color: #FFF;
}

.mainVisualTop .floatText {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateY(-20%) translateX(-50%);
    margin: auto;
    z-index: 3;
    color: #FFF;
    font-size: 35px;
    line-height: 1.4;
}

.mainVisualTop .banner {
    background-color: var(--color-grey-f5f5f5);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(-0%) translateX(-50%);
    max-width: 1200px;
    width: 100%;
    height: 80px;
    border-radius: 10px 10px 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.circleSvg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    z-index: 3;
}

.circleBase {
    position: relative;
}

.circleSvg .circleBase {
    width: 292px;
    height: 292px;
    border-radius: 50%;
    background-color: #000000;
    border: 8px solid #FFF;
    opacity: .5;
    transition: .3s;
    margin: 8px;
}

.circleSvg:hover .circleBase {
    transition: .3s;
    opacity: .3;
}

.circleSvg:hover .circleBase svg {
    fill: rgba(0, 0, 0, 0.3);
}

.circleTextWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 18px;
    text-align: center;
    color: #FFF;
}

.circleTextWrap .poppins {
    font-size: 30px;
    white-space: nowrap;
}

.circleLayer {
    position: absolute;
    top: 0;
    -moz-animation: spinoffPulse 7.5s infinite linear;
    -webkit-animation: spinoffPulse 7.5s infinite linear;
}

.youtubeImg {
    margin-right: 10px;
}

.youtubeImg svg {
    width: 28px;
}

.haIbe {
    height: 50px;
    overflow: hidden;
}

.entry_logosWrap {
    display: flex;
    gap: 0 12px;
}

.genreseaWrap {
    margin: 0 -10px
}

.genreseaWrap>* {
    margin: 0 10px 10px
}

.entry_logos {
    max-width: 200px;
    display: block;
    text-align: center;
    margin-right: 10px;
border: 1px solid #FF6473;
    padding: 15px;
    border-radius: 5px;
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.mbs.mypageTable .formRow {
    margin-bottom: 10px;
}

.btnSearchFixed.spBannerFixed {
    bottom: 5.5%;
    right: 30%;
    width: auto;
    height: 40px;
    transform: translateX(4%);
    font-size: 16px;
    white-space: nowrap;
    background-color: var(--color-red2);
    padding-left: 10px;
    z-index: 3;
}

.btnSearchFixed.spBannerFixed a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.posRel {
    position: relative;
}

.posRelWrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.spBannerFixed .fa-times {
    position: absolute;
    right: 6%;
    top: 30%;
}

.longBannerPc {
    display: block;
}

.longBannerSP {
    display: none;
}

.portforioWrap .commonCardTitle {
    font-size: 16px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #DDD;
}

.portforioWrap .commonCardDesc {
    font-size: 14px;
}

.portforioWrap .commonCardTag {
    background-color: #e4ffff
}

.portforioWrap .commonCardImgWrap {
    height: 230px;
}

.portforioWrap.writer .commonCardCategory {
    position: relative;
    background-color: #005AC1;
}

.commonCardCategory.writer {
    position: relative;
    background-color: #005AC1;
}

.searchBorderBox {
    border: 2px solid #DDD;
    padding: 20px;
    border-radius: 10px;
margin-bottom: 50px;
}

.hashtagWrap {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.hashtagWrap .col {
    margin-right: 20px;
    margin-bottom: 10px;
}

.hashtagBtn {
    border: 1px solid;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.7;
    border-radius: 50px;
    height: 60px;
    position: relative;
    padding-right: 45px;
    padding-left: 10px;
}

.hashtagWrap .commonCardBookmark {
    position: absolute;
    top: 8%;
}

.hashtagBtn .fa-heart {
    font-size: initial;
}

.job .hashtagBtn {
    border-color: var(--color-jobBlue);
    color: var(--color-jobBlue);
}

.swTop {
    margin-bottom: 40px;
}

.imgCenter img {
    margin: auto;
}

.swCon {
    max-width: 720px;
    padding: 0 10px;
    margin: 0 auto 40px auto;
}

.swConDesc {
    font-size: 18px;
    line-height: 2;
    margin: 0 auto 40px auto;
}

.lowerStyle {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 70px;
}

.lowerStyle .tx-center {
    text-align: center;
}

.lowerStyle .ttls {
    text-align: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.ttlsText {
    font-weight: bold;
}

.lowerStyle .ttlsCahat {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 40px;
}

.lowerStyle .lowerStyle .lowerStyle .lowerStyle .lowerStyle .lowerStyle .lowerStyle {}

.uBo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.uBoIcon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}

.uBoIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lowerStyle .flowBlock {
    border-bottom: 1px solid #b5b5b5;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.lowerStyle .flowBlockTtl {
    font-size: 20px;
    margin-bottom: 20px;
}

.lowerStyle .flowBlockDesc {
    margin-bottom: 20px;
}

.lowerStyle .flowBlockDescRows {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 40px
}

.lowerStyle .flowBlockDescRowsImg {
    flex-basis: 240px;
}

.lowerStyle .flowBlockDescRowsStr {
    flex-basis: calc(100% - 260px);
    margin-left: 20px;
}

.lowerStyle .flowBlockDescRowsStrTtl {
    margin-top: 20px;
    font-size: 20px;
    margin-bottom: 30px;
}

.formFlex {
    display: flex;
    align-items: center;
}

.formFlex span {
    margin: 0 10px;
}

.remodal h2 {
    font-size: 24px;
    font-weight: bold;
}

.remodal p {
    font-size: 16px;
    line-height: 1.7;
}

.chatTextArea.ZoomObject {
    border-radius: 12px;
    padding: 10px 30px;
    background-color: #FFF;
    border: 2px solid var(--color-jobBlue);
    color: var(--color-black);
    max-width: 100%;
    width: 100%;
    text-align: center;
}

.chatTextArea.ZoomObject .ttt {
    font-size: 24px;
    font-weight: bold;
}

.chatTextArea.ZoomObject .topc {
    font-size: 18px;
    font-weight: bold;
}

.chatTextArea.ZoomObject .strt {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    ;
}

.pageIndex .searchWrapper {
    display: none;
}

.link-under-bar {
    text-decoration: underline;
}

.memo {
    width: 100%;
    height: 80px;
}

@media only screen and (min-width: 641px) {
    .remodal.searchBox {
        max-width: 1000px;
    }
}

@media screen and (max-width: 1600px) {
    .headerLeft .header__nav__list {
        /* flex-wrap: wrap; */
        justify-content: flex-start;
    }

    .headerItemCircle::before {
        display: none;
    }

    .skill .headerItemCircle {
        margin-left: 0;
        margin-top: 10px;
    }

    .header__nav__list__item {
        margin-right: 20px;
        /*margin-left: 5px;*/
    }

    .headerRight {
        width: auto;
    }
}

@media screen and (max-width:1420px) {
    .headerLeft .header__nav__list {
        flex-wrap: wrap;
    }

    .header__nav__list__item {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .circleSvg .circleBase {
        width: 202px;
        height: 202px;
    }

    .circleTextWrap .poppins {
        font-size: 22px;
    }
}

@media screen and (max-width: 1240px) {
    .inputHeaderSearch {
        width: 190px;
    }

    .commonCardTextWrap {
        display: flex;
        flex-wrap: wrap;
    }

    .commonCardTextWrap.iconRoboto {
        flex-basis: 100%;
    }

    .evDate {
        flex-basis: 100%;
        margin-left: 0;
        margin-bottom: 15px;
    }

    .commonCardTextWrap .courseTime {
        flex-basis: 100%;
        text-align: left;
    }

    .commonCard a {
        flex-basis: 100%;
    }

    .commonCard a.commonCardTag {
        flex-basis: auto;
        height: auto;
    }

    .skill .commonCardTag {
        flex-basis: auto;
        height: auto;
    }
}

@media screen and (max-width: 1010px) {}

@media screen and (max-width: 991px) {
    .portfolioWrap {
        flex-wrap: wrap;
    }

    .portfolioImage {
        width: auto;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 30px;
    }

    .portfolioImage+.portfolioDesc {
        width: 100%;
        margin-left: 0px;
    }

    .sp-hide {
        display: none;
    }

    .header__nav_sp {
        display: block;
    }

    .header__nav {
        width: 100%;
    }

    .header__wrap {
        height: 60px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
    }

    .header__logo {
        max-width: 180px !important;
        margin-right: 10px;
        margin-top: 8px;
    }

    .header__nav.header__nav_pc {
        display: none;
    }

    .pankuzu {
        margin-bottom: 30px;
    }

    .pageTitle {
        font-size: 26px;
        margin-bottom: 30px;
        line-height: 1.4;
    }

    .commonCardImgWrap {
        width: 100%;
    }

    .bannerContianer {
        margin-bottom: 30px;
    }

    .bannerContianer img {
        width: 100%;
    }

    .slick-initialized .recommendContainer.slick-slide {
        flex-direction: column;
    }

    .recommendContainer .commonCardImgWrap {
        width: 100%;
        height: auto;
    }

    .commonCardImage {
        margin-bottom: 5px;
        width: 100%;
    }

    .commonLogoImgWrap .commonCardImage {
        padding: 0px 10px;
    }

    .footerWrap {
        flex-direction: column;
    }

    .footerAtagWrap {
        margin-bottom: 20px;
        border-left: none;
    }

    .popularCategoryWrap.col {
        flex-basis: 43%;
    }

    .popularTagWrap.col {
        height: 40px;
    }

    .popularTeacherName {
        width: 70%;
        margin-right: auto;
        margin-left: auto;
    }

    .popularTeacherCategory {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .popularTeacherCategory span {
        margin-bottom: 5px;
    }

    .btnConcierge {
        position: unset;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 30px;
        height: 50px;
        line-height: 1.4;
        margin-top: 10px;
    }

    .withSideBarLeft {
        max-width: none;
        width: 100%;
        border-right: none;
        padding-right: 0px;
        margin-bottom: 30px;
        border-bottom: 1px solid #000;
        padding-bottom: 30px;
    }

    .withSideBarRight {
        padding-left: 0px;
        max-width: none;
        width: 100%;
    }

    .withSideBarRight .courseTeacher {
        text-align: center;
    }

    .withSideBarRight img {
        margin-right: auto;
        margin-left: auto;
    }

    .withSideBarRight .popularTeacherCategory {
        text-align: center;
    }

    .commonInfo .flexSpaceBetween {
        flex-direction: column;
    }

    .flexSpaceBetween .sbLeft,
    .flexSpaceBetween .sbRight {
        margin-bottom: 15px;
    }

    .sectionTitle {
        font-size: 20px;
    }

    .borderContainer {
        padding: 10px;
    }

    #commonDesc02 {
        margin-bottom: 30px;
    }

    .reviewRow {
        flex-direction: column;
    }

    .col2Wrap.createAccountTitle {
        flex-direction: column;
    }

    .createAccountTitle .col {
        flex-basis: 100%;
        width: 100%;
    }

    .createAccountTitle .col span {
        font-size: 23px;
    }

    .createAccountTitle .col p {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .commonTitle {
        font-size: 20px;
        text-align: center;
    }

    .commonTitleSub {
        font-size: 16px;
    }

    .col2Border.col {
        padding-right: 10px;
        padding-left: 10px;
        flex-basis: 100%;
    }

    .createAccountCol2Wrap .col2Border.col:first-child {
        border-right: none;
        border-bottom: 1px solid var(--color-grey-dddddd);
        padding-bottom: 30px;
        margin-bottom: 30px;
        width: 100%;
        flex-basis: 100%;
    }

    .createAccountCol2Wrap {
        padding-bottom: 30px;
        margin-bottom: 30px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .col2Border .col {
        margin-bottom: 30px;
    }

    .borderForm .withSideBarLeft {
        flex-direction: column;
        padding-right: 0px;
        padding-left: 0px;
        margin-top: 30px;
    }

    .borderForm .withSideBarRight {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .formRow {
        flex-direction: column;
    }

    .formRow.alignCenter {
        align-items: initial;
    }

    .formRowRight {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .commonInputText {
        margin-bottom: 10px;
    }

    .commonInputSelect.year {
        width: auto;
    }

    .commonInputSelect {
        width: auto;
        padding: 0 5px;
    }

    .to-top {
        bottom: -20%;
        right: 20px;
        width: 55px;
        height: 55px;
    }

    .loginForm .btnContainer {
        flex-direction: column;
    }

    .loginForm .btnBorderRadius {
        margin-right: 0;
        max-width: 212px
    }

    .borderForm.withSideBarContainer {
        padding: 0px;
        box-shadow: unset;
    }

    .mypageWrap .withSideBarContainer.borderForm {
        padding-left: 0px;
        padding-right: 0px;
        flex-direction: column-reverse;
    }

    .mypageWrap .borderForm .withSideBarLeft {
        margin-right: 0px;
        max-width: unset;
    }

    .sideBarMenu {
        max-width: unset;
    }

    .mypageWrap .borderForm .withSideBarRight {
        max-width: unset;
        padding-left: 0px;
    }

    .pager {
        display: flex;
        justify-content: center;
    }

    .commonListDescRow {
        flex-direction: column;
        align-items: flex-start;
    }

    .commonListDescRow .desc {
        width: 100%;
    }

    .commonListRow {
        flex-direction: column;
    }

    .commonListRowLeft {
        margin-right: 0px;
    }

    .commonListDescRow .title {
        font-weight: bold;
    }

    .pager>li.pagerArrow>a {
        width: 28px;
    }

    .tagContainerTitle {
        width: 100%;
    }

    .contentWrap.topArea {
        margin-bottom: 30px;
    }

    .col4Wrap .commonCardImgWrap {
        max-height: unset;
    }

    .commonListButtonArea {
        flex-direction: column;
    }

    .commonListButtonArea .btnSquare {
        margin-bottom: 10px;
        width: 100%;
    }

    .commonListButtonArea.col3 {
        flex-direction: column;
    }

    .commonListButtonArea.col3 .btnSquare {
        width: 100%;
        margin-bottom: 30px;
    }

    .commonChatContents {
        padding: 0px;
    }

    .chatInputContainer .formTextArea {
        width: 100%;
    }

    .job .btnSquare {
        height: 40px;
        width: 100%;
        margin-left: 0;
    }

    .btnSquare.w-40 {
        width: 40%;
    }

    .formCheckBoxWrap {
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom: 10px;
    }

    .formCheckBoxWrap input {
        margin-right: 10px;
    }

    .myPageProfileBox {
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
    }

    .myPageProfileImgWrap {
        margin-right: 0px;
    }

    .formRowLeft {
        margin-bottom: 10px;
    }

    .mypageWrap {
        padding-top: 30px;
    }

    .formRowRight.fdCol {
        flex-direction: column;
        align-items: baseline;
    }

    .commonInputBetweenText {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .job .btnBorderRadius.bgWhite,
    .skill .btnBorderRadius.bgWhite {
        width: 100%;
        max-width: unset;
        margin-left: 0px;
    }

    .flexSpaceBetween {
        flex-direction: column;
    }

    .mypageWrap:before {
        display: none;
    }

    .col.categoryCard {
        max-height: 50px;
        margin-bottom: 20px;
    }

    .btnMedium.smaller {
        width: 100%;
    }

    .btnMedium.wid320 {
        width: 100%;
    }

    .remodal.searchBox {
        padding: 20px;
    }

    .remodal.searchBox .modalBox {
        padding: 60px 5px 33px 5px;
    }

    .commonSearchBox {
        /* width: 100%; */
        flex-direction: column;
        height: auto;
    }

    .searchCombo {
        width: 100%;
        margin-right: 0;
    }

    .btnSearchAbs {
        top: 65%;
    }

    .searchText {
        width: 100%;
        height: 60px;
        border-top: 1px solid var(--color-jobBlue);
    }

    .modalBox .searchText {
        margin-top: 10px;
        border-top: none
    }

    .searchBorder {
        display: none;
    }

    .searchComboWrap {
        width: 100%;
    }

    .ckbWrap {
        margin-bottom: 10px;
    }

    .searchBoxSelectWrap {
        margin-bottom: 10px;
    }

    .acd-label {
        display: flex;
    }

    .bannerTitle {
        font-size: 17px;
    }

    .bannerTitle.mb30 {
        margin-bottom: 10px;
    }

    .absTextArea .btnBorderRadius.narrower {
        margin-bottom: 0;
    }

    .btnSearchFixed {
        right: 30px;
    }

    .commonSearchBox.outOfMordal {
        width: 100%;
        margin-bottom: 10px;
    }

    .job .topSearchContainer .topSearchBox {
        flex-direction: column;
    }

    .topSearchContainer.contentWrap {
        max-width: 1000px;
        padding: 0 20px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 80px;
        width: 100%;
        height: auto;
    }

    .sp-show {
        display: block;
    }

    .newsRow p {
        max-width: unset;
        width: calc(100% - 130px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-x: hidden;
    }


    .type-sp {
        max-width: 220px;
    }

    .btnBorderRadius2 {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
        color: #FFF;
        margin-bottom: 20px;
        width: 50%;
        text-decoration: none;
        margin-right: 0px;
        font-weight: 600;
        font-size: 1.2em;
    }

    .sp-center {
        align-items: center;
    }

    .topSearchBox {
        flex-direction: column;
    }

    .fbLeft.flexWrap {
        flex-direction: column;
    }

    .sectionTitle.smaller {
        font-size: 15px;
    }

    .col2Wrap .col {
        margin-bottom: 30px;
    }

    .sliderTop.imgOnly .slick-prev {
        left: 0;
    }

    .sliderTop.imgOnly .slick-next {
        right: 0;
    }

    .sliderBlogPost .slick-pref {
        left: 0;
    }

    .sliderBlogPost .slick-next {
        right: 0;
    }

    .sliderTop .commonCardImgWrap {
        max-width: unset;
    }

    .commonCardTextWrap {
        padding: 10px;
        max-width: unset;
    }

    .sliderTop .commonCardImgWrap {
        max-width: 310px;
    }

    .absTextArea {
        width: 90%;
    }

    .commonListRowRight {
        width: auto;
        margin-left: 0px;
    }

    .job .btnBorderRadius {
        margin-right: auto;
        margin-left: auto;
        width: 90%;
    }

    .companyMidashii {
        margin-right: 10px;
        margin-left: 10px;
    }

    .colFreeWrap .col.s25,
    .colFreeWrap .col.s50 {
        flex-basis: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .borderForm {
        padding: 10px 20px;
        margin-bottom: 30px;
    }

    .borderForm .createAccountCol2Wrap {
        margin-right: 0;
        margin-left: 0;
    }

    .cardRow {
        flex-wrap: wrap;
    }

    .commonCardIconWrap {
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }

    .jobDetailBtnLayout .btnMedium.bgRequired {
        max-width: unset;
        margin-right: 0;
    }

    .jobDetailBtnLayout .btnMedium.jobSkillBorder {
        max-width: unset;
    }

    .chatInputContainer .btnSquare {
        width: 100%;
        height: 30px;
        margin-left: 0;
    }

    .dltable dl {
        flex-wrap: wrap;
    }

    .dltable dd {
        flex-basis: 100%;
    }

    .dltable dd.row2 {
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .miniPopFixed {
        width: 90%;
    }

    .animeFukidasi .fukidasiImg {
        margin-right: auto;
        margin-left: auto;
    }

    .bgLightOrange {
        padding-bottom: 60px;
    }

    .col5Wrap .col {
        margin-bottom: 30px;
    }

    .btnListGrey {
        margin-bottom: 30px;
    }

    .svgTitleContainer .textWrap {
        font-size: 2.5rem;
    }

    .bannerContianer.flex div:first-child {
        margin-bottom: 30px;
    }

    .bannerContianer.flex {
        flex-wrap: wrap;
    }

    .btnConciergeFixed {
        right: 130px;
    }

    .circleSvg .circleBase {
        width: 93px;
        height: 93px;
        border: 2px solid #FFF;
        margin: 2px;
    }

    .circleTextWrap .poppins {
        font-size: 14px;
        white-space: normal
    }

    .mainVisualTop {
        flex-wrap: wrap;
    }

    .mainVisualTop .col {
        width: 100%;
    }

    .mainVisualImg .title {
        font-size: 20px;
        left: 50%;
        top: 18%;
        min-width: unset;
        padding: 8px 4px;
    }

    .mainVisualImg .title.bigger {
        font-size: 25px;
    }

    .mainVisualImg.skill .title {

        width: 100%;
        text-align: center;
    }

    .mainVisualImg.job .title {
 
        width: 100%;
        text-align: center;
    }

    .subTextWrap {
        position: absolute;
        top: 75%;
        left: 35%;
        text-align: left;
    }

    .mainVisualTop .subText {
        font-size: 20px;
    }

    .main {
        margin-top: 80px;
    }

    .topPage.main {
        margin-top: 60px;
    }

    .main.extend {
        margin-top: 60px;
    }

    .mainVisualTop .banner {
        display: none;
    }

    .btnSearchFixed.plus {
        height: 50px;
        width: 50px;
        padding: 0;
    }

    .commonCardTagWrap {
        height: auto;
    }

    .mypageTable .formRowRight {
        margin-left: 0;
    }

    .loginForm {
        margin-top: 120px;
    }

    .userContBoxDet {
        width: auto;
    }

    .userContBox {
        flex-wrap: wrap;
    }

    .userContBoxTumb {
        margin-right: auto;
        margin-left: auto;
    }

    .mainVisualImg.skill img,
    .mainVisualImg.job img {
        width: 100%;
    }

    .footerBannerArea {
        margin-left: unset;
        margin-right: auto;
    }

    .headerUserImg:hover .sideBarMenu,
    .sideBarMenu:hover {
        width: auto;
    }

    .commonCard.col {
        flex-basis: calc(50% - 20px);
        width: calc(50% - 20px);
    }

    .swConDesc {
        font-size: 14px;
    }

    .commonBtnWrap {
        flex-wrap: wrap;
    }

    .commonBtnWrap .btnBorderRadius {
        padding: 0 20px;
        width: 100%;
    }

    .lowerStyle {
        font-size: 14px;
    }

    .lowerStyle .flowBlockDescRows {
        flex-wrap: wrap;
        margin-bottom: 20px
    }

    .lowerStyle .flowBlockDescRowsImg {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .lowerStyle .flowBlockDescRowsStr {
        flex-basis: calc(100%);
        margin-left: 0;
    }

    .lowerStyle .flowBlockDescRowsStrTtl {
        margin-top: 20px;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .lowerStyle .ttlsCahat {
        font-size: 14px;
    }

    .sideBarSortMenu {
        flex-wrap: wrap;
    }

    .btnSquare.w-40 {
        top: 55%;
    }
    
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 500px) {
    .btnSearchFixed.spBannerFixed .text {
        display: none;
    }

    .longBannerPc {
        display: none;
    }

    .longBannerSP {
        display: block;
    }

    .commonCard.col {
        flex-basis: 100%;
        width: 100%;
    }
    
}

@media screen and (max-width: 500px) {}


/*---2021/10/12修正追記---*/

.commonListDescRowtitle {
    padding-bottom: 1.5rem;
}

.maintitle {
    font-weight: bold;
    font-size: 1.5rem;
}

.commonDesc01btn {
    text-align: right;
    color: white;
    margin: 40px 0;
}

.commonDesc01btnwrapper {
    background-color: #3572B5;
    display: inline;
    padding: 15px 40px;
    border-radius: 10px;
}

.commonDesc01img {
    width: 25%;
    height: auto;
    background: gray;
}

.commonListRowwrap {
    display: flex;
}

.commonListRowwrap p {
    width: 10%;
    font-size: bold;
}

.commonListRow1 {
    width: 90%;
    padding: 20px;
    border: 1px solid var(--color-grey-dddddd);
    border-radius: 3px;
    margin-bottom: 30px;
}

.CLRwrapper {
    display: flex;
}

.CLR1ttl {
    width: 10%;
    font-weight: bold;
}

.CLR1 {
    width: 90%;
    text-align: end;
}

.sectionTitlewrapper {
    display: flex;
}

.sectionTitlewrapper p {
    margin-left: 2rem;
}

.commonListButtonArea2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-grey-dddddd);
}


/* 11_22追記 */

.no_display {
    display: none;
}


/* 11_24追記 */

.file_btn {
    background-color: var(--color-jobBlue);
    color: #fff;
    padding: 4px 9px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbnail_box {
    margin-right: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    max-height: 190px;
}

@media screen and (max-width: 991px) {
    .thumbnail_box {
        margin-right: 0;
    }
}

.thumbnail_box .thumbnail_img {}


/* 11_25追記 */

.desc_memo {
    width: 100%;
    border: 1px solid var(--color-grey-dddddd);
    padding: 10px 20px;
    font-size: 14px;
    line-height: calc(24/14);
}


/* skill/first.php */

.first_main {
    padding: 215px 0 0 0;
}

@media screen and (max-width: 1250px) {
    .first_main {
        padding: 215px 30px 0 30px;
    }
}

.first_logo_block {
    display: flex;
    justify-content: center;
    background: url(../img/first/common/back_gray.png) center bottom no-repeat;
    background-size: content;
    padding-bottom: 136px;
}

.first_logo_block .first_logo_box:first-child {
    margin-right: 125px;
    margin-top: 68.7px;
}

.first_logo_block .first_logo_box:nth-child(2) {
    margin-right: 80.5px;
}

.first_logo_block .first_logo_box:nth-child(3) {
    margin-top: 68.7px;
}

.first_content_wrap {
    background-color: #F5F5F5;
    width: 100%;
    padding-bottom: 100px;
}

.first_content_block {
    background-color: #FF6473;
    max-width: 1180px;
    width: 100%;
    margin: -80px auto 200px;
    border-radius: 40px;
    padding-bottom: 90px;
    padding-right: 10px;
    padding-left: 10px;
}

.anker_img_block {
    display: flex;
    justify-content: center;
    margin-top: -30px;
}

.first_content_text_box {
    text-align: center;
    margin-bottom: 80px;
    color: #fff;
    font-size: 22px;
    padding-top: 140px;
    line-height: 1.7;
    font-weight: 600;
}

.first_content_infBox {
    /* margin-bottom: 90px; */
}

.first_content_infBox img {
    margin: 0 auto;
    border-radius: 200px;
}

.cycle_h2 {
    text-align: center;
    font-weight: bold;
}

.cycle_h2 p {
    color: #FF6473;
    margin-bottom: -21px;
    font-size: 20px;
}

.cycle_h2 h2 {
    font-size: 30px;
    font-weight: bold;
}

.cycle_h2 h2:before {
    content: url(../img/first/common/title_line.png);
}

.cycle_h2 h2:after {
    content: url(../img/first/common/title_line_right.png);
}

.cycle_block {
    max-width: 700px;
    width: 100%;
    margin: 80px auto 70px;
}

.first_button_box {
    width: 362px;
    margin: 0 auto;
}

.first_button_box p {
    color: #FF6473;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
}

.first_button_box a {
    width: 100%;
    background-color: #FF6473;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.first_content_wrap--white {
    padding-top: 155px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 10px;
}

.fcww_h2 {
    margin: 140px auto 52.5px;
    text-align: center;
}

.fcww_h2 h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5;
}

.fcww_h2 img {
    margin: 0 auto 10px;
}

.diss_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 66.5px;
    flex-wrap: wrap;
    gap: 20px 0;
}

.first_arrow_box img {
    margin: 0 auto 53.5px;
}

.fcww50 {
    margin-bottom: 50px;
}

.fcwwCenter {
    text-align: center;
}

.first_point_block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 69.4px;
    flex-wrap: wrap;
}

.first_point_box {
    width: 373px;
}

.first_point_box img {
    margin: 0 auto 29px;
}

.first_point_title {
    font-size: 20px;
    font-weight: bold;
    color: #FF6473;
    margin-bottom: 10px;
    line-height: 1.4;
}

.first_point_textBox {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    min-height: 280px;
}

.first_make_block {
    margin-top: 167px;
    background-color: #FFF8E2;
    border-radius: 20px;
    padding-top: 123px;
    padding-bottom: 99px;
    margin-bottom: 120px;
}

.first_make_title {
    text-align: center;
    margin-bottom: 60px;
}

.first_make_title p {
    font-size: 20px;
    margin-bottom: 10px;
}

.first_make_title h2 {
    font-size: 30px;
    font-weight: bold;
}

.make_comment_box {
    margin-bottom: 30px;
}

.make_comment_box img {
    margin: 0 auto;
}

.fitst_make_middleBlock {
    /* margin: 0 100px 40px; */
    display: flex;
    justify-content: center;
    height: 250px;
    position: relative;
    max-width: 980px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

.fitst_make_middleBoxL {
    background-color: #FFF9C3;
    width: 500px;
    padding-right: 51px;
    border-radius: 10px 0 0 10px;
}

.fitst_make_middleBoxL .make_sharp {
    color: #FF6473;
    font-size: 40px;
}

.fitst_make_middleBoxL img {}

.fitst_make_middleBoxL p {
    font-size: 20px;
}

.make_commentMiddle_box {
    margin-top: 64px;
}

.make_commentMiddle_box img {
    margin-left: auto;
}

.fitst_make_middleBoxR {
    background-color: #FFF050;
    width: 500px;
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    padding: 0 30px;
}

.first_make_r_textBox {
    font-size: 20px;
    font-weight: 600;
}

.make_commentMiddlePoint_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 600;
}

.arrow_make_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.make_link {
    text-decoration: underline;
    color: #FF6473;
}

.ad_make_commentMiddlePoint_box {
    display: grid;
    justify-content: flex-end;
    flex-direction: column;
    font-weight: 600;
}

.ad_make_commentMiddlePoint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ad_start_make {
    justify-content: flex-start;
}

.first_texal {
    text-align: center;
}

.first_texal p {
    margin-bottom: 10px;
}

.no_middleBlockMargin {
    margin-bottom: 0;
}

.no_middleBlockL {
    border-radius: 10px 0 0 0;
}

.no_middleBlockR {
    border-radius: 0 10px 0 0;
}

.fitst_make_middleBlock_bottom {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 60px;
    height: 508px;
    margin: 0 auto 32px;
    max-width: 960px;
    width: 100%;
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
}

.middleBlock_bottom_r img {
    margin-bottom: 19px;
}

.middleBlock_bottom_r img:last-child {
    margin-bottom: 0;
}

.middleBlock_bottom_r_link a {
    text-decoration: underline;
    color: #FF6473;
    font-size: 16p;
}

.middleBlock_bottom_r_relative {
    position: relative;
}

.middleBlock_bottom_r_relative p {
    position: absolute;
    top: 40px;
    right: 90px;
    font-weight: 600;
}

.fitst_make_middleBlock_bottom_last {
    padding-top: 60px;
    align-items: flex-start;
}

.texa {
    text-align: center;
}

.first_end_buttonBox {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 30px;
}

.first_end_buttonBox .first_button_box p {
    font-size: 20px;
    line-height: 1.4;
}

.first_end_buttonBox .first_button_box:nth-child(2) p {
    color: #01B8BF;
}

.first_end_buttonBox .first_button_box:nth-child(2) a {
    background-color: #01B8BF;
}

.first_end_link {
    font-size: 16px;
    text-decoration: underline;
    text-align: center;
    margin-bottom: 160px;
    font-weight: 500;
}

.first_main {
    scroll-behavior: smooth;
}

.first_anker {
    padding-top: 100px;
    margin-top: -100px;
}

.first_sp_br {
    display: none;
}

@media screen and (max-width: 790px) {
    .middleBlock_bottom_r_relative p {
        left: 90px;
        right: 0;
        top: 20px;
        font-size: 12px;
    }
}

@media screen and (max-width: 760px) {
    .first_point_block {
        justify-content: center;
    }
}

@media screen and (max-width: 560px) {
    .diss_box {
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {
    .first_logo_block {
        background-size: contain;
    }

    .first_logo_block {
        flex-wrap: wrap;
        flex-direction: row;
        padding-top: 100px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0;
    }

    .first_logo_block .first_logo_box:first-child {
        order: 2;
        width: 116px;
        margin: 0;
    }

    .first_logo_block .first_logo_box:nth-child(2) {
        margin: 0;
    }

    .first_logo_block .first_logo_box:nth-child(3) {
        width: 155px;
        order: 3;
        margin: 0;
    }

    .anker_img_block {
        flex-wrap: wrap;
    }

    .anker_img_block a {
        width: 170px;
    }

    .first_content_block {
        border-radius: 0;
    }

    .anker_img_block {
        margin-top: 0;
        background-color: #FF6473;
    }

    .first_content_wrap {
        padding-top: 40px;
    }

    .first_content_block {
        padding-bottom: 30px;
        margin-bottom: 40px;
    }

    .first_content_text_box {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .first_sp_br {
        display: block;
    }

    .cycle_h2 p {
        font-size: 16px;
    }

    .cycle_h2 h2 {
        font-size: 18px;
    }

    .first_button_box {
        width: 230px;
    }

    .fcww_h2 {
        margin-top: 40px;
        margin-bottom: 32px;
    }

    .fcww_h2 h2 {
        font-size: 18px;
    }

    .first_content_wrap--white {
        padding-right: 0;
        padding-left: 0;
    }

    .first_make_block {
        margin-top: 40px;
        border-radius: 0;
    }

    .fcww_h2,
    .diss_box,
    .first_arrow_box,
    .fcww_h2,
    .first_point_block {
        padding-right: 20px;
        padding-left: 20px
    }

    .first_end_buttonBox {
        flex-wrap: wrap;
    }

    .first_end_buttonBox .first_button_box p {
        font-size: 14px;
    }

    .first_end_buttonBox .first_button_box:first-child {
        margin-bottom: 30px;
    }
}


/* 20211130_mogami add */

.first_content_block_j {
    background-color: #01B8BF;
    max-width: 1180px;
    width: 100%;
    margin: -80px auto 200px;
    border-radius: 40px;
    padding-bottom: 90px;
    padding-right: 10px;
    padding-left: 10px;
}

.cyclej_h2 {
    text-align: center;
    font-weight: bold;
}

.cyclej_h2 h2 {
    font-size: 30px;
    font-weight: bold;
}

.cyclej_h2 p {
    color: #01B8BF;
    margin-bottom: -21px;
    font-size: 20px;
}

.cyclej_h2 h2:before {
    content: url(../img/first/common/title_line.png);
}

.cyclej_h2 h2:after {
    content: url(../img/first/common/title_line_right.png);
}

.firstj_button_box {
    width: 362px;
   margin: 0 auto;
}

.firstj_button_box p {
    color: #01B8BF;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
}

.firstj_button_box a {
    width: 100%;
    background-color: #01B8BF;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.first_point_titlej {
    font-size: 20px;
    font-weight: bold;
    color: #01B8BF;
    margin-bottom: 10px;
    line-height: 1.4;
}

.fitst_make_middleBoxL .make_sharpj {
    color: #01B8BF;
    font-size: 40px;
}

.first_button_box a {
    width: 100%;
    background-color: #01B8BF;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.first_end2_buttonBox {
    display: flex;
    justify-content: center;
    margin: 0 auto 30px;
}

.first_end2_buttonBox .first_button_box p {
    font-size: 16px;
    line-height: 1.4;
}

.first_end2_buttonBox .first_button_box:nth-child(2) p {
    color: #FF6473;
}

.first_end2_buttonBox .first_button_box:nth-child(2) a {
    background-color: #FF6473;
}

.first_make_r_textBox2 {
    font-size: 16px;
}

.first_make_r_textBox2 .boxSpan {
    font-size: 14px;
    line-height: 1.4;
}

.boxSpan a {
    text-decoration: underline;
    color: #01B8BF;
}

.footerWrap2 {
    display: flex;
    padding-top: 50px;
    margin-bottom: 30px;
}

.footerAtagWrap2 {
    max-width: 1200px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 100px;
}

.first_logo_block2 {
    display: flex;
    justify-content: center;
    background: url(../img/first/common/back_gray.png) center bottom no-repeat;
    background-size: content;
    padding-bottom: 136px;
}

.first_logo_block2 .first_logo_box:first-child {
    margin-right: 89px;
    margin-top: 68.7px;
}

.first_logo_block2 .first_logo_box:nth-child(2) {
    margin-right: 80.5px;
}

.first_logo_block2 .first_logo_box:nth-child(3) {
    margin-top: 68.7px;
}

.first_content_block_jm {
    background-color: #2490D0;
    max-width: 1180px;
    width: 100%;
    margin: -80px auto 200px;
    border-radius: 40px;
    padding-bottom: 90px;
    padding-right: 10px;
    padding-left: 10px;
}

.fitst_make_middleBoxL .make_sharpjm {
    color: #2490D0;
    font-size: 40px;
}

.cyclejm_h2 {
    text-align: center;
    font-weight: bold;
}

.cyclejm_h2 h2 {
    font-size: 30px;
    font-weight: bold;
}

.cyclejm_h2 p {
    color: #2490D0;
    margin-bottom: -21px;
    font-size: 20px;
}

.cyclejm_h2 h2:before {
    content: url(../img/first/common/title_line.png);
}

.cyclejm_h2 h2:after {
    content: url(../img/first/common/title_line_right.png);
}

.firstjm_button_box {
    width: 462px;
    margin: 0 auto;
}

.firstjm_button_box p {
    color: #2490D0;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
}

.firstjm_button_box a {
    width: 100%;
    background-color: #2490D0;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.first_point_titlejm {
    font-size: 20px;
    font-weight: bold;
    color: #2490D0;
    margin-bottom: 10px;
    line-height: 1.4;
}

.firstjm_button_box {
    width: 462px;
    margin: 0 auto;
}

.firstjm_button_box p {
    color: #2490D0;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
}

.firstjm_button_box a {
    width: 100%;
    background-color: #2490D0;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.firstjm2_button_box a {
    width: 100%;
    background-color: #FF6473;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.firstjm2_button_box {
    width: 462px;
    margin: 0 auto;
}

.firstjm2_button_box p {
    color: #FF6473;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
}

.first_end3_buttonBox {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 30px;
}

.first_end3_buttonBox .first_button_box p {
    font-size: 16px;
    line-height: 1.4;
}

.first_end3_buttonBox .first_button_box:nth-child(2) p {
    color: #FF6473;
}

.first_end3_buttonBox .first_button_box:nth-child(2) a {
    background-color: #FF6473;
}

.first_end4_buttonBox {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 30px;
}

.firstjm3_button_box a {
    width: 100%;
    background-color: #2490D0;
    color: #fff;
    border-radius: 30px;
    font-size: 18px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.firstjm3_button_box {
    width: 462px;
    margin: 0 auto;
}

.firstjm3_button_box p {
    color: #2490D0;
    font-size: 16px;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    font-weight: 600;
    line-height: 1.4;
}

.point_button_box {
    display: flex;
    justify-content: center;
}

.point_button_box a {
    width: 60%;
    background-color: #FF6473;
    color: #fff;
    border-radius: 30px;
    font-size: 13px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.parent {
    position: relative;
    padding: 20px;
}

#toTop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 150px;
    cursor: pointer;
}

.a-none:hover {
    text-decoration: none !important;
    color: #fff !important;
}

.td-none:hover {
    text-decoration: none !important;
}


/* 1210_tsuiki */

.popularCategoryWrap {
    transition: .3s;
}


/*-----------------------------------
.popularCategoryWrap:hover {
    transition: .3s;
    background-color: var(--color-jobBlue);
}

-----------------------------------------------*/

.popularCategoryWrap:hover a {
    text-decoration: none;
    color: #fff;
}

.dltable .first_none {
    display: none;
}

.dl_height_ad dl {
    margin-bottom: 10px;
}

.dl_height_ad dl:last-child {
    margin-bottom: 0;
}


/* 1213_tsuiki */

.formRowRight>p {
    line-height: 1.6;
}

.formTextArea {
    line-height: 1.4;
}

.skill .topSearchContainer .haIbe_ad {
    padding-right: 0;
    height: auto;
margin-bottom: 20px;
}

.co4_ad {
    gap: 20px 0;
font-weight: 500;
}

@media screen and (max-width: 500px) {
    .co4_ad {
        gap: 0;
    }
}

.flexSpaceBetween_ad {
    padding-bottom: 27px;
}

.helpWrap_ad .acd-content p {
    align-items: center;
}

.searchText_ad {
    border-top-color: var(--color-skillOrange);
}

.commonListButtonArea_ad {
    width: 100%;
}


/* 0127tsuiki*/

.CLRwrapper_fix {
    flex-direction: column;
}

.CLRwrapper_fix .CLR1ttl {
    text-align: center;
    margin-bottom: 18px;
    width: 100%;
}

.CLRwrapper_fix .commonListRow {
    width: 100%;
}

.CLRwrapper_fix .CLR1 {
    text-align: center;
}

.portfolioWrap {
    margin-bottom: 40px;
}

.commonInputText.smallest {
    width: 120px;
}

.flexSpaceBetween video {
    display: block;
    width: 70%;
    border-radius: 500px;
    margin: 0 auto;
}

.chatInputContainer .btnSquare_fix {
    height: 40px;
    margin: 0 10px;
}

.formRow_adfix {
    align-items: center;
}

.frtw {
    display: contents;
}

@media screen and (max-width: 991px) {
    .commonListButtonArea>.btnWrapppp {
        font-size: 13px;
        width: 100%;
    }

    .chatInputContainer .btnSquare {
        font-size: 13px;
    }

    .portfolioPreviewDesc {
        margin-right: 0;
        flex-basis: 100%;
    }

    .portfolioDesc {
        width: 100%;
    }

    .chatInputContainer .btnSquare_fix {
        height: 40px;
        margin: 0;
        margin-bottom: 10px;
    }

    .formRow_adfix {
        align-items: inherit;
        display: block;
    }

    .frtw {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    .firstj_button_box {
            width: 90%;
    margin: 0 auto;
    }

    .fitst_make_middleBlock {
        height: 100%;
        flex-wrap: wrap;
    }

    .fitst_make_middleBoxR {
        padding: 20px 30px;
    }

    .fitst_make_middleBoxL {
        width: 100%;
        padding-right: 0;
        border-radius: 10px 10px 0 0;
        padding: 20px;
    }

    .fitst_make_middleBoxR {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }

    .ad_make_commentMiddlePoint_box {
        display: block;
    }

    .ad_make_commentMiddlePoint {
        justify-content: flex-start;
    }

    .make_commentMiddlePoint_box {
        justify-content: flex-start;
    }

    .fitst_make_middleBlock_bottom {
        flex-direction: column;
        height: 100%;
        padding: 30px;
        gap: 30px 0;
    }

    .first_end2_buttonBox {
        flex-direction: column;
        gap: 30px 0;
    }

    .first_button_box {
        width: 90%;
        margin: 0 auto;
    }

    .anker_img_block a {
        width: 50%;
    }

    .anker_img_block_job {
        background-color: #01B8BF;
    }

    .flexSpaceBetween video {
        width: 100%;
    }

    .make_commentMiddle_box {
        margin-top: 0;
    }
}


/* 0128tsuiki*/

.job .commonCardTag {
    display: block;
}

.contact_a_box {
    /* display: contents; */
    font-size: 16px;
    line-height: calc(24/16);
}

.fmmb_wrap {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 0 10px;
}

.fmmb_top {
    background-color: #20BE0E;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 14px 0;
}

.fitst_make_middleBlock {
    padding: 0;
}

.fitst_make_middleBoxL {
    border-radius: 0 0 0 10px;
}

.fitst_make_middleBoxR {
    border-radius: 0 0 10px 0;
    background-color: #FFF7A0;
    padding:15px 30px;
}

.paypal_text {
    margin: 20px 0;
    line-height: 1.4;
}

@media screen and (max-width: 500px) {
    .first_main {
        padding-top: 0;
    }

    .contact_a_box {
        display: inline-block;
    }

    .fmmb_top p {
        line-height: 1.6;
    }
}


/* 0204tusiki */

.btnSquare_40 {
    width: 40%;
    margin: 0 auto;
}

@media screen and (max-width: 606px) {
    .btnSquare_40 {
        width: 100%;
    }
}

.acd-label {
    cursor: pointer;
}

.commonChatContents {
    padding: 0px 20px;
}

.pankuzu a:hover {
    text-decoration: none;
}


/* TODO 2022.02.08 edit nanjo start */

.to-top {
    transition: .3s all;
}

.to-top:hover {
    box-shadow: 0px 0px 6px rgb(0 0 0 / 60%);
    bottom: 6%;
}

.footerBannerArea {
    transition: .3s all;
}

.footerBannerArea:hover {
    opacity: 0.7;
}

.popularTagWrap {
    transition: .3s all;
}

.btnSearchBox {
    transition: .3s all;
    border: 1px solid transparent;
}

.popularTagWrap div {
    transition: .3s all;
}

/* TODO 2022.02.17 nanjo start */

@media screen and (min-width: 500px) {
    .skill .popularTagWrap:hover {
        background-color: var(--color-skillOrange);
        color: #fff;
    }

    .skill .popularTagWrap:hover div {
        color: #fff;
    }

    .job .popularTagWrap:hover {
        background-color: var(--color-jobBlue);
        color: #fff;
    }

    .job .popularTagWrap:hover div {
        color: #fff;
    }
}


/* TODO 2022.02.17 nanjo end */

.skill .btnSearchBox:hover {
    border-color: var(--color-skillOrange);
    color: var(--color-skillOrange);
    background-color: #fff;
}

.job .btnSearchBox:hover {
    border-color: var(--color-jobBlue);
    color: var(--color-jobBlue);
    background-color: #fff;
}

.authorizeZoom {
    margin-bottom: 10px;
}

.basicLink {
    cursor: pointer;
}

.btnMedium:hover {
    text-decoration: none;
}

.btnMedium.skill:hover {
    border-color: var(--color-skillOrange);
    color: var(--color-skillOrange);
}

.s_cd_btnBorderRadius {
    border: 1px solid transparent;
    transition: .3s all;
}

.s_cd_btnBorderRadius:hover {
    border-color: var(--color-skillOrange);
    color: var(--color-skillOrange);
    background-color: #fff;
}

.popularTagWrap a:hover {
    color: #fff;
    text-decoration: none;
}

/* TODO 2022.02.17 nanjo start */

.skill.topSearchContainer .popularTagWrap.col:hover {
    /* color: #fff; */
}

.job .topSearchContainer .popularTagWrap.col:hover {
    /* color: #fff; */
}

/* TODO 2022.02.17 nanjo end */

@media screen and (max-width: 991px) {
    .modalBox .searchText {
        border-top: 1px solid #ddd;
    }
}

.comp_regi {
    background: #ddd !important;
    border: none !important;
    color: #333 !important;
}

.commonCardTitle {
    font-weight: bold;
}

.pager>li.pagerArrow>a {
    transition: .3s;
}

.pager>li.pagerArrow>a:hover {
    color: #000;
    background: #fff;
}

.skill .centercete .btnBorderRadius:hover {
    color: var(--color-skillOrange);
}

.job .centercete .btnBorderRadius:hover {
    color: var(--color-jobBlue);
}


/* TODO 2022.02.08 edit nanjo end */


/* TODO 2022.02.08 edit naka start */

.btnListGrey a {
    justify-content: center;
}

input.font-awesome {
    margin-left: 10px;
}

.mypageWrap_befor::before {
    background-color: var(--color-jobBlue);
}

.job .commonCardTag {
    margin-bottom: 5px;
}

.mypageWrap_nk:before {
    background-color: var(--color-jobBlue);
}

.btnBorderRadius_nk {
    background-color: var(--color-jobBlue);
}

.contentWrap .btnBorderRadius_nk:hover {
    border: 2px solid var(--color-jobBlue);
    color: var(--color-jobBlue);
}

.formRowRight {
    line-height: 1.7;
}

@media screen and (max-width: 991px) {
    .col2Wrap .col {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 500px) {
    .mainVisualImg.job .title {
        margin-top: 30px;
    }
}


/* TODO 2022.02.08 edit naka end */


/* TODO 2022.02.10 edit nanjo start */
.headerUserImg {
    cursor: pointer;
}

.desc_memo {
    font-family: notosans;
}

.popluarTagContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
}

.job .kari_fix2 {
    border-color: var(--color-jobBlue);
}

.main .mypageTable .formRowLeft {
    border-bottom-width: 2px;
}

/* TODO 2022.02.10 edit nanjo end */

/* TODO 2022.02.14 edit nanjo start */
.mypageWrap .company_btn {
    transition: .3s all;
}

.mypageWrap .company_btn:hover {
    background-color: #3572B5;
    color: #fff;
}

.commonCard.col {
    min-height: 450px;
}

.anker_img_block a {
    transition: .3s all;
}

.anker_img_block a:hover {
    /* opacity: 0.9; */
    transform: translateY(-20px);
}

.commonListRowLeft img {
    width: 155px;
    height: 155px;
    border-radius: 100%;
    object-fit: cover;
}

/* TODO 2022.02.14 edit nanjo end */


/* TODO 2022.02.14 edit nanjo start */
.fullWidth.btnSquare {
    width: 50%;
    margin: 0 auto;
}

@media screen and (max-width: 500px) {
    .fullWidth.btnSquare {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .mainVisualImg .title {
        top: 20%;
    }
}

/* TODO 2022.02.14 edit nanjo end */

/* TODO 2022.02.16 edit nanjo start */
@media screen and (max-width: 500px) {
    .header__nav_sp.open .sideBarMenuRow {
        padding-left: 0;
    }

    .header__nav_sp.open .sideBarMenuRow.title {
        padding-left: 20px;
    }

    .sideBarMenuRow a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        padding-left: 20px;
    }

    .sideBarMenuRow.title {
        padding-left: 20px;
    }

    .sideBarMenuRow {
        padding-left: 20px;
    }
}

.contentWrap {
    padding-left: 20px;
}

.job .btnMedium.bgRequired.blank:hover {
    color: #fff;
    background-color: var(--color-jobBlue);
}

.skill .btnMedium.bgRequired.blank:hover {
    color: #fff;
    background-color: var(--color-skillOrange);
}

.portforioWrap .commonCardDesc {
    line-height: 1.4;
}



@media screen and (max-width: 991px) {
    .borderForm .withSideBarRight.full {
        padding-right: 0;
    }

    .acd-label {
        padding: 16px 10px;
        line-height: 1.4;
        padding-right: 34px;
        align-items: center;
    }
}

.mypageTable .formRowRight {
    border-bottom: 0px;
}

.mypageTable .commonInputText {
    border-bottom: 1px solid var(--color-grey-dddddd);
}

html input[disabled].commonInputText {
    border-bottom: 0px;
}

textarea:disabled.commonInputText {
    border-bottom: 0px;
}

select:disabled.commonInputText {
    border-bottom: 0px;
}

/* TODO 2022.02.16 edit nanjo end */



/* TODO 2022.02.21 edit nanjo start */
.tel_sp_num {
    display: none;
}

@media screen and (max-width: 500px) {
    .tel_sp_num {
        display: block;
    }

    .tel_pc_num {
        display: none;
    }
}

/* TODO 2022.02.21 edit nanjo end */


/* TODO 2022.03.03 edit nanjo start */
.commonListButtonArea {
    /* gap: 0 10px; */
}

/* TODO 2022.03.03 edit nanjo end */


/* TODO 2022.03.07 edit nanjo start */
.sectionTitle {
    margin-bottom: 30px;
}

.sectionTitle.flex {
    margin-bottom: 20px;
}

.commonCardDesc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 60px;
}

.skill.topSearchContainer .popularTagWrap.col:hover {
    color: #fff;
}

.popluarTagContainer {
    align-items: flex-start;
}

.loginForm .sectionTitle_fix .pageTitle {
    margin-bottom: 0;
}

.sectionTitle_fix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sectionTitle_fix .blueAtag {
    width: auto;
    transition: .3s all;
}
.sectionTitle_fix .blueAtag:hover {
	opacity: .6;
}

.commonListDescRow_center {
    align-items: center;
}

.popluarTagContainer,
.job .commonCardTag {
    margin-bottom: 0;
    line-height: 1.8;
}

/* TODO 2022.03.07 edit nanjo end */

.sectionTitle {
    font-size: 30px;
    font-weight: bold;
}

.myPageTitle {
    font-size: 20px;
    font-weight: bold;
}

.borderForm .sideBarTitle {
    font-size: 20px;
    font-weight: bold;
}

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

.cc_iconRoboto {
    width: 150px;
    font-size: 14px;
}

.cc_row {
    display: flex;
    font-size: 14px;
    color: #01B8BF;
    margin-bottom: 20px;

}

.cc_row .evDate {
    margin-left: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
}

.cc_row .courseTime {
    font-size: 14px;
    margin-left: 10px;
    font-weight: bold;
    line-height: 1.4;
}

.commonCardTitle p {
    font-size: 16px;
}

.courseTeacher {
    color: #489CFF;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
}

.cc_column .commonCardTag {
    font-size: 14px;
    font-weight: 500;
}

.commonCard_cc {
    position: relative;
}

.free_bottom {
    position: absolute;
    bottom: 0;
    background-color: #EFB004;
    color: #fff;
    text-align: center;
    width: 100%;
    border-radius: 0 0 5px 5px;
    height: 30px;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commonCard_cc .commonCardTitle {
    margin-bottom: 10px;
}

.price_bottom {
    background-color: #9F9F9F;
}

.commonCard.commonCard_cc {
    /* min-height: 460px; */
}

@media screen and (max-width: 500px) {
    .cc_row {
        flex-wrap: wrap;
    }
}




.commonCard_cc .commonCardTitle p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
}

.commonCard_cc .commonCardTitle {
    max-height: inherit;
}

.commonCard.commonCard_cc {
    width: 33.333%;
    min-height: 450px;
}

.sc_column.cc_column {
    width: 100%;
    overflow: hidden;
    height: 70px;
}

.sc_column.cc_column .commonCardTag {
    white-space: inherit;
    max-width: inherit;
}

@media screen and (max-width: 1240px) {
    .commonCard.commonCard_cc {
        min-height: 480px;
    }

    .cc_row {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 991px) {
    .sc_column.cc_column {
        height: 90px;
    }
}

@media screen and (max-width: 500px) {
    .commonCard.commonCard_cc {
        min-height: 520px;
    }

    .sc_column.cc_column {
        height: 110px;
    }
}



/* TODO 2022.0314 nanjo edit start */

.topSearchContainer .popluarTagContainer.haIbe_ad .popularTagWrap.col {
    margin-bottom: 0;
}

.free_bottom {
    background-color: #00BF86;
}

.price_bottom {
    background-color: #E0F7F5;
}

.price_bottom p {
    color: #0B1118;
}

/* TODO 2022.0314 nanjo edit end */

.myPageTitle+.conf_show {
    line-height: 1.4;
}

	.myPageTitle_fix {
		    font-size: 30px;
    		line-height: calc(32/30);
    		text-align: center;
	}
	.contentWrap_fix {
	    max-width: 1150px;
	        padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.withSideBarRight .formTextArea {
	    height: 100px;
}

.free_icon--detail {
	margin-right: 10px;
}

.sectionTitle_course_detail {
	margin-bottom:20px;
}

.commonDesc_course_detail {
	
}
.keireki textarea{
	resize:vertical;
}
.fmmb_text-r {
	text-align: left;
}

@media screen and (max-width:480px) {
    .nani.col3Wrap .title {
            min-height: 16px;
    }

}

@media screen and (max-width:400px) {
    .sectionTitle.flex {
           flex-direction: column;
    }

}


@media screen and (max-width:500px) {
    .col3Wrap {
           flex-direction: column;
   margin: 0;
    }


	.commonCard.commonCard_cc {
               width: 100%;
    }
    .btnMedium.jobSkillBorder.fafa:before {
		font-size: 14px;
	}
	.commonListButtonArea .btnSquare {
		font-size: 14px;
	}
	.btnMedium.bgRequired  {
		font-size: 14px;
	}

.withSideBarContainer{
margin-bottom: 10px;
}

.commonDesc {
margin-bottom: 40px;
}

.userContBox {
    margin-bottom: 40px;
}

}

.center.col2Wrap .col2Wrap .col {
    flex-basis: calc(50% - (var(--col-space) * 2));
}
@media screen and (max-width:500px) {
    .btnMedium.jobSkillBorder.fafa:before {
        font-size: 14px;
    }

    .commonListButtonArea .btnSquare {
        font-size: 14px;
    }

    .btnMedium {
        font-size: 14px;
    }

    .btnRadius {
        font-size: 14px;
    }

    .btnBorderRadius {
        font-size: 14px;
    }

    .btnSmall {
        font-size: 14px;
    }


.mypageTitleWrap {
margin-bottom: 0;
}

.commonListRowLeft {
max-width: 420px;
}
}
}

.commonDesc_detail{
margin-bottom: 40px;

}

.sideBarMenu_sticky {
position: sticky;
    top: 140px;
}

.job .entry_logosWrap .entry_logos:first-child {
    border-color: red;
}
.job .entry_logosWrap .entry_logos:last-child {
    border-color: blue;
}


.skill .entry_logosWrap .entry_logos:first-child {
    border-color: red;
}
.skill .entry_logosWrap .entry_logos:last-child {
    border-color: blue;
}

@media screen and (max-width:500px) {

.mypageTitleWrap {
margin-bottom: 50px;
}

.pager>li.pagerArrow>a {
    width: 60px;
}

.pager {
    margin-top: 50px;
}

.col3Wrap .col, {

margin: 0;
}

}

.commonCardImgWrap_new {
    height: 50px;
}



.btnSearchFixed {
    background: #3572b5;
}

@media screen and (max-width: 991px) {
    .btnSearchFixed.plus {
        height: 50px;
        width: 50px;
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .btnSearchFixed.plus {
        height: 70px;
        width: 70px;
        padding: 0;
    }

    .btnSearchBox {
        font-size: 18px;
    }
}

.mainVisualImg .title.bigger {
    font-size: 40px;
}

.mugen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;
    width: 410px;
    height: 200px;
}

.mugen_ad {
    width: 340px;
}

.j_a_mugen_ad {
    z-index: 3;
}

.m-infinity-image-light {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 40px 40px #fff;
    box-shadow: 0 0 10px 10px #fff;
    opacity: 0.9;
}

.blur {
    -ms-filter: blur(6px);
    filter: blur(3px);
    position: relative;
    top: -183px;
}

.m-infinity-image-bg {
    transform: rotate(180deg);
}

.add_bbt {
    width: auto !important;
}



.mainVisualTop {
    width: 100%;
    height: 100%;
}

.commonCardIconWrap_cc {
    overflow: hidden;
}

.cc_text_top {
    font-weight: normal;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.card_address {
    display: flex;
    align-items: center;
    gap: 0 3px;
}

.commonCardImage {
    object-fit: cover;
}

.jobCategory {
    background-color: #E0523F;
    border-radius: 5px;
}

.commonCardTextWrap {
    padding: 10px;
}

.commonCardTagWrap h3 {
    font-size: 16px;
}

.commonCard.col {
    min-height: 370px;
}

.btnListGrey a {
    border: 0px solid transparent;
    color: #E0523F;
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
}

.job .newsRow span {
    color: #AAAAAA;
    display: inline-block;
    height: auto;
    line-height: 1;
    width: 90px;
    margin-right: 30px;
}

.nani .commonCardImgWrap {
    width: 120px;
    height: 120px;
}

.nani .commonCard {
    padding: 10px;
    margin-bottom: 30px;
    height: auto;
    min-height: 340px;
    height: 100%;
}

.nani.col3Wrap .text {
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 0;
}

.col3Wrap .col {
    padding: 0;
}

.sp_dis {
    display: none;
}

.job .btnRadius {
    border: 1px solid #E0523F;
    background-color: #E0523F;
    color: #fff;
    font-weight: bold;
}

.header__logo img {
    height: auto;
}

.tooltip_create {
    background-color: #E0523F;
    display: flex;
    align-items: center;
    height: 100%;
}

.tooltip_create p {
    color: #fff;
    font-size: 14px;
    margin-bottom: 0;
}

.right_hadfer {
    height: 100%;
    display: flex;
    margin-bottom: 0;
}

.right_hadfer li {
    list-style-type: none;
    height: 100%;
    margin-right: 0;
    width: 200px;
    margin-top: 0;
    margin-bottom: 0;

}

.header__nav,
.header__wrap {
    max-width: inherit;
}

.tooltip_create_l {
    background-color: #F1A138;
}

.jobH#header:before {
    background-color: transparent;
}

.tooltip.tooltip_create {
    justify-content: center;
    gap: 0 5px;
}

.inputHeaderSearch {
    background-color: #fff;
    border: 1px solid #000;
}

.footer_Btnflex {
    background-color: #F5F5F5;
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 0 30px;
}

.login_Btnleeft {
    background-color: #E0523F;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 140px; */
    height: 80px;
}

.login_Btnright {
    background-color: #F1A138;
}

.login_Btnleeftp {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
}



@media screen and (max-width: 1200px) {
    .login_Btnleeftp {
        font-size: 14px;
    }    
    .login_Btnleeftp span {
        font-size: 14px;
    }  
}

.footer_Btnflex a {
    /* width: 520px; */
    width: 400px;
    display: flex;
    align-items: center;
}

.footer_logo {
    margin-bottom: 20px;
    text-align: center;
}

.footer_logo img {
    display: inline-block;
    margin: 0 auto;
    max-width: 200px;
}

.footer_ul {
    display: flex;
    justify-content: center;
    gap: 0 20px;
}

.footer_flex {
    margin-bottom: 20px;
}

.footer_Link2 {
    font-weight: bold;
    font-size: 15px;
}

.footerBg {
    background: #9A9A9A;
    padding-bottom: 0 !important;
}

.footerCopy {
    margin-top: 20px;
}

footer .row {
    padding-bottom: 10px;
}

@media screen and (max-width: 991px) {
    .footer_ul {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 480px) {
    .nani .commonCard {
        min-height: 300px;
    }

    .col3Wrap .col {
        margin-left: 0;
    }

    .textRow {
        justify-content: center;
    }

    .sectionTitle {
        margin-bottom: 0;
    }

    .job .newsRow span {
        /*width: ;*/
        margin-right: 0;
    }

    .sp_dis {
        display: block;
    }

    .ttl_top {
        text-align: center;
        line-height: 1.4;
    }

    .title p {
        font-size: 16px;
    }

    .footer_Btnflex {
        flex-direction: column;
        gap: 10px 0;
        align-items: center;
        height: auto;
        padding: 30px 0;
    }
    .login_Btnleeft{
        height: 100px;
    }

    .footer_Btnflex a {
        width: 80%;
    }
}





/*
特定商取引法に基づく表記
------------------------------------*/

.tokutei_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}


/*
プライバシーポリシー
------------------------------------*/
.privact_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}

.privact_h3 {
 	font-size: 1.5em;
	margin-bottom: 10px;
    margin-top: 25px;
}

.privact_p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.privact_ul {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.privact_ol {
    padding-left: 4em;
}


/*
利用規約
------------------------------------*/
.gp_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}

.gp_h3 {
 	font-size: 1.5em;
	margin-bottom: 10px;
    margin-top: 25px;
}

.gp_p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    font-size: 15px;
}

.gp_ul {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.gp li{
    list-style: none;
    padding-left: 30px;
    vertical-align: middle;
    position: relative;
    font-size: 15px;
}
.gp_number{
    display: inline-block;
    padding-right: 10px;
    position: absolute;
    left: 0;
}

/*
運営会社情報
------------------------------------*/
.companyinfo_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}


/*
お問い合せ
------------------------------------*/
.info_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}

.info_p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.info_group {
	margin-bottom: 4rem;
}

.info_label {
	margin-bottom: 1rem;
}


/*
FAQ
------------------------------------*/
.faq_h2 {
 	font-size: 2em;
	margin-bottom: 10px;
}

.faq_p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.faq_center {
    text-align: center;
}

.faq_link {
    color:#E0523F;
}

.faq_question {
font-size: 1.5rem;
    color: #222222;
    font-weight: 500;
    background-color: transparent;
    text-align: left;
    width: 100%;
}

#accordion .card{
    /*margin-bottom: 10px;*/
    line-height: 1.5;
}

.faq_btn {
	color: #fff;
    background-color: #E0523F;
    border-color: #E0523F;
    white-space: normal;
}

.faq_btn {
	color: #fff;
    background-color: #E0523F;
    border-color: #E0523F;
    border: 2px solid #E0523F;
    white-space: normal;
    padding: 2rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
    width: 100%;
}

.faq_btn:hover {
	color:#E0523F;
    background-color: #fff;
    border-color: #E0523F;
}


/*
ヘッダー検索画面
------------------------------------*/
.headerSearchBox{
    display: flex;
    width: 300px;
}

header .hd-search{
    width: auto !important;
    margin-right: 5px;
}

header .input-group-btn .btn-group{
    height: 100%;
}
header .headerSearchBox .fa-search:before{
    font-size: 16px;
}


@media screen and (max-width: 991) {
    .headerSearchBox{
        display: none;
    }
}


/*
各カテゴリTOP ガイドライン
___________________________*/
.guidelinkBlock{
    background: #f7e350;
    color: #000;
}


.guidelinkBlock p > button{
    border: 1px solid #000;
    color: #000;
}



/*
会員登録画面
------------------------------------*/
.profile_compWrap section.item .login_btn{

    color: #fff;
    background-color: #E0523F;
    border-color: #E0523F;
    border: 2px solid #E0523F;
    white-space: normal;
    padding: 2rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
    width: 100%;
}

.profile_compWrap section.item .user_loginblock{
    padding: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    margin-top: 20px;
}

/*
マイページ 退会
______________________*/
#taikai_button{
    border-radius: 100px;
    background: #E0523F;
    border: 1px solid #E0523F;
    color: #fff;
    transition: .3s;
    width: 100%;
    max-width: 100px;
    padding: 5px;
    cursor: pointer;
}

#taikai_button:hover{
    background: #E0523F;
    color: #fff;
}

/*
マイページ
______________________*/
.mypagettl{
    margin-bottom: 40px;
}


/*
Footer
______________________*/
.shinseiInfo{
    font-size: 10px;
    color: #fff;
    padding: 10px 0 30px;
}




.sp_br{
    display: none;
}

@media screen and (max-width: 768px) {
    .sp_br{
        display: block;
    }
}



/* 注文履歴の注文品と個数、金額 */
.history_card-text {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 40px;
}
@media screen and (max-width: 1100px) {
    .history_card-text {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: nowrap;
    }
}


/* 注文履歴のボタン */
.login_history_btn {
    background-color: #F1A138;
    border-radius: 10px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 140px; */
    height: 40px;
}
.login_history_btn.gray {
    height: 40px;
    width: 200px;
    background-color: #e0e0e0;
}

.login_history_btn.blue {
    height: 40px;
    width: 200px;
    margin-right:20px;
    background-color: #81d0ff;
}
@media screen and (max-width: 1100px) {
    .login_history_btn {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .login_history_btn.gray {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .login_history_btn.blue {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}



/* 注文履歴のボタンの p */
.login_history_btnp {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0;
}
@media screen and (max-width: 1300px) {
    .login_history_btnp {
        font-size: 14px;
    }    
}