@charset "utf-8";
/*----------------
[1]common
[2]headerContainer
[3]footerContainer
[4]Container
[5]topContainer
[6]other
------------------ */

:root {
	--bs-black: #000;
	--bs-black-rgb: 0, 0, 0;
	--bs-white: #fff;
	--bs-white-rgb: 255, 255, 255;
	--bs-gray-90: #f0f0f0;
	--bs-gray-50: #bababa;
	--bs-body-color: #313131;
	--bs-main-color: #1667b2;
	--bs-main-color-rgb: 22, 103, 178;
	--bs-sub-color: #009529;
	--bs-sub-color-rgb: 0, 147, 57;
	--bs-accent-color: #ffea2b;
	--bs-accent-color-rgb: 255, 234, 43;
	--bs-main-color-50: #8cc3d2;
	--bs-main-color-70: #d6e5e8;
	--bs-main-color-90: #f1f7fb;
	--bs-sub-color-90: #f3f7d8;
	--bs-font-sans-serif: 'Zen Maru Gothic', system-ui;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-font-sans-serif-en: 'Ubuntu', system-ui;
	--bs-body-font-family-002: var(--bs-font-sans-serif-en);
	--bs-font-sans-serif-sub: 'Noto Sans JP', system-ui;
	--bs-body-font-family-003: var(--bs-font-sans-serif-sub);
	--bs-body-font-size: 14px;
	--bs-body-font-weight: 700;
	--bs-body-line-height: 1.8;
	--bs-body-letter-spacing: 0.08em;
	--bs-body-mainttl-font-size: 25px;
	--bs-body-subttl-font-size: 18px;
	--bs-body-contentsttl-font-size: 16px;
	--bs-body-otherttl-font-size: 15px;
}


/* **********************************************************************************************
[1]common
************************************************************************************************ */
html{
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: var(--bs-body-font-size);
	font-family: var(--bs-body-font-family-003);
	font-style: normal;
	font-variant: normal;
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	letter-spacing: var(--bs-body-letter-spacing);
	color: var(--bs-body-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

#trns{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;
	background-image: url(images/footer-logo2.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 239px 69px;
	background-color: var(--bs-white);
}
#wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* clear
----------------------------------------------- */
.clear { clear: both; }
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { min-height: 1px; }
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* a 
----------------------------------------------- */
a,a:link { text-decoration: none; }
a img, img {
	border: none;
	line-height: normal;
	vertical-align: top;
}

/* img 
----------------------------------------------- */
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
}
.imgText {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.object-fit-img {
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;'
}

/* slide
----------------------------------------------- */
#topContent {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh;
}

#topContent:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 8 / 1;
	background-image: url(images/bg-ill000.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	content:"";
}


#sliderbox {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 50vh;
	padding: 0;
	top: 0px;
	box-sizing: border-box;
}

#sliderbox li.box {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#sliderbox li.slick-img {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#sliderbox li figure{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 50vh;
}

#sliderbox li figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}


.newsBnr {
	position: absolute;
	bottom: 10px;
	right:-30px;
	width: 150px;
	aspect-ratio: 372 / 315;
	background-image: url(images/bg-btn.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	z-index: 999999999;
}

.newsBnr a{
	display: block;
	width: 150px;
	aspect-ratio: 372 / 315;
	color: #FFF;
}

.newsBnr .newsBnrD {
	display: flex;
	align-items: center;
	justify-content: center;
}
.newsBnr h2 {
	font-family: var(--bs-body-font-family);
	font-size: 12px;
	width: 50%;
	/* height: 315px; */
	position: relative;
}

.newsBnr h2 span {
	position: absolute;
	top: 50px;
	left: -15px;
	font-weight: 900;
}

.newsBnr .newsBnrD div {
	display: none;
}


.fadein001 {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1s;
}
 
.fadein001.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein002 {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1s;
}
 
.fadein002.active{
  opacity : 1;
  transform : translate(0, 0);
}

.fadein003 {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 1s;
}
 
.fadein003.active{
  opacity : 1;
  transform : translate(0, 0);
}

/* **********************************************************************************************
[2]headerContainer
************************************************************************************************ */
header {
	width: 120px;
	aspect-ratio: 302 / 146;
	z-index: 99999999997;
	position: absolute;
	top: 0px;
	left: 0;
	box-sizing: border-box;
	background-image: url(images/bg-logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
}

header h1 {
	position: relative;
	left: 5px;
	aspect-ratio: 184 / 53;
	width: 90px;
	top: 12px;
	text-align: center;
	z-index: 999999999;
}
header h1 a {
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width: 90px;
	aspect-ratio: 184 / 53;
	box-sizing: border-box;
	background-image: url(images/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	transition: opacity .3s;
}

.headerNavBox {display: none;}

.loginBtn {
	position: fixed;
	right: calc(2.5% + 42px);
	top: 12px;
	width: 90px;
	z-index: 99999999999;
}

.loginBtn a{
	background-color: var(--bs-accent-color);
	border: 2px solid var(--bs-accent-color);
	border-radius: 50vh;
	padding: 5px 10px;
	line-height: 1.0;
	font-size: 13px;
	font-family: var(--bs-body-font-family);
	color: var(--bs-main-color);
	letter-spacing: 0.001em;
	transition: border .3s;
	width: 90px;
	
}

.loginBtn a:active {
	border: 2px solid var(--bs-main-color);
	transition: border .3s;
}

#_btn {
  overflow: hidden;
  height: 40px;
  width: 40px;
  position: fixed;
  top: 5px;
  right: 2.5%;
  z-index: 9999999999999;
  box-sizing:  border-box;
  transition: background-color .3s;
  border: 2px solid var(--bs-main-color);
  background-color: var(--bs-main-color);
  border-radius: 50%;
}

#_btn:hover {
  transition: background-color .3s;
}

#_btn_nav {
  float: left;
  cursor: pointer;
  position: relative;
}
#nav_open {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 40px;
  width: 40px;
  transition:width .3s, height .3s;
}
#nav_close {
  position: absolute;
  z-index: 2;
  top:  0px;
  height: 40px;
  width: 40px;
  transition:width .3s, height .3s;
}

#fadeLayer {
  position:absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  background-color: rgba(255,255,255,0.8);
  visibility:hidden;
  z-index: 999999999998;
  cursor: pointer;
}
#menu {
  	position: relative;
  	z-index: 0;
  	top: 8px;
	margin: 0px auto 0;
 	height: 40px;
	width: 40px;
    cursor: pointer;
	transition:top .3s;
}

#menu .bar {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: var(--bs-white);
    position: absolute;
    left: 50%;
	margin-left: -12px;
    transition: .15s ease-in-out;
}
#bar01 {top: 4px;}
#bar02 {top: 10px;}
#bar03 {top: 16px;}
.active #bar01 {
    top: 10px;
    transform: rotate(45deg);
}
.active #bar02 {width: 0;}
.active #bar03 {
    top: 10px;
    transform: rotate(-45deg);
}

.headerNav {
	width: 100%;
	height: 100%;
	/* min-height: 100vh; */
	position: fixed;
	top: -100%;
	left: 0;
	z-index: 999999999999;
	padding: 0px 2.5%;
	box-sizing: border-box;
	background-color: var(--bs-white);
	overflow: hidden;
}

    .humber {
        height: 100%;
        overflow: auto;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
    }
    .humber::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }

.headerNav2 {
	/* height: 100%; */
	position: relative;
	box-sizing: border-box;
}

.headerNav2 h2 {
	box-sizing: border-box;
	padding: 10px 0px 0;
	position: relative;
	width: 100px;
	aspect-ratio: 239 / 69;
	margin-bottom: 25px;
}

.headerNav2 h2 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width: 100px;
	aspect-ratio: 239 / 69;
	background-size: contain;
	margin: 0;
	box-sizing: border-box;
	background-image: url(images/footer-logo2.png);
	transition: opacity .3s,width .3s;
}

.side001 {box-sizing: border-box; padding: 0px 0px; margin-bottom: 25px;}
.side001 li { margin-left: 0px;}
.side001 li a{
	display: block;
	padding: 10px;
	box-sizing: border-box;
	text-align: left;
	color: var(--bs-main-color);
	border-bottom: 1px solid #ccc;
	position: relative;
	transition: color .3s;
}

.side001 li a img {width: 20px; vertical-align: middle; margin-right: 5px;}

.sns2 {display: flex; justify-content: center;}
.sns2 li {padding: 0 2px; box-sizing: border-box;}
.sns2 li a {
	background-color: var(--bs-main-color);
	border: 2px solid  var(--bs-main-color);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	display: block;
	transition: background-color .3s;
}
.sns2 li:nth-of-type(1) a img {width: 12px; margin-top: 10px;}
.sns2 li:nth-of-type(2) a img {width: 23px; margin-top: 8px;}
.sns2 li:nth-of-type(3) a img {width: 23px; margin-top: 13px;}

.sns2 li a:hover {
	background-color: var(--bs-white);
	transition: background-color .3s;
}
.sns2 li a img {
filter: invert(100%) sepia(1%) saturate(7472%) hue-rotate(346deg) brightness(113%) contrast(112%);}
.sns2 li a:hover img {
filter: invert(23%) sepia(78%) saturate(3490%) hue-rotate(192deg) brightness(87%) contrast(101%);
}

/* **********************************************************************************************
[3]footerContainer
************************************************************************************************ */
footer {
	position: relative;
	width: 100%;
	padding: 0 5% 40px;
	box-sizing:	border-box;
	background-color: var(--bs-white);
}

h2.footerTtl {
	width: 100px;
	aspect-ratio: 239 / 69;
	margin: 0 auto 10px;
	box-sizing: border-box;
}
h2.footerTtl a{
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-image: url(images/footer-logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 100px;
	aspect-ratio: 239 / 69;
}

.footerContact {
	margin-bottom: 120px;
	text-align: center;
}
.footerContact li{padding: 0 5px; box-sizing: border-box;}
.footerContact li:nth-of-type(1) img{ width: 30px; vertical-align: middle;}
.footerContact li:nth-of-type(1),
.footerContact li:nth-of-type(1) a {
color: var(--bs-main-color);
font-size: 35px;
font-family: var(--bs-body-font-family);
font-weight: 900;
line-height: 1.0;
text-align: center;
margin-bottom: 20px;
}

.footerContact li:nth-of-type(1) .teltext {
color: var(--bs-body-color);
font-size: 12px;
line-height: 1.0;
font-family: var(--bs-body-font-family-003);
font-weight: 500;
display: block;
text-align: center;
}

.footerContact li:nth-of-type(2) img{ width: 20px; vertical-align: middle; margin-right: 5px;}




/* copyright
----------------------------------------------- */
.copyright {
	font-size: 10px;
	text-align: center;
	box-sizing: border-box;
	font-weight: 500;
	font-family: var(--bs-body-font-family-002);
}


/* pageTop
----------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 40px;
	right: 2.5%;
	color: var(--bs-body-color);
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 10px;
	z-index: 999999999;
}
#pageTop a{
	color: var(--bs-body-color);
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	box-sizing: border-box;
	border: 2px solid var(--bs-main-color);
	background-color: var(--bs-main-color);
	line-height: 1.1;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
#pageTop a:after {
	position: absolute;
	background-image: url(images/upW.svg);
	background-repeat: no-repeat;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	content: "";
	transition: top .3s;
}

#pageTop a:hover:after {
	top: -4px;
	transition: top .3s;
}


/* **********************************************************************************************
[4]Container
************************************************************************************************ */
#container {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	position: relative;
	z-index:99999999;
}
body #container {
font-family: var(--bs-body-font-family-003);
}
#container section{position: relative; /* transform:rotateZ(0.03deg); */}
#sub #container section:last-child {padding-bottom: 80px;}
.bgGry {background-color: var(--bs-gray-100);}



/* Ttl
----------------------------------------------- */
.mainTtl {
	margin-bottom: 20px;
	text-align: center;
	position: relative;
	color: var(--bs-main-color);
}


.mainTtl p{
	font-family: var(--bs-body-font-family-003);
	font-weight: 800;
	font-size: var(--bs-body-subttl-font-size);
	line-height: 1.2;
}

.mainTtl p span{
	display: inline-block;
	font-size: 14px;
	
}

.mainTtl h2 {
	display: block;
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	font-size: var(--bs-body-mainttl-font-size);
	margin: 0 auto;
	letter-spacing: 0.01em;
	line-height: 1.4;
}


.mainTtl h2 span.ttlBg{
	display: inline-block;
	position: relative;
	padding: 0 30px 0 30px;
}

.mainTtl h2 span.ttlBg:before {
	background-image: url(images/ttl-bgL.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: absolute;
	top:10px;
	left:-30px;
	content:"";
	width: 60px;
	height: 60px;
}

.mainTtl h2 span.ttlBg:after {
	background-image: url(images/ttl-bgR.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: absolute;
	top:10px;
	right:-30px;
	content:"";
	width: 60px;
	height: 60px;
}

span.ttlBg{
	display: inline-block;
	position: relative;
	padding: 0 30px 0 30px;
}

span.ttlBg:before {
	background-image: url(images/ttl-bgL.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: absolute;
	top:10px;
	left:-30px;
	content:"";
	width: 60px;
	height: 60px;
}

span.ttlBg:after {
	background-image: url(images/ttl-bgR.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: absolute;
	top:10px;
	right:-30px;
	content:"";
	width: 60px;
	height: 60px;
}


.subTtl {
	display: block;
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	font-size: var(--bs-body-contentsttl-font-size);
	margin: 0 0 0px 20px;
	color: var(--bs-main-color);
}


/* Btn
----------------------------------------------- */
.btn { text-align: center; margin: 0px auto 0; display: block;}


.btn a,
a .btn,
.btn input[type=submit],
.btn input[type=button],
.btn button {
	display: inline-block;
	padding: 20px;
	box-sizing: border-box;
	color: var(--bs-white);
	width: 100%;
	max-width: 300px;
	background-color: var(--bs-main-color);
	position: relative;
	text-align: center;
	font-weight: 900;
	line-height: 1.0;
	vertical-align: middle;
	border: 3px solid var(--bs-main-color);
	border-radius: 80px;
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	transition: background-color .3s, color .3s;
}


.btn a:before,
a .btn:before{
	position: absolute;
	top:0;
	bottom:0;
	right: 10px;
	margin: auto 0;
	content:"";
	background-color: var(--bs-accent-color);
	background-image: url(images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 8px auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: top .3s;
}

.btn a:hover {
background-color: var(--bs-white);
color: var(--bs-main-color);
transition: background-color .3s, color .3s;
}

.btn2 a,
a .btn2,
.btn2 input[type=submit],
.btn2 input[type=button],
.btn2 button {
	display: inline-block;
	padding: 10px 20px 10px 15px;
	box-sizing: border-box;
	color: var(--bs-main-color);
	width: auto;
	background-color: var(--bs-accent-color);
	position: relative;
	text-align: center;
	font-weight: 700;
	line-height: 1.0;
	vertical-align: middle;
	border: 2px solid var(--bs-main-color);
	border-radius: 80px;
	font-size: 12px;
	font-family: var(--bs-body-font-family-003);
	transition: background-color .3s;
}


.btn2 a:before,
a .btn2:before{
	position: absolute;
	top:0;
	bottom:0;
	right: 5px;
	margin: auto 0;
	content:"";
	background-color: var(--bs-accent-color);
	background-image: url(images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 5px auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	transition: top .3s;
}

.btn2 a:hover {
background-color: var(--bs-white);
transition: background-color .3s;
}


.btn3 a {
	display: inline-block;
	padding: 20px;
	box-sizing: border-box;
	color: var(--bs-white);
	width: 100%;
	max-width: 400px;
	background-color: var(--bs-main-color);
	position: relative;
	text-align: center;
	font-weight: 900;
	line-height: 1.0;
	vertical-align: middle;
	border: 3px solid var(--bs-main-color);
	border-radius: 80px;
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	transition: background-color .3s, color .3s;
}

.btn3 a:hover {
background-color: var(--bs-white);
color: var(--bs-main-color);
transition: background-color .3s, color .3s;
}


.btn3 a img {
filter: invert(100%) sepia(1%) saturate(7472%) hue-rotate(346deg) brightness(113%) contrast(112%);}
.btn3 a:hover img {
filter: invert(23%) sepia(78%) saturate(3490%) hue-rotate(192deg) brightness(87%) contrast(101%);
}

/* **********************************************************************************************
[5]topContainer
************************************************************************************************ */

/* top001
----------------------------------------------- */
.commonText { font-weight: 500; line-height: 2.0; text-align: left; margin-bottom: 60px; padding: 0 10px; box-sizing: border-box;}


.program li {
	padding: 30px 10px;
	box-sizing: border-box;
	text-align: center;
	position: relative;
}
.program li:before {
	position: absolute;
	top:-30px;
	left: 0;
	right:0;
	margin: 0 auto;
	content:"×";
	color: var(--bs-gray-50);
	font-size: 35px;
	font-weight: 200;
	line-height: 1.0;
}
.program li:first-child:before {content:"";}

.program li dl {position: relative; padding: 20px; box-sizing: border-box; border-radius: 10px; min-width: 180px;}
.program li dt {
	position: absolute;
	top: -22px;
	left:0;
	right:0;
	margin: 0 auto;
}
.program li dt span {
	display: inline-block;
	background-color: #FFF;
	border-radius: 80px;
	padding: 8px 20px;
	box-sizing: border-box;
	line-height: 1.0;
	font-weight: 500;
	position : relative;
}
.program li dt span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
}

.program li dd {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-contentsttl-font-size);
	color: var(--bs-white);
}

.program li:nth-of-type(1) dl {background-color: #ef9aa0;}
.program li:nth-of-type(2) dl {background-color: #8cc3d2;}
.program li:nth-of-type(3) dl {background-color: #e7c344;}

.program li:nth-of-type(1) dt span {color: #ef9aa0; border: 2px solid  #ef9aa0;}
.program li:nth-of-type(2) dt span {color: #8cc3d2; border: 2px solid  #8cc3d2;}
.program li:nth-of-type(3) dt span {color: #e7c344; border: 2px solid  #e7c344;}



/* top002
----------------------------------------------- */
.bgNote {
	background-image: url(images/bg-ill002.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center top;
	height: 100%;
	width: auto;
	/* aspect-ratio: 1920 / 1880; */
}

.shiori {
	position: absolute;
	top:0px;
	left:0;
	width: 100px;
	aspect-ratio: 270 / 503;
}

.sixpoint {
	margin-bottom: 40px;
}
.sixpoint li{
	padding: 0 15px 30px;
	box-sizing: border-box;
	width: 100%;
}
.sixpoint li div{
	border: 3px solid var(--bs-main-color);
	background-color: var(--bs-white);
	padding: 20px 20px 40px;
	box-sizing: border-box;
	border-radius: 20px;
	position: relative;
}

.sixpoint li figure {text-align: center; position: relative;}
.sixpoint li dl {padding: 0; box-sizing: border-box; position: relative;}
.sixpoint li dt {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color);
	margin-bottom: 15px;
	font-weight: 900;
	line-height: 1.4;
	/* letter-spacing: 0.02em; */
}
.sixpoint li dt span{
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
}
.sixpoint li dd { font-weight: 500; position: relative; }

.sixpoint li div:before {
position: absolute;
bottom: 15px;
right: 15px;
font-size: 100px;
color: var(--bs-main-color-70);
font-family: var(--bs-body-font-family);
line-height: 1.0;
}


.sixpoint li:nth-of-type(1) div:before {content:"01"}
.sixpoint li:nth-of-type(2) div:before {content:"02"}
.sixpoint li:nth-of-type(3) div:before {content:"03"}
.sixpoint li:nth-of-type(4) div:before {content:"04"}
.sixpoint li:nth-of-type(5) div:before {content:"05"}
.sixpoint li:nth-of-type(6) div:before {content:"06"}

.schoolone .sixpoint li div:before {content:"";}


.schoolone .sixpoint li .btn2 {text-align: center; margin-top: 20px;}



.schoolone .sixpoint li .btn2 a {
	color: var(--bs-white);
	background-color: var(--bs-main-color);
}

.schoolone .sixpoint li .btn2 a:hover {
color: var(--bs-main-color);
background-color: var(--bs-white);
transition: background-color .3s;

}

/* top003
----------------------------------------------- */

.ill003 {
	position: absolute;
	top:430px;
	left:50px;
	width: 60px;
	aspect-ratio: 144 / 143;
}

.ill004 {
	position: absolute;
	top:0px;
	left:10px;
	width: 60px;
	aspect-ratio: 199 / 170;
}
.ill005 {
	position: absolute;
	top:-10px;
	right:10px;
	width: 60px;
	text-align: right;
	aspect-ratio: 191 / 194;
}
.ill006 {
	position: absolute;
	top: 450px;
	right:20px;
	text-align: right;
	width: 60px;
	aspect-ratio: 214 / 170;
}


.mask01 {
	position: absolute;
	top:0px;
	left:50px;
}

.mask02 {
	position: absolute;
	top:500px;
	left:20px;
}

.mask04 {
	position: absolute;
	top:10px;
	right:50px;
}



.mask01 img {
          -webkit-mask-image: url(images/img-mask001.svg);
          mask-image: url(images/img-mask001.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 80px;
          aspect-ratio: 371 / 304;
}
.mask02 img {
          -webkit-mask-image: url(images/img-mask002.svg);
          mask-image: url(images/img-mask002.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 80px;
          aspect-ratio: 315 / 253;
}
.mask04 img {
          -webkit-mask-image: url(images/img-mask004.svg);
          mask-image: url(images/img-mask004.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 80px;
          aspect-ratio: 352 / 298;
}


.schoolBox {position: relative; color: #FFF; margin-top: 40px;}
.schoolLeft {
background-image: url(images/bg-ill007.png);
background-repeat: no-repeat;
background-size:cover;
background-position: center top;
width: 100%;
aspect-ratio: 872 / 673;
position: relative;
padding: 40px 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: left;
max-width: 660px;
margin: 140px auto 0;
}

.schoolLeft .schoolSubBox {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.schoolSubBox h3 {margin-bottom: 20px;}
.schoolSubBox dd{ font-weight: 400; margin-bottom: 15px;}
.schoolSubBox dt span{display: inline-block;box-sizing: border-box;padding: 5px;border-radius: 5px;}
.schoolLeft .schoolSubBox h3 span{
	display: inline-block;
	background-color: var(--bs-white);
	padding: 5px;
	box-sizing: border-box;
	border-radius: 5px;
}
.schoolLeft .schoolSubBox dt span {background-color: var(--bs-white); color: #e6000d; line-height: 1.0;}




.schoolRight {
background-image: url(images/bg-ill008.png);
background-repeat: no-repeat;
background-size:cover;
background-position: center top;
width: 100%;
max-width: 500px;
margin: 0 auto;
aspect-ratio:713 / 572;
padding: 100px 20px 80px;
box-sizing: border-box;
position: relative;
display: flex;
align-items: start;
justify-content: left;
}
.schoolRight .schoolSubBox {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}


.schoolRight .schoolSubBox h3{
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-contentsttl-font-size);
color: var(--bs-accent-color);
font-weight: 900;
}

.schoolLeft .btn2,
.schoolRight .btn2 {
	/* position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: -110px; */
	margin: 0 auto;
	text-align: center;
}

.mask03 {
	position: absolute;
	top:-60px;
	right:5px;
}
.mask05 {
	position: absolute;
	bottom: -40px;
	right:5px;
}

.mask03 img {
          -webkit-mask-image: url(images/img-mask003.svg);
          mask-image: url(images/img-mask003.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 120px;
          max-width: 376px;
          aspect-ratio: 376 / 375;
}
.mask05 img {
          -webkit-mask-image: url(images/img-mask005.svg);
          mask-image: url(images/img-mask005.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 100px;
          max-width: 316px;
          aspect-ratio: 316 / 318;
}



.first-v2 {
    position: relative;
    background-image: url(images/bg-img.jpg);
    background-size: cover;
    height: 0%;
    padding-top: min(100vh,35%);
}

.plus {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--bs-white);
	color: var(--bs-main-color);
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	margin-right: 5px;
	margin-top: -2px;
	line-height: 1.0;
	padding: 0px 0 0 0px;
}



/* top004
----------------------------------------------- */
.top004 {
	background-color: var(--bs-sub-color-90);
}

.top004:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 8 / 1;
	background-image: url(images/bg-ill000.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	content:"";

}

.illnews {
	position: absolute;
	top:-50px;
	right: 0;
	width: 100px;
	aspect-ratio: 223 / 228;
}

.top004 .mainTtl {color: var(--bs-sub-color); text-align: left;}
.top004 .btn2 {
	position: absolute;
	top:80px;
	right: 2.5%;
}

.top004 .btn2 a{
	border: none;
	color: var(--bs-sub-color);
}

.top004 .btn2 a:before{
	background-image: url(images/arrowRightG.svg);
}

.newsBox {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.newsBox li {
	width: 50%;
	padding: 5px;
	box-sizing: border-box;
}

.newsBox li div {
	background-color: var(--bs-white);
	border-radius: 10px;
}


.newsBox li div a{
	display: block;
}
.newsBox li div dl {
	padding: 15px;
	box-sizing: border-box;
}
.newsBox li div dt{
	color: var(--bs-body-color);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.newsBox li div dd{
	color: var(--bs-sub-color);
	font-weight: 500;
	line-height: 1.6;
}

.newsBox li div a:hover dd{
	text-decoration: underline;
	text-underline-offset: 5px;
}

.newsBox li div figure {
	position: relative;
	width: 100%;
	border-radius: 10px 10px 0 0;
	aspect-ratio: 404 / 297;
	overflow: hidden;
	display: block;
}


.newsContents {
	/* display: flex; */
	margin-bottom: 60px;
}
/* .newsConSub {width: calc(100% - 800px); padding: 10px; box-sizing: border-box;}
.facebookBox {width: 400px; padding: 10px; box-sizing: border-box;}
.instagram {width: 400px; padding: 10px; box-sizing: border-box;} */

.newsConSub {width: 100%; padding: 10px; box-sizing: border-box;}
.facebookBox {width: 100%; padding: 10px; box-sizing: border-box;}
.instagram {width: 100%; max-width: 400px; padding: 10px; box-sizing: border-box; margin: 0 auto;}


.facebookBox {
    max-width: 500px; /* Facebook Page Plugin の最大幅 */
    margin: 0 auto;
}
.facebookBox > .fb-page {
    width: 100%;
}
 
.facebookBox > .fb-page > span,
.facebookBox iframe {
    width: 100% !important;
}
.newsBox2 li {margin-bottom: 10px;}
.newsBox2 a {
	display: flex;
	align-items: center;
	background-color: var(--bs-white);
	border-radius: 10px;
}
.newsBox2 figure {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box;
	overflow: hidden;
	margin-right: 10px; 
}

.newsBox2 dl {
	position: relative;
	width: calc(100% - 130px);
}

.newsBox2.exclusive dl {
	position: relative;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}


.newsBox2 dt {
	font-size: 12px;
	font-family: var(--bs-body-font-family-002);
	letter-spacing: 0.02em;
	font-weight: 500;
	color: var(--bs-body-color);
}
.newsBox2 dd {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	padding-right: 10px;
	box-sizing: border-box;
	color: var(--bs-sub-color);
}

.newsBox2 a:hover dd{
	text-decoration: underline;
	text-underline-offset: 5px;
}

.instaBox {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.instaBox li{
	padding: 5px;
	box-sizing: border-box;
	width: calc(100% / 3);
}


.instagram figure,
.instaBox li figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.instaBoxSub {background-color: var(--bs-white); padding: 20px; box-sizing: border-box; height: 500px; position: relative;}

.instaBoxSub .indtBtn {text-align: center; margin: 0 auto; position: absolute; bottom: 20px; left: 50%; margin-left:-82.5px; }
.instaBoxSub .indtBtn a {display: inline-block;}






.link {margin-bottom: 120px;}
.sns {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

.linkBtn,
.sns {
	padding: 0 5px;
	box-sizing: border-box;
}
.linkBtn li,
.sns li {padding: 2px; box-sizing: border-box;}


.linkBtn li a {
	border: 3px solid var(--bs-sub-color);
	background-color: var(--bs-white);
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	padding: 30px;
	display: block;
	line-height: 1.0;
	color: var(--bs-sub-color);
	border-radius: 80px;
	min-width: 220px;
	text-align: center;
	transition: background-color .3s,color .3s;
}

.linkBtn li a:hover {
	background-color: var(--bs-sub-color);
	color: var(--bs-white);
	transition: background-color .3s,color .3s;
}

.linkBtn li a img{width: 20px; vertical-align: middle; margin-right: 5px;}
.linkBtn li a img{
filter: invert(27%) sepia(45%) saturate(5778%) hue-rotate(141deg) brightness(97%) contrast(104%);
}

.linkBtn li a:hover img{
filter: invert(100%) sepia(1%) saturate(7472%) hue-rotate(346deg) brightness(113%) contrast(112%);
}

.sns li a {
	background-color: var(--bs-sub-color);
	border: 3px solid var(--bs-sub-color);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	display: block;
	transition: background-color .3s;
}
.sns li:nth-of-type(1) a img {width: 12px; margin-top: 10px;}
.sns li:nth-of-type(2) a img {width: 23px; margin-top: 8px;}
.sns li:nth-of-type(3) a img {width: 23px; margin-top: 13px;}

.sns li a:hover {
	background-color: var(--bs-white);
	transition: background-color .3s;
}

.sns li a img{
filter: invert(100%) sepia(1%) saturate(7472%) hue-rotate(346deg) brightness(113%) contrast(112%);
}

.sns li a:hover img{
filter: invert(27%) sepia(45%) saturate(5778%) hue-rotate(141deg) brightness(97%) contrast(104%);
}



/* *********************************************************************************************
[5]sub
*********************************************************************************************** */
#sub #topContent {
	height: 35vh;
	height: 350px;
}

#sub #sliderbox {
	height: 35vh;
	height: 350px;
}

#sub #sliderbox figure{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 35vh;
	height: 350px;
}

#sub #sliderbox figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#sub #sliderbox h2 {
	position: absolute;
	top:50%;
	margin-top: -8%;
	line-height: 1.2;
	text-align: center;
	font-size: 30px;
	font-weight: 900;
	font-family: var(--bs-body-font-family);
	width: 100%;
	color: var(--bs-main-color);
	text-shadow: rgba(var(--bs-white-rgb),0.8) 1px 1px 2px, rgba(var(--bs-white-rgb),0.8) -1px 1px 2px,rgba(var(--bs-white-rgb),0.8) 1px -1px 2px, rgba(var(--bs-white-rgb),0.8) -1px -1px 2px;
}

#sub.afterschool #sliderbox h2 {
	margin-top: -18%;
	line-height: 1.2;
}


#sub.schoolone #sliderbox h2 {color: #e6000d;}

#sub.schoolone #sliderbox h2 img{
max-width: 350px;
width: 80%;
max-width: 350px;
width: 50%;
margin: 5% auto 0;

}

/* schoolone */
.rinenBnr {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 605;
	overflow: hidden;
	display: block;
}

.rinenBtn {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;

}

.rinenBtnSub {
	/* width: 30%; */
	text-align: center;
	min-width: 300px;
	width: 100%;
	margin: 0 auto;
}

#sub.schoolone .first-v2 {
    position: relative;
    background-image: url(images/bnrBg.jpg);
    background-size: cover;
    height: 0%;
    padding-top: min(100vh,70%);
}
/* .schoolone003 .mainTtl h2 {color: #e6000d;} */
.schoolone003 .mainTtl h2 {color: var(--bs-sub-color);}
.schoolonemethod {
	/* display: flex;
	justify-content: center; */
}

.schoolonemethod li {/* padding: 0 30px; */ padding: 20px 30px; box-sizing: border-box; text-align: center; position: relative;}
.schoolonemethod li p {
	background-color: #e6000d;;
	padding: 5px 10px;
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--bs-white);
	text-align: center;
}
.schoolonemethod li p span{
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	font-family: var(--bs-body-font-family);
	display: inline-block;
	color: var(--bs-accent-color);
}

.schoolonemethod li:before {
	position: absolute;
	/* top:0;
	bottom:0;
	left:-20px; */
	
	left: 0;
	right:0;
	top: -15px;
	
	content:"＋";
	margin: auto;
	width: 30px;
	height:30px;
	font-size: 30px;
	line-height: 1.0;
	font-weight: 200;
	color: var(--bs-gray-50);
}
.schoolonemethod li:first-child:before {content:"";}

.schooloneschool {
	/* display: flex;
	justify-content: center; */
	margin: 40px 0;
}

.schooloneschool li {padding: 20px; box-sizing: border-box; /* padding: 50px; width: 50%; border-left: 2px dashed var(--bs-gray-50); */ border-top: 2px dashed var(--bs-gray-50);}
.schooloneschool li:first-child {border-left: none; border-top: none;}
.schooloneschool li figure{
	position: relative;
	width: 100%;
	aspect-ratio: 680 / 510;
	overflow: hidden;
	border-radius: 20px;
}

.schooloneschool li h3 {
	color: #e6000d;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
}


.schooloneschool li p {line-height: 1.4; margin-bottom: 20px;}
.schooloneschool li p a img {
	width: 20px;
	vertical-align: middle;
	filter: invert(15%) sepia(80%) saturate(10%) hue-rotate(130deg) brightness(101%) contrast(94%);
	margin-right: 5px;
	display: inline-block;
}

.schooloneschool li p a:hover img{
filter: invert(19%) sepia(83%) saturate(3980%) hue-rotate(346deg) brightness(82%) contrast(126%);
}

.schooloneschool li p a {
	display: block;
	width: 150px;
	margin-top: 10px;
}

.schooloneschool li dd {
	display: flex;
	align-items: start;
	justify-content: start;
	padding: 5px 0;
}

.schooloneschool li dt span{
	background-color: #e6000d;
	color: #FFF;
	display: inline-block;
	line-height: 1.0;
	padding: 5px 10px;
	border-radius: 5px;
	box-sizing: border-box;
}

.schooloneschool li .newsday{font-size: 12px; letter-spacing: 0.02em; display: inline-block; margin-right: 15px; width: 85px;}
.schooloneschool li a{display: inline-block; color: var(--bs-body-color); width: calc(100% - 100px); line-height: 1.4;}
.schooloneschool li a:hover{display: inline-block; color: #e6000d; text-decoration: underline; text-underline-offset: 5px;}

.schooloneAdd {
margin: 40px auto;
/* display: flex;
flex-wrap: wrap; */
max-width: 1200px;
}
.schooloneAdd dt{
	text-align: center;
	color: #e6000d;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-contentsttl-font-size);
	font-weight: 900;
	width: 100%;
}

.schooloneAdd dd{
	/* width: calc(100% / 3); */
	padding: 20px;
	box-sizing: border-box;
}
.schooloneAdd dd div{
	border: 3px solid #e6000d;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 20px;
}
.schooloneAdd dd h3{
	text-align: center;
	color: #e6000d;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	margin-bottom: 10px;
}

.schooloneAdd dd p {font-weight: 500; line-height: 1.6;}


.tableLi {
	border-left: 3px solid var(--bs-main-color);
	border-top: 3px solid var(--bs-main-color);
	box-sizing: border-box;
	width: calc(100% - 40px);
	min-width: 700px;
	margin: 0 auto;
	font-size: 12px;
}

.tableLi li{
	border-bottom: 1px solid var(--bs-main-color);
	box-sizing: border-box;
}

.tableLi li:last-child{border-bottom: 3px solid var(--bs-main-color);}


.tableLi li dl{
	display: flex;
	align-items: center;
	background-color: var(--bs-white);
	box-sizing: border-box;
}

.tableLi li dt,
.tableLi li dd {
	border-right: 1px solid var(--bs-main-color);
	padding: 5px 2px;
	box-sizing: border-box;

}

.tableLi li dd:last-child {
	border-right: 3px solid var(--bs-main-color);
}
.tableLi li dd {width: 100px; text-align: center;box-sizing: border-box; }
.tableLi li dt {
	width: calc(100% - 300px);
	font-family: var(--bs-body-font-family);
	color: var(--bs-main-color);
	background-color: var(--bs-white);
	box-sizing: border-box;
}

.tableLi li dt span{ display: inline-block; font-size: 10px;}

.bgGreen .tableLi {
	border-left: 3px solid var(--bs-sub-color);
	border-top: 3px solid var(--bs-sub-color);

}
.bgGreen .tableLi li{border-bottom: 1px solid var(--bs-sub-color);}
.bgGreen .tableLi li:last-child{border-bottom: 3px solid var(--bs-sub-color);}
.bgGreen .tableLi li dt,
.bgGreen .tableLi li dd {border-right: 1px solid var(--bs-sub-color);}
.bgGreen .tableLi li dd {flex: 1;}
.bgGreen .tableLi li dd:last-child {border-right: 3px solid var(--bs-sub-color);}
.bgGreen .tableLi li dt {color: var(--bs-sub-color);}

.tableLi.tableLiG li dd {width: 110px;}
.tableLi.tableLiG li dt {width: calc(100% - 550px);}
.tableLi li dd span{display: inline-block; font-size: 10px;}

.tableLi.tableLische li dl {align-items: center;}
.tableLi.tableLische li dd {width: calc((100% - 60px) / 5); flex: 1; padding-left:1px; padding-right:1px;}
.tableLi.tableLische li dt {
	width: 60px;
	background-color: var(--bs-main-color-90);
	padding-left:1px; padding-right:1px;
}
.tableLi.tableLische li dt span{ font-size: 10px; letter-spacing: 0.8px;}

.tableLi.tableLische li:nth-of-type(1) dd {background-color: var(--bs-main-color-90);}
.tableLi.tableLische li:nth-of-type(2) dd {/* height: 90px; */ height: 60px; vertical-align: middle;}
.tableLi.tableLische li:nth-of-type(3) dd {height: /* 80 */60px; vertical-align: middle;}
.tableLi.tableLische li:nth-of-type(2) dt {/* height: 90px; */ height: 60px; vertical-align: middle;}
.tableLi.tableLische li:nth-of-type(3) dt {height: /* 80 */60px; vertical-align: middle; /* padding-top: 20px; */ box-sizing: border-box;}
.tableLi.tableLische li:nth-of-type(3) dd:last-child {padding-top: 20px; box-sizing: border-box;}
.optionschool {color: #F00;}


/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
	width: calc(100% - 40px);
	margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}


.classDetail {
	/* display: flex;
	justify-content: center; */
	margin: 30px 0 60px;
}

.classDetail li { padding: 20px; box-sizing: border-box; /* width: calc(100% / 3); */}
.classDetail li div {
	padding: 30px;
	box-sizing: border-box;
	background-color: var(--bs-white);
	border-radius: 10px;
	font-weight: 500;
	border: 3px solid var(--bs-main-color);
	position: relative;
}

.classDetail li dt {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color);
	font-weight: 900;
}

.classDetail li dt span{
	display: inline-block;
	font-size: var(--bs-body-font-size);
	line-height: 1.4;
	color: var(--bs-main-color-50);
	font-weight: 700;
}

.classDetail li figure {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 10px;
}

.atention {
	font-size: 12px;
	padding: 10px 20px 40px;
	box-sizing: border-box;
	font-weight: 500;
}

.atention2 {
	font-size: 12px;
	font-weight: 500;
	padding: 0px 20px;
	box-sizing: border-box;
	text-align: right;
}

.othercourse {
	max-width: 800px;
	margin: 0 auto 60px;
}

.othercourse div{
	background-color: var(--bs-main-color);
	padding: 10px;
	box-sizing: border-box;
	/* display: flex;
	align-items:center; */
}
.othercourse div dl{
	display: flex;
	align-items:center;
	justify-content:center;
	/* margin-left: 30px; */
}

.othercourse div h3 {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-accent-color);
	font-weight: 900;
	text-align: center;

}
.othercourse div dl dt {color: var(--bs-white); padding-left: 30px; border-left: 1px solid var(--bs-white);	display: none;}
.othercourse div dl dd{
	padding: 0 1px;
	box-sizing: border-box;
	font-weight: 500;
}

.othercourse div dl dd span{
	display: inline-block;
	background-color: var(--bs-white);
	padding: 3px;
	box-sizing: border-box;
	line-height: 1.0;
	border-radius: 5px;
	font-size: 11px;
}

.classDetail li div p {
	position: absolute;
	top: -80px;
	left: 50%;
	margin-left: -120px;
	width: 240px;
}

.speechBubble {
  position: relative;
  top: 50px;
  display: inline-block;
  box-sizing: border-box;
  min-width: 240px;
  margin-bottom: 30px;
  padding: 5px;
  border: 3px solid var(--bs-main-color-50);
  border-radius: 10px;
  background-color: var(--bs-main-color-50);
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-white);
  font-family: var(--bs-body-font-family);
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-style: solid;
  border-width: 30px 10px 0 10px;
  border-color: var(--bs-main-color-50) transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-style: solid;
  border-width: 20.5px 6.8px 0 6.8px;
  border-color: var(--bs-main-color-50) transparent transparent;
  translate: -50% 100%;
}

.bgGreen {
	background-color: var(--bs-sub-color-90);
}

.bgGreen .mainTtl h2,
.bgGreen .mainTtl p{
	color: var(--bs-sub-color);

}
#sub section:last-child:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 8 / 1;
	background-image: url(images/bg-ill000.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	content:"";
}

.supportParent {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.supportParent li{
	/* width: 25%; */
	width: 50%;
	padding: 10px;
	box-sizing: border-box;
}

.supportParent li div{
	position: relative;
}
.supportParent li:nth-of-type(1) div{
	top: -85px;
}
.supportParent li:nth-of-type(2) div{
	top: 5px;
}
.supportParent li:nth-of-type(3) div{
	/* top: 15px; */
	top: -45px;
	
}
.supportParent li:nth-of-type(4) div{
	/* top: -65px; */
	top: -5px;
}


.supportParent li figure{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 30px;
}

.supportParent li span.icon {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
	aspect-ratio: 191 / 194;
	background-image: url(images/bg-ill005.png);
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	justify-content:center;
	align-items: center;
}

.supportParent li span.icon img {
width: 60px;
filter: invert(88%) sepia(100%) saturate(2%) hue-rotate(268deg) brightness(111%) contrast(97%);
}

.supportParent li p {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color);
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	position: relative;
}
.supportParent li p span{
	font-family: var(--bs-body-font-family-003);
	font-size: 12px;
	color: var(--bs-body-color);
	font-weight: 500;
	display: inline-block;
}

.supportParent li figure img{
          -webkit-mask-image: url(images/img-mask005.svg);
          mask-image: url(images/img-mask005.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          width: 100%;
          aspect-ratio: 316 / 318;
}

br.supportSp {display: none;}

.supportPsub {
	position: absolute;
	top:0;
	right: 0;
	width: 50%;
	aspect-ratio: 199 / 170;
}

.supportPsub2 {
	position: absolute;
	bottom:0px;
	right: -30%;
	width: 80%;
	aspect-ratio: 214 / 170;
}


.systemclass {
	/* display: flex;
	justify-content: center; */
	margin-bottom: 80px;
}

.systemclass li{
/* width: calc(100% / 3);
padding: 0px 20px 30px; */
box-sizing: border-box;
padding: 30px 20px 30px;
}

.systemclass li div{
	border: 2px solid var(--bs-sub-color);
	padding: 20px;
	border-radius: 20px;
	box-sizing:border-box;
	background-color: var(--bs-white);
	position: relative;
}

.systemclass div::before,
.systemclass div::after{
	position: absolute;
	/* top: 0;
	bottom: 0;
	left: 0; */
	left: 0;
	right: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.systemclass div::before{
	width: 36px;
	height: 36px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: var(--bs-sub-color);
	/* left: -40px; */
	top: -50px;
}
.systemclass div::after{
	/* left: -30px; */
	top: -40px;
	width: 8px;
	height: 8px;
	border-top: 3px solid var(--bs-white);
	border-right: 3px solid var(--bs-white);
	/* -webkit-transform: rotate(45deg);
	transform: rotate(45deg); */
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.systemclass li:first-child div::before {background: none;}
.systemclass li:first-child div::after{border: none;}


.systemclass li figure{
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
}

.systemclass div dl {
	font-family: var(--bs-body-font-family);
	color: var(--bs-sub-color);
	font-weight: 900;
}

.systemclass div dt {
	font-size: 80px;
	position: absolute;
	top: -60px;
	left: 10px;
	line-height: 1.0;
}
.systemclass div dd {
	font-size: 16px;
	line-height: 1.4;
}

.systemclass div dl dd span{
	color: var(--bs-body-color);
	font-family: var(--bs-body-font-family-003);
	font-size: 12px;
	line-height: 1.0;
	display: inline-block;
	font-weight: 500;
}

.systemclass div dl dd span.colorG {
	color: var(--bs-sub-color);
	font-family: var(--bs-body-font-family);
}

/* method001 */
#sub.schoolone #sliderbox h2 {
	margin-top: -18%;
	line-height: 1.2;
}


#sub.method #sliderbox h2 {
	margin-top: -18%;
	line-height: 1.2;
}

#sub.method #sliderbox h2 img{
max-width: 350px;
width: 50%;
margin: 0 auto;

}

.riachingBox001 {
	/* display: flex;
	justify-content: center; */
	position: relative;
}
.riachingBox001 figure {/* text-align: center; */
	position: absolute;
	top:-20px;
	right:0;

}
.riachingBox001 img{ width: 150px; margin: 0 auto;}

.riachingBox001 h3{
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color);
	font-weight: 900;
	margin-bottom: 20px;
}

.riachingBox001 h3 span.riachiMoji{
	display: inline-block;
	font-size: var(--bs-body-contentsttl-font-size);
}

span.marker {background: linear-gradient(transparent 50%, var(--bs-accent-color) 50%);}


/* 文字の上に点 */
.dot-text {
  background-image: radial-gradient(circle at center, var(--bs-accent-color) 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1.05em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .2em; /* 縦方向の位置調整 */
  color: var(--bs-accent-color);
}

.afterS002List3 .dot-text {color: var(--bs-main-color);background-image: radial-gradient(circle at center, var(--bs-main-color) 20%, transparent 20%);}

.riachingBox001 p span{
	display: inline-block;
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color-50);
}

.riachingBox001 ul {
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	margin-top: 40px;
}

.riachingBox001 ul li{ width: 155px; margin:0 5px;}
.riachingBox001 ul li div {
	width: 155px;
	height: 155px;
	background-color: var(--bs-main-color);
	color: var(--bs-main-color-90);
	border-radius: 50%;
	text-align: center;
	padding-top: 40px;
	box-sizing: border-box;
	position: relative;
}

.riachingBox001 ul li h4 {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-accent-color);
	font-weight: 900;
	margin-bottom: 10px;
	line-height: 1.2;
	position: relative;
}

.riachingBox001 ul li p {
	font-weight: 500;
	line-height: 1.3;
	font-size: 13px;
	position: relative;
}

.riachingBox001 ul li div:before {
	position: absolute;
	top:10px;
	left:50%;
	margin: 0 0 0 -15px;
	font-size: var(--bs-body-subttl-font-size);
	line-height: 1.0;
	color: var(--bs-main-color-90);
	font-family: var(--bs-body-font-family-002);
}

.riachingBox001 ul li:nth-of-type(1) div:before {content:"01";}
.riachingBox001 ul li:nth-of-type(2) div:before {content:"02";}
.riachingBox001 ul li:nth-of-type(3) div:before {content:"03";}


.riachingBox002 {
	width: calc(100% - 40px);
	margin: 0 auto;
	border: 3px solid var(--bs-main-color);
	background-color: var(--bs-white);
	padding: 10px;
	box-sizing: border-box;
	border-radius: 20px;
	/* display: flex;
	justify-content: center;
	flex-wrap: wrap; */
	position: relative;
	margin-bottom: 80px;
  /* 方眼紙模様に必須のスタイル */
  /* background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center; */
}

.riachingBox002.riachingBox003 {align-items: center;}


.riachingBox002:last-child {margin-bottom:0;}

/* .riachingBox002::before {
   content: "";
   position: absolute;
   border-top: dotted 15px var(--bs-main-color);
   width: calc(100% - 40px);
   left: 20px;
   top: 20px;
} */



.subcommontxt {
	font-weight: 500;
	padding: 10px;
	box-sizing: border-box;
}
.riachingBoxSub001 {
	/* width: 60%; */
}
.riachingBoxSub002 {
	/* background-color: var(--bs-main-color-90); */
	/* width: 40%; */
	padding: 10px;
	box-sizing: border-box;
	/* border-left: 3px dotted var(--bs-main-color); */
	border-top: 3px dotted var(--bs-main-color);
}
.riachingBoxSub004 {width: 100%; padding: 10px; box-sizing: border-box; margin-top: 40px;}
.riachingBoxSub002 h4,
.riachingBoxSub004 h4{
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	color: var(--bs-main-color);
	font-weight: 900;
	margin-bottom: 10px;
}
.tokutyou li {margin-bottom: 5px;}
.tokutyou dl {
	display: flex;
	align-items: center;
	background-color: var(--bs-main-color-90);
	padding: 15px;
	box-sizing: border-box;
	border-radius: 10px;
}

.tokutyou dt {
	font-size: 12px;
	background-color: var(--bs-main-color);
	color: var(--bs-white);
	text-align: center;
	line-height: 1.1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 5px;
	box-sizing: border-box;
}
.tokutyou dt span{
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family-002);
	display: inline-block;
}

.tokutyou.syutoku dt {padding-top: 12px;}

.tokutyou dd {width: calc(100% - 40px); padding-left: 10px; box-sizing: border-box; line-height: 1.4;}

.tokutyou dd span {
	display: inline-block;
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	color: var(--bs-main-color);
}

.bgBlue {
	background-color: var(--bs-main-color-90);
}

.rememoImg {
	/* width: 400px; */
	aspect-ratio: 484 / 324;
	/* margin-left: 30px; */
	width: 94%;
	margin: 0 auto;
}

.subcommontxt.rememoTxt {
	/* width: calc(100% - 430px);
	padding: 0 30px 0 30px; */
}

.sevenImg {
	max-width: 400px;
	/* margin-left: 30px; */
	margin: 0 auto;
	width: 94%;
}
.riachingBoxSub003 {
	/* width: calc(100% - 430px);
	padding: 0 30px 0 30px; */
	box-sizing: border-box;
	margin-top: 10px;
}

.riachingBoxSub003 li {margin-bottom: 5px;}

.riachingBoxSub003 dl {
	background-color: var(--bs-main-color-90);
	padding: 15px;
	box-sizing: border-box;
	border-radius: 10px;
}

.riachingBoxSub003 dt {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-main-color);
	font-weight: 900;
}

.riachingBoxSub003 dd {line-height: 1.4; font-weight: 500;}

/* インプットアウトプット */
.mathod002box {
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-contentsttl-font-size);
	font-weight: 900;
	text-align: center;
}
/*
.mathod002box span{
	background-color: var(--bs-main-color);
	padding: 20px;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 20px;
}
*/
.methodInOut {
	/* display: flex;
	justify-content: center;
	align-items: center; */
}

.methodInOut li:nth-of-type(1){ /* width: 300px; */ margin: 40px 20px 0;}
.methodInOut li:nth-of-type(2){ /* width: 500px; */ margin: 40px 20px 0; position: relative;}
.methodInOut li:nth-of-type(2):before{
position: absolute;
/* top:80px;
left:-55px;
content:"＜"; */
left: 0;
right: 0;
top: -65px;
margin: 0 auto;
content:"↓";
font-size: 50px;
font-weight: 900;
text-align: center;
color: var(--bs-main-color-50);
}

.methodInOut li div{border: 3px solid var(--bs-main-color); padding: 10px; box-sizing: border-box; border-radius: 10px;}
.methodInOut li:nth-of-type(1) div{border: 3px solid var(--bs-main-color-50);}
.methodInOut li:nth-of-type(2) div{background-color:var(--bs-main-color);}
.methodInOut li dt {
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	margin-bottom: 10px;
}
.methodInOut li:nth-of-type(1) dt{color: var(--bs-main-color-50);}
.methodInOut li:nth-of-type(2) dt{color: var(--bs-accent-color);}
.methodInOut li dt span{
	display: inline-block;
	font-family: var(--bs-body-font-family-003);
	font-size: 16px;
	font-weight: 700;
}
.methodInOut li dd {font-weight: 500; line-height: 1.4;}
.outmaintext {color: var(--bs-white);}
.outTxt {
	padding: 15px;
	box-sizing: border-box;
	border-radius: 10px;
	margin-top: 10px;
	background-color: var(--bs-accent-color);
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
}

.outSubTxt{
	width: 75px;
	display:inline-block;
	vertical-align: middle;
	margin-right: 20px;
	font-weight: 900;
}
.outSubTxt002{
	width: calc(100% - 95px);
	display: inline-block;
	vertical-align: middle;
	padding-left: 20px;
	box-sizing: border-box;
	border-left: 3px dotted var(--bs-main-color);
}

.outputBox li{margin-bottom: 30px;}
.outputBox li div{position : relative;}
.outputBox li div:before{
position : absolute;
width: 40px;
height: 40px;
background-color: var(--bs-main-color);
color: var(--bs-white);
content:"＝";
border-radius: 50%;
top:-35px;
left:0;
right:0;
margin: 0 auto 0;
text-align: center;
font-size: 25px;
font-family: var(--bs-body-font-family);
line-height: 1.0;
padding-top: 7px;
box-sizing: border-box;
}

.outputBox li:first-child div:before{content:""; width: 0; height: 0;}

.outputBox li p{
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--bs-body-font-family);
}
.outputBox li p span{
	font-size: var(--bs-body-otherttl-font-size);
	display: inline-block;
}

.outputBox li:nth-of-type(1) p{
	border: 1px solid var(--bs-gray-90);
}

.outputBox li:nth-of-type(2) p{
	background-color: var(--bs-main-color-90);
	margin-bottom: 4px;
}

.outputBox li:nth-of-type(2) p span{
	color: var(--bs-main-color);
}

.outputBox li:nth-of-type(3) p{
	background-color: var(--bs-main-color-50);
	color: var(--bs-white);
}

.homeruBox {
	max-width: 600px;
	margin: 0 auto;
}

.otherCommonTxt {
	padding: 20px 40px;
	box-sizing: border-box;

}

.homerupoint {font-weight: 500;}
.riachingBoxSub004 {border-top: 3px dotted var(--bs-main-color);}
.homerupointbox {margin-top: 10px;}
.homerupointbox li{
	margin-bottom: 5px;
}
.homerupointbox li div{
	/* display: flex; */
	padding: 10px;
	box-sizing: border-box;
	background-color: var(--bs-main-color-90);
	border-radius: 10px;
}

.homerupointbox li div figure{
	position: relative;
	/* width: 200px; */
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
}
.homerupointbox li div dl{
	/* width: calc(100% - 200px); 
	padding-left: 20px; */
	box-sizing: border-box;
}
.homerupointbox li div dl dt {
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	margin-bottom: 10px;
}

.homerupointbox li div dl dt .point{
	display: inline-block;
	background-color: var(--bs-main-color-50);
	color: var(--bs-accent-color);
	font-family: var(--bs-body-font-family-002);
	font-size: 13px;
	line-height: 1.0;
	padding: 5px;
	box-sizing: border-box;
	vertical-align: top;
	margin-top: 8px;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-right: 5px;
	border-radius: 5px;
}


.homerupointbox li div dl dd{font-weight: 500; }

.homeruplus {
width: 100%;
display: flex;
align-items:center;
justify-content: center;
}

.homeruplus li{
	font-size: 30px;
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
}
.homeruplus li:nth-of-type(2){font-size: 18px; padding: 0 5px; box-sizing: border-box;}

.homeruplus li span{
padding: 20px;
box-sizing: border-box;
background-color: var(--bs-main-color-50);
color: var(--bs-accent-color);
display: inline-block;
line-height: 1.0;
border-radius: 10px;
}

.rememoImg2 {
	width: 169px;
	aspect-ratio: 169 / 209;
	/* margin-left: 30px; */
	margin: 0 auto;
}

.subcommontxt.rememoTxt2 {
	/* width: calc(100% - 199px); */
	width: 100%;
	padding: 20px 30px 0 30px;
}

.subcommontxt.rememoTxt2 p span {display: inline-block; font-size: 12px;}

.media li {
	margin-bottom: 5px;
}

.media dl {
	/* display: flex; */
	font-weight: 500;
	background-color: var(--bs-main-color-90);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 10px;
}

.media dt {
	font-size: 14px;
	width: 150px;
}
.media dd {
	/* width: calc(100% - 150px); */
}

.method section:last-child{padding-bottom: 60px;}

.afteromoi {
	/* display: flex;
	justify-content: center; */
	margin: 0 auto;
	width: 100%;
	max-width: 430px;
}
.afteromoi li{padding: 20px; box-sizing: border-box;}
.afteromoi dl {
	background-color: var(--bs-main-color);
	border-radius: 20px;
	position: relative;
	padding: 30px 20px 20px;
	box-sizing: border-box;
}

.afteromoi dt {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: var(--bs-main-color-50);
	text-align: center;
	color: var(--bs-accent-color);
	top: -25px;
	left: 50%;
	margin-left: -25px;
	line-height: 1.0;
	font-size: var(--bs-body-subttl-font-size);
	font-family: var(--bs-body-font-family-002);
	border-radius: 50%;
	padding-top: 4px;
	box-sizing: border-box;
}

.afteromoi dt span{
	font-size: 12px;
	display: inline-block;
	line-height: 1.0;
	font-family: var(--bs-body-font-family);
}

.afteromoi p {color: var(--bs-white); text-align: center; font-size: var(--bs-body-otherttl-font-size); font-family: var(--bs-body-font-family);}

.omoi {
	margin: 80px 0;
	text-align: center;
}
.omoi .commonText{text-align: left;}
.omoi h3 {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-subttl-font-size);
	font-weight: 900;
	color: var(--bs-main-color);
}
.omoi h3 span {
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	color: var(--bs-main-color);
	display: inline-block;
	font-family: var(--bs-body-font-family-003);
	line-height: 1.4;
}

.omoi div {
	box-sizing: border-box;
	max-width: 1300px;
	margin: 30px auto 0;
}

.note {
  /* width: 500px;
  padding:0 1em; */
  background: linear-gradient(var(--bs-main-color-70) 1px, transparent 1px) #fff;
  background-size: auto 2.0em;
  line-height: 3.0em;
  /* border-bottom: 1px solid var(--bs-main-color-90);
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc; */
  overflow: hidden;
}

.afterS002Box {
	padding: 20px;
	box-sizing: border-box;
	border: 3px solid var(--bs-main-color);
	background-color: var(--bs-white);
	border-radius: 20px;
	margin: 0px auto 50px;
	position: relative;
	width: calc(100% - 40px);
}

.afterS002Box h3 {margin-bottom: 20px;}
.afterS002List001 {
	/* display: flex;
	align-items: center;
	padding: 0 20px 20px;
	box-sizing: border-box; */
}

.afterS002Box .afterS002List001 figure{ /* width: calc(100% / 3); */ width: 100%; }


.afterS002List001 dl{/* width: calc((100% / 3) * 2); padding-left: 20px; */ box-sizing: borer-box; }

.afterS002Box dt {
	font-size: var(--bs-body-otherttl-font-size);
	font-family: var(--bs-body-font-family);
	margin-bottom: 20px;
	color: var(--bs-main-color);
	font-weight: 900;
	line-height: 1.3;
}

.afterS002Box dt .afterS002ttl {
	display: inline-block;
	font-size: 16px;
}

.afterS002Box dt .afterS002subTtl{
	font-size: 14px;
	display: inline-block;
	font-weight: 700;
	background-color: var(--bs-main-color-50);
	color: var(--bs-accent-color);
	padding: 5px 10px;
	box-sizing: border-box;
	margin-right: 5px;
	line-height: 1.0;
	border-radius: 5px;
}

.afterS002Box dt .afterS002subDay{
	font-size: 14px;
	display: inline-block;
	font-weight: 700;
	color: var(--bs-main-color-50);
}

.afterS002Box dt .afterS002subTtl span,
.afterS002Box dt .afterS002subDay span{display: inline-block; font-size: 10px;}

.afterS002Box dd {font-weight: 500; position: relative; padding: 0 0 8px 20px; box-sizing: border-box; line-height: 1.4;}
.afterS002Box dd span {display: inline-block; font-size: 12px; }

.afterS002Box dd:before {
	position: absolute;
	top:0px;
	left:0;
}


.afterS002Box dd:nth-of-type(1):before {content:"①";}
.afterS002Box dd:nth-of-type(2):before {content:"②";}
.afterS002Box dd:nth-of-type(3):before {content:"③";}
.afterS002Box dd:nth-of-type(4):before {content:"④";}
.afterS002Box dd:nth-of-type(5):before {content:"⑤";}

.afterS002Txt {
	/* position: absolute;
	top: 0px;
	right: 20px; */
	text-align: right;
	line-height: 1.4;
	padding-right: 20px;
	box-sizing: border-box;
}
.afterS002Txt .afterS002Txtmini{
	font-size: 10px;
	display: inline-block;
	line-height: 1.0;
}

.afterS002Txt .afterS002Txts {
	background-color: var(--bs-main-color);
	color: var(--bs-white);
	line-height: 1.0;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
}

.afterS002List3 {
	/* padding: 10px;
	box-sizing: border-box;
	display: flex; */
}
.afterS002List3 li {
	/* width: calc(100% / 3);
	padding: 10px 20px;
	box-sizing: border-box;
	border-left: 1px dashed var(--bs-gray-50); */
	width: 100%;
	padding: 20px 0;
	box-sizing: border-box;
	border-top: 1px dashed var(--bs-gray-50);
}

.afterS002List3 li:first-child {border-left: none;border-top: none; padding-top:0;}
.afterS002List3 li:last-child {padding-bottom: 0;}

.afterS002Box .afterS002List3 figure {width: 100%;}
.afterS002Box figure {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	display: block;
	border-radius: 20px;
	margin-bottom: 15px;
}

.afterS002Txt2 {padding: 0 20px; box-sizing: borde-rbox; margin-bottom: 20px;}


.afterschool002.bgNote {
	aspect-ratio: inherit;
}
.afterS002Box .afterS002List2 dd {padding: 0 0 8px 0;}
.afterS002Box .afterS002List2 dd:nth-of-type(1):before {content:"";}
.afterS002Box .afterS002List2 dd:nth-of-type(2):before {content:"";}
.afterS002Box .afterS002List2 dd:nth-of-type(3):before {content:"";}
.afterS002Box .afterS002List2 dd:nth-of-type(4):before {content:"";}
.afterS002Box .afterS002List2 dd:nth-of-type(5):before {content:"";}


.afterS002Box .afterS002List2 dd h4{
	color: var(--bs-main-color-50);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	font-size: 14px;
}
.afterS002Box .afterS002List2 dd h4 span{
	font-weight: 900;
	font-size: 11px;
	display: inline-block;
}

.afterS002Box .afterS002List2 dd div {display: flex; align-items: center; flex-wrap: wrap; font-size: 12px;}
.afterS002Box .afterS002List2 dd div p {
	text-align: center;
	display: inline-block;
	border-radius: 5px;
	/* background-color: var(--bs-main-color-90);
	color: var(--bs-main-color-50); */
	background-color: var(--bs-main-color-50);
	color: var(--bs-white);
	padding: 5px 10px;
	box-sizing: border-box;
	font-size: 12px;
	margin: 0 0 3px 3px;
}

.afterS002List2 li .afterS002List001{padding: 20px 0; border-bottom: 1px dashed var(--bs-gray-50); font-family: var(--bs-body-font-family-002);}
.afterS002List2 li:first-child .afterS002List001 {padding-top: 0;}
.afterS002List2 li:last-child .afterS002List001 {border-bottom: none; padding-bottom: 0;}
@media all and (max-width: 1410px) {
.afterS002List2 .afterS002List001 {
	align-items: start;
}
}
.schedule {/* display: flex; */}
.schedule div{ /* width: 50%; */ }
.schedule ul{ padding: 20px; box-sizing: border-box;}
.schedule dl{
	display: flex;
}

.schedule dt {padding: 0px 0 20px; text-align: center; width: 60px; box-sizing: border-box; position: relative;}
.schedule dt span {
	background-color: var(--bs-accent-color);
	color: var(--bs-main-color-50);
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	border-radius: 50%;
	letter-spacing: 0.02em;
	padding-top: 10px;
	box-sizing: border-box;
	border: 5px solid var(--bs-main-color-50);
}

.schedule dt:before {
	background-color: var(--bs-main-color-50);
	width: 3px;
	height: calc(100% - 60px);
	position: absolute;
	top:60px;
	left:0;
	right:0;
	content:"";
	margin: 0 auto;
}
.schedule li:last-child dt:before {height: 0;}
.schedule dd {margin: 0 0 20px 20px; width: calc(100% - 80px); border-radius: 10px; padding: 15px 20px 20px; box-sizing: border-box; position: relative; background-color: var(--bs-main-color-90);}

.schedule dd:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-color: transparent var(--bs-main-color-90) transparent transparent;
  translate: -100% -50%;
}



.schedule dd figure {position: absolute;}
.schedule dd h4 {
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	font-size: var(--bs-body-otherttl-font-size);
	line-height: 1.2;
	margin: 2px 0 10px;
}

.schedule dd h4 span{
	color: var(--bs-white);
	display: inline-block;
	font-size: 13px;
	background-color: var(--bs-main-color);
	padding: 5px;
	border-radius: 5px;
	box-sizing: border-box;
	line-heigt: 1.0;
}


.schedule dd p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.schedulelist {
	position: relative;
	padding-left: 16px;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.schedulelist:before {
	position: absolute;
	top:0;
	left:0;
	content:"・";
}

.schedule dd p .schedulered {display: inline-block; color: #F00;}

.afterS002Box2 {position: relative; margin-bottom: 10px;}

/* .afterS002Box2.afterS002Box2-2 {height: 60px;} */


.schedule dd figure.schefigure001{
	width: 40px;
	top: -10px;
	left: 120px;
}
.schedule dd figure.schefigure002{
	width: 50px;
	top: -10px;
	/* left: 210px; */
	right: 0px;
}
.schedule dd figure.schefigure003{
	width: 60px;
	top: -10px;
	/* left: 200px; */
	right: 0px;
}
.schedule dd figure.schefigure004{
	width: 35px;
	top: 10px;
	right:70px;
}
.schedule dd figure.schefigure005{
	width: 50px;
	top: -30px;
	right: 0px;
}

.schedule dd figure.schefigure006{
	width: 70px;
	top: 10px;
	left: 100px;
}

.schedule dd figure.schefigure007{
	width: 80px;
	top: 5px;
	left: 100px;
}

.schedule dd figure.schefigure008{
	width: 30px;
	top: 0px;
	/* left: 200px; */
	right: 0px;
}

@media all and (min-width: 560px) {
.schedule dd figure.schefigure002{
	width: 50px;
	top: -10px;
	left: 160px;
	right: inherit;
}
.schedule dd figure.schefigure003{
	width: 60px;
	top: 10px;
	left: 230px;
	right: inherit;
}
.schedule dd figure.schefigure004{
	width: 35px;
	top: 10px;
	right:160px;
}
.schedule dd figure.schefigure005{
	width: 50px;
	top: -30px;
	right: 70px;
}
.schedule dd figure.schefigure008{
	width: 30px;
	top: -10px;
	/* left: 200px; */
	right: 40px;
}
}

#sub.afterschool .first-v2 {
    position: relative;
    background-image: url(images/bnrBg3.jpg);
    background-size: cover;
    height: 0%;
    padding-top: min(100vh,35%);
}

.pricered {color: #F00;}

.bgGreen .subTtl {color: var(--bs-sub-color);}

.afterservice {
	display: flex;
}

.afterservice {
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
}

.afterservice li{/* width: 25%; */ width: 50%; padding: 20px 5px; box-sizing: border-box; border-left: 1px dashed var(--bs-gray-50);}
.afterservice li figure {
	text-align: center;
	margin: 0 auto 10px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: var(--bs-sub-color);
	padding-top: 25px;
	box-sizing: border-box;
}
.afterservice li figure img{
	height: 100px;
}
.afterservice li:first-child,
.afterservice li:nth-of-type(3) {border-left: none;}

.afterservice li:first-child,
.afterservice li:nth-of-type(2) {
border-bottom: 1px dashed var(--bs-gray-50);
}

.afterservice dt {
	text-align: center;
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	font-size: var(--bs-body-otherttl-font-size);
	color: var(--bs-sub-color);
	margin-bottom: 10px;
	line-height: 1.3;
}
.afterservice dt span{ display: inline-block; font-size: 16px;}
.afterservice dd {font-weight: 500; line-height: 1.6;}
.afterservice dd p {margin-top: 10px; color: var(--bs-sub-color);}
.afterservice dd span {
	display: inline-block;
	line-height: 1.0;
	background-color: var(--bs-sub-color);
	color: var(--bs-white);
	margin: 2px 5px 2px 2px;
	padding: 2px 5px 4px;
	box-sizing: border-box;
	border-radius: 5px;
	font-size: 14px;
}

.otherTtl {
	font-weight: 900;
	color: var(--bs-white);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	padding: 0px 20px;
	box-sizing: border-box;
}

.otherTtl span {
	line-height: 1.0;
	padding: 5px 10px;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 5px;
	background-color: var(--bs-sub-color);
}




.faq000 .accordion_one {
	width: 100%;
	margin: 0px auto 5px;
	background-color: var(--bs-main-color-90);
	border-radius: 10px 10px 10px 10px;
	box-sizing: border-box;
	padding:0;
}
.faq000 .accordion_one .accordion_header {
position: relative;
background-color: var(--bs-main-color-50);
text-align: left;
color: #FFF;
	font-family: var(--bs-body-font-family);
	font-size: 16px;
font-weight: 900;
padding: 15px 40px 15px 35px;
box-sizing: border-box;
border-radius: 10px;
cursor:pointer;
line-height: 1.4;
}

.faq000 .accordion_one .accordion_header:before {
	position: absolute;
	top: 15px;
	left: 15px;
	content:"Q";
	color: var(--bs-accent-color);
	font-size: var(--bs-body-subttl-font-size);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	line-height: 1.0;
}

.faq000 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 15px;
  width:30px;
  height: 30px;
  border: 1px solid #fff;
  background-color: #FFF;
  border-radius:50%;
  margin-top: -15px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.faq000 .accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 16px;
  height: 16px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.faq000 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.faq000 .accordion_one .accordion_header .i_box .one_i:before,
.faq000 .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: var(--bs-main-color-50);
  border-radius: 10px;
  width: 16px;
  height: 4px;
  position: absolute;
  top: 6px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.faq000 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 16px;
  top: 0;
  left: 6px;
}
.faq000 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.faq000 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.faq000 .accordion_one .accordion_inner {
  display: none;
  padding:15px 20px 20px 35px;
  box-sizing: border-box;
  position: relative;
  font-weight:500;
}

.faq000 .accordion_one .accordion_inner:before {
	position: absolute;
	top: 18px;
	left: 15px;
	content:"A";
	color: var(--bs-main-color-50);
	font-size: var(--bs-body-subttl-font-size);
	font-family: var(--bs-body-font-family);
	font-weight: 900;
	line-height: 1.0;
}

.bgGry {background-color: var(--bs-gray-90);}
.aftermap {/* width: calc(100% - 500px); */}
.ggmap {
position: relative;
width: 100%;
/* padding-top: 40%;
height: 0; */
height: 400px;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.kokusya {
	/* display: flex;
	align-items: center; */
	padding-bottom: 80px;
}

.kokusya dl {/* padding-left: 30px; box-sizing: border-box;width: 500px; */ width: 100%; padding: 0 20px; box-sizing: border-box; }

.kokusya dt {margin-bottom: 10px; line-height: 1.4;}
.kokusya dt.subTtl {margin-left: 0;}
.kokusya dd { /* padding-left: 20px; box-sizing: border-box; */}
.kokusya dd span{
box-sizing: border-box;
display: inline-block;
background-color: var(--bs-sub-color);
line-height: 1.0;
padding: 5px 10px;
color: var(--bs-white);
margin-right: 5px;
border-radius: 5px;
font-size: 14px;
}

.kokusya.kokusya2 dd span{
background-color: #e6000d;
}
.kokusya.kokusya2 .subTtl {color: #e6000d;}
.afterNews {
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto 80px;
	position: relative;
}

.afterNews li {padding: 15px; box-sizing: border-box;}
.afterNews li dt {display: inline-block; width: 90px; vertical-align: top; font-size: 12px; letter-spacing: 0.02em; display: inline-block; }
.afterNews li dd {display: inline-block; width: calc(100% - 95px); vertical-align: top; line-height: 1.4;}
.afterNews li dd a {color: var(--bs-body-color);}
.afterNews li dd a:hover{display: inline-block; color: var(--bs-sub-color); text-decoration: underline; text-underline-offset: 5px;}

.afterNews .btn2 {
	position: absolute;
	top: 0px;
	right: 20px;
}

.afterNews .btn2 a{
	border: none;
	color: var(--bs-sub-color);
}

.afterNews .btn2 a:before{
	background-image: url(images/arrowRightG.svg);
}

.afterLink {
	text-align: center;
	width: 94%;
	margin: 0 auto;
}
.afterLink .btn {width: 100%; display: inline-block; margin-bottom: 5px;}
.afterLink .btn a {
	max-width: 400px;
}

.rinen {text-align: center;}
.rinen img {display: inline-block;}

.concept001 .subTtl {text-align: center; margin-bottom: 35px; padding-top: 33px;}
.concept002 .subTtl {text-align: center; margin-bottom: 35px;}

.pageBox {
  position: absolute;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  top:0;
  left:0;
}


.gallery001:before {
	position: absolute;
	top: 600px;
	left:0;
	background-image: url(images/ill-sakuraLeft.png);
	background-repeat: repeat-y;
	background-position: left top;
	background-size: contain;
	width: 10%;
	aspect-ratio: 302 / 1800;
	content:"";
}


.gallery001:after {
	position: absolute;
	top:-200px;
	right:0;
	background-image: url(images/ill-sakuraRight.png);
	background-repeat: repeat-y;
	background-position: left top;
	background-size: contain;
	width: 10%;
	aspect-ratio: 243 / 1300;
	content:"";
	z-index:10;
}
.gallery001 .subTtl {text-align: center;}


.achievement {margin: 0 auto 40px; max-width: 1200px; width: 800px; position: relative; z-index:40;}

.achievement dt {
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	color: var(--bs-main-color);
	font-family: var(--bs-body-font-family);
}

.achievement ul{
	display: flex;
	border-top: 1px solid var(--bs-gray-90);
	border-left: 1px solid var(--bs-gray-90);
	border-right: 1px solid var(--bs-gray-90);
	background-color: rgba(var(--bs-white-rgb), 0.5);
	font-weight: 500;
}

.achievement ul:last-child{
	border-bottom: 1px solid var(--bs-gray-90);
}
.achievement ul:first-child {background-color: var(--bs-main-color-90); font-weight: 700;}

.achievement ul:first-child li {color: var(--bs-main-color); text-align: center;}

.achievement ul li:nth-of-type(1){
	width: 250px;
	padding: 15px;
	box-sizing: border-box;
}
.achievement ul li:nth-of-type(2){
	width: calc(100% - 350px);
	border-left: 1px solid var(--bs-gray-90);
	border-right: 1px solid var(--bs-gray-90);
	padding: 15px;
	box-sizing: border-box;
}

.achievement ul li:nth-of-type(3){
	width: 100px;
	padding: 15px;
	box-sizing: border-box;
	text-align: right;
	color: #aa1413;
}

.achievement ul:first-child li:nth-of-type(3){
	color: var(--bs-main-color);
}

.goukaku {
	position: absolute;
	top:-140px;
	right: 10px;
	max-width: 280px;
	width: 150px;
	aspect-ratio: 416 / 346;
}

.galleryvoice {margin-top: 80px;}
.voice {
	/* display: flex;
	flex-wrap: wrap; */
}
.galleryBox {
	border: 3px solid var(--bs-main-color);
	background-color: var(--bs-white);
	border-radius: 20px;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto 20px;
	/* width: calc((100% - 80px) / 4); */
	margin: 10px;
}

.galleryBox figure{
	position: relative;
	margin-bottom: 5px;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 20px;
}


.galleryBox dt {color: var(--bs-main-color); margin-bottom: 5px;}
.galleryBox dd {font-size: 14px; font-weight: 500;}

.oldyear {
	margin: 0 auto 80px;
	max-width: 1200px;
}

.oldyear li {margin-bottom: 5px;}
.oldyear li a {
	background-color: var(--bs-white);
	border: 3px solid var(--bs-sub-color);
	color: var(--bs-sub-color);
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	padding: 20px 40px;
	box-sizing: border-box;
	border-radius: 80px;
	display: block;
	transition: background-color .3s,color .3s;
	position: relative;
}


.oldyear li a:hover {
	background-color: var(--bs-sub-color);
	color: var(--bs-white);
	transition: background-color .3s,color .3s;
}

.oldyear li a::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  right: 40px;
  width: 20px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--bs-sub-color);
  transform: rotate(45deg);
  transform-origin: calc(100% - 1.5px) 50%;
}

.oldyear li a::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 3px;
  margin-top: 12px;
  border-radius: 9999px;
  background-color: var(--bs-sub-color);
  top: 50%;
  right:40px;
  margin-top: -1.5px;
}

.oldyear li a:hover::before {
  background-color: var(--bs-white);
}

.oldyear li a:hover::after {
  background-color: var(--bs-white);
}


.archive-pagination ul{width: 100%; font-size: 14px; display: flex; align-items: center; justify-content:center; textg-align: center;}
.archive-pagination li {margin: 10px 5px;}
.archive-pagination li a{display: inline-block; background-color: var(--bs-main-color); color: var(--bs-white); padding: 10px; box-sizing: border-box; border-radius: 5px;}

.archive-pagination li span,
.archive-pagination li a:hover {background-color: var(--bs-main-color-90); color: var(--bs-main-color); display: inline-block; padding: 10px; box-sizing: border-box; border-radius: 5px;}

.teacherList {
	/* display: flex;
	flex-wrap: wrap; */
}

.teacher005 .teacherList {margin-bottom: 80px;}
.teacher002 .mainTtl,
.teacher003 .mainTtl {color:#e6000d;}

.teacher001 .subTtl {text-align: center; color: var(--bs-white);}

.teacherList li {/* width: 50%; */ padding: 10px; box-sizing: border-box;}
.teacherBox {
	border: 3px solid #e6000d;
	background-color:var(--bs-white);
	padding: 20px;
	box-sizing: border-box;
	/* display: flex; */
	border-radius: 20px;
}

.teacherBox figure{
	position: relative;
	margin-bottom: 5px;
	/* width: 200px;
	height: 200px; */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* border-radius: 15px; */
	border-radius: 50%;
}

.teacherBox dl {
	/* width: calc(100% - 220px);
	margin-left: 20px; */
	position: relative;
}
.teacherBox dl dt {
	color: #e6000d;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-otherttl-font-size);
	font-weight: 900;
	line-height: 1.1;
}
.teacherBox dl dt span{
	display: inline-block;
	background-color: #e6000d;
	border-radius: 5px;
	color: var(--bs-white);
	font-size: 12px;
	padding: 5px;
	box-sizing: border-box;
	font-weight: 500;
	margin-bottom: 5px;
}

.teacherBox dl dd:nth-of-type(1) {
	font-size: 13px;
	font-weight: 500;
	/* position: absolute;
	top:0;
	right:0; */
	margin-bottom: 20px;
}
.teacherBox dl dd:nth-of-type(2) p{
	font-weight: 400;
	box-sizing: border-box;
	line-height: 1.6;
}


.teacher005 .teacherBox {
	border: 3px solid var(--bs-sub-color);
}

.teacher005 .teacherBox dl dt {
	color: var(--bs-sub-color);
}
.teacher005 .teacherBox dl dt span{
	background-color: var(--bs-sub-color);
}

.teacherMain {
	background-color: #e6000d;
	color: var(--bs-white);
	/* display: flex; */
	align-items: center;
	/* height: 600px; */
	border-radius: 20px;
	width: 90%;
	margin: 0 auto;
}
.teacherMain figure{
	/* width: calc(100% - 600px);
	height: 400px; */
	position: relative;
	width: 100%;
	aspect-ratio: 1176 / 940;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
}

.teacherMain div{
	/* width: 600px; */
	padding: 20px;
	box-sizing: border-box;
}

.teacherMain div .subTtl{margin-bottom: 20px; color: var(--bs-accent-color); text-align: center;}

.teacherLogo {text-align: right;}

.teacher001 .link {margin: 0px auto 0px;}
.company002 .link {margin: 30px auto 40px;}

.school .linkBtn li a,
.teacher .linkBtn li a {
	padding: 10px;
}

.teacher001 .linkBtn li:nth-of-type(1) a,
.teacher001 .linkBtn li:nth-of-type(2) a,
.company002 .linkBtn li:nth-of-type(2) a,
.company002 .linkBtn li:nth-of-type(3) a{
	border: 3px solid #e6000d;
	color: #e6000d;
}
.teacher001 .linkBtn li:nth-of-type(1) a:hover,
.teacher001 .linkBtn li:nth-of-type(2) a:hover,
.company002 .linkBtn li:nth-of-type(2) a:hover,
.company002 .linkBtn li:nth-of-type(3) a:hover{
	background-color: #e6000d;
	color: var(--bs-white);
}


.teacher001 .linkBtn li a img,
.company002 .linkBtn li a img {width:35px; vertical-align: middle; margin-right: 0px;}
.teacher001 .linkBtn li:nth-of-type(1) a img,
.teacher001 .linkBtn li:nth-of-type(2) a img,
.company002 .linkBtn li:nth-of-type(2) a img,
.company002 .linkBtn li:nth-of-type(3) a img {
filter: invert(10%) sepia(72%) saturate(6777%) hue-rotate(339deg) brightness(94%) contrast(136%);
}

.teacher001 .linkBtn li a:hover img,
.company002 .linkBtn li a:hover img{
filter: invert(100%) sepia(1%) saturate(7472%) hue-rotate(346deg) brightness(113%) contrast(112%);
}

.mailform {max-width: 1200px; margin: 0 auto;}
.mailtxt {font-weight: 400;}
.mailred {color: #F00;}


.listdl {border-top: 1px solid var(--bs-gray-90); margin: 20px 0;}
.listdl li {border-bottom: 1px solid var(--bs-gray-90); padding: 20px; box-sizing: border-box;}
/* .listdl dl {
	display: flex;
}
.listdl dt {width: 200px;}
.listdl dd {width: calc(100% - 200px);} */

.mailatention {margin-bottom: 40px; text-align: center;}
.mailatention a {display: inline-block; color: var(--bs-main-color);}

.bgGray {background-color: var(--bs-gray-90);}

.contact002 {padding-bottom: 80px;}
.contact002 dl {margin-top: 30px;}
.contact002 dt {
	background-color: var(--bs-white);
	color: var(--bs-main-color);
	padding: 10px 20px 10px 40px;
	box-sizing: border-box;
	position: relative;
	border-radius: 5px;
}
.contact002 dt:before{
	position: absolute;
	top:10px;
	left: 20px;
}

.contact002 dt:nth-of-type(1):before{content:"①";}
.contact002 dt:nth-of-type(2):before{content:"②";}
.contact002 dt:nth-of-type(3):before{content:"③";}
.contact002 dt:nth-of-type(4):before{content:"④";}
.contact002 dt:nth-of-type(5):before{content:"⑤";}
.contact002 dt:nth-of-type(6):before{content:"⑥";}
.contact002 dt:nth-of-type(7):before{content:"⑦";}

.contact002 dd {
	padding: 10px 40px;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 14px;
}

.contact002 dd span{
	display:inline-block;
	position: relative;
	padding-left: 15px;
	box-sizing: border-box;
}

.contact002 dd span:before{
	position: absolute;
	top:0;
	left:0;
	content:"・";
}

.companyImg {text-align: center;}
.company002 .listdl {border-top: 1px solid var(--bs-white);}
.company002 .listdl li {border-bottom: 1px solid var(--bs-white);}


#sub.teacher .first-v2 {
    position: relative;
    background-image: url(images/bnrBg4.jpg);
    background-size: cover;
    height: 0%;
    padding-top: min(100vh,35%);
}


.conceptill001,
.conceptill002,
.conceptill003,
.conceptill004,
.conceptill005,
.conceptill006 {
	position: absolute;
}

.conceptill001 {top: 80%; left: 55px;}
.conceptill002 {top: 55%; right: 75px;}
.conceptill003 {top: 70%; left: -10px;}
.conceptill004 {top: 45%; right: -10px;}
.conceptill005 {top: 15%; left: -30px; /* width: 200px; */ top: 8%; width: 20%;}
.conceptill006 {top: -5%; /* right: 20px; width: 250px; */ right: -5px; width: 30%;}


.concept .commonText,
.concept .subTtl {position: relative;}

.newscat {text-align: center;}
.newscat li {display: inline-block; margin: 3px;}
.newscat li a{
	display: block;
	border: 3px solid var(--bs-main-color);
	background-color: var(--bs-main-color);
	color: var(--bs-white);
	padding: 10px 15px;
	box-sizing: border-box;
	border-radius: 80px;
	min-width: 260px;
}

.newscat li a:hover{
	background-color: var(--bs-white);
	color: var(--bs-main-color);
}

.newsBox2 {margin: 40px auto;}

.newsBox2 li {margin-bottom: 10px;}
.newsBox2 a {
	display: flex;
	align-items: center;
	background-color: var(--bs-main-color-90);
	border-radius: 10px;
}
.top004 .newsBox2 a {background-color: var(--bs-white);}
.newsBox2 figure {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box;
	overflow: hidden;
	margin-right: 20px; 
}

.newsBox2 dl {
	position: relative;
	width: calc(100% - 140px);
}

.newsBox2.exclusive dl {
	position: relative;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
}

.newsBox2 dt {
	font-size: 12px;
	font-family: var(--bs-body-font-family-002);
	letter-spacing: 0.02em;
	font-weight: 500;
}

.newsBox2 dt span{
	background-color: var(--bs-main-color-50);
	color: var(--bs-white);
	display:inline-block;
	padding: 5px;
	box-sizing: border-box;
	line-height: 1.0;
	margin-left: 5px;
	border-radius: 5px;

}


.newsBox2 dd {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	padding-right: 20px;
	box-sizing: border-box;
	color: var(--bs-sub-color);
}

.newsBox2 a:hover dd{
	text-decoration: underline;
	text-underline-offset: 5px;
}

.news001 .newsBox2 dd {color: var(--bs-main-color);}

.blogday {
	font-size: 12px;
	font-weight: 400;
	margin-bottom: 10px;
}

.blogday span{
	background-color: var(--bs-main-color-50);
	color: var(--bs-white);
	display:inline-block;
	padding: 5px;
	box-sizing: border-box;
	line-height: 1.0;
	margin-left: 5px;
	border-radius: 5px;	
}

.blogday span a{ color: var(--bs-white); }

.blogttl {
	font-family: var(--bs-body-font-family);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--bs-main-color);
	padding-bottom: 5px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--bs-main-color);
}


.blogDetail {
	padding: 20px;
	box-sizing: border-box;
	font-weight: 400;
}


.afterschoolpickup {
	padding: 0 2.5%;
	box-sizing: border-box;
	/* display: flex;
	align-items: center; */
	margin-bottom: 30px;
}
.afterschoolpickup figure{/* width: 33%; */ width: 94%; margin: 0 auto 10px; aspect-ratio: 960 / 640; overflow: hidden; border-radius: 20px; position: relative;}
.afterschoolpickup dl{/* width: calc(67% - 30px); margin-left: 30px;*/ width: 100%; }
.afterschoolpickup dd {padding: 10px 20px 0; box-sizing: border-box; font-weight: 500;}


.afterschoolpickup:nth-of-type(2n) {flex-direction:row-reverse;}
.afterschoolpickup:nth-of-type(2n) dl{/* width: calc(67% - 30px); margin-left: 0px; margin-right: 30px; */}

.commentImg {margin: 20px auto 5px; width: 20%; min-width: 200px; border-radius: 5px;}


.loginBox {
	width: 300px;
	margin: 0 auto;
}

.loginBox p {
	margin-bottom: 20px;
	line-height: 1.4;
}



.loginTxt {
	margin-bottom: 20px;
	line-height: 1.4;
	text-align: center;
}


@media all and (max-width: 320px) {
.loginTxt {
	text-align: left;
}
}

.loginBox dl{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
}

.loginBox dt {
	width: 80px;
	font-size: 13px;
	margin-bottom: 3px;
}

.loginBox dd {width: calc(100% - 80px); margin-bottom: 3px;}


.loginBox .btn input[type="submit"],
.loginBox .btn a {padding: 10px 20px;}


.loginBox .btn input[type=submit]:active,
.loginBox .btn a:active {
background-color: var(--bs-white);
color: var(--bs-main-color);
transition: background-color .3s, color .3s;
}

.loginBox .btn a:before{
	position: absolute;
	top:0;
	bottom:0;
	right: 20px;
	margin: auto 0;
	content:"";
	background-color: var(--bs-accent-color) !important;
	background-image: url(images/arrowRight.svg) !important;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 7px auto;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	transition: top .3s;
}


/* **********************************************************************************************
[6]other
************************************************************************************************ */
/* common
----------------------------------------------- */
.point li figure img,
.newsBox li div figure img,
.newsBox li div figure img,
#sliderbox figure img,
.rinenBnr img,
.schooloneschool li figure img,
.classDetail li figure img,
.supportParent li figure img,
.systemclass li figure img,
.homerupointbox li div figure img,
.afterS002Box figure img,
.galleryBox figure img,
.teacherBox figure img,
.teacherMain figure img,
.newsBox2 figure img,
.instaBox li figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
}



/* form
---------------------------------------------- */
input[type=text],textarea,input[type=password] {
	background-color: #fff;
	padding: 8px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ddd;
	margin: 1px 0;
}
input.boxShort,input.box60 {width: 55px;}
input.box120 {width: 100%;}
input.box140 {width: 100%;}

input.boxMiddle,input.box380,input.box300 {width: 100%;}
input.boxLong {width: 100%;}
.box95,textarea.box380 {width: 100%;}
input[type=checkbox] {width: 25px; height: 25px; background-color: #fff; }
input[type=radio] {width: 25px; height: 25px; background-color: #fff; vertical-align:middle; border: 1px solid #ddd;-webkit-appearance: none;border-radius: 50%; box-sizing: border-box;}


/* 内側のマル */
input[type="radio"]:before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}
/* 選択された時の内側のマルの色 */
input[type="radio"]:checked:before {
  background: var(--bs-main-color);
}

.agree input[type=radio]{
	vertical-align:middle;
}
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	text-indent: .01px;
	text-overflow: "";
	appearance:none;
	width: 55px;
	height: 40px;
	padding: 8px 20px 8px 8px;
	background-color: #fff;
	background-image: url(images/select.png);
	background-repeat: no-repeat;
	background-size: 6px 9px;
	background-position: right 5px center;
	cursor: pointer;
	border: 1px solid #ddd;
	margin: 0 5px 5px 0;
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select:not(:target) {
		padding-right:0;
		background-image: none;
	}
}

	input[type="submit"],input[type=text],textarea,select,button,input[type=button]{
	-webkit-appearance: none;
	}
	


/* font 
--------------------------------------------- */

.txtC,.alignC { text-align: center; }
.txtR,.alignR { text-align: right; }
.txtL,.alignL { text-align: left; }

.box10 {
	width: 100%;
	margin: 0 auto;
	padding: 80px 2.5%;
	box-sizing: border-box;
	position: relative;
}
.top003 .box10 { padding: 80px 0;}
.box10N {
	width: 100%;
	margin: 0 auto;
	padding: 80px 10px;
	box-sizing: border-box;
	position: relative;
}

.box10T {
	width: 100%;
	margin: 0 auto;
	padding: 0 2.5% 80px;
	box-sizing: border-box;
	position: relative;
}

.box10B {
	width: 100%;
	margin: 0 auto;
	padding: 80px 2.5% 0;
	box-sizing: border-box;
	position: relative;
}

.posiR {position: relative;}
.spno { display: none; }


@media all and (min-width: 480px) {
br.pcno { display: none;}
#topContent,
#sliderbox,
#sliderbox li figure {
	height: 100vh;
}
.mainTtl h2 span.ttlBg{padding: 20px 30px 0 30px;}
.sixpoint {
	display: flex;
	flex-wrap: wrap;
}
.sixpoint li{width: calc(100% / 2); padding: 0 5px 30px;}
#sub.schoolone .sixpoint li{width: calc(100% / 1); padding: 0 5px 30px;}
.ill003 {
	top:400px;
	left:50px;
	width: 60px;
}

.ill004 {
	top:0px;
	left:10px;
	width: 60px;
}
.ill005 {
	top:-20px;
	right:10px;
	width: 60px;
}
.ill006 {
	top: 450px;
	right:20px;
	width: 100px;
}


.mask01 {
	top:0px;
	left:50px;
}

.mask02 {
	top:450px;
	left:20px;
}

.mask04 {
	top:10px;
	right:50px;
}



.mask01 img {width: 100px;}
.mask02 img {width: 120px;}
.mask04 img {width: 100px;}

.mask03 {
	top:-60px;
	right:5px;
}
.mask05 {
	bottom: -20px;
	right:5px;
}

.mask03 img {width: 200px;}
.mask05 img {width: 150px;}

.schoolLeft {padding: 40px 40px;}
.schoolRight {padding: 100px 40px 80px;}

.first-v2 {
    padding-top: min(100vh,75%);
}

#sub .first-v2 {
    padding-top: min(100vh,35%);
}

#sub.schoolone .first-v2 {
    padding-top: min(100vh,35%);
}
.rinenBtnSub {
	width: 30%;
	text-align: center;
	min-width: 300px;
	margin: 0;
}

.listdl dl {
	display: flex;
}
.listdl dt {width: 180px;}
.listdl dd {width: calc(100% - 180px);}


.afterschoolpickup {
	padding: 0 2.5%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.afterschoolpickup figure{width: 40%; margin: 0; aspect-ratio: 960 / 640; overflow: hidden; border-radius: 20px; position: relative;}
.afterschoolpickup dl{width: 60%; }
.afterschoolpickup dd {padding: 10px 20px; box-sizing: border-box; font-weight: 500;}


}

@media all and (min-width: 560px) {


.teacherBox {
	display: flex;
}

.teacherBox figure{
	width: 200px;
	height: 200px;
}

.teacherBox dl {
	width: calc(100% - 220px);
	margin-left: 20px;
}

.voice {
	display: flex;
	flex-wrap: wrap;
}
.galleryBox {
	width: calc((100% - 40px) / 2);
	masrgin: 10px 0;
	padding: 15px;
}


}

@media all and (min-width: 660px) {
br.spno.spblock {display: block;}
.commonText {line-height: 2.5; text-align: center;}

.sixpoint li{width: calc(100% / 3);}
#sub.schoolone .sixpoint li{width: calc(100% / 3); padding: 0 5px 30px;}
.program {
	display: flex;
	justify-content: center;
}

.program li {
	padding: 10px 30px;
}
.program li:before {
	top:30px;
	left: -18px;
	right:inherit;
	margin: 0;
}

/* .link, */
.linkBtn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footerContact {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 120px;
	text-align: center;
}
.footerContact li:nth-of-type(1),
.footerContact li:nth-of-type(1) a {
text-align: right;
margin-bottom: 0px;
}
.footerContact li:nth-of-type(1) .teltext {
text-align: right;
}


.newsContents {display: block; text-align: center;}
.newsConSub {width: calc(100% - 305px); text-align: left;display: inline-block; vertical-align: top;}
.facebookBox {width: calc(100% - 405px); max-width: 500px;display: inline-block; vertical-align: top; display: none;}
.instagram {width: 300px; display: inline-block; vertical-align: top;}
.instagram h3 { text-align: left;}

.note {
  background-size: auto 2.5em;
  line-height: 2.8em;
}
.afteromoi {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}
.afteromoi li{padding: 5px;}
.afterS002List001 {
	 display: flex;
	align-items: center;
	padding: 0 0px 20px;
	box-sizing: border-box;
}


.afterS002Box .afterS002List001 figure{ width: calc(100% / 3); }


.afterS002List001 dl{ width: calc((100% / 3) * 2); padding-left: 20px; box-sizing: borer-box; }

.afterS002List3 {
	padding: 0px;
	box-sizing: border-box;
	display: flex;
}
.afterS002List3 li {
	width: calc(100% / 3);
	padding: 10px 10px;
	box-sizing: border-box;
	border-left: 1px dashed var(--bs-gray-50);
	border-top: none;
}

.afterS002List3 li:first-child {border-left: none;border-top: none; padding-top:10px;}
.afterS002List3 li:last-child {padding-bottom: 10px;}

.afterservice {
	display: flex;
	justify-content:center;
	flex-wrap: inherit;
}
.afterservice li{width: 25%; padding: 20px 5px; box-sizing: border-box; border-left: 1px dashed var(--bs-gray-50);}

.afterservice li:nth-of-type(3) {border-left: 1px dashed var(--bs-gray-50);}

.afterservice li:first-child,
.afterservice li:nth-of-type(2) {
border-bottom: none;
}

.aftermap {width: 50%;}
.kokusya {
	display: flex;
	align-items: center;
}
.kokusya dl {padding-left: 30px; box-sizing: border-box; max-width: 500px; width: 50%;}
.kokusya dd { padding-left: 0px; box-sizing: border-box;}

.schoolonemethod {
	display: flex;
	justify-content: center;
}
.schoolonemethod li {padding: 0 20px;}
.schoolonemethod li:before {
	left: -15px;
	right:inherit;
	top: 0;
	bottom: 0;
}
.schooloneschool {
	display: flex;
	justify-content: center;
	margin: 40px 0;
}
.schooloneschool li {box-sizing: border-box; padding:20px; width: 50%; border-left: 2px dashed var(--bs-gray-50); border-top: none;}

.schooloneAdd {
display: flex;
flex-wrap: wrap;
}

.schooloneAdd dd{
	width: calc(100% / 3);
	padding: 10px;
}

.classDetail {
	display: flex;
	justify-content: center;
}
.classDetail li { padding: 10px 5px; box-sizing: border-box; width: calc(100% / 3);}
.classDetail li div {
	padding: 30px 10px 10px;
}

.speechBubble {
  min-width: 200px;
left: 50%;
margin-left: -100px;
top: 40px;
}

.systemclass {
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}
.systemclass li{
width: calc(100% / 3);
padding: 0px 20px 30px
box-sizing: border-box;
}
.systemclass li div{
	padding: 20px 10px;
}

.systemclass div::before,
.systemclass div::after{
	left: 0;
	right: inherit;
	bottom: 0;
	top: 0;
}

.systemclass div::before{
	left: -40px;
}
.systemclass div::after{
	left: -30px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.supportParent li{
	 width: 25%;
}
.supportParent li:nth-of-type(3) div{
	top: 15px;
	
}
.supportParent li:nth-of-type(4) div{
	top: -65px;
}
.riachingBox001 figure{ top: -30px; }


.homerupointbox li div{
	display: flex;
}

.homerupointbox li div figure{
	width: 200px;
}
.homerupointbox li div dl{
	width: calc(100% - 200px); 
	padding-left: 20px;
}


.riachingBoxSub001 {
	width: 60%;
}
.riachingBoxSub002 {
	/* background-color: var(--bs-main-color-90); */
	width: 40%;
	padding: 10px;
	box-sizing: border-box;
	border-left: 3px dotted var(--bs-main-color);
	border-top: none;
}

.rememoImg {
	width: 250px;
	margin: 0 10px 0 0px;
}

.subcommontxt.rememoTxt {
	width: calc(100% - 260px);
	padding: 0;
}

.sevenImg {
	max-width: 250px;
	margin: 0 10px 0 0;
}
.riachingBoxSub003 {
	width: calc(100% - 260px);
	padding: 0;
	box-sizing: border-box;
	margin-top: 10px;
}


.riachingBox002 {display: flex ;justify-content: center; flex-wrap: wrap;}
.riachingBox002.riachingBox003 {align-items: start;}
.rememoImg2 {margin: 30px  0 0 30px;}
.subcommontxt.rememoTxt2 {width: calc(100% - 199px);}

.methodInOut {
	display: flex;
	justify-content: center;
	align-items: center;
}

.methodInOut li:nth-of-type(1){ width: 300px; margin: 40px 20px 0;}
.methodInOut li:nth-of-type(2){ width: 500px; margin: 40px 20px 0; position: relative;}
.methodInOut li:nth-of-type(2):before{
position: absolute;
top:80px;
left:-45px;
content:"＜";
right: inherit;
margin: 0 auto;
font-size: 45px;
font-weight: 900;
text-align: center;
color: var(--bs-main-color-50);
}

.newscat li a{
	min-width: auto;
}

img.alignright {
	float: right;
	margin: 0 0 15px 15px;
}

img.alignleft {
	float: left;
	margin: 0 15px 15px 0;
}

.blogDetail p:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.blogDetail p { min-height: 1px; }
* html .blogDetail p {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}


}

@media all and (min-width: 768px) {
.newsBox li {
	width: 25%;
}

.newsBnr {
	bottom: 10px;
	right:0px;
	width:300px;
}
.newsBnr a{width: 300px;}
.newsBnr h2 {height: 240px; font-size: 16px;}
.newsBnr h2 span {
	top: 120px;
	left: 60px;
}
.newsBnr .newsBnrD div {
	width: 50%;
	height: 240px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}


.newsBnr .newsBnrD dl {
	padding: 15px;
	box-sizing: border-box;
	position: absolute;
	left: 20px;
}

.newsBnr .newsBnrD dt {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 10px;
	letter-spacing: 0.05em;
}

.newsBnr a:hover .newsBnrD dd {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.mask01 img {width: 150px;}
.mask02 img {width: 180px;}
.mask04 img {width: 150px;}



}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#topContent,
#sliderbox,
#sliderbox li figure {height: 50vh;}
	
.first-v2 {
    padding-top: min(100vh,35%);
}

.newsContents {display: block; text-align: center;}
.newsConSub {width: 100%; text-align: left;display: block; vertical-align: top;}
.facebookBox {width: calc(100% - 405px); max-width: 500px;display: inline-block; vertical-align: top;}
.instagram {width: 400px; display: inline-block; vertical-align: top;}
.instagram h3 { text-align: left;}



}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* アニメーション */

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bs-body-bg);
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

.block-bg {
  transition: all .7s ease;
}

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}