@charset "UTF-8";
@import url("global.css");
#header .header_logo a {
  filter: brightness(0) invert(1); }

.hamburger {
  filter: brightness(0) invert(1); }

.is-scroll:not(.no-scroll) #header .header_logo a {
  filter: none; }
.is-scroll:not(.no-scroll) .hamburger {
  filter: none; }

#contents {
  padding-bottom: 150px; }

/* ------------------------------
 Top
------------------------------ */
#toparea {
  box-sizing: border-box;
  height: calc(100svh - 80px);
  position: relative; }
  #toparea #topslide {
    height: 100%;
    position: relative; }
    #toparea #topslide::before {
      content: "";
      display: block;
      background: #222;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      opacity: .2;
      pointer-events: none; }
  #toparea .swiper-container {
    width: 100%;
    height: 100%; }
    #toparea .swiper-container .swiper-wrapper, #toparea .swiper-container .swiper-slide, #toparea .swiper-container .slide-img {
      height: 100%;
      position: relative; }
  #toparea .swiper-slide-active a,
  #toparea .swiper-slide-duplicate-active a {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto; }
  #toparea .swiper-slide-active .slide-img img,
  #toparea .swiper-slide-duplicate-active .slide-img img,
  #toparea .swiper-slide-prev .slide-img img {
    animation: zoomout 6s ease-in-out 0s 1;
    animation-fill-mode: both; }
  #toparea .toptext {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 13%;
    align-content: center;
    z-index: 2;
    color: #fff;
    text-align: left;
    line-height: 1.5; }
    #toparea .toptext span {
      display: block; }
    #toparea .toptext .catch {
      font-size: min(46px,3.6vw);
      font-weight: 600;
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      letter-spacing: .1em;
      margin-bottom: 20px;
      animation: catchanime .6s ease-in-out .2s 1;
      animation-fill-mode: both;
      margin-left: -5px; }
    #toparea .toptext .ja {
      font-size: min(26px,2.5vw);
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      animation: textjanime 1s ease-in-out .3s 1;
      animation-fill-mode: both;
      letter-spacing: .1em;
      margin-bottom: 25px; }
    #toparea .toptext .en {
      font-size: 14px;
      font-family: "Roboto", "Noto Sans JP", sans-serif;
      animation: texteanime .5s ease-in-out .6s 1;
      animation-fill-mode: both; }

@keyframes zoomout {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1); } }
@keyframes catchanime {
  0% {
    transform: translateX(-20px);
    filter: blur(10px); }
  100% {
    transform: none;
    filter: none; } }
@keyframes textjanime {
  0% {
    transform: translateX(-20px);
    filter: blur(10px); }
  100% {
    transform: none;
    filter: none; } }
@keyframes texteanime {
  0% {
    transform: translateX(-20px);
    opacity: 0; }
  100% {
    transform: none;
    opacity: 1; } }
/* ---------- Topics ---------- */
#topics {
  background-color: #132240;
  padding-block: 15px;
  color: #fff;
  overflow: hidden;
  	/*
  	.marquee {
  		width:1200px;
  		padding:0.5em 0;
  		overflow:hidden;
  		margin: 0 auto;
  		position:relative;
  		display: flex;
  	}
  	.marquee li:after {
  		content:"";
  		white-space:nowrap;
  		padding-right:50px;
  	}
  	.marquee li {
  		padding-left:1200px;
  		margin:0;
  		display:inline-block;
  		white-space:nowrap;
  			-webkit-animation-name:marquee;
  			-webkit-animation-timing-function:linear;
  			-webkit-animation-duration:20s;
  			-webkit-animation-iteration-count:infinite;
  			-moz-animation-name:marquee;
  			-moz-animation-timing-function:linear;
  			-moz-animation-duration:20s;
  			-moz-animation-iteration-count:infinite;
  			-ms-animation-name:marquee;
  			-ms-animation-timing-function:linear;
  			-ms-animation-duration:20s;
  			-ms-animation-iteration-count:infinite;
  			-o-animation-name:marquee;
  			-o-animation-timing-function:linear;
  			-o-animation-duration:20s;
  			-o-animation-iteration-count:infinite;
  			animation-name:marquee;
  			animation-timing-function:linear;
  			animation-duration:20s;
  			animation-iteration-count:infinite;
  	}
  	.marquee li .item {
  		padding-right:50px;
  	}
  	@-webkit-keyframes marquee {
  	  from   { -webkit-transform: translate(0%);}
  	  99%,to { -webkit-transform: translate(-100%);}
  	}
  	@-moz-keyframes marquee {
  	  from   { -moz-transform: translate(0%);}
  	  99%,to { -moz-transform: translate(-100%);}
  	}
  	@-ms-keyframes marquee {
  	  from   { -ms-transform: translate(0%);}
  	  99%,to { -ms-transform: translate(-100%);}
  	}
  	@-o-keyframes marquee {
  	  from   { -o-transform: translate(0%);}
  	  99%,to { -o-transform: translate(-100%);}
  	}
  	@keyframes marquee {
  	  from   { transform: translate(0%);}
  	  99%,to { transform: translate(-100%);}
  	}
  	.ticker {
  		margin: 0 auto;
  		width: 100%;
  		text-align: left;
  		position: relative;
  		overflow: hidden;
  	}
  
  	.ticker ul {
  		width: 100%;
  		position: relative;
  	}
  
  	.ticker ul li {
  		width: 100%;
  		display: none;
  	}*/ }
  #topics .date {
    font-size: 90%;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    display: inline-block;
    letter-spacing: 0;
    padding-right: 1em; }
  #topics .marquee-wrapper {
    width: 100%;
    overflow: hidden; }
  #topics .marquee {
    display: flex;
    width: max-content;
    /* liの合計幅に自動調整 */
    animation: marquee 20s linear infinite;
    list-style: none;
    padding: 0;
    margin: 0; }
  #topics .marquee li {
    flex: 0 0 auto;
    /* 幅を固定せず内容に応じる */
    padding-right: 150px;
    /* li間のスペース */
    white-space: nowrap; }
  #topics .marquee-wrapper:hover .marquee {
    animation-play-state: paused; }

/*@keyframes marquee {
	0% {
		translate: 0;
	}
	100% {
		translate: calc(-100% - 30px);
	}
}*/
@keyframes marquee {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%);
    /* liをコピーして2倍にしている前提 */ } }
/* ------------------------------
 Kodawari
------------------------------ */
#kodawari {
  background-color: #F5F4F0;
  position: relative;
  padding-block: 130px 150px; }
  #kodawari .bgimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1100px; }
    #kodawari .bgimage::before, #kodawari .bgimage::after {
      content: "";
      position: absolute;
      display: block;
      z-index: 0; }
    #kodawari .bgimage::before {
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: linear-gradient(to right, rgba(245, 244, 240, 0), rgba(245, 244, 240, 0.8)); }
    #kodawari .bgimage::after {
      bottom: 0;
      height: 35%;
      width: 100%;
      left: 0;
      background: linear-gradient(to bottom, rgba(245, 244, 240, 0), #f5f4f0); }
  #kodawari .wrapper {
    position: relative;
    z-index: 1; }
  #kodawari .kodawaritext {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 160px; }
    #kodawari .kodawaritext .sec_title {
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      white-space: nowrap;
      line-height: 1.4;
      letter-spacing: .1em;
      display: inline-block;
      width: 200px;
      max-width: 20%;
      align-content: center;
      flex-shrink: 0;
      font-size: min(30px,3vw);
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 600; }
      #kodawari .kodawaritext .sec_title strong {
        display: block;
        font-size: 1.7em;
        letter-spacing: .15em; }
        #kodawari .kodawaritext .sec_title strong i {
          font-size: 1.3em;
          letter-spacing: 0; }
    #kodawari .kodawaritext .text {
      text-align: left;
      font-size: min(20px,2.2vw);
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      white-space: nowrap;
      line-height: 1.4;
      letter-spacing: .1em;
      display: inline-block;
      line-height: 2.2; }
  #kodawari ul li + li {
    margin-top: 40px; }
  #kodawari ul li a {
    display: flex;
    background-color: #fff;
    position: relative; }
    #kodawari ul li a .num {
      display: block;
      width: 50px;
      min-height: 380px;
      flex-shrink: 0;
      background-color: #B4975A;
      color: #fff;
      margin-right: 1px;
      text-align: center;
      align-content: center; }
      #kodawari ul li a .num span {
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        white-space: nowrap;
        line-height: 1.4;
        letter-spacing: .1em;
        display: inline-block;
        text-align: center;
        font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-size: 20px;
        font-weight: 500; }
        #kodawari ul li a .num span strong {
          margin-top: 5px;
          font-size: 150%;
          font-weight: 600; }
    #kodawari ul li a .photo {
      width: 460px;
      flex-shrink: 0;
      max-width: 38%; }
    #kodawari ul li a .textblock {
      flex-grow: 1;
      box-sizing: border-box;
      padding: 35px 30px 20px 35px; }
      #kodawari ul li a .textblock .text {
        font-size: min(24px,2.2vw);
        font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 700;
        padding: 0 20px 30px;
        border-bottom: #B4975A 1px solid;
        position: relative;
        margin-bottom: 20px; }
        #kodawari ul li a .textblock .text::after {
          content: "";
          width: 30px;
          height: 24px;
          background: #fff url("../img/kodawariarrow.png") no-repeat center;
          background-size: 30px auto;
          position: absolute;
          padding: 5px;
          bottom: -22px;
          right: 18%; }
      #kodawari ul li a .textblock .image {
        margin-inline: auto 12%;
        width: 370px;
        max-width: 70%; }
        #kodawari ul li a .textblock .image img {
          object-position: right bottom; }
    #kodawari ul li a .more {
      position: absolute;
      right: 20px;
      bottom: 10px;
      font-size: 14px;
      font-family: "Roboto", "Noto Sans JP", sans-serif; }
      #kodawari ul li a .more::after {
        content: "";
        width: 8px;
        height: 9px;
        display: inline-block;
        margin-left: 8px;
        vertical-align: 1px;
        background-color: #222;
        clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ------------------------------
 Event
------------------------------ */
.section .sec_title {
  margin-bottom: 60px; }
  .section .sec_title span {
    display: block; }
  .section .sec_title .en {
    font-size: 18px;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    color: #6B6B6B;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 20px; }
    .section .sec_title .en::after {
      content: "";
      width: 36px;
      height: 1px;
      background-color: #6B6B6B;
      position: absolute;
      left: 0;
      bottom: 0;
      display: block; }
  .section .sec_title .ja {
    font-size: clamp(23px, 5vw, 46px);
    font-weight: 600;
    line-height: 1.4; }

#event {
  margin-block: 160px 130px; }
  #event .main {
    text-align: left;
    display: flex;
    justify-content: space-between;
    margin-left: calc((100% - 1600px) / 2);
    position: relative; }
  @media (max-width: 1700px) {
    #event .main {
      margin-left: 0;
      padding-left: 50px; } }
  #event .title_area {
    margin-top: 10px;
    width: 260px;
    flex-shrink: 0; }
    #event .title_area .sec_title {
      margin-bottom: 45px; }
  #event .list_area {
    width: calc( 100% - 330px ); }
  #event .slick-list {
    padding: 0 30% 0 0 !important; }
  #event ul.list li {
    margin-right: min(32px,2.2vw); }
    #event ul.list li a {
      display: block;
      height: 100%;
      background-color: #F1F1F1; }
      #event ul.list li a .image {
        position: relative;
        height: 0;
        padding-top: 66%; }
        #event ul.list li a .image figure {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0; }
        #event ul.list li a .image.end::before {
          content: "";
          background: rgba(34, 34, 34, 0.7);
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 2; }
        #event ul.list li a .image.end::after {
          content: "イベントは終了しました";
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
          font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-weight: 600; }
      #event ul.list li a .postmain {
        padding: 30px 25px 20px;
        line-height: 1.6; }
        #event ul.list li a .postmain .yoyaku {
          width: 70px;
          margin-bottom: 15px;
          border: #132240 1px solid;
          color: #132240;
          font-size: 13px;
          text-align: center;
          padding: 3px;
          background-color: #fff; }
          #event ul.list li a .postmain .yoyaku.yo {
            background-color: #132240;
            color: #fff; }
        #event ul.list li a .postmain .title {
          font-size: 19px;
          font-weight: 600;
          margin-bottom: 20px; }
        #event ul.list li a .postmain .data dl {
          margin-block: 15px;
          display: flex;
          gap: 8px;
          line-height: 18px; }
          #event ul.list li a .postmain .data dl dt {
            width: 18px;
            flex-shrink: 0; }
          #event ul.list li a .postmain .data dl dd {
            font-size: 14px; }
        #event ul.list li a .postmain .more {
          text-align: right;
          font-size: 14px;
          font-family: "Roboto", "Noto Sans JP", sans-serif; }
          #event ul.list li a .postmain .more::after {
            content: "";
            width: 8px;
            height: 9px;
            display: inline-block;
            margin-left: 5px;
            background-color: #222;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            vertical-align: 1px; }
  #event .slick-slider {
    position: static; }

/* ------------------------------
 Contents-Link
------------------------------ */
.contentslink {
  display: block;
  position: relative;
  align-content: center;
  height: min(900px,100vh);
  margin-bottom: 25px; }
  .contentslink::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(54, 64, 83, 0.65), rgba(54, 64, 83, 0) 75%); }
  .contentslink .bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; }
    .contentslink .bg figure {
      height: 105%; }
  .contentslink .wrapper {
    position: relative;
    z-index: 2; }
  .contentslink .main {
    color: #fff; }
    .contentslink .main .sec_title {
      margin-bottom: 100px; }
      .contentslink .main .sec_title .en {
        color: inherit; }
        .contentslink .main .sec_title .en::after {
          background-color: #fff; }
      .contentslink .main .sec_title .ja {
        letter-spacing: .1em; }
    .contentslink .main .catch {
      font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 600;
      font-size: min(38px,5.5vw);
      margin-bottom: 30px;
      line-height: 1.6; }
    .contentslink .main .text {
      font-weight: 500; }
    .contentslink .main .more {
      margin-top: 45px; }
      .contentslink .main .more a {
        display: block;
        max-width: 180px;
        box-sizing: border-box;
        padding: 10px 20px;
        background-color: #fff;
        color: #222;
        position: relative;
        font-size: 14px;
        font-family: "Roboto", "Noto Sans JP", sans-serif; }
        @media (any-hover: hover) {
          .contentslink .main .more a:hover {
            background-color: #132240;
            color: #fff; }
            .contentslink .main .more a:hover::after {
              background-color: #fff;
              translate: 10px 0; } }
        .contentslink .main .more a::after {
          content: "";
          position: absolute;
          right: 20px;
          top: 50%;
          margin-top: -4px;
          width: 8px;
          height: 9px;
          background-color: #222;
          clip-path: polygon(0 0, 100% 50%, 0 100%);
          transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
          backface-visibility: hidden; }

/* ------------------------------
 Information
------------------------------ */
#information {
  background: linear-gradient(to bottom, #d2c8b9, rgba(210, 200, 185, 0) 82%);
  padding-top: 130px; }
  #information #news {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 130px; }
    #information #news .title_area {
      margin-top: 10px;
      width: 260px;
      flex-shrink: 0; }
      #information #news .title_area .sec_title {
        margin-bottom: 45px; }
    #information #news .list_area {
      flex-grow: 1;
      max-width: 830px; }
    #information #news ul.news {
      margin-top: -5px; }
      #information #news ul.news li {
        border-bottom: #6B6B6B 1px solid;
        padding-block: 10px;
        margin-bottom: 5px; }
        #information #news ul.news li .inner {
          display: block;
          padding: 10px 5px 15px;
          line-height: 1.5; }
        #information #news ul.news li a.inner {
          padding-right: 35px;
          position: relative; }
          #information #news ul.news li a.inner::after {
            content: "";
            width: 8px;
            height: 9px;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            background-color: #222;
            position: absolute;
            right: 12px;
            top: 50%; }
        #information #news ul.news li .date {
          display: block;
          font-size: 14px;
          font-family: "Roboto", "Noto Sans JP", sans-serif;
          color: #6B6B6B;
          margin-bottom: 5px; }
        #information #news ul.news li .text {
          display: block;
          font-size: 17px;
          font-weight: 600; }
  #information #column {
    padding-top: 110px;
    position: relative; }
    #information #column .sec_title {
      font-size: clamp(21px, 3.6vw, 34px);
      font-weight: 600;
      margin-bottom: 40px; }
    #information #column::before {
      content: "";
      position: absolute;
      z-index: 0;
      right: 0;
      top: 0;
      bottom: 0;
      left: calc((100% - 1600px) / 2);
      background-color: #fff; }
    #information #column .column {
      padding-left: 200px;
      position: relative;
      z-index: 1; }
    @media (max-width: 1700px) {
      #information #column::before {
        left: 50px; }
      #information #column .column {
        padding-left: calc( (100% - 1200px) / 2 ); } }
    @media (max-width: 1400px) {
      #information #column .column {
        padding-left: 50px; } }
    #information #column ul.list {
      display: flex;
      flex-wrap: wrap;
      margin-inline: max(-20px,-1.6vw); }
      #information #column ul.list li {
        width: 50%;
        box-sizing: border-box;
        padding-inline: min(20px,1.6vw);
        margin-bottom: 45px; }
        #information #column ul.list li a {
          display: flex;
          background-color: #F1F1F1;
          padding: 25px 30px;
          gap: 30px;
          position: relative;
          line-height: 1.5; }
        #information #column ul.list li .image {
          aspect-ratio: 1 / 1;
          width: 200px;
          flex-shrink: 0;
          max-width: 40%; }
        #information #column ul.list li .main {
          padding-block: 10px 30px; }
        #information #column ul.list li .posttitle {
          font-size: min(19px,1.7vw);
          font-weight: 600;
          margin-bottom: 20px; }
        #information #column ul.list li .text {
          font-size: 14px; }
        #information #column ul.list li .date {
          position: absolute;
          right: 25px;
          bottom: 20px;
          font-size: 14px;
          font-family: "Roboto", "Noto Sans JP", sans-serif; }
    #information #column .morebutton {
      margin: auto; }

/* ------------------------------
 Instagram
------------------------------ */
#instagram {
  margin-block: 120px 150px; }
  #instagram .h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #132240;
    margin-bottom: 30px; }
    #instagram .h .title {
      font-size: 26px;
      font-weight: 600; }
      #instagram .h .title::before {
        content: "\f16d";
        font-family: 'Font Awesome 6 free','Font Awesome 6 Brands';
        font-weight: 900;
        display: inline-block;
        margin-right: 15px;
        vertical-align: 1px; }
    #instagram .h .linkbutton {
      font-size: 15px;
      font-weight: 600; }
      #instagram .h .linkbutton::after {
        content: "";
        width: 8px;
        height: 9px;
        display: inline-block;
        margin-left: 10px;
        background-color: #132240;
        vertical-align: 1px;
        clip-path: polygon(0 0, 100% 50%, 0 100%); }
  #instagram ul.list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px; }
    #instagram ul.list li a {
      display: block;
      aspect-ratio: 4 / 5; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   Top
  ------------------------------ */
  #toparea .slide1 .toptext {
    left: 10%; }

  /* ---------- Topics ---------- */
  /* ------------------------------
   Kodawari
  ------------------------------ */
  /* ------------------------------
   Event
  ------------------------------ */
  #event .list_area {
    width: calc( 100% - 260px ); }

  /* ------------------------------
   Information
  ------------------------------ */
  #information #news .title_area {
    width: 200px; }
  #information #news ul.news li .text {
    font-size: inherit; }
  #information #column {
    padding-top: 80px; }
    #information #column ul.list li {
      margin-bottom: 40px; }
      #information #column ul.list li a {
        padding: 25px;
        gap: 2.2vw; }
      #information #column ul.list li .main {
        padding-block: 10px 30px; }
      #information #column ul.list li .text {
        font-size: 13px;
        letter-spacing: .05em; }
      #information #column ul.list li .date {
        right: 20px;
        bottom: 15px;
        font-size: 13px;
        letter-spacing: 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #contents {
    padding-bottom: 120px; }

  /* ------------------------------
   Top
  ------------------------------ */
  #toparea .toptext .catch {
    font-size: clamp(24px, 5vw, 40px);
    margin-bottom: 10px;
    margin-left: -4px; }
  #toparea .toptext .ja {
    font-size: clamp(16px, 2.5vw, 26px);
    margin-bottom: 15px; }
  #toparea .slide1 .toptext {
    left: 5vw; }

  /* ---------- Topics ---------- */
  #topics .marquee li {
    padding-right: 100px; }

  /* ------------------------------
   Kodawari
  ------------------------------ */
  #kodawari {
    padding-block: 80px 100px; }
    #kodawari .bgimage {
      height: 100vw; }
    #kodawari .kodawaritext {
      margin-bottom: 80px; }
    #kodawari ul li a {
      flex-wrap: wrap; }
      #kodawari ul li a .num {
        width: 100%;
        min-height: inherit;
        margin: 0 0 1px;
        padding-block: 3px 5px; }
        #kodawari ul li a .num span {
          -webkit-writing-mode: horizontal-tb;
          -moz-writing-mode: horizontal-tb;
          -ms-writing-mode: tb-rl;
          writing-mode: horizontal-tb;
          white-space: normal;
          line-height: normal; }
          #kodawari ul li a .num span strong {
            margin: 0;
            line-height: 1;
            display: inline-block;
            vertical-align: -3px; }
      #kodawari ul li a .photo {
        max-width: 45%;
        flex-shrink: 0; }
      #kodawari ul li a .textblock {
        width: 55%;
        padding: 30px 20px 30px; }
        #kodawari ul li a .textblock .text {
          font-size: min(18px,4vw);
          padding: 0 10px 25px; }
          #kodawari ul li a .textblock .text::after {
            width: 24px;
            height: 20px;
            background-size: 24px auto;
            padding: 5px;
            bottom: -18px; }
        #kodawari ul li a .textblock .image {
          max-width: 75%; }
      #kodawari ul li a .more {
        right: 15px;
        bottom: 5px; }

  /* ------------------------------
   Event
  ------------------------------ */
  #event {
    margin-block: 100px 100px; }
    #event .main {
      display: block;
      padding-left: 6vw; }
    #event .title_area {
      margin-block: 0 50px;
      width: auto;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 50px; }
      #event .title_area .sec_title {
        margin-bottom: 0; }
      #event .title_area .more {
        margin: 0 6vw 0 0; }
    #event .list_area {
      width: auto; }
    #event .slick-list {
      padding: 0 10% 0 0 !important; }
    #event ul.list li {
      margin-right: 20px; }

  /* ------------------------------
   Contents-Link
  ------------------------------ */
  .contentslink {
    height: min(700px,100vh); }
    .contentslink::before {
      background: linear-gradient(to right, rgba(54, 64, 83, 0.65), rgba(54, 64, 83, 0) 90%); }
    .contentslink .bg figure {
      height: 110%; }
    .contentslink .main {
      max-width: 75%; }
      .contentslink .main .sec_title {
        margin-bottom: 80px; }

  /* ------------------------------
   Information
  ------------------------------ */
  #information {
    padding-top: 100px; }
    #information #news {
      gap: 0;
      margin-bottom: 70px; }
      #information #news ul.news li .text {
        font-size: 14px;
        letter-spacing: .05em; }
    #information #column {
      padding-top: 50px; }
      #information #column::before {
        left: 6vw; }
      #information #column .column {
        padding-left: 6vw; }
      #information #column ul.list {
        display: block;
        margin-inline: 0; }
        #information #column ul.list li {
          width: auto;
          padding-inline: 0;
          margin-bottom: 30px; }
          #information #column ul.list li a {
            padding: 30px;
            gap: 30px; }
          #information #column ul.list li .posttitle {
            font-size: min(19px,3.8vw);
            margin-bottom: 20px; }

  /* ------------------------------
   Instagram
  ------------------------------ */
  #instagram {
    margin-block: 100px 120px; }
    #instagram .h .title {
      font-size: 24px; }
    #instagram .h .linkbutton {
      letter-spacing: .05em; }
    #instagram ul.list {
      grid-template-columns: repeat(3, 1fr); } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #contents {
    padding-bottom: 90px; }

  /* ------------------------------
   Top
  ------------------------------ */
  #toparea {
    height: 440px; }
    #toparea .slide1 .toptext {
      top: 0;
      bottom: 0;
      left: 5vw;
      align-content: center; }

  /* ---------- Topics ---------- */
  /* ------------------------------
   Kodawari
  ------------------------------ */
  #kodawari {
    padding-block: 60px 80px; }
    #kodawari .bgimage {
      height: 110vw; }
      #kodawari .bgimage::before {
        width: 80%; }
    #kodawari .kodawaritext {
      margin-bottom: 60px; }
      #kodawari .kodawaritext .sec_title {
        max-width: 30%;
        font-size: min(20px,4vw); }
      #kodawari .kodawaritext .text {
        font-size: min(15px,3vw); }
    #kodawari ul li + li {
      margin-top: 30px; }
    #kodawari ul li a {
      display: block; }
      #kodawari ul li a .num span {
        font-size: 15px; }
      #kodawari ul li a .photo {
        width: auto;
        max-width: none;
        aspect-ratio: 3 / 2; }
      #kodawari ul li a .textblock {
        width: auto;
        padding: 20px 20px 30px; }
        #kodawari ul li a .textblock .text {
          font-size: min(16px,3.8vw);
          padding: 0 0 25px;
          margin-bottom: 15px; }
          #kodawari ul li a .textblock .text::after {
            width: 20px;
            background-size: 20px auto;
            padding: 5px;
            bottom: -17px;
            right: 18%; }
        #kodawari ul li a .textblock .image {
          margin-inline: auto 10%;
          max-width: 80%; }
      #kodawari ul li a .more {
        bottom: 6px; }

  /* ------------------------------
   Event
  ------------------------------ */
  .section .sec_title {
    margin-bottom: 40px; }
    .section .sec_title span {
      display: block; }
    .section .sec_title .en {
      font-size: 14px;
      margin-bottom: 15px; }
      .section .sec_title .en::after {
        width: 32px; }

  #event {
    margin-block: 60px 80px; }
    #event .main {
      padding-left: 5vw; }
    #event .title_area {
      margin-block: 0 40px; }
      #event .title_area .more {
        margin: 0 5vw 0 0; }
    #event .list_area {
      width: auto; }
    #event .slick-list {
      padding: 0 12% 0 0 !important; }
    #event ul.list li {
      margin-right: 20px; }
      #event ul.list li a .postmain {
        padding: 20px 20px 15px; }
        #event ul.list li a .postmain .yoyaku {
          margin-bottom: 10px;
          font-size: 12px; }
        #event ul.list li a .postmain .title {
          font-size: 15px;
          margin-bottom: 15px; }
        #event ul.list li a .postmain .data dl {
          margin-block: 8px;
          gap: 6px; }
          #event ul.list li a .postmain .data dl dd {
            font-size: 13px; }
        #event ul.list li a .postmain .more {
          font-size: 12px; }
          #event ul.list li a .postmain .more::after {
            content: "";
            width: 8px;
            height: 9px; }

  /* ------------------------------
   Contents-Link
  ------------------------------ */
  .contentslink {
    height: min(500px,100vh); }
    .contentslink::before {
      background: linear-gradient(to right, rgba(54, 64, 83, 0.7), rgba(54, 64, 83, 0) 100%); }
    .contentslink .main {
      max-width: 90%; }
      .contentslink .main .sec_title {
        margin-bottom: 50px; }
      .contentslink .main .catch {
        margin-bottom: 20px; }
      .contentslink .main .text {
        font-size: 12px; }
        .contentslink .main .text br {
          display: none; }
      .contentslink .main .more {
        margin-top: 40px; }
        .contentslink .main .more a {
          max-width: 180px;
          padding-block: 6px; }

  /* ------------------------------
   Information
  ------------------------------ */
  #information {
    padding-top: 70px; }
    #information #news {
      display: block;
      margin-bottom: 60px; }
      #information #news .title_area {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-block: 0 30px;
        width: auto; }
        #information #news .title_area .sec_title {
          margin-bottom: 0; }
      #information #news ul.news {
        margin-top: 0; }
        #information #news ul.news li {
          padding-block: 5px; }
          #information #news ul.news li a.inner {
            padding-right: 30px; }
            #information #news ul.news li a.inner::after {
              right: 8px; }
          #information #news ul.news li .date {
            font-size: 13px;
            letter-spacing: .05em;
            margin-bottom: 2px; }
          #information #news ul.news li .text {
            font-size: 13px; }
    #information #column {
      padding-top: 30px; }
      #information #column::before {
        left: 5vw; }
      #information #column .column {
        padding-left: 5vw; }
      #information #column ul.list li {
        margin-bottom: 20px; }
        #information #column ul.list li a {
          display: flex;
          align-items: flex-start;
          padding: 20px;
          gap: 18px; }
        #information #column ul.list li .image {
          max-width: 35%;
          margin-bottom: 20px; }
        #information #column ul.list li .main {
          padding-block: 0; }
        #information #column ul.list li .posttitle {
          font-size: min(18px,3.6vw);
          margin-bottom: 10px;
          letter-spacing: .05em; }
        #information #column ul.list li .text {
          font-size: 12px;
          letter-spacing: 0; }
        #information #column ul.list li .date {
          right: auto;
          bottom: 10px;
          left: 20px; }
      #information #column .morebutton {
        margin: auto; }

  /* ------------------------------
   Instagram
  ------------------------------ */
  #instagram {
    margin-block: 80px 90px; }
    #instagram .sec_title {
      margin-bottom: 30px; }
    #instagram .h {
      display: block;
      margin-bottom: 30px; }
      #instagram .h .title {
        font-size: 21px;
        margin-bottom: 10px; }
        #instagram .h .title::before {
          margin-right: 10px;
          vertical-align: 0; }
      #instagram .h .linkbutton {
        text-align: right;
        font-size: 14px; } }