/****reset
*****************************************/
html {
  font-size: 62.5%; }

html, body {
  width: 100%;
  height: auto; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  -webkit-text-decoration: normal;
  text-decoration: normal;
  cursor: pointer; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

input, select {
  vertical-align: middle; }



html {
font-size: 62.5%;
}

@media only screen and (max-width: 1280px) {
html {
font-size: 50%;
  }
}
@media only screen and (max-width: 768px) {
html {
  font-size: calc(100vw / 100);
  }
}

@media only screen and (max-width: 540px) {
html {
  font-size: calc(100vw / 75);
  }
}

html, body {
  width: 100%;
  height: auto;
  }

body {
  color: #000000;
  font-family: "IBM Plex Sans",Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  background: #FFF;
  }
@media screen and (max-width: 768px) {
body {
}
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

img {
width: 100%;
  max-width: 100%;
  height: auto; }

a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

figure {
  line-height: 0; }

.center {
  text-align: center !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.left {
  text-align: left; }

.right {
  text-align: right; }

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.f_en{
font-family: "Host Grotesk", sans-serif;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body.fixed{
  position: fixed;
  width:100%;
}

#wrapper_all{
	position:relative;
    width: 100%;
/*    overflow: hidden;*/
}
#wrapper{
}



#l-header_wrap a,
.footer a,
#wrapper a img {
  opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out; }

#l-header_wrap a:hover,
.footer a:hover,
#wrapper a:hover img {
  opacity: .85; }
a.mover_btn{
  opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;}
a.mover_btn:hover{
  opacity: .5 !important;
}

@media screen and (max-width: 768px) {
#wrapper{
}
}


/*****HEADER****/

#navi {
  position: fixed;
  top: 0;
  height: 90px;
  width: 100%;
  z-index: 101;
  /*background: #FFF;*/
}
.header_inn{
	width:100%;
	margin:0 auto;
	position:relative;
}
.header_inn.addbg{
/*background: #FFF;
padding-bottom: 3rem;*/
}
/* 左上ロゴ */
.menu-left {
  float: left;
  	width:auto;
    width: 16%;
	max-width:180px;
	margin:20px 0 0 30px;
    transition: opacity 0.2s; 
}
.menu-left img {
width: 100%;
  vertical-align: middle;
}
.menu-left a{
width: 100%;
}
.menu-left.is-active{
opacity: 0;
}

.head_btn_sp{
display: none;
}
@media screen and (max-width: 768px) {
#navi {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
}
#navi.addbg{
background: #FFF;
}
.header_inn{
text-align: center;
position: static;
}
.menu-left {
  float: none;
  	width:30%;
	max-width:150px;
	margin:15px 0 0 15px;
}
.head_btn_sp{
display: block;
position: absolute;
top: 20px;
right: 70px;
}
.head_btn_sp a{
background: #dd411e;
border-radius: 6px;
padding: 8px 13px 8px 13px;
font-size: 2.4rem;
font-weight: 600;
color: #FFF;
}
.header_inn.addbg .menu-left.is-active{
opacity: 1;
}
}

/* 上部メニュー */
#menu {
  float: right;
  width: 75%;
  margin: 17px 70px 0 0;
  text-align: right;
   transform: translateX(100%);
   transition: all 0.3s ease-out;
}
#menu.addbg{
transform: translateX(0);
}
#menu li {
  position: relative;
  white-space: nowrap;
  font-size: 2.0rem;
  text-align: center;
  font-weight: 600;
  /*background: #999;*/
}
#menu li a {
  display: block;
  text-decoration: none;
  padding:  0;
  color: #82D20F;
}
#menu .head_spmenu_logo{
display: none;
}
#menu  li {
  display: inline-block;
  margin: 0 1.2rem;
}
#menu  li:first-child{
margin-left: 0;
}
#menu  li:last-child {
  margin-right: 0;
}
#menu-navibtn {
  display: none;
  cursor: pointer;
  /*cursor: hand;*/
}


/* スマホ用 */
@media screen and (max-width: 768px) {
  /* 基本非表示 */
  #menu {
    display: none;
    float: none;
    margin: 15px 0 0 0;
    width: 100%;
    background-color: #FFF;
    transform: translateX(0);
    height: calc(100vh - 60px);
  }
  #menu .menu_inn{
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 110px);
  align-content: flex-start;
  }
  #menu li {
    height: auto;
    width: 100%;
    padding: 0px 0px;
    white-space: nowrap;
    font-size: 4.4rem;
    text-align: right;
  }
  #menu  li {
    margin: 0;
  }
  #menu li a {
    display: inline-block;
    width: 100%;
    padding: 1.2rem 4.0rem;
  }
  #menu li:last-child {
    margin-bottom: 6.0rem;
  }
  #menu .head_spmenu_logo{
display: block;
width: 50%;
max-width: 200px;
margin: 2.0rem 4.0rem 4.0rem auto;
}
  #menu li i {
    padding: 0px 6px;
  }
  /* メニューを移動させないため */
  #menu-navibtn:checked ~ #navi {
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    height:auto;
  }
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  /* ハンバーガーメニューがクリックされた時 */
  #menu-navibtn:checked ~ * #menu {
    display: block;
  }
  #menu-navibtn:checked ~ * #menu > li {
    max-height: inherit;
    overflow-y: visible;
  }
}

/* ハンバーガー */
#navi #navibtn {
  display: none;
}
  #navi #navibtn {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
  }
  .btn_modal{
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  display: block;
      width: 35px;
    height: 35px;
    cursor: pointer;
  }
  #close_modal{
  display: none;
  }
  @media screen and (max-width: 768px) {
    #navi #navibtn {
    top: 10px;
    right: 15px;
  }
  }




/***** pg wrap ****/
.pg_wrap{
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1280px) {
.pg_wrap{
}
}
@media screen and (max-width: 768px) {
.pg_wrap{
}
}

img {
vertical-align: bottom;
margin: 0;
padding: 0;
}
img {
}

/*****コンテンツ****/
.contents{
	margin-top:0em;
	min-height:500px;
	margin-bottom:0;
}
.main_contents{
position: relative;
/*max-width: 1140px;*/
margin: 0 auto;
/*padding: 0 30px;*/
}
.w_conts{
width: 90%;
max-width: 1240px;
margin: 0 auto 0;
}

@media screen and (max-width: 768px) {
.contents{
	margin-top:0em;
	margin-bottom:0em;
}
.main_contents{
width: 100%;
padding: 0;
}
.w_conts{
width: 86%;
margin: 0 auto 0;
}
}

/***** sera_grade ****/
.sera_grade{
position: relative;
width: 100%;
height: 30.0rem;
background: linear-gradient(to top,rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 100%);
mix-blend-mode: screen;
}
.sera_grade_sub{
margin-top: -120.0rem;
height: 50.0rem;
}
@media screen and (max-width: 768px) {
.sera_grade_sub,
.sera_grade_sub2{
display: none;
}
}

/***** TITLE ****/
.sec_ttl{
font-size: 11.8rem;
font-weight: 700;
line-height: 0.8;
margin-bottom: 4.5rem;
letter-spacing: -0.1rem;
overflow-wrap: anywhere;
}
.sec_ttl_sub{
font-size: 2.4rem;
font-weight: 500;
margin-bottom: 1.0rem;
color: #18181B;
line-height: 1.4;
}
.about_logo{
max-width: 280px;
margin-bottom: 5.0rem;
}
.sec_ttl_read{
font-size: 1.6rem;
color: #3F3F46;
/*letter-spacing: -0.02rem;*/
}
.about_area .sec_ttl_read{
margin-right: -2.0rem;
}
.features_area .sec_ttl_read{
margin-right: -3.4rem;
}
@media screen and (max-width: 768px) {
.sec_ttl{
font-size: 16rem;
margin-bottom: 6.0rem;
}
.sec_ttl span{
display: inline-block;
text-align: left;
}
.sec_ttl_sub{
font-size: 4.0rem;
margin-bottom: 2.0rem;
/*text-align: center;*/
}
.about_logo{
width: 55%;
max-width: 280px;
margin: 0 0 6.0rem;
}
.sec_ttl_read{
font-size: 2.6rem;
}
.about_area .sec_ttl_read{
margin-right: 0;
}
.features_area .sec_ttl_read{
margin-right: 0;
}
}

/***** ABOUT ****/
.about_area{
padding: 8rem 0 20rem;
background: #FFF;
position: sticky;
top: 1.0rem;
}
.about_wrap{
}
.about_head_wrap{
display: flex;
align-items: flex-end;
}
.about_head_l{
width:  35%;
max-width: 430px;
margin-right: 10%;
}
.about_head_r{
display: flex;
text-align: center;
width: 55%;
}
.about_head_fig{
max-width: 165px;
margin: 0 auto;
}
.about_head_logo{
max-width: 140px;
margin: 2.0rem auto 0.5rem;
}
.about_head_note{
font-size: 3.3rem;
font-weight: 600;
}
.about_head_mov_wrap_inn{
position: relative;
margin-top: 12.0rem;
}
.about_head_mov_wrap_inn video {
width: 100%;
max-width: 330px;
}
.about_head_note2{
position: absolute;
bottom: 0;
left: 15%;
width: 70%;
}
.about_head_dot_wrap{
display: flex;
align-self: center;
margin-right: 1.0rem;
}
.about_head_dot{
background: #82D20F;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
}
.about_head_dot_01{
animation: blink-simple 1s step-start infinite;
}
.about_head_dot_02{
margin-top: 10px;
animation: blink-simple 1s 0.2s step-start infinite;
}
.about_head_dot_03{
margin-top: 20px;
animation: blink-simple 1s 0.4s step-start infinite;
}
.about_head_dot_04{
margin-top: 30px;
animation: blink-simple 1s 0.6s step-start infinite;
}
.about_head_dot_05{
margin-top: 40px;
animation: blink-simple 1s 0.8s step-start infinite;
}
@keyframes blink-simple {
  0% { opacity: 1; }
  30%,33% { opacity: 0.5; }
  60%,66% { opacity: 0.2; }
  95%,100% { opacity: 1; }
}

.about_list_wrap{
display: flex;
justify-content:space-between;
gap:0 3.0rem;
margin: 6.0rem 0 8.0rem;
}
.list_item_box{
display: flex;
}
.about_list_wrap .list_item_box{
width: calc(100% / 3);
}
.list_item_box_l{
border-right: solid 2px #000;
margin-right: 7%;
padding-right: 7%;
}
.list_item_box_head{
font-size: 1.9rem;
font-weight: 800;
line-height: 1.0;
}
.list_item_box_num{
font-size: 4.7rem;
font-weight: 800;
line-height: 1.0;
}
.list_item_box_ttl{
font-size: 2.3rem;
line-height: 1.4;
color: #18181B;
margin-bottom: 1.5rem;
}
.about_list_wrap .list_item_box_ttl{
min-height: 6.5rem;
}
.about_list_wrap .list_item_box:nth-child(1) .list_item_box_ttl,
.about_list_wrap .list_item_box:nth-child(3) .list_item_box_ttl{
padding-top: 1.5rem;
}
.list_item_box_ttl span{
display: inline-block;
vertical-align: middle;
font-size: 1.4rem;
font-weight: 400;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
border: solid 1px #18181B;
margin-left: 1.0rem;
}
.list_item_box_read{
font-size: 1.4rem;
font-weight: 400;
color: #52525B;
}
@media screen and (max-width: 768px) {
.about_area{
padding: 8rem 0 8rem;
background: #FFF;
position: relative;
top: 0;
}
.about_wrap{
}
.about_head_wrap{
display: flex;
align-items: flex-end;
flex-direction: column;
}
.about_head_l{
width:  100%;
max-width: inherit;
margin-right: 0;
margin-bottom: 6.0rem;
}
.about_head_r{
display: flex;
text-align: center;
width: 90%;
margin: 0 auto;
}
.about_head_fig_wrap{
width: 35%;
margin-right: 2%;
}
.about_head_fig{
max-width: inherit;
margin: 0 auto;
}
.about_head_logo{
max-width: inherit;
margin: 2.0rem auto 1.5rem;
}
.about_head_note{
font-size: 3.8rem;
line-height: 1.4;
margin: 0 -6rem;
}
.about_head_mov_wrap{
width: 35%;
}
.about_head_mov_wrap_inn{
position: relative;
margin-top: 16.0rem;
}
.about_head_mov_wrap_inn video {
width: 100%;
max-width: 330px;
}
.about_head_note2{
position: absolute;
bottom: 0;
left: 15%;
width: 70%;
}
.about_head_dot_wrap{
display: flex;
align-self: center;
margin-right: 1.0rem;
width: 25%;
}
.about_head_dot{
width: 10px;
height: 10px;
}
.about_head_dot_01{
}
.about_head_dot_02{
margin-top: 1.5rem;
}
.about_head_dot_03{
margin-top: 3.0rem;
}
.about_head_dot_04{
margin-top: 4.5rem;
}
.about_head_dot_05{
margin-top: 6.0rem;
}

.about_list_wrap{
flex-direction: column;
gap:5.0rem 0;
margin: 8.0rem auto 8.0rem;
width: 75%;
}
.list_item_box{
display: flex;
}
.about_list_wrap .list_item_box{
width: 100%;
}
.list_item_box_l{
margin-right: 12%;
padding-right: 15%;
}
.list_item_box_head{
font-size: 3.0rem;
line-height: 1.0;
}
.list_item_box_num{
font-size: 7.0rem;
line-height: 1.0;
}
.list_item_box_ttl{
font-size: 4.2rem;
margin-bottom: 1.5rem;
}
.about_list_wrap .list_item_box_ttl{
min-height: inherit;
}
.about_list_wrap .list_item_box:nth-child(1) .list_item_box_ttl,
.about_list_wrap .list_item_box:nth-child(3) .list_item_box_ttl{
padding-top: 0;
}
.list_item_box_ttl span{
display: inline-block;
vertical-align: middle;
font-size: 2.4rem;
padding: 0.4rem 1.2rem;
border-radius: 0.6rem;
margin-left: 0;
}
.list_item_box_read{
font-size: 2.4rem;
}
}


/***** features ****/
.features_area{
padding: 8rem 0 30rem;
background: #FFF;
position: relative;
}
.features_wrap{
background: url("../img/bg_fig_01.png") no-repeat;
background-position: top 15rem right -20rem;
}
.features_ttl_wrap{
position: sticky;
top: 8.0rem;
}
.features_main_wrap{
display: flex;
justify-content: space-between;
}
.features_main_l{
width: 54%;
max-width: 660px;
margin-right: 10%;
margin-bottom: 80.0rem;
}
.features_main_r{
width: 36%;
}
.features_main_box{
margin: 2rem 0 8.0rem;
}
.features_main_mov{
box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, 0.2);
border-radius: 1.5rem;
margin-bottom: 4.0rem;
}
.features_main_mov video {
width: 100%;
max-width: 660px;
border-radius: 1.5rem;
}

@media screen and (max-width: 768px) {
.features_area{
padding: 12rem 0 8rem;
}
.features_area::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background-color: #DDD;
}
.features_wrap{
background-size: 80% auto;
background-position: top 2rem center;
}
.features_ttl_wrap{
position: relative;
top: 0;
}
.features_main_wrap{
flex-direction: column;
}
.features_main_l{
width: 100%;
max-width: inherit;
margin-right: 0;
margin-bottom: 4.0rem;
}
.features_main_r{
width: 100%;
order: -1;
margin-bottom: 6.0rem;
}
.features_main_box{
margin: 2rem 0 8.0rem;
}
.features_main_mov{
box-shadow: 8px 8px 20px 3px rgba(0, 0, 0, 0.2);
border-radius: 2.0rem;
margin-bottom: 5.0rem;
}
.features_main_mov video {
width: 100%;
max-width: 660px;
border-radius: 2.0rem;
}
.features_area .list_item_box{
width: 80%;
margin-left: auto;
margin-right: auto;
}
}

/***** security ****/
.security_area{
padding: 8rem 0 30rem;
background: #FFF;
position: relative;
}
.security_wrap{
background: url("../img/bg_fig_02.png") no-repeat;
background-position: top 0 left -50rem;
}
.security_ttl_wrap{
position: sticky;
top: 8.0rem;
}
.security_main_wrap{
display: flex;
justify-content: space-between;
}
.security_main_l{
width: 36%;
margin-right: 10%;
}
.security_main_r{
width: 54%;
max-width: 660px;
margin-bottom: 80.0rem;
}
.security_main_wrap_inn{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap:2.0rem;
}
.security_main_box{
background: linear-gradient(-20deg,rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
border-radius: 1.0rem;
box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, 0.2);
padding: 4.0rem;
width: 100%;
}
.security_main_box_sub{
padding: 3.0rem 2.0rem;
width: calc(50% - 1.0rem);
}
.security_main_box_inn{
display: flex;
align-items: center;
}
.security_main_box_fig_wrap{
border-right: solid 2px #000;
padding-right: 5%;
margin-right: 5%;
width: 35%;
position: relative;
padding-bottom: 2.0rem;
}
.security_main_box_sub .security_main_box_fig_wrap{
width: 30%;
padding-bottom: 0;
margin-right: 8%;
}
.security_main_box_fig{
width: 60%;
margin: 0 auto;
}
.security_main_box_sub .security_main_box_fig{
width: 70%;
margin: 0 auto;
}
.security_main_box_fig img{
width: 100%;
}
.security_main_box_fig_note{
position: absolute;
left: 0;
bottom: 0;
font-size: 3.0rem;
font-weight: 800;
line-height: 1.0;
}
.security_main_box_read_wrap{
width: 55%;
}
.security_main_box_sub .security_main_box_read_wrap{
width: 60%;
}
.security_main_box_subttl{
font-size: 2.3rem;
color: #18181B;
}
.security_main_box_sub .security_main_box_subttl{
font-size: 1.8rem;
}
.security_main_box_read{
font-size: 1.4rem;
color: #52525B;
font-weight: 400;
margin-top: 1.0rem;
}
.security_main_box_note{
font-size: 1.4rem;
font-weight: 800;
margin-top: 0.5rem;
}
@media screen and (max-width: 768px) {
.security_area{
padding: 12rem 0 8rem;
}
.security_area::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background-color: #DDD;
}
.security_wrap{
background-size: 150% auto;
background-position: top -30vw left -70vw;
}
.security_ttl_wrap{
position: relative;
top: 0;
}
.security_main_wrap{
flex-direction: column;
}
.security_main_l{
width: 100%;
margin-right: 0;
margin-bottom: 6.0rem;
}
.security_main_r{
width: 100%;
max-width: inherit;
margin-bottom: 4.0rem;
}
.security_main_wrap_inn{
flex-direction: column;
gap:4.0rem 0;
}
.security_main_box{
background: linear-gradient(-20deg,rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
border-radius: 2.0rem;
box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, 0.2);
padding: 6.0rem;
width: 100%;
}
.security_main_box_sub{
padding: 6.0rem 6.0rem;
width: 100%;
}
.security_main_box_inn{
display: flex;
align-items: center;
}
.security_main_box_main .security_main_box_inn{
flex-direction: column;
}
.security_main_box_fig_wrap{
border-right: solid 2px #000;
padding-right: 5%;
margin-right: 5%;
width: 35%;
position: relative;
padding-bottom: 2.0rem;
}
.security_main_box_main .security_main_box_fig_wrap{
border-right: none;
border-bottom: solid 2px #000;
padding-right: 0;
margin-right: auto;
width: 100%;
position: relative;
padding-bottom: 5.0rem;
margin: 0 auto 5.0rem; 
text-align: center;
}
.security_main_box_sub .security_main_box_fig_wrap{
width: 30%;
padding-bottom: 0;
margin-right: 8%;
}
.security_main_box_fig{
width: 40%;
margin: 0 auto;
text-align: center;
}
.security_main_box_sub .security_main_box_fig{
width: 70%;
margin: 0 auto;
}
.security_main_box_fig img{
width: 100%;
}
.security_main_box_fig_note{
position: relative;
display: inline-block;
left: auto;
bottom: auto;
font-size: 5.0rem;
font-weight: 800;
line-height: 1.0;
text-align: left;
margin-top: -5.0rem;
}
.security_main_box_read_wrap{
width: 100%;
}
.security_main_box_sub .security_main_box_read_wrap{
width: 60%;
}
.security_main_box_subttl{
font-size: 4.2rem;
text-align: center;
}
.security_main_box_sub .security_main_box_subttl{
font-size: 2.8rem;
text-align: left;
}
.security_main_box_read{
font-size: 2.4rem;
margin-top: 2.0rem;
}
.security_main_box_note{
font-size: 2.4rem;
margin-top: 1.0rem;
}
}

/***** roadmap ****/
.roadmap_area{
padding: 8rem 0 30rem;
background: #FFF;
position: relative;
}
.roadmap_wrap{
background: url("../img/bg_fig_03.png") no-repeat;
background-position: top 10rem right -20rem;
}
.roadmap_ttl_wrap{
position: sticky;
top: 8.0rem;
}
.roadmap_main_wrap{
display: flex;
justify-content: space-between;
}
.roadmap_main_l{
width: 54%;
max-width: 660px;
margin-right: 10%;
margin-bottom: 80.0rem;
}
.roadmap_main_r{
width: 36%;
}
.roadmap_main_block{
position: relative;
width: 100%;
padding: 10rem 0;
margin-left: 6.0rem;
}
.roadmap_main_grade{
position: absolute;
top: 0;
left: 15px;
width: 16px;
height: 100%;
background: linear-gradient(180deg,rgba(143, 207, 48, 0) 0%, rgba(143, 207, 48, 1) 10%, rgba(143, 207, 48, 1) 90%, rgba(143, 207, 48, 0) 100%);
}
.roadmap_main_box{
display: flex;
margin-bottom: 10.0rem;
position: relative;
}
.roadmap_main_box:last-child{
margin-bottom: 0;
}
.roadmap_main_en{
width: 46px;
height: 46px;
background: #82D20F;
border-radius: 50%;
padding: 0.5rem;
}
.roadmap_main_en_02{
padding: 0.8rem;
}
.roadmap_main_en_inn{
width: 100%;
height: 100%;
background: #82D20F;
border-radius: 50%;
box-shadow: inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2) ,inset -3px -3px 6px 0px rgba(255, 255, 255, 0.3);
}
.roadmap_main_en_02 .roadmap_main_en_inn{
width: 100%;
height: 100%;
background: #FFFFFF;
border-radius: 50%;
box-shadow: inset -3px -3px 4px 0px rgba(0, 0, 0, 0.1);
}
.roadmap_main_box_r{
margin-left: 3.0rem;
}
.roadmap_main_date{
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 1.5rem;
}
.roadmap_main_ttl{
font-size: 2.3rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.roadmap_main_read{
font-size: 1.4rem;
font-weight: 400;
}
@media screen and (max-width: 768px) {
.roadmap_area{
padding: 12rem 0 8rem;
}
.roadmap_area::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background-color: #DDD;
}
.roadmap_wrap{
background-size: 120% auto;
background-position: top 5vw right -25vw;
}
.roadmap_ttl_wrap{
position: relative;
top: 0;
}
.roadmap_main_wrap{
flex-direction: column;
}
.roadmap_main_l{
width: 100%;
max-width: inherit;
margin-right: 0;
margin-bottom: 4.0rem;
}
.roadmap_main_r{
width: 100%;
order: -1;
margin-bottom: 6.0rem;
}
.roadmap_main_block{
position: relative;
width: calc(100% - 4.0rem);
padding: 14rem 0;
margin-left: 4.0rem;
}
.roadmap_main_grade{
position: absolute;
top: 0;
left: 9px;
width: 12px;
height: 100%;
}
.roadmap_main_box{
display: flex;
margin-bottom: 10.0rem;
position: relative;
}
.roadmap_main_box:last-child{
margin-bottom: 0;
}
.roadmap_main_en{
width: 30px;
height: 30px;
padding: 0.5rem;
margin-top: 0.8rem;
}
.roadmap_main_en_02{
padding: 0.8rem;
}
.roadmap_main_en_inn{
box-shadow: inset 4px 4px 8px 0px rgba(0, 0, 0, 0.2) ,inset -2px -2px 5px 0px rgba(255, 255, 255, 0.3);
}
.roadmap_main_en_02 .roadmap_main_en_inn{
box-shadow: inset -2px -2px 3px 0px rgba(0, 0, 0, 0.1);
}
.roadmap_main_box_r{
margin-left: 3.0rem;
}
.roadmap_main_date{
font-size: 4.6rem;
margin-bottom: 1.5rem;
}
.roadmap_main_ttl{
font-size: 3.4rem;
margin-bottom: 0.5rem;
}
.roadmap_main_read{
font-size: 2.4rem;
}
}

/***** faq ****/
.faq_area{
padding: 8rem 0 30rem;
background: #FFF;
position: relative;
}
.faq_wrap{
background: url("../img/bg_fig_04.png") no-repeat;
background-position: top 20rem left -10rem;
}
.faq_ttl_wrap{
position: sticky;
top: 8.0rem;
}
.faq_main_wrap{
display: flex;
justify-content: space-between;
}
.faq_main_l{
width: 36%;
margin-right: 10%;
}
.faq_main_r{
width: 54%;
max-width: 660px;
margin-bottom: 80.0rem;
}
@media screen and (max-width: 768px) {
.faq_area{
padding: 12rem 0 8rem;
}
.faq_area::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 7%;
  width: 86%;
  height: 1px;
  background-color: #DDD;
}
.faq_wrap{
background-size: 100% auto;
background-position: top 10vw  right -20vw;
}
.faq_ttl_wrap{
position: relative;
top: 0;
}
.faq_main_wrap{
flex-direction: column;
}
.faq_main_l{
width: 100%;
margin-right: 0;
margin-bottom: 10.0rem;
}
.faq_main_r{
width: 100%;
max-width: inherit;
margin-bottom: 4.0rem;
}
}

/***** accordion ****/
.accordion-box{
background: linear-gradient(-20deg,rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 100%);
border-radius: 1.0rem;
box-shadow: 10px 10px 25px 5px rgba(0, 0, 0, 0.2);
padding: 4.0rem;
width: 100%;
margin-bottom: 3.0rem;
}

.accordion-header {
  padding: 1.5rem 45px 2.0rem 1.5rem;
  margin: 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}
.accordion-header::before,
.accordion-header::after{
	position:absolute;
	content:'';
	top:1px;
	right:20px;
	bottom:0;
	width:15px;
	height:3px;
	margin:auto;
	background:#000;
}
.accordion-header::after{
	transform:rotate(-90deg);
	transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}
.accordion-content {
  display: none;
}
.accordion-content {
  padding: 2.0rem 1.5rem 1.5rem;
  position: relative;
  border-top:  solid 1px #BBC2BB;
}
.accordion-header span,
.accordion-content span{
  padding-left: 5.0rem;
  position: relative;
  font-size: 1.9rem;
  font-weight: 600;
  display: inline-block;
  color: #18181B;
}
.accordion-content span{
  padding-left: 5.0rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #52525B;
}
.accordion-header span::before{
  position: absolute;
  font-family: "Host Grotesk", sans-serif;
  content:"Q.";
  top: 0;
  left: 0;
  color: #82D20F;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.0;
}
.accordion-content span::before{
    position: absolute;
    font-family: "Host Grotesk", sans-serif;
  content:"A.";
  top: 0;
  left: 0;
  color: #00645A;
  font-size: 3.5rem;
   font-weight: 800;
   line-height: 1.0;
}
@media screen and (max-width: 768px) {
.accordion-box{
border-radius: 2.0rem;
box-shadow: 8px 8px 20px 5px rgba(0, 0, 0, 0.2);
padding: 4.0rem;
margin-bottom: 3.0rem;
}
.accordion-header {
  padding: 1.5rem 45px 1.5rem 2.0rem;
  margin: 1.5rem 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}
.accordion-header::before,
.accordion-header::after{
	top:1px;
	right:20px;
	bottom:0;
	width:15px;
	height:3px;
}
.accordion-header::after{
}
.accordion-content {
  display: none;
}
.accordion-content {
  padding: 2.5rem 2.0rem 1.5rem;
  position: relative;
}
.accordion-header span,
.accordion-content span{
  padding-left: 8.0rem;
  font-size: 2.8rem;
}
.accordion-content span{
    font-size: 2.6rem;
}
.accordion-header span::before{
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  font-size: 6.0rem;
}
.accordion-content span::before{
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  font-size: 6.0rem;
}
}


/***** btm ****/
.btm_area{
position: relative;
width: 100%;
background: #00554a;
padding-top: 10rem;
color: #FFF;
overflow: hidden;
}
.btm_wrap{
}
.btm_mov{
width: 30%;
max-width: 330px;
margin: 0 auto;
display: none;
}
.btm_mov video {
width: 100%;
max-width: 330px;
}
.btm_fig{
width: 30%;
max-width: 330px;
margin: 0 auto;
}
.btm_txt_wrap{
position: relative;
width: 90%;
margin: 0 auto;
}
.btm_txt1{
font-size: 2.0rem;
font-weight: 400;
text-align: center;
margin-top: -4.0rem;
}
.btm_txt2{
font-size: 3.8rem;
font-weight: 500;
text-align: center;
margin-top: 1.0rem;
}
.btm_txt3{
font-size: 1.2rem;
font-weight: 400;
text-align: center;
}
.btm_btn{
text-align: center;
margin: 4.0rem auto 6.0rem;
}
.btm_btn a{
display: inline-block;
font-size: 1.6rem;
font-weight: 600;
color: #000;
background: #FFF;
padding: 1.5rem 3.0rem;
border-radius: 8.0rem;
}
.btm_btn a:hover{
opacity: 0.8;
}
.btm_logo{
margin-bottom: -3.0rem;
}
@media screen and (max-width: 768px) {
.btm_area{
padding-top: 10rem;
}
.btm_wrap{
}
.btm_mov{
width: 30%;
max-width: 330px;
margin: 0 auto;
display: block;
}
.btm_mov video {
width: 100%;
max-width: 330px;
}
.btm_fig{
display: none;
}
.btm_txt_wrap{
width: 86%;
margin: 0 auto;
}
.btm_txt1{
font-size: 3.0rem;
font-weight: 400;
text-align: left;
margin-top: -2.0rem;
}
.btm_txt2{
font-size: 5.0rem;
text-align: left;
margin-top: 2.0rem;
line-height: 1.4;
}
.btm_txt3{
font-size: 2.0rem;
text-align: left;
}
.btm_btn{
text-align: center;
margin: 4.0rem auto 6.0rem;
}
.btm_btn a{
display: inline-block;
width: 100%;
font-size: 2.6rem;
padding: 2.5rem 4.0rem;
border-radius: 8.0rem;
}
.btm_btn a:hover{
}
.btm_logo{
margin-bottom: -3.0rem;
}
}

/***** MV ****/
.mv_wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(100deg,rgba(255, 255, 255, 1) 75%, rgba(247, 255, 244, 1) 100%);
}
.mv_mov_wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.mv_mov_wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 330px;
  height: auto;
  object-fit: cover;
}
.video_wrap{
	position:relative;
	text-align:center;
height: 100vh;
min-height:500px;
	overflow:hidden;
}
#bg-video{
width: 100%;
max-width: 330px;
height: auto;
z-index: 1;
background-size: cover;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fukidashi_wrap{
position: absolute;
left: 50%;
bottom: 45%;
transform: translateX(200px);
z-index: 2;
max-width: 24%;
opacity: 1;
transition: all 0.5s ease-out;
}
.fukidashi_wrap.scro{
opacity: 0;
}
.fukidashi_wrap::after{

}
.fukidashi_wrap.is-show::after{
display: block;
}
.fukidashi_item{
display: none;
transition: all 0.2s ease-out;
}
.fukidashi_item.is-show{
display: block;
animation: fadeInFuki 0.2s ease 1 both;
}
@keyframes fadeInFuki {
  0% { opacity: 0; transform: translateX(-10px) }
  100% { opacity: 1; transform: translateX(0%) }
}

.slideshow {
  position: relative;
  width: 30vw;
  max-width: 300px;
  height: 25vw;
/*  background: rgba(172,113,114,1.00);*/
  text-align: left;
}
.slideshow picture {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: none; 
}

/* activeクラスがついたpictureタグだけを表示 */
.slideshow picture.active {
  display: block; 
}

/* 中の画像が枠にフィットするように調整 */
.slideshow picture img {
  width: 100%;
  height: auto;
}

.mv_parts{
opacity: 1;
transition: all 0.2s ease-out;
}
.mv_parts.scro{
opacity: 0;
}
.sclolldown_wrap2{
opacity: 1;
transition: all 0.2s ease-out;
}
.sclolldown_wrap{
position: absolute;
bottom: 3.0rem;
left: 50%;
width: 100px;
transform: translateX(-50%);
animation: fadeIn 1s 7s ease 1 both;
transition: all 0.2s ease-out;
}
.sclolldown_wrap2.scro{
opacity: 0;
}
.sclolldown_fig_arrow{
position: absolute;
right: 5px;
bottom: 10px;
width: 18px;
animation: arrowDown 1s ease infinite both;
}
@keyframes arrowDown {
  0% { transform: translate3d(0px, 0, 0px); }
  100% { transform: translate3d(0px, 6px, 0px); }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.mv_read_wrap{
position: relative;
margin-top: 100vh;
margin-bottom: 50.0rem;
/*background: rgba(221,108,110,1.00);*/
height: 380vh;
}
.mv_read_txt{
width: 80%;
max-width: 800px;
margin: 0 auto 30.0rem;
}
.mv_stck_area{
position: sticky;
top: 10.0rem;
}
.mv_read_btm_wrap{
display: flex;
align-items: flex-start;
width: 80%;
max-width: 800px;
margin: 0 auto 10.0rem;
gap:0 2.0rem;
}
.mv_read_btm_txt_logo svg{
width: 100%;
}

.beta_btn_wrap{
display: none;
}

@media screen and (max-width: 768px) {
.mv_wrap{
}
.mv_mov_wrap {
}
.mv_mov_wrap video {
}
.video_wrap{
}
#bg-video{
width: 50%;
max-width: 330px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fukidashi_wrap{
position: absolute;
left: 50%;
bottom: auto;
top: 70%;
transform: translateX(-50%);
z-index: 2;
max-width: 50%;
}
.fukidashi_wrap_grade{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 5.0rem;
background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
z-index: 1;
display: none;
}
.fukidashi_item{
display: none;
transition: all 0.2s ease-out;
}
.fukidashi_item.is-show{
display: block;
animation: fadeInFuki 0.2s ease 1 both;
}

.slideshow {
  position: relative;
  width: 40vw;
  max-width: 300px;
  height: 42vw;
  text-align: left;
}
.slideshow picture {
  position: absolute;
  bottom: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: none; 
}

/* activeクラスがついたpictureタグだけを表示 */
.slideshow picture.active {
  display: block; 
}

/* 中の画像が枠にフィットするように調整 */
.slideshow picture img {
  width: 100%;
  height: auto;
}
.mv_parts{
opacity: 1;
transition: all 0.5s ease-out;
}
.mv_read_wrap{
margin-top: 110vh;
margin-bottom: 50.0rem;
height: 340vh;
}
.mv_read_btm_wrap{
display: flex;
flex-wrap: wrap;
width: 80%;
max-width: 800px;
margin: 0 auto 10.0rem;
gap:0 2.0rem;
align-items: center;
}
.mv_stck_area{
position: sticky;
top: 15.0rem;
}
.mv_read_btm_txt_01{
width: 68%;
margin-bottom: 3.0rem;
}
.mv_read_btm_txt_logo{
width: 68%;
}
.mv_read_btm_txt_02{
width: 26%;
margin-bottom: 0.8rem;
}

.beta_btn_wrap{
display: block;
text-align: center;
width: 80%;
max-width: 800px;
margin: 6rem auto 10.0rem;
}
.btnbeta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  text-decoration: none;
  padding: 2.5rem 6.0rem;
  border-radius: 8.0rem;
  background: linear-gradient(90deg,rgba(0, 100, 90, 1) 65%, rgba(130, 210, 15, 1) 100%);
  color: #fff;
  font-size: 2.8rem;
  box-sizing: border-box; /* 100%化に備えて入れておく */
  width: 100%;
}

.btnbeta:hover {
  background-color: #004da6;
}
.sclolldown_wrap{
display: none;
}
}


#imagentlogo path{
  fill: url(#gradient);
}
#imagentlogo2 path{
  fill: url(#gradient2);
}
#stop1,#stop3{
  animation: step1 4s ease-in-out infinite alternate;
}
#stop2,#stop4{
  animation: step2 4s ease-in-out infinite alternate;
}
@keyframes step1{
  0%,50% {
    stop-color: #000;
  }
  100% {
    stop-color: #82D20F;
  }
}
@keyframes step2{
  0%,50% {
    stop-color: #000;
  }
  100% {
    stop-color: #24645a;
  }
}



/*****copy_side****/
.copy_side{
position: fixed;
right: 0.5rem;
bottom: 1.0rem;
color: #82D20F;
font-size: 1.2rem;
font-weight: 800;
writing-mode: vertical-rl;
text-orientation: mixed;
z-index: 2;
line-height: 1.0;
}
@media (max-width : 768px) {
.copy_side{
display: none;
}
}

/*****フッター****/
.footer{
position: relative;
width: 100%;
background: #333333;
padding: 6rem;
}
.footer_main{
display: flex;
flex-direction: column;
}
.footer_logo{
width: 50%;
max-width: 200px;
margin: 0 auto 3rem;
}
.footer_menu ul {
  display: flex;
  justify-content:center;
  margin: 0;
  padding: 0;
}
.footer_menu ul li {
  display: flex;
  align-items: center;
}
.footer_menu ul li a{
font-size: 1.4rem;
color: #FFF;
font-weight: 400;
display: inline-block;
background: url("../img/link_arr_wh.svg") center right no-repeat;
background-size: 10px auto;
padding: 0 1.6rem 0 0;
line-height: 1.4;
}
.footer_menu ul li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.4rem;
  background-color: #FFF;
  margin: 0 12px;
}
.footer_copyright{
font-size: 1.2rem;
font-weight: 400;
color: #FFF;
text-align: center;
margin: 4rem auto 0;
}
#page-top {
}
#page-top:hover {
}
.btn_pagetop_wrap{
    position: fixed;
	width:40px;
	height:40px;
    bottom:80px;
    right: 30px;
	z-index:1000;
	display:none;
}
#btn_pagetop {
	transition-duration:0.2s;
    cursor: pointer;
    margin-left: auto;
}
#btn_pagetop  a:hover img{
	opacity:1;
}
#btn_pagetop  img{max-width: 100%;height: auto;}
@media (max-width : 768px) {

.footer{
padding: 6rem 10px 8rem;
}
.footer_main{
}
.footer_logo{
width: 50%;
max-width: 200px;
margin: 4rem auto 3rem;
order: 1;
}
.footer_menu{
order: 0;
}
.footer_menu ul {
flex-direction: column;
}
.footer_menu ul li {
width: 100%;
border-bottom: solid 1px #444444;
}
.footer_menu ul li a{
font-size: 2.4rem;
padding: 2.0rem 2.6rem 2.0rem 3rem;
}
.footer_menu ul li + li::before {
  content: none;
}
.footer_copyright{
font-size: 2.2rem;
margin: 4rem auto 0;
}

#page-top{
}
.btn_pagetop_wrap{
	width:25px;
	height:25px;
    bottom:15px;
    right: 15px;
    /*display: block;*/
}
}

.float_btn_wrap{
position: fixed;
right: 3.0rem;
bottom: 2.0rem;
z-index: 2;
}
.float_btn_wrap.is-active{

}
.icon-button {
  display: inline-flex; 
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  padding: 0 14px;
  border-radius: 24px;
  background: linear-gradient(90deg,rgba(0, 100, 90, 1) 65%, rgba(130, 210, 15, 1) 100%);
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none; /* リンクの下線を消す */
  
  /* アニメーションのスムーズさ */
  transition: all 0.4s ease-out;
}
.icon-button .icon{
padding-bottom: 3px;
}
/* テキストの初期状態（隠す） */
.icon-button .text {
  max-width: 0;
  opacity: 0;
  white-space: nowrap; /* 改行を防ぐ */
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ホバー時の動き */
.icon-button:hover,
.float_btn_wrap.is-active .icon-button{
  padding: 0 2.0rem;
}

.icon-button:hover .text,
.float_btn_wrap.is-active .icon-button .text{
  max-width: 27.0rem;
  opacity: 1;
  margin-left: 8px; /* アイコンとテキストの間隔 */
}

@media (max-width : 768px) {
.float_btn_wrap{
display: none;
}
}

video {
  pointer-events: none;
}
.main_contents img{
pointer-events: none;
}


/***** anime ****/
.anime {
    opacity : 0.01;
    transform : translate(0, 30px);
    transition : all 800ms;
    }
.anime.fadein {
    opacity : 1;
    transform : translate(0, 0);
    }

.logoshow {
    opacity : 1;
    transition : all 500ms;
    }
.logoshow.fadein {
    opacity : 0;
    }



/* ==========================================================================
   Helper classes
   ========================================================================== */

.pc-only{ display:inline;}
.sp-only{ display:none;}
.pc-b-only{ display: block;}
.sp-b-only{ display:none;}
@media screen and (max-width: 768px) {
.pc-only{ display:none;}
.sp-only{ display:inline;}
.pc-b-only{ display: none;}
.sp-b-only{ display:block;}
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}