@charset "utf-8";

/*===========　レスポンシブ用基礎CSS　===========*/

/*ボックスモデルをborder-boxに変更*/
* {
	box-sizing: border-box;
}

/*フルードイメージ*/
img {
	max-width: 100%;
	height: auto;
}

/*回転時の文字調整封印*/
html{
  -webkit-text-size-adjust: 100%;
}

/*===========　スマホ用　通常時　===========*/
body {

	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#222;
}

/*===========　枠　===========*/


#inner{
	position:relative;
}
@media (min-width:900px){
#inner{
	width:70%;
	margin:0 auto;
	position:relative;
}
}

#main{

}

/*===========　ヘッダー　===========*/
.header p{
	text-align:center;
	line-height:50px;
}


.header{
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	background: rgba(0,121,198,0.7);
	height:50px;

}

#inner h1{

}

.header-logo{
}

#bxSlider img{
	display: block;
	width:100%;
	margin-top: 50px;
}



.head-title{
	position: absolute;
	top: 12vh;
  left: 5vw;
}

.cta-title{
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin: auto;
	padding-bottom:5vw;
	width:21em;
	border-bottom:1px solid #222;
	line-height: 1.5;
}

.small-letter{
	display: block;
	font-size: 0.6em;
	text-align: center;
	margin: auto;
	padding:10px 0;
}

.big-letter{
	display: block;
	font-size: 1.5em;
	text-align: center;
	margin: auto;
	padding:10px 0;
}

@media (min-width:768px){

.head-title{
	position: absolute;
	top:15vh;
	left:5vw;
}

.cta-title{
	font-size: 2em;
	padding-bottom:10px;
	width:21em;
	border-bottom:1px solid #222;
}

.small-letter{
	font-size: 0.6em;
	padding:10px 0;
}

.big-letter{
	font-size: 1.5em;
	padding:10px 0;
}

}

@media (min-width:900px){
.header{
	width:70%;
	margin:0 auto;
	position:fixed;
	top:0;
	left:15%;
}

.head-title{
	position: absolute;
	top:17vw;
	left:11vw;
	line-height: 2;
}


}
/*  BUTTON  */
.cta{
	width:80%;
	margin: 0 auto;
	padding:8vw 0;
}

.btn{
	position: relative;
    /*形状*/
    display: inline-block;
    padding:10px 0;
    color: #FFF;
		letter-spacing: 0.4px;
    text-decoration: none;
    outline: none;
	  width:24em;
	  font-size: 0.7em;
		text-align: center;
	  background:linear-gradient(270deg, #95eebb 0%, #00a0e0 25%, #3bade3 51%,  #576fe6 100%);
	  background-position: 1% 50%;
    background-size: 200% auto;
	  border-radius:30px;
	  margin:0 auto;
}

.btn::after{
	position: absolute;
    top: 31%;
    right: 15px;
    content: "";
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn:hover{
	 transition: all .5s;
	 background-position: 99% 50%;
}

@media (min-width:768px){
	.cta{
			width:100%;
		display: flex;
		justify-content: center;
	}

	.btn{
		margin:30px 20px;
	}
}


/*===========　ナビ　===========*/
/* 縮小時メニュー出現ボタン */
.hanNav .hanBtn	{
	position:fixed;
	top:0;
	right:10px;
	z-index:3;
	width:1.5em;
	height:1.5em;
	line-height:1.5em;
	text-align:center;
	font-size:2em;
	cursor:pointer;
}



/* 縮小時ナビリスト本体 */
.hanNav ul	{
	position:fixed;
	top:5px;
	right:0;
	z-index:2;
	width:40%;
	padding-top:56px;
	list-style:none;
	background-color:rgba(255,255,255,0.4);/* 外枠の色 */
	padding:0 10px;
	font-size:0.7em;
}



.hanNav li a	{
	background-color:rgba(255,255,255,0.5);/* 中枠の色 */
	display:block;
	text-align:center;
	text-decoration:none;
	line-height:50px;
	font-size:1em;
	color:#000;
}

.hanNav li a:hover	{
	background-color:rgba(255,180,180,0.25);
}

/* 見えてるナビ*/
.nav2 ul{
	padding:20px 0;
	display: flex;
	flex-wrap:wrap;

}

.nav2 ul li{
	width:calc(100% / 4);
	text-align: center;
	font-size:0.5em;
	padding:10px;
	position: relative;
	display: inline-block;
}

.nav2 ul li::after{
	content: '';
	position: absolute;
    bottom:0;
    left:35%;
    /*下線の形状*/
    width: 30%;
    height: 1px;
    background:#333;
}

.nav2 ul li:hover::after{
    width: 60%;
	left:20%;
	  transition: all 1s;
}

@media (min-width:768px){
	.nav2 ul li{
	font-size:0.7em;
}
}
@media (min-width:900px){
	.hanNav ul	{
	position:fixed;
	top:5px;
	right:16%;
	width:20%;
	padding:0 10px;
}

.hanNav .hanBtn	{
	position:fixed;
	top:5px;
	right:16%;
	z-index:3;
	width:36px;
	height:36px;
	line-height:36px;
	text-align:center;
	font-size:36px;
	cursor:pointer;
}

.nav2 ul li{
	width:calc(100% / 8);
	text-align: center;
	position: relative;
}

}


/* ========== inview animation ===========*/
.fadeIn_up {
opacity: 0;
transform: translate(0, 50%);
transition: 2s;
}
.fadeIn_up.is-show {
transform: translate(0, 0);
opacity: 1;
}


/*===========　タイトル　===========*/
.title-box{
	position:relative;
	margin:10px ;
}

.title-num{
	font-size:5em;
	font-family: 'Anton', sans-serif;
	color:rgba(0,160,224,0.3);
	font-weight: bold;

}

.title-big{
	font-size:2.5em;
	font-family: 'Anton', sans-serif;	font-weight: bold;
	color:#222;
	letter-spacing: 3px;
	position: absolute;
	top:30%;
	left:5%;
}


/*===========　内容BOX　===========*/
.content-box{

}

.content-inner{
	margin:20px 10px;
	line-height: 1.5;
}

.content-inner h3{
	font-size:1.5em;
	font-weight: bold;
	margin-bottom: 10px;
}

.content-inner p{
	font-size:.9em;
	line-height: 1.5;
	margin-bottom: 30px;

}


/*===========　MSG　===========*/
/*  about  */

#message{
	margin:0 auto;
	padding:10px 0;
}


.msg-img{
	position: relative;
	margin:10px;
}

.label{
	background-color: #fff;
	width:6em;
	text-align: center;
	padding:5px 0;
	position: absolute;
	bottom:15px;
	left:20px;
}
@media (min-width:768px){
	.msg-box{
		display: flex;
		justify-content: space-between;

	}

}
/*===========　STEP　===========*/
.step-card{
	width:80%;
	margin: 40px auto;
	border: solid 2px #0079c6;
	border-radius: 20px;
	padding:20px;
}

.step-card h4{
	font-size:1.5em;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}

.step-card p{
	font-size:.8em;
	line-height: 1.5;
}

.step-card .step-img{
	display: block;
	padding:20px;
	width: 80%;
	margin: 0 auto;
}

.step-card::after{
	position: absolute;
    Bottom: -30px;
    right: 45%;
    content: "";
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-top: 2px solid #0079c6;
    border-right: 2px solid #0079c6;
		-webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.step-card:last-child:after{
	display: none;
}


@media (min-width:768px){

.step-card{
	width:20%;
	padding:10px;

}

.step-card h4{
	font-size:1em;
}

.step-box{
	display: flex;
	justify-content: space-between;
}

.step-card::after{
		-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
		Bottom: 50%;
		right: -25px;

}
}

/*===========　POINT　===========*/
.point-box{
	background: rgba(199,199,199,0.3);
	padding:40px 0;

}

.point-card{
	width:80%;
	margin: 30px auto;
	background: rgba(199,199,199,0.1);
	border-radius: 20px;
	box-shadow:
	8px 8px 16px #444,
	-8px -8px 16px #fff;
	padding:20px;
}

.point-card h4{
	font-size:1.5em;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}

.point-card p{
	font-size:.8em;
	line-height: 1.5;
}

.point-card .point-img{
	display: block;
	padding:20px;
	width: 80%;
	margin: 0 auto;

}

@media (min-width:768px){
	.point-box{
		display: flex;
		justify-content: space-between;

	}

	.point-card{
		width:30%;
}

}

/*===========　PLAN　===========*/
#plan{
	margin: 30px 0;
}

.plan-imgSP { display: block !important; }
.plan-imgPC { display: none !important; }

.plan-table { display: block !important; }
.plan-tablePC { display: none !important; }

.plan-box{
	display: flex;
	flex-direction: column;
}

.plan-box p{
	width: 100%;
	text-align: center;
}

.plan-box .fas{
	font-size: 3em;
	color:#0079c6;
	padding: 20px ;
}

.plan-description{
	font-size: 1em;
	line-height: 1.5;
	padding: 0 20px 40px;
}

.plan-description span{
	font-weight: bold;
}

@media (min-width:768px){
.plan-imgSP { display: none !important; }
.plan-imgPC { display: block !important; }

.plan-description{
	font-size: 1.8em;
}
}

/*===========　PLAN　===========*/


.service-box{
	background: rgba(199,199,199,0.3);
	padding:40px 20px;
	display: flex;
	flex-wrap: wrap;
}

.service-card{
	width:30%;
	margin: 10px auto;
	background: rgba(199,199,199,0.1);
	border-radius: 10px;
	box-shadow:
	8px 8px 16px #444,
	-8px -8px 16px #fff;
	padding:10px;
}

.service-card p{
	text-align: center;
	font-size: 0.3em;
	font-weight: bold;
	padding: 5px 0;
}

@media (min-width:768px){
	.service-card p{
		font-size: 1em;
	}

	.service-card{
		padding:20px;
	}


}

/*===========　お問い合わせバナー　===========*/
.contact-banner{
	width:100%;
	position: relative;
}

.btn-contact{
	width:40%;
	padding:8px 0;
	position: absolute;
	bottom:140vw;
	left:28vw;
	display: inline-block;
	color: #FFF;
	letter-spacing: 0.4px;
	text-decoration: none;
	outline: none;
	font-size: 0.6em;
	text-align: center;
	background:linear-gradient(270deg, #c78500 0%, #c74200 25%, #c70063 51%,  #c73cb0 100%);
	background-position: 1% 50%;
	background-size: 200% auto;
	border-radius:30px;
}

.btn:hover{
transition: all .5s;
background-position: 99% 50%;
}

@media (min-width:768px){
	.btn-contact{
		padding:15px 0;
		font-size: 1em;
		bottom:115vw;
}
}

@media (min-width:900px){
	.btn-contact{
		padding:15px 0;
		font-size: 1em;
		bottom:84vw;
		left:21vw;

}

}
/*===========　sns　===========*/
#sns img{
	display: block;
	width: 100%;
}

/*===========　フッター　===========*/
#copy{
	font-size: 0.4em;
	padding: 40px 0 5px;
	background-color: #0079c6;
}

.copy{
	display: block;
	padding-top:20px;
	text-align: center;
	color:#eee;
}

.footer-logo{
	width: 100px;
	height:50px;
	display: block;
	margin: 0 auto;
}