@charset "UTF-8";
html {
  font-size: 62.5%; }

body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  margin: 0; }

a {
  text-decoration: none; }

pre {
  background-color: transparent;
  border: none;
  padding: 16px 0; }

p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

figure {
  margin: 0; }

.forSP {
  display: none; }

.forPC {
  display: block; }

/*ローディングアニメーション
--------------------------*/
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease; }
  #loader-wrapper .loader-logo {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s ease forwards; }
    #loader-wrapper .loader-logo .img_01 {
      max-width: 100%;
      margin: 0 auto 6rem;
      width: 65rem;
      height: auto; }
    #loader-wrapper .loader-logo .img_02 {
      max-width: 100%;
      margin: 0 auto;
      width: 85rem;
      height: auto; }
  #loader-wrapper.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
/*---------------------------------
 北大祭ページ用SCSS
-----------------------------------*/
.section_inner {
  max-width: 1000px;
  margin: 0 auto; }

p {
  color: #623600;
  font-size: 1.8rem;
  line-height: 1.8;
  font-weight: bold; }
  p.small {
    font-size: 1.6rem;
    line-height: 1.6; }

#introduction {
  background-color: #fbe8b7;
  padding: 10rem 0 0; }
  #introduction figure.img_01 {
    max-width: 100%;
    margin: 0 auto 6rem;
    width: 65rem; }
  #introduction figure.img_02 {
    max-width: 100%;
    margin: 0 auto;
    width: 85rem; }

#column_1st {
  background-color: #fbe8b7;
  padding: 10rem 0; }
  #column_1st .flex_box {
    display: flex;
    column-gap: 5rem; }
    #column_1st .flex_box .flex_item.__title {
      width: 6rem; }
    #column_1st .flex_box .flex_item.__detail {
      display: flex;
      align-items: self-start;
      justify-content: space-between;
      column-gap: 3rem;
      flex-direction: row;
      width: calc(100% - 10rem); }
      #column_1st .flex_box .flex_item.__detail .detail_wrap {
        display: flex;
        flex-direction: column;
        row-gap: 3rem;
        width: calc(100% - 40rem);
        height: 100%;
        align-items: flex-end;
        justify-content: space-between; }
        #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A .nen {
          margin: 0 0 5rem; }
        #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A figure.img_02 {
          width: 23rem;
          margin: 0 0 3rem; }
        #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A figure.img_03 {
          width: 30rem; }
        #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_B .doukyusei_wrap {
          width: 18rem;
          display: flex;
          flex-direction: column-reverse;
          gap: 1rem; }
          #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_B .doukyusei_wrap p {
            margin: 0;
            font-size: 1.4rem;
            font-weight: bold; }
          #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_B .doukyusei_wrap figure.img_05 {
            width: 18rem; }
      #column_1st .flex_box .flex_item.__detail .img_wrap {
        width: 36rem;
        height: 100%;
        overflow: hidden; }
        #column_1st .flex_box .flex_item.__detail .img_wrap figure.img_04 {
          width: 100%;
          height: 100%;
          object-fit: cover; }
          #column_1st .flex_box .flex_item.__detail .img_wrap figure.img_04 img {
            width: 100%;
            height: 100%;
            object-fit: cover; }

#column_2nd {
  background-color: #fbe8b7;
  padding: 0 0 10rem;
  overflow: hidden; }
  #column_2nd .section_inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0; }
  #column_2nd figure {
    margin: 0; }
    #column_2nd figure img {
      width: 100%;
      height: auto;
      display: block; }
  #column_2nd .history_lead {
    margin-bottom: 1rem; }
  #column_2nd .history_main_img {
    position: relative;
    width: calc(100% + ((100vw - 1200px) / 2));
    margin-left: calc(50% - 50vw); }
    #column_2nd .history_main_img img {
      width: 100%;
      display: block; }
    #column_2nd .history_main_img .on_text {
      position: absolute;
      left: 5rem;
      bottom: 5rem; }
  #column_2nd .history_contents {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 5rem;
    margin-top: 6rem; }
  #column_2nd .history_text_area {
    flex: 1;
    max-width: 60%; }
  #column_2nd .history_year {
    width: min(100%, 23rem);
    margin-bottom: 3rem; }
  #column_2nd .history_name {
    width: min(100%, 30rem);
    margin-bottom: 5rem; }
  #column_2nd .history_photo_area {
    position: relative;
    width: 40%;
    flex-shrink: 0;
    height: stretch; }
  #column_2nd .history_sign {
    position: absolute;
    top: 0rem;
    left: -5rem;
    width: 13rem; }
  #column_2nd .history_person {
    width: 25rem;
    position: absolute;
    bottom: 0;
    right: 10rem;
    top: auto; }
  #column_2nd .history_copy {
    position: absolute;
    top: 3rem;
    right: -1rem;
    width: clamp(40px, 5vw, 6rem); }
    #column_2nd .history_copy img {
      width: 100%; }

#column_3rd {
  background-color: #fbe8b7;
  padding: 0 0 8rem;
  overflow: hidden; }
  #column_3rd .section_inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0; }
  #column_3rd .history_copy {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(42px, 5vw, 6rem);
    z-index: 2; }
  #column_3rd .history_main_img {
    width: calc(100% + ((100vw - 1225px) / 2));
    margin-left: auto;
    margin-right: calc(50% - 50vw); }
    #column_3rd .history_main_img img {
      display: block;
      width: 100%; }
  #column_3rd .history_contents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 5rem;
    margin-top: 6rem;
    padding-left: 11rem;
    position: relative;
    width: 100%;
    /*.history_text {
    	font-size: 1rem;
    	line-height: 2;
    	color: #6b4a1d;
    }*/ }
    #column_3rd .history_contents .history_text_area {
      flex: 1;
      max-width: 60%; }
    #column_3rd .history_contents .history_year {
      width: min(100%, 23rem);
      margin-bottom: 3rem; }
    #column_3rd .history_contents .history_name {
      width: min(100%, 30rem);
      margin-bottom: 5rem; }
  #column_3rd .history_photo_area {
    width: 35rem;
    flex-shrink: 0;
    position: absolute;
    top: -19rem;
    right: 0rem; }
  #column_3rd .history_person {
    width: 100%; }

#column_4th {
  background: linear-gradient(to bottom, #fbe8b7 10%, #ffffff 90%);
  padding: 0 0 10rem; }
  #column_4th .section_inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0; }
  #column_4th figure {
    margin: 0; }
    #column_4th figure img {
      width: 100%;
      height: auto;
      display: block; }
  #column_4th .history_lead {
    margin-bottom: 1rem;
    padding-right: 10rem;
    text-align: right; }
  #column_4th .history_main_img {
    position: relative;
    width: calc(100% + ((100vw - 1200px) / 2));
    margin-left: calc(50% - 50vw); }
    #column_4th .history_main_img img {
      width: 100%;
      display: block; }
  #column_4th .history_contents {
    margin-top: 6rem; }
  #column_4th .history_text_area {
    flex: 1;
    max-width: 90%;
    display: flex;
    gap: 5rem;
    align-items: anchor-center; }
    #column_4th .history_text_area .flex_item.__left {
      width: 30rem; }
      #column_4th .history_text_area .flex_item.__left .history_year {
        width: min(100%, 13rem);
        margin-bottom: 3rem; }
      #column_4th .history_text_area .flex_item.__left .history_name {
        width: 30rem;
        margin-bottom: 5rem; }
    #column_4th .history_text_area .flex_item.history_text {
      width: calc(100% - 35rem); }
  #column_4th .history_copy {
    position: absolute;
    top: 3rem;
    right: -1rem;
    width: clamp(40px, 5vw, 6rem); }
    #column_4th .history_copy img {
      width: 100%; }

#closing {
  position: relative;
  background: #ffffff;
  overflow: hidden; }
  #closing .brand_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
    background: url("../img/hokudai_022_pic_product.webp") center center/cover no-repeat; }
  #closing .section_inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 10rem; }
  #closing .brand_contents {
    width: 50%;
    margin-left: auto;
    /*.brand_lead {
    	width: 100%;
    }*/ }
    #closing .brand_contents .brand_logo {
      width: min(100%, 30rem);
      margin: 8rem auto 8rem; }
      #closing .brand_contents .brand_logo img {
        width: 100%;
        display: block; }
    #closing .brand_contents .brand_link {
      width: min(85%, 45rem);
      margin: 0 auto; }

footer p {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: normal; }

/* --- タブレット (1024px以下) --- */
@media screen and (max-width: 1124px) {
  .section_inner {
    max-width: 880px;
    padding: 0 5%; }

  #loader-wrapper .loader-logo .img_01 {
    max-width: 100%;
    margin: 0 auto clamp(3rem, 6vw, 10rem);
    width: clamp(25rem, 80vw, 50rem); }
  #loader-wrapper .loader-logo .img_02 {
    max-width: 100%;
    margin: 0 auto;
    width: clamp(28rem, 90vw, 60rem); }

  #introduction {
    padding: clamp(5rem, 10vw, 10rem) 0; }
    #introduction figure.img_01 {
      max-width: 100%;
      margin: 0 auto clamp(3rem, 6vw, 10rem);
      width: clamp(25rem, 80vw, 50rem); }
    #introduction figure.img_02 {
      max-width: 100%;
      margin: 0 auto;
      width: clamp(28rem, 90vw, 60rem); }

  #column_1st {
    padding: 0 0 clamp(5rem, 10vw, 10rem); }
    #column_1st .flex_box {
      column-gap: clamp(1.5rem, 5vw, 5rem); }
      #column_1st .flex_box .flex_item.__detail {
        width: 100%; }
        #column_1st .flex_box .flex_item.__detail .detail_wrap {
          width: 100%;
          align-items: flex-start;
          justify-content: flex-start; }
          #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A {
            width: 100%;
            margin-top: 0; }
            #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A .nen {
              margin: clamp(5rem, 7vw, 8rem) 0 clamp(3rem, 5vw, 5rem); }
            #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A figure.img_02 {
              width: clamp(13rem, 35vw, 19rem);
              margin: 0 0 clamp(1.5rem, 3vw, 3rem); }
            #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_A figure.img_03 {
              width: clamp(16rem, 45vw, 26rem); }
          #column_1st .flex_box .flex_item.__detail .detail_wrap .inner_wrap.__column_B .doukyusei_wrap {
            width: 100%; }
        #column_1st .flex_box .flex_item.__detail .img_wrap {
          width: 100%;
          overflow: inherit; }
          #column_1st .flex_box .flex_item.__detail .img_wrap figure.img_04 {
            height: auto;
            width: clamp(22rem, 50vw, 30rem);
            margin: 0 auto; }
      #column_1st .flex_box .flex_item.__title figure.history_copy {
        width: clamp(4rem, 8vw, 5rem); }

  #column_2nd {
    padding: 0 0 clamp(5rem, 10vw, 10rem); }
    #column_2nd .section_inner {
      max-width: 880px;
      padding: 0 5%; }
    #column_2nd .history_lead {
      padding-left: 5%; }
    #column_2nd .history_main_img {
      width: calc(100% + -1.5rem); }
      #column_2nd .history_main_img .on_text {
        width: clamp(16rem, 25vw, 30rem);
        left: 3rem;
        bottom: 3rem; }
    #column_2nd .history_copy {
      width: clamp(4rem, 8vw, 5rem);
      right: 5%; }
    #column_2nd .history_contents {
      margin-top: 0;
      flex-direction: column;
      align-items: flex-start; }
    #column_2nd .history_sign {
      top: 1rem;
      left: -5rem;
      width: clamp(11rem, 12vw, 20rem); }
    #column_2nd .history_text_area {
      max-width: 100%;
      padding-left: 5%; }
      #column_2nd .history_text_area .nen_wrap {
        display: flex;
        gap: 3rem;
        margin: clamp(5rem, 7vw, 8rem) 0 clamp(3rem, 5vw, 5rem); }
        #column_2nd .history_text_area .nen_wrap .history_sign {
          position: static; }
      #column_2nd .history_text_area .nen {
        margin: 0; }
      #column_2nd .history_text_area figure.history_year {
        width: clamp(13rem, 35vw, 23rem);
        margin: 0 0 clamp(1.5rem, 3vw, 3rem); }
      #column_2nd .history_text_area figure.history_name {
        width: clamp(16rem, 45vw, 26rem);
        margin-bottom: 0; }
    #column_2nd .history_photo_area {
      width: 30%;
      margin: 0 0 0 auto; }
      #column_2nd .history_photo_area .history_person {
        width: clamp(15rem, 35vw, 20rem);
        position: static;
        margin-top: -3rem; }

  #column_3rd {
    padding: 0 0 clamp(5rem, 10vw, 10rem); }
    #column_3rd .section_inner {
      max-width: 880px;
      padding: 0 5%; }
    #column_3rd .history_main_img {
      width: calc(100% + -2.5rem); }
    #column_3rd .history_copy {
      left: 5%; }
    #column_3rd .history_contents {
      display: block; }
      #column_3rd .history_contents .history_text_area {
        max-width: 100%; }
      #column_3rd .history_contents .nen {
        margin: clamp(5rem, 7vw, 8rem) 0 clamp(3rem, 5vw, 5rem); }
      #column_3rd .history_contents figure.history_year {
        width: clamp(15rem, 35vw, 23rem); }
      #column_3rd .history_contents figure.history_name {
        width: clamp(20rem, 48vw, 30rem); }
    #column_3rd .history_photo_area {
      width: auto;
      position: static; }
    #column_3rd .history_person {
      width: clamp(19rem, 40vw, 27rem);
      margin: 0 0 0 auto; }

  #column_4th {
    padding: 0 0 clamp(5rem, 10vw, 10rem); }
    #column_4th .section_inner {
      max-width: 880px;
      padding: 0 5%; }
    #column_4th .history_lead {
      padding-right: 6rem; }
    #column_4th .history_main_img {
      width: calc(100% + -3rem); }
    #column_4th .history_copy {
      width: clamp(4rem, 8vw, 5rem);
      right: 5%; }
    #column_4th .history_contents {
      margin-top: 0; }
    #column_4th .history_text_area {
      align-items: flex-start;
      max-width: 100%;
      gap: 0;
      flex-direction: column;
      width: 100%;
      padding-right: 6rem;
      padding-left: 5%; }
      #column_4th .history_text_area .flex_item.__left .nen {
        margin: clamp(5rem, 7vw, 8rem) 0 clamp(3rem, 5vw, 5rem); }
      #column_4th .history_text_area .flex_item.__left .history_year {
        width: clamp(8rem, 19vw, 15rem);
        margin: 0 0 clamp(1.5rem, 3vw, 3rem); }
      #column_4th .history_text_area .flex_item.__left .history_name {
        width: clamp(20rem, 48vw, 30rem);
        margin-bottom: 0; }
      #column_4th .history_text_area .flex_item.history_text {
        width: 100%; }

  #closing {
    display: flex;
    flex-direction: column-reverse; }
    #closing .brand_bg {
      width: 100%;
      aspect-ratio: 2 / 1;
      position: relative;
      overflow: hidden; }
      #closing .brand_bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5rem;
        background: #ffffff;
        filter: blur(0);
        transform: scale(1.1);
        z-index: 9;
        opacity: 0.9;
        /* 上だけ見せる */
        mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%); }
    #closing .section_inner {
      position: relative;
      max-width: 880px;
      width: 90%;
      margin: 0 auto;
      padding: 0 5% 6rem; }
    #closing .brand_contents {
      width: 100%; }
      #closing .brand_contents .brand_lead {
        width: clamp(27rem, 70vw, 50rem);
        margin: 0 auto; }
      #closing .brand_contents .brand_logo {
        width: clamp(16rem, 23vw, 25rem);
        margin: clamp(3rem, 10vw, 5rem) auto; }
      #closing .brand_contents .brand_link {
        width: clamp(27rem, 60vw, 45rem); }

  .forSP {
    display: block; }

  .forPC {
    display: none; } }
/* --- スマホ向け (767px以下) --- */
@media screen and (max-width: 767px) {
  .section_inner {
    max-width: 100%;
    padding: 0 5%; }

  p {
    font-size: 1.6rem;
    line-height: 1.6; }

  #column_1st .flex_box .flex_item.__detail {
    flex-direction: column-reverse; }
    #column_1st .flex_box .flex_item.__detail .img_wrap {
      height: 100%;
      overflow: inherit; }
      #column_1st .flex_box .flex_item.__detail .img_wrap figure.img_04 {
        width: clamp(22rem, 40vw, 45rem); }

  #column_2nd .history_main_img {
    width: calc(100% + -3.5rem);
    height: 18rem; }
    #column_2nd .history_main_img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    #column_2nd .history_main_img .on_text {
      left: 1.5rem;
      bottom: 1.5rem; }
  #column_2nd .history_contents {
    flex-direction: column;
    gap: 3rem; }
    #column_2nd .history_contents .history_text_area {
      max-width: 100%;
      padding-right: 6rem; }
  #column_2nd .history_photo_area {
    display: flex;
    margin: 0 0 0 auto;
    gap: 1rem;
    width: fit-content; }
    #column_2nd .history_photo_area .history_sign {
      position: static; }
    #column_2nd .history_photo_area .history_person {
      position: static;
      width: clamp(13rem, 28vw, 40rem); }

  #column_3rd .history_main_img {
    width: calc(100% + -5.5rem);
    height: 18rem; }
    #column_3rd .history_main_img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  #column_3rd .history_contents {
    margin-top: 5rem;
    padding-left: 8rem; }
    #column_3rd .history_contents .history_text_area {
      max-width: 100%; }
      #column_3rd .history_contents .history_text_area .history_year {
        margin: 0 0 clamp(1.5rem, 3vw, 3rem); }
  #column_3rd .history_person {
    width: clamp(15rem, 40vw, 26rem); }
  #column_3rd .history_photo_area {
    width: auto; }

  #column_4th .history_main_img {
    height: 18rem; }
    #column_4th .history_main_img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

  #closing {
    padding-top: 3rem; } }