@charset "utf-8";
/*=============================================================
Common Layout
=============================================================*/
html, body{font-feature-settings: "palt";}

/* #topicPath
---------------------------------------------------*/
#topicPath li,
#topicPath li a {
}

/* back
---------------------------------------------------*/
#gutara {
background-image: url(/kagakukokoronet/img/bg_nwGrn.png);
background-repeat:repeat;
background-size: 200px 200px;
background-color:#DAEBCB;
}
.kokoro {
background-image: url(/kagakukokoronet/img/bg_nwSBl.png);
background-repeat:repeat;
background-size: 200px 200px;
background-color:#FCEBDE;
width: 100%;
height: auto;
margin-bottom: 0;
padding-top: 0;
}

/* box
---------------------------------------------------*/
.boxRound{
padding-bottom: 50px;
position: relative;
}
.boxRoundT{
margin-top:0;
padding: 0;
position: relative;
background-color:rgba(0,0,0,0);
}

/*txt
---------------------------------------------------*/
.plt { font-feature-settings: "palt"; }
.bold { font-weight:600; }
.textBr { color: #695142; }
.spbr{ display: none; }

@media screen and (max-width:768px) {
.spbr{ display: block; }
}


/*=============================================================
MAIN
=============================================================*/
#ttlOuter {
}
#ttl {
width: 100%;
max-width: 1040px;
padding:0 20px;
box-sizing:border-box;
margin: 0 auto;
height:140px;
position:absolute;
bottom:35%;
left:50%;
transform:translate(-50%,0);
}
#ttlInner {
position:relative;
width:100%;
height:100%;
color:#fff;
line-height:1.25;
text-shadow:0px 0px 5px #000000,0px 0px 5px #000000;
}
#ttlTxt {
position:absolute;
bottom:0;
left:0;
right:0;
}
#ttlInner h1 {
font-size:60px;
}
@media all and (-ms-high-contrast: none){
#ttlInner h1 {
transform:translateY(30px);
}
}
#ttlLead {
width: 100%;
max-width: 1040px;
padding:0 20px;
box-sizing:border-box;
margin: 0 auto;
height:140px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,0);
}
#ttlLeadInner {
position:relative;
width:100%;
height:100%;
line-height:1.65;
}
#ttlLeadInner p {
font-size:18px;
position:absolute;
top:0;
left:0;
right:0;
}
@media all and (-ms-high-contrast: none){
#ttlLeadInner p { transform:translateY(30px); }
}
.boxRound{
margin-top:92px;
padding-top: 50px;
padding-bottom: 50px;
position: relative;
}

/*=============================================================
heading
=============================================================*/
h1{ font-size: 5.2rem; line-height: 1.3; margin-bottom: 0;}
h2{
font-size:34px;
font-weight:700;
text-align:center;
padding:0 0 40px;
}
h3{
padding:40px 0 30px;
font-size:24px;
font-weight:700;
text-align:center;
}
h4{
margin:2em 0 0.2em;
font-size:18px;
font-weight:600;
text-align:left;
}
.h4 {
text-decoration: underline;
text-decoration-thickness: 0.6em;
text-decoration-color: rgba(140, 197, 114, 0.5);
text-underline-offset: -0.1em;
text-decoration-skip-ink: none;
text-align: left;
 }
h5 { font-size: 18px; font-weight: 600;}
p { font-size:16px;}
.p { margin-top:0.8em;}


/*=============================================================
dl
=============================================================*/
dt,dd {
font-size: 16px;
padding: 4px;
}
.grid_about dl {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.grid_about dt {
width: 10em;
margin-bottom: 8px;
background-color: #C2DAEC; 
border-radius: 5px;
text-align: center;
}
.grid_about.br dt { background-color: #C3BBB5; }
.grid_about dd {
width: 80%;
margin-bottom: 8px;
margin-left: 8px;
/* border-bottom: 2px dotted #C2DAEC; */
border-bottom: 2px dotted #86706C;
font-feature-settings: "palt";
}
.grid_about.br dd { border-bottom: 2px dotted #2A6592;  }


/*=============================================================
Smartphones
=============================================================*/

@media all and (-ms-high-contrast: none){
#ttlInner h1 { transform:translateY(10px); }
}

@media only screen and (max-width:1024px), only screen and (max-device-width:1024px) {
#ttlOuter { position:relative; }

#ttlOuter > picture {
width: 100%;
max-width: 336px; padding-top:50px;
display: block;
margin: 0 auto 50px;
}

#ttl {
width:100%;
height:auto;
background:none;
border-radius:0px;
position:absolute;
bottom:50%;
left:0;
transform:translate(0,0);
}
#ttlInner::after { display:none; }
#ttlTxt{
padding:0px;
position:absolute;
bottom:0;
left:0;
right:0;
transform:translate(0,50%);
}
#ttlInner h1 {
font-size:26px;
transform:translateY(0px);
}
#ttlLead {
width:100%;
height:auto;
background:none;
border-radius:0px;
position:static;
transform:translate(0,0);
padding-top:10px;
}
#ttlLeadInner p {
position:static;
padding:10px;
font-size:14px;
color:#333;
letter-spacing:0;
transform:translateY(0px);
text-shadow:none;
}
.ttLeadS { font-size:16px;}
.boxRound, .boxContentsFrost{
max-width:92%;
}
.dsp-inlineBlock{ display:inline;}
.ttlLeadS{ font-size:14px;}
}

@media only screen and (max-width:599px){
.boxContents { padding:60px 10px; }
#ttlOuter {
background-image: url(/kodomo2050/img/bg_moon.png);
background-repeat:no-repeat;
background-size: 70% 70%;
background-position: left 0 top 0;
background-blend-mode:lighten;
}
#ttlOuter > picture{
padding-top:50px;
margin: auto;
max-width: 220px;
}
.h2 { font-size: 22px; }
p { text-align: justify; }
}

@media only screen and (max-width:374px){
#ttlOuter > picture {
width: 100%;
max-width: 300px; padding-top:20px;
display: block;
margin: 0 auto 20px;
}
.grid_about dt { width: 100%; }
.grid_about dd { width: 100%; }
}

/*=============================================================
スケジュール
=============================================================*/
.table-scroll table{
width: 100%;
border-collapse: collapse;
}
.table-scroll {
overflow: auto;
white-space: nowrap;
max-width: 100%;
}

td {
height: 25px;
font-size: 18px;
font-feature-settings: "palt";
}
th {
background: #f0e6cc;
width: 8em;
font-size: 18px;
}
.f1 th {
border:1px solid #0F4987;
/* background: #4176B1; */
/* background: #598EC5; */
background: #2F68A3;
color:#FFF;
padding:3px;
text-align:center;
font-size: 16px;
}
.f1 td {
border:1px solid #0F4987;
padding:3px 3px 3px 5px;
word-break: break-word;
font-size: 16px;
font-feature-settings: "palt";
}

.f2 th {
border:1px solid #8F142B;
background: #B8475C;
color:#FFF;
padding:3px;
text-align:center;
}
.f2 td {
border:1px solid #8F142B;
padding:3px 3px 3px 5px;
}

.f3 th {
border:1px solid #DF8300;
background: #FFD36E;
 color:#291313;
padding:3px;
text-align:center;
}
.f3 td {
border:1px solid #DF8300;
padding:3px 3px 3px 5px;
}
td.f23 { border:none; }
td.f23 {
border-bottom:1px solid #DF8300;
border-right:1px solid #DF8300;
width:17%;
}

@media only screen and (max-width:374px){
.table-scroll { max-width: 300px; }
.schedule { width: 400px;}
}

p+h3,p+p,p+.newsPh+p{margin: 2em 0 0;}

/* newsPhoto
-------------------------------------------------------------*/
.newsPh {
float: right;
clear: both;
max-width: 300px;
}
.newsPf img { width: auto;}
.newsPh figure { margin-left:1em; margin-bottom: 1em; margin-top: 0;}
figcaption {
font-size:12px;
text-align: right;
}

@media only screen and (max-width:767px), only screen and (max-device-width:767px){

/* newsPhoto
-------------------------------------------------------------*/
.newsPh {
float:none;
display: block;
margin: 1.5em 0;
max-width: 100%;
}
.newsPh img { width: 100%;}
.newsPh figure { margin-left:0; margin-bottom: 1em;}
figcaption {
font-size:12px;
text-align: center;
margin-bottom: 1em;
}
}

/* msgPhoto
-------------------------------------------------------------*/
.msgPh {
float: left;
clear: both;
max-width: 180px;
}
.msgPh img { width: 100%; border-radius:50% 50%;}
.msgPh figure { margin-right:1em; margin-bottom: 1em; margin-top: 0;}
figcaption {
font-size:12px;
text-align: right;
}

@media only screen and (max-width:767px), only screen and (max-device-width:767px){
/* msgPhoto
-------------------------------------------------------------*/
.msgPh {
float:none;
display: block;
margin: 1em auto 0;
max-width: 100%;
text-align:center;
}
.msgPh img { width: 50%; border-radius:50% 50%;}
.msgPh figure { margin-right:0; margin-bottom: 1em;}
figcaption {
font-size:12px;
text-align: center;
margin-bottom: 1em;
}
}

@media only screen and (max-width:374px){
.msgPh { margin: 0 auto 0; }
.msgPh figure { margin-right:0; margin-bottom: 0.5em;}
h4{ line-height:1.4;}
}
.ul li { font-size:16px;}


.news {margin:0; padding:0;}
.news ul {
  display: flex;
  flex-wrap: wrap;
}

.news_item {
  width: calc(33.33% - 20px * 2 / 3);
  margin-right: 10px;
  margin-top: 30px;
  background-color: #fff;
  padding: 0;
border-radius:15px;
}

.news_item:nth-child(3n) {
  margin-right: 0;
}

@media (max-width: 767px) {
  .news_item {
    width: 100%;
    margin-right: 0;
  }
  .news_item:nth-child(3n) {
    margin-right: 0;
  }
}

.news_item img {
  width: 100%;
  height: auto;
  border:solid #fff ;
  border-width: 10px 10px 0 10px ;
}
.news_item p {
  font-size: 18px;
  font-weight: bold;
  padding: 16px 10px;
line-height:1.3;
}
.news_item  a{
text-decoration:none;
}


.link li{ line-height:2;}


.blln-new {
    position: relative;
  vertical-align:top;
border:3px solid #E74E6D;
  border-radius: 5px;
padding:6px;
}
.blln-new span.blln-new-ttl{
  border-color: #E74E6D transparent transparent;
  background-color: #E74E6D;
}
.blln-new span.blln-new-ttl{
  top:-26px;
  left:-10px;
  border:none;
  position: absolute;
  border-radius: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
line-height:normal;
  text-align: center;
  width: 16em;
  height: 2em;
  z-index: 1000;
  display:block;
  padding:0;
}