@charset "UTF-8";
/* Scss Document */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth; }
  html.preload {
    font-size: 1px !important; }
    html.preload * {
      transition: none !important;
      visibility: hidden;
      max-width: 100%; }
  @media (max-width: 576px) {
    html {
      font-size: calc(var(--vw) / 384); } }
  @media (min-width: 576.1px) and (max-width: 767px) {
    html {
      font-size: 1.5px; } }
  @media (min-width: 767.1px) and (max-width: 1920px) {
    html {
      font-size: calc(var(--vw) / 1280); } }
  @media (min-width: 1920.1px) {
    html {
      font-size: 1.5px; } }
  @media print {
    html {
      font-size: 0.2mm; } }

body {
  font-size: 12rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.7;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  word-break: break-word;
  min-width: 320rem;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  @media screen and (min-width: 768px), print {
    body {
      font-size: 16rem; } }

html.modal_on, body.modal_on {
  overflow: hidden; }

a {
  text-decoration: none; }

a:hover {
  text-decoration: none; }

img {
  max-width: 100%;
  vertical-align: top; }

section,
figure {
  margin: 0; }

p {
  margin: 1em 0; }
  p:first-child {
    margin-top: 0; }
  p:last-child {
    margin-bottom: 0; }

.inner {
  position: relative;
  box-sizing: border-box; }

@media screen and (min-width: 768px), print {
  .inner {
    width: 900rem;
    margin: 0 auto; }

  .sp_only {
    display: none !important; } }
@media screen and (max-width: 767.98px) {
  .inner {
    width: 100%;
    padding: 0 40rem;
    box-sizing: border-box; }

  .pc_only {
    display: none !important; } }
.inview {
  opacity: 0;
  transform: translateY(20rem);
  transition: opacity 1s, transform 1s; }
  @media screen and (min-width: 768px), print {
    .inview {
      transform: translateY(50rem); } }
  .inview.is-show {
    opacity: 1;
    transform: none; }

.grad {
  background: linear-gradient(90deg, #d22c25 0%, rgba(210, 44, 37, 0) 100%);
  mix-blend-mode: hard-light;
  opacity: .25;
  display: block; }

h2 {
  text-align: center;
  margin: 0 0 20rem;
  font-size: 20rem; }
  @media screen and (min-width: 768px), print {
    h2 {
      margin: 0;
      font-size: 32rem;
      text-align: left;
      white-space: nowrap; } }

.label {
  margin: 0 0 0 -20rem;
  text-align: left; }
  @media screen and (min-width: 768px), print {
    .label {
      margin-left: -100rem; } }
  .label img {
    width: 200rem; }
    @media screen and (min-width: 768px), print {
      .label img {
        width: 350rem; } }

/*=============================================*/
#floatnavi {
  display: none;
  position: fixed;
  left: 0;
  z-index: 1000;
  border: 1px solid #D22C25;
  border-left: none;
  border-bottom: none;
  width: 190rem;
  border-radius: 0 5rem 0 0;
  background: #fff;
  overflow: hidden;
  bottom: 0; }
  @media screen and (min-width: 768px), print {
    #floatnavi {
      border-radius: 0 10rem 0 0; } }
  #floatnavi h2 {
    background: #D22C25;
    color: #fff;
    font-size: 18rem;
    font-weight: 600;
    text-align: left;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 21rem;
    padding: 8rem 20rem;
    margin: 0;
    line-height: 1; }
    #floatnavi h2 i {
      line-height: 1px;
      transform: rotate(180deg); }
      #floatnavi h2 i svg {
        width: 21rem;
        height: 11rem;
        stroke: #fff; }
    #floatnavi h2.open i {
      transform: rotate(0); }
  #floatnavi .index {
    display: none; }
  #floatnavi ul.primary {
    margin: 0;
    padding: 20rem 20rem 25rem;
    display: grid;
    grid-gap: 15rem; }
    #floatnavi ul.primary > li {
      margin: 0;
      padding: 0;
      list-style: none; }
      #floatnavi ul.primary > li > a {
        color: #000000; }
        #floatnavi ul.primary > li > a .en {
          font-size: 12rem;
          color: #D22C25;
          display: block; }
        #floatnavi ul.primary > li > a .ja {
          display: block;
          font-size: 14rem;
          text-decoration-line: underline;
          text-decoration-thickness: 1rem;
          text-underline-offset: 3rem;
          text-decoration-color: transparent;
          transition: text-decoration-color .3s; }
        @media screen and (min-width: 768px), print {
          #floatnavi ul.primary > li > a:hover .ja {
            text-decoration-color: #D22C25; } }
  #floatnavi ul.secondary {
    margin: 5rem 0 0;
    padding: 0; }
    #floatnavi ul.secondary > li {
      margin: 0;
      padding: 0;
      list-style: none; }
      #floatnavi ul.secondary > li::before {
        content: "- ";
        color: #D22C25; }
      #floatnavi ul.secondary > li > a {
        color: #000000;
        display: inline-block;
        font-size: 14rem;
        text-decoration-line: underline;
        text-decoration-thickness: 1rem;
        text-underline-offset: 3rem;
        text-decoration-color: transparent;
        transition: text-decoration-color .3s; }
        @media screen and (min-width: 768px), print {
          #floatnavi ul.secondary > li > a:hover {
            text-decoration-color: #D22C25; } }

/*=============================================*/
#kv {
  border-top: 5rem solid #D22C25;
  height: 450rem;
  position: relative;
  overflow: hidden;
  margin: 0 0 10rem; }
  @media screen and (min-width: 768px), print {
    #kv {
      height: 760rem;
      border-top-width: 10rem;
      margin: 0 0 20rem; } }
  #kv h1 {
    margin: 0;
    padding: 40rem 40rem;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      #kv h1 {
        position: absolute;
        bottom: 40rem;
        left: 50%;
        transform: translateX(-50%);
        width: 386rem;
        padding: 0; } }
  #kv .bg {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-48%);
    width: 470rem; }
    @media screen and (min-width: 768px), print {
      #kv .bg {
        width: 1000rem;
        top: 18%; } }
  #kv .catchcopy {
    position: absolute;
    top: 67%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 170rem; }
    @media screen and (min-width: 768px), print {
      #kv .catchcopy {
        top: 50%;
        left: 50%;
        width: 362rem; } }
    #kv .catchcopy img {
      width: 100%; }
  #kv .person1,
  #kv .person2 {
    position: absolute;
    bottom: 0;
    width: 50%; }
    #kv .person1 img,
    #kv .person2 img {
      height: 370rem;
      width: auto; }
      @media screen and (min-width: 768px), print {
        #kv .person1 img,
        #kv .person2 img {
          height: 760rem; } }
    #kv .person1 .p1,
    #kv .person2 .p1 {
      animation: fadeinout1 10s infinite; }
    #kv .person1 .p2,
    #kv .person2 .p2 {
      position: absolute;
      bottom: 0;
      animation: fadeinout2 10s infinite; }
  #kv .person1 {
    left: 0;
    text-align: left; }
    #kv .person1 .p2 {
      left: 0; }
  #kv .person2 {
    right: 0;
    text-align: right; }
    #kv .person2 .p2 {
      right: 0; }

@keyframes fadeinout1 {
  0% {
    opacity: 1; }
  40% {
    opacity: 1; }
  50% {
    opacity: 0; }
  90% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeinout2 {
  0% {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/*=============================================*/
#kv_bottom {
  height: 95rem;
  background: url("../images/kv_bottom.webp") repeat-x 0 0/644rem 95rem;
  margin: 0 0 60rem; }
  @media screen and (max-width: 767.98px) {
    #kv_bottom {
      animation: slide-bg_sp 20s linear infinite; } }
  @media screen and (min-width: 768px), print {
    #kv_bottom {
      margin: 0 0 150rem;
      height: 191rem;
      background-size: 1295rem 191rem;
      animation: slide-bg_pc 40s linear infinite; } }

@keyframes slide-bg_sp {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -644rem 0; } }
@keyframes slide-bg_pc {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1259rem 0; } }
/*=============================================*/
#message {
  background: rgba(210, 44, 37, 0.05);
  position: relative;
  margin-top: 36rem;
  font-size: 15rem;
  padding: 0 0 45rem; }
  @media screen and (min-width: 768px), print {
    #message {
      font-size: 20rem;
      padding: 0 0 60rem; } }
  #message .grad1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 95rem;
    height: 75rem;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px), print {
      #message .grad1 {
        width: 190rem;
        height: 150rem;
        top: 200rem; } }
  #message .grad2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150rem;
    height: 55rem;
    transform: translateY(50%) scaleX(-1); }
    @media screen and (min-width: 768px), print {
      #message .grad2 {
        width: 397rem;
        height: 110rem; } }
  #message figure {
    text-align: center;
    transform: translateY(-33rem);
    margin-bottom: -13rem; }
    @media screen and (min-width: 768px), print {
      #message figure {
        transform: translateY(-100rem);
        margin-bottom: -185rem; } }
    #message figure img {
      width: 235rem; }
      @media screen and (min-width: 768px), print {
        #message figure img {
          width: 473rem; } }
  #message p {
    font-size: 15rem; }
    @media screen and (min-width: 768px), print {
      #message p {
        margin: 0 80rem;
        font-size: 20rem;
        line-height: 1.9; } }
    #message p strong {
      padding-top: 10rem;
      font-size: 20rem;
      display: block;
      text-align: center;
      color: #D22C25;
      text-align: center;
      text-decoration-line: underline;
      text-decoration-thickness: 1rem;
      text-underline-offset: 3rem; }
      @media screen and (min-width: 768px), print {
        #message p strong {
          padding-top: 20rem;
          font-size: 28rem;
          line-height: 1.6; } }

/*=============================================*/
#point {
  padding: 50rem 0 0; }
  @media screen and (min-width: 768px), print {
    #point {
      padding: 75rem 0 0; } }
  @media screen and (min-width: 768px), print {
    #point .grid1 {
      margin: 0 0 60rem;
      display: flex;
      grid-gap: 70rem; }
      #point .grid1 p {
        align-self: center;
        margin: 0; } }
  #point .merit_hw {
    margin: 30rem 0 20rem;
    color: #D22C25;
    text-align: center;
    font-size: 15rem; }
    @media screen and (min-width: 768px), print {
      #point .merit_hw {
        font-size: 24rem;
        margin: 0 0 30rem; } }
    #point .merit_hw::after {
      content: "";
      width: 25rem;
      height: 1rem;
      background: #D22C25;
      display: block;
      margin: 10rem auto 0; }
      @media screen and (min-width: 768px), print {
        #point .merit_hw::after {
          width: 50rem;
          height: 2rem;
          margin-top: 20rem; } }
  #point .merit {
    display: grid;
    grid-gap: 40rem;
    margin: 0 0 20rem; }
    @media screen and (min-width: 768px), print {
      #point .merit {
        justify-content: space-between;
        grid-template-columns: repeat(3, 226rem); } }
    #point .merit figure {
      display: grid;
      grid-template-columns: 130rem 1fr;
      grid-gap: 30rem;
      position: relative;
      align-items: center; }
      @media screen and (min-width: 768px), print {
        #point .merit figure {
          display: block;
          text-align: center; } }
      @media screen and (min-width: 768px), print {
        #point .merit figure figcaption {
          margin-top: 10rem; } }
      #point .merit figure em {
        font-style: normal;
        color: #D22C25; }
        @media screen and (min-width: 768px), print {
          #point .merit figure em {
            display: block; } }
      #point .merit figure i {
        position: absolute;
        display: block; }
        @media screen and (max-width: 767.98px) {
          #point .merit figure i {
            left: 50%;
            bottom: -20rem;
            transform: translateX(-50%) rotate(90deg); } }
        @media screen and (min-width: 768px), print {
          #point .merit figure i {
            top: 100rem;
            right: -65rem; } }
        #point .merit figure i svg {
          stroke: #D22C25;
          width: 15rem;
          stroke-width: 2;
          aspect-ratio: 3/2; }
          @media screen and (min-width: 768px), print {
            #point .merit figure i svg {
              width: 24rem; } }
  #point .job {
    position: relative;
    padding: 75rem 0 55rem; }
    @media screen and (min-width: 768px), print {
      #point .job {
        padding: 75rem 0 120rem; } }
    #point .job .grad1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 70rem;
      height: 75rem; }
      @media screen and (min-width: 768px), print {
        #point .job .grad1 {
          width: 190rem;
          height: 153rem; } }
    #point .job .grad2 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 150rem;
      height: 55rem;
      transform: scaleX(-1); }
      @media screen and (min-width: 768px), print {
        #point .job .grad2 {
          width: 397rem;
          height: 110rem; } }
    #point .job h3 {
      text-align: center;
      font-size: 15rem;
      margin: 20rem 0; }
      @media screen and (min-width: 768px), print {
        #point .job h3 {
          font-size: 32rem;
          margin: 20rem 0 40rem; } }
    #point .job .grid2 {
      display: grid;
      grid-gap: 20rem;
      margin: 0 0 10rem; }
      @media screen and (min-width: 768px), print {
        #point .job .grid2 {
          margin: 0 -100rem;
          grid-template-columns: repeat(2, 500rem);
          justify-content: space-between; } }
    #point .job figure {
      position: relative; }
      #point .job figure figcaption {
        background: #D22C25;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15rem;
        font-weight: 600;
        padding: 0 0.4em; }
        @media screen and (min-width: 768px), print {
          #point .job figure figcaption {
            font-size: 20rem; } }
    #point .job h4 {
      font-size: 12rem;
      margin: 15rem 0 5rem; }
      @media screen and (min-width: 768px), print {
        #point .job h4 {
          font-size: 16rem;
          margin: 20rem 0 15rem; } }
      #point .job h4 + p {
        margin-top: 0; }

/*=============================================*/
#merit {
  scroll-margin-top: 30rem; }
  @media screen and (min-width: 768px), print {
    #merit {
      scroll-margin-top: 40rem; } }
  @media screen and (min-width: 768px), print {
    #merit .grid1 {
      margin: 0 0 60rem;
      display: flex;
      grid-gap: 70rem; }
      #merit .grid1 p {
        align-self: center;
        margin: 0; } }
  #merit .merit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 20rem 35rem;
    margin: 30rem 0; }
    @media screen and (min-width: 768px), print {
      #merit .merit {
        justify-content: space-between;
        margin: 30rem 0 50rem; } }
    #merit .merit figure {
      width: 130rem;
      text-align: center; }
      @media screen and (min-width: 768px), print {
        #merit .merit figure {
          width: 226rem; } }
      #merit .merit figure img {
        width: 130rem; }
        @media screen and (min-width: 768px), print {
          #merit .merit figure img {
            width: 226rem; } }
      #merit .merit figure figcaption {
        margin-top: 5rem; }
        @media screen and (min-width: 768px), print {
          #merit .merit figure figcaption {
            margin-top: 10rem; } }
      @media screen and (max-width: 767.98px) {
        #merit .merit figure:last-child {
          width: 200rem; } }
  #merit strong {
    display: block;
    font-weight: normal;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      #merit strong {
        font-size: 24rem; } }

/*=============================================*/
#workshop {
  padding: 80rem 0 0; }
  @media screen and (min-width: 768px), print {
    #workshop {
      padding: 130rem 0 30rem; } }
  #workshop .label {
    transform: translateY(-50%);
    margin-bottom: -30rem; }
  #workshop .bg {
    background: rgba(210, 44, 37, 0.05);
    padding: 0 0 30rem;
    margin: 0 0 20rem; }
    @media screen and (min-width: 768px), print {
      #workshop .bg {
        padding: 0;
        margin: 0 0 80rem; } }
  @media screen and (min-width: 768px), print {
    #workshop .grid1 {
      margin: 0 0 60rem;
      display: flex;
      grid-gap: 70rem; }
      #workshop .grid1 p {
        align-self: center;
        margin: 0; } }
  #workshop .photo {
    display: grid;
    margin: 20rem -40rem 0;
    grid-gap: 10rem; }
    @media screen and (min-width: 768px), print {
      #workshop .photo {
        grid-template-columns: repeat(3, 1fr);
        margin: 0 -190rem; } }
    @media screen and (max-width: 767.98px) {
      #workshop .photo img {
        width: 210rem;
        display: block; }
        #workshop .photo img:nth-of-type(2n) {
          margin-left: auto; } }
  #workshop .workshop {
    margin: 0 -20rem; }
    @media screen and (min-width: 768px), print {
      #workshop .workshop {
        margin: 0; } }
    #workshop .workshop .workshop_jobtitle {
      position: relative;
      text-align: right;
      padding-left: 10rem;
      overflow: hidden;
      margin: 30rem 0 20rem; }
      @media screen and (min-width: 768px), print {
        #workshop .workshop .workshop_jobtitle {
          padding-left: 150rem;
          margin: 80rem 0 40rem; } }
      @media screen and (max-width: 767.98px) {
        #workshop .workshop .workshop_jobtitle img {
          transform: translateX(40rem);
          position: relative; } }
      #workshop .workshop .workshop_jobtitle h3 {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 0;
        background: #D22C25;
        color: #fff;
        font-size: 15rem;
        font-weight: 600;
        min-width: 160rem;
        text-align: center;
        box-sizing: border-box;
        padding: 5rem 20rem;
        transform: translateY(-50%);
        margin: 0; }
        @media screen and (min-width: 768px), print {
          #workshop .workshop .workshop_jobtitle h3 {
            font-size: 32rem;
            padding: 5rem 60rem;
            min-width: 325rem; } }
  #workshop .accordion_head {
    border: 1px solid #000000;
    cursor: pointer;
    border-radius: 5rem 5rem 0 0;
    display: grid;
    grid-template-columns: 75rem 1fr 14rem;
    padding-right: 20rem;
    margin: 10rem 0 0; }
    @media screen and (min-width: 768px), print {
      #workshop .accordion_head {
        grid-template-columns: 140rem 1fr 28rem;
        padding-right: 40rem;
        border-radius: 10rem 10rem 0 0;
        margin: 40rem 0 0; } }
    #workshop .accordion_head.open i {
      transform: rotate(180deg); }
    #workshop .accordion_head .title {
      padding: 8rem; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_head .title {
          padding: 15rem 20rem;
          display: flex;
          align-items: center;
          justify-content: space-between; } }
    #workshop .accordion_head em {
      border-right: 1px solid #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-style: normal;
      font-weight: 700;
      text-align: center;
      font-size: 15rem;
      line-height: 1.4; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_head em {
          padding: 10rem 0; } }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_head em.day1 {
          font-size: 22rem; } }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_head em.day5 {
          font-size: 28rem; } }
    #workshop .accordion_head h4 {
      color: #D22C25;
      font-size: 14rem;
      margin: 0 0 5rem;
      font-weight: 600;
      line-height: 1.4; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_head h4 {
          font-size: 20rem;
          margin: 0; } }
      #workshop .accordion_head h4 .indent {
        display: inline-block;
        margin-left: -0.5em; }
    #workshop .accordion_head ul.tags {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      grid-gap: 5rem; }
      #workshop .accordion_head ul.tags li {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #D22C25;
        padding: 3rem 5rem;
        font-size: 10rem;
        border-radius: 100rem;
        line-height: 1.2em;
        text-align: center; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_head ul.tags li {
            font-size: 12rem;
            padding: 4rem 13rem; } }
    #workshop .accordion_head i {
      align-self: center;
      line-height: 1px; }
      #workshop .accordion_head i svg {
        aspect-ratio: 28/15;
        stroke: #D22C25; }
  #workshop .accordion_body {
    display: none;
    border: 1px solid #000000;
    border-top: none;
    border-radius: 0 0 5rem 5rem;
    padding: 10rem 20rem 0;
    overflow: hidden; }
    @media screen and (min-width: 768px), print {
      #workshop .accordion_body {
        padding: 30rem 40rem 0;
        border-radius: 0 0 10rem 10rem; } }
    #workshop .accordion_body h5 {
      margin: 20rem 0 10rem;
      color: #D22C25;
      text-align: center;
      font-size: 15rem;
      font-weight: 600; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body h5 {
          font-size: 24rem;
          margin: 40rem 0 20rem; } }
      #workshop .accordion_body h5:first-child {
        margin-top: 0 !important; }
    #workshop .accordion_body .text em {
      font-style: normal;
      color: #D22C25; }
    #workshop .accordion_body .grid {
      display: grid;
      grid-gap: 10rem; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body .grid {
          grid-template-columns: 450rem 1fr;
          grid-gap: 30rem; } }
      #workshop .accordion_body .grid h5 {
        text-align: left; }
    #workshop .accordion_body ul.target {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 5rem;
      margin: 0;
      padding: 0; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body ul.target {
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10rem; } }
      #workshop .accordion_body ul.target li {
        margin: 0;
        padding: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        list-style: none;
        background: rgba(210, 44, 37, 0.2);
        border-radius: 3rem;
        line-height: 1.4; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body ul.target li {
            padding: 10rem;
            border-radius: 6rem; } }
    #workshop .accordion_body ul.voice {
      display: grid;
      grid-gap: 20rem;
      margin: 0 0 20rem;
      padding: 0; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body ul.voice {
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 40rem;
          margin: 0 0 40rem; } }
      #workshop .accordion_body ul.voice li {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 55rem 1fr;
        grid-gap: 20rem; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body ul.voice li {
            display: block;
            text-align: center; }
            #workshop .accordion_body ul.voice li img {
              width: 95rem; } }
      #workshop .accordion_body ul.voice p {
        margin: 0;
        align-self: center;
        font-size: 10rem; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body ul.voice p {
            text-align: left;
            font-size: 16rem;
            margin-top: 10rem; } }
    #workshop .accordion_body ul.timetable {
      padding: 0;
      margin: 0 -20rem;
      list-style: none; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body ul.timetable {
          margin: 0 -40rem; } }
      #workshop .accordion_body ul.timetable li {
        display: grid;
        grid-template-columns: 60rem 1fr;
        grid-gap: 20rem;
        align-items: center;
        margin: 0;
        padding: 20rem; }
        #workshop .accordion_body ul.timetable li:nth-of-type(2n + 1) {
          background: #F8F8F8; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body ul.timetable li {
            grid-template-columns: 82rem 1fr;
            grid-gap: 30rem;
            padding: 20rem 180rem; } }
        #workshop .accordion_body ul.timetable li figure img {
          width: 100%; }
        #workshop .accordion_body ul.timetable li h6 {
          font-weight: 700;
          margin: 0;
          font-size: 12rem;
          color: #D22C25; }
          @media screen and (min-width: 768px), print {
            #workshop .accordion_body ul.timetable li h6 {
              font-size: 20rem; } }
        #workshop .accordion_body ul.timetable li p {
          margin: 0;
          font-size: 10rem; }
          @media screen and (min-width: 768px), print {
            #workshop .accordion_body ul.timetable li p {
              font-size: 16rem; } }
    #workshop .accordion_body .entry {
      border-top: 1px solid #000000;
      margin: 0 -20rem; }
      @media screen and (min-width: 768px), print {
        #workshop .accordion_body .entry {
          margin: 0 -40rem; } }
      #workshop .accordion_body .entry p {
        text-align: center;
        font-weight: 700;
        margin: 0;
        padding: 10rem; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body .entry p {
            font-size: 20rem; } }
      #workshop .accordion_body .entry a {
        background: #D22C25;
        color: #fff;
        font-weight: bold;
        display: block;
        text-align: center;
        line-height: 1;
        padding: 10rem; }
        @media screen and (min-width: 768px), print {
          #workshop .accordion_body .entry a {
            display: flex;
            justify-content: center;
            align-items: center;
            grid-gap: 30rem;
            font-size: 20rem;
            padding: 15rem 0; } }
        #workshop .accordion_body .entry a em {
          display: flex;
          justify-content: center;
          align-items: center;
          grid-gap: 5rem;
          font-size: 30rem;
          font-style: normal;
          letter-spacing: 0.1em;
          margin-top: 5rem; }
          @media screen and (min-width: 768px), print {
            #workshop .accordion_body .entry a em {
              display: inline-flex;
              font-size: 40rem;
              margin: 0;
              transform: translateY(-2rem); } }
        #workshop .accordion_body .entry a i {
          line-height: 1px; }
          #workshop .accordion_body .entry a i svg {
            stroke: #fff;
            width: 15rem;
            height: 10rem;
            stroke-width: 2; }
            @media screen and (min-width: 768px), print {
              #workshop .accordion_body .entry a i svg {
                width: 24rem;
                height: 16rem;
                transform: translateY(2rem); } }

/*=============================================*/
#invitation {
  padding: 80rem 0 0;
  position: relative;
  overflow: hidden; }
  @media screen and (min-width: 768px), print {
    #invitation {
      padding: 150rem 0 0; } }
  #invitation .grad1 {
    position: absolute;
    top: 200rem;
    left: 0;
    width: 95rem;
    height: 75rem;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px), print {
      #invitation .grad1 {
        width: 190rem;
        height: 150rem;
        top: 330rem; } }
  #invitation .grad2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150rem;
    height: 55rem;
    transform: translateY(50%) scaleX(-1); }
    @media screen and (min-width: 768px), print {
      #invitation .grad2 {
        width: 397rem;
        height: 110rem; } }
  #invitation h2 {
    text-align: center; }
    @media screen and (min-width: 768px), print {
      #invitation h2 {
        margin: -80rem 0 40rem; } }
  #invitation .label {
    transform: translateY(-50%);
    margin-bottom: -30rem; }
    @media screen and (min-width: 768px), print {
      #invitation .label {
        margin-left: 0; } }
  #invitation p {
    margin: 0 0 20rem; }
    @media screen and (min-width: 768px), print {
      #invitation p {
        margin: 0 70rem 50rem; } }
  #invitation a {
    display: block; }
    @media screen and (min-width: 768px), print {
      #invitation a {
        margin: 0 70rem; } }
  #invitation .bg {
    background: rgba(210, 44, 37, 0.05);
    padding: 0 0 50rem;
    margin: 0; }
    @media screen and (min-width: 768px), print {
      #invitation .bg {
        padding: 0 0 100rem; } }

/*=============================================*/
footer {
  padding: 40rem;
  border-bottom: 5rem solid #D22C25; }
  @media screen and (min-width: 768px), print {
    footer {
      padding: 60rem 0;
      border-bottom-width: 10rem; } }
  footer ul.primary {
    margin: 0 0 20rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30rem 0;
    font-size: 10rem; }
    @media screen and (min-width: 768px), print {
      footer ul.primary {
        display: flex;
        justify-content: space-between;
        font-size: 14rem;
        margin: 0 0 60rem; } }
    footer ul.primary > li {
      margin: 0;
      padding: 0;
      list-style: none; }
  footer ul.secondary {
    margin: 8rem 0 0;
    padding: 0; }
    footer ul.secondary > li {
      margin: 0;
      padding: 0;
      list-style: none; }
      footer ul.secondary > li::before {
        content: "- ";
        color: #D22C25; }
  footer a {
    color: #000000; }
  footer .logo {
    text-align: center; }
    footer .logo img {
      width: 70rem; }

/*=============================================*/