:root{
  --nav_color:#a65af2;
  --nav_active_color:rgb(125, 150, 242);
  --nav_hover_color:#785af2;

  --box-position-top: 0;
  --box-position-right: 0.5rem;
  --box-width: 3rem;
  --box-height: 3rem;
  --span-width: 60%;
  --span-height: 20%;

}

/* 最初の表示でナビゲーション部分の後ろに隠れるのを防ぐため */
body{
  padding-top: 3rem;
}

/* タイトル部分の上下位置の調整 */
section[id] ,h3[id],div[id]{
  scroll-margin-top: 4rem;
}

/*----------------------------
* メニュー開閉ボタン　.menu-btn
*----------------------------*/
.menu-btn{
  position: absolute;
  cursor: pointer;
  top: var(--box-position-top);
  right: var(--box-position-right);
  width: var(--box-width);
  height: var(--box-height);
  border-radius: 0.5rem;
  background-color: var(--color);
}

.menu-btn span {
  position: absolute;
  left: calc(50% - var(--span-width)/2);
  width: var(--span-width);
  height: 0.15rem;
  background: #fff;
  border-radius: 0.1rem;
  transition: top 0.24s, transform 0.24s, opacity 0.24s;
}

.menu-btn span:nth-child(1) {
  top: calc(50% - var(--span-height));
}

.menu-btn span:nth-child(2) {
  top: 50%;
}

.menu-btn span:nth-child(3) {
  top: calc(50% + var(--span-height));
}

.is_active.menu-btn span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
}
.is_active.menu-btn span:nth-child(2) {
  opacity: 0;
}
.is_active.menu-btn span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg);
}

@media (min-width: 1000px){
  .menu-btn{
    display: none;
  }
}

/* ナビゲーションの装飾 */
nav.scrollspy_nav{
  background-color: var(--nav_color);
  position: fixed;
  top: 0;
  width: 100%;
  height:3rem;
  z-index: 10;
}
nav.scrollspy_nav > .container{
  position: relative;
  display: flex;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
a{
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 0.75rem;
}
.page_title>a{
  font-size: 1.5rem;
  color: #fff;
  padding-top: 0.5rem;
}

@media (min-width: 1000px){
  .nav_menu{
    position: absolute;
    top: 0;
    display: flex;
  }
  ul{
    display: flex ;
    flex-direction: row;
  }
  li a:hover{
    background-color: var(--nav_hover_color);
  }
  li.is_active > a{
    background-color:var(--nav_active_color);
  }
}

@media (max-width: 1000px) {
  .nav_menu_list{
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 3rem;
    background-color: var(--nav_hover_color);
    visibility: collapse;
    /* display: none; */
  }
  .is_active.nav_menu_list{
    /* display: block; */
    visibility: visible
  }
}
/* タイトル部分 */
.main_title{
  position: relative;
  padding-left: 0;
  padding-right: 0;
}
/* タイトル部分の名前の位置 */
.name_position{
  position: absolute;
  top: 0rem;
  left: 1rem;
  color: #9cf6cb;
  font-family: "Kaisei HarunoUmi", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.3rem;}

.katagaki_position,.katagaki_position2{
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 1.3rem;
  a{
    padding-top: 0;
    padding-bottom: 0;
  }
}

.katagaki_position{
  left: 1rem;
  a {
      text-decoration: 1px underline #000;
      text-underline-offset: 6px;
    }
}
.katagaki_position2 {
  left: 60%;
  a{
    text-decoration: 1px underline #000;
    text-underline-offset: 6px;
  }
}

@media (width < 500px) {
/* .katagaki_position,.katagaki_position2 {
    font-size:0.9rem;
  } */

.name_position{
  font-size: 1.5rem;
}

.ebako{
  /* font-size: 0.5rem; */
}
}
/* 受賞作品一覧部分 */
.jyusyou{
  line-height:0.5rem;
}
/* 受賞策へのリンクの文字の色 */
/* リンクであることがわかるような工夫が必要なので下線を追加 */
.jyusyou a{
  color: rgb(29, 11, 148);
  text-decoration: underline;
  display: inline-block;
}

.section_title {
  background: linear-gradient(transparent 70%, #e552f8 70%);
}
.section_title2 {
  background: linear-gradient(transparent 80%, #f8c4ff 70%);
  padding-top: 1rem;
}
.section_title3 {
 color: rgb(253, 6, 187);
  padding-top: 1rem;
}
body{
  background-color: #b1d0f5;
}
.main2{
  background-color: #fff;
}
.size{
  font-size: 1rem;
  font-weight: 400;
}
.font-txt {
  font-family: 〇〇〇〇;
}

.ebako{
  font-size: 1rem;
}
  /*
文字 装飾（ふくろ文字）
https: //lopan.jp/outline-text/
================================================ */

:root{
  --character_color:rgb(253, 248, 248);
  --outline_color:#4b0457;
  --outline_width:0.15rem;
}
.text_outline{
  -webkit-text-stroke: var(--outline_width) var(--outline_color);
  -webkit-text-fill-color: var(--character_color);
  paint-order: stroke fill;
}
.new_link{
  text-decoration: underline;
  color: var(--nav_color);
}
footer{
  display: grid;
  place-content: center;
  color: #f9f7fa;
  background-color: #a65af2;
  z-index:  10;
  position: sticky;
  bottom: 0;
}

/* topに戻るボタンの設定 */
.scroll_top {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
}