@charset "UTF-8";

:root {
  --font-base-lp: "the-seasons", sans-serif;
  --color-main: #294A87;
  --color-main-80: #294A87cc;
  --color-sub: #BAEEF1;
  --color-font: #6A6A6A;
  --color-bg: #F8F8F8;
}

/*--------------------------------
                共 通
 --------------------------------*/

#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
}

#Contents{
  min-height: 100%;
}

#header.is-show,
#header.scroll{
  z-index: 1002;
}

#lp_contents *{
  box-sizing: border-box;
}

#lp_contents{
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  color: var(--color-font);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: calc(790 *(100vW / 1600));
}
#lp_contents.is-show:before{
  content: '';
  width: calc(100% - calc(40 *(100vW / 1600)));
  height: calc(100% - calc(40 *(100vW / 1600)));
  position: absolute;
  bottom: calc(20 *(100vW / 1600));
  left: 0;
  right: 0;
  margin: auto;
  border-radius: calc(50 *(100vW / 1600));
  border: 1px solid var(--color-main);
  z-index: 2;
  pointer-events: none;
  transition: all 2s;
}
#lp_contents .sp_only{display: none;}
#lp_contents img{width: 100%;display: block;}
#lp_contents a{display: block;cursor: pointer;transition: all 0.5s;}
#lp_contents ul li,#LP_page ol li{list-style: none;}
#lp_contents h1,#lp_contents h2,#lp_contents h3{padding: 0;float: none;font-weight: normal;}
#lp_contents p {
  display: block;
  margin: 0;
  font-size: 1.4rem;
  line-height: 2;
  text-align: justify;
}
#lp_contents sup{
  font-size: 60%;
}
#lp_contents small.note{
  display: block;
  font-size: 1rem;
  margin-top: 0.6rem;
}

#lp_contents .bg_area{
  position: absolute;
  width: 100vw;
  height: 100%;
  min-height: calc(790 *(100vW / 1600));
  background-image: url(../img/bg_pc.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

#lp_contents .link_btn{
  width: 18rem;
  height: 4rem;
  border-radius: 100rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  background: var(--color-main);
  margin: 2rem auto 0;
}

#lp_contents .link_btn:hover{
  background: #fff;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}


/*------------ sec_mv ------------*/

#lp_contents .sec_mv{
  position: absolute;
  top: 5rem;
  width: 100%;
  height: fit-content;
}

#lp_contents .ttl_wrap{
  margin: 0 auto 3rem;
  text-align: center;
  font-family: var(--font-base-lp);
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-main);
}

#lp_contents .sec_mv .ttl_wrap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1001;
  height: fit-content;
}

#lp_contents .ttl_wrap span{
  display: block;
  font-size: calc(14 *(100vW / 1600));
  font-weight: bold;
  margin-top: calc(10 *(100vW / 1600));
}

#lp_contents .chart_wrap .ttl_wrap span,
#lp_contents .cate_wrap .ttl_wrap span{
  font-size:1.4rem;
  margin-top: 1.5rem;
  line-height: 1.5;
}


/*------------ item_sec ------------*/

#lp_contents .item_sec{
  padding-top: 6rem;
}

#lp_contents .item_sec ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: calc(1660 *(100vw / 1600));
  gap: calc(20 *(100vw / 1600));
}

#lp_contents .item_sec li{
  transition: all 0.5s;
  width: calc(190 *(100vw / 1600));
}

#lp_contents .item_sec li.itemBox:hover{
  transform:  rotate(10deg) scale(1.1);
}

#lp_contents .item_sec li.space{
  width: calc(5 *(100vw / 1600));
}

#lp_contents .item_sec img{
  filter: drop-shadow(1rem 1rem 1rem rgba(0, 0, 0, .16));
}

#lp_contents .item_sec .modal_list li{
  width: 50rem;
  max-height: calc(100svh - 4rem);
  overflow-y: scroll;
  margin: 0 4rem;
  padding: 3rem 5rem;
  border-radius: 1rem;
  background: #fff;
}

#lp_contents .item_sec .modal_list li a:not(.link_btn){
  width: fit-content;
  margin: auto;
}

#lp_contents .item_sec .modal_list figure{
  width: 30rem;
  margin: 0 auto 2rem;
}

#lp_contents .item_sec .modal_list .item_detail{
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.75;
  font-weight: bold;
  margin: 0 auto 1.5rem;
}

#lp_contents .item_sec .another{
  margin: 3rem auto 0;
}

#lp_contents .item_sec .another a{
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem auto 0;
}

#lp_contents .item_sec .another .img_blk{
  width: 10rem;
  margin: 0;
}

#lp_contents .item_sec .another .img_blk img{
  filter: none;
}

#lp_contents .item_sec .another .text_blk{
  width: 25rem;
}

#lp_contents .item_sec .another .text_blk .item_ttl{
  color: var(--color-main);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1rem;
}

#lp_contents .item_sec .another .text_blk .item_detail{
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 0;
}


/*------------ nav_list ------------*/

#lp_contents .nav_list{
  position: absolute;
  bottom: calc(40 *(100vw / 1600));
  left: 0;
  right: 0;
  margin: auto;
}

#lp_contents .nav_list ul{
  display: flex;
  justify-content: center;
  gap: calc(20 *(100vw / 1600));
}

#lp_contents .nav_list .link_btn{
  width: fit-content;
  min-width: calc(180 *(100vw / 1600));
  height: calc(50 *(100vw / 1600));
  padding: 0 calc(20 *(100vw / 1600));
  text-align: center;
  font-size: calc(14 *(100vw / 1600));
  background: var(--color-main-80);
  box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(5px);
  --webkit-backdrop-filter: blur(5px);
}

#lp_contents .nav_list .link_btn:hover{
  background: rgba(255, 255, 255, .8);
  border: calc(1 *(100vw / 1600)) solid var(--color-main);
}


/*------------ modal__content ------------*/

#lp_contents .modal__content{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/*cate_wrap*/
#lp_contents .cate_wrap{
  position: relative;
  width: 50rem;
  max-height: calc(100svh - 4rem);
  overflow-y: scroll;
  padding: 6rem 5rem;
  border-radius: 1rem;
    background: #fff;
}

#lp_contents .cate_wrap ul{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

#lp_contents .cate_wrap li{
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-main);
  background: var(--color-sub);
  color: var(--color-main);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.1em;
  border-radius: 100rem;
  cursor: pointer;
}

#lp_contents .cate_wrap li label{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#lp_contents .cate_wrap li input{
  display: none;
}

/*chart_wrap*/
#lp_contents .chart_wrap{
  position: relative;
  width: 100rem;
  max-height: calc(100svh - 4rem);
  overflow-y: scroll;
  padding: 6rem 0;
  border-radius: 1rem;
    background: #fff;
}

#lp_contents .chart_wrap .chart_area,
#lp_contents .chart_wrap .chart_blk{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#lp_contents .chart_wrap .chart_ttl{
  font-weight: bold;
  color: var(--color-main);
}

#lp_contents .chart_wrap .chart{
  position: relative;
  width: 70rem;
  height: 40rem;
}

#lp_contents .chart_wrap .chart:before,
#lp_contents .chart_wrap .chart:after{
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background: #C9C9C9;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .chart_wrap .chart:after{
  width: 1px;
  height: 100%;
}

#lp_contents .chart_wrap .chart li{
  position: absolute;
  width: 8rem;
  z-index: 2;
}

#lp_contents .chart_wrap .item_1{
  bottom: 8rem;
  right: 0;
}

#lp_contents .chart_wrap .item_2{
  bottom: 7rem;
  right: 21rem;
}

#lp_contents .chart_wrap .item_3{
  top: 9rem;
  left: 24rem;
}

#lp_contents .chart_wrap .item_4{
  top: 9rem;
  right: 17rem;
}

#lp_contents .chart_wrap .item_5{
  top: 11rem;
  right: 0;
}

#lp_contents .chart_wrap .item_6{
  top: 0;
  right: 17rem;
}

#lp_contents .chart_wrap .item_8{
  bottom: 10rem;
  left: 25rem;
}

#lp_contents .chart_wrap .item_9{
  bottom: 8rem;
  left: 0rem;
}

#lp_contents .chart_wrap .item_10{
  bottom: 11rem;
  left: 13rem;
}

#lp_contents .chart_wrap .item_11{
  top: 11rem;
  left: 8rem;
}

#lp_contents .chart_wrap .item_12{
  top: 11rem;
  left: 0;
}

#lp_contents .chart_wrap .item_14{
  top: 3rem;
  right: 4rem;
}

#lp_contents .chart_wrap .item_15{
  bottom: 0;
  right: 0;
}

#lp_contents .chart_wrap .item_16{
  bottom: 0;
  left: 7rem;
}

#lp_contents .chart_wrap .item_17{
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
}

#lp_contents .chart_wrap .item_18{
  top: 0;
  left: 11.5rem;
}

#lp_contents .chart_wrap .item_19{
  right: 11rem;
  bottom: 4rem;
}

#lp_contents .chart_wrap .item_20{
  top: 11rem;
  right: 8rem;
}

#lp_contents .chart_wrap .item_21{
  top: 9rem;
  left: 16rem;
}



/*--------------------------------
            Responsive
 --------------------------------*/

@media screen and (max-width: 1600px){
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}

/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

  html {
    font-size: calc(10 * (100vw / 430));
  }

  .sp_menu{
    z-index: 1500;
  }

  #FooterWrap{
    margin-top: -2.4rem;
  }

  #lp_contents{
    min-height: 80rem;
  }

  #lp_contents.is-show:before{
    content: '';
    width: calc(100% - calc(24 *(100vW / 430)));
    height: calc(100% - calc(24 *(100vW / 430)));
    bottom: calc(12 *(100vw / 430));
    border-radius: calc(30 *(100vW / 430));
  }

  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}

  #lp_contents p {
    font-size: 1.5rem;
  }

  #lp_contents .bg_area{
    min-height: 80rem;
    background-image: url(../img/bg_sp.jpg);
  }


  /*------------ sec_mv ------------*/

  #lp_contents .sec_mv{
    top: 3rem;
  }

  #lp_contents .ttl_wrap{
    margin: 0 auto calc(30 *(100vW / 430));
    font-size: calc(36 *(100vW / 430));
  }

  #lp_contents .ttl_wrap span{
    font-size: calc(13 *(100vW / 430));
    margin-top: calc(15 *(100vW / 430));
  }


  /*------------ item_sec ------------*/

  #lp_contents .item_sec ul{
    width: 43rem;
    gap: calc(10 *(100vw / 430));
  }

  #lp_contents .item_sec li{
    width: calc(100 *(100vw / 430));
    transition:all 0.5s;
  }

  #lp_contents .item_sec li.space{
    width: calc(10 *(100vw / 430));
  }

  #lp_contents .item_sec img{
    filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .16));
  }

  #lp_contents .item_sec .modal_list li{
    width: 39rem;
    margin: 0 2rem;
    padding: 2rem;
  }

  #lp_contents .item_sec .modal_list figure{
    width: 27rem;
  }

  #lp_contents .item_sec .modal_list .item_detail{
    font-size: 1.4rem;
    margin: 0 auto 1.5rem;
  }

  #lp_contents .item_sec .another a{
    padding: 1rem;
    gap: 1rem;
  }

  #lp_contents .item_sec .another .img_blk{
    width: 10rem;
    margin: 0;
  }

  #lp_contents .item_sec .another .img_blk img{
    filter: none;
  }

  #lp_contents .item_sec .another .text_blk{
    width: 22rem;
  }

  #lp_contents .item_sec .another .text_blk .item_ttl{
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }


  /*------------ nav_list ------------*/

  #lp_contents .nav_list{
    bottom: calc(24 *(100vw / 430));
  }

  #lp_contents .nav_list ul{
    gap: calc(15 *(100vw / 430));
  }

  #lp_contents .nav_list .link_btn{
    width: calc(180 *(100vw / 430));
    height: calc(50 *(100vw / 430));
    font-size: calc(14 *(100vw / 430));
  }

  #lp_contents .nav_list .link_btn:hover{
    border: calc(1 *(100vw / 430)) solid var(--color-main);
  }


  /*------------ modal__content ------------*/

  /*cate_wrap*/
  #lp_contents .cate_wrap{
    width: 39rem;
    padding: 6rem 2rem;
  }

  /*chart_wrap*/
  #lp_contents .chart_wrap{
    width: 39rem;
    padding: 3rem 2rem;
  }

  #lp_contents .chart_blk .chart_ttl{
    writing-mode: vertical-rl;
    line-height: 1;
  }

  #lp_contents .chart_wrap .chart{
    width: 30rem;
    height: 48rem;
  }

  #lp_contents .chart_wrap .chart li{
    width: 7rem;
  }

  #lp_contents .chart_wrap .item_1{
    bottom: 16rem;
  }

  #lp_contents .chart_wrap .item_2{
    bottom: 12.5rem;
    right: 6.95rem;
  }

  #lp_contents .chart_wrap .item_3{
    top: 8.95rem;
    left: 7.05rem;
  }

  #lp_contents .chart_wrap .item_4{
    top: 8.95rem;
    right: 7.05rem;
  }

  #lp_contents .chart_wrap .item_5{
    top: 15.95rem;
  }

  #lp_contents .chart_wrap .item_6{
    right: 3.55rem;
  }

  #lp_contents .chart_wrap .item_8{
    bottom: 9.05rem;
    left: 7.05rem;
  }

  #lp_contents .chart_wrap .item_9{
    bottom: 9.05rem;
  }

  #lp_contents .chart_wrap .item_10{
    bottom: 16.05rem;
    left: 4.55rem;
  }

  #lp_contents .chart_wrap .item_11{
    top: 15.95rem;
    left: 7.05rem;
  }

  #lp_contents .chart_wrap .item_12{
    top: 15.95rem;
  }

  #lp_contents .chart_wrap .item_14{
    top: 6.95rem;
    right: 0;
  }

  #lp_contents .chart_wrap .item_15{
    bottom: 9.05rem;
  }

  #lp_contents .chart_wrap .item_16{
    left: 2.15rem;
  }

  #lp_contents .chart_wrap .item_17{
    bottom: 1.05rem;
  }

  #lp_contents .chart_wrap .item_18{
    left: 3.55rem;
  }

  #lp_contents .chart_wrap .item_19{
    right: 3.55rem;
    bottom: 2.05rem;
  }

  #lp_contents .chart_wrap .item_20{
    top: 15.95rem;
    right: 7.05rem;
  }

  #lp_contents .chart_wrap .item_21{
    top: 8.95rem;
    left: 0;
  }


}