@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
/* ===================================
	File Name   : top.css
	Description : Top Page Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Shigyo
	
	Update Description :
  [2025/04/21] 英語サイトの体裁へ併せる
	[2024/05/10] 2025改訂調整
	[2023/05/26] 2023改訂調整
	[2021/03/31] 2022改訂調整
	[2020/11/18]  委員会役員リスト追加
	[2020/11/16]  バナー追加
	[2020/04/28] 新規作成

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

/*========== Style Contents ==========

	1. Individual Redefinition
  2. Section [about_preface] Setting
	3. Section [about_intro] Setting
	4. Section [about_history] Setting
	5. Section [about_outline] Setting
	6. Section [about_committee] Setting
	7. Section [about_scene] Setting
	8. Section [top_message] Setting
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
/* #visual { background-image: url(../img/about/img-visual.jpg);} */


/*===== ■2. Section [about_preface] Setting =====*/
#about_preface p {
  margin: 60px 20px 0 20px;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

@media (max-width: 768px) {
  #about_preface p {
    margin-top: 6.67vw;
    text-align: left;
    font-size: 1.4rem;
  }
}



/*===== ■3. Section [about_intro] Setting =====*/
/*banner*/
#about_bnr {
  padding: 20px 0;
  text-align: center;
}
#about_bnr img {vertical-align: bottom;}


#about_intro .inner > p {
  margin-bottom: 30px;
  text-align: center;
}

#about_intro .inner > ul {
  display: flex;
  margin-bottom: 30px;
}
#about_intro .inner > ul li { width: 25%; line-height: 0;}

#about_intro .inner > ul li img { height: auto;}

#about_intro section#three_promises h3 {
  font-weight: bold;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
}

#about_intro section h3 em { font-size: 2.6rem;}

#about_intro section h3 span {
  margin-right: 10px;
  color: #d71518;
  font-size: 3rem;
}

#about_intro section#three_promises > p {
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 2rem;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
}

#about_intro section#three_promises {
  margin-bottom: 30px;
  padding: 0;
}

#about_intro section#three_promises .flex2 {
  align-items: center;
  justify-content: center;
  gap: 0;
}

#about_intro section#three_promises .flex2 figure { width: 35%;}

#about_intro section#three_promises .flex2 figure {
  max-width: 100%;
  height: auto;
}

#about_intro section#three_promises .flex2 figure img { 
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

#about_intro section .flex2 ul {
  width: 70%;
  margin-left: -5%;
}

#about_intro section li {
  position: relative;
  padding: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 1.8rem;
  counter-increment: num;
}
#about_intro section li:not(:last-child) { margin-bottom: 15px;}

#about_intro section li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  left: -20px;
  width: 40px;
  height: 40px;
  box-shadow: 1px 2px 1px rgba(0, 0, 0, .25);
  border-radius: 50%;
  background: #d71518;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1;
  content: "0" counter(num);
}

#about_intro #intro_read {
  display: flex;
  gap: 20px;
  margin: 0 0 40px 0;
  padding: 0;
}

#about_intro #intro_read > div {
  display: flex;
  flex-direction: column;
  width: 50%;
}

#about_intro #intro_read > div > div {
  display: flex;
  flex-grow: 1;
  gap: 20px;
}

#about_intro #intro_read > div figure {
  width: 100%;
  height: 100%;
}

#about_intro #intro_read > div figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  aspect-ratio: 3 / 2;
}

@media (max-width: 768px) {
  /*banner*/
  #about_bnr {
    padding: 2.67vw;
    text-align: center;
  }
  
  #about_intro .inner > p {
    margin-bottom: 5.34vw;
    text-align: left;
  }

  #about_intro .inner > ul {
    flex-wrap: wrap;
    margin-bottom: 5.34vw;
  }
  #about_intro .inner > ul li { width: 50%;}
  
  #about_intro section h3 em { font-size: 1.8rem;}

  #about_intro section h3 span {
    display: block;
    margin: 0 0 .67vw;
    font-size: 2.4rem;
  }

  #about_intro section > p {
    margin-bottom: 5.34vw;
    font-size: 1.6rem;
  }

  #about_intro section#three_promises {
    margin-bottom: 4vw;
    padding-top: 2.67vw
  }
  
  #about_intro section#three_promises .flex2 {
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
  }

  #about_intro section#three_promises .flex2 figure {
    width: 50%;
    margin: 0 auto;
  }

  #about_intro section li {
    padding: 4vw;
    font-size: 1.4rem;
  }
  #about_intro section li:not(:last-child) { margin-bottom: 2.67vw;}

  #about_intro section li::before {
    top: -1.34vw;
    left: -4vw;
    width: 8vw;
    height: 8vw;
    font-size: 1.6rem;
  }

  #about_intro section#intro_read h3.tit_fill {
    margin-bottom: 2.67vw;
  }
  
  #about_intro section#intro_read {
    flex-direction: column;
    gap: 5.34vw;
    margin-bottom: 8vw;
    font-size: 1.6rem;
  }

  #about_intro section#intro_read > div {
    width: 100%;
  }

  #about_intro section .flex2 ul {
    width: 100%;
    margin-left: 0;
  }

  #about_intro #intro_read > div > div {
    flex-direction: column;
    gap: 2.67vw;
  }
}


/*===== ■4. Section [about_history] Setting =====*/
#about_history {
  padding-top: 30px;
  background: rgba(0, 0, 0, .05);

}

#about_history .inner { 
  position: relative;
  background: rgba(255, 255, 255, .5);

}

#about_history #pipe {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 0;
	width: 4px;
	height: calc(100% - 60px);
	background: #999;
}
#about_history #pipe_inner {
	position: absolute;
	width: 4px;
	background: #333;
	content: "";
}

#about_history .inner > div:not(#pipe) {
  position: relative;
  padding: 20px;
  /* background: rgba(0, 0, 0, .05);*/
}
#about_history .inner > div:not(#pipe):first-of-type { 
  margin-bottom: 10px;
}

#about_history .inner dl {
  position: relative;
  margin-bottom: 25px;
  padding-left: 20px;
}

#about_history .inner dl.finish::before {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 4px;
  height: calc(100% + 35px);
  background: #333;
  content: "";
}
#about_history .inner > div:first-of-type dl:last-of-type.finish::before { height: calc(100% + 85px);}
#about_history .inner > div + div dl:last-of-type.finish::before { height: calc(100% + 25px);}

#about_history .inner dt {
  position: relative;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 2.2rem;
}
#about_history .inner dt::before {
  position: absolute;
  top: 50%;
  left: -23px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  transform: translateY(-50%);
  content: "";
}
#about_history .inner .emphasis dt::before {
  left: -28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 4px solid #333;
  background: #ebebeb;
}
#about_history .inner .emphasis + .emphasis dt::before { border-color: #d71518;}

#about_history .inner dd {
  margin-left: 20px;
  color: #555;
  font-size: 1.8rem;
}

#about_history .inner dd em {
  display: inline-block;
  margin-left: 10px;
  padding: 10px;
  border-radius: 5px;
  background: #555;
  color: #fff;
  font-size: 2.0rem;
}

#about_history .inner dd em span {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px dotted #ccc;
  font-weight: bold;
  font-size: 2.0rem;
}

#about_history .inner dd strong {
  display: block;
  color: #d71518;
  font-weight: bold;
  font-size: 4rem;
}

#about_history .inner > ul {
  display: flex;
}

#about_history > div:last-child {
  padding-bottom: 20px;
}

#about_history .inner > ul li { width: 25%; line-height: 0;}

#about_history .inner > ul li img { height: auto;}

@media (max-width: 768px) {
  #about_history {
    padding-top: 5.34vw;
  }

  #about_history #pipe {
    position: absolute;
    top: 2.67vw;
    left: 5.34vw;
    width: 1.07vw;
    height: calc(100% - 8vw);
  }
  #about_history #pipe_inner { width: 1.07vw;}

  #about_history .inner > div:not(#pipe) {
    padding: 2.67vw;
  }
  #about_history .inner > div:not(#pipe):first-of-type { margin-bottom: 1.34vw;}

  #about_history .inner > div b {
    right: 1.34vw;
    font-size: 4.0rem;
  }

  #about_history .inner dl {
    margin-bottom: 4vw;
    padding-left: 4vw;
  }

  #about_history .inner dl.finish::before {
    width: 1.07vw;
    height: calc(100% + 8vw);
  }
  #about_history .inner > div:first-of-type dl:last-of-type.finish::before { height: calc(100% + 13.34vw);}
  #about_history .inner > div + div dl:last-of-type.finish::before { height: calc(100% + 4vw);}
  
  #about_history .inner dt {
    margin-bottom: 2.67vw;
    font-size: 2.0rem;
  }
  #about_history .inner dt::before {
    left: calc(-4vw + -.8vw);
    width: 2.67vw;
    height: 2.67vw;
  }
  #about_history .inner .emphasis dt::before {
    left: calc(-4vw + -1.87vw);
    width: 2.67vw;
    height: 2.67vw;
    border: 1.07vw solid #333;
  }

  #about_history .inner dd {
    margin-left: 2.67vw;
    font-size: 1.6rem;
  }
  
   #about_history .inner > ul {
    flex-wrap: wrap;
  }

   #about_history .inner > ul li { width: 50%;}
}


/*===== ■5. Section [about_outline] Setting =====*/
#about_outline .flex2 { justify-content: flex-start;}
#about_outline .flex2 p { margin-right: 15px;}

#about_outline .table_basic {
  background: rgba(0, 0, 0, .05);
}

#about_outline td ul.flex {
  flex-wrap: wrap;
  margin-top: 10px;
}
#about_outline td ul.flex li {
  flex: none;
  width: 10%;
  min-width: 70px;
  max-width: 100px;
}

#about_outline td li {
  display: inline-block;
  margin: 5px 15px 5px 0;
}

@media (max-width: 768px) {
  #about_outline .flex2 { justify-content: flex-start;}
  #about_outline .flex2 p { margin: 0 0 2.67vw;}
  
  #about_outline td ul.flex {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2.67vw;
  }
  #about_outline td ul.flex li {
    width: calc(25% - 2.67vw);
    max-width: none;
    margin: 0 0 1.34vw;
  }

  #about_outline td li {
    display: inline-block;
    margin: 5px 15px 5px 0;
  }
}




/*===== ■6. Section [about_committee] Setting =====*/  
#about_committee .inner > p {
  text-align: right;
}

#about_committee .table_scroll table:not(:last-of-type) {
  margin-bottom: 20px;
}

#about_committee .table_scroll table thead th:first-child {width: 25%;}

#about_committee .table_scroll table th,
#about_committee .table_scroll table td {text-align: left;}


@media (max-width: 768px) {
  #about_committee .inner > p {
    text-align: right;
  }


  #about_committee .table_scroll {
    white-space: normal;
  }
  
  #about_committee .table_scroll table {
    width: 100%;
  }
  
  #about_committee .table_scroll table:not(:last-of-type) {
    margin-bottom: 2.67vw;
  }
  
  #about_committee .table_scroll table thead th:first-child {
    width: 40vw;
  }
  
  #about_committee .table_scroll table thead th:nth-child(2) {
    width: 60vw;
  }
  
  #about_committee .table_scroll table thead th:last-child {
    width: 80vw;
  }
}



/*===== ■7. Section [about_scene] Setting =====*/  
#about_scene .video_wapper {
  width: 70%;
  margin: 0 auto;
}
#about_scene .video_wapper iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
  #about_scene .video_wapper {
    width: 100%;
  }
}



/*===== ■8. Section [top_message] Setting =====*/

#about_message .hero_message {
  display: flex;
  width: calc(50% - 20px);
  padding: 20px;
  background: #fff;
  border: 5px solid #c00;
}
#about_message .hero_message#message_nanao{
  margin-right: 0;
  border: 5px solid #00a7db;
}

#about_message .hero_message dl {
  width: calc(80% - 20px);
  margin-right: 20px;
}
#about_message .hero_message#message_nanao dl,
#about_message .hero_message#message_takeshima dl{
  width: calc(85% - 20px);
  margin-right: 20px;
}
#about_message .hero_message dt {
  margin-bottom: 20px;
  font-size: 3.0rem;
  font-weight: bold;
}
#about_message .hero_message span {
  width: 15%;
  max-width: 240px;
  min-width: 80px;
}
#about_message .hero_message#message_nanao span{
  width: 15%;
  max-width: 240px;
  min-width: 80px;
}
#about_message .hero_message p {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  
  #about_message .hero_message {
    width: 100%;
    flex-direction: column;
    margin: 1.34vw 0;
    padding: 4vw 2.67vw 2.67vw;
  }
  #about_message .hero_message#message_nanao{
    width: 100%;
    margin: 4vw 0 0;
  }
  #about_message .hero_message dl {
    width: 100%;
    margin-right: 0;
  }
  
  #about_message .hero_message dt {
    margin-bottom: 2.67vw;
    text-align: center;
    font-size: 2.0rem;
  }
  
  #about_message .hero_message p {
    margin-bottom: 2.67vw;
  }
  
  #about_message .hero_message span{
    width: 60%;
    margin: 0 auto;
  }

  #about_message .hero_message#message_nanao dl,
  #about_message .hero_message#message_takeshima dl{
    width: 100%;
    margin-right: 20px;
  }
  
  #about_message .hero_message#message_nanao span{
    width: 60%;
  }
}