*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


#wrap {
margin: 0;
width: 100%;
height: auto;
position: relative;
line-height: 1.5;
color: #0C1438;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
}


#header img{
    width: 100%;
  }

picture img{
  display: block;
}

/* //////////////////////// */

.news{
  padding: 0.5em 0 ;
  background: orangered;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: calc(18px + 6 * (100vw - 320px)/1600);
}


#mail{
  text-align: center;
}

#mail a{
  text-decoration: none;
}

#mail p{
background-color: #0C1438;
padding: 0.5rem;
  font-size: calc(18px + 6 * (100vw - 320px)/1600);
  color: #fff;
  font-weight: bold;
}

#mail h2{
  background-color: #EBEBEB;
  font-size: calc(20px + 20 * (100vw - 320px)/1600);
  padding: 1rem;
  color: #0C1438;
    background-image: linear-gradient(#000, #000);
  background-repeat: no-repeat;
  background-position: bottom right; /* 下線の初期位置 */
  background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
  transition: background-size 0.3s;
}

#mail img{
  margin-right: 0.5rem;
}



#mail h2:hover {
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 2px; /* 下線の横幅を100%にする */
}


/* //////////////////////// */

.container{
      max-width: 1100px; 
      margin: 0 auto;
      display: block;
      padding: 6.25rem 1rem;
}

h1{
    font-size: calc(32px + 16 * (100vw - 320px)/1600);
    background-image: url(../images/title_bg.png);
    background-position: left top;
    background-repeat: no-repeat;
    color: #fff;
    padding-left: 1rem;
    margin-bottom: 3.375rem;
  }


/* //////////////////////// */
#description{
background-color: #ffffff;
background-image: radial-gradient(circle, #0000000f 2.5px, transparent 2.5px);
background-position: 0 0;
background-size: 20px 20px;
}


#description h3{
  font-size: calc(24px + 16 * (100vw - 320px)/1600);
  margin-bottom: 1.5rem;
}

#description .text_box{
  text-align: center;
  letter-spacing: 0.1em;
}


#description h3 span{
  color: #FF1010;
  font-size: calc(32px + 24 * (100vw - 320px)/1600);
}

.corner_text{
  filter: drop-shadow(8px 8px 0px rgba(255,16,16,1));
}

#description p{
  line-height: 2;
  font-size: calc(18px + 4 * (100vw - 320px)/1600);
  font-weight: bold;
}


/* //////////////////////// */

#corner{
  background-image: url(../images/bg_corner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.corner_text{
  text-align: center;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* ★要素（ボックス）自体を中央揃えにする★ */
  width: 100%;
  gap: 2rem;
}

.txt{
  filter: drop-shadow(4px 4px 0px rgba(255,16,16,0.6));
    background: #fff;
    padding: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
    font-weight: bold;
    display: inline-block;
    text-align: left;
    width: 65%;
    padding: 1rem 2.5rem;
    position: relative;

  font-size: calc(16px + 16 * (100vw - 320px)/1600);
}


.txt::before{
  position: absolute;
    top: 25%;
    left: 20px;
    width: 6px;
    height: 50%;
    content: '';
    background: #FF1010;
}


/* //////////////////////// */

#personality{
  background: #E6E6E6;
}

h4{
  color: #FF1010;
  margin-bottom: 3.75rem;
  font-size: calc(18px + 4 * (100vw - 320px)/1600);
}

.personality_commentator, .personality_caster{
      display: flex;
    gap: 5%;
    margin-bottom: 3.75rem;
}

.personality_block {
  width: 30%;
  position: relative;

}

.personality_block img{
  width: 100%;
  margin-bottom:0.5rem;
}

.personality_block h5{
  color: #0020B2;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
  
}

.personality_block h5 span{
  font-size: 1.125rem;
}

.tue::before, .wed::before, .thu::before {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    z-index: 100;
}

.tue::before{
      content: '火';
      background: orangered;

}

.wed::before{
        content: '水';
        background: blue;

}

.thu::before{
        content: '木';
        background: green;

}


/* //////////////////////// */




.sp {
display: none;
}

.pc {
  display: block;
  }


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

  .sp {
  display: block;
  }

  .pc {
  display: none;
  }


/* //////////////////////// */


#main {
  width: 100%;
}

.container{
    padding: 3.25rem 1rem;
}

}

@media screen and (max-width: 550px) {
  #wrap{
    line-height: 1.3;
  }


  h1{
    margin-bottom: 2.5rem;
  }

  #description p{
    line-height: 1.5;
    text-align: left;
  }

  .txt{
    width: 100%;
  }

  .personality_commentator, .personality_caster{
    display: block;
  }

  .personality_block{
    margin-bottom: 2rem;
  }

  .personality_block {
  width: 100%;
}



}