/* =============================================
　　root
============================================= */

:root {
	--color-miffy-yellow:#ffdf00;
	--color-miffy-orange:#eb6100;
	--color-miffy-green:#15722c;
	--color-miffy-blue:#004d97;
}


/* =============================================
　　text-
============================================= */


.text-heading{
  font-size: var(--font-size-headding);
  text-align: center;
  font-weight: 700;
}
.text-read{
  font-size: var(--font-size-read);
  font-weight: 700;
}

.text-base{
  font-size: var(--font-size-base);
  font-weight: 700;
}
.text-2xl{
  font-size: var(--font-size-2xl);
}
.text-xl{
  font-size: var(--font-size-xl);
}
.text-lg{
  font-size: var(--font-size-lg);
}
.text-md{
  font-size: var(--font-size-md);
}
.text-sm{
  font-size: var(--font-size-sm);
}
.text-xs{
  font-size: var(--font-size-xs);
}
.text-xxs{
  font-size: var(--font-size-xxs);
}

[class^="text-"] small {
  font-size:70%;
}

/* =============================================
　　.align-
============================================= */

.align-c{
text-align: var(--align-center);
}
.align-c-sp{
text-align: var(--align-center-sp);
}
.align-l{
text-align: var(--align-left);
}
.align-l-sp{
text-align: var(--align-left-sp);
}
.align-r{
text-align: var(--align-right);
}
.align-r-sp{
text-align: var(--align-right-sp);
}

/* =============================================
　　.section
============================================= */

  /* アニメーションさせたい要素の基本スタイル 
  .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
  }
*/


 /* アニメーションの定義 */
  @keyframes riseUp {
    /* 開始時（下から、透明な状態） */
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    /* 終了時（定位置で、不透明な状態） */
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


/* =============================================
　　.section
============================================= */

.lazy-section-container{
}

.section{
  position: relative;
  font-family:var(--font-family-Zen-Maru-Go);
  font-weight:500;
  color:#000;

}
.section__body {
  padding: 0 var(--layout-space-base-horizontal);
  transition: all 0.4s;
}
.section__boddy__inner{
  position: relative;
}

.section .img {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  gap:0.5rem;
  text-align: center;
}


.section .block {
  display: flex;
  gap: 2rem;
  position: relative;
  align-items: center;
  align-content: space-between;
  flex-direction: column;
  justify-content: flex-start;
}

.section .txt {
  display: flex;
  gap: 1rem;
  position: relative;
  align-items: center;
  align-content: space-between;
  flex-direction: column;
  justify-content: flex-start;
}

img.illustration{
  object-fit: contain;
  max-width: 45%;
}
img.RC_4_1997 {
  max-width: 45%;
}
img.RC_6_1997 {
  max-width: 60%;
}

.section .item-wrapper {
  display: flex;
  gap: var(--layout-space-base-horizontal);
  flex-direction: column;
}

.section .item {
  background: #fff;
  padding: var(--layout-space-base-horizontal);
  padding-bottom: var(--layout-space-base-vrtical);
  border-radius: 2rem;
  display: grid;
  gap: 2rem;
    color:#000;
}


.section .item .border-bottm {
  border-bottom: 1px #000 dashed;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}


@media screen and (min-width: 1025px) {

	img.illustration {
	  max-width: 220px !important;
	}
	.section .section__body > .block {
	  gap: 6rem;
	}

	.section .item {
		border-radius: 4rem;
		grid-template-columns: 1fr 1.2fr;
		  gap: 4rem;
		padding-bottom:var(--layout-space-base-horizontal)!important;
	}
	.section .item .txt {
	  gap: 2rem;
	}

	.section .item-wrapper{
		max-width: 1100px;
	}
}

/* =============================================
　　#mv
============================================= */

#mv .section__body {
  padding-top:var(--layout-space-base-horizontal);
  padding-bottom:var(--layout-space-base-horizontal);
}
#mv img{
}

@media screen and (min-width: 1025px) {
	#mv img{
	  max-width: 1000px;
	}

}

/* =============================================
　　#term
============================================= */

#term{
  background-color: var(--color-miffy-yellow);
  
}
#term .section__body {
  padding: var(--layout-space-base-vrtical) var(--layout-space-base-horizontal);
}
#term .text-heading {
  line-height: 100%;
  white-space: nowrap;
}
#term  .place{
	border: 1px #000 solid;
	border-left: 0;
	border-right: 0;
	padding: 0.5rem 1.5rem;
}


@media screen and (min-width: 1025px) {
	#term .section__body {
	  padding:calc(var(--layout-space-base-horizontal) * 1.5);
	}
	#term  .text-heading {
	  font-size: 5rem;
	}
	#term .place {
	  font-size: 2rem;
	}
	#term .text-sm {
	  font-size: 1.8rem;
	}
	#term  img.illustration {
	  max-width: 300px !important;
	}
}


/* =============================================
　　#about
============================================= */

#about{
  background-color: var(--color-miffy-yellow);
  color:#fff;
  
}
#about .section__body {
	background-color: var(--color-miffy-blue);
	border-radius: 8rem 0 0;
	padding: var(--layout-space-base-vrtical) var(--layout-space-base-horizontal);

}

#about .item .img img {
  width: 80%;
}

@media screen and (min-width: 1025px) {
	#about .section__body {
		border-radius:14rem 0 0;

	}
	#about.section .item-wrapper {
	  gap: 1rem;
	}

	#about .item .img img {
	  width: 100%;
	}
	#about .text-sm {
	  font-size:1.8rem;
	}


}


/* =============================================
　　#highlights
============================================= */

#highlights{
  background-color: var(--color-miffy-blue);
  color:#fff;
  
}
#highlights .section__body {
	background-color: var(--color-miffy-orange);
	border-radius: 0  8rem 0 0;
	padding: var(--layout-space-base-vrtical) var(--layout-space-base-horizontal);

}

#highlights .text-2xl{
	color: var(--color-miffy-orange);
}


@media screen and (min-width: 1025px) {
	#highlights .section__body {
		border-radius: 0 14rem 0 0;

	}
	#highlights   img.illustration {
	    max-width: 300px !important;
	  }

  #highlights.section .item {
    grid-template-columns: 1.5fr 1fr;
  }
	#highlights.section .item .text-sm {
	  font-size: 1.8rem;
	}
  #highlights.section .item.event {
    grid-template-columns: auto;
  }

}


/* =============================================
　　#overview
============================================= */

#overview{
  background-color: var(--color-miffy-orange);
  color:#fff;
  
}
#overview .section__body {
	background-color: var(--color-miffy-green);
	border-radius:8rem 0  0 0;
	padding: var(--layout-space-base-vrtical) var(--layout-space-base-horizontal);

}

@media screen and (min-width: 1025px) {
	#overview .section__body {
		border-radius:14rem 0  0 0;

	}
  #overview.section .item-wrapper {
    max-width: 900px;
  }
  #overview.section .item {
 	 grid-template-columns: auto;
  }
  #
}


/* =============================================
　　#copyright
============================================= */

#copyright{
  background-color: var(--color-miffy-yellow);
  
}

.at-miffy {
	width: 100%;
	height: 45px;
	background: url(../img/common/miffy_illust_copyright.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	margin: 40px auto;
}
@media screen and (min-width: 1025px) {
	.at-miffy {
	  height: 15px;
	  background: url(../img/common/miffy_illust_copyright_pc.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	  margin: 40px auto;
	}
}