@charset 'UTF-8';

@media screen and (min-width: 769px) {
  .know_main {
    background: url(../images/main_bg_pc.png) no-repeat 50% 0;
    background-size: min(1670px, calc(1670/1500*100vw));
  }
  .title_box_img {
    width: min(279px, calc(279/1500*100vw));
    margin: 0 auto;
  }
  .title_box_inr {
    position: relative;
    width: min(1100px, calc(1100/1500*100vw));
    margin: 0 auto;
  }
  .title_box_inr::before {
    content: "";
    position: absolute;
    bottom: min(-47px, calc(-47/1500*100vw));
    right: min(-35px, calc(-35/1500*100vw));
    width: min(145px, calc(145/1500*100vw));
    height: min(99px, calc(99/1500*100vw));
    background: url(../images/elem01.png) no-repeat 0 0;
    background-size: contain;
  }
  .innerLinkBox {
    margin: min(20px, calc(20/1500*100vw)) 0;
    padding: min(20px, calc(20/1500*100vw)) 0;
  }
  .innerLinkBox.fixed {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  .innerLinkBoxList {
    display: flex;
    justify-content: center;
    column-gap: min(40px, calc(40/1500*100vw));
  }
  .innerLinkBoxList li {
    a {
      position: relative;
      padding-right: min(33px, calc(33/1500*100vw));
      font-family: "Zen Maru Gothic", serif;
      font-size: min(20px, calc(20/1500*100vw));
      font-weight: 700;
      line-height: 1;
      color: #54bb00;
      background: url(/wp/wp-content/themes/k-tounyu/img/renewal/bg_anc.webp) no-repeat 100% 50%;
      background-size: min(18.4px, 12.2vw);
    }
  }
  .know_contents {
    position: relative;
    width: min(1100px, calc(1100/1500*100vw));
    margin: 0 auto;
    padding: min(47px, calc(47/1500*100vw)) min(50px, calc(50/1500*100vw)) min(290px, calc(290/1500*100vw));
  }
  .know_contents::before {
    content: "";
    position: absolute;
    top: min(-23px, calc(-23/1500*100vw));
    left: min(-53px, calc(-53/1500*100vw));
    width: min(126px, calc(126/1500*100vw));
    height: min(97px, calc(97/1500*100vw));
    background: url(../images/elem02.png) no-repeat 0 0;
    background-size: contain;
  }
  .know_picup {
    margin-bottom: min(115px, calc(115/1500*100vw));
    padding: min(62px, calc(62/1500*100vw)) 0 min(72px, calc(72/1500*100vw));
    background-color: #e2f4ae;
    border-radius: min(21px, calc(21/1500*100vw));
  }
  .know_head {
    font-family: "Zen Maru Gothic", serif;
    font-size: min(40px, calc(40/1500*100vw));
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #54bb00;
  }
  .know_picup_inr {
    display: flex;
    align-items: center;
    column-gap: min(45px, calc(45/1500*100vw));
    margin-top: min(44px, calc(44/1500*100vw));
  }
  .know_picup_thumb {
    flex-shrink: 0;
    width: min(340px, calc(340/1500*100vw));
    margin-left: min(85px, calc(85/1500*100vw));
  }
  .img_border {
    position: relative;
  }
  .img_border::before {
    content: "";
    position: absolute;
    inset: 0;
    border: solid min(2px, calc(2/1500*100vw)) #54bb00;
    pointer-events: none;
  }
  .know_picup_cont_head {
    font-size: min(24px, calc(24/1500*100vw));
    font-weight: 700;
    line-height: calc(32/24*1em);
    letter-spacing: calc(70/1000*1em);
  }
  .know_picup_cont_txt {
    margin-top: min(20px, calc(20/1500*100vw));
    font-size: min(18px, calc(18/1500*100vw));
    font-weight: 500;
    line-height: calc(30/18*1em);
    letter-spacing: calc(25/1000*1em);
  }
  .know_picup_cont_link {
    position: relative;
    display: inline-block;
    margin-top: min(35px, calc(35/1500*100vw));
    padding: 0 min(34px, calc(34/1500*100vw)) min(13px, calc(13/1500*100vw)) 0;
    color: #54bb00;
    font-size: min(16px, calc(16/1500*100vw));
    font-weight: 700;
    line-height: 1;
    background: url(../images/know_picup_cont_link.png) no-repeat 0 100%;
    background-size: contain;
  }
  .know_picup_cont_link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 50% 50%;
    rotate: -90deg;
    width: min(18px, calc(18/1500*100vw));
    height: min(18px, calc(18/1500*100vw));
    background: url(/wp/wp-content/themes/k-tounyu/img/renewal/bg_anc.webp) no-repeat 0 100%;
    background-size: contain;
  }
  .know_cmn_cont_head {
    width: 100%;
    margin-bottom: min(40px, calc(40/1500*100vw));
    padding: min(2px, calc(2/1500*100vw)) 0;
    background-color: #54bb00;
    border-radius: 100vmax;
    color: #fff;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-size: min(28px, calc(28/1500*100vw));
    font-weight: 700;
  }
  .know_cmn_cont {
    .know_head {
      margin-bottom: min(45px, calc(45/1500*100vw));
    }
  }
  .know_cmn_cont + .know_cmn_cont {
    margin-top: min(120px, calc(120/1500*100vw));
  }
  .know_cmn_inr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: min(58px, calc(58/1500*100vw));
    row-gap: min(65px, calc(65/1500*100vw));
  }
  .know_cmn_inr + .know_cmn_cont_head {
    margin-top: min(110px, calc(110/1500*100vw));
  }
  .know_cmn_item_head {
    margin-top: min(25px, calc(25/1500*100vw));
    padding: 0;
    border-bottom: 0;
    font-weight: 700;
    font-size: min(22px, calc(22/1500*100vw));
    letter-spacing: calc(70/1000*1em);
  }
  .know_cmn_item_txt {
    margin-top: min(15px, calc(15/1500*100vw));
    font-weight: 500;
    font-size: min(16px, calc(16/1500*100vw));
    line-height: calc(28/16*1em);
    letter-spacing: calc(40/1000*1em);
  }
}
@media screen and (max-width: 768px) {
  .know_main {
    background: url(../images/main_bg_sp.png) no-repeat 50% 0;
    background-size: calc(750/750*100vw);
  }
  .title_box_img {
    width: calc(356/750*100vw);
    margin: 0 auto;
  }
  .title_box_inr {
    position: relative;
    width: calc(750/750*100vw);
    margin: 0 auto;
  }
  .title_box_inr::before {
    content: "";
    position: absolute;
    bottom: calc(-20/750*100vw);
    right: calc(27/750*100vw);
    width: calc(88/750*100vw);
    height: calc(74/750*100vw);
    background: url(../images/elem01_sp.png) no-repeat 0 0;
    background-size: contain;
  }
  .innerLinkBox {
    padding: calc(60/750*100vw) 0;
  }
  .innerLinkBoxList {
    display: flex;
    justify-content: center;
    column-gap: calc(30/750*100vw);
  }
  .innerLinkBoxList li {
    a {
      position: relative;
      padding-right: calc(38/750*100vw);
      font-family: "Zen Maru Gothic", serif;
      font-size: calc(28/750*100vw);
      font-weight: 700;
      line-height: 1;
      color: #54bb00;
      background: url(/wp/wp-content/themes/k-tounyu/img/renewal/bg_anc.webp) no-repeat 100% 50%;
      background-size: calc(23/750*100vw);
    }
  }
  .know_contents {
    position: relative;
    width: calc(750/750*100vw);
    margin: 0 auto;
    padding: calc(50/750*100vw) calc(35/750*100vw) calc(300/750*100vw);
  }
  .know_contents::before {
    content: "";
    position: absolute;
    top: calc(-12/750*100vw);
    left: calc(35/750*100vw);
    width: calc(157/750*100vw);
    height: calc(121/750*100vw);
    background: url(../images/elem02.png) no-repeat 0 0;
    background-size: contain;
  }
  .know_picup {
    position: relative;
    margin-bottom: calc(120/750*100vw);
    padding: calc(75/750*100vw) calc(64/750*100vw) calc(85/750*100vw);
    background-color: #e2f4ae;
    border-radius: calc(44/750*100vw);
  }
  .know_head {
    font-family: "Zen Maru Gothic", serif;
    font-size: calc(58/750*100vw);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #54bb00;
  }
  .know_picup_inr {
    margin-top: calc(55/750*100vw);
  }
  .know_picup_thumb {
    margin-bottom: calc(30/750*100vw);
  }
  .img_border {
    position: relative;
  }
  .img_border::before {
    content: "";
    position: absolute;
    inset: 0;
    border: solid calc(2/750*100vw) #54bb00;
    pointer-events: none;
  }
  .know_picup_cont_head {
    margin-top: calc(30/750*100vw);
    font-size: calc(36/750*100vw);
    font-weight: 700;
    line-height: calc(46/36*1em);
    letter-spacing: calc(30/1000*1em);
  }
  .know_picup_cont_txt {
    margin-top: calc(10/750*100vw);
    font-size: calc(25/750*100vw);
    font-weight: 500;
    line-height: calc(38/25*1em);
    letter-spacing: calc(-10/1000*1em);
  }
  .know_picup_cont_link {
    position: relative;
    display: inline-block;
    margin-top: calc(40/750*100vw);
    padding: 0 calc(45/750*100vw) calc(20/750*100vw) 0;
    color: #54bb00;
    font-size: calc(28/750*100vw);
    font-weight: 700;
    line-height: 1;
    background: url(../images/know_picup_cont_link.png) no-repeat 0 100%;
    background-size: contain;
  }
  .know_picup_cont_link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 50% 50%;
    rotate: -90deg;
    width: calc(28/750*100vw);
    height: calc(28/750*100vw);
    background: url(/wp/wp-content/themes/k-tounyu/img/renewal/bg_anc.webp) no-repeat 0 100%;
    background-size: contain;
  }
  .know_cmn_cont_head {
    width: 100%;
    margin-bottom: calc(60/750*100vw);
    padding: calc(10/750*100vw) 0;
    background-color: #54bb00;
    border-radius: 100vmax;
    color: #fff;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-size: calc(36/750*100vw);
    font-weight: 700;
  }
  .know_cmn_cont {
    .know_head {
      margin-bottom: calc(60/750*100vw);
    }
  }
  .know_cmn_cont + .know_cmn_cont {
    margin-top: calc(135/750*100vw);
  }
  .know_cmn_inr {
    display: grid;
    row-gap: calc(90/750*100vw);
  }
  .know_cmn_inr + .know_cmn_cont_head {
    margin-top: calc(110/750*100vw);
  }
  .know_cmn_item_head {
    margin-top: calc(20/750*100vw);
    padding: 0;
    border-bottom: 0;
    font-weight: 700;
    font-size: calc(32/750*100vw);
    letter-spacing: calc(30/1000*1em);
  }
  .know_cmn_item_txt {
    margin-top: calc(10/750*100vw);
    font-weight: 500;
    font-size: calc(22/750*100vw);
    line-height: calc(34/22*1em);
    letter-spacing: calc(30/1000*1em);
  }
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 501;
  padding-top: 0;
}

.modal-content {
  background-size: 100%;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 769px) {
  .modal-content {
    width: min(1000px, calc(1000/1500*100vw));
  }
}

@media screen and (max-width: 768px) {
  .modal-content {
    width: 68em;
  }
}

@media screen and (min-width: 769px) {
  #modal1 .modal-content {
    height: min(475px, calc(475/1500*100vw));
    background: url(/images/pc/modal_bg.webp) no-repeat 0 0;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  #modal1 .modal-content {
    padding: 12em 4em 11em;
    background: url(/images/sp/modal_bg_sp.webp) no-repeat 0 0;
    background-size: contain;
  }
}

.close_modal {
  position: absolute;
  img {
    pointer-events: none;
  }
}

@media screen and (min-width: 769px) {
  .close_modal {
    top: min(40px, calc(40/1500*100vw));
    right: min(40px, calc(40/1500*100vw));
    width: min(40px, calc(40/1500*100vw));
  }
}

@media screen and (max-width: 768px) {
  .close_modal {
    top: calc(30/750*100vw);
    right: calc(30/750*100vw);
    width: calc(60/750*100vw);
  }
}

@media (hover: hover) {
  .close_modal:hover {
    cursor: pointer;
  }
}

#modal2 .close_modal {
  top: 0;
  right: 0;
  translate: 100% -100%;
}

@media screen and (min-width: 769px) {
  .modal_head {
    width: 66.2em;
  }
}

@media screen and (max-width: 768px) {
  .modal_head {
    width: 55.7em;
  }
}

@media screen and (min-width: 769px) {
  .modal_txt {
    width: 72em;
    margin-top: 4em;
  }
}

@media screen and (max-width: 768px) {
  .modal_txt {
    width: 57.8em;
    margin-top: 5em;
  }
}

.modal_txt > p {
  text-align: justify;
}

@media screen and (min-width: 769px) {
  .modal_txt > p {
    font-size: 1.6em;
    line-height: calc(32/16*1em);
    letter-spacing: -.02em;
  }
}

@media screen and (max-width: 768px) {
  .modal_txt > p {
    font-size: 2.6em;
    line-height: calc(47/26*1em);
    letter-spacing: -.02em;
  }
}

.modal_txt > p .annotation {
  font-weight: 400;
}

@media screen and (min-width: 769px) {
  .modal_txt > p .annotation {
    font-size: calc(12/16*1em);
    line-height: calc(21/12*1em);
  }
}

@media screen and (max-width: 768px) {
  .modal_txt > p .annotation {
    font-size: calc(20/26*1em);
    line-height: calc(32/20*1em);
  }
}

.modal_movie {
  position: relative;
  aspect-ratio: 896/504;
  background-color: #EDE4F0;
}

@media screen and (min-width: 769px) {
  .modal_movie {
    width: min(896px, calc(896/1500*100vw));
  }
}

.modal_movie iframe {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.open-modal {
  cursor: pointer;
}