/*===============================================
　SP
===============================================*/
@media (max-width:761px) {
	/* ============================================================
 	main vi 
	==============================================================*/
	#main_wrap_sec {
		width: 100%;
		position: relative;
	}
	#main_wrap_sec:before{
		content: "";
		display: block;
		width: 100%;
		padding-top: 100%;
		background:url(../img/mv_bg_sp.jpg) no-repeat top center;
		background-size: cover;
		position: relative;
		z-index: 2;
	}

	
	
	/* ============================================================
 	section 01
	==============================================================*/
	#sec01 {
		width: 100%;
		padding:0;
		z-index: 1;
	}
	
	#sec01 .wrapper {
		width: 94vw;
		box-sizing:border-box;
		border-radius:10px 10px 0 0;
		padding: 40px 5% 80px;
		background: #fff;
		margin: 0 auto;
	}
	#sec01 h2{
		font-family: "Noto Sans SC", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1rem;
		font-size: 2.0rem;
		color: #000000;
		position:relative;
		padding: 0 0 0px 19px;
		margin: 70px auto 15px;
	}
	
	#sec01 h2:before{
		content:"";
		position:absolute;
		width:12px;
		height:12px;
		background:#99CC00;
		top: 50%;
		left:0;
		transform: translate(0%, -50%);
	}

	#sec01 p.body_txt{
		font-family: "Noto Sans SC", sans-serif;
		font-weight: 400;
		letter-spacing: 0.1rem;
		font-size: 1.6rem;
		line-height: 1.8;
		font-feature-settings: 'palt';
		padding: 0px 6%;
		color: #000;
	}

	#sec01 .back_txt{
		font-family: "Oswald", sans-serif;
		position: absolute;
		top: 0;
		right: -20%;
		font-size: 12rem;
		font-weight: 700;
		z-index: 1;
		color: #005bac;
		opacity: 0.05;
		text-align: right;
	}

	
	
	/* ============================================================
 	section 02
	==============================================================*/
	#sec02 {
		width: 100%;
		padding:0;
	}
	
	#sec02 .wrapper {
		width: 100%;
		box-sizing:border-box;
		border-radius:10px 10px 0 0;
		background:#fff;
	}
	#sec02 a{
		background-color: #ffffff;
		padding: 15px 0px 15px 39px;
		font-size: 1.5rem;
		font-weight: 600;
		position: relative;
		width: auto;
		color: #000;
		border: 2px solid #000;
		font-family: "Noto Sans SC", sans-serif;
	}
	#sec02 a:before{
		content:"";
		background: url("/ch/global/img/icon_mail_b.svg") no-repeat;
		background-size: contain;
		position: absolute;
		width: 20px;
		height: 20px;
		top: 57%;
		left: 13px;
		transform: translate(0%, -50%);
	}

	.system-section {
		background-color: #ffffff;
		color: #fff;
	}

	.system-box {
	  margin: 0 auto 175px;
	  position: relative;
	  z-index: 1;
	}

	.system-box:nth-child(even){
		flex-direction: row-reverse;
	}
	
	.system-box:nth-child(even) .system-text{
	}

	.system-box:nth-child(even) .swiper{
		
	}

	/* ← 背後の青い板 */
	.system-box::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: -100vw; /* 画面外まで伸ばす */
	  width: 300vw;
	  height: 86%;
	  background: #005bac;
	  z-index: 0;
	}
	
	.system-text {
	  flex: 1 1 45%;
	  position: relative;
	}
	
	.system-number {
	  font-size: 1.5rem;
	  line-height: 1.2;
	  font-weight: 400;
	  font-family: "Oswald", sans-serif;
	  padding: 30px 0 0;
	}
	
	.system-number span {
	  font-size: 4.8rem;
	  font-weight: 400;
	}
	
	.system-text h2 {
	  font-size: 2.2rem;
	  font-family: "Noto Sans SC", sans-serif;
	  font-weight: 600;
	  margin: 6px 0 10px;
	}
	
	.system-desc {
	  font-size: 1.5rem;
	  line-height: 1.8;
	  margin-bottom: 20px;
	  font-family: "Noto Sans SC", sans-serif;
	}
	
	.system-btn {
	  display: inline-block;
	  background: black;
	  color: white;
	  padding: 12px 20px;
	  text-decoration: none;
	  transition: 0.3s;
	}
	
	.system-btn:hover {
	  background: #333;
	}

	/* スライダー：白背景からはみ出させる */
	.swiper-system {
	  flex: 0 0 50%;
	  padding: 40px;
	  background: transparent;
	  position: relative;
	  z-index: 2;
	  transform: translateY(30px); /* 白場にはみ出させる */
	}
		
	.swiper-system img {
	  display: block;
	  width: 100%;
	  height: auto;
	  border-radius: 4px;
	  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	}
	
	.swipe_button_p,
	.swipe_button_n {
	  color: #000;
	}
	
	.swip-pagination {
	  bottom: -46px!important;
	  left: 50%!important;
	}

	.product_name{
		position:absolute;
		top: 10px;
		right: 0;
		font-family: "Noto Sans SC", sans-serif;
		font-weight: 500;
		font-size: 1.8rem;
		background: #99cc00;
		padding: 0 8px 2px;
		line-height: 1.6;
	}

	/* 共通スタイル */
	.swiper-pagination-bullet {
	  width: 10px;
	  height: 10px;
	  background-color: rgba(0, 91, 172, 0.5); /* 半透明の青 */
	  opacity: 1; /* デフォルトだと0.2などになるので上書き */
	  margin: 0 4px;
	  transition: background-color 0.3s ease;
	  border-radius: 50%;
	}
	
	/* 表示されているドット（active） */
	.swiper-pagination-bullet-active {
	  background-color: #005bac; /* 濃い青 */
	}

	.swiper-button-next:after, .swiper-button-prev:after{
		display:none;
	}

	.swiper_wrap_Vc{
		margin:30px 0 0;
	}
	
	.swipe_button_p,
	.swipe_button_n {
		position: absolute;
		-webkit-transform:translate(0, -50%);
		transform:translate(0, -50%);
		z-index: 10;
		cursor: pointer;
		bottom: -80px;
	}
	
	.swipe_button_n {
		right: 10%;
		left: auto;
		width:40px;
	}
	
	.swipe_button_p {
		left: 10%;
		width:40px;
	}

	
	/* バレット本体 */
	.swiper-pagination-bullet {
	    width: 8px!important;
	    height: 8px!important;
	    background: #939393!important;
		border:1px solid #939393!important;
	    transition: all 0.3s;
	}
	
	.swiper-pagination-bullet-active {
	    background: #70a5d3!important;
	    opacity: 1;
	    border: 1px solid #70a5d3!important;
	}
	
	
	/* ============================================================
 	section 03
	==============================================================*/
	#sec03 {
		width: 100%;
		padding:0;
		background: #005bac;
	}
	
	#sec03 .wrapper {
		box-sizing:border-box;
		border-radius:10px 10px 0 0;
		padding: 50px 6%;
		text-align: center;
	}

	#sec03 h2{
		color:#fff;
		text-align:center;
		font-family: "Noto Sans SC", sans-serif;
		font-weight: 400;
		font-size: 1.8rem;
	}
	#sec03 a{
		background-color:#000;
		padding: 15px 12px;
		font-size: 1.8rem;
		margin: 20px auto 0;
	}


	
}