@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** フロントページ 下層 共通
************************************/
.keya-about {max-width: 880px; margin: 60px auto 0;}
.keya-about_inner {display: flex; flex-wrap: wrap; margin: 0 auto;}
.keya-about_inner p {margin-top: 20px;}
.keya-about_picture {-webkit-box-flex: 0; flex: auto; margin-top: 41px; max-width: 360px; position: relative;}
.keya-about_picture img {width: 100%;}
.keya-about_picture::before {top: -40px; right: 180px; bottom: 160px; left: -40px; content: ""; background: url('https://keyassetsnpo-kawasaki.jp/wp-content/uploads/2023/03/img01-bg.webp') repeat 0 0; background-size: 180px 70px; z-index: -1; position: absolute;}
.keya-about_picture::after {top: 105px; right: -35px; bottom: -35px; left: 17px; content: ""; background: url('https://keyassetsnpo-kawasaki.jp/wp-content/uploads/2023/03/img01-bg2.webp') repeat 0 0; background-size: 12px; z-index: -1; position: absolute;}
.keya-about_body {max-width: 480px; position: relative; margin-left: auto; padding: 0 0 0 20px;}
.keya-about_body::before {width: 140px; height: 35px; background-image: url('https://keyassetsnpo-kawasaki.jp/wp-content/uploads/2023/03/txt-about.webp'); top: -30px; left: -20px; content: ""; background-size: contain; background-repeat: no-repeat; position: absolute;}
.article .keya-about_heading {font-size: 1.8rem; font-weight: 600; line-height: 2; color: #e2812b; background: none; padding: 0; text-align: center;}
.keya-about_text {text-align: center;}
.keya-about_text a.keya-about_button {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; border: solid 1px #117c69; max-width: 300px; margin: 0 auto; text-decoration: none; background-color: #117c69; color: #fff; border-radius: 6px;}
.keya-about_text a:hover.keya-about_button {transform: rotate(-3deg); background-color: #fff; color: #117c69;}

h2.midashi-h2 {padding: 0.8em 0.5em; border-left: 10px solid #42AAC7; background: #DFF1F6;}
h1.entry-title {font-size: 1.8rem; font-weight: 600; line-height: 2; color: #e2812b; background: none; padding: 0; text-align: center;}

.logo-image a span {max-width: 1080px;}
.logo-image a span img {width: 100%;}
header h1 {display: none;}
#content .wrap {max-width: 1000px;}
#toc {display: none;}
.video-container {margin: 0 auto;}


/***　装飾ボックス　***/
.fashionable-box {margin: 1em 10px; padding: 1em; background-color: #fff; border: dashed 3px #eed6c3; box-shadow: 0 0 0 10px #fff; border-radius: 8px;}
.fashionable-box p {margin: 0;}

/***　マーカー黄色　***/
.yellow-line {background:linear-gradient(transparent 60%, #ff6 60%);}
.yellow-line b {font-size: 1.4em;}

/***　PC SP 切り替え　***/
.dayori-pc {display: block;}
.dayori-sp {display: none;}


.mbtc {margin-bottom: 0.9em; text-align: center;}
.mt40 {margin-top: 40px;}




/************************************
** フロントページ
************************************/
.kokuchi {margin: 0 auto; max-width: 800px;}
.mirai {margin: 60px 0 0;}
#whats_satooya {margin: 60px 0 0; background-color: #eed6c3; padding: 30px;}
.keya-genjyou {max-width: 880px; background: #fff; border-radius: 8px; padding: 20px;}
.genjyou-img {max-width: 300px; margin: 0 auto;}
#youikusatooya {margin: 80px 0 0;}

/***　お知らせ　***/
#news {margin: 80px 0 0;}
.news-box {border-radius: 20px; border: solid 2px #efd7c4; padding: 30px 20px 20px;}
.news-box h2 {border-radius: inherit; background-color: inherit; margin: 0; padding: 5px 25px 25px;}
.news-box h2 span {border-left: solid 8px #efd7c4; padding: 0.25em 0.5em;}
.widget-entry-cards {padding: 0 20px;}
.widget-entry-cards .a-wrap {border-bottom: 1px solid #ccc; background: #fff;}
.card-arrow .card-content .display-none {display: inline-block;}
.card-arrow .card-content .display-none span {display: inline-block; font-size: 14px;}

.front-notice-wrap {background-color: #fafad9; padding: 20px; border-radius: 12px;}
.front-notice-wrap-inner {border: solid 4px #888; border-radius: 8px; padding: 20px;}
.front-notice-wrap-inner h3 {border: none; font-size: 20px; margin: 0 0 15px; padding: 0;}
.front-notice-wrap-inner p {line-height: 1.6;}
.front-notice-wrap-inner p span {color: red; font-weight: bold;}
.front-notice-wrap-inner p.careful {color: red; font-size: 14px;}
.fnw-inner-waku {max-width: 400px; margin: 0 auto; padding: 10px 20px; background-color: #d1ecf1; border-radius: 8px;}
.fnw-inner-waku ul {margin: 0; list-style-type: none; padding: 0;}
.fnw-inner-waku ul li {margin: 0; line-height: 1.6;}
.fnw-inner-waku ul li a {transition: 0.3s;}
.fnw-inner-waku ul li a:hover {color: #f07c00;}

@media only screen and (max-width:767px){
	.front-notice-wrap {padding: 10px;}
	.front-notice-wrap-inner {border: solid 2px #888; padding: 15px;}
	.front-notice-wrap-inner h3 {font-size: 18px;}
	.front-notice-wrap-inner p {font-size: 15px;}
	.fnw-inner-waku ul li {font-size: 15px;}
}


/***　里親おうえんしたい　***/
#ouenshitai {margin: 60px 0 40px; padding: 0 10px;}
#ouenshitai .ouen-box {box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; border-radius: 12px; padding: 30px 10px; max-width: 660px; margin: 0 auto;}
#ouenshitai .ouen-box .ouen-inner {max-width: 620px; text-align: center; margin: 0 auto;}
#ouenshitai .ouen-box .ouen-inner img {max-width: 180px; padding: 0 10px;}


/***　Instagram Feed　***/
.insta-feed {}
#sb_instagram #sbi_images .sbi_item {height: 192.5px;}
.sb_instagram_header.sbi_medium .sbi_header_text h3 {display: none;}

@media only screen and (max-width:767px){
	#sb_instagram #sbi_images .sbi_item {height: 31.1639vw;}
}
@media only screen and (max-width:479px){
	#sb_instagram #sbi_images .sbi_item {height: 45.6158vw}
}


/************************************
** 下層ページ
************************************/
.sec-base {margin: 40px 0 30px;}
.keya-color-text {font-size: 16px; color: #23aab4; font-weight: bold; text-align: center;}
.article h3.keya-about_heading {border: none; margin: 0;}
.info-s-program {background-color: #fff3cd; padding: 20px 20px 30px;}
.info-s-program-box {border: solid 2px #e3802b; border-radius: 12px;}
.info-s-program-box p.info-s-pp {border: none; background-color: #e3802b; color: #fff; border-radius: 8px 8px 0 0; font-size: 20px; font-weight: bold; text-align: center;}
.info-s-program-box p {padding: 10px 8px; background-color: #fff; margin: 0; border-radius: 0 0 12px 12px;}
.info-s-program .col-4 {padding: 10px;}
.event-frame {margin: 30px 0;}
.event-frame .widget-entry-cards {margin-bottom: 40px;}
.event-frame .widget-entry-cards .a-wrap {max-width: 100%; border: none; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 10px;}
.event-frame .widget-entry-cards figure {overflow: hidden; width: 160px; height: 96px;}
.event-frame .widget-entry-cards a figure img {width: 100%; height: 100%; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.event-frame .widget-entry-cards a:hover figure img {-webkit-transform: scale(1.2); transform: scale(1.2);}
.event-frame .new-entry-card-content .new-entry-card-title {font-size: 20px;}
figure.eye-catch {width: 100%;}
figure.eye-catch img {width: 100%;}



/***　ほっこり通信　***/
.hokkori-box ul li {display: inline-block; width: 50%; margin: 0; float: left;}


/***　ＱＡ　***/
.qanda-waku {margin: 30px 0 60px;}
.qanda-qa {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; line-height: 1.6;}
.qestion {background: #fff; padding: 20px 16px 20px 90px; position: relative; height: 100%; min-height: 70px;}
.answer {background: #f3f8ff; padding: 20px; height: auto; margin-bottom: 40px; width: 100%; text-align: left;}
.qestion .ico {background: rgb(44,102,185); background: -moz-linear-gradient(155deg, rgba(44,102,185,1) 0%, rgba(44,102,185,1) 75%, rgba(0,65,157,1) 75%, rgba(0,65,157,1) 100%); background: -webkit-linear-gradient(155deg, rgba(44,102,185,1) 0%, rgba(44,102,185,1) 75%, rgba(0,65,157,1) 75%, rgba(0,65,157,1) 100%); background: linear-gradient(155deg, rgba(44,102,185,1) 0%, rgba(44,102,185,1) 75%, rgba(0,65,157,1) 75%, rgba(0,65,157,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2c66b9",endColorstr="#00419d",GradientType=1); top: 0; left: 0; position: absolute; align-items: center; color: #fff; display: flex; width: 70px; height: 70px; -webkit-justify-content: center; justify-content: center;}
.answer .ico {background: rgb(240,96,96); background: -moz-linear-gradient(155deg, rgba(240,96,96,1) 0%, rgba(240,96,96,1) 75%, rgba(211,60,60,1) 75%, rgba(211,60,60,1) 100%); background: -webkit-linear-gradient(155deg, rgba(240,96,96,1) 0%, rgba(240,96,96,1) 75%, rgba(211,60,60,1) 75%, rgba(211,60,60,1) 100%); background: linear-gradient(155deg, rgba(240,96,96,1) 0%, rgba(240,96,96,1) 75%, rgba(211,60,60,1) 75%, rgba(211,60,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f06060",endColorstr="#d33c3c",GradientType=1); float: left; -webkit-align-items: center; align-items: center; color: #fff; display: -webkit-flex; display: flex; height: 70px; -webkit-justify-content: center; justify-content: center; width: 70px; margin: 0 20px 20px 0;}
.ico img {margin-left: 8px; vertical-align: top; max-width: 100%;}
span.txt {font-size: 18px; font-weight: 500;}
.qanda-zuijikaisai {max-width: 660px; margin: 0 auto;}




/************************************
** Youtubeレスポンシブ
************************************/
.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
	max-width: 620px;
	margin: 0 auto;
	margin-bottom: 40px;
}

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.keya-sns {position: fixed; top: 32%; right: 10px; z-index: 999;}
.keya-sns img {width: 60px;}
.keya-sns a {opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
.keya-sns a:hover {opacity: 0.7;}

ib {display: inline-block;}

.header-logoimg {position: absolute; top: 10%; left: 4%; width: 180px;}


/***　bootstrap　***/
.row-ar {display: flex; flex-wrap: wrap;}
.col-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.col-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}

@media only screen and (max-width:767px){
	.col-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
}

/***　footer　***/
.footer-bottom-logo {top: 0; left: 0;}
.footer-bottom-logo .logo-image a {display: block;}
.footer-bottom-logo .logo-image .site-name-text-link {pointer-events: all;}

.footer-widgets, .footer-widgets-mobile {display: none;}
.footer-widgets a {text-decoration: none;}
.footer-wid-keya {margin-top: 10px; float: left;}
.footer-wid-kawasaki {margin-top: 20px;}
.copy-r {display: none;}

.footer-bottom-logo .logo-image a span.site-name-text img {width: 152px;}


/************************************
** 説明会ページのちょこっと相談
************************************/
#alittle_consultation {margin: 3em 0 1em;}
#alittle_consultation .info-box {text-align: center;}
#alittle_consultation .info-box span {font-weight: bold; color: #5f4b4b;}

.success-title {text-align: center; color: #23aab4; font-weight: bold; font-size: 18px;}

p.ac_explanation {text-align: center; color: #5f4b4b; font-weight: bold; line-height: 1.6;}
p.ac_explanation span {color: #5f4b4b;}
p.ac_explanation span.under-bar {border-bottom: solid 2px #5f4b4b;}
p.ac_explanation_red {text-align: center; color: #ff0000; font-weight: bold; line-height: 1.6;}

.chokotto {text-align: center;}
.chokotto-item {color: #23aab4; font-size: 18px; font-weight: bold; border-top: 2px solid #5f4b4b; border-bottom: 2px solid #5f4b4b; padding: 10px 0;}
.chokotto-item span {display: inline-block; font-size: 16px;}
.chokotto-place {text-align: center; color: #ff6600; font-weight: bold; line-height: 1.3;}
.chokotto-place ib {font-size: 12px;}

.choko-access {text-align: center;}
.choko-access a {display: block; text-align: center; vertical-align: middle; text-decoration: none; max-width: 120px; line-height: 1.4; margin: auto; padding: 5px 10px; font-weight: bold; border: 2px solid #27acd9; background: #27acd9; color: #fff; border-radius: 100vh; transition: 0.5s;}
.choko-access a:hover {color: #27acd9; background: #fff;}


@media screen and (max-width: 767px){
	
}


/************************************
** まんなかフェス2024バナー
************************************/
.mannaka-fes {max-width: 600px; margin: 0 auto 2em;}
.mannaka-fes a img {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.mannaka-fes a:hover img {opacity: 0.7; transition: 0.3s;}
.mannaka-fes p {margin: 0;}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
	.footer-left, .footer-center, .footer-right {width: 100%; padding: 0 16px;}
	.footer-widgets, .footer-widgets-mobile {text-align: center;}
	.footer-wid-keya {margin-top: 0; float: none;}
	.footer-wid-kawasaki {margin-top: 0;}
	h3.widget-footer-center-title.footer-title {display: none;}
	h3.widget-footer-right-title.footer-title {display: none;}
	.copy-r {display: inline-block;}
	.info-s-program-box {height: 100%;}
	.info-s-program .col-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.info-s-program-box p.info-s-pp {border-radius: 8px 0px 0 8px; font-size: 18px; line-height: 1.6; text-align: left; float: left; margin-right: 10px; width: 200px;}
	.info-s-program-box p {line-height: 1.6; height: 100%; border-radius: 12px;}
}

/*767px以下*/
@media screen and (max-width: 767px){
	.keya-sns {display: none;}
	.kokuchi {margin: 0 auto;}
	.keya-about_inner {display: block;}
	.keya-about_sp {margin: 60px 0;}
	.keya-about_sp img {max-width: 200px;}
	.keya-about_picture {text-align: center;}
	.keya-about_body {margin: 80px auto 0; padding: 0;}
	.keya-about_body::before {top: -30px; left: 0;}
	.article .keya-about_heading {white-space: inherit; font-size: 1.3rem;}
	.info-s-program-box {height: auto;}
	.info-s-program-box p.info-s-pp {float: none; width: 100%; border-radius: 8px 8px 0 0; text-align: center;}
	.info-s-program-box p {border-radius: 0 0 12px 12px;}
	/***　PC SP 切り替え　***/
	.dayori-pc {display: none;}
	.dayori-sp {display: block;}
	
	.event-frame .new-entry-card-content .new-entry-card-title {font-size: 16px;}
	
	span.txt {font-size: 16px;}
}

/*548px以下*/
@media screen and (max-width: 548px){
	.hokkori-box ul {padding: 0;}
	.hokkori-box ul li {width: 100%; text-align: center;}
	header h1.entry-title {font-size: 1.4rem; line-height: 1.4;}
	.widget-entry-cards {padding: 0;}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.header-logoimg{width: 120px;}
	.event-frame .widget-entry-cards figure {width: 120px; height: 74px; margin-right: 10px;}
	.widget-entry-card-content {margin-left: 0;}
}


/************************************
** 川崎市養育里親説明会拡大版
************************************/
.ohanashi-title {text-align: center; font-size: 36px; color: #fff; background-color: #5aabac; margin-top: -11px; line-height: 1.4; padding: 20px 10px; font-weight: 600; margin-bottom: 0;}
.tewotunagu {position: relative; padding: 0 0 60px; margin: 0;}
.tewotunagu-inner {z-index: 2; position: relative; text-align: center; padding: 60px 0; margin: 0 auto; color: #0a7b45; max-width: 820px; font-size: 30px; font-weight: bold;}
.tewotunagu-inner span {background: linear-gradient(transparent 25%, yellow 25%);}
.container-in {position: relative; z-index: 6;}
.container-in p.kangei {background-color: #ffffff85; padding: 10px 20px; border-radius: 12px;}
.container-in .satooya-title-box {border-radius: 12px; padding: 2em; background-color: #f3f7d7dd;}
.satooya-title-box ul, .satooya-title-box ul p {margin: 0; padding: 0;}
.overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}

.nichiji-inner table tr td.nichiji-koumoku {width: 100px;}

/**********  トップページバナー  ***********/
.happyoukai-lp {text-align: center; margin: 0 0 3em;}
.happyoukai-lp a img {width: 100%; height: auto; max-width: 760px; transition: all 0.3s;}
.happyoukai-lp a:hover img {opacity: 0.8;}


@media only screen and (max-width: 860px){
	.nichiji-inner table tr td {font-size: 20px;}
}

@media only screen and (max-width: 767px){
	.ohanashi-title {font-size: 24px;}
	.tewotunagu-inner {font-size: 24px; line-height: 1.6;}
	.satooya-title-box {margin: 0 auto 1em;}
	.container-in .satooya-title-box p {font-size: 16px;}
	.container-in p.kangei {font-size: 16px;}
	.nichiji .container-in img {top: -60px;}
}

@media only screen and (max-width: 480px){
	.ohanashi-title {font-size: 20px;}
	.tewotunagu-inner {font-size: 5vw;}
	.satooya-title-box {padding: 10px 20px;}
	.nichiji .container-in img {width: 18.75vw;}
	.nichiji-inner table tr td.nichiji-koumoku {width: 14%;}
	.nichiji-inner table tr td {font-size: 3.333333vw;}
}


/************************************
** さとおやひろばフォーム
************************************/
.satooya-form {}
.satooya-form img {}
h3.satooya-title {text-align: center; font-size: 1.5em; border: none; margin: 30px 0 0;}
.wpcf7-list-item {line-height: 1.6;}


/************************************
** マグネット立体パズルを作ろう！
************************************/
.form-area {margin: 0 0 3em;}
.form-area p {padding: 0 10px; margin: 0 0 24px;}
.form-area label {display: block;}
.form-area label b {color: #fff; background-color: red; font-size: 13px; font-weight: 500; padding: 1px 12px; border-radius: 4px; margin-left: 10px;}
.form-area label b.any {color: #fff; background-color: blue;}

.gorenraku {width: 90%; margin: 0 auto 3em; background-color: #e1f1f7; padding: 1em; border-left: solid 6px #3997bf; border-right: solid 6px #3997bf;}
.gorenraku p {padding: 1em 1.5em; line-height: 1.4;}
.gorenraku-inner {background-color: #3997bf; padding: 1em; text-align: center;}
.gorenraku-inner p.npo-sitetitle {color: #fff;}
.gorenraku .gorenraku-inner p {padding: 0;}
.gorenraku-inner a {font-size: 1.4em; font-weight: 600; color: #3997bf; display: block; text-decoration: none; background-color: #fff;}

.kihonhousin {min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);}
.kihonhousin ol li {font-size: 13px;}

@media screen and (max-width: 767px){
	.gorenraku {width: 100%;}
	.gorenraku p {padding: 0 0 1em; font-size: 0.9em;}
}