/* CSS Document */ /*------------------------------------------------------ headline ------------------------------------------------------*/ #headline { background: url("./images/st_headline.jpg") no-repeat center center; background-size: 100% auto; } @media (min-width: 768px) { } @media (max-width: 767px) { #headline { background-position: center bottom;} } /*------------------------------------------------------ [recruitIndex] recruitInner ------------------------------------------------------*/ #recruitIndex .recruitInner { box-shadow: 0px 0px 3px 0px #cccccc; border-radius: 10px; overflow: hidden; } #recruitIndex .recruitInner .colWrap { border-top: 6px solid #00a0e9; } #recruitIndex .recruitInner .body {} #recruitIndex .recruitInner .category { margin-bottom: 8px;} #recruitIndex .recruitInner .category span { font-size: 1.4rem; display: inline-block; text-align: center; width: 100px; height: 26px; line-height: 2.6rem;} #recruitIndex .recruitInner .category .cat1 { background-color: #ff7bac; color: #fff; border: 1px solid #ff7bac;} #recruitIndex .recruitInner .category .cat2 { background-color: orange; color: #fff; border: 1px solid orange;} #recruitIndex .recruitInner .category .pref { color: #7ac943; border: 1px solid #7ac943; margin-left: 10px;} #recruitIndex .recruitInner .name {} #recruitIndex .recruitInner .houjin { color: #888;} #recruitIndex .recruitInner .lead { color: #00a0e9; margin-top: 8px; text-align: left;} #recruitIndex .recruitInner .img {} #recruitIndex .recruitInner .img img {} #recruitIndex .recruitInner .foot { background-color: #f6f6f6; text-align: center; padding: 15px 10px 20px; } #recruitIndex .recruitInner .foot .button01 { width: 100%; max-width: 300px; font-weight: bold; } @media (min-width: 768px) { #recruitIndex .recruitInner { margin-bottom: 30px;} #recruitIndex .recruitInner .colWrap { padding: 20px 25px;} #recruitIndex .recruitInner .body { width: calc(100% - (240px + 10px));} #recruitIndex .recruitInner .name { font-size: 3.2rem;} #recruitIndex .recruitInner .houjin { font-size: 1.8rem;} #recruitIndex .recruitInner .img { width: 240px;} } @media (max-width: 767px) { #recruitIndex .recruitInner { margin-bottom: 40px;} #recruitIndex .recruitInner .colWrap { padding: 10px 15px;} #recruitIndex .recruitInner .body { width: 100%;} #recruitIndex .recruitInner .name { font-size: 2.4rem;} #recruitIndex .recruitInner .houjin { font-size: 1.6rem;} #recruitIndex .recruitInner .img { width: 100%;} #recruitIndex .recruitInner .foot .button01 { padding-top: 10px; padding-bottom: 10px; } } /*------------------------------------------------------ searchWrap ------------------------------------------------------*/ #searchWrap { border: 8px solid #f6f6f6;} #searchWrap p { color: #22b573; font-size: 2rem; /*background: url("images/arrow_recruit.svg") no-repeat right+14px center; padding-right: 50px;*/} #searchWrap p::after { content: url("images/arrow_recruit.svg"); width: 28px; height: 12px; margin: 0 16px 0 6px; display: inline-block;} #searchWrap .btn { background-color: #7ac943; color: #fff; font-size: 1.9rem; height: 40px; line-height: 40px; padding: 0 10px; cursor: pointer; margin-left: 15px;} #searchWrap .btn img { vertical-align: -5px; margin-right: 5px; width: auto; height: 24px; } .cp_ipselect { overflow: hidden; width: 165px; text-align: center; } .cp_ipselect select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .cp_ipselect select::-ms-expand { display: none; } .cp_ipselect.cp_sl01 { position: relative; border: 1px solid #7ac943; background: #ffffff; } .cp_ipselect.cp_sl01::before { content: ''; position: absolute; width: 12px; height: 12px; right: 10px; top: calc(50% - 10px); border-top: 1px solid #7a0; border-right: 1px solid #7a0; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .cp_ipselect.cp_sl01 select { padding: 0 20px; height: 38px; color: #7ac943; font-size: 2rem; font-family: "Gothic MB101 Bold"; } .cp_ipselect:first-of-type { border-right: none;} @media (min-width: 768px) { #searchWrap { padding: 12px 20px; align-items: center; -webkit-align-items: center; margin-bottom: 50px; } } @media (max-width: 767px) { #searchWrap { padding: 10px 10px; margin-bottom: 30px;} #searchWrap p { width: 100%; text-align: center; margin-bottom: 10px;} #searchWrap .btn { width: 100%; margin-left: auto; margin-right: auto; text-align: center; margin-top: 10px;} .cp_ipselect { width: 50%; } } /*------------------------------------------------------ [recruitSingle] ------------------------------------------------------*/ #recruitSingle .recruitInner { border-top: 6px solid #00a0e9; margin-bottom: 30px;} #recruitSingle .recruitInner .head { border-bottom: 6px solid #f6f6f6;} #recruitSingle .recruitInner .category { margin-bottom: 8px;} #recruitSingle .recruitInner .category span { font-size: 1.4rem; display: inline-block; text-align: center; width: 100px; height: 26px; line-height: 2.6rem; } #recruitSingle .recruitInner .category .cat1 { background-color: #ff7bac; color: #fff; border: 1px solid #ff7bac; } #recruitSingle .recruitInner .category .cat2 { background-color: orange; color: #fff; border: 1px solid orange; } #recruitSingle .recruitInner .category .pref { color: #7ac943; border: 1px solid #7ac943; margin-left: 10px; } #recruitSingle .recruitInner .name {} #recruitSingle .recruitInner .houjin { color: #888;} #recruitSingle .recruitInner .lead { color: #00a0e9; text-align: left;} #recruitSingle .recruitInner .img {} #recruitSingle .recruitInner .img > div {} #recruitSingle .recruitInner .img img { position: relative; } #recruitSingle .recruitInner .img span { border: 1px solid #e8f0c5; display: inline-block;} #recruitSingle .recruitInner .info {} #recruitSingle .recruitInner .info dl { border-top: 1px dashed #00a0e9;} #recruitSingle .recruitInner .info dl dt { width: 74px;} #recruitSingle .recruitInner .info dl dt span { background-color: #00a0e9; display: inline-block; width: 74px; height: 32px; line-height: 32px; text-align: center; color: #fff; font-size: 1.6rem;} #recruitSingle .recruitInner .info dl dd { padding-top: 4px;} #recruitSingle .recruitInner .foot { border-top: 6px solid #00a0e9; background-color: #f6f6f6; padding: 25px 10px 30px; text-align: center; } #recruitSingle .recruitInner .foot .button01 { background-color: #22b573; box-shadow: 0px 5px 0px 0px #1c8e57; width: 100%; max-width: 300px;} #recruitSingle .return { text-align: center;} #recruitSingle .return .button01 { background-color: #fff; border:1px solid #22b573; color: #22b573; box-shadow: 0px 5px 0px 0px #22b573; width: 100%; max-width: 300px; } @media (min-width: 768px) { #recruitSingle .recruitInner .head { margin-bottom: 30px; padding: 25px 30px 0;} #recruitSingle .recruitInner .name { font-size: 3.2rem;} #recruitSingle .recruitInner .houjin { font-size: 1.8rem;} #recruitSingle .recruitInner .lead { margin-bottom: 20px;} #recruitSingle .recruitInner .img { margin-bottom: 40px; padding: 0 15px;} #recruitSingle .recruitInner .img span { padding: 9px;} #recruitSingle .recruitInner .info dl { padding: 10px 20px;} #recruitSingle .recruitInner .info dl dd { font-size: 1.6rem; width: calc(100% - (74px + 30px));} #recruitSingle .recruitInner .foot .button01:hover { text-decoration: none; position: relative; top: 5px; box-shadow: none; } #recruitSingle .return .button01:hover { text-decoration: none; position: relative; top: 5px; box-shadow: none; } } @media (max-width: 767px) { #recruitSingle .recruitInner .head { margin-bottom: 15px; padding: 15px 10px 0;} #recruitSingle .recruitInner .name { font-size: 2.4rem;} #recruitSingle .recruitInner .houjin { font-size: 1.6rem;} #recruitSingle .recruitInner .img { margin-bottom: 20px; text-align: center;} #recruitSingle .recruitInner .img span { padding: 9px;} #recruitSingle .recruitInner .info dl { padding: 10px 10px; } #recruitSingle .recruitInner .info dl dd { font-size: 1.4rem; width: calc(100% - (74px + 10px));} } /*------------------------------------------------------ form ------------------------------------------------------*/ form select { display: block;} #entryHead { border-bottom: 6px solid #f6f6f6; margin-bottom: 25px;} #entryHead .lead { color: #00a0e9; text-align: left; margin-bottom: 10px;} #entryHead .name { font-weight: bold;} #entryHead .houjin { color: #888; font-size: 1.8rem;} .cp_ipselect2 { overflow: hidden; width: 200px; text-align: center; } .cp_ipselect2 select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .cp_ipselect2 select::-ms-expand { display: none; } .cp_ipselect2.cp_sl01 { position: relative; border: 1px solid #ccc; background: #ffffff; } .cp_ipselect2.cp_sl01::before { content: ''; position: absolute; width: 12px; height: 12px; right: 10px; top: calc(50% - 10px); border-top: 1px solid #333; border-right: 1px solid #333; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .cp_ipselect2.cp_sl01 select { padding: 0 20px; height: 38px; color: #333; font-size: 1.6rem; } @media (min-width: 768px) { #entryHead { padding-bottom: 25px;} #entryHead .lead {} #entryHead .name { font-size: 3.2rem;} #entryHead .houjin{} } @media (max-width: 767px) { #entryHead { padding-bottom: 20px;} #entryHead .lead {} #entryHead .name { font-size: 2.4rem;} #entryHead .houjin{} } .pagination {text-align: center; margin-top: 50px; font-size: 1.6rem;} .pagination li { display: inline-block;} .pagination a { color: #333; border: 1px solid #00a0e9; padding: 3px 5px;} .pagination .current { background-color: #00a0e9; color: #fff; padding: 3px 5px; border: 1px solid #00a0e9;}