@charset "UTF-8";

:root { 
  --row-space : 4.69vw;
  --col-space : 4vh;
  --h2: 24px;
  --h2-50:2.4722222222222223vw;
  --h3: 18px;
  --h3-32:1.8722222222222223vw;
  --blue: #004DA7;
  --blue02: #348BEF;
  --yellow:#FFF841;
  --red: #D60000;
  --hurf: calc(98% / 2);
  }
  @media screen and (max-width: 767px) {
    :root { 
    --row-space : 4vw;
    --col-space : 5vh;
    --h2: 30px;
    --h3: 18px;
    --hurf: calc(100% / 1);
    }
    .sp--none{
        display: none;
    }
  }
  @media screen and (min-width: 768px) {
    .pc--none{
        display: none;
    }
  }

html, body{
    overflow-x: hidden;
}

.lp__logo img{
    max-width: 270px;
}
  @media screen and (max-width: 767px) {
    .lp__logo img{
    max-width: 170px !important;
    }
  }

/*************** 見出し *******************/

h2:not(.st-css-no2), .h2modoki,h3,h4{
    background: transparent;
    border: none;
    font-size: inherit;
    padding: 0;
  }

h2, section h2, h2:not(.st-css-no2){
    font-size: clamp(var(--h2), var(--h2-50), 55px);
    font-weight: 600;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    margin: .5em auto .5em;
    line-height: 1.5;
    font-feature-settings: "palt";
}

h3, h3:not([class]), section h3{
    font-size: clamp( var(--h3), var(--h3-32), 30px);
    font-weight: 600;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    margin: .5em auto .5em;
    line-height: 1.5;
    font-feature-settings: "palt";
}

p, section p{
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 400;
    font-size: clamp(17px,18px,19px);
    line-height: 1.855;
}

p.big{
    font-size: clamp(20px,27px,29px);
    font-weight: bold;
}

p.big span.blue{
    color: var(--blue) !important;
    font-weight: bold;
}

/*************** header *******************/

.header__top{
    width: 100%;
    padding: 10px 1.5em 10px 1.5em;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.14);
    background: #fff;
    text-align: center;
}

.header__top .Inner__wrap{
    display: flex;
    column-gap: .25em;
    justify-content: center;
    align-items: center;
}

.header__top .Inner__wrap .Logo{
    max-width: 400px;
}

.header__top .company__logo {
    max-width: 140px;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    row-gap: 5px;
    color:#666;
}
header{
    background: url(../images/astate/fv__bg.webp)no-repeat;
    background-size: cover;
    padding: 2em 0;
}

header .Inner__wrap, .fv__Inner{
    max-width: 1024px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1em;
}

header .arrow{
    width: 78px;
    margin: -26px auto 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

header a{
    display: inline-block;
    margin-top: -10px;
}

/*************** header *******************/

/*************** section *******************/

.jpx__wrap{
    background: #fff;
    padding: 1em;
    display: flex;
    justify-content: center;
    column-gap: 1em;
    color:#333;
    font-size: var(--h3);
    align-items: center;
    flex-direction: row-reverse;
}

.jpx__wrap picture{
    width: 48px;
}

section{
    padding: var(--col-space) var(--row-space);
}

section#light--blue{
    background: #B1CEEF;
}

section#light--blue .Inner__wrap{
    border:3px solid #0E67DE;
    background: #fff;
    border-radius: 3px;
    padding: 1em;
    max-width: 1240px;
    margin: auto;
}

section#light--blue .Inner__wrap h2{
    color:#222222;
    text-align: center;
    margin: 0 auto .5em;
    font-size:clamp(var(--h2),1.3444444444444444vw, 2vw);
}

section#line--app{
    background: url(../images/astate/sec__01__bg.webp)no-repeat;
    background-size: cover;
}

.media-logo img{
    width:164px;
    height: auto;
}

section#line--app .Inner__wrap{
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    column-gap: 1em;
    align-items: center;
    justify-content: center;
}

section#line--app .Inner__wrap .Text__wrap{
    max-width: 70%;
}

section#line--app .Inner__wrap picture{
    display: block;
    width: 30%;
}

section#line--app h2{
    color:var(--blue);
}

section#line--app p{
    font-size: clamp(18px,26px,33px);
}

section#cta{
    padding: var(--col-space) var(--row-space);
    background: url(../images/astate/cta_back.jpg)no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 5;
}


section#merit{
    background: var(--blue02);
}

section#merit .Inner__wrap{
    border-radius: 10px;
    padding: clamp(1em,2.6vw,2.8vw);
    background: #fff;
    max-width: 1160px;
    margin: auto;
}

section#merit h2{
    color:#fff;
    text-align: left;
}

section#merit h2.Center{
    text-align: center;
}

section#merit h2 img{
    width: 100%;
}

section#merit h2 span.small{
    font-size: clamp(16px,34px,38px);
    font-weight: bold;
}

h2 span.big{
    font-size: clamp(24px, calc(var(--h2-50) * 1.35), 60px);
    font-weight: bold;
}
h2 span.yellow{
    color:var(--yellow);
    font-weight: bold;
}

h2 span.blue{
    color:var(--blue);
    font-weight: bold;
}

.flex__wrap{
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    align-items: center;
}

.flex__wrap .Hurf{
    width: var(--hurf);
}

#merit .flex__wrap{
    padding-bottom: 5vh;
    border-bottom: 1px solid #ccc;
}

#merit .flex__wrap .Text--wrap{
    width: 55%;
}
#merit .flex__wrap picture{
    width: 43%;
}

#merit .flex__wrap:nth-of-type(odd){
    flex-direction: row-reverse;
}

.flex__wrap + .flex__wrap{
    margin-top: 5vh;
}

#merit .flex__wrap:last-of-type{
    border-bottom: none;
}

  @media screen and (max-width: 767px) {
        #merit .flex__wrap .Text--wrap{
            width: 100%;
        }
        #merit .flex__wrap picture{
            width: 100%;
        }

  }

section#achivement{
    background: #EBF4FF;
}

section#achivement h2{
    text-align: center;
}

section#achivement picture{
    display: block;
    margin: 0 auto 2.5vh;
}

section#achivement picture:last-of-type{
    margin-bottom: 0;
}

section#achivement .Inner__wrap{
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

section#reason{
    background: url(../images/astate/reason__bg.jpg) no-repeat;
    background-size: cover;
}

/* 遅延読み込み */
/* section#reason{
    background: none;
}

section#reason.loaded{
    background: url(../images/astate/reason__bg.jpg) no-repeat;
    background-size: cover;
} */

section#reason h2{
    text-align: center;
}

section#reason .Inner__wrap{
    max-width: 1160px;
    margin: auto;
}

section#reason .Inner__wrap .flex__wrap{
    display: flex;
    column-gap: 0;
    flex-direction: row-reverse;
    align-items: inherit;
        overflow: hidden;
    border-radius: 5px;
}

section#reason .Inner__wrap .flex__wrap picture img{
   width:100%;
   height: 100%;
   object-fit: cover;   
}

section#reason .Inner__wrap .flex__wrap .Text--wrap{
    padding: clamp(1em, 2.6vw,2.7vw);
    background: #fff;
    width: 63%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section#reason .Inner__wrap .flex__wrap picture{
    width: 37%;
}

.title__wrap{
    display: flex;
    column-gap: .5em;
}
.title__wrap h3{
    margin: 0 0 .5em;
}

.number__icon{
    background: #d34100;
    color:#fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.number__icon::after{
    content: '';
    position: absolute;
    bottom:4px;
    right:-4px;
      width: 0;
  height: 0;
  border-style: solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 10px solid #d34100;
  border-top: 0;
  transform: rotate(119deg);
}

span.red{
    color:var(--red);
    font-weight: bold;
}

ul.gray{
    padding: .5em;
    margin: 0;
    background: #F2F2F2;
    list-style: none;
}

ul.gray li{
    margin-bottom: .5em;
    font-size:clamp(17px, 1.2rem, 1.3rem);
    color:#222222;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: .5em;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

ul.gray li:last-of-type{
    margin-bottom: 0;
}

ul.gray li::before{
    content:'●';
    color:var(--blue02);
    font-size: 1.0rem;
}

section#worries{
    padding: 10vh var(--row-space) 0;
    background: url(../images/astate/worries__bg.jpg)no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
    text-align: center;
}
section#anther{
    padding: 0 var(--row-space) var(--col-space);
    position: relative;
    z-index: 3;
    text-align: center;
}
section#anther::after{
    content: '';
    background: url(../images/astate/point__bg.jpg)no-repeat;
    background-size: cover;
    position: absolute;
    top:5vh;
    left:0;
    z-index: 1;
    width: 100%;
    height: 97%;
}
section#anther .Inner__wrap{
    max-width: 1160px;
    margin:0 auto 0;
    background: #fff;
    border-radius: 2.2em;
    border:#D34100 3px solid;
        padding: clamp(1em, 2.6vw,2.7vw);
    position: relative;
    z-index: 4;
    margin-top: -2px;
}

section#anther .Inner__wrap p{
    font-size: clamp(17px, 22px, 23px);
}

section#anther span.blue{
    color:var(--blue);
    font-weight: bold;
}

.Image__top{
    margin-top: -4em;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.yellow{
    padding: 1em;
    margin: 1em auto 1em;
    background: #FFF8B9;
    list-style: none;
    border-radius: 10px;
}
ul.yellow li{
    margin-bottom: .5em;
    font-size:clamp(20px, 24px, 25px);
    color:#222222;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: .5em;
    padding-bottom: .5em;
    padding-right: .4em;
    width: max-content;
    border-bottom: 2px solid var(--blue);
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

ul.yellow li:last-of-type{
    margin-bottom: 0;
}

ul.yellow li::before{
    content:'●';
    color:var(--blue);
    font-size: 1.0rem;
}

section#anther p.big{
    font-size: clamp(20px,24px,25px);
    font-weight: bold;
    margin-bottom: 0;
}

section#faq{
    background: #fff;
}

section#faq .Inner__wrap{
border:4px solid #084DA7;
border-radius: 1.46em;
padding: clamp(1em,2.6vw,2.7vw);
background: #fff;
max-width: 1160px;
margin: auto;
}

section#faq h2{
    margin: 0 auto .5em;
    text-align: center;
}

section#line-frends{
    background: url(../images/astate/cta_back.jpg)no-repeat;
    background-size: cover;
}

section#line-frends .Inner__wrap{
    max-width: 1160px;
    margin: auto;
}
section#line-frends .Inner__wrap h2{
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding-bottom: .2em;
    margin-bottom: .5em;
    border-bottom: 1px solid #fff;
}

section#line-frends *{
    color:#fff;
}

a.frends{
        width: 100%;
    font-size: clamp(1.4rem,2.1rem,2.3rem);
    max-width: 700px;
    border: none;
    border-bottom: 4px solid #0a6a04;
    border-radius: 12px;
    background-color: #0dca00;
    line-height: 1.72em;
    padding: 1em 1em;
    display: flex;
    justify-content: center;
    column-gap: .5em;
    margin: auto;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: bold;
}
a.frends i{
    font-weight: normal;
    font-size: 50px;
}

section#line-frends span.yellow{
    color:var(--yellow);
}

a.frends:hover{
    background: #11ff00;
    text-decoration: none;
}

.comm_cv_wrapper {
    background: #008bd3;
    padding: 2.5%;
    position: relative;
    z-index: 10;
}

.comm_cv_wrapper {
    background: #008bd3;
    padding: 2.5%;
    position: relative;
    z-index: 10;
        margin-bottom: 0 !important;
}
h2.comm_cv_text {
    background: #fff !important;
    border-radius: 8px;
    padding: .3em;
    color: #008bd3;
    font-weight: bold;
    text-align: center;
    position: relative;
    line-height: 1.4;
    font-size: clamp(1.2rem,1.7rem,1.8rem);
}

.comm_cv_text:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 8px 0 8px;
    border-color: #ffffff transparent transparent transparent;
    right: 20px;
    bottom: -20px;
    position: absolute;
}

.comm_cv_wrapper:after{
    display: none;
}

.staff__image{
    background: url(../images/astate/staff__image.jpg)no-repeat center top;
    background-size: cover;
    width: 100vw;
    height: 40vh;
    min-height: 500px;
}

section#company{
    background: url(../images/astate/glaf_back.jpg);
}
section#company .Inner__wrap {
    border: 8px solid #f2f2f2;
    padding: clamp(1em,2.6vw,2.8vw);
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    max-width: 1000px;
    margin: auto;
}

#company table{
    border:none;
    border-left: none;
        border-top: 1px solid #f2f2f2;
}
#company th {
        border-color: #f2f2f2;
    border-right: 1px solid #f2f2f2;
    width: 30%;
    text-align: center;
    font-size: 1.0rem;
    vertical-align: middle;
    background: #fff;
    font-weight: 400;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#company th, #company td {
    border-color: #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    padding: 15px;
    font-size: 1.0rem;
        font-weight: 400;
    background: #fff;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
/*************** /////////section *******************/

/*********************アコーディオン**********************/

.accordion{
    margin-top: 0;
    margin-bottom: 0;
    max-width: 1000px;
}

.accordion-content {
    display: none;
  }
  
.accordion-content  + .accordion-header {
    margin-top: 1em;
}

  .accordion-header {
    background-color: #125DB4;
    padding: 1em 45px 1em 20px;
    margin:0px 0 0;
    font-size: clamp(20px,27px,28px);
    font-weight: bold;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
    text-align: left;
    line-height: 1.455;
    color:#fff;
    display: flex;
    column-gap: .5em;
        font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  }
  
  .accordion-content .Inner{
    display: flex;
    column-gap: .5em;
    align-items: flex-start;
  }
  .slick-track {
    display: flex;
  }
  .slick-slide {
    height: auto !important;
  }
  .accordion-header::before,
  .accordion-header::after{
    position:absolute;
    content:'';
    top:1px;
    right:20px;
    bottom:0;
    width:22px;
    height:3px;
    margin:auto;
    background:#fff;
  }
  .accordion-header::after{
    transform:rotate(-90deg);
    transition:transform 0.3s;
  }
  .accordion-header.active::after{transform:rotate(0deg);}
  
  .accordion-content {
    background-color: #FFF;
    padding: 12px 20px 10px;
    text-align: left;
    font-weight: 400;
    font-size: 1.05rem;
    margin-bottom: 2.5vh;
  }
  
  .accordion-header span,
  .accordion-content span{
    padding-left: 30px;
    display: flex;
    position: relative;
        font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: bold;
  }
  
  .accordion-header span::before{
    content:"Q.";
    color:#fff;
    font-weight: bold;
    font-size: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  
  .accordion-content span{
    padding-left: 0;
  }
  .accordion-content span::before{
    content:"A.";
    font-weight: bold;
    color: #DE7402;
    font-size: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 1.0;
  }

  .accordion-header span{
    padding-left: 0;
    column-gap: .5em;
    width: 100%;
    align-items: center;
  }
  
  /* hover */
  .accordion-header:hover {
    background-color: var(--blue);
    opacity: 0.7;
  }

.accordion-content{
  background: #F0F3F5;
  padding: clamp(1em, 2vw, 2.2vw);
  border:1px solid #004BB1;
}
  .accordion-content a{
    color:#004BB1;
    text-decoration: underline;
  }

  .accordion-content .Inner p{
    margin-bottom: 0;
  }
    .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{
        background: #045dc9;
    }
#footer{
    padding: 0;
}

#footer .footer_links{
    padding: 1em var(--row-space);
    background: #252525;
    border-bottom: 1px solid #454545;
    text-align: center;
}
#footer .footer_links img{
    max-width: 180px;
}
.footer_copy {
    background: #252525;
    padding: 1em 2.5% 1em 2.5%;
    font-size: 0.75rem;
    text-align: center;
    color: #ccc;
}
.caution{
    font-size: 15px;
    color:#d30000 !important;
    font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 600;
    line-height: 1.455;
}



.lazy-load-bg:not(.loaded) {
    background-image: none !important;
}