@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');


@charset "UTF-8";

/**************************************************
Brakpoint
***************************************************/
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,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline;
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

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

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

input,
textarea {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style-image: none;
  list-style-type: none;
}

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

caption,
th {
  text-align: left;
}

a {
  text-decoration: none;
}

a:focus {
  outline: none;
}

.clearfix {
  min-height: 1px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

* html .clearfix {
  height: 1px;
}

.both {
  clear: both;
}

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/* Helper */
.valign_top {
  vertical-align: top;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
  color: #3E3A39;
}

select::-ms-expand {
  display: none;
}

/* COMMON
--------------------------------------------------- */
html {
  background: #fff;
  font-family: 'Inter', "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  height: 100%;
  color: #000;
  font-size: .6944444444vw !important;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}



body {
  position: relative;
}


.contents {
  position: absolute;
  right: 20%;
  top: 0;
  left: auto;
  width: 375px;
  height: 100%;
  min-height: 100vh;
/*  overflow-x: hidden; */
  z-index: 110;

}

.contents_inner {
  position: relative;
  background-color: #fff;
   box-shadow: 0px 0px 10px 5px rgba(3, 0, 0, 0.1);

}

.star5_rating {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: #CCCCCC;
}

.star5_rating:before,
.star5_rating:after {
  content: '★★★★★';
}

.star5_rating:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #FFDF0E;
}

.star5_rating[data-rate="5"]:after {
  width: 100%;
}

/* 星5 */
.star5_rating[data-rate="4.8"]:after {
  width: 95%;
}

/* 星4.8 */
.star5_rating[data-rate="4.5"]:after {
  width: 90%;
}

/* 星4.5 */
.star5_rating[data-rate="4.2"]:after {
  width: 88%;
}

/* 星4.2 */
.star5_rating[data-rate="4"]:after {
  width: 80%;
}

/* 星4 */


a,
button {
  color: #000;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a:hover,
button:hover {
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  opacity: 0.7;
}




.pc {
  display: block;
}

.sp {
  display: none;
}


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


.common_ttl_wrap {
  padding: 25px 25px 0;
  position: relative;
}

.common_ttl_wrap::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 73px;
  top: -20px;
  left: 0px;
  background: url(../img/common_ttl_icon.png) no-repeat center center;
  background-size: contain;
}


.common_ttl {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;

}

.common_ttl_en {
  font-size: 12px;
  line-height: 1.0;
  color: #1A4899;
  font-weight: 500;
  margin-top: 5px;
}


.common_lead {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 30px;
}

.common_lead a {
  text-decoration: underline;
}

.inner {
  padding: 0 25px;
}

.common_btn {
  background-color: #1A4899;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  height: 65px;
  padding: 0 20px;
  border-radius: 0 15px 0 0;
  position: relative;
  font-weight: 500;
}

.common_btn::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  top: -0px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(../img/icon_line.svg) no-repeat center center;
  background-size: contain;
}

.common_btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: url(../img/icon_arrow.svg) no-repeat center center;
  background-size: contain;
}

.common_cta_ttl {
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 5px;
}

.common_voice_list {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  margin-left: 10px;
  padding-bottom: 15px;
  padding-right: 25px;
}

.common_voice_item {
  border: 1px solid #ddd;
  border-radius: 0 10px 0 0;
  width: 100%;
  min-width: 91%;
  margin-left: 15px;

}

.common_voice_head {
  display: flex;
  padding: 20px 15px;

}

.common_voice_head_icon {
  width: 20%;

}

.common_voice_head_txt {
  width: 80%;
  padding-left: 15px;

}

.common_voice_head_txt {
  width: 83%;
  padding-left: 12px;

}

.common_voice_head_position {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
}

.common_voice_head_star {
  line-height: 1.2;
  font-size: 12px;
}

.common_voice_head_salary_wrap {
  display: flex;
  margin-top: 1px;
}

.common_voice_head_salary {
  display: flex;
  align-items: baseline;
  color: #888888;
}

.common_voice_head_salary.after {
  color: #DC2828;
}

.common_voice_head_salary.after::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid #dc2828;
  border-right: 0;
  margin-right: 6px;
  margin-left: 8px;
}


.common_voice_head_salary_small {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 9px;
  line-height: 0.9;
  font-weight: 700;
  margin-right: 3px;
  letter-spacing: 0.08em;
  align-self: flex-end;
}

.common_voice_head_salary_number {
  font-size: 22px;
  line-height: 1.0;
  letter-spacing: 0;
  font-weight: 500;
}

.common_voice_head_salary_yen {
  font-size: 12px;
  line-height: 0.9;
  letter-spacing: 0;
  font-weight: 700;
  margin-left: 1px;
}


.common_voice_bottom {
  border-top: 1px solid #1A4899;
}

.common_voice_bottom_txt {

  padding: 18px 15px 18px;
}


.common_voice_bottom_ttl {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.common_voice_bottom_detail {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}

.yellow_border {
  font-weight: 500;
  border-bottom: 2px solid #FFF27F;
}

.yellow_marker {
  font-weight: 500;
  background: linear-gradient(transparent 75%, #FFF27F 75%);
}


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

  a,
  button {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  a:hover,
  button:hover {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    opacity: 1.0;
  }





  .contents {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: auto;
    z-index: 110;


  }

  .contents_inner {
    position: relative;
     box-shadow: none;

  }
}

@media screen and (min-width:769px) and (max-width:1024px) {
    .contents {
margin: 0 auto;
position: relative;
right: auto;
    width: 375px;

  }
      .menu-trigger {
 transform: translateX(-50%);
        left: calc(50% + 163px)!important;
        top: 27px;
    }

  .global-nav-wrap.show {
    right: 0!important;
      left: 50%!important;
     transform: translateX(-50%);
  }

  .global-nav-wrap {
      right: 0!important;
        left: 50%!important;
      transform: translateX(-50%);
  }

}








/* HEADER
--------------------------------------------------- */
header {
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px 0 0 20px;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
}


header .head_logo {
  width: 105px;
}





header nav ul.main-nav {
  padding: 35px 50px 40px;
}

header nav ul.main-nav li {
  position: relative;
}

header nav ul.main-nav li a {
  line-height: 1.4;
  display: block;
  font-weight: 500;
  color: #fff;
  font-size: 16px;
  padding: 20px 0;
  border-top: 1px solid #486DAD;
}

header nav ul.main-nav li:last-child a {
  border-bottom: 1px solid #486DAD;
}

header nav ul.main-nav li::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: url(../img/icon_arrow.svg) no-repeat center center;
  background-size: contain;
}


.global-nav-wrap {
  background-color: #1A4899;
  min-height: 100vh;
  overflow: scroll;
  padding: 0 0 0;
  position: fixed;
  left: auto;
  right: 0;
  top: -250vh;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  width: 100%;
  z-index: 9999;

}

.global-nav-wrap.show {
  bottom: 0;
  left: auto;
  right: 0;
  top: 0rem;
}

.menu-trigger {
  display: block;
  height: 14px;
  position: fixed;
  right: 20px;
  top: 27px;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s ease;
  width: 16px;
  z-index: 1001;


}

@media screen and (min-width:768px) {
  .menu-trigger {
    display: block;
    height: 14px;
    position: fixed;
    right: calc(20% + 25px);
    top: 27px;
    -webkit-transition: background 0.5s ease;
    transition: background 0.5s ease;
    width: 16px;
    z-index: 1001;
  }

  .global-nav-wrap {
    background-color: #1A4899;
    min-height: 100vh;
    overflow: scroll;
    padding: 0 0 0;
    position: fixed;
    left: auto;
    right: 20%;
   top: -250vh;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 375px;
    z-index: 9999;

  }

  .global-nav-wrap.show {
    bottom: 0;
    left: auto;
    right: 20%;
    top: 0rem;
  }
}

.menu-trigger .trigger-inner {
  bottom: 0;
  width: 16px;
  height: 14px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.menu-trigger .trigger-inner span {
  background-color: #1A4899;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  -webkit-transition: All 0.5s ease;
  transition: All 0.5s ease;
  width: 16px;
}

.menu-trigger .trigger-inner span:first-child {
  top: 1px;
}

.menu-trigger .trigger-inner span:nth-child(2) {
  top: 6.5px;
}

.menu-trigger .trigger-inner span:nth-child(3) {
  bottom: 0;
}

.menu-trigger.active {}

.menu-trigger.active:after {
  display: none;

}

.menu-trigger.active .trigger-inner span:first-child {
  -webkit-transform: translateY(6px) rotate(45deg);
  transform: translateY(6px) rotate(45deg);
  background-color: #fff;
}

.menu-trigger.active .trigger-inner span:nth-child(2) {
  opacity: 0;
}

.menu-trigger.active .trigger-inner span:nth-child(3) {
  -webkit-transform: translateY(-5px) rotate(-45deg);
  transform: translateY(-5x) rotate(-45deg);
  background-color: #fff;
}

.menu_logo {
  width: 105px;
  margin-left: 20px;
  margin-top: 20px;
}

.header_menu_btn {
  padding: 0 50px 30px;

}

.header_menu_btn .common_btn {
  background-color: #fff;
  color: #1A4899;
  font-size: 16px;
  padding: 0 15px;
  height: 60px;

}

.header_menu_btn .common_btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: url(../img/icon_arrow_blue.svg) no-repeat center center;
  background-size: contain;
}





@media screen and (min-width:1800px) {
  .pc_kv_logo_wrap {
    left: 22% !important;
  }

  .contents {
    position: absolute;
    right: 32% !important;
  }

  .menu-trigger {
    right: calc(32% + 25px);
  }

  .global-nav-wrap.show {
    right: 32%;
  }

  .global-nav-wrap {
    right: 32%;
  }


}

@media screen and (max-width:320px) {

  element.style {}

  .common_btn {
    font-size: 16px;
  }

  .kv_point_list {
    margin-top: -10px !important;
  }

  header nav ul.main-nav {
    padding: 35px 25px 40px;
  }

  .header_menu_btn {
    padding: 0 25px 30px;
  }

  .common_voice_head_salary_number {
    font-size: 20px;
  }

  .common_voice_head_salary_yen {
    font-size: 11px;
  }

  .common_voice_head_icon {
    width: 18%;
  }

  .common_voice_head_txt {
    width: 82%;
    padding-left: 8px;
  }

  .common_ttl {
    font-size: 19px;
  }

  .inner {
    padding: 0 15px;
  }

  .why_ttl {
    font-size: 16px !important;

  }

  .why_onefee_strong {
    font-size: 15px !important;
  }
}




/* pc_kv
--------------------------------------------------- */
#pc_kv {
  width: 100vw;
  height: 100vh;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: flex;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;

  background: url(../img/kv_bg_pc.jpg) center center / cover no-repeat;
}

.pc_kv_logo_wrap {
  position: absolute;
  top: 50%;
  left: 12%;
  transform: translateY(-50%);
}

.pc_kv_point_list {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.pc_kv_logo {
  max-width: 300px;
  margin: 0 auto;
}

.pc_kv_point_item {
  font-size: 18px;
  border-top: 2px solid #1A4899;
  border-bottom: 2px solid #1A4899;
  margin: 0 17px;
  padding: 2px 0;
  font-weight: 500;
}


@media screen and (max-width:1024px) {


  
  .pc_kv_logo_wrap {
    display: none;
  }


}


/* KV
--------------------------------------------------- */

#kv {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
  position: relative;
  z-index: 1;
 overflow-x: hidden;
  background: url(../img/kv_bg_sp.jpg) center center / cover no-repeat;
  margin-bottom: 60px;
}

.kv_point_list {
  font-size: 17px;
  color: #1A4899;
  font-weight: 500;
  margin-top: -30px;
}

.kv_point_item {
  margin-top: 5px;
  line-height: 1.2;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.kv_point_item span {
  background-color: #FFF27F;
  padding: 5px 0px 5px 7px;
  line-height: 1.2;
  text-align: right;
  margin-right: -3px;
  letter-spacing: 0;

}

#kv .common_cta {
  padding-right: 45px;
  margin-top: -10px;


}

#kv .common_cta .common_cta_ttl {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;

}

.kv_visual {
 
  padding-top: 72px;
  position: relative;
  height: auto;
}

.kv_txt {
  position: absolute;
  left: 25px;
  top: 232px;
}

.kv_copy {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}

.kv_detail {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  margin-top: 10px;
}

.kv_mark {
  position: relative;
  left: -132px;
  z-index: 10;
}

.kv_mark svg {
  object-fit: contain;
  width: 520px;
  height: 520px;

}

.mark_color {
  fill: #1A4899;
}


/* SVG内のパーツ初期状態（非表示） */
.kv_mark .mark_color {
  opacity: 0;
  transition: opacity 1.6s ease;
}

/* .show がついたら表示開始 */
.kv_mark.show .mark_color {
  opacity: 1;
}

/* 各パーツを順番にフェードイン（遅延指定） */
.kv_mark.show .st10 {
  transition-delay: 0.0s;
}

.kv_mark.show .st12 {
  transition-delay: 0.1s;
}

.kv_mark.show .st01 {
  transition-delay: 0.2s;
}

.kv_mark.show .st03 {
  transition-delay: 0.3s;
}

.kv_mark.show .st05 {
  transition-delay: 0.4s;
}

.kv_mark.show .st07 {
  transition-delay: 0.5s;
}

.kv_mark.show .st09 {
  transition-delay: 0.6s;
}

.kv_mark.show .st11 {
  transition-delay: 0.7s;
}

.kv_mark.show .st02 {
  transition-delay: 0.8s;
}

.kv_mark.show .st04 {
  transition-delay: 0.9s;
}

.kv_mark.show .st06 {
  transition-delay: 1.0s;
}

.kv_mark.show .st08 {
  transition-delay: 1.1s;
}

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

/* lead
--------------------------------------------------- */
#lead {
  background-color: #07193A;
  position: relative;
  margin-top: 45px;
  height: 600px;
  border-radius: 0 30px 0 0;
}

#lead .lead_bg img {
  object-fit: cover;
  opacity: 0.5;
  height: 600px;
  border-radius: 0 30px 0 0;
}

#lead .lead_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
}


#lead .lead_flex {
  display: flex;
}

#lead .lead_ttl {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.15em;
}

#lead .lead_detail {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 30px;
}



/* point
--------------------------------------------------- */
#point {
  background-color: #1A4899;
  padding: 60px 0 75px;
}

.point_item {
  background-color: #fff;
  border-radius: 0 15px 0 0;
  margin-top: 15px;
  padding: 25px;
}

.point_icon {
  width: 60px;
}

.point_ttl {
  font-size: 18px;
  line-height: 1.45;
  margin-top: 12px;
}

.point_detail {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 12px;
}



/* why
--------------------------------------------------- */
#why {
  padding: 20px 0 0px;
  margin-top: 70px;
}

.why_list {
  margin-top: 20px;
  margin-bottom: 40px;
  position: relative;
}

.why_item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0 15px 0 0;
  padding: 28px 25px;
  margin-top: 15px;
  position: relative;
  z-index: 2;
}
.why_list::before {
  content: "";
    position: absolute;
    width: 82px;
    height: 330px;
    top: -100px;
    right: -25px;
    background: url(../img/why_graphic01.png) no-repeat center center;
    background-size: contain;
    
}
.why_list::after {
  content: "";
    position: absolute;
    width: 61px;
    height: 281px;
    top: 650px;
    left: -25px;
    background: url(../img/why_graphic02.png) no-repeat center center;
    background-size: contain;
    
}


.why_number {
  color: #1A4899;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.why_ttl {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 3px;

}

.why_agent_ttl {
  font-size: 14px;
  margin-top: 18px;
}

.why_agent_ttl span {
  color: #DDE5EF;
  margin-right: 2px;
}

.why_onefee_ttl {
  font-size: 16px;
  margin-top: 18px;
  font-weight: 500;
}

.why_onefee_ttl span {
  color: #1A4899;
  margin-right: 2px;
}

.why_agent_lead01 {
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.why_agent_chart01 {
  width: 74%;
  margin: 0 auto 12px;
}

.why_agent_lead02 {
  font-size: 13px;
  margin-bottom: 5px;
  letter-spacing: 0;
}

.why_triangle {
  position: relative;
  margin: 10px 0 32px;
}

.why_triangle::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-top: 13px solid #999;
  /* 好みで高さ色を変えてください */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.why_triangle.blue::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  width: 0;
  height: 0;
  border-top: 13px solid #1A4899;
  /* 好みで高さ色を変えてください */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

.why_agent_lead03 {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 25px;
}

.why_onefee_chart01 {
  margin-top: 5px;
  margin-bottom: 12px;
}

.why_onefee_strong {
  color: #1A4899;
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 17px;
  margin-top: -1px;
  line-height: 1.5;
}

.why_onefee_fin {
  font-weight: 500;
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.6;

}

.why_onefee_fin.center {
  text-align: center;
  margin-top: 3px;

}

.why_agent_lead04 {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
  padding-top: 20px;
  margin-bottom: 25px;
}

.why_agent_chart02 {
  margin-top: 8px;
  margin-bottom: 15px;
}

.why_onefee_chart02 {
  position: relative;
  padding-top: 12px;
  margin-bottom: 15px;
}

.why_onefee_chart02 span {
  width: 60px;
  position: absolute;
  top: -28px;
  right: -5px;
}

.why_onefee_chart03 {
  position: relative;
  padding-top: 50px;
  margin-bottom: 30px;
}

.why_onefee_chart03 span {
  width: 60px;
  position: absolute;
  top: 5px;
  right: 12px;
}

.why_onefee_strong.last {
  margin-top: 12px;
}

/* problem
--------------------------------------------------- */
#problem {
  padding: 20px 0 90px;
  margin-top: 70px;
}

.problem_list {
  margin-top: 50px;
}


.problem_item {
  display: flex;
  border-top: 1px solid #ddd;
  padding: 26px 0;
  font-weight: 500;
  position: relative;
}

.problem_item::before {
  content: "";
  background-color: #1A4899;
  width: 22px;
  height: 1px;
  position: absolute;
  left: 0;
  top: -1px;

}

.problem_item:last-child {
  border-bottom: 1px solid #ddd;
}

.problem_item:last-child::after {
  content: "";
  background-color: #1A4899;
  width: 22px;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -1px;
  top: auto;

}


.problem_number {
  color: #1A4899;
  font-size: 14px;
  width: 10%;
  line-height: 1.6;

}

.problem_detail {
  width: 90%;
  font-size: 16px;
  line-height: 1.5;
}



/* merit
--------------------------------------------------- */
#merit {
  padding: 80px 0;
  background-color: #1A4899;
}

#merit .common_ttl_wrap {
  color: #fff;
}

#merit .common_ttl_wrap .common_ttl_en {
  color: #fff;
}

#merit .common_ttl_wrap::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 73px;
  top: -20px;
  left: 0px;
  background: url(../img/common_ttl_icon_white.png) no-repeat center center;
  background-size: contain;
}

.merit_list {
  margin-top: -5px;
}

.merit_item {
  margin-top: 55px;
  color: #fff;
}

.merit_item:nth-child(even) {
  padding-right: 0px;

}

.merit_item .merit_img {
  padding-right: 50px;
}

.merit_item .merit_img img {
  border-radius: 0 15px 0 0;
}

.merit_item:nth-child(even) .merit_img {
  padding-left: 50px;
  padding-right: 0;
}

.merit_item:nth-child(even) .merit_img img {
  border-radius: 15px 0 0 0;

}

.merit_item .merit_txt {
  padding: 22px 50px 0 25px;
}

.merit_item:nth-child(even) .merit_txt {
  padding: 22px 25px 0 50px;
}

.merit_number {
  font-size: 12px;
  line-height: 1.2;
}

.merit_ttl {
  font-size: 18px;
  line-height: 1.4;
  margin-top: 8px;
}

.merit_detail {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
}


/* voice
--------------------------------------------------- */
#voice {
  padding: 20px 0 70px;
  margin-top: 70px;
}

.voice_list_wrap {
  margin-top: 40px;
}

/* flow
--------------------------------------------------- */
#flow {
  padding: 20px 0 30px;
}

.voice_list_wrap {
  margin-top: 40px;
}

.flow_list {
  margin-top: 40px;
}

.flow_item {
  display: flex;
  position: relative;
  padding-bottom: 45px;
}

.flow_item:not(:last-child)::before {
  content: "";
  background-color: #ddd;
  height: calc(100% - 32px);
  width: 1px;
  position: absolute;
  left: 13px;
  top: 28px;
}

.flow_left {
  color: #1A4899;
  font-size: 20px;
  width: 10%;
  font-weight: 500;
  line-height: 1.2;

}

.flow_right {
  width: 90%;
  padding-left: 20px;

}

.flow_ttl {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.flow_detail {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
}

.flow_btn {
  margin-top: 10px;
  width: 180px;
}

.flow_btn .common_btn {
  font-size: 14px;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  border-radius: 0 10px 0 0;
}

.flow_btn .common_btn::before {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.flow_btn .common_btn::after {
  display: none;
}

/* faq
--------------------------------------------------- */
#faq {
  padding: 20px 0 100px;
}

.faq_list {
  margin-top: 40px;
  margin-bottom: 40px;
}

.faq_item {
  padding: 28px 0;
  border-top: 1px solid #ddd;
}

.faq_item:last-child {
  border-bottom: 1px solid #ddd;
}

.faq_ttl_wrap {
  display: flex;
  padding-right: 45px;
}

.faq_ttl_wrap .faq_icon {
  color: #1A4899;
  font-size: 16px;
  width: 7%;
  font-weight: 500;
  line-height: 1.4;
}

.faq_ttl_wrap .faq_ttl {
  font-size: 16px;
  width: 93%;
  font-weight: 500;
  line-height: 1.4;
}

.faq_detail {
  font-size: 14px;
  padding: 2px 0 0 0;
}

.faq_detail_note {
  font-size: 12px;
  color: #666;
  padding: 6px 0 0 0;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
}

.accordion-container {
  width: 100%;
}

.accordion_title {
  position: relative;
  width: 100%;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}



.accordion_title::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  background-color: #1A4899;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 11px;
  height: 2px;
  z-index: 2;
}

.accordion_title::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  background-color: #1A4899;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 11px;
  height: 2px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 2;
}

.accordion_title.open:before {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.accordion_content {
  display: none;
  padding: 6px 0 0 20px;
}

/* footer
--------------------------------------------------- */
footer {}

.footer_link_list {
  display: flex;
  justify-content: center;
  font-size: 13px;
}

.footer_link_item {
  padding: 0 12px;
}

.footer_link_item:not(:last-child) {
  border-right: 1px solid #ddd;
}

.cr {
  position: relative;
  margin-top: 30px;
}

.cr .footer_cr {
  position: absolute;
  top: auto;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 12px;
  text-align: center;
}

/* ANIMETION
--------------------------------------------------- */

.curtain {
  position: relative;
  box-sizing: border-box;
}

/* span要素 最初は非表示 */
.curtain .curtain_hide {
  transition: all 0.2s 0.6s ease;
  opacity: 0;
  display: block;
  box-sizing: border-box;
}

/* .curtainに.activeがついたらspanを表示（1s後に0sかけて透明度を0→1に） */
.curtain.active .curtain_hide {
  opacity: 1;
}

/* .curtainに擬似要素(カーテン部分)を追加して、transformで横幅を0にしておく scaleX(0) */
.curtain:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #1A4899;
}

.curtain.white:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #fff;
}

/* .curtainに.activeがついたら擬似要素のアニメーションを開始させる */
/* アニメーション名,アニメーション完了までの所要時間,変化の度合い,遅延時間,回数,再生方向,アニメーション前後のスタイル,アニメーションの再生・停止 */
.curtain.active:after {
  animation: curtainEffect 0.6s ease-in-out 0.2s 1 normal both running;
}

@keyframes curtainEffect {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }

  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }

  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }

  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}


.fadein {
  -webkit-transition: .6s;
  -o-transition: .6s;
  transition: .6s !important;
  opacity: 0;
  -ms-transform: translate(0, 40px);
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px);
}

.fadein_af {
  opacity: 1.0;
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.fadein-zoom {
  -webkit-transition: .6s;
  -o-transition: .6s;
  transition: .6s !important;
  opacity: 0;

}

.fadein-zoom_af {
  opacity: 1.0;
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}


.del_01 {
  -webkit-transition-delay: 0.2s !important;
  -o-transition-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}

.del_02 {
  -webkit-transition-delay: 0.6s !important;
  -o-transition-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}

.del_03 {
  -webkit-transition-delay: 0.8s !important;
  -o-transition-delay: 0.8s !important;
  transition-delay: 0.8s !important;
}

.del_kv_txt {
  -webkit-transition-delay: 1.2s !important;
  -o-transition-delay: 1.2s !important;
  transition-delay: 1.2s !important;
}


@media only screen and (max-width: 768px) {
  .del_01 {
    -webkit-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
  }

  .del_02 {
    -webkit-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
  }

  .del_03 {
    -webkit-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
  }
}