@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* --------------------
 *  メインビジュアル
 * -------------------- */
/* トップ枠 */
.profile-box_r{
  margin: 1.2em 10px;
  padding: 0.75em;
  background-color: #fc6955;
  border: dotted 2px #ff8975;
  box-shadow: 0 0 0 10px #ffc5b8/*#ffebee*/, 0 0 0 25px #fc6955/*#e57373*/;
  border-radius: 4px;
}

@media (min-width: 600px) {
    .profile-box_r {
        --swl-box_padding: 2em 1em;
    }
}

.profile-box_r p{
  margin: 0;
  padding: 0;
}

/** テキストボックスへイラスト配置 **/
/* 通常表示（PCなど） 
.custom-image-wrapper {
    position: relative;
    z-index: 0;
}
.custom-image-wrapper p {
    position: relative;
    z-index: 2;
}
.custom-image01 {
  position: absolute;
  width: 120px;
  bottom: 0px;
  right: -10px;
}
/* スマホ・タブレット向け（幅768px以下） 
@media (max-width: 768px) {
  .custom-image01 {
    bottom: 50px;
    right: 10px;
    left: auto;
    width: 100px;
  }
} */

/** トップ右写真 **/
/* 影（PC向け） */
.wp-block-media-text__media img,
.wp-block-media-text__media .box-shadow img {
    display: block;
    box-shadow: 6px 6px 20px 0 rgba(211, 235, 242, 0.6); /* 少し濃く＆広げる */
}
/* 影（タブレット以下） */
@media screen and (max-width: 1024px) {
  .wp-block-media-text__media img,
  .wp-block-media-text__media .box-shadow img {
      box-shadow: 4px 5px 16px 0 rgba(211, 235, 242, 0.5);
  }
}
/* 影（スマホ以下） */
@media screen and (max-width: 768px) {
  .wp-block-media-text__media img,
  .wp-block-media-text__media .box-shadow img {
      box-shadow: 2px 3px 12px 0 rgba(211, 235, 242, 0.4);
  }
}

/** 液体シェイプ風* */
.custom-media-text .wp-block-media-text__media {
  position: relative;
  display: inline-block;
}
/* 写真を液体シェイプ形 */
.custom-media-text .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
	border-radius: 72% 42% 45% 25% / 32% 64% 66% 38%;
}

/** イラスト配置（疑似要素使用）**/
/* 右上イラスト（写真の外にはみ出しても隠れないように） */
.custom-media-text .wp-block-media-text__media::before {
  content: "";
  position: absolute;
  top: -4%;
  right: -4%;
  width: 28%;
	aspect-ratio: 1 / 1;
	background-image: url("https://sowers-gr.com/kkids/tochigi/wp-content/uploads/photo-kazari_top01.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2; /* 写真の上に重ねる */
  pointer-events: none;
}

/* 下部イラスト */
.custom-media-text .wp-block-media-text__media::after {
  content: "";
  position: absolute;
  bottom: 0; /* ← 写真の下端に固定 */
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  height: 24%;
  background-image: url("https://sowers-gr.com/kkids/tochigi/wp-content/uploads/photo_kazari-bottom01.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center; /* 下端に揃える */
  z-index: 2;
  pointer-events: none;
}

/* ============================
   スマホ対応
   ============================ */
@media screen and (max-width: 768px) {
	/* 写真サイズ調整（存在感アップ） */
	.is-style-broken.has-media-on-the-right .wp-block-media-text__media img {
		width: 100%; 
		max-width: 600px; 
		display: block; 
		margin: 0 auto; 
		aspect-ratio: 1 / 1; 
		object-fit: cover; 
		object-position: center; 
		border-radius: 10%;
	}
	
	/* 右上イラスト（スマホでは少し大きめに） */ 
	.custom-media-text .wp-block-media-text__media::before {
		width: 38%;
		top: -6%;
		right: -6%; 
	}
}

/* 下部イラスト表示 */
/* タブレットサイズ (768px) までは下部位置 */
@media screen and (max-width: 768px) {
  .custom-media-text .wp-block-media-text__media::after {
    bottom: 0;
    top: auto;
  }
}

/* スマホサイズ (600px以下など) の位置 */
@media screen and (max-width: 600px) {
  .custom-media-text .wp-block-media-text__media::after {
    top: auto;
    bottom: 20%;
  }
}

/*****************************************/
/* ヘッダー
/*****************************************/
/* ヘッダーに背景画像を挿入*/
@media (min-width: 960px) {
    .-parallel .l-header__inner {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
		background-image: url(https://sowers-gr.com/kkids/tochigi/wp-content/uploads/kkids-header_background01.png);
    }
}

/* ヘッダータイトル背景画像 */
@media (min-width: 600px){
	.l-topTitleArea {
	min-height: 180px;
}
}

/* --------------------
 *  トップページ 
 * -------------------- */
/* 施設紹介スライダー */
.loop-slider {
    display: flex;
    overflow: hidden;
    gap: 1.5rem; /* 画像間の余白を指定 */
}
.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
    display: contents;
}
.loop-slider .swell-block-columns__inner {
    flex-wrap: nowrap;
    animation: infinity-scroll-left 60s infinite linear; /* アニメーションの時間を指定 */
}
.loop-slider .swell-block-column figure {
    width: 500px; /* 画像の横幅を指定（パソコン） */
    position: relative;
}
.loop-slider .swell-block-column figure::before {
    padding-top: 65%; /* 画像の縦横比を指定 */
    display: block;
    content: "";
}
.loop-slider .swell-block-column figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 959px) {
    .loop-slider .swell-block-column figure {
        width: 200px; /* 画像の横幅を指定（スマホ） */
    }
}
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* NEWS */
.p-postListWrap.custom-square .p-postList__thumb {
  box-shadow: none;
}
.p-postListWrap.custom-square .c-postThumb__figure {
  aspect-ratio: 1/1;
  border-radius: 50% 70% 60% 70%/ 60% 50% 70% 60%;
}

/* --------------------
 *  お問い合わせページ
 * -------------------- */
/* フォーム全体のスタイリング */
.custom-form {
    max-width: 90%; /* フォーム全体の最大幅 */
    margin: 0 auto; /* 中央に配置 */
    font-family: 'Arial', sans-serif; /* フォーム全体のフォントを指定 */
    color: #333; /* テキストの色 */
}
.custom-form label {
    display: inline-block; /* ラベルを独立したブロック要素として扱う */
    margin-bottom: 8px; /* ラベル下に余白を追加して間隔を調整 */
    font-weight: bold; /* ラベルの文字を強調 */
    font-size: 14px; /* ラベルの文字サイズを調整 */
}
/* 必須ラベルのスタイリング */
.custom-form .required {
    display: inline-block; /* 必須ラベルをインラインで表示 */
    margin-left: 5px; /* ラベルと必須マークの間隔を調整 */
    padding: 2px 6px; /* 内側の余白を設定して視認性を向上 */
    font-size: 12px; /* 必須ラベルの文字サイズを指定 */
    color: #fff; /* テキスト色を白に設定 */
	background-color: var(--color_main); /* 必須ラベルの背景色 */
    border-radius: 3px; /* ラベルを角丸にして柔らかい印象に */
    /*font-weight: bold; /* ラベルの文字を太字に */
}
/* 入力フィールド */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea {
    width: 100%; /* フィールド幅をフォームに合わせて最大化 */
    padding: 10px; /* 内側の余白を設定して入力しやすくする */
    margin-bottom: 30px; /* 各フィールドの下に余白を設定して間隔を広げる */
	border: 2px solid #fec7bc;
    border-radius: 5px; /* 入力フィールドを角丸に */
	background: #fffdfa;
    font-size: 14px; /* フィールド内テキストのサイズを指定 */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* フォーカス時のスムーズな変化を設定 */
}
.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus {
    border-color: #E44141; /* フォーカス時の枠線色を強調 */
    outline: none; /* ブラウザデフォルトのフォーカス枠を削除 */
    background: #fffdfa; /* フォーカス時の背景色 */
}
.custom-form .wpcf7-form-control-wrap {
	font-size: 14px;
}
.custom-form .wpcf7-form-control-wrap span {
	margin-bottom: 30px;
}
/* 送信ボタンの調整 */
.custom-form input[type="submit"] {
    display: block; /* ブロック要素として中央揃えしやすく設定 */
    width: 80%; /* ボタン幅を適度に制限 */
    margin: 0 auto; /* ボタンを中央寄せ */
    padding: 12px 20px; /* ボタン内側の余白を調整 */
    border: none; /* 枠線を削除してシンプルなデザインに */
    border-radius: 25px; /* ボタンを丸みのある形状に設定 */
	background: #e44141; /* ボタン背景にメインカラーの濃いを適用 */
    color: #fff; /* ボタン文字を白に設定 */
    font-size: 16px; /* ボタン文字のサイズを指定 */
    cursor: pointer; /* ボタンにホバーポインタを表示 */
    transition: background-color 0.3s ease; /* ホバー時の背景色変更をスムーズに */
}
.custom-form input[type="submit"]:hover {
	background: var(--color_main); /* ボタンにホバー色 */
}

/* --------------------
 コーヒータイムデザイン
-------------------- */
/* 見出し */
.infoTtl {
    position: relative;
    padding: 1rem;
    border-radius: 10px;
	border: 1px solid #987b51;
    background-color: #fff;
    font-size: 18px;
}
/* 通常時（デスクトップなど）：左横の中央から「／」の根元を調整 */
.infoTtl:after {
    position: absolute;
    top: 50%;
	left: -32px;
    transform: translateY(-50%) skew(-30deg);
    height: 28px;
    width: 24px;
	border-right: 2px solid #987b51;
    content: "";
}
.infoTtl p {
    line-height: 1.5;
}

/* モバイル・タブレット共通（画面幅が768px以下の場合）：上の中央に「／」 */
@media (max-width: 768px) {
    .infoTtl:after {
        top: -30px; /* 要素の上端からの距離を調整 */
        left: 50%; /* 親要素の水平方向の中央に合わせる */
        transform: translateX(-50%) skew(-30deg); /* X軸の中央揃えと「／」の傾斜 */
        height: 28px;
        width: 16px;
		border-right: 2px solid #987b51; /* 「／」の形を作るボーダー */
        content: "";
    }
}

/* --------------------
 ノート全体のボックスデザイン
-------------------- */
.note {
  position: relative;
  color: #F09F4D;
  margin: 2em 0;
  padding: 2em 1em 2em 1em;
  background: #fff;
  border: 1px solid #F09F4D;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ピン風デザイン（左右上） */
.note::before,
.note::after {
  content: "";
  position: absolute;
	width: 24px;
	height: 24px;
  background-color: #ea5548;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* 左上ピン */
.note::before {
  top: -10px;
  left: -10px;
}

/* 右上ピン */
.note::after {
  top: -10px;
  right: -10px;
}

/* レスポンシブ調整 */
@media screen and (max-width: 1024px) {
  .note::before,
  .note::after {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    top: -8px;
  }
  .note::before { left: -8px; }
  .note::after { right: -8px; }
}

/* --------------------
 点線風の背景装飾（原稿用紙風）
-------------------- */
/* ボックスデザイン */
.note{
	color: #555;
  margin: 2em 0;
  border: solid 0px #ea5548;
  padding: 0.3em 1em 2em 1em;
  border-radius: 7px;
}
.note-dashed p {
  background-image: linear-gradient(90deg, rgba(234, 85, 72, 0) 0%, rgba(234, 85, 72, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(234, 85, 72, 0) 0%, rgba(234, 85, 72, 0) 95%, #ea5548 100%);
    background-size: 8px 100%, 100% 2.5em;
    line-height: 2.5;
    margin: 0;
}

/* --------------------
 *  ページ共通
 * -------------------- */
/**   グローバルナビ  **/
/* PC用メニュー：アイコンを上に */
.c-gnav > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /*font-size: 16px;*/
}
.c-gnav .ttl {
    color: inherit;
    line-height: 1.8;
    position: relative;
    z-index: 1
}
.c-gnav > li > a .menu-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.-parallel .l-header__gnav .c-gnav>li>a {
padding: 20px 12px;
}
/* 現在メニューの強調表示（アイコンの色調整など） */
.c-gnav > li.current-menu-item a .menu-icon {
  filter: brightness(1.2) saturate(1.3);
}
/* 文字ホバー */
.c-gnav > li:hover > a, .c-gnav > .-current > a {
background: transparent;
color: #ff8080;
transition: all .25s;
}
/* ハンバーガーメニュー内のリストアイテム（SP） */
.swell-menu-drawer ul.menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 12px 16px;
  font-size: 16px;
}
/* アイコン画像の調整 */
.swell-menu-drawer ul.menu > li > a .menu-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
/* 表示中のページに対して、アイコンや文字色を変える */
.swell-menu-drawer ul.menu > li.current-menu-item > a {
  color: #ff0000; /* 好きな色に */
  font-weight: bold;
}
.swell-menu-drawer ul.menu > li.current-menu-item > a img.menu-icon {
  filter: brightness(1.2) saturate(1.5);
}
/*視認性アップのためのアニメーション追加*/
.swell-menu-drawer ul.menu > li > a:hover {
  opacity: 0.8;
  transition: opacity 0.3s;
}

/** トップへ戻る **/
.p-fixBtnWrap {
  right: 0.5em;
}
#pagetop {
  background: url("https://sowers-gr.com/kkids/tochigi/wp-content/uploads/text_top.png") no-repeat center;
  background-size: contain;
  border: none;
  box-shadow: none;
  opacity: 1;
  border-radius: 0;
  width: 100px; /*サイズ調整*/
  height: 80px; /*サイズ調整*/
}
@media (min-width: 960px) {
  #pagetop:hover {
    background-color: transparent !important;
    color: inherit !important;
  }
}
#pagetop i {
  display: none;
}
#pagetop .c-fixBtn__label {
  margin: 0;
  position: absolute;
  bottom: -15px;
}

/* SWELLボタン追加カラー */
.pink_ {
	--the-btn-color: #ec5196;
	--the-btn-color2: #ffacac;
	--the-solid-shadow: rgba(255,0,128,1);
}
.yellow_ {
	--the-btn-color: #ffcc4b;
	--the-btn-color2: #ffb90b;
	--the-solid-shadow: rgba(204,161,31,1);
}
.orange_ {
	--the-btn-color: #f08300;
	--the-btn-color2: #f6ad49;
	--the-solid-shadow: rgba(179,98,0,1);
}
.mizuiro_ {
	--the-btn-color: #34a6ea;
	--the-btn-color2: #9dd3f4;
	--the-solid-shadow: rgba(19,123,185,1);
}
.midori_ {
	--the-btn-color: #00512b;
	--the-btn-color2: #008a48;
	--the-solid-shadow: rgba(0,64,0,1);
}
.rightgreen_ {
	--the-btn-color: #009e87;
	--the-btn-color2: #408080;
	--the-solid-shadow: rgba(19,123,185,1);
}
.yellow-green_ {
	--the-btn-color: #33a15d;
	--the-btn-color2: #008000;
	--the-solid-shadow: rgba(8,126,53,1);
}
.purple_ {
	--the-btn-color: #522f60;
	--the-btn-color2: #a59aca;
	--the-solid-shadow: rgba(44,25,51,1);
}
.floral-white_ {
	--the-btn-color: #fffdfa;
	--the-btn-color2: #f0fff0;
	--the-solid-shadow: rgba(0,48,0,1);
}
.floral-white_ a,
.floral-white_ .wp-block-button__link {
  color: #009e87 !important;
}

/* 写真の並び順 */
/* sw */
@media (max-width: 768px)  {
.swell-col-reverse .swell-block-columns__inner{
flex-direction: column-reverse; 
}
}
/* vk */
@media screen and (max-width:781px){
  .reverse-box{
    flex-direction: column-reverse;
  }
}

/* コンテンツエリア 
.l-content {
    margin: 0 auto 0em;
}*/

/* コンテンツ上部余白削除 */
@media (min-width: 600px) {
    .l-content {
        padding-top: 1.2em;
    }
}

/* ヘッダータイトル部余白調整 */
@media (min-width: 600px) {
    .l-topTitleArea {
        min-height: 160px;
        padding: 1em 0 0;
    }
}

/** コンテンツタイトル部分 **/
/* h1見出し */
.c-pageTitle {
  font-size: 1.8em;
  color: #4d9bc1;
  line-height: 1.2;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0,0,0,.6));
  margin-bottom: calc(1em + 20px);
}

/* ページタイトル文字色 */
.l-topTitleArea__body {
    color: #D32F2F;
	/*top:-24px;*/
}
.l-topTitleArea .c-postTitle__date {
    border-color: #D32F2F;
}
.l-topTitleArea .c-categoryList, .l-topTitleArea .c-tagList {
    color: #D32F2F;
}
.l-topTitleArea .c-categoryList__link {
    border: 1px solid #D32F2F;
}
.l-topTitleArea .c-categoryList__link, .l-topTitleArea .c-tagList__link {
    background: none;
    color: #D32F2F;
}

/* --------------------
 *  フッター
 * -------------------- */
/* フッター前余白 */
.w-beforeFooter {
    margin: 1em auto 3em;
}

/* フッターメニュー縦線なし */
.l-footer__nav li:first-child a {
border-left: none;
}
.l-footer__nav a {
border: none;
}

/* フッター直前リンク */
.link-color a:hover{
	color:#fc6955;
}

/* --------------------
   simple gallery
-------------------- */
#slb_viewer_wrap .slb_theme_slb_baseline * {
    color: #333;
}

#slb_viewer_wrap .slb_theme_slb_baseline .slb_data_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	margin-top: 16px;
}

#slb_viewer_wrap .slb_theme_slb_default .slb_container .slb_data_title {
	font-size: 1rem;
}

#slb_viewer_wrap .slb_theme_slb_default .slb_data_desc {
    font-size: 0.875rem;
}

#slb_viewer_wrap .slb_theme_slb_default .slb_container .slb_group_status {
    font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
    font-style: normal;
	font-size: 14px;
	color: #333;
}

#slb_viewer_wrap .slb_theme_slb_default .slb_data_desc {
    flex-basis: 100%;
}

/*ライトボックスの画像表示をスマホで中央寄せ*/
@media only screen and (max-width: 480px) {
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
transform: translateX(50vw) translateX(-50%);
transform: translateY(50vh) translateY(-50%);
}
}

/* 装飾リスト（バツマーク）を★に置き換え */
.is-style-bad_list li::before {
  content: "★" !important;
}