.job-cover { background: #edf9ff; margin-bottom: 95px; } .job-cover .inner { position: relative; margin-bottom: 10px; } .job-cover .category { padding: 10px 0; margin-bottom: 90px; font-size: 1.1875rem; font-style: italic; border-bottom: 1px solid #fff; } .job-cover .title h2 { font-size: 2.25rem; line-height: 1.2; letter-spacing: .05em; } .job-cover .title-panel { position: absolute; top: 50px; left: 0; width: 540px; padding: 11px 45px; color: #fff; text-align: left; background: rgba(0,65,110,.8); } .job-cover .category .name { margin-right: 13px; font-weight: 700; letter-spacing: .05em; } .job-cover .inner .photo{ text-align: right; } .job-cover .title-panel { left: 0; } .job-cover .category{ margin-bottom: 80px; } .job-cover .title { margin-bottom: 82px; } .job-cover .category .desc{ display: block; } .mincho { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif; } #box01 { padding-bottom: 90px; } #box01 h2{ color: #7acbf4; font-size: 1.625rem; text-align: center; margin-bottom: 58px; } #box01 p{ font-size: 1rem; line-height: 3.125rem; text-align: center; } #box02{ background:#fafafa; border: solid 1px #dcdcdc; padding: 90px; box-sizing: border-box; overflow: hidden; margin-bottom: 60px; } #box02 h2{ display: block; width: 18.95%; float: left; } #box02 h2 img{ width: 100% } #box02 .text{ width: 74.64%; float: right; } #box02 p{ margin-bottom: 53px; } #box02 .text{ font-size: 1.250em; line-height: 3.375em; } #box03{ padding: 58px 0; border: solid 1px #7acbf4; } #box03 h2{ font-size: 1.250em; color: #7acbf4; font-style: italic; text-align: center; font-weight: normal; letter-spacing: 0.1em; width: 78.02%; padding-bottom: 10px; margin: 0 auto; border-bottom: solid 1px #7acbf4; } #box03 h3{ color: #353e7b; font-size: 1.875rem; text-align: center; margin: 78px 0; } #box03 p{ text-align: center; font-size: 1rem; } @media screen and (max-width:64em) { #box01{ padding-top: 20px; } #box02.inner{ border-left: none; border-right: none; padding: 40px 40px; } #box03.inner{ width:auto; margin-right: 20px; margin-left: 20px; } #box02 h2{ display: block; width: 180px; float: none; margin: 0 auto; } #box02 h2 img{ width: 100% } #box02 .text{ width: 100%; float: none; padding-top: 20px; } #box02 .text{ font-size: 1.250em; line-height: 3.375em; } } @media screen and (min-width:40.0625em) and (max-width:52.5em) { } @media screen and (max-width:52.5em) { .job-cover { background: none; margin-bottom: 24px; } .job-cover .inner .photo{ text-align: center; } .job-cover .title-panel { position: relative; top: -7px; left: 10px; display: inline-block; width: calc(100% - 20px); padding: 10px 20px; } .job-cover .category { font-size: .875rem; padding: 5px 0; margin-bottom: 20px; } .job-cover .title { margin-bottom: 8px; } .job-cover .title h2 { font-size: 1.6875rem; letter-spacing: 0; } .job-cover .photo img { width: 100%; } } @media screen and (max-width:40em) { .job-cover .title-panel { position: relative; top: -7px; left: 10px; display: inline-block; width: calc(100% - 20px); padding: 10px 20px; } .job-cover .title-panel { left: 10px; } .job-cover .category { margin-bottom: 20px; } .job-cover .title { margin-bottom: 20px; } .job-cover .title-panel { left: 10px; } .job-cover .category { margin-bottom: 20px; } .job-cover .title { margin-bottom: 20px; } #box01 h2{ font-size: 1.250rem; } #box01 p{ font-size: 0.750rem; line-height: 2.138em; } #box02.inner{ padding: 20px 20px; } #box02 p br{ display: none; } #box02 p{ line-height: 2rem; font-size: 0.750rem; margin-bottom: 1.5em; } #box03 p{ line-height: 1rem; font-size: 0.750rem; } #box03.inner{ width:auto; margin-right: 10px; margin-left: 10px; padding: 25px 20px; box-sizing: border-box; } #box03 h2{ font-size: 1rem; } #box03 h3{ font-size: 1.250em; margin: 30px 0; } }