@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
html {
  scroll-behavior: smooth;
}
html { scroll-behavior: smooth !important; }
body { scroll-behavior: smooth !important; }
@media (max-width: 1260px) {
  html {
    scroll-padding-top: 80px;
  }
  html:has(#wpadminbar){
    margin-top: 60px !important;
  }
}
:root{
  --color-green:#009D8A;
  --color-green2:#09B5A2;
  --color-black:#0F0F0F;
  --color-deep-green:#17413C;
  --footer-offset: 80px;
  
}
@media (max-width: 1023px) {
  :root {
    --footer-offset: 60px;
  }

}
.ispc{
  display: block;
}

.issp{
  display: none;
}

#wpadminbar{
z-index:2299999;
}

.mb24{
    margin-bottom: 24px;
  }
.mb48{
    margin-bottom: 48px;
  }

  a:focus{
    text-decoration: none;
  }

body{
  font-family: "YakuHanJP","Zen Kaku Gothic New", sans-serif;
  --swiper-navigation-size:12px;
  --swiper-theme-color:#FFF;
}

.hoge{
  .fuga{
    background-color: #FF0000;
  }
}

.siteHeader{
  box-shadow: none;
  font-family: "Noto Sans JP", sans-serif;
  z-index: 1000003;
}
.navbar-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 140px);
}

.siteHeader .contactbtn{
  position: absolute;
  right:0;
  top:0;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding:0;
  transition: all .3s ease;
   background: var(--color-green2);

}
.siteHeader .contactbtn:hover{
  background: var(--color-green);
}
.siteHeader .contactbtn div{
  display: flex;
  align-content: center;
  color:#FFF;
  width: 100%;
  line-height: 1.7;
  text-align: center;
  flex-direction: column;
  position: relative;
  font-weight: 500;
  padding-top: 23px;
 
}
.siteHeader .contactbtn div i{
  display: none;
}
.siteHeader .contactbtn div:after{
  content:'';
  position: absolute;
  left:0;
  right: 0;
  top:-1px;
  background: url(images/mail.svg) no-repeat center top;
  width: 30px;
  height:20px;
  margin:auto;

}
.siteHeader .contactbtn:hover{
  text-decoration: none;
}
.siteHeader_logo{
  max-width: 457px;
}
h1.navbar-brand.siteHeader_logo{
  max-width: 457px;
  padding:0;
}
h1.navbar-brand.siteHeader_logo img{
  width: 100%;
}

.siteHeader .container{
  /* max-width: 1440px; */
  float: none;
  margin:0  auto;
  padding:0;
  min-height: 140px;;


}
.siteHeader .nav > li > a{
  padding:5px 0 16px;
}
.menu-headmenu-container{
  border:none;
  
}
.menuBtn{
  display: none;
}
@media (max-width: 1259px) {
  .siteHeader{
    position: fixed;
  }
  .siteHeader .container{
    
  }
  .siteHeader .contactbtn{
    display: none;
  }
  .siteHeader .container{
    min-height: 56px;;
    align-content: center;
  }
  h1.navbar-brand.siteHeader_logo{
    max-width: 228px;
    margin: 0 0 0 16px !important;
  }
  .admin-bar .breadSection{
    margin-top: 0;
  }
  .breadSection{
    margin-top: 56px;
  }
  .navbar-header{
    width: 100%;
    justify-content: flex-start;;
    margin:0 !important;
  }

}

@media (max-width: 1023px) {
  
  body{
    font-size: 15px;

  }

  .pan_menu_fixed_list li{
    display: none;
  }
  .ispc{
    display: none;
  }

  .sptl.tc{
    text-align: left;
  }

  .issp{
    display: block;
  }
  .mb24-sp{
    margin-bottom: 24px;
  }
}


.gMenu_description{
  display: none;
}
ul.gMenu li.current_page_item > a, ul.gMenu li.current-menu-parent > a{
  background: none;
}
ul.gMenu > li > a:hover:after, ul.gMenu > li.current-post-ancestor > a:after, ul.gMenu > li.current-menu-item > a:after, ul.gMenu > li.current-menu-parent > a:after, ul.gMenu > li.current-menu-ancestor > a:after, ul.gMenu > li.current_page_parent > a:after, ul.gMenu > li.current_page_ancestor > a:after{
  border:none;
}
.menu-item-has-children{

}

.menu-headmenu-container{
  margin-top: 0;
  width: calc(100% - 140px);
}

#headSubJCMManu{
  float:none;
  flex:1;
  display: flex;
  align-items: center;
}

#headSubJCMManu form#searchform{
  background: none;
}
#headSubJCMManu ul{
  width: auto;
  display: flex;
  white-space: nowrap;

}
#headSubJCMManu ul li{
  width: auto;
  margin: 2px 0;
}
#headSubJCMManu ul li a i{
  display: none;
}
#headSubJCMManu ul li a {
 border:1px solid var(--color-green2);
 padding:8px 34px 8px 14px;
 display: block;
 font-size: 18px;
 font-size: clamp(12px, calc(12px + 6 * ((100vw - 1024px) / 416)), 18px);
 margin:0 8px;
 font-weight: 500;
 letter-spacing: 0.03em;
 color:var(--color-green);
 border-radius: 4px;
 position: relative;
 transition: all .1s ease;
}
#headSubJCMManu ul li a:after{
  content:'';
  position: absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
#headSubJCMManu ul li a:hover:after{
background:#FFF;
transform: translate(3px,-50%);
}
#headSubJCMManu ul li a:hover{
  text-decoration: none;
  background: var(--color-green);
  color:#FFF;
 
}
#headSubJCMManu .form-control{
  box-shadow: none;
  border-radius: 20px !important;

}
#headSubJCMManu form#searchform{
  padding:24px 0;
  margin:0 24px 0 0;
}
#headSubJCMManu form#searchform{
  width: auto;
}
#headSubJCMManu form#searchform div input[type="text"]#s{
  width: auto;
  min-width: 252px;
}
#headSubJCMManu form#searchform div input[type="submit"]#searchsubmit{
  position: absolute;
  aspect-ratio: 1 / 1;
  right:0;
  background: none;
  border:none;
  background: url(images/search_line.svg) no-repeat center center;
}
@media (max-width: 1259px) {
  #headSubJCMManu{
    width: 100%;
    background: #f5f5f5;
    margin-top: 16px;;
    display: none;
    visibility: hidden;
  }
  #headSubJCMManu.add{
    display: flex;
    visibility: visible;
  }



  #headSubJCMManu ul{
    width: 100%;
    margin:0;
    display: flex;
    gap:12px;
    padding:0 16px;
  }
  #headSubJCMManu ul li{
    width: 50%;
  }
  #headSubJCMManu form{
    display: none;
  }
  #headSubJCMManu ul li a{
    margin: 16px 0;;
    text-align: left;;
    background: #FFF;
    padding:23px 8px;
    font-size: 15px;;
  }
  #headSubJCMManu form#searchform{
    position: absolute;
    top:56px;
    width: 100%;
    display: block;
    background: var(--color-green2);
  }
  #headSubJCMManu form#searchform div{
    width: 100%;
    padding:0 16px
  }
  #headSubJCMManu form#searchform div input[type="text"]#s{
    width: 100%;
  }
  #headSubJCMManu form#searchform div input[type="submit"]#searchsubmit{
    margin-right: 20px;;
  }

  .menu-headmenu-container{
    width: 100%;
  }
  ul.gMenu{
    flex-direction: column;
  }
  ul.gMenu li{
    width: calc(100% - 32px) !important;
    margin:0 auto;
  }
  ul.gMenu > li .gMenu_name:before{
    display: none;
  }

  ul.gMenu a{
    padding:13px 0;
  }
  .menu-item-has-children .gMenu_name span{
    width: 100%;
    display: block;
  }

  .contactbtn{
    width: 100%;
    background: var(--color-green2);
    color:#FFF;
    font-size: 18px;
    text-align: center;
    display: block;
    padding:50px 0 30px;
    font-weight: 600;
  }
  .contactbtn i{
    display: none;
  }
  .contactbtn div{
    position: relative;
  }
  .contactbtn:focus,
  .contactbtn:hover{
    color:#FFF;
    text-decoration: none;;
  }
  .contactbtn div:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -23px;
    background: url(images/mail.svg) no-repeat center top;
    width: 30px;
    height: 20px;
    margin: auto;
  }

  #searchform{
    top:56px;
    background: var(--color-green2);
    position: fixed;
    width: 100%;
    padding:20px 16px;
    z-index: 1000;
    margin:0;
    display: none;
    
  }
  form.searchform div{
    width: 100%;
    position: relative;
  }
  form.searchform div input[type=text]#s{
    width: 100%;
    border-radius: 20px;
    margin:0;
    padding:18px;
    box-sizing: border-box;
    font-size: 16px;;
    box-shadow: none;;
     -webkit-appearance: none;
  }
  form.searchform div input[type=submit]#searchsubmit{
    position: absolute;
    right: 5px;
    position: absolute;
    aspect-ratio: 1 / 1;
    width:42px;
    height: 42px;;
    background: none;
    border: none;
    top:-1px;
    background: url(images/search_line.svg) no-repeat center center;
  }

  .spsearch{
    width:56px;
    height: 56px;
    cursor: pointer;
    margin-left: auto;
    background: url(images/search_line.svg) no-repeat center center;
  }
  .spsearch.on{
    background: var(--color-green2);
    display: flex;
    flex-direction: column;

    align-content: center;
    justify-content: center;
  }
  .spsearch.on span{
    width: 24px;
    height: 3px;
    background:#FFF;
    margin: 3px auto;
    display: block;
 
  }
  .spsearch.on span:nth-of-type(1) {
    transform: translateY(8px) rotate(45deg);
    animation: none;
  }

  .spsearch.on span:nth-of-type(2) {
    opacity: 0;
  }

  .spsearch.on span:nth-of-type(3) {
    transform: translateY(-10px) rotate(-45deg);
    animation: none;
  }

  
}
.nav li a{
  color:var( --color-black);
  font-weight: 500;
  background: none;
}
.nav li a:focus{
  background: none;
}
.gMenu_name{
font-weight: 500;
font-size: 18px;;
letter-spacing: 0.03em;

}

.menu-item-has-children .gMenu_name span{
  position: relative;
  padding-right: 25px;
}

.menu-item-has-children .gMenu_name span::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--color-green);

  /* 大きさ */
  width: 15px;
  height: 15px;

  /* くの字（下向き） */
  clip-path: polygon(100% 40%, 50% 90%, 0 40%, 10% 30%, 50% 70%, 90% 30%);
}

ul.gMenu {
   width: 100% !important;
  display: flex;
  justify-content: space-between;;
}
ul.gMenu > li{
  border:none;
  position: inherit;
  font-size: 18px;
  float:none;
  width: inherit;
  
}
ul.gMenu > li:first-child{
  width:60%;
  border:none !important;
}
ul.gMenu > li:nth-child(2){
  width:65%;
}
ul.gMenu > li:nth-child(3){
  width:85%;
}
ul.gMenu > li:nth-child(5){
  width:64%;
}

ul.gMenu > li:last-child{
  width:60%;
}

ul.gMenu > li:hover > a{
  color:var(--color-green);

}
ul.gMenu > li + li:before {
  content:'';
  position: absolute;
  left: 0;
  top:50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #ccc;
  z-index: 1;

}
ul.gMenu > li  .gMenu_name:before{
  content:'';
  position: absolute;
  left: 0;
  top:20px;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #ccc;
  z-index: 1;
}

ul.gMenu > li > .sub-menu{
  display: none;
  top:140px;
  width: 100%;
  left:0;
  position: absolute;
  background: var(--color-green);
  
}
ul.gMenu > li > .sub-menu div{
  margin:0 auto;
  width: fit-content;
  display: flex;;
  padding:32px 0;
}





ul.gMenu > li > .sub-menu a .gMenu_name{
  width: fit-content;
}
ul.gMenu > li > .sub-menu a .gMenu_name span:after{
  display: none;
}
ul.gMenu > li > .sub-menu a{
  background: #EDFAF9;
  color:var(--color-green);
  border-radius: 4px;
  width: 400px;
  transition: all .3s ease;
  position: relative;
}
ul.gMenu > li > .sub-menu a:hover{
  background: #FFF;
}
ul.gMenu > li > .sub-menu a:before{
  content:'-';
  padding-right: 5px;
}
ul.gMenu > li > .sub-menu a:after{
  content:'';
  position: absolute;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}

ul.gMenu > li > .sub-menu div > ul{
  display: flex;
  flex-wrap: wrap;
  max-width: 837px;
  gap:4px;
  padding-left: 32px;
  border-left: 1px solid #FFFBFB;
}
ul.gMenu > li > .sub-menu:after,
ul.gMenu > li > .sub-menu div:after{
  display: none;
}

ul.gMenu > li > .sub-menu .sub-menu__parent{
  padding: 10px 1em 10px 2em;
  color:#FFF;
  margin-right: 32px;
  min-width: 240px;
}


footer .copySection p{
  margin: 0;
  line-height: inherit;
  padding:20px 0;
  background: var(--color-green);
  font-size: 14px;
}

.siteFooter{
  background: #EDFAF9;
  border:none;
  font-family: "Noto Sans JP", sans-serif;
}

.siteFooter .footerMenu{
  display: none;
}
.container.sectionBox{
  margin:30px auto;
  width: 100%;
  max-width: 1440px;;
  padding:48px 5%;
}
.siteFooter .container .row {
  display: flex;
  justify-content: space-between;
  gap:20px;
}
.siteFooter .container .row > div{
  width: 20%;
}
.siteFooter .container h3:after, .subSection-title:after{
  border-bottom: none;
}
.siteFooter .container .subSection-title, h3{
  box-shadow: none;
  border:none;
  font-weight: 600;
  
}

.siteFooter .widget_nav_menu li{
  line-height: inherit;
  border:none;

}
.siteFooter .widget_nav_menu li a{
  font-size: 14px;
   border:none;
   box-shadow: none;
   padding:5px 0;
   margin-left: 5px;
   font-weight: 400;
   font-family: "Noto Sans JP", sans-serif;

}
.siteFooter .widget_nav_menu li a:hover{
  background: none;
  color:#000;
}
.siteFooter .widget_nav_menu li a:before{
  content:'-';
  padding-right: 5px;
}
@media (max-width: 1259px) {
ul.gMenu > li > .sub-menu{
    position: relative !important;
    top:inherit;
    background: none;
  }
  .sub-menu__parent{
    display: none !important;
  }
  ul.gMenu > li > .sub-menu div{
    width: 100%;
    padding: 0;
  }
  ul.gMenu > li > .sub-menu a{
    width: 100%;;
    padding:16px;
    border-radius: 0;
  }
  ul.gMenu > li > .sub-menu div > ul{
    padding: 0;
    gap:0;
    max-width: 100%;
    width: 100%;
  }
  ul.gMenu > li > .sub-menu div ul li{
    width: 100% !important;
  }
  ul.gMenu > li + li:before{
    display: none;
  }
  ul.gMenu a{
            border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
  }
  .gMenu_name{
    text-align: left;
  }

}

@media (max-width: 1023px) {
  .siteFooter .sectionBox{
    padding:16px;

  }
  .siteFooter .container .row{
    flex-wrap:wrap;
  }
  .siteFooter .container .row > div{
    width: 100%;
  }
  .siteFooter .container .subSection-title{
    margin-left: 10px !important;
  }
  .siteFooter .container .widget > .widget-title{
    margin:0 !important;
    padding-bottom: 0;
    font-size: 20px !important;
  }

  .siteFooter .container .widget > div{
    padding: 0px !important;
  }
  .siteFooter .widget_nav_menu li a{
    padding:2px 0;
  }
  .siteFooter .widget_nav_menu li a{
    font-size: 15px;
  }

  footer .copySection p{
    font-size: 15px;
  }
  


}

.page_top_btn{
  width: 64px;
  height: 64px;
   background: url(images/pagetop.svg) no-repeat left top;
    background-size: contain;
    box-shadow: none;
}
.page_top_btn.open{
  display: none;
}
.page_top_btn:before{
  content:'';
  position: absolute;
  left:0;
  top:0;
 
  width: 64px;
  height: 64px;
  background-size: contain;

}

section {
  margin-top: 64px;
  margin-bottom: 64px;
}

.c-h2{
  font-size: 48px;
  border:none;
  text-align: center;
  background:none;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin-bottom: 50px;
  font-feature-settings: "palt";
  color:var(--color-deep-green);
  
}

.c-h3{
   font-size: 40px;
  border:none;
  text-align: center;
  background:none;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin-bottom: 12px;
  color:var(--color-deep-green);
}
.c-h3:after{
  display: none;
}

.c-h4{
  font-size: 32px;
  border:none;
  text-align: center;
  background:none;
  font-weight: 700 !important;
  letter-spacing: .04em;
  margin-bottom: 12px;
  color:#000;
}
.c-h4:after{
  display: none;
}


.c-h5{
  font-size: 24px;
  width: 100%;
  line-height: 1.4;
  padding-left: 0;
  margin-left: 0;
  letter-spacing: -.04em;
}
.c-h5:after{
  width: 100%;
  border-bottom-color: #ccc;
}

.c-col2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;;
  flex-wrap:wrap;
}


@media (max-width: 1023px) {
  .page_top_btn{
    width: 32px;
    height: 32px;
  }
  .c-h2{
    font-size: 26px;;
    line-height: 1;
    margin-bottom: 32px;
    padding-left: 0;
        padding-right: 0;
        letter-spacing: -0.05em;
  }
  section {
    margin-top:24px;
    margin-bottom:32px;
  }

  .c-h3{
    font-size: 24px;

  }

  .c-h4{
    font-size: 20px;
  }
  .c-col2{
    grid-template-columns:1fr;
  }
  .c-h5{
    font-size: 18px;;
  }
}

.tc{
  text-align: center;
}

.iauto{
  margin-inline: auto;
}

.c-txt{
  font-size: 18px;
  font-weight: 400;
  text-indent: 0;
  line-height: 1.5;
}


.c-stxt{
  font-size: 14px;
  font-weight: 500;
}

.c-txt-col-dg{
  color:var(--color-green)
}

.c-col3-btn{
  display: flex;
  justify-content: center;
  gap:24px;
  margin:0 auto;
  padding:0;
  width: calc(100% - 48px);
}

.c-col3-btn li{
  width: 325px;
  list-style: none;
}
.c-col3-btn li a{
  display: block;
  color:var(--color-green);
  text-decoration: none;
  font-weight: 500;
  border:1px solid var(--color-green2);
  padding: 20px 16px;
  border-radius: 4px;
  transition: all .2s ease;
  position: relative;
  font-size:18px;
  font-family: "Noto Sans JP", sans-serif;

}

.c-col3-btn li a:after{
  content:'';
  position: absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.c-col3-btn li a:hover:after{
  background: #FFF;
  transform: translate(5px , -50%);
}

.c-col3-btn li a:hover{
  background: var(--color-green);
  color:#FFF;
}

@media (max-width: 1023px) {
  .c-stxt{
    font-size: 12px;
  }
  .c-col3-btn{
    flex-wrap:wrap;
    gap:0;
    width: calc(100% - 32px);
  }
  .c-col3-btn li{
    width: 100%;
  }

  .c-txt{
    font-size: 15px;;
  }

  .sp-pd{
    padding-left: 16px;
    padding-right: 16px;
  }
 
}

.related-link{
  width: calc(100% - 48px);
  max-width: 1390px;
  margin:0 auto;
  padding:40px 64px;
  position: relative;
  max-height: 430px;;
  overflow: hidden;
  border-radius: 12px;
}
.related-link .c-h2{
  color:#FFF;
  margin-bottom: 10px;
}
.related-link:before{
  content:'';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom: 0;
  margin:auto;
  z-index: -1;
    opacity: .1;
  background: url(images/bg_link.jpg) no-repeat center top;
  background-size: cover;
}
.related-link:after{
content:'';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom: 0;
  margin:auto;
  width: 100%;
  height: 100%;
  background: #399287;

  z-index: -2;

}
.related-link ul{
  display: grid;
  margin:0;
  padding:0;
  gap:8px;
  grid-template-columns: repeat(4,1fr);
}
.related-link img {
  width: 100%;
  display: none;
}

.related-link ul li{
  list-style: none;
   display: flex;           /* 追加 */
border-radius: 4px;
overflow: hidden;
margin-bottom: 0;
}

.related-link ul li a{
  display: block;
  display: flex;           /* 変更 */
  flex-direction: column;  /* 追加 */
  background: #FFF;
  font-weight: 500;
  font-size: 18px;
  width: 100%;
  transition: all .2s ease;
  border:1px solid var(--color-green2);
  font-family: "Noto Sans JP", sans-serif;
  
}
.related-link ul li img{
  transition: all .2s ease;
}
.related-link ul li a:hover{
  text-decoration: none;
}
.related-link ul li a:hover img{
  transform: scale(1.07);
}
.related-link ul li a div{
 flex: 1;      
 align-content: center;  
 padding:8px 16px;    
 position: relative;   
 z-index: 1;
 background: #FFF;
}
.related-link ul li a:hover div:after{
 transform: translate(5px , -50%);
}
.related-link ul li a span{
  font-size: 14px;
}

.related-link ul li a div:after{
  content:'';
  position: absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
@media (max-width: 1023px) {
 .related-link{
    width: calc(100% - 32px);
    padding:16px;
    max-height: inherit;
    margin-top: 48px;
  }
  .related-link ul{
    grid-template-columns: 1fr;
  }
  .related-link img{
    display: none;
  }
  .related-link ul li a{
    display: block;
    width: 100%;
    align-content: center;
    min-height: 65px;
  }
  .related-link ul li a div{
    width: 100%;
  }

}
.quick-btn{
  display: flex;
  gap:4px;
  margin:10px auto 0;
  padding:0;
  justify-content: center;

}
.quick-btn li {
  list-style: none;
  width: 418px;;
  display: flex;
  overflow: hidden;


}
.quick-btn li a{
 display: flex;
  width: 100%;
  padding-top: 150px;
  position: relative;
}
.quick-btn li a:before{
 content:'';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  transition: all .2s ease;
}
.quick-btn li:first-child a:before{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(images/q01.jpg), #09B5A2;
  background-size: cover;
}
.quick-btn li:nth-child(2) a:before{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(images/q02.jpg), #09B5A2;
  background-size: cover;
}
.quick-btn li:last-child a:before{
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(images/q03.jpg), #09B5A2;
  background-size: cover;
}
.quick-btn li a:after{
content:'';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background:var(--color-green2);
  z-index: 1;
   opacity: .2;
}
.quick-btn li a:focus{
  text-decoration: none;
}
.quick-btn li a div{
  display: flex;
  background: var(--color-green2);
  color:#FFF;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  flex:1;
  padding:24px;
  align-items:center ;
  position: relative;
  width: 100%;
  z-index: 2;
}

.quick-btn li a div:after{
  content:'';
  position: absolute;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: #FFF;
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.quick-btn li a:hover:before{
  transform: scale(1.1);
}
.quick-btn li a:hover div:after{
  transform: translate(5px,-50%);
}

@media (max-width: 1023px) {
  .quick-btn{
    gap:0;
    flex-wrap:wrap;
  }
  .quick-btn li{
    width: 100%;
    margin-bottom: 0;
  }
  .quick-btn li:first-child a:before{
    background-position: center center;
  }
  .quick-btn li a div{
    padding:32px 16px;
  }
  .quick-btn li a div:after{
    right:16px;
  }
  
}
.topkv{
  display: flex;
  max-height: 560px;;
}
.topkv .kv{
   overflow: hidden;
  width: 52%;
  text-align: right;
  display: flex;
  
  align-items: center;
}
.topkv .kv >div{
   border-radius: 0 12px 12px 0;
  height: 560px;;
  width: 100%;
  overflow: hidden;
  display: flex;
}
.topkv .kv img{

  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center center;;
  
}
.topkv .nav{
  padding:0 0 0 32px;
  width:48%;
  min-width: 600px;;

}
.topkv .nav ul{
  padding:0;
  display: flex;
  flex-wrap:wrap;
  gap:16px;
  margin:0;
  max-width: 600px;;
}
.topkv .nav li{
  list-style: none;
  width: 50%;
  max-width: 272px;
  aspect-ratio: 1 / 1;
  border:1px solid var(--color-green2);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: 0px 83px 33px rgba(191, 191, 191, 0.01), 0px 47px 28px rgba(191, 191, 191, 0.05), 0px 21px 21px rgba(191, 191, 191, 0.09), 0px 5px 11px rgba(191, 191, 191, 0.1);
}
.topkv .nav li a {
  background: #EDFAF9;
  display: block;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  font-size: 24px;
  transition: all .3s ease;
  flex-direction: column;
  padding: 18px;;
}
.topkv .nav li a:focus,
.topkv .nav li a:hover{
  text-decoration: none;
}
.topkv .nav li a span{
  width: 80px;
  height: 80px;
  position: relative;
}
.topkv .nav li a span:before{
content:'';
  position: absolute;
  right:0px;
  top:50%;
  transform: translateY(-50%);
  width:100%;
  height: 100%;
  background-size: contain;

}
.topkv .nav li:nth-child(1) a span:before{
  mask-image: url(images/icon_kv01.svg);
  background: var(--color-green);
}
.topkv .nav li:nth-child(2) a span:before{
  mask-image: url(images/icon_kv02.svg);
  background: var(--color-green);
}
.topkv .nav li:nth-child(3) a span:before{
  mask-image: url(images/icon_kv03.svg);
  background: var(--color-green);
}
.topkv .nav li a:hover span:before{
  background: #FFF;
}

.topkv .nav li a div{
  margin:16px 0;
  font-weight: 700;;
  text-align: left;
  color:#23534E;
  width: 100%;
  position: relative;
}
.topkv .nav li a:hover{
  background: var(--color-green2)
}
.topkv .nav li a:hover div,
.topkv .nav li a:hover p{
  color:#FFF;
}

.topkv .nav li a div:after{
  content:'';
  position: absolute;
  right:0px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.topkv .nav li a:hover div:after{
  background-color: #FFF;
}

.topkv .nav li a p{
  color:rgba(34, 34, 34, 0.6);
  font-size: 18px;
  line-height: 1.3;
  text-align: left;
  text-indent: 0;
}

.topkv .btn{
  position: absolute;
  right: 0;
  bottom: 0;;
  display: block;
  width: 100%;
   height: 110px;
   pointer-events: none;
}
.topkv .btn a{
  background: #FFF;
  position: absolute;
  z-index: 1;
  border-radius: 4px;
  right:20px;
  bottom: 20px;
  border:1px solid var(--color-green2);
  width: fit-content;
  font-size: 18px;;
  line-height: 1.3;
  align-content: center;
  min-height: 70px;;
  display: block;
  padding:0 40px 0 16px;
  text-align: left;
  font-weight: 500;
  pointer-events: auto;
  font-family: "Noto Sans JP", sans-serif;
  text-decoration: none;
  transition: all .3s ease;
  
}
.swiper-pagination-bullet{
  background: #d9d9d9 !important;
}
.swiper-pagination-bullet-active{
  background: var(--color-green2) !important;
}

.kv .swiper-slide .btn{
 z-index: 1;
}

.kv .swiper-slide-active,
.kv .swiper-slide-duplicate-active {
  z-index: 2;
}



.topkv .btn a:after{
  content:'';
  position: absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}

.topkv .btn a:hover{
  background: var(--color-green2);
  color:#FFF;
  text-decoration: none;
}
.topkv .btn a:hover:after{
  background: #FFF;
  right: 8px;
}
.topkv .btn:before{
  content:'';
  position: absolute;
  left:0;
  bottom: 0;;
  width: 100%;
 height: 110px;
  background: rgba(0, 0, 0, 0.4);
}

.fixbtn{
  position: fixed;
  right:0;
  top:50%;
  transform: translateY(-50%);
  z-index: 100000;
  width: 88px;
  height: 374px;;
  background: #7159B7;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  transition: all .3s ease;
  box-shadow: 0px 105px 42px rgba(0, 0, 0, 0.01), 0px 59px 35px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09), 0px 7px 14px rgba(0, 0, 0, 0.1);
}

.fixbtn:hover{
  background: #8D7AC5;
}

@media (max-width: 1260px) {
  .topkv .kv{
    width: calc(100% - 600px);
  }
  .topkv .btn a{
    max-width: 23cqw;
  }
}
@media (max-width: 1023px) {
  body{
    --swiper-theme-color:var(--color-green2);
  }
  .fixbtn{
    display: none;
   
  }
  

  .topkv{
     max-height: inherit;
    flex-direction: column;
    margin-bottom: 32px;
  
  }
  

  .topkv .kv{
    padding-right: 16px;
    margin-top: 50px;

  }
  .admin-bar .topkv .kv{
    margin-top: 0;
  }

  .topkv .swiper-nav-inner{
    transform: none;
    margin-inline: auto;
  }

  .topkv .kv .swiper {
    padding-bottom: 90px;
    height: 90vw;
    display: block;
    
  }
  .topkv .kv{
    width: 100%;
   
  }
  .topkv .kv .swiper-wrapper{
    overflow: hidden;
    border-radius: 0 12px 12px 0;
  }
  .topkv .btn a{
    width:calc(100% - 48px);
    max-width: 100%;
    font-size: 15px;
  }
  .topkv .nav{
    width: 100%;
    padding: 0 16px;
    min-width: inherit;
  }
  .topkv .nav ul{
    max-width: 100%;
  }
  .topkv .nav li{
    width: 100%;
    max-width: 100%;
     aspect-ratio: auto;
  }
  .topkv .nav li a{
    aspect-ratio: auto;
    display: grid;
    gap:0 26px;
    padding:0 16px 16px;
    grid-template-columns: auto 1fr;
  }
  .topkv .nav li a span{
    grid-row: span 2;
    max-width: 100px;
  }
  .topkv .nav li a div{
    font-size: 18px;;
  }
  .topkv .nav li a p{
    font-size: 15px;;
  }
  
}
.swiper-nav{
  /* background: rgba(0, 0, 0, 0.4); */
  width: 100%;
  height: 110px;
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
}

.swiper-nav-inner .swiper-pagination{
  position: relative;
  width: fit-content !important;
  transform: translateY(5px);

}
.swiper-button-prev{
  z-index: 1000;
  position: relative;

}

.swiper-nav-inner{
  position: relative;
  top:50%;
  transform: translateY(-50%);
  width: fit-content;
  align-content: center;
  padding:0 30px;
  margin-left: 10%;
  pointer-events: auto;
}


.fixbtn a {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  display: block;
  width: 100%;
  height: 100%;
}
.fixbtn a:before{
  content:'';
  position: absolute;
  width: 36px;
  height: 36px;
  top:21px;;
  left:0;
  margin:auto;
  right:0;
  background: url(images/icon_cpds01.svg) no-repeat center top;
}
.fixbtn a:after{
  content:'';
  position: absolute;
  width: 25px;
  height: 288px;
  top:98px;;
  left:0;
  right:0;
  margin:auto;
  background: url(images/txt_cpds.svg) no-repeat center top;
  bottom: 0;
}

.fixbtn:before{
  content:'';
  position: absolute;
  top:0;
  width: 100%;
  height: 72px;
  background: #FFF;
  opacity: .3;
  
}
.fixbtn:after{
  content:'';
  position: absolute;
  width: 18px;
  height: 18px;
  left:0;
  right:0;
  margin:auto;
  background: url(images/icon_cpds02.svg) no-repeat center top;
  bottom: 24px;

}


.newslist {
  max-width: 1024px;
  margin:0 auto;
  width: calc(100% - 48px);
}
.newslist ul{
  padding-left: 200px;
    padding-right: 40px;
}
.newslist li{
  list-style: none;
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;;
}
.newslist li + li {

}

.newslist .sticky{
  background: none;;
   border: 3px solid rgba(255, 51, 51, 0.3);
   margin:0;
   padding-top: 5px;
   border-radius: 16px;;
   position: relative;
  
}
.newslist .sticky:empty{
  display: none;;
}
.newslist .sticky:before{
  content:'重要なお知らせ：';
  position: absolute;
  left:35px;
  font-size: 18px;
  top:26px;;
  font-weight: bold;
  color:#FF3333;
}


.newslist  a{
  text-decoration: none;
  padding:21px 0;
  display: flex;
  align-items: center;
  align-content: center;
  font-weight: 500;
  gap:16px;
  position: relative;
}
.newslist .date{
  color:#222;
  font-size: 14px;
  font-weight: 700;
   font-family: "Roboto", sans-serif;
   color: rgba(34, 34, 34, 0.6);
   transform: translateY(3px);
}
.newslist .cat{
  background: #333;
  border-radius: 20px;
  padding:4px 10px;
   font-weight: bold;
   color:#FFF;
   font-size: 14px;;
   text-align: center;
   min-width: 120px;
}
.newslist .con{
  flex:1;
  color:#0F0F0F;
  padding-right: 40px;
  line-height: 1.16;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 18px;;
  letter-spacing: 0.045em;
}
.newslist  a:hover .cat{
  color:#FFF;
}
.newslist  a:hover .con{
  text-decoration: underline;
  
}

.newslist  a:after{
  content:'';
  position: absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.newslist  a:hover:after{
  transform: translate(4px,-50%);
}

.newslist .cpds{
  background: #7159B7;
  color:#FFF;
}
.newslist .training{
  background: #004DC0;
  color:#FFF;
}
.newslist .seminars{
  background: #4CBE5D;
  color:#FFF;
}
.newslist .treatises{
  background: #FA9490;
  color:#FFF;
}
.newslist .info{
  background: #FF8D5C;
  color:#FFF;
}
.newslist .other{
  background: #7D7D7D;
  color:#FFF;
}

.newsbtn{
  text-align: right;
  display: flex;
  position: relative;
  width: fit-content;
  font-weight: bold;
  margin-left: auto;
  padding-right: 40px !important;
}
.newsbtn:hover{
  text-decoration: none;
}
.newsbtn:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    mask-image: url(images/arrow.svg);
    background: var(--color-green);
    width: 16px;
    height: 14px;
    background-size: contain;
    transition: all .2s ease;
}

@media (max-width: 1023px) {
  .newslist{
    width: calc(100% - 32px);
    
  }
  .newslist ul{
    padding-left: 0;
     padding: 0 16px;
  }
  .newslist .sticky{
    padding-top: 25px;
  }
  .newslist .sticky:before{
    top:12px;
    left:16px;
  }
  .newslist a{
    flex-wrap:wrap;
    display: block;

  }
  .newslist .con{
    font-size: 18px;
    line-height: 1.5;
    width: 100%;
    margin-top: 12px;
     -webkit-line-clamp: initial;
  }
  

}


.newscatlist{
  display: flex;
  max-width: 1024px;;
  width: calc(100% - 48px);
  margin-inline: auto;
  padding:0;
  gap:3px;
  margin-bottom: 32px;
}
.newscatlist li{
  list-style: none;
  width: calc(100% / 7);
  margin-bottom: 0;
  
}
.newscatlist li a{
  display: block;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  border-radius: 20px;
  border:1px solid #ccc;
  transition: all .2s ease;
}
.newscatlist li a:hover{
  text-decoration: none;
}
.newscatlist .all{
  border-color: var(--color-green2);
  color:var(--color-green2);
}
.newscatlist .all:hover,
.newscatlist .all.current{
  background: var(--color-green2);
  color:#FFF;
}
.newscatlist .cpds{
  border-color: #7159B7;
  color:#7159B7;
}
.newscatlist .cpds:hover,
.newscatlist .cpds.current{
  background: #7159B7;
  color:#FFF;
}
.newscatlist .training{
  border-color: #004DC0;
  color:#004DC0;
}
.newscatlist .training:hover,
.newscatlist .training.current{
  background: #004DC0;
  color:#FFF;
}
.newscatlist .seminars{
  border-color: #4CBE5D;
  color:#4CBE5D;
}
.newscatlist .seminars:hover,
.newscatlist .seminars.current{
  background: #4CBE5D;
  color:#FFF;
}
.newscatlist .treatises{
  border-color: #FA9490;
  color:#FA9490;
}
.newscatlist .treatises:hover,
.newscatlist .treatises.current{
  background: #FA9490;
  color:#FFF;
}
.newscatlist .info{
  border-color: #FF8D5C;
  color:#FF8D5C;
}
.newscatlist .info:hover,
.newscatlist .info.current{
  background: #FF8D5C;
  color:#FFF;
}
.newscatlist .other{
  border-color: #7D7D7D;
  color:#7D7D7D;
}
.newscatlist .other:hover,
.newscatlist .other.current{
  background: #7D7D7D;
  color:#FFF;
}

@media (max-width: 1023px) {
  .newscatlist{
    flex-wrap:wrap;
    width: calc(100% - 32px);
    gap:6px;
  }
  .newscatlist li{
    width: fit-content;
  }
  .newscatlist li a{
    padding:5px 10px;
  }
}


.gmenubtn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  display: flex;
  flex-direction: column;
  text-align: right;
  height: 30px;
  width: 40px;
  align-items: center;
  justify-content: center;
  top: 0px;
  z-index: 10000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
  display: none;
  text-align: center;
  
  span {
    transition: all 0.2s ease;
    width: 24px;
    height: 3px;
    background:var(--color-green2);
    margin: 3px auto;
    display: block;
  }
}
.gmenubtn.open span{
    
 }
.gmenubtn.open span:nth-of-type(1) {
  transform: translateY(8px) rotate(45deg);
  animation: none;
}

.gmenubtn.open span:nth-of-type(2) {
  opacity: 0;
  width: 0;
  background: #FFF;
}

.gmenubtn.open span:nth-of-type(3) {
  transform: translateY(-10px) rotate(-45deg);
  animation: none;
}

@media (max-width: 1259px) {
  .gmenubtn{
    display: flex;
    
    margin-right: 10px;
  }
}


.micromodal-is-locked{
  overflow: hidden;
}

.modal {
  z-index: 1000001;
  position: relative;


  



}

.modal__content{
  padding-top: 56px;
}

.modal__content #menu-headmenu{
  border:none;
}
.modal__content #menu-headmenu > li:first-child{
  display: none;;

}
.modal__content #menu-headmenu > li:nth-child(2){
  padding-top: 20px;;
}

.modal__content #menu-headmenu > li.is-open .gMenu_name span::after{
  transform:rotate(-180deg);
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  display: flex;
  justify-content: center;

  margin:auto;
  overflow: auto;
}

.modal__container {
  width: 100%;
  box-sizing: border-box;
 
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }


/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  /* animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); */
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  /* animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); */
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}
/* SPモーダル内のサブメニュー開閉（アニメ） */
#modal-content div.sub-menu {
  overflow: hidden;
  height: 0;              /* 閉じ */
  transition: height 200ms ease;
  /* display は触らない（触るとアニメできない） */
}

/* 開いている状態（JSで .is-open を付与） */
#modal-content div.sub-menu.is-open {
  /* height は JS で px を入れる（autoはアニメ不可） */
}

.breadcrumb{
  display: flex;
  align-items: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  border:none;
  width: 100%;
}
.breadSection .breadcrumb span{
  font-size: 14px;
}
#panHome{
  
}

#panHome span[itemprop="name"] {
  width: 30px;
  margin-top: -2px;
  display: block;
  align-content: center;
  font-size: 0;

}
#panHome span[itemprop="name"]  i{
  position: relative;
}
#panHome span[itemprop="name"]  i:before{
  top:50%;
  position: absolute;
  transform: translateY(-50%);
  font-size: 18px;;
  content:'';
  background: url(images/icon_home.svg) no-repeat center center;
  background-size: contain;
  width: 24px;
  margin-top: 3px;;
  height: 24px;;
 
  
}
.breadSection{
  background: #F9F9F9;
  border:none;
  font-size: 14px;
  font-weight: 500;
}
.breadSection .container{
  max-width: 1264px;
  width: calc(100% - 48px);
  margin-inline:auto;
}
.breadSection .breadcrumb>li+li:before{
  content:'●';
  font-size: 10px;
}
.breadSection .breadcrumb{
  padding:8px 0;
}
.breadSection .breadcrumb span{
  padding-left: 3px;
}
.c-lower{
  max-width: 1264px;
  width: calc(100% - 48px);
  margin-inline: auto;
}
.c-lower h1{
  margin-top: 32px;
  margin-bottom: 32px;
}

.cpds-nav{
 position: relative;
 padding:20px 0 55px;
 text-align: center;
}
.cpds-nav:before{
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: url(images/bg_cpds.jpg) no-repeat center center;
  background-size: cover;
  z-index: -2;
}
.cpds-nav:after{
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  background-size: cover;
  z-index: -1;
}
.cpds-nav h2{
  color:#FFF;
  background: none;
  border:none;
  font-size: 40px;;
  letter-spacing: .04em;
  margin: 0;
  line-height: 1.5;
}
.cpds-nav > p{
  text-align: center;
  color:#FFF;
  text-indent: 0;
  font-size: 18px;
}

.cpds-nav ul{
  margin:40px 0 0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap:16px;;
}
.cpds-nav li{
  list-style: none;
  width: 100%;
  max-width: 504px;;
  margin:0;
}
.cpds-nav a{
  color:#FFF;
  display: block;
  background: var(--color-green2);
  text-align: left;
  padding:34px;
  font-size: 32px;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  transition: all .3s ease;

}
.cpds-nav a:hover{
  text-decoration: none;
}
.cpds-nav a p{
  margin:5px 0  0;
  font-size: 18px;
  text-indent: 0;

}
.cpds-nav a:hover{
  background: #008374;
}

.cpds-nav a:after{
  content:'';
  position: absolute;
  right:20px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: #FFF;
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}

.cpds-about div{
  padding-left: 440px;
  position: relative;
  min-height: 350px;;
  

}

.cpds-about .c-h2{
  margin-bottom: 0;
}

.cpds-about .c-txt{
  
}
.cpds-about div:before{
  content:'';
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:350px;
  height: 350px;
  background: url(images/img_cpds.png) no-repeat left top;
  background-size: contain;
}
.cpds-about h2{
  text-align: left;
}

.cpds-about ul{
  display: flex;
  justify-content: center;
  margin:32px 0 0;
  padding:0;
  gap:16px;
}
.cpds-about ul li{
  width: 50%;
  list-style: none;
  max-width: 504px;
}
/* .cpds-about ul li a{
  display: block;
  padding:0 16px;
  align-content: center;
  border-radius: 4px;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 500;
   transition: all .3s ease;
   position: relative;
}
.cpds-about ul li a:hover{
  text-decoration: none;
  background: var(--color-green2);
  opacity: 1;;
  color:#FFF;
}

.cpds-about ul li a:after{
  content:'';
  position: absolute;
  right:20px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green2);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.cpds-about ul li a:hover:after{
  background: #FFF;
} */

.c-btn{
  font-size: 18px;
   display: block;
  padding:0 46px 0 16px;
  align-content: center;
  border-radius: 4px;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 500;
   transition: all .3s ease;
   position: relative;
   min-height: 70px;
    border-radius: 4px;
    text-align: left;
    max-width: 584px;;
  border:1px solid var(--color-green2);
}
.c-btn:hover{
  text-decoration: none;
  background: var(--color-green2);
  opacity: 1;;
  color:#FFF;
}
.c-btn:before{
  display: none;
}
.c-btn:after{
  content:'';
  position: absolute;
  right:20px;
  top:50%;
  transform: translateY(-50%);
  mask-image: url(images/arrow.svg);
  background: var(--color-green2);
  width:16px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
@media (max-width: 1023px) {
  .c-btn{
    font-size: 15px;
    padding-right: 51px;
    padding-left: 12px;
    max-width: 100%;
  }
  .breadSection .container{
    width: 100%;
   
    
    white-space: nowrap;
  }
  .breadSection .container .row{
    overflow-x: scroll;
    padding: 0 16px;;
  }

  .breadSection .breadcrumb{
    padding-top: 8px;
  }
  .breadSection .breadcrumb li:last-child{
    padding-right: 16px;
  }
  .breadSection .breadcrumb span{
    font-size: 12px;
  }
}



.c-btn:hover:after{
  background: #FFF;
}
.c-btn--pdf{
  border-color: #383838;
  color:#383838;
  align-content: center;
  background: #FFF;
}
.c-btn--pdf:hover{
  background: #C31D07;
  border-color: #C31D07;
  color:#FFF;
}
.c-btn--pdf:before{
  display: none;
}
.c-btn--pdf:after{
   mask-image: url(images/icon_pdf.svg);
  background: #383838;
  width:24px;
  height: 24px;
}


.c-btn--link{
  border-color: #7159B7;
  color:#7159B7;
  align-content: center;
  background: #FFF;
}
.c-btn--link:hover{
  background: #7159B7;
  border-color: #7159B7;
  color:#FFF;
}
.c-btn--link:after{
   mask-image: url(images/icon_link.svg);
  background: #7159B7;
  width:24px;
  height: 24px;
}



.c-anchor{
  padding:24px 0;
  margin-bottom: 128px;
  
}




.c-anchor ul{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  flex-wrap:wrap;
  gap:24px;
  margin:0;
  padding:0;
}
.c-anchor ul li {
  list-style: none;
  
}
.c-anchor a{
   font-family: "Noto Sans JP", sans-serif;
   color:#000;
   text-align: center;
   font-weight: 500;
   position: relative;
   display: block;
   padding:12px 0 50px;
   border-bottom: 1px solid var(--color-green2);
}
.c-anchor a:before{
  content:'';
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(images/icon_nav.svg) no-repeat center center;
  margin:auto;
  bottom: 12px;
  left:0;
  right: 0;
}
.c-anchor a:hover{
  text-decoration: none;

}

.c-col{
  max-width: 1024px;
  width: calc(100% - 48px);
  margin-inline: auto;

}


.bg-gray-inner{
  padding:32px 0 64px;
}

.bg-gray-inner .c-faq-acr{
  padding-top: 0;
}

.cpds-join{
  margin-top:114px ;
  background: #f5f5f5;
  position: relative;
  
}
.cpds-join:before {
  content:'';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 56px;
  bottom: -56px;
  background: #f5f5f5;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}


.cpds-join ul{
  margin:0;
  padding:0;
  position: relative;
  top:-50px;
  max-width: 1024px;
  margin-inline: auto;
  display: flex;
   gap:24px;

}
.cpds-join li{
  list-style: none;
  width: calc(100% / 3);
  flex: 1; 
  background: #FFF;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
}
.cpds-join li h3{
  text-align: center;
  color:#FFF;
  margin:0;
  display: block;
  line-height: 1.4;
  min-height: 134px;
  border:none;
  background-color: var(--color-green2);
  align-content: center;
  padding:0 16px;

 
}
.cpds-join li h3:after{
  display: none;
}
.cpds-join li p{
  padding:16px 16px 16px 28px;
  position: relative;
  margin: 0;
}
.cpds-join li p:before{
  content:'';
  position: absolute;
  left:13px;
  top:25px;
  width:10px;
  height: 10px;
  background: var(--color-green2);
  border-radius: 50%;
}

.cpds-join li a{
  margin:0 16px;
}
table td, table th{
  border-color: #ccc;
}

.cpds-id{
  margin-top: 114px;
}
.cpds-id table{
  margin-top: 64px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  border:none;
  font-size: 18px;
  min-width: 1024px;
}

.cpds-id tbody{
  border:none;
}
.cpds-id tr{
  border:none;
}
.cpds-id th{
  color:#FFF;
  width:120px;
  font-family: "Noto Sans JP", sans-serif;
  background: var(--color-green2);
  font-weight: 400;
  padding:30px 0;
  text-align: center;
  
}


.bdnone{
  border:none;
}
.bdtop{
  border-top: 1px solid #ccc;;
}
.bdright{
  border-right: 1px solid #ccc;;
}
.cpds-id .c-btn{
  padding-top:10px;
  padding-left: 13px;;
  padding-bottom:10px;
  padding-right: 40px;
  height: 72px;

}
.cpds-id .c-btn:after{
  right: 14px;
}
.cpds-id .c-btn--pdf.tc{
  text-align: center !important;
}

.cpds-id .c-btn--pdf{
  padding-right: 41px;;
  max-width: inherit;;
  
}
.cpds-id .c-btn--pdf:after{
  right: 10px;
}
.cpds-id .vt{
  vertical-align: top;
}
.cpds-id .vt div{
  margin:20px 0;
}


.cpds-id table p{
  font-weight: 350;
  font-size: 14px;
  text-align: left;
  text-indent: 0;;
}
.cpds-id td{
  width:220px;
  padding:16px 4px;
  text-align: center;
}
.cpds-id td:nth-of-type(1){
  padding-left: 20px;
}
.cpds-id .bg{
  position: relative;
}
.cpds-id .bg:before{
  content:'';
  position: absolute;
  left:20px;
  top:2px;
  background: #FFF5F5;
  width: calc(100% - 20px);
  height: calc(100% - 4px)

}

.cpds-id .bg1{
  position: relative;
}

.cpds-id .bg1:before{
  content:'';
  position: absolute;
  left:20px;
  top:2px;
  background: #EDFAF9;
  width: calc(100% - 20px);
  height: calc(100% - 4px);
  z-index: -1;

}
.cpds-id .bg1-1:before{
 left:2px;
 width: calc(100% - 2px);
}

.cpds-id .guideline{
  max-width: 584px;
  width: 100%;
  margin-inline: auto;
  
}

/* ===== wrapper ===== */
.table-scroll{
  position: relative;
}

/* ===== scroll container ===== */
.table-scroll .table-wrap{
  overflow-x: auto; /* scrollでもOK。autoの方が自然 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* ネイティブスクロールバーを隠す */
  scrollbar-width: none;
}
.table-scroll .table-wrap::-webkit-scrollbar{
  display: none;
}

/* ===== hint png (中央に重ねる) ===== */
.table-scroll .scroll-hint{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

/* 表示ON */
.table-scroll.is-hint-visible .scroll-hint{
  opacity: 1;
}

/* ===== original scrollbar ui ===== */
.table-scroll .hscroll-ui{
  margin-top: 10px;
  pointer-events: auto;
  display: none;
}

.table-scroll .hscroll-track{
  height: 8px;
  border-radius: 999px;
  background: #F4F2EB;
  position: relative;

}

.table-scroll .hscroll-thumb{
  position: absolute;
  left: 0;
  top: -5px;
  width: 20px;
  height: 20px;

  border-radius: 999px;
  background: var(--color-green2);

  pointer-events: auto;
  cursor: grab;
  transform: translateX(0);
}
.table-scroll .hscroll-thumb:before{
  content:'';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom: 0;;
  width: 8px;
  margin:auto;
  height: 8px;
  background: #FFF;
  border-radius: 50%;

}
.table-scroll .hscroll-thumb:active{
  cursor: grabbing;
}




.cpds-unit h3{
  font-size: 24px;
  font-weight: 500;
}
.cpds-unit h3:after{
  display: none;
}

.cpds-unit ul{
  background: rgba(157, 204, 198, 0.2);
  display: flex;
  gap:10px;
  margin-bottom: 40px;;
  border-radius: 8px;
  padding:60px 30px 30px;

}
.cpds-unit li{
  list-style: none;
  width: calc(100% / 3);
  background: #FFF;
  text-align: center;
  margin:0;
  font-weight: 700;
  border-radius: 4px;
  border:1px solid var(--color-green2);
  padding:24px 0;
  color:#17413C;
  position: relative;
}
.cpds-unit li:before{
  content:'';
  position: absolute;
  left:0;
  top:-20px;;
  width: 40px;
  height: 40px;
  right:0;
  border-radius: 50%;
  background: var(--color-green2);
  margin:auto;
  font-size: 18px;;
  align-content: center;
  font-weight: 500;
  color:#FFF;
}
.cpds-unit li:nth-child(1):before{
  content:'A';
}
.cpds-unit li:nth-child(2):before{
  content:'B';
}
.cpds-unit li:nth-child(3):before{
  content:'C';
 
}

.c-faq-acr {
  background: #FFF;
 padding-top: 24px;
 margin-bottom: 24px;;
}
.c-faq-acr .q{
  padding:24px;
  line-height: 1.8;
  letter-spacing: .05em;
  font-weight: 500;
  position: relative;
  display: flex;
  gap:16px;
  font-size: 18px;;
  padding-left: 60px;
  padding-right: 70px;
  align-items: center;
  cursor: pointer;

}
.c-faq-acr .q:before{
  content:'';
  position: absolute;
  left:24px;
  top:50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  margin-top: 2px;;
  background: url(images/icon_q.svg) no-repeat left center;
  background-size: contain;
}
.c-faq-acr .q:after{
  content:'';
  position: absolute;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin-top: 2px;;
  background: url(images/icon_plus.svg) no-repeat left center;
  background-size: contain;
}
.c-faq-acr .q.open:after{
 background: url(images/icon_minus.svg) no-repeat left center;
 background-size: contain;
}
.c-faq-acr .q span{
  background: var(--color-green2);
  color:#FFF;
  display: block;
  font-weight: bold;
  padding:10px 0;
  width: 150px;
  text-align: center;
  align-content: center;
  border-radius: 40px;;
  font-size: 14px;

  line-height: 1;
}
.c-faq-acr .q  p{
  flex:1;
  text-indent:0;
  margin-bottom: 0;
}
.c-faq-acr .a{
  
   overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
}
.c-faq-acr .a .content{
  padding: 0 94px 32px 190px;
  position: relative;
  font-size: 18px;
  line-height: 1.88;
}
.c-faq-acr .a .content p{
  text-indent: 0;
}
.c-faq-acr .a .content:before{
  content:'Answer';
  position: absolute;
  left:94px;
  font-weight: 600;
  top:3px;
  font-family: "Roboto", sans-serif;
  color:#7159B7;
}


.c-faq-chk{
  padding:48px;
  background: #FFF;
  border:1px solid #FF3333;
  border-radius: 4px;
  font-size: 18px;;
  
}
.c-faq-chk .col2{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
  margin-top: 24px;;

}
.c-faq-chk .col2 > div{
  background: #FBF6F6;;
  padding:24px;
}
.c-faq-chk .col2 h4{
  background: none;
  font-size: 18px;
  font-weight: 700;
  border-radius: 0;
  position: relative;
   padding:0 0 0 30px;
  border-bottom: 1px solid #FF3333;;
}
.c-faq-chk .col2 h4:before{
  content:'';
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 24px;
  
  height: 24px;
  background: url(images/icon_alert.svg) no-repeat left center;
  background-size: contain;
}
.c-faq-chk .col{
  display: flex;
  justify-content: space-between;
  gap:10px;
}


.c-faq-chk .box{
  background: #FFF;
  padding:45px 16px 16px;
  line-height: 1.4;
  font-weight: 500;
  min-height: 160px;;
  position: relative;
  margin-top: 20px;;
}
.c-faq-chk .box:before{
  content:'';
  position: absolute;
  left:-0;
  right: 0;
  top:-20px;
  margin:auto;
  width: 40px;
  height: 40px;
  background: url(images/icon_chk.svg) no-repeat left center;
  background-size: contain;
}
.c-faq-chk .col:after{
  display: none;
}

.c-faq-chk .required{
  background: #f5f5f5;
  padding:24px;
  margin-top: 24px;
}
.c-faq-chk .required div{
  font-weight: 700;
}



@media (max-width: 1023px) {
  .c-lower{
    width: 100%;
    padding:0 16px;
    overflow-x: hidden;
   
  }
  .bg-gray-inner .c-faq-acr{
    padding-left:16px;
    padding-right: 16px;
  }
  .c-col{
    width: 100%;
  }
  .table-scroll .hscroll-ui{
    display: block;
  }
  .cpds-nav h2{
    font-size: 24px;
  }
  .cpds-nav{
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
  }
  .cpds-nav a{
    font-size: 20px;
  }
  .cpds-nav a p{
    font-size: 15px;
  }
  .cpds-nav > p{
    text-align: left;
  }
  .cpds-nav ul{
    margin-top: 24px;
  }
  .cpds-about div{
    padding-left: 0;
    padding-top: 0;
    min-height: auto;
  }
  .cpds-about div:before{
    display: none;

  }
  .cpds-about h2{
    text-align: center;
    margin-top: 48px;;
  }
  .cpds-about p{
    padding-top: 300px;;
  }
  .cpds-about p:before{
    content:'';
    position: absolute;
    left:0;
    right:0;
    top:80px;
    margin:auto;
    width: 240px;
    height: 240px;
    background: url(images/img_cpds.png) no-repeat center top;
    background-size: contain;
  }

  .c-anchor {
    width: calc(100% + 48px);
    margin-left: -24px;
    padding:0;
   
    border-image: none !important; 
    margin-bottom: 64px;
  }

  .c-anchor ul{
    border-top: 1px solid #ccc;
    grid-template-columns:repeat(2,1fr);
    gap:0;
  }
  .c-anchor li{
    
  }
  .c-anchor a{
    text-align: left;
    font-size: 15px;
    padding:16px 26px;
    align-content: center;
    min-height: 80px;
    padding-right: 40px;;
    border-right:1px solid #ccc;
    border-bottom: 1px solid #ccc;
    
  }
  .c-anchor a:before{
    margin:0;
    left:inherit;
    right: 10px;;
    top:50%;
    transform: translateY(-50%);
  }
  .c-anchor li:nth-child(2n) a{
    border-right: none;;
  }
  .c-anchor li:nth-child(2n) a:before{
    right: 20px;;
  }

  .cpds-join ul{
    flex-wrap: wrap;
   

  }
  .cpds-join ul li{
    width: 100%;
    border-radius: 0;
    flex:none;
  }
  .cpds-join:before{
     left:-24px;
    width: calc(100% + 48px);
    height: 23px;
    bottom: -23px;
  }
  .cpds-join:after{
    content:'';
    position: absolute;
    left:-24px;
    width: calc(100% + 48px);
    top:0;
    height: 100%;
    z-index: -1;
    background: #f5f5f5;;
  }
  .cpds-join li h3{
    
    margin-left: 0 !important;
  }
  .cpds-join li a{
    margin-bottom: 16px;
  }

  .cpds-id{
    margin-top: 64px;
  }


  .cpds-id table{
    font-size: 15px;
    margin-top: 32px;;
  }
  .cpds-id .vt div{
    font-size: 16px;
  }
  

  .cpds-unit h3{
    font-size: 18px;
  }
  .cpds-unit ul{
    margin-top: 0px;
    flex-wrap:wrap;
    padding: 40px 24px 24px;;
  }
  .cpds-unit ul li{
    width: 100%;

  }
  .cpds-unit ul li + li{
    margin-top: 30px;;
  }
  .c-faq-chk{
    padding:24px 12px;
    font-size: 15px;
  }
  .c-faq-chk .col2{
    grid-template-columns: 1fr;
  }
  .c-faq-chk .col2 > div{
    padding:12px 12px 24px;
  }
  .c-faq-chk .col{
    flex-wrap: wrap;
  }
  .c-faq-chk .box{
    width: 100%;
    padding:24px 12px 12px; 
    min-height: auto;
  }
  .c-faq-chk .col2 h4{
    text-align: center;
    width: fit-content;
    margin-inline: auto;
  }
  .c-faq-chk .required{
    padding:12px;
  }

  .c-faq-acr .q{
    flex-wrap:wrap;
    padding-left: 0;
    padding-right: 40px;
  }
  .c-faq-acr .q:after{
    right: 0;
  }
  .c-faq-acr .q span{
    margin-left:35px;
    position: relative;
  }
  .c-faq-acr .q:before{
    top:28px;;
    transform: none;
    display: none;
  }
  .c-faq-acr .q span:before{
    content:'';
    position: absolute;
    left:-30px;
    top:50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin-top: 2px;;
    background: url(images/icon_q.svg) no-repeat left center;
    background-size: contain;
  }

  .c-faq-acr .q p{
    flex:none;
    width: 100%;
    padding-left: 0;;
  }
  .c-faq-acr .a .content:before{
    left:0;
    top:0;
  }
  .c-faq-acr .a .content{
    padding:30px 0;
  }
}

.faq-catlist{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0;
  margin-top: 64px;
}
.faq-catlist li {
  list-style: none;
  box-shadow: 0px 83px 33px rgba(191, 191, 191, 0.01), 0px 47px 28px rgba(191, 191, 191, 0.05), 0px 21px 21px rgba(191, 191, 191, 0.09), 0px 5px 11px rgba(191, 191, 191, 0.1);
  margin-bottom: 0;
   border-radius: 8px;
   overflow: hidden;
}
/* カード全体を縦flex */
.faq-catlist li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: #EDFAF9;
  text-decoration: none;
  border-radius: 8px;
  transition: all .3s ease;
  border: 1px solid var(--color-green2);
}
/* タイトル高さを揃える */
.faq-catlist li a > div {

  font-weight: bold;
  min-height: 3em; /* 2行想定 */
  align-content: center;
  text-align: center;
  line-height: 1.1;
}
.faq-catlist li a > p {
 min-height: 6.5em;
 line-height: 1.3;
 text-indent: 0;
 color:rgba(34, 34, 34, 0.6);
}
.faq-catlist li.current a,
.faq-catlist li a:hover{
  background: var(--color-green2);
}
.faq-catlist li.current a div,
.faq-catlist li.current a p,
.faq-catlist li a:hover div,
.faq-catlist li a:hover p{
  color:#FFF;
}
.faq-catlist li span{
  background: var(--color-green2);
  color:#FFF;
}
.faq-catlist li span:after{
  background-color: #FFF;
}
.faq-catlist li.current a span,
.faq-catlist li a:hover span{
  background: #FFF;
  color:var(--color-green2);
}
.faq-catlist li.current span:after,
.faq-catlist li a:hover span:after{
  background-color: var(--color-green2);
}









.faq-search{
  margin-top: 20px;
  padding:40px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(images/img_faq.jpg);
}


.faq-search__form{
  width: fit-content;
  max-width: 564px;
  margin-inline: auto;
  width: 100%;
  position: relative;
  margin-bottom: 20px;;
}
.faq-search__form input{
  width: 100%;
  padding:30px;
  border: none;
  border-radius: 30px;
  font-size: 24px;
  color:rgba(34, 34, 34, 0.6);
  outline: none;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  background: #FFF;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:1px solid #ccc;
}
.faq-search__form button{
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  border:none;
  right:15px;
  top:50%;
  transform: translateY(-50%);
  width:32px;
  height: 32px;
  color:#FFF;
  background: url(images/search_line.svg) no-repeat center center;
  background-size: contain;
      text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
}

.faq-taglist{
  padding: 0 min(174px,10cqw);
  display: flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top: 20px;
}
.faq-taglist--acr{
  padding:0;

}
.faq-taglist button{
  background: none;
  appearance: none;
  border:none;
}
.faq-search p{
  color:#FFF;
}
.faq-taglist li{
  list-style: none;
  background: #FFF;
  padding:3px 16px 3px 33px;
  border-radius: 24px;;
  color: #23534E;
  font-weight: 500;
  border-radius: 1px solid #23534E;
  position: relative;
  cursor: pointer;
  transition: all .3s ease;
  border:1px solid #23534E;
}


.faq-taglist li:before{
  content:'';
  position: absolute;
  left:14px;;
  top:50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  mask-image: url(images/icon_tag.svg);
  background-color: #23534E;
  margin-top: 1px;
  transition: all .3s ease;
}
.faq-taglist li:hover{
  background: #23534E;
  color:#FFF;
}
.faq-taglist li:hover:before{
  background: #FFF;
}

.p-faq .c-h2{
  margin-bottom: 0;
}

.p-faq .c-faq-acr + .c-faq-acr{
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.morebtn{
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  color:var(--color-green2);
  width: 100%;
  max-width: 464px;
  border:1px solid var(--color-green2);
  margin:48px auto;;
  padding:22px 0;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  transition: all .3s ease;
}
.morebtn:after{
  content:'';
  position: absolute;
  right:20px;
  top:50%;
  transform: translateY(-50%);
  rotate:90deg;
  mask-image: url(images/arrow.svg);
  background: var(--color-green);
  width:16px;
  margin-top: -5px;
  height: 14px;
  background-size: contain;
  transition: all .2s ease;
}
.morebtn:hover{
  color:#FFF;
  background: var(--color-green2);
}
.morebtn:hover:after{
  background: #FFF;
}
.supportlist{
  display: grid;
  gap:24px;
  padding: 0;
  grid-template-columns: repeat(3,1fr);
}
.supportlist li{
  list-style: none;
}

.supportlist li .img{
  aspect-ratio: 1 / .56;
  overflow: hidden;
  width: 100%;
  position: relative
}
.supportlist li img{
  aspect-ratio: 1 / .56;
  object-fit: cover;
  width: 100%;
  transition: all .3s ease;
  max-width: inherit;
}


.supportlist li a{
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  align-items: center;
  color:#0F0F0F;
  text-decoration: none;
  border-radius: 8px;
  border:1px solid #f5f5f5;
}
.supportlist li a div:not(:has(img)) {
  flex-grow:1;
  padding:24px;
  font-weight: 700;
}
.supportlist li p {
 padding:0 24px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: 24px;
  text-align: left;
  text-indent: 0;;
  min-height: 81px;;
  width: 100%;

}
.supportlist li .img:after{
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
  background:  rgba(0, 0, 0, 0.2);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) #09B5A2;
  opacity: .2;
}
.supportlist li .img:before{
  content: '';
  position: absolute;
  left:0;
  top:0;
  right: 0;
  bottom: 0;
  width: 56px;
  height:56px;
  background: url(images/icon_play.svg) no-repeat center center;
  background-size: contain;
  margin:auto;
  z-index: 10;
}


.supportlist li a:hover img{
  transform: scale(1.1);
}



@media (max-width: 1023px) {

  .faq-catlist{
    grid-template-columns:1fr;
    gap:16px;
    margin-top: 32px;
  }
  .faq-catlist li a > div {
    min-height: auto;
    font-size: 24px;

  }
  .faq-catlist li a {
    padding:24px 16px 16px; 
  }
  .faq-catlist li a > p{
    min-height: auto;
    margin:16px 0 26px;
  }

  .faq-search{
    padding: 32px 20px 20px;
    margin-top: 32px;
  }
  
  .p-faq .c-h2{
    margin-bottom: 10px;
  }
  .faq-search ul{
    padding:0 0cqw;
    gap:12px;
    justify-content: center;

  }
  .faq-search li{
    font-size: 12px;
    margin-bottom: 0;
  }
  .faq-search__form{
    margin-bottom: 15px;
  }
  .faq-search__form input{
    font-size: 18px;
  }
  .supportlist{
    grid-template-columns: 1fr;
  }
  .supportlist li a div:not(:has(img)) {
    padding:16px;
  }
  .supportlist li p {
    padding:0 16px ;
    margin-bottom: 16px;
  }
}

.faq-loading{
  text-align:center;
  padding:40px 0;
}

.spinner{
  width:30px;
  height:30px;
  border:3px solid #ddd;
  border-top:3px solid #333;
  border-radius:50%;
  display:inline-block;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}



/* 
#shou-row:has(#shou-wrap[style*="display:none;"])  ,
#shou-row:has(#shou-wrap[style*="display:none;"])  {
  border:none;
}


#shou-row:has(#shou-wrap[style*="display:none;"]) > td,
#shou-row:has(#shou-wrap[style*="display:none;"]) > td {
  height: 0;
  padding:0;
} */

#shou-wrap{
  
}

.shou-hidden {
	display:none;
}

#confirm-your-message {
  white-space: pre-wrap;
}

.contact-btns {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

#back-to-input {
  padding: 12px 24px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

#form-step-complete {
  text-align: center;
  padding: 40px 20px;
}

.p-contact .c-btn {
  width: fit-content;
  margin-inline: auto;
  background: var(--color-green2);
  color:#FFF;

}
.p-contact .c-btn:after{
  background-color: #FFF;
}

.p-contact .c-btn:disabled{
  color:#FFF;
  pointer-events: none;
  opacity: .5;
  background: var(--color-green2);
}
.p-contact .c-btn:hover{
  background: #FFF;
  color:var(--color-green2);
}
.p-contact .c-btn:hover:after{
  background-color: var(--color-green2);
}

#shou.wpcf7-not-valid{
  border: 2px #ff7f50 solid;
  background: #ffeeee;
}

.contact_form_box,.contact-confirm-inner{
  width: 80%;
  margin: 30px auto;
  padding: 20px;
  border: 1px solid #eeeeee;
}
.contact_form_tbl{
  width: 100%;
}
.contact-confirm-btn-area{
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin-inline: auto;
}
#backToInputBtn{
  background: #FFF;
  color:#BABABA;
  border-color: #BABABA;
  padding: 0 16px 0 46px;
  width: 226px;
  text-align: center;
}
#backToInputBtn:after{
  right: inherit;
  left:20px;
  transform: scale(-1, 1);
  margin-top: -6px;
  background-color: #BABABA;
}
#backToInputBtn:hover{
  background: #BABABA;
  color:#FFF;
}
#backToInputBtn:hover:after{
  background-color: #FFF;
}

.step-complete{
  border:1px solid var(--color-green2);
  margin:100px auto;
  text-align: center;
  padding:20px 0;
}
.step-complete p{
  margin-bottom: 0;
}


@media (max-width: 1023px) {
.contact_form_box,.contact-confirm-inner{
  width: 100%;
  padding:16px;
}
.contact-confirm-btn-area{
  flex-direction: column;
}
#backToInputBtn{
  margin-bottom: 20px;;
  width: 100%;
}
.p-contact .c-btn{
  width: 100%;
}
.p-contact textarea,
.p-contact input[type=text],
.p-contact input[type=email],
.p-contact input[type=tel]{
  width: 100%;
  max-width: 100% !important;
}


}

.mapto{
  line-height: 1.3;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}






.pdb0{
  padding-bottom: 0 !important;
}

.mb10{
  margin-bottom: 10px;
}
.mb32{
  margin-bottom: 32px;
}
.mt24{
  margin-top: 24px;;
}
.mb64{
  margin-bottom: 64px;
}

.mt48{
  margin-top: 48px;;
}

@media (max-width: 1023px) {
.mb64{
  margin-bottom: 32px;
}
}


/* モーダル */
.modal-overlay {
  align-items: center;
  background: rgba(0,0,0,.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.modal-container {
 
  max-width: 1000px;

  width: 100%;
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  border:none;
  padding:0;
}

.modal-close {
  background: transparent;
  border: 0;
  margin-left: auto;
}

.modal-header .modal-close::before {
  content: "\2715";
  color:#FFF;
}

.modal-content {
  line-height: 1.5;
  margin-bottom: 2rem;
  margin-top: 2rem;
  box-shadow: none;
  border:none;
  display: flex;
  justify-content: center;
  aspect-ratio: 16 / 9; 
}

.modal-content iframe {
  width: 100%;
  height: 100% !important;
}



.modal-open {
  display: block;
  margin: 100px auto;
}

.box01 {
  background-color: #ccc;
  height: 200px;
  margin: 0 auto;
  width: 80%;
}

.box02 {
  background-color: #ccc;
  height: 200px;
  margin: 0 auto;
  width: 80%;
}

.faq-results:has(#faq-results-title:empty){
  margin:0;
  display: none;
}

.faq-results-num{
  font-size: 24px;
  font-weight: bold;
  color:rgba(34, 34, 34, 0.6);
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
 
}
.faq-results-num:empty{
  border:none;
}

.faq-results-num span{
  color:var(--color-green2);
  font-size: 40px;
  padding:0 10px 0 20px;;
}
@media (max-width: 1023px) {
  .faq-results-num{
    font-size: 18px;
  }
  .faq-results-num span{
    font-size: 24px;
  }
}



.bg-gray{
  border-image: linear-gradient(#f9f9f9 0 0) fill 0 / /0 100vi;
}