@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"); 
/*
@import url("style-shinshu.css");
@import url("style-shinshu-place.css");
@import url("style-shinshu-style.css");
*/


body, h1, h2, h3, h4, h5, h6 {
  /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
  font-family:'Roboto', 'Noto Sans JP', 'Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  font-weight: 500;
  color: rgb(35, 24, 21);
}

h3 {font-size: 2.25rem; font-weight:700; margin: 3rem 0 2rem; text-align: center;} /* 45px */
@media (max-width: 640px) {h3 {font-size: 2rem; }}
h4 {font-size: 1.5rem; font-weight:700; margin: 2rem 0 1.5rem;} /* 30px */
h5 {font-size: 1.3rem; font-weight:700; margin: 1.5rem 0 1.25rem;} /* 26px */
h6 {font-size: 1.1rem; font-weight:600; margin: 1.25rem 0 1rem;} /* 22px */

@media (max-width: 640px) {h1 {max-width:40px;}.site-title-text {display: block;width:100%;max-width: 300px;}.site-title {display: flex;width:100%;max-width: 300px;}
}

#bowa.panelactive {padding-top:0;}

footer a {color:#fff;}
#goto_top {background: var(--extra-color);}

/* HERO */
#hero section.main {height:70vh;background:#eee;background:url(images/hero.jpg);background-position: center center;background-size: cover;}
@media (max-width: 640px) {
  #hero section.main {height:70vh;background:#eee;background:url(images/hero-sp2.jpg);background-position: center bottom;background-size: cover;}
}
#hero section.main .grid-container {height:100%;display: flex;flex-direction:column;justify-content: space-between;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;}
#hero section.main .grid-container .block1 {}
#hero section.main .grid-container .block2 {align-self: flex-end;}
#hero .hero-taisho {font-size: 2.5rem; font-family: var(--serif);
          font-size: clamp(1.5rem, 0.818rem + 3.41vw, 3rem);}
#hero .hero-taisho strong {font-size: 3rem;color:var(--extra-color);
              font-size: clamp(2rem, 1.091rem + 4.55vw, 4rem);}
#hero .hero-taisho strong span {font-size:2.5rem;
                font-size: clamp(1.5rem, 0.818rem + 3.41vw, 3rem);}
#hero .hero-summary {background:rgba(255,255,255,.5);font-size:2.5rem;padding:.25rem 1rem;display:inline-block;border-radius:1rem;color:var(--accent-color);font-weight:600;
  font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2rem);
}
#hero .hero-ken {font-size:2rem;
          font-size: clamp(1.125rem, 0.727rem + 1.99vw, 2rem);}
#hero .hero-ken span {color:#1565C0;}
#hero .hero-copy {font-size: 2.5rem; font-family: var(--serif);
          font-size: clamp(1.5rem, 1.045rem + 2.27vw, 2.5rem);}
#hero .hero-copy strong {font-size: 3rem;
              font-size: clamp(2rem, 1.545rem + 2.27vw, 3rem);}
#hero .hero-copy strong span {font-size:2.5rem;
          font-size: clamp(1.5rem, 1.045rem + 2.27vw, 2.5rem);}


/* 制度の概要 */
#summary {}
#summary .seido-title {padding:1rem .5rem;background: var(--main-color-dark);margin-bottom:3rem;}
#summary .seido-title .grid-container {display:flex;flex-direction:column;align-items:center;justify-content: center;gap:.25rem;}
#summary .seido-title .seido-year{background: var(--main-color-dark);background:#fff;padding:.125rem .75rem;font-size: .8125rem;border-radius:4rem;}
#summary .seido-title .seido-name {color:#fff;font-size:2rem;font-weight: 600;}
#summary .seido-title .seido-itaku {color:#fff;font-size:.95rem;}

#summary .support-summary {text-align: center;font-weight: 600;}
#summary .support-summary .line1 {font-size: 3rem;color:var(--accent-color);margin-bottom: 1rem;font-family: var(--serif);
                  font-size: clamp(1.5rem, 1.159rem + 1.7vw, 2.25rem);}
#summary .support-summary .line2 {font-size: 1.75rem;margin-bottom: 1rem;font-family: var(--serif);
                  font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2rem);}
#summary .support-summary .line3 {margin-bottom: 1rem;}
#summary .support-summary .line3 span {font-size: 1.5rem;background:linear-gradient(transparent 70%, #fffec2 30%);
                    font-size: clamp(1.125rem, 0.841rem + 1.42vw, 1.75rem);}
#summary .support-summary .line4 {font-size: 1.75rem;color:var(--accent-color);margin-bottom: 3rem;color:var(--extra-color);
                    font-size: clamp(1.35rem, 1.168rem + 0.91vw, 1.75rem);}

.shikaku {margin-top:2rem;margin-bottom: 3rem;}
.shikaku > div > * {margin:0;}
.mushikaku, .yushikaku {text-align: center;border:4px solid var(--accent-color); background:var(--accent-color-light); border-radius: 1rem;padding:1.5rem 2rem;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.shikaku h5 {background: #fff;display: inline-block;padding:.5rem 0 .5rem 1rem ;font-size: 2rem;letter-spacing: 1rem;align-self: center;border-radius: .5rem;}
.mushikaku h5 span {color: var(--main-color-dark);}
.yushikaku h5 span {color: var(--sub-color-dark);}
.shikaku .jikyu {font-size: 1.25rem;line-height: 1.3;}
.shikaku .jikyu strong {font-size: 3rem; color: var(--extra-color);}
.shikaku .support-label {background: #fff;align-self: center;padding:0 1rem;border-radius:3rem;margin-top:1rem;margin-bottom:.5rem;color: var(--accent-color-dark);font-size:.85rem;font-weight: 600;}
.shikaku .detail {font-weight: 600;line-height:1.4;margin-bottom:1rem;}

#summary .medium-up-4 > .cell {background: var(--extra-color-light);padding:1rem 2rem 2rem;border-radius:4rem;
  display: flex; flex-direction: column; align-items: center;justify-content: flex-start; gap:.5rem; font-size: 1.25rem;line-height: 1.2;margin-bottom: 1rem;}
#summary .medium-up-4 > .cell span {font-size: .825rem;}
#summary .medium-up-4 > .cell span strong {font-size: 1.5rem;}
          



/* 説明会日程 */
#setsumeikai {background: var(--main-color-light);}
#setsumeikai h3 {color: var(--main-color)}
#setsumeikai h5 {background: #fff;display: inline-block; padding:1rem 4rem;margin-bottom: 0;}
#setsumeikai h5 {background:var(--main-color-dark); color:#fff;border-radius: 1rem 1rem 0 0;}
#setsumeikai h6 {color: var(--sub-color);}
#setsumeikai .callout {background: #fff;border-radius: 0 2rem 2rem 2rem;border:1px dotted var(--main-color);}

/* 募集要項 */
#youkou {background: var(--extra-color-light);}
#youkou h3 {color: var(--extra-color)}
#youkou table tbody {border: none;background: transparent;border-top: 1px solid var(--border-color);}
#youkou tbody th, #youkou tbody td{border: none;border-bottom: 1px solid var(--border-color);padding-top:1rem; padding-bottom:1rem;}
#youkou tbody th {background: transparent; color:var(--extra-color);min-width:6rem;}


/* 研修 */
.kenshu-name {text-align: center;padding:1rem;}
.kenshu-mushikaku .kenshu-name {background:var(--main-color);}
.kenshu-yushikaku .kenshu-name {background:var(--sub-color);}
.kenshu-name .callout {background: #fff;padding:1rem;}
.kenshu-name h5 {color:#fff;}
.kenshu-detail {padding:1rem;}
.kenshu-mushikaku .kenshu-detail {background:var(--main-color-light);}
.kenshu-yushikaku .kenshu-detail {background:var(--sub-color-light);display: flex;align-items: center;}
.shoninsha {background: #fff; border:1px dotted var(--main-color);}

/* 声 */
#review {background: var(--extra-color-light) !important;}
#review h3 {color: var(--extra-color)}
#review .callout {background: #fff; border: 1px dotted var(--extra-color);}
#review .callout h5 { color:var(--extra-color);}

/* 参加後の流れ */
#nagare {background: var(--accent-color-light);}
#nagare h3 {color: var(--accent-color)}
#nagare .callout {background: #fff;border: 1px dotted var(--accent-color);margin-bottom:0;}
#nagare .callout h5 { color:var(--accent-color-dark);}

/* 下向き矢印 */
.down-arrow {text-align: center;font-size:2rem;}
#nagare .down-arrow {color:var(--extra-color); }

/* FAQ */
#faq {background: var(--main-color-light);}
#faq h3 {color: var(--main-color)}
#faq .accordion-item { background: var(--main-color);}
#faq .accordion-item a {padding-right:2rem;}
#faq .accordion-item a:hover {color:#fff;}

/* 問い合わせ */
#inqury .mpg-name {align-items: flex-end;}
#inqury .mpg-name h5 {margin: 0 0 0;}
#inqury .mpg-name h5 img {height:5rem;}
#inqury .mpg-name h5 span {font-size: clamp(1.125rem, 1.068rem + 0.28vw, 1.25rem);}
#inqury .tsukuba-office {background:var(--main-color-dark);}
#inqury .mito-office {background:var(--main-color);}
#inqury .form-link {background:var(--accent-color);}
#inqury h6 {color:#fff;text-align: center;}
#inqury .mpg-dial {color:#fff;font-size: 2rem;font-weight:700;display:flex;align-items: center;justify-content: center;gap:.5rem;}
#inqury .mpg-dial a {color:#fff}
#inqury .mpg-address {color:#fff;font-size: .8125rem;text-align: center;margin-bottom: 1rem;}
#inqury .icon-freedial {height:2.25rem;width:auto;}
#inqury .mpg-form {font-weight:700;display:flex;align-items: center;justify-content: center;gap:.5rem;}
#inqury .mpg-form a {color:#fff}
#inqury .form-link a {text-align: center;display: block;padding:3rem 1rem;color:#fff;font-weight: 700;font-size: 1.25rem;}
#inqury .form-link a:hover {color:#FFEE58;} 


/* interlude */
#interlude1 img,
#interlude2 img,
#interlude3 img {width:100%;aspect-ratio:8/1;object-fit: cover;}
@media (max-width: 640px) {
#interlude1 img,
#interlude2 img,
#interlude3 img {width:100%;aspect-ratio:3/1;object-fit: cover;}
  
}


/* フッター */
footer {padding-bottom:3rem;}
footer h5 {margin-top:0;color:#fff;}



/* type-modal */

.modal-card:hover {color:#000;}

.modal-card.modal-kabuse{
  border:1px solid #ccc;
  border-radius:1rem;
  padding:0;
  overflow: hidden;
  width: 100%;
}



.modal-card.modal-kabuse {
  display: grid;
  grid-template-rows: 1;
  grid-template-columns: 1;
}



.yes-shadow .modal-card{ box-shadow: var(--box-shadow);}
.no-radius .modal-card{ border-radius:0; }
.no-border .modal-card{ border:none; }




  
.modal-card.modal-kabuse .image-box {
  grid-column: 1;grid-row: 1;z-index:1;}
.modal-card.modal-kabuse .text-box {
  grid-column: 1;grid-row: 1;z-index:2;
  /*margin: 2rem 1rem 1rem 2rem;*/
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width:100%;
}
.modal-card.modal-kabuse .text-box p{
  font-size:.8125rem;
  line-height: 1.5;
}



/* image-box 基本 */
.modal-card .image-box img {
  filter: brightness(0.9);
  height:100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s ease;
}

/* モーダル ダーク */
.modal-card.dark .image-box img { filter: brightness(0.5);}
.modal-card.dark:hover .image-box img { filter: brightness(0.7);}
a:hover .modal-card.dark .image-box img { opacity: 1;} /* 通常のhover効果を無効化 */
/* モーダル ブラー */
.modal-card.blur .image-box img { opacity:1;filter: blur(2px);}
.modal-card.blur:hover .image-box img { opacity:1;filter: blur(0);}
a:hover .modal-card.blur .image-box img { opacity: 1;} /* 通常のhover効果を無効化 */
/* モーダル シール */
.modal-card.seal .image-box img { opacity:1;}
.modal-card.seal:hover .image-box img { opacity:.9;}
.modal-card.seal .text-box h5, 
.modal-card.seal .text-box p {background: rgba(255,255,255,.95);margin-bottom:0;padding:.25rem 1rem;}
/* モーダル セパレート (画像トリミングサイズ優先で、テキストボックス不揃い) */
.modal-card.separate {grid-template-rows: 1fr auto;}
.modal-card.separate .image-box {grid-row: 1/2;} /* autoheight版とここが違う */
.modal-card.separate .text-box {grid-row: -2/-1;} /* autoheight版とここが違う */
.modal-card.separate .text-box {flex-direction: column; justify-content: space-between; background: #fff;margin: auto 0 0;padding:.5rem 1rem;}
.modal-card.separate .text-box .text-group {display: flex; flex-direction: column;gap:.5rem;}
.modal-card.separate .text-box .text-group > * {margin:0;padding:0;}
.modal-card.separate .text-box button {flex: 0 0 3rem;margin:0.5rem 0;}
.modal-card.separate .text-box button {display: none0;}
/* モーダル セパレート・オートハイト (画像トリミングサイズに、テキストボックス内包) */
.modal-card.separate-autoheight .text-box {flex-direction: column; justify-content: space-between; background: #fff;margin: auto 0 0;padding:.5rem 1rem;}
.modal-card.separate-autoheight .text-box .text-group {display: flex; flex-direction: column;gap:.5rem;}
.modal-card.separate-autoheight .text-box .text-group > * {margin:0;padding:0;}
.modal-card.separate-autoheight .text-box button {flex: 0 0 3rem;margin:0.5rem 0;}
.modal-card.separate-autoheight .text-box button {display: none0;}
/* モーダル ズーム(ホバーで拡大) */
.modal-card.zoom:hover .image-box img {transform: scale(1.03);}
/* 文字を白く */
.modal-card.dark .text-box,
.modal-card.text-white .text-box {color:#fff;text-shadow: 0 2px 3px rgba(0, 0, 0, .8);}







.modal-card .text-box button {
  justify-self: flex-end;
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: -1rem;
  margin-right: -1rem;
  
  display: grid;
  place-items: center;
  width:3rem;
  height:3rem;
  aspect-ratio:1/1;
  font-size: 2rem;
  /* padding:0 .55rem .4rem; */
  padding:0;
  line-height: 0;
  background: #353537;
  color:#d6d6d6;
  border-radius:50% !important;
}
.modal-card .text-box button i {margin:0;}

.reveal-overlay .close-button {font-size:3rem; color: var(--extra-color);}
@media (max-width: 640px) {.reveal-overlay {top: 50px;}}



.right-menu .contact {background: var(--accent-c0lor;)}


/* 会社概要 */
.about-lookat {background: var(--main-color);}
/* サラダセット */
.salad-sa h3:first-letter { font-size: 3rem;color:#2E7D32;}
.salad-la h3:first-letter { font-size: 3rem;color:#d00;}
.salad-da h3:first-letter { font-size: 3rem;color:#FF6F00;}
/* 流れ */
.flow-chart .arrow {text-align: center;font-size: 3rem;}
.flow-chart .callout {margin-bottom: 0;}
/* 猫紹介 */
.catname {font-family: 'Cherry Bomb One', system-ui;font-size:4rem; color:#642a17; }
.cat-profile {background: rgba(255,255,255,0.6);padding:1rem;border-radius:1rem;font-size:1.25rem;font-weight:bold;}
.cat-swiper-container .swiper-slide {width:100%;aspect-ratio:3/2;object-fit: cover;}
@media (min-width: 641px) {.cat-swiper-container .swiper-slide img { width:100%;height:auto;aspect-ratio:3/2;object-fit: cover;object-position: 50% 50%;}}
/* 水玉背景 */
#moi{
  background-color: #FFF3E0;
  background-image:
  radial-gradient(rgba(255,255,255,0.8) 20%, transparent 20%),
  radial-gradient(rgba(255,255,255,0.8) 20%, transparent 20%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
}
#sora{
  background-color: #E3F2FD;
  background-image:
  radial-gradient(rgba(255,255,255,0.8) 20%, transparent 20%),
  radial-gradient(rgba(255,255,255,0.8) 20%, transparent 20%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
}
/* ミルクボランティア */
.cats-history {margin-top:2rem;margin-bottom:3rem;padding:.5rem 0;background:var(--accent-color-light);}
.cats-history h6 {text-align: center;}

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





  
/* 制作実績 */
.device-image.mba {
  background-image: url("images/mba1200760.png");
  background-size: cover;
  max-width: 1200px;
  width:100%;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-template-rows: 2fr 15fr 2fr;
}
.device-image.mba img {	grid-column: 2/-2;	grid-row: 2/-2;}

.jisseki-item {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.jisseki-item:before {
content: '';
background-image: url(https://lookat.co.jp/wp-content/uploads/2025/11/bg-kyoiku11.jpg); 
filter: blur(5px) brightness(.9) ;
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
z-index: -1;
background-size: cover;

}
.jisseki-item .callout {background-color: rgba(255,255,255,.8);}


/* CSS Grid レイアウト */
.jisseki-item-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  height: auto;
  padding:0;
  overflow: hidden;
}

.jisseki-item-grid .jisseki-bg-image {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
  width:100%;
  max-width: 100vw;
  max-height:80vh;
  aspect-ratio: 2/1;	
}

.jisseki-item-grid .jisseki-bg-image img{	
  filter: blur(.3rem) brightness(.75) ; 
  object-fit: cover;
  object-position: center center;
  aspect-ratio: 2/1; 
  width:100%;
}

@media (max-width: 640px) {
  .jisseki-item-grid .jisseki-bg-image {	
    max-height:90vh;
  }
  .jisseki-item-grid .jisseki-bg-image img{	
    aspect-ratio: 2/3;
  }
}


.jisseki-item-grid .jisseki-content {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 2;
  
  display: grid;
  place-items: center;
}
.jisseki-item-grid .jisseki-content h4 {
  color:#fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  font-family: var(--serif);
  font-size: 1.75rem;
  border:none;
}
.jisseki-item-grid .jisseki-content .callout {
  background: rgba(255,255,255,.5);
}
.jisseki-category {margin-bottom: 1rem;}
.jisseki-category span {background:rgba(255,255,255,.1);border:1px solid #fff; color:#fff;margin-right:.5rem;}
.jisseki-category span a {color:#fff;}
.jisseki-category .tags {line-height:2;}

.jisseki-item-grid .jisseki-content .button {background:rgba(255,255,255,.2);border:1px solid #fff; color:#fff;margin-right:.5rem; border-radius:3rem;}


.jisseki-item-grid.past-away h5,
.jisseki-item-grid.past-away .site-link {display:none;}

#jump-menu {background: var(--sub-color-light);}
#jump-menu .button::after {content:"\f103";font-family: "Font Awesome\ 7 Pro";font-weight:700;color:var(--accent-color-dark); margin-left:5px;}

.contact-menu a::before {content:"\f0e0";font-family:"Font Awesome\ 7 Pro";font-weight:600;color:var(--extra-color);}


@media (max-width: 640px) {
.brpc {display: none;}
}
@media (min-width: 641px) {
.brsp {display: none;}	
}












/* 印刷 */
@media print {
a[href]:after {
content: "" !important;
}

abbr[title]:after {
content: "" !important;
}

body {
width: 1000px !important;
height: auto;
margin: 0px auto;
padding: 20px;
clear: both;
overflow: auto;
display:table;
}
p {
font-size:small !important;
}

.item.left,
.item.right {
display: block;
}

.item.left .text-area,
.item.left .image-area {
float: left;
width: 50%;
min-height: 320px;
background-size: contain;
background-repeat: no-repeat;
padding-top: 2rem;
padding-bottom: 2rem;
}
.item.right .text-area,
.item.right .image-area {
float: right;
width: 50%;
min-height: 320px;
background-size: contain;
background-repeat: no-repeat;
padding-top: 2rem;
padding-bottom: 2rem;
}
}