/* CSS Document */ #headLine { background: url(images/headLineBg.jpg) no-repeat center top; background-size: cover; } @media (min-width: 769px) { } @media (max-width: 480px) { #headLine { background-position: right -24px top; } } /*------------------------------------------------------ recruitIndex ------------------------------------------------------*/ #recruitIndex {} #recruitIndex .heading01 { margin-bottom: 30px;} #recruitIndex .contentsInner { } #recruitIndex .recruitInner { border: 1px solid #f5650a; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin-bottom: 30px; } #recruitIndex .recruitInner a {} #recruitIndex .recruitInner .head { min-height: 120px; height: -webkit-calc(100% - 40px); height: calc(100% - 40px); position: relative; padding: 5px; display: flex; display: -webkit-flex; -webkit-align-items: center; align-items: center;} #recruitIndex .recruitInner .title { text-align: center; font-size: 2.4rem; line-height: 1.2; font-weight: bold; flex: 1; } #recruitIndex .recruitInner .title .sub { font-size: 1.8rem; } #recruitIndex .recruitInner .foot { height: 40px; background: url(../../common/images/bgLine01.png) left top; line-height: 40px;} #recruitIndex .recruitInner .foot p { text-align: right; font-size: 1.6rem; color: #f5650a; position: relative; padding-right: 2em; font-weight: bold;} #recruitIndex .recruitInner.publish .foot p:before { content: ''; position: absolute; width: 16px; height: 16px; -webkit-border-radius: 50%; border-radius: 50%; background: #ee6815; top: calc(50% - 8px); right: 10px; } #recruitIndex .recruitInner.publish .foot p:after { content: ''; position: absolute; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 15px; top: calc(50% - 4px); } #recruitIndex .recruitInner.private { border-color: #e8e2da; } #recruitIndex .recruitInner.private .title { color: #aaa; } #recruitIndex .recruitInner.private .foot p { text-align: center; color: #000; position: relative; padding-right: 0; font-weight: bold;} @media (min-width: 769px) { #recruitIndex .contentsInner { -webkit-justify-content: flex-start; justify-content: flex-start;} #recruitIndex .recruitInner { width: -webkit-calc( 100% / 3 - 20px ); width: calc( 100% / 3 - 20px ); margin-left: 10px; margin-right: 10px; } #recruitIndex .recruitInner.publish a:hover { text-decoration: none; } #recruitIndex .recruitInner.publish a:hover .head { background-color: #f5650a; text-decoration: none; text-decoration: none; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); } #recruitIndex .recruitInner.publish a:hover .title { color: #fff;} #recruitIndex .recruitInner.private a:hover { text-decoration: none;} } @media (max-width: 768px) { #recruitIndex .recruitInner .head { min-height: 80px; } } @media (max-width: 480px) { #recruitIndex .recruitInner { width: 100%; margin-bottom: 15px;} } /*------------------------------------------------------ recruitSingle ------------------------------------------------------*/ #recruitSingle {} #singleBody .title { font-size: 2.8rem; line-height: 1.4; border-bottom: 5px solid #ee6815; font-weight: bold; padding-bottom: 25px; margin-bottom: 20px; letter-spacing: -1px; } #singleBody .body { font-size: 1.6rem; line-height: 1.6; margin-bottom: 50px;} #singleBody .body table { width: 100%;} #singleBody .btnWrap { text-align: center; border-top: 1px solid #e8e2da; padding-top: 20px;} #singleBody .form { text-align: center; margin-bottom: 40px;} #singleBody .form a { max-width: 345px;} #singleBody .body h2 { font-size: 2.8rem; line-height: 1.4; border-bottom: 5px solid #ee6815; font-weight: bold; padding-bottom: 25px; margin-bottom: 20px; letter-spacing: -1px; } #singleBody .body h3 { font-size: 2rem; font-weight: bold; border-bottom: 2px solid #e8e2da; position: relative; margin-top: 20px; margin-bottom: 10px; padding-bottom: 10px; color: #444; } #singleBody .body h3::after { content: ''; position: absolute; width: 170px; height: 2px; background-color: #f5650a; left: 0; bottom: -2px; } #singleBody .body h4 { font-size: 1.8rem; font-weight: bold; margin-top: 20px; margin-bottom: 8px; color: #f5650a; } #singleBody .body ul { margin-bottom: 10px; } #singleBody .body ul li { font-size: 1.6rem; line-height: 1.4; position: relative; margin-left: 30px; margin-bottom: 5px; } #singleBody .body ul li::before { content: ''; position: absolute; width: 14px; height: 14px; -webkit-border-radius: 50%; border-radius: 50%; background: #76ba2f; left: -18px; top: 4px; } #singleBody .body ul li::after { content: ''; position: absolute; left: -15px; top: 8px; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #singleBody .body p { margin-bottom: 10px; } /*------------------------------------------------------ form formInput ------------------------------------------------------*/ #formInput {} #formInput #headLine2 , #formConfirm #headLine2 , #thanks #headLine2 { background-color: #888; } #formInput #headLine2 h1 , #formConfirm #headLine2 h1 , #thanks #headLine2 h1 { color: #fff;} #formInput #headLine2 h1 span[class^='icon'] , #formConfirm #headLine2 h1 span[class^='icon'] , #thanks #headLine2 h1 span[class^='icon'] { background-color: #ee6815; } #formInput table th.w160 , #formConfirm table th.w160 , #thanks table th.w160 { width: 160px;} @media (min-width: 769px) { .formInner03 dt.small_text { font-size: 1.5rem; } .formInner03 dt.small_text .note { font-size: 1.5rem; } .formInner03 dt.lh-adjust { line-height: 1.4; } } @media (max-width: 768px) { } @media (max-width: 480px) { #formInput #headLine2 h1 , #formConfirm #headLine2 h1 , #thanks #headLine2 h1 { text-align: left; letter-spacing: 0px;} #formInput table th.text-right , #formConfirm table th.text-right { text-align: left;} } /*------------------------------------------------------ form flowNav ------------------------------------------------------*/ #flowNav li { width: -webkit-calc( 99.9% / 3 ); width: calc( 99.9% / 3 );} #formConfirm #flowNav li:nth-child(1) {} #formConfirm #flowNav li:nth-child(1)::before { border-top-color: #f5650a; border-right-color: #f5650a; border-bottom-color: #f5650a; right: -1px;} #thanks #flowNav li:nth-child(2) {} #thanks #flowNav li:nth-child(2)::before { border-top-color: #f5650a; border-right-color: #f5650a; border-bottom-color: #f5650a; right: -1px;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { #flowNav li:first-child , #flowNav li:nth-child(2) , #flowNav li:nth-child(3) { width: -webkit-calc( 99.9% / 3 ); width: calc( 99.9% / 3 ); } }