@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"); 




/* 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;)}



/* 制作実績 */
.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-shortcut {	background:var(--gray-color-light);}
.jisseki-shortcut-accordion-title { font-size: .75rem;}
.jisseki-shortcut a, .jisseki-shortcut a:hover {color:var(--text-color) !important;}
.jisseki-category {margin-bottom: 1rem;padding:.5rem 1rem;border-radius:10px;background: var(--gray-color-light);display:flex;flex-wrap:wrap;gap:.25rem;}
.jisseki-category span.label {background: #fff; border:1px solid var(--border-color-dark);padding:0;}
.jisseki-category span.label a {color:var(--text-color) !important;display:block;padding:.5rem .5rem .25rem;transition: all 0.6s ease;}
.jisseki-category span.label a:hover {background: var(--main-color-light);}
/* 公開終了サイト */
#legacy-site {background:var(--gray-color);}
#legacy-site .site-link {display: none;}
#recent-site .site-list .cell:not(.device-image) {padding:1rem;}
@media (min-width: 641px) {
#recent-site .site-list > div:first-child {width: calc(100% - 1.875rem);}
#recent-site .site-list > div:first-child {width: calc(100% - 16rem);margin:0 auto 2rem;}
}
/* 会社概要 */
.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;}