/*
Theme Name: Dog Training 白拍子
Template: minimalcafe
Text Domain: dogtrainingshirabyoshi
Author: Area Brain Co.,Ltd.
Version: 1.0.0
*/
/* ここに上書きしたいCSSを書く */

.footerbox li a {
color:#192d70;
}

.top-header img {
width: 100%;
}

#nav {
width:100%;
margin: 0 auto;
}

.main-navigation {
background: #192d70;
}

ul.nav-menu {
font-family: "Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
}

.nav-menu li a {
padding: 12px 25px 12px 25px;
color: #fff;
font-size:15px;
}

.nav-menu li:hover > a, 
.nav-menu li a:hover {
background: #65b4c9;
color: #fff;
}


#top-btn {
margin: 0 auto -1px auto;
width: 90%;
max-width: 960px;
padding: 50px 30px 70px 30px;
overflow: hidden;
}

.top-btn1,.top-btn2,.top-btn3 {
cursor: pointer;
overflow: hidden;
border:10px solid #fff;
float:left;
display: block;
box-shadow: 2px 2px #cccccc;
border-radius: 5px;
}

.top-btn1,.top-btn2 {
margin-right:15px;
}

.top-btn1 img, .top-btn2 img, .top-btn3 img {
  height: auto;
  transition: transform .3s ease; /* ゆっくり変化させる */
}
.top-btn1:hover img, .top-btn2:hover img, .top-btn3:hover img {
  transform: scale(1.1); /* 拡大 */
}


.pagetitle {
font-family: "Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
color: #192d70;
border-color: #192d70;
margin: 50px 0px 20px 0px;
}

.top-wide-contents {
border:none;
}

.top-wide-contents .widget {
background-color:#f4eee9;
padding: 0px 20px;
}

.top-wide-contents .top-widget-title {
padding: 50px 0 5px 0;
}

.top-wide-contents .textwidget, .top-wide-contents .textwidget p {
margin:0;
}

.top-widget-title {
font-family: "Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
max-width: 500px;
letter-spacing: 0.1em;
color: #192d70;
border-bottom: 2px solid #192d70 !important;
font-size:22px;
padding: 50px 0 5px 0;
}

.widget-title {
text-align: center;
font-family: "Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
background-color: #192d70;
color: #fff;
border-bottom: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 5px;
font-size: 18px;
}

.topbox .widget {
	margin: 0px 0px 20px 0px;
}

.news-archives {
	margin-bottom: 100px;
	text-align: right;
}

.footer-widget-title {
font-family: "Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
color: #192d70;
border-bottom: solid 1px #192d70;
}



.youtube { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
margin-top: 20px; 
margin-bottom: 20px; 
} 

.youtube iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

.servicename {
text-align: left;
font-weight: bold;
background-color: #192d70;
color: #fff;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 5px 15px;
}


.t-center {
text-align:center;
}

.noborder {
border: none;
}

.t-small {
	font-size: 80%;
	line-height: 1.2;
}

.top-bn-title {
margin-top: 100px;
color: #192d70;
border-bottom: 1px solid #192d70;
width: 100%;
text-align: center;
}

.top-bn1,.top-bn2 {
margin-top:20px;
margin-bottom:100px;
}

.top-bn1 a:hover,.top-bn2 a:hover{ 
opacity:0.5;
transition:0.3s;
}


/* お知らせ（最新の投稿）エリアの調整 */
.widget_recent_entries ul li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

/* 日付の幅を固定して揃える */
.widget_recent_entries ul li .post-date {
  order: -1;
  width: 7em;            /* ← 固定幅。日付のフォーマットに合わせて調整（例：2025年11月02日なら7em程度） */
  text-align: right;     /* 日付を右揃えにして整える（左揃えでもOK） */
  white-space: nowrap;   /* 折り返さないように */
  color: #666;           /* お好みで少し淡く */
  font-size: 1em;
}

.topbox li a {
padding: 7px 0px 6px 30px;
}

/* テキスト＋矢印（右向き） */
.link-arrow{
  color:#192d70;
  text-decoration:none;
  text-underline-offset:.15em;
  transition:color .2s;
}
.link-arrow::after{
  content:"";
  display:inline-block;
  width:.65em; height:.65em;
  margin-left:.3em;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform: translateY(-.06em) rotate(45deg);   /* → */
  transition: transform .18s;
}
.link-arrow:hover{ color:#999; }
.link-arrow:hover::after{ transform: translate(.15em,-.06em) rotate(45deg); }

/* 方向バリエーション（必要なものだけ） */
.link-arrow--left::after  { transform: translateY(-.06em) rotate(-135deg); }
.link-arrow--up::after    { transform: translateY(-.06em) rotate(-45deg);  }
.link-arrow--down::after  { transform: translateY(-.06em) rotate(135deg);  }

.about2 {
width:200px;
}

.dog-icon {
position: relative;
width: 150px;
height: 150px;
border-radius: 100%;
overflow: hidden;
z-index: 0;
}

blockquote {
background: #f4eee9 !important;
}

/* コメント欄を非表示にする */
#comments,
.comments-area {
  display: none;
}

/* フッター背景に足跡 */
footer {
  background-image: url('https://dog-training-shirabyoshi.com/wp-content/uploads/2025/11/paw.png') !important;
  background-repeat: no-repeat !important;
	background-position: right 120px bottom 20px !important; /* 配置 */
	background-size: 250px auto !important; /* 足跡の大きさを調整 */
  background-color: #f5f5f5; /* 元のフッター背景色（必要なら） */
}



/* 親に .table-cards を付けると、スマホでカード化 */
@media (max-width: 768px){
  .table-cards table,
  .table-cards thead,
  .table-cards tbody,
  .table-cards th,
  .table-cards td,
  .table-cards tr{ display:block; }

  .table-cards thead{ display:none; }

  .table-cards tbody tr{
    background:var(--tbl-bg);
    border:1px solid var(--tbl-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin:0 0 .75rem;
    overflow:hidden;
  }

  .table-cards td{
    border-bottom:1px solid var(--tbl-border);
    position:relative;
    padding:.75rem 1rem .75rem 9.5rem; /* 左側をラベル分あける */
  }
  .table-cards td:last-child{ border-bottom:1px solid #ccc; }

  .table-cards td::before{
    content:attr(data-label);
    position:absolute;
    left:1rem;
    top:.75rem;
    width:7.5rem;
    color:#475467;
    font-weight:600;
    white-space:nowrap;
  }
}


/* ====== 共通トークン（色・角丸など） ====== */
:root{
  --q-bg:#f7f9fc;
  --q-text:#111;
  --q-accent:#0b63ce;
  --q-border:#e6e9ef;
  --q-radius:14px;
  --q-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* WordPress/Gutenbergの引用に共通で効かせるベース */
blockquote,
.wp-block-quote{
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--q-bg);
  color: var(--q-text);
  border-radius: var(--q-radius);
  line-height: 1.8;                 /* 日本語はやや広めが読みやすい */
  font-style: normal;                /* 日本語は斜体を使わないのが無難 */
}
blockquote p:last-child{ margin-bottom: 0; }

/* 出典（cite/footer）は下に控えめ表示 */
blockquote cite,
blockquote footer{
  display:block;
  margin-top:.6rem;
  color:#667085;
  font-size:.9em;
  font-style: normal;
}

/* ====== 1) 左帯ストライプ（ミニマル定番） ====== */
/* 追加クラス： quote quote--stripe */
.quote--stripe{
  border-left: 6px solid var(--q-accent);
  background: var(--q-bg);
}

/* ====== 2) カード＋大きな引用符（映える） ====== */
/* 追加クラス： quote quote--card */
.quote--card{ box-shadow: var(--q-shadow); }
.quote--card::before{
  content: "“";
  position: absolute;
  top: -.35em; left: .5rem;
  font-size: 4rem; line-height: 1;
  color: rgba(11,99,206,.12);
  font-family: Georgia, "Hiragino Mincho ProN", serif;
  pointer-events:none;
}

/* ====== 3) センター“プルクオート” （見出し風） ====== */
/* 追加クラス： quote pullquote */
.pullquote{
  background: transparent;
  border: none;
  padding: 1.25rem 0;
  text-align: center;
}
.pullquote p{
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .9vw, 1.6rem);
  line-height: 1.5;
}
.pullquote::before,
.pullquote::after{
  content:"";
  display:block;
  width: 72px; height: 2px;
  background: var(--q-border);
  margin: .75rem auto;
  border-radius: 999px;
}

/* ====== 4) 吹き出しカード（会話・レビューに） ====== */
/* 追加クラス： quote quote--bubble */
.quote--bubble{
  background: #fff;
  border: 1px solid var(--q-border);
  box-shadow: var(--q-shadow);
}
.quote--bubble::after{
  content:"";
  position:absolute;
  left: 2.2rem; bottom: -10px;
  width: 18px; height: 18px;
  background: inherit;
  border-left: 1px solid var(--q-border);
  border-bottom: 1px solid var(--q-border);
  transform: rotate(45deg);
}

/* ====== 5) グラデ枠（さりげないリッチ感） ====== */
/* 追加クラス： quote quote--gradient */
.quote--gradient{
  background: #fff;
}
.quote--gradient::before{
  content:"";
  position:absolute; inset:0;
  padding: 1px; border-radius: var(--q-radius);
  background: linear-gradient(135deg,#0b63ce,#7a3cff,#22c55e);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* ====== ダークモード配慮（任意） ====== */
@media (prefers-color-scheme: dark){
  :root{
    --q-bg:#14171f; --q-text:#e7e9ee; --q-border:#2a2f3a;
  }
  .quote--card::before{ color: rgba(255,255,255,.12); }
}

/* ====== 余裕があれば：リンクの視認性強化 ====== */
.wp-block-quote a{
  text-decoration: underline;
  text-underline-offset: .15em;
}




/* スマホ（768px以下）のとき */
@media screen and (max-width: 768px) {
	
	.nav-menu li a {
		color:#192d70;
	}
	
  #top-btn {
    width: 100%;
    padding: 30px 15px;
    box-sizing: border-box;
  }

  .top-btn1,
  .top-btn2,
  .top-btn3 {
    float: none;
    width: 100%;
    margin: 0 0 15px 0;
    box-sizing: border-box; /* 枠線も含めて100％幅内に収める */
  }

  .top-btn3 {
    margin-bottom: 0;
  }

  .top-btn1 img,
  .top-btn2 img,
  .top-btn3 img {
    width: 100%;
    height: auto;
    display: block; /* 画像の余白防止 */
	}
	
.top-bn-title {
margin-top: 30px;
}

.top-bn1 {
margin-top:20px;
margin-bottom:30px;
}
	
.top-bn2 {
margin-top:20px;
margin-bottom:60px;
}
	
.news-archives {
	margin-bottom: 60px;
	}
	
/* フッター背景に足跡 */
footer {
	background-position: right  -5px bottom 20px !important; /* 配置 */
	}
	
.about2 {
width:100px;
}
	
.dog-icon {
position: relative;
width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
z-index: 0;
}
	
}