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

/* **********************************************************************************************
[1]common
************************************************************************************************ */
html{
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body{
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	color: #423e3c;
	letter-spacing: 0.08rem;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;

/* 方眼紙模様に必須のスタイル */
  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: 12px 12px;
  background-repeat: repeat;
  background-position: center center;

}

header {
	width: 100%;
	height: 40px;
	z-index: 99999999997;
	position: fixed;
	top: 0px;
	left: 0;
	box-sizing: border-box;
	background-color: rgba(255,255,255,1);
}


header.fixed {
	width: 100%;
	height: 40px;
	z-index: 99999999997;
	position: fixed;
	background-color: rgba(255,255,255,1);
	top: 0px;
	left: 0;
	box-sizing: border-box;
	/* box-shadow: 1px 2px 2px rgba(0,0,0,0.1); */
}


#trns{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 273px 53px;
	background-color: #FFF;
}
#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: 40vh;
}

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

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

#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;
}


.scroll {
	position: absolute;
	bottom: 0;
	left: 0.2%;
	color: #fff;
	width: 10px;
	height: 80px;
	font-size: 10px;
	z-index: 999999999;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	font-family: 'Ubuntu', sans-serif;
	letter-spacing: 0.5px;
	display: none;
}
.scroll a{
	color: #fff;
	position: relative;
	width: 10px;
	height: 80px;
	display: block;
	box-sizing: border-box;
}
.scroll a:after {
	position: absolute;
	background-color: #fff;
	width: 1px;
	height: 40px;
	left: 0px;
	margin: 0;
	bottom: 0px;
	content: "";
	transition:bottom .3s,height .3s;
}

.firstVT {
	position: absolute;
	/* top: -20vh;
	left:10vw; */
	top: -5vh;
	left:0.5vw;
	width: 100%;
	height: 100%;
	align-items: center;
    display: flex;
    justify-content: start;
}

.firstVT img{max-width: 740px; max-height: 293px; width: 60vw;}


.firstIll {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	/* aspect-ratio: 477 / 338; */
	height: 40vh;
}

.firstIllSub {
	position: relative;
	width: 100%;
	height: 100%;
}

.firstIllSub div,
.firstIllSub div span{position: absolute; top:0; left:0; width: 100%; height: 100%;}
.firstIllSub div figure{ position: relative; width: 100%; height: 40vh; overflow: hidden;}

.firstIllSub div 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;
  object-position: 50% 50%;
  font-family: 'object-fit: cover; object-position: 50% 50%;'
}


/* **********************************************************************************************
[2]headerContainer
************************************************************************************************ */
header h1 {
	/* position: relative; */
	position: fixed;
	left: 5%;
	width:163.8px;
	height:31.8px;
	top: 3.5px;
	text-align: center;
	z-index: 999999999;
}
header h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width:163.8px;
	height:31.8px;
	background-size: contain;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/logo.png);
	transition: opacity .3s;
}

.headerMain {position: fixed; top: 0; left: 0; width: 100%;}
.headerMainNav {display: none;}



#_btn {
  overflow: hidden;
  height: 40px;
  width: 40px;
  position: fixed;
  top: 0px;
  right: 2.5%;
  z-index: 9999999999999;
  box-sizing:  border-box;
}


#_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: relative;
  z-index: 2;
  top:  0px;
  height: 40px;
  width: 40px;
  transition:width .3s, height .3s;
}

#fadeLayer {
  position:absolute;
  top:0px;
  right:0px;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  visibility:hidden;
  z-index: 99999999998;
  cursor: pointer;
}
#menu {
  	position: relative;
  	z-index: 0;
  	top: 13px;
	margin: 0px auto 0;
 	height: 16px;
	width: 24px;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
	transition:top .3s;
}
/* #menu:after {
	content:"MENU";
	color: #000;
	font-size: 10px;
	position: absolute;
	bottom: -13px;
	left: -2px;
}
#menu.active:after {
	content:"CLOSE";
	color: #000;
	font-size: 10px;
	bottom: -13px;
	left: -4px;
} */
#menu .bar {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 50%;
	margin-left: -12px;
    transition: .15s ease-in-out;
}

#menu.active .bar {
    background-color: #000;
}

#bar01 {top: 0;}
#bar02 {top: 6px;}
#bar03 {top: 12px;}
.active #bar01 {
    top: 6px;
    transform: rotate(45deg);
}
.active #bar02 {width: 0;}
.active #bar03 {
    top: 6px;
    transform: rotate(-45deg);
}

/* **********************************************************************************************
[3]sideContainer
************************************************************************************************ */
.headerNav {
	width: 250px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -250px;
	z-index: 999999999999;
	padding: 0px 0 0;
	box-sizing: border-box;
	background-color: #fff;
	/* overflow: auto; */
	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 {
	/* max-width: 1110px;
	height: 464px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99999999999;
	margin-top:-232px;
	margin-left:-260px;
	box-sizing: border-box;
	background-color: #fff;
	overflow: hidden; */
	position: relative;
	width: 100%;
	height: 100%;
}

.navlogo {
	/* position: absolute;;
	top: 5px;
	left: 20px;
	width:163.8px;
	height:31.8px; */
	position: relative;
	top: 60px;
	left: 20px;
	z-index: 9999999999;
}
.navlogo a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width:163.8px;
	height:31.8px;
	margin: 0;
	box-sizing: border-box;
	background-image: url(images/logo.png);
	background-size: contain;
	transition: opacity .3s;
}

.navBox {
position: relative;
top: 60px;
padding: 40px 20px;
box-sizing: border-box;
max-width: 250px;
width: 100%;
margin: 0 auto;
}

.navBox ul.side001 {
	/* -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl; */
	text-align: left;
	border-top: 1px solid #eee;
}

.navBox ul.side001 li{
	border-bottom: 1px solid #eee;
}


.navBox ul.side001 li a{
	display: block;
	color: #000;
	padding: 15px 20px 15px 5px;
	box-sizing: border-box;
	font-size: 14px;
	text-align: left;
	line-height: 0.8;
	font-weight: 700;
	font-family: 'Ubuntu', sans-serif;
	position: relative;
}

.navBox ul.side001 li a span{
	font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	display: inline-block;
	position: relative;
	line-height: 0.5;
	
}



.navBox ul.side001 li a:hover,
.navBox ul.side001 li a:hover {color: #59af91; }

.navBox ul.side001 li a::before,
.navBox ul.side001 li a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 8px;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.navBox ul.side001 li a::before{
	right: 8px;
	width: 7px;
	height: 1px;
	background: #7f7f7f;
	transition: width .3s,right .3s;
}
.navBox ul.side001 li a::after{
	right: 8px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #7f7f7f;
	border-right: 1px solid #7f7f7f;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: right .3s;
}

.navBox ul.side001 li a:hover::before{
width: 10px;
right: 5px;
transition: width .3s,right .3s;
}

.navBox ul.side001 li a:hover::after{
right: 5px;
transition: right .3s;
}

.mailBtn {
	position: fixed;
	top: 0px;
	right: calc(50px + 2.5%);
	z-index: 99999999999999;
	text-align: right;
	border-right: 1px solid #aaa;
	padding-right: 10px;
	height: 40px;
}

.mailBtn img {width: 20px; display: inline-block; margin: 9px 2px 0 0; vertical-align: top;}
.mailBtn a {
	display: inline-block;
	font-size: 25px;
	font-weight: 900;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	color: #423e3c;
	letter-spacing: 0.8px;
}

/* **********************************************************************************************
[4]footerContainer
************************************************************************************************ */
footer {
	position: relative;
	width: 100%;
	padding: 40px 2.5% 40px;
	box-sizing:  border-box;
	color: #000;
	background-color: #fff;
	text-align: center;
}

#sub footer {
	top: 40px;
	padding-bottom: 80px;
}

.footerCompany h2 {
	width:136.5px;
	height: 26.5px;
	box-sizing: border-box;
	margin: 0 auto;
}
.footerCompany h2 a{
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	width:136.5px;
	height: 26.5px;
}

.footerCompany p{font-size: 12px; margin-top: 20px; letter-spacing: 0.1em;}


.footerCon {
	/* position: absolute;
	top: 40px;
	right: 2.5%; */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.footerCon li { padding: 0 20px; box-sizing: border-box; position: relative;}
.footerCon li:first-child {border-right: 1px solid #eee;}
.footerCon li:nth-of-type(2) {padding-left: 25px;}
.footerCon a{ color: #000; font-weight: 700; font-size: 13px;}
.footerCon li:first-child a{ font-size: 18px;font-family: 'Ubuntu', sans-serif; letter-spacing: 0.8px;}

.footerCon li:first-child:before {
	position: absolute;
	background-image: url(images/free.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	width: 15px;
	content:"";
	top:0;
	bottom:0;
	left:0;
	margin: auto 0;
}

.footerCon li:nth-of-type(2):before {
	position: absolute;
	background-image: url(images/mail.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	width: 15px;
	content:"";
	top:0;
	bottom:0;
	left:10px;
	margin: auto 0;
}

/* copyright
----------------------------------------------- */
.copyright {
	font-size: 10px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	color: #262626;
	letter-spacing: 0.1em;
}

/* pageTop
----------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 2.5%;
	color: #FFF;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 10px;
	z-index: 999999999;
}
#pageTop a{
	color: #fff;
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	background-color: #f6cd02;
	line-height: 1.1;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
#pageTop a:after {
	position: absolute;
	background-image: url(images/up.svg);
	background-repeat: no-repeat;
	background-size: 35px auto;
	width: 35px;
	height: 35px;
	top: 0px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: "";
	transition: top .3s;
}

/* **********************************************************************************************
[5]Container
************************************************************************************************ */
#container {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	position: relative;
	z-index:99999999;
	margin-top: 1px;
	top: 0px;
}

#container section{position: relative;}

#sub #container {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	position: relative;
	z-index:99999999;
	margin-top: 0;
	top: 40px;
}


/* Ttl
----------------------------------------------- */
.mainTtl {
	font-size: 25px;
	margin-bottom: 30px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	color: #423e3c;
}

.mainTtl span{
	font-size: 12px;
	font-family: 'Ubuntu', sans-serif;
	display: block;
	position: relative;
	font-weight: 300;
}

.mainTtl span.topTtl{
	font-size: 25px;
	font-family: "Yusei Magic", sans-serif;
	display: inline-block;
	position: relative;
	font-weight: 400;
}


.mainTtl span.messageTtl{
	font-size: 25px;
	font-family: "Zen Maru Gothic", serif;
	display: block;
	position: relative;
	font-weight: 700;
	display: inline-block;
	padding: 5px 20px 8px 25px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.mainTtl span.messageTtl:before,
.mainTtl span.messageTtl:after{
	position: absolute;
	
}
.mainTtl span.messageTtl:before{
	top:0;
	left:-10px;
	content:"『";
	
}
.mainTtl span.messageTtl:after{
	bottom:0;
	right:-10px;
	content:"』";
}

.subTtl {
	font-size: 18px;
	margin-bottom: 30px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
}

.subTtl span{
	font-size: 10px;
	font-family: 'Ubuntu', sans-serif;
	display: block;
	position: relative;
	font-weight: 300;
}



/* Btn
----------------------------------------------- */
.btn_area ul{text-align: center;}
.btn_area ul li{display: inline-block;}

.btn { text-align: center; margin: 30px auto 0; display: inline-block;}
.btn a,
a .btn,
.btn input[type=submit]{
	display: block;
	padding: 15px 20px 15px 15px;
	box-sizing: border-box;
	color: #f6cd02;
	min-width: 260px;
	background-color: #59af91;
	border: 2px solid #59af91;
	position: relative;
	text-align: center;
	font-weight: 700;
	border-radius: 80px;
	line-height: 1.0;
	vertical-align: middle;
	cursor:pointer;
	transition: background-color .3s,color .3s;
}

.btn a:hover,
a:hover .btn,
.btn input[type=submit]:hover {
background-color: #fff;
color: #59af91;
transition: background-color .3s,color .3s;
}

.btn a:before,
a .btn:before,
.btn input[type=submit]:before{
	position: absolute;
	top:0;
	bottom:0;
	right: 10px;
	margin: auto 0;
	content:"";
	background-image: url(images/next002.svg);
	background-color: #f6cd02;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: right .3s,background-color .3s;
}

.btn a:hover:before,
a:hover .btn:before,
.btn input[type=submit]:hover:before{
	right: 8px;
	background-color: #fff;
	transition: right .3s,background-color .3s;
}

/* **********************************************************************************************
[6]topContainer
************************************************************************************************ */
.top001 {margin-top:1px; position: relative; top: -50px; }

.top001Bg_001 {
	position: absolute;
	top:0px;
	left: -10%;
	width: 35%;
}
.top001Bg_002 {
	position: absolute;
	/* top: 120px; */
	top: 620px;
	right: 0.5%;
	width: 30%;
}
.top001Bg_003 {
	position: absolute;
	bottom:-120px;
	left: 0.5%;
	width: 25%;
}
.top001Bg_004 {
	position: absolute;
	bottom:60px;
	left: 10%;
	width: 15%;
}

.top001Bg_001 img,
.top001Bg_009 img { width: 100%; aspect-ratio: 514 / 400;}
.top001Bg_002 img{ width: 100%; aspect-ratio: 877 / 583;}
.top001Bg_003 img,
.top001Bg_007 img{ width: 100%; aspect-ratio: 477 / 300;}
.top001Bg_004 img,
.top001Bg_008 img{ width: 100%; aspect-ratio: 292 / 220;}

.topBnr {
	/* display: flex;
	align-itens: start;
	justify-content: center; */
	position: relative;
}
.topBnr li{ /* width: 60%; */  width: 80%; position: relative; margin: 40px 0;}
.topBnr li div{ padding: 0 10px; box-sizing: border-box;}

.topBnr li:nth-of-type(2) {/* left: 40%; top: -20px;*/ left: 20%; margin: 80px 0 80px;}
.topBnr li:nth-of-type(3) {left: 10%;}

.topBnr li div a {display: block; position: relative;}
.topBnr li figure{
position: relative;
width: 100%;
aspect-ratio: 600 / 404;
overflow: hidden;
/* border-radius: 50%; */
border-radius: 250px;
}

.topBnr li a figure span{
background-color: rgba(215,209,201,0.57);
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
opacity:0;
transition: opacity .3s;
text-align: center;

}

.topBnr li a:hover figure span{
opacity:1;
transition: opacity .3s;
}

.topBnr li a figure span img{
	width: 100px;
	height: 100px;
	position: absolute;
	top:50%;
	left:50%;
	margin: -50px 0 0 -50px;
}

.topBnr li a:before{
position: absolute;
top:4px;
left:10px;
width: 100%;
height: 100%;
border-radius: 250px;
background-color: #fff9b3;
content:"";
}

.topBnr li:nth-of-type(2) a:before{
left: inherit;
right: 10px;
}


.topBnr li p{
text-align: center;
position: absolute;
color: #423e3c;
/* font-weight: 700; */
line-height: 1.2;
padding-top: 20px;
box-sizing: border-box;
transition: background-color .3s;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
}

.topBnr li p span.topBnrTxt{
display: block;
font-size: 20px;
color: #59af91;
margin-bottom: 5px;
font-weight: 700;
font-family: "Zen Maru Gothic", serif;
}

.topBnr li:nth-of-type(1) p{
/* background-image: url(images/btnBg001.png); */
aspect-ratio: 285 / 334;
width: 130px;
top: -30px;
right:-60px;
}
.topBnr li:nth-of-type(2) p{
/* background-image: url(images/btnBg002.png); */
aspect-ratio: 275 / 319;
width: 130px;
bottom:0px;
left:-60px;
padding-top: 65px;
}
.topBnr li:nth-of-type(3) p{
/* background-image: url(images/btnBg003.png); */
aspect-ratio: 272 / 303;
width: 130px;
top:0;
left:-50px;
}

.topBnr li p span.topBnrIcon{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFF;
margin: 0 auto;
text-align: center;
}

.bgBtn001,
.bgBtn002,
.bgBtn003 {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}


.top001Bg_005 {
	position: absolute;
	top: -90px;
	right: 10%;
	width: 44px;
}

.top001Bg_006 {
	position: absolute;
	top: -50px;
	left: -20px;
	width: 40px;
}


.top001Bg_005 img{ width: 100%; aspect-ratio: 99 / 89; }
.top001Bg_006 img{ width: 100%; aspect-ratio: 94 / 153; }

#sub .top001Bg_002 {
	position: absolute;
	/* top: 120px; */
	top: 20px;
	right: -5px;
	width: 30%;
}


#sub .top001Bg_005 {
	position: absolute;
	top: 0;
	left: 20%;
	right: inherit;
	width: 44px;
}


.top001Bg_007 {
	position: absolute;
	bottom: -50%;
	left: -10%;
	width: 100px;
}
.top001Bg_008 {
	position: absolute;
	bottom: -65%;
	left: -20%;
	width: 50px;
}

.top001Bg_009 {
	position: absolute;
	top: 50px;
	right: -50%;
	width: 150px;
}


#sub .top001Bg_009 {
	position: absolute;
	top: inherit;
	right: 20px;
	width: 100px;
	bottom: 0;
}


.top002 {
padding: 100px 0 150px;
box-sizing: border-box;
position: relative;
}

.top002:before {
position: absolute;
bottom:-1px;
left:0;
width: 100%;
height: 75px;
/* background-color: rgba(172,233,210,0.40); */
background-image: url(images/bgGreen.png);
background-position: center bottom;
background-size: cover;
content:"";
opacity: 0.8;
}


.top002Bg {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 1045px;
	aspect-ratio: 1588 / 1484;

}
.ill001 {
	position: absolute;
	top: -50px;
	right: 3%;
	width: 250px;
	aspect-ratio: 644 / 585;
}
.ill001 div{ position: relative; width: 100%; height: 100%;}
.ill001 div span {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	aspect-ratio: 644 / 585;
}

.bgLine {
	background-image: url(images/bg-top002.jpg);
	background-repeat: repeat;
}


.koku {
	display: flex;
	align-items: start;
	justify-content: start;
	flex-direction: row-reverse;
}

.fuku {
	display: flex;
	align-items: start;
	justify-content: start;
}

.koku dt {
	color: #f7841e;
	font-size: 106px;
	line-height: 0.9;
	font-weight: 700;
}

.fuku dt {
	color: #1fad68;
	font-size: 106px;
	line-height: 0.9;
	font-weight: 700;
}

.koku dt span,
.fuku dt span {display: block; margin: 10px 0; font-size: 12px; color: #423e3c;line-height: 0.8; text-align: center;}


.koku dd,
.fuku dd {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.koku dd span,
.fuku dd span{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
	/* background-color: #FFF; */
	padding: 5px 0.5px;
	box-sizing: border-box;
	margin: 0 1px;
	font-size: 13px;
	letter-spacing: 0.8px;
	/* font-weight: 700; */
}

.kokufuku {
	display: flex;
	align-items: start;
	justify-content: start;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 310px;
	max-width: 845px;
	box-sziing: border-box;
}

.kokufukuTxt {
	margin-top: 30px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 2.0;
	width: 310px;
	max-width: 845px;
}


.kokufukuImg {
	position: absolute;
	bottom:0;
	right: 10%;
	max-width:310px;
}

/* .kokufukuBtn {position: relative; width: 100%; box-sizing: border-box;}
.top002 .btn {
	margin: 0 auto;
	text-align: center;
	width: 260px;
	display: block;
} */


.bgDot {
	background-image: url(images/bg-top003.jpg);
	background-repeat: repeat;
}


.subBtn {
	position: absolute;
	/* top:120px; */
	top: 110px;
	right:5%;
}

.subBtn a{
	display: block;
	font-size: 13px;
	font-weight: 500;
	position: relative;
	padding: 5px 25px 5px 15px;
	box-sizing: border-box;
	background-color: #f6cd02;
	border-radius: 80px;
	color: #000;
	transition: background-color .3s;
}


.subBtn a:before {
	background-image: url(images/next001.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
	width: 20px;
	height: 20px;
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	right:7px;
	margin: auto 0;
	transition: right .3s;
}

.subBtn a:hover {
	background-color: #f69202;
	transition: background-color .3s;

}

.subBtn a:hover:before {
	right:4px;
	transition: right .3s;
}

.top003,
.top004 {
	position: relative;
}
.top004 {
	z-index: 10;
}
.top003 {padding-top: 100px; box-sizing: border-box;}

.top003:before,
.top004:before {
	background-image: url(images/bgGreen.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: left top;
	opacity: 0.8;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	content:"";
}


.ill002 {
	position: absolute;
	top: -30px;
	left: 3%;
	width: 200px;
	aspect-ratio: 550 / 634;
}
.ill002 div{ position: relative; width: 100%; height: 100%;}
.ill002 div span {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	aspect-ratio: 550 / 634;
}
.top003 .mainTtl {text-align: left; margin: 20px 0 20px 5%;}

.news {
	/* display: flex;
	align-items: start;
	justify-content: start;
	flex-wrap: wrap; */
}


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


.news dl {
    position: relative;
    /* max-width: 400px; */
    width: calc(100% - 80px);
    margin: 1.5em 0;
    padding: 3em 2em 2em;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #fff9b3;
    color: #333333;
    border-radius: 4px;
    box-sizing: border-box;
}
.news li:nth-of-type(2n) dl {
background-color: #F5F6F8/* FFCEE0 */;
/* top: 20px; */
left: -2.5%;
}

.news li:nth-of-type(2n+1) dl {
left: calc(80px + 2.5%);
}

.news dl dt {
    position: absolute;
    top: -15px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: .5em 2em;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: rgb(255 255 255 / 40%);
     letter-spacing: 0.1em;
}

.news dl dd {
    margin: 0;
}

.news li dd a{
	color: #59af91;
	display: block;
	transition: color .3s;
	margin-bottom: 5px;
}

.news li dd span{
	color: #423e3c;
	display: inline-block;
	text-align: justify;
  	text-justify: inter-ideograph;
}


.news li dd a:hover{
	color: #59af91;
	text-decoration: underline;
	transition: color .3s;
}

.top005Box {
	position: relative;
	width:94%;
	min-width: 280px;
	height: 240px;
	margin: 100px auto 0px;
	transform: rotate(-3deg);
	top: -120px;
}

.top005Bg {
	position: absolute;
	top: 0;
	left:50%;
	margin-left: -50%;
	width: 100%;
	height: 240px;
}

.top005Bg figure{ position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 120px;}

.top005Bg:before{
	position: absolute;
	top:5px;
	left:5px;
	width: 100%;
	height: 100%;
	border-radius: 120px;
	background-color: #fff9b3;
	content:"";
}

.top005Bg figure span{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(215, 209, 201, 0.57);
	top:0;
	left:0;
}

.gaibu {width: 280px; height: 240px; margin: 0; position: relative; padding: 50px 30px; box-sizing: border-box; text-align: center;}
.gaibu p{color: #0080cc ; font-size: 25px; font-weight: 700;}
.gaibu .btn a {display: block; color: #fff100; background-color: #0080cc; border: 2px solid #0080cc;}

.gaibu a img{vertical-align: middle; width: 260px; display: inline-block; padding: 0 5px;}
.gaibu a:hover {color: #0080cc; background-color: #fff; transition: color .3s,background-color .3s;}


.gaibu .btn a:before{background-image: url(images/next003.svg); background-color: #fff100;}
.gaibu .btn a:hover:before{background-color: #ffffff;}
/* .top004 {
background-color: rgba(172,233,210,0.40);
background-color: rgba(215, 209, 201, 0.57);
} */


.ill003 {
	position: absolute;
	top: -150px;
	right: 3%;
	width: 280px;
	aspect-ratio: 754 / 631;
}
.ill003 div{ position: relative; width: 100%; height: 100%;}
.ill003 div span {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	aspect-ratio: 754 / 631;
}


.classRoom {
	background-color: #FFF;
	background-color: #F5F6F8;
	margin-bottom: 5px;
	padding: 10px;
	box-sizing: border-box;
}

.classRoom dl {
	display: flex;
	align-items: center;
	justify-content: start;
}


.classRoom dt {
	width: 100px;
	padding: 10px;
	box-sizing: border-box;
	font-weight: 700;
}

.classRoom dd {
	width: calc(100% - 100px);
	padding: 10px;
	box-sizing: border-box;
	/* border-left: 1px solid #ccc; */
	border-left: 1px solid #afead6;
}

.classRoom ul {
	display: flex;
	align-items: start;
	justify-content: start;
	flex-wrap: wrap;
}

.classRoom li {
	/* width: 25%; */
	padding: 2px;
	box-sizing: border-box;
}

.classRoom li a{
	display: block;
	padding: 10px 20px 10px 40px;
	background-color: #f6cd02;
	line-height: 1.0;
	border-radius: 80px;
	color: #423e3c;
	position: relative;
	font-size: 12px;
}

.classRoom:nth-of-type(1) li a{
	background-color: #f4c074;
}
.classRoom:nth-of-type(2) li a{
	background-color: #e9d96f;
}
.classRoom:nth-of-type(3) li a{
	background-color: #ccb4d6;
}
.classRoom:nth-of-type(4) li a{
	background-color: #eca995;
}
.classRoom:nth-of-type(5) li a{
	background-color: #efc1d4;
}


.classRoom li a:before{
	position: absolute;
	top:0;
	bottom:0;
	left:20px;
	background-image: url(images/ifn0202.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	width: 15px;
	content:"";
	margin: auto;
	transition: background-color .3s;
}


.classRoom li a:hover{
background-color: #f69202;
transition: background-color .3s;
}

.classRoom:nth-of-type(1) li a:hover{
	background-color: #f5aa3d;
}
.classRoom:nth-of-type(2) li a:hover{
	background-color: #ebd01a;
}
.classRoom:nth-of-type(3) li a:hover{
	background-color: #bd80d6;
}
.classRoom:nth-of-type(4) li a:hover{
	background-color: #ec8567;
}
.classRoom:nth-of-type(5) li a:hover{
	background-color: #f088b3;
}



.three001 {
	position: absolute;
	bottom:0px;
	right: -15px;
	width: 50px;
}

.three002 {
	position: absolute;
	bottom:3px;
	right: 15px;
	width: 50px;
}


.three003 {
	position: absolute;
	top: 35%;
	right: -30px;
	width: 80px;
}

.three004 {
	position: absolute;
	top: 52%;
	left: -30px;
	width: 70px;
}


.three005 {
	position: absolute;
	top: 54%;
	left: 5px;
	width: 60px;
}

.three006 {
	position: absolute;
	top: 0%;
	left: -10px;
	width: 60px;
}

.three007 {
	position: absolute;
	top: 3.5%;
	left: 75%;
	width: 50px;
}

.three001 img { width: 100%; aspect-ratio: 237 / 167;}
.three002 img { width: 100%; aspect-ratio: 164 / 142;}
.three003 img { width: 100%; aspect-ratio: 274 / 266;}
.three004 img { width: 100%; aspect-ratio: 219 / 196;}
.three005 img { width: 100%; aspect-ratio: 157 / 100;}
.three006 img { width: 100%; aspect-ratio: 253 / 171;}
.three007 img { width: 100%; aspect-ratio: 197 / 180;}


.animal001 {
	position: absolute;
	top: 38%;
	right: 10px;
	width: 80px;
}
.animal002 {
	position: absolute;
	top: 52%;
	left: 15px;
	width: 80px;
}
.animal003 {
	position: absolute;
	top: -2.5%;
	left: 15px;
	width: 70px;
}
.animal004 {
	position: absolute;
	top: 4.2%;
	left: 85%;
	width: 30px;
}

.animal001 img { width: 100%; aspect-ratio: 307 / 157;}
.animal002 img { width: 100%; aspect-ratio: 210 / 125;}
.animal003 img { width: 100%; aspect-ratio: 249 / 258;}
.animal004 img { width: 100%; aspect-ratio: 94 / 100;}


#sub .three003 {
	position: absolute;
	top: inherit;
	bottom: 0px;
	right: -20px;
	width: 80px;
}

#sub .animal001 {
	position: absolute;
	top: inherit;
	bottom: 0px;
	right: 30px;
	width: 50px;
}

#sub .three007 {
	position: absolute;
	top: 20px;
	right: 18%;
	left:inherit;
	width: 50px;
}
#sub .animal004 {
	position: absolute;
	top: 50px;
	right: 16%;
	left:inherit;
	width: 30px;
}


#sub .three004 {
	position: absolute;
	top: 5%;
	left: -20px;
	width: 70px;
}
#sub .three005 {
	position: absolute;
	top: 2%;
	left: 30px;
	width: 60px;
}
#sub .animal002 {
	position: absolute;
	top: 4%;
	left: 40px;
	width: 80px;
}

#sub .three001 {
	position: absolute;
	bottom:10px;
	right: -5px;
	width: 70px;
}

#sub .three002 {
	position: absolute;
	bottom:0px;
	right: 40px;
	width: 50px;
}




.bgmap {
	position: absolute;
	top: 110px;
	right: 0;
	width: 300px;
}

.bgmap figure{
	position: relative;
	width: 100%;
	aspect-ratio: 356.1069 / 247.2934;
	overflow: hidden;
}

.roomBox {
	position: relative;
	/* width: calc(90% - 450px);
	left: 2.5%; */
	width: 94%;
	margin:  0 auto;
	padding: 180px 0 0;
	box-sizing: border-box;
}

.top004 .mainTtl {text-align: left; position: relative; top: 25px; left: 5%;}


.movieBox {
	/* display: flex; */
	width: 85%;
	margin: 0 auto;
}

div.vid_contents {
	width: 100%;/*背景色を横幅いっぱいに広げる*/
	text-align: center;
	margin: auto;
}
video.vid_main {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 920px;/*PC版での最大幅*/
}

.movieBox dl {
	width: 100%;
	box-sizing: border-box;
}
.movieBox dt {
	text-align: center;
	font-size: 32px;
	line-height: 1.1;
	font-family: "Yusei Magic", sans-serif;
	margin-bottom: 30px;
	color: #59af91;
}

.movieBox dt span.marker{
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	color: #000;
    background-color: #f6cd02;
    padding: 0 5px;
}


.movieBox dd .btn {width: 100%;}
.movieBox dd .btn  a {display: inline-block;}

/* **********************************************************************************************
[7]subContainer
************************************************************************************************ */
/* common
---------------------------------------------- */

#sub #topContent,
#sub #sliderbox {/* height: 100px; */ position: relative; height: auto;}
#sub #sliderbox {margin-top: 40px;}
#sub #sliderbox figure.subbg{
	position: relative;
	width: 100%;
	overflow: inherit;
	height: auto;
	min-height: 100px;
	aspect-ratio: 1920 / 568;
}
#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 div {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#sub #sliderbox div.firstSubTtl {
	height: auto;
	aspect-ratio: 1920 / 568;
}

#sub #sliderbox div.firstIll {
	position: absolute;
	top: 0;
	right: 0;
	left: inherit;
	width: 30%;
	aspect-ratio: 575 / 568;
	height: auto;
}
#sub #sliderbox .firstIllSub div{
	height: auto;
	aspect-ratio: 575 / 568;
}
#sub #sliderbox .firstIllSub div figure{
	position: relative;
	width: 100%;
	overflow: inherit;
	height: auto;
	aspect-ratio: 575 / 568;
}

#sub #sliderbox div h2{
	font-size: 25px;
	color: #FFF;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	width: 100%;
	text-shadow:#f2c201 1px 1px 6px, #f2c201 -1px 1px 6px, #f2c201 1px -1px 6px, #f2c201 -1px -1px 6px;
}


#sub #sliderbox div h2 span{
	display: inline-block;
	font-size: 15px;
	color: #FFF;
	line-height: 1.2;
	font-weight: 700;
	text-shadow:#f2c201 1px 1px 6px, #f2c201 -1px 1px 6px, #f2c201 1px -1px 6px, #f2c201 -1px -1px 6px;
}



#sub .mainTtl {font-size: 20px;}
.mainTtl2 {
	font-size: 18px;
	margin-bottom: 30px;
	line-height: 1.4;
	font-weight: 700;
	text-align: left;
}

.mainTtl2 span{
	font-size: 10px;
	font-family: 'Ubuntu', sans-erif;
	display: block;
	position: relative;
	font-weight: 300;
}

.message {
	/* display: flex;
	align-items: center;
	justify-content: center; */
	line-height: 2.5;
	letter-spacing: 0.08rem;
}

.message p {width: 100%; font-size: 14px; line-height: 2.0; text-align: justify;}
.message figure {width: 94%; position: relative; margin: 0 auto;}
.message figure img {border-radius: 20px; z-index: 10; position: relative;}
.daihyoname {display: inline-block; text-align: right; font-weight: 700; width: 100%; margin-top: 30px;}

.message figure:before{
	position: absolute;
	top:4px;
	left:10px;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background-color: #fff9b3;
	content:"";
	z-index: 2;
}

#postit_box {
    position:relative;
    width: 94%;
    height: auto;
    margin:0 auto;
    padding:20px;
    box-sizing: border-box;
    /* background:transparent url(images/bg_blackboard.png) repeat 0 0; */
    
    overflow:hidden;
    font-size:15px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    /* box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #fff9b3; */
}

.bgGreen,
.bgGreen2 {
	position: relative;
}
.bgGreen {min-height: 200px;}
.bgGreen:before {
	background-image: url(images/bgGreen.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: left top;
	opacity: 0.8;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 200px;
	content:"";
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  margin-left: -300px;
  margin-right: -100px;
  padding-left: 300px;
  padding-right: 100px;
}

.bgGreen:after {
	background-image: url(images/bgGreen.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: left top;
	opacity: 0.8;
	position: absolute;
	top:200px;
	left:0;
	width: 100%;
	height: calc(100% - 200px);
	content:"";
	z-index: 1;
  /* border-top-left-radius: 0%;
  border-top-right-radius: 50%;
  margin-left: -500px;
  margin-right: -200px;
  padding-left: 500px;
  padding-right: 200px; */
}


.bgGreen2:before {
	background-image: url(images/bgGreen.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: left top;
	opacity: 0.8;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	content:"";
}

.bgGreen .box10S,
.bgGreen span {z-index: 10;}

.sub002Bg-001 {
	position: absolute;
	top: -10px;
	left: 5%;
	margin: 0 0 0 0;
	height: 60px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 202 / 396;
}

.sub002Bg-002 {
	position: absolute;
	top: 10px;
	left: 20%;
	margin: 0 0 0 0;
	height: 60px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 102 / 223;
}

.sub002Bg-002-1 {
	position: absolute;
	top: -50px;
	left: 9%;
	margin: 0 0 0 0;
	height: 50px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 223 / 227;
}

.sub002Bg-004 {
	position: absolute;
	bottom: 0px;
	right: 20%;
	margin: 0 0 0 0;
	height: 70px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 147 / 359;
}

.sub002Bg-003 {
	position: absolute;
	bottom: 0%;
	left: 15%;
	margin: 0 0 0 0;
	height: 50px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 279 / 349;
}

.sub002Bg-003-01 {
	position: absolute;
	top: 50%;
	left: 5px;
	margin: 0 0 0 0;
	height: 70px;
	width: auto;
}

.sub002Bg-003-02 {
	position: absolute;
	top: 35%;
	right: -20px;
	margin: 0 0 0 0;
	height: 100px;
	width: auto;
}

.sub002Bg-003-03 {
	position: absolute;
	top: 55%;
	left: -10px;
	margin: 0 0 0 0;
	height: 40px;
	width: auto;
}

.sub002Bg-004-02 {
	position: absolute;
	top: 0%;
	right: 10%;
	margin: 0 0 0 0;
	height: 70px;
	width: auto;
}

.sub002Bg-004-03 {
	position: absolute;
	top: 5%;
	right: 20%;
	margin: 0 0 0 0;
	height: 30px;
	width: auto;
}

.three003-01 {
	position: absolute;
	bottom: 0%;
	left: 10%;
	margin: 0 0 0 0;
	height: 30px;
	width: auto;
	/* max-width: 400px; */
	aspect-ratio: 157 / 100;
}

.sub002Bg-003-01 img{height: 100%; aspect-ratio: 325 / 319;}
.sub002Bg-003-02 img{height: 100%; aspect-ratio: 521 / 530;}
.sub002Bg-003-03 img{height: 100%; aspect-ratio: 210 / 201;}

.sub002Bg-004-02 img{height: 100%; aspect-ratio: 145 / 141;}
.sub002Bg-004-03 img {height: 100%; aspect-ratio: 286 / 276;}




.listNormal {border-top: 1px solid #9AB293; width: 85%; margin: 0 auto;}
.listNormal li{padding: 20px; box-sizing: border-box; border-bottom: 1px solid #9AB293;}

.listNormal dt {font-weight: 700;}

.outlink li{
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto 5px;
	max-width: 360px;
}
.outlink li a {display: block; }

.listHistory,
.listHistory li {position: relative;}


.listHistory {background-color: #fff9b3; width: 85%; margin: 0 auto; padding: 30px 0px; box-sizing: border-box;}


.listHistory li:before {
	position: absolute;
	top: 25px;
	left: 104px;
	background-color: #423e3c;
	width: 2px;
	height: 100%;
	content:"";
}
.listHistory li:last-child:before {
	background-color: !important;
	height: 0;
	width: 0;
}

.listHistory li{ padding: 20px 10px; box-sizing: border-box;}
.listHistory dl{display: flex;}
.listHistory dt{
	width: 120px;
	padding-right: 50px;
	box-sizing: border-box;
	text-align: right;
	position: relative;
	font-size: 12px;
	letter-spacing: 0.05rem;
}
.listHistory dt:before{
	position: absolute;
	top:5px;
	right: 20px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #423e3c;
	content:"";
}

.listHistory dt span {
	dislay: inline-block;
	background-color: #FFF;
	border-radius: 80px;
	padding: 0 5px;
	box-sizing: border-box;
}

.listHistory dd{width: calc(100% - 120px); font-size: 13px;}
.listHistory dd br {display: block; content: ""; margin: 10px 0 0;}


.concept001 {
	min-height: 600px;
}


.top002Bg-subtree {
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 700px;
	aspect-ratio: 1588 / 1484;

}

.conceptBox {max-width: 800px; margin: 30px auto 0; width: 85%;}
.conceptBox li{
	background-color: #fff9b3;
	padding: 20px;
	box-sizing:border-box;
	margin-bottom: 10px;
	background-color:#fff;
	box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;
   border-radius: 30px;
}

.conceptBox dl{display: flex; font-size: 15px; line-height: 1.6;}
.conceptBox dt{width: 20px;}
.conceptBox dd{width: calc(100% - 20px);}
.conceptTtl {
	text-align: center;
	font-size: 70px;
	font-weight: 900;
	color: #f7841e;
	line-height: 1.2;
}
.conceptTtl span{
	font-size: 30px;
	display: inline-block;
}
.conceptSubTtl {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
	margin-bottom: 40px;
}
.textconcept {text-align: left; width: 85%; margin: 0 auto;}
.conceptBox2 {border-top: 1px solid #9AB293; width: 85%; margin: 30px auto 0;}
.conceptBox2 li {border-bottom: 1px solid #9AB293; padding: 20px 0; box-sizing: border-box;}
.conceptBox2 dl{display: flex; align-items:center;}
.conceptBox2 dt {
	/* background-color: #004ea2; */
	background-image: url(images/circleBg.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;

}
.conceptBox2 dt span{
	display: block;
	font-size: 30px;
	font-weight: 900;
	color: #ffde24;
}
.conceptBox2 dd {width: calc(100% - 75px);}
.conceptBox2 dd p {
	font-size: 18px;
	font-weight: 900;
	color: #f7841e;
	margin-bottom: 5px;
	line-height: 1.2;
	letter-spacing: 0.02rem;
}

.conceptBox2 dd span {font-size: 12px; display: inline-block; padding: 5px 10px; line-height: 1.0; border-radius: 80px; margin-right: 10px; margin: 2px 10px 2px 0; font-weight: 700; background-color: #fff; letter-spacing: 0.02rem;}

.voiceBox li{
	padding: 0 0px;
	box-sizing: border-box;
	margin-bottom: 25px;
}

.voiceBox li:nth-of-type(2){
	margin-bottom: 50px;
}

.voiceBox li:nth-of-type(1){
	padding: 0 10px 20px 30px;

}
.voiceBox li:nth-of-type(2){
	padding: 0 30px 20px 10px;

}
.voiceBox li:nth-of-type(3){
	padding: 0 10px 20px 30px;

}

.voiceBox li a {display: block; position: relative;}
.voiceBox li figure {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 100vh;
}
.voiceBox li figure:before {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	/* background-image: url(images/bg-top002.jpg); */
	background-color: #fff9b3;
	background-repeat: repeat;
	left: 5px;
	top: 5px;
	content:"";
}

.voiceBox li figure img {
border-radius: 100vh;
}


.voiceBox li p{
text-align: center;
position: absolute;
color: #423e3c;
/* font-weight: 700; */
line-height: 1.2;
padding-top: 20px;
box-sizing: border-box;
transition: background-color .3s;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
}

.voiceBox li p span.topBnrTxt{
display: block;
font-size: 20px;
color: #59af91;
margin-bottom: 0;
font-weight: 700;
font-family: "Zen Maru Gothic", serif;
}

.voiceBox li:nth-of-type(3) p span.topBnrTxt{
letter-spacing: 0.02rem;
}

.voiceBox li:nth-of-type(3) p{
/* background-image: url(images/btnBg001.png); */
aspect-ratio: 285 / 334;
width: 155px;
top: -60px;
left: -10px;
}
.voiceBox li:nth-of-type(1) p{
/* background-image: url(images/btnBg002.png); */
aspect-ratio: 275 / 319;
width: 130px;
bottom:-30px;
left: -10px;
padding-top: 65px;
}
.voiceBox li:nth-of-type(2) p{
/* background-image: url(images/btnBg003.png); */
aspect-ratio: 272 / 303;
width: 130px;
top: -30px;
right: -30px;
}

.voiceBox li p span.topBnrIcon{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFF;
margin: 5px auto 0px;
text-align: center;
}

#sub .bgBtn001,
#sub .bgBtn002,
#sub .bgBtn003 {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}


.staff figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	/* overflow: hidden; */
}

.staff figure:before{
	position: absolute;
	top:4px;
	left:4px;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.staff figure img{position: relative; z-index: 10;border-radius: 20px;}

.staffBox {
	width: 100%;
}

.staffBox h2 {
	font-size: 25px;
	font-weight: 700;
	color: #f7841e;
	margin-bottom: 10px;
	line-height: 1.2;
}
.staffBox h2 span{
	display: inline-block;
	background-color: #f7841e;
	color: #fff;
	font-weight: 300;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 100vh;
	line-height: 1.0;
	letter-spacing: 0.08rem;
}

.staffTxt{margin-top: 40px;}

.staffTxt dt {
	border: 2px solid #1fad68;
	font-size: 16px;
	font-weight: 700;
	color: #1fad68;
	margin-bottom: 15px;
	padding: 20px;
	box-sizing: border-box;
	line-height: 1.2;
	position: relative;
}

.staffTxt dt::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 20px;
  height: 2px;
  box-sizing: border-box;
  background-color: #1fad68;
  box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
  rotate: 50deg;
}

.staffTxt dd {
	padding: 5px 20px;
	box-sizing: border-box;
	text-align: justify;
text-justify: inter-ideograph;
}

.staffwrap {
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	padding: 20px;
	box-sizing: border-box;
	width: 94%;
	margin: 0 auto;
}

.staffList li { margin-bottom: 5px; padding: 0 10px; box-sizing: border-box;}
.staffList li a {
	background-color: #59af91;
	border: 2px solid #59af91;
	color: #f6cd02;
	display: flex;
	align-items: center;
	padding: 5px;
	border-radius: 5px;
}
.staffList li figure {
	width: 20%;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 5px;
}
.staffList li p {
	width: calc(80% - 10px);
	margin-left: 10px;
	font-weight: 700;
	font-size: 18px;
}


.staffList.noImg li p {
	width: 100%;
	margin-left: 0px;
}

.staffList li p span{
	display: inline-block;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08rem;
}

.btn.btnEntry {text-align: center; max-width: 600px; margin: 30px auto 0; display: block;}
.btn.btnEntry a {font-size: 14px; padding: 30px 10px;}

.recruitBox {
	/* display: flex;
	justify-content: center;
	flex-wrap: wrap; */
	max-width: 460px;
	margin: 0 auto;
}
.recruitBox li{
	/* width: calc(100% / 3); */
	padding: 20px;
	box-sizing: border-box;
}


.recruitBox li figure {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	/* overflow: hidden; */
}

.recruitBox li figure:before{
	position: absolute;
	top: 6px;
	left: 8px;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.recruitBox li figure img{position: relative; z-index: 10;border-radius: 100vh;}

.recruitBox li dl {
	margin-top: 20px;

}
.recruitBox li dt {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
	line-height: 1.2;
	color: #f7841e;
}



.contactBg {width: 94%; margin: 0 auto; background-color: rgba(255,255,255,0.7); padding: 10px 10px 50px; box-sizing: border-box;box-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
.listdl {/* border-top: 1px solid #eee; */}
.listdl li {border-bottom: 1px solid #eee; padding:10px; box-sizing: border-box;}

.listdl dl {
	/* display: flex;
	justify-content: start;
	align-items: center; */
}

.listdl dt {
	/* width: 200px; */
	font-weight: 700;
}
.listdl dd {
	 /* width: calc(100% - 200px); */
}
.commmonTxt3 {/* text-align: center; */}
.commmonTxt2 {margin: 10px auto; /* text-align: center; */ }
.telcommon {font-size: 30px;}
.telcommon img {width: 20px; vertical-align: middle;display: inline-block; margin-right: 5px;}
.telcommon a {display: inline-block; color: #000; font-weight: 700; line-height: 1.0;}

.environmentTxt {/* text-align: center; */
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.8;
 }

.environmentImg {
	display: flex;
	justify-content: start;
	align-items: start;
	flex-wrap: wrap;
	margin-top: 20px;
}
.environmentImg li {width: 50%; padding: 5px; box-sizing: border-box;}
.environmentImg figure {
	position: relative;
	width: 100%;
	aspect-ratio: 567 / 800;
	/* overflow: hidden; */
}

.environmentImg figure:before{
	position: absolute;
	top:4px;
	left:4px;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.environmentImg figure img{position: relative; z-index: 10; border-radius: 100vh;}

.environmentBox {
	background-color: #fff9b3;
	box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto 40px;
	/* width: 930px; */
}
.environmentBox p {font-size: 14px;}
.environmentBox p span{display: inline-block; font-size: 13px;}
.environmentBox ul {
	box-sizing: border-box;
	margin: 5px 0;
}

.environmentBox ul li{
	background-color: #FFF;
	padding: 10px;
	box-sizing: border-box;
	margin: 5px;
}
.environmentBox ul li span{ fontr-size: 13px; display: inline-block; width: calc(100% - 15px); vertical-align: top;}
.environmentBox ul li span.indent {width: 15px;}

.environmentTxt2 {text-align: left;}

.flowBox {
	/* display: flex;
	justify-content: center;
	align-items: center; */
}
.flowBox li { /* float: left; width: 20%; padding: 0 20px; */ padding: 20px; box-sizing: border-box; position: relative;}
.flowBox li dl {background-color: #fff9b3; padding: 20px; box-sizing: border-box; text-align: center;
	display: flex;
	justify-content: start;
	align-items: center;
}
.flowBox li dt {font-weight: 700; line-height: 1.1; /* height: 80px; */ width: calc(100% - 80px);}
.flowBox li dt span {letter-spacing: 0.08rem; font-family: 'Ubuntu', sans-serif; display: inline-block; font-weight: 400; font-size: 12px; background-color: #f7841e; color: #FFF; /* margin-bottom: 5px; */ margin-bottom: 0; padding: 2px 5px; border-radius: 80px;}
/* .flowBox li dd img {width: 30%;} */

.flowBox li dd {width: 80px;}
.flowBox li dd img {width: 100%;}

/* .flowBox li:nth-of-type(1) dt span,
.flowBox li:nth-of-type(4) dt span,
.flowBox li:nth-of-type(5) dt span {margin-bottom: 15px;} */

.flowBox li dt span {margin-bottom: 15px;}

.flowBox li:before {
	position: absolute;
	content:"";
	/* top:0;
	bottom:0;
	margin: auto 0;
	left: -10px; */
	left: 0;
	right: 0;
	top: -10px;
	margin: 0 auto;
	width: 10px;
	height: 10px;
	border-top: 6px solid #000;
	border-right: 6px solid #000;
	/* -webkit-transform: rotate(45deg);
	transform: rotate(45deg); */
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);

}

.flowBox li:nth-of-type(1):before {
border:none;
}

.faqBox,
.recDetail {width: 94%; margin: 0 auto;}
.faqBox li,
.recDetail li {
	margin: 5px 0;
	background-color: #FFF;
}
.recDetail li {
	border: 2px solid #59af91;
}

.faqBox li dl,
.recDetail li .recTtl,
.recDetail li .recTxt {
	padding: 15px;
	box-sizing: border-box;
}

.accordion_one .accordion_header {
position: relative;
box-sizing: border-box;
cursor:pointer;
}

.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 0px;
  width: 30px;
  height: 30px;
  border: 1px solid #ffde24;
  background-color: #ffde24;
  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;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i:before,
.accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  /* background-color: #fff; */
  background-color: #59af91;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 0px;
  box-sizing: border-box;
}

.faqBox li dt{
font-weight: 700;
	display: flex;
	justify-content: start;
	align-items: center;
}

.faqBox li dd p{
	margin-top: 0px;
	padding-top: 20px;
	box-sizing: border-box;
	border-top: 1px dashed #eee;
}


.faqBox li dd p{
	display: flex;
	justify-content: start;
	align-items: start;
}
.faqBox li dt span{
font-weight: 700;
width: calc(100% - 60px);
line-height: 1.1;
dispaly: inline-block;
}
.faqBox li dd span{
width: calc(100% - 30px);
line-height: 1.4;
dispaly: inline-block;
}

.faqBox li dt span.faq,
.faqBox li dd span.faq {line-height: 1.0; display: inline-block; width: 30px; font-size: 30px; color: #59af91; font-family: 'Ubuntu', sans-serif; font-weight: 700;}

.recDetail li {
background-color: #59af91;
color: #FFF;
}

.recDetail li li,
.schoolyoukou li {
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 15px;
	margin: 0;
	border-radius: 0;
	background-color: !important;
	box-sizing: border-box;
}
.recDetail li li:last-child,
.schoolyoukou li:last-child {border: none;}
.recDetail li .recTxt { background-color: #FFF; width: calc(100% - 40px); margin: 0 auto 20px;}
.recDetail li .recTtl h2 {color: #ffde24; font-size: 18px; font-weight: 700; line-height: 1.2; width: calc(100% - 40px);}
.recDetail li .recTtl h2 span {letter-spacing: 0.08rem; border-radius: 100vh; display: inline-block; font-size: 10px; font-weight: 500; line-height: 1.0; color: #59af91; padding: 5px; background-color: #FFF; box-sizing: border-box; }
.recDetail li .recTtl p {width: calc(100% - 40px); display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.2; padding-bottom: 10px;}

.recDetail.accordion_one .accordion_header .i_box {right: 10px;}

.recDetail li li{
background-color: #fff;
color: #000;
}

.recDetail li li dl,
.schoolyoukou li dl {
	padding:0;
	/* display: flex;
	justify-content: start;
	align-items: start; */
}

.recDetail li li dt {/* width: 100px; */ font-size: 14px; font-weight: 700;}
.recDetail li li dd {/* width: calc(100% - 100px); */ }
.recDetail li li dd span {font-size: 12px; display: inline-block;}

.recDetail li .recTtl h2 span.yakusyoku {display: inline-block; font-size: 13px; font-weight: 500; line-height: 1.0; color: #fff; padding: 5px; background-color: #59af91; box-sizing: border-box; }



.partBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.partBtn div{ width: 50%; padding: 5px; box-sizing: border-box; }

.partBtn div a {
	display: block;
	background-color: #ffde24;
	color: #423e3c;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	transition: background-color .3s;
}
.partBtn div a:hover {
	background-color: #f7841e;
	transition: background-color .3s;
}



/* partList */
.listBox {margin: 30px auto;}

.multiple_listbox {padding: 10px; box-sizing: border-box;}

.selectionBox {
	/* border: 3px solid #f7841e; */
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	/* border-radius: 5px; */
	padding: 20px;
	box-sizing: border-box;
}

.heading {
	/* display: flex;
	align-items: start;
	justify-content: start; */
}

.pict {
	position: relative;
	/* width: 250px; */
	width: 100%;
	aspect-ratio: 4 / 3;
	/* overflow: hidden; */
	display: block;
}

.pict:before{
	position: absolute;
	top:4px;
	left:4px;
	width: 100%;
	height:calc(100% - 20px);
	border-radius: 20px;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.pict img{position: relative; z-index: 10;border-radius: 20px;}


.heading dl {
	/* width: calc(100% - 270px);
	margin-left: 20px; */
	width: 100%;
}

.heading dl dd {display: inline-block; width: calc(100% - 90px); padding: 2px 0; box-sizing: border-box; font-size: 13px;}
.heading dl dt.ttl {width: 100%; margin-bottom: 5px;}
.heading dl dt.ttl a{font-size: 20px; font-weight: 700; color: #f7841e;}
.heading dl dd.ttl { margin-bottom: 20px; display: block; width: 100%; font-size: 14px;}


.heading dl dt.txt {display: inline-block; width: 80px; position: relative; padding: 2px 0; font-size: 13px; vertical-align: top;}
.heading dl dt.txt:before {
position: absolute;
top:1px;
right:0;
content:"：";

}

.ul_jobOubo {
	/* display: flex;
	align-items: center;
	justify-content: end; */
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px dashed #ccc;
}

.ul_jobOubo li {padding: 0 2px 5px; box-sizing: border-box;}
.ul_jobOubo li a {
	color: #423e3c;
	display: block;
	border-radius: 80px;
	padding: 10px 20px;
	box-sizing: border-box;
	text-align: center;
	background-color: #ffde24;
	border:2px solid #ffde24;
	position: relative;
}
.ul_jobOubo li em {
display: inline-block;
font-weight: 700;
font-size: 14px;
}
.ul_jobOubo li.line_oubo a {
	background-color: #00B900;
	color: #FFF;
	padding: 10px 40px 10px 20px;
}
.ul_jobOubo li.tel_oubo a {
	background-color: #59af91;
	border:2px solid #59af91;
	color: #ffde24;
	padding: 10px 40px 10px 20px;

}
.ul_jobOubo li.web_oubo a {
	background-color: #59af91;
	border:2px solid #59af91;
	color: #ffde24;
	padding: 10px 40px 10px 20px;

}


.ul_jobOubo li a:hover {
background-color: #f7841e;
border:2px solid #f7841e;
}
.ul_jobOubo li.line_oubo a:hover {
background-color: #0e9c0e;
}
.ul_jobOubo li.tel_oubo a:hover {
background-color: #fff;
color: #59af91;
border:2px solid #59af91;
}
.ul_jobOubo li.web_oubo a:hover {
background-color: #fff;
color: #59af91;
border:2px solid #59af91;
}



.ul_jobOubo li a:before{
	position: absolute;
	top:0;
	bottom:0;
	right: 5px;
	margin: auto 0;
	content:"";
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: right .3s;
	background-color:  #ffde24;
	border-radius: 50%;
}

.ul_jobOubo li.line_oubo a:before,
.ul_jobOubo li.tel_oubo a:before,
.ul_jobOubo li.web_oubo a:before{
	background-image: url(images/next002.svg);
}

.ul_jobOubo li:nth-of-type(3) a:before{ display: none; }

.ul_jobOubo li a:hover:before{
	right: 2px;
	transition: right .3s;
}

.detailContent {
	background-color: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	padding: 20px;
	box-sizing: border-box;
	width: 94%;
	margin: 0 auto;
}


.schoolTtl {margin-bottom: 40px;}
.schoolTtl h2 {
	font-size: 25px;
	margin-bottom: 5px;
	line-height: 1.4;
	font-weight: 700;
	color: #f7841e;
}
.schoolTtl p {font-size: 15px; margin-bottom: 20px;}


.listdetailcommon {
	display: flex;
	align-items: stretch;
	justify-content: start;
	width: 100%;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	flex-wrap:wrap;
	margin-bottom: 10px;
}

.listdetailcommon dt {width: 100px; padding: 10px; box-sizing: border-box; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #eee;}
.listdetailcommon dd {width: calc(100% - 100px); padding: 10px; box-sizing: border-box; border-bottom: 1px solid #ccc;}

.recop-income-note {display: block; margin-top: 5px;font-size: 12px;}

.merit span {
	display: inline-block;
	font-size: 12px;
	padding: 2px;
	line-height: 1.0;
	color: #f7841e;
	border: 1px solid #f7841e;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 3px;
}


.majorArea {
	padding: 80px 0;
	box-sizing: border-box;
}
.majorArea h3{
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 15px;
}

.schoolImg {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.schoolImg figure {margin: 5px; box-sizing: border-box; border-box; position: relative; aspect-ratio: 4 / 3; }

.schoolImg figure:before{
	position: absolute;
	top:4px;
	left:4px;
	width: 100%;
	height: calc(100%  - 10px);
	border-radius: 20px;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.schoolImg figure img{position: relative; z-index: 10;border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;}

.majorArea h4{
	font-size: 15px;
	font-weight: 700;
	color: #1fad68;
	border: 2px solid #1fad68;
	margin-bottom: 15px;
	padding: 20px 20px;
	box-sizing: border-box;
	border-radius: 5px;
	position: relative;
}

.majorArea h4::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 20px;
  height: 2px;
  box-sizing: border-box;
  background-color: #1fad68;
  box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
  rotate: 50deg;
}


.schoolDetail {
	padding: 10px;
	box-sizing: border-box;
}

.schoolDetail dt{
	background-color: #eee;
	padding: 5px 10px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

.schoolDetail dd{
	padding: 5px 10px;
	box-sizing: border-box;
	margin-bottom: 5px;
text-align: justify;
text-justify: inter-ideograph;
letter-spacing: 0.08rem;
}

.schoolyoukou {padding: 0 10px 10px;}
.schoolyoukou li dt {/* width: 150px; */ font-size: 14px; font-weight: 700; letter-spacing: 0.02rem;}

.schoolyoukou li dd {/* width: calc(100% - 150px); */text-align: justify; text-justify: inter-ideograph; letter-spacing: 0.08rem;}
.schoolyoukou li dd span {font-size: 12px; display: block;}

.schooltxt {padding: 0 10px 10px;}

.btn.btnSchool {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 auto;
	flex-wrap: wrap;
}

.btn.btnSchool li {margin: 5px 10px;}
.btn.btnSchool a {
	font-size: 18px;
	font-weight: 700;
	padding: 20px;
	width: 100%;
}

.btn.btnSchool a em{
	font-size: 18px;
	font-weight: 700;
	display: inline-block;
}

.aboutBox {
	display: flex;
	flex-wrap: wrap;
	width: 94%;
	margin: 0 auto;
}
.aboutBox li {
	/* width: calc(100% / 2); */
	width: 100%;
	padding: 20px 10px;
	box-sizing: border-box;
}
.aboutBox li dl {
	padding: 30px 5px;
	box-sizing: border-box;
	background-color: #fff9b3;
	box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
	letter-spacing: 0.08rem;
}

.aboutBox li dt {
	text-align: center;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 20px;
	position: relative;
}

.aboutBox li dt span {
	position: absolute;
	top: -50px;
	left:50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	/* color: #ffde24; */
	border-radius: 50%;
	background-color: #ffde24;
	padding-top: 8px;
	font-size: 30px;
	line-height: 1.0;
	box-sizing: border-box;
}

.aboutDetail {
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.aboutDetail p{color: #1fad68; font-size: 25px; font-weight: bold; margin: 5px; padding: 5px; box-sizing: border-box; line-height: 1.1; background-color: #FFF; border-radius: 50%; width: 100px; height: 100px;}
.aboutBox span{display: inline-block; line-height: 1.1;}
.aboutDetail p span.minp {font-size: 14px;}
.aboutDetail p span.aboutjp {font-size: 20px; margin-top: 15px;}
.aboutDetail p span.abouten {margin-top: 10px;}

.aboutDetail p span.aboutjp2 {font-size: 20px; margin-top: 35px;}
.aboutDetail p span.abouten2 {margin-top: 30px;}

.aboutDetail p span.normalabout {font-size: 10px; color: #000; font-weight: 500; line-height: 1.6; margin-top: 5px;}

p span.mint {font-size: 15px;}
.aboutsyousai {margin-top: 10px; border-top: 1px dashed #ccc; padding-top: 10px;}

.aboutDetail p.women {color: #F8ABA6;}
.aboutDetail p.men {color: #81C9F8;}

.mainTtl3 {
	font-size: 20px;
	margin-bottom: 30px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
}



.fukidashi-01-03 {
  position: relative;
  width: fit-content;
  padding: 12px 16px;
  border-bottom: 2px solid #333333;
	/* background-image: url(images/bgGreen.png);
	background-repeat: repeat; */
}
.fukidashi-01-03::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
	background-image: url(images/bgGreen.png);
	background-repeat: repeat;
  rotate: 135deg;
  translate: -50%;
}
.fukidashi-01-03::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  z-index: 1;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid;
  border-color: #333333 #333333 transparent transparent;

  rotate: 135deg;
  translate: -50%;
}

.subenviroBox {
	 width: 94%;
	margin: 60px auto 0;
}


.syatakuImg {
	/* display:flex;
	justify-content: center; */
	width: 94%;
	margin: 0 auto;
}

.syatakuImg li {margin: 20px; /* width: 50%; */}
.syatakuImg li dl{
	padding: 30px;
	background-color: #FFF;
	box-sizing: border-box;
	box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
	width: 100%;
	position: relative;
}

.syatakuImg li:nth-of-type(1) dl dt {
	position: absolute;
	top: -20px;
	left: -20px;
	width: 120px;
	box-sizing: border-box;
	padding: 35px 30px;
	font-size: 20px;
	color: #59af91;
}

.syatakuImg li:nth-of-type(2) dl dt {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 120px;
	box-sizing: border-box;
	padding: 30px 30px;
	font-size: 20px;
	color: #59af91;
}

.syatakuImg li dl dd.syatakuImgM  figure{
	width: 85%;
	margin: 0 auto;
	max-width: 500px;
	position: relative;
	aspect-ratio: 500 / 585;
}

.syatakuImg li dl dd:nth-of-type(2){
display: flex;

}
.syatakuImg li dl dd.syatakuImgF figure{width: calc(100% / 3); aspect-ratio: 640 / 444; position: relative; margin: 5px; box-sizing: border-box;}

.environmentTxt {width: 94%; margin: 0 auto;}

.environmentImg2 {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	margin: 20px auto 80px;
}
.environmentImg2 li {/* width: calc(100% / 3); */ width: 50%; padding: 15px; box-sizing: border-box;text-align: center; letter-spacing: 0.08rem;}
.environmentImg2 figure {
	position: relative;
	width: 100%;
	aspect-ratio: 960 / 640;
	/* overflow: hidden; */
	margin-bottom: 10px;
	
}

.environmentImg2 figure:before{
	position: absolute;
	top: 6px;
	left: 8px;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	background-color: #fff9b3;
	content:"";
	z-index: 2;

}
.environmentImg2 figure img{position: relative; z-index: 10;border-radius: 100vh;}

.movieList {
	display: flex;
	align-items: start;
	justify-content:center;
	flex-wrap: wrap;
	width: 94%;
	margin: 0 auto;
}


.movieList li{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}


.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.movieTxtBox {
	width: 90%; 
	background-color: #fff9b3;
	padding: 30px;
	box-sizing:border-box;
	margin: 50px auto 0;
   background-color:#fff;
   box-shadow: 0 0 6px 1px #59af91, 0 0 6px 1px #59af91 inset;
   /* box-shadow: 0 0 6px 1px #fff9b3, 0 0 6px 1px #fff9b3 inset; */
   border-radius: 30px;
   line-height: 1.8;
   text-align: justify;
   text-justify: inter-ideograph;
   font-family: "Zen Maru Gothic", serif;
   /* font-family: "Yuji Syuku", serif; */
   font-weight: 500;
   font-size: 15px;
}


.pager {
	text-align: center;
	margin: 4.5rem auto 0;
}

.pager1 {
	text-align: center;
	margin: 4.5rem auto 0;
	/* max-width: 1080px; */
}
.pager1 span,
.pager span,
.pager a{
	background-color: #59af91;
	border: 2px solid #59af91;
	color: #fff;
	cursor: pointer;
	padding: 5px 8px;
	font-size: 12px;
	letter-spacing: 0.5px;
	text-decoration:none;
	border-radius: 100vh;
	transition: background-color .3s, color .3s;
}


.pager span:hover,.pager1 span:hover,.pager a:hover{
	background-color: #fff;
	color: #59af91;
	transition: background-color .3s, color .3s;
}

.pager.clearfix:after,
.pager1.clearfix:after,
.companyBox li dl.clearfix:after,
.privacyBox dl.clearfix:after,
.commonBox .blogTxt p:after,
.bloglist dl.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.pager.clearfix,
.pager1.clearfix,
.companyBox li dl.clearfix,
.privacyBox dl.clearfix,
.commonBox .blogTxt p,
.bloglist dl.clearfix { min-height: 1px; }
* html .pager.clearfix,
* html .pager1.clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* **********************************************************************************************
[7]shop
************************************************************************************************ */

/* **********************************************************************************************
[8]other
************************************************************************************************ */
/* common
----------------------------------------------- */
.topBnr li figure img,
.subSubBox figure img,
.group li figure img,
.voiceBox li figure img,
.staff figure img,
.staffList li figure img,
.recruitBox li figure img,
.environmentImg figure img,
.top005Bg figure img,
.bgmap 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: 28%;}
	input.box120 {width: 38%;}
	input.box140 {width: 100%;}
	input[type=text].keyBox {
	width: calc(100% - 24px);
	border-top: none;
	border-left: none;
	border-right: none;
	font-size: 11px;
	color: #a0a0a0;
	font-family: 'Noto Sans JP', sans-serif;
	}
	input.boxMiddle,input.box380,input.box300 {width: 100%;}
	input.boxLong,input.box1000 {width: 100%;}
	.box95,textarea.box380 {width: 100%;}
	input[type=checkbox] {width: 25px; height: 25px; background-color: #fff; }
	input[type=radio] {width: 20px; height: 20px; background-color: #fff; vertical-align:middle;}
	.vertical-align input{
	vertical-align:middle;
	}
	select {
		-webkit-appearance:none;
		-moz-appearance:none;
			text-indent: .01px;
			text-overflow: "";
		appearance:none;
		width: auto;
		height: 40px;
		padding: 5px 20px 5px 5px;
		background-color: #fff;
		background-image: url(images/select.png);
		background-repeat: no-repeat;
		background-size: 7px 10px;
		background-position: right 5px center;
		cursor: pointer;
		border: 1px solid #ddd;
		margin: 0 5px 5px 0;
	}
	.detailshopping select { width: 150px; }
	.selectV select {width: 20%;}

.subHeader li select{
	background-image: url(images/icon-world.png);
	background-size: 13px 13px;
	background-position: right 2px center;
	height: 30px;
	border: none;
}

	
	@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,input[type=password]{
	-webkit-appearance: none;
	}
	
	.red {font-size: 1.0rem; color: #F00;}

	textarea.kiyaku_text {
	height: 1000px;
	width:  100%;
	overflow: auto;
	
	}

/* font 
--------------------------------------------- */
.f10 { font-size: 1.0rem; }
.f11 { font-size: 1.1rem; }
.f12 { font-size: 1.2rem; }
.f13 { font-size: 1.3rem; }
.f14 { font-size: 1.4rem; }
.f15 { font-size: 1.5rem; }
.f16 { font-size: 1.5rem; }
.f17 { font-size: 1.5rem; }
.f18 { font-size: 1.6rem; }
.f19 { font-size: 1.6rem; }
.f20 { font-size: 1.8rem; }
.f25 { font-size: 2.0rem; }
.f30 { font-size: 2.5rem; }
.f35 { font-size: 3.0rem; }
.f40 { font-size: 3.5rem; }
.f45 { font-size: 4.0rem; }
.f50 { font-size: 4.5rem; }
.f55 { font-size: 5.0rem; }
.f60 { font-size: 5.5rem; }
.f65 { font-size: 6.0rem; }
.f70 { font-size: 6.5rem; }

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

a.txtD { text-decoration: underline; color: #000; }

.pb80 { padding: 40px 0;}
.pb80t { padding: 40px 0 0;}
.pb60 { padding: 30px 0;}
.pb30 { padding: 30px 0;}
.mb30 { margin-bottom: 30px; }
.mb10 { margin-bottom: 10px; }
.mt10 { margin-top: 10px; }

.gryTxt { color: #a0a0a0; }
.borderB { border-bottom: 1px dashed #e5e5e5; }
.borderR { border-right: 1px dashed #e5e5e5; }
.borderL { border-left: 1px dashed #e5e5e5; }

.fontB { font-weight: bold; }
.notoserifjp {font-family: 'Noto Serif JP', serif;}
.lora {font-family: 'Lora', serif;}
.notosansjp {font-family: 'Noto Sans JP', sans-serif;}
.asap {font-family: 'Asap', sans-serif;}
.ubuntu {font-family: 'Ubuntu', sans-serif;}
.yusei-magic-regular {
  font-family: "Yusei Magic", sans-serif;
  font-weight: 400;
}
.zen-maru-gothic {font-family: "Zen Maru Gothic", serif;}

.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}

.box10 {
	width: 100%;
	/* max-width: 1580px; */
	margin: 0 auto;
	padding: 80px 0.2%;
	box-sizing: border-box;
	position: relative;
}

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


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

.top004 .box10S {
	max-width: 100%;
	padding: 80px 0px 120px;
}

.box10M {
	width: 100%;
	max-width: 1110px;
	margin: 0 auto;
	padding: 80px 5%;
	box-sizing: border-box;
	position: relative;
}

.box10M2 {
	width: 100%;
	max-width: 1110px;
	margin: 0 auto;
	padding: 80px 5% 0;
	box-sizing: border-box;
	position: relative;
}

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

.bgGry {background-color: #fafafa;}

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


@media all and (min-width: 480px) {
	br.pcno { display: none;}
	br.pcno.pcno3 { display: block;}
	.txtC.txtLsp { text-align: center; }
	.txtC.txtSL { text-align: left; }


	/* #topContent {height: 100vh;}
	#sliderbox {height: 100vh;}
	#sliderbox li figure{height: 100vh;} */



.sub002Bg-004-02 {
	position: absolute;
	top: 0%;
	left: 40%;
	right: inherit;
	margin: 0 0 0 0;
	height: 70px;
	width: auto;
}

.sub002Bg-004-03 {
	position: absolute;
	top: 5%;
	left: 38%;
	right: inherit;
	margin: 0 0 0 0;
	height: 30px;
	width: auto;
}

.firstIll {height: 100vh;}
.firstIllSub div figure{height: 100vh;}

.firstVT {
	position: absolute;
	top: -15vh;
	left:8vw;
}

.firstVT img{width: 50vw;}


.kokufuku {
	display: flex;
	align-items: start;
	justify-content: center;
	flex-wrap: wrap;
	width: 460px;
	margin: 0 auto;
	max-width: 845px;
}

.kokufukuTxt {
	width: 460px;
	max-width: 845px;
}

.kokufukuImg {
	max-width:250px;
}


.top003 {padding-top: 0px;}
.ill002 {top: -120px;}


.bgmap {
	position: absolute;
	top: 20px;
	right: 0;
	width: 340px;
}

.roomBox {
	position: relative;
	/* width: calc(90% - 450px);
	left: 2.5%; */
	width: 94%;
	margin:  0 auto;
	padding: 110px 0 0;
	box-sizing: border-box;
}

.top004 .mainTtl {text-align: left; position: relative; top: -10px; left: 5%;}

.three006 {
	top: -10%;
}
.animal003 {
	top: -12.5%;
}


.voiceBox {
	max-width: 360px;
	margin: 0 auto;
}



.listdl dl {
	display: flex;
	justify-content: start;
	align-items: center;
}



.listdl dt {
	width: 200px;
	font-weight: 700;
}
.listdl dd {
	 width: calc(100% - 200px);
}

.partBtn div{ width: calc(100% / 3); }

.schoolImg figure:before{
	height: calc(100%  - 20px);
}

.aboutBox li {
	width: calc(100% / 2);
	padding: 20px 10px;
	box-sizing: border-box;
}

.environmentImg li {width: 25%;}

}

@media all and (min-width: 560px) {
.topBnr {margin-top: 40px;}
.topBnr li{width: 60%; margin: 0px 0;}
.topBnr li:nth-of-type(2) {left: 40%; top: -20px; margin: 0px 0 0px;}



.contactBox li{float: left; width: 50%; }
.contactBox li:nth-of-type(1) {border-right: 1px solid #262626; border-bottom: none;}


.message {
 	/* display: flex; */
}
.message p {width: 100%; }
.message figure {width: calc(40% - 30px); float: right; margin-left: 30px;}

.listNormal dl {
	display: flex;
	align-items: center;
}

.listNormal dt {width: 120px;}
.listNormal dd {width: calc(100% - 120px);}

.outlink {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 480px;
	margin:  0 auto;
}
.outlink li{
	width: calc(100% / 2);
	margin: 0 auto 0;
	padding: 0 5px;
}

.staff {display: flex; align-items: start;}
.staff figure {
	width: 45%;
}
.staff figure img{
aspect-ratio: 1;
height: auto;
}


.staffBox {
	width: calc(55% - 10px);
	margin-left: 10px;
}

.noImg .staffBox {
	width: 100%;
	margin-left: 0px;
}

.staffList {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.staffList li {width: 50%;}

.environmentBox {
	padding: 20px;
}

.heading {
	display: flex;
	align-items: start;
	justify-content: start;
}

.pict {
	width: 200px;
}
.pict:before{
	height:calc(100% - 10px);
}
.heading dl {
	width: calc(100% - 220px);
	margin-left: 20px;
}


.ul_jobOubo {
	display: flex;
	align-items: center;
	justify-content: end;

}

.environmentImg2 li {width: calc(100% / 3); }

.movieList li{
	width: 50%;
}


}

@media all and (min-width: 660px) {
.ill002 {
	top: -150px;
}

.ill003 {
	top: -250px;
}

.bgmap {
	position: absolute;
	top: 0px;
	right: 0;
	width: 340px;
}

.roomBox {
	position: relative;
	/* width: calc(90% - 450px);
	left: 2.5%; */
	width: 94%;
	margin:  0 auto;
	padding: 100px 0 0;
	box-sizing: border-box;
}

.top004 .mainTtl {text-align: left; position: relative; top: -10px; left: 5%;}

.news {
	display: flex;
	align-items: start;
	justify-content: start;
	flex-wrap: wrap;
	width: 85%;
	margin: 0 auto;
}

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


.news dl {
    position: relative;
    max-width: 400px;
    width: 100%;
    margin: 1.5em 0;
    padding: 3em 2em 2em;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #fff9b3;
    color: #333333;
    border-radius: 4px;
    box-sizing: border-box;
}
.news li:nth-of-type(2n) dl {
background-color: #F5F6F8/* FFCEE0 */;
top: 20px;
left: 0;
}

.news li:nth-of-type(2n+1) dl {
left: 0;
}

.top005Box {
	position: relative;
	width:75%;
	min-width: 280px;
	height: 240px;
	margin: 100px 0 0px 5%;
	transform: rotate(-3deg);
	top: -120px;
}
.three001 {
	bottom:50px;
}

.three002 {
	bottom:53px;
}
.three003 {
	top: 45%;
}

.animal004 {
	top: 4.8%;
	left: 78%;
}
.animal001 {
	top: 48%;
}


.recruitBox div{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.recruitBox li:nth-of-type(2n) div{
	flex-direction:row-reverse;
}

.recruitBox li figure {
	width: 55%;
}

.recruitBox {
	max-width: 100%;
	margin: 0 auto;
}
.recruitBox li dl {
	width: calc(45% - 30px);
	margin-left: 30px;

}

.recruitBox li:nth-of-type(2n) dl {
	margin-left: 0px;
	margin-right: 30px;

}

.recruitBox li dt {
	text-align: left;
}

.voiceBox {
	display: flex;
	align-items: center;
	max-width: 90%;
	margin: 0 auto;
}

.voiceBox li{
	width: calc(100% / 3);
	padding: 0;
	margin-bottom: 0px;
}
.voiceBox li:nth-of-type(1) {margin-top: -200px;}
.voiceBox li:nth-of-type(2) {margin-bottom: 0px; margin-top: 100px; margin-left: -30px; margin-right: 30px;}
.voiceBox li:nth-of-type(1),
.voiceBox li:nth-of-type(2),
.voiceBox li:nth-of-type(3) {padding: 0;}

.voiceBox li:nth-of-type(1) p{
bottom:-100px;
left: -10px;
}
.voiceBox li:nth-of-type(2) p{
top: -120px;
right: 10px;
}
.voiceBox li:nth-of-type(3) p{
top: -120px;
left: -10px;
}


.flowBox {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flowBox li { float: left; width: 20%; padding: 0 10px; box-sizing: border-box; position: relative;}
.flowBox li dl {background-color: #FFF; padding: 10px; box-sizing: border-box; text-align: center; border-radius: 10px;
	display: block;
}
.flowBox li dt {font-weight: 700; line-height: 1.1; height: 80px; width: 100%;}
.flowBox li dt span {font-family: 'Ubuntu', sans-serif; display: inline-block; font-weight: 400; font-size: 12px; background-color: #004ea2; color: #FFF; margin-bottom: 5px; padding: 2px 5px; border-radius: 80px;}

.flowBox li dd {width: 100%;}
.flowBox li dd img {width: 70px;}


.flowBox li:nth-of-type(2) dt span,
.flowBox li:nth-of-type(3) dt span {margin-bottom: 0px;}

.flowBox li:before {
	position: absolute;
	content:"";
	top:0;
	bottom:0;
	margin: auto 0;
	left: -10px;
	right: inherit;
	width: 10px;
	height: 10px;
	border-top: 6px solid #000;
	border-right: 6px solid #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


.syatakuImg {
	display:flex;
	justify-content: center;
}

.syatakuImg li {width: 50%;}

}

@media all and (min-width: 730px) {
	.partBtn div{ width: 20%; }
}
@media only screen and (min-device-width: 540px) and (max-device-width: 1024px) and (orientation:portrait) {
	#topContent {height: 40vh;}
	#sliderbox {height: 40vh;}
	#sliderbox li figure{height: 40vh;}

.firstIll {height: 40vh;}
.firstIllSub div figure{height: 40vh;}

.firstVT {
	position: absolute;
	top: -5vh;
	left:8vw;
}

.firstVT img{width: 50vw;}

	.gaibu a img{vertical-align: middle; /* 350px; */ display: inline-block; margin: 0 auto; width: 300px; padding: 0 5px;}


.recDetail li li dl,
.schoolyoukou li dl {
	padding:0;
	display: flex;
	justify-content: start;
	align-items: start;
}

.recDetail li li dt {width: 100px; font-size: 14px;}
.recDetail li li dd {width: calc(100% - 100px);}
.schoolyoukou li dt {width: 150px; font-size: 14px;}
.schoolyoukou li dd {width: calc(100% - 150px);}

	
}

/* アニメーション
--------------------------------------------------------- */


.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.5s;
 /* width: 128px; */
}
.animation1{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.8s;
 /* width: 128px; */
}
.animation2{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
 /* width: 128px; */
}

.animation3{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.0s;
 /* width: 128px; */
}


.keyframe0{
  animation-name: anim_po;
  position: absolute;
}
​
@keyframes anim_po {
  0% {
    top: 0px;
  }
  100% {
    top: 5px;
  }
}

.keyframe1{
  animation-name: anim_v;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 5px);
  }
}

.keyframe1-1{
  animation-name: anim_v2;
}

@keyframes anim_v2 {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 10px);
  }
}


.keyframe2{
  animation-name: anim_h;
}
​
@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}

.keyframe3{
  animation-name: anim_s;
  transform: rotate(2deg);
  animation-duration: 5s;
}


@keyframes anim_s {
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

.keyframe5{
  animation-name: anim_sc;
  transform: scale(0.95,0.95);
}

@keyframes anim_sc {
  100% {
    transform: scale(1,1);
  }
}

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}


.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);
}



@-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);
  }
}