/*
Theme Name: Kids Education Child
Theme URI: https://themepalace.com/downloads/kids-education/
Template: kids-education
Author: Theme Palace
Author URI: https://themepalace.com/
Description: Kids Education is an educational theme developed by Theme Palace. Kids Education is a multipurpose Wordpress Educational Theme suitable for Kindergartens, daycare, Primary Schools, Secondary Schools and High Schools. Kids Education Theme is also suitable for any educational activities and, with the colorful design, it is ideal for toys stores, activities related to children too. Kids Education can be adapted to any kind of industry – not only educational but also babysitting and summer camps. All pages are optimized in order to perform, in a simple and fast way. It comes with a wide variety of options so you can modify Styling, Featured Slider, Menus, Breadcrumb, Widgets and much more, directly from theme customizer. This theme is Woocommerce compatible and translation ready.
Tags: translation-ready,custom-background,theme-options,custom-menu,post-formats,threaded-comments,left-sidebar,right-sidebar,two-columns,custom-header,grid-layout,custom-logo,featured-image-header,featured-images,footer-widgets,education,e-commerce
Version: 1.2.7.1723081815
Updated: 2024-08-08 10:50:15

*/


@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Zen+Maru+Gothic:wght@400;700&display=swap');

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?3drtvu');
  src:  url('fonts/icomoon.eot?3drtvu#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?3drtvu') format('truetype'),
    url('fonts/icomoon.woff?3drtvu') format('woff'),
    url('fonts/icomoon.svg?3drtvu#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}*/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.is-sticky .main-navigation > ul > li {
  padding: 45px 15px 0;
}
.main-navigation ul li a{font-weight: 700;}
.site-header ul > li[class^="icon-"]:before, .site-header ul > li[class*=" icon-"]:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-size:55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header ul > li.icon-calendar:before {
  content: "\e900";
}
.site-header ul > li.icon-chick:before {
  content: "\e901";
}
.site-header ul > li.icon-clock:before {
  content: "\e902";
}
.site-header ul > li.icon-flag:before {
  content: "\e903";
}
.site-header ul > li.icon-hat:before {
  content: "\e904";
}
.site-header ul > li.icon-leaf:before {
  content: "\e905";
}
.site-header ul > li.icon-nursery:before {
  content: "\e906";
}
.site-header ul > li.icon-tulip:before {
  content: "\e907";
}
.site-header ul > li.email:before {
	font-family: "dashicons"!important;
	font-size: 36.67px;
	content: "\f466";
}

.main-navigation {margin-top:3em;}
.site-branding {top: 10px;}

.site-header .site-title,
.site-header .site-title a {
  line-height: 1.2;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.site-header .site-title {
    font-size: 15px;
    text-align: center;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
    text-transform: capitalize;
}

.site-header .site-title a {color: #66993E;}
.site-header .site-title:before, 
.site-header .site-title:after {background-color: #29abe2;}

.site-header.is-sticky .site-title a {
  font-size: 18px;
}


.site-header .site-title::before, .site-header .site-title::after {
  content: none;
  width: 18px;
  background-color: #66993E;
  height: 2px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

/*----MOBILE MENU----------*/
.sidr .sidr-class-site-logo,
.sidr p.sidr-class-site-description{display:none;}
.sidr h1.sidr-class-site-title a{font-size:18px;text-decoration:none;}
.sidr ul.sidr-class-menu{margin:0;border:0;}

/*--------------------------------------------------------------
# Layouts and titles
--------------------------------------------------------------*/
.site-content,
.home.blog .site-content {
	margin-top: 0;
}

/*--------------------------------------------------------------
# Main slider
--------------------------------------------------------------*/
.main-slider-contents {
    width: 100%;
    left: 0;
    text-align:center;
}
.main-slider-contents .title {
	text-shadow: 1px 1px 5px #29abe2,
	-1px 1px 5px #29abe2,
	1px -1px 5px #29abe2,
	-1px -1px 5px #29abe2;
}

/*--------------------------------------------------------------
# 保育目標
--------------------------------------------------------------*/
#goal {
	background-image:url('../kids-education/assets/uploads/white-bg.png');
	margin-top: -65px;
}
#goal.background-image-properties {background-size: contain;}

/*--------------------------------------------------------------
# お知らせ・ブログ
--------------------------------------------------------------*/
#info-blog .wp-block-column{border-radius: 50px;color:#FFF;display: flex;flex-direction: column;}
/*#info-blog .wp-block-column.info {background-color: #70CEE5;}*/
#info-blog .wp-block-column.info {background-color: #b94047;}
#info-blog .wp-block-column.blog {background-color: #6CC28F;}
#info-blog .wp-block-column h2.wp-block-heading{
display: flex;
align-items: center;/* 縦位置の調整 */
justify-content: center;/* 横位置の調整 */
}
#info-blog .wp-block-column h2.wp-block-heading::before,
#info-blog .wp-block-column h2.wp-block-heading::after {
content: '';
flex-grow: 0.3;/* 少数にする */
height: 16px;
background-image:
		repeating-linear-gradient(45deg, #FFF 0px, #FFF 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%),
		repeating-linear-gradient(135deg, #FFF 0px, #FFF 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
background-size: 8px 8px;
}

#info-blog .wp-block-column h2.wp-block-heading::before {margin-right: 20px;}
#info-blog .wp-block-column h2.wp-block-heading::after {margin-left: 20px;}

#info-blog .wp-block-column ul.wp-block-post-template{margin-right:3em;}

/*#info-blog .wp-block-column.info time::before{content: "";padding:0;}*/
#info-blog .wp-block-column.info time::before{content: "\f04b";}
#info-blog .wp-block-column time:hover,
#info-blog .wp-block-column a{color:#FFF;}
#info-blog .wp-block-column a:hover{color: #FCFF00;}
#info-blog .wp-block-column img{
border: 5px solid #fff;
border-radius: 30px;
}
#info-blog .wp-block-column .wp-block-buttons{margin-top:auto!important;}
#info-blog .wp-block-column .wp-block-buttons a:hover{color:#FFF;text-decoration:none;}
#info-blog .wp-block-column .wp-block-buttons .wp-block-button .wp-block-button__link:hover{background-color:#FF9C00;}

.single-information nav.navigation.post-navigation {margin-top: 50px;}

/*--------------------------------------------------------------
# だいじなお知らせ
--------------------------------------------------------------*/
#daiji .wp-block-column{border-radius: 50px;color:#FFF;display: flex;flex-direction: column;}
#daiji .wp-block-column.daiji {background-color: #FE6F5E;}
#daiji .wp-block-column h2.wp-block-heading{
display: flex;
align-items: center;/* 縦位置の調整 */
justify-content: center;/* 横位置の調整 */
}
#daiji .wp-block-column h2.wp-block-heading::before,
#daiji .wp-block-column h2.wp-block-heading::after {
content: '';
flex-grow: 0.3;/* 少数にする */
height: 16px;
background-image:
		repeating-linear-gradient(45deg, #FFF 0px, #FFF 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%),
		repeating-linear-gradient(135deg, #FFF 0px, #FFF 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
background-size: 8px 8px;
}

#daiji .wp-block-column h2.wp-block-heading::before {margin-right: 20px;}
#daiji .wp-block-column h2.wp-block-heading::after {margin-left: 20px;}

#daiji .wp-block-column ul.wp-block-post-template{margin-right:3em;}
#daiji .wp-block-post-date{text-align: right;}

/*#daiji .wp-block-column.daiji time::before{content: "";padding:0;}*/
#daiji .wp-block-column.daiji time::before{content: "\f04b";}
#daiji .wp-block-column time:hover,
#daiji .wp-block-column a{color:#FFF;}
#daiji .wp-block-column a:hover{color: #FCFF00;}
#daiji .wp-block-column img{
border: 5px solid #fff;
border-radius: 30px;
}
#daiji .wp-block-column .wp-block-buttons{margin-top:auto!important;}
#daiji .wp-block-column .wp-block-buttons a:hover{color:#FFF;text-decoration:none;}
#daiji .wp-block-column .wp-block-buttons .wp-block-button .wp-block-button__link:hover{background-color:#FF9C00;}
/*.single-information nav.navigation.post-navigation {margin-top: 50px;}*/

/*--------------------------------------------------------------
# Page
--------------------------------------------------------------*/
article .page-wrap .entry-content {
background-color:transparent;
color:#404040;
}
article .page-wrap .entry-content h2.wp-block-heading {
    color:#EE4C16;
    position: relative;
    padding: 0.8rem 0;
    border-bottom: 1px solid #ddd;
}

article .page-wrap .entry-content h2.wp-block-heading:before {
    position: absolute;
    content: '';
    width: 15%;
    left: 0;
    bottom: -1px;
    border-bottom: 5px solid #EE4C16;
}

/* 園の一日 */
.schedule {position: relative;}
.schedule::before {
    position: absolute;
    top: 6.1em;
    left: 6.4em;
    width: 6px;
    height: 95%;
    background-color: #deeef7;
    content: "";
}

.schedule .schedule_cat {display: flex;margin-left: 80px;}

.schedule ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.schedule li {
    position: relative;
    display: flex;
    align-items: start;
    width: 100%;
}
.schedule li + li {margin-top: 2em;}

.schedule_time {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 5.5em;
    height: 2em;
    border-radius: 6px;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
}
.schedule_time::before {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateX(50%) translateY(-50%) rotate(45deg);
    width: 0.5em;
    height: 0.5em;
    background-color: #3388dd;
    content: "";
}
.schedule_time::after {
    position: absolute;
    top: 50%;
    left: 6em;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #3388dd;
    content: "";
}

.schedule_content_title {font-weight: bold; font-size:1.4rem;margin-top:0;}

.schedule_content {
    margin: 0px 0px 0px 3em;
    width: calc(100% - 10em);
}

.schedule_content h2{
    position: relative;
    padding: 0.5rem;
    border-radius: 5px;
    outline: 2px solid #404040;
    outline-offset: 5px;
    background: repeating-linear-gradient(-45deg, #b2d5de 0 3px, #fff 3px 6px);
    color: #fff;
    text-shadow: -1px -1px 0 #404040, -1px 1px 0 #404040, 1px -1px 0 #404040, 3px 3px 0 #404040;
    font-size: 1.6rem;
    text-align: center;
}
.schedule_content h2::before {
    position: absolute;
    bottom: -25px;
    left: calc(50% - 6px);
    transform: translateX(-50% + 6px);
    height: 20px;
    width: 2px;
    background-color: #404040;
    content: "";
}

/* 年間行事 */
.calendar-table th,
.calendar-table td {
  border-top: 2px solid #c6b8a7;
  border-bottom: 2px solid #c6b8a7;
  padding: 8px 12px;
}
.calendar-table th {
  white-space: nowrap;
  padding: 16px 12px;
}
.calendar-table th h2 {
    font-size: 26px;
    font-weight: bold;
}
.calendar-table th h2 span {
    padding: 0 0.7rem;
    border-radius: 50%;
    background-color: #29abe2;
    background-image: linear-gradient(135deg, #209cff 0%, #68e0cf 80%, #cffd9d 100%);
    color: white;
    font-size: 36px;
    display:inline-block;
    width: 55px;
    letter-spacing: -0.15em;
    text-indent: -0.3em;
}
.calendar-table td div{
	display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.calendar-table td ul{margin-bottom:0;}

/* 入園案内 */
.nintei h3{
    padding: 1rem;
    border: 15px solid;
    color: #EE4C16;
    font-size: 26px;
    font-weight: bold;
    outline: 2px dashed white;
    outline-offset: -8px;
    text-align: center;
}

.flow {
  border: 3px solid #29abe2;
  border-radius:20px;
  padding: 0;
}
.flow > li {
  padding: 30px;
  list-style-type: none;
}
.flow > li:not(:last-child) {
  border-bottom: 3px solid #29abe2;
  position: relative;
}
.flow > li:not(:last-child)::before,
.flow > li:not(:last-child)::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 15%;
  transform: translateX(-50%);
}
.flow > li:not(:last-child)::before {
  border-width: 22px;
  border-top-color: #29abe2;
}
.flow > li:not(:last-child)::after {
  border-width: 18px;
  border-top-color: #fff;
}
.flow > li dl {
  margin: 0;
  display: flex;
  align-items: center;
}
.flow > li dl dt {
  font-size: 1.5rem;
  font-weight: 600;
  color: #29abe2;
  flex-basis: 20%;
  margin-right: 1vw;
  text-align: center;
}
.flow > li dl dt .icon {
  font-size: 80%;
  color: #fff;
    background-color: #29abe2;
    background-image: linear-gradient(135deg, #209cff 0%, #68e0cf 80%, #cffd9d 100%);
  padding: 5px 10px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
}
.flow > li dl dd{margin-left: 0;}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {background-image: url("img/footer-bg.png");}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media screen and (min-width: 1290px) {
}
@media screen and (min-width: 992px) {
	.site-footer .spacer{margin-top: 250px;}
}
@media screen and (min-width: 767px) {
	.error-404.not-found .page-content p {width: fit-content;}

	.site-footer .spacer{margin-top: 150px;}
}
@media screen and (max-width: 1290px) {
	#masthead .main-navigation {font-size:0.8rem;}
	.main-navigation ul{display:flex;justify-content: space-between;}
	.is-sticky .main-navigation > ul > li {padding: 45px 7px 0;}
}
@media screen and (max-width: 1200px) {
	.site-footer .container {padding-top: 0;}
}
@media screen and (max-width: 992px) {
	#masthead {display: block;}
	#masthead.fixed-header.is-sticky {position: absolute;}
	#masthead .site-branding {width:auto;padding:0;background-image:none;display:flex;top:5px;}
	#masthead .site-logo{width:50px;}
	#masthead .main-navigation,
	#masthead #site-header .site-title:before, 
	#masthead #site-header .site-title:after {display:none;}
	#masthead.site-header.is-sticky .site-title{margin-top:1em;margin-left:0.5em;}
	#masthead.site-header.is-sticky .site-title a{font-size:15px;}

	.banner-wrapper {height: fit-content;}
	
	.br-class {display: none; } /* brタグを非表示にして改行をなくす */
	#daiji .wp-block-post-date{text-align: left;}
}
@media screen and (max-width: 767px) {
	/* 園の一日 */
	.schedule .schedule_cat {display: block;}
	.schedule_content {width:calc(100% - 4em);margin-left:4em;}
	.schedule_time {width: 5em;}
	
	/* 年間行事 */
	.calendar-table th{width:40%!important;}
	.calendar-table td div{display:block;}
	
	/* 入園案内 */
	.flow > li dl {align-items: stretch;flex-direction: column;}

	.error-404.not-found {margin-top:5em;}
	body.error404 .site-footer .container{padding:6em 0;}

	.cloud-background.page-section{padding-top:50px;}
	.site-footer .spacer{margin-top: 0;}
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
body.error404 {background-image: url("img/error404-bg.jpg");}
.error-404.not-found {max-width: fit-content;}


.entry-label {
	display: inline-block;
	border-radius: 10px;
	padding: 2px 8px;
	color: #fff;
}

/* ヘッダー背景・タイトル */
#header-image {
  background-color: #FFFDF1 !important;
}
#header-image .entry-title {
  color: #5A5248 !important;
  font-weight: bold !important;
}

body{
  background-color: #FFFDF1 !important;
}

/* サイト全体の背景（雲の画像が含まれるエリア）を塗りつぶす */
#content, .site-main, .page-section {
    background-image: none !important;
    background-color: #FFFDF1 !important;
}