@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* --------- common --------- */
#Contents *{
  box-sizing: border-box;
}
#Contents{
  font-family: "Noto Sans JP",sans-serif;
  font-feature-settings: "palt";
  padding: 0 0 100px;
}
.sp{
  display: none;
}
.pc{
  display: block;
}
figure{
  text-align: center;
}
img{
  pointer-events: none;
  user-select: none;
  max-width: 100%;
  height: auto;
}
/* ------- harc_btn ------- */
a.harc_btn,.harc_btn{
  display: block;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  background: #fff;
  letter-spacing: .5px;
  border: 2px solid #02467b;
  border-radius: 10vh;
  padding: 10px 0;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  color: #1e4664;
  text-decoration: none;
  transition: .3s;
}
.harc_btn:visited{
  color: #1e4664;
}
.harc_btn:hover{
  opacity: .7;
}

/* ------- footer_contact ------- */
.footer_contact{
  margin: 76px 0 0;
}
.footer_contact .GridSet{
  width: calc(100% - 30px);
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
}
.footer_contact a{
  text-decoration: none;
}
.footer_contact_link_wrap:hover .footer_contact_inner{
  opacity: .7;
}
.footer_contact_inner{
  width: 100%;
  aspect-ratio: 1140/270;
  border-radius: 9px;
  background: url("/products/it/harmonious/cloud/articles/harc/img/footer_contact_bg-pc.jpg") no-repeat center/cover;
  padding: 10% 0 0;
  position: relative;
  transition: .3s;
}
.footer_contact_txt{
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
}
.footer_contact_link_wrap .harc_btn:hover{
  opacity: 1;
}


/* --------- top --------- */
/* ------- common ------- */
.sec_ttl{
  font-size: 2.0625rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  padding: 0;
  margin: 0 0 35px;
  color: #1e4664;
}
/* ------- mv ------- */
.top_mv{
  width: 100%;
  aspect-ratio: 1440/400;
  background: url("/products/it/harmonious/cloud/articles/harc/img/top_mv-pc.jpg") no-repeat center/cover;
  position: relative;
  display: grid;
  align-items: center;
  font-family: "Noto Sans JP",sans-serif;
  padding: 40px 0;
}
.top_mv_inner{
  width: 98%;
  max-width: 1275px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  box-sizing: border-box;
}
.top_mv_harc{
  width: fit-content;
  margin: 0 0 0 auto;
  pointer-events: none;
  order: 2;
}
.top_mv_catch{
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 32px;
  background: none;
}
.top_mv_txt{
  font-size: .9375rem;
  font-weight: 500;
  color: #fff;
  line-height: 2;
  margin: 0 0 35px;
}
.top_mv_btnarea{
  display: flex;
  gap: 12px 13px;
}
a.top_mv_btn{
  display: block;
  padding:  11px 0;
  border: 1px solid #fff;
  border-radius: 10vh;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: .3s;
}
.top_mv_btn:visited{
  color: #fff;
}
.top_mv_btn:hover{
  opacity: .7;
}
.top_mv_btn_cyan{
  width: 240px;
  background: #1eb9b9;
}
.top_mv_btn_navy{
  width: 280px;
  background: #345370;
}

/* ------- sec01 ------- */
.sec01{
  background: linear-gradient(to bottom,#f6f6f8 0%,#f6f8fc 22%,#d1dbe5 54%,#b7cad9 80%,#cee5f5 100%);
  padding: 48px 15px 80px;
}
.sec01 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec01_ttl{
  width: fit-content;
  margin: 0 auto 35px;
  padding: 0 19px 4px;
  border-bottom: 1px solid #1e4664;
  font-size: 2.6875rem;
}
.sec01_leadtxt{
  max-width: 560px;
  font-size: .9375rem;
  text-align: justify;
}
.sec01_img{
  margin: -110px 0 12px;
}
.sec01_cauion_list{
  font-size: .75rem;
  line-height: 1.3;
  text-align: justify;
}
.sec01_cauion_list_item:first-of-type{
  padding: 0 0 0 1em;
  text-indent: -1em;
  margin: 0 0 24px;
}
.sec01_cauion_list_item:last-of-type{
  padding: 0 0 0 1.8em;
  text-indent: -1.8em;
}


/* ------- sec02 ------- */
.sec02{
  padding: 80px 15px 92px;
}
.sec02 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec02_list{
  font-size: .9375rem;
  text-align: justify;
  grid-area: sec02_list;
}
.sec02_list_item{
  padding: 0 0 0 12px;
  position: relative;
}
.sec02_list_item::before{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  left: 0;
}
.sec02_list_item + .sec02_list_item{
  margin: 10px 0 0;
}
.sec02_img01{
  grid-area: sec02_img01;
}
.sec02_img02{
  grid-area: sec02_img02;
}
.sec02_grid{
  display: grid;
  grid-template-columns: 30% 66.1%;
  grid-template-areas:  "sec02_list sec02_img02"
                        "sec02_img01 sec02_img02";
  gap: 45px 39px
}

/* ------- sec03 ------- */
.sec03{
  padding: 96px 15px 74px;
  background: linear-gradient(to right,#2a4b86,#4270bf);
}
.sec03 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec03_ttl{
  color: #fff;
  margin: 0 0 55px;
}
.sec03_img01{
  grid-area: sec03_img01;
}
.sec03_txt{
  color: #fff;
  font-size: .9375rem;
  grid-area: sec03_txt;
}
.sec03_img02{
  grid-area: sec03_img02;
}
.sec03_grid{
  display: grid;
  grid-template-columns: 56% 40.2%;
  grid-template-areas:  "sec03_img01 sec03_txt"
                        "sec03_img01 sec03_img02";
  gap: 15px 38px;
}

/* ------- sec04 ------- */
.sec04{
  padding: 88px 15px 92px;
}
.sec04 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec04_ttl{
  margin: 0 0 25px;
}
.sec04_txt{
  font-size: .9375rem;
  grid-area: sec04_txt;
  text-align: justify;
}
.sec04_img01{
  grid-area: sec04_img01;
}
.sec04_img02{
  grid-area: sec04_img02;
}
.sec04_grid{
  display: grid;
  grid-template-columns: 40% 56%;
  grid-template-areas:  "sec04_txt sec04_img02"
                        "sec04_img01 sec04_img02";
  gap:20px 40px;
}

/* ------- sec05 ------- */
.sec05{
  background: linear-gradient(to right,#243653 59%,#456aa8 100%);
  padding: 95px 15px 70px;
}
.sec05 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec05_ttl{
  color: #fff;
  margin: 0 0 58px;
}
.sec05_linkarea{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  margin: 0 0 63px;
}
a.sec05_link{
  display: grid;
  align-items: center;
  width: 100%;
  aspect-ratio: 490/212;
  position: relative;
  padding: 0 60px;
  font-size: .8rem;
  font-weight: bold;
  color: #1e4664;
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  transition: .3s;
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.9),-2px 2px 2px rgba(255, 255, 255, 0.9),2px -2px 2px rgba(255, 255, 255, 0.9),-2px -2px 2px rgba(255, 255, 255, 0.9);
}
.sec05_link::after{
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: 2px solid #1e4664;
  border-right: 2px solid #1e4664;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  right: 25px;
  translate: 0 -50%;
}
.sec05_link:hover{
  opacity: .7;
}
.sec05_link:visited{
  color: #1e4664;
}
.sec05_link_ttl{
  margin: 0 0 0 auto;
}
.sec05_link_ttl > span {
  font-size: .65rem;
}
.sec05_link_seminar{
  background: url("/products/it/harmonious/cloud/articles/harc/img/top_sec05_01.jpg") no-repeat center/cover;
}
.sec05_link_interview{
  background: url("/products/it/harmonious/cloud/articles/harc/img/top_sec05_02.jpg") no-repeat center/cover;
}

/* ------- sec06 ------- */
.sec06{
  padding: 80px 15px 0;
}
.sec06 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec06_inner{
  display: grid;
  grid-template-columns: 120px 1fr;
}
.sec06_ttl{
  font-size: 1.25rem;
  margin: 0;
  text-align: left;
}
.sec06_list{
  border-left: 3px solid #1e4664;
  padding: 0 0 0 24px;
  font-size: .9375rem;
}
.sec06_list_item{
  width: fit-content;
}
.sec06_list_item a{
  display: flex;
  gap: 10px 20px;
  align-items: center;
  padding: 0 17px 0 0;
  position: relative;
  transition: .3s;
  text-decoration: none;
  color: #000;
}
.sec06_list_item a::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  right: 4px;
  translate: 0 -50%;
  transition: .3s;
}
.sec06_list_item a:hover{
  opacity: .7;
}
.sec06_list_item a:hover::after{
  translate: 6px -50%;
}
.sec06_list_item + .sec06_list_item{
  margin: 12px 0 0;
}
.sec06_list_item a:visited{
  color: #000;
}
.sec06_list_item_date{
  display: inline-block;
  width: 80px;
}
.sec06_list_item_genre{
  display: inline-block;
  width: 136px;
  text-align: center;
  position: relative;
  line-height: 1;
}
.sec06_list_item_genre::before,
.sec06_list_item_genre::after{
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  border: 1px solid #000;
  border-right: none;
  position: absolute;
  top: 0;
  left: 0;
}
.sec06_list_item_genre::after{
  scale: -1 1;
  left: auto;
  right: 0;
}
.sec06_list_item_ttl{
  flex: 1;
}

/* ------- sec07 ------- */
.sec07{
  padding: 48px 15px 0;
}
.sec07 .GridSet{
  max-width: 1000px;
  margin: 0 auto;
}
.sec07_inner{
  display: grid;
  grid-template-columns: 120px 1fr;
}
.sec07_ttl{
  font-size: 1.25rem;
  margin: 0;
  text-align: left;
}
.sec07_list{
  border-left: 3px solid #1e4664;
  padding: 0 0 0 24px;
  font-size: .9375rem;
  font-weight: 500;
}
.sec07_list_item{
  width: fit-content;
}
.sec07_list_item a{
  display: block;
  padding: 0 17px 0 0;
  position: relative;
  transition: .3s;
  text-decoration: none;
  color: #1e4664;
}
.sec07_list_item a::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #1e4664;
  border-right: 2px solid #1e4664;
  rotate: 45deg;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  transition: .3s;
}
.sec07_list_item a:hover{
  opacity: .7;
}
.sec07_list_item a:hover::after{
  translate: 6px -50%;
}
.sec07_list_item + .sec07_list_item{
  margin: 4px 0 0;
}
.newtab a::after{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url("/products/it/harmonious/cloud/articles/harc/img/icon_newtab.png") no-repeat center/cover;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  border: none;
  rotate: none;
}
.pdf a::after{
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("/products/it/harmonious/cloud/articles/harc/img/icon_pdf.gif") no-repeat center/cover;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  border: none;
  rotate: none;
}


/* --------- content --------- */
.page_harc_content #Contents{
  padding: 0 0 100px;
}
/*.page_harc_content #Contents #TopicPath ul{
  width: 1140px;
  margin: 0;
}*/
.page_harc_content #Contents img{
  max-width: 100%;
  height: auto;
}
.page_harc_content .GridSet{
  width: calc(100% - 30px);
  max-width: 1140px;
  margin: 0 auto;
}
.content_ttl{
  font-size: 2rem;
  font-weight: 700;
  color: #1e4664;
  margin: 32px 0 16px;
}
.content_leadtxt{
  margin: 0 0 32px;
  word-break: break-all;
}
.content_list{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 56px 29px;
  font-size: .9375rem;
}
.content_list_item a{
  color: #000;
  text-decoration: none;
  transition: .3s;
}
.content_list_item a:hover figure > img{
  scale: 1.3;
}
.content_list_item a:hover{
  opacity: .7;
}
.content_list_item_img{
  overflow: hidden;
  margin: 0 0 17px;
}
.content_list_item_img > img{
  transition: .3s;
}
.content_list_item_head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 13px;
}
.content_list_item_genre{
  display: inline-block;
  background: #1eb9b9;
  padding:4px 24px 6px;
  line-height: 1;
  font-weight: 500;
}
.content_list_item_ttl{
  margin: 0 0 13px;
}
.content_list_item_dtl>span{
  font-size: .75rem;
}
.icon_newtab{
  translate: 4px 8px;
}
.content_subttl{
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e4664;
  margin: 32px 0 16px;
}
.content_subttl:nth-of-type(2){
  margin: 64px 0 16px;
}
.page_harc_content .footer_contact .GridSet{
  width: 100%;
}

.harcBT a {
    font-size: 100%;
    background-color: #1e4664 !important;
    padding-bottom: 20px !important;
}
.harcBT a:hover {
    opacity: .7;
}
.harcBT {
    margin-top: 50px;
}
.harcBT span {
    font-size: 175%;
    line-height: 160%;
}

li.Bottom a {
    padding: 13px 48px;
    font-size: 120%;
    background-position-x: 90%;
    border-radius: 50px;
    background-color: #1e4664;
    color: #fff;
    background-image: url(/image/jp/r1/icon/icon_link_bottom_white_hd.png) !important;
    /*margin-right: 15px;*/
    margin-bottom: 10px;
    display: inline-block;
    width: 274px;
    text-align: center;}

li.Bottom a:hover {
    opacity: .7;
    text-decoration: none;
}


@media screen and (min-width: 995px) and (max-width: 1304px){
  .OptionWideRWD #Contents {
    padding: 0 0 100px;
  }
  .OptionWideRWD .page_harc_content #Contents {
    padding: 0 0 100px;
  }
  /*.OptionWideRWD .page_harc_content #TopicPath ul{
    padding: 20px 0 5px;
  }*/
  .OptionWideRWD .Grid4{
    padding: 0;
  }
  .OptionWideRWD .footer_contact_inner.Grid4{
    padding: 10% 0 32px;
  }
}
@media screen and (max-width: 994px){
  .JS #Contents {
    padding: 0 0 100px;
  }
  .JS .page_harc_content #Contents{
    padding: 0 0 100px;
  }
  /*.JS .page_harc_content #TopicPath ul{
    padding: 20px 0 5px;
  }*/
  .JS .Grid4{
    padding: 0;
  }
  .JS .footer_contact_inner.Grid4{
    padding: 6% 0 32px;
  }
  /*.JS .page_harc_content #Contents #TopicPath ul {
    width: auto;
  }*/
}
@media screen and (max-width:767px){
  /* --------- common --------- */
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .JS #Contents{
    padding: 0 0 104px;
  }
  .JS .GridSet{
    width: auto;
  }
  .JS h2, .JS .LV1LinkSet{
    margin: 0 auto;
  }

  /* ------- harc_btn ------- */
  a.harc_btn, .harc_btn{
    width: 70%;
  }

  /* ------- footer_contact ------- */
  .footer_contact .GridSet{
    margin: 0 15px;
  }
  .page_harc_content .footer_contact .GridSet{
    margin: 0;
  }
  .footer_contact{
    margin: 64px 0 0;
  }
  .JS .footer_contact .footer_contact_inner{
    width: 100%;
    aspect-ratio: 690/361;
    background: url("/products/it/harmonious/cloud/articles/harc/img/footer_contact_bg-sp.jpg") no-repeat center/cover;
    padding: 12% 0 32px 0;
  }
  .footer_contact_txt{
    font-size: 1.125rem;
    margin: 0 0 20px;
  }

  /* --------- top --------- */
  /* ------- common ------- */
  section .sec_ttl{
    font-size: 1.375rem;
    margin: 0 auto 24px;
  }

  /* ------- mv ------- */
  .top_mv{
    width: 100%;
    aspect-ratio: 750/400;
    background: url("/products/it/harmonious/cloud/articles/harc/img/top_mv-sp.jpg") no-repeat center/cover;
  }
  .top_mv_inner{
    padding: 0 15px;
  }
  .top_mv_harc{
    width: 80%;
    margin: 0 auto 0 0;
  }
  .top_mv_txtarea{
    padding: 32px 15px 64px;
  }
  .top_mv_txtarea .top_mv_catch{
    color: #1e4446;
    font-size: 1.375rem;
    margin: 0 0 20px;
  }
  .top_mv_txt{
    color: #000;
    font-size: .875rem;
    margin: 0 0 20px;
  }
  a.top_mv_btn{
    width: 70%;
    margin: 0 auto;
  }

  /* ------- sec01 ------- */
  .sec01{
    padding: 64px 15px;
  }
  .sec01 .sec01_ttl{
    font-size: 2rem;
  }
  .sec01_leadtxt{
    max-width: 100%;
    font-size: .875rem;
    margin: 0 0 20px;
  }
  .sec01_img{
    margin: 0 0 20px;
  }

  /* ------- sec02 ------- */
  .sec02{
    padding: 64px 15px;
  }
  .sec02_grid{
    grid-template-columns: 1fr;
    grid-template-areas:  "sec02_list"
                          "sec02_img02"
                          "sec02_img01";
    gap: 12px;
  }
  .sec02_list{
    margin: 0 0 8px;
  }

  /* ------- sec03 ------- */
  .sec03{
    padding: 64px 15px;
  }
  .sec03_grid{
    grid-template-columns: 1fr;
    grid-template-areas:  "sec03_txt"
                          "sec03_img01"
                          "sec03_img02";
    gap: 20px;
  }
  .sec03_txt{
    text-align: justify;
  }

  /* ------- sec04 ------- */
  .sec04{
    padding: 64px 15px;
  }
  .sec04_grid{
    grid-template-columns: 1fr;
    grid-template-areas:  "sec04_txt"
                          "sec04_img02"
                          "sec04_img01";
    gap: 5px;
  }
  .sec04_img02{
    margin: 0 0 12px;
  }

  /* ------- sec05 ------- */
  .sec05{
    padding: 64px 15px;
  }
  .sec05_linkarea{
    grid-template-columns: 1fr;
    margin: 0 0 24px;
  }
  a.sec05_link{
    font-size: 2.2vw;
    padding: 0 60px;
  }

  /* ------- sec06 ------- */
  .sec06{
    padding: 64px 15px 0;
  }
  .sec06_inner{
    grid-template-columns: 1fr;
  }
  .sec06 .sec06_ttl{
    margin: 0 auto 8px;
  }
  .sec06_list{
    border: none;
    border-top: 3px solid #1e4664;
    padding: 20px 0 0;
    font-size: .875rem;
  }
  .sec06_list.andmore{
    border-top: none;
  }
  .sec06_list_item{
    width: 100%;
  }
  .sec06_list_item + .sec06_list_item{
    margin: 24px 0 0;
  }
  .sec06_list_item a{
    flex-wrap: wrap;
  }
  .sec06_list_item_ttl{
    width: 100%;
    flex: none;
  }
  .sec06_list_item_genre{
    width: 128px;
  }

  /* ------- sec07 ------- */
  .sec07{
    padding: 48px 15px 0;
  }
  .sec07_inner{
    grid-template-columns: 1fr;
  }
  .sec07 .sec07_ttl{
    margin: 0 auto 8px;
  }
  .sec07_list{
    border: none;
    border-top: 3px solid #1e4664;
    padding: 20px 0 0;
    font-size: .875rem;
  }
  .sec07_list_item{
    width: 100%;
  }
  .sec07_list_item + .sec07_list_item{
    margin: 20px 0 0;
  }


  /* --------- content --------- */
  .JS .page_harc_content #Contents{
    padding: 0 15px 104px;
  }
  .content_ttl{
    font-size: 1.375rem;
    /*margin: 22px 0;*/
    margin: 0;
    padding: 22px 0;
  }
  .content_leadtxt{
    margin: 0 0 44px;
  }
  .content_list{
    grid-template-columns: 1fr;
    font-size: .875rem;
    gap: 40px;
  }
  .JS .page_harc_content .content_subttl{
    font-size: 1.25rem;
    margin: 44px 0 22px;
    padding: 0;
  }
  .JS .page_harc_content .content_subtt:nth-of-type(2){
    margin: 64px 0 22px;
  }
}
@media screen and (max-width:650px){
  .top_mv_harc{
    width: 65%;
  }
}
@media screen and (max-width:400px){
  .top_mv_harc{
    width: 60%;
  }
}

@media screen and (max-width:580px){
  /* --------- common --------- */
  /* ------- harc_btn ------- */
  a.harc_btn, .harc_btn{
    width: 70%;
    font-size: .875rem;
    padding: 3px 0;
  }
  /* --------- tp@ --------- */
  /* ------- mv ------- */
  .top_mv_btnarea{
    flex-direction: column;
  }
  a.top_mv_btn{
    width: 70%;
    margin: 0 auto;
    font-size: .875rem;
    padding: 4px 0;
  }
  .top_mv_harc{
    width: 50%;
  }
}

/*section resource > さらに表示*/
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 80px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/*background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);*/
	background-color: #fff;
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 240px;
	content: ' And More';
	transform: translate(-50%, 0);
	color: #ffffff;
	border-radius: 100vh;
	background-color:#0C5785;
}
.cp_box label:hover:after {
	background-color:#0F6EA9;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 80px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	content: ' close';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}