@charset "utf-8";

.icon_pdf{
    color: #fff;
    background: #C20A0A;
    display: inline-block;
    padding: 0 6px;
    margin-right: 8px;
    font-size: .8em;
    border-radius: 6px;
}

/*====================================
  fv
====================================*/
.fv{
	padding: 8% 0;
	background: url(../img/hp/fv_bg.jpg?20220707) no-repeat center;
	background-size: cover;
}
.fv__wrap{
	padding: 0 1.5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fv__img{
	width: 50%;
}
.fv__title{
	width: 45%;
}
.fv__title-logo{
	width: 250px;
	margin: 0;
}
.fv__title-logo span{
	display: block;
	width: 100%;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	text-align: center;
	padding: 5px 0;
	margin-top: 8px;
	border-radius: 50px;
	background: #1959c2;
}
.fv__title-text{
	color: #1959c2;
	font-size: 26px;
	letter-spacing: 1px;
	line-height: 1;
	font-weight: 700;
	margin: 20px 0;
}
.fv__title-text span{
	display: inline-block;
	padding: 10px 14px;
	margin:  4px 0;
	background: #fff;
}
.fv__btn_wrap{
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin: 0;
}
.fv__btn-link{
	width: 48%;
}
.fv__btn-link a::after{
	display: none;
}

/*====================================
  news
====================================*/
.news{
	position: relative;
	padding: 60px 0 80px;
}

@media screen and (min-width: 768px) {
	.news__item-btn{
		position: absolute;
		right: 0;
		top: 65px;
		font-size: 15px;
		width: 160px;
	}
	.news__item-btn a{
		height: 36px;
		line-height: 36px;
	}
}

/*====================================
  about
====================================*/
.about{
	color: #fff;
	padding: 70px 0 90px;
	background: #1959c2;
}
.about__item{
	display: flex;
	justify-content: space-between;
	margin-bottom: 35px;
}
.about__item-img{
	position: relative;
}
.about__item-icon{
	color: #000;
	text-align: center;
	font-weight: 700;
	line-height: 1.2;
	position: absolute;
	right: -20px;
	top: -20px;
	width: 70px;
	height: 70px;
	border-radius: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ffea00;
}
.about__item_box{
	width: 31%;
	opacity: 0;
}
.about__item_box h3{
	text-align: center;
	font-size: 20px;
	margin: 15px 0 10px;
}
.about__item-text p{
	font-weight: 400;
}
.about__btn a{
	border: none;
}

/*====================================
  blog
====================================*/
.blog{
    padding: 60px 0 80px;
    background: #edf8fc;
}
.blog__list{
    display: flex;
}
.blog__list li{
    width: 31.5%;
    margin-right: 3.5%;
    background: #fff;
    padding: 2.5%;
    margin-bottom: 50px;
    border-radius: 10px;
    box-shadow: 0px 3px 20px rgb(25 89 194 / 20%);
}
.blog__list li:last-child{
    margin-right: 0;
}
.blog__list .post_thum{
    height: 180px;
}
.blog__list .post_thum a{
    display: block;
    height: 100%;
}
.blog__list .post_thum img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.blog__list .post_title{
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.4;
    margin: 1em 0 .5em;
}
.blog__list .post_time{
    font-size: .9em;
}
.blog__list .post_cats{
    font-size: .9em;
    margin-top: .4em;
}
.blog__list .post_cats i{
    color: #aaa;
    margin-right: .4em;
}
.blog__list .post_cats a{
    color: #33779e;
}
.blog .no_post{
    display: block;
    text-align: center;
    margin-bottom: 2em;
}
/*==================================
  function
====================================*/
.function{
	padding: 70px 0 100px;
}
.function .sectTit-messages{
	color: #1959c2;
	margin-bottom: 40px;
}
.function__list{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.function__item{
	width: 23.5%;
	padding: 25px 0;
	margin-right: 2%;
	margin-bottom: 15px;
	text-align: center;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #eee;
	box-sizing: border-box;
	box-shadow: 0 3px 10px 0 rgb(0 0 0 / 10%);
}
@media screen and (min-width: 768px) {
	.function__item:nth-child(4n){
		margin-right: 0;
	}
}
.function__item-img img{
	height: 50px;
}
.function__item-name{
	font-size: 17px;
    line-height: 1.3;
	margin: 10px 0 4px;
}
.function__item-name span{
    font-size: .8em;
}
.function__item-text{
	color: #666;
    line-height: 1.3;
}
.function__btn{
	margin-top: 25px;
}

.function__item.comingsoon{
    position: relative
}
.function__item.comingsoon::after{
    position: absolute;
    top: -4px;
    left: -4px;
    content: "Coming soon";
    display: inline-block;
    background: #ffff00;
    color: #000;
    font-size: 12px;
    padding: 2px 6px;
}

/*====================================
  lineup
====================================*/
.lineup{
	padding: 70px 0 100px;
	background: #edf8fc;
}

/*====================================
  case
====================================*/
.case{
	padding: 70px 0 90px;
}

/*====================================
  support
====================================*/
.support{
	padding: 70px 0 80px;
	position: relative;
}
.support::before,
.support::after{
	position: absolute;
	top: 0;
	z-index: -1;
	content: "";
	display: block;
	width: 100%;
	height: 75%;
}
.support::before{
	background: url(../img/hp/bg_dot.png);
}
.support::after{
	z-index: -2;
	background: rgb(25,167,207);
	background: linear-gradient(135deg, rgba(25,167,207,1) 0%, rgba(74,191,224,1) 100%);
}
.support .sectTit,
.support .sectTit-messages{
	color: #fff;
}
.support__wrap{
	display: flex;
	justify-content: space-between;
	border-radius: 10px;
	margin-top: 30px;
	background: #fff;
	box-shadow: 0px 10px 20px rgb(25 89 194 / 22%);
}
@media screen and (min-width: 768px) {
  .support__item{
		width : calc(100% / 3);
		padding: 40px;
	}
	.support__item:nth-of-type(2){
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
}
.support__item-tit{
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	margin: 10px 0;
}
@media screen and (min-width: 768px) {
	.support__item-text{
		min-height: 90px;
	}
}
.support__item-btn{
	width: 100%;
	font-size: 16px;
	/*margin-top: 20px;*/
}
.support__item-btn a{
	height: 44px;
	line-height: 44px;
}
.support__item-btn.btn_pt-blue a::after{
	content: none;
}

/*====================================
  flow
====================================*/
.flow{
	padding: 70px 0 90px;
	background: #edf8fc;
}
.flow__list{
	display: flex;
	margin-top: 40px;
	counter-reset: number 0;
}
@media screen and (min-width: 768px) {
	.flow__list{
		justify-content: space-between;
	}
}
.flow__item{
	position: relative;
	width: 23.5%;
	padding: 30px 30px 50px;
	border-radius: 10px;
	background: #fff;
}
@media screen and (min-width: 768px) {
	.flow__item::before {
		position: absolute;
		left: -10px;
		top: -10px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 22px;
		font-family: 'Big Shoulders Display', cursive;
		counter-increment: number 1;
		content: counter(number);
		background: #1da9d0;
		border-radius: 100%;
	}
}
.flow__item-tit{
	color: #1da9d0;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin: 10px 0;
}
/*====================================
  simulation
====================================*/
.simulation{
	padding: 60px 0 80px;
	position: relative;
	background: url(../img/hp/bg_dot.png);
}
.simulation::after{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	background: #1959c2;
}
.simulation .sectTit,
.simulation .sectTit-messages{
	color: #fff;
}
.step{
	position: relative;
	text-align: center;
	padding: 50px;
	margin-top: 30px;
	margin-bottom: 30px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 10px 20px rgb(0 0 0 / 10%);
}
.step::after{
	position: absolute;
	left: -20px;
	bottom: -20px;
	width: 135px;
	height: 200px;
	content: "";
	background: url(../img/hp/step-img.png) no-repeat;
	background-size: cover;
}
.step-tit{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
}
.step-tit span{
	color: #1959c2;
}
.step__answers{
	display: flex;
	justify-content: center;
    width: 80%;
    margin: auto;
}
.step-answer{
    width: 100%;
    margin: 0 5px;
}
.step-answer a{
    font-size: 18px;
    padding: 15px 0;
    background: #edf8fc;
    border: 1px solid #ddd;
    border-radius: 50px;
    box-shadow: 0 3px 0 #ccd4e0;
    transition: .3s;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}
.step-answer a:hover {
	width: 100%;
	color: #fff;
  font-weight: 700;
  background: #1da9d0;
  border: 1px solid #1da9d0;
  box-shadow: none;
}

/*====================================
  calender
====================================*/
.calender{
	text-align: center;
	padding: 70px 0 90px;
	background: #edf8fc;
}
.calender__actins{
	display: flex;
	max-width: 680px;
	margin: 30px auto 0;
}
.calender__actins-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	height: 70px;
}
.calender__actins-btn a::after{
	top: 20px;
	font-family: "Font Awesome 5 Free"; 
  font-weight: bold; 
  content: "\f08e";
}
.event{
	margin-top: 20px;
}

/*calendar
------------------*/
.xo-event-calendar{
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
}
.xo-event-calendar table.xo-month .month-header{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xo-event-calendar table.xo-month .month-header > span{
  font-weight: bold;
  margin: 0 25px;
}
.xo-event-calendar table.xo-month .month-prev{
  float: auto;
}
.xo-event-calendar table.xo-month button{
  width: 44px;
  height: 44px;
  border-radius: 50px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0px 2px 3px 0px rgb(0 85 160 / 15%);
}
.xo-event-calendar table.xo-month button > span{
  width: auto;
  height: auto;
  line-height: auto;
}
.xo-event-calendar table.xo-month .month-dayname td div{
	border: none;
}

.xo-event-calendar table.xo-month > thead th{
  padding: 10px;
}
.xo-event-calendar table.xo-month .month-dayname-space{
  height: 2em;
}
.xo-event-calendar table.xo-month .month-dayname td div{
  padding: 4px 8px;
  font-size: 1.3em;
  font-weight: bold;
  font-family: 'Big Shoulders Display', cursive;
}
.xo-event-calendar table.xo-month .month-event td a{
  text-decoration: none;
}
.xo-event-calendar table.xo-month .month-event-title{
  font-size: 1em;
  margin: 2px 8px;
  padding: 2px 3px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  font-family: 'Big Shoulders Display', cursive;
  color: #0061af !important;
  background: #ddd !important;
}
.xo-event-calendar table.xo-month .month-event td a:hover .month-event-title{
  color: #fff !important;
  background: #0061af !important;
}
.xo-event-calendar table.xo-month .month-week table:last-child {
  padding-bottom: 1rem;
}
.holiday-titles{
	margin-top: 20px;
}

/* btn
------------------*/
.xo-event-calendar table.xo-month .month-event-title{
	font-size: 1em;
  margin: 2px 8px;
  padding: 2px 3px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  font-family: 'Big Shoulders Display', cursive;
  color: #0061af !important;
  background: #ddd !important;
}

/*====================================
  webinar
====================================*/
.webinar{
   padding: 70px 0 90px;
   overflow: hidden;
}
.webinar::after{
   top: 20rem;
}
.webinar__list{
   padding: 3rem 0 2rem;
}

/*====================================
  faq
====================================*/
.faq{
	padding: 70px 0 90px;
}    
.faq__list{
	margin-top: 40px;
	margin-bottom: 40px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 5px 30px rgb(25 89 194 / 30%);
}
.faq__item+.faq__item{
	border-top: 1px solid #eee;
}
.faq__item-question{
	position: relative;
	cursor: pointer;
	font-size: 17px;
	font-weight: 500;
}
.faq__item-question::after{
	color: #1959c2;
	position: absolute;
	right: 30px;
	top: 30%;
	font-family: "Font Awesome 5 Free"; 
  font-weight: bold;
  font-size: 26px;
  content: "\2b";
}
.faq__item-question.open::after{
	content: "\f068";
}
.faq__item-question .inner,
.faq__item-answer .inner{
	display: table;
}
.faq__item-question .inner::before,
.faq__item-answer .inner::before{
	width: 70px;
	text-align: center;
	display:table-cell;
	vertical-align: middle;
	font-size: 22px;
}
.faq__item-question .inner::before{
	color: #fff;
	content: "Q";
	background: #1959c2;
}
.faq__item-answer .inner::before{
	color: #1959c2;
	content: "A";
}
.faq__item-answer{
	display: none;
	font-size: 16px;
	background: #f9f9f9;
}
.faq__item-question p{
  padding: 30px 70px 30px 30px;
}
.faq__item-answer .text{
  padding: 30px;
}
.faq__item-answer .text p{
  margin: 10px 0;
}
.faq__item-answer .text a{
	color: #1959c2;
	text-decoration: underline;
}
.faq__item-answer .text ul,
.faq__item-answer .text ol{
	list-style-type: disc;
	margin: 10px 0 10px 30px;
}
.faq__item-answer .text ol{
  list-style-type: decimal;
}


/* 
====================================
★以下SP画面
====================================
*/
@media only screen and (max-width: 767px){


/*====================================
  fv
====================================*/
.fv{
	margin-top: 60px;
	background: url(../img/hp/fv_bg_sp.jpg?20220707) no-repeat center;
	background-size: cover;
}
.fv__wrap{
	display: block;
}
.fv__title{
	width: 90%;
	margin: auto;
}
.fv__title-logo{
	width: 60vw;
	margin: auto;
}
.fv__title-logo span{
	padding: 3% 0;
	margin-top: 5px;
	font-size: 3vw;
}
.fv__title-logo img{
	width: 80%;
	display: block;
	margin: auto;
}
.fv__title-text{
	font-size: 4.6vw;
	text-align: center;
	margin: 3% 0 8%;
}
.fv__title-text span{
	margin: 1% 1%;
}
.fv__btn_wrap{
	display: block;
	width: 80%;
	margin: 5% auto;
}
.fv__btn-link{
	width: 100%;
	margin-top: 4%;
}
.fv__img{
	width: 84%;
	margin: auto;
}

/*====================================
  news
====================================*/
.news{
	padding: 50px 0 60px;
}
.news .sectTit{
	font-size: 20px;
}
.news__item-btn{
	margin-top: 30px;
}

/*====================================
  blog
====================================*/
.blog__list{
    display: block;
}
.blog__list li,
.blog__list li:last-child{
    width: 100%;
    padding: 1.4em;
    margin-bottom: 1.5em;
}
.blog__list .post_title{
    font-size: 1.05em;
}
.blog__list .post_thum {
    height: 40vw;
}

/*====================================
  about
====================================*/
.about{
	padding: 40px 0 60px;
}
.about .sectTit::after{
	background-color: #fff;
}
.about__item{
	display: block;
}
.about__item_box{
	width: 96%;
	margin: auto;
}
.about__item_box+.about__item_box{
	margin-top: 30px;
	margin-bottom: 30px;
}
.about__item-icon{
	width: 66px;
  height: 66px;
}
.about__item_box h3{
	font-size: 16px;
}
.about__item_box h3 br{
	display: none;
}

/*====================================
  function
====================================*/
.function{
	padding: 50px 0 60px;
}
.function .sectTit-messages{
	margin-bottom: 20px;
}
.function__list{
	width: 95%;
	margin: auto;
	justify-content: space-between;
}
.function__item{
	width: 48%;
	margin: 1.2% 0;
	padding: 16px 0 16px;
	border-radius: 6px;
	box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
}
.function__item-img img{
	height: 40px;
}
.function__item-name{
	font-size: inherit;
	margin: 8px 0 4px;
}
.function__item-text{
	font-size: .8em;
}
.function__btn{
	margin-top: 30px;
}
.function__item.comingsoon{
    padding-top: 22px;
}
.function__item.comingsoon::after{
    top: -3px;
    left: -4px;
    font-size: 10px;
}

/*====================================
  lineup
====================================*/
.lineup{
	padding: 40px 0 60px;
}


/*====================================
  case
====================================*/
/*slide*/
.slick-list{
	overflow: visible!important;
}
.slick-track {
  display: flex!important;
  align-items: stretch;
}
.slick-slide {
  height: auto !important;
}
.slick-dots {
	position: absolute;
	bottom: -35px;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 30px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black;
}
.case__btn{
	margin-left: 25px;
	margin-right: 25px;
}
.case__btn a{
	width: 88%;
	margin: auto;
}

/*====================================
  support
====================================*/
.support{
	padding: 40px 0 10px;
}
.support::before, .support::after{
	height: 85%;
}
.support::before{
	background: url(../img/hp/bg_dot_sp.png);
}
.support .sectTit::after{
	background-color: #fff;
}
.support__wrap{
	display: block;
	margin-top: 25px;
}
.support__item {
	font-size: 12px;
	padding: 9% 7%;
}
.support__item:nth-of-type(2) {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.support__item-img{
	float: left;
	width: 36%;
}
.support__item-tit{
	text-align: left;
	font-size: 13px;
	margin: 0;
}
.support__item-tit,
.support__item-text{
	padding-left: 40%;
}
.support__item-btn{
	clear: both;
	width: 84%;
	font-size: 13px;
	margin-top: 12px;
}
.support__item-btn a i{
	font-size: 16px;
  width: 16px;
  height: 16px;
}


/*====================================
  flow
====================================*/
.flow{
	padding: 40px 0 50px;
	background: #def0f7;
}
.flow__list{
	display: block;
	margin-top: 20px;
}
.flow__item{
	width: 100%;
	font-size: 12px;
	padding: 15px 10px 20px;
	margin-top: 15px;
	border-radius: 8px;
}
.flow__item::after {
	display: block;
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 12px solid #fff;
}
.flow__item:last-child::after{
	display: none;
}
.flow__item-img{
	width: 35%;
	float: left;
}
.flow__item-tit,
.flow__item-text{
	padding-left: 38%;
}
.flow__item-tit{
	font-size: 14px;
	text-align: left;
	margin: 0 0 3px;
}
.flow__item-tit::before{
	display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  font-size: 12px;
  margin-right: 5px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-family: 'Big Shoulders Display', cursive;
  counter-increment: number 1;
  content: counter(number);
  background: #1da9d0;
  border-radius: 100%;
}


/*====================================
  simulation
====================================*/
.simulation{
	padding: 40px 0 50px;
	background: url(../img/hp/bg_dot_sp.png);
}
.simulation .sectTit::after{
	background-color: #fff;
}
.step{
	padding: 25px 15px 30px;
	margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.step::after{
	top: -40px;
	bottom: auto;
	width: 50px;
  height: 74px;
}
.step-tit{
	font-size: 15px;
	padding: 0 10px;
	margin-bottom: 15px;
}
.step__answers{
    width: 100%;
  justify-content: space-between;
    flex-wrap: wrap;
}
.step-answer{
    width: 49%;
    margin: 0;
}
.step__answers:has(> :nth-child(3)) .step-answer {
    width: 100%;
    margin: 1.5% 0;
}
.step-answer a{
	font-size: 14px;
    line-height: 1.4;
	padding: 10px 0;
}
.simulation__btn{
	width: 70%;
}

/*====================================
  calender
====================================*/
.calender{
	padding: 40px 0 50px;
}
.calender .wrap{
	margin-left: 20px;
  margin-right: 20px;
}
.event {
  margin-top: 15px;
}
.other-month{
	color: #888;
}
.xo-event-calendar table.xo-month .month-header{
	justify-content: space-between;
	margin-bottom: 10px;
}
.xo-event-calendar table.xo-month .month-header > span{
	margin: 0 20px;
}
.xo-event-calendar table.xo-month > thead th{
	background: #eee;
}
.xo-event-calendar table.xo-month .month-dayname td div{
	font-size: inherit;
}
.xo-event-calendar table.xo-month .month-event-title{
	font-size: 11px;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 3px;
	padding: 8px 0;
	letter-spacing: 0;
	white-space: normal;
}
.xo-event-calendar table.xo-month .month-week table:last-child {
    padding-bottom: .5rem;
}
.xo-event-calendar{
	margin-bottom: 5px;
}
.calender__actins{
	display: block;
}
.calender__actins-btn a{
	height: 60px;
}
.calender__actins-btn{
	margin-top: 10px;
}

/*====================================
  faq
====================================*/
.faq{
	padding: 40px 0 50px;
}
.faq__list{
	margin-top: 30px;
	box-shadow: 0px 3px 15px rgb(25 89 194 / 30%)
}
.faq__item-question .inner::before, .faq__item-answer .inner::before{
	width: 50px;
	font-size: 16px;
}
.faq__item-question::after{
	right: 15px;
	font-size: 18px;
}
.faq__item-question{
	font-size: 14px;
}
.faq__item-answer{
	font-size: 13px;
}
.faq__item-question p {
  padding: 18px 40px 18px 10px;
}
.faq__item-answer .text {
  padding: 10px 20px 20px;
}
.faq__btn{
	width: 75%;
}







}