@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/*	reset
--------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, small {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  max-width: 100% !important;
  height: auto;
  border: 0;
  vertical-align: bottom;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ol, ul {
  list-style: none;
}
input, select {
  vertical-align: middle;
}


/*	common
--------------------------------- */

:root {
    --cl-m:#90A74A;
    --cl-m2:#61CA4E;     
    --color-black:#333;
}
html {
  font-size: 62.5%;
  height: 100%;
}
body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  height: auto;
  font-family: "Roboto","Zen Kaku Gothic New", sans-serif;
  color: #454545;
  font-size: 1.6rem;
  line-height: 1.7;
  background: #fff;
  letter-spacing: .04em;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, .page_category, .page_title, .page_stitle,strong {
  font-weight:700;
    line-height: 1.4;
}

a img {
  border: none;
}
a {
  color: var(--color-black);
  text-decoration: none;
  outline: none;
}
a:visited {
  color: var(--color-black);
  text-decoration: none;
}
@media (hover: hover) and (pointer:fine) {
  a:hover, a:hover img {
    opacity: 0.7;
    transition: opacity .20s ease-in-out;
  }
}


body :focus:not(:fous-visible) {
  outline: none
}
body :focus-visible {
  outline: 2px solid #4d65cb
}


.hd-logo img{
    width:120px;
    height: auto;
    
}
.wrapper{
        background:url("../images/cmn_scbg.png") no-repeat left top;
    background-size:100% auto;
}
.home.wrapper{
        background:url("../images/top_mainbg.png") no-repeat left top;
    background-size:100% auto;
}
.contens-wrapper{
    width:min(92%, 980px);
    margin:30px auto;
 box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .06);
background:#fff;
border-radius: 20px;
}
.contents-inner{
        padding: clamp(1.25rem, -7.321rem + 21.43vw, 8.75rem);
   /*padding: clamp(2.5rem, -1.667rem + 13.89vw, 8.75rem);*/
}

.inner{
      width:min(92%, 900px);
    margin:auto;
}
.home .inner{
         width:min(92%, 1000px); 
}
.sctmg{
    margin-top:clamp(1.875rem, -0.208rem + 6.94vw, 5rem);
}



#footer{
    margin-top:auto;
}
.footer-container{
    padding:15px 0;
    text-align: center;
    background:#5D5D5D;
}
.footer-container{
    font-size:1.2rem;
    color:#fff;
}
.pagetitle-section{
    margin-bottom:40px;
    text-align: center;
    font-size:clamp(2rem, 1.067rem + 3.11vw, 3.4rem);
}
.page-title{
    letter-spacing: .05em;
    color:var(--cl-m2);
}

.c-title{
    font-size: clamp(2rem, 1.6rem + 1.33vw, 2.4rem);
}
.c-subtitle{
 font-size:clamp(1.8rem, 1.533rem + 0.89vw, 2.2rem);
}

.c-mdtitle{
    font-weight: 700;
 font-size:clamp(1.6rem, 1.333rem + 0.89vw, 2rem);
}



.cont-snavi{
    margin-top:4rem;
}
.cont-snavi ul{
    display: flex;
    gap:20px 0;
    flex-wrap: wrap;
    border-left:1px solid #ddd;
}
.cont-snavi ul li {
    border-right:1px solid #ddd;
}
.cont-snavi ul li a{
    position: relative;
        padding: 1em 2em;
font-weight: 700;
}

.cont-snavi  li a:after {
    content: "";
    display: inline-block;
    margin-left: 2rem;
        width:20px;
    height: 20px;
    background: url(../images/anc_arrow.png) no-repeat center center #A8ED5D;
background-size:10px auto;
    border-radius: 100vw;
    vertical-align: middle;
}

.txt-bld{
    font-weight:700;
    }

.c-cont{
    display: flex;
}
.c-btn-sect{
    margin-top:1.5em;
}
.c-btn-f{
    display: inline-block;
    padding:.8em 1.5em;
    color:#fff;
    background:var(--cl-m2);
    border-radius: 100vw
}
.c-btn-f:visited{
    color:#fff;
}

@media screen and (max-width: 768px) {
    .br-pc{
    display:none; 
}
}


/*    top
--------------------------------- */

.top-main{
    padding:clamp(3.125rem, 1.875rem + 4.17vw, 5rem) 0;
    }
.top-main-txt{
    width:min(100%, 500px);
   }

.top-main-txt .c-subtitle{
            margin-top:.5em;
     color:var(--cl-m2);
     font-weight: 700;   

    }
.top-main-txt .top-mng{
        margin:1em 0 1em;
     font-weight: 700;   
    font-size:clamp(2rem, 1.733rem + 0.89vw, 2.4rem);
}


.top-comingsoon{
    padding:3em 0;
    text-align: center;
}

.top-comingsoon .c-title{
    margin-bottom:1em;
    line-height: 1.4;
    font-weight: 700;
}
.top-concept{
    position: relative;
     /*  padding:150px 0;
 background: url("../images/concept_line01.png") no-repeat left top, url("../images/concept_line02.png") no-repeat left bottom;*/
}

.top-concept::before,
.top-concept::after{
    content: "";
        display: block;
    width:100%;
    height:15vw;
    }
.top-concept::before{
    background: url("../images/concept_line01.png") no-repeat left top;
    background-size: cover;
   }
.top-concept::after{
        background: url("../images/concept_line02.png") no-repeat left bottom;
    background-size: cover;
}





.top-concept .c-cont{
    gap:20px 10%;
    align-items: center;
}
.top-concept .c-txt{
    width:55%;
}

.top-concept .c-img{
width:30%;
    text-align: center;
  }
.top-concept .c-subtitle{
    color:var(--cl-m2);
}
.top-concept .c-title{
           margin:.6em 0 1em;    
    color:#454545;
         font-size:clamp(2.4rem, 1.6rem + 2.67vw, 4rem);
}





.top-contbox .c-cont{
    padding:4em 0 5em;
align-items: flex-end;
}
.top-contbox .c-txt{
width:55%;
    margin:0 0 -8% -10%;
    padding:30px;
    background:#fff;
    border-radius: 10px;
}
.top-contbox .c-img{
width:55%;
        background:#fff;
  border-radius: 15px;
}
.top-contbox .c-img img{
            border-radius: 15px;
}
.top-contbox .c-mdtitle{
    margin:1em 0;
     font-size:clamp(1.6rem, 1.467rem + 0.44vw, 1.8rem);
    }

.top-links .c-title{
    color:#EA82AF;
    }
.top-case  .c-title{
    color:#EB8E3E;
    }
.top-interview .c-title{
     color:#90A74A;
    }
.top-links .c-btn-f{
    background:#EA82AF;
    }

.top-contbox .c-title .comingsoon{
    display: inline-block;
    margin-left:1em;
    color:#aaa;
    font-size:1.8rem;
    }

.top-links{
    background:url("../images/top_cont_bg03.png") no-repeat right top,
      url("../images/top_cont_bg04.png") no-repeat left bottom #FFF2FC;
}
.top-case{
    background:
        url("../images/top_cont_bg01.png") no-repeat right top #FDF0C5;
}
.top-interview{
    background: url("../images/top_cont_bg02.png") no-repeat left top #EFFCCE;
}


.top-btm-banner {
        margin:6rem 0;
}
.top-btm-banner .c-title{
    font-weight: 700;
}


@media screen and (max-width: 768px) {
    .top-main-txt .top-title{
        width:80%;
    }
.home .c-cont{
   flex-direction: column;
}
    .top-concept .c-txt{
    width:100%;
}

.top-concept .c-img{
width:100%;
  }
    .top-concept .c-img img{
width:70%;
  }
    
    
    
    .top-contbox .c-txt{
width:100%;
    margin:-3% 0 0  0;

}
.top-contbox .c-img{
width:100%;
}

    
    
    
    
}



/*    links
--------------------------------- */


.links-box{
    margin-top:8rem;
}

.links-box .c-subtitle{
    margin-bottom:.6em; 
    padding-bottom:.3em;
    color:var(--cl-m2);
border-bottom:1px solid #ddd;
 }


.links-box ul{
        margin-top:1em;
}

.links-box ul li{
    margin-top:10px;
}

.links-box ul li a{
 display:flex;
    justify-content: space-between;
    align-items: center;
    gap:5px 20px;
        padding: .5em 1em;
        background:#F1F5F9;
          border-radius: 10px;
}
.links-box ul li a .arrow{
        flex-shrink: 0;
     display:flex;
    justify-content: center;
    align-items: center;
width:40px;
    height: auto;
    padding:10px;
    background:#fff;
    border-radius: 100vw;
}

.links-box ul li a .arrow img{
width:15px;
    height: auto;
}
.links-box dl dt{
    font-weight: bold;
    }
.links-box .c-mdtitle{
    margin-top:2em;
    font-size:1.6rem;
}

/*   concept
--------------------------------- */
.concept-intro .c-subtitle{
    margin-bottom:1em;
    font-weight: 700;
    text-align: center;
}

.concept-container{
    padding:30px 20px;
    background:#FFFDD3;
    
}
.concept-container .c-cont{
    gap:20px 4%;
    flex-wrap: wrap;
}
.concept-lead .c-subtitle{
    text-align: center;
      margin-bottom:1em;
    color:var(--cl-m2);
}
.concept-container .c-cont{
    margin-top:6rem;
}


.concept-box{
       width:48%;
    padding:15px;
        background:#fff;
    border-radius: 15px;
    }
.concept-box:last-child{
    width:100%;
}
.concept-list{
    list-style: disc;
    padding-left:1em;
}


.concept-box .c-subtitle{
    color:#D35600;
    margin-bottom:1em;
    padding:.5em;
    border-bottom:1px solid #D35600;
}
.concept-box .c-subtitle span{
    font-size:1.6rem;
}
.concept-box .txt-bld{
    margin-top:1em;
    }


.concept-message{
    text-align: center;
}
.concept-message p{
    margin-bottom:2em;
}
.concept-message .c-title{
        margin-bottom:1em;
    color:var(--cl-m2);
}

@media screen and (max-width: 860px) {
.concept-box{
       width:100%;
    }

.concept-message{
    text-align: left;
}

}