
@charset "utf-8";
/*=============================================================
Common Layout
=============================================================*/
/* animation
-------------------------------------------------------------*/
.setScMc{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease 0.2s;
}
.setScMc.enter{
opacity:1;
transform:translateY(0);
}
/*=============================================================
MAIN
=============================================================*/
#main{
position:relative;
min-width:1000px;
}
#main img{
width:100%;
}
#mainCatch{
position:absolute;
top:50%;
left:0;
transform:translateY(-75%);
width:100%;
}
#mainCatchInner{
width:100%;
max-width:1040px;
margin:0 auto;
padding:0 20px;
box-sizing:border-box;
}
#mainCatchInner p{
font-size:36px;
line-height:1.45;
font-weight:600;
text-shadow:0px 0px 5px #ffffff,0px 0px 5px #ffffff;
}
/*=============================================================
News
=============================================================*/
#newsArea{
position:relative;
min-width:1000px;
}
#newsAreaInner{
position:absolute;
top:1px;
left:0;
transform:translateY(-100%);
width:100%;
overflow:hidden;
}
/* #newsBox
---------------------------------------------------*/
#newsBox{
width:100%;
max-width:1040px;
margin:0 auto;
box-sizing:border-box;
position:relative;
}
#newsBoxInner{
display:inline-block;
padding:20px 20px 0 20px;
background-color:#FFF;
position:relative;
}
#newsBox::after{
content:"";
display:block;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-9999px;
right:100%;
bottom:0;
}
#newsBoxInner h2{
font-size:18px;
line-height:1.0;
}
#newsBoxInner p{
position:absolute;
top:24px;
right:20px;
line-height:1.0;
}
#newsBoxInner p a{
display:inline-block;
font-size:12px;
padding-left:20px;
position:relative;
text-decoration:none;
}
#newsBoxInner p a::before{
content: "";
display: block;
width: 14px;
height: 14px;
background: #999999 url(/shared/img/arw_white.png) no-repeat center center;
background-size:8px 8px;
border-radius:100px;
position: absolute;
top: 0;
left: 0;
}

.is_new{
padding:1px 2px;
background-color:#D43100;
color:#fff;
font-size:12px;
font-weight:bold;
margin-left:3px;
border-radius:5px;
}


@media all and (-ms-high-contrast: none){
#newsBoxInner p a::before{
top: -5px;
}
}
#newsBoxInner li{
padding:5px 0 15px;
}
#newsBoxInner li a{
display:inline-block;
font-size:14px;
padding-left:12px;
position:relative;
line-height:1.35;
text-decoration:none;
}
#newsBoxInner li a::before{
content:"";
width:5px;
height:5px;
border-bottom:1px solid #666;
border-right:1px solid #666;
position:absolute;
left:0;
top:7px;
transform:rotate(-45deg);
}
@media all and (-ms-high-contrast: none){
#newsBoxInner li a::before{
top:2px;
}
}
/* #pickUpArea
---------------------------------------------------*/
#newsArea #pickUpArea{
width:100%;
/* max-width:1040px; */
max-width:1440px;
margin:0 auto;
padding:100px 20px;
box-sizing:border-box;
}

#newsArea #pickUpAreaInner ul{
display:flex;
flex-wrap: nowrap;
}
/* #newsArea #pickUpAreaInner ul li:not(:nth-child(3n+1)){
margin-left:30px; */
#newsArea #pickUpAreaInner ul li{
margin-left:30px;
}
#newsArea #pickUpAreaInner ul li{
flex-basis:calc((100% - 20px) / 3);
}
#newsArea #pickUpAreaInner ul li a{
display:block;
text-decoration:none;
}
#newsArea #pickUpAreaInner ul li a img{
width:100%;
border: 1px #e6ecf2 solid;
}
#newsArea #pickUpAreaInner ul li figcaption{
padding-top:10px;
font-size:16px;
letter-spacing:0;
line-height:1.3;
}
#newsArea #pickUpAreaInner ul li a.bdNone img{
border: 0;
}
@media all and (-ms-high-contrast: none){
#newsArea #pickUpAreaInner ul li figcaption{
padding-top:15px;
}
}

/* #wsArea
---------------------------------------------------*/
#wsArea{
  background:#FFFCF4;
}
#wsAreaInner{
  width:100%;
  /* max-width:1040px; */
  max-width:1440px;
  margin:0 auto;
  padding:100px 20px;
  box-sizing:border-box;
  }

#wsArea h2{
  font-size:18px;
  line-height:1.0;
}
#wsArea #wsAreaInner ul{
}
#wsArea #wsAreaInner ul li{
  font-weight: normal;
  font-size: 16px;
  margin-bottom: 16px;
  }
#wsArea #wsAreaInner ul li span{
  background-color: #992738;
  border-radius: 5px;
  color: #fff;
  font-size: 85%;
  margin-right: 16px;
  padding: 3px;
  width: 7em;
  text-align: center;
  display: inline-block;
}
#wsArea #wsAreaInner ul li span.disabled{
  background-color: #7B7B7B;
  border-radius: 5px;
  color: #fff;
  font-size: 85%;
  margin-right: 16px;
  padding: 3px;
  width: 7em;
  text-align: center;
  display: inline-block;
}

#wsArea #wsAreaInner ul li a{
    text-decoration:none;
  }

/*=============================================================
category
=============================================================*/
#categoryArea{
}
#categoryArea .clmArea{
padding:100px 0;
}
#categoryArea .clmArea.bgBage{
background:#f2eee2;
}
#categoryArea .clmAreaInner{
width:100%;
max-width:1040px;
margin:0 auto;
padding:0 20px;
box-sizing:border-box;
}
.boxClm{
width:100%;
display:flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.boxClm>div.boxPhoto{
width:34%;
}
.boxClm>div.boxPhoto img{
width:100%;
}
.clmArea.bgWh .boxClm>div.boxPhoto{
order: 2;
}
.boxClm>div.boxDisc{
width:calc(66% - 30px);
}
.boxClm>div.boxDisc h2{
font-size:36px;
}


#schoolArea .boxClm>div.boxDisc h2{
color:#003F7E;
}
#teacherArea .boxClm>div.boxDisc h2{
color:#6A7E12;
/*  color:#98a00e;*/
}
#childrenArea .boxClm>div.boxDisc h2{
color:#146A41;
/*  color:#58a20e;*/
}
#guardianArea .boxClm>div.boxDisc h2{
color:#D66B00;
/*  color:#f07e0d; */
}


.boxClm>div.boxDisc h2 span.small{
font-size:26px;
}
.boxClm>div.boxDisc .box2Clm{
display:flex;
flex-wrap: nowrap;
}
.boxClm>div.boxDisc .box2Clm .box{
flex-basis:calc(50% - 15px);
}
.boxClm>div.boxDisc .box2Clm .box:nth-child(even){
margin-left:30px;
}
.boxClm>div.boxDisc h3{
margin-top:30px;
}
.boxClm>div.boxDisc h3 a{
font-size: 22px;
display: inline-block;
padding: 0 0 0 35px;
position: relative;
line-height:1.3;
text-decoration:none;
opacity:1.0;
}
.boxClm>div.boxDisc h3 a:hover{
opacity:0.7;
color:#0048DC;
}
.boxClm>div.boxDisc h3 a::before{
content:"";
width:26px;
height:26px;
box-sizing:border-box;
border:3px solid #666666;
border-radius:100px;
background: url(/shared/img/arw_gray.png) no-repeat center center;
background-size:12px 12px;
position:absolute;
top:2px;
left:0;
}
@media all and (-ms-high-contrast: none){
.boxClm>div.boxDisc h3 a::before{
top:-4px;
}
}
.boxClm>div.boxDisc p{
padding-top:10px;
font-size:16px;
line-height:1.75;
}
/*=============================================================
#kagakukokoroArea
=============================================================*/
#kagakukokoroArea ul li{
font-size:16px;
text-align:center;
margin-bottom:1.5em;
}
/*=============================================================
#presidentArea
=============================================================*/
#presidentArea{
background-color:#afa49d;
line-height:1.45;
position:relative;
color:#412E22;
}
#presidentArea figure img{
max-width:360px;
}
#presidentArea a{
text-decoration:none;
color:#412E22;
}
#presidentArea #presidentBox{
position:absolute;
top:50%;
left:50%;
transform:translate(-270px,-50%);
width:100%;
max-width:1040px;
}
#presidentArea #presidentBox h2{
font-size:36px;
}
#presidentArea #presidentBox h2 span{
font-size:26px;
}

#presidentArea .boxClm>div.boxDisc h3 a:hover{
color: #001eb9;
}
#presidentArea .boxClm>div.boxDisc h3 a::before{
border:3px solid #666666;
background: url(/shared/img/arw_gray.png) no-repeat center center;
background-size:12px 12px;
position:absolute;
top:2px;
left:0;
}
/*=============================================================
#aboutArea
=============================================================*/
#aboutArea{
padding:100px 0;
}
#aboutAreaInner{
width:100%;
max-width:1040px;
margin:0 auto;
padding:0 20px;
box-sizing:border-box;
text-align:center;
}
#aboutArea h2{
font-size:36px;
line-height:1.0;
}
#aboutArea ul{
display:inline-block;
padding-top:20px;
font-size:0;
}
#aboutArea ul li{
display:inline-block;
width:170px;
padding-top:30px;
}
#aboutArea ul li a{
display:block;
text-decoration:none;
}
#aboutArea ul li a span.boxIcn{
display:block;
width:100px;
margin:0 auto 15px;
border-radius:100px;
overflow:hidden;
}
#aboutArea ul li a span.boxIcn img{
width:100%;
}
#aboutArea ul li a figcaption{
font-size:20px;
font-weight:600;
}
/*=============================================================
Donation
=============================================================*/
#donationArea{
padding:60px 0;
background-color:#f5f5f5;
line-height:1.65;
}
#donationAreaInner{
width:100%;
max-width:1040px;
margin:0 auto;
padding:0 20px;
box-sizing:border-box;
}
#donationAreaInner h2{
font-size:20px;
padding-bottom:10px;
}
#donationAreaInner ul{
padding-top:10px;
font-size:0;
}
#donationAreaInner ul li{
display:inline-block;
font-size:14px;
padding:0 1.5em 0 0;
}
#donationAreaInner ul li a{
display:inline-block;
padding:0 0 0 1em;
position:relative;
line-height:1.0;
text-decoration:none;
}
#donationAreaInner ul li a:hover{
text-decoration:underline;
}
#donationAreaInner ul li a::before{
content:"";
width:5px;
height:5px;
border-bottom:1px solid #666;
border-right:1px solid #666;
position:absolute;
left:0;
top:4px;
transform:rotate(-45deg);
}
@media all and (-ms-high-contrast: none){
#donationAreaInner ul li a::before{
top:0px;
}
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px), only screen and (max-device-width:767px){
/*=============================================================
MAIN
=============================================================*/
#main{
min-width:320px;
}
#mainCatch{
transform:translateY(-50%);
}
#mainCatchInner p{
font-size:16px;
}
/*=============================================================
News
=============================================================*/
#newsArea{
position:relative;
min-width:320px;
}
#newsAreaInner{
position:static;
transform:translateY(0);
}


/* #newsBox
---------------------------------------------------*/
#newsBox{
min-width:320px;
}
#newsBoxInner{
display:block;
}
#newsBox::after{
display:none;
}
#newsBoxInner h2{
font-size:16px;
}
#newsBoxInner p{
top:21px;
}
#newsBoxInner li{
line-height:1.35;
}
#newsBoxInner li a{
font-size:13px;
}
#newsBoxInner li a::before{
top:6px;
}
/* #pickUpArea
---------------------------------------------------*/
#newsArea #pickUpArea{
padding:30px 20px 60px;
}

#newsArea #pickUpAreaInner ul{
display:block;
flex-wrap: nowrap;
}
#newsArea #pickUpAreaInner ul li:not(:nth-child(3n+1)){
margin-left:0px;
}
#newsArea #pickUpAreaInner ul li{
padding-top:30px;
margin-left:0;
width:100%;
}
#newsArea #pickUpAreaInner ul li figcaption{
font-size:14px;
}
/*=============================================================
category
=============================================================*/
#categoryArea .clmArea{
padding:60px 0;
}
.boxClm{
display:block;
}
.boxClm>div.boxPhoto{
width:100%;
}
.boxClm>div.boxDisc{
width:100%;
}
.boxClm>div.boxDisc h2{
margin-top:20px;
font-size:22px;
}
.boxClm>div.boxDisc h2 span.small{
font-size:18px;
}
.boxClm>div.boxDisc .box2Clm{
display:block;
}
.boxClm>div.boxDisc .box2Clm .box{
width:100%;
}
.boxClm>div.boxDisc .box2Clm .box:nth-child(even){
margin-left:0px;
}
.boxClm>div.boxDisc h3{
margin-top:20px;
}
.boxClm>div.boxDisc h3 a{
font-size: 18px;
padding: 0 0 0 25px;
}
.boxClm>div.boxDisc h3 a::before{
width:22px;
height:22px;
top:2px;
}
.boxClm>div.boxDisc p{
font-size:14px;
}
/*=============================================================
#kagakukokoroArea
=============================================================*/
#kagakukokoroArea .h2{font-size: 22px; text-align:left;}
#kagakukokoroArea ul li{
font-size:14px;
text-align:left;
margin-bottom:1.5em;
}

/*=============================================================
#presidentArea
=============================================================*/
#presidentArea{
/* background-color:#afa49d; */
/* background-color:#978479; */
background-color: #E8DBD2;
line-height:1.45;
position:relative;
}

#presidentArea figure img{
position: relative;
top:auto;
left:26%;
}

#presidentArea #presidentBox{
position: relative;
top:auto;
left:0;
right:0;
bottom:0;
padding:10px 20px;
transform:translate(0,0);
text-align:left;
/* background: rgba(65,46,34,0.3); */

}
#presidentArea #presidentBoxInner{
width:100%;
}

#presidentArea #presidentBox h2{
display:block;
font-size:22px;
white-space:nowrap;
}
#presidentArea #presidentBox h2 span{
font-size:18px;
}

#presidentArea #presidentBox p{
width:100%;
display:block;
width:auto;
font-size:14px;
padding-right:30px;
}
/*=============================================================
#aboutArea
=============================================================*/
#aboutArea{
padding:60px 0;
}
#aboutAreaInner{
padding:0;
}
#aboutArea h2{
font-size:22px;
}
#aboutArea ul{
padding-top:0px;
}
#aboutArea ul li{
width:30%;
max-width:150px;
}
#aboutArea ul li a span.boxIcn{
width:80px;
}
#aboutArea ul li a figcaption{
font-size:15px;
}
/*=============================================================
Donation
=============================================================*/
#donationAreaInner h2{
font-size:18px;
}
#donationAreaInner p{
font-size:14px;
}
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Smartphones (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:540px){

}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Smartphones small (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:374px){
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Print
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media print{
}
.h3{
font-size: 22px;
display: inline-block;
padding: 0;
position: relative;
line-height:1.3;
text-decoration:none;
opacity:1.0;
}

}







