@charset "utf-8";

/*mv*/
.bg_wrapper {
  background: url(./bg_mv.svg) no-repeat top center;
  background-size: 100%;
}

.header_mv {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 0 !important;
}

.header_inner {
  /*display: grid;*/
  place-content: center;
  gap: 1ch;
  text-align: center;
}

.header_inner h1 img {
  max-width: 600px;
}

.top {
  position: relative;
  max-width: 970px;
  padding-top: 1rem;
  margin: 0 auto;
}

.lead {
  text-align: center;
}

.top h2 {
	margin-top: -3rem;
	font-size: 1.3rem;
}

.top h2 span {
  font-size: 3rem;
}

.top h2 span small {
  color: var(--primary) !important;
  font-size: 1.8rem !important;
}

.top_mds {
  text-align: center;
}

/*リード文
.lead_wrap {
  border-radius: 15px;
  margin: 2rem auto;
  width: 90%;
  max-width: 700px;
  padding: 0;
  margin-top: 2rem;
  margin-bottom: 5rem;
  position: relative;
  background: #FFF;
}
*/

/*デザインここまで*/

.lead_area2 {
  position: relative;
  padding: 1rem 3rem 1.3em;
}


/*ニュース*/
#news {
	margin: 130px 0 0;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.9);
}

.news-section {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  padding-bottom: 0;
  border-radius: 8px;
  position: relative;
}

.news-title {
  width: 150px;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--accent) !important;
  line-height: 1;
  margin-top: -15px;
}

.news-title img {
  width: 100%;
  display: block;
  margin: 0 auto 10px;
  max-width: 75px;
}

.news-title small {
  display: block;
  margin-top: 5px;
  width: 100%;
  text-align: left;
  font-size: 0.6rem !important;
}

.all-button {
  position: absolute;
  bottom: 2em;
  left: 3.5em;
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 8px 25px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.all-button:hover {
  background-color: var(--primary);
}

.news-list {
  margin-top: 0px;
  width: 100%;
  max-width: calc(100% - 160px);
}

.news-item {
  border-bottom: 1px dotted #999999;
  padding: 15px 0;
  line-height: 1.6;
}

.news-item:last-of-type {
  border-bottom: none;
}

.news-date {
  font-size: 0.7em;
  color: var(--primary);
  margin-bottom: 5px;
}

.news-text {
	font-size: 0.9em;
	color: #555;
	margin-top: 0;
	margin-bottom: 1em;
}
.news-hidden-items {
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  max-height: 0;
}

.news-hidden-items.show {
  display: block;
  max-height: 500px;
}

@media screen and (max-width: 910px) {
  .news-section {
    margin: 10px auto 20px;
    padding-bottom: 20px;
  }

  .news-title {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0px;
    margin-bottom: -5px;
    padding: 0;
  }

  .news-title img {
    width: 45px;
    max-width: 45px;
    margin-right: 10px;
  }

  #news h2 small {
    display: block;
    width: 80px;
    padding-top: 0.45em;
    margin-left: 0.5em;
    font-size: 0.9rem;
  }
.news-item {
	padding: 5px 0;
}
  .news-list {
    max-width: 100%;
  }

  .news-text {
    font-size: 1em;
    color: #555;
    margin-top: 0;
  }

  .all-button {
    bottom: auto;
    left: auto;
    top: 2.65em;
    right: 1.5em;
  }

}
/*お役立ち*/
    #topic{width:100%;max-width:800px;margin:0 auto;font-weight:bold;padding:1em;display: block;margin:0.5em auto;text-align: center;position: relative;z-index: 44;}
.sokuho-btn{display: inline-block;padding:15px 20px;background:var(--red);text-align: center;color:#FFF!important;
text-decoration: none;border-radius:5px;width:100%;max-width:calc( 100% - 2em );margin:0px auto 10px;font-size:1.2em;
  transition: background-color 0.3s ease;border-bottom:3px solid #be0000;}
.sokuho-btn:hover{background-color: #ff550c;}
.ykdt-btn{display: inline-block;padding:10px 20px;background:var(--accent);text-align: center;color:#FFF!important;
text-decoration: none;border-radius:5px;width:100%;max-width:calc( 100% / 3 - 1em );
  transition: background-color 0.3s ease;border-bottom:3px solid #005785;}
.ykdt-btn:hover{background-color: #24aef9;}

@media screen and (max-width: 960px) {
#topic{font-size:12px;padding:0;padding-bottom:1em;}
.ykdt-btn{display: inline-block;padding: 10px;}
}
/*ゲスト*/
#guest {
  margin-bottom: 0;
  padding-top: 6em;
  background:url(./guest_bg.png);
}

.guest_p {
  margin-left: 0.5em;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
.guest_area .djkoo{
  border-radius:15px;
}
.headline {
  width: 100%;
  position: relative;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  justify-content: center;
}

.headline b {
  width: 100%;
  text-align: center !important;
  padding: 10px;
}

.youtube-icon {
  display: block;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.guest_name {
  text-align: center;
  padding:0.3em;
}

.guest_name img{
  margin-top:10px;
  width:100%;
  max-width:calc( 75% - 40px );
}
.sns-icons {
  position: absolute;
  right: 0;
  top: 5px;
  display: flex;
}

.sns-icons a{
  padding: 0;
}
.sns-icons img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/*住岡さん*/
.smok {
  width: 100%;
  max-width: 800px;
  margin: 3em auto;
  padding: 1.5em;
  border-radius: 10px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.8);
  border:5px dotted var(--sub);
}

.smok .guest_area {
  display: flex !important;
  align-items: center !important;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* 丸囲み写真の個別設定 */
.smok .guest_area img {
  width:100%;
  max-width:300px;
}

/* テキスト部分の設定 */
.smok .guest_area figcaption {
  flex: 1;
  width: auto;
  max-width: none; 
  margin: 0;
  display: block;
}

.smok b {
  display: block; 
  font-weight: 700;
  font-size: 1.6em;
  margin-bottom: 0.5em;
  color:var(--accent)
}
.smok small{
  font-weight: 500;
  font-size:14px;
}

@media (max-width: 480px) {
  .smok .guest_area img {
  width:100%;
  max-width:220px;
}
  .smok .guest_area {
    flex-direction: column;
    text-align: center;
  }
  
.smok p {text-align: left;
}
}
/*ここまで*/

@media screen and (max-width: 800px) {
  #guest{
    padding: 1em;
  }
}
/*エントリー記事*/
.entry_1 {
  width: 100%;
  max-width: 600px;
  margin: 1rem auto 2rem;
  background:var(--base);
  border-radius: 40px;
  padding: 1rem 0rem 1.2rem;
  position: relative;
  box-sizing: border-box;
  box-shadow: 5px 5px 5px rgba(230, 177, 30, 0.2);
}

.entry_1:before,
.entry_1:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background:var(--base);
}

.entry_1:before {
  right: 50px;
  bottom: -15px;
  width: 25px;
  height: 25px;
}

.entry_1:after {
  right: 75px;
  bottom: -25px;
  width: 12px;
  height: 12px;
}

.entry_lead {
  width: 230px;
  font-size:3.2em;
  font-family: oswald;
  justify-content: center;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.entry_lead small{
  font-size:0.8em;
}
.circle-heading {
  /* 円形の形成 */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color:var(--accent);
  color: white;

  display: flex;
  justify-content: center; 
  align-items: center;

  /* テキストの調整 */
  text-align: center; 
  font-weight: bold;
  line-height: 1.5;
  font-size:12px;
  margin-right:5px;
}
.entry_lead2 {
  margin-left: 1em;
  font-size:12px;
}

.entry_lead2 span{
  font-weight: 700;
  color:var(--red);
  font-size:14px;
}
.entry_lead2 b{
  font-size:17px;
}
.entry_2 {
  background: #FFF;
  border-radius: 15px;
  padding: 2rem;
  width: calc(100% - 2.8rem);
  max-width: 800px;
  margin: 0 auto;
}

.entry_2 ul li {
  font-size: 0.8rem;
  list-style: disc;
  line-height: 1.2rem;
  margin-bottom: 0.6rem;
}

.entry_2 small {
  display: block;
  color: #666666;
  padding: 0.5rem 0;
  font-size: 13px;
  font-weight: 400;
}

.zoomIn img {
  transform: scale(1);
  transition: .3s ease-in-out;
}

.zoomIn a:hover img {
  transform: scale(1.2);
}

.mask {
  display: block;
  line-height: 0;
  overflow: hidden;
}

.zoomIn {
  width: 70%;
}



/*youtube*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

/*見出し*/
@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -10px, 0);
  }
}

.wave span {
  display: inline-block;
  opacity: 0;
  transition: 2s;
}

.wave span.show {
  opacity: 1;
  animation-name: wave;
  animation-duration: 0.4s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

.wave span.show:nth-of-type(2) {
  animation-delay: 0.1s;
}

.wave span.show:nth-of-type(3) {
  animation-delay: 0.2s;
}

.wave span.show:nth-of-type(4) {
  animation-delay: 0.3s;
}

.wave span.show:nth-of-type(5) {
  animation-delay: 0.4s;
}

.cal {
  padding: 1rem;
  margin: 1rem auto 2rem;
  width: 100%;
}


@media screen and (max-width:1200px) {

  .header_inner h1 img {
    z-index: 3;
    position: relative;
    width: 100%;
    max-width: 320px;
  }
}

@media screen and (max-width:960px) {


  small {
    display: inline-block !important;
  }

  .top {
    position: relative;
    width: 100%;
  }

  .header_inner h1 img {
    z-index: 3;
    position: relative;
    width: 100%;
    max-width: 440px;
  }

  .top {
    padding-top: 4.5rem;
  }

  .entry_1 {
    max-width: 350px;
  }

}

@media screen and (max-width:620px) {

  .wrap_main h2::after {
    content: "";
    display: block;
    width: 95%;
    height: 3px;
    background: var(--sub);
    position: absolute;
    top: 60px;
  }

  #news dl {
    margin-top: 1rem;
    width: 100%;
  }

  /*レイアウト*/
  .wrapper .pan {
    position: relative;
    top: 0px;
    color: var(--gray);
    padding: 5px 5px;
    font-size: 0.85rem;
    width: 100%;
    text-align: left;
    font-size: 0.7rem;
  }

  .news {
    width: 100%;
    margin: 1rem 1rem 0rem;
  }

  .cal {
    padding: 1rem;
    margin: 1rem auto 2rem;
    width: 300px;
  }
}

@media screen and (max-width:600px) {
  /*リード文みだし*/
  .txt_red {
	font-size: 140% !important;
	padding: 0.2rem 2px 0.5rem !important;
}
  /*お知らせ*/
  .lead_wrap {
	border-radius: 10px;
	margin: 1rem auto;
	margin-top: 0.8rem;
	margin-bottom: 4rem;
}

  .header_top b {
    font-weight: 600;
    display: block;
    color: var(--red);
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 0 2rem;
  }

  .wrap_left {
    width: 100%;
    max-width: calc(100% - 3rem);
    margin: 0 auto;
    padding-left: 0rem;
  }

.top {
	margin-top: 3em;
	width: 85%;
}

  .outline_box .btn {
    font-size: 1rem;
    padding: 0.2rem;
  }

  #outline_area {
    padding: 5rem 0rem;
  }
}

@media screen and (max-width:415px) {

  .news {
    width: 100%;
    margin: 0 1rem;
  }

  #news dl {
    margin: 0rem auto;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    padding-top: 1rem;
  }

  #event-outline h3 {
    line-height: 140%;
  }

  #news dt,
  #news dd {
    padding: 0;
    width: 100%;
  }

  #news dd {
    padding-bottom: 1rem;
    border-bottom: 1px dotted #999;
  }

  .wrap_left {
    width: 100%;
    max-width: calc(100% - 5%);
    margin: 0 auto;
    padding-left: 0rem;
  }

  .entry_2 ul li {
    font-size: 0.9rem;
    list-style: disc;
    line-height: 1.4rem;
    margin-bottom: 0.8rem;
  }

 .lead_area2 {
	position: relative;
	padding: 1rem 2rem 1.5rem;
}

  #footer figure img {
    max-width: 140px;
  }
}

/*公式ライン*/
.line_relay {
  font-size: 17px;
  width: 90%;
  border-radius: 20px;
  margin: 4rem auto;
  background: var(--primary);
  padding: 1rem 2rem;
}

.line_relay.pc {
  display: flex !important;
}

.line_relay .line_txt {
  width: 70%;
  padding: 0.5rem;
  font-size: 1.1rem;
  color: #FFF !important;
  ;
  border-right: 1px solid #FFF;
}

.line_relay .line_txt b {
  font-size: 150%;
  line-height: 1.4 !important;
  font-weight: 700;
}

.line_txt p {
  margin-top: 1.5em;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.line_relay .line_txt b {
  font-size: 137% !important;
  line-height: 1.5 !important;
  font-weight: 700;
}

.line_relay figure {
  width: 25% !important;
  text-align: center;
  margin: 1rem auto !important
}

.line_relay figure img {
  width: 100%;
  max-width: 200px;
}


.career {
  width: 100%;
  max-width: 300px;
  margin: 1em auto;
  font-size: 15px;
  color: #555;
}

@media screen and (max-width:970px) {
  .line_relay .line_txt {
    padding: 1rem 0rem;
    border: 0 !important;
    width: 100% !important;
  }

  .line_relay.pc {
    display: none !important;
  }
}

@media screen and (max-width:700px) {

  /*公式ライン*/
  .line_relay {
    font-size: 15px;
    width: 90%;
    border-radius: 10px;
  }

  .line_relay .line_txt {
    width: 70%;
    padding: 0.5rem;
    font-size: 0.7em;
    color: #FFF !important;
    border-right: 1px solid #FFF;
  }

  .line_relay .line_txt b {
    font-size: 150%;
    line-height: 1.4 !important;
    font-weight: 700;
  }

  .line_txt p {
    margin-top: 1.5em;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
  }

  .line_relay .line_txt b {
    font-size: 150% !important;
    line-height: 1.5 !important;
    font-weight: 700;
  }

  .line_relay figure {
    width: 25% !important;
    text-align: center;
    margin: 1rem auto !important
  }

  .line_relay figure img {
    width: 100%;
    max-width: 200px;
  }
}



  /*2026デザイン適用専用*/

.header_grid {
	display: grid !important;
	grid-template-columns: 0.5fr auto 1fr;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	margin-top: 85px;
}
.grid_spacer {
}

.top {
  grid-column: 2; 
}
.copy {
	max-width: 450px;
	min-width: 320px;
  grid-column: 3; 
  text-align: left;
  padding: 20px;
}

.header_mv::before {
	content: "";
	width: 100%;
	height: 150px;
	background: url(./pc_bg1.svg) repeat-x center center;
	position: absolute;
	top: 0;
	left: 0;
  background-size:900px;
}
.header_mv::after {
	content: "";
	width: 100%;
	height: 150px;
	background: url(./pc_bg3.svg) repeat-x center center;
	position: absolute;
	bottom: -130px;
	left: 0;
  background-size:900px;
}

.bg_line{padding-bottom:4em!important;}
.bg_line::before {
	content: "";
	width: 100%;
	height: 150px;
	background: url(./bg02.svg) repeat-x center center;
	position: absolute;
	bottom: 0;
	left: 0;
  background-size:900px;
}
/* ★レスポンス：一行で積み上げセンターに */
@media (max-width: 960px) {
.header_grid {
	display: grid !important;
	grid-template-columns: 0.1fr auto 1fr;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	margin-top: 54px;
}}
@media (max-width: 500px) {
  #dance .inner{padding:1em 0.5em;}
  .header_inner{
    padding-top:1.2em;
    padding-bottom:0.2em;
  }
  .header_grid {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
    margin-top:1em;
  }
  
  .grid_spacer { display: none; }
  
  .copy { display: none;
  }
  .header_mv::before {
	content: "";
	width: 100%;
	height: 150px;
	background: url(./sp_bg1.svg) repeat-x center center;
	position: absolute;
	top: 40px;
	left: 0;
  background-size:100%;
}
.header_mv::after {
	content: "";
	width: 100%;
	height: 185px;
	background: url(./sp_bg2.svg) no-repeat center center;
	position: absolute;
	bottom: -140px;
	left: 0;
	background-size: 100%;
}

/*背景のライン*/
.bg_line::before {
	content: "";
	width: 100%;
	height: 150px;
	background: url(./bg02.svg) repeat-x center center;
	position: absolute;
	bottom: -15px;
	left: 0;
	background-size: 770px;
}
}