@charset "utf-8";
/*------------------------------------------------------------
	training
------------------------------------------------------------*/
#main .content {
    max-width: 888px;
}
#main .main02 .content {
    max-width: 1114px;
}
.topBox {
    padding: 162px 0 101px;
    background-color: #E2EEF5;
}
.topBox p {
    letter-spacing: 0;
    line-height: 1.79;
    text-align: center;
    font-size: 1.4rem;
}
.topBox h2 {
    margin-bottom: 27px;
    font-size: 3.5rem;
    color: #0081CC;
    letter-spacing: -0.027em;
    text-align: center;
}
.topBox h2 span {
    display: block;
    font-size: 2rem;
    letter-spacing: 0.1em;
	font-family: 'Josefin Sans', sans-serif;
}
.topMess {
	padding: 92px 0 92px;
}
.topMess .content {
	max-width: 850px;
}
.topMess h2 {
	color: #0081CC;
	text-align: center;
	font-size: 2.2rem;
	margin-bottom: 33px;
}
.topMess p {
	margin-bottom: 2.9rem;
	font-size: 1.5rem;
	line-height: 1.86;
}
.topMess p:last-child {
	margin-bottom: 0;
}
.main01 {
    padding: 92px 0 318px;
}
.main01 h2,
.main02 h2 {
    margin-bottom: 60px;
    text-align: center;
    font-size: 1.8rem;
}
.main01 h2 span,
.main02 h2 span {
    padding: 8px 5px 11px;
    box-sizing: border-box;
    min-width: 319px;
    display: inline-block;
    background-color: #0081CC;
    border-radius: 50px;
    text-align: center;
    color: white;
    font-size: 1.8rem;
}
.main01 p {
    max-width: 710px;
    margin: 0 auto 10px;
    font-size: 1.4rem;
    line-height: 1.86;
}
.main02 .photo{
    margin-right: -15px;
	padding-bottom: 98px;
}
.main01 h2 {
	margin-bottom: 51px;
}

.traningCotentBox {
  margin-bottom: 50px;
}

.traningCotentBox .boxList {
  padding-left: 1em; /* マーカーの位置調整 */
  list-style-position: outside;
}

.traningCotentBox .boxList li::marker {
  content: "・";
  font-size: 1em; /* 必要に応じて調整 */
}

.traningCotentBox .headLine_t {
	margin-bottom: 18px;
	padding-bottom: 7px;
	color: #0081CC;
	font-size: 1.8rem;
	display: flex;
	border-bottom: 2px solid #0081CC;
	justify-content: space-between;
	line-height: 1.3;
}

.traningCotentBox .headLine_t2 {
	margin-bottom: 5px;
	color: #0081CC;
	font-size: 1.7rem;
	line-height: 1.3;
}

.traningCotentBox .boxList li{
  margin-bottom: 0.5em;
  line-height: 1.5;
}

@media all and (max-width: 896px) {
    .topBox {
        padding: 142px 0 67px;
    }
    .topBox h2 {
        margin-bottom: 25px;
        font-size: 2.6rem;
    }
    .topBox h2 span {
        font-size: 1.6rem;
    }
    .topBox p {
        text-align: left;
        line-height: 1.714;
    }
	.topMess p {
		margin-bottom: 24px;
		font-size: 1.4rem;
		line-height: 1.71;
	}
	.main01 {
		padding: 50px 0 23.2rem;
	}
	.main01 .photo img {
		width: 100%;
	}
	.main02 {
		padding-bottom: 56px;
	}
	.main02 .photo{
 	 	margin: 0 auto;
   	 	padding: 0;
   	 	width: 90%;  /* コンテンツが見切れて見えるようにする */
   	 	overflow-x: auto;  /* 横スクロールの指定 */
   	 	white-space: nowrap;  /* 横スクロールの指定 */
   	 	overflow-scrolling: touch;  /* スクロールを滑らかにする */
  	 	 -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
 	 }
 	 .main02 .scroll-box {
   	 	overflow-x: auto;
   	 	padding-bottom: 10px;
   	 	-webkit-overflow-scrolling: touch;
		position: relative;
 	}
	.main02 .scrolling {
		position: relative;
	}
	.main02 .scrolling::after {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		opacity: 0;
		pointer-events: none;
		transition: opacity 1s 1s ease;
		background: rgba(0,0,0,0.4) url(../img/common/scroll_img.png) no-repeat center / 244px auto;
		content: "";
	}
	.main02 .scrolling.on::after {
		animation: weeklySwipe 2s linear forwards;
	}
  
  .traningCotentBox .headLine_t {
    text-indent: -2em;
    padding-left: 2em;
  } 
  
  
	@keyframes weeklySwipe {
		0% {
			opacity:0;
		}
		20% { 
			opacity:1;
		}
		80% {
			opacity:1;
		}
		100% {
			opacity:0;
		}
	}
 	 .main02 .scroll-box div img {
   	 	max-width: 100%;
   	 	min-width: 765px;
   	 	vertical-align: top;
 	 	}
 	 	/*スクロールバー全体の高さ*/
 	 .main02 .scroll-box::-webkit-scrollbar {
  	 	 height: 12px;
	}
 	 	/*スクロールバー全体の背景*/
	.main02 .scroll-box::-webkit-scrollbar-track {
   	 	background: #E2EEF5;
	}
 	 	/*スクロールバーの動く部分*/
	.main02 .scroll-box::-webkit-scrollbar-thumb {
		background: #fff;
		border: 3px solid #E2EEF5;
		border-radius: 10px;
	}
 	 	/*スクロールバーの動く部分のホバー（マウスオーバー）*/
 	 .main02 .scroll-box::-webkit-scrollbar-thumb:hover {
		 background: #999;
	}
	.main02 .spBox {
		margin-top: 15px;
	}
	.main02 .spBox img {
		width: 100%;
	}
	.topMess {
		padding: 60px 0 50px;
	}
	.topMess h2 {
		margin-bottom: 27px;
		font-size: 1.8rem;
	}
	.main02 .scrolling {
		margin-right: -21px;
	}
	.main01 h2, .main02 h2 {
		margin-bottom: 36px;
	}
	.main01 h2 span,
	.main02 h2 span {
		padding: 7px 5px 8px;
		font-size: 1.6rem;
		min-width: 269px;
	}
}

/* main03 */
.main03 {
	margin-bottom: 190px;
}
.main03 .headLine04 {
	margin-bottom: 33px;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: 0;
}
.main03 .headLine04 span {
	min-width: 0;
}
.main03 .textImg {
	text-align: center;
}
.main03 .textImg img {
	max-width: 747px;
}
@media all and (max-width: 896px) {
	.main03 .headLine04 {
		margin-bottom: 24px;
		font-size: 1.6rem;
	}
	.main03 .headLine04 span {
		min-width: 0;
		padding: 0 0 3px;
	}
	.main03 {
		margin-bottom: 103px;
	}
	.main03 .textImg img {
		max-width: inherit;
		width: 100%;
	}
  
  
}