@charset "utf-8";
/* CSS Document */

.sec01{
	padding: 40px 0;
}
	
/* sec01 は divine.css の .sec01-divine で上書き済み */
.sec01{ 
background: linear-gradient(135deg, #1a0a2e 0%, #2d1055 50%, #1a0a2e 100%);
}

.sec01 h2{
	text-align: center;
	margin: 0 0 20px;
	color: #fff;
	text-shadow: 0 0 20px rgba(200,100,180,0.5), 0 1px 4px rgba(0,0,0,0.7);
}
.sec01 h2 span{
	background:linear-gradient(transparent 60%, rgba(245,217,138,0.35) 60%);
}

.sec01 p{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #f0eaff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.sec01 p.ti{
	font-size: 16px;
	margin: 10px 0 0;
	text-align: left;
	color: rgba(240,234,255,0.75);
	font-weight: 400;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 60px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.sec02 .youtube h2{
	font-size: 20px;
	margin: 0 0 20px;	
	text-align: center;	
}

.sec02 h2 span{
	background:linear-gradient(transparent 60%, rgba(200,100,180,0.25) 60%);
}
.sec02 h2{
	color: #2d1055;
}
.sec02 p{
	color: #2a1a3e;
	line-height: 2;
	font-size: 18px;
}
.sec02 p b{
	color: #7a1a4a;
}
.sec02-recommend {
  margin: 24px 0 8px !important;
  font-size: 18px;
  color: #2d1055;
}
.sec02-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.sec02-list li {
  font-size: 18px;
  color: #2a1a3e;
  line-height: 2;
  padding-left: 1.4em;
  position: relative;
}
.sec02-list li::before {
  content: "•";
  position: absolute;
  left: 0.3em;
  color: #7a1a4a;
  font-size: 1.1em;
}


.sec02,.sec04{
	margin: 60px 0;
}
.sec02 .box h2{
	font-size: 20px;
	margin: 0 0 20px;	
}
.sec02 .box .img{
	max-width: 80%;
	margin: 40px auto 0;
}
.sec03,.sec05{
	padding: 60px 0;
	background: linear-gradient(135deg, #0e0620 0%, #1e0a3c 40%, #2d1055 70%, #1e0a3c 100%);
	border-top: 2px solid rgba(245,217,138,0.3);
}
.sec03 h2,.sec04 h2{
	font-size: 20px;
	margin: 0 0 20px;
	text-align: center;
}
.sec03 h2 {
	color: #f5d98a !important;
	font-size: clamp(1.2rem, 3vw, 1.7rem) !important;
	text-shadow: 0 0 20px rgba(245,217,138,0.4), 0 2px 6px rgba(0,0,0,0.7) !important;
	line-height: 1.7;
}
.sec03 > .block > p {
	color: #f0eaff !important;
	text-align: center;
	font-size: 18px;
	line-height: 2;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.sec04 .step{
	border: solid 1px #7a1a4a;
	padding: 10px;
	margin: 0 0 40px;
	background: #fff;
}
.sec04 .step h3{
	padding: 1rem 2rem 1rem;
	border: 1px solid #7a1a4a;
	background: linear-gradient(90deg, #2d1055, #7a1a4a);
	font-weight: bold;
	margin: 0 0 30px;
	font-size: 20px;
	color: #f5d98a;
	letter-spacing: 2px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.sec04 .step h4{
	text-align: center;
	font-size: clamp(1.1rem, 1.0rem + 0.6vw, 1.4rem);
	line-height: 1.6;
	margin-bottom: 0.8em;
	color: #2d1055;
}
.sec04 .step h4 span{
	border: solid 2px #7a1a4a;
	padding: 10px 16px;
	color: #2d1055;
}
.sec04 .step h5{
	text-align: center;
	font-size: 18px;
	margin: 0 0 20px;
	color: #7a1a4a;
	font-weight: 700;
}
.sec04 .step p{
	color: #2a1a3e;
	font-size: 18px;
	line-height: 2;
}
.sec05 .box .img{
	max-width: 46%;
	margin: auto;
} 
.sec05 .box{
	margin: 0 0 20px;
}
.sec05 .box .area h2{
	font-size: 20px;
	margin: 0 0 10px;
	color: #2d1055;
	line-height: 1.7;
}
.sec05 .text p{
	color: #2a1a3e;
	font-size: 18px;
	line-height: 2;
}
.sec05 .text p b{
	color: #7a1a4a;
}
.sec05 .text h3{
	border-bottom: 2px solid #7a1a4a;
	margin: 0 0 10px;
	font-size: 20px;
	color: #2d1055;
}
.sec05 .ti{
	color: #555;
}
.sec05 .img-2{
	max-width: 30%;
	margin: 40px auto;
}

	.sec04 h2{
		color: #7a1a4a;
	}

/* ===============================
   レスポンシブ：768px以上（タブレット）
================================== */
@media (min-width: 768px) {
	.sec01 p.ti{
		text-align: center;
	}
	.sec01 p{
		font-size: 24px;
	}
	
	.sec02 .box{
		display: inline-grid;
		column-gap: 2em;
		grid-template-columns: repeat(2, auto);	
	}
	.sec02 .box .img{
		margin: 0 auto;
	}
	.sec03 h2,.sec04 h2{
		font-size: 24px;
	}
	.sec03 h2 {
		color: #f5d98a !important;
	}
	.sec03 p,.sec04 p {
		text-align: center;
	}

	.sec05 .box{
		display: flex;
		justify-content: space-between;   
		align-items:center;    
	}
	.sec05 .box .img{
		width: 30%;
		margin: 0px !important;
	} 
	.sec05 .box .area{
		width: 64%;		
	}
	.sec05 .img-2{
		max-width: 28%;
		margin: 40px auto;
	}	
	
	.sec05 .ptc{
		text-align: center;
	}
.sec04 .step h4{
    font-size: 1.8rem;
    line-height: 1.5;
}	

}