@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100..900&display=swap');



html {
  scroll-padding-top: calc(90 / 390 * 100vw);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: calc(16 / 390 * 100vw); line-height: 0;
  letter-spacing: calc(5em / 100);
  background: hsl(0, 0%, 100%);
}

section, hgroup, h1, h2, h3, h4, h5, p, div {
  box-sizing: border-box;
  margin: 0;
  font-weight: 400;
}

menu, ol, ul, dl {
  list-style: none;
  margin: 0; padding: 0;
}

img {
  width: 100%; height: auto;
}

strong {
  font-weight: 400;
}


header {
  display: grid;
  grid-template: auto / auto 1fr auto;
  align-items: center;
  width: 100%; height: calc(90 / 390 * 100vw);
  position: sticky;
  inset: 0 auto auto auto; z-index: 2;
  background: hsl(0, 0%, 100%);
}

header > hgroup {
  grid-row: 1 / 2; grid-column: 1 / 2;
  display: grid;
  grid-template: 1fr auto / auto;
  justify-content: center;
  width: min-content; height: min-content;
  margin: 0 0 0 calc(20 / 390 * 100vw);
}
header > hgroup > h1 {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: calc(58 / 390 * 100vw);
}
header > hgroup > p {
  grid-row: 2 / 3; grid-column: 1 / 2;
  margin: calc(9 / 390 * 100vw) 0 0;
  font-size: calc(8 / 390 * 100vw); line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

header > menu {
  display: none;
}

header > a {
  grid-row: 1 / 2; grid-column: 2 / 3;
  justify-self: end;
  display: flex;
  justify-content: center; align-items: center;
  width: calc(130 / 390 * 100vw); height: calc(60 / 390 * 100vw);
  margin: 0 calc(16 / 390 * 100vw) 0 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  letter-spacing: calc(10em / 100);
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  background: hsl(25, 90%, 56%);
  border-radius: calc(60 / 2 / 390 * 100vw);
}

header > button {
  grid-row: 1 / 2; grid-column: 3 / 4;
  justify-self: end;
  appearance: none;
  width: calc(60 / 390 * 100vw); height: calc(60 / 390 * 100vw);
  margin: 0 calc(10 / 390 * 100vw) 0 0;
  background: transparent;
  border: none;
}



#keyvisual {
  width: 100%;
  position: relative;
  padding: calc(358 / 390 * 100vw) 0 calc(362 / 390 * 100vw);
  background: url('../image/index_keyvisual_01_sp.webp') right top / 100% no-repeat;
}

#keyvisual > hgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(320 / 390 * 100vw); height: calc(160 / 390 * 100vw);
  position: relative;
  z-index: 1;
  margin: 0 0 0 auto;
  background: hsl(25, 90%, 56%);
  border-radius: calc(24 / 390 * 100vw) 0 0 calc(24 / 390 * 100vw);
}
#keyvisual > hgroup > h1 {
  align-self: end;
  font-size: calc(50 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
}
#keyvisual > hgroup > p {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(220 / 390 * 100vw); height: calc(36 / 390 * 100vw);
  margin: calc(12 / 390 * 100vw) 0 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  border-radius: calc(36 / 2 / 390 * 100vw);
}

#keyvisual > div {
  width: calc(376 / 390 * 100vw); height: calc(339 / 390 * 100vw);
  position: absolute;
  inset: calc(20 / 390 * 100vw) 0 auto auto;
  padding: calc(36 / 390 * 100vw) 0 0 calc(32 / 390 * 100vw);
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: calc(24 / 390 * 100vw) 0 0 calc(24 / 390 * 100vw);
}
#keyvisual > div > h2 {
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
}
#keyvisual > div > p {
  width: calc(290 / 390 * 100vw);
  margin: calc(8 / 390 * 100vw) 0 0;
  line-height: 2;
  color: hsl(0, 0%, 20%);
}
#keyvisual > div > p > br:nth-of-type(1) {/* -- を尊重し、<br>誰もが安心 */
  display: none;
}


#concept{
  width: 100%;
  padding: calc(38 / 390 * 100vw) 0 calc(110 / 390 * 100vw);
  background: url('../image/index_concept_01_sp.webp') center calc(35 / 390 * 100vw) / 100% no-repeat;
}
#concept > h2 {
  position: relative;
  padding: 0 0 calc(15 / 390 * 100vw);
  font-size: calc(40 / 390 * 100vw); line-height: 1.17;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#concept > h2::after {
  content: '';
  display: block;
  width: calc(100 / 390 * 100vw); height: calc(3 / 390 * 100vw);
  position: absolute;
  inset: auto auto 0 calc(50% - 100 / 2 / 390 * 100vw);
  background: hsl(25, 97%, 65%);
}
#concept > h2 > strong {
  font-weight: 500;
}

#concept > p {
  margin: calc(21 / 390 * 100vw) auto 0;
  font-size: calc(20 / 390 * 100vw); line-height: 2.2;
  text-align: center;
}



#introduction {
  width: 100%;
  padding: calc(77 / 390 * 100vw) 0 calc(300 / 390 * 100vw);
  background: url('../image/index_introduction_01_sp.webp') right calc(-16 / 390 * 100vw) top calc(440 / 390 * 100vw) / calc(259 / 390 * 100vw) no-repeat,
              linear-gradient(hsl(25, 97%, 65%) calc(570 / 715 * 100%), hsl(0, 0%, 100%) calc(570 / 715 * 100%)),
              hsl(0, 0%, 100%);
}

#introduction > h2 {
  font-size: calc(28 / 390 * 100vw); line-height: calc(56 / 390 * 100vw);
  text-align: center;
  color: hsl(0, 0%, 100%);
}
#introduction > h2 > strong {
  font-size: calc(40 / 390 * 100vw);
}

#introduction > p {
  width: calc(330 / 390 * 100vw);
  margin: 0 auto;
  line-height: 2;
  color: hsl(0, 0%, 100%);
}



#interview {
  width: 100%;
  padding: calc(22 / 390 * 100vw) 0 calc(57 / 390 * 100vw);
}

#interview > hgroup {
  width: 100%;
  position: relative;
  padding: calc(30 / 390 * 100vw) 0 0;
}
#interview > hgroup::before {
  content: '';
  display: block;
  width: calc(75 / 390 * 100vw); height: calc(104 / 390 * 100vw);
  position: absolute;
  inset: 0 auto auto 0; z-index: -1;
  background: hsl(25, 89%, 63%);
  border-radius: 0 calc(104 / 2 / 390 * 100vw) calc(104 / 2 / 390 * 100vw) 0;
}
#interview > hgroup::after {
  content: '';
  display: block;
  width: calc(144 / 390 * 100vw); height: calc(104 / 390 * 100vw);
  position: absolute;
  inset: 0 0 auto auto; z-index: -1;
  background: hsl(36, 33%, 97%);
  border-radius: calc(104 / 2 / 390 * 100vw) 0 0 calc(104 / 2 / 390 * 100vw);
}
#interview > hgroup > h2 {
  font-size: calc(48 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#interview > hgroup > p {
  margin: calc(23 / 390 * 100vw) 0 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}

#interview > p {
  margin: calc(70 / 390 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}

#interview > menu {
  display: flex;
  justify-content: center;
  gap: 0 calc(11 / 390 * 100vw);
  width: 100%;
  margin: calc(56 / 390 * 100vw) 0 0;
}
#interview > menu > li {
  display: flex;
  justify-content: center; align-content: start;
  flex-wrap: wrap;
  width: calc(165 / 390 * 100vw); height: calc(126 / 390 * 100vw);
  box-sizing: border-box;
  position: relative;
  padding: calc(35 / 390 * 100vw) 0 0;
  background: hsl(24, 38%, 97%);
  border-top: calc(5 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-right: calc(5 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-left: calc(5 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: calc(25 / 390 * 100vw) calc(25 / 390 * 100vw) 0 0;
}
#interview > menu > li::before {
  content: '';
  display: block;
  width: calc(66 / 390 * 100vw); height: calc(66 / 390 * 100vw);
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  inset: calc(-36 / 390 * 100vw) auto auto calc(50% - 66 / 2 / 390 * 100vw);
  background: hsl(0, 0%, 100%) url('../image/index_interview_01.svg') center calc(12 / 390 * 100vw) / calc(58 / 390 * 100vw) no-repeat;
  border: calc(3 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: 50%;
}
#interview > menu > li > p {
  width: 100%;
  line-height: 1;
  letter-spacing: calc(10em / 100);
  text-align: center;
  color: hsl(0, 0%, 0%);
  pointer-events: none;
}
#interview > menu > li > p:nth-of-type(1) {/* -- 職種 */
  font-size: calc(14 / 390 * 100vw);
}
#interview > menu > li > h3 {
  margin: calc(11 / 390 * 100vw) 0 0;
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
  pointer-events: none;
}
#interview > menu > li > p:nth-of-type(2) {/* -- 入社年 */
  margin: calc(10 / 390 * 100vw) 0 0;
  font-size: calc(16 / 390 * 100vw);
}
#interview > menu[data-select="1"] > li:nth-of-type(1) {/* -- M.Aさん */
  background: hsl(25, 90%, 56%);
}
#interview > menu[data-select="1"] > li:nth-of-type(1) > p {
  color: hsl(0, 0%, 100%);
}
#interview > menu[data-select="1"] > li:nth-of-type(1) > h3 {
  color: hsl(0, 0%, 100%);
}
#interview > menu[data-select="1"] + ul > li:nth-of-type(1) {
  display: block;
}
#interview > menu[data-select="2"] > li:nth-of-type(2) {/* -- S.Uさん */
  background: hsl(25, 90%, 56%);
}
#interview > menu[data-select="2"] > li:nth-of-type(2) > p {
  color: hsl(0, 0%, 100%);
}
#interview > menu[data-select="2"] > li:nth-of-type(2) > h3 {
  color: hsl(0, 0%, 100%);
}
#interview > menu[data-select="2"] + ul > li:nth-of-type(2) {
  display: block;
}

#interview > ul {
  width: 100%;
}
#interview > ul > li {
  counter-reset: count;
  display: none;
  width: 100%;
  background: hsl(0, 0%, 100%);
}
#interview > ul > li > hgroup {
  counter-increment: count;
}
#interview > ul > li > hgroup::before {
  content: counter(count, decimal-leading-zero);
  display: block;
  width: calc(330 / 390 * 100vw);
  margin: calc(58 / 390 * 100vw) auto 0;
  font-size: calc(60 / 390 * 100vw); line-height: 1;
  color: hsl(25, 90%, 56%);
}
#interview > ul > li > hgroup:first-of-type {
  padding: calc(18 / 390 * 100vw) 0 0;
  border-top: calc(5 / 390 * 100vw) solid hsl(25, 90%, 56%);
}
#interview > ul > li > hgroup:first-of-type::before {
  margin: 0 auto;
}
#interview > ul > li > hgroup > p {
  width: calc(330 / 390 * 100vw);
  margin: calc(8 / 390 * 100vw) auto 0; padding: 0 0 calc(11 / 390 * 100vw);
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  color: hsl(25, 90%, 56%);
  border-bottom: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 20%);
}
#interview > ul > li > hgroup > h4 {
  width: calc(330 / 390 * 100vw);
  margin: calc(16 / 390 * 100vw) auto 0;
  font-size: calc(28 / 390 * 100vw); line-height: 1.8;
  color: hsl(0, 0%, 20%);
}
#interview > ul > li > p {
  width: calc(330 / 390 * 100vw);
  margin: calc(10 / 390 * 100vw) auto 0;
  font-size: calc(18 / 390 * 100vw); line-height: 2.4;
  color: hsl(0, 0%, 20%);
}
#interview > ul > li > section {
  width: 100%;
  position: relative;
  margin: calc(86 / 390 * 100vw) 0 0; padding: calc(76 / 390 * 100vw) 0 calc(80 / 390 * 100vw);
  background: hsl(25, 89%, 63%);
  border-bottom: calc(5 / 390 * 100vw) solid hsl(25, 89%, 56%);
}
#interview > ul > li > section::before {
  content: 'ONE DAY';
  display: block;
  position: absolute;
  inset: calc(19 / 390 * 100vw) calc(20 / 390 * 100vw) auto auto;
  font-size: calc(60 / 390 * 100vw); line-height: 1;
  color: hsl(25, 89%, 76%);
}
#interview > ul > li > section::after {
  content: 'SCHEDULE';
  display: block;
  position: absolute;
  inset: auto auto calc(7 / 390 * 100vw) calc(21 / 390 * 100vw);
  font-size: calc(64 / 390 * 100vw); line-height: 1;
  color: hsl(25, 89%, 76%);
}
#interview > ul > li > section > div {
  width: calc(350 / 390 * 100vw);
  position: relative;
  z-index: 1;
  margin: calc(46 / 390 * 100vw) auto 0; padding: calc(37 / 390 * 100vw) 0 calc(21 / 390 * 100vw);
  background: hsl(0, 0%, 100%);
  border-radius: 0 0 calc(24 / 390 * 100vw) calc(24 / 390 * 100vw);
}
#interview > ul > li > section > div::before {
  content: 'SCHEDULE';
  display: flex;
  justify-content: center;
  width: calc(180 / 390 * 100vw); height: calc(49 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(-49 / 390 * 100vw) auto auto 0;
  padding:calc(12 / 390 * 100vw) 0 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%); 
  background: hsl(213, 4%, 55%);
  border-top: calc(3 / 390 * 100vw) solid hsl(0, 0%, 100%);
  border-right: calc(3 / 390 * 100vw) solid hsl(0, 0%, 100%);
  border-left: calc(3 / 390 * 100vw) solid hsl(0, 0%, 100%);
  border-radius: calc(24 / 390 * 100vw) calc(24 / 390 * 100vw) 0 0;
}
#interview > ul > li > section > div::after {
  content: '';
  display: block;
  width: 100%; height: calc(16 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(-16 / 390 * 100vw) auto auto 0;
  background: linear-gradient(90deg, hsla(213, 4%, 55%, 0) 25%, hsla(213, 4%, 55%, 1) 25%);
}
#interview > ul > li > section > div > h4 {
  position: relative;
  margin: 0 0 0 calc(30 / 390 * 100vw); padding: calc(85 / 390 * 100vw) 0 0 calc(15 / 390 * 100vw);
  font-size: calc(24 / 390 * 100vw); line-height: calc(28 / 390 * 100vw);
  background: url('../image/index_interview_02.svg') calc(124 / 390 * 100vw) top / calc(78 / 390 * 100vw) no-repeat;
}
#interview > ul > li > section > div > h4 > br {/* -- のある1日の<br>スケジュー */
  display: none;
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(1) {/* -- X.Xさんの */
  display: flex;
  justify-content: center;
  width: calc(102 / 390 * 100vw); height: calc(56 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(26 / 390 * 100vw) auto auto 0;
  padding: calc(8 / 390 * 100vw) 0 0 0;
  font-size: calc(14 / 390 * 100vw); line-height: calc(22 / 390 * 100vw);
  background: url('../image/index_interview_03.svg') center center / 100% no-repeat;
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(1) > strong {
  font-size: calc(22 / 390 * 100vw);
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(2) {/* -- 1 */
  font-size: calc(28 / 390 * 100vw);
}
#interview > ul > li > section > div > ol {
 width: calc(320 / 390 * 100vw);
 position: relative;
 margin: calc(29 / 390 * 100vw) auto 0;
}
#interview > ul > li > section > div > ol::before {
  content: '';
  display: block;
  position: absolute;
  background: hsl(24, 91%, 91%);
}
#interview > ul > li > section > div > ol > li {
 position: absolute;
}
#interview > ul > li > section > div > ol > li > hgroup {
 width: 100%; height: 100%;
 position: absolute;
 inset: 0 auto auto 0;
}
#interview > ul > li > section > div > ol > li > hgroup > p {
  display: flex;
  justify-content: center; align-items: baseline;
  width: calc(75 / 390 * 100vw); height: calc(75 / 390 * 100vw);
  position: absolute;
  padding:calc(19 / 390 * 100vw) 0 0;
  font-size: calc(16 / 390 * 100vw); line-height: calc(34 / 390 * 100vw);
  color: hsl(0, 0%, 100%);
  background: hsl(8, 47%, 45%);
  border-radius: 50%;
}
#interview > ul > li > section > div > ol > li > hgroup::before {
  content: '';
  display: block;
  height: max(calc(1 / 390 * 100vw), 1px);
  position: absolute;
  background: hsl(0, 0%, 20%);
  transform-origin: top left;
}
#interview > ul > li > section > div > ol > li > hgroup > p > strong {
  font-size: calc(34 / 390 * 100vw);
  letter-spacing: calc(-3em / 100);
}
#interview > ul > li > section > div > ol > li > hgroup > h5 {
  display: flex;
  align-items: center;
  height: calc(50 / 390 * 100vw);
  position: absolute;
  padding: 0 0 0 calc(22 / 390 * 100vw);
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  background: hsl(24, 100%, 98%);
  border: calc(2 / 390 * 100vw) solid hsl(25, 90%, 80%);
  border-radius: calc(50 / 2 / 390 * 100vw);
}
#interview > ul > li > section > div > ol > li > p {
  width: calc(222 / 390 * 100vw);
  position: absolute;
  font-size: calc(14 / 390 * 100vw); line-height: 1.5;
  color: hsl(0, 0%, 0%);
}
#interview > ul > li:nth-of-type(1) > section > div > ol {/* -- M.Aさん */
  height: calc(535 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol::before {
  width: calc(15 / 390 * 100vw); height: calc(404 / 390 * 100vw);
  inset: calc(59 / 390 * 100vw) auto auto calc(31 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) {/* -- 10:00 */
  inset: calc(23 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup > p::before {
  content: '午前';
  display: block;
  position: absolute;
  inset: calc(-24 / 390 * 100vw) auto auto calc(8 / 390 * 100vw);
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(8, 47%, 45%);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) {/* -- 12:00 */
  inset: calc(174 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) {/* -- 13:00 */
  inset: calc(307 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup > p::before {
  content: '午後';
  display: block;
  position: absolute;
  inset: calc(-24 / 390 * 100vw) auto auto calc(8 / 390 * 100vw);
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(8, 47%, 45%);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > p > br:nth-of-type(1) {/* -- 続き担当の<br>業務を対応 */
  display: none;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) {/* -- 19:00 */
  inset: calc(426 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol {/* -- S.Uさん */
  height: calc(535 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol::before {
  width: calc(15 / 390 * 100vw); height: calc(404 / 390 * 100vw);
  inset: calc(59 / 390 * 100vw) auto auto calc(31 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) {/* -- 9:00 */
  inset: calc(23 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup > p::before {
  content: '午前';
  display: block;
  position: absolute;
  inset: calc(-24 / 390 * 100vw) auto auto calc(8 / 390 * 100vw);
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(8, 47%, 45%);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > p > br:nth-of-type(1) {/* -- チェック、<br>受付準備を */
  display: none;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) {/* -- 12:00 */
  inset: calc(174 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) {/* -- 13:00 */
  inset: calc(307 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup > p::before {
  content: '午後';
  display: block;
  position: absolute;
  inset: calc(-24 / 390 * 100vw) auto auto calc(8 / 390 * 100vw);
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(8, 47%, 45%);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) {/* -- 18:00 */
  inset: calc(426 / 390 * 100vw) auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > hgroup::before {
  width: calc(80 / 390 * 100vw);
  inset: calc(36 / 390 * 100vw) auto auto calc(38 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > hgroup > p {
  inset: 0 auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > hgroup > h5 {
  width: calc(222 / 390 * 100vw);
  inset: calc(11 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > p {
  inset: calc(67 / 390 * 100vw) auto auto calc(96 / 390 * 100vw);
}
#interview > ul > li > h4 {
  margin: calc(57 / 390 * 100vw) auto 0;
  font-size: calc(18 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#interview > ul > li > div {
  margin: calc(8 / 390 * 100vw) auto 0;
}
#interview > ul > li > div::before {
  content: '';
  display: block;
  width: 100%; height: calc(120 / 390 * 100vw);
  position: absolute;
  inset: calc(64 / 390 * 100vw) auto auto 0;
  background: hsl(25, 89%, 63%);
}
#interview > ul > li > .splide .splide__list {
  margin: calc(100 / 390 * 100vw) auto 0;
}
#interview > ul > li > .splide .splide__track {
  height: calc(242 / 390 * 100vw);
}
#interview > ul > li > .splide .splide__slide {
  inset: calc(117 / 390 * 100vw) auto auto auto;
}
#interview > ul > li > .splide .splide__slide > img {
  border-radius: calc(8 / 390 * 100vw);
  transform-origin: center calc(190 / 242 * 100%);
}
#interview > ul > li > .splide .splide__slide.is-active > img {
  transform: scale(calc(290 / 116));
}
#interview > ul > li > .splide .splide__arrow {
  width: calc(48 / 390 * 100vw); height: calc(48 / 390 * 100vw);
  background: hsl(0, 0%, 100%);
  opacity: 1;
  box-shadow: calc(2 / 390 * 100vw) calc(2 / 390 * 100vw) calc(5 / 390 * 100vw) hsla(0, 0%, 20%, 0.5);
}
#interview > ul > li > .splide .splide__arrow > svg {
  display: none;
}
#interview > ul > li > .splide .splide__arrow--next {/* -- → */
  background: hsl(0, 0%, 100%) url('../image/index_interview_05_01.svg') center center / calc(14 / 390 * 100vw) no-repeat;
}
#interview > ul > li > .splide .splide__arrow--prev {/* -- ← */
  background: hsl(0, 0%, 100%) url('../image/index_interview_05_02.svg') center center / calc(14 / 390 * 100vw) no-repeat;
}



#works {
  width: 100%;
  padding: calc(58 / 390 * 100vw) 0 calc(49 / 390 * 100vw);
}

#works > hgroup {
  width: 100%;
  position: relative;
  padding: calc(30 / 390 * 100vw) 0 0;
}
#works > hgroup::before {
  content: '';
  width: calc(61 / 390 * 100vw); height: calc(104 / 390 * 100vw);
  position: absolute;
  inset: 0 auto auto 0; z-index: -1;
  background: hsl(25, 89%, 63%);
  border-radius: 0 calc(104 / 2 / 390 * 100vw) calc(104 / 2 / 390 * 100vw) 0;
}
#works > hgroup::after {
  content: '';
  width: calc(157 / 390 * 100vw); height: calc(104 / 390 * 100vw);
  position: absolute;
  inset: 0 0 auto auto; z-index: -1;
  background: hsl(36, 33%, 97%);
  border-radius: calc(104 / 2 / 390 * 100vw) 0 0 calc(104 / 2 / 390 * 100vw);
}
#works > hgroup > h2 {
  font-size: calc(48 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  text-align: center;
}
#works > hgroup > p {
  margin: calc(23 / 390 * 100vw) auto 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  text-align: center;
}

#works > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(28 / 390 * 100vw) 0;
  width: calc(350 / 390 * 100vw);
  margin: calc(51 / 390 * 100vw) auto 0;
}
#works > ul > li {
  display: grid;
  grid-template: auto auto auto 1fr / auto;
  width: calc(330 / 390 * 100vw);
  box-sizing: border-box;
  padding: calc(27 / 390 * 100vw) 0 calc(24 / 390 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(2 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: calc(24 / 390 * 100vw);
  box-shadow: calc(10 / 390 * 100vw) calc(10 / 390 * 100vw) hsl(27, 91%, 96%);
}
#works > ul > li > h3 {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: calc(290 / 390 * 100vw);
  position: relative;
  margin: 0 auto; padding: 0 0 0 calc(32 / 390 * 100vw);
  font-weight: 500;
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
}
#works > ul > li > h3::before {
  content: '';
  display: block;
  width: calc(18 / 390 * 100vw); height: calc(18 / 390 * 100vw);
  position: absolute;
  inset: calc(3 / 390 * 100vw) 0 0 calc(1 / 390 * 100vw);
  background: hsl(25, 90%, 56%);
  border-radius: 50%;
}
#works > ul > li > picture {
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: calc(290 / 390 * 100vw);
  margin: calc(23 / 390 * 100vw) auto 0;
}
#works > ul > li > h4 {
  grid-row: 3 / 4; grid-column: 1 / 2;
  display: flex;
  justify-content: center; align-items: center;
  width: calc(99 / 390 * 100vw); height: calc(34 / 390 * 100vw);
  margin: calc(16 / 390 * 100vw) 0 0 calc(18 / 390 * 100vw);
  font-size: calc(14 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 95%);
  border-radius: calc(34 / 2 / 390 * 100vw);
}
#works > ul > li > p {
  grid-row: 4 / 5; grid-column: 1 / 2;
  width: calc(290 / 390 * 100vw);
  margin: calc(4 / 390 * 100vw) auto 0;
  font-size: calc(18 / 390 * 100vw); line-height: 2;
  color: hsl(0, 0%, 20%);
}



body > main > .cva {
  width: 100%;
  padding: calc(39 / 390 * 100vw) 0 calc(29 / 390 * 100vw);
  background: hsl(25, 90%, 56%);
}

body > main > .cva > h3 {
  font-size: calc(18 / 390 * 100vw); line-height: 1;
  letter-spacing: calc(10em / 100);
  text-align: center;
  color: hsl(0, 0%, 100%);
}

body > main > .cva > menu {
  display: grid;
  grid-template: auto auto auto / auto;
  justify-content: center;
  gap: calc(18 / 390 * 100vw);
  margin: calc(28 / 390 * 100vw) auto 0;
}
body > main > .cva > menu > li > a {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(330 / 390 * 100vw); height: calc(64 / 390 * 100vw);
  font-weight: 500;
  font-size: calc(18 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  text-decoration: none;
  background: hsl(0, 0%, 100%) url('../image/index_cva_01.svg') right calc(29 / 390 * 100vw) center / calc(18 / 390 * 100vw) no-repeat;
  border-radius: calc(64 / 2 / 390 * 100vw);
}

body > main > .cva > p {
  width: calc(330 / 390 * 100vw);
  margin: calc(21 / 390 * 100vw) auto 0;
  font-size: calc(14 / 390 * 100vw); line-height: 1.4;
  letter-spacing: calc(10em / 100);
  color: hsl(0, 0%, 100%);
}



#selection {
  display: grid;
  grid-template: auto auto auto auto / auto;
  align-content: start;
  width: calc(350 / 390 * 100vw);
  margin: calc(58 / 390 * 100vw) auto calc(35 / 390 * 100vw); padding: calc(51 / 390 * 100vw) 0 calc(60 / 390 * 100vw);
  border: calc(2 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: calc(24 / 390 * 100vw);
}

#selection > hgroup {
  width: calc(310 / 390 * 100vw);
  margin: 0 auto;
}
#selection > hgroup > h2 {
  font-size: calc(48 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#selection > hgroup > p {
  width: calc(270 / 390 * 100vw);
  margin: calc(12 / 390 * 100vw) auto 0; padding: calc(27 / 390 * 100vw) 0 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
  border-top: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 0%);
}

#selection > p {
  width: calc(310 / 390 * 100vw);
  line-height: 2.2;
  color: hsl(0, 0%, 20%);
}
#selection > p:nth-of-type(1) {/* -- エントリー前に詳細に */
  margin: calc(41 / 390 * 100vw) auto 0;
}
#selection > p:nth-of-type(2) {/* -- 職種によっては実習も可能 */
  margin: calc(30 / 390 * 100vw) auto 0;
}

#selection > ol {
  counter-reset: count;
  display: grid;
  grid-template: auto auto / calc(96 / 390 * 100vw) calc(112 / 390 * 100vw) calc(102 / 390 * 100vw);
  align-content: start;
  gap: calc(34 / 390 * 100vw) 0;
  width: calc(310 / 390 * 100vw);
  margin: calc(21 / 390 * 100vw) auto 0;
}
#selection > ol > li {
  counter-increment: count;
  width: calc(86 / 390 * 100vw);
  position: relative;
  font-size: calc(15 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#selection > ol > li::before {
  content: '';
  display: block;
  width: calc(86 / 390 * 100vw); height: calc(86 / 390 * 100vw);
  position: absolute;
  border-radius: calc(15 / 390 * 100vw);
}
#selection > ol > li::after {
  content: counter(count);
  display: block;
  width: calc(38 / 390 * 100vw); height: calc(38 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  padding: calc(15 / 390 * 100vw) 0 0;
  font-weight: 700;
  font-size: calc(17 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%) url('../image/index_selection_03.svg') center calc(7 / 390 * 100vw) / calc(19 / 390 * 100vw) no-repeat;
  border: max(calc(1 / 390 * 100vw), 1px) solid hsl(25, 90%, 56%);
  border-radius: 50%;
}
#selection > ol > li:nth-of-type(3n-2) {/* -- 1, 3 */
  padding: calc(106 / 390 * 100vw) calc(10 / 390 * 100vw) 0 0;
}
#selection > ol > li:nth-of-type(3n-2)::before {
  inset: 0 auto auto 0;
}
#selection > ol > li:nth-of-type(3n-2)::after {
  inset: calc(63 / 390 * 100vw) auto auto calc((0 + (86 - 38) / 2) / 390 * 100vw);
}
#selection > ol > li:nth-of-type(3n-1) {/* -- 2, 4 */
  padding: calc(106 / 390 * 100vw) calc(10 / 390 * 100vw) 0 calc(16 / 390 * 100vw);
  background: url('../image/index_selection_01.svg') left calc(39 / 390 * 100vw) / calc(9 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(3n-1)::before {
  inset: 0 auto auto calc(16 / 390 * 100vw);
}
#selection > ol > li:nth-of-type(3n-1)::after {
  inset: calc(63 / 390 * 100vw) auto auto calc((16 + (86 - 38) / 2) / 390 * 100vw);
}
#selection > ol > li:nth-of-type(3n) {/* -- 3, 5 */
  padding: calc(106 / 390 * 100vw) 0 0 calc(16 / 390 * 100vw);
  background: url('../image/index_selection_01.svg') left calc(39 / 390 * 100vw) / calc(9 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(3n)::before {
  inset: 0 auto auto calc(16 / 390 * 100vw);
}
#selection > ol > li:nth-of-type(3n)::after {
  inset: calc(63 / 390 * 100vw) auto auto calc((16 + (86 - 38) / 2) / 390 * 100vw);
}
#selection > ol > li:nth-of-type(1)::before {/* -- エントリー */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_01.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(2)::before {/* -- 書類選考 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_02.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(3)::before {/* -- 一次面接 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_03.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(4)::before {/* -- 適性検査 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_04.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(5)::before {/* -- 最終面接 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_05.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li:nth-of-type(6)::before {/* -- 内定 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_06.svg') center calc(12 / 390 * 100vw) / calc(54 / 390 * 100vw) no-repeat;
}
#selection > ol > li > small {
  display: inline-block;
  margin: calc(8 / 390 * 100vw) auto 0;
  font-size: calc(10 / 390 * 100vw);
}



#session {
  display: grid;
  grid-template: auto auto 1fr auto / auto;
  align-content: start;
  padding: calc(35 / 390 * 100vw) 0 calc(80 / 390 * 100vw);
}

#session > h2 {
  font-size: calc(40 / 390 * 100vw); line-height: 1.3;
  text-align: center;
  color: hsl(0, 0%, 20%);
}

#session > img {
  display: block;
  width: calc(350 / 390 * 100vw);
  margin: calc(50 / 390 * 100vw) auto 0;
  border-radius: calc(24 / 390 * 100vw);
}

#session > p {
  width: calc(340 / 390 * 100vw);
  margin: calc(18 / 390 * 100vw) auto 0;
  line-height: 2.2;
  color: hsl(0, 0%, 20%);
}

#session > a {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(354 / 390 * 100vw); height: calc(68 / 390 * 100vw);
  margin: calc(24 / 390 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(18 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  background: hsl(25, 90%, 56%) url('../image/index_session_02.svg') right calc(30 / 390 * 100vw) center / calc(17 / 390 * 100vw) no-repeat;
  border-radius: calc(68 / 2 / 390 * 100vw);
}



#data {
  padding: calc(96 / 390 * 100vw) 0 calc(100 / 390 * 100vw);
  background: url('../image/index_data_01_sp.webp') center top / 100% repeat-y;
}

#data > h2 {
  font-size: calc(40 / 390 * 100vw); line-height: 1.3;
  text-align: center;
  color: hsl(0, 0%, 20%);
}

#data > ul {
  display: grid;
  grid-template: auto auto 1fr / auto;
  gap: calc(28 / 390 * 100vw) 0;
  width: calc(320 / 390 * 100vw);
  margin: calc(50 / 390 * 100vw) auto 0;
}
#data > ul > li {
  display: grid;
  grid-template: auto auto 1fr / auto;
  width: calc(320 / 390 * 100vw);
  box-sizing: border-box;
  position: relative;
  background: hsl(0, 0%, 100%);
  border: calc(2 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: calc(24 / 390 * 100vw);
  box-shadow: calc(16 / 390 * 100vw) calc(16 / 390 * 100vw) hsla(25, 90%, 56%, 0.1);
}
#data > ul > li > h3 {
  grid-row: 1 / 2; grid-column: 1 / 2;
  font-size: calc(24 / 390 * 100vw); line-height: 1.3;
  text-align: center;
  color: hsl(25, 90%, 56%);
}
#data > ul > li > p {
  grid-row: 2 / 3; grid-column: 1 / 2;
  margin: calc(10 / 390 * 100vw) auto 0;
  font-size: calc(20 / 390 * 100vw); line-height: 1.4;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#data > ul > li > p > strong {
  font-weight: 700;
  font-size: calc(64 / 390 * 100vw); line-height: 1;
  letter-spacing: 0;
}
#data > ul > li > img {
  grid-row: 3 / 4; grid-column: 1 / 2;
  display: block;
}
#data > ul > li:nth-of-type(1) {/* -- 全従業員数 */
  padding: calc(22 / 390 * 100vw) 0 calc(13 / 390 * 100vw);
}
#data > ul > li:nth-of-type(1) > img {
  width: calc(181 / 390 * 100vw);
  margin: calc(19 / 390 * 100vw) auto 0;
}
#data > ul > li:nth-of-type(2) {/* -- 年間休日日数 */
  padding: calc(22 / 390 * 100vw) 0 calc(3 / 390 * 100vw);
}
#data > ul > li:nth-of-type(2) > img {
  width: calc(148 / 390 * 100vw);
  margin: calc(37 / 390 * 100vw) auto 0;
}
#data > ul > li:nth-of-type(3) {/* -- 平均残業時間 */
  padding: calc(22 / 390 * 100vw) 0 calc(20 / 390 * 100vw);
}
#data > ul > li:nth-of-type(3) > img {
  width: calc(175 / 390 * 100vw);
  margin: calc(15 / 390 * 100vw) auto 0;
}
#data > ul > li:nth-of-type(4) {/* -- PTWが雇用する障害者のみなさん */
  padding: calc(22 / 390 * 100vw) 0 calc(38 / 390 * 100vw);
}
#data > ul > li:nth-of-type(4) > p {
  width: min-content;
  margin: calc(29 / 390 * 100vw) auto 0;
  font-size: calc(24 / 390 * 100vw); line-height: calc(55 / 390 * 100vw);
  letter-spacing: calc(10em / 100);
  text-align: left;
  white-space: nowrap;
}
#data > ul > li:nth-of-type(4) > p > strong {
  font-size: calc(36 / 390 * 100vw); line-height: 1;
  letter-spacing: calc(10em / 100);
}
#data > ul > li:nth-of-type(4) > p > small {
  font-size: calc(20 / 390 * 100vw); line-height: 1;
}
#data > ul > li:nth-of-type(4) > picture {
  width: calc(290 / 390 * 100vw);
  margin: calc(40 / 390 * 100vw) auto 0;
}



#support {
  padding: calc(80 / 390 * 100vw) 0 calc(100 / 390 * 100vw);
}

#support > h2 {
  position: relative;
  padding: 0 0 calc(22 / 390 * 100vw);
  font-size: calc(40 / 390 * 100vw); line-height: 1.3;  
  text-align: center;
}
#support > h2::after {
  content: '';
  display: block;
  width: calc(100 / 390 * 100vw); height: calc(3 / 390 * 100vw);
  position: absolute;
  inset: auto auto 0 calc(50% - calc(100 / 2 / 390 * 100vw));
  background: hsl(25, 90%, 56%);
}

#support > p {
  margin: calc(25 / 390 * 100vw) auto 0;
  line-height: 2.4;
  text-align: center;
}
#support > p > br:nth-of-type(4) {/* -- ての誇りを<br>もってクオ */
  display: none;
}

#support > ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(22 / 390 * 100vw) 0;
  width: calc(350 / 390 * 100vw);
  margin: calc(44 / 390 * 100vw) auto 0;
}
#support > ul > li {
  display: grid;
  grid-template: auto / auto;
  width: calc(350 / 390 * 100vw);
  padding: 0 0 calc(11 / 390 * 100vw);
  border-bottom: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 20%);
}
#support > ul > li > h3 {
  width: 100%;
  font-weight: 500;
  font-size: calc(18 / 390 * 100vw); line-height: 1;  
}
#support > ul > li > p {
  width: 100%;
  margin: calc(5 / 390 * 100vw) auto 0;
  line-height: 1.8;
}



#benefit {
  padding: calc(60 / 390 * 100vw) 0 calc(60 / 390 * 100vw);
  background: hsl(24, 38%, 97%);
}

#benefit > h2 {
  position: relative;
  padding: 0 0 calc(22 / 390 * 100vw);
  font-size: calc(40 / 390 * 100vw); line-height: 1.3;  
  text-align: center;
}
#benefit > h2::after {
  content: '';
  display: block;
  width: calc(100 / 390 * 100vw); height: calc(3 / 390 * 100vw);
  position: absolute;
  inset: auto auto 0 calc(50% - calc(100 / 2 / 390 * 100vw));
  background: hsl(25, 90%, 56%);
}

#benefit > ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(22 / 390 * 100vw) 0;
  width: calc(350 / 390 * 100vw);
  margin: calc(44 / 390 * 100vw) auto 0;
}
#benefit > ul > li {
  display: grid;
  grid-template: auto / auto;
  width: calc(350 / 390 * 100vw);
  padding: 0 0 calc(11 / 390 * 100vw);
  border-bottom: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 20%);
}
#benefit > ul > li > h3 {
  width: 100%;
  font-weight: 500;
  font-size: calc(18 / 390 * 100vw); line-height: 1;  
}
#benefit > ul > li > p {
  width: 100%;
  margin: 0 auto;
  line-height: 1.8;
}
#benefit > ul > li > p:first-of-type {
  margin: calc(5 / 390 * 100vw) auto 0;
}
#benefit > ul > li > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(18 / 390 * 100vw);
  width: 100%;
  margin: 0 auto;
}
#benefit > ul > li > ul > li {
  line-height: 1.8;
}
#benefit > ul > li > ul > li::before {
  content: '・';
}



#faq {
  padding: calc(101 / 390 * 100vw) 0 0;
}

#faq > hgroup {
  width: 100%;
  position: relative;
  padding: calc(30 / 390 * 100vw) 0 0;
}
#faq > hgroup > h2 {
  font-size: calc(46 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}
#faq > hgroup > p {
  margin: calc(25 / 390 * 100vw) 0 0;
  font-size: calc(19 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 20%);
}

#faq > dl {
  margin: calc(31 / 390 * 100vw) auto 0;
}
#faq > dl > dt {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(31 / 390 * 100vw) calc(20 / 390 * 100vw) calc(20 / 390 * 100vw) calc(78 / 390 * 100vw);
  font-size: calc(18 / 390 * 100vw); line-height: 1.8;
  background: hsl(30, 37%, 97%);
}
#faq > dl > dt::before {
  content: 'Q';
  display: flex;
  justify-content: center; align-items: center;
  width: calc(48 / 390 * 100vw); height: calc(48 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(20 / 390 * 100vw) auto auto calc(10 / 390 * 100vw);
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  background: hsl(25, 90%, 56%);
  border-radius: 50%;
}
#faq > dl > dd {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0; padding: calc(28 / 390 * 100vw) calc(20 / 390 * 100vw) calc(27 / 390 * 100vw) calc(78 / 390 * 100vw);
  line-height: 2.4;
}
#faq > dl > dd::before {
  content: 'A';
  display: flex;
  justify-content: center; align-items: center;
  width: calc(48 / 390 * 100vw); height: calc(48 / 390 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(20 / 390 * 100vw) auto auto calc(10 / 390 * 100vw);
  font-size: calc(24 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  border: calc(2 / 390 * 100vw) solid hsl(25, 90%, 56%);
  border-radius: 50%;
}

#faq > p {
  width: 100%;
  padding: calc(36 / 390 * 100vw) 0 calc(42 / 390 * 100vw);
  font-size: calc(18 / 390 * 100vw); line-height: 1.4;
  text-align: center;
  background: hsl(30, 37%, 97%);
}
#faq > p > a {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(330 / 390 * 100vw); height: calc(64 / 390 * 100vw);
  margin: calc(24 / 390 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(18 / 390 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  text-decoration: none;
  background: hsl(25, 90%, 56%) url('../image/index_session_02.svg') right calc(29 / 390 * 100vw) center / calc(18 / 390 * 100vw) no-repeat;
  border-radius: calc(64 / 2 / 390 * 100vw);
}



body > aside {
  width: 100%; height: 0;
  position: sticky;
  inset: auto auto calc((86 + 32) / 390 * 100vw) 0; z-index: 2;
}

body > aside > a {
  display: block;
  width: calc(48 / 390 * 100vw); height: calc(48 / 390 * 100vw);
  position: absolute;
  inset: auto calc(10 / 390 * 100vw) calc(-86 / 390 * 100vw) auto;
  background: hsl(0, 0%, 100%) url('../image/index_aside_01.svg') center center / calc(13 / 390 * 100vw) no-repeat;
  border: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 20%);
  border-radius: 50%;
}


footer {
  display: grid;
  grid-template: auto 1fr auto / 1fr auto;
  width: calc(330 / 390 * 100vw);
  margin: 0 auto; padding: calc(66 / 390 * 100vw) 0 calc(65 / 390 * 100vw);
}

footer > h1 {
  grid-row: 1 / 2; grid-column: 1 / 3;
  width: calc(90 / 390 * 100vw);
}

footer > menu {
  display: flex;
}

footer > menu:nth-of-type(1) {/* -- 他サイト */
  grid-row: 2 / 3; grid-column: 1 / 2;
  flex-wrap: wrap;
  gap: calc(27 / 390 * 100vw) 0;
  width: calc(200 / 390 * 100vw);
  margin: calc(73 / 390 * 100vw) 0 0;
}
footer > menu:nth-of-type(1) > li > a {
  line-height: 1;
  color: hsl(0, 0%, 20%);
  text-decoration: none;
}
footer > menu:nth-of-type(1) > li > a::after {
  content: '';
  display: inline-block;
  width: calc(12 / 390 * 100vw); height: calc(12 / 390 * 100vw);
  margin: 0 0 0 calc(7 / 390 * 100vw);
  background: url('../image/index_footer_01.svg') center center / calc(12 / 390 * 100vw) no-repeat;
}

footer > menu:nth-of-type(2) {/* -- SNS */
  grid-row: 2 / 3; grid-column: 2 / 3;
  justify-self: end; align-self: end;
  gap: 0 calc(14 / 390 * 100vw);
  padding: 0 0 calc(10 / 390 * 100vw);
}
footer > menu:nth-of-type(2) > li > a {
  display: block;
  width: calc(40 / 390 * 100vw);
}

footer > small {
  grid-row: 3 / 4; grid-column: 1 / 3;
  display: block;
  margin: calc(62 / 390 * 100vw) auto 0;
  font-size: calc(14 / 390 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(214, 10%, 46%);
}



#spmenu {
  width: calc(350 / 390 * 100vw);
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  margin: calc(90 / 390 * 100vw) auto calc(38 / 390 * 100vw); padding: 0;
  background: transparent;
  border: none;
}
#spmenu::backdrop {
  background: hsl(30, 40%, 92%);
}

#spmenu > button {
  appearance: none;
  width: calc(60 / 390 * 100vw); height: calc(60 / 390 * 100vw);
  position: absolute;
  inset: calc(-75 / 390 * 100vw) calc(-10 / 390 * 100vw) auto auto;
  background: transparent;
  border: none;
}

#spmenu > menu {
  width: 100%;
  padding: calc(6 / 390 * 100vw) 0 calc(8 / 390 * 100vw);
  background: hsl(0, 0%, 100%);
  border-radius: calc(24 / 390 * 100vw);
  box-shadow: calc(2 / 390 * 100vw) calc(2 / 390 * 100vw) calc(5 / 390 * 100vw) hsla(0, 0%, 20%, 0.1);
}
#spmenu > menu > li > a {
  display: block;
  padding: calc(38 / 390 * 100vw) calc(50 / 390 * 100vw) calc(37 / 390 * 100vw) calc(40 / 390 * 100vw);
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 20%);
  background: url('../image/index_dialog_02.svg') right calc(33 / 390 * 100vw) center / calc(10 / 390 * 100vw) no-repeat;
  border-top: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 80%);
}
#spmenu > menu > li:first-of-type > a {
  border-top: none;
}





@media (min-width: 768px) {

html {
  scroll-padding-top: 100px;
}

body {
  min-width: 1400px;
  font-size: 16px;
  letter-spacing: calc(5em / 100);
}

header {
  grid-template: auto / auto 1fr auto;
  height: 100px;
}

header > hgroup {
  grid-row: 1 / 2; grid-column: 1 / 2;
  grid-template: auto / auto 1fr;
  justify-content: start; align-content: center;
  width: min-content; height: min-content;
  margin: 0 0 0 40px;
}
header > hgroup > h1 {
  width: 70px;
}
header > hgroup > p {
  grid-row: 1 / 2; grid-column: 2 / 3;
  align-content: center;
  margin: 0 0 0 25px;
  font-size: 16px; line-height: 1;
  letter-spacing: calc(5em / 100);
}

header > menu {
  justify-self: end;
  grid-row: 1 / 2; grid-column: 2 / 3;
  display: flex;
  gap: 0 45px;
  margin: 0 50px 0 0;
}
header > menu > li > a {
  line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 20%);
}

header > a {
  grid-row: 1 / 2; grid-column: 3 / 4;
  width: 150px; height: 60px;
  margin: 0 40px 0 0;
  font-size: 20px;
  border-radius: calc(60px / 2);
}

header > button {
  display: none;
}



#keyvisual {
  width: 1357px;
  margin: 0 auto; padding: 123px 0 460px;
  background: url('../image/index_keyvisual_01_pc.webp') center top / 1357px no-repeat;
}

#keyvisual > hgroup {
  width: 450px; height: 200px;
  margin: 0 262px 0 auto;
  border-radius: 24px;
}
#keyvisual > hgroup > h1 {
  font-size: 60px;
}
#keyvisual > hgroup > p {
  width: 269px; height: 39px;
  margin: 26px auto 0;
  font-size: 20px;
  border-radius: calc(39px / 2);
}

#keyvisual > div {
  width: 500px; height: 258px;
  inset: 17px auto auto 14px;
  padding: 37px 0 0 29px;
  border-radius: 24px;
}
#keyvisual > div > h2 {
  font-size: 24px;
}
#keyvisual > div > p {
  width: 450px;
  margin: 10px 0 0;
}
#keyvisual > div > p > br:nth-of-type(1) {/* -- を尊重し、<br>誰もが安心 */
  display: inline;
}



#concept{
  width: 1400px;
  margin: 0 auto; padding: 82px 0 119px;
  background: url('../image/index_concept_01_pc.webp') right 19px top 21px / 717px no-repeat;
}
#concept > h2 {
  padding: 0 0 30px;
  font-size: 40px; line-height: 1;
}
#concept > h2::after {
  width: 100px; height: 3px;
  inset: auto auto 0 calc(50% - 100px / 2);
}
#concept > h2 > strong {
  font-weight: 500;
}
#concept > h2 > br {
  display: none;
}

#concept > p {
  margin: 43px auto 0;
  font-size: 20px;
}
#concept > p > br:nth-of-type(1) {/* -- り便利に、<br>より楽しい */
  display: none;
}
#concept > p > br:nth-of-type(4) {/* -- だすときに<br>いつも隣に */
  display: none;
}
#concept > p > br:nth-of-type(5) {/* -- 共に悩み、<br>笑いあう、 */
  display: none;
}



#introduction {
  padding: 104px 0 97px;
  background: hsl(25, 97%, 65%) url('../image/index_introduction_01_pc.webp') left calc(50% - 365px) top 38px / 342px no-repeat;
}

#introduction > h2 {
  width: 1140px;
  margin: 0 auto; padding: 0 0 0 calc(570px - 140px);
  font-size: 28px; line-height: 40px;
  text-align: left;
  color: hsl(0, 0%, 100%);
}
#introduction > h2 > strong {
  font-size: 40px;
}
#introduction > h2 > br {
  display: none;
}

#introduction > p {
  width: 1140px;
  margin: 29px auto 0; padding: 0 0 0 calc(570px - 140px);
}



#interview {
  padding: 100px 0 84px;
}

#interview > hgroup {
  padding: 35px 0 0;
}
#interview > hgroup::before {
  width: calc(50% - 376px); height: 140px;
  border-radius: 0 70px 70px 0;
}
#interview > hgroup::after {
  width: calc(50% + 100px); height: 140px;
  border-radius: 70px 0 0 70px;
}
#interview > hgroup > h2 {
  width: 650px;
  margin: 0 auto;
  font-size: 76px;
  text-align: left;
}
#interview > hgroup > p {
  width: 564px;
  margin: 32px auto 0;
  font-size: 24px;
  text-align: left;
}

#interview > p {
  margin: 124px auto 0;
  font-size: 40px;
}

#interview > menu {
  gap: 0 21px;
  margin: 36px auto 0;
}
#interview > menu > li {
  justify-content: start;
  width: 505px; height: 226px;
  padding: 52px 0 0 259px;
  border-top: 5px solid hsl(25, 90%, 56%);
  border-right: 5px solid hsl(25, 90%, 56%);
  border-left: 5px solid hsl(25, 90%, 56%);
  border-radius: 25px 25px 0 0;
  cursor: pointer;
}
#interview > menu > li::before {
  width: 191px; height: 191px;
  inset: 13px auto auto 39px;
  background: hsl(0, 0%, 100%) url('../image/index_interview_01.svg') center 31px / 181px no-repeat;
  border: 4px solid hsl(25, 90%, 56%);
}
#interview > menu > li > p {
  text-align: left;
}
#interview > menu > li > p:nth-of-type(1) {/* -- 職種 */
  font-size: 20px;
}
#interview > menu > li > h3 {
  margin: 24px 0 0;
  font-size: 20px;
  text-align: left;
}
#interview > menu > li > h3 > strong {
  font-size: 28px;
}
#interview > menu > li > p:nth-of-type(2) {/* -- 入社年 */
  margin: 14px 0 0;
  font-size: 20px;
}

#interview > ul {
  width: 1100px;
  margin: 0 auto;
}
#interview > ul > li {
  border-radius: 25px;
}
#interview > ul > li > hgroup {
  display: grid;
  grid-template: auto 1fr / auto 1fr;
  width: 1100px;
  margin: 0 auto; padding: 55px 0 0 100px;
  border-right: 5px solid hsl(25, 90%, 56%);
  border-left: 5px solid hsl(25, 90%, 56%);
}
#interview > ul > li > hgroup:first-of-type {
  padding: 75px 0 0 100px;
  border-top: 5px solid hsl(25, 90%, 56%);
  border-radius: 25px 25px 0 0;
}
#interview > ul > li > hgroup::before {
  grid-row: 1 / 3; grid-column: 1 / 2;
  width: auto;
  margin: 0 auto;
  font-size: 100px;
}
#interview > ul > li > hgroup > p {
  grid-row: 1 / 2; grid-column: 2 / 3;
  width: 723px;
  margin: 7px 0 0 49px; padding: 0 0 10px;
  font-size: 20px;
  border-bottom: 2px solid hsl(0, 0%, 60%);
}
#interview > ul > li > hgroup > h4 {
  grid-row: 2 / 3; grid-column: 2 / 3;
  width: 723px;
  margin: 16px 0 0 49px;
  font-size: 32px; line-height: 1;
}
#interview > ul > li > p {
  width: 1100px;
  margin: 0 auto; padding: 21px 100px 0 267px;
  font-size: 16px;
  border-right: 5px solid hsl(25, 90%, 56%);
  border-left: 5px solid hsl(25, 90%, 56%);
}
#interview > ul > li > p:last-of-type {
  padding: 21px 100px 91px 267px;
}
#interview > ul > li > section {
  overflow: hidden;
  margin: 0; padding: 62px 0 102px;
  border-right: 5px solid hsl(25, 90%, 56%);
  border-bottom: 5px solid hsl(25, 90%, 56%);
  border-left: 5px solid hsl(25, 90%, 56%);
  border-radius: 0 0 25px 25px;
}
#interview > ul > li > section::before {
  inset: -25px 39px auto auto;
  font-size: 150px;
  color: hsl(25, 89%, 76%);
}
#interview > ul > li > section::after {
  inset: auto auto -20px 34px;
  font-size: 150px;
}
#interview > ul > li > section > div {
  width: 953px;
  margin: 53px auto 0; padding: 94px 0 120px;
  border-radius: 0 0 10px 10px;
}
#interview > ul > li > section > div::before {
  width: 254px; height: 46px;
  inset: -54px auto auto 0;
  padding: 18px 0 0;
  font-size: 24px;
  border-top: 3px solid hsl(0, 0%, 100%);
  border-left: 3px solid hsl(0, 0%, 100%);
  border-right: 3px solid hsl(0, 0%, 100%);
  border-radius: 10px 10px 0 0;
}
#interview > ul > li > section > div::after {
  width: 100%; height: 16px;
  position: absolute;
  inset: -8px auto auto 0;
  background: hsl(213, 4%, 55%);
  border-left: 3px solid hsl(0, 0%, 100%);
  border-radius: 0 8px 8px 10px;
}
#interview > ul > li > section > div > h4 {
  width: 175px; height: 257px;
  margin: 0 0 0 45px; padding: 167px 0 0;
  font-size: 28px; line-height: 1.6;
  text-align: center;
  background: url('../image/index_interview_02.svg') center 76px / 84px no-repeat;
}
#interview > ul > li > section > div > h4 > br {/* -- のある1日の<br>スケジュー */
  display: inline;
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(1) {/* -- X.Xさんの */
  width: 123px; height: 67px;
  inset: 0 auto auto 0;
  padding: 15px 0 0 0;
  font-size: 14px; line-height: 22px;
  background: url('../image/index_interview_03.svg') center center / 100% no-repeat;
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(1) > strong {
  font-size: 22px;
}
#interview > ul > li > section > div > h4 > strong:nth-of-type(2) {/* -- 1 */
  font-size: 32px;
}
#interview > ul > li > section > div > ol {
 width: 660px; height: 403px;
 position: absolute;
 inset: 45px auto auto 245px;
 margin: 0;
}
#interview > ul > li > section > div > ol > li > hgroup > p {
  width: 75px; height: 75px;
  padding: 18px 0 0;
  font-size: 19px; line-height: 38px;
}
#interview > ul > li > section > div > ol > li > hgroup::before {
  height: 1px;
}
#interview > ul > li > section > div > ol > li > hgroup > p > strong {
  font-size: 38px;
  letter-spacing: calc(-5em / 100);
}
#interview > ul > li > section > div > ol > li > hgroup > h5 {
  justify-content: center;
  height: 45px;
  padding: 0;
  font-size: 17px;
  border: 2px solid hsl(25, 90%, 80%);
  border-radius: 10px;
}
#interview > ul > li > section > div > ol > li > p {
  width: auto;
  font-size: 14px; line-height: 1.8;
}
#interview > ul > li:nth-of-type(1) > section > div > ol {/* -- M.Aさん */
  height: 403px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol::before {
  width: 590px; height: 15px;
  inset: 190px auto auto 40px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) {/* -- 10:00 */
  inset: 160px auto auto 0;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup::before {
  width: 125px;
  inset: 40px auto auto 36px;
  transform: rotate(-65.3deg);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup > p::before {
  inset: 86px auto auto 17px;
  font-size: 17px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > hgroup > h5 {
  width: 141px;
  inset: -100px auto auto 38px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > p {
  width: 270px;
  inset: -159px auto auto 42px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(1) > p > br:nth-of-type(2) {/* -- があったら<br>その都度確 */
  display: none;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) {/* -- 12:00 */
  inset: 160px auto auto 202px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > hgroup::before {
  width: 137px;
  inset: 40px auto auto 46px;
  transform: rotate(115.4deg);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > hgroup > h5 {
  width: 113px;
  inset: 141px auto auto -70px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(2) > p {
  width: 110px;
  inset: 194px auto auto -66px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) {/* -- 13:00 */
  inset: 160px auto auto 395px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup::before {
  width: 125px;
  inset: 40px auto auto 36px;
  transform: rotate(-65.3deg);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup > p::before {
  inset: 86px auto auto 17px;
  font-size: 17px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > hgroup > h5 {
  width: 98px;
  inset: -100px auto auto 28px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > p {
  width: 110px;
  inset: -159px auto auto 32px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(3) > p > br:nth-of-type(1) {/* -- 続き担当の<br>業務を対応 */
  display: inline;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) {/* -- 19:00 */
  inset: 160px auto auto 584px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > hgroup::before {
  width: 137px;
  inset: 40px auto auto 46px;
  transform: rotate(115.4deg);
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > hgroup > h5 {
  width: 105px;
  inset: 141px auto auto -57px;
}
#interview > ul > li:nth-of-type(1) > section > div > ol > li:nth-of-type(4) > p {
  width: 170px;
  inset: 194px auto auto -54px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol {/* -- S.Uさん */
  height: 403px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol::before {
  width: 590px; height: 15px;
  inset: 190px auto auto 40px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) {/* -- 9:00 */
  inset: 160px auto auto 0;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup::before {
  width: 125px;
  inset: 40px auto auto 36px;
  transform: rotate(-65.3deg);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup > p::before {
  inset: 86px auto auto 17px;
  font-size: 17px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > hgroup > h5 {
  width: 141px;
  inset: -100px auto auto 38px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > p {
  width: 270px;
  inset: -159px auto auto 42px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(1) > p > br:nth-of-type(1) {/* -- チェック、<br>受付準備を */
  display: inline;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) {/* -- 12:00 */
  inset: 160px auto auto 202px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > hgroup::before {
  width: 137px;
  inset: 40px auto auto 46px;
  transform: rotate(115.4deg);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > hgroup > h5 {
  width: 113px;
  inset: 141px auto auto -70px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(2) > p {
  width: 180px;
  inset: 194px auto auto -66px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) {/* -- 13:00 */
  inset: 160px auto auto 395px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup::before {
  width: 125px;
  inset: 40px auto auto 36px;
  transform: rotate(-65.3deg);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup > p::before {
  inset: 86px auto auto 17px;
  font-size: 17px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > hgroup > h5 {
  width: 98px;
  inset: -100px auto auto 27px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(3) > p {
  width: 200px;
  inset: -159px auto auto 33px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) {/* -- 18:00 */
  inset: 160px auto auto 584px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > hgroup::before {
  width: 137px;
  inset: 40px auto auto 46px;
  transform: rotate(115.4deg);
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > hgroup > h5 {
  width: 105px;
  inset: 141px auto auto -98px;
}
#interview > ul > li:nth-of-type(2) > section > div > ol > li:nth-of-type(4) > p {
  width: 200px;
  inset: 194px auto auto -94px;
}
#interview > ul > li > h4 {
  margin: 94px auto 0;
  font-size: 36px;
}
#interview > ul > li > div {
  width: 1200px;
  position: relative;
  inset: 0 0 0 -50px;
  margin: 36px auto 0;
}
#interview > ul > li > div::before {
  width: max(100vw, 1400px); height: 250px;
  inset: 170px auto auto min(calc(50% - 50vw), calc(50% - 700px));
}
#interview > ul > li > .splide .splide__list {
  margin: 240px auto 0;
}
#interview > ul > li > .splide .splide__track {
  height: 500px;
}
#interview > ul > li > .splide .splide__slide {
  inset: 240px auto auto auto;
}
#interview > ul > li > .splide .splide__slide > img {
  border-radius: 9px;
  transform-origin: center 160px;
}
#interview > ul > li > .splide .splide__slide.is-active > img {
  transform: scale(calc(600 / 240));
}
#interview > ul > li > .splide .splide__arrow {
  width: 72px; height: 72px;
  box-shadow: 2px 2px 5px hsla(0, 0%, 20%, 0.5);
}
#interview > ul > li > .splide .splide__arrow--next {/* -- → */
  inset: 240px 80px auto auto;
  background: hsl(0, 0%, 100%) url('../image/index_interview_05_01.svg') center center / 21px no-repeat;
}
#interview > ul > li > .splide .splide__arrow--prev {/* -- ← */
  inset: 240px auto auto 80px;
  background: hsl(0, 0%, 100%) url('../image/index_interview_05_02.svg') center center / 21px no-repeat;
}



#works {
  width: 100%;
  padding: 84px 0 119px;
}

#works > hgroup {
  padding: 35px 0 0;
}
#works > hgroup::before {
  width: max(calc(50% - 463px), 237px); height: 140px;
  border-radius: 0 70px 70px 0;
}
#works > hgroup::after {
  width: max(calc(50% + 187px), 887px); height: 140px;
  border-radius: 70px 0 0 70px;
}
#works > hgroup > h2 {
  width: 830px;
  margin: 0 auto;
  font-size: 76px;
  text-align: left;
}
#works > hgroup > p {
  width: 640px;
  margin: 32px auto 0;
  font-size: 24px;
  text-align: left;
}

#works > ul {
  justify-content: start;
  gap: 50px 64px;
  width: 1100px;
  margin: 72px auto 0;
}
#works > ul > li {
  grid-template: auto auto auto 1fr / auto;
  width: 510px;
  padding: 38px 0 45px;
  border: 2px solid hsl(25, 90%, 56%);
  border-radius: 24px;
  box-shadow: 16px 16px hsl(27, 91%, 96%);
}
#works > ul > li > h3 {
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: 420px;
  margin: 28px auto 0; padding: 0 0 0 32px;
  font-size: 28px;
}
#works > ul > li > h3::before {
  width: 18px; height: 18px;
  inset: 4px auto auto 0;
}
#works > ul > li > picture {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: 419px;
  margin: 0 auto;
}
#works > ul > li > h4 {
  width: 99px; height: 34px;
  margin: 26px 0 0 48px;
  font-size: 14px;
  border-radius: 17px;
}
#works > ul > li > p {
  width: 420px;
  margin: 15px auto 0;
  font-size: 20px;
}



body > main > .cva {
  padding: 53px 0 49px;
}

body > main > .cva > h3 {
  font-weight: 500;
  font-size: 32px;
}

body > main > .cva > menu {
  grid-template: auto auto / auto auto;
  gap: 33px 60px;
  margin: 32px auto 0;
}
body > main > .cva > menu > li > a {
  width: 354px; height: 68px;
  font-size: 18px;
  background: hsl(0, 0%, 100%) url('../image/index_cva_01.svg') right 30px center / 17px no-repeat;
  border-radius: 34px;
}
body > main > .cva > menu > li:nth-of-type(1) {/* -- 障害者採用 */
  grid-row: 1 / 2; grid-column: 1 / 3;
}
body > main > .cva > menu > li:nth-of-type(1) > a {
  width: 768px; height: 78px;
  font-size: 24px;
  border-radius: 39px;
}
body > main > .cva > menu > li:nth-of-type(2) {/* -- アルバイト採用 */
  grid-row: 2 / 3; grid-column: 1 / 2;
}
body > main > .cva > menu > li:nth-of-type(3) {/* -- キャリア採用 */
  grid-row: 2 / 3; grid-column: 2 / 3;
}

body > main > .cva > p {
  width: 770px;
  margin: 21px auto 0;
  font-size: 16px;
  text-align: center;
}
body > main > .cva > p > br:nth-of-type(1) {/* -- 関しては、<br>一般採用と */
  display: none;
}



#selection {
  grid-template: auto 1fr auto / auto 1fr;
  width: 1100px;
  margin: 86px auto 45px; padding: 57px 0 34px;
  border: 2px solid hsl(25, 90%, 56%);
  border-radius: 24px;
}

#selection > hgroup {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: 320px;
  margin: 49px 0 0 95px;
}
#selection > hgroup > h2 {
  font-size: 56px;
  text-align: left;
}
#selection > hgroup > p {
  width: 320px;
  margin: 20px 0 0; padding: 38px 0 0;
  font-size: 24px;
  text-align: center;
  border-top: 1px solid hsl(30, 37%, 97%);
}

#selection > p:nth-of-type(1) {/* -- エントリー前に詳細に */
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: 320px;
  margin: 47px 0 0;
  font-size: 18px;
  margin: 47px 0 0 95px;
}
#selection > p:nth-of-type(2) {/* -- 職種によっては実習も可能 */
  width: auto;
  grid-row: 3 / 4; grid-column: 1 / 3;
  margin: 47px auto 0;
  font-size: 16px; line-height: 1;
}

#selection > ol {
  grid-row: 1 / 3; grid-column: 2 / 3;
  grid-template: auto auto / 156px 182px 166px;
  gap: 33px 0;
  width: 504px;
  margin: 0 0 0 102px;
}
#selection > ol > li {
  width: 140px;
  font-size: 24px;
}
#selection > ol > li::before {
  width: 140px; height: 140px;
  border-radius: 24px;
}
#selection > ol > li::after {
  width: 60px; height: 60px;
  padding: 21px 0 0;
  font-size: 28px;
  background: hsl(0, 0%, 100%) url('../image/index_selection_03.svg') center 10px / 29px no-repeat;
  border: 2px solid hsl(25, 90%, 56%);
}
#selection > ol > li:nth-of-type(3n-2) {/* -- 1, 3 */
  padding: 173px 16px 0 0;
}
#selection > ol > li:nth-of-type(3n-2)::before {
  inset: 0 auto auto 0;
}
#selection > ol > li:nth-of-type(3n-2)::after {
  inset: 102px auto auto calc(0px + 70px - 30px);
}
#selection > ol > li:nth-of-type(3n-1) {/* -- 2, 4 */
  padding: 173px 16px 0 26px;
  background: url('../image/index_selection_01.svg') left 64px / 14px no-repeat;
}
#selection > ol > li:nth-of-type(3n-1)::before {
  inset: 0 auto auto 26px;
}
#selection > ol > li:nth-of-type(3n-1)::after {
  inset: 102px auto auto calc(26px + 70px - 30px);
}
#selection > ol > li:nth-of-type(3n) {/* -- 3, 5 */
  padding: 173px 0 0 26px;
  background: url('../image/index_selection_01.svg') left 64px / 14px no-repeat;
}
#selection > ol > li:nth-of-type(3n)::before {
  inset: 0 auto auto 26px;
}
#selection > ol > li:nth-of-type(3n)::after {
  inset: 102px auto auto calc(26px + 70px - 30px);
}
#selection > ol > li:nth-of-type(1)::before {/* -- エントリー */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_01.svg') center 20px / 87px no-repeat;
}
#selection > ol > li:nth-of-type(2)::before {/* -- 書類選考 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_02.svg') center 20px / 87px no-repeat;
}
#selection > ol > li:nth-of-type(3)::before {/* -- 一次面接 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_03.svg') center 20px / 87px no-repeat;
}
#selection > ol > li:nth-of-type(4)::before {/* -- 適性検査 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_04.svg') center 20px / 87px no-repeat;
}
#selection > ol > li:nth-of-type(5)::before {/* -- 最終面接 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_05.svg') center 20px / 87px no-repeat;
}
#selection > ol > li:nth-of-type(6)::before {/* -- 内定 */
  background: hsl(25, 90%, 56%) url('../image/index_selection_02_06.svg') center 20px / 87px no-repeat;
}
#selection > ol > li > small {
  margin: 14px auto 0;
  font-size: 16px;
}



#session {
  grid-template: auto auto auto 1fr / auto 1fr;
  width: 1100px;
  margin: 0 auto; padding: 45px 0 100px;
}

#session > h2 {
  grid-row: 1 / 2; grid-column: 1 / 3;
  position: relative;
  padding: 0 0 30px;
  font-size: 40px; line-height: 1;
}
#session > h2::after {
  content: '';
  display: block;
  width: 100px; height: 3px;
  position: absolute;
  inset: auto auto 0 calc(50% - 50px);
  background: hsl(25, 90%, 56%);
}
#session > h2 > br {
  display: none;
}

#session > img {
  grid-row: 2 / 5; grid-column: 1 / 2;
  width: 410px;
  margin: 50px 0 0;
  border-radius: 24px;
}

#session > p {
  grid-row: 2 / 3; grid-column: 2 / 3;
  width: 570px;
  margin: 84px 0 0 50px;
  font-size: 18px;
}

#session > a {
  grid-row: 3 / 4; grid-column: 2 / 3;
  width: 355px; height: 68px;
  margin: 24px 0 0 50px;
  font-size: 18px;
  background: hsl(25, 90%, 56%) url('../image/index_session_02.svg') right 30px center / 17px no-repeat;
  border-radius: 34px;
}



#data {
  padding: 97px 0 83px;
  background: url('../image/index_data_01_pc.webp') center top / 100% repeat-y;
}

#data > h2 {
  font-size: 40px; line-height: 1;
}

#data > ul {
  grid-template: auto 1fr / auto auto auto;
  gap: 28px 18px;
  width: 1000px;
  margin: 49px auto 0;
}
#data > ul > li {
  width: 320px;
  border: 2px solid hsl(25, 90%, 56%);
  border-radius: 24px;
  box-shadow: 16px 16px hsla(25, 90%, 56%, 0.1);
}
#data > ul > li > h3 {
  font-size: 24px; line-height: 1;
}
#data > ul > li > p {
  margin: 15px auto 0;
  font-size: 20px; line-height: 1.4;
}
#data > ul > li > p > strong {
  font-size: 64px; line-height: 1;
}
#data > ul > li:nth-of-type(1) {/* -- 全従業員数 */
  grid-row: 1 / 2; grid-column: 1 / 2;
  padding: 25px 0 13px;
}
#data > ul > li:nth-of-type(1) > img {
  width: 181px;
  margin: 33px auto 0;
}
#data > ul > li:nth-of-type(2) {/* -- 年間休日日数 */
  grid-row: 1 / 2; grid-column: 2 / 3;
  padding: 25px 0 3px;
}
#data > ul > li:nth-of-type(2) > img {
  width: 148px;
  margin: 33px auto 0;
}
#data > ul > li:nth-of-type(3) {/* -- 平均残業時間 */
  grid-row: 1 / 2; grid-column: 3 / 4;
  padding: 25px 0 20px;
}
#data > ul > li:nth-of-type(3) > img {
  width: 175px;
  margin: 14px auto 0;
}
#data > ul > li:nth-of-type(4) {/* -- PTWが雇用する障害者のみなさん */
  grid-row: 2 / 3; grid-column: 1 / 4;
  grid-template: auto 1fr / 1fr auto;
  width: 1000px;
  padding: 25px 0 26px;
}
#data > ul > li:nth-of-type(4) > h3 {
  grid-row: 1 / 2; grid-column: 1 / 3;
}
#data > ul > li:nth-of-type(4) > h3 > br {
  display: none;
}
#data > ul > li:nth-of-type(4) > p {
  grid-row: 2 / 3; grid-column: 2 / 3;
  margin: 101px 97px 0 0;
  font-size: 24px; line-height: 65px;
}
#data > ul > li:nth-of-type(4) > p > strong {
  font-size: 36px;
}
#data > ul > li:nth-of-type(4) > p > small {
  font-size: 20px;
}
#data > ul > li:nth-of-type(4) > picture {
  grid-row: 2 / 3; grid-column: 1 / 2;
  width: 541px;
  margin: 35px 0 0 44px;
}



#support {
  padding: 120px 0 117px;
}

#support > h2 {
  padding: 0 0 30px;
  font-size: 40px; line-height: 1;
}
#support > h2::after {
  width: 100px; height: 3px;
  inset: auto auto 0 calc(50% - 50px);
}
#support > h2 > br {
  display: none;
}

#support > p {
  width: 1030px;
  margin: 43px auto 0;
  text-align: left;
}
#support > p > br:nth-of-type(1) {/* -- ンドを持つ<br>社員ひとり */
  display: none;
}
#support > p > br:nth-of-type(2) {/* -- 踏み出し、<br>セクション */
  display: none;
}
#support > p > br:nth-of-type(3) {/* -- 根を超え、<br>プロとして */
  display: none;
}
#support > p > br:nth-of-type(4) {/* -- ての誇りを<br>もってクオ */
  display: inline;
}
#support > p > br:nth-of-type(5) {/* -- りをもって<br>クオリティ */
  display: none;
}
#support > p > br:nth-of-type(6) {/* -- ていく事を<br>ミッション */
  display: none;
}
#support > p > br:nth-of-type(7) {/* -- ています。<br>その為に様 */
  display: none;
}

#support > ul {
  gap: 20px 0;
  width: 1000px;
  margin: 99px auto 0;
}
#support > ul > li {
  grid-template: auto / 230px auto;
  width: 100%;
  padding: 0 0 20px;
  border-bottom: 1px solid hsl(0, 0%, 20%);
}
#support > ul > li > h3 {
  grid-row: 1 / 2; grid-column: 1 / 2;
  font-size: 18px; line-height: 1.8;
}
#support > ul > li > p {
  grid-row: 1 / 2; grid-column: 2 / 3;
  margin: 0;
  font-size: 18px;
}
#support > ul > li > p > br {
  display: none;
}


#benefit {
  padding: 110px 0 100px;
}

#benefit > h2 {
  padding: 0 0 30px;
  font-size: 40px; line-height: 1;
}
#benefit > h2::after {
  width: 100px; height: 3px;
  inset: auto auto 0 calc(50% - 50px);
}

#benefit > ul {
  gap: 20px 0;
  width: 1000px;
  margin: 70px auto 0;
}
#benefit > ul > li {
  grid-template: auto auto auto / 230px auto;
  width: 100%;
  padding: 0 0 20px;
  border-bottom: 1px solid hsl(0, 0%, 20%);
}
#benefit > ul > li > h3 {
  grid-row: 1 / 2; grid-column: 1 / 2;
  font-size: 18px; line-height: 1.8;
}
#benefit > ul > li > p {
  grid-row: 1 / 2; grid-column: 2 / 3;
  margin: 0;
  font-size: 18px;
}
#benefit > ul > li > p > br {
  display: none;
}

#benefit > ul > li > p:first-of-type {
  margin: 0;
}
#benefit > ul > li > ul {
  gap: 0 25px;
  margin: 0;
}
#benefit > ul > li > ul > li {
  font-size: 18px;
}
#benefit > ul > li > ul > li::before {
  content: '・';
}
#benefit > ul > li:nth-of-type(6) > p:nth-of-type(1) {
  grid-row: 1 / 2; grid-column: 2 / 3;
}
#benefit > ul > li:nth-of-type(6) > ul {
  grid-row: 2 / 3; grid-column: 2 / 3;
}
#benefit > ul > li:nth-of-type(6) > p:nth-of-type(2) {
  grid-row: 3 / 4; grid-column: 2 / 3;
}


#faq {
  padding: 101px 0 0;
}

#faq > hgroup {
  padding: 0;
}
#faq > hgroup > h2 {
  font-size: 76px;
}
#faq > hgroup > p {
  margin: 34px 0 0;
  font-size: 24px;
}

#faq > dl {
  margin: 60px auto 86px;
}
#faq > dl > dt {
  width: 1100px;
  margin: 37px auto 0; padding: 39px 60px 37px 150px;
  font-size: 24px; line-height: 1;
  border-radius: 24px;
}
#faq > dl > dt::before {
  width: 60px; height: 60px;
  inset: 20px auto auto 40px;
  font-size: 28px;
}
#faq > dl > dt:firast-of-type {
  margin: 0 auto;
}
#faq > dl > dd {
  width: 1100px;
  margin: 0 auto; padding: 26px 60px 0 150px;
}
#faq > dl > dd::before {
  width: 60px; height: 60px;
  inset: 20px auto auto 40px;
  font-size: 28px;
  border: 2px solid hsl(25, 90%, 56%);
}

#faq > p {
  padding: 51px 0 50px;
  font-size: 32px; line-height: 1;
}
#faq > p > br {
  display: none;
}
#faq > p > a {
  width: 354px; height: 68px;
  margin: 45px auto 0;
  font-size: 18px;
  background: hsl(25, 90%, 56%) url('../image/index_session_02.svg') right 30px center / 17px no-repeat;
  border-radius: 34px;
}



body > aside {
  inset: auto auto 112px 0;
}

body > aside > a {
  width: 40px; height: 40px;
  inset: auto auto -80px calc(50% + 510px);
  background: hsl(0, 0%, 100%) url('../image/index_aside_01.svg') center center / 12px no-repeat;
  border: 1px solid hsl(0, 0%, 20%);
}



footer {
  width: 1100px;
  padding: 40px 0 29px;
}

footer > h1 {
  width: 84px;
}

footer > menu:nth-of-type(1) {/* -- 他サイト */
  gap: 0 48px;
  width: 1000px;
  margin: 104px 0 0;
}
footer > menu:nth-of-type(1) > li > a {
  font-size: 18px;
}
footer > menu:nth-of-type(1) > li > a::after {
  width: 12px; height: 12px;
  margin: 0 0 0 7px;
  background: url('../image/index_footer_01.svg') center center / 12px no-repeat;
}

footer > menu:nth-of-type(2) {/* -- SNS */
  gap: 0 16px;
  padding: 0;
}
footer > menu:nth-of-type(2) > li > a {
  width: 27px;
}

footer > small {
  margin: 39px auto 0;
  font-size: 14px;
}



#spmenu {
  width: calc(350 / 390 * 100vw);
  overflow: visible;
  box-sizing: border-box;
  position: relative;
  margin: calc(90 / 390 * 100vw) auto calc(38 / 390 * 100vw); padding: 0;
  background: transparent;
  border: none;
}
#spmenu::backdrop {
  background: hsl(30, 40%, 92%);
}

#spmenu > button {
  appearance: none;
  width: calc(60 / 390 * 100vw); height: calc(60 / 390 * 100vw);
  position: absolute;
  inset: calc(-75 / 390 * 100vw) calc(-10 / 390 * 100vw) auto auto;
  background: transparent;
  border: none;
}

#spmenu > menu {
  width: 100%;
  padding: calc(6 / 390 * 100vw) 0 calc(8 / 390 * 100vw);
  background: hsl(0, 0%, 100%);
  border-radius: calc(24 / 390 * 100vw);
  box-shadow: calc(2 / 390 * 100vw) calc(2 / 390 * 100vw) calc(5 / 390 * 100vw) hsla(0, 0%, 20%, 0.1);
}
#spmenu > menu > li > a {
  display: block;
  padding: calc(38 / 390 * 100vw) calc(50 / 390 * 100vw) calc(37 / 390 * 100vw) calc(40 / 390 * 100vw);
  font-size: calc(20 / 390 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 20%);
  background: url('../image/index_dialog_02.svg') right calc(33 / 390 * 100vw) center / calc(10 / 390 * 100vw) no-repeat;
  border-top: max(calc(1 / 390 * 100vw), 1px) solid hsl(0, 0%, 80%);
}
#spmenu > menu > li:first-of-type > a {
  border-top: none;
}

}/* -- /@media (min-width: 768px) */