@charset "UTF-8";
/*
Theme Name: Now And Then
Theme URI: https://lookat.co.jp
Author: Look At Inc.
Author URI: https://lookat.co.jp
Description: There will be an answer, let it be.
Version: 1.0.0
License: GNU General Public License v2 or later
*/

@import url("style-root.css");
@import url("https://lookat8.xsrv.jp/hidekky/wp-content/themes/nowandthen/style-nwmaster.css"); 

body, h1, h2, h3, h4, h5, h6 {
	 /*font-family: "Kosugi Maru", serif; */
    font-family: "Helvetica Neue", "Helvetica", "Kosugi Maru", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 400;
	font-style: normal;
}
body {
background-image:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(images/bg-sakura.png);background-size: contain;background-repeat: repeat-y;}
.site-title span {margin-left:.5rem;font-size:1.75rem;color:#F50057}
.footer-top {
	height: 180px;
	background: url(images/footer-top-spring.png) center bottom repeat-x ;
}
footer{
	background-color: #f2a6b8;
}
#header {box-shadow: none;}

.callout {background: var(--callout-color);}

#frontpage h2:after {background: var(--main-color);} 
#frontpage h3 {margin-top: 2rem;font-size: 1.125rem;}
h3 {text-align: center;font-weight:700;color:var(--main-color);}
h4 {font-weight:700;color:var(--sub-color-dark);border-color:var(--sub-color);}
h5 {font-weight:600;color:var(--main-color-dark);}
h6 {font-weight:600;color:var(--extra-color-dark);}

/* .title-area {background-size: cover;background-position: center top;} */
.title-area {background-size: cover;background-position: left top;}
.title-area .title-text h2 {text-align: center;}

@media (min-width: 641px) {.wide-zone {padding:.5rem 0;}}
nav > ul.navbar-nav {gap:.5rem;}
nav > ul.navbar-nav > li > a {font-weight: normal;background: var(--white-color);border-radius:2rem;}
nav > ul.navbar-nav > li  a:hover {color:var(--text-color);}
nav > ul.navbar-nav > li > a::after {color:var(--main-color);}

.sub-menu {top:calc(var(--header-pc-height) );}



.slider-wrapper .catchcopy {width:100%;text-align: center;left:0;bottom:25%;}
.slider-area {position: relative;}
.slider-area .slider-overlay {position: absolute;z-index: 2;bottom:3rem;left:0;}
.slider-area .slider-overlay img {width:100vw;border-radius:0;}

.fuwaloop-item a {width:150px;}


.button {border-radius:2rem;}
.button .button:focus, .button:hover {border-width:3px;padding:calc(.85em - 2px) calc(1em - 2px);border-color: var(--accent-color-dark); background: var(--accent-color-light); color:var(--black-color-dark);}


main section:not(.title-area) or :not(.slider-area) img {border-radius:2rem;}
main img.no-radius {border-radius:0;}

@media (max-width: 640px) {
	h1 {max-width: 300px;}
/*	h1 img {max-width: 90px;;} */
	.site-title {flex-wrap:wrap;}
}

/* flex-schedul */
.flex-schedule {
  min-width: 400px;
  list-style: none;
  box-sizing: border-box;
}

.flex-schedule li {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
text-indent:0;
}

.flex-schedule .area {
  padding: 10px;
  display: block;
  width: 100%;
  border-left: 6px solid #ff0093;
}

.flex-schedule li .time {
  display: inline-flex;
  justify-content: flex-end;
  flex-basis: 8em;
  max-width: 8em;
  margin-right: 1em;
  margin-top: 30px;
}

.flex-schedule .sch_box {
  position: relative;
  min-height: 1em;
  padding: 1em;
  background: #ffd9e0;
  border-radius: 6px;
}

.flex-schedule .sch_box::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 20px;
  background: #ff0093;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.flex-schedule .sch_title {
  font-weight: 700;
}
.timetable-baby th,.timetable-child th {width:4rem;text-align: center;}
.timetable-baby th{background: #FFE082;}
.timetable-child th{background: #B3E5FC;}

#front-towa .grid-x {align-items: center;}

@media (min-width: 641px) {
  #front-towa .grid-x .center-text p {line-height: 3;}
  #front-towa .grid-x .left-image {align-self:start; margin-left: -3vw; margin-right: 3vw}
  #front-towa .grid-x .right-image {align-self:end; margin-left: 3vw; margin-right: -3vw;}
}

#news-area {
  background-color: var(--sub-color);
  background-image: url("https://www.transparenttextures.com/patterns/textured-stripes.png");
  padding-bottom:0;
}
.news-meta .news-category.news {background: var(--extra-color-dark)}
.news-meta .news-category.report {background: var(--main-color-dark)}
@media (min-width: 1025px) {
  #news-bottom {margin-top: -5rem;}
}
@media (min-width: 641px) {
  #news-bottom .grid-x {align-items: flex-end}
  #news-bottom .grid-x .archive-button {align-self: start;}
  #news-bottom .grid-x .left-image,
  #news-bottom .grid-x .right-image {text-align: center;}
  #news-bottom .grid-x .left-image img,
  #news-bottom .grid-x .right-image img {width:200px;max-width:40vw;}

}




.yakuwari1 {background: var(--extra-color-light);}
.yakuwari2 {background: var(--sub-color-light);}
.yakuwari3 {background: var(--accent-color-light);}
.small-links .button-group {justify-content:center;}

.shisetsu-gaiyo th {width:6rem;}

.imgyugami1 {border-radius:48% 35% 47% 38% / 28% 60% 33% 55%;}
.imgyugami2 {border-radius:80% 30% 50% 50%/50%;}

/* summer
body {background-image:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(images/bg-leaf.png);background-size:contain;background-repeat:repeat-y;}
.footer-top {background:url(images/footer-top-summer.png) center bottom repeat-x;}
footer {background-color:#7eb828;}
footer h5 {color:#fff;}
#news-area {background: var(--accent-color-light);}
.yakuwari3 {background: var(--main-color-light);}
*/

/* autumn  */
body {background-image:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(images/bg-autumn.png);background-size:contain;background-repeat:repeat-y;}
.footer-top {background:url(images/footer-top-autumn.png) center bottom repeat-x;}
@media (max-width: 640px) {.footer-top {background-size: cover; max-height:60px;}}
footer {background-color:#fabf1a;}
footer h5 {color:#fff;}


.fa-midashi {color:var(--main-color-dark);text-align: center;font-size: 3rem;}

.navbar-nav > li > a:before {
  font-family: "Font Awesome\ 6 Pro";font-weight:300;content: "\e673";margin-right:5px;color:var(--main-color-dark);
  font-size: 1.5rem;
}
.navbar-nav > li:nth-child(2) > a:before { content: "\e3b2";}
.navbar-nav > li:nth-child(3) > a:before { content: "\f77d";}
.navbar-nav > li:nth-child(4) > a:before { content: "\e4e1";}
.navbar-nav > li:nth-child(5) > a:before { content: "\f49d";}

#bowa .stack-menu > label {padding-left:2rem;}
#bowa .stack-menu > label:after {position:absolute; left:0; top:calc( 50% - 1.25rem );
  font-family: "Font Awesome\ 6 Pro";font-weight:300;content: "\e673";margin-right:5px;color:var(--main-color-dark);
  font-size: 1.5rem;
}
#bowa .stack-menu > label:nth-child(2):after {}
#bowa .stack-menu > label:nth-child(5):after {content: "\e3b2";}
#bowa .stack-menu > label:nth-child(8):after {content: "\f77d";}
#bowa .stack-menu > label:nth-child(11):after {content: "\e4e1";}


.main-content-list .cell .text-box h5 {display:flex; flex-direction: column; }
.main-content-list .cell h5:before {
  font-family: "Font Awesome\ 6 Pro";font-weight:300;content: "\e3b2";margin-right:5px;color:#fff;
  font-size: 3rem;
}
.main-content-list .cell:nth-child(2) h5:before {content: "\f77d";}
.main-content-list .cell:nth-child(3) h5:before {content: "\e4e1";}
.main-content-list .cell:nth-child(4) h5:before {content: "\f49d";}




/* ミルクルパワー */
.mirukuru-recent {
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 5px;
  box-shadow: var(--box-shadow); 
}
.mirukuru-title {
  border: 5px solid var(--main-color);
}
.mirukuru-backnumber .cell.callout {
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 5px;
  box-shadow: var(--box-shadow); 
  padding:0;
}
.mirukuru-backnumber .cell.callout a {
  display: block;
  padding:1rem 1rem 2rem; 
}
.mirukuru-backnumber .mirukuru-title {
  border: 3px solid var(--main-color);
  padding:1rem;
  margin:0 0 1rem;
}

/* 1日 */
#timelines h5 {text-align: center;margin-bottom: 2rem;}
.life-event-heading {display: flex;gap:1rem;align-items: center;}
.life-event-heading .clock {flex: 0 0 60px;}
.life-event-heading .life-event {font-weight: bold;}
#baby-life .life-event-heading .life-event span {color:var(--sub-color-dark);}
#child-life .life-event-heading .life-event span {color:var(--extra-color-dark);}

#timelines img {max-height:100px;width:auto;}
#timelines .life-event-heading .clock img {width:60px;max-width:100%;height:60px;}
#timelines .callout {background: #fff;padding:2rem 1.5rem;}
@media (max-width: 640px) {#timelines .callout {padding:1rem .5rem;}}
#baby-life {background: var(--accent-color-light);padding:1rem;}
#child-life {background: var(--extra-color-light);padding:1rem;}

/* 年間行事　*/
.yearly-event img {max-height:320px;width:auto;}
.yearly-event .fuwaloop-item div {width:250px;}
.yearly-event .fuwaloop-item div img {aspect-ratio: 3/2;object-fit: cover;}
.monthly-event {margin-bottom: 1rem;}
.monthly-event h4 {margin-top:0;margin-bottom:.5rem;}
.monthly-event p {margin-bottom: 0;}
#january {background: #FFEBEE;}
#february {background: #E1F5FE;}
#march {background: #FFFDE7;}
#april {background: #FCE4EC;}
#may {background: #E8F5E9;}
#june {background: #F3E5F5;}
#july {background: #E0F7FA;}
#august {background: #FFF3E0;}
#september {background: #F3E5F5;}
#october {background: #EFEBE9;}
#november {background: #EDE7F6;}
#december {background: #F1F8E9;}

/* 採用情報 */
#recruit table {margin-bottom: 2rem;}
#recruit table th { width: 10rem; }
@media (max-width: 640px) {
  #recruit table th { width: 8rem; }
}
#recruit .fuwaloop-item div {width: calc(100vw / 6)}


.align-center .button-group {justify-content: center;}


/*========= フワフワ ===============*/
@keyframes tatefuwa {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-1rem);}
}
.anime-tatefuwa { animation: 3s tatefuwa infinite;}

@keyframes yokofuwa {
  0%, 100% {transform: translateX(0);}
  50% {transform: translateX(-1rem);}
}
.anime-yokofuwa { animation: 3s yokofuwa infinite;}

/*========= フワフワ若干のバージョン違い ===============*/
@keyframes tatefuwa2 {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(.8rem);}
}
.anime-tatefuwa2 { animation: 4s tatefuwa2 infinite;}

@keyframes yokofuwa2 {
  0%, 100% {transform: translateX(0);}
  50% {transform: translateX(.7rem);}
}
.anime-yokofuwa2 { animation: 3.5s yokofuwa2 infinite;}

brバリエーション
@media (max-width: 640px) {.pcbr{display:none;}}
@media (min-width: 641px) {.spbr{display:none;}}
align-centerバリエーション
@media (max-width: 640px) {.spcenter{text-align:center;}}
@media (min-width: 641px) {.pccenter{text-align: center;}}

#frontpage .front-towa h2, .front-towa p.pccenter {font-family: var(--serif);}

#shortstay .narrow > .callout,
#sunday-house .narrow > .callout,
#satooya-support .narrow > .callout {border:5px solid var(--main-color-light); background:#fff;}

/* フワループ間隔 */
.fuwaloop-box {gap:1rem;}
.fuwaloop-box img {border-radius: 1rem;}

.kifu-wishlist {background: var(--main-color-light);}
.kifu-shokai {background: var(--accent-color-light);}

#topbar {padding-top:12px;}
.topbar-bottom {width:100%;text-align: right;font-size:.75rem;color:#f00;border-bottom: 2px solid #f00;background: #fff;padding-right:1rem;}


.wide-zone .mega > a {cursor: default;}

#frontpage .front-towa {font-family: serif;font-size:1.125rem;line-height: 1.6;}
#frontpage .inlink-banner img {border: 2px solid #F48FB1; border-radius:1rem;}
#frontpage .sns-link {text-align: center;}
#frontpage .sns-link img {padding:.5rem;}