@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

@media screen and (max-width: 1199.8px) {
    :root {
        --media-header-height:60px
    }
}

@media screen and (max-width: 1039.8px) {
    :root {
        --header-height:60px;
        --cp-header-height: 60px
    }
}

@media screen and (max-width: 768px) {
    :root {
        --padding-side:40px
    }
}

@media screen and (max-width: 766.8px) {
    :root {
        --padding-side:20px
    }
}

a {
    color: #121212;
    font-size: inherit;
    text-decoration: underline;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer
}

a img {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

a:active,a:focus,a:hover,a:visited {
    text-decoration: none
}

a:active img,a:focus img,a:hover img,a:visited img {
    opacity: .8
}

.h1,body.t-default .h1,body.t-default h1,h1 {
    font-size: clamp(1.5rem,.997rem + 2.15vw,2.375rem)
}

.h2,body.t-default .h2,body.t-default h2,h2 {
    font-size: clamp(1.375rem,1.06rem + 1.34vw,1.75rem);
    line-height: 1.5
}

.h3,body.t-default .h3,body.t-default h3,h3 {
    font-size: clamp(1.25rem,.998rem + 1.07vw,1.75rem);
    line-height: 1.5
}

.h4,body.t-default .h4,body.t-default h4,h4 {
    font-size: clamp(1.125rem,.936rem + .81vw,1.5rem)
}

.h5,body.t-default .h5,body.t-default h5,h5 {
    font-size: clamp(1rem,.937rem + .27vw,1.125rem)
}

.h6,body.t-default .h6,body.t-default h6,h6 {
    font-size: 1rem
}

button,input[type=button],input[type=checkbox],input[type=radio],input[type=submit],label,select {
    cursor: pointer
}

button,input[type=email],input[type=number],input[type=password],input[type=search],input[type=submit],input[type=tel],input[type=text],textarea {
    font-family: "Noto Sans JP",sans-serif
}



/*------------------------------
タイトル
-------------------------------*/

#hp .subtitle{
    color:#024ad8;
    text-align:center;
    font-size:1.5rem;
    font-weight:600;
}
#hp h2 {
  font-size: 2.7rem;
  text-align: center;
  position: relative;
  font-feature-settings: "palt";
  line-height: 1.4;
  margin-bottom: 5rem;
  color:#121212;
}

#hp h2:after {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  background: #024ad8;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  margin-left: -30px;
  border-radius:10px;
}

@media screen and (max-width: 768px) {
    #hp h2 {
        font-size:2rem;
    }
}

#hp h3{
    text-align:center;
    color:#121212;
    font-weight:500;
}



/* ------------------------------------
   ナビ
--------------------------------------- */
/* ナビ */
#hp .nav { background:#024ad8; }

#hp .nav ul {
  max-width:1200px;
  display:flex;
  align-items:center;
  list-style:none;
  margin:0 auto;
  padding:0;
}

#hp .nav li {
  position:relative;
  width:100%;
  text-align:center;
  font-weight:500;
  color:#fff;
  transition: all .3s ease-in-out;
}

#hp .nav a,
#hp .nav .label {
  display:block;
  padding:1rem 0;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}

#hp .nav li.current {
  background:#003295;
  font-weight:700;
}
#hp .nav li:hover{
  background:#003295;
}

/* ドロップダウン */
#hp .dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:#024ad8;
  overflow:hidden;
  height:0;
  opacity:0;
  transform:translateY(-10px);
  transition:all .25s ease;
  z-index:100;
}

#hp .dropdown-menu ul {
  display:block;
  list-style:none;
  margin:0;
  padding:0;
}

#hp .dropdown-menu li a {
  padding:1rem 0;
  display:block;
  white-space:nowrap;
}

#hp .dropdown-menu li a:hover {
  background:#003295;
}

/* PC：ホバー時に開く */
@media screen and (min-width:769px){
  #hp .dropdown-parent:hover > .dropdown-menu{
    height:auto;
    opacity:1;
    transform:translateY(0);
  }
}

/* スマホ */
@media screen and (max-width:768px){
  #hp .nav ul {
    flex-wrap:wrap;
  }
  #hp .nav li {
    width:50%;
  }
  #hp .dropdown-menu li {
    width:100%;
  }
}




/*------------------------------
hero
-------------------------------*/

#hp .hero {
    background: url(/dcms_media/image/hp_hero.jpg) no-repeat center;
    background-size: cover;
    height:370px;
    align-content:center;
}
#hp .hero-min {
    height:235px;
}
#hp .hero img{
    width:120px;
    margin-bottom:1rem;
}

@media screen and (max-width: 768px) {
    #hp .hero {
        padding:35px 0
    }
}

#hp .hero .title {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 768px) {
    #hp .hero .title {
        font-size:2rem
    }
}

#hp .hero .sub {
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 768px) {
    #hp .hero .sub {
        font-size:1.25rem;
    }
}


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

#hp p {
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt"
    letter-spacing:0.08em;
    line-height:1.8;
}

#hp img{
    width:100%;
} 

.site-body{
    margin:0;
    padding:0;
}

/*パンくずの下の余白無くす*/
.breadcrumb {
    margin-bottom: 0
}

#hp .l-content {
    max-width: 1200px;
    margin:0 auto;
    padding:0;
}

@media screen and (max-width: 768px) {
    #hp .l-content {
        max-width:85%;
    }
}

/* スペース */
#hp .pd-40{
    padding:4rem 0;
}
#hp .pd-20{
    padding:2rem 0;
}

/* 背景 */
#hp .bg-blue{
    background:#edf3fa;
    padding:4rem 0;
}

#hp .center{
    text-align:center;
}

/* グリッド横並び */
#hp .grid{
    display:grid;
    align-items:center;
    gap:2rem;
}

#hp .column2{
    grid-template-columns:repeat(2, auto);
 }
#hp .column3{
    grid-template-columns:repeat(3, auto);
 }
 
 #hp .span3{
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 1rem;
}

/* フレックス横並び */
#hp .flex{
    display:flex;
}

@media screen and (max-width: 768px) {
    #hp .column2,
    #hp .column3{
        grid-template-columns:repeat(1, auto);
    }
    
    #hp .flex{
        display:block;
    }
}

/* スマホだけ */
.SPonly{
    display:none;
}
.PConly{
    display:block;
}

@media screen and (max-width: 768px) {
    .SPonly{
        display:block;
    }
    .PConly{
         display:none;
    }
}

/* ボタン */
#hp .btn a{
    display:inline-block;
    text-decoration:none;
    padding:1rem 2rem;
    border-radius:100px;
    background:#003295;
    border:1px solid #003295;
    color:#fff;
    font-weight:500;
    margin:0 auto;
}
#hp .btn a:hover {
    color: #003295;
    background-color: #fff
}

/* 動画埋め込み */
#hp .youtube-wrap {
  width: 80%;
  margin:0 auto;
  aspect-ratio: 16 / 9; /* YouTube推奨比率 */
}

#hp .youtube-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 768px) {
    #hp .youtube-wrap {
        width: 100%;
    }
}


/*------------------------------
TOPページ
-------------------------------*/

#hp .top .span3{
    background:#fff;
    border-radius:6px;
    padding:3rem;
}
#hp .top .span3 img{
    width:70%;
    margin:auto;
}

#hp .top .card{
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 1rem;
    text-align:center;
    border-radius:4px;
    overflow:hidden;
    border:2px solid #024ad8;
}
#hp .top .card h3{
    font-size:1.3rem;
    line-height:1.3;
    background:#024ad8;
    color:#fff;
    padding:1rem;
    font-weight:500;
}
#hp .top .card img{
    width:80%;
    display:block;
    margin:auto;
    padding:1rem 0;
}
#hp .top  .card p{
    width:80%;
    margin:0 auto;
    text-align:left;
}
#hp .top .card .btn{
    margin:1rem 0 2rem 0;
}
#hp .top .card .btn a{
    width:70%;
}


/*------------------------------
コンテンツ ページ
-------------------------------*/

#hp .documents .flex{
    flex-wrap:wrap;
    align-items:center;
    margin-top:3rem;
    background:#fff;
}
#hp .documents .flex .img,
#hp .documents .flex .text{
    width:50%;
    margin:0;
}
#hp .documents .flex .text{
    padding:0 3rem;
}
#hp .documents .flex .text h3{
    text-align:left;
    margin-bottom:1rem;
    line-height:1.3;
}
#hp .documents .flex .text h3 span{
    display:block;
    font-size:120%;
    font-weight:600;
}
#hp .documents .btn{
    margin-top:2rem;
}

#hp .documents .series{
    background:#121212;
    color:#fff;
    display:inline-block;
    padding:0 10px;
    border-radius:2px;
    margin-bottom:1rem;
    font-weight:500;
}

@media screen and (max-width: 768px) {
    #hp .documents .flex .img,
    #hp .documents .flex .text{
        width:100%;
    }
    #hp .documents .flex .text{
        padding:3rem;
        text-align:center;
    }
    #hp .documents .flex .text h3{
        text-align:center;
    }
}


/*------------------------------
プロダクト ページ
-------------------------------*/

#hp.introduction__wrap {
    background-color:#edf3fa;
    padding:5% 0;
    text-align:center;
    color:#121212;
}




/*------------------------------
CTA
-------------------------------*/

#hp .cta {
    background: url(/dcms_media/image/hp_cta_bk.jpg) no-repeat center;
    background-size: cover;
    background-position:bottom;
    background-color:rgba(0,0,0,0.6);
    background-blend-mode:darken;
    padding: 4rem 0;
    text-align: center;
    margin-top:4rem;
}

#hp .cta h3,
#hp .cta p{
    color:#fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
#hp .cta h3{
    margin-bottom:2rem;
}