@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く

/************************************
****　おすすめカード
************************************/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
div#content.content.cf{
margin-top:0;
}
.widget-entry-cards .a-wrap{
transition: all .2s;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#ffffff;/*Cocoon設定「全体」の「サイト背景色」に合わせてください*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}
.body .navi-entry-cards{
margin-bottom: 0;
}

.tagline{
font-weight: bold;
	background: none;
}


.tagline:after {
   content: "2002年から開設している調剤薬局です。";
   display: block;
}

.appeal-title:after {
   content: "現在、薬剤師を大募集中！";
   display: block;
}

.cstm-blk-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* ラベル（見出）も中央寄せにする */
.wp-block-cocoon-blocks-caption-box-1 .caption-box-label {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 中央寄せのpタグ内のiframeを横幅100%にし、高さを固定する */
.has-text-align-center iframe {
    width: 100%;
    height: 450px; /* 高さを固定 */
    max-width: 100%; /* 最大幅も100%にする */
    display: block; /* 確実にブロック要素として扱う */
    margin: 0 auto; /* 中央寄せ */
}

/* アクセスマップ見出しのマージンを削除 */
.wp-block-heading.has-text-align-center {
    margin-top: 0; /* 上のマージンを削除 */
    margin-bottom: 0; /* 下のマージンを削除 */
}

/* iframe（Googleマップ）との隙間を調整 */
.has-text-align-center + iframe {
    margin-top: 0; /* タイトルの下にあるiframeの上の隙間を削除 */
}

/* アクセスマップ見出しのマージンを調整 */
.wp-block-heading.has-text-align-center {
    margin: 0; /* 上下左右のマージンをゼロに */
}

/* ========== circle & wave cover-blk-ver start ==========　*/
/* v1.0.3 add */
:where(.cstm-cover-path-lower-cir, .cstm-cover-path-upper-cir, .cstm-cover-path-lower-wave, .cstm-cover-path-upper-wave) {
  padding: 0 !important;
  min-height: unset !important;
}

:where(.svg-upper-cir, .svg-upper-wave) {
  transform: translateY(1px);
}

:where(.svg-lower-cir, .svg-lower-wave) {
  transform: translateY(-1px);
}

:where(.cstm-cover-path-lower-cir, .cstm-cover-path-upper-cir) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 6vmin;
}

:where(.cstm-cover-path-lower-wave, .cstm-cover-path-upper-wave) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 7vmin;
}

.cstm-cover-path-upper-cir,
.cstm-cover-path-upper-wave {
  margin-bottom: 0 !important;
}

.page .date-tags {
  display: none;
}

/* .cstm-cover-path-upper-wave,.cstm-cover-path-lower-wave,
.cstm-cover-path-upper-cir, .cstm-cover-path-lower-cirの次のカバーブロック内の上の余白を半分に */
.cstm-cover-path-upper-wave+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-lower-wave+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-upper-cir+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-cover-path-lower-cir+.wp-block-cover>.wp-block-cover__inner-container {
  padding-top: 3rem;
}

/* ========== circle & wave cover-blk-ver end ==========　*/

/* フロントページのメインコンテンツ上下の余白対策 */

/* サイト型　フロントページのメインコンテンツ上下の余白対策 */
.body.skin-grayish.front-top-page .breadcrumb,
.body.skin-grayish.front-top-page .article-header,
.body.skin-grayish.front-top-page .pr-label-s {
  display: none;
}

/* サイト型のみ　ブログ型では無効 */
.body.skin-grayish.front-top-page:not(.blog) .content .main {
  padding-top: 0;
  padding-bottom: 0;
}

/* サイト型のみ　ブログ型では無効 */
.body.skin-grayish.front-top-page:not(.blog) .content {
  margin-top: 0;
}

/* サイト型のみ */
.body.skin-grayish.front-top-page .entry-content {
  margin-top: 0;
  margin-bottom: 0;
}

/* サイト型のみ */
.body.skin-grayish.front-top-page .article {
  margin-bottom: 0;
}

/* フロントページのメインコンテンツ上下の余白対策 end*/

/* アピールエリア全体に背景画像とドットマスクを適用 */
#appeal {
    background-size: cover;
    position: relative;
}

#appeal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 2px 2px; /* ドットの大きさを調整 */
    opacity: 0.5; /* 透明度を調整 */
    pointer-events: none;
}

/* appeal-content 内の要素に白い背景を適用し、ドットマスクを除外 */
.appeal-content {
    position: relative;
    z-index: 2; /* ドットマスクより前に表示 */
    background-color: white; /* 背景色を白に設定 */
    padding: 20px; /* 内容に余白を追加 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 必要に応じて影を追加 */
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* サイトタイトルの文字サイズを強制的に変更 */
.site-name-text {
    font-size: 25px !important; /* 必ずこのサイズを適用 */

}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/* サイトタイトルの文字サイズを強制的に変更 */
.site-name-text {
    font-size: 25px !important; /* 必ずこのサイズを適用 */

}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
 .skin-grayish.front-top-page .container .header-container .header {
 	background-image: url(https://kenai.jp/wp-content/uploads/2026/04/b0ee044e084e4e8dc738ecf6e654aa11.png);
	background-position: center center;
 }
 .skin-grayish.front-top-page .container .header-container .header {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦に並べる */
}


}	

.g-recaptcha div {
    display: inline-block;
}