/*===============================================
　SP iPhone6以上（画面の横幅が761pxまで）
===============================================*/

@media (max-width:850px){
	
	/* ============================================================
 	main vi 
	==============================================================*/
	
     .cover{
		width:100%;
		height:100vh;
		left:0;
		top:0;
		background:#fff;
		position:absolute;
		z-index:20;
		transition: all 1.5s cubic-bezier(0, 0, 0, 0) 0.25s;
	}
	.cover_act{
		opacity:0
	}

	#main_wrap{
		width: 100%;
		height: 100vh;
		position: relative;
        overflow: hidden;
	}

	#main_copy_wrap{
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
	}
	
	#main_copy_wrap h1{
		font-family: 'Noto Serif JP', serif;
		font-weight:200;
		font-size: 3.2rem;
		color: #fff;
		text-align: center;
		letter-spacing: 2px;
		line-height: 120%;
		padding: 0 0 11px;
	}
	
	#main_copy_wrap p{
		font-size: 1.5rem;
		text-align: center;
		color: #fff;
		letter-spacing: 1px;
		text-indent: 2px;
		position: relative;
	}

	#main_copy_wrap p span{
		letter-spacing:-4px;
	}
	
	#main_copy_wrap .copy_body{
		position: relative;
	}
	
	#main_copy_wrap .copy_body:before,
	#main_copy_wrap .copy_body:after{
		content: "";
		display: block;
		width: 200px;
		height: 1px;
		background:#fff;
		position: absolute;
		top: 50%;
		opacity:0;
		transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	#main_copy_wrap .copy_body:before{
		left: 50%;
	}
	#main_copy_wrap .copy_body:after{
		right: 50%;
	}
	
	#main_copy_wrap .copy_body_act:before{
		width: 20px;
		left: 0;
		opacity:1;
	}
	#main_copy_wrap .copy_body_act:after{
		width: 20px;
		right: 0;
		opacity:1;
	}
	
	#main_wrap .bgi01{
		background: url("../img/bg01.jpg") no-repeat center;
		background-size: cover;
	}
	#main_wrap .bgi02{
		background: url("../img/bg02.jpg") no-repeat center;
		background-size: cover;
	}
	#main_wrap .bgi03{
		background: url("../img/bg03.jpg") no-repeat center;
		background-size: cover;
	}


	#main_wrap .ttl_box_top{
        width: 90%;
    }

	#main_wrap .img_box_top{
        width: 95%;
    }


	.t_wrap{
		margin: 33% 0 0 7%;
		position: relative;
		z-index: 9999;
	}

	.w_wrap{
		margin: 27px 0 0;
	}
	#main_wrap h2{
		font-size: 2.4rem;
		color:#fff;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		position: relative;
		margin: 0 0 24px;
	}

	#main_wrap h2:before{
		content:"";
		height:1px;
		width: 99px;
		background-color:#fff;
		position:absolute;
		bottom: -5px;
	}

	.logo_box_fv{
		margin: 0 0 20px;
		width: 70%;
	}
	.logo_box_fv img{
		margin-bottom: 10px;
	}
    
	

    
    
    /* ============================================================
 	main vi swiper
	==============================================================*/
	#main_wrap .swiper_bg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		transition: all 14s cubic-bezier(0.38, 0.36, 0.6, 0.6) 0s;
		transform: scale(1);
		z-index:-1;
	}
	
	#main_wrap .notransition{
		transition:none !important;
		transform: scale(1) !important;
	}

	#main_wrap .swiper-slide-active .swiper_bg{	
		transform: scale(1.2);
	}
	#main_wrap .swiper-slide-prev .swiper_bg{	
		transform: scale(2);
	}
	
	#main_wrap .bgi01{
		background: url("../img/bg01_sp.jpg") no-repeat center;
		background-size: cover;
	}
	#main_wrap .bgi02{
		background: url("../img/bg02_sp.jpg") no-repeat center;
		background-size: cover;
	}
	#main_wrap .bgi03{
		background: url("../img/bg03_sp.jpg") no-repeat center;
		background-size: cover;
	}
	#main_wrap .bgi04{
		background: url("../img/bg04_sp.jpg") no-repeat center;
		background-size: cover;
	}
	
	

	
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		background: #fff;
		padding: 24px 0;
	}
	
	#sec01 .wrapper{
		padding:0 2%;
	}
	
	#sec01 li{
		margin: 0 0 10px;

		border-bottom: 1px solid #e7e7e7;
		position:relative;
	}
	
	#sec01 li:before{
		content:"";
		background: url("../img/important.svg");
		top: 20px;
		left: 5%;
		height: 22px;
		width: 24px;
		background-size: 100%;
		display: block;
		position: absolute;
		transform: translate(0%, -50%);
	}
	
	#sec01 h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:300;
		font-size: 1.1rem;
		color: #ffffff;
		background-color: #db3a1c;
		padding: 1px 8px 2px;
		position: absolute;
		top: 20px;
		left: 14%;
		transform: translate(0%, -50%);
	}
	
	#sec01 a{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.4rem;
		margin: 0;
		padding: 40px 5% 20px;
		line-height: 133%;
		display: block;
		position: relative;
	}
	
	#sec01 a time{
		display:block;
		font-size: 1.2rem;
		line-height: 120%;
		padding: 0 0 5px;
	}
	
	
	/* ============================================================
 	sec_news
	==============================================================*/
	
	#sec_news{
		width: 100%;
		background: #fff;
		padding: 50px 0 80px;
	}

	#sec_news .wrapper{
		padding:0 2%;
	}

	/* news navi start ---------------------- */
	#sec_news #news_btn_wrap{
		display: flex;
		justify-content:space-between;
		margin: 30px 0 10px;
	}
	
	#sec_news #news_btn_wrap li{
		width: 25%;
	}
	
	#sec_news #news_btn_wrap a{
		display: block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		text-align: center;
		font-size: 1.3rem;
		color:#9fa0a0;
		padding: 16px 0;
		border-radius:4px 4px 0 0;
		background:#f5f8fa;
		position: relative;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		overflow:hidden;
		transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	
	/* anime s */
		#sec_news #news_btn_wrap a:before{
			content: "";
			display: block;
			width: 0;
			height: 6px;
			background:#000;
			position: absolute;
			top: 0;
			left: 50%;
			transform:translate(-50%, 0);
		}

		#sec_news #news_btn_wrap li.act a{
			padding: 22px 0 16px;
			margin:-6px 0 0;
			background:#fff;
			color:#000;
			border-bottom: 1px solid #fff;
		}

		#sec_news #news_btn_wrap li.act a:before{
			width: 100%;
		}

	/* anime e */
	
	
	/* news navi end ---------------------- */
	
	
	/* news list start ---------------------- */


	#sec_news .news_wrap {
		min-height: 60vh;
		margin: 0 0 40px;
	}

	#sec_news .news_list:before,
	#sec_news .news_list:after{
		content: "";
		width:220px;
		margin:0;
		padding: 0;
		height: 0px;
		overflow: hidden;
	}
	#sec_news .news_list:before{
		order: 1;
	}
	
	#sec_news .news_list > li{
	}

	#sec_news .news_list a{
		display: block;
		position: relative;
		border-bottom: 1px solid #e2e2e2;
		padding: 16px 5% 14px;
	}

	#sec_news .news_list a time{
		display:block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		letter-spacing:0.1rem;
		font-size:1.2rem;
		line-height:120%;
		color:#000;
		padding: 9px 0 5px;
	}
	
	#sec_news .news_list a p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		letter-spacing:0.1rem;
		font-size:1.4rem;
		line-height: 140%;
		color:#000;
	}
	

	#sec_news .news_list a h3{
		display:block;
		box-sizing: border-box;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:300;
		text-align: center;
		font-size: 1.2rem;
		color:#fff;
		background:#787878;
		width: 150px;
		border-radius: 4px;
		padding: 4px 12px 5px;
		line-height:100%;
	}
	
	
	/* news list end ---------------------- */
    
    #sec_news .more_btn_wrap{
        text-align: center;
    }
    
    
	/* ============================================================
 	section 03
	==============================================================*/
	
	#sec03{
		width: 100%;
		background: #fff;
		padding: 73px 0 54px;
		position: relative;
	}
	#sec03 .wrapper{
		padding: 0;
	}

	#sec03 .white_box{
		background: #fff;
		box-shadow: 0 0 10px 10px rgb(0 30 50 / 20%);
		padding: 32px 8%;
		display: block;
		width: 70%;
		margin: -48px auto 0;
	}
	
	#sec03 .img_box{
		width: 100%;
	}

	#sec03 h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 3.6rem;
		line-height: 125%;
		color:#1782ba;
		margin: 0 0 19px;
		letter-spacing: 0.5rem;
	}

	#sec03 .txt{
		margin: 0 0 22px;
	}

	
	
	/* ============================================================
 	section 04
	==============================================================*/
	
	#sec04{
		width: 100%;
		background: url("../img/bg02_sp.jpg");
		background-size: cover;
		box-sizing: border-box;
		padding: 58px 0 270px;
		background-position: left;
	}
	
	#sec04 .mini_ttl_border{
		font-size: 2.0rem;
		color:#ffffff;
		font-weight: 500;
		font-family: 'Noto Sans JP', sans-serif;
		position: relative;
		margin: 0 0 37px;
	}

	#sec04 .mini_ttl_border:before{
		background-color:#ffffff;
	}


	#sec04 h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 200;
		font-size: 3.8rem;
		line-height:130%;
		color:#ffffff;
		margin: 0 0 45px;
		letter-spacing: 0.5rem;
	}


	/* ============================================================
 	section 05
	==============================================================*/
	
	#sec05{
		width: 100%;
		box-sizing: border-box;
		padding: 70px 0 30px;
	}

	#sec05 .btn_big_wrap .img_box img{
		border-radius: 6px 6px 0 0;
	}

	#sec05 .flex{
		margin:52px 0;
	}

	#sec05 .flex h2{
		text-align:center;
		background-color:#1782ba;
		color:#fff;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 2.4rem;
		letter-spacing: 0.3rem;
		padding: 9px 0;
		margin: -3px 0 0;
		border-radius: 0 0 6px 6px;
	}

	#sec05 .txt{
		text-align:center;
	}

	#sec05 .g_txt{
		margin:10px 0 0;
		font-size: 1.3rem;
	}

	#sec05 .b_txt{
		color:#1782ba;
		text-align:center;
		font-weight: 500;
		margin: 13px 0;
	}

	#sec05 .more_btn{
		margin:0 auto;
	}
	
    #sec05 .more_btn_wrap{
        text-align: center;
    }


	/* ============================================================
 	section 06
	==============================================================*/
	
	#sec06{
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 30px;
	}
	#sec06 h2{
		margin:0 0 30px;
	}

	#sec06 .more_btn{
		text-align:center;
		margin:20px 0 0;
	}
	
}



/*===============================================
　SP iPhone5サイズ対応　画面の横幅が350pxまで▼▼▼▼▼
===============================================*/

@media (max-width:480px) {
	.logo_box_fv{
		margin: 0 0 20px;
		width: 250px;
	}
}

/*===============================================
　SP iPhone Plus サイズ対応　画面の横幅が415pxまで▼▼▼▼▼
===============================================*/

@media (min-width: 413px) and (max-width: 761px) {
	
}