@charset "UTF-8";

@media screen and (max-width: 767px){
    .pc{
        display: none !important;
    }
    
    .sp{
        display: block;
    }
    
	header {
		height: 50px;
		padding: 0 5%;
	}
	
	h1{
		width:350px;
		display: flex;
    	align-items: center;
	}
	
	.headBtn a {
		display: inline-flex;
		align-items: center;
		width: 100px;
		height: 30px;
		border-radius: 100px;
		color: #ffffff;
		font-weight: bold;
		font-size: 12px;
		position: relative;
		justify-content: center;
	}
	
	.headBtn a img {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 5px;
	}
    
	.mainImage{
		background: url('../img/sp_main.png') center;
		background-size: cover;
		height: 500px;
		position: relative;
	}
	
	.mainText{
		top:30px;
		left: 5%;
		width: 90%;
	}
	
	.mainText{
		top:30px;
		left: 5%;
		width: 90%;
		position: absolute;
	}
	
	.mainBtn{
		position: absolute;
		bottom:30px;
		left: 5%;
		width: 90%;
	}
	
	.mainBtn a {
		height: 50px;
	}
	
	.sec_a {
		padding: 40px 0;
	}
	
	.contTitle {
		text-align: center;
		font-size: 25px;
		color: #001F45;
		margin-bottom: 20px;
	}
	
	.subTitle {
		text-align: center;
		color: #414141;
		font-size: 19px;
	}
	
	.sec01List01 {
		display: flex;
		justify-content: center;
		margin-top: 30px;
		margin-bottom: 0;
		flex-wrap: wrap;
	}
	
	.sec01List01 li {
		width: calc((100% - 10px) / 2);
		margin-bottom: 20px;
	}
	
	.sec01List01 li:nth-child(2) {
		margin-left: 10px;
	}
	
	.block-baloon-bottom.pt02,.block-baloon, .block-baloon-top, .block-baloon-right, .block-baloon-bottom, .block-baloon-left{
		font-size: 14px;
		line-height: 1.5em;
		letter-spacing: -0.1em;
	}
	
	.sec01Box {
		width: calc((100% - 10px) / 2);
		margin: auto;
	}
	
	.arrow03 img{
		width: 150px;
	}
	
	.arrow03 {
		text-align: center;
		margin-top: 20px;
	}
	
	.contTitle {
		margin-bottom: 0;
		line-height: 1.5em;
	}
	
	.sec02Cont {
		display: block;
		justify-content: space-between;
		margin-top: 30px;
	}
	
	.sec02Cont--Box {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.sec02Title {
    	font-size: 19px;
		text-align: center;
	}
	
	.sec02Text {
		font-size: 14px;
	}
	
	.ftwt {
		color: #ffffff !important;
		font-size: 23px;
	}
	
	.cvnCont {
		margin-top: 20px;
		display: block;
	}
	
	.cvnCont--Box {
		width: 100%;
		margin-bottom:10px;
	}
	
		.cvnBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FCDC4A;
		width: 100%;
		height: 60px;
		color: #001F45;
		position: relative;
		border-radius: 200px;
		font-size: 19px;
		font-weight: bold;
	}
	
	.cvnBtn img {
		position: absolute;
		right: 40px;
		top: 25px;
	}
	
	.subTitle02 {
		margin-bottom: 20px;
		font-size: 14px;
		margin-top: 20px;
	}
	
	.sec03List{
		display: block;
	}

	.sec03List li {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.sec03List--Title {
		font-size: 19px;
		text-align: center;
		font-weight: bold;
		color: #001F45;
		margin: 10px 0;
	}	
	
	.sec03List--Text {
		font-size: 14px;
	}
	
	.sec04 .subTitle02{
		text-align: left;
	}
	
	.sec04Step li {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.sec04Title {
		color: #001F45;
		font-size: 19px;
		font-weight: bold;
		margin: 8px 0;
		text-align: center;
	}
	
	.sec04Text {
		color: #001F45;
		font-size: 25px;
		font-weight: bold;
		text-align: left;
		letter-spacing: -0.1em;
		margin-top: 5px;
	}
	
	.sec04Img {
		height: 100px;
		width: 100px;
		border: 2px solid #001F45;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fffffff;
		border-radius: 200px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.sec04Step li {
		width: 100%;
		margin-bottom: 50px;
		position: relative;
		padding-left: 120px;
		padding-top: 8px;
		line-height: 1.5em;
	}
	
	.sec04Title {
		color: #001F45;
		font-size: 19px;
		font-weight: bold;
		margin: 0;
		text-align: left;
		width: 100%;
	}
	
	.sec04Step li:not(:first-child) {
		margin-left: 0;
		position: relative;
	}
	
	.sec04Step li:not(:first-child):after {
		content: url(../img/arrow05.svg);
		position: absolute;
		top: -30px;
		left: calc(50% - 10px);
		transform: rotate(90deg);
	}	
	
	.sec04Text span {
		font-size: 14px;
		display: block;
		width: 100%;
	}
	
	.sec05{
		padding-top: 0;
	}
	
	.sec05 .contTitle{
		margin-bottom: 20px;
	}
	
	.sec06List {
		display: block;
	}
	
	.sec06List li {
		width: 100%;
	}
	
	.sec06List--Title {
		height: 70px;
		font-size: 19px;
		text-align: center;
	}
	
	.sec06List--Box {
		padding: 15px;
		line-height: 1.5em;
	}
	
	.sec06List--Box__text01 {
		margin-bottom: 15px;
		font-size: 14px;
	}
	
	
	.sec07Cont dt {
		padding: 15px 15px 15px 80px;
		background: rgba(76 170 253 / 7%);
		color: #001F45;
		font-size: 19px;
		font-weight: bold;
		position: relative;
	}
	
	.sec07Cont dd {
		padding: 15px 15px 15px 80px;
		background: #ffffff;
		color: #001F45;
		font-size: 14px;
		position: relative;
		text-align: justify;
	}
	
	.sec08table th,
	.sec08table td{
		width: 100%;
		display: block;
		border-right:1px solid #CCCCCC;
		border-left:1px solid #CCCCCC;
		padding: 10px;
    	font-size: 14px;
	}
	
	.sec08Text {
		margin: 40px 0;
		text-align: center;
		font-size: 14px;
	}
	
	.sec08Title {
		margin-bottom: 30px;
		font-size: 25px;
		text-align: center;
		font-weight: bold;
	}
	
	.sec08Logo {
		text-align: center;
		margin-bottom: 0;
	}
	
	footer *{
		font-size: 14px;
	}
	
	.footLogo img{
		width: 80%;
	}
	
	.footNav {
    	display: block;
		margin: 40px 0;
	}
	
	.footNav li:before,
	.footNav li:after{
		content: "" !important;
	}
	
	footer {
		background: #000000;
		padding: 40px 0 80px;
		text-align: center;
	}
	
	.contactTable{
		margin-bottom: 10px;
	}
	
	.contactTable th{
		display: block;
		width: 100%;
		padding-left: 20px;
	}
	
	.contactTable td{
		display: block;
		width: 100%;
		border: #D4E8FA 1px solid;
		border-bottom:none;
	}
	
	.contactTitle{
		font-size: 28px;
		margin-top: 70px;
	}
	
	.contactText{
		margin-top: 10px;
	}
	

	.contactTable td select{
		width: 100%;
	}  
  
	
}

@media screen and (max-width: 680px){
  	h1 img{
      width:140px;
    }
  
    	h1 span{
      font-size: 10px;
        padding-top: 6px;
        padding-left: 10px;
    }
  
  h1 a{
    display: inherit;
  }
	
	.sptel{
		background-color: #001F45;
		bottom: 0;
		position: fixed;
	}
	
	.sptel img {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 8px 0 0;
}
	
	.contact_phone {
    width: 86%;
    margin-left: auto;
    margin-right: auto;
}
	
	.contact_phone a {
        width: 100%;
        font-size: 7vw;
        padding: 3vh 0;
		border-bottom: 1vh solid #4b5e74;
    }
	
}