/*
Theme Name: kanagawa style
Author: style
Version: 1.0.0
*/


/*
Required WordPress CSS
*/
.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.alignleft {
    float: left;
    margin-right: 1.5em;
}
.alignright {
    float: right;
    margin-left: 1.5em;
}
.bypostauthor {
}


/* WordPress gallery */
.gallery-caption {
}
.gallery {
    margin-bottom: 1.6em;
}
.gallery-item {
    display: inline-block;
    padding: 1.79104477%;
    text-align: center;
    vertical-align: top;
    width: 100%;
}
.gallery-columns-2 .gallery-item {
    max-width: 50%;
}
.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
    max-width: 25%;
}
.gallery-columns-5 .gallery-item {
    max-width: 20%;
}
.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}
.gallery-icon img {
    margin: 0 auto;
}
.gallery-caption {
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 0.5em 0;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}


/* 
Text meant only for screen readers. 
copied from https://codex.wordpress.org/CSS
*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

.wp-caption {
    border: 1px solid #ccc;
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

#logo-bar{
	border-bottom: solid 1px #343a40;	
}

#global-nav {
	background: #fff;
	border-bottom: 1px solid #16244e;
	width: 100%;
	z-index: 10;
}

#global-nav.m_fixed {
	left: 0;
	position: fixed;
	top: 0;
}

.menu-wrapper {
  display: flex;          /* 横並びの基本 */
    flex-direction: row;    /* 明示的に横（columnだと縦になる） */
}
.menu-btn {
  display: flex;
  align-items: center;        /* 縦中央揃え */
  gap: 10px;                  /* アイコンと文字の間隔 */
  cursor: pointer;
  z-index: 3;
  user-select: none;     /* 文字選択されないように */
  margin-bottom: 0px;
}

.menu-icon {
  width: 22px;
  height: 22px;
  position: relative;
  padding-top: 2px;
}

.menu-icon span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: #f17192;
  border-radius: 2px;
  transition: 0.4s;
}

.menu-text {
	font-size: 13px;
	color:#f17192;
}

.menu-text:hover {
	color:#f8aac1;
	text-decoration: none
}

.menu-btn-text {
	display: flex;
	flex: 1;  
	padding-top: 3px;
}

.nav-item{
	padding: 2px 8px 4px 8px;
}


/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 1;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（右から出す） */
.menu {
  position: fixed;
  top: 0;
  right: -300px; /* ← 初期位置を右へ */
  width: 300px;
  height: 100%;
  background: #f8aac1;
  transition: right 0.4s ease;
  z-index: 3;
}

#menu-toggle:checked ~ .menu {
  right: 0; /* ← 開いたときは右0へ */
}

.menu ul {
  list-style: none;
  padding: 60px 0px;
}

.menu li {
  margin: 0;
  padding: 10px 20px 10px 20px;
  border-top: 1px solid #fff;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  transition: color 0.3s;
  font-weight: 700
}

.menu a:hover {
  color: #fff;
}

/* 閉じるボタン（右上固定） */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;                    /* 最初は非表示 */
  transform: scale(0.5);
  transition: all 0.4s ease;
}

/* メニューが開いたら閉じるボタン出現！ */
#menu-toggle:checked ~ .menu .close-btn {
  opacity: 1;
  transform: scale(1);
}

/* × の2本線 */
.close-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.close-btn span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 301px) {
  .menu-btn-text{
	  display:none
  }
}

#keep{
  position: absolute;
  top: 20px;
  right: 10px;
}

#keeptx{
  position: absolute;
  top: 56px;
  right: 10px;
  font-size: 12px;
}

#ShopImg img{
	width: 100%;
}


/* モダンなCSSバーに変更したい場合 */
.progress-bar-modern {
    width: 100%;
    height: 20px;
    background: #c7a2f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
	margin-top: 0.5rem;
}

.progress-bar-modern .fill {
    height: 100%;
    background: #f17192;
    transition: width 0.3s ease;
}

.labels {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 1rem;
    font-size: 15px;
}

.label-a { color: #ff8ca0; font-weight: bold; }
.label-b { color: #c8a2c8; font-weight: bold; text-align: right; }



.vertical-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 20px;
    max-width: 300px;
    margin: 1rem auto;
    font-family: sans-serif;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}

.bar-label {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
}

.bar-container {
    width: 60px;
    height: 200px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    position: relative;
}

/* ここが重要！下から上がるように */
.bar-fill {
    width: 100%;
    background-color: #4CAF50; /* デフォルト（PHPで上書き） */
    transition: height 0.8s ease;
    position: absolute;
    bottom: 0;           /* ← これで下から伸びる！ */
    left: 0;
    border-radius: 8px 8px 0 0;
}

/* 見出しちゃん */
.mds_line {
  display: flex;
  align-items: center;
}
.mds_line::before,
.mds_line::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
.mds_line::before {
    margin-right: 1rem;
}
.mds_line::after {
    margin-left: 1rem;
}

/* 見出しちゃんピンク */
.mds_line_pink {
  display: flex;
  align-items: center;
  color: #f17192;
  padding-top: 2rem;
}
.mds_line_pink::before,
.mds_line_pink::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #f17192;
}
.mds_line_pink::before {
    margin-right: 1rem;
}
.mds_line_pink::after {
    margin-left: 1rem;
}

.mds_matome {
  text-align: center;
  border-bottom: solid 1px #343a40;
  padding: 10px 0 10px 0;     
}

.emoji_big{
	font-size: 1.5rem;
}



/*アコーディオン*/

.toggle {
	display: none;
}
.Label {		/*タイトル*/
	font-weight:	bold;
	padding:		.6rem .5rem .5rem;
	display: block;
	background-color:#f8aac1;
	color:			#fff;
	text-align: center;
	cursor: pointer;
	margin: 0 20px 10px 20px;
}

.Label:hover {		/*タイトル*/
	background-color:#f17192;
}

.Label::before{		/*タイトル横の矢印*/
	content:		'\f067';
	font-family: "Font Awesome 5 Free";
	position:		absolute;
	top:			.6rem;
	right:			1rem;
	color:			#fff;
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	content:		'\f068';
	font-family: "Font Awesome 5 Free";
	position:		absolute;
	top:			.6rem;
	right:			1rem;
	color:			#fff;
}


/* 画像Accordion */
.accordion-item {
  margin: 20px 0;
  overflow: hidden;
}

.accordion-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.accordion-label {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 32.3%;           /* ←ここでアスペクト比を決める（例: 2.5:1） */
  background-image: url('https://kanagawa-style.com/wp-content/themes/style/assets/img/anshin_banner.jpg');   /* ←「開」の画像 */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
}

/* 開いたときの画像切り替え */
.accordion-input:checked + .accordion-label {
  background-image: url('https://kanagawa-style.com/wp-content/themes/style/assets/img/anshin_banner_toji.jpg');   /* ←「閉」の画像 */
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 3vw;
}

.accordion-input:checked ~ .accordion-content {
  max-height: 2000px;   /* 十分大きい値 */
  padding: 5vw 3vw;
}

/* 厳しい審査 */
.accordion-item2 {
  margin: 20px 0;
  border: 4px solid #f8aac1;
  background-color: #ffeef8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.accordion-label2 {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 32.3%;           /* ←ここでアスペクト比を決める（例: 2.5:1） */
  background-image: url('https://kanagawa-style.com/wp-content/themes/style/assets/img/img_kibishinsa.jpg');   /* ←「開」の画像 */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
}

.accordion-content2 {
  max-height: 0;
  overflow: hidden;
  background: #ffeef8;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 3vw;
}

.accordion-input:checked ~ .accordion-content2 {
  max-height: 2000px;   /* 十分大きい値 */
  padding: 5vw 3vw;
}


/* ピンクバッジ */
.badge-pink {
    color: #fff;
    background-color: #f17192;
}

/* バロメーター見出し */
.baro {
	position: relative;
	font-weight: 600;
	color: #343a40;
	border: 3px solid #f17192;
	border-radius: 15px;
	line-height: 1.4;
	padding: 0.5em 0 0.5em 0;
	text-align: center;
	margin-top:1rem;
}

.baroicon {
	font-weight: 900;
	color: #f17192;
	position: absolute; 
	top: 0.1em;
	left: 0.2em;
}

/* バロメーター小見出し */
.baroko {
	position: relative;
	font-weight: 600;
	color: #343a40;
	line-height: 1.4;
	text-align: center;
	padding-top: 0.5rem;
}

/* ピンク帯見出し */
.pink_obi {
	background: #f17192;/*背景色*/
	color: white;
	text-align: center;
	padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

/* リスト */
.ShopRec {
  margin-top:1.5rem;
}

.ShopRec .ShopRecInfo {
  display: flex;
}

.ShopRec .ShopRecInfo dt {
  margin-bottom: 1rem;
}

.ShopRec .ShopRecInfo dd {
  margin: 0 0 1rem 1rem;
}

.sarari{
	color:#f17192;
	font-size:80%;
	font-weight: 700;
}

/* ピンクデカ文字 */
.mo-pinkbig{
	color:#f17192;
	font-size:150%;
	font-weight: 700;
	margin-top: -5px !important;
}

/* ピンク文字 */
.mo-pink{
	color:#f17192;
}

/* 応募ボタン */
.oubo-button{
	background-color: #ffeef8;
}

.apply-buttons {
    max-width: 480px;
    margin: 0 auto;
}

.apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.15rem;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
}

.apply-btn i {
    font-size: 1.8rem;
}

.submessage {
    font-size: 0.8rem;
	font-weight: bold;
}

.linemessage {
    font-size: 0.6rem;
	font-weight: bold;
	color:#00c853;
}

/* 各ボタンの色 */
.apply-btn.oubo  { background: #f17192; }
.apply-btn.line { background: #00c853; color: white; } /* LINE緑 */
.apply-btn.mute  { background: #DDD; }

.apply-btn.line small {
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
    font-weight: normal;
}

/* 一覧ボタン */
.list-buttons {
    width: 100%;
    margin: 0 auto;
}

.list-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.15rem;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
}

.card-footer{
	display: flex;          /* 横並びの基本 */
    flex-direction: row;    /* 明示的に横（columnだと縦になる） */
    justify-content: space-between;  /* 左寄せと右寄せでキレイに */
    align-items: center;    /* 縦方向の中央揃え */
    gap: 10px;              /* ボタン間の隙間 */
    flex-wrap: wrap;        /* スマホで狭くなったら下に折り返し */
}

.shosai-btn {
	display: flex;     
    flex: 1;  
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.15rem;
    color: #343a40;
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
	background: #dedede;
}

.card-title a, .card-title a:hover, .shosai-btn:hover, .simplefavorite-button:hover{
    color: #f17192;
}

.simplefavorite-button{
	display: flex;     
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 2rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
	white-space: nowrap;
	font-family: "Font Awesome 5 Free";
	cursor: pointer;
}

.list-btn i {
    font-size: 1.8rem;
}

/* 各ボタンの色 */
.list-btn.oubo  { background: #f17192; }
.list-btn.line { background: #00c853; color: white; } /* LINE緑 */
.list-btn.mute  { background: #DDD; }

.list-btn.line small {
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
    font-weight: normal;
}



/* キャッチコピー折りたたみ */

.special-message {
    line-height: 1.8;
    font-size: 1.1em;
}

.special-message .first-line {
    color: #f17192;
    font-weight: 700;
}

/* 1行だけのときは<br>がつかないので余白調整 */
.special-message .first-line:not(:has(+ *)) {
    display: block;
    margin-bottom: 0;
}

/* 続きを読む部分 */
.readmore-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.readmore-toggle {
    font-size: 0.95em;
	display: block;
    padding: 8px;
    color: #343a40;
    font-weight: 600;
    cursor: pointer;
	background-image: linear-gradient(90deg, rgba(200, 200, 200, 1), rgba(255, 255, 255, 1), rgba(200, 200, 200, 1));
	text-align: center;
}

.readmore-toggle:hover {
    background: #f17192;
	color: #fff;
    transform: translateY(-1px);
	text-decoration: none;
}

/* テーブル */

.tbl-r02 th {
  background: #f8aac1;
  border: solid 1px #fff;
  color: #fff;
  padding: 5px;
  width: 8rem;
  text-align: center;
}
.tbl-r02 td {
	border: solid 1px #ccc;
	padding: 5px;
}

@media screen and (max-width: 640px) {
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
	border-bottom: none;
    display: block;
    width: 100%;
	border: solid 1px #fff;
  }
}

.super-search-form .form-label {
    font-size: 1rem;
	margin-bottom: 0;
	color:#f8aac1;
}

.super-search-form .form-select{
    font-size: 0.95rem;
	width: 100%;
	padding: .5rem
}
.btn-pink {
	background-color: #f8aac1;
    border: none !important;
	border-radius: 12px;
}
.btn-pink:hover {
	background-color: #f17192;
}

.tag-btn.active {
    background: #f17192 !important;
    color: white !important;
    border-color: #f17192 !important;
}
#selected-tags {
    background-color: #fff;
    padding: 15px;
}
.badge.bg-pink {
    background: #f17192 !important;
}
.btn-close-white {
    font-size: 0.7rem;
    background: none;
    border: none;
    color: white;
}

#tags-list {
    display: inline-flex;
    gap: 8px !important;           /* タグ同士の隙間 */
    flex-wrap: wrap;               /* 折り返しOK */
    align-items: center;
}

#tags-list .badge {
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    display: inline-flex;
    align-items: center;
}

#tags-list .btn-close-white {
    margin-left: 6px !important;
    font-size: 0.8rem !important;
}

.mds_keep {
  border-bottom: solid 1px #f17192;
  padding: 10px 0 10px 0;    
}

.bookmark-btn:hover {
    transform: scale(1.1);
}


.footer-right ul li{
  list-style:none;
}

.footer-right ul{
  padding-left:0;
}


@media screen and (max-width: 600px){
  .pc{
    display: none;
  }
}
@media screen and (min-width: 600px){
  .sp{
    display: none;
  }
}