@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
*/

/* Font=========================== */

body{
	font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ja {
	font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ja-b {
	font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.en {
	font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* common======================= */

@media screen and (min-width: 960px) {
	.wide90{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 90%;
}
	.wide80{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 80%;
  min-width: 950px;
}
	.wide70{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 70%;
		min-width: 1000px;
}
}

@media screen and (max-width: 960px){
	.wide90{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 90%;
}
	.wide80{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 95%;
}
	.wide70{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 95%;
}
	.sp-wide90{
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
	width: 92%;
}
}

@media screen and (max-width: 768px) {
  .sp-wide90 {
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 90%;
}
	.sp-wide85 {
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 85%;
}
	.sp-wide80 {
	position: relative;
	top: 0;
	right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	width: 80%;
}
}

.no-kaigyou {
	white-space: nowrap;
}


/* マージン======================= */

.m-left {
	margin-left: auto;
}

.m-right {
	margin-right: auto;
}

.m-center {
	margin: 0 auto;
}

/*コンテンツ下余白なし*/
#content {
padding-top: 0;
margin-bottom: 0px;
}
.w-beforeFooter{
	margin: 0;
}


/* カラーボックス===================== */



/* テーブル========================= */

.c_table td{
	line-height: 1.8;
	padding: 15px 0;
}

/* 見出し========================== */

.sec-title {
  position: relative;
	top: 0;
	left: 50%;
	transform: translatex(-50%);
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
.sec-title :before {
  content: "";
  position: absolute;
  background: #faec0d;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 50%;
  border: dashed 1px #029d41;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
  box-shadow: 0px 0px 0px 5px #faec0d;
}


/* テキスト======================== */

.text-level01 {
	font-size: clamp(1.2rem, 2.5vw, 2.5rem);
	font-weight: 700;
	background: linear-gradient(90deg, #e2c727 ,#fcbe4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.text-level01 {
	font-size: 1.5rem;
		text-align: left;
}
}


/* フォントサイズ====================== */




/* ボタン========================= */

a.c_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	white-space: nowrap;
	height: 3.5rem;
	max-width: 300px;
	padding: 0 4rem;
	border: 1px solid #f4f4f4;
	border-radius: 100px;
	background-size: 400%;
	color: #fff;
	letter-spacing: 0.2rem;
	transition: border-color 0.5s ease;
}
a.c_btn:hover::before {
  transform: scaleX(1);
}
a.c_btn:hover {
	color: #fff;
}
a.c_btn span {
  position: relative;
  z-index: 1;
}
a.c_btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(30, 130, 175, 1) 10.8%,
    rgba(10, 91, 135, 1)94.3%
  );
  transition: all 0.475s;
}


/* ヘッダー=========================== */

.l-header__inner.l-container,
.l-fixHeader__inner.l-container {
	max-width: 2100px;
}

.c-gnav>.menu-item>a .ttl {
  font-weight: 500;
	color: #333;
font-size: clamp(0.85rem, 1vw, 1rem);
letter-spacing: .1rem;
}

.l-header .c-gnav>li>a:after {
	background: #f8b62d;
}

.l-header .c-gnav>.menu-item-446>a:after {
	display: none;
}

.c-gnav .sub-menu a {
	white-space: nowrap;
}

.menu-item-446 .ttl {
	background-color: #f8b62d;
	color: #fff!important;
	padding: 0.8rem 1rem;
	border-radius: 100px;
}

@media (min-width: 960px) {
    .-series-right .w-header {
        margin-left: 0;
    }
}

@media screen and (max-width:767px) {
	.p-spMenu__body .menu-item-446 {
		display: none;
	}
.l-header {
  padding: 10px 10px;
}
}

@media screen and (max-width:480px) {
	.recruit-bg {
	border-radius: 50px 0 50px 0;
}
	.swell-block-linkList.-border .swell-block-linkList__item {
	padding: 8px 0;
}
}

/*ヘッダー電話番号*/
@media (min-width: 960px) {
.w-header__inner p {
line-height: 1.5;
}
}

.header_contact_phone {
font-size: 1.4vw;
font-weight: 700;
	white-space: nowrap;
}
.header_contact_phone span.icon-phone {
font-size: 1.2vw;
vertical-align: baseline;
margin-right: 2px;
}
.header_business_hours {
font-size: 0.5vw;
letter-spacing: 2px;
	white-space: nowrap;
text-align: center;
}

	.header_phone_bg{
		padding: 0.5vw 1.2vw;
	}

/* お知らせ=========================== */

.news-outer {
	position: relative;
}

.news-outer:after {
	position: absolute;
  top: -50px;
  right: 0;
  content: "";
  background: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/pen-illust.png') center / contain no-repeat;
  width: 70px;
  height: 70px;
	z-index: 9999;
}

.newsList {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  list-style: none;
  background-color: #fdfdfd;
}

ul.newsList {
  width: 100%;
  padding: 1.5rem 1rem;
  margin: 15px auto;
  border-radius: 10px;
}

ul.newsList li {
  margin: 0 3px;
}

.news_date {
  width: 110px;
  flex: 0 0 110px;
  font-weight: bold;
  color: #777;
	line-height: 1.8!important
}

.news_badge {
  width: 48px;
  flex: 0 0 48px;
}

.news_new {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: #e60000;
  border-radius: 4px;
  letter-spacing: .02em;
}

.news_text {
  flex: 1;
}

.news_text p {
  margin: 0;
  color: #333;
  line-height: 1.8;
  white-space: normal;
}

.scroll {
	position: relative;
  overflow: auto;
  height: 100%;
  max-height: 300px;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #dfdfdf #fff;
}

.scroll::-webkit-scrollbar {
  width: 10px;
}

.scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media screen and (max-width: 768px) {
  .top-news-wrapper {
    width: 93%;
    margin: 0 auto;
  }

  .newsList {
    display: grid;
    grid-template-columns: 110px 48px 1fr;
    row-gap: 8px;
  }

  ul.newsList li {
    margin: 0;
  }

  .news_text {
    grid-column: 1 / -1;
  }

  .news_text p {
    margin-top: 0.5em;
  }

  .scroll {
    max-height: 400px;
  }
}


/* ページ共通========================= */

.wp-singular {
	position: relative;
	z-index: 0;
}

.wp-singular::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 50vh;
	background-image: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/sky.png');
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
}


/* メインビジュアル================= */

.p-mainVisual {
	position: relative;
	z-index: 0;
}

.p-mainVisual::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 50vh;
	background-image: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/sky.png');
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
}

.p-mainVisual__inner{
	position: relative;
	padding: 102px 3% 0;
	z-index: 1;
}

.p-mainVisual__inner img {
	position: relative;
	border-radius: 30px;
}

.main-copy-box {
	position: relative;
	top: 50px;
	left: 15%;
	display: inline-block;
}

.main-copy {
	font-family: "tot-shizukardgo-stdn", sans-serif;
font-weight: 500;
font-style: normal;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
	letter-spacing: 0.3rem;
	line-height: 2.5;
	writing-mode: vertical-rl;
	color: #fff;
}

.main-copy-box .swl-bg-color {
	padding: 1.2rem 0.8rem;
}


@media screen and (max-width:786px){
	.p-mainVisual__inner{
	padding: 80px 4% 0;
}
	.p-mainVisual__inner img {
	border-radius: 20px;
}
.mv-copy-box {
	top: 50px;
	left: 10%;
}
	.main-copy {
	font-family: "tot-shizukardgo-stdn", sans-serif;
font-weight: 500;
font-style: normal;
  font-size: 1.2rem;
	letter-spacing: 0.3rem;
	line-height: 2.8;
	writing-mode: vertical-rl;
	color: #fff;
}
}

@media screen and (max-width: 480px) {
	.main-copy-box {
	position: relative;
	top: 50px;
	left: 12%;
	display: inline-block;
}
}

/* トップ背景シェイプ=============== */

.sec4-outer {
  position: relative;
}

/* ▼ 緑の背景（左上） */
.sec4-outer::before {
  content: '';
  position: absolute;
  top: 15%; 
  left: -30%;
  width: 1200px;
  aspect-ratio: 1 / 1;
  background-image: url('https://www.e-sazankakai.or.jp/wp-content/uploads/2025/10/top-bg-green.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  opacity: 0.73;
  transform-origin: center center; /* 回転軸を画像の中心に */
}

/* ▼ 黄色の背景（右下） */
.sec4-outer::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -20%;
  width: 800px;
  aspect-ratio: 1 / 1;
  background-image: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/bg-yellow.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  opacity: 0.6;
  transform-origin: center center;
}


/* トップページ==================== */

/* 特徴 */
.top-service-outer {
	position: relative;
}

.top-service-outer:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/top-contents-bg1.jpg');
/* 	background: linear-gradient(208deg,rgba(69, 185, 247, 0.2) 0%, rgba(36, 89, 133, 0.1) 100%); */
	width: 100%;
	height: 400px;
	z-index: 0;
}

.top-service-textbox01,
.top-service-textbox02{
	position: relative;
}

.top-service-textbox01:after {
	position: absolute;
  top: -30px;
  right: 10%;
  content: "";
  background: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/plan-illust.png') center / contain no-repeat;
  width: 70px;
  height: 70px;
	z-index: 9999;
}

.top-service-textbox02:after {
	position: absolute;
  top: -30px;
  right: 10%;
  content: "";
  background: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/reinbow-illust.png') center / contain no-repeat;
  width: 90px;
  height: 90px;
	z-index: 9999;
}

.support-item {
	overflow: hidden;
	background-color: #fff;
	height: 100%;
	border-radius: 15px;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.support-contents {
	padding: 1rem 2rem 0;
}

/* 診療内容 */
/* 共通：アニメーション用 */
.img-wrap {
  position: relative;
  overflow: hidden;
	width: 100%;
  height: auto;
	border-radius: 50px;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 黒幕アニメーション */
.img-wrap::before {
  animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #f9f9f9;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  animation-play-state: paused;
}

.img-wrap.is-show::before {
  animation-play-state: running;
}

@keyframes img-wrap {
  100% { transform: translateX(100%); }
}

/* ページ共通========================= */

.page-hero {
	border-radius: 15px;
}

/* 診療所ご紹介======================== */

/* 診療所ギャラリー */
.gallery {
  max-width: 900px;
  margin: 0 auto;
}

.gallery input {
  display: none;
}

/* 上のアクティブ画像 */
.gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #eee;
	border-radius: 20px;
  overflow: hidden;
}

.gallery__main .main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

/* 選択中の画像だけ表示 */
#img1:checked ~ .gallery__main .main1,
#img2:checked ~ .gallery__main .main2,
#img3:checked ~ .gallery__main .main3,
#img4:checked ~ .gallery__main .main4,
#img5:checked ~ .gallery__main .main5,
#img6:checked ~ .gallery__main .main6,
#img7:checked ~ .gallery__main .main7,
#img8:checked ~ .gallery__main .main8,
#img9:checked ~ .gallery__main .main9{
  opacity: 1;
}

/* サムネイル */
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.gallery__thumbs label {
  display: block;
  aspect-ratio: 3 / 2;
  cursor: pointer;
	border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
}

.gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 選択中サムネイル */
#img1:checked ~ .gallery__thumbs label[for="img1"],
#img2:checked ~ .gallery__thumbs label[for="img2"],
#img3:checked ~ .gallery__thumbs label[for="img3"],
#img4:checked ~ .gallery__thumbs label[for="img4"],
#img5:checked ~ .gallery__thumbs label[for="img5"] {
  border-color: #333;
}

/* スマホ */
@media (max-width: 600px) {
  .gallery__thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* 診療時間・アクセス================= */

.map-wrapper {
	border: 15px solid #FAC400;
	width: 100%;
  overflow: hidden; /* はみ出た角を隠す */
  border-radius:50px; /* お好みの角丸のサイズ */
}

.map-wrapper iframe {
  display: block;
  border: none;
}

/* 免疫療法=========================== */

.fukusayou-item {
	background-color: #f7f7f7;
	padding: 2rem;
	border-radius: 15px;
}

.wakuchin-item {
	background-color: #fff;
	padding: 3rem 4rem;
	border-radius: 15px;
}

@media (max-width: 600px) {
  .wakuchin-item {
	background-color: #fff;
	padding: 1.5rem;
	border-radius: 15px;
}
}

/* お問い合わせボックス================ */

.contact-box {
	position: relative;
}

.contact-box-outer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}

.contact-box-img {
	height: 60vh;
	background-image: url('https://www.sakaguchi-kodomo.com/wp-content/uploads/2026/06/contact-box-bg.jpg');
	border-radius: 80px 80px 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.info-section {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  position: relative;
}

.info-section::before {
  content: "";
  position: absolute;
  top: 10%;
  height: 80%;
  width: 1px;
  left: 50%;
  background-color: #484d27;
  opacity: 0.5;
  transform: translateX(-50%);
  z-index: 1;
}

a.info-box {
  flex: 1 1 50%;
  padding: 40px 5%;
  background-color: #e2ba34;
  transition: background-color 0.3s ease;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  z-index: 0;
}

/* 左側のinfo-box */
.info-section a.info-box:first-child {
  border-radius: 10px 0 0 10px; /* 左上・左下だけ */
}

/* 右側のinfo-box */
.info-section a.info-box:last-child {
  border-radius: 0 10px 10px 0; /* 右上・右下だけ */
}

a.info-box:first-of-type {
    border-right: 1px solid #f4f4f4;
  }


a.info-box:hover {
  background-color: #d1ab30;
}


.info-en {
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  margin: 0;
}

.info-ja {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 500;
  font-style: normal;
}

.info-ja i {
  margin-right: 0.5em;
  color: #fff; 
  font-size: 0.8em;
}


@media screen and (max-width: 768px) {
	
.contact-box-outer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -80%);
	width: 80%;
}
	.contact-box-img {
		border-radius: 30px 30px 0 0;
		background-size: 230%;
		background-position: center 95%;
	height: 60vh;
}
	.contact-box-black {
		height: 150px;
	}
	.info-section::before {
    display: none;
  }
	
	
/* 左側のinfo-box */
.info-section a.info-box:first-child {
  border-radius: 10px 10px 0 0; /* 左上・左下だけ */
}

/* 右側のinfo-box */
.info-section a.info-box:last-child {
  border-radius: 0 0 10px 10px; /* 右上・右下だけ */
}

  /* 1つ目のボックスに相対位置をつける */
  a.info-box:first-of-type {
    border-bottom: 1px solid #f4f4f4;
		border-right: none;
  }

  a.info-box {
    flex: 1 1 100%;
    height: 200px;
  }

  .info-en {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
	.contact-box-outer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
	width: 80%;
}
	a.info-box {
		height: 100%;
  }
	.contact-box-img {
		border-radius: 30px 30px 0 0;
		background-size: 280%;
		background-position: center 95%;
	height: 100vh;
}
}


/* フッター=================== */

@media screen and (max-width:768px){
	#nav_menu-2 {
	display: none;
}
	#nav_menu-3 {
	display: none;
}
}

/*ぱんクズリスト非表示*/
#breadcrumb {
 display: none;
}

/*reCAPTCHA全面表示*/
.grecaptcha-badge {
	z-index: 1; 
}