.bg_img{
  background-image: url(../img/bg_img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.top_img_box{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.re_br425{
  display: none;
}

.res_br375{
  display: none;
}

.res_br500{
  display: none;
}

.top_img_box::after{
  padding-top: 35%;
  display: block;
  content: '';
}

.top_img_box img{
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


.main_div{
  background-color: rgba(245,255,245,.8);
}


.contents_grid{
  display: grid;
  grid-template-columns: 1fr 330px;
  grid-gap: 1.5rem;
  padding: 5rem 0 8rem 0;
}



.column_box{
  grid-column: 2;
  grid-row: 1/11;
}


.mini_title{
  text-align: center;
  color: white;
  background-color: var(--sub_color);
  font-size: 2rem;
  font-weight: bold;
  padding: 10px 0;
}

.mini_title i{
  margin-right: 10px;
}

.column_flex{
  display: flex;
  flex-flow: column;
}

.column_flex a{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  height: 5rem;
  font-weight: bold;
  transition: all .3s ease-out;
  border-bottom: solid 2px rgba(0,0,0,0);
}

.column_flex a:hover{
  border-bottom: solid 2px var(--sub_color);
  background-color: rgba(245,255,245,.7);
}

.search_grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:.5rem;
  padding: 1rem;
}

.search_grid button{
  grid-column: 2;
  font-size: 1.6rem;
  height: 4rem;
  cursor: pointer;
  border-radius: .3rem;
  margin-top: 1rem;
  background-color: white;
}
.search_grid button:hover{
  background-color: rgba(245,255,245,.7);
}

.search_box input{
  display: none;
}

.search_box label{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-radius: .6rem;
  font-size: 1.6rem;
  cursor: pointer;
}

.search_box label:hover{
  background-color: rgba(245,255,245,.7);
  border: solid 2px rgb(167, 167, 167);
}

.search_box input:checked + label{
  border: solid 2px var(--top_color);
  background-color: rgba(225,255,225,.3);
  color: black;
}




h2 {
  position: relative;
  text-align: center;
  border: 2px solid var(--sub_color);
  background: var(--sub_color);
  font-size: 2.6rem;
  margin-top: 7rem;
  color: white;
  font-weight: bold;
  margin-bottom: 2rem;
}

h2:before,
h2:after {
  position: absolute;
  content: '';
}

h2:before {
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--sub_color);
}

h2:after {
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: 2px dashed white;
  background: var(--sub_color);
}

h2 .h2i {
  font-size: 2.4rem;
  line-height: 60px;
  position: absolute;
  z-index: 2;
  top: -40px;
  left: calc(50% - 38px);
  width: 80px;
  height: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

h2 span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 1.5rem;
}

h2 span:before,
h2 span:after {
  position: absolute;
  content: '';
}

h2 span:before {
  top: -34px;
  left: calc(50% - 34px);
  width: 68px;
  height: 40px;
  border: 2px dashed white;
  border-radius: 50vw 50vw 0 0;
}

h2 span:after {
  position: absolute;
  top: 4px;
  left: calc(50% - 37px);
  width: 77px;
  height: 10px;
  background: var(--sub_color);
}

#no_search{
  margin-top: 0;
}
.b3_grid{
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap: 2rem;
  margin-top: 1.5rem;
}

.b3_img_box{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 20rem;
  height: 20rem;
  border-radius: .6rem;
}

.b3_img_box:hover{
  opacity: .8;
  border: solid 2px #1a1a1a;
}

.b3_img_box img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.p_title{
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.p_eva{
  font-size: 4rem;
  color: rgb(250, 255, 0);
  text-shadow: 0 0 1px #1a1a1a;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.a_of{
  line-height: 2;
  font-size: 2rem;
  display: flex;
  align-items: center;
  border-bottom: solid 2px var(--top_color);
  color:var(--top_color);
  font-weight: bold;
  padding-left: 2rem;
  border-radius: .4rem;
  margin-top: 1rem;
  transition: all .3s ease-out;
}

.a_of:hover{
  background-color: rgba(245,255,245,.7);
  border: solid 2px var(--top_color);
}

.b3_right{
  display: grid;
  grid-auto-rows: 1fr 1fr 1fr;
}


.read_box{
  margin-top: 3rem;
}

.read_a_grid{
  display:grid;
  grid-template-columns: 15rem 1fr;
  grid-gap:2rem;
  background-color: rgb(219, 255, 239);
  padding: .6rem 2rem;
  border-radius: .8rem;
  border: solid 2px var(--top_color);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1rem var(--top_color);
  transition: all .2s ease-out;
}

.read_a_grid::before/*,.one_read_a::before*/{
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: white;
  animation: shiny-btn1 2s ease-in-out infinite;

}
.read_a_grid:hover{
  animation-play-state: paused;
  box-shadow: 0 .3rem var(--top_color);
  transform: translateY(.7rem);
  background-color: rgb(229, 255, 240);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.ong_img_box{
  display:flex;
  justify-content: center;
  align-items: center;
  height: 15rem;
  width: 15rem;
}

.ong_img_box img{
  object-fit:contain;
  height: 100%;
  width: 100%;
}

.read_right {
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.read_name{
  font-size: 2.2rem;
  font-weight: bold;
}
.read_name span{
  font-size: 1.8rem;
}


.p_title span{
  font-size: 1.8rem;
}


.one_box{
  margin-top: 8rem;
}

.one_title{
  padding-left: 12rem;
  position: relative;
}
.one_title_sub{
  font-size: 1.7rem;

}

.one_title_title{
  font-size: 3rem;
}

.one_title_title span{
  font-size: 2rem;
}

.one_img_box{
  width: 100%;
  position: relative;
  transition: all .3s ease-in-out;
  cursor: pointer;
  border-radius: .6rem;
  display: block;
  overflow: hidden;
  border: solid 3px rgba(0,0,0,0);
}

.one_img_box::before{
  display: block;
  content: '';
  padding-top: 60%;
}
.one_img_box img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.one_img_box:hover{
  opacity: .8;
  border: solid 3px #1a1a1a;
}


.ranking{
  position: absolute;
  top: -20%;
  left: 0;
  width: 10rem;
}

.one_eva_p{
  font-size: 4rem;
  font-weight: bold;
  padding-left: 2rem;
}
.one_eva_p i,.one_eva_p span{
  font-size: 5rem;
  color: rgb(250, 255, 0);
  text-shadow: 0 0 1px #1a1a1a;
  padding-left: 1rem;
}

.one_eva_p span{
  font-weight: bold;
}

.p_cate{
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap:1rem;
  margin-top: 1rem;
}

.p1{
  background-color: var(--sub_color);
  color: white;
  text-align: center;
  font-family: bold;
  font-size: 2rem;
  line-height: 1.6;

}

.p2{
  font-size: 2rem;
  font-weight: bold;

}

.one_point{
  margin-top: 1rem;
}

.point_text{
  font-size: 1.8rem;
  line-height: 2;
  font-weight: bold;
  margin-top: 1rem;
}

.point_text span{
  background: linear-gradient(transparent 0%, #fff799 );
  font-weight: bold;
}

.one_review{
  margin-top: 1rem;
  overflow: hidden;
  max-height: 52px;
  transition: all .6s ease-out;
}

.one_review_hight{
  max-height:1000px;
}

.frg{
  padding-left: 1rem;
}

.review_btn{
  cursor: pointer;
}

.review_box{
  border-bottom: dashed 1px #1a1a1a;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.review_text{
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
}

.review_name{
  text-align: right;
  font-size: 1.7rem;
}

.one_read_a{
  margin-top: 1rem;
  border-radius: .6rem;
  background-color: rgb(219, 255, 239);
  box-shadow: 0 .6rem var(--top_color);
  border: solid 2px var(--top_color);
  color: #1a1a1a;
  display: flex;
  flex-flow: column;
  padding: 1rem 0;
  transition: all .2s ease-out;
  position: relative;
  overflow: hidden;
}

.one_read_a:hover{
  transform: translateY(.4rem);
  box-shadow: 0 .2rem var(--top_color);
  animation-play-state: paused;
  background-color: rgb(229, 255, 240);
}

.s_p{
  font-size: 1.8rem;
  text-align: center;
}

.m_p{
  font-size: 2rem;
  text-align: center;
}

.cm{
  font-size: 1.7rem;
  font-weight: lighter;
}

.simiken_read_box{
  margin-top: 2rem;
}

.t_read_grid{
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-gap: 2rem;
}
.s_read_grid{
  display: grid;
  grid-template-columns: 1fr 20rem;
  grid-gap: 2rem;
  margin-bottom: 1rem;
}

.s_img_box{
  width: 20rem;
  height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.s_img_box img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.s_flex{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.s_p_box p{
  text-align: right;
}
.i_p_box p,.s_p_box p{
  font-size: 2.2rem;
  line-height: 2;
  font-weight: bold;
}
.i_flex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rrm,.lrm{
  font-size: 1.6rem;
  border-bottom: solid 1px #1a1a1a;
  display: flex;
  transition: all .3s ease-out;
  height: 3rem;
  line-height: 3rem;
}
.lrm{
  justify-content: flex-start;
}
.rrm{

  justify-content: flex-end;
}

.rrm:hover,.lrm:hover{
  opacity: .8;
  border-bottom: solid 1px var(--top_color);
  color: var(--top_color);
}

@media (max-width:1130px) {
  .contents_grid{
    grid-template-columns: 1fr;
  }
  .column_box{
    display: none;
  }
}

@media (max-width:770px) {
  .p_title {
    font-size: 2rem;
  }
  .p_eva {
    font-size: 3rem;
  }
  .b3_img_box {
    width: 15rem;
    height: 15rem;
  }
  .b3_grid {
    grid-template-columns: 15rem 1fr;
    grid-gap: 1rem;
  }
  .i_p_box p, .s_p_box p {
    font-size: 1.9rem;
  }
  .s_img_box {
    width: 15rem;
    height: 15rem;
  }
  .s_read_grid {
    grid-template-columns: 1fr 15rem;
  }
  .t_read_grid{
    grid-template-columns: 15rem 1fr;
  }
  .m_p span{
    font-size: 1.6rem;
  }
  .one_title_title span {
    font-size: 1.6rem;
  }
}


@media (max-width:580px) {

  .res_500none{
    display: none;
  }
  .p2 {
    font-size: 1.8rem;
    text-align: center;
  }
  .ranking{
    width: 8rem;
  }
  .one_title {
    padding-left: 9rem;
  }
  .one_title_title {
    font-size: 2.3rem;
  }
  .one_eva_p {
    font-size: 3rem;
    padding-left: 1rem;
  }
  .p_eva {
    font-size: 2rem;
  }
  .p_title {
    font-size: 1.8rem;
    line-height: 1;
  }
  .b3_grid {
    grid-template-columns: 10rem 1fr;
    grid-gap: 1rem;
  }
  .b3_img_box {
    width: 10rem;
    height: 10rem;
  }
  .a_of{
    margin-top: 0;
    font-size: 1.8rem;
  }
  .p_title span {
    font-size: 1.5rem;
  }
  .b3_img_box {
    width: 100%;
    height: 30rem;
  }
  .b3_grid {
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
  }
  .oi_box{
    display: flex;
    justify-content: center;
  }
  .ong_img_box {
    height: 15rem;
    width: 15rem;
  }
  .read_a_grid {
    grid-template-columns: 1fr;
    grid-gap: 0;
    padding: 0 1.5rem 1rem 1.5rem;

  }
  .read_sub{
    font-size: 1.7rem;
  }
  .read_name {
    font-size: 2rem;
  }
  .read_name span {
    font-size: 1.6rem;
  }
  .read_sub {
    font-size: 1.6rem;
  }
  .i_p_box p, .s_p_box p {
    font-size: 1.9rem;
  }
  .s_img_box {
    width: 10rem;
    height: 10rem;
  }
  .s_read_grid {
    grid-template-columns: 1fr 10rem;
    margin-bottom: 3rem;
  }
  .t_read_grid{
    grid-template-columns: 10rem 1fr;
  }
  .m_p {
    font-size: 1.8rem;
  }
  .s_p {
    font-size: 1.7rem;
  }
  .one_eva_p i, .one_eva_p span {
    font-size: 4rem;
  }
  .p_cate {
    grid-template-columns: 1fr;
  }
}

@media (max-width:500px) {
  .i_p_box p, .s_p_box p {
    font-size: 1.8rem;
  }
  .s_read_grid {
    grid-gap: .5rem;
  }
  .i_p_box p, .s_p_box p {
    text-align: center;
  }
  .s_read_grid {
    grid-template-columns: 1fr;
  }
  .res_flex{
    grid-row: 1;
    display: flex;
    justify-content: center;
  }
  .s_flex {
    justify-content: center;
  }
  .lrm {
    justify-content: flex-end;
  }
  .t_read_grid {
    grid-template-columns:1fr;
  }
  .i_flex {
    display: flex;
    justify-content: center;
  }
  .i_p_box,.s_p_box{
    width: 100%;
  }
  .one_eva_p i, .one_eva_p span {
    font-size: 3rem;
  }
  .read_a_grid {
    padding: 0;
  }
  .one_read_a {
    padding: 0;
  }
  .s_p {
    font-size: 1.5rem;
  }
  .m_p span {
    font-size: 1.3rem;
  }
  .one_title_title span {
    font-size: 1.4rem;
  }
  .one_title_title {
    font-size: 1.8rem;
  }
  .p1 {
    font-size: 1.7rem;
  }
}

@media (max-width:425px) {
  .m_p {
    font-size: 1.6rem;
  }
  .res_br425{
    display: block;
  }
  .ranking {
    width: 6rem;
  }
  .one_title {
    padding-left: 6rem;
  }


}

@media (max-width:375px) {
  .read_name span {
    font-size: 1.4rem;
  }
  .one_eva_p span {
    font-size: 2rem;
  }
  .res_br375{
    display: block;
  }
  .ranking {
    width: 4rem;
  }
  .one_title {
    padding-left: 4rem;
  }
  .one_title_sub {
    font-size: 1.6rem;
  }

}