@charset "utf-8";

/*--- reset */

html {
	overflow-y: scroll; 
	font-size: 62.5%;　/*フォントサイズを10pxに設定*/
}
body,
html {  
    height: 100%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
figure{
	margin: 0;
	padding: 0;
}
	
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size:100%;
}


caption {text-align: left;}

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

object,
embed {vertical-align: top;}

h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;}

img,
abbr,
acronym,
fieldset {border: 0;}

img{
	vertical-align: bottom;
	line-height: 0;
}

li {list-style-type: none;}
li img{vertical-align: bottom;}
p{
	text-justify: inter-ideograph;
}

a {color: #021542; text-decoration:none;}
a:hover{opacity:0.7;}
.underline{text-decoration:underline;}

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

.clear:after {
    clear: both;
}

/*hr reset*/
hr {
	border: 0;
	height: 0;
	margin: 0;
	padding: 0;
}
.hr01{
	border-bottom:1px #ccc solid;
}

.fs-letter{letter-spacing:-0.07em !important;}

.f-center{text-align:center !important;}

.fc-orange{color: #f06543;}

.fs-13{font-size: 1.3rem;}
.fs-32{font-size: 4.2rem;}
.fs-42{font-size: 4.2rem;}

.f-bold{font-weight:700;}
.f-normal{font-weight: 400;}
.f-en{
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}


/*margin*/
.mb20{margin:0 0 20px 0;}
.mb40{margin:0 0 40px 0;}
.mb60{margin:0 0 60px 0;}
.mb80{margin:0 0 80px 0;}
.ml40{margin:0 0 0 40px;}

/*padding*/
.pd2{padding:2rem;}
.pd4{padding: 4rem;}
.ptb120{padding:120px 0;}

.img-auto{
	width:100%;
	height:auto;
}
.img-50{
	width:50%;
	height:auto;
}

/*iphone reset*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*====================================
 default 
====================================*/
body {
	background: #fff;
	color: #162d50;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6em;/*18px*/
	font-weight:400;
	line-height: 2;
	text-align: left;
}
#wrap{
  position:relative;
  height:auto;
}
#wrap:before {
    content: "";
    display: block;
}
/*#wrap section*/
.contents{
	width: 1200px;
	margin:0 auto;
	position:relative;
}
.container{
	padding:120px 0;
	position:relative;
}
.flex-bt{
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
}
.flex-center{
    display: flex; 
    justify-content:center;
	align-items: end;
}
.flex-stand{
	display: flex;
	justify-content: flex-start;
}
.flex-wrap{ flex-wrap: wrap;}
.flex-chuo{align-items: center;}
.flex-order1{order:1;}
.flex-order2{order:2;}

.align-c{
	align-items: center;
}

@media screen and (min-width: 769px) {
	.pc-none{
		display:none;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	#nav{
		display: none;
	}
}

/*====================================
 HEADER
====================================*/
header{
	padding: 2rem 0;
}
header img{
	height: 70px;
}
header h1{
	font-size: 1.8rem;
	margin: 0 0 0 2rem;
	line-height: 1.3;
}
.header-cont{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.quocard{
	padding:1.5rem 0;
	background: #4c6ea4;
	color: #fff;
}
.quocard .contents{
	display: flex;
	justify-content: center;
	align-items: center;
}
.quocard figure{
	width: 25%;
	margin: 0 2rem 0 0;
}
.quocard p{
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: 700;
}

/*====================================
 MAIN
====================================*/
.main{
	padding:2rem 0 5rem 0;
	background: #eef2fb;
	position: relative;
}
.main h2{
	width: 1200px;
	margin: 0 auto;
}
.main .btn{
	width: 25%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
/*====================================
 contents
====================================*/
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

/*H2*/
h2, h3, h4{
	line-height:1.4;
	position: relative;
}
h2{
	font-size: 4.2rem;
	margin: 0 0 4rem;
	text-align:center;
	font-weight: 700;
}
h2 .f-en{
	font-size: 2.2rem;
	letter-spacing: 0.4rem;
	color: #c5a929;
	background: -webkit-linear-gradient(0deg, #e7d97b, #c5a929);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h3{
	font-size: 3.5rem;
	color: #4c6ea4;
}

/*cta*/
.cta{
	padding: 2.75rem 0;
	background: #f5f5f5;
}
.cta li:first-child{
	width: 45%;
}
.cta li:last-child{
	width: 50%;
}
.cta .card{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.cta .card p{
	margin: 0 2rem ;
	font-size: 2rem;
	line-height: 1.6;
	font-weight: bold;
}

/*feature*/
.feature{
	padding: 6rem 0 6rem;
}
.feature-img{
	width: 50%;
	padding: 3rem 0 0 0;
	position: relative;
}
.feature-img .number{
	font-size: 1.2rem;
	padding: 1.5rem;
	border-radius: 7rem 7rem 0rem 7rem;
	line-height: 1;
	text-align: center;
	color: #fff;
	background-image: linear-gradient(120deg, #e6d877 0%, #c7aa2b 100%);
	display: inline-block;
	position: absolute;
}
.feature-img .number span{
	font-size: 4rem;
	display: block;
}
.feature-img figure{
	width: 60%;
	margin: 0 auto;
}
.feature li:nth-child(1) .feature-img figure{
	width: 40%;
	margin-right: 20%;
}
.feature li:nth-child(3) .feature-img figure{
	width: 80%;
}
.feature li:nth-child(4) .feature-img figure{
	margin-right: 15%;
}
.feature li:nth-child(5) .feature-img figure{
	width: 70%;
	margin-right: 10%;
}
.feature li:nth-child(6) .feature-img figure{
	width: 80%;
	margin-right: 15%;
}
.feature li{
	padding:4rem 0 ;
	border-bottom: 1px solid #eee;
}
.feature li:last-child{
	border-bottom: none;
}
.feature-txt{
	width: 48%;
}

/*company*/
.company{
	background-image: linear-gradient(to top, #f1f4fb 0%, #dce3f6 100%);
}
.company ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.company li{
	width: 18%;
	margin: 0 2% 2rem 0;
	background: #fff;
}
.company li img{
	width: 100%;
}

/*adviser*/
.adviser-box{
	width: calc(48% - 8rem);
	margin: 6rem 0 0;
	padding: 4rem;
	background: #fff;
	border-radius: 1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	position: relative;
}
.adviser-box .subttl{
	text-align: center;
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}
.adviser-box .subttl span{
	font-size: 1.8rem;
	padding: 0.75rem 1.5rem;
	background-image: linear-gradient(180deg, #e6d877 0%, #c7aa2b 100%);
	color: #fff;
	letter-spacing: 0.5rem;
	border-radius: 0.5rem;
}
.adviser-box h3{
	font-size: 2.6rem;
	margin:0 0 2rem 0;
	text-align: center;
}
.adviser-box h3 span{
	font-size: 3.6rem;
}

/*flow*/
.flow{
	background-image: linear-gradient(to top, #5979ac 0%, #426198 100%);
}
.flow h2{
	color: #fff;
}
.flow ul{
	width: 80%;
	margin: 0 auto;
}
.flow li{
	margin: 9rem 0 0;
	padding: 4rem;
	background: #fff;
	border-radius:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: relative;
	display: flex;
	justify-content: space-between;
}
.flow li::before{
	width: 160px;
	height:34px;
	top: -3.4rem;
	left: 4rem;
	content: '';
	position: absolute;
}
.flow li:nth-of-type(1)::before{
	background: url("../images/feature-01.png") no-repeat left 0 / auto 34px;
}
.flow li:nth-of-type(2)::before{
	background: url("../images/feature-02.png") no-repeat left 0 / auto 34px;
}
.flow li:nth-of-type(3)::before{
	background: url("../images/feature-03.png") no-repeat left 0 / auto 34px;
}
.flow li:nth-of-type(4)::before{
	background: url("../images/feature-04.png") no-repeat left 0 / auto 34px;
}
.flow li:nth-of-type(5)::before{
	background: url("../images/feature-05.png") no-repeat left 0 / auto 34px;
}
.flow li::after{
	width: 34px;
	height: 19px;
	background: url("../images/arrow-down.png") no-repeat 0 0 / auto 19px;
	content: '';
	position: absolute;
	bottom: -3rem;
	left: 50%;
	transform: translateX(-50%);
}
.flow li:last-child::after{
	content: none;
}
.flow li figure{
	width: 10%;
}
.flow li dl{
	width: 85%;
}
.flow li dt{
	font-size: 2.6rem;
	color: #174998;
	font-weight: 700;
}

/*voice*/
.tab-area {
	padding: 2.5rem;
	border-radius: 1rem;
	display: flex;
	flex-wrap: wrap;
	cursor: pointer;
	background: #e9eefa;
}
.tab-area li::after{
	width: 12px;
	height: 7px;
	background: url("../images/arrow-down-k.png") no-repeat right 0 / 12px auto;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	content: '';
}
.tab-area li {
	padding: 1rem 3rem 1rem 1rem;
	margin: 0 2rem 0 0;
	width: calc((100% / 2) -4rem);
	font-weight: 700;
	position: relative;
}
.tab-area li.active {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 7px rgba(0,0,0,0.15);
}
.panel {
	width: 80%;
	margin: 10rem auto 0 auto;
	padding:4rem;
	background: #fff;
	border-radius:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	display: none;
	position: relative;
}
.panel.active {
	display: block;
}
.panel h3 {
	font-size: 2.6rem;
	padding:2.5rem;
	width: calc(80% - 5rem);
	top: -6rem;
	left: 50%;
	text-align: center;
	transform: translateX(-50%);
	color: #fff;
	border-radius: 1rem;
	background: #4c94a4;
	position: absolute;
}
.panel h3::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translate(-50%, 0);
	border-width:10px;
	border-color: #4c94a4 transparent transparent transparent;
}
.voice .profile{
	margin:6rem 0 4rem;
	display: flex;
	align-items: center;
}
.voice .profile figure{
	width: 15%;
	margin: 0 4rem 0 0;
}
.voice h4{
	font-size: 2.6rem;
}
.voice .san{
	font-size: 2rem;
	margin: 0 2rem 0 0;
}
.voice .category{
	padding: 0.5rem 1rem;
	font-size: 1.4rem;
	color: #3b6bb5;
	border: 1px solid #3b6bb5;
	border-radius: 0.5rem;
}
.voice .profile p{
	margin: 1rem 0 0;
}
.voice .about{
	margin: 4rem 0 0;
	padding: 3rem;
	border-radius: 1rem;
	background: #e9eefa;
}
.voice .about dl{
	display: flex;
}
.voice .about dt{
	width: 20%;
	font-weight: 700;
	position: relative;
	color: #4c6ea4;
}
.voice .about dt::before{
	content: '● ';
	color: #dbc74f;
}

/*faq*/
.faq{
	background-image: linear-gradient(to top, #5fa2b0 0%, #3d8192 100%);
}
.faq h2{
	color: #fff;
}
.faq dl{
	padding: 4rem;
	background: #fff;
	border-radius:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.faq dt{
	font-size: 2.6rem;
	padding: 0 3rem 0 9rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}
.faq dl .btn_toggle {
	position: relative;
}
.faq dl .btn_toggle::before{
	width: 60px;
	height: 60px;
	background: url("../images/q-icon.png") no-repeat left 0 / 60px auto;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
}
.faq dl .btn_toggle::after{
	font-size: 3rem;
	font-weight: 700;
    content: '＋';
	color: #162d50;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.faq dl .active::after {
	content: '－';
}
.faq dd {
	border-top: 1px solid #ddd;
	margin: 4rem 0 0;
	padding: 2rem 0 0;
	display: none;
}

/*chance*/
.chance .graph{
	width: calc(80% - 12rem);
	margin: 0 auto;
	padding:6rem 6rem 4rem 6rem;
	background: #fff;
	border-radius:1.5rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: relative;
}
.chance h2{
	margin: 0;
}
.chance h3{
	color: #162d50;
}
.chance h4{
	font-size: 2.2rem;
	padding: 1.5rem 2.5rem;
	top: -4rem;
	left: 4rem;
	color: #fff;
	background: -webkit-linear-gradient(0deg, #3d5b92, #5f7fb0);
	border-radius: 2rem 2rem 0 2rem;
	display: inline-block;
	position: absolute;
}
.chance h4 span{
	font-size: 3rem;
}
.chance figure{
	width: 40%;
	margin: 0 auto;
}
.chance .graph figure{
	width: 100%;
}

/*contact*/
.contact{
	padding: 6rem 0 0;
	background: #f5f5f5;
}
.contact h2 .step{
	font-size: 1.8rem;
	padding: 0.25rem 1rem;
	color: #4c6ea4;
	border: 1px solid #4c6ea4;
	border-radius: .5rem;
}


/*footer*/
footer{
	border-top: 4px solid #000;
	font-size: 1.4rem;
	padding:4rem 0;
	background:#fff;
}
footer .contents{
	width:700px;
}
footer a{
	text-decoration: underline;
}
footer figure{
	width: 40%;
	margin: 4rem auto;
}
footer .copy{
	font-size: 1.2rem;
	text-align: center;
}

/*pagescroll*/
#scrollUp {
    bottom: 0;
    right: 0;
}

/*btm-bnr*/
.btm-bnr {
	padding: 1.75rem 0;
	z-index: 100;
    bottom: 0;
    width: 100%;
	background: rgba(0,0,0,0.2);
}
.btm-bnr .contents{
	width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 0;
}
.btm-bnr p{
	margin: 0 -4.5rem 0 0;
	position: relative;
	z-index: 2;
}
.btm-bnr p img{
	width: 90%;
}
.btm-bnr a:hover{
	opacity: 1;
}
.btm-bnr figure{
	width:42%;
	border-radius: 1.5rem;
}
.sp_br {
	display: none;
}
.bg-gray {
	background:#f5f5f5;
}
.intro-list{
	padding: 4rem;
	width: calc(55% - 8rem);
}
.intro-list dl:first-child{
	border-bottom: 1px solid #000;
	padding: 0 0 2rem 0;
	margin: 0 0 2rem 0;
}
.intro-list dl{
	display: flex;
	justify-content: flex-start;
}
.intro-list dt{
	font-size: 2.4rem;
	color: #79181d;
}
.intro-list dd{
	margin: 0 0 0 2rem;
}
.feature_new{
	padding: 12rem 0 0;
}
.fs-36 {
	font-size:3.6rem;
}
.ptb60 {
	padding:60px 0;
}
.webmendan figure{
	margin: -2rem 0 -3rem 0;
	text-align: center;
}
.webmendan dl{
	padding: 6rem;
	background: #fff;
	text-align: center;
}
.webmendan dt{
	margin: 0 0 2rem 0;
	font-weight: 700;
}
.webmendan_title {
	font-size:3rem;
	font-weight: 700;
	margin: 0 0 4rem 0;
	text-align:center;
}
.fs-24{
	font-size:2.4rem;
	color: #4c6ea4;
}
.orange {
	color: rgba(240,100,70,1.00)
}
.slidein_top {
  animation: slidein_top 0.5s;
}
@keyframes slidein_top {
  0% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce {
	animation:bounce 1s linear infinite;
}
@keyframes bounce {
 0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  50% {
    transform: scale(0.95);
    -webkit-transform: scale(0.95);
  }
}
.yurayura {
	animation: yurayura 0.5s infinite alternate ease-in-out;
}
@keyframes yurayura {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
.finger {
	position: absolute;
	right: 200px;
	bottom: 0px;
}
.finger img {
	width: 120px;
}
@media screen and (max-width: 768px) {
.finger {
	right: -10px;
	bottom: 4px;
}
.finger img {
	width: 80px;
}
}