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

@media (max-width:761px){
	
	/* ============================================================
 	main vi 
	==============================================================*/
    
	#main_wrap{
		width: 100%;
		height: 380px;
		padding: 60px 0 10px;
		background: #0a2742;
		position: relative;
		overflow: hidden;
	}

	#main_copy_wrap{
		position: absolute;
		top: 56%;
		left: 53%;
		transform:translate(-50%, -50%);
	}
	
	#main_copy_wrap h1{
		font-family: 'Noto Serif JP', serif;
		font-weight:400;
		font-size: 2.8rem;
		line-height: 1.6;
		margin: 0 0 30px;
		color: #fff;
		white-space: nowrap;
		font-feature-settings: 'palt';
		letter-spacing: 0.1rem;
	}
	
	#main_copy_wrap h1 span{
		font-size: 2.4rem;
	}
	
	
	
	#main_copy_wrap a{
		display:block;
		width:190px;
		font-family: 'Noto Serif JP', serif;
		font-weight:400;
		font-size: 1.5rem;
		background:#cfa972;
		line-height:1;
		border-radius: 20px;
		text-align: center;
		text-indent: -26px;
		padding: 11px 0 12px;
		color: #fff;
		position: relative;
		transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	#main_copy_wrap a span{
		display:block;
		width: 22px;
		position:absolute;
		top: 50%;
		right: 13px;
		transform: translate(0, -50%);
	}
	
	
    /* ============================================================
 	main loop_slide
	==============================================================*/
    
	#loopSlide{
		width: 100%;
		height: 375px;
		padding: 7px 0 0;
		position: relative;
		overflow: hidden;
	}
	
	.simply-scroll-container {
		position: relative;
	}
	.simply-scroll-clip {
		position: relative;
		overflow: hidden;
	}
	.simply-scroll-list {
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	.simply-scroll-list li {
		width: 420px;
		float: left; /* Horizontal scroll only */
		padding: 0;
		margin: 0 4px;
		height: 380px;
		overflow: hidden;
		line-height:0;
		transform: skewX(-10deg);
		position:relative;
	}
    
    .simply-scroll-list li img{
        width: 120%;
        height:auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%) skewX(10deg);
    }
    
	
	
	/* ============================================================
 	section 01
	==============================================================*/
	
	#sec01{
		width: 100%;
		background: #fff;
		padding: 60px 0;
		position:relative;
	}

	#sec01:before{
		content: "";
		display: block;
		width: 100%;
		height: 74%;
		background:#b3ccd9;
		position: absolute;
		top: 50%;
		left:0;
		transform:translate(0, -50%);
	}
	
	#sec01 .wrapper{
		padding: 0 4%;
	}

	#sec01 ul{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		gap: 16px 0;
	}

	#sec01 ul li{
		width: 45vw;
	}

	#sec01 a{
		display:block;
		width: 45vw;
		height: 45vw;
		overflow:hidden;
		border-radius:16px;
		position:relative;
	}
	
	#sec01 a h2{
		font-family: 'Noto Serif JP', serif;
		font-feature-settings: 'palt';
		font-weight:400;
		font-size: 2.2rem;
		line-height: 1.3;
		color: #fff;
		letter-spacing: 0.15rem;
		position:absolute;
		top: 15px;
		left: 18px;
		z-index:2;
	}

	#sec01 li:nth-child(8) h2{
		text-indent: -20px;
	}

	#sec01 a span{
		display:block;
		width: 33px;
		font-family: 'Noto Serif JP', serif;
		font-weight:800;
		font-size: 1.3rem;
		line-height: 1.4;
		color: #00478b;
		text-align:center;
		letter-spacing: 0.2rem;
		background: #bfd0e0;
		border-radius: 50%;
		padding: 6px 0 7px;
		position:absolute;
		bottom: 16px;
		left:50%;
		transform:translate(-50%,0);
		z-index:1;
	}

	#sec01 a span:before{
		display:inline-block;
		content: "\3009";
		font-size: 1.2rem;
		padding: 0 0 0 8px;
	}

	#sec01 a .img_box{
		line-height:0;
		position:relative;
		z-index:0;
	}
	
	
	/* ============================================================
 	section 02
	==============================================================*/
	
	#sec02{
		width: 100%;
		background: #e2e4eb;
		padding: 40px 0 100px;
		position: relative;
	}
	
	#sec02 .wrapper{
	}
	
	#sec02 h2{
		font-family: 'Noto Serif JP', serif;
		font-weight:400;
		font-size: 2.4rem;
		padding:5px 0;
		letter-spacing: 1px;
		position:relative;
		margin: 0 0 13px;
		color: #000;
	}
	
	#sec02 h2:before{
		content: "";
		display: block;
		width:100%;
		height: 1px;
		background: #a9a9a9;
		position: absolute;
		bottom: 3px;
		left:0;
	}
	
	#sec02 .news_list_wrap{
		width: 100%;
	}
	
	#sec02 .news_list_wrap li {
		margin: 0 0 14px;
	}

	#sec02 .news_info {
	}

	#sec02 .news_info .day {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.4rem;
		padding: 5px 10px 0 0;
		letter-spacing: 1px;
		display: inline-block;
		color:#00478b;
		transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	
	#sec02 .news_info h3 {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		text-align: center;
		color: #fff;
		font-size: 1.2rem;
		padding: 4px 20px;
		line-height: 100%;
		background: #00478b;
		display: inline-block;
		letter-spacing: 2px;
	}

	#sec02 .news_info .info_txt {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.4rem;
		line-height: 160%;
		padding: 5px 10% 0 0;
		letter-spacing: 1px;
	}

	#sec02 .news_info .info_txt .ls1{
		letter-spacing: -10px;
	}
	#sec02 .news_info .info_txt .ls2{
		letter-spacing: -13px;
	}
	
	
	#sec02 .news_list_wrap a{
		display:block;
		border-bottom:1px solid #ccc;
		padding: 0 0 23px;
		position:relative;
	}

	#sec02 .news_list_wrap a:before{
		content: "";
		display: block;
		width: 6px;
		height:6px;
		border-right: solid 1px #a9a9a9;
		border-bottom: solid 1px #a9a9a9;
		position: absolute;
		bottom: 50%;
		left: 96%;
		transform:translate(-50%, -50%) rotate(-45deg);
	}

	#sec02 .btn_list{
		margin: 20px 0 0 0;
	}
	#sec02 .btn_list a{
		display:block;
		border-radius: 40px;
		width: 50vw;
		background: #cfa972;
		text-align: center;
		color: #fff;
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 1.4rem;
		padding: 8px 0 9px;
		margin:0 auto;
		letter-spacing: 1px;
		position: relative;
		overflow: hidden;
	}


	
}



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

@media (max-width:349px) {
	
}

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

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