@charset "UTF-8";

/* googlefont */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;900&display=swap');

/*  header  */

body {
  font-family: 'Noto Sans JP',ヒラギノ,メイリオ, sans-serif;
  position: relative ;
}

body.loading {
  overflow: hidden ;
}

header{
  background-color:#fff;
}

header .btn-question {
  font-size: 30px ;
  line-height: 30px ;
  color: #4BB1F0 ;
  margin-left:15px;
}
header .btn-question:hover {
  opacity: .6 ;
}

header .logo {
  width: 88px ;
  position: absolute ;
  top : calc( 50% - 12.5px) ;
  left: calc( 50% - 44px ) ;
}

header .bg-header {
  background-image: url(../img/xs-bg-img.png) ;
  background-repeat: no-repeat ;
  background-size: cover ;
  padding-bottom: 100px ;
}

header .header-wrap {
  padding: 24px 0 ;
  /* padding: 24px 16px ; */
  display: flex ;
  align-items: center ;
  justify-content: space-between ;
  position: relative ;
  height: 60px ;
}

header .header-wrap-inner {
  width: 100% ;
  display: flex ;
  align-items: center ;
  justify-content: space-between ;
}

header .header-title div {
  margin-top: 136px ;
  font-weight: bold ;
  color: #fff ;
}

header .header-title div p {
  /* font-size: 1.7vw ; */
  font-size: 2.3rem ;
}

header .header-title div span {
  font-size: 1.6rem ;
}

header .header-text div {
  margin: 64px 0 ;
}

header .header-text div p {
  font-size: 23px ;
  font-weight: bold ;
  color: #fff ;
}

header .header-text div img + p {
  margin-bottom: 8px ;
}

header .header-text div p span {
  background-color: #FF9436 ;
  padding: 0 8px 4px ;
  height: 60px ;
}

header .header-text img {
  width: 78px ;
  margin-bottom: 8px ;
}

/* body  */
main{
  padding-top:60px;
}

.simulation-title-wrap {
  background-image: url(../img/bg-title-simulation.png) ;
  background-repeat: no-repeat ;
  background-size: cover ;
  padding: 24px 0 ;
  text-align: center ;
}

.simulation-title-wrap.result {
  background-image: url(../img/bg-title-simulation-result.png) ;
}

.simulation-title-wrap p.title{
  font-size: 25px ;
  line-height: 25px ;
  color: #fff ;
  font-weight: bold ;
}

.manu-wrap {
  background-color: #fff ;
  position: fixed ;
  bottom: 0 ;
  left: 0 ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  padding: 4px 0 ;
  /* padding: 12px 0 ; */
  width: 100% ;
  z-index: 100000001 ;
  box-shadow:1px 0px 10px rgba(0,0,0, .16);
}

header .manu-wrap .btn-consultation {
  /* padding: 16px ; */
  /* font-size:1.2rem; */
}

.btn-published{
  background: -moz-linear-gradient(left, #FF36F0, #FAD7A1);
  background: -webkit-linear-gradient(left, #FF36F0, #FAD7A1);
  background: linear-gradient(to right, #FF36F0, #FAD7A1);
  /* background: -moz-linear-gradient(left, #FF36F0, #A436FE); */
  /* background: -webkit-linear-gradient(left, #FF36F0, #A436FE); */
  /* background: linear-gradient(to right, #FF36F0, #A436FE); */
  color: #fff ;
  font-weight: bold ;
  /* padding: 16px ; */
  padding: 14px ;
  border-radius: 50px ;
  margin-right: 8px ;
  font-size:1.0rem;
  /* font-size:1.2rem; */
  background-size:180% auto;
  transition:.3s;
}
.btn-published:hover {
  /* background: -moz-linear-gradient(right, #FF36F0, #A436FE); */
  /* background: -webkit-linear-gradient(right, #FF36F0, #A436FE); */
  /* background: linear-gradient(to left, #FF36F0, #A436FE); */
  color: #fff ;
  background-position:right center;
  transition:.3s;
}

.btn-consultation ,
.btn-group-simulation .simulation{
  background: -moz-linear-gradient(left, #4BB1F0, #5EFCE8);
  background: -webkit-linear-gradient(left, #4BB1F0, #5EFCE8);
  background: linear-gradient(to right, #4BB1F0, #5EFCE8);
  /* background: -moz-linear-gradient(left, #4BB1F0, #0068C3); */
  /* background: -webkit-linear-gradient(left, #4BB1F0, #0068C3); */
  /* background: linear-gradient(to right, #4BB1F0, #0068C3); */
  color: #fff ;
  font-weight: bold ;
  padding: 16px 40px ;
  border-radius: 50px ;
  border: none;
  background-size:180% auto;
  transition:.3s;
}
.btn-consultation {
  padding: 14px ;
}
.btn-consultation:hover , .btn-group-simulation .simulation:hover{
  /* background: -moz-linear-gradient(right, #48AEEE, #0870C8); */
  /* background: -webkit-linear-gradient(right, #48AEEE, #0870C8); */
  /* background: linear-gradient(to left, #48AEEE, #0870C8); */
  color: #fff ;
  cursor: pointer;
  background-position:right center;
  transition:.3s;
}
.btn-group-simulation .simulation.btn-published{
  background: -moz-linear-gradient(left, #FF36F0, #FAD7A1);
  background: -webkit-linear-gradient(left, #FF36F0, #FAD7A1);
  background: linear-gradient(to right, #FF36F0, #FAD7A1);
  background-size:180% auto;
  transition:.3s;
}
.btn-group-simulation .simulation.btn-published:hover {
  background-position:right center;
  transition:.3s;
}

.btn-group-simulation.top-header {
  margin-top: 24px ;
}

.btn-group-simulation.top-header .simulation.top  {
  background: -moz-linear-gradient(right, #FF8A36, #FF5736);
  background: -webkit-linear-gradient(right, #FF8A36, #FF5736);
  background: linear-gradient(to left, #FF8A36, #FF5736);
  box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.6) ;
  padding: 16px 32px ;
  background-size:180% auto;
  transition:.3s;
}
.simulation.top.second  {
  padding: 18px 54px!important ;
  font-size: 16px!important ;
  line-height: 16px!important;
}
.btn-group-simulation.top-header .simulation.top:hover  {
  /* background: -moz-linear-gradient(left, #FF8A36, #FF5736); */
  /* background: -webkit-linear-gradient(left, #FF8A36, #FF5736); */
  /* background: linear-gradient(to right, #FF8A36, #FF5736); */
  background-position:right center;
  transition:.3s;
}

.btn-group-simulation .simulation{
  display: block ;
  font-size: 14px ;
  order: 1 ;
}

.area-content-wrap {
  background-color: #F7F7F7 ;
  padding: 24px 0 ;
  margin-bottom: 24px ;
}

.area-content-wrap.top {
  margin-top: 24px ;
}

.area-content-wrap .title {
  font-size: 21px ;
  font-weight: bold ;
  padding-bottom: 24px ;
}

.area-content-wrap .title span{
  color: #9AD7FD ;
  font-size: 21px ;
  font-family: 'Oswald', sans-serif ;
  padding-right: 16px ;
  padding-bottom: 24px ;
}

.btn-add {
  text-align: center ;
  border: 1px solid #B9B9B9 ;
  padding: 30px 8px 8px ;
  display: block ;
  border-radius: 8px ;
  background-color: #fff ;
  margin-bottom: 8px ;
  height: 144px ;
  transition: .3s ;
}
.btn-add.group {
  padding: 12px 8px 8px ;
  transition: .3s ;
}

.btn-add:hover {
  padding: 14px 8px 8px ;
  color: #000 ;
  transition: .3s ;
}
.btn-add.group:hover {
  padding: 12px 8px 8px ;
  transition: .3s ;
}

.btn-add .icon , .btn-add.group .icon {
  height: 50px ;
  width: auto ;
  padding-bottom: 8px ;
  transition: .3s ;
}
.btn-add:hover .icon ,  .btn-add.group:hover .icon {
  height: 30px ;
  transition: .3s ;
}

.btn-add .title {
  font-size: 16px ;
  line-height: 16px ;
  font-weight: bold ;
  height: 3rem;
  transition: .3s;
}
.btn-add.group .title {
  height: 48px ;
  transition: .3s;
}
.btn-add.group:hover .title {
  height: 32px ;
  transition: .3s;
}

.btn-add .text , .btn-add.group .text{
  font-size: 12px ;
  font-weight: bold ;
  text-align: left ;
  height: 0 ;
  transition: .3s ;
  overflow: hidden ;
}
.btn-add:hover .text , .btn-add.group:hover .text {
  height: 3em ;
  transition: .3s ;
}

.btn-add .far.fa-plus-square {
  color: #FF3636 ;
  font-size: 18px ;
  line-height: 18px ;
  margin-top: 8px ;
}

.row-lg-mb {
  margin-bottom: 16px ;
}

.simulation table thead tr th {
  background-color: #0068C3 ;
  color : #fff ;
  border: 1px solid #000 ;
  text-align: center ;
  vertical-align: middle ;
  padding: 16px 4px ;
  font-size: 16px ;
}

.simulation table tbody tr th , .simulation table tbody tr td{
  border: 1px solid #000 ;
  text-align: center ;
  vertical-align: middle ;
  padding: 16px 4px ;
}

.simulation table tbody tr th , .simulation table tbody tr td{
  background-color: #fff ;
}

.simulation table tr th , .simulation table tr td{
  min-width: 115px ;
}

.simulation table tbody tr:first-child th , .simulation table tbody tr:first-child td{
  background-color: #EFF9FF ;
}

.simulation table tr th:first-child {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  border-right: none ;
  min-width: 100px ;
}

.simulation table tr td:last-child , .simulation table tr th:last-child{
  min-width: 70px ;
}

.simulation table tr th:first-child + td , .simulation table tr th:first-child + th{
  border-left: none ;
}

.simulation table tr th:first-child::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.simulation table select , .simulation table select:focus , .area-questionary-wrap-inner select , .area-questionary-wrap-inner select:focus , .simulation table input , .simulation table input:focus {
  border: 1px solid #000 ;
  color: #000 ;
  font-size: 11px ;
  font-weight: bold ;
  text-align: center ;
  margin-bottom: 4px ;
  border-radius: 5px ;
  height: 100%;
  padding: 4px 0px ;
}

.simulation table input {
  width: 100% ;
}

td hr {
  border: none ;
  border-bottom: 1px solid #000 ;
  width: 20px ;
}

td p {
  font-size: 13px ;
  font-weight: bold ;
}

.btn-area-select , .btn-age-select {
  background-color: #0068C3 ;
  color: #fff ;
  border: 1px solid #0068C3 ;
  font-weight: bold ;
  padding: 4px 12px ;
  border-radius: 5px ;
  margin-bottom: 4px ;
  display: inline-block ;
}

.btn-age-select:hover , .btn-area-select:hover {
  background-color: #fff ;
  color: #0068C3 ;
  border: 1px solid #0068C3 ;
}

.btn-all-select {
  display: inline-block ;
  color: #0068C3 ;
  font-weight: bold ;
}

.btn-all-select:hover {
  text-decoration: underline ;
}

.form-control + p {
  font-size: 13px ;
  font-weight: bold ;
  padding-bottom: 4px;
  padding-left: 4px;
}

.simulation tr th img.icon {
  height: 40px ;
  width: auto ;
  margin-bottom: 4px ;
}

.simulation tr th img.icon + p{
  font-size: 13px ;
  line-height: 16px ;
  font-weight: bold ;
}

.btn-delete {
  font-size: 16px ;
  color: #0068C3 ;
}

.area-questionary-wrap {
  padding: 16px 24px ;
}

.area-questionary-wrap h3 {
  margin-bottom: 16px ;
}

.area-questionary-wrap-inner {
  padding-bottom: 8px ;
}

.area-questionary-wrap-inner p {
  font-size: 13px ;
  font-weight: bold ;
  padding-bottom: 8px ;
}

.btn-group-simulation {
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  justify-content: center ;
  text-align: center ;
  margin-top: 32px ;
}

.btn-group-simulation .return{
  display: block ;
  font-size: 16px ;
  font-weight: bold ;
  order: 2 ;
  margin-top: 32px ;
}

.area-advertising {
  margin: 96px 0 ;
}

.area-advertising img {
  margin-bottom: 16px ;
}

.error-message {
  background-color: #f5c6cb ;
  text-align: center ;
  padding: 32px 24px ;
}

.error-message p {
  color: #FF3636 ;
  font-size: 16px ;
  font-weight: bold ;
  padding-bottom: 0 ;
}

.simulation.result table tbody tr:first-child th, .simulation.result table tbody tr:first-child td {
  background-color: #4BB1F0 ;
  color: #fff ;
}

.btn-group-simulation i {
  padding-right: 8px ;
}

.simulation.download {
  margin-bottom: 16px ;
}

.form-area-wrap {
  background-image: url(../img/bg-form-img.png);
  background-size: cover ;
  background-repeat: no-repeat ;
  padding: 32px 8px ;
  margin: 80px 0 ;
}

.form-area-wrap-inner {
  background-color: #fff ;
  padding: 48px 8px ;
}

.form-area-wrap h3 {
  font-size: 2.4rem ;
  /* font-size: 30px ; */
  font-weight: bold ;
  padding: 0 0 40px ;
  margin: 0 ;
}

.form-area-wrap p.title {
  background-color: #0068C3 ;
  padding: 8px 0 8px 24px ;
  font-size: 18px ;
  font-weight: bold ;
  margin-bottom: 24px;
  color: #fff ;
}

.form-area-wrap .form-group label {
  font-size: 1.4rem ;
  /* font-size: 16px ; */
  /* font-weight: bold ; */
}

.form-area-wrap .form-group input , .form-area-wrap .form-group select , .form-area-wrap .form-group textarea{
  margin-bottom: 16px ;
  height: 40px;
  font-size: 14px;
  border: 1px solid #7C7C7C ;
}

.form-area-wrap .form-group textarea {
  height: 160px ;
}

.form-area-wrap-section {
  margin-bottom: 48px ;
}

.area-content-top , .area-content{
  margin: 126px 0 ;
  overflow:hidden;
}

.area-content-top-inner .wrap-text-area h3 , .area-content h3{
  font-size: 60px ;
  font-weight: bold ;
  color: #9AD7FD ;
  font-family: 'Oswald', sans-serif ;
  margin: 0  ;
}

.area-content h3 + p.title-bottom{
  font-size: 25px ;
  font-weight: bold ;
  color: #333333 ;
  padding-top: 8px ;
}

.area-content h3 + p.title-bottom.second{
  color: #fff ;
  margin-bottom: 48px ;
}

.area-content-top-inner .img-content{
  margin-bottom: -104px;
  z-index: 10000001;
  position: relative;
}

.area-content-top-inner .wrap-text-area p.title{
  font-size: 25px ;
  font-weight: bold ;
  color: #fff ;
  padding: 16px 0 ;
}

.area-content-top-inner .wrap-text-area p.text{
  /* font-size: 16px ; */
  /* font-weight: bold ; */
  color: #fff ;
  line-height: calc(3.6em/1.6);
}

.area-content-top-inner .wrap-text-area {
  padding: 160px 15px 146px ;
  /* padding: 160px 15.6vw 146px ; */
  background-image: url(../img/img-spacer.svg);
  background-size: cover ;
  background-repeat: no-repeat ;
  background-position: center ;
  margin: 0 -15px ;
  /* margin: 0 -15.6vw ; */
}

.area-content-top-inner .wrap-text-area.wrap-text-area-02 {
  background-image: url(../img/img-spacer-02.svg);
}


.img-content-02 {
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4) ;
}

.wrap-step-content {
  margin: 56px 0 0 ;
}

.wrap-step-content img {
  margin: 32px 0 0 ;
}

.wrap-voice {
  background: -moz-linear-gradient(left, #48AEEE, #0870C8);
  background: -webkit-linear-gradient(left, #48AEEE, #0870C8);
  background: linear-gradient(to right, #48AEEE, #0870C8);
  transform: skewY(-5deg);
  display: flex ;
  justify-content: center ;
  padding: 40px 0 ;
  margin:calc(425vw/96) 0;
}

.wrap-voice > div.container{
  transform: skewY(5deg);
}

.wrap-voice p.title , .wrap-voice p.text{
  font-size: 20px ;
  font-weight: bold ;
  color: #fff ;
  line-height: 33px ;
}

 .wrap-voice p.text{
  font-size: 1.6rem ;
  padding-top: 8px ;
  padding-bottom: 72px ;
  text-align: left ;
  line-height:2.0em;
  font-weight:normal;
}

.wrap-gradation-content {
  margin: 80px 0 ;
  padding: 64px 0 ;
  text-align: center ;
  background: -moz-linear-gradient(left, #48AEEE, #0870C8);
  background: -webkit-linear-gradient(left, #48AEEE, #0870C8);
  background: linear-gradient(to right, #48AEEE, #0870C8);
}

.wrap-gradation-content p {
  font-size: 25px ;
  color: #fff ;
  margin-bottom: 32px ;
}

.wrap-gradation-content a {
  min-width: 230px ;
}

.wrap-marketers-content {
  margin: 80px 0 32px ;
  text-align: center ;
}

.wrap-marketers-content p.marketers-title {
  font-family: 'Oswald', sans-serif ;
  font-size: 60px ;
  color: #9AD7FD ;
}

.wrap-marketers-content h3 {
  font-size: 30px ;
  margin: 24px 0 32px ;
}

.wrap-gradation-people-content {
  background-image: url(../img/bg-img-lg-03.png);
  background-size: contain ;
  background-repeat: no-repeat ;
  background-position: center ;
  padding: 40px 16px 88px;
  text-align: center ;
}

.wrap-gradation-people-content div {
  transform: translateY(48px);
}

.wrap-gradation-people-content p.name {
  color: #fff ;
  padding: 24px 0 ;
  font-size: 18px;
}

.wrap-gradation-people-content p.title {
  color: #fff ;
  padding-bottom: 16px ;
}

.wrap-gradation-people-content p.text {
  color: #fff ;
  padding: 0 24px 24px ;
}

.wrap-gradation-people-content img.img-people {
  max-width: 120px ;
  box-shadow: none ;
}

.wrap-gradation-people-content a.btn.big {
  padding: 4px 8px ;
  margin: 0 auto ;
  font-size: 16px ;
  width: 150px ;
}

.wrap-loading-content {
  position: fixed;
  top: 0;
  z-index: 10000000001;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: -moz-linear-gradient(left, #48AEEE, #0870C8);
  background: -webkit-linear-gradient(left, #48AEEE, #0870C8);
  background: linear-gradient(to right, #48AEEE, #0870C8);
  padding-top:10vh;
}

.wrap-loading-content p {
  margin: 40px 0 24px ;
  color: #fff ;
  font-size: 23px ;
}

.wrap-loading-content img.logo {
  width: 188px ;
}

.wrap-loading-content img.advertising {
  max-width: 532px ;
}

.btn-quick-quote a {
  display: inline-block ;
  position: fixed ;
  right: 4px ;
  bottom: 300px ;
  background-color: #4BB1F0 ;
  padding: 8px ;
  font-size: 12px ;
  color: #fff ;
  border-radius: 31px ;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  z-index: 100000000001 ;
  border: 1px solid #4BB1F0 ;
}
.btn-quick-quote a:hover {
  background-color: #fff ;
  color: #4BB1F0 ;
  border: 1px solid #4BB1F0 ;
}

.area-content-wrap.area-questionary-wrap h3 {
  margin: 0 ;
  margin-bottom: 16px ;
}

.commonBudget + p {
  padding-left: 4px ;
}

.simulation.download , .simulation.mail {
  background: #0870C8 ;
  width: 270px ;
}

.simulation.download:hover , .simulation.mail:hover {
  background: #4BB1F0 ;
}

.wrap-nav-help-content-all {
  padding: 64px 0 40px ;
  /* padding: 120px 0 40px ; */
}

.breadcrumb-item {
  font-size: 12px ;
}

.text-simulation-request {
  margin-top: 80px ;
}

header .header-wrap > div {
  /* position: fixed; */
  width: 100%;
  /* z-index: 10000000001; */
  height: 65px;
  padding: 15px 0;
  /* padding-right: 15px; */
  /* padding-left: 15px; */
  margin-right: auto;
  margin-left: auto;
  top: 0;
  left: 0;
}
header .bg-header.fixed .header-wrap > div {
  position:fixed;
  background-color: #fff ;
  width: 100%;
  z-index: 10000000001;
  box-shadow:1px 0px 10px rgba(0,0,0, .16);
}


/* footer */

footer .footer-logo {
  width: 188px ;
}

footer .footer-wrap {
  padding: 24px 16px ;
  background-image: url(../img/bg-footer-img.png);
  background-repeat: repeat-x;
  /* background-repeat: no-repeat ; */
  background-size: auto 100% ;
  /* background-size: cover ; */
  /* background-position:center center; */
}

footer ul {
  padding: 72px 0 ;
  font-size: 16px ;
  line-height: 32px ;
  font-weight: bold ;
}

footer .copy-right {
  color: #fff ;
  font-family: 'Oswald', sans-serif;
}

footer .footer-logo-wrap {
  text-align: center ;
}

label span.required{
  color:#f00;
  font-size:1.2rem;
}

.wrap-secect-area {
  display: flex ;
  align-items: center ;
}
.wrap-secect-area p{
  padding-left: 2px ;
}

.btn-tooltip {
  margin-bottom: 18px;
  padding: 0;
  margin-left: 4px;
  font-size: 20px;
}

p.select {
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.btn.btn-tooltip.simulation {
  color: #fff ;
  font-size: 16px ;
  margin: 0 ;
  margin-bottom: 3px ;
}

.tooltip-inner {
  max-width: 660px; /* set this to your maximum fitting width */
  width: inherit; /* will take up least amount of space */
  text-align:left;
}