@charset "UTF-8";

/*==========================================

  スマホのスタイル

==========================================*/




/*==========================================

  共通設定

==========================================*/

@media screen and (max-width:768px) {

  /* スマホの時にPC用の改行を無効にする */
  .br-pc {
    display: none;
  }
}




/*==========================================

  ヘッダー（共通）

==========================================*/
@media screen and (max-width:768px) {
  header {
    margin-top: 15px;
  }
  
  header h1 {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
  }

  header h1 img {
    height: 40px;
  }
	header .main-visual{
		background-image:url("../img/main_bk_sp.png");
	}
  header .main-visual img {
    width: 100%;
    min-width: 100%;
  }
  
  .fv-btn {
    width: 80%;
    filter: drop-shadow(0px 3px #bc123b); /* ドロップシャドウ */
	  font-size:5vw;
	  padding:4vw 0;
  }
  
  header .fv-btn:hover {
    transform: translateY(3px);
    filter: drop-shadow(0px 0px #bc123b); /* ドロップシャドウ */
  }
	header .main-visual .txt01{
		font-size:4vw;
		margin:6vw 0 3vw;
		
	}
	header .main-visual .txt02{
		font-size:7.2vw;
		margin-bottom:4vw;
	}
	header .main-visual .txt03{
		font-size:11vw;
		margin-bottom:6vw;
	}
	header .main-visual .txt03::after{
		width:12vw;
		left:-10vw;
	}
}



/*==========================================

  sec-01

==========================================*/
@media screen and (max-width:768px) {
  .sec-01 {
    margin-bottom: 40px;
	  line-height:1.5;
  }
.sec-01 .txt04 {
    font-size: 5.5vw;
	line-height:1.5;
	}
	.sec-01 h2{
		font-size:10vw;
		line-height:1.3;
		margin-bottom:40px;
	}
	.sec-01 ul li p{
		border-radius: 8px;
		font-size:4.5vw;
		text-align:left;
		line-height:1.5;
		padding:2vw 5vw;
		z-index:2;
	}
	.sec-01 ul li img{
		width:20vw;
	}
	.sec-01 ul li:nth-of-type(odd){
	padding: 2vw 2vw 0 22vw;	
	}
	.sec-01 ul li:nth-of-type(even) {
    padding: 2vw 22vw 0 2vw;
}
	.sec-01 ul li:nth-of-type(odd) p:before{
		left:-4vw;
		top:8vw;
		z-index:1;
	}
	.sec-01 ul li:nth-of-type(even) p:before{
		right:-4vw;
		top:8vw;
		z-index:1;
	}
  .sec-01 > div {
    padding-top: 40px;
  }

  .sec-01 > div > p img {
    width: 70%;
  }

  .sec-01 > div > h2 img {
    width: 80%;
    margin: 20px 0 30px;
  }

  .sec-01 ul {
    width: 92%;
    padding-bottom: 40px;
  }

  .sec-01 ul li {
    width: 100%;
  }

  .sec-01 ul li:not(:last-of-type) {
    margin-bottom: 20px;
  }
}


/*==========================================

  sec-02

==========================================*/
@media screen and (max-width:768px) {
  .sec-02 {
    margin-bottom: 40px;
  }
	.sec-02 .box01{
		width:86%;
	padding:5vw;
		font-size:4.5vw;
	}
	.sec-02 .box01 b{
		font-size:8vw;
	}
	.sec-02 .box01 p{
		margin-top:4vw;
	}
  .sec-02  h2 {
    width: 86%;
    margin: 0 auto 25px;
  }
	.sec-02 .box01 .txt05{
		font-size:7vw;
		display:inline;
	}
  .sec-02 ul {
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .sec-02  ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
	  padding-bottom:8vw;
  }

	.sec-02 ul li:nth-of-type(4){
		width: 100%;
	}
	.sec-02 .box01::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 96%;
    margin-left: -10vw;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10vw 10vw 0 10vw;
    border-color: #0B57A6 transparent transparent transparent;
}
	.sec-02 .box02{
		margin:15vw auto 8vw; 
		display:block;
		width:86%;
		
	}
	.sec-02 .box02 h2{
		width:100%;
		font-size: 10vw;
    border-right:none;
    border-bottom: 2px solid #0B57A6;
		padding:0;
		line-height:1.3;
		margin-bottom:4vw;
	}
	.sec-02 .box02 h2 span{
		font-size: 7vw;
	}
	.sec-02 .box02 p{
		width:100%;
		font-size: 6vw;
		line-height:1.3;
	}
	.sec-02 ul li::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 17px solid #0B57A6;
  border-bottom: 0;
    top: auto;
		bottom:3vw;
    right: auto;
		left:50%;
		margin-left:-10px;
}
	.sec-02 ul li .step{
		margin:0 auto;
	}
}



/*==========================================

  sec-03

==========================================*/
@media screen and (max-width:768px) {
  .sec-03 {
    margin-bottom: 40px;
  }

  .sec-03 h2 {
    width: 86%;
	  font-size:5vw;
	  
  }
	.sec-03 h2 span{
		line-height:1.3 !important;
	}
.sec-03 h2 .step {
    font-size: 4vw;
	padding:3vw;
	margin-right:4vw;
	}
	.sec-03 h2 .step b{
    font-size: 10vw;
		display:block;
		text-align:center;
	}
  .sec-03 ul {
    display: block;
    width: 86%;
    margin: 25px auto 40px;
  }

  .sec-03 ul li:nth-of-type(-n+2) {
    margin-bottom: 30px;
  }
  
  .sec-03 ul li:not(:last-of-type) {
    margin-bottom: 20px;
  }

  .sec-03 ul li a img {
    width: 100%;
  }

  .sec-03 ul li a:active img {
    opacity: 0.5;
  }
	.sec-03 dt{
		font-size:4.2vw;
	}
	.sec-03 dd{
		width:86%;
		font-size:3.8vw;
		padding:3vw;
		margin:0 auto;
		
	}
	.sec-03 dd img{
		width:20vw;
		top:-10vw;
		bottom:auto;
		
	}
	.sec-03 dd::before{
		width:20vw;
		height:10vw;
		float:right;
		content:"";
	}
}



/*==========================================

  sec-04

==========================================*/
@media screen and (max-width:768px) {
  .sec-04 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .sec-04 h2 {
    width: 86%;
  } 

  .sec-04 .graph {
    width: 86%;
    margin: 25px auto 40px;
  }

 

  .sec-04 ul {
    width: 81.5%;
  }

  .sec-04 ul li {
    margin-bottom: 20px;
  }

  .sec-04 ul li:nth-of-type(1) {
    width: 100%;
  }

  .sec-04 ul li:nth-of-type(2) {
    width: 95.7%;
  }

  .sec-04 ul + p {
    text-align: center;
  }

  .sec-04 ul + p img {
    width: 50%;
  }
}



/*==========================================

  sec-05

==========================================*/
@media screen and (max-width:768px) {
  .sec-05 {
    padding: 40px 0;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sec-05 h2 {
    width: 86%;
    margin-bottom: 25px;
	  font-size:8vw;
  }

  .sec-05 div {
    width: 86%;
  }

  .sec-05 ul {
    padding-bottom: calc(30px - (14px*1.5 - 14px)/2);
    width: 100%;
  }

  .sec-05 ul:not(:first-of-type) {
    margin-top: calc(30px - (14px*1.5 - 14px)/2);
  }

  .sec-05 ul li {
    font-size: 14px;
    display: block;
    position: relative;
    margin-left: 35px;
  }

  .sec-05 ul li::before {
    width: 28px;
    height: 28px;
    margin-right:0px;
    margin-left: -35px;
    position: absolute;
    top: -4px;
  }
}



/*==========================================

  sec-06

==========================================*/
@media screen and (max-width:768px) {
  .sec-06 p {
    width: 58%;
  }

  
}



/*==========================================

  フッター

==========================================*/
@media screen and (max-width:768px) {
  footer {
    padding: 20px 0 calc(20px - (12px*1.5 - 12px)/2);
  }

  footer p:first-of-type {
    font-size: 10px;
  }
  
  footer p:last-of-type {
    font-size: 12px;
    line-height: 1.5;
  }
}