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


.pc{
	display:none;
}
.smp{
	display:inherit;
}
.pc-center{/* PC時のみセンタリング */
	text-align:left;
}
.smp-center{
	text-align:center;
}
.smp-left{
	text-align:left;
}

/* レイアウト */
/* スマホ時 float無しの1列レイアウトに（初期設定） */

.flex .col-2,
.flex .col-3,
.flex .col-4,
.flex .col-5,
.flex .col-6,
.flex .col-7,
.flex .col-8,
.flex .col-9,
.flex .col-10{
	float:none;
	width:100%;
	box-sizing:border-box;
	padding:0 0.5em; 
}

.flex .smp-col-6{/* スマホ時でも2列レイアウト */
	width:50%;
	float:left;
}

.contents,
.contents-narrow{
    max-width: inherit;
    min-width: inherit;
}
.categorytitle{
	width: 95%;
	box-sizing: border-box;
	transform: translateX(-2em) translateY(-2em) skewX(-4deg);
}
header#top{
	padding:1em 0;
	padding: 0;
}
header#top nav#global{
	display: none;
}
#vis{
	height: inherit;
	overflow: visible;
	position: static;
}
#vis .fig{
	width: 100%;
	height: 500px;
	position: static;
	background-position: right top;
	background-size: cover;
	overflow: hidden;
	box-sizing: border-box;
}
#vis .fig{
	margin: 0 0 50px 0;
}
#vis .lead{
	margin-top: -100%;
	width: inherit;
	top:50%;
	position: static;
	box-sizing: border-box;
	width: 90%;
	margin-left: 5%;
	transform: translateX(0);
}
#vis .lead .box1 h1{
	font-size: 2.4rem;
}
#vis .lead .box2{
	width: inherit;
}

#access h2.larger{
	line-height:170%;
}
#access h2.larger::before{
	content: none;
}

#point .categorytitle{
	transform: translateX(-2em) translateY(-2em) skewX(-4deg);
}
#message .flex{
	flex-direction: column;
}
#message .flex .txt{
	width: inherit;
	padding: .5em;
}
#message .flex .teacher{
	width: inherit;
}
#point .flex{
	flex-direction: column;
}
#point .flex .item{
	width: inherit;
}
#curricurum .steps .step{
	flex-direction: column;
	padding: .5em .5em .5em 1.5em;
	gap:1em;
}

#curricurum .steps .step h3{
	margin-bottom: 0;
}
#curricurum .steps .step h3::after{
	content: none;
}
#curricurum .steps .step h3,
#curricurum .steps .step .caption1,
#curricurum .steps .step ul.caption2{
	width: inherit;
}
#curricurum .steps .step h3,
#curricurum .steps .step .caption1{
	padding-left: 1em;
}
#curricurum .steps .step ul.caption2{
	margin-top: 1em;
}
#curricurum .steps .step ul.caption2::before{
  content: "";
  position: absolute;
  top: -13px;
  left: calc( 50% - 14px );
  margin-top: -14px;
  border: 14px solid transparent;
  border-bottom: 14px solid #fff;
  z-index: 2;
}
#curricurum .steps .step ul.caption2::after {
  content: "";
  position: absolute;
  top: -14px;
  left: calc( 50% - 14px );
  margin-top: -14px;
  border: 14px solid transparent;
  border-bottom: 14px solid var(--keycolor);
  z-index: 1;
}

.drawr {
    display: none;
    background-color:rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    right:0;
    width:260px;
    padding:60px 0 20px 20px;
    z-index: 100;
}
.drawr li {
    width:260px;
}
.drawr li a {
    color:#fff;
    display: block;
    padding: 15px;
}