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

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 0;
  font-optical-sizing: auto;
}

header {
  padding: calc(63 / 750 * 100vw) 0 calc(57 / 750 * 100vw);
  background: radial-gradient(circle, hsl(44deg, 100%, 50%) 0%, hsl(29deg, 100%, 50%) 100%);
}

header > h1 {
  text-align: center;
  margin: 0 auto;
  font-weight: 700;
  font-size: calc(48 / 750 * 100vw); line-height: calc(60 / 48);
  color: hsl(0, 0%, 100%);
}

main {
  padding:calc(100 / 750 * 100vw) 0 calc(113 / 750 * 100vw);
}

main > ol {
  list-style: none;
  width: calc(630 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto; padding: 0;
}
main > ol > li {
 margin: calc(19 / 750 * 100vw) 0 0; padding: 0 0 calc(16 / 750 * 100vw);
 border-bottom: dotted max(calc(2 / 750 * 100vw), 2px) hsl(0, 0%, 72%);
}
main > ol > li > a {
  display: grid;
  grid-template-rows: calc(48 / 750 * 100vw) auto; grid-template-columns: auto calc(40 / 750 * 100vw);
  gap: calc(12 / 750 * 100vw) 0;
  font-size: calc(26 / 750 * 100vw); line-height: calc(40 / 26);
  text-decoration: none;
  color: hsl(24deg, 100%, 50%);
}
main > ol > li > a::before {
  display: flex;
  grid-row: 1 / 2; grid-column: 1 / 2;
  justify-content: center;
  align-items: center;
  width: calc(140 / 750 * 100vw); height: calc(48 / 750 * 100vw);
  font-size: calc(26 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  background: hsl(24deg, 100%, 50%);
  border-radius: calc(48 / 2 / 750 * 100vw);
}
main > ol > li > a::after {
  content: '';
  display: flex;
  grid-row: 1 / 3; grid-column: 2 / 3;
  align-self: center;
  width: calc(40 / 750 * 100vw); height: calc(40 / 750 * 100vw);
  background: hsl(24deg, 100%, 50%) url(../image/movie_01.svg) center center /calc(20 / 750 * 100vw) no-repeat;
  border-radius: calc(40 / 2 / 750 * 100vw);
}
main > ol > li > p {
  font-size: calc(18 / 750 * 100vw); line-height: calc(40 / 18);
  letter-spacing: calc(80em / 1000);
  color: hsl(0, 0%, 0%);
}
main > ol > li > p > a {
  color: hsl(225deg, 46%, 30%);
}
main > ol > li:nth-of-type(1) > a::before {
  content: 'シーン①';
}
main > ol > li:nth-of-type(2) > a::before {
  content: 'シーン②';
}
main > ol > li:nth-of-type(3) > a {
  padding-left: 3em;
  text-indent: -3em;
}
main > ol > li:nth-of-type(3) > a::before {
  content: 'シーン③';
  margin-left: -3em;
  text-indent: 0;
}
main > ol > li:nth-of-type(4) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(4) > a::before {
  content: 'シーン④';
  margin-left: -3em;
}
main > ol > li:nth-of-type(5) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(5) > a::before {
  content: 'シーン⑤';
  margin-left: -3em;
}
main > ol > li:nth-of-type(6) > a {
  padding-left: 3em;
  text-indent: -3em;
}
main > ol > li:nth-of-type(6) > a::before {
  content: 'シーン⑥';
  margin-left: -3em;
  text-indent: 0;
}
main > ol > li:nth-of-type(7) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(7) > a::before {
  content: 'シーン⑦';
  margin-left: -3em;
}
main > ol > li:nth-of-type(8) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(8) > a::before {
  content: 'シーン⑧';
  margin-left: -3em;
}
main > ol > li:nth-of-type(9) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(9) > a::before {
  content: 'シーン⑨';
  margin-left: -3em;
}
main > ol > li:nth-of-type(9) > a > br:nth-of-type(3) {
  display: none;
}
main > ol > li:nth-of-type(10) > a {
  padding-left: 3em;
}
main > ol > li:nth-of-type(10) > a::before {
  content: 'シーン⑩';
  margin-left: -3em;
}

main > dl {
  list-style: none;
  width: calc(630 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(99 / 750 * 100vw) auto 0; padding: calc(36 / 750 * 100vw) calc(40 / 750 * 100vw);
  border: solid max(calc(1 / 750 * 100vw), 1px) hsl(0, 0%, 72%);
}
main > dl > dt {
  margin: calc(36 / 750 * 100vw) 0 0;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 24);
  letter-spacing: calc(80em / 1000);
  color: hsl(0, 0%, 0%);
}
main > dl > dd {
  margin: 0;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 24);
  letter-spacing: calc(80em / 1000);
  color: hsl(0, 0%, 0%);
}
main > dl > dd > span {
  color: hsl(24deg, 100%, 50%);
}
main > dl > dt:first-of-type {
  margin: 0;
}
main > dl > dt:nth-of-type(2) {
  color: hsl(0, 100%, 55%);
}
main > dl > dd:nth-of-type(2) {
  color: hsl(0, 100%, 55%);
}

main > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(595 / 750 * 100vw); height: calc(90 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(100 / 750 * 100vw) auto 0; padding: 0 calc(51 / 750 * 100vw) 0 0;
  font-size: calc(26 / 750 * 100vw); line-height: calc(40 / 26);
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  background: hsl(24deg, 100%, 50%) url(../image/movie_02.svg) right calc(21 / 750 * 100vw) center /calc(30 / 750 * 100vw) no-repeat;
}

footer {
  padding: calc(79 / 750 * 100vw) 0 calc(49 / 750 * 100vw);
  background: hsl(0, 0%, 87%);
}

footer > a {
  display: block;
  width: calc(320 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto;
}
footer > a > img {
  width: 100%; height: auto;
}

footer > small {
  display: block;
  text-align: center;
  width: 100%;
  margin: calc(41 / 750 * 100vw) 0 0;
  font-size: calc(18 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
}




@media (min-width: 768px), print {

body {
  min-width: 1200px;
}

header {
  padding: 93px 0 87px;
}

header > h1 {
  font-size: 48px;
}
header > h1 > br {
  display: none;
}

main {
  padding:61px 0 103px;
}

main > ol {
  width: 1110px;
}
main > ol > li {
 margin: 39px 0 0; padding: 0 0 39px;
 border-bottom: dotted 2px hsl(0, 0%, 72%);
}
main > ol > li > a {
  grid-template-rows: auto; grid-template-columns: 100px auto 50px;
  gap: 0 22px;
  font-size: 24px; line-height: calc(35 / 24);
  letter-spacing: calc(80em / 1000);
  transition: opacity 0.6s;
}
main > ol > li > a::before {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: 100px; height: 38px;
  font-size: 20px;
  letter-spacing: 0;
  border-radius: calc(38px / 2);
}
main > ol > li > a::after {
  grid-row: 1 / 2; grid-column: 3 / 4;
  width: 30px; height: 30px;
  background: hsl(24deg, 100%, 50%) url(../image/movie_01.svg) center center /15px no-repeat;
  border-radius: calc(30px / 2);
}
main > ol > li > a:hover {
  opacity: 0.45;
}
main > ol > li > p {
  padding: 0 0 0 122px;
  font-size: 18px;
}
main > ol > li > p > a {
  transition: color 0.6s;
}
main > ol > li > p > a:hover {
  color: hsl(24deg, 100%, 50%);
}
main > ol > li > p > br {
  display: none;
}
main > ol > li:nth-of-type(1) > a > br {
  display: none;
}
main > ol > li:nth-of-type(2) {
  padding: 0 0 30px;
}
main > ol > li:nth-of-type(2) > a > br {
  display: none;
}
main > ol > li:nth-of-type(3) > a {
  padding-left: 0;
  text-indent: 0;
}
main > ol > li:nth-of-type(3) > a::before {
  margin-left: 0;
}
main > ol > li:nth-of-type(3) > a > br {
  display: none;
}
main > ol > li:nth-of-type(4) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(4) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(4) > a > br {
  display: none;
}
main > ol > li:nth-of-type(5) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(5) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(5) > a > br {
  display: none;
}
main > ol > li:nth-of-type(6) > a {
  padding-left: 0;
  text-indent: 0;
}
main > ol > li:nth-of-type(6) > a::before {
  margin-left: 0;
}
main > ol > li:nth-of-type(6) > a > br {
  display: none;
}
main > ol > li:nth-of-type(7) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(7) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(7) > a > br {
  display: none;
}
main > ol > li:nth-of-type(8) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(8) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(8) > a > br {
  display: none;
}
main > ol > li:nth-of-type(9) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(9) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(9) > a > br {
  display: none;
}
main > ol > li:nth-of-type(9) > a > br:nth-of-type(3) {
  display: inline;
}
main > ol > li:nth-of-type(10) > a {
  padding-left: 77px;
}
main > ol > li:nth-of-type(10) > a::before {
  margin-left: -77px;
}
main > ol > li:nth-of-type(10) > a > br {
  display: none;
}

main > dl {
  display: grid;
  grid-template-columns: 170px auto;
  gap: 36px 0;
  width: 1110px;
  margin: 59px auto 0; padding: 40px 48px 38px;
  border: solid 1px hsl(0, 0%, 72%);
}
main > dl > dt {
  grid-column: 1 / 2;
  margin: 0;
  font-size: 24px;
}
main > dl > dd {
  grid-column: 2 / 3;
  font-size: 24px;
}

main > a {
  width: 595px; height: 90px;
  margin: 101px auto 0; padding: 0 51px 0 0;
  font-size: 26px;
  background: hsl(24deg, 100%, 50%) url(../image/movie_02.svg) right 21px center /30px no-repeat;
  transition: background-color 0.6s;
}
main > a:hover {
  background-color: hsl(225deg, 46%, 30%);
}

footer {
  padding: 79px 0 33px;
}

footer > a {
  width: 320px;
}

footer > small {
  margin: 40px 0 0;
  font-size: 20px;
}


}