/*===============================================
　SP
===============================================*/
@media (max-width:761px) {
	/* ============================================================
 	main vi 
	==============================================================*/
	#main_wrap_sec {
		width: 100%;
		height: calc(100vw * 1.1);
		position: relative;
	}

	#main_wrap_sec:after{
		content: "";
		display: block;
		width: 100%;
		height: calc(100vw * 1.4);
		background: linear-gradient( to top,  #fff 1%, #fff0 26% );
		position: absolute;
		top:2px;
		left:0;
	}

	#main_wrap_sec:before{
		content: "";
		display: block;
		width: 100%;
		height: calc(100vw * 1.4);
		background:url(../img/mv_bg_sp.jpg) no-repeat top center;
		background-size:100% auto;
		position: absolute;
		top:0;
		left:0;
	}

	.mv_ttl_wrap_b{
		position:absolute;
		top: 44%;
		left: 7%;
		transform: translate(0, -50%);
	}

	.mv_ttl_wrap_b h1 .jp_txt{
		display:block;
		font-family: 'Noto Sans', sans-serif;
		font-size: 1.8rem;
		font-weight: 500;
		letter-spacing: 0rem;
		padding: 5px 0 0;
	}
	
	/* ============================================================
 	bg_img
	==============================================================*/
	.bg_img01, .bg_img02, .bg_img03, .bg_img04, .bg_img05, .bg_img06, .bg_img07, .bg_img08, .bg_img09, .bg_img10, .bg_img11, .bg_img12, .bg_img13 {
		position: absolute;
		z-index: 0;
	}
	
	.bg_img01b,.bg_img02b,.bg_img03b,.bg_img04b{
		position: absolute;
		z-index: 1;
	}

	.bg_img01b {
		top: 50px;
		left: 45px;
	}

	.bg_img02b {
		top: -53px;
		right: 9px;
	}

	.bg_img03b {
		top: -55px;
		left: 44px;
		z-index: 0;
	}

	.bg_img04b {
		top: 86px;
		right: 19px;
		z-index: 0;
	}
	
	.bg_img01 {
		top: 241px;
		left: 0;
		width: 60px;
		/* display: none; */
	}
	.bg_img02 {
		top: 96px;
		right: -2px;
		width: 60px;
	}
	.bg_img03 {
		top: 430px;
		left: 0;
	}
	.bg_img04 {
		top: 490px;
		right: 115px;
	}
	.bg_img05 {
		top: 700px;
		left: -100px;
	}
	
	.bg_img06 {
		top: 565px;
		left: -134px;
		z-index: 0;
	}
	.bg_img07 {
		top: 1020px;
		right: -16px;
		z-index: 0;
	}
	.bg_img08 {
		top: 1730px;
		right: -205px;
		z-index: 0;
	}
	
	
	/* ============================================================
 	section 01
	==============================================================*/
	#sec01 {
		width: 100%;
		background-size:180% auto;
		padding: 0 0 90px;
	}
	
	#sec01 .wrapper {
		width: 94vw;
		box-sizing:border-box;
		border-radius:10px 10px 0 0;
		padding: 40px 6% 0;
		background: #fff;
		margin: 0 auto;
	}
	
	#sec01 h2 {
		font-family: 'Noto Sans', sans-serif;
		font-weight: 600;
		font-size: 2.0rem;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
		line-height: 1.6;
		color: #0858A3;
	}

	#sec01 h2 span{
		display:block;
		font-size: 1.6rem;
		margin:20px 0 0
	}

	

	/* ============================================================
 	section 02
	==============================================================*/
	#sec02 {
		width: 100%;
		background:#fff;
		position:relative;
	}
	
	#sec02 .wrapper {
		width:100%;
		padding: 0;
	}

	#sec02 h2 {
		font-family: 'Noto Sans', sans-serif;
		font-weight: 600;
		font-size: 2.4rem;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
		line-height: 1.6;
		text-align:center;
		color: #0858A3;
		padding: 0 0 16px;
		position:relative;
	}

	#sec02 h2:before{
		content: "";
		display: block;
		width:54px;
		height: 2px;
		background:#0858A3;
		position: absolute;
		bottom:0;
		left: 50%;
		transform:translate(-50%, 0);
	}
	
	/* ============================================================
 	sort_wrap
	==============================================================*/

	#sort_wrap{
		width:100vw;
		box-sizing: border-box;
		background:#e9f8ff;
		padding: 12px 5% 20px;
		position:fixed;
		left:0;
		top: 0;
		z-index:10000;
		transform: translate(0,-70vh);
		box-shadow: 0 0 20px 2px rgba(0,0,0,0.2);
		transition: all 0.5s cubic-bezier(0, 0, 0.21, 1.01) 0s;
	}

	#sort_wrap.sort_wrap_act{
		transform:translate(0,0);
	}

	#sort_wrap .sortControl{
		/* width:1050px; */
		margin:0 auto;
	}

	#sort_wrap .sortControl p.sortControl_txt{
		font-family: 'Noto Sans', sans-serif;
		font-weight: 500;
		font-size: 1.4rem;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
		line-height: 1.4;
		/* text-align: center; */
		padding: 0 10px 0 112px;
		margin: 0 0 6px;
		position:relative;
	}

	#sort_wrap .sortControl p.sortControl_txt span{
		display:block;
		width:34px;
		height: 34px;
		line-height: 0;
		box-sizing: border-box;
		border-radius: 50%;
		padding: 7px;
		background:#00B0FF;
		position: absolute;
		left: 70px;
		top: 2px;
	}

	#sort_wrap .sortControl .cate_wrap{
		/* display:flex; */
	}

	#sort_wrap .sortControl h3{
		font-family: 'Noto Sans', sans-serif;
		font-weight: 600;
		font-size: 1.2rem;
		line-height: 1.2;
		white-space: nowrap;
		/* width: 29%; */
		padding: 11px 0 5px 4px;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
	}

	#sort_wrap .cate_wrap ul{
		/* width: 80%; */
		display: flex;
		flex-wrap: wrap;
	}

	#sort_wrap .cate_wrap li{
		width: 47.5%;
		margin: 0 2px 4px;
	}

	#sort_wrap .cate_wrap .cond2 li{
		width: 15%;
	}

	#sort_wrap .cate_wrap label {
		display:block;
		font-family: 'Noto Sans', sans-serif;
		font-weight: 400;
		font-size: 1.3rem;
		letter-spacing:0;
		line-height:1;
		text-align:center;
		color: #00B0FF;
		background:#fff;
		padding: 6px 0 8px;
		border:1px solid #00B0FF;
		cursor: pointer;
		transition: all 0.5s ease 0s;
	}
    
    #sort_wrap .cate_wrap input[type=checkbox] {
		display: none;
	}
	
	#sort_wrap .cate_wrap input:checked + label {
		color: #fff;
		background:#00B0FF;
	}
	
	/* ============================================================
 	btn_sort_wrap
	==============================================================*/

	#btn_sort_wrap{
		position:fixed;
		left: 12px;
		top: 11px;
		z-index:12000;
		transform:scale(0);
		transition: all 0.5s cubic-bezier(0, 0, 0.34, 1.7) 0s;
	}

	#btn_sort_wrap.btn_sort_wrap_act{
		transform:scale(1);
	}

	#btn_sort_wrap p{
		font-family: 'Noto Sans', sans-serif;
		font-weight: 500;
		font-size: 1.3rem;
		letter-spacing:0;
		padding:0 0 2px;
		text-align:center;
		color:#000;
		display:none;
	}

	#btn_sort_wrap .btn_sort_on a{
		display:block;
		width: 50px;
		height: 50px;
		line-height: 0;
		box-sizing: border-box;
		border-radius: 50%;
		padding: 14px;
		background:rgb(0 176 255 / 90%);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		animation: fade_loop 1.5s infinite cubic-bezier(0.13, 0.38, 0.43, 0.99);
	}

	#btn_sort_wrap .btn_sort_off a{
		display:block;
		width: 50px;
		height: 50px;
		line-height: 0;
		box-sizing: border-box;
		border-radius: 50%;
		padding: 14px;
		background:#aeaeae;
		position:relative;
	}

	#btn_sort_wrap .btn_sort_off a:before,
	#btn_sort_wrap .btn_sort_off a:after{
		content: "";
		display: block;
		width: 1px;
		height:20px;
		background:#fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%) rotate(-45deg);
	}
	#btn_sort_wrap .btn_sort_off a:after{
		transform:translate(-50%, -50%) rotate(45deg);
	}



	/* ============================================================
 	section 03
	==============================================================*/
	#sec03 {
		width: 100%;
		padding: 40px 0 150px;
		position:relative;
	}
	
	#sec03 .wrapper {
	padding: 0 4%;
	}

	#sec03 .itemList{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		gap:10px 0;
	}

	#sec03 .itemList li{
		width: 45vw;
		box-sizing:border-box;
		padding: 10px 10px;
		border:1px solid #D0D0D0;
	}

	#sec03 .itemList li.active{
		border:3px solid #00B0FF;
		padding: 8px 8px;
	}

	#sec03 .itemList .img_box{
		width: 100%;
		min-height: 40vw;
		margin: 0 0 20px;
		position: relative;
	}

	#sec03 .itemList .img_box img{
		width:100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
	}

	#sec03 dl{
		display:flex;
		margin:0 0 5px;
	}

	#sec03 dt{
		width: 46px;
		box-sizing:border-box;
		border:1px solid #D0D0D0;
		font-family: 'Noto Sans', sans-serif;
		font-weight: 400;
		line-height:1.4;
		font-size: 1.0rem;
		text-align:center;
		color:#898989;
		padding: 3px 0 2px;
	}
	#sec03 dd{
		box-sizing:border-box;
		font-family: 'Noto Sans', sans-serif;
		font-weight: 500;
		line-height:1.4;
		font-size: 1.3rem;
		letter-spacing:0;
		text-align:center;
		padding:1px 0 2px 8px;
	}
	
	#sec03 h2 {
		font-family: 'Noto Sans', sans-serif;
		font-weight: 500;
		font-size: 1.3rem;
		min-height: 2.5em;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
		line-height: 1.4;
		padding: 0 0 10px;
	}
	
}