@charset "utf-8";
body{
overflow: hidden;
}
.inner {
  width: 1260px;
  margin: 0 auto;
  font-feature-settings: "palt";
  letter-spacing: 2px;
color: #04003f;
}

.flex {
  display: flex;
  justify-content: center;
}

.pc_only {
  display: block !important;
}

.sp_only {
  display: none !important;
}
.min{
font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.go{
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.mv {
  background: url("../img/common/mv.jpg") no-repeat top center;
  background-size: cover;
  padding-bottom: calc(65vw + 10px);
  position: relative;
  overflow: hidden;
}
.wh {
  color: #fff!important;
}
.red {
  color: #c20000!important;
}

.grn {
  color: #01b302!important;

}
.bl{
  color: #0085bc!important;
}
.bk{
  color: #000!important;
}
.nv{
  color: #002967!important;
}
.org{
  color: #ea9204!important;
font-weight: 900;
}
.yel {
    color: #fcf300!important;
    font-weight: 700;
}
.bg-lbl{
background: #f6fbff;
}
.bg-lbl02{
background: #e4f0f9;
}
.bg-gry{
	background: #f4f4f4;
}

.btn01 {
  color: #04003f;
  margin-bottom: 20px;
	animation-name: dokidoki;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 2s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite;
    /* アニメーションをループさせる */
    display: block;
	overflow: hidden;
	text-align: center;
}
.btn01 img{
  width: 100%;
}
.btn01 a::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -200px;
  left: 0;
  width: 60px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite;
}
.bd01{
	border: solid 10px #00366d;
}
.bd02{
	border: solid 10px #0085bc;
}
.note {
    font-size: 22px;
	text-align: left;
	padding-left: 4em;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.note .txt-in {
    text-indent: 1em;
    display: block;
	
}
.cta{
	position: relative;
	padding-top: 100px;
	background: #e4f0f9;
	margin-top: -10px;
	
}
.sec-cta{
	padding-bottom: 100px;
	padding-top: 20px;
	z-index: 1;
}
.sec-cta.ft{
	padding-top: 100px;
}
.cta-box{
	padding: 60px 0;
	background: #fff;
	text-align: center;
	margin-bottom: 30px;
}
.cta-box .cta-ttl{
	font-size: 55px;
	text-align: center;
}
.cta-box .cta-ttl .sub-ttl{
	margin-bottom: 20px;
}
.cta-box .cta-ttl span{
	display: block;
}
.cta-box .cta-ttl .ttl01{
	display: block;
	margin: 0 auto 30px;
}
.read{
	position: relative;
	font-size: 55px;
	line-height: 1.3;
	display: flex;
    justify-content: center;
    align-items: end;
}
.read .ttl01{
	width: 90%;
	padding-right: 10px;
	margin-bottom: 20px;
}
.read::before{
content: "";
    display: inline-block;
    width: 420px;
    height: 345px;
    background: url(../img/top/anime-01.png) center/ 100%;
    background-repeat: no-repeat;
    margin-right: 20px;
}

.read strong{
	font-size: 65px;
}
.read small{
	font-size: 42px;
}

.user{
	padding-top: 100px;
	
}
.user h2{
	font-size: 50px;
	text-align: center;
	margin-bottom: 60px;
}
.user .sub-ttl{
	font-size: 65px;
	color: #0085bc;
}
.user .sub-ttl::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f309";
  padding-right: 20px;
color: #002967;
}
.user .sub-ttl::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f309";
  padding-left: 20px;
color: #002967;
}
.user .li-box{
	margin-bottom: 80px;
}
.user .li-box li{
  background: #eafafe;
border-radius: 30px;
	padding: 10px 30px;
	display: flex;
	align-items: center;
	font-size: 42px;
	margin-bottom: 20px;
	min-height: 100px;
}
.user .li-box li:last-child{
	margin-bottom: 0;
}
.user .li-box li::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
  padding-right: 20px;
color: #0085bc;
}
.user .voice{
	border: solid 1px #002967;
	padding-bottom: 60px;
	margin-bottom: 60px;
}
.user .voice:nth-child(odd){
	background: #f7feff;
}
.user .voice:nth-child(even){
	background: #eafaff;
}

.user .voice .ttl-vo{
	font-size: 42px;
	padding: 60px 0 10px;
	border-bottom: solid 4px #002967;
	width: 95%;
	margin: 0 auto 30px;
}
.user .voice .flex{
	font-size: 28px;
	padding: 0 10px;
	width: 95%;
	margin: 0 auto;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    align-items: center;
}
.user .voice .txt{
line-height: 1.8;
}
.user .voice .user-ph{
	margin-right: 20px;
	text-align: center;
}
.user .voice:nth-child(even) .user-ph{
	margin-right: 0;
	margin-left: 20px;
}
.user .voice .user-ph p{
	font-size: 26px;
}
.point{
	padding: 130px 0 30px;
}
.point h3{
	font-size: 55px;
	text-align: center;
	margin-bottom: 80px;
}
.point h3 img{
	margin-bottom: 10px;
}
.point .point-li{
	flex-wrap: wrap;
	margin-right: -15px;
}
.point ul{
	position: relative;
	border: 1px #002967 solid;
	border-radius: 10px 10px 0 0;
	box-shadow: 4px 4px 6px -1px rgba(0,0,0,0.3);
	margin-right: 15px;
	margin-bottom: 80px;
}
.point ul::before{
	content: "";
	position: absolute;
	margin: auto;
	right: 0;
	left: 0;
	top: -50px;
	width: 104px;
	height: 104px;
background: url("../img/top/i-pt01.png") top / 100%;
  background-repeat: no-repeat;
}
.point ul:nth-child(2)::before{
background: url("../img/top/i-pt02.png") top / 100%;
}
.point ul:nth-child(3)::before{
background: url("../img/top/i-pt03.png") top / 100%;
}
.point ul:nth-child(4)::before{
background: url("../img/top/i-pt04.png") top / 100%;
}
.point ul:nth-child(5)::before{
background: url("../img/top/i-pt05.png") top / 100%;
}
.point ul:nth-child(6)::before{
background: url("../img/top/i-pt06.png") top / 100%;
}
.point ul:nth-child(7)::before{
background: url("../img/top/i-pt07.png") top / 100%;
}

.point li{
	color: #002967;
	font-size: 30px;
	font-weight: bold;
}
.point li:first-child{
	min-height: 170px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-top: 40px;
}
.con-bg {
	position: relative;
  background: url("../img/top/con-bg.jpg") no-repeat center/cover;
  width: 100%;
  height: 40vh;
}
.con-bg .box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
background:rgba(255,255,255,0.8);
padding: 45px 65px;
width: 65%;
color: #000;
}
.con-bg .box h4{
  font-size: 60px;
	text-align: center;
	margin-bottom: 10px;
}
.con-bg .box p{
  font-size: 28px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
}
.ques{
	padding: 100px 0;
}
.ques .read::before {
    background: url(../img/top/anime-02.png) center/ 100%;
	width: 352px;
	height: 336px;
	background-repeat: no-repeat;
}
.ques .read strong {
    background: #0085bc;
	box-shadow: 5px 4px 0px 0px rgba(85, 157, 205, 0.7);
	color: #fff;
	border-radius: 100px;
	font-size: 50px;
	display: block;
	text-align: center;
	margin-bottom: 40px;
}
.reason{
	padding: 60px 0;
	position: relative;
	z-index: 2;
}
.reason::before {
    content: "";
    display: inline-block;
    top: -40px;
    left: 0;
    width: 100%;
    height: 50px;
    background: url("../img/common/bg-maru.png") left top repeat-x;
    position: absolute;
}
.reason::after {
    content: "";
    display: inline-block;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 110px;
    background: url("../img/common/bg-maru.png") left top repeat-x;
    position: absolute;
}
.reason .fs{
	font-size:65px;
	text-align: center;
	margin-bottom: 30px;
}
.reason .txt{
    text-align: center;
	font-size:45px;
	margin-bottom: 30px;
}
h5{
    text-align: center;
	font-size:80px;
	color: #fff;
	background: #0085bc;
	font-feature-settings: "palt";
  letter-spacing:0;
	margin-bottom: 80px;
}
.reason h5 small{
	font-size:60px;
}
	h5 span{
	color: #0085bc;
	background: linear-gradient(transparent 0%, #fcf300 0%);
}
.reason .box{
	border: dashed 4px #0085bc;
	border-radius: 20px;
	font-size:38px;
	box-shadow: 4px 4px 6px -1px rgb(0 0 0 / 30%);
	padding: 50px 40px;
	margin-bottom: 50px;
}
.icon{
	color: #fff;
	background: #0085bc;
	border-radius: 100px;
	display: inline;
	padding: 10px 20px;
}
.reason .box .flex{
	align-items: center;
	align-content: center;
	justify-content: space-around;
}
.reason .box .ttl{
	margin-right: 30px;
	color: #0085bc;
}

.line-yel {
    background: linear-gradient(transparent 80%, #fcf300 0%);
	
}
.line-yel2 {
    background: linear-gradient(transparent 98%, #fcf300 0%);
	padding-bottom: 5px;
}
.line-grn {
    background: linear-gradient(transparent 0%, #01b302 0%);
}
#intro{
	margin-bottom: 80px;
}
#intro h5{
	position: relative;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
#intro h5:before, #intro h5:after {
  border-top:4px solid #fff;
  content: "";
  width: 2em; /* 線の長さ */
}
#intro h5:before {
  margin-right: 0.5em; /* 文字の右隣 */
}
#intro h5:after {
  margin-left: 0.5em; /* 文字の左隣 */
}
#intro .txt {
    font-size: 28px;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
}
#intro .icon {
    color: #002967;
    background: #fff;
	box-shadow: 2px 2px 0px 0px rgb(85 157 205 / 70%);
	border: solid 3px #002967;
    padding: 10px 20px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
#intro .name {
	margin-top: 20px;
    font-size: 50px;
	color: #000;
	font-weight: bold;
	margin-bottom: 20px;
}
#intro .name small{
	font-size: 25px;
	padding-left: 10px;
}
#intro .name span{
    display: block;
	font-size: 28px;
	font-weight: normal;
}
#intro .txt p{
    font-size: 28px;
	line-height: 1.8;
}
#intro .txt p.bold{
    margin-bottom: 20px;
}
#intro .txt p span{
    font-size: 35px;
}
#intro .txt .ph{
    float: right;
	shape-outside: circle(50%);
	margin-left: 10px;
}
#intro .box3{
	margin-top: 40px;
	font-size: 34px;    
	width: 50%;
 
}

#intro .box3 p{
	font-size: 22px;
	margin-bottom: 10px;
	padding:0 10px;
}
#intro .box3:first-child{
	margin-right: 40px;
}
#intro .box3 .ttl02{
	 padding: 1rem 2rem;
  border-left: 5px solid #0085bc;
	border-bottom: 1px solid #0085bc; 
	margin-bottom: 10px;
color: #0085bc; 
}
#intro .box3 .ph{
	text-align: center;

}
.cp {
padding: 60px 0;
}
.cp .icon{
font-size: 50px;
box-shadow: 5px 4px 0px 0px rgb(85 157 205 / 70%);
padding: 10px 70px;
}
.cp .flex{
margin-top: 60px;
border: dashed 4px #0085bc;
background: #fff;
padding: 70px 0;
justify-content: space-evenly;
}
.cp ul{
position: relative;
width: 32%;
}
.cp li:first-child{
font-family: Copperplate, "Copperplate Gothic Light";
font-size: 55px;
background: #0085bc;
	color: #fff;
	text-align: center;
	border-radius: 20px;
	padding:0 10px;
	margin-bottom: 20px;
}
.cp li:last-child{
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
font-size: 35px;
	color: #000;
	margin-top: 20px;
	font-weight: bold;
}
	

.cp .arrow{
	width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent transparent transparent #00366d;
margin-top: 15%;
}
footer {
  position: relative;
  background: #04003f;
  padding: 40px 0;
}

footer .flex {
  justify-content: end;
	flex-wrap: wrap;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
}

footer li a:link {
  color: #fff;
  border-bottom: solid 1px #FFF;
  padding-bottom: 10px;
	display: inline-block;
}

footer li {
  margin-right: 20px;
}

footer li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35d";
  padding-right: 5px;
}


/*リンクの形状*/

#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0085bc;
  border-radius: 100px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 4rem;
  transition: all 0.3s;
  z-index: 9999;
}

#page-top a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f106";
}


/*リンクを右下に固定*/

#page-top {
  position: fixed;
  right: 10px;
  z-index: 2;
  bottom: 20px;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}



@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*　下に下がる動き　*/

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}

.btn-cp {
  position: fixed;
  left: 0px;
  bottom: 40%;
  z-index: 999;
  width: 150px;
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	

}

.btn-cp a {
  background: linear-gradient(135deg, rgb(242, 213, 15) 0%, rgb(218, 6, 65) 100%);
  display: block;
  color: #fff;
	border:solid 2px rgb(242, 213, 15);
  width: 20%;
  /* margin-right: -6%; */
  padding: 30px 30px 30px 20px;
  border-radius: 0 30px 30px 0;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

.btn-cp:hover {
  left: -10px;
  transition: all 0.5s ease;
}

.btn-cp a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f06b";
  padding-top: 3px;
}


@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}


/*funnel*/

#funnel .movie {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 40%;
  height: 0;
  position: relative;
  width: 70%;
  overflow: hidden;
  margin-bottom: 100px;
}

#funnel .movie iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#funnel .movie a{
  /* lityを動かすためにiframeを覆う */
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#funnel .sec-box {
    padding-top: 100px;
    padding-bottom: 10px;
	margin-top: -10px;
}
#funnel .sec-box h2{
	color: #fff;
    background: #0085bc;
	font-size: 50px;
	text-align: center;
	border-radius: 30px 30px 0 0;
	padding: 10px 0;
}
#funnel .sec-box .box{
	font-size: 50px;
	border-radius: 0 0 30px 30px;
	overflow: hidden;
	margin-bottom: 60px;
}
#funnel .sec-box .box .txt small{
	font-size: 42px;
	display: block;
	  font-feature-settings: "palt";
  letter-spacing: 0;
}
#funnel .sec-box .box .flex{
    padding:20px 0;
	align-items: center;
	justify-content: space-evenly;
	background: #fff;
	text-align: center;
}

#funnel .navi {
  background: #e4f0f9;
  padding: 10px 0;
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
}

#funnel.fn4 .navi {
  margin-bottom: 0;
}

#funnel .navi .flex {
  padding: 20px 0;
}

#funnel .navi ul {
  background: #fff;
  border-radius: 10px;
	border: dashed 4px #52acd2;
  font-size: 32px;
  position: relative;
  margin-right: 20px;
  width: 25%;
}

#funnel .navi ul a {
  display: block;
color: #04003f;
display: block;
}

#funnel .navi ul:last-child {
  margin-right: 0;
}

#funnel .navi li:first-child {
  background: #0085bc;
  color: #fff;
  text-align: center;
  padding: 10px 0;
border-bottom: dashed 4px #fff;
border-radius: 5px 5px 0 0;
}

#funnel .navi li:last-child {
	text-align: center;
    display: grid;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 130px;
	color: #0085bc;
}

#funnel .navi li:last-child span {
font-family: Copperplate, "Copperplate Gothic Light";
  font-weight: 700;
  font-size: 20px;
  display: block;
}

#funnel .navi ul.cs::before {
  content: '-coming soon-';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: rgba(203, 229, 242, 0.7);
font-family: Copperplate, "Copperplate Gothic Light";
  font-weight: 700;
  font-size: 26px;
	color: #0085bc;

}
#funnel .cp02{
	padding-top: 100px;
}
#funnel .cp02 .ttl{
	text-align: center;
	color: #fff;
	letter-spacing: -1px;
}
#funnel .cp02 .ttl .arrow-b::before,
#funnel .cp02 .ttl .arrow-b::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f063";
	animation: updown 2s infinite ease-in-out;
    transform: translate(-10%, -10%);
    display: inline-block;
}
#funnel .cp02 .ttl .arrow-b::before{
	margin-right: 5px;
}
#funnel .cp02 .ttl .arrow-b::after{
	margin-left: 5px;
}
#funnel .cp02 h3{
	background: #ce0808;
	font-size: 105px;
position: relative;
}
#funnel .cp02 h3::before{
    content:"";
    position: absolute;
	top: -150px;
    left: -80px;
    width:265px;
    height:255px;
	background: url("../img/common/i-present.png") center/ 100%;
	background-repeat: no-repeat;
}
#funnel .cp02 .box{
	font-size: 42px;
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;	
	padding: 50px 40px;
	font-weight: bold;
	margin-bottom: 30px;
	font-feature-settings: "palt";
  letter-spacing:0;
	text-align: center;
}
#funnel .cp02 .bd-red{
	border: dashed 4px #ce0808;
	border-top:none; 
}

#funnel .cp02 .bd-bl{
	border: dashed 4px #0085bc;
	border-top:none; 
}
#funnel .cp02 h4{
	background: #0085bc;
	font-size: 50px;
position: relative;
	padding: 20px 0;
}
#funnel .cp02 h4::after{
    content: '';
    position: absolute;
    top: 99%;
    left: 0;
	right: 0;
	margin: auto;
    width: 0;
    height: 0;
    border-top: 40px solid #0085bc; /* 好みで高さ色を変えてください */
    border-left: 100px solid transparent;
    border-right:100px solid transparent;
}
#funnel .cp02 .bd-bl{
	font-weight: normal;
}
#funnel .cp02 .bl02{
	font-weight: normal;
	margin-bottom: 0;
	border-bottom: none;
}
#funnel .cp02 .bd-bl .min{
	font-size: 50px;
	margin: 10px 0;
	text-align: center;
}
#funnel .cp02 .bd-bl .txt.red{
	font-size: 85px;
	margin: 10px 0;
	text-align: center;
	font-weight: bold;
}
#funnel .cp02 .i-p{
    font-size: 80px;
}
#funnel .cp02 .i-p::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06b";
    padding-right: 10px;
	color: #fff;
}
#funnel .cp02 .i-p::after{
    display: none;
}
#funnel .cp02 ul {
    margin: 20px auto 0;
    position: relative;
    width: 33%;
    padding: 0 20px 10px;
    border-right: dashed 1px #c2c2c2;
}
#funnel .cp02 ul:last-child{
    border-right: none;
}
#funnel .cp02 li:first-child{
   text-align: center;
	margin-bottom: 10px;
}


#funnel .cp02 ul a{
    color: #000;
	display: block;
}
#funnel .cp02 ul li:last-child em {
    animation-name: dokidoki;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    display: inline-block;
	background: #01b302;
	color: #fff;
	border-radius: 100px;
	padding: 10px 20px;
	font-size: 22px;
	font-weight: bold;
	font-feature-settings: "palt";
	box-shadow: 2px 4px 0px 0px #276800;
	position: relative;
	margin-top: 10px;
	width: 88%;
	display: flex;
    justify-content: center;
    align-items: center;

}
#funnel .cp02 ul li:last-child em:hover{
	opacity: 1;
    margin-left:5px;
    box-shadow:none;
}
#funnel .cp02 ul li:last-child em::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f138";
	margin-left: 5px;
 
}
#funnel .cp02 .bl02 .txt{
	text-align: left;
}

#funnel .icon2{
	border: dashed 2px #ea9204;
	color: #ea9204;
	background: #fff;
	border-radius: 100px;
	padding:5px 10px;
    text-align: center;
	display: inline-block;
	margin-bottom: 20px;
	font-weight: 900;
}
#funnel .icon2.ft-cp{
	font-family: Copperplate, "Copperplate Gothic Light";
	
}
#funnel .sec-box .box .cont-box{
	position: relative;
	padding: 50px 40px;
	font-size: 30px;
	background: #fff;
	align-items: flex-start;
}

#funnel .sec-box .box .cont-box::after{
	content: "";
	display:block;
   width:95%;
   height:4px;
   background-color:#002967;
   position:absolute;
   bottom:0;
   left:0;
	right: 0;
	margin: auto;

}
#funnel .sec-box .box .cont-box:last-child::after{
	display: none;
}
#funnel .sec-box .box .cont-box .ph img{
	max-width: 600px;
}
#funnel .cont-box .time{
	color: #0085bc;
	font-size: 30px;
}
#funnel .cont-box .time::before{
    font-family: "Font Awesome 5 Free";
    content: "\f017";
    padding-right: 10px;
	font-weight: bold;
	color: #0085bc;;
}
#funnel .sec-box .box .cont-box .txt{
	margin-right: 30px;
}
#funnel .sec-box.last{
    padding-bottom: 50px;
}
#funnel .sec-box.last .box {
    border-radius: 0;
}

@media screen and (max-width: 1200px) {
  .inner {
    width: 98%;
    margin: 0 auto;

  }
}

@media screen and (max-width: 1100px) {
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
  body {
    position: relative;
  }
  img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
    width: auto;
  }
  .inner {
    width: 95%;
    margin: 0 auto;
  }
	
  .mv {
    background: url("../img/sp/mv.jpg") no-repeat top center;
	background-size: cover;

}
	.btn-cp a {
    padding: 10px;
    border-radius: 10px;
    width: auto;
    writing-mode: unset;
    letter-spacing: 0;
}
	.bd01 {
    border: solid 5px #00366d;
}
	.cta {
    padding-top: 50px;
	margin-top: 0;
}
	.cta-box .cta-ttl {
    font-size: 38px;
}
	.cta-box .cta-ttl .ttl01 {
    margin: 0 auto 20px;
    width: 80%;
}
	.note {
    font-size: 18px;
    padding-left: 2em;
}	
	.read::before {
    width: 30%;
	height:200px;
}	
	.read .ttl01 {
    width: 70%;
    margin-bottom: 10px;
}
	.read strong {
    font-size: 42px;
}
	.read {
    font-size: 38px;
	align-items: center;
	}
	.read small {
    font-size: 32px;
}
	.user {
    padding-top: 40px;
}
	.user h2 {
    font-size: 38px;
    margin-bottom: 30px;
}
	.user .sub-ttl {
    font-size: 50px;
}
	.user .li-box li{
    font-size: 32px;
}
	.user .voice .ttl-vo {
    font-size: 32px;
    padding: 30px 0 10px;
    border-bottom: solid 2px #002967;
    margin: 0 auto 20px;
}
	.user .voice .flex {
    font-size: 22px;
}
	.user .voice .user-ph p {
    font-size: 18px;
}
	.point h3 img {
    width: 70%;
}
	.point h3 strong{
    vertical-align: middle;
	padding-left: 10px;
}
	.point h3 {
    font-size: 38px;
    margin-bottom: 80px;
}
	.con-bg .box h4 {
    font-size: 38px;
}
	.con-bg .box p {
    font-size: 22px;
}
	.ques .read::before {
    width: 25%;
    height: 220px;
}
	.ques .read strong{
		font-size: 32px;
		padding: 10px 0;
	}
	.ques {
    padding: 40px 0 60px;
}
	.reason::before {
    top: -30px;
    background-size: 10%;
}	
	.reason::after {
    bottom: -80px;
    background-size: 10%;
}	
	.reason .fs {
     font-size: 38px;
    margin-bottom: 15px;
}
	.reason .txt {
    font-size: 32px;
}
	h5 {
    font-size: 55px;
    margin-bottom: 80px;
	line-height: 1.3;
	padding: 10px 0;
}
	.reason h5 small {
    font-size: 38px;
}
	.reason .box{
    font-size: 28px;
}
	.reason .box .ttl {
    margin-right: 20px;
    width: 80%;
}
	#intro .name {
    font-size: 32px;
}
	#intro .txt p span {
    font-size: 28px;
}

	#intro .txt p {
    font-size: 26px;
}
	
	#intro .name span {
    font-size: 22px;
}
	.cp .icon {
    font-size: 28px;
    padding: 10px 20px;
}
	.cp li:last-child {
    font-size: 28px;
    margin-top: 10px;
}
	
	
	.btn-cp {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 999;
    width: 75%;
}
#funnel .sec-box h2 {	
	font-size: 38px;
	}
#funnel .sec-box .box {
    font-size: 22px;
	margin-bottom: 10px;
}	
#funnel .sec-box .box .txt small {
    font-size: 24px;
    display: block;
	text-align: center;
	line-height: 1.3;
}	
#funnel .sec-box .box .ph {
    margin-right: 10px;
}	
#funnel .movie {
    margin-bottom: 40px;
    padding-bottom: 55%;
    width: 100%;
}	
#funnel .navi ul{
    font-size: 22px;
	margin-right: 5px;
	border: dashed 2px #52acd2;
	padding-bottom: 5px;
}	
	#funnel .navi li:first-child{
	border: dashed 2px #52acd2;	
	}
	#funnel .navi li:last-child span,
	#funnel .navi ul.cs::before{
		text-align: center;
		font-size: 20px;
		line-height: 1.2;
	}
	
	#funnel .cp02 h3 {
    font-size: 55px;
}
#funnel .cp02 h3::before {
    top: -125px;
    left: -30px;
    width: 20%;
    height: 200px;	
}	
	#funnel .cp02 .box {
    font-size: 28px;
}	
	#funnel .cp02 .bd-bl .min{
    padding-top:20px;
}	
	#funnel .cp02 .bd-bl .min,
	#funnel .cp02 h4{
    font-size: 32px;
}	
#funnel .cp02 .bd-bl .txt.red {
    font-size: 65px;
}	
	#funnel .cp02 .i-p {
    font-size: 48px;
}
	#funnel .cp02 ul{
	padding: 0 5px 10px;
	}
	#funnel .sec-box {
    padding-top: 40px;
		}
	#funnel .sec-box .box .cont-box{
    font-size: 22px;
}
	#funnel .cont-box .time {
    font-size: 22px;
}
	#funnel .icon2{
	width: 40%;	
	}
	#funnel .sec-box .box .cont-box .txt {
    margin-right: 10px;
    width: 70%;
}
	.note .txt-in {
    text-indent:0;
}
	#intro .flex{
	flex-wrap: wrap;
}
	#intro .box3 {
    width: 100%;
}
	#intro .box3:first-child {
    margin-right: 0;
}
	#intro .box3 .ttl02{
	padding:0.3rem 0.6rem;
	font-size: 26px;
	}
	#intro .box3 p {
    font-size: 18px;
    margin-bottom: 10px;
    padding: 0 10px;
}

}

@media screen and (max-width: 678px) {
  body {
    line-height: 1.5;
  }
	
	.cta {
    padding-top: 20px;
}
	
	.cta-box {
    padding: 20px 0;
  }
	.cta-box .cta-ttl {
    font-size: 24px;
    line-height: 1.3;
}
	.note {
    font-size: 16px;
    padding-left: 10px;
}
	.read {
    flex-wrap: wrap-reverse;
	text-align: center;
}
	.read::before {
    width: 60%;
    height: 240px;
	margin-right: 0;
	background-position: 100% 0%;
}
	.read strong {
    font-size: 30px;
	vertical-align: middle;
}
	.read {
    font-size: 32px;
}
	.read small {
    font-size: 26px;
}
	.user h2 {
    font-size: 26px;
    margin-bottom: 10px;
}
	.user .sub-ttl {
    font-size: 32px;
}
	.user .sub-ttl::before {
    padding-right: 0;
}
	.user .sub-ttl::after {
    padding-left: 0;
}
	.user .li-box li {
    font-size: 22px;
	padding: 10px;	
}
	.user .li-box li::before{
    padding-right: 10px;
}
	.user .voice .ttl-vo {
    font-size: 26px;
    padding: 20px 0 10px;
    text-align: center;
}
	.user .li-box {
    margin-bottom: 40px;
}
	.user .voice .flex {
    flex-wrap: wrap;
}
	.user .voice .user-ph {
    margin-right: 0;
    border-bottom: dashed 1px #000;
    padding-bottom: 10px;
    width: 100%;
	margin-bottom: 10px;
}
	.user .voice{
	padding-bottom: 40px;	
	}
	.user .voice .txt {
    line-height: 1.8;
    order: 2;
}
	.sec-cta {
		padding-bottom: 40px;}
	
	.point {
    padding: 60px 0 30px;
}
	
	.con-bg .box h4 {
    font-size: 28px;
}
	.con-bg .box p {
    font-size: 18px;
}
	.ques .read::before {
    width: 40%;
    height: 220px;
	background-position: 100% 0%;
}
	.reason {
    padding: 40px 0;
   
}
	.reason .txt {
    font-size: 26px;
}
	h5 {
    font-size: 22px;
    margin-bottom: 40px;
}
	.reason h5 small {
    font-size: 24px;
}
	h5 span{
    font-size: 40px;
}
	.reason .box .ttl {
    margin-right: 0;
    width: 100%;
	margin-bottom: 10px;
	margin-top: 20px;
}
	.reason .box .flex {
    flex-wrap: wrap;
}
	#intro .txt .ph {
    float: none;
    width: 60%;
    margin: 0 auto 20px;
}
	#intro .txt {
    font-size: 22px;
}
	#intro .txt p {
    font-size: 22px;
}
	.cp .flex {
    flex-wrap: wrap;
}
	.cp ul {
    width: 90%;
    margin: 0 auto;
}
	.cp .arrow {
	width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 30px;
border-color: #00366d transparent transparent transparent;

    margin:20px auto;
}
	.cp li:first-child {
    font-size: 38px;
    margin-bottom: 10px;
}
	.cp li:nth-child(2) {
    text-align: center;
}
.user .voice .user-ph p {
    margin-top: 10px;
}	
	footer li a:link {
   padding-bottom: 5px;
    margin-bottom: 5px;
}
	#funnel .sec-box .box .ph {
    margin-right: 10px;
    width: 20%;
}
	#funnel .navi li:last-child{
	min-height: 95px;	
	}
	#funnel .cp02 h3 {
    font-size: 45px;
}
	#funnel .cp02 {
    padding-top: 30px;
}
	#funnel .cp02 .box {
    font-size: 22px;
	padding: 30px 20px;
}
	#funnel .cp02 .box2 .flex{
    flex-wrap: wrap;
}
	#funnel .cp02 ul{
    width: 100%;
	border-right: none;
	border-bottom: dashed 1px #c2c2c2;
	padding: 0 5px 30px;
}
#funnel .cp02 ul:last-child {
    border-right: none;
	border-bottom: none;
}
	#funnel .sec-box .box .cont-box {
    flex-wrap: wrap;
}
	#funnel .sec-box .box .cont-box .txt {
    margin-right: 0;
	margin-bottom: 20px;
    width: 100%;
}
	#funnel .sec-box .box .ph {
    margin-right: 0;
    width: 100%;
}
	#funnel .sec-box {
    padding-top: 20px;
}
	#funnel .sec-box .box .flex {
    flex-wrap: wrap;
	padding: 10px;
}
	#funnel .sec-box .box .ph {
    display: none;
	
}
	#funnel .movie {
    margin-bottom: 0;
    padding-bottom: 65%;

}
	#funnel .navi .flex{
    width: 100%;
}
	#funnel .navi ul {
    font-size: 16px;
}
	#funnel .navi li:last-child span, #funnel .navi ul.cs::before {
    font-size: 12px;
    line-height: .8;
}
	#funnel .navi li:last-child {
    min-height: 75px;
}
	#funnel .cp02 h3 {
    font-size: 32px;
}
	#funnel .cp02 h3::before {
    top: -90%;
    left: -30px;
    width: 20%;
    height: 100px;
}
	#funnel .cp02 .bd-bl .min, #funnel .cp02 h4 {
    font-size: 26px;
}
	#funnel .cp02 .box {
    padding: 20px 10px;
	font-size: 20px;
}
	#funnel .cp02 .bd-bl .txt.red {
    font-size: 42px;
}
	#funnel .cp02 .i-p {
    font-size: 35px;
}
	#funnel .cp02 ul:last-child{
		padding-bottom: 0;
	}
	#funnel .sec-box h2 {
    font-size: 28px;
}
	#funnel .last .box .flex{
    padding: 20px 10px;
}
	#funnel .last .box .ph {
    width: 100%;
	display: block;
	text-align: center;
}
	svg{
	vertical-align: bottom;
	position: relative;
	top: -2px;
	}
	#funnel .sec-box .box .cont-box .ph img{
	max-width: 100%;
}
	#funnel .cp02 .ttl .arrow-b::before, #funnel .cp02 .ttl .arrow-b::after{
	font-size: 15px;	
	}
	#funnel .cp02 .ttl .arrow-b::before {
    margin-right: 2px;
}
	#funnel .cp02 .ttl .arrow-b::after {
    margin-left: 2px;
}
.yel {
    font-size: 30px;
}
	#funnel .cp02 ul li:last-child em{
	letter-spacing: -1px;
	line-height: 1.3;
	}
}
@media screen and (max-width: 430px) {
.cp .icon {
    font-size: 16px;
    padding: 10px ;
}
.cp .flex	{
    padding:30px 0;
}
	.con-bg .box{
	    padding: 45px 30px;	
	width: 85%;
	}
.ques .read strong {
    font-size: 22px;
}
.ques {
    padding: 40px 0 30px;
}
	.reason::before {
    top: -10px;
    background-size: 10%;
}
	.sec-cta.ft {
    padding-top: 50px;
}
	.user .voice .user-ph img{
	    width: 50%;
	}
	.point h3 {
    font-size: 30px;
}
	.point li {
    font-size: 26px;
}
	.reason .box {
    font-size: 24px;
}
	.reason .fs {
    font-size: 34px;
}
	#intro .name {
    font-size: 28px;
}
	#intro .name small {
    font-size: 18px;
    padding-left: 5px;
}
	#intro .txt p span {
    font-size: 26px;
}
	h5 span{
	font-size: 36px;
    display: inline-block;
}
	#funnel .icon2 {
    width: 40%;
    font-size: 20px;
    margin-bottom: 10px;
}
		.ques .read::before {
    height: 160px;
}
	.user h2 {
    font-size: 22px;
}
	.user .sub-ttl {
    font-size: 28px;
}
	.btn-cp a{
	font-size: 15px;
	}
	#funnel .cp02 ul li:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    text-align: left;
}
}
@media screen and (max-width: 375px) {
	#funnel .sec-box .box .txt small{
	font-size: 22px;	
	}
}
@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes dokidoki {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.voice .txt p span{
	font-size: 18px;
}
.voice a.v-btn {
	margin: 0 auto;
    display: block;
    width: 40%;
    padding: 4px 0 7px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    background: #0085bc;
}
.voice a.v-btn_close {
	margin: 0 auto;
    display: block;
    width: 40%;
    padding: 4px 0 7px;
    background: #fff;
    color: #0085bc;
    padding: 7px 0 6px;
    border: 1px solid #0085bc;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}
.voice a.v-btn_close span{
    color: #0085bc;
}
.txt .open{
	position: relative;
}
/*.txt .open::before {
    position: absolute;
    bottom: 10px;
    right: 0;
    display: block;
    content: "...";
    font-size: 15px;
}
.txt .open::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#f7feff);
    content: "";
}
.user .voice:nth-child(even) .txt .open::after {
    background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#eafaff);
}*/